.auth-fluid .auth-fluid-form-box {
    z-index: inherit !important;
}

@media (min-width: 1400px) {
    html[data-layout=topnav] .container-fluid, html[data-layout=topnav] .container-lg, html[data-layout=topnav] .container-md, html[data-layout=topnav] .container-sm, html[data-layout=topnav] .container-xl, html[data-layout=topnav] .container-xxl {
        max-width: 95% !important;
    }
}

/* Logo size override */
:root {
    --ct-logo-lg-height: 55px;
    --ct-logo-sm-height: 40px;

    /* Màu chữ chung của trang và của bảng: ghi đè sang #1f1f1f cho đậm, dễ đọc hơn. */
/*    --ct-body-color: #1f1f1f;
    --ct-table-color: #1f1f1f;*/

    /* Font chữ: dùng Inter — nét trung tính, mảnh và rõ, hỗ trợ đầy đủ dấu tiếng Việt, nhìn nhẹ hơn
       Nunito/Be Vietnam Pro. Font nạp qua <link> Google Fonts trong các layout; fallback sang
       Nunito/sans-serif nếu tải lỗi. */
    --ct-font-sans-serif: "Inter", "Nunito", sans-serif;

    /* Giảm cỡ chữ chung xuống một chút cho gọn, dễ đọc (theme mặc định 0.9rem). */
/*    --ct-body-font-size: 0.865rem;*/

    /* Độ đậm chữ thường: 400 (Regular) — 300 nhìn mỏng quá, 400 vừa phải, dễ đọc. */
    --ct-body-font-weight: 400;
}

.badge {
    font-size: inherit !important;
}

.modal-overflow-left {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.mdi-16px {
    font-size: 16px;
}


/* Exam paper / Latex content display */
.latex {
    font-family: 'Times New Roman', Times, serif;
    font-size: 17px;
    line-height: 2;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    .latex b {
        font-weight: 700;
    }

    .latex p {
        margin-bottom: 0.6em;
    }

    .latex br {
        display: block;
        margin-top: 0.4em;
        content: "";
    }


/* Responsive table - stacked on mobile */
@media (max-width: 767.98px) {
    .table-responsive-stack thead {
        display: none;
    }

    .table-responsive-stack tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid #dee2e6;
        padding: 0.5rem;
        background: #fff;
    }

    .table-responsive-stack tbody td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0.35rem 0.5rem;
        border: none;
        border-bottom: 1px solid #f1f1f1;
        text-align: left;
    }

        .table-responsive-stack tbody td:last-child {
            border-bottom: none;
        }

        .table-responsive-stack tbody td::before {
            content: attr(data-label);
            font-weight: 600;
            font-size: 0.85em;
            color: #6c757d;
            margin-bottom: 0.15rem;
        }

        .table-responsive-stack tbody td:first-child {
            display: none;
        }

        .table-responsive-stack tbody td .table-action {
            display: flex;
            justify-content: flex-start;
            width: 100%;
        }

        .table-responsive-stack tbody td .qr-code {
            width: 50px !important;
            height: 50px !important;
        }

            .table-responsive-stack tbody td .qr-code img,
            .table-responsive-stack tbody td .qr-code canvas {
                width: 50px !important;
                height: 50px !important;
            }

        .table-responsive-stack tbody td.td-content-full {
            display: block;
            text-align: left;
            font-weight: normal;
        }

            .table-responsive-stack tbody td.td-content-full::before {
                content: none;
            }
}

/* QR Code styling */
.qr-code {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .qr-code img {
        display: block;
    }

/* Table action buttons - align right */
.table-action {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

    .table-action .action-icon {
        color: var(--ct-secondary-color);
        font-size: 1.2rem;
    }

        .table-action .action-icon:hover {
            color: var(--ct-emphasis-color);
        }

/* Table vertical alignment */
.table td,
.table th {
    vertical-align: top;
}

@media (min-width: 768px) {
    .table-responsive-stack th:last-child,
    .table-responsive-stack td:last-child {
        text-align: right;
    }
}

/* Border bottom only on mobile */
@media (min-width: 768px) {
    .border-bottom-mobile {
        border-bottom: none !important;
    }
}

/* Accordion - override active state to white/black tone */
.accordion-button:not(.collapsed) {
    color: #313a46;
    background-color: #f8f9fa;
    box-shadow: none;
}

.accordion-button:focus {
    border-color: #dee2e6;
    box-shadow: none;
}




/* Score table - borderless inputs, show border on focus */
.score-table input[type="number"],
.score-table input[type="text"] {
    font-size: 16px;
    padding: 4px 2px;
    border: 1px solid transparent;
    background: transparent;
    text-align: center;
}

/* Score cells: keep them as narrow as possible */
.score-table td.score-cell {
    width: 1%;
    white-space: nowrap;
}

.score-table th.score-col,
.score-table td.score-cell {
    padding-left: 2px;
    padding-right: 2px;
}

.score-table input.score-input {
    width: 42px;
    min-width: 42px;
    padding-left: 1px;
    padding-right: 1px;
}

/* Hide number input spinners to save space */
.score-table input.score-input::-webkit-outer-spin-button,
.score-table input.score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.score-table input.score-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.score-table input[type="number"]:focus,
.score-table input[type="text"]:focus {
    border: 1px solid #86b7fe;
    background: #fff;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(13,110,253,.15);
}



/* ===== Trang Báo cáo Tiêu chí (MyCriteriaReport) =====
   Tông trắng đen: chỉ dùng thang xám, không màu nhấn. */

/* --- Utility --- */
.cr-ink { color: #111; }
.cr-muted { color: #6b6b6b; }
.cr-faint { color: #9a9a9a; }

/* --- Nút hướng dẫn nhỏ ở đầu trang --- */
.cr-howto-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem;
                   color: #6b6b6b; text-decoration: none; padding: .25rem .5rem;
                   border: 1px solid #d8d8d8; border-radius: 2px; background: #fafafa; }
.cr-howto-toggle:hover { color: #111; border-color: #111; background: #fff; }
.cr-howto-toggle i { font-size: 1rem; }

/* --- Khối hướng dẫn sử dụng (collapse) --- */
.cr-howto { border: 1px solid #e3e3e3; border-radius: 2px; background: #fff; }
.cr-howto-body { padding: .9rem; }
.cr-step { display: flex; gap: .7rem; margin-bottom: .8rem; }
.cr-step:last-child { margin-bottom: 0; }
.cr-step-num { flex: 0 0 22px; height: 22px; border: 1px solid #111; border-radius: 50%;
               font-size: .72rem; font-weight: 700; display: flex; align-items: center;
               justify-content: center; background: #111; color: #fff; }
.cr-step-title { font-weight: 600; font-size: .88rem; line-height: 1.35; }
.cr-step-desc { font-size: .82rem; color: #6b6b6b; line-height: 1.5; }

/* --- Nhãn bước trên các vùng điều khiển --- */
.cr-stage { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem;
            letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: #111; }
.cr-stage-dot { width: 16px; height: 16px; border-radius: 50%; background: #111; color: #fff;
                font-size: .62rem; display: flex; align-items: center; justify-content: center; }
.cr-hint { font-size: .82rem; color: #6b6b6b; line-height: 1.5; }

/* --- Bảng danh sách --- */
.cr-table { border-collapse: collapse; width: 100%; }
.cr-table thead th { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
                     color: #6b6b6b; font-weight: 700; border-bottom: 1.5px solid #111;
                     padding: .5rem .6rem; background: #fff; }
.cr-table tbody td { padding: .55rem .6rem; border-bottom: 1px solid #ededed; font-size: .9rem; vertical-align: middle; }
.cr-table tbody tr:hover td { background: #fafafa; }
.cr-group-row td { background: #f4f4f4 !important; border-top: 1px solid #d8d8d8;
                   border-bottom: 1px solid #d8d8d8; font-weight: 700; font-size: .82rem;
                   letter-spacing: .01em; padding: .45rem .6rem !important; }
.cr-code { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Trạng thái */
.cr-status { display: inline-block; font-size: .78rem; padding: .1rem .45rem; border-radius: 2px;
             letter-spacing: .02em; white-space: nowrap; }
.cr-status--empty { border: 1px dashed #b5b5b5; color: #9a9a9a; }
.cr-status--draft { border: 1px solid #6b6b6b; color: #3d3d3d; }
.cr-status--pending { border: 1px solid #b8860b; color: #b8860b; }
.cr-status--done { border: 1px solid #111; background: #111; color: #fff; font-weight: 600; }
/* Badge "Chưa soạn" (EMPTY): dùng chung với .badge.badge-outline-secondary nhưng đổi viền
   sang nét ĐỨT — gợi lại kiểu .cr-status--empty ban đầu (báo hiệu "chưa có gì"), phân biệt
   với các trạng thái đã có nội dung dùng viền liền. */
.badge.badge-outline-dashed { border-style: dashed; }

/* Khối Duyệt/Từ chối, Gán mức điểm ở trang Xem, đánh giá tiêu chí */
.cr-review-action-box { border: 1px dashed #ccc; border-radius: 3px; padding: .5rem .75rem; background: #fafafa; }

/* Nút mở modal */
.cr-open-btn { border: 1px solid #111; background: #fff; color: #111; border-radius: 2px;
               padding: .18rem .5rem; font-size: .82rem; text-decoration: none; white-space: nowrap; }
.cr-open-btn:hover { background: #111; color: #fff; }

/* Trạng thái rỗng */
.cr-empty { text-align: center; padding: 3.2rem 1rem; color: #9a9a9a; }
.cr-empty i { font-size: 2.6rem; display: block; margin-bottom: .6rem; color: #d5d5d5; }
.cr-empty-title { font-size: .95rem; color: #3d3d3d; font-weight: 600; margin-bottom: .25rem; }
.cr-empty-desc { font-size: .82rem; max-width: 460px; margin: 0 auto; line-height: 1.6; }

/* --- Modal Biên soạn --- */
.cr-col { overflow-y: auto; max-height: calc(100vh - 190px); padding: 0 .8rem; }
.cr-col--left { padding-right: 0; border-right: none; }
.cr-col--right { padding-left: 0; }

.cr-panel { border: 1px solid #e3e3e3; border-radius: 2px; margin-bottom: .9rem; }
.cr-panel-head { padding: .5rem .7rem; background: #fafafa; border-bottom: 1px solid #e3e3e3;
                 display: flex; align-items: center; }
.cr-panel-body { padding: .7rem; }

/* Trang "Xem, đánh giá tiêu chí" — toàn văn một Bộ tiêu chuẩn, kiểu tài liệu */
.cr-document-body { max-width: 900px; margin: 0 auto; }
.cr-standard-block:last-child hr { display: none; }
.cr-standard-heading { font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
                        border-bottom: 2px solid #111; padding-bottom: .4rem; margin-bottom: 1rem; }
.cr-criteria-block { padding-left: .1rem; }
.cr-review-content { font-size: .9rem; line-height: 1.7; }
/* Nội dung thật nằm trong .ql-editor con (Quill dựng ở chế độ readOnly). Quill có
   font-size mặc định riêng cho .ql-editor lấn át .cr-review-content ở trên, làm chữ nhỏ
   hơn Trang_Biên_Soạn. Ép cùng font-size/line-height với .cr-editor .ql-editor bên edit
   để nội dung hai trang hiển thị giống hệt nhau. */
.cr-review-content .ql-editor { font-size: .875rem; line-height: 1.6; padding: 0; }
/* Trang_Xem_Đánh_Giá chỉ đọc: bỏ khung viền quanh vùng Quill để nội dung trông như văn
   bản liền mạch, không giống ô nhập liệu. Border thật đến từ app.min.css: .ql-bubble có
   `border: ... solid var(--ct-border-color)` (Quill dựng container class .ql-container
   .ql-bubble vì theme = bubble). Phải nhắm ĐÚNG .ql-bubble + đủ độ đặc hiệu mới ghi đè,
   nên gộp cả .ql-container lẫn .ql-bubble ở đây. */
/* Quill init TẠI CHỖ trên <div class="cr-review-content"> nên phần tử đó ĐỒNG THỜI mang
   class .ql-container.ql-bubble (cùng một phần tử, KHÔNG phải cha-con) — vì vậy phải dùng
   selector dính liền .cr-review-content.ql-bubble (không có khoảng trắng). Bản trước dùng
   dạng hậu duệ ".cr-review-content .ql-bubble" nên không khớp, border vẫn còn. Giữ thêm
   dạng hậu duệ phòng khi Quill lồng container con. */
/* Dùng !important vì CSS quill-table-up (index.min.css) được nạp SAU custom.css và đặt
   border cho .ql-container với cùng độ đặc hiệu -> nó thắng, viền editor hiện lại ở
   Trang_Xem_Đánh_Giá. !important đảm bảo vùng chỉ đọc luôn không viền dù thứ tự nạp CSS. */
.cr-review-content.ql-container,
.cr-review-content.ql-bubble,
.cr-review-content .ql-container,
.cr-review-content .ql-bubble { border: none !important; border-radius: 0 !important; }
.cr-review-content p { margin-bottom: .5rem; }
.cr-review-content ul, .cr-review-content ol { margin-bottom: .5rem; padding-left: 1.4rem; }

/* Thụt lề danh sách trong Quill — Quill 2 đặt padding-left ~1.5em trên <ul>/<ol> VÀ thêm
   padding-left 1.5em trên mỗi <li> (tổng ~3em) nên gạch đầu dòng bị đẩy sang phải quá xa.
   CSS Quill (CDN) nạp SAU custom.css nên thắng khi cùng độ đặc hiệu -> BẮT BUỘC !important
   mới ghi đè được. Kéo sát trái: bỏ padding của ul/ol, để mỗi <li> chỉ chừa đúng chỗ cho
   ký hiệu đầu dòng. Áp cho cả Trang_Biên_Soạn (.cr-editor) và Trang_Xem_Đánh_Giá
   (.cr-review-content). */
.cr-editor .ql-editor ul,
.cr-editor .ql-editor ol,
.cr-review-content .ql-editor ul,
.cr-review-content .ql-editor ol { padding-left: 0 !important; margin-left: 0 !important; }
.cr-editor .ql-editor li,
.cr-review-content .ql-editor li { padding-left: 1.1em !important; }

/* Hướng dẫn tiêu chí — chỉ đọc */
.cr-guide { white-space: pre-wrap;}
.cr-guide--empty { color: #b5b5b5; font-style: italic; }
.cr-guide-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
                  color: #9a9a9a; font-weight: 700; margin-bottom: .18rem; display: block; }

/* Chip phạm vi minh chứng */
.cr-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #111;
           border-radius: 2px; padding: .15rem .2rem .15rem .5rem; font-size: .78rem;
           margin: 0 .3rem .3rem 0; background: #fff; }
.cr-chip-x { border: none; background: none; color: #6b6b6b; line-height: 1; padding: 0 .25rem;
             font-size: .95rem; cursor: pointer; }
.cr-chip-x:hover { color: #111; }

/* --- Vùng soạn thảo Quill --- */
.cr-editor { border: 1px solid #d8d8d8; border-radius: 2px; min-height: 118px; background: #fff; }
.cr-editor .ql-editor { font-size: .875rem; line-height: 1.6; min-height: 118px; }
.cr-editor-label { display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem; }
.cr-editor-num { width: 22px; height: 22px; border-radius: 50%; background: gray; color: #fff;
                 font-size: .7rem; font-weight: 700; display: flex; align-items: center;
                 justify-content: center; flex-shrink: 0; }
.cr-editor-name { font-size: .85rem; font-weight: 600;}

/* Nút "Chèn ảnh" (spec criteria-report-media) cạnh mỗi cr-editor-label. ms-auto (Bootstrap)
   đẩy nút này về sát bên phải của dòng nhãn, cùng dòng với số thứ tự và tên Phần_Báo_Cáo. */
.cr-insert-image-btn { border: none; background: none; color: #555; padding: .1rem .35rem;
                       font-size: .95rem; line-height: 1; cursor: pointer; border-radius: 2px; }
.cr-insert-image-btn:hover { background: #f0f0f0; color: #111; }
/* Trạng thái đang bật của nút Ẩn/Hiện Cột_Ghi_Chú (một nút riêng mỗi Phần_Báo_Cáo) —
   tô nền vàng nhạt + màu chữ theo viền thẻ Bình_Luận để người dùng thấy phần nào đang
   mở Cột_Ghi_Chú. */
.cr-insert-image-btn--active { background: #fdf3d2; color: #a67c00; }
.cr-insert-image-btn--active:hover { background: #fbe9b0; color: #a67c00; }

/* Ảnh chèn trong Trình_Soạn_Thảo — co giãn theo chiều rộng ô soạn thảo, không tràn ra
   ngoài. Cùng áp dụng ở Trang_Xem_Đánh_Giá (readOnly) vì đều dùng class .cr-editor/
   .cr-review-content > .ql-editor img. */
.cr-editor .ql-editor img,
.cr-review-content .ql-editor img { max-width: 100%; height: auto; border-radius: 2px;
                                    display: block; margin: .35rem 0; }

/* Popover lưới ô chọn kích thước bảng (window.TableUp.createSelectBox) — container tự viết
   không có nền, nổi lên nhìn xuyên qua chữ phía dưới. Thêm nền trắng + viền + đổ bóng như
   một dropdown thông thường. */
.cr-insert-table-picker { background: #fff; border: 1px solid #d8d8d8; border-radius: 4px;
                          box-shadow: 0 2px 8px rgba(0,0,0,.15); padding: .5rem; }

/* Bảng (spec criteria-report-media, quill-table-up) — ô soạn thảo hẹp hơn trang mặc định
   thư viện dùng khi demo, nên cho bảng cuộn ngang riêng thay vì đẩy vỡ layout .cr-editor. */
.cr-editor .ql-editor .ql-table-wrapper,
.cr-review-content .ql-editor .ql-table-wrapper { max-width: 100%; overflow-x: auto;
    /* Khoảng trống trên/dưới để bảng không dính sát đoạn văn liền kề. */
    margin-top: .8rem; margin-bottom: .8rem; }
.cr-editor .ql-editor table.ql-table,
.cr-review-content .ql-editor table.ql-table { font-size: .8rem; }
.cr-editor .ql-editor .ql-table-cell,
.cr-review-content .ql-editor table.ql-table td,
.cr-review-content .ql-editor table.ql-table th,
.cr-review-content .ql-editor .ql-table-cell { border: 1px solid #d8d8d8; padding: .3rem .5rem; }

/* ===== Chống bảng/nội dung TRÀN ra khỏi card ở Trang_Xem_Đánh_Giá =====
   quill-table-up dựng bảng với <colgroup><col style="width: ...px"> cố định theo pixel,
   nên bảng giữ bề rộng gốc lớn hơn cột nội dung -> đẩy vỡ card. Ép bảng co về đúng bề
   rộng vùng chứa và ngắt từ dài trong ô. table-layout: fixed để trình duyệt phân bổ cột
   theo bề rộng vùng chứa thay vì theo width pixel do thư viện gắn. */
.cr-review-content { overflow-x: auto; }
.cr-review-content .ql-editor { overflow-wrap: break-word; word-break: break-word; }
.cr-review-content .ql-editor table.ql-table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
/* col do thư viện gắn width pixel cứng — bỏ để table-layout: fixed chia đều theo vùng chứa. */
.cr-review-content .ql-editor table.ql-table col { width: auto !important; }
.cr-review-content .ql-editor table.ql-table td,
.cr-review-content .ql-editor table.ql-table th {
    overflow-wrap: break-word;
    word-break: break-word;
    vertical-align: top;
}

/* --- Thẻ trích dẫn trong editor --- */
.report-citation-chip { display: inline-block; border: 1px solid #111; border-radius: 2px;
                        padding: 0 .25rem; font-size: .78em; cursor: pointer;
                        background: #f4f4f4; color: #111; font-variant-numeric: tabular-nums; }
.report-citation-chip:hover { background: #111; color: #fff; }
.report-citation-chip--unknown { border-style: dashed; border-color: #b5b5b5; color: #9a9a9a;
                                 background: #fff; cursor: not-allowed; }
.report-citation-chip--unknown:hover { background: #fff; color: #9a9a9a; }

/* --- Điểm_Neo của Bình_Luận (spec criteria-report-comment) --- */
/* Đoạn_Được_Chọn đang có Bình_Luận neo vào — nền vàng nhạt giống Google Docs.
   Được sinh bởi CommentHighlightBlot (Inline Format Blot đăng ký trong Quill), KHÔNG
   phải một class Vue/CSS gắn tay. */
.cr-comment-highlight { background: #fff3c4; border-bottom: 2px solid #f0c419; cursor: pointer; }
.cr-comment-highlight--active { background: #ffe58a; }

/* --- Cột_Ghi_Chú --- */
.cr-comment-gutter { position: relative; min-height: 1px; }
.cr-comment-card { position: absolute; left: 0; right: 0; border: 1px solid #d8d8d8;
                   border-left: 3px solid #f0c419; border-radius: 2px; padding: .4rem .55rem;
                   background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: top .12s ease; }
.cr-comment-card--active, .cr-comment-card:hover { border-left-color: #111; background: #fffdf5; }
.cr-comment-card--fixed { position: static; }
.cr-comment-card--orphaned { border-left-color: #b5b5b5; background: #fafafa; opacity: .85; }

/* Resolve/Reopen (spec criteria-report-comment, Requirement 7B) — mờ hơn để phân biệt
   với Bình_Luận đang chờ xử lý, nhưng vẫn đọc được (không dùng opacity quá thấp). */
.cr-comment-card--resolved { border-left-color: #6fbf73; background: #f6faf6; opacity: .7; }
.cr-comment-card--resolved:hover { opacity: 1; }

/* Đoạn văn bản gốc (AnchorText) của Bình_Luận_Mất_Neo/Đã_Xử_Lý — tách riêng thành khối
   trích dẫn để người xem biết bình luận đang nói về nội dung nào, không nhúng chung vào
   dòng trạng thái "Đã xử lý bởi..." (quá nhỏ, dễ bị bỏ qua). */
.cr-anchor-quote { font-size: .74rem; font-style: italic; color: #555; background: #f5f5f0;
                   border-left: 2px solid #d8d0a8; padding: .2rem .5rem; border-radius: 2px;
                   white-space: pre-wrap; }

/* Trang_Xem_Đánh_Giá: thanh nổi "Thêm bình luận" khi bôi chọn văn bản */
.cr-review-add-comment-bar { position: fixed; z-index: 1050; }

/* Trang_Xem_Đánh_Giá: MỘT Cột_Ghi_Chú duy nhất chạy dọc suốt trang (nhiều Tiêu chí).
   KHÔNG dùng position: sticky ở đây — các thẻ con định vị bằng position: absolute theo
   toạ độ TUYỆT ĐỐI đo được từ span trong cột trái (CommentGutterManager.Reposition());
   nếu container này sticky (dừng lại khi cuộn) mà cột trái vẫn cuộn bình thường, mọi thẻ
   comment sẽ trôi lệch khỏi đúng vị trí ngay khi người dùng cuộn trang. Container phải
   cuộn CÙNG NHỊP với cột trái — vị trí tương đối (position: relative) là đủ để làm
   containing block cho các thẻ con absolute. */
.cr-comment-gutter--wide { min-height: 200px; position: relative; }

/* Nút badge số lượng Bình_Luận_Cấp_Tài_Liệu/Mất_Neo/Đã_Xử_Lý (thay cho render trực tiếp
   dưới nội dung — quá dài khi tồn đọng nhiều bình luận). Bấm mở DocumentCommentsModal. */
.cr-comment-badge-btn { display: inline-flex; align-items: center; border: 1px solid #d8d8d8;
                        background: #fff; color: #333; border-radius: 999px; padding: .2rem .65rem;
                        font-size: .78rem; white-space: nowrap; line-height: 1.3; }
.cr-comment-badge-btn:hover { border-color: #111; background: #f4f4f4; color: #111; }
.cr-comment-badge-btn i { font-size: .95rem; }

/* --- Trình xem minh chứng --- */
.evidence-viewer-toolbar { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem;
                           border-bottom: 1px solid #e3e3e3; flex-wrap: wrap; font-size: .78rem;
                           background: #fafafa; }
.evidence-viewer-file-name { font-weight: 600; color: #111; }
.evidence-viewer-page-info { font-variant-numeric: tabular-nums; color: #6b6b6b; }
.evidence-viewer-toolbar button { border: 1px solid #111; background: #fff; color: #111;
                                  border-radius: 2px; width: 24px; height: 22px; line-height: 1; }
.evidence-viewer-toolbar button:disabled { border-color: #d8d8d8; color: #d8d8d8; }
.evidence-viewer-download { margin-left: auto; color: #111; text-decoration: underline; }
.evidence-viewer-status { flex-basis: 100%; color: #6b6b6b; font-size: .74rem; }
.evidence-viewer-viewport { overflow: auto; max-height: calc(100vh - 300px); min-height: 340px;
                            text-align: center; background: #f4f4f4; }
.evidence-viewer-viewport .evidence-viewer-text-layer { opacity: 0.2; }
.evidence-viewer-viewport .evidence-viewer-text-layer span { color: transparent; }
.evidence-viewer-viewport .evidence-viewer-text-layer mark.evidence-viewer-highlight { color: #fff; opacity: 1; }
.evidence-viewer-highlight { background: #111; color: #fff; }
.evidence-viewer-fallback { padding: 2.4rem 1rem; color: #6b6b6b; font-size: .85rem; }
.evidence-viewer-fallback a { color: #111; text-decoration: underline; }

/* --- Khung chat --- */
.cr-chat-log { max-height: 230px; overflow-y: auto; }
.cr-bubble { padding: .45rem .65rem; border-radius: 2px; margin-bottom: .35rem;
             font-size: .84rem; line-height: 1.55; white-space: pre-wrap; }
.cr-bubble--user { border: 1px solid #ededed; background: #fff; margin: 1rem; }
.cr-bubble--ai { border: 1px solid #ededed; background: #fafafa; margin-right: 1.6rem; }

/* --- Bộ_Chỉnh_Sửa_Đoạn / Điểm_Neo: 5 nút riêng trong tooltip bôi đen của Quill bubble
   theme (xem ReportEditorManager.BuildRefineToolbarContainer) — dùng chung layout .ql-formats
   với nhóm định dạng gốc (đậm/nghiêng/gạch chân/danh sách) đứng ngay trước, chỉ khác màu để
   phân biệt hai nhóm chức năng trong cùng một tooltip. */
.cr-refine-tooltip-group { margin-left: 6px !important; padding-left: 6px; border-left: 1px solid rgba(255,255,255,.25); }
.cr-refine-tooltip-btn { border: none; background: none; color: #fff; padding: 2px 5px;
                         font-size: .95rem; line-height: 1; cursor: pointer; border-radius: 2px;
                         float: left; height: 24px; }
.cr-refine-tooltip-btn:hover { background: rgba(255,255,255,.2); }

/* --- Nút hành động --- */
.cr-btn { border: 1px solid #111; background: #fff; color: #111; border-radius: 2px;
          padding: .3rem .7rem; font-size: .85rem; white-space: nowrap; }
.cr-btn:hover:not(:disabled) { background: #f4f4f4; }
.cr-btn--solid { background: #111; color: #fff; }
.cr-btn--solid:hover:not(:disabled) { background: #333; }
.cr-btn:disabled { border-color: #d8d8d8; color: #b5b5b5; background: #fff; }
.cr-btn--solid:disabled { background: #d8d8d8; border-color: #d8d8d8; color: #fff; }

/* --- Thông báo --- */
.cr-note { border: 1px solid #111; border-left-width: 3px; border-radius: 2px;
           padding: .5rem .65rem; font-size: .85rem; line-height: 1.55; margin-bottom: .7rem;
           background: #fff; color: #3d3d3d; }
.cr-note--soft { border-color: #d8d8d8; border-left-color: #6b6b6b; background: #fafafa; }
/* Biến thể màu theo Trạng_Thái_Báo_Cáo — đồng bộ với badge trạng thái (badge-outline-*):
   Đã xong/Hoàn tất = success (xanh), Chờ kiểm tra = warning (vàng). Dùng cùng biến màu
   theme để nếu đổi tông màu chung thì thông báo và badge thay đổi cùng nhau. */
.cr-note--success { border-color: var(--ct-success); border-left-color: var(--ct-success); color: var(--ct-success); }
.cr-note--warning { border-color: var(--ct-warning); border-left-color: var(--ct-warning); color: var(--ct-warning); }

/* ============================================================================
   Trang "Xem, đánh giá tiêu chí" — layout master-detail (cây điều hướng trái +
   nội dung phải). Bổ sung cho spec cải tạo review: cột trái là cây Bộ tiêu chuẩn
   → Tiêu chuẩn → Tiêu chí; click Tiêu chí để chọn/nhảy tới; toggle chế độ xem
   một/nhiều Tiêu chí; nút bật/tắt Cột_Ghi_Chú.
   ============================================================================ */

/* Card cây điều hướng — dính lại khi cuộn trang dài để luôn thấy được danh mục. */
.cr-nav-card { position: sticky; top: 80px; }
/* Cột cây điều hướng — nằm trong card, cuộn độc lập khi danh sách tiêu chí dài. */
.cr-nav { max-height: calc(100vh - 200px); overflow-y: auto; }
.cr-nav-standardset { font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
                      font-size: .82rem; padding: .3rem .25rem .5rem; border-bottom: 2px solid #111;
                      margin-bottom: .5rem; }
.cr-nav-standard { margin-bottom: .6rem; }
.cr-nav-standard-title { font-size: .78rem; font-weight: 700; color: #444; padding: .25rem .25rem;
                         line-height: 1.35; }
.cr-nav-criteria { display: flex; align-items: flex-start; gap: .35rem; width: 100%;
                   border: none; background: none; text-align: left; border-radius: 3px;
                   padding: .3rem .4rem; font-size: .8rem; line-height: 1.35; color: #333;
                   cursor: pointer; }
.cr-nav-criteria:hover { background: #f4f4f4; }
.cr-nav-criteria--active { background: #111; color: #fff; }
.cr-nav-criteria--active:hover { background: #111; }
/* Tiêu chí không có quyền xem: mờ, con trỏ cấm, không phản hồi hover/click. */
.cr-nav-criteria--disabled { color: #b5b5b5; cursor: not-allowed; }
.cr-nav-criteria--disabled:hover { background: none; }
.cr-nav-lock { font-size: .85rem; color: #c5c5c5; flex-shrink: 0; margin-top: .15rem; }
.cr-nav-criteria-order { font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; }
/* Chấm trạng thái nhỏ trước tên Tiêu chí trong cây — cùng bảng màu badge-outline-*. */
.cr-nav-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: .35rem;
              background: #c5c5c5; }
.cr-nav-dot--empty { background: #c5c5c5; }
.cr-nav-dot--draft { background: #6b6b6b; }
.cr-nav-dot--pending { background: var(--ct-warning); }
.cr-nav-dot--done { background: var(--ct-success); }
.cr-nav-dot--completed { background: var(--ct-success); }

/* Thanh công cụ trên đầu cột nội dung: toggle chế độ xem + nút bật/tắt comment. */
.cr-view-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
                   padding-bottom: .5rem; margin-bottom: .75rem; border-bottom: 1px dashed #ddd; }
.cr-view-mode-group { display: inline-flex; border: 1px solid #d8d8d8; border-radius: 3px; overflow: hidden; }
.cr-view-mode-btn { border: none; background: #fff; color: #555; padding: .25rem .6rem;
                    font-size: .78rem; cursor: pointer; }
.cr-view-mode-btn:hover { background: #f4f4f4; }
.cr-view-mode-btn--active { background: #111; color: #fff; }
.cr-view-mode-btn--active:hover { background: #111; }



/* ============================================================================
   THÀNH PHẦN TƯƠNG TÁC KHÔNG CÓ SẴN TRONG THEME

   Phần còn lại sau khi đã chuyển hết các lớp tĩnh sang tiện ích của app.min.css.
   Chỉ giữ những thứ app.min.css KHÔNG có: trạng thái bật/tắt bằng JS, keyframe,
   nền conic-gradient, cắt dòng (line-clamp), và vài tiện ích Bootstrap còn thiếu.
   ============================================================================ */

/* --- Tiện ích Bootstrap còn thiếu --- */
/* Cho phép flex item co lại khi nội dung dài (Bootstrap chưa có .min-width-0). */
.min-width-0 {
    min-width: 0;
}

/* --- Modal form dài: dính đầu và chân vào khung nhìn để nút Lưu luôn trong tầm mắt.
   Không dùng được modal-dialog-scrollable vì nó cắt mất các dropdown bên trong. --- */
.modal-sticky-chrome .modal-header,
.modal-sticky-chrome .modal-footer {
    position: sticky;
    z-index: 2;
    background-color: var(--bs-modal-bg);
}

.modal-sticky-chrome .modal-header {
    top: 0;
}

.modal-sticky-chrome .modal-footer {
    bottom: 0;
}

/* ============ NGÂN HÀNG CÂU HỎI: ô nội dung rút gọn 2 dòng (MyQuestion) ============
   JS gắn .question-cell-expanded để bung, .question-cell-fits để ẩn nút khi vốn đã ngắn. */
.latex-cell {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.question-cell-expanded .latex-cell {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.question-cell-toggle-less {
    display: none;
}

.question-cell-expanded .question-cell-toggle-more {
    display: none;
}

.question-cell-expanded .question-cell-toggle-less {
    display: inline;
}

.question-cell-fits .question-cell-toggle {
    display: none;
}

/* Khung xem trước câu hỏi: chiều cao tối thiểu + cuộn ngang khi công thức tràn. */
.latex-preview {
    min-height: 8rem;
    overflow-x: auto;
}

/* ============ TRANG LÀM BÀI KIỂM TRA (Portal Quiz) ============ */

/* Dải đầu modal làm bài. */
.quiz-taking-header {
    background: linear-gradient(135deg, var(--ct-light-bg-subtle), var(--ct-secondary-bg));
    border-bottom: 1px solid var(--ct-border-color);
}

/* Chip thông tin bài: số câu / điểm / điều kiện đạt. */
.quiz-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    border-radius: 1rem;
    background-color: var(--ct-secondary-bg);
    border: 1px solid var(--ct-border-color);
    color: var(--ct-body-color);
}

    .quiz-meta-chip i {
        color: var(--ct-secondary-color);
    }

/* Đồng hồ đếm ngược. */
.quiz-timer {
    min-width: 9rem;
    padding: 0.5rem 1rem;
    text-align: center;
    border-radius: 0.625rem;
    background-color: var(--ct-secondary-bg);
    border: 1px solid var(--ct-border-color);
}

.quiz-timer-label {
    text-transform: uppercase;
}

.quiz-timer-value {
    font-size: 1.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.quiz-timer-draft {
    font-size: 0.8125rem;
    color: var(--ct-secondary-color);
    margin-top: 0.125rem;
}

/* Dưới 60 giây: đổi sang điệu đỏ cảnh báo và nhấp nháy nhẹ. */
.quiz-timer-danger {
    border-color: var(--ct-danger);
    background-color: rgba(var(--ct-danger-rgb), 0.08);
    animation: quiz-timer-blink 1s ease-in-out infinite;
}

    .quiz-timer-danger .quiz-timer-value,
    .quiz-timer-danger .quiz-timer-label {
        color: var(--ct-danger);
    }

@keyframes quiz-timer-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Thanh tiến độ dày hơn mặc định để nhìn rõ. */
.quiz-progress {
    height: 0.5rem;
    border-radius: 1rem;
}

/* Trang làm bài cao đầy modal để hai cột (thông tin trái / nội dung phải, chia bằng grid
   Bootstrap row/col ngay trong markup) cuộn riêng được. Chỉ còn chiều cao modal-content là
   cần CSS vì nó nhắm phần tử .modal-content do Bootstrap tự sinh. */
#TakingModal .modal-dialog-full-height .modal-content {
    height: 100%;
}

.quiz-navigator-grid {
    display: grid;
    /* Ô cố định cỡ nhỏ rồi tự xếp đầy hàng, thay vì chia đều 5 cột khiến mỗi ô bị giãn to theo bề
       rộng cột. Nhờ auto-fill, cột trái rộng bao nhiêu thì xếp bấy nhiêu ô một hàng, ô luôn nhỏ gọn. */
    grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
    gap: 0.375rem;
}

.quiz-navigator-item {
    aspect-ratio: 1;
    max-width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid var(--ct-border-color);
    border-radius: 0.375rem;
    background-color: var(--ct-secondary-bg);
    color: var(--ct-body-color);
    transition: border-color 0.1s ease, transform 0.1s ease;
}

    .quiz-navigator-item:hover {
        border-color: var(--ct-primary);
        transform: scale(1.08);
    }

/* Trạng thái đã trả lời (JS gắn qua :class). */
.quiz-navigator-item-answered {
    border-color: var(--ct-success);
    background-color: var(--ct-success);
    color: #fff;
}

/* Ô màu trong phần giải thích ký hiệu. */
.quiz-navigator-legend {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.375rem;
    vertical-align: -1px;
    border: 1px solid var(--ct-border-color);
    border-radius: 0.1875rem;
}

@media (max-width: 991.98px) {
    /* Màn hình hẹp (dưới lg): hai cột đã tự xếp dọc nhờ col-12 của Bootstrap; các ô số của
       bảng điều hướng dàn ngang cho đỡ chiếm chiều cao. */
    .quiz-navigator-grid {
        grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr));
    }
}

/* Header bảng: th mặc định của trình duyệt là bold (700), với font Inter trông quá dày. Giảm xuống
   600 (semibold) cho vừa — vẫn nổi bật so với nội dung nhưng không nặng nề. */
.table th,
.table thead th {
    font-weight: 600;
}

.quiz-question-card {
    border-color: var(--ct-border-color);
}

/* Khối code trong đề / đáp án (render từ ```lang``` của markdown). Theme Bootstrap đặt pre/code nhỏ
   hơn text thường (~0.875em); dùng inherit để code lấy đúng cỡ chữ của phần tử chứa nó (text hệ
   thống xung quanh), không bị thu nhỏ. Không có utility theme tương đương nên định nghĩa ở đây. */
.question-code-block,
.question-code-block code {
    font-size: inherit;
}

/* Vừa được cuốn tới từ bảng điều hướng (JS gắn .quiz-question-card-focused rồi tự gỡ). */
.quiz-question-card-focused {
    border-color: var(--ct-primary);
    box-shadow: 0 0 0 0.2rem var(--ct-primary-border-subtle);
}

.quiz-question-mark {
    background-color: var(--ct-light-bg-subtle);
    color: var(--ct-secondary-color);
    font-weight: 500;
    border: 1px solid var(--ct-border-color);
}

/* Chữ trong modal làm bài không để quá nhỏ. */
#TakingModal .small,
#TakingModal small,
#TakingModal .form-text {
    font-size: 0.9375rem;
}

/* Vòng tròn điểm (nền conic-gradient gắn qua :style trong Vue). */
.quiz-score-ring {
    flex-shrink: 0;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-score-ring-inner {
    width: 7.75rem;
    height: 7.75rem;
    border-radius: 50%;
    background-color: var(--ct-secondary-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--ct-border-color);
}

.quiz-score-ring-value {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ct-emphasis-color);
}

.quiz-score-ring-max {
    font-size: 0.9375rem;
    color: var(--ct-secondary-color);
}

.quiz-score-ring-label {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ct-secondary-color);
}

/* Thẻ câu khi xem lại: viền trái tô màu theo đúng/sai (JS gắn qua :class). */
.quiz-review-card {
    border-left-width: 4px;
}

.quiz-review-card-correct {
    border-left-color: var(--ct-success);
}

.quiz-review-card-wrong {
    border-left-color: var(--ct-danger);
}

/* ============ KÉO THẢ / GHÉP ĐÔI / SẮP THỨ TỰ KHI LÀM BÀI ============
   Trạng thái bật/tắt do DragDropManager.js và trang gắn, không có tiện ích theme tương đương. */

/* Bản sao bay theo con trỏ (z-index cao hơn modal 1055). */
.drag-ghost {
    position: fixed;
    z-index: 1080;
    opacity: 0.9;
    pointer-events: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}

.drag-token-dragging {
    opacity: 0.3;
    cursor: grabbing;
}

/* Bản sao bay theo con trỏ của một đáp án đã đặt trong ô. Token đã đặt vốn có viền trong suốt và
   bo tròn 2rem; nếu cho ghost viền primary thì khi kéo sẽ thấy một đường bo tròn chạy theo con trỏ,
   nhìn thừa và xấu. Ghost chỉ cần nền đặc + đổ bóng (đã có ở .drag-ghost) và bo góc nhẹ như ô slot,
   không viền bo tròn. */
.drag-ghost.match-token-placed {
    border-color: transparent;
    border-radius: 0.375rem;
    background-color: var(--ct-secondary-bg);
}

.drop-zone-active {
    border-color: var(--ct-success) !important;
    border-style: solid !important;
    background-color: var(--ct-success-bg-subtle) !important;
}

.match-bank {
    border: 1px dashed var(--ct-border-color);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    min-height: 4rem;
}

.match-token {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--ct-border-color);
    border-radius: 0.375rem;
    background-color: var(--ct-secondary-bg);
    color: var(--ct-body-color);
    text-align: left;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

    .match-token:hover {
        border-color: var(--ct-success);
    }

.match-token-selected {
    border-color: var(--ct-primary);
    background-color: var(--ct-primary-bg-subtle);
    box-shadow: 0 0 0 0.2rem var(--ct-primary-border-subtle);
}

.match-token-placed {
    border-color: transparent;
    background-color: transparent;
}

/* Token đã đặt trong ô ghép khớp trọn khung ô rồi, nên KHÔNG có hiệu ứng riêng: không đổi viền khi
   rê chuột (hover), không vòng sáng "selected", không outline khi bấm/focus. Những hiệu ứng đó bo
   tròn 2rem lọt vào trong ô vuông, tạo đường viền thừa nhìn xấu. Giữ viền trong suốt ở mọi trạng thái. */
.match-token-placed:hover {
    border-color: transparent;
}

.match-token-placed.match-token-selected,
.match-token-placed:focus,
.match-token-placed:focus-visible {
    border-color: transparent;
    box-shadow: none;
    outline: none;
}

.match-slot {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.25rem 0.5rem;
    border: 1px dashed var(--ct-border-color);
    border-radius: 0.375rem;
    background-color: transparent;
    color: var(--ct-body-color);
    text-align: left;
}

.match-slot-filled {
    border-style: solid;
    background-color: var(--ct-light-bg-subtle);
}

/* Ô ghép là button nên khi bấm/kéo đổi đáp án sẽ có outline mặc định của trình duyệt chạy vòng
   bên trong theo góc bo — nhìn như đường kẻ thừa. Thay bằng viền primary cho gọn, không có vòng
   outline lọt trong ô. */
.match-slot:focus,
.match-slot:focus-visible {
    outline: none;
    border-color: var(--ct-primary);
}

.ordering-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.375rem;
    border: 1px solid var(--ct-border-color);
    border-radius: 0.375rem;
    background-color: var(--ct-secondary-bg);
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Vùng chữ của dòng Sắp thứ tự (đánh dấu data-drag-ignore) được phép bôi đen và sao chép bình
   thường: ghi đè user-select của dòng và đổi con trỏ thành dạng chọn text, không phải dạng kéo. */
.ordering-row [data-drag-ignore] {
    cursor: text;
    -webkit-user-select: text;
    user-select: text;
}

    .ordering-row:hover {
        border-color: var(--ct-success);
    }

    .ordering-row:focus-visible {
        outline: none;
        border-color: var(--ct-success);
        box-shadow: 0 0 0 0.2rem var(--ct-success-border-subtle);
    }

.ordering-grip {
    flex-shrink: 0;
    padding: 0 0.125rem;
    color: var(--ct-secondary-color);
}

.ordering-rank {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--ct-success);
    color: #fff;
    font-size: 0.8125rem;
}

.ordering-rank-unset {
    background-color: var(--ct-secondary-color);
}

/* ============ TIỆN ÍCH LAYOUT ============
   Ẩn template Vue (v-cloak) cho tới khi Vue mount xong, tránh nháy {{ }} lúc tải. */
[v-cloak] {
    display: none !important;
}