/* Reset và thiết lập cơ bản */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* background: linear-gradient(135deg, #9eb0ff 0%, #91a1f1 100%); */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}

/* Header - thanh tiêu đề phía trên */
.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 5px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}



.book-title {
    /* font-size: 1.8rem; */
    font-family: "Pinyon Script", cursive;
    font-weight: bold;
    font-style: normal;
    color: #092fd6;
    text-align: center;
    /* flex: 1; */
    margin: 0 20px;
}

/* Nút trong header */
.btn-back,
.btn-info {
    background: linear-gradient(135deg, #0627b8, #1215b4);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-back:hover,
.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-back:active,
.btn-info:active {
    transform: translateY(0);
}

/* Main content - vùng chứa sách */
.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    overflow: hidden;

}


/* Container của sách */
#book-container {
    position: relative;
    transition: width 0.5s ease-in-out, margin-left 0.5s ease-in-out;

}

/* Wrapper của sách do thư viện tạo */
#book-container .stf__wrapper {
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.4);
    /* border-radius: 12px; */
    /* background: #d30909; */
    transition: all 0.3s ease;
    /* border: #03ee6d 5px solid; */
}


/* Wrapper cho panzoom - Layer trung gian */
.panzoom-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: transform 0.1s ease-out;
    /* Smooth transform */
    transform-origin: center center;
    /* Zoom từ trung tâm */
}

.panzoom-wrapper.dragging {
    transition: none;
    /* Tắt transition khi drag */
}





/* Đổ bóng cho chính quyển sách (wrapper do thư viện tạo) */
/* #book-container .stf__wrapper {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    background: ffff0a;
} */

.my-page {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;

}



/* Start Footer - thanh bản quyền phía dưới */
.footer {
    background: rgba(255, 255, 255, 0.95);
    padding: 5px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Đặt khoảng cách giữa các mục con Flexbox là 15px. */
    gap: 10px;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    /* Cho phép các mục con Flexbox xuống dòng (wrap) khi không đủ không gian theo chiều ngang, */
    flex-wrap: wrap;
}

/* Style chung cho tất cả các button trong footer */
.footer button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

/* Hover effect cho button */
.footer button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
}


/* End Footer - thanh bản quyền phía dưới */


/* Start Popup */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Container của popup */
.popup-container {
    background: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.popup-overlay.active .popup-container {
    transform: scale(1);
}

/* Nút đóng popup */
.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff6b6b;
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
}

.popup-close:hover {
    background: #ff5252;
    transform: rotate(90deg);
}

/* Nội dung popup */
.popup-content {
    text-align: center;
}

.popup-icon {
    font-size: 60px;
    color: #667eea;
    margin-bottom: 20px;
}

.popup-content h2 {
    color: #333;
    margin-bottom: 30px;
    font-size: 28px;
}

/* Các item thông tin trong popup */
.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    text-align: left;
    transition: all 0.3s ease;
}

.info-item:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

.info-item i {
    font-size: 24px;
    color: #667eea;
    min-width: 24px;
}

.info-item strong {
    color: #333;
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}

.info-item p {
    color: #666;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Scrollbar tùy chỉnh cho popup */
.popup-container::-webkit-scrollbar {
    width: 8px;
}

.popup-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.popup-container::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

.popup-container::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}


/* End Popup */


/* CSS cho pseudo-fullscreen */
.pseudo-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background-color: #f5f5f5 !important;
    overflow: hidden !important;
}

/* Start search */
/* Container chính của search */
.search-container {
    position: relative;
    flex: 1;
    max-width: 400px;
    margin: 0 10px;
}

/* Wrapper cho input search */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;

}

/* Input tìm kiếm */
.search-input {
    width: 400px;
    padding: 5px 50px 5px 15px;
    /* Top: 10px, Right: 50px (chừa chỗ cho icon), Bottom: 10px, Left: 15px */
    /* SỬA LẠI: Tăng padding phải để chừa chỗ cho cả search icon và clear button */
    /* Padding phải để chừa chỗ cho icon */
    border: 2px solid #ffffff;
    border-radius: 25px;
    font-size: 14px;
    background-color: rgba(221, 216, 216, 0.95);
    color: #333;
    transition: all 0.3s ease;
    outline: none;
}

/* Focus state cho input */
/* Focus state cho input */
.search-input:focus {
    border-color: #03ee6d;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(3, 238, 109, 0.3);
}

/* Icon tìm kiếm */
.search-icon {
    position: absolute;
    right: 10px;
    /* SỬA LẠI: Tăng khoảng cách để không bị đè bởi nút clear */
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
    font-size: 16px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Thêm transition cho hiệu ứng mượt */
    opacity: 1;
    /* Hiển thị mặc định */
    visibility: visible;
}

/* Ẩn icon search khi input có text */
.search-icon.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Nút xóa tìm kiếm */
.clear-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 59, 48, 0.1);
    /* Nền đỏ nhạt */
    border: none;
    color: #ff3b30;
    /* Màu đỏ */
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* Ẩn mặc định */
    visibility: hidden;
    /* Ẩn mặc định */
    transform: translateY(-50%) scale(0.8);
    /* Thu nhỏ ban đầu */
}

/* Hiển thị nút clear khi có class 'visible' */
.clear-search-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
    /* Phóng to về kích thước bình thường */
}

.clear-search-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #333;
    transform: translateY(-50%) scale(1.1);
    /* SỬA LẠI: Giữ vị trí Y khi hover */
}

/* Active state cho nút clear */
.clear-search-btn:active {
    transform: translateY(-50%) scale(0.95);
    /* Thu nhỏ khi click */
}

/* Dropdown kết quả tìm kiếm */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    max-height: 400px;
    overflow: hidden;
    margin-top: 5px;
    border: 1px solid #e0e0e0;
}

/* Header của dropdown kết quả */
.search-results-header {
    padding: 12px 15px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #dee2e6;
    font-weight: bold;
    color: #495057;
    font-size: 13px;
}

/* Container list kết quả */
.search-results-list {
    max-height: 350px;
    overflow-y: auto;
}

/* Từng item kết quả tìm kiếm */
.search-result-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.search-result-item:hover {
    background-color: #f8f9fa;
    border-left: 4px solid #03ee6d;
}

.search-result-item:last-child {
    border-bottom: none;
}

/* Thông tin trang trong kết quả */
.search-result-page {
    font-size: 12px;
    color: #6c757d;
    font-weight: bold;
}

/* Nội dung match trong kết quả */
.search-result-content {
    font-size: 14px;
    color: #495057;
    line-height: 1.4;
}

/* Highlight từ khóa tìm kiếm trong kết quả */
.search-highlight {
    background-color: #ffeb3b;
    color: #333;
    /* padding: 2px 4px; */
    border-radius: 3px;
    font-weight: bold;
}

/* Message khi không có kết quả */
.no-results {
    padding: 20px 15px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Highlight từ khóa tìm kiếm trong nội dung trang */
.page-highlight {
    background-color: #ffeb3b !important;
    color: #333 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-weight: bold !important;
    animation: highlightPulse 1.5s ease-in-out;
}

/* End search */



/* Start share qrcode */
.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 4000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9);
    /* Bắt đầu từ trong suốt */
    opacity: 0;
    /* Ẩn ban đầu */

}


.share-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.share-container {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    width: 90vw;
    max-width: 500px;
    max-height: 85vh;
    overflow: hidden;
    z-index: 1;
}

.share-header {
    padding: 5px 5px;
    background: linear-gradient(135deg, #2c5f7c, #4a90a4);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #ffffff20;
}

.share-header h3 {
    margin: 5px 15px;
    font-size: 18px;
    font-weight: 600;
}

.close-share-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-share-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.share-content {
    padding: 20px;
    max-height: calc(85vh - 80px);
    overflow-y: auto;
}

/* Share Link Section */
.share-link-section {
    margin-bottom: 30px;
}

.share-link-section label {
    display: block;
    margin-bottom: 8px;
    color: #495057;
    font-weight: 500;
    font-size: 14px;
}

.share-link-container {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.share-link-input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    color: #495057;
    background-color: #f8f9fa;
    font-family: monospace;
    transition: border-color 0.3s ease;
}

.share-link-input:focus {
    outline: none;
    border-color: #03ee6d;
    box-shadow: 0 0 0 3px rgba(3, 238, 109, 0.1);
}

.copy-link-btn {
    padding: 10px 15px;
    background-color: #03ee6d;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-link-btn:hover {
    background-color: #02cc5f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(3, 238, 109, 0.3);
}

.copy-link-btn.copied {
    background-color: #28a745;
}


.share-note {
    color: #6c757d;
    font-size: 13px;
    font-style: italic;
}

/* Share Buttons Section */
.share-buttons-section h4 {
    margin: 0 0 15px 0;
    color: #495057;
    font-size: 16px;
    font-weight: 500;
}

.share-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.share-btn {
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    color: white;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.qr-btn {
    background: linear-gradient(135deg, #6c757d, #495057);
}

.share-btn i {
    font-size: 16px;
}

/* QR Code Section */
.qr-section {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.qr-section h4 {
    margin: 0 0 15px 0;
    color: #495057;
    font-size: 16px;
    font-weight: 500;
}

.qr-code-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #e9ecef;
}

.qr-note {
    color: #6c757d;
    font-size: 13px;
    margin: 15px 0 0 0;
    font-style: italic;
}

/* End share qrcode  */


/* Start - Nút lật trang tiến và lùi trang */
.btn-prev,
.btn-next {
    position: fixed;
    /* Vị trí cố định trên màn hình */
    top: 50%;
    /* Căn giữa theo chiều dọc */
    transform: translateY(-50%);
    /* Dịch chuyển lên trên 50% để căn giữa chính xác */
    width: 40px;
    /* Chiều rộng nút: 60px */
    height: 40px;
    /* Chiều cao nút: 60px */
    background-color: rgba(83, 153, 233, 0.8);
    /* Màu nền nâu trong suốt 80% */
    color: #fdfaf7;
    /* Màu chữ kem nhạt */
    border: 2px solid #c2b5a3;
    /* Viền: nét liền, 2px, màu be */
    border-radius: 50%;
    /* Bo tròn thành hình tròn */
    font-size: 24px;
    /* Kích thước ký hiệu: 24px */
    cursor: pointer;
    /* Con trỏ chuột dạng tay khi di chuột qua */
    z-index: 1000;
    /* Độ ưu tiên hiển thị cao nhất */
    transition: all 0.3s ease;
    /* Hiệu ứng chuyển đổi mượt mà trong 0.3 giây */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    /* Bóng đổ: dịch xuống 4px, độ mờ 8px */

    opacity: 0.5;
}

/* Nút trang trước - Vị trí bên trái */
.btn-prev {
    left: 10px;
    /* Cách mép trái màn hình 20px */
}

/* Nút trang sau - Vị trí bên phải */
.btn-next {
    right: 10px;
    /* Cách mép phải màn hình 20px */
}


/* Hiệu ứng khi di chuột qua nút */
.btn-prev:hover,
.btn-next:hover {
    opacity: 0.9;
    background-color: rgb(31, 155, 226);
    /* Màu nền nâu đậm hơn (không trong suốt) */
    transform: translateY(-50%) scale(1.1);
    /* Phóng to 110% và giữ vị trí căn giữa */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    /* Bóng đổ đậm hơn khi hover */
}

/* End - Nút tiến và lùi trang */




/* ===== START Input nhảy trang ===== */
.page-navigation {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    padding: 0px 8px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.page-navigation:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Input nhập số trang */
.page-input {
    width: 45px;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: all 0.3s ease;
}

.page-input:focus {
    border-color: #03ee6d;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(3, 238, 109, 0.2);
    transform: scale(1.05);
}


.page-input:invalid {
    border-color: #ff3b30;
}

/* Dấu phân cách "/" */
.page-separator {
    color: darkblue;
    font-size: 14px;
    font-weight: 600;
}

/* Hiển thị tổng số trang */
.total-pages {
    color: darkblue;
    font-size: 14px;
    font-weight: 600;
    min-width: 25px;
    text-align: center;
}

/* Animation khi input invalid */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.page-input.invalid {
    animation: shake 0.3s ease;
    border-color: #ff3b30;
}

/* ===== END Input nhảy trang ===== */

/* ===== START CSS CHO THUMBNAIL MODAL =====*/
/* Modal overlay - che toàn bộ màn hình */
.thumbnail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

/* Overlay để click ra ngoài đóng modal */
.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;

}


/* Container chính chứa nội dung modal */
.thumbnail-container {
    position: relative;
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
    margin: 10px auto;
    /* Căn giữa theo cả 2 chiều ngang và dọc */

}

/* Header của modal */
.thumbnail-header {
    padding: 10px 25px;
    background: linear-gradient(135deg, #2c5f7c, #4a90a4);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #ffffff20;
}

.thumbnail-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* Nút đóng modal */
.close-thumbnail-btn {
    background: none;
    border: none;
    color: rgb(255, 255, 255);
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-thumbnail-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}


/* Grid container chứa tất cả thumbnail */
.thumbnail-grid {
    padding: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    max-height: 70vh;
    overflow-y: auto;
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
}

/* Scrollbar tùy chỉnh cho grid */
.thumbnail-grid::-webkit-scrollbar {
    width: 8px;
}

.thumbnail-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.thumbnail-grid::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.thumbnail-grid::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Item thumbnail riêng lẻ */
.thumbnail-item {
    background: white;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 3px solid transparent;
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

/* Hiệu ứng hover cho thumbnail */
.thumbnail-item:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    border-color: #03ee6d;
}

/* Container chứa ảnh thumbnail */
.thumbnail-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    background: #f8f9fa;
    height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ảnh thumbnail */
.thumbnail-image-container img {
    object-fit: contain;
    /* XÓA BỎ: object-fit: cover để không cắt ảnh */
    object-position: center;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 3px;
    transition: transform 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Hiệu ứng hover cho ảnh thumbnail */
.thumbnail-item:hover .thumbnail-image-container img {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Fallback khi không có ảnh */
.thumbnail-fallback {
    display: none;
    /* XÓa BỎ: Ẩn mặc định */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
    border: 2px dashed #dee2e6;
    width: 100%;
    height: 200px;
    border-radius: 5px;
}

/* Icon và text fallback */
.thumbnail-fallback i {
    color: #adb5bd;
    margin-bottom: 8px;
    font-size: 32px;
}

.thumbnail-fallback span {
    color: #6c757d;
    font-size: 11px;
    text-align: center;
}

/* Số trang ở dưới thumbnail */
.thumbnail-page-number {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    color: #6c757d;
    font-weight: bold;
}

/* Hiệu ứng loading khi tạo thumbnail */
.thumbnail-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: #666;
    font-size: 16px;
}

.thumbnail-loading i {
    margin-right: 10px;
    animation: spin 1s linear infinite;
}

/* XÓA BỎ: Loading state cho ảnh không có src - không cần thiết */

/* Animation cho loading */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Highlight thumbnail trang hiện tại */
.thumbnail-item.current-page {
    border: 3px solid #1b04f0 !important;
    /* Viền xanh lá đậm */
    box-shadow: 0 8px 20px rgba(3, 238, 109, 0.4) !important;
    /* Bóng xanh lá */
    transform: translateY(-3px) scale(1.02) !important;
    /* Nâng lên và phóng to nhẹ */
    background: linear-gradient(145deg, #ffffff, #f0fff4) !important;
    /* Nền trắng với hint xanh nhạt */
}

/* THÊM MỚI: Animation khi highlight */
.thumbnail-item.current-page {
    animation: currentPagePulse 2s ease-in-out;
    /* Animation pulse 1 lần */
}

@keyframes currentPagePulse {
    0% {
        box-shadow: 0 8px 20px rgba(3, 238, 109, 0.4);
    }

    50% {
        box-shadow: 0 12px 30px rgba(3, 238, 109, 0.7);
        transform: translateY(-5px) scale(1.05);
    }

    100% {
        box-shadow: 0 8px 20px rgba(3, 238, 109, 0.4);
        transform: translateY(-3px) scale(1.02);
    }
}

/* Hover effect cho trang hiện tại */
.thumbnail-item.current-page:hover {
    box-shadow: 0 15px 35px rgba(3, 238, 109, 0.6) !important;
    transform: translateY(-5px) scale(1.08) !important;
}


/* ===== END CSS CHO THUMBNAIL MODAL =====*/


/* ===== START CSS CHO TRANG BÌA VỚI VIDEO NỀN ===== */

/* Container trang bìa */
.cover-page {
    position: relative;
    overflow: hidden;
    background: #000;
}

/* Video nền fullscreen */
.cover-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

/* Overlay tối phủ lên video để làm nổi chữ */
.cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.4) 50%,
            rgba(0, 0, 0, 0.6) 100%);
    z-index: 2;
}

/* Container chứa nội dung trang bìa */
.cover-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 40px;
    text-align: center;
}

/* Tiêu đề chính - "Thế Giới Kỳ Diệu" */
.cover-title {
    font-size: 4rem;
    font-weight: 900;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 8px;
    line-height: 1.2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* Mỗi từ trong tiêu đề chính */
.title-word {
    display: inline-block;
    background: linear-gradient(45deg,
            #ff6b6b,
            #ffd93d,
            #6bcf7f,
            #4d96ff,
            #9d4edd);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
    animation: gradientShift 4s ease infinite;
}

/* Hiệu ứng gradient di chuyển */
@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Delay khác nhau cho mỗi từ để tạo hiệu ứng sóng */
.word-1 {
    animation-delay: 0s;
}

.word-2 {
    animation-delay: 0.2s;
}

.word-3 {
    animation-delay: 0.4s;
}

.word-4 {
    animation-delay: 0.6s;
}

/* Tiêu đề phụ - "Của Khủng Long" */
.cover-subtitle {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 30px 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 6px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mỗi từ trong tiêu đề phụ */
.subtitle-word {
    display: inline-block;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 107, 107, 0.6),
        0 0 30px rgba(157, 78, 221, 0.4);
    animation: glowPulse 2s ease-in-out infinite;
}

/* Hiệu ứng phát sáng nhấp nháy */
@keyframes glowPulse {

    0%,
    100% {
        text-shadow:
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 20px rgba(255, 107, 107, 0.6),
            0 0 30px rgba(157, 78, 221, 0.4);
        transform: scale(1);
    }

    50% {
        text-shadow:
            0 0 20px rgba(255, 255, 255, 1),
            0 0 30px rgba(255, 107, 107, 0.8),
            0 0 40px rgba(157, 78, 221, 0.6);
        transform: scale(1.05);
    }
}

/* Delay cho mỗi từ trong subtitle */
.subtitle-word:nth-child(1) {
    animation-delay: 0s;
}

.subtitle-word:nth-child(2) {
    animation-delay: 0.3s;
}

.subtitle-word:nth-child(3) {
    animation-delay: 0.6s;
}

/* Icon trang trí khủng long */
.cover-decoration {
    margin-top: 30px;
}

.cover-decoration i {
    font-size: 5rem;
    color: #ffd93d;
    animation: floatDragon 3s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 217, 61, 0.8));
}

/* Hiệu ứng lơ lửng cho icon khủng long */
@keyframes floatDragon {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) rotate(-5deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(-15px) rotate(5deg);
    }
}




/* ===== END CSS CHO TRANG BÌA VỚI VIDEO NỀN ===== */

/* START SEARCH TEXT */

.page-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 1;
    overflow: hidden;
}

.text-block {
    position: absolute;
    white-space: pre-wrap;
    word-wrap: break-word;
    /* DEBUG MODE: Bật để xem text */
    /* color: rgb(255, 0, 0) !important; */
    /* PRODUCTION: Sau khi test xong, comment 3 dòng trên và bật dòng dưới */
    color: transparent;
    user-select: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    word-spacing: normal;

}

/* Highlight overlay */
.keyword-highlight-overlay {
    position: absolute;
    background-color: rgba(16, 255, 107, 0.8) !important;
    pointer-events: none;
    z-index: 5;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.6);
}

/* Highlight từ khóa tìm kiếm */
.search-keyword-highlight {
    background-color: #ffeb3b !important;
    color: #000 !important;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
}

/* END SEARCH TEXT */

/* START MAP  */

.page-image-container {
    position: relative;
    /* Để chứa absolute positioned elements */
    height: 100%;
    /* Chiều cao 100% như page-image cũ */
    width: 100%;
}

.page-image-container .page-image {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: solid 1px #c2b5a3;
    border-radius: 5px;
}

/* THÊM MỚI: Button MAP ở góc dưới bên phải */
.map-toggle-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgba(44, 95, 124, 0.9);
    /* Màu xanh với độ trong suốt */
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    /* Đảm bảo hiển thị trên ảnh */
}

.map-toggle-btn:hover {
    background: rgba(44, 95, 124, 1);
    /* Đậm hơn khi hover */
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* THÊM MỚI: Animation cho icon transitions */
.map-toggle-btn .icon-map,
.map-toggle-btn .icon-close {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* THÊM MỚI: Map overlay che toàn bộ ảnh */
.overlay-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 17, 224, 0.1);
    z-index: 20;
    /* Cao hơn button MAP */
    border-radius: 5px;
    overflow: hidden;
}

/* Container chứa bản đồ OpenLayers */
.map-container {

    width: 100%;
    height: 100%;
    border-radius: 5px;
    /* Màu nền bản đồ để tránh ảnh bị đè lên */
    background-color: #ffffff;
}

/* Ghi đè transform cho canvas trong map để tránh bị lệch, full view map */
.map-container canvas {
    transform: none !important;
    /* Ghi đè transform từ parent */
}

/* END MAP  */

audio.page-audio {
    height: 30px;
}

/* ===== SOUND CONTROL PANEL ===== */
.sound-control-panel {
    position: fixed;
    bottom: 80px;
    /* Trên footer */
    right: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    padding: 0;
    z-index: 10000;
    min-width: 280px;
    overflow: hidden;
}

.sound-control-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sound-control-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sound-control-options {
    padding: 20px;
}

.sound-option {
    margin-bottom: 15px;
}

.sound-option:last-child {
    margin-bottom: 0;
}

.sound-option label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.sound-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
    accent-color: #ffffff;
}

.sound-label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sound-label i {
    font-size: 16px;
}

/* Animation hiển thị panel */
@keyframes slideInFromBottom {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.sound-control-panel.active {
    animation: slideInFromBottom 0.3s ease-out;
}

/* ===== SOUND TOGGLE BUTTON STYLES ===== */
.sound-toggle-btn {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
}

.sound-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.sound-toggle-btn:active {
    transform: scale(0.98);
}

.sound-toggle-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.sound-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
}

.sound-toggle-icon {
    font-size: 28px;
    display: flex;
    align-items: center;
}

/* Icon khi TẮT (màu xám) */
.sound-toggle-icon .icon-off {
    color: #6c757d;
}

/* Icon khi BẬT (màu xanh lá) */
.sound-toggle-icon .icon-on {
    color: #03ee6d;
}

/* Trạng thái ACTIVE (đã bật) */
.sound-toggle-btn.active {
    background: rgba(3, 238, 109, 0.1);
    border-color: rgba(3, 238, 109, 0.3);
}

.sound-toggle-btn.active:hover {
    background: rgba(3, 238, 109, 0.15);
}



/* Tạo đường phân cách gáy sách ở giữa */
.stf__wrapper .stf__item:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    opacity: 0.1;
    /* Tăng độ rộng để tạo hiệu ứng sâu hơn */
    height: 100%;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.05),
            /* Sáng nhẹ bên trái */
            rgba(0, 0, 0, 0.25),
            /* Tối ở giữa (gáy sách) */
            rgba(0, 0, 0, 0.4),
            /* Tối đậm nhất */
            rgba(0, 0, 0, 0.25),
            /* Tối ở giữa */
            rgba(0, 0, 0, 0.05)
            /* Sáng nhẹ bên phải */
        );
    box-shadow:
        inset -2px 0 4px rgba(0, 0, 0, 0.3),
        /* Bóng bên trong trái */
        inset 2px 0 4px rgba(0, 0, 0, 0.3),
        /* Bóng bên trong phải */
        0 0 8px rgba(0, 0, 0, 0.2);
    /* Bóng lan tỏa ra ngoài */
    pointer-events: none;
    /* Không chặn click */
}

/* ===== THÊM MỚI: CSS cho Bookmark Modal ===== */

/* Modal overlay - che toàn bộ màn hình */
.bookmark-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(46, 112, 143, 0.8);
    backdrop-filter: blur(5px);

}

/* Overlay để click ra ngoài đóng modal */
.bookmark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Container chính chứa nội dung modal */
.bookmark-container {
    position: relative;
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
    margin: 20px auto;
}

/* Header của modal */
.bookmark-header {
    padding: 8px 15px;
    background: linear-gradient(135deg, #2c5f7c, #4a90a4);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #ffffff20;
}

.bookmark-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.bookmark-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Nút thêm bookmark */
.add-bookmark-btn {
    background-color: #03ee6d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.add-bookmark-btn:hover {
    background-color: #02cc5f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(3, 238, 109, 0.3);
}


/* Nút đóng modal */
.close-bookmark-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-bookmark-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Nội dung modal */
.bookmark-content {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1;
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
}

/* Danh sách bookmark */
.bookmark-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Trạng thái rỗng */
.empty-bookmarks {
    text-align: center;
    padding: 20px 10px;
    color: #6c757d;
}

.empty-bookmarks p {
    margin: 5px 0;
    font-size: 16px;
}

.empty-subtitle {
    font-size: 14px !important;
    color: #adb5bd !important;
}

/* Item bookmark riêng lẻ */
.bookmark-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #03ee6d;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}

.bookmark-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-left-color: #2c5f7c;
}

/* Header của bookmark item */
.bookmark-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.bookmark-info h4 {
    margin: 0 0 5px 0;
    color: #2c5f7c;
    font-size: 16px;
    font-weight: 600;
}

.bookmark-page {
    color: #6c757d;
    font-size: 13px;
    font-weight: 500;
}

/* Actions của bookmark */
.bookmark-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}


.bookmark-action-btn {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-bookmark-btn {
    color: #ffc107;
}

.edit-bookmark-btn:hover {
    background-color: #fff3cd;
    color: #856404;
}

.delete-bookmark-btn {
    color: #dc3545;
}

.delete-bookmark-btn:hover {
    background-color: #f8d7da;
    color: #721c24;
}

/* Ghi chú bookmark */
.bookmark-note {
    color: #495057;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 8px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #03ee6d;
}

/* Ngày tạo */
.bookmark-date {
    color: #adb5bd;
    font-size: 12px;
    margin-top: 8px;
    text-align: right;
}

/* ===== THÊM MỚI: CSS cho Modal Input Bookmark ===== */
.bookmark-input-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3100;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
}

.bookmark-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.bookmark-input-container {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    width: 90vw;
    max-width: 500px;
    z-index: 1;
    overflow: hidden;
    margin: 20px auto;
}

.bookmark-input-header {
    padding: 20px 25px 15px;
    background: linear-gradient(135deg, #2c5f7c, #4a90a4);
    color: white;
    text-align: center;
}

.bookmark-input-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.bookmark-input-content {
    padding: 25px;
}

.bookmark-input-field {
    margin-bottom: 20px;
}

.bookmark-input-field label {
    display: block;
    margin-bottom: 8px;
    color: #495057;
    font-weight: 500;
    font-size: 14px;
}

.bookmark-name-input,
.bookmark-note-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    color: #495057;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.bookmark-name-input:focus,
.bookmark-note-input:focus {
    border-color: #03ee6d;
    box-shadow: 0 0 0 3px rgba(3, 238, 109, 0.1);
}

.bookmark-note-input {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}

.bookmark-input-actions {
    padding: 0 25px 25px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.cancel-bookmark-btn,
.save-bookmark-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cancel-bookmark-btn {
    background-color: #6c757d;
    color: white;
}

.cancel-bookmark-btn:hover {
    background-color: #5a6268;
}

.save-bookmark-btn {
    background-color: #03ee6d;
    color: white;
}

.save-bookmark-btn:hover {
    background-color: #02cc5f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(3, 238, 109, 0.3);
}

/* ===== KẾT THÚC: CSS cho Bookmark ===== */


/* ===== THÊM MỚI: CSS cho Login Modal ===== */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 4000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
}

.login-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.login-container {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    width: 90vw;
    max-width: 400px;
    z-index: 1;
    overflow: hidden;

    margin: 20px auto;
}

.login-header {
    padding: 8px 15px;
    background: linear-gradient(135deg, #2c5f7c, #4a90a4);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.close-login-btn {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-login-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.login-content {
    padding: 25px;
}

.login-field {
    margin-bottom: 20px;
}

.login-field label {
    display: block;
    margin-bottom: 8px;
    color: #495057;
    font-weight: 500;
    font-size: 14px;
}

.login-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    color: #495057;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.login-input:focus {
    border-color: #03ee6d;
    box-shadow: 0 0 0 3px rgba(3, 238, 109, 0.1);
}

.login-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 25px;
}

.cancel-login-btn,
.submit-login-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cancel-login-btn {
    background-color: #6c757d;
    color: white;
}

.cancel-login-btn:hover {
    background-color: #5a6268;
}

.submit-login-btn {
    background-color: #03ee6d;
    color: white;
}

.submit-login-btn:hover {
    background-color: #02cc5f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(3, 238, 109, 0.3);
}

.login-demo-info {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #17a2b8;
}

.login-demo-info p {
    margin: 5px 0;
    font-size: 13px;
    color: #495057;
}

.login-demo-info code {
    background-color: #e9ecef;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: #e83e8c;
}

/* ===== THÊM MỚI: CSS cho User Info ===== */
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: rgba(255, 255, 255, 0.95);
    color: #2c5f7c;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-welcome {
    font-weight: 500;
}

.logout-btn {
    background: none !important;
    border: none !important;
    color: #dc3545 !important;
    padding: 6px !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    min-width: auto !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

.logout-btn:hover {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    transform: none !important;
}

/* ===== KẾT THÚC: CSS cho Login ===== */


/* 3D Model Viewer Loading */
.model-3d-loading {
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.model-3d-loading i {
    display: block;
    color: #6c757d;
}

.model-3d-loading p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

/* 3D Viewer Controls */
.controls-3d {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100000;
}

.btn-3d-control {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    color: #495057;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-3d-control:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #007bff;
}

.btn-3d-control:active {
    transform: scale(0.95);
}

.btn-3d-control.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}


/* 3D Model Viewer Loading */


/* START overview map container */
/* Ghi đè transform cho canvas trong map để tránh bị lệch, full view map */
.overviewMap-container canvas {
    transform: none !important;
    /* Ghi đè transform từ parent */
}

.map-page11-container canvas {
    transform: none !important;
    /* Ghi đè transform từ parent */
}

.map-thanglong-container canvas {
    transform: none !important;
    /* Ghi đè transform từ parent */
}

/* END overview map container */



/* ===== ALBUM BUTTON ===== */
.btn-open-album:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-open-album:active {
    transform: translateY(0);
}

/* ===== ALBUM MODAL ===== */
.album-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.album-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.album-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 1200px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.album-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 2px solid #f0f0f0;
}

.album-header h2 {
    margin: 0;
    font-size: 24px;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 10px;
}

.album-close-btn {
    background: #dc3545;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.album-close-btn:hover {
    background: #c82333;
    transform: rotate(90deg);
}

.album-body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.album-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    aspect-ratio: 4/3;
}

.album-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.album-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.album-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 15px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.album-item:hover .album-item-overlay {
    transform: translateY(0);
}

.album-item-title {
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

/* ===== LIGHTBOX ===== */
.album-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: #dc3545;
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    background: #c82333;
    transform: rotate(90deg);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev {
    left: -80px;
}

.lightbox-next {
    right: -80px;
}

.lightbox-caption {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    font-size: 16px;
    font-weight: 500;
}

/* ===== END ALBUMS ẢNH ===== */

/* ===== QUIZ MODAL STYLES ===== */
.quiz-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.quiz-container {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 1;
    animation: quizSlideIn 0.4s ease-out;
}

@keyframes quizSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header */
.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 2px solid #f0f0f0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px 16px 0 0;
}

.quiz-header h2 {
    margin: 0;
    color: white;
    font-size: 22px;
    font-weight: 600;
}

.btn-close-quiz {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-close-quiz:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Progress Bar */
.quiz-progress {
    position: relative;
    padding: 20px 25px 15px;
    background: #f8f9fa;
}

.quiz-progress-bar {
    height: 8px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    transition: width 0.4s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.quiz-progress-text {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #6c757d;
    font-weight: 600;
}

/* Quiz Content */
.quiz-content {
    padding: 25px;
    min-height: 300px;
}

.quiz-question {
    animation: questionFadeIn 0.4s ease-out;
}

@keyframes questionFadeIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.quiz-question-title {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 20px;
    line-height: 1.6;
}

.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-answer-item {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 15px 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.quiz-answer-item:hover {
    border-color: #667eea;
    background: #f0f3ff;
    transform: translateX(5px);
}

.quiz-answer-item.selected {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    font-weight: 500;
}

.quiz-answer-item.correct {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-color: #28a745;
    color: white;
}

.quiz-answer-item.incorrect {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-color: #dc3545;
    color: white;
}

.quiz-answer-item.disabled {
    pointer-events: none;
    opacity: 0.7;
}

.quiz-answer-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.quiz-answer-item.selected .quiz-answer-letter,
.quiz-answer-item.correct .quiz-answer-letter,
.quiz-answer-item.incorrect .quiz-answer-letter {
    color: currentColor;
    background: rgba(255, 255, 255, 0.3);
}

.quiz-answer-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
}

/* Actions */
.quiz-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 25px;
    border-top: 2px solid #f0f0f0;
}

.btn-quiz-nav,
.btn-quiz-submit {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-quiz-nav {
    background: #6c757d;
    color: white;
}

.btn-quiz-nav:hover {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-quiz-submit {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    margin-left: auto;
}

.btn-quiz-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

/* Results */
.quiz-results {
    padding: 40px 25px;
    text-align: center;
    animation: resultsFadeIn 0.5s ease-out;
}

@keyframes resultsFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.quiz-score-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.quiz-score-text {
    font-size: 48px;
    font-weight: 700;
    color: white;
}

#quiz-result-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #212529;
}

#quiz-result-message {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 25px;
    line-height: 1.6;
}

.btn-quiz-retry {
    padding: 14px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-quiz-retry:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* start yêu thích */
/* ===== NÚT YÊU THÍCH ===== */
#btn-favorite {
    transition: transform 0.2s ease, color 0.2s ease;
}

#btn-favorite:hover {
    transform: scale(1.2);
}

#btn-favorite.favorited #favorite-icon {
    color: #e74c3c;
    animation: heartBeat 0.4s ease;
}

#btn-favorite:not(.favorited) #favorite-icon {
    color: rgba(255, 255, 255, 0.7);
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.4);
    }

    60% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* ===== TOAST NOTIFICATION ===== */
.favorite-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 99999;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.favorite-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* end yêu thích */



/* ===== READER TOC - POLISHED, ALIGNED ===== */
#btn-toc {
    color: #0f172a;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
}

#btn-toc:hover {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35);
    transform: translateY(-2px);
}

#toc-modal .thumbnail-container {
    width: min(92vw, 560px);
    max-height: 80vh;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(59, 130, 246, 0.10), transparent 45%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.35), 0 2px 6px rgba(2, 6, 23, 0.12);
    animation: tocModalIn 0.24s ease-out;
}

#toc-modal .thumbnail-header {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(4px);
}

#toc-modal .thumbnail-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.2px;
}

#toc-loading,
#toc-empty,
#toc-error {
    margin: 14px 14px 0;
    border-radius: 12px;
    font-size: 14px;
    border: 1px solid transparent;
}

#toc-loading {
    color: #1e40af;
    background: #dbeafe;
    border-color: #bfdbfe;
}

#toc-empty {
    color: #475569;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

#toc-error {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}

#toc-list {
    margin: 14px;
    padding: 0 4px 0 0;
    max-height: calc(80vh - 132px);
    overflow-y: auto;
}

#toc-list::-webkit-scrollbar {
    width: 8px;
}

#toc-list::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 999px;
}

#toc-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #94a3b8, #64748b);
    border-radius: 999px;
}

/* Row luôn full width để mép phải thẳng tuyệt đối */
#toc-list .list-group-item {
    --toc-level: 0;
    --toc-step: 22px;

    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px 0 !important;
    padding: 12px 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;

    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    transition: all 0.2s ease;
}

#toc-list .list-group-item:last-child {
    margin-bottom: 2px !important;
}

#toc-list .list-group-item::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    opacity: 0.85;
}

/* Thụt lề bên trái theo level nhưng không làm co chiều ngang row */
#toc-list .toc-row-main {
    min-width: 0;
    flex: 1 1 auto;
    padding-left: calc(10px + var(--toc-level) * var(--toc-step));
    display: block;
    text-align: left;
}

#toc-list .list-group-item strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

#toc-list .list-group-item small {
    margin-left: 8px;
    color: #64748b !important;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
}

#toc-list .list-group-item i.fa-chevron-right {
    flex: 0 0 auto;
    color: #94a3b8 !important;
    transition: transform 0.2s ease, color 0.2s ease;
}

#toc-list .list-group-item:hover {
    border-color: #bfdbfe;
    background: #f8fbff;
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.15);
}

#toc-list .list-group-item:hover i.fa-chevron-right {
    transform: translateX(3px);
    color: #2563eb !important;
}

#toc-list .list-group-item:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

@keyframes tocModalIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    #toc-modal .thumbnail-container {
        width: 94vw;
        max-height: 84vh;
        border-radius: 16px;
    }

    #toc-list .list-group-item {
        padding: 11px 12px !important;
    }

    #toc-list .list-group-item strong {
        font-size: 13px;
    }

    #toc-list .list-group-item small {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        white-space: normal;
    }
}

/* Row TOC: indent cả button nhưng vẫn giữ mép phải thẳng */
#toc-list .list-group-item {
    --toc-level: 0;
    --toc-step: 20px;
    --toc-indent: calc(var(--toc-level) * var(--toc-step));

    position: relative;
    box-sizing: border-box;

    /* Quan trọng: thụt toàn bộ row theo level */
    margin: 0 0 10px var(--toc-indent) !important;

    /* Quan trọng: trừ ngược chiều rộng để mép phải luôn bằng nhau */
    width: calc(100% - var(--toc-indent));

    padding: 12px 14px 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;

    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    transition: all 0.2s ease;
}

#toc-list .list-group-item:last-child {
    margin-bottom: 2px !important;
}

/* Thanh nhấn bên trái đi theo level luôn */
#toc-list .list-group-item::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    opacity: 0.85;
}

/* Không thụt text riêng nữa, để whole button tự thụt */
#toc-list .toc-row-main {
    min-width: 0;
    flex: 1 1 auto;
    padding-left: 0;
    display: block;
    text-align: left;
}

#toc-list .list-group-item i.fa-chevron-right {
    flex: 0 0 auto;
    color: #94a3b8 !important;
    transition: transform 0.2s ease, color 0.2s ease;
}




/* start chat wiki */
.chat-fab {
    position: fixed;
    right: 18px;
    bottom: 88px;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.35);
    z-index: 10020;
    cursor: pointer;
}

.chat-fab:hover {
    transform: translateY(-2px);
}

.chat-modal {
    position: fixed;
    inset: 0;
    z-index: 10030;
    display: none;
    align-items: center;
    justify-content: center;
}

.chat-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.chat-container {
    position: relative;
    width: min(92vw, 460px);
    height: min(78vh, 640px);
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.chat-close-btn {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    color: #475569;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #f8fafc;
}

.chat-msg {
    max-width: 90%;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.4;
}

.chat-msg.user {
    margin-left: auto;
    background: #dbeafe;
}

.chat-msg.bot {
    margin-right: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.chat-input-wrap {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

#chat-input {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
}

#chat-send-btn {
    border: none;
    border-radius: 10px;
    padding: 0 14px;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 768px) {
    .chat-fab {
        right: 14px;
        bottom: 78px;
    }

    .chat-container {
        width: 96vw;
        height: 80vh;
    }
}

/* end chat wiki */

/* map */
Chào bạn, cấu trúc HTML bạn dựng cho component bản đồ này khá logic và rất phù hợp để làm các ứng dụng web GIS hoặc dashboard. Việc bạn giữ các style động (top, left, width, rotate...) ở dạng inline style và dùng class cho các thành phần tĩnh là một practice rất tốt.

Để làm cho giao diện này trở nên chuyên nghiệp, hiện đại và mang lại trải nghiệm người dùng (UX) tốt hơn, mình sẽ áp dụng phong cách thiết kế Modern/Glassmorphism với các đặc điểm: bóng đổ mềm (soft shadow), bo góc (rounded corners), hiệu ứng hover mượt mà và tối ưu hóa các thẻ input/button.

Dưới đây là đoạn CSS hoàn chỉnh bạn có thể nạp vào dự án của mình:

CSS
/* ==========================================================================
   BIẾN CSS DÙNG CHUNG (Tùy chỉnh màu sắc dễ dàng)
   ========================================================================== */
/* ==========================================================================
   CONTAINER BẢN ĐỒ
   ========================================================================== */
.overlay-map {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: border-color 0.3s ease;
}

/* Hiệu ứng sáng viền khi hover vào khu vực map */
.overlay-map:hover {
    border-color: #2ecc71 !important; 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Label vị trí ở góc trên */
.overlay-map .overlay-label {
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.4);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: capitalize;
}

/* ==========================================================================
   HỆ THỐNG NÚT BẤM (CONTROLS)
   ========================================================================== */
.custom-map-btn {
    background-color: #ffffff;
    color: #2c3e50;
    border: 1px solid #dfe4ea;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s ease-in-out;
    font-size: 15px;
    outline: none;
    padding: 0;
}

.custom-map-btn:hover {
    background-color: #2ecc71;
    color: #ffffff;
    border-color: #2ecc71;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
}

.custom-map-btn:active {
    transform: scale(0.95);
}

/* Nút định vị nổi bật hơn chút */
.btn-locate {
    color: #3498db;
}
.btn-locate:hover {
    background-color: #3498db;
    border-color: #3498db;
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

/* ==========================================================================
   PANEL QUẢN LÝ LỚP BẢN ĐỒ (LAYER PANEL)
   ========================================================================== */
.map-layer-panel {
    position: absolute;
    right: 55px; /* Căn sang trái hệ thống nút bấm */
    bottom: 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px); /* Hiệu ứng kính mờ (Glassmorphism) */
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #dfe4ea;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    width: 280px;
    z-index: 15;
    overflow: hidden;
}

.map-layer-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #dfe4ea;
    font-weight: 600;
    font-size: 13px;
    color: blue;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Nút thu gọn trong header */
.map-layer-panel-header .custom-map-btn.mini {
    width: 24px;
    height: 24px;
    font-size: 12px;
    box-shadow: none;
    border: none;
    background: transparent;
    color: #7f8c8d;
}
.map-layer-panel-header .custom-map-btn.mini:hover {
    background-color: rgba(0,0,0,0.06);
    color: #2c3e50;
    transform: none;
}

.js-map-layer-panel-body {
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 220px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
}

/* Tùy chỉnh thanh cuộn cho panel */
.js-map-layer-panel-body::-webkit-scrollbar {
    width: 4px;
}
.js-map-layer-panel-body::-webkit-scrollbar-thumb {
    background: #bdc3c7;
    border-radius: 4px;
}

/* Dòng chứa từng Layer */
.layer-row {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #2c3e50;
}

.layer-row label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 0;
    user-select: none;
    color: blue;
}

/* Style cho Radio & Checkbox */
.layer-row input[type="radio"],
.layer-row input[type="checkbox"] {
    accent-color: #2ecc71;
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Style cho thanh Range (Độ mờ) */
.js-layer-opacity {
    width: 70px;
    margin: 0 10px;
    accent-color: #2ecc71;
    cursor: pointer;
    height: 4px;
    border-radius: 2px;
}

.js-opacity-value {
    width: 36px;
    text-align: right;
    font-size: 11px;
    color: blue;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    background: #f1f2f6;
    padding: 2px 4px;
    border-radius: 4px;
}

/* ==========================================================================
   POPUP (Tooltip thông tin)
   ========================================================================== */
.js-map-popup {
    transition: opacity 0.2s ease;
}
/* Làm đẹp thêm nội dung bên trong popup nếu cần */
.js-map-popup-content {
    line-height: 1.4;
}

/* Ẩn thanh cuộn cho cụm nút trên các trình duyệt Webkit (Chrome, Safari, Edge) */
.map-controls-group::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Ẩn hoàn toàn */
}

/* Ẩn thanh cuộn trên Firefox */
.map-controls-group {
    scrollbar-width: none; 
    -ms-overflow-style: none; /* IE and Edge */
}

/* Đảm bảo các nút không bị móp méo kích thước khi bị ép chiều cao */
.map-controls-group .custom-map-btn {
    flex-shrink: 0; 
}

/* tìm đường */

/* ==========================================================================
   PANEL TÌM ĐƯỜNG (ROUTING PANEL)
   ========================================================================== */
.map-route-panel {
    position: absolute;
    top: 10px;    /* Tùy chỉnh vị trí theo layout map của bạn */
    left: 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #dfe4ea;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    width: 320px;
    z-index: 15;
    overflow: hidden;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.map-route-panel-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #dfe4ea;
    font-weight: 600;
    font-size: 13px;
    color: blue; /* Giữ màu xanh theo hệ thống panel cũ */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.map-route-panel-header span {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Các trường nhập liệu (Fields) */
.map-route-field {
    padding: 0 15px;
    margin-top: 12px;
}

.map-route-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #7f8c8d;
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* Các hàng (Rows) chứa phần tử nằm ngang */
.map-route-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    margin-bottom: 12px;
}

.map-route-field .map-route-row {
    padding: 0;
    margin-bottom: 0;
}

/* Style cho Input Text và Select Dropdown */
.map-route-field input[type="text"],
.map-route-select {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #dfe4ea;
    border-radius: 6px;
    font-size: 13px;
    color: #2c3e50;
    background: #ffffff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.map-route-field input[type="text"]:focus,
.map-route-select:focus {
    border-color: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);
}

/* Ghi đè style nút mini (.custom-map-btn.mini) để vừa vặn với ô input */
.map-route-panel .custom-map-btn.mini {
    width: 34px;
    height: 34px;
    font-size: 14px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   HỆ THỐNG NÚT HÀNH ĐỘNG (TÌM ĐƯỜNG / XÓA)
   ========================================================================== */
.map-route-action {
    flex: 1;
    height: 36px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Nút Tìm đường (Primary) */
.map-route-action:not(.clear) {
    background-color: #2ecc71;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(46, 204, 113, 0.3);
}

.map-route-action:not(.clear):hover {
    background-color: #27ae60;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(46, 204, 113, 0.4);
}

.map-route-action:not(.clear):active {
    transform: scale(0.96);
}

/* Nút Xóa (Secondary / Danger) */
.map-route-action.clear {
    background-color: #f1f2f6;
    color: #e74c3c;
    flex: 0.4; /* Thu nhỏ nút Xóa lại một chút để nhường chỗ cho Tìm đường */
}

.map-route-action.clear:hover {
    background-color: #ffcccc;
    color: #c0392b;
    transform: translateY(-1px);
}

/* ==========================================================================
   KHU VỰC HIỂN THỊ KẾT QUẢ TÌM ĐƯỜNG
   ========================================================================== */
.map-route-results {
    margin: 0 15px 15px 15px;
    padding-top: 10px;
    border-top: 1px dashed #dfe4ea;
    font-size: 13px;
    color: #2c3e50;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.5;
}

/* CSS đặc biệt: Tự động ẩn khung kết quả nếu chưa có nội dung (Tránh hở viền dashed) */
.map-route-results:empty {
    display: none;
}

/* Tùy chỉnh thanh cuộn cho khu vực kết quả */
.map-route-results::-webkit-scrollbar {
    width: 4px;
}
.map-route-results::-webkit-scrollbar-thumb {
    background: #bdc3c7;
    border-radius: 4px;
}
/* tìm đường */
/* map */

.note-visibility-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.note-visibility-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.note-visibility-btn.is-hidden {
    background: rgba(231, 76, 60, 0.25);
    border-color: rgba(231, 76, 60, 0.5);
}