* {
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f4f7f6;
    margin: 0;
    padding: 20px;
}

.header {
    text-align: center;
    margin-bottom: 20px;
}

.container {
    display: flex;
    gap: 20px;
}

.left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.right-panel {
    flex: 2; /* Cột chứa cây to gấp đôi cột data */
}

.card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card input {
    width: 100%;            
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.tree-card {
    height: 100%;
}

input, button {
    padding: 10px;
    margin: 5px 0;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ccc;
}

button {
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

button:hover { background-color: #218838; }
.btn-danger { background-color: #dc3545; }
.btn-danger:hover { background-color: #c82333; }
.btn-search { background-color: #007bff; }
.btn-search:hover { background-color: #0069d9; }

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

th { background-color: #f2f2f2; }

/* --- CSS CỦA D3.JS (VẼ CÂY) --- */
.node rect {
    fill: #fff;
    stroke: #007bff;
    stroke-width: 2px;
    rx: 5; /* Bo góc */
    ry: 5;
}

.node text {
    font: 14px sans-serif;
    text-anchor: middle;
    font-weight: bold;
}

.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 2px;
}

.tree-card {
    width: 100%;
    overflow-x: auto; 
    overflow-y: hidden;
    background: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    min-height: 550px;
}

#btree-svg {
    display: block;
    /* Không dùng width: 100% ở đây vì SVG sẽ bị bóp méo */
}

#student-table th:nth-child(3), 
#student-table td:nth-child(3) {
    min-width: 250px; 
    text-align: left;
}

#student-table {
    width: 100%;
    table-layout: auto;
}