.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;
}

.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;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0.5rem;
        border: none;
        border-bottom: 1px solid #f1f1f1;
        text-align: right;
    }

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

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

        .table-responsive-stack tbody td:first-child {
            display: flex;
            text-align: right;
            font-weight: 600;
        }

            .table-responsive-stack tbody td:first-child::before {
                font-size: 0.85em;
            }

        .table-responsive-stack tbody td .table-action {
            display: flex;
            justify-content: flex-end;
            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 {
        font-size: 1.2rem;
    }

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

.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;
    min-width: 55px;
    border: 1px solid transparent;
    background: transparent;
    text-align: center;
}
.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; }