/* CSS cho layout */
.container {
    display: flex;
}

.left-sidebar,
.main-content {
    overflow-y: auto;
    padding: 20px;
    max-height: 850px;
    /* Chiều cao cố định */
}

.left-sidebar {
    flex: 1;
    background-color: #f0f0f0;
    width: 25%;
}

.main-content {
    flex: 3;
}

.Book01 {
    background-color: #dffde9;
}
.Book02 {
    background-color: #fdfadf;
}
.Book03 {
    background-color: #f7dffd;
}
.menu-item {
    padding: 10px;
    border-bottom: 1px solid #e2e2e2;
    transition: background-color 0.3s;
}

.menu-item:hover {
    background-color: #e0e0e0;
    cursor: pointer;
}

.menu-item-active {
    padding: 10px;
    background-color: #fff266;
    border-bottom: 1px solid #fff266;
    transition: background-color 0.3s;
}

.menu-item-active:hover {
    background-color: #cfc554;
    /* cursor: pointer; */
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    transition: background-color 0.3s;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #f5f5f5;
}

tr:hover {
    background-color: #e0e0e0;
}

table tr td:first-child {
    font-size: xx-large;
}

table tr td:nth-child(2) {
    font-weight: bold;
}

.kj-scrollable {
    overflow: scroll;
}

/* width */
.kj-scrollable::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.kj-scrollable::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.kj-scrollable::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
.kj-scrollable::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#showHideBtn {
    position: fixed;
    bottom: 1em;
    left: 1em;
}