/**
 * File: assets/css/tai-lieu.css
 * Chức năng: giao diện riêng cho trang Tài liệu.
 */


/* ==================================================
   1. THIẾT LẬP CHUNG
================================================== */

.tai-lieu-body *,
.tai-lieu-body *::before,
.tai-lieu-body *::after {
    box-sizing: border-box; /* Tính cả padding và border vào kích thước phần tử */
}

.tai-lieu-body {
    margin: 0; /* Xóa khoảng trắng mặc định của trình duyệt */
    background: #f7f3ea; /* Màu nền toàn trang */
    color: #1f1f1f; /* Màu chữ mặc định */
    font-family: Arial, Helvetica, sans-serif; /* Font mặc định cho giao diện */
    overflow-x: hidden; /* Chặn tràn ngang */
}

.tai-lieu-body a {
    color: inherit; /* Link dùng màu chữ của phần chứa nó */
}


/* ==================================================
   2. HEADER RIÊNG
================================================== */

.tai-lieu-header {
    position: sticky; /* Header dính trên cùng khi cuộn */
    top: 0; /* Dính sát mép trên trình duyệt */
    z-index: 999; /* Nằm trên các phần khác */

    display: grid; /* Chia header thành dạng lưới */
    grid-template-columns: minmax(240px, 1fr) auto minmax(360px, 1fr); /* Trái - giữa - phải */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 24px; /* Khoảng cách giữa 3 vùng */

    padding: 12px 32px; /* Khoảng cách trong header */
    background: rgba(255, 252, 245, 0.98); /* Màu nền header */
    border-bottom: 1px solid #ded3bf; /* Đường kẻ dưới header */
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04); /* Bóng nhẹ dưới header */
}

.tai-lieu-header__left {
    display: flex; /* Dàn ô tìm kiếm bằng flex */
    justify-content: flex-start; /* Đẩy ô tìm kiếm sang trái */
    align-items: center; /* Căn giữa theo chiều dọc */
    min-width: 0; /* Tránh bị tràn trong grid */
}

.tai-lieu-header__center {
    text-align: center; /* Căn giữa logo */
}

.tai-lieu-header__right {
    display: flex; /* Dàn công tắc nằm ngang */
    justify-content: flex-end; /* Đẩy công tắc sang phải */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 12px; /* Khoảng cách giữa các công tắc */
    flex-wrap: wrap; /* Cho xuống dòng nếu màn hình hẹp */
    min-width: 0; /* Tránh tràn grid */
}

.tai-lieu-logo {
    font-size: 24px; /* Cỡ chữ logo */
    font-weight: 700; /* Độ đậm logo */
    letter-spacing: 0.08em; /* Giãn chữ logo */
    color: #4a2f1b; /* Màu logo */
    text-decoration: none; /* Bỏ gạch chân */
    white-space: nowrap; /* Không cho logo xuống dòng */
}


/* ==================================================
   3. Ô TÌM KIẾM
================================================== */

.tai-lieu-search {
    display: flex; /* Ô nhập và nút tìm nằm ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 8px; /* Khoảng cách giữa input và nút */
    max-width: 330px; /* Chiều rộng tối đa ô tìm */
    width: 100%; /* Chiếm hết vùng bên trái nếu còn chỗ */
}

.tai-lieu-search__input {
    flex: 1 1 auto; /* Input tự co giãn */
    min-width: 0; /* Cho phép co nhỏ khi thiếu chỗ */
    height: 36px; /* Chiều cao input */
    padding: 0 12px; /* Khoảng cách chữ bên trong */

    border: 1px solid #cdbfa8; /* Viền input */
    border-radius: 999px; /* Bo tròn dạng viên thuốc */
    background: #fffdf8; /* Nền input */

    font-size: 14px; /* Cỡ chữ input */
    outline: none; /* Bỏ viền xanh mặc định khi focus */
}

.tai-lieu-search__input:focus {
    border-color: #8b5e34; /* Đổi màu viền khi đang nhập */
}

.tai-lieu-search__button {
    flex: 0 0 auto; /* Nút không bị co */
    height: 36px; /* Chiều cao nút */
    padding: 0 14px; /* Khoảng cách ngang trong nút */

    border: 1px solid #cdbfa8; /* Viền nút */
    border-radius: 999px; /* Bo tròn nút */
    background: #fffdf8; /* Nền nút */

    color: #4a2f1b; /* Màu chữ nút */
    font-size: 14px; /* Cỡ chữ nút */
    cursor: pointer; /* Hiện bàn tay khi rê chuột */
}

.tai-lieu-search__button:hover {
    background: #f0e5d3; /* Đổi nền khi hover */
}


/* ==================================================
   4. CÔNG TẮC GẠT PHỒN/GIẢN - HÁN VIỆT/PINYIN/ZHUYIN
================================================== */

.tai-lieu-real-switch {
    position: relative; /* Làm mốc cho nút trượt bên trong */
    display: grid; /* Chia các nấc công tắc thành cột */
    align-items: center; /* Căn chữ giữa theo chiều dọc */

    height: 32px; /* Chiều cao công tắc */
    padding: 3px; /* Khoảng cách trong khung công tắc */

    background: var(--tai-lieu-switch-bg, #ffffff); /* Nền công tắc */
    border: 1px solid var(--tai-lieu-switch-color, #0b83c5); /* Viền của công tắc */
    border-radius: 999px; /* Bo tròn dạng công tắc */
    overflow: hidden; /* Ẩn phần nút trượt nếu vượt ra ngoài */

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); /* Bóng nhẹ cho công tắc */
}

.tai-lieu-real-switch--two {
    grid-template-columns: repeat(2, 1fr); /* Chia 2 nấc: Phồn / Giản */
    width: 108px; /* Chiều rộng công tắc 2 nấc */
    --switch-count: 2; /* Biến tính chiều rộng nút trượt */
}

.tai-lieu-real-switch--three {
    grid-template-columns: repeat(3, 1fr); /* Chia 3 nấc: Hán Việt / Pinyin / Zhuyin */
    width: 210px; /* Chiều rộng công tắc 3 nấc */
    --switch-count: 3; /* Biến tính chiều rộng nút trượt */
}

.tai-lieu-real-switch input {
    position: absolute; /* Đưa radio ra khỏi luồng hiển thị */
    opacity: 0; /* Ẩn radio thật */
    pointer-events: none; /* Không cho click trực tiếp vào radio */
}

.tai-lieu-real-switch__thumb {
    position: absolute; /* Nút trượt nằm trong khung công tắc */
    top: 3px; /* Cách mép trên 3px */
    left: 3px; /* Cách mép trái 3px */
    z-index: 1; /* Nằm dưới chữ label */

    width: calc((100% - 6px) / var(--switch-count)); /* Chiều rộng nút trượt theo số nấc */
    height: calc(100% - 6px); /* Chiều cao nút trượt */

    background: var(--tai-lieu-switch-color, #0b83c5); /* Màu nút trượt */
    border-radius: 999px; /* Bo tròn nút trượt */
    transition: transform 0.22s ease; /* Hiệu ứng trượt mượt */
}

.tai-lieu-real-switch label {
    position: relative; /* Để label nằm trên nút trượt */
    z-index: 2; /* Chữ nằm trên thumb */

    display: flex; /* Căn chữ bằng flex */
    align-items: center; /* Căn chữ giữa theo chiều dọc */
    justify-content: center; /* Căn chữ giữa theo chiều ngang */

    height: 26px; /* Chiều cao vùng chữ */
    padding: 0 8px; /* Khoảng cách ngang của chữ */

    color: var(--tai-lieu-switch-text, #0b83c5); /* Màu chữ khi chưa bật */
    font-size: 12px; /* Cỡ chữ trong công tắc */
    font-weight: 700; /* Chữ đậm */
    line-height: 1; /* Chiều cao dòng gọn */
    white-space: nowrap; /* Không cho chữ xuống dòng */

    cursor: pointer; /* Bấm được như nút */
    user-select: none; /* Không cho bôi đen chữ khi bấm */
}

#tl-script-phon:checked ~ .tai-lieu-real-switch__thumb {
    transform: translateX(0); /* Nút trượt ở nấc Phồn */
}

#tl-script-gian:checked ~ .tai-lieu-real-switch__thumb {
    transform: translateX(100%); /* Nút trượt sang nấc Giản */
}

#tl-script-phon:checked ~ label[for="tl-script-phon"],
#tl-script-gian:checked ~ label[for="tl-script-gian"] {
    color: var(--tai-lieu-switch-active, #ffffff); /* Chữ khi nấc đang bật */
}

#tl-reading-hanviet:checked ~ .tai-lieu-real-switch__thumb {
    transform: translateX(0); /* Nút trượt ở nấc Hán Việt */
}

#tl-reading-pinyin:checked ~ .tai-lieu-real-switch__thumb {
    transform: translateX(100%); /* Nút trượt sang nấc Pinyin */
}

#tl-reading-zhuyin:checked ~ .tai-lieu-real-switch__thumb {
    transform: translateX(200%); /* Nút trượt sang nấc Zhuyin */
}

#tl-reading-hanviet:checked ~ label[for="tl-reading-hanviet"],
#tl-reading-pinyin:checked ~ label[for="tl-reading-pinyin"],
#tl-reading-zhuyin:checked ~ label[for="tl-reading-zhuyin"] {
    color: var(--tai-lieu-switch-active, #ffffff); /* Chữ khi nấc âm đọc đang bật */
}


/* ==================================================
   5. THANH MỚI CẬP NHẬT
================================================== */

.tai-lieu-newsbar {
    display: flex; /* Label và nội dung chạy nằm ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    min-height: 40px; /* Chiều cao tối thiểu */

    background: #fff8ea; /* Nền thanh mới cập nhật */
    border-bottom: 1px solid #ded3bf; /* Đường kẻ dưới thanh */
    overflow: hidden; /* Ẩn nội dung chạy vượt khỏi khung */
}

.tai-lieu-newsbar__label {
    flex: 0 0 auto; /* Label không bị co lại */
    position: relative; /* Tạo lớp nền che chữ chạy phía sau */
    z-index: 2; /* Nằm trên phần chữ chạy */

    padding: 0 18px 0 32px; /* Khoảng cách trong label */
    line-height: 40px; /* Chiều cao dòng bằng thanh */
    background: #fff8ea; /* Nền label */
    color: #4a2f1b; /* Màu chữ label */
    font-weight: 700; /* Chữ đậm */
    white-space: nowrap; /* Không xuống dòng */
}

.tai-lieu-newsbar__viewport {
    flex: 1 1 auto; /* Chiếm phần còn lại */
    min-width: 0; /* Tránh tràn flex */
    overflow: hidden; /* Ẩn phần chạy vượt ra ngoài */
}

.tai-lieu-newsbar__track {
    display: inline-flex; /* Các bài viết nằm ngang */
    gap: 34px; /* Khoảng cách giữa các bài */
    padding-left: 100%; /* Đẩy nội dung bắt đầu từ ngoài mép phải */
    white-space: nowrap; /* Không xuống dòng */
    animation: taiLieuNewsScroll 35s linear infinite; /* Chạy ngang liên tục */
}

.tai-lieu-newsbar__viewport:hover .tai-lieu-newsbar__track {
    animation-play-state: paused; /* Rê chuột thì tạm dừng */
}

.tai-lieu-newsbar__item {
    color: #5b351d; /* Màu link bài mới */
    text-decoration: none; /* Bỏ gạch chân */
    font-size: 15px; /* Cỡ chữ bài mới */
}

.tai-lieu-newsbar__item::after {
    content: "•"; /* Dấu phân cách giữa các bài */
    margin-left: 34px; /* Khoảng cách trước dấu chấm */
    color: #b08a63; /* Màu dấu phân cách */
}

.tai-lieu-newsbar__item:hover {
    text-decoration: underline; /* Hover thì gạch chân */
}

@keyframes taiLieuNewsScroll {
    from {
        transform: translateX(0); /* Vị trí bắt đầu */
    }

    to {
        transform: translateX(-100%); /* Chạy hết sang trái */
    }
}


/* ==================================================
   6. TRANG ĐỌC TÀI LIỆU
================================================== */

.tai-lieu-single {
    max-width: 1600px; /* Chiều rộng tối đa trang đọc */
    width: 100%; /* Chiếm toàn bộ chiều ngang có thể */
    margin: 0 auto; /* Căn giữa */
    padding: 36px 36px 64px; /* Khoảng cách trong trang */
}

.tai-lieu-document {
    width: 100%; /* Article rộng hết khung */
}

.tai-lieu-reader {
    display: grid; /* Tạo layout 2 cột dọc */
    grid-template-columns: minmax(0, 2.1fr) minmax(360px, 0.9fr); /* Cột Hán rộng, cột Việt hẹp hơn */
    column-gap: 0; /* Không tạo khe giữa 2 cột */
    row-gap: 0; /* Không tạo khoảng cách hàng */
    align-items: stretch; /* Hai cột kéo cùng chiều cao theo nội dung */
    width: 100%; /* Rộng hết khung */
}

.tai-lieu-pair {
    display: contents; /* Bỏ vỏ từng đoạn, chỉ giữ con nằm vào grid */
}

.tai-lieu-pair__left {
    grid-column: 1; /* Cột trái là chữ Hán */
    min-width: 0; /* Tránh tràn nội dung */
    padding: 22px 34px 22px 0; /* Khoảng cách trong cột Hán */
    background: transparent; /* Không dùng nền card */
    border: 0; /* Không dùng viền card */
    border-radius: 0; /* Không bo góc */
}

.tai-lieu-pair__right {
    grid-column: 2; /* Cột phải là bản dịch */
    min-width: 0; /* Tránh tràn nội dung */
    padding: 22px 0 22px 34px; /* Cách chữ Việt khỏi đường kẻ */
    border-left: 1px solid #d8c9b4; /* Đường kẻ dọc chia Hán và Việt */

    color: #2f2a24; /* Màu chữ bản dịch */
    font-family: Georgia, "Times New Roman", serif; /* Font có chân cho bản dịch */
}

.tai-lieu-title {
    margin: 0 0 28px; /* Khoảng cách dưới tiêu đề */
    color: #3b2617; /* Màu tiêu đề */
    font-size: 28px; /* Cỡ chữ tiêu đề */
    font-weight: 700; /* Tiêu đề đậm */
    line-height: 1.35; /* Chiều cao dòng tiêu đề */
}

.tai-lieu-vietnamese-text {
    margin: 0 0 28px; /* Khoảng cách dưới mỗi đoạn dịch */
    font-size: 18px; /* Cỡ chữ tiếng Việt */
    line-height: 1.9; /* Khoảng cách dòng dễ đọc */
    text-align: left; /* Căn trái giống ảnh mẫu */
    word-break: normal; /* Không bẻ từng chữ */
    overflow-wrap: normal; /* Không tự bẻ từ quá sớm */
}


/* ==================================================
   7. CHỮ HÁN + ÂM ĐỌC
================================================== */

.tai-lieu-original-block {
    display: flex; /* Các chữ Hán nằm ngang */
    flex-wrap: wrap; /* Hết dòng thì tự xuống dòng */
    align-items: flex-start; /* Căn lên trên */

    column-gap: 18px; /* Khoảng cách ngang giữa chữ Hán */
    row-gap: 28px; /* Khoảng cách dọc giữa các hàng */
    width: 100%; /* Rộng hết cột trái */

    background: transparent; /* Không nền khung */
    border: 0; /* Không viền khung */
    border-radius: 0; /* Không bo góc */
    padding: 0; /* Không padding riêng */
}

.tai-lieu-char {
    display: inline-flex; /* Mỗi chữ là một cụm */
    flex-direction: column; /* Âm đọc trên, chữ Hán dưới */
    align-items: center; /* Căn giữa âm và chữ */
    justify-content: flex-end; /* Căn cụm về dưới */
    min-width: 42px; /* Chiều rộng tối thiểu cho mỗi chữ */
    flex: 0 0 auto; /* Không cho cụm bị co */
}

.tai-lieu-char--punct {
    min-width: 18px; /* Dấu câu hẹp hơn chữ Hán */
    margin-left: -8px; /* Kéo dấu câu gần chữ trước */
}

.tai-lieu-reading {
    display: none; /* Mặc định ẩn âm đọc */
    min-height: 22px; /* Giữ chỗ cho âm đọc */
    margin-bottom: 7px; /* Cách âm đọc với chữ Hán */

    color: #8a5a2b; /* Màu âm đọc */
    font-size: 14px; /* Cỡ chữ âm đọc */
    line-height: 1.2; /* Chiều cao dòng âm đọc */
    text-align: center; /* Căn giữa âm đọc */
    white-space: nowrap; /* Không xuống dòng âm đọc */
}

.tai-lieu-reading.is-visible {
    display: block; /* Hiện âm đọc đang được chọn */
}

.tai-lieu-char--punct .tai-lieu-reading--empty {
    display: block; /* Giữ khoảng trống phía trên dấu câu */
}

.tai-lieu-han {
    display: none; /* Mặc định ẩn chữ Hán */
    color: #111; /* Màu chữ Hán */
    font-family: "KaiTi", "STKaiti", "Noto Serif CJK TC", "Noto Serif CJK SC", "Noto Sans CJK TC", "Noto Sans CJK SC", serif; /* Font chữ Hán */
    font-size: 42px; /* Cỡ chữ Hán */
    font-weight: 400; /* Độ đậm chữ Hán */
    line-height: 1.05; /* Chiều cao dòng chữ Hán */
    text-align: center; /* Căn giữa chữ Hán */
}

.tai-lieu-han.is-visible {
    display: block; /* Hiện chữ Hán đang được chọn */
}

.tai-lieu-char--punct .tai-lieu-han {
    font-size: 34px; /* Dấu câu nhỏ hơn chữ Hán */
    line-height: 1.1; /* Căn dấu câu gần đáy chữ */
}


/* ==================================================
   8. FOOTER RIÊNG
================================================== */

.tai-lieu-footer {
    padding: 34px 32px; /* Khoảng cách trong footer */
    background: #3b2617; /* Nền footer */
    color: #fff7ed; /* Màu chữ footer */
}

.tai-lieu-footer__inner {
    max-width: 1500px; /* Chiều rộng tối đa footer */
    margin: 0 auto; /* Căn giữa footer */

    display: flex; /* Các phần footer nằm ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: space-between; /* Đẩy các phần ra hai bên */
    gap: 24px; /* Khoảng cách giữa các phần */
    flex-wrap: wrap; /* Cho xuống dòng nếu thiếu chỗ */
}

.tai-lieu-footer__brand strong {
    display: block; /* Tên thương hiệu nằm dòng riêng */
    margin-bottom: 6px; /* Cách mô tả bên dưới */
    font-size: 20px; /* Cỡ chữ thương hiệu */
    letter-spacing: 0.08em; /* Giãn chữ thương hiệu */
}

.tai-lieu-footer__brand p {
    margin: 0; /* Xóa margin mặc định */
    color: #e8d9c4; /* Màu mô tả footer */
}

.tai-lieu-footer__nav {
    display: flex; /* Link footer nằm ngang */
    gap: 18px; /* Khoảng cách giữa link */
    flex-wrap: wrap; /* Cho xuống dòng nếu thiếu chỗ */
}

.tai-lieu-footer__nav a {
    color: #fff7ed; /* Màu link footer */
    text-decoration: none; /* Bỏ gạch chân */
}

.tai-lieu-footer__nav a:hover {
    text-decoration: underline; /* Hover thì gạch chân */
}

.tai-lieu-footer__copy {
    color: #e8d9c4; /* Màu dòng bản quyền */
    font-size: 14px; /* Cỡ chữ bản quyền */
}


/* ==================================================
   9. TRANG DANH SÁCH TÀI LIỆU
================================================== */

.tai-lieu-archive {
    max-width: 1500px; /* Chiều rộng tối đa archive */
    margin: 0 auto; /* Căn giữa */
    padding: 48px 32px 70px; /* Khoảng cách trong trang archive */
}

.tai-lieu-archive__hero {
    margin-bottom: 42px; /* Cách tiêu đề với danh sách */
    text-align: center; /* Căn giữa phần giới thiệu */
}

.tai-lieu-archive__title {
    margin: 0 0 12px; /* Khoảng cách dưới tiêu đề */
    color: #3b2617; /* Màu tiêu đề */
    font-size: 42px; /* Cỡ tiêu đề */
    font-weight: 700; /* Tiêu đề đậm */
    line-height: 1.25; /* Chiều cao dòng */
}

.tai-lieu-archive__desc {
    margin: 0; /* Xóa margin mặc định */
    color: #6b5745; /* Màu mô tả */
    font-size: 18px; /* Cỡ chữ mô tả */
}

.tai-lieu-archive__grid {
    display: grid; /* Dàn tài liệu dạng lưới */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Tự chia cột */
    gap: 28px; /* Khoảng cách giữa card */
}

.tai-lieu-card {
    overflow: hidden; /* Ẩn phần ảnh tràn khỏi bo góc */
    background: #fffdf8; /* Nền card */
    border: 1px solid #e2d6c4; /* Viền card */
    border-radius: 18px; /* Bo góc card */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); /* Bóng card */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Hiệu ứng hover */
}

.tai-lieu-card:hover {
    transform: translateY(-4px); /* Card nổi lên khi hover */
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08); /* Bóng rõ hơn */
}

.tai-lieu-card__thumb {
    display: block; /* Link ảnh là block */
    aspect-ratio: 16 / 9; /* Tỷ lệ ảnh */
    background: #efe3d1; /* Nền dự phòng khi chưa có ảnh */
    overflow: hidden; /* Ẩn ảnh tràn */
}

.tai-lieu-card__thumb img {
    display: block; /* Xóa khoảng trắng dưới ảnh */
    width: 100%; /* Ảnh rộng hết khung */
    height: 100%; /* Ảnh cao hết khung */
    object-fit: cover; /* Cắt ảnh vừa khung, không méo */
}

.tai-lieu-card__body {
    padding: 22px; /* Khoảng cách trong card */
}

.tai-lieu-card__title {
    margin: 0 0 10px; /* Khoảng cách dưới tiêu đề card */
    font-size: 22px; /* Cỡ chữ tiêu đề card */
    line-height: 1.35; /* Chiều cao dòng */
}

.tai-lieu-card__title a {
    color: #3b2617; /* Màu tiêu đề card */
    text-decoration: none; /* Bỏ gạch chân */
}

.tai-lieu-card__title a:hover {
    text-decoration: underline; /* Hover tiêu đề thì gạch chân */
}

.tai-lieu-card__date {
    margin-bottom: 18px; /* Cách ngày đăng với nút */
    color: #8a765f; /* Màu ngày đăng */
    font-size: 14px; /* Cỡ chữ ngày đăng */
}

.tai-lieu-card__button {
    display: inline-flex; /* Nút dạng flex nhỏ */
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều ngang */

    height: 38px; /* Chiều cao nút */
    padding: 0 16px; /* Khoảng cách ngang */
    border-radius: 999px; /* Bo tròn nút */

    background: #4a2f1b; /* Nền nút */
    color: #fff; /* Màu chữ nút */
    font-size: 14px; /* Cỡ chữ nút */
    font-weight: 600; /* Chữ nút đậm */
    text-decoration: none; /* Bỏ gạch chân */
}

.tai-lieu-card__button:hover {
    background: #2f1d10; /* Nền nút khi hover */
}

.tai-lieu-pagination {
    margin-top: 42px; /* Cách phân trang với danh sách */
    text-align: center; /* Căn giữa phân trang */
}

.tai-lieu-pagination .page-numbers {
    display: inline-flex; /* Mỗi số trang là nút */
    align-items: center; /* Căn giữa dọc */
    justify-content: center; /* Căn giữa ngang */

    min-width: 38px; /* Chiều rộng tối thiểu */
    height: 38px; /* Chiều cao nút */
    margin: 0 4px; /* Khoảng cách giữa các nút */

    border: 1px solid #cdbfa8; /* Viền nút phân trang */
    border-radius: 999px; /* Bo tròn */
    background: #fffdf8; /* Nền nút */

    color: #4a2f1b; /* Màu chữ */
    text-decoration: none; /* Bỏ gạch chân */
}

.tai-lieu-pagination .page-numbers.current {
    background: #4a2f1b; /* Nền trang hiện tại */
    border-color: #4a2f1b; /* Viền trang hiện tại */
    color: #fff; /* Chữ trắng */
}

.tai-lieu-archive__empty {
    padding: 32px; /* Khoảng cách trong hộp trống */
    background: #fffdf8; /* Nền hộp */
    border: 1px solid #e2d6c4; /* Viền hộp */
    border-radius: 18px; /* Bo góc hộp */
    color: #6b5745; /* Màu chữ */
    font-size: 18px; /* Cỡ chữ */
    text-align: center; /* Căn giữa */
}


/* ==================================================
   10. BÌNH LUẬN
================================================== */

.tai-lieu-comments {
    max-width: 1100px; /* Chiều rộng khung bình luận */
    margin: 50px auto 0; /* Cách phần trên và căn giữa */
    padding: 32px; /* Khoảng cách trong khung */
    background: #fffdf8; /* Nền khung */
    border: 1px solid #e2d6c4; /* Viền khung */
    border-radius: 18px; /* Bo góc khung */
}

.tai-lieu-comments__title {
    margin: 0 0 24px; /* Khoảng cách dưới tiêu đề */
    color: #3b2617; /* Màu tiêu đề */
    font-size: 26px; /* Cỡ tiêu đề */
}

.tai-lieu-comments textarea,
.tai-lieu-comments input[type="text"],
.tai-lieu-comments input[type="email"],
.tai-lieu-comments input[type="url"] {
    width: 100%; /* Ô nhập rộng hết khung */
    padding: 12px; /* Khoảng cách chữ bên trong */
    background: #fff; /* Nền ô nhập */
    border: 1px solid #cdbfa8; /* Viền ô nhập */
    border-radius: 10px; /* Bo góc ô nhập */
}

.tai-lieu-comments input[type="submit"],
.tai-lieu-comments button[type="submit"] {
    padding: 12px 22px; /* Khoảng cách trong nút */
    background: #4a2f1b; /* Nền nút gửi */
    border: 0; /* Bỏ viền mặc định */
    border-radius: 999px; /* Bo tròn nút */
    color: #fff; /* Chữ trắng */
    cursor: pointer; /* Hiện bàn tay */
}

.tai-lieu-comments input[type="submit"]:hover,
.tai-lieu-comments button[type="submit"]:hover {
    background: #2f1d10; /* Nền nút khi hover */
}


/* ==================================================
   11. FORM ĐÓNG GÓP BẢN DỊCH
================================================== */

.tai-lieu-contribute {
    max-width: 1100px; /* Chiều rộng form */
    margin: 50px auto 0; /* Cách phần trên và căn giữa */
    padding: 32px; /* Khoảng cách trong form */
    background: #fffdf8; /* Nền form */
    border: 1px solid #e2d6c4; /* Viền form */
    border-radius: 18px; /* Bo góc form */
}

.tai-lieu-contribute__title {
    margin: 0 0 22px; /* Khoảng cách dưới tiêu đề */
    color: #3b2617; /* Màu tiêu đề */
    font-size: 26px; /* Cỡ tiêu đề */
}

.tai-lieu-contribute__notice {
    margin-bottom: 20px; /* Cách thông báo với form */
    padding: 14px 16px; /* Khoảng cách trong thông báo */
    border-radius: 10px; /* Bo góc thông báo */
    font-size: 15px; /* Cỡ chữ thông báo */
}

.tai-lieu-contribute__notice--success {
    background: #eef8ee; /* Nền thông báo thành công */
    border: 1px solid #badfba; /* Viền thông báo thành công */
    color: #225c22; /* Chữ xanh */
}

.tai-lieu-contribute__notice--error {
    background: #fff0f0; /* Nền thông báo lỗi */
    border: 1px solid #e6b8b8; /* Viền thông báo lỗi */
    color: #8a1f1f; /* Chữ đỏ */
}

.tai-lieu-contribute__field {
    margin-bottom: 18px; /* Khoảng cách giữa các trường */
}

.tai-lieu-contribute__field label {
    display: block; /* Label nằm riêng một dòng */
    margin-bottom: 8px; /* Cách label với ô nhập */
    color: #3b2617; /* Màu label */
    font-weight: 700; /* Label đậm */
}

.tai-lieu-contribute__field select,
.tai-lieu-contribute__field textarea {
    width: 100%; /* Ô nhập rộng hết khung */
    padding: 12px; /* Khoảng cách chữ bên trong */
    background: #fff; /* Nền ô nhập */
    border: 1px solid #cdbfa8; /* Viền ô nhập */
    border-radius: 10px; /* Bo góc ô nhập */
    font-size: 15px; /* Cỡ chữ ô nhập */
}

.tai-lieu-contribute__button {
    padding: 12px 24px; /* Khoảng cách trong nút */
    background: #4a2f1b; /* Nền nút */
    border: 0; /* Bỏ viền mặc định */
    border-radius: 999px; /* Bo tròn nút */
    color: #fff; /* Chữ trắng */
    font-weight: 700; /* Chữ đậm */
    cursor: pointer; /* Hiện bàn tay */
}

.tai-lieu-contribute__button:hover {
    background: #2f1d10; /* Nền nút khi hover */
}

.tai-lieu-contribute__login {
    padding: 18px; /* Khoảng cách trong hộp đăng nhập */
    background: #f7f0e5; /* Nền hộp đăng nhập */
    border-radius: 12px; /* Bo góc hộp */
    color: #4a2f1b; /* Màu chữ */
}

.tai-lieu-contribute__login a {
    font-weight: 700; /* Link đăng nhập in đậm */
    text-decoration: underline; /* Gạch chân link */
}


/* ==================================================
   12. TABLET
================================================== */

@media (max-width: 1180px) {
    .tai-lieu-header {
        grid-template-columns: 1fr; /* Header chuyển về 1 cột */
        gap: 12px; /* Giảm khoảng cách header */
        text-align: center; /* Căn giữa nội dung header */
    }

    .tai-lieu-header__left,
    .tai-lieu-header__right {
        justify-content: center; /* Căn giữa tìm kiếm và công tắc */
    }

    .tai-lieu-reader {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr); /* Giảm độ rộng cột phải */
    }

    .tai-lieu-han {
        font-size: 38px; /* Giảm cỡ chữ Hán trên tablet */
    }
}


/* ==================================================
   13. MOBILE
================================================== */

@media (max-width: 900px) {
    .tai-lieu-reader {
        display: block; /* Mobile chuyển về 1 cột */
    }

    .tai-lieu-pair {
        display: block; /* Mỗi đoạn trở về block thường */
    }

    .tai-lieu-pair__left {
        padding: 20px 0; /* Giảm padding cột Hán */
    }

    .tai-lieu-pair__right {
        padding: 20px 0; /* Giảm padding cột Việt */
        border-left: 0; /* Bỏ đường dọc trên mobile */
    }
}

@media (max-width: 640px) {
    .tai-lieu-header {
        padding: 12px 16px; /* Giảm padding header trên mobile */
    }

    .tai-lieu-logo {
        font-size: 21px; /* Giảm cỡ logo */
    }

    .tai-lieu-search {
        max-width: none; /* Ô tìm kiếm rộng hết dòng */
    }

    .tai-lieu-search__input,
    .tai-lieu-search__button {
        height: 34px; /* Giảm chiều cao input và nút */
        font-size: 13px; /* Giảm cỡ chữ */
    }

    .tai-lieu-real-switch--two {
        width: 104px; /* Công tắc 2 nấc nhỏ hơn */
    }

    .tai-lieu-real-switch--three {
        width: 198px; /* Công tắc 3 nấc nhỏ hơn */
    }

    .tai-lieu-real-switch label {
        padding: 0 6px; /* Giảm padding chữ công tắc */
        font-size: 11px; /* Giảm cỡ chữ công tắc */
    }

    .tai-lieu-newsbar__label {
        padding: 0 12px 0 16px; /* Giảm padding label tin mới */
        font-size: 14px; /* Giảm cỡ chữ label */
    }

    .tai-lieu-newsbar__item {
        font-size: 14px; /* Giảm cỡ chữ tin mới */
    }

    .tai-lieu-newsbar__track {
        gap: 24px; /* Giảm khoảng cách tin mới */
        animation-duration: 28s; /* Chạy nhanh hơn trên mobile */
    }

    .tai-lieu-single {
        padding: 26px 14px 48px; /* Giảm padding trang đọc */
    }

    .tai-lieu-original-block {
        column-gap: 11px; /* Giảm khoảng cách ngang chữ Hán */
        row-gap: 20px; /* Giảm khoảng cách dọc chữ Hán */
    }

    .tai-lieu-char {
        min-width: 34px; /* Giảm chiều rộng mỗi chữ */
    }

    .tai-lieu-reading {
        min-height: 17px; /* Giảm chiều cao âm đọc */
        margin-bottom: 5px; /* Giảm khoảng cách âm với chữ */
        font-size: 12px; /* Giảm cỡ âm đọc */
    }

    .tai-lieu-han {
        font-size: 32px; /* Giảm cỡ chữ Hán */
    }

    .tai-lieu-char--punct .tai-lieu-han {
        font-size: 26px; /* Giảm cỡ dấu câu */
    }

    .tai-lieu-title {
        font-size: 24px; /* Giảm cỡ tiêu đề */
    }

    .tai-lieu-vietnamese-text {
        font-size: 17px; /* Giảm cỡ bản dịch */
        line-height: 1.8; /* Giảm khoảng cách dòng */
    }

    .tai-lieu-archive {
        padding: 36px 16px 52px; /* Giảm padding archive */
    }

    .tai-lieu-archive__title {
        font-size: 32px; /* Giảm cỡ tiêu đề archive */
    }

    .tai-lieu-archive__desc {
        font-size: 16px; /* Giảm cỡ mô tả archive */
    }

    .tai-lieu-card__body {
        padding: 18px; /* Giảm padding card */
    }

    .tai-lieu-card__title {
        font-size: 20px; /* Giảm cỡ tiêu đề card */
    }

    .tai-lieu-comments,
    .tai-lieu-contribute {
        padding: 22px; /* Giảm padding bình luận/form */
    }

    .tai-lieu-footer {
        padding: 30px 16px; /* Giảm padding footer */
    }
}
.tai-lieu-document-header {
    margin-bottom: 30px; /* Cách tiêu đề với 2 cột bên dưới */
    text-align: center; /* Căn giữa tiêu đề */
}

.tai-lieu-document-title {
    margin: 0; /* Xóa margin mặc định */
    color: #3b2617; /* Màu tiêu đề */
    font-size: 34px; /* Cỡ chữ tiêu đề */
    font-weight: 700; /* Làm tiêu đề đậm */
    line-height: 1.35; /* Chiều cao dòng */
}
/* ==================================================
   CHÚ THÍCH CUỐI BÀI
================================================== */

.tai-lieu-note {
    margin-top: 44px; /* Cách phần chú thích với nội dung Hán / Việt phía trên */
    padding: 28px 32px; /* Khoảng cách bên trong khung chú thích */
    background: #fffdf8; /* Nền khung chú thích */
    border: 1px solid #e2d6c4; /* Viền khung chú thích */
    border-radius: 16px; /* Bo góc khung chú thích */
}

.tai-lieu-note__title {
    margin: 0 0 18px; /* Cách tiêu đề với nội dung chú thích */
    color: #3b2617; /* Màu tiêu đề chú thích */
    font-size: 24px; /* Cỡ chữ tiêu đề chú thích */
    font-weight: 700; /* Làm tiêu đề đậm */
    line-height: 1.35; /* Chiều cao dòng tiêu đề */
}

.tai-lieu-note__content {
    color: #2f2a24; /* Màu chữ nội dung chú thích */
    font-family: Georgia, "Times New Roman", serif; /* Font có chân cho phần chú thích */
    font-size: 17px; /* Cỡ chữ chú thích */
    line-height: 1.85; /* Khoảng cách dòng dễ đọc */
}

.tai-lieu-note__content p {
    margin: 0 0 14px; /* Khoảng cách giữa các đoạn chú thích */
}

.tai-lieu-note__content p:last-child {
    margin-bottom: 0; /* Đoạn cuối không cần cách dưới */
}
/* ==================================================
   TỐI ƯU DẤU CÂU CHO PHỒN / GIẢN / HÁN VIỆT / PINYIN / ZHUYIN
================================================== */

.tai-lieu-char--punct {
    min-width: 0; /* Dấu câu không chiếm ô rộng như chữ Hán */
    width: auto; /* Dấu câu chỉ rộng theo ký tự của nó */
    margin-left: -18px; /* Kéo dấu câu sát vào chữ phía trước */
    margin-right: -6px; /* Giảm khoảng cách sau dấu câu */
    flex: 0 0 auto; /* Không cho dấu câu bị co giãn sai */
}

.tai-lieu-char--punct .tai-lieu-reading,
.tai-lieu-char--punct .tai-lieu-reading--empty {
    display: block; /* Luôn giữ một dòng trống phía trên dấu câu */
    min-height: 22px; /* Chiều cao bằng vùng âm đọc */
    margin-bottom: 7px; /* Khoảng cách xuống dấu câu giống chữ thường */
}

.tai-lieu-char--punct .tai-lieu-han {
    font-size: 42px; /* Dấu câu cùng cỡ với chữ Hán */
    line-height: 1.05; /* Chiều cao dòng đồng nhất */
}
/* Link trong bản dịch tiếng Việt và chú thích */
.tai-lieu-vietnamese-text a,
.tai-lieu-note__content a {
    color: #0b6fb3; /* Màu xanh của link */
    text-decoration: underline; /* Gạch chân để biết là link */
    text-underline-offset: 3px; /* Khoảng cách gạch chân với chữ */
}

/* Khi rê chuột vào link */
.tai-lieu-vietnamese-text a:hover,
.tai-lieu-note__content a:hover {
    color: #084f80; /* Link đậm hơn khi hover */
}
/* ==================================================
   LINK TRA TỪ ĐIỂN HANZII CHO CHỮ HÁN
================================================== */

.tai-lieu-hanzii-link {
    color: #111; /* Giữ màu chữ Hán giống bình thường */
    text-decoration: none; /* Không gạch chân chữ Hán */
    cursor: pointer; /* Rê chuột hiện bàn tay */
    border-radius: 6px; /* Bo nhẹ vùng hover */
    transition: color 0.18s ease, background 0.18s ease; /* Hiệu ứng hover nhẹ */
}

.tai-lieu-hanzii-link:hover {
    color: #0b6fb3; /* Đổi màu khi rê chuột */
    background: rgba(11, 111, 179, 0.08); /* Nền xanh rất nhẹ khi hover */
}
/* ==================================================
   KIỂU HIỂN THỊ TÀI LIỆU
================================================== */

/* Văn xuôi: kiểu mặc định */
.tai-lieu-style-prose .tai-lieu-original-block {
    justify-content: flex-start; /* Chữ Hán dàn từ trái sang phải tự nhiên */
}

.tai-lieu-style-prose .tai-lieu-vietnamese-text {
    text-align: left; /* Bản dịch dạng đoạn văn căn trái */
}


/* Thơ: giữ cảm giác từng dòng thơ, thoáng và nhẹ hơn */
.tai-lieu-style-poem .tai-lieu-original-block {
    justify-content: center; /* Căn giữa dòng chữ Hán */
    column-gap: 14px; /* Giảm khoảng cách ngang giữa các chữ */
    row-gap: 26px; /* Tăng khoảng cách giữa các hàng thơ */
}

.tai-lieu-style-poem .tai-lieu-pair__left {
    padding-top: 18px; /* Giảm khoảng cách trên của từng dòng thơ */
    padding-bottom: 18px; /* Giảm khoảng cách dưới của từng dòng thơ */
}

.tai-lieu-style-poem .tai-lieu-pair__right {
    padding-top: 18px; /* Cho bản dịch ngang nhịp với dòng thơ */
    padding-bottom: 18px; /* Giữ khoảng cách dòng thơ bên dịch */
}

.tai-lieu-style-poem .tai-lieu-vietnamese-text {
    text-align: center; /* Bản dịch thơ căn giữa */
    font-size: 18px; /* Cỡ chữ bản dịch thơ */
    line-height: 1.8; /* Giãn dòng thơ dễ đọc */
}


/* Kinh văn / chú giải: nghiêm chỉnh, chữ rõ, khoảng cách rộng */
.tai-lieu-style-classic .tai-lieu-han {
    font-size: 46px; /* Chữ Hán lớn hơn */
    line-height: 1.08; /* Chiều cao dòng chữ Hán */
}

.tai-lieu-style-classic .tai-lieu-reading {
    font-size: 15px; /* Âm đọc lớn hơn một chút */
    color: #7a4a20; /* Màu âm đọc trầm hơn */
}

.tai-lieu-style-classic .tai-lieu-pair__left {
    padding-top: 30px; /* Tăng khoảng cách trên */
    padding-bottom: 30px; /* Tăng khoảng cách dưới */
}

.tai-lieu-style-classic .tai-lieu-pair__right {
    padding-top: 30px; /* Bản dịch cách dòng rộng hơn */
    padding-bottom: 30px; /* Bản dịch cách dòng rộng hơn */
}

.tai-lieu-style-classic .tai-lieu-vietnamese-text {
    font-size: 19px; /* Bản dịch lớn hơn */
    line-height: 2; /* Giãn dòng nghiêm chỉnh, dễ đọc */
    text-align: left; /* Căn trái bản dịch */
}


/* Tự do: ít ép bố cục, giữ cảm giác theo dòng nhập */
.tai-lieu-style-free .tai-lieu-original-block {
    justify-content: flex-start; /* Không căn giữa, giữ tự nhiên */
    column-gap: 12px; /* Khoảng cách chữ gọn hơn */
    row-gap: 22px; /* Khoảng cách hàng vừa phải */
}

.tai-lieu-style-free .tai-lieu-vietnamese-text {
    white-space: normal; /* Cho phép nội dung hiển thị tự nhiên */
    text-align: left; /* Căn trái */
}

/* ==================================================
   14. TÙY BIẾN KHUNG TÀI LIỆU / ĐÓNG HỘP
================================================== */

/* Header và thanh mới cập nhật được đóng hộp theo độ rộng tài liệu */
.tai-lieu-header,
.tai-lieu-newsbar {
    max-width: var(--tai-lieu-width, 1180px); /* Độ rộng lấy từ Customizer */
    margin-left: auto; /* Căn giữa */
    margin-right: auto; /* Căn giữa */
}

/* Bo nhẹ header riêng tài liệu */
.tai-lieu-header {
    border-radius: 0 0 var(--tai-lieu-radius, 18px) var(--tai-lieu-radius, 18px); /* Bo góc dưới */
}

/* Trang đọc và trang archive đều đóng hộp */
.tai-lieu-single,
.tai-lieu-archive {
    max-width: var(--tai-lieu-width, 1180px); /* Độ rộng tùy biến */
    margin-left: auto; /* Căn giữa */
    margin-right: auto; /* Căn giữa */
}

/* Khung nội dung chính của bài tài liệu */
.tai-lieu-document {
    padding: 30px; /* Khoảng cách trong khung */
    background: #fffdf8; /* Nền giấy nhẹ */
    border: 1px solid #e2d6c4; /* Viền nhẹ */
    border-radius: var(--tai-lieu-radius, 18px); /* Bo góc tùy biến */
    box-shadow: 0 10px 28px rgba(79, 45, 19, 0.06); /* Bóng nhẹ */
    overflow: hidden; /* Giữ bo góc đẹp */
}

/* Tùy biến kích thước từng ô chữ Hán */
.tai-lieu-char {
    min-width: var(--tai-lieu-char-width, 42px); /* Độ rộng ô chữ từ Customizer */
}

/* Tùy biến chữ Hán */
.tai-lieu-han {
    color: var(--tai-lieu-han-color, #111111); /* Màu chữ Hán */
    font-family: var(--tai-lieu-han-font-family, "KaiTi", "STKaiti", serif); /* Font chữ Trung */
    font-size: var(--tai-lieu-han-font-size, 42px); /* Cỡ chữ Hán */
}

/* Dấu câu đi cùng cỡ chữ Hán */
.tai-lieu-char--punct .tai-lieu-han {
    font-size: var(--tai-lieu-han-font-size, 42px); /* Cỡ dấu câu theo chữ Hán */
}

/* Tùy biến âm đọc */
.tai-lieu-reading {
    color: var(--tai-lieu-reading-color, #8a5a2b); /* Màu âm đọc */
    font-size: var(--tai-lieu-reading-font-size, 14px); /* Cỡ âm đọc */
}

/* Cấm chọn/copy nội dung chính của tài liệu */
.tai-lieu-no-copy,
.tai-lieu-no-copy .tai-lieu-document,
.tai-lieu-no-copy .tai-lieu-note,
.tai-lieu-no-copy .tai-lieu-related {
    -webkit-user-select: none; /* Chặn chọn trên Safari/Chrome */
    user-select: none; /* Chặn chọn văn bản */
}

/* ==================================================
   15. TÀI LIỆU LIÊN QUAN
================================================== */

/* Khối tài liệu liên quan */
.tai-lieu-related {
    max-width: var(--tai-lieu-width, 1180px); /* Cùng độ rộng trang tài liệu */
    margin: 42px auto 0; /* Cách nội dung chính */
    padding: 28px; /* Khoảng cách trong khối */
    background: #fffdf8; /* Nền trắng kem */
    border: 1px solid #e2d6c4; /* Viền nhẹ */
    border-radius: var(--tai-lieu-radius, 18px); /* Bo góc */
}

/* Tiêu đề tài liệu liên quan */
.tai-lieu-related__title {
    margin: 0 0 18px; /* Cách lưới card */
    color: #3b2617; /* Màu tiêu đề */
    font-size: 26px; /* Cỡ chữ */
    line-height: 1.35; /* Giãn dòng */
}

/* Lưới tài liệu liên quan */
.tai-lieu-related__grid {
    display: grid; /* Dàn lưới */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 cột desktop */
    gap: 18px; /* Khoảng cách card */
}

/* Card tài liệu liên quan */
.tai-lieu-related-card {
    overflow: hidden; /* Giữ ảnh trong bo góc */
    background: #ffffff; /* Nền card */
    border: 1px solid #e2d6c4; /* Viền card */
    border-radius: 14px; /* Bo góc */
}

/* Ảnh tài liệu liên quan */
.tai-lieu-related-card__thumb {
    display: block; /* Link ảnh dạng block */
    aspect-ratio: 16 / 9; /* Tỷ lệ ảnh */
    background: #efe3d1; /* Nền dự phòng */
    overflow: hidden; /* Ẩn ảnh tràn */
}

.tai-lieu-related-card__thumb img {
    display: block; /* Xóa khoảng trắng dưới ảnh */
    width: 100%; /* Ảnh rộng hết khung */
    height: 100%; /* Ảnh cao hết khung */
    object-fit: cover; /* Cắt ảnh vừa khung */
}

/* Nội dung card liên quan */
.tai-lieu-related-card__body {
    padding: 18px; /* Khoảng cách trong card */
}

/* Tiêu đề card liên quan */
.tai-lieu-related-card__title {
    margin: 0 0 8px; /* Cách ngày/nút */
    font-size: 18px; /* Cỡ chữ */
    line-height: 1.35; /* Giãn dòng */
}

.tai-lieu-related-card__title a {
    color: #3b2617; /* Màu tiêu đề */
    text-decoration: none; /* Bỏ gạch chân */
}

.tai-lieu-related-card__title a:hover {
    text-decoration: underline; /* Hover gạch chân */
}

/* Ngày tài liệu liên quan */
.tai-lieu-related-card__date {
    margin-bottom: 12px; /* Cách nút */
    color: #8a765f; /* Màu phụ */
    font-size: 14px; /* Cỡ chữ */
}

/* Link xem tài liệu trong khối liên quan: giống link đọc tiếp ngoài trang chủ */
.tai-lieu-related-card__button {
    display: inline-block; /* Dạng link */
    margin-top: 12px; /* Cách đoạn trích */
    padding: 0; /* Không nền nút */
    min-height: 0; /* Không ép chiều cao nút */
    border: 0; /* Không viền */
    border-radius: 0; /* Không bo nút */
    background: transparent; /* Bỏ nền */
    color: var(--accent-color); /* Màu nhấn như trang chủ */
    font-size: 14px; /* Cỡ chữ */
    font-weight: 700; /* In đậm */
    text-decoration: none; /* Bỏ gạch chân */
}

.tai-lieu-related-card__button:hover {
    background: transparent; /* Không nền hover */
    text-decoration: underline; /* Hover như link */
}

/* ==================================================
   16. TÌM KIẾM / BỘ LỌC ARCHIVE TÀI LIỆU
================================================== */

/* Khối tìm kiếm và lọc */
.tai-lieu-archive-tools {
    margin: 0 0 28px; /* Cách danh sách */
    padding: 18px; /* Khoảng cách trong khối */
    background: #fffdf8; /* Nền */
    border: 1px solid #e2d6c4; /* Viền */
    border-radius: var(--tai-lieu-radius, 18px); /* Bo góc */
}

/* Form lọc */
.tai-lieu-filter-form {
    display: flex; /* Các trường nằm ngang */
    flex-wrap: wrap; /* Cho xuống dòng nếu thiếu chỗ */
    align-items: center; /* Căn giữa */
    gap: 12px; /* Khoảng cách */
}

/* Ô tìm kiếm chiếm chỗ chính */
.tai-lieu-filter-form__search {
    flex: 1 1 280px; /* Co giãn */
    min-width: 220px; /* Chiều rộng tối thiểu */
}

/* Input và select lọc */
.tai-lieu-filter-form input[type="search"],
.tai-lieu-filter-form select {
    width: 100%; /* Rộng hết khung */
    min-height: 40px; /* Chiều cao */
    padding: 8px 12px; /* Khoảng cách */
    border: 1px solid #cdbfa8; /* Viền */
    border-radius: 999px; /* Bo tròn */
    background: #ffffff; /* Nền trắng */
    color: #4a2f1b; /* Màu chữ */
    font-size: 14px; /* Cỡ chữ */
}

/* Nút lọc */
.tai-lieu-filter-form button {
    min-height: 40px; /* Cao bằng input */
    padding: 8px 18px; /* Khoảng cách */
    border: 0; /* Bỏ viền */
    border-radius: 999px; /* Bo tròn */
    background: #4a2f1b; /* Nền nâu */
    color: #ffffff; /* Chữ trắng */
    font-weight: 700; /* Chữ đậm */
    cursor: pointer; /* Con trỏ bấm */
}

/* Link xóa lọc */
.tai-lieu-filter-form__reset {
    color: #8a5a2b; /* Màu link */
    font-size: 14px; /* Cỡ chữ */
    font-weight: 700; /* In đậm */
    text-decoration: none; /* Bỏ gạch chân */
}

.tai-lieu-filter-form__reset:hover {
    text-decoration: underline; /* Hover gạch chân */
}

/* ==================================================
   17. RESPONSIVE BỔ SUNG CHO TÙY BIẾN TÀI LIỆU
================================================== */

@media (max-width: 900px) {
    .tai-lieu-document {
        padding: 22px; /* Giảm padding khi màn hình nhỏ */
    }

    .tai-lieu-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Tablet 2 cột */
    }
}

@media (max-width: 640px) {
    .tai-lieu-header,
    .tai-lieu-newsbar {
        max-width: calc(100% - 20px); /* Chừa mép trên mobile */
    }

    .tai-lieu-single,
    .tai-lieu-archive {
        max-width: calc(100% - 20px); /* Chừa mép mobile */
        padding-left: 0; /* Khung đã có lề ngoài */
        padding-right: 0; /* Khung đã có lề ngoài */
    }

    .tai-lieu-document,
    .tai-lieu-related,
    .tai-lieu-archive-tools {
        padding: 18px; /* Gọn hơn */
    }

    .tai-lieu-related__grid {
        grid-template-columns: 1fr; /* Mobile 1 cột */
    }

    .tai-lieu-filter-form {
        align-items: stretch; /* Các trường rộng hết dòng */
    }

    .tai-lieu-filter-form button,
    .tai-lieu-filter-form__reset {
        width: 100%; /* Nút rộng hết dòng */
        text-align: center; /* Căn giữa */
    }
}

/* ==================================================
   TÀI LIỆU - BỔ SUNG LAYOUT ĐÓNG HỘP / THƠ / VĂN XUÔI
================================================== */

.tai-lieu-site-box {
	max-width: var(--tai-lieu-width);
}

.tai-lieu-single,
.tai-lieu-archive {
	max-width: var(--tai-lieu-width);
	margin: 0 auto;
	padding: 28px 24px 48px;
}

.tai-lieu-document,
.tai-lieu-note,
.tai-lieu-related,
.tai-lieu-contribute,
.tai-lieu-auth-invite,
.tai-lieu-banner,
.tai-lieu-comments,
.tai-lieu-archive__hero,
.tai-lieu-archive-tools,
.tai-lieu-archive__list {
	border-radius: var(--tai-lieu-radius);
}

.tai-lieu-document-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 10px;
	font-size: 14px;
	color: var(--muted-color, #666);
}

.tai-lieu-document-meta a {
	color: var(--accent-color, #8b3a3a);
	text-decoration: none;
}

.tai-lieu-han {
	color: var(--tai-lieu-han-color);
	font-family: var(--tai-lieu-han-font-family);
	font-size: var(--tai-lieu-han-font-size);
}

.tai-lieu-reading {
	color: var(--tai-lieu-reading-color);
	font-size: var(--tai-lieu-reading-font-size);
}

.tai-lieu-char {
	width: var(--tai-lieu-char-width);
}

.tai-lieu-style-poem .tai-lieu-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 28px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}

.tai-lieu-style-prose .tai-lieu-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding: 20px 0;
}

.tai-lieu-style-poem .tai-lieu-vietnamese-text,
.tai-lieu-style-prose .tai-lieu-vietnamese-text {
	font-family: inherit;
	font-size: 16px;
	line-height: 1.9;
}

.tai-lieu-banner {
	margin: 26px auto;
	padding: 18px;
	border: 1px dashed var(--border-color, #e5d6c3);
	background: #fffdf8;
	text-align: center;
}

.tai-lieu-auth-invite {
	max-width: 920px;
	margin: 34px auto;
	padding: 18px 22px;
	border: 1px solid var(--border-color, #e5d6c3);
	background: #fffaf3;
	text-align: center;
	font-size: 16px;
}

.tai-lieu-auth-invite button {
	border: 0;
	background: transparent;
	color: var(--accent-color, #8b3a3a);
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
}

.tai-lieu-contribute {
	max-width: 920px;
	margin: 34px auto;
	padding: 28px;
	border: 1px solid var(--border-color, #e5d6c3);
	background: #fffaf3;
}

.tai-lieu-contribute__field {
	margin-bottom: 16px;
}

.tai-lieu-contribute__field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
}

.tai-lieu-contribute__field select,
.tai-lieu-contribute__field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--border-color, #d8c7b3);
	border-radius: 10px;
	font: inherit;
}

.tai-lieu-contribute__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--accent-color, #8b3a3a);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

@media (max-width: 768px) {
	.tai-lieu-single,
	.tai-lieu-archive {
		padding: 22px 16px 36px;
	}

	.tai-lieu-style-poem .tai-lieu-pair,
	.tai-lieu-style-prose .tai-lieu-pair {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.tai-lieu-header {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.tai-lieu-header__left,
	.tai-lieu-header__right {
		justify-content: center;
	}
}

/* ==================================================
   FIX LAYOUT TÀI LIỆU - THƠ / VĂN XUÔI
   - Thơ: từng dòng Hán đối từng dòng dịch trong 2 cột.
   - Văn xuôi: cột Hán bên trái, cột dịch bên phải như bố cục cũ.
================================================== */

/* Văn xuôi: toàn bộ chữ Hán nằm một cột, toàn bộ bản dịch nằm một cột */
.tai-lieu-style-prose .tai-lieu-reader--prose {
	display: grid; /* Chia thành 2 cột lớn */
	grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr); /* Hán trái rộng hơn, dịch phải vừa đọc */
	gap: 0; /* Không tạo khoảng trống giữa hai cột */
	align-items: start; /* Hai cột bắt đầu cùng hàng */
}

/* Cột Hán của văn xuôi */
.tai-lieu-style-prose .tai-lieu-prose-left {
	min-width: 0; /* Chống tràn layout */
	padding: 22px 34px 22px 0; /* Khoảng cách trong cột Hán */
}

/* Cột dịch của văn xuôi */
.tai-lieu-style-prose .tai-lieu-prose-right {
	min-width: 0; /* Chống tràn layout */
	padding: 22px 0 22px 34px; /* Cách chữ Việt khỏi đường kẻ */
	border-left: 1px solid #d8c9b4; /* Đường kẻ chia hai cột */
}

/* Từng dòng Hán trong văn xuôi */
.tai-lieu-style-prose .tai-lieu-prose-line {
	margin-bottom: 34px; /* Cách các dòng/đoạn Hán */
}

/* Chữ Hán trong văn xuôi dàn tự nhiên từ trái sang phải */
.tai-lieu-style-prose .tai-lieu-original-block {
	justify-content: flex-start; /* Dàn từ trái */
}

/* Dịch văn xuôi giữ dạng đoạn văn liên tục */
.tai-lieu-style-prose .tai-lieu-vietnamese-text {
	margin: 0 0 18px; /* Khoảng cách đoạn dịch */
	text-align: left; /* Căn trái */
	font-family: inherit; /* Dùng font chung của web */
	font-size: 16px; /* Cỡ chữ đọc dễ */
	line-height: 1.9; /* Giãn dòng dễ đọc */
}

/* Thơ: mỗi dòng Hán đối một dòng dịch */
.tai-lieu-style-poem .tai-lieu-reader--poem {
	display: block; /* Không dùng grid tổng để tránh vỡ thành nhiều cột */
}

/* Một cặp dòng thơ: Hán trái, dịch phải */
.tai-lieu-style-poem .tai-lieu-pair {
	display: grid; /* Chia mỗi dòng thành 2 cột */
	grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); /* Hai cột cân bằng */
	gap: 0; /* Không tạo khoảng cách thừa */
	align-items: start; /* Hán và dịch bắt đầu cùng hàng */
	padding: 24px 0; /* Khoảng cách giữa các dòng thơ */
	border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* Ngăn cách nhẹ giữa các dòng */
}

/* Cột Hán trong thơ */
.tai-lieu-style-poem .tai-lieu-pair__left {
	grid-column: auto; /* Hủy grid-column cũ */
	padding: 0 34px 0 0; /* Khoảng cách bên phải */
	border: 0; /* Không viền */
}

/* Cột dịch trong thơ */
.tai-lieu-style-poem .tai-lieu-pair__right {
	grid-column: auto; /* Hủy grid-column cũ */
	padding: 0 0 0 34px; /* Cách chữ dịch khỏi đường kẻ */
	border-left: 1px solid #d8c9b4; /* Đường kẻ chia dòng Hán/dịch */
}

/* Dòng Hán trong thơ căn trái, không tự nhảy sang cột khác */
.tai-lieu-style-poem .tai-lieu-original-block {
	justify-content: flex-start; /* Dàn từ trái */
	column-gap: 14px; /* Khoảng cách chữ */
	row-gap: 26px; /* Khoảng cách nếu câu dài xuống dòng */
}

/* Bản dịch thơ theo từng dòng */
.tai-lieu-style-poem .tai-lieu-vietnamese-text {
	margin: 0; /* Không đẩy lệch dòng */
	text-align: left; /* Căn trái cho dễ đọc */
	font-family: inherit; /* Dùng font chung */
	font-size: 16px; /* Cỡ chữ */
	line-height: 1.9; /* Giãn dòng */
}

/* Mobile: cả thơ và văn xuôi chuyển thành 1 cột */
@media (max-width: 900px) {
	.tai-lieu-style-prose .tai-lieu-reader--prose,
	.tai-lieu-style-poem .tai-lieu-pair {
		grid-template-columns: 1fr; /* Một cột */
	}

	.tai-lieu-style-prose .tai-lieu-prose-left,
	.tai-lieu-style-prose .tai-lieu-prose-right,
	.tai-lieu-style-poem .tai-lieu-pair__left,
	.tai-lieu-style-poem .tai-lieu-pair__right {
		padding: 18px 0; /* Gọn hơn */
		border-left: 0; /* Bỏ đường kẻ dọc */
	}
}

/* ==================================================
   FIX CUỐI - HEADER TÀI LIỆU 2 DÒNG
   Dòng 1: search trái, logo giữa, menu phải.
   Dòng 2: công tắc chuyển đổi bên phải.
================================================== */

.tai-lieu-header {
	display: block; /* Header có 2 dòng riêng */
	padding: 0; /* Padding chuyển vào từng dòng */
}

.tai-lieu-header__main {
	display: grid; /* Chia dòng chính thành 3 cột */
	grid-template-columns: minmax(240px, 1fr) auto minmax(260px, 1fr); /* Search | Logo | Menu */
	align-items: center; /* Căn giữa theo chiều dọc */
	gap: 24px; /* Khoảng cách giữa 3 vùng */
	padding: 12px 32px; /* Khoảng cách trong dòng 1 */
}

.tai-lieu-header__tools {
	display: flex; /* Dàn các nút chuyển đổi theo hàng ngang */
	justify-content: flex-end; /* Đẩy công tắc sang phải */
	align-items: center; /* Căn giữa dọc */
	gap: 12px; /* Khoảng cách giữa công tắc */
	padding: 8px 32px 12px; /* Khoảng cách trong dòng 2 */
	border-top: 1px solid rgba(216, 201, 180, 0.65); /* Kẻ nhẹ giữa 2 dòng */
}

.tai-lieu-navigation {
	min-width: 0; /* Chống tràn menu */
}

.tai-lieu-menu {
	display: flex; /* Menu nằm ngang */
	justify-content: flex-end; /* Menu sát bên phải */
	align-items: center; /* Căn giữa dọc */
	gap: 18px; /* Khoảng cách mục menu */
	margin: 0; /* Xóa margin mặc định */
	padding: 0; /* Xóa padding mặc định */
	list-style: none; /* Bỏ dấu chấm */
	flex-wrap: wrap; /* Cho xuống dòng khi thiếu chỗ */
}

.tai-lieu-menu a {
	color: #4a2f1b; /* Màu chữ menu */
	font-size: 14px; /* Cỡ chữ menu */
	font-weight: 700; /* Chữ đậm vừa */
	text-decoration: none; /* Bỏ gạch chân */
}

.tai-lieu-menu a:hover {
	color: #8b3a3a; /* Đổi màu khi hover */
}

/* Header CPT tài liệu không dùng nút đăng nhập/đăng ký */
.tai-lieu-header .header-auth {
	display: none !important;
}

/* ==================================================
   FIX CUỐI - TÀI LIỆU ĐỐI ĐOẠN
   Mỗi Enter trong Hán hoặc Việt tạo một đoạn.
   Hán đoạn 1 đối Việt đoạn 1, Hán đoạn 2 đối Việt đoạn 2.
================================================== */

.tai-lieu-reader--segments {
	display: block; /* Không dùng grid tổng, tránh tự tách thành nhiều cột */
	width: 100%; /* Rộng hết khung tài liệu */
}

.tai-lieu-reader--segments .tai-lieu-pair,
.tai-lieu-style-poem .tai-lieu-pair,
.tai-lieu-style-prose .tai-lieu-pair {
	display: grid !important; /* Mỗi đoạn là một hàng 2 cột */
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr); /* Hán trái, Việt phải */
	gap: 0; /* Không tạo khe thừa */
	align-items: start; /* Hai đoạn bắt đầu cùng hàng */
	padding: 26px 0; /* Khoảng cách giữa các đoạn */
	border-bottom: 1px solid rgba(216, 201, 180, 0.55); /* Kẻ nhẹ giữa đoạn */
}

.tai-lieu-reader--segments .tai-lieu-pair:last-child {
	border-bottom: 0; /* Bỏ kẻ cuối */
}

.tai-lieu-reader--segments .tai-lieu-pair__left,
.tai-lieu-style-poem .tai-lieu-pair__left,
.tai-lieu-style-prose .tai-lieu-pair__left {
	grid-column: 1 !important; /* Chữ Hán luôn ở cột trái */
	min-width: 0; /* Chống tràn */
	padding: 0 34px 0 0; /* Cách đường chia cột */
	border: 0; /* Không dùng viền card */
}

.tai-lieu-reader--segments .tai-lieu-pair__right,
.tai-lieu-style-poem .tai-lieu-pair__right,
.tai-lieu-style-prose .tai-lieu-pair__right {
	grid-column: 2 !important; /* Bản dịch luôn ở cột phải */
	min-width: 0; /* Chống tràn */
	padding: 0 0 0 34px; /* Cách đường chia cột */
	border-left: 1px solid #d8c9b4; /* Đường chia Hán - Việt */
	font-family: inherit; /* Dịch dùng font toàn trang */
}

.tai-lieu-reader--segments .tai-lieu-original-block,
.tai-lieu-style-poem .tai-lieu-original-block,
.tai-lieu-style-prose .tai-lieu-original-block {
	display: flex; /* Chữ Hán chạy ngang trong từng đoạn */
	flex-wrap: wrap; /* Dài thì xuống dòng trong cùng đoạn */
	justify-content: flex-start; /* Không nhảy sang cột khác */
	align-items: flex-start; /* Âm đọc nằm trên chữ */
	column-gap: 14px; /* Khoảng cách ngang giữa chữ */
	row-gap: 26px; /* Khoảng cách khi đoạn dài phải xuống dòng */
}

.tai-lieu-reader--segments .tai-lieu-vietnamese-text,
.tai-lieu-style-poem .tai-lieu-vietnamese-text,
.tai-lieu-style-prose .tai-lieu-vietnamese-text {
	margin: 0; /* Không đẩy lệch đoạn */
	font-family: inherit; /* Theo font chung của trang */
	font-size: 16px; /* Cỡ chữ dịch */
	line-height: 1.9; /* Dễ đọc */
	text-align: left; /* Căn trái mặc định */
}

.tai-lieu-vietnamese-text p {
	margin: 0 0 1em; /* Giữ khoảng cách đoạn trong editor nếu có */
}

.tai-lieu-vietnamese-text p:last-child {
	margin-bottom: 0; /* Không dư khoảng cuối */
}

.tai-lieu-vietnamese-text a {
	color: #8b3a3a; /* Link trong bản dịch */
	text-decoration: underline; /* Dễ nhận biết link */
}

/* Kiểu thơ: chữ Hán có thể gọn hơn một chút */
.tai-lieu-style-poem .tai-lieu-original-block {
	column-gap: 12px; /* Khoảng cách chữ thơ */
}

/* Kiểu văn xuôi: giữ đoạn rộng và thoáng */
.tai-lieu-style-prose .tai-lieu-original-block {
	column-gap: 14px; /* Khoảng cách chữ văn xuôi */
}

/* ==================================================
   FIX CUỐI - MOBILE TÀI LIỆU
================================================== */

@media (max-width: 900px) {
	.tai-lieu-header__main {
		grid-template-columns: 1fr; /* Header tài liệu xuống 1 cột */
		gap: 10px; /* Gọn hơn */
		padding: 12px 16px; /* Giảm padding */
		text-align: center; /* Căn giữa khi xếp dọc */
	}

	.tai-lieu-header__left,
	.tai-lieu-header__right,
	.tai-lieu-menu {
		justify-content: center; /* Căn giữa trên mobile */
	}

	.tai-lieu-header__tools {
		justify-content: center; /* Công tắc căn giữa mobile */
		padding: 8px 16px 12px; /* Gọn hơn */
		flex-wrap: wrap; /* Cho xuống dòng nếu hẹp */
	}

	.tai-lieu-search {
		max-width: 100%; /* Search rộng hết khung */
	}

	.tai-lieu-reader--segments .tai-lieu-pair,
	.tai-lieu-style-poem .tai-lieu-pair,
	.tai-lieu-style-prose .tai-lieu-pair {
		grid-template-columns: 1fr; /* Mobile chuyển thành 1 cột */
		padding: 22px 0; /* Giảm khoảng cách */
	}

	.tai-lieu-reader--segments .tai-lieu-pair__left,
	.tai-lieu-style-poem .tai-lieu-pair__left,
	.tai-lieu-style-prose .tai-lieu-pair__left,
	.tai-lieu-reader--segments .tai-lieu-pair__right,
	.tai-lieu-style-poem .tai-lieu-pair__right,
	.tai-lieu-style-prose .tai-lieu-pair__right {
		grid-column: auto !important; /* Hủy cột cố định */
		padding: 0; /* Bỏ padding cột */
		border-left: 0; /* Bỏ đường chia */
	}

	.tai-lieu-reader--segments .tai-lieu-pair__right,
	.tai-lieu-style-poem .tai-lieu-pair__right,
	.tai-lieu-style-prose .tai-lieu-pair__right {
		margin-top: 18px; /* Cách bản dịch với Hán */
	}
}

/* ==================================================
   FINAL OVERRIDES - TÀI LIỆU: HEADER + ĐỐI ĐOẠN
================================================== */

/* Header CPT: dòng 1 giống trang chủ, dòng 2 giữ nút chuyển đổi */
.tai-lieu-header {
	position: static !important;
	display: block !important;
	padding: 0 !important;
	background: var(--header-bg, #ffffff);
	border-bottom: 1px solid var(--border-color, #e5e5e5);
	box-shadow: none !important;
}

.tai-lieu-header.is-sticky {
	position: static !important;
}

.tai-lieu-header.is-sticky .tai-lieu-header__main {
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.tai-lieu-header__main {
	display: grid;
	grid-template-columns: 260px minmax(160px, 1fr) minmax(320px, 1fr);
	grid-template-areas: "search brand nav";
	align-items: center;
	gap: 18px;
	min-height: var(--header-main-height, 68px);
	padding: 10px 24px;
	background: var(--header-bg, #ffffff);
}

.tai-lieu-header__left {
	grid-area: search;
	display: block;
	min-width: 0;
}

.tai-lieu-header__center {
	grid-area: brand;
	text-align: center;
}

.tai-lieu-header__right {
	grid-area: nav;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-width: 0;
}

.tai-lieu-search {
	max-width: 220px;
	width: 100%;
}

.tai-lieu-search__input {
	height: 34px;
	font-size: 13px;
}

.tai-lieu-search__button {
	height: 34px;
	padding: 0 12px;
	font-size: 13px;
}

.tai-lieu-logo {
	font-size: 23px;
	font-weight: 700;
	color: var(--text-color, #222222);
	text-decoration: none;
}

.tai-lieu-logo .custom-logo {
	max-height: 58px;
	width: auto;
	margin: 0 auto;
}

.tai-lieu-header__tools {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	padding: 8px 24px;
	background: #fffaf3;
	border-top: 1px solid var(--border-color, #e5e5e5);
}

.tai-lieu-navigation {
	text-align: right;
}

.tai-lieu-menu {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tai-lieu-menu a {
	text-decoration: none;
}

/* Đối đoạn chung: không phân thơ/văn xuôi */
.tai-lieu-single {
	max-width: var(--tai-lieu-width, 1180px) !important;
	padding-left: 24px;
	padding-right: 24px;
}

.tai-lieu-reader--segments {
	position: relative;
	display: block !important;
	width: 100%;
}

.tai-lieu-reader--segments::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--tai-lieu-left-width, 62%);
	width: var(--tai-lieu-divider-width, 1px);
	background: var(--tai-lieu-divider-color, #d8c9b4);
	pointer-events: none;
}

.tai-lieu-reader--segments .tai-lieu-pair,
.tai-lieu-style-poem .tai-lieu-pair,
.tai-lieu-style-prose .tai-lieu-pair,
.tai-lieu-style-paired .tai-lieu-pair {
	display: grid !important;
	grid-template-columns: var(--tai-lieu-left-width, 62%) minmax(0, 1fr) !important;
	gap: 0 !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tai-lieu-reader--segments .tai-lieu-pair__left,
.tai-lieu-reader--segments .tai-lieu-pair__right,
.tai-lieu-style-paired .tai-lieu-pair__left,
.tai-lieu-style-paired .tai-lieu-pair__right {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	min-width: 0;
}

.tai-lieu-reader--segments .tai-lieu-pair__left,
.tai-lieu-style-paired .tai-lieu-pair__left {
	padding: 20px 34px 20px 0 !important;
}

.tai-lieu-reader--segments .tai-lieu-pair__right,
.tai-lieu-style-paired .tai-lieu-pair__right {
	padding: 20px 0 20px 34px !important;
	font-family: inherit !important;
	color: var(--tai-lieu-viet-color, #2f2a24) !important;
}

.tai-lieu-vietnamese-text {
	font-size: var(--tai-lieu-viet-font-size, 18px) !important;
	color: var(--tai-lieu-viet-color, #2f2a24) !important;
	line-height: 1.9;
}

.tai-lieu-vietnamese-text p {
	margin-top: 0;
}

.tai-lieu-original-block {
	border: 0 !important;
	background: transparent !important;
}

.tai-lieu-han {
	font-size: var(--tai-lieu-han-font-size, 42px) !important;
	color: var(--tai-lieu-han-color, #111111) !important;
	font-family: var(--tai-lieu-han-font-family, serif) !important;
}

.tai-lieu-reading {
	font-size: var(--tai-lieu-reading-font-size, 14px) !important;
	color: var(--tai-lieu-reading-color, #8a5a2b) !important;
}

.tai-lieu-char {
	min-width: var(--tai-lieu-char-width, 42px) !important;
}

/* Tài liệu liên quan: chữ thống nhất, không kiểu nút */
.tai-lieu-related__title {
	font-size: 24px;
}

.tai-lieu-related-card__button {
	display: inline-block !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--accent-color, #8b3a3a) !important;
	font-weight: 700;
	text-decoration: none;
}

.tai-lieu-related-card__button:hover {
	text-decoration: underline;
}

.tai-lieu-related-card__excerpt {
	margin: 8px 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted-color, #666666);
}

/* Mobile */
@media (max-width: 768px) {
	.tai-lieu-header__main {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "search brand nav" "menu menu menu";
		gap: 10px;
		padding: 10px 14px;
	}

	.tai-lieu-search {
		max-width: 150px;
	}

	.tai-lieu-navigation {
		display: none;
		grid-area: menu;
		text-align: left;
	}

	.tai-lieu-header.menu-open .tai-lieu-navigation {
		display: block;
	}

	.tai-lieu-menu {
		display: block;
		padding-top: 8px;
	}

	.tai-lieu-menu li {
		border-top: 1px solid var(--border-color, #e5e5e5);
	}

	.tai-lieu-menu a {
		display: block;
		padding: 9px 0;
	}

	.tai-lieu-header__tools {
		justify-content: flex-end;
		padding: 8px 14px;
		overflow-x: auto;
	}

	.tai-lieu-reader--segments::before {
		display: none;
	}

	.tai-lieu-reader--segments .tai-lieu-pair,
	.tai-lieu-style-paired .tai-lieu-pair {
		grid-template-columns: 1fr !important;
	}

	.tai-lieu-reader--segments .tai-lieu-pair__left,
	.tai-lieu-reader--segments .tai-lieu-pair__right,
	.tai-lieu-style-paired .tai-lieu-pair__left,
	.tai-lieu-style-paired .tai-lieu-pair__right {
		padding: 16px 0 !important;
	}
}


/* ==================================================
   FINAL FIX 5 - HEADER TÀI LIỆU, STICKY ĐÚNG, SHARE ICON
================================================== */

/* Header tài liệu: chỉ sticky khối dòng chính + dòng nút, không sticky Mới cập nhật */
.tai-lieu-header {
	position: static !important;
	top: auto !important;
	z-index: auto !important;
	box-shadow: none !important;
	background: transparent;
}

.tai-lieu-header__sticky {
	background: var(--header-bg, #ffffff);
	border-bottom: 1px solid var(--border-color, #e5e5e5);
}

.tai-lieu-header.is-sticky .tai-lieu-header__sticky {
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Dòng 1 của header CPT: logo trái, menu giữa, tìm kiếm phải */
.tai-lieu-header__main {
	display: grid !important;
	grid-template-columns: 260px minmax(0, 1fr) 260px !important;
	grid-template-areas: "brand nav search" !important;
	align-items: center;
	gap: 20px;
	min-height: var(--header-main-height, 64px);
	padding: 10px 24px;
	background: var(--header-bg, #ffffff);
}

.tai-lieu-header__brand {
	grid-area: brand;
	justify-self: start;
	min-width: 0;
}

.tai-lieu-logo {
	display: inline-flex;
	align-items: center;
	color: var(--text-color, #222222);
	font-weight: 800;
	text-decoration: none;
}

.tai-lieu-logo .custom-logo {
	max-height: 58px;
	width: auto;
}

.tai-lieu-navigation {
	grid-area: nav;
	justify-self: center;
	text-align: center;
}

.tai-lieu-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tai-lieu-header__right {
	grid-area: search;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	min-width: 0;
}

.tai-lieu-search {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 0;
}

.tai-lieu-search__input {
	max-width: 190px;
	min-width: 0;
}

.tai-lieu-search__button {
	padding: 8px 16px;
}

/* Dòng 2 nút chuyển đổi giữ lại và sticky cùng header CPT */
.tai-lieu-header__tools {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	padding: 9px 24px 10px;
	background: var(--header-bg, #ffffff);
	border-top: 1px solid var(--border-color, #e5e5e5);
}

/* Mũi tên menu nhiều tầng cho menu CPT */
.tai-lieu-menu .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.tai-lieu-menu .menu-item-has-children > a::after {
	content: "▾";
	font-size: 11px;
	line-height: 1;
	opacity: 0.75;
}

.tai-lieu-menu .sub-menu .menu-item-has-children > a::after {
	content: "›";
	margin-left: auto;
}

/* Share cuối bài tài liệu dùng chung icon tròn từ main.css */
.tai-lieu-single .share-buttons {
	max-width: var(--tai-lieu-width, 1180px);
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 900px) {
	.tai-lieu-header__main {
		grid-template-columns: 1fr auto 1fr !important;
		grid-template-areas:
			"search brand toggle"
			"nav nav nav" !important;
		gap: 12px;
		padding: 12px 16px;
	}

	.tai-lieu-header__brand {
		justify-self: center;
	}

	.tai-lieu-header__right {
		align-items: flex-start;
	}

	.tai-lieu-search__input {
		max-width: 130px;
	}

	.tai-lieu-navigation {
		display: none;
		grid-area: nav;
		width: 100%;
		text-align: left;
	}

	.tai-lieu-header.menu-open .tai-lieu-navigation {
		display: block;
	}

	.tai-lieu-menu {
		display: block;
	}

	.tai-lieu-header__tools {
		justify-content: center;
		flex-wrap: wrap;
		padding: 8px 16px;
	}
}

/* ==================================================
   FINAL FIX 6 - HEADER CPT TÁCH RÕ KHỐI STICKY
================================================== */

/* Header CPT chỉ gồm dòng chính + dòng nút, được phép sticky; không chứa Mới cập nhật */
.tai-lieu-header {
	position: static !important;
	display: block !important;
	top: auto !important;
	z-index: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* Khi cuộn: dính cả dòng header chính + dòng nút Phồn/Giản/Hán Việt/Pinyin/Zhuyin */
.tai-lieu-header.is-sticky {
	position: sticky !important;
	top: 0 !important;
	z-index: 1001 !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

.tai-lieu-header__sticky {
	position: static !important;
	background: var(--header-bg, #ffffff) !important;
	border-bottom: 1px solid var(--border-color, #e5e5e5) !important;
	box-shadow: none !important;
}

.tai-lieu-header.is-sticky .tai-lieu-header__sticky,
.tai-lieu-header.is-sticky .tai-lieu-header__main {
	position: static !important;
	top: auto !important;
	box-shadow: none !important;
}

/* Dòng 1 của header CPT: logo trái, menu giữa, tìm kiếm + mạng xã hội bên phải */
.tai-lieu-header__main {
	display: grid !important;
	grid-template-columns: 260px minmax(0, 1fr) 260px !important;
	grid-template-areas: "brand nav search" !important;
	align-items: center !important;
	gap: 20px !important;
	min-height: var(--header-main-height, 64px) !important;
	padding: 10px 24px !important;
	background: var(--header-bg, #ffffff) !important;
}

.tai-lieu-header__brand {
	grid-area: brand !important;
	justify-self: start !important;
	text-align: left !important;
}

.tai-lieu-navigation {
	grid-area: nav !important;
	justify-self: center !important;
	text-align: center !important;
}

.tai-lieu-header__right {
	grid-area: search !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: center !important;
	gap: 0 !important;
	min-width: 0 !important;
}

.tai-lieu-search {
	max-width: 220px !important;
	width: 100% !important;
}

.tai-lieu-search__button {
	display: none !important;
}

/* Dòng 2: các nút chuyển đổi nằm bên phải và sticky cùng header CPT */
.tai-lieu-header__tools {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 24px !important;
	background: var(--header-bg, #ffffff) !important;
	border-top: 1px solid var(--border-color, #e5e5e5) !important;
}

/* Menu tài liệu nhiều tầng có mũi tên */
.tai-lieu-menu .menu-item-has-children > a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
}

.tai-lieu-menu .menu-item-has-children > a::after {
	content: "▾" !important;
	font-size: 11px !important;
	line-height: 1 !important;
	opacity: 0.75 !important;
}

.tai-lieu-menu .sub-menu .menu-item-has-children > a::after {
	content: "›" !important;
	margin-left: auto !important;
}

.tai-lieu-menu .sub-menu {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	z-index: 1005 !important;
	display: none !important;
	min-width: 210px !important;
	margin: 0 !important;
	padding: 8px 0 !important;
	list-style: none !important;
	background: var(--header-bg, #ffffff) !important;
	border: 1px solid var(--border-color, #e5e5e5) !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08) !important;
}

.tai-lieu-menu .sub-menu .sub-menu {
	top: -8px !important;
	left: 100% !important;
}

.tai-lieu-menu li:hover > .sub-menu,
.tai-lieu-menu li:focus-within > .sub-menu {
	display: block !important;
}

.tai-lieu-menu .sub-menu a {
	display: flex !important;
	justify-content: space-between !important;
	width: 100% !important;
	padding: 8px 14px !important;
	white-space: nowrap !important;
	text-align: left !important;
}

/* Thanh Mới cập nhật nếu có thì là khối riêng, không sticky */
.tai-lieu-newsbar {
	position: relative !important;
	top: auto !important;
	z-index: 1 !important;
	box-shadow: none !important;
}

@media (max-width: 768px) {
	.tai-lieu-header__main {
		grid-template-columns: 1fr auto 1fr !important;
		grid-template-areas:
			"search brand toggle"
			"nav nav nav" !important;
		gap: 12px !important;
		padding: 12px 16px !important;
	}

	.tai-lieu-header__brand {
		justify-self: center !important;
		text-align: center !important;
	}

	.tai-lieu-header__right {
		align-items: flex-start !important;
	}

	.tai-lieu-search {
		max-width: 130px !important;
	}

	.tai-lieu-header .header-socials {
		display: none !important;
	}

	.tai-lieu-header__tools {
		justify-content: center !important;
		flex-wrap: wrap !important;
		padding: 8px 16px !important;
	}

	.tai-lieu-menu .sub-menu {
		position: static !important;
		display: block !important;
		min-width: 0 !important;
		padding: 0 0 0 14px !important;
		border: 0 !important;
		box-shadow: none !important;
	}
}


/* Thanh công cụ CPT vẫn dùng màu nền tùy biến, công tắc giữ style xanh cũ. */
.tai-lieu-header__tools { background: var(--tai-lieu-tools-bg, #fff8ec); }
.tai-lieu-real-switch label { font-size: var(--tai-lieu-tool-font-size, 12px); }
.tai-lieu-document-title,
.tai-lieu-note__title,
.tai-lieu-related__title {
	font-family: var(--heading-font-family, var(--body-font-family));
}
.tai-lieu-vietnamese-text,
.tai-lieu-note__content,
.tai-lieu-related-card__excerpt {
	font-family: var(--content-font-family, var(--body-font-family));
	line-height: var(--content-line-height, 1.8);
}
@media (max-width: 900px) {
	.tai-lieu-reader--segments,
	.tai-lieu-pair,
	.tai-lieu-document-body { display: block !important; }
	.tai-lieu-pair__left,
	.tai-lieu-pair__right {
		width: 100% !important;
		max-width: 100% !important;
	}
	.tai-lieu-pair__right {
		margin-top: 14px;
		padding-left: 0 !important;
		border-left: 0 !important;
	}
}
@media (max-width: 768px) {
	.tai-lieu-header__main {
		grid-template-columns: 1fr auto !important;
		grid-template-areas:
			"brand toggle"
			"search search"
			"nav nav" !important;
		gap: 10px !important;
		padding: 10px 14px !important;
	}
	.tai-lieu-navigation {
		display: none;
		grid-area: nav !important;
		width: 100%;
	}
	.tai-lieu-header.menu-open .tai-lieu-navigation { display: block; }
	.tai-lieu-menu {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
	}
	.tai-lieu-menu a { padding: 10px 0 !important; }
	.tai-lieu-header__right {
		grid-area: search !important;
		width: 100% !important;
	}
	.tai-lieu-search { width: 100% !important; }
	.tai-lieu-header__tools {
		position: sticky;
		top: var(--header-main-height, 64px);
		z-index: 999;
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px 12px;
	}
	.tai-lieu-real-switch { flex: 0 0 auto; }
	.tai-lieu-single,
	.tai-lieu-document,
	.tai-lieu-related,
	.tai-lieu-contribute,
	.tai-lieu-auth-invite {
		width: 100%;
		max-width: 100%;
	}
	.tai-lieu-document-title { font-size: clamp(26px, 8vw, 38px) !important; }
	.tai-lieu-han { font-size: clamp(28px, 11vw, var(--tai-lieu-han-font-size, 42px)) !important; }
	.tai-lieu-char { min-width: clamp(30px, 11vw, var(--tai-lieu-char-width, 42px)) !important; }
	.tai-lieu-vietnamese-text { font-size: clamp(16px, 4.5vw, var(--tai-lieu-viet-font-size, 18px)) !important; }
}

/* ==================================================
   CUSTOMIZER TÀI LIỆU TYPOGRAPHY PATCH 1.1.3
================================================== */
.tai-lieu-document-title {
	font-family: var(--heading-font-family, var(--body-font-family)) !important;
	font-size: var(--tai-lieu-title-font-size, 34px) !important;
	font-weight: var(--tai-lieu-title-font-weight, 700) !important;
	line-height: var(--heading-line-height, 1.3) !important;
}

.tai-lieu-han,
.tai-lieu-hanzii-link {
	font-family: var(--tai-lieu-han-font-family, KaiTi, STKaiti, serif) !important;
	font-size: var(--tai-lieu-han-font-size, 42px) !important;
	font-weight: var(--tai-lieu-han-font-weight, 400) !important;
	color: var(--tai-lieu-han-color, #111111) !important;
}

.tai-lieu-reading {
	font-family: var(--tai-lieu-reading-font-family, var(--body-font-family)) !important;
	font-size: var(--tai-lieu-reading-font-size, 14px) !important;
	font-weight: var(--tai-lieu-reading-font-weight, 400) !important;
	color: var(--tai-lieu-reading-color, #8a5a2b) !important;
}

.tai-lieu-pair__right,
.tai-lieu-vietnamese-text,
.tai-lieu-vietnamese-text p,
.tai-lieu-note__content,
.tai-lieu-related-card__excerpt {
	font-family: var(--tai-lieu-viet-font-family, var(--content-font-family, Georgia, "Times New Roman", serif)) !important;
	font-size: var(--tai-lieu-viet-font-size, 18px) !important;
	font-weight: var(--tai-lieu-viet-font-weight, 400) !important;
	line-height: var(--tai-lieu-viet-line-height, 1.9) !important;
	color: var(--tai-lieu-viet-color, #2f2a24) !important;
}

.tai-lieu-char {
	min-width: var(--tai-lieu-char-width, 42px) !important;
}

.tai-lieu-pair__right {
	border-left-width: var(--tai-lieu-divider-width, 1px) !important;
	border-left-color: var(--tai-lieu-divider-color, #d8c9b4) !important;
}

@media (max-width: 768px) {
	.tai-lieu-document-title {
		font-size: clamp(26px, 8vw, var(--tai-lieu-title-font-size, 34px)) !important;
	}
	.tai-lieu-han,
	.tai-lieu-hanzii-link {
		font-size: clamp(28px, 11vw, var(--tai-lieu-han-font-size, 42px)) !important;
	}
	.tai-lieu-vietnamese-text,
	.tai-lieu-vietnamese-text p {
		font-size: clamp(16px, 4.5vw, var(--tai-lieu-viet-font-size, 18px)) !important;
	}
}

/* ==================================================
   PATCH 1.1.7 - TRANG CHỦ TRA CỨU ĐÚNG LAYOUT CŨ
================================================== */
.home-tai-lieu-lookup .tai-lieu-archive__hero {
	margin-bottom: 18px;
	text-align: left;
}

.home-tai-lieu-lookup .tai-lieu-archive__title {
	font-size: clamp(28px, 4vw, 36px);
}

.home-tai-lieu-lookup .tai-lieu-archive__desc {
	font-size: 16px;
}

.home-site-search {
	margin: 0 0 18px;
	padding: 18px;
	border: 1px solid #e2d6c4;
	border-radius: var(--tai-lieu-radius, 18px);
	background: #fffdf8;
}

.home-site-search__form {
	display: flex;
	align-items: center;
	gap: 12px;
}

.home-site-search__form input[type="search"] {
	flex: 1 1 auto;
	width: 100%;
	min-height: 42px;
	padding: 9px 14px;
	border: 1px solid #cdbfa8;
	border-radius: 999px;
	background: #ffffff;
	color: #4a2f1b;
	font-size: 15px;
}

.home-site-search__form button {
	min-height: 42px;
	padding: 9px 22px;
	border: 0;
	border-radius: 999px;
	background: #4a2f1b;
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
}

.home-site-search__form button:hover {
	background: #2f1d10;
}

.home-lookup-post-list {
	grid-template-columns: 1fr;
}

.tai-lieu-only-lookup .tai-lieu-archive__grid,
.home-tai-lieu-lookup .tai-lieu-archive__grid {
	grid-template-columns: 1fr;
}

.tai-lieu-filter-form select {
	flex: 1 1 180px;
	min-width: 160px;
}

@media (max-width: 640px) {
	.home-site-search__form {
		align-items: stretch;
		flex-direction: column;
	}

	.home-site-search__form button {
		width: 100%;
	}
}

/* ==================================================
   PATCH 1.3.0 - TRA CỨU, PHÂN TRANG CHỮ, ĐỌC TÀI LIỆU
================================================== */
.tai-lieu-filter-form select[name="tl_sort"] {
	flex: 0 1 170px;
}

.tai-lieu-active-filters {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #e2d6c4;
	color: var(--muted-color, #666666);
	font-size: 14px;
	line-height: 1.6;
}

.tai-lieu-active-filters strong {
	color: var(--text-color, #222222);
}

.tai-lieu-pagination--continue {
	margin: 26px 0 0;
	text-align: center;
}

.tai-lieu-continue-link {
	display: inline-block;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-decoration: none;
	font-weight: 700;
}

.home-tai-lieu-lookup .tai-lieu-continue-link {
	color: var(--home-continue-color, #0b83c5);
	font-size: var(--home-continue-font-size, 15px);
	font-family: var(--home-continue-font, var(--body-font-family));
}

.tai-lieu-only-lookup .tai-lieu-continue-link {
	color: var(--tl-continue-color, #0b83c5);
	font-size: var(--tl-continue-font-size, 15px);
	font-family: var(--tl-continue-font, var(--body-font-family));
}

.tai-lieu-continue-link:hover {
	text-decoration: underline;
}

.tai-lieu-font-tools {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 6px;
	border: 1px solid #e2d6c4;
	border-radius: 999px;
	background: #fffdf8;
}

.tai-lieu-font-tools button {
	min-width: 34px;
	height: 30px;
	padding: 0 9px;
	border: 1px solid #d8c9b4;
	border-radius: 999px;
	background: #ffffff;
	color: #4a2f1b;
	font-weight: 700;
	cursor: pointer;
}

.tai-lieu-font-tools button:hover {
	border-color: var(--tai-lieu-switch-color, #0b83c5);
	color: var(--tai-lieu-switch-color, #0b83c5);
}

body.tai-lieu-font-scale--small .tai-lieu-han,
body.tai-lieu-font-scale--small .tai-lieu-hanzii-link {
	font-size: calc(var(--tai-lieu-han-font-size, 42px) - 4px) !important;
}
body.tai-lieu-font-scale--small .tai-lieu-reading {
	font-size: calc(var(--tai-lieu-reading-font-size, 14px) - 1px) !important;
}
body.tai-lieu-font-scale--small .tai-lieu-vietnamese-text,
body.tai-lieu-font-scale--small .tai-lieu-note__content {
	font-size: calc(var(--tai-lieu-viet-font-size, 18px) - 1px) !important;
}

body.tai-lieu-font-scale--smaller .tai-lieu-han,
body.tai-lieu-font-scale--smaller .tai-lieu-hanzii-link {
	font-size: calc(var(--tai-lieu-han-font-size, 42px) - 8px) !important;
}
body.tai-lieu-font-scale--smaller .tai-lieu-reading {
	font-size: calc(var(--tai-lieu-reading-font-size, 14px) - 2px) !important;
}
body.tai-lieu-font-scale--smaller .tai-lieu-vietnamese-text,
body.tai-lieu-font-scale--smaller .tai-lieu-note__content {
	font-size: calc(var(--tai-lieu-viet-font-size, 18px) - 2px) !important;
}

body.tai-lieu-font-scale--large .tai-lieu-han,
body.tai-lieu-font-scale--large .tai-lieu-hanzii-link {
	font-size: calc(var(--tai-lieu-han-font-size, 42px) + 5px) !important;
}
body.tai-lieu-font-scale--large .tai-lieu-reading {
	font-size: calc(var(--tai-lieu-reading-font-size, 14px) + 1px) !important;
}
body.tai-lieu-font-scale--large .tai-lieu-vietnamese-text,
body.tai-lieu-font-scale--large .tai-lieu-note__content {
	font-size: calc(var(--tai-lieu-viet-font-size, 18px) + 2px) !important;
}

body.tai-lieu-font-scale--larger .tai-lieu-han,
body.tai-lieu-font-scale--larger .tai-lieu-hanzii-link {
	font-size: calc(var(--tai-lieu-han-font-size, 42px) + 10px) !important;
}
body.tai-lieu-font-scale--larger .tai-lieu-reading {
	font-size: calc(var(--tai-lieu-reading-font-size, 14px) + 2px) !important;
}
body.tai-lieu-font-scale--larger .tai-lieu-vietnamese-text,
body.tai-lieu-font-scale--larger .tai-lieu-note__content {
	font-size: calc(var(--tai-lieu-viet-font-size, 18px) + 4px) !important;
}

.tai-lieu-copy-protected .tai-lieu-document,
.tai-lieu-copy-protected .tai-lieu-note {
	-webkit-user-select: none;
	user-select: none;
}

.tai-lieu-back-to-top {
	position: fixed;
	right: 18px;
	bottom: 22px;
	z-index: 9999;
	width: 42px;
	height: 42px;
	border: 1px solid #d8c9b4;
	border-radius: 999px;
	background: #ffffff;
	color: #4a2f1b;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.tai-lieu-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tai-lieu-back-to-top:hover {
	border-color: var(--tai-lieu-switch-color, #0b83c5);
	color: var(--tai-lieu-switch-color, #0b83c5);
}

@media print {
	.tai-lieu-copy-protected .tai-lieu-document,
	.tai-lieu-copy-protected .tai-lieu-contribute,
	.tai-lieu-copy-protected .tai-lieu-auth-invite,
	.tai-lieu-copy-protected .tai-lieu-related,
	.tai-lieu-copy-protected .tai-lieu-comments,
	.tai-lieu-copy-protected .tai-lieu-banner {
		display: none !important;
	}

	.tai-lieu-copy-protected::before {
		content: "Nội dung tài liệu này đang được bảo vệ, không hỗ trợ in/sao chép.";
		display: block;
		padding: 40px;
		font-size: 18px;
		line-height: 1.6;
		color: #111111;
	}
}

@media (max-width: 640px) {
	.tai-lieu-filter-form select[name="tl_sort"] {
		flex-basis: 100%;
	}

	.tai-lieu-font-tools {
		width: 100%;
		justify-content: center;
	}

	.tai-lieu-back-to-top {
		right: 14px;
		bottom: 16px;
		width: 40px;
		height: 40px;
	}
}

.tai-lieu-contribute__notice--error {
	border-color: #f3b6b6;
	background: #fff3f3;
	color: #8a1f1f;
}

/* Giai đoạn 5: mở rộng CPT Tài liệu */
.tai-lieu-intro,
.tai-lieu-info-box,
.tai-lieu-copyright-box,
.tai-lieu-reader--translation-only {
  max-width: min(100%, var(--tai-lieu-content-width, 1180px));
  margin: 22px auto;
}

.tai-lieu-intro {
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--text-color, #222);
}

.tai-lieu-intro p:first-child {
  margin-top: 0;
}

.tai-lieu-intro p:last-child {
  margin-bottom: 0;
}

.tai-lieu-info-box,
.tai-lieu-copyright-box {
  background: #fffdf8;
  border: 1px solid rgba(139, 90, 43, .18);
  border-radius: 16px;
  padding: 18px 20px;
}

.tai-lieu-info-box__title,
.tai-lieu-copyright-box__title {
  margin: 0 0 12px;
  font-size: 1.12rem;
  line-height: 1.35;
}

.tai-lieu-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .96rem;
}

.tai-lieu-info-table th,
.tai-lieu-info-table td {
  border: 1px solid rgba(139, 90, 43, .18);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}

.tai-lieu-info-table th {
  width: 210px;
  background: rgba(139, 90, 43, .06);
  font-weight: 600;
}

.tai-lieu-copyright-box {
  background: #fff8f2;
}

.tai-lieu-copyright-box__content p:first-child,
.tai-lieu-reader--translation-only p:first-child {
  margin-top: 0;
}

.tai-lieu-copyright-box__content p:last-child,
.tai-lieu-reader--translation-only p:last-child {
  margin-bottom: 0;
}

.tai-lieu-reader--translation-only {
  font-size: 1.08rem;
  line-height: 1.85;
}

.tai-lieu-style-translation .tai-lieu-reader,
.tai-lieu-style-pdf .tai-lieu-reader {
  max-width: min(100%, 860px);
}

@media (max-width: 700px) {
  .tai-lieu-info-box,
  .tai-lieu-copyright-box {
    padding: 14px;
    border-radius: 12px;
  }

  .tai-lieu-info-table,
  .tai-lieu-info-table tbody,
  .tai-lieu-info-table tr,
  .tai-lieu-info-table th,
  .tai-lieu-info-table td {
    display: block;
    width: 100%;
  }

  .tai-lieu-info-table th {
    border-bottom: 0;
  }
}

/* ==================================================
   YHCTVN Core v29.1 - Shared CPT color/font variables for Tài liệu
================================================== */
.tai-lieu-single,
.tai-lieu-archive,
.tai-lieu-reader,
.tai-lieu-entry,
.tai-lieu-content {
	color: var(--yhct-cpt-text, #2b2b2b);
	font-family: var(--yhct-body-font, inherit);
	font-size: var(--yhct-body-font-size, 17px);
	line-height: var(--yhct-body-line-height, 1.75);
}

.tai-lieu-single h1,
.tai-lieu-single h2,
.tai-lieu-single h3,
.tai-lieu-archive h1,
.tai-lieu-archive h2,
.tai-lieu-archive h3 {
	font-family: var(--yhct-heading-font, inherit);
	color: var(--yhct-cpt-text, #2b2b2b);
}

.tai-lieu-single h1,
.tai-lieu-archive h1 {
	font-size: var(--yhct-h1-size, 32px);
}

.tai-lieu-single h2,
.tai-lieu-archive h2 {
	font-size: var(--yhct-h2-size, 24px);
}

.han-text,
.han-phon-the,
.han-gian-the,
.tai-lieu-han,
.tai-lieu-segment-han {
	font-family: var(--yhct-han-font, "Noto Serif SC", "SimSun", serif);
}

.tai-lieu-info-box,
.tai-lieu-copyright-box,
.tai-lieu-card,
.tai-lieu-toolbar,
.tai-lieu-related {
	border-color: var(--yhct-cpt-border, #e6ddcf);
	border-radius: var(--yhct-radius, 12px);
}

.tai-lieu-copyright-box {
	background: var(--yhct-copyright-bg, #eef5ff);
	border-left-color: var(--yhct-copyright-border, #7aa7d9);
}

@media (max-width: 700px) {
	.tai-lieu-single,
	.tai-lieu-archive,
	.tai-lieu-reader,
	.tai-lieu-entry,
	.tai-lieu-content {
		font-size: var(--yhct-body-font-size-mobile, 16px);
	}
	.tai-lieu-single h1,
	.tai-lieu-archive h1 {
		font-size: var(--yhct-h1-size-mobile, 26px);
	}
	.tai-lieu-single h2,
	.tai-lieu-archive h2 {
		font-size: var(--yhct-h2-size-mobile, 21px);
	}
}


/* ==================================================
   v29.34 - HEADER TÀI LIỆU COMPACT, KHÔNG BỊ ĐÈ
   - Không bọc custom_logo bằng thẻ a lồng nhau.
   - Header chính dùng height cố định theo Customizer.
   - Logo tự clamp theo chiều cao header để không làm phình dòng.
================================================== */
.tai-lieu-header .header-socials,
.tai-lieu-header__right .header-socials,
.tai-lieu-header .header-auth,
.tai-lieu-header .menu-toggle {
	display: none !important;
}

.tai-lieu-header,
body.tai-lieu-body .tai-lieu-header {
	position: static !important;
	display: block !important;
	top: auto !important;
	z-index: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	line-height: 1 !important;
}

.tai-lieu-header.is-sticky,
body.tai-lieu-body .tai-lieu-header.is-sticky {
	position: sticky !important;
	top: 0 !important;
	z-index: 1001 !important;
}

.tai-lieu-header__sticky,
body.tai-lieu-body .tai-lieu-header__sticky {
	position: static !important;
	background: var(--header-bg, #fff) !important;
	border-bottom: 1px solid var(--border-color, #e5e5e5) !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.04) !important;
}

.tai-lieu-header__main,
body.tai-lieu-body .tai-lieu-header__main {
	display: grid !important;
	grid-template-columns: var(--tai-lieu-header-brand-width, 150px) minmax(0, 1fr) var(--tai-lieu-header-search-width, 240px) !important;
	grid-template-areas: "brand nav search" !important;
	align-items: center !important;
	gap: 12px !important;
	height: var(--tai-lieu-header-main-height, 46px) !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: var(--tai-lieu-header-padding-y, 3px) var(--tai-lieu-header-padding-x, 24px) !important;
	box-sizing: border-box !important;
	background: var(--header-bg, #fff) !important;
	overflow: visible !important;
}

.tai-lieu-header__brand,
body.tai-lieu-body .tai-lieu-header__brand {
	grid-area: brand !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	justify-self: stretch !important;
	align-self: stretch !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.tai-lieu-logo,
.tai-lieu-logo .custom-logo-link,
body.tai-lieu-body .tai-lieu-logo,
body.tai-lieu-body .tai-lieu-logo .custom-logo-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	max-width: var(--tai-lieu-logo-width, 56px) !important;
	height: 100% !important;
	max-height: calc(var(--tai-lieu-header-main-height, 46px) - (var(--tai-lieu-header-padding-y, 3px) * 2)) !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	overflow: visible !important;
	vertical-align: middle !important;
}

.tai-lieu-logo img,
.tai-lieu-logo .custom-logo,
.tai-lieu-header__brand img,
.tai-lieu-header .custom-logo,
body.tai-lieu-body .tai-lieu-logo img,
body.tai-lieu-body .tai-lieu-logo .custom-logo,
body.tai-lieu-body .tai-lieu-header__brand img,
body.tai-lieu-body .tai-lieu-header .custom-logo {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: var(--tai-lieu-logo-width, 56px) !important;
	max-height: min(var(--tai-lieu-logo-height, 40px), calc(var(--tai-lieu-header-main-height, 46px) - (var(--tai-lieu-header-padding-y, 3px) * 2))) !important;
	object-fit: contain !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle !important;
}

.tai-lieu-navigation,
body.tai-lieu-body .tai-lieu-navigation {
	grid-area: nav !important;
	justify-self: center !important;
	min-width: 0 !important;
	min-height: 0 !important;
}

.tai-lieu-menu,
body.tai-lieu-body .tai-lieu-menu {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	flex-wrap: wrap !important;
}

.tai-lieu-menu a,
body.tai-lieu-body .tai-lieu-menu a {
	padding: 4px 0 !important;
	line-height: 1.2 !important;
}

.tai-lieu-header__right,
body.tai-lieu-body .tai-lieu-header__right {
	grid-area: search !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	justify-self: end !important;
	align-self: center !important;
	gap: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

.tai-lieu-search,
body.tai-lieu-body .tai-lieu-search {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	max-width: var(--tai-lieu-header-search-width, 240px) !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tai-lieu-search__input,
body.tai-lieu-body .tai-lieu-search__input {
	width: 100% !important;
	height: var(--tai-lieu-search-height, 30px) !important;
	min-height: 0 !important;
	padding: 0 12px !important;
	line-height: var(--tai-lieu-search-height, 30px) !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.tai-lieu-search__button,
body.tai-lieu-body .tai-lieu-search__button {
	height: var(--tai-lieu-search-height, 30px) !important;
	min-height: 0 !important;
	padding: 0 12px !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.tai-lieu-header__tools,
body.tai-lieu-body .tai-lieu-header__tools {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 8px !important;
	min-height: 0 !important;
	padding: var(--tai-lieu-tools-padding-y, 2px) var(--tai-lieu-header-padding-x, 24px) !important;
	background: var(--tai-lieu-tools-bg, #fff8ec) !important;
	border-top: 1px solid var(--border-color, #e5e5e5) !important;
	box-sizing: border-box !important;
}

.tai-lieu-real-switch,
body.tai-lieu-body .tai-lieu-real-switch {
	height: var(--tai-lieu-switch-height, 26px) !important;
	padding: 3px !important;
	box-sizing: border-box !important;
}
.tai-lieu-real-switch--two,
body.tai-lieu-body .tai-lieu-real-switch--two { width: var(--tai-lieu-switch-two-width, 92px) !important; }
.tai-lieu-real-switch--three,
body.tai-lieu-body .tai-lieu-real-switch--three { width: var(--tai-lieu-switch-three-width, 180px) !important; }

.tai-lieu-real-switch label,
body.tai-lieu-body .tai-lieu-real-switch label {
	height: calc(var(--tai-lieu-switch-height, 26px) - 6px) !important;
	font-size: var(--tai-lieu-tool-font-size, 12px) !important;
	padding: 0 6px !important;
	line-height: 1 !important;
}

@media (max-width: 900px) {
	.tai-lieu-header__main,
	body.tai-lieu-body .tai-lieu-header__main {
		grid-template-columns: minmax(0, 1fr) minmax(120px, var(--tai-lieu-header-search-width, 240px)) !important;
		grid-template-areas: "brand search" "nav nav" !important;
		height: auto !important;
		min-height: var(--tai-lieu-header-main-height, 46px) !important;
		gap: 8px 12px !important;
		padding: max(5px, var(--tai-lieu-header-padding-y, 3px)) 14px !important;
	}
	.tai-lieu-header__brand,
	body.tai-lieu-body .tai-lieu-header__brand { justify-content: flex-start !important; height: var(--tai-lieu-header-main-height, 46px) !important; }
	.tai-lieu-navigation,
	body.tai-lieu-body .tai-lieu-navigation { justify-self: stretch !important; width: 100% !important; overflow-x: auto !important; }
	.tai-lieu-menu,
	body.tai-lieu-body .tai-lieu-menu { justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 14px !important; }
	.tai-lieu-header__right,
	body.tai-lieu-body .tai-lieu-header__right { justify-self: end !important; width: min(100%, var(--tai-lieu-header-search-width, 240px)) !important; }
	.tai-lieu-search,
	body.tai-lieu-body .tai-lieu-search { max-width: 100% !important; }
	.tai-lieu-search__button,
	body.tai-lieu-body .tai-lieu-search__button { display: none !important; }
	.tai-lieu-header__tools,
	body.tai-lieu-body .tai-lieu-header__tools {
		justify-content: flex-start !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		padding: var(--tai-lieu-tools-padding-y, 2px) 14px !important;
	}
}