/* ==========================================================================
   bo-sung.css — TRÌNH BỔ SUNG  (03/09/2026)

   Chỉ tạo lớp cho phần KHUNG của màn này. Thẻ câu hỏi dùng lại nguyên xi lớp
   của Ngân hàng (`kxd-the-cau`, `options-table-v2`, `q-content-v2`…) khai ở
   the-cau-hoi.css và kho-xay-dung.css — chép lại ở đây là hai màn lệch nhau
   ngay lần chỉnh giao diện kế tiếp.

   Màu lấy đúng bảng chung: đỏ #bb2649, viền #e6eaef, chữ phụ #6b7684.
   ========================================================================== */

.bs2-body { padding: 0; max-width: none; height: calc(100% - 62px); }

/* ---------- Hai cột ---------- */
.bs2-hai-cot {
    display: grid;
    /* Cột trái vừa đủ cho hộp nạp và danh sách phiên; phần còn lại dồn hết cho
       cột phải, vì đó mới là chỗ Thầy nhìn lâu. */
    grid-template-columns: 340px minmax(0, 1fr);
    height: 100%;
    background: #f4f6f8;
}

.bs2-cot { overflow-y: auto; padding: 20px; }
.bs2-trai { background: #fff; border-right: 1px solid #e6eaef; }
.bs2-phai { padding: 0; display: flex; flex-direction: column; }

.bs2-cot-tieu {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: #1d2530; margin: 0 0 14px;
}

.bs2-cot-tieu .material-icons-round { font-size: 20px; color: #bb2649; }
.bs2-tieu-nho { margin-top: 26px; font-size: 14px; }

/* ---------- Hộp nạp file ---------- */
.bs2-hop-nap {
    border: 2px dashed #cfd6de; border-radius: 12px; background: #fafbfc;
    padding: 26px 16px; text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s;
}

.bs2-hop-nap:hover,
.bs2-hop-nap.dang-keo { border-color: #bb2649; background: #fff5f7; }
.bs2-hop-nap.co-tep { border-style: solid; border-color: #bb2649; background: #fff5f7; }
.bs2-nap-icon { font-size: 34px !important; color: #bb2649; }

.bs2-nap-ten {
    margin: 8px 0 2px; font-size: 14px; font-weight: 600; color: #1d2530;
    word-break: break-word;
}

.bs2-nap-phu { margin: 0; font-size: 12px; color: #6b7684; }

.bs2-nut-chinh {
    width: 100%; margin-top: 14px; padding: 11px 16px;
    background: #bb2649; color: #fff; border: 0; border-radius: 9px;
    font-size: 14px; font-weight: 700; cursor: pointer;
}

.bs2-nut-chinh:hover:not(:disabled) { background: #a01f3e; }
.bs2-nut-chinh:disabled { background: #cfd6de; cursor: not-allowed; }

.bs2-nut-phu {
    padding: 8px 14px; background: #fff; color: #35404d;
    border: 1px solid #d7dee6; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}

.bs2-nut-phu:hover:not(:disabled) { background: #f0f3f6; }
.bs2-nut-phu:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Mách nước ---------- */
.bs2-mach {
    margin-top: 16px; padding: 12px 14px; border-radius: 9px;
    background: #f7f9fb; border: 1px solid #e6eaef;
    font-size: 12.5px; line-height: 1.55; color: #4a5560;
}

.bs2-mach p { margin: 0 0 8px; }
.bs2-mach p:last-child { margin-bottom: 0; }

.bs2-mach code {
    background: #eef1f5; padding: 1px 5px; border-radius: 4px;
    font-size: 11.5px; font-family: ui-monospace, Consolas, monospace;
}

/* ---------- Danh sách phiên ---------- */
.bs2-ds-phien { list-style: none; margin: 0; padding: 0; }

.bs2-phien {
    display: flex; align-items: stretch; gap: 4px;
    border: 1px solid #e6eaef; border-radius: 9px; margin-bottom: 8px;
    background: #fff; overflow: hidden;
}

.bs2-phien.dang-mo { border-color: #bb2649; background: #fff5f7; }

.bs2-phien-mo {
    flex: 1; min-width: 0; text-align: left; border: 0; background: none;
    padding: 9px 11px; cursor: pointer; display: block;
}

.bs2-phien-mo:hover { background: #f4f6f8; }

.bs2-phien-ten {
    display: block; font-size: 13px; font-weight: 600; color: #1d2530;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bs2-phien-so { display: block; font-size: 11.5px; color: #6b7684; margin-top: 2px; }
.bs2-phien-luc { display: block; font-size: 11px; color: #97a2ad; }

.bs2-phien-xoa {
    border: 0; background: none; color: #97a2ad; cursor: pointer;
    padding: 0 9px; flex-shrink: 0;
}

.bs2-phien-xoa:hover { color: #bb2649; background: #fff0f3; }
.bs2-phien-xoa .material-icons-round { font-size: 19px; }

/* ---------- Thanh công cụ cột phải ---------- */
.bs2-thanh-cu {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 18px; background: #fff;
    border-bottom: 1px solid #e6eaef; position: sticky; top: 0; z-index: 5;
}

.bs2-nut-khoa,
.bs2-nut-ai {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 8px; border: 1px solid #d7dee6;
    background: #fff; color: #35404d; font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}

.bs2-nut-khoa .material-icons-round,
.bs2-nut-ai .material-icons-round { font-size: 17px; }
.bs2-nut-khoa:hover, .bs2-nut-ai:hover { background: #f0f3f6; }

.bs2-nut-khoa.da-mo {
    border-color: #bb2649; color: #bb2649; background: #fff5f7;
}

.bs2-vach { width: 1px; height: 22px; background: #e6eaef; }
.bs2-day { flex: 1; }

.bs2-tt { font-size: 12.5px; color: #6b7684; white-space: nowrap; }
.bs2-tt b { color: #1d2530; }

/* ---------- Cảnh báo ---------- */
.bs2-canh-bao {
    margin: 12px 18px 0; border: 1px solid #f0d9a8; border-radius: 9px;
    background: #fffaf0; font-size: 12.5px; color: #6b5a34;
}

.bs2-canh-bao summary {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 12px; cursor: pointer; font-weight: 600;
}

.bs2-canh-bao summary .material-icons-round { font-size: 18px; color: #c98a12; }
.bs2-canh-bao ul { margin: 0; padding: 0 14px 12px 34px; line-height: 1.6; }

/* ---------- Trang một Dạng ---------- */
.bs2-trang { padding: 16px 18px 30px; }

.bs2-dang-dau {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 16px; background: #fff; border: 1px solid #e6eaef;
    border-left: 4px solid #bb2649; border-radius: 10px; margin-bottom: 14px;
}

.bs2-dang-dau.da-duyet { border-left-color: #2e9e5b; background: #f4fbf6; }
.bs2-dang-chu { flex: 1; min-width: 0; }

.bs2-dang-duong {
    margin: 0 0 3px; font-size: 12px; color: #6b7684;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.bs2-nh {
    padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700;
    background: #eef1f5; color: #4a5560;
}

.bs2-nh.ly_thuyet { background: #e8f0fe; color: #1a56b8; }
.bs2-nh.bai_tap { background: #fdeef2; color: #bb2649; }

.bs2-dang-ten {
    margin: 0; font-size: 16px; font-weight: 700; color: #1d2530; line-height: 1.35;
}

.bs2-dang-dem {
    flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: #bb2649;
    background: #fdeef2; padding: 4px 11px; border-radius: 20px;
}

.bs2-ds-cau { display: flex; flex-direction: column; gap: 10px; }
.bs2-the.co-loi { border-color: #f0b8b8; }

.bs2-chua-da {
    font-size: 11px; color: #97a2ad; background: #f2f4f7;
    padding: 1px 7px; border-radius: 20px; margin-left: 6px;
}

.bs2-co {
    display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
    font-size: 11px; font-weight: 700; color: #c0392b;
    background: #fdecea; padding: 1px 7px; border-radius: 20px; cursor: help;
}

.bs2-co .material-icons-round { font-size: 13px; }

/* ---------- Điều hướng trang ---------- */
.bs2-dieu-huong {
    display: flex; align-items: center; gap: 10px; margin-top: 18px;
    padding-top: 14px; border-top: 1px solid #e6eaef;
}

.bs2-chon-trang {
    flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px;
    border: 1px solid #d7dee6; background: #fff; font-size: 13px; color: #35404d;
}

/* ---------- Màn rỗng ---------- */
.bs2-rong {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; padding: 40px 24px; color: #8b97a3;
}

.bs2-rong .material-icons-round { font-size: 52px !important; color: #cfd6de; }
.bs2-rong-chu { margin: 12px 0 4px; font-size: 15px; font-weight: 600; color: #6b7684; }
.bs2-rong-phu { margin: 0; font-size: 13px; max-width: 400px; line-height: 1.6; }

/* ---------- Lớp phủ "đang nạp" ---------- */
.bs2-phu {
    position: fixed; inset: 0; background: rgba(15, 22, 30, .55);
    display: flex; align-items: center; justify-content: center; z-index: 9000;
}

.bs2-phu[hidden] { display: none; }

.bs2-phu-hop {
    background: #fff; border-radius: 14px; padding: 30px 34px;
    text-align: center; max-width: 380px; box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}

.bs2-vong {
    width: 38px; height: 38px; margin: 0 auto 14px;
    border: 3px solid #f0d0d8; border-top-color: #bb2649; border-radius: 50%;
    animation: bs2-quay .8s linear infinite;
}

@keyframes bs2-quay { to { transform: rotate(360deg); } }

.bs2-phu-chu { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #1d2530; }
.bs2-phu-nho { margin: 0; font-size: 12.5px; color: #6b7684; line-height: 1.55; }

/* ---------- Popup khoá AI ---------- */
.bs2-lop {
    position: fixed; inset: 0; background: rgba(15, 22, 30, .55);
    display: flex; align-items: center; justify-content: center; z-index: 9100;
}

.bs2-hop-khoa {
    background: #fff; border-radius: 14px; padding: 28px 30px;
    width: min(440px, 92vw); box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}

.bs2-khoa-icon {
    width: 46px; height: 46px; border-radius: 50%; background: #fdeef2;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}

.bs2-khoa-icon .material-icons-round { font-size: 24px; color: #bb2649; }
.bs2-hop-khoa h2 { margin: 0 0 8px; font-size: 18px; text-align: center; color: #1d2530; }

.bs2-khoa-phu {
    margin: 0 0 16px; font-size: 12.5px; line-height: 1.6;
    color: #6b7684; text-align: center;
}

#bs2-o-khoa {
    width: 100%; padding: 11px 13px; border: 1px solid #d7dee6;
    border-radius: 9px; font-size: 14px; box-sizing: border-box;
}

#bs2-o-khoa:focus { outline: 0; border-color: #bb2649; }

.bs2-khoa-tt { margin: 10px 0 0; font-size: 12.5px; color: #4a5560; text-align: center; }
.bs2-khoa-tt.loi { color: #c0392b; }
.bs2-khoa-tt[hidden] { display: none; }

.bs2-khoa-nut { display: flex; gap: 10px; margin-top: 18px; }
.bs2-khoa-nut .bs2-nut-phu { flex: 0 0 auto; }
.bs2-khoa-nut .bs2-nut-chinh { flex: 1; margin-top: 0; }

/* ---------- Màn hẹp: hai cột xếp chồng ---------- */
@media (max-width: 900px) {
    .bs2-hai-cot { grid-template-columns: 1fr; height: auto; }
    .bs2-trai { border-right: 0; border-bottom: 1px solid #e6eaef; }
    .bs2-body { height: auto; }
    .bs2-cot { overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VIỆC 8 · AI CHẤM MỨC ĐỘ                                    (04/09/2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Hộp thoại trước khi chạy ---------- */
.md-hop { width: min(500px, 94vw); }

.md-hang {
    display: flex; align-items: center; gap: 10px; margin: 14px 0 4px;
}

.md-nhan {
    font-size: 12.5px; font-weight: 600; color: #4a5560;
    flex: 0 0 62px;
}

.md-chon {
    flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px;
    border: 1px solid #d7dee6; border-radius: 8px; background: #fff; color: #1d2530;
}

.md-chon:focus { outline: 0; border-color: #bb2649; }

.md-nho {
    margin: 4px 0 0; font-size: 11.5px; line-height: 1.55; color: #6b7684;
}

.md-day { flex: 0 0 auto; margin: 0; white-space: nowrap; }

/* ---------- Ba lựa chọn phạm vi ---------- */
.md-nhom { margin: 16px 0 6px; display: flex; flex-direction: column; gap: 7px; }

.md-dong-chon {
    display: grid; grid-template-columns: 18px 1fr; gap: 4px 9px;
    align-items: center; padding: 9px 11px; cursor: pointer;
    border: 1px solid #e2e7ed; border-radius: 9px; background: #fbfcfd;
}

.md-dong-chon:hover { border-color: #cfd6de; }
.md-dong-chon.chon { border-color: #bb2649; background: #fff5f7; }
.md-dong-chon input { margin: 0; accent-color: #bb2649; }
.md-pv-ten { font-size: 13px; color: #1d2530; }
.md-pv-ten b { color: #bb2649; }

.md-pv-ghi {
    grid-column: 2; font-size: 11.5px; color: #8b95a1; line-height: 1.4;
}

/* ---------- Thanh tiến trình ---------- */
.md-thanh {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 9200; display: flex; align-items: center; gap: 14px;
    background: #1d2530; color: #fff; padding: 12px 16px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3); width: min(560px, 94vw);
}

.md-thanh-chu { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; }
.md-thanh .bs2-nut-phu { flex: 0 0 auto; background: #33404f; border-color: #4a5a6b; color: #fff; }
.md-thanh .bs2-nut-phu:hover:not(:disabled) { background: #45566a; }
.md-do { color: #ff9a9a; }

.md-vach {
    position: absolute; left: 16px; right: 16px; bottom: 6px; height: 3px;
    background: #3a4654; border-radius: 2px; overflow: hidden;
}

.md-vach i { display: block; height: 100%; background: #ff6b8a; transition: width .3s; }

/* ---------- Thanh kết quả ---------- */
.md-o-hang { display: flex; gap: 7px; margin: 4px 0 14px; }

.md-o {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 9px 4px; border-radius: 9px; font-size: 10.5px; color: #4a5560;
    background: #f4f6f8; border: 1px solid #e6eaef; text-align: center;
}

.md-o b { font-size: 19px; font-weight: 700; color: #1d2530; }
.md-o-nb { background: #f2f9f4; border-color: #cfe8d8; }
.md-o-th { background: #f1f7fd; border-color: #cfe0f2; }
.md-o-vd { background: #fff8ec; border-color: #f0dfbc; }
.md-o-vdc { background: #fdf1f4; border-color: #f0ccd6; }

.md-hong {
    margin: 0 0 4px; border: 1px solid #f0d3d3; border-radius: 9px;
    background: #fdf6f6; font-size: 12px;
}

.md-hong summary { padding: 9px 12px; cursor: pointer; color: #a83232; font-weight: 600; }
.md-hong ul { margin: 0; padding: 0 12px 10px 30px; line-height: 1.6; color: #6b5555; }

/* ---------- Nhãn mức độ trên thẻ câu ---------- */
.md-the { display: inline-flex; align-items: center; gap: 4px; }

.md-the-chon {
    border: 1px solid transparent; border-radius: 6px; background: transparent;
    font-weight: 700; font-size: 10.5pt; color: inherit; padding: 1px 3px;
    cursor: pointer; font-family: inherit;
}

.md-the-chon:hover { border-color: #d7dee6; background: #fff; }
.md-the-chon:focus { outline: 0; border-color: #bb2649; background: #fff; }
.md-the.nhap .md-the-chon { color: #b06a00; }

.md-cham {
    font-size: 8.5px; font-weight: 800; letter-spacing: .4px;
    background: #fff2dc; color: #b06a00; border-radius: 4px; padding: 1px 4px;
}

/* ---------- Nút nhận mức độ cho cả Dạng ---------- */
.bs2-nut-nhan {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 7px 12px; margin-right: 10px; cursor: pointer;
    border: 1px solid #f0d9b0; border-radius: 8px; background: #fff8ec;
    color: #b06a00; font-size: 12.5px; font-weight: 600; font-family: inherit;
}

.bs2-nut-nhan:hover { background: #fdf0d8; border-color: #e6c88c; }
.bs2-nut-nhan .material-icons-round { font-size: 17px; }

/* ═══════════════════════════════════════════════════════════════════════
   RÀ SOÁT FILE TRƯỚC KHI NẠP                                (04/09/2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Nút rà soát ở cột trái ---------- */
.bs2-nut-soat {
    width: 100%; margin-top: 14px; padding: 12px 14px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid #bb2649; border-radius: 10px; background: #fff;
    color: #bb2649; font-size: 14px; font-weight: 600; font-family: inherit;
}

.bs2-nut-soat:hover:not(:disabled) { background: #fff5f7; }
.bs2-nut-soat:disabled { border-color: #dfe4ea; color: #aeb6bf; cursor: not-allowed; }
.bs2-nut-soat .material-icons-round { font-size: 19px; }

/* ---------- Dòng tóm tắt kết quả, nằm ngay dưới nút ---------- */
.bs2-tt-soat {
    width: 100%; margin-top: 10px; padding: 10px 12px; cursor: pointer;
    display: flex; align-items: center; gap: 8px; text-align: left;
    border: 1px solid; border-radius: 9px; font-size: 12.5px;
    font-family: inherit; background: #fff;
}

.bs2-tt-soat .material-icons-round { font-size: 18px; flex-shrink: 0; }
.bs2-tt-soat span:nth-child(2) { flex: 1; min-width: 0; }
.bs2-tt-xem { font-size: 11.5px; text-decoration: underline; opacity: .75; flex-shrink: 0; }

.bs2-tt-soat.dat  { border-color: #b9e0c6; background: #f2f9f4; color: #22764a; }
.bs2-tt-soat.nhac { border-color: #f0dfbc; background: #fff8ec; color: #a06a10; }
.bs2-tt-soat.hong { border-color: #f0c4c4; background: #fdf4f4; color: #b03030; }

/* ---------- Popup kết quả ---------- */
.bs2-hop-soat {
    background: #fff; border-radius: 14px; width: min(680px, 94vw);
    max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28); overflow: hidden;
}

.bs2-soat-dau {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 24px 16px; border-bottom: 1px solid #eef1f4;
}

.bs2-soat-dau .material-icons-round { font-size: 34px; flex-shrink: 0; }
.bs2-soat-dau h2 { margin: 0; font-size: 19px; color: #1d2530; }

.bs2-soat-ten {
    margin: 3px 0 0; font-size: 12.5px; color: #6b7684;
    word-break: break-all;
}

.bs2-hop-soat.dat  .bs2-soat-dau { background: #f2f9f4; }
.bs2-hop-soat.nhac .bs2-soat-dau { background: #fff8ec; }
.bs2-hop-soat.hong .bs2-soat-dau { background: #fdf4f4; }
.bs2-hop-soat.dat  .bs2-soat-dau .material-icons-round { color: #2e9e5b; }
.bs2-hop-soat.nhac .bs2-soat-dau .material-icons-round { color: #d19314; }
.bs2-hop-soat.hong .bs2-soat-dau .material-icons-round { color: #c0392b; }

.bs2-soat-phu {
    margin: 0; padding: 15px 24px 12px; font-size: 13px;
    line-height: 1.65; color: #4a5560;
}

.bs2-soat-tk {
    display: flex; gap: 8px; padding: 0 24px 14px;
}

.bs2-soat-tk span {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 4px; border-radius: 8px; background: #f4f6f8;
    font-size: 10.5px; color: #6b7684; text-align: center;
}

.bs2-soat-tk b { font-size: 17px; color: #1d2530; }

/* ---------- Bảy mục ---------- */
.bs2-soat-ds {
    flex: 1; overflow-y: auto; padding: 0 24px 8px;
    display: flex; flex-direction: column; gap: 7px;
}

.bs2-muc {
    border: 1px solid #e6eaef; border-radius: 9px; background: #fbfcfd;
    font-size: 12.5px;
}

.bs2-muc.sach { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: #6b7684; }
.bs2-muc.sach .material-icons-round { font-size: 16px; color: #2e9e5b; }
.bs2-muc.chan { border-color: #f0c4c4; background: #fdf6f6; }
.bs2-muc.nhac { border-color: #f0dfbc; background: #fffbf3; }

.bs2-muc summary {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px;
    cursor: pointer; font-weight: 600; color: #1d2530;
}

.bs2-muc summary::-webkit-details-marker { display: none; }
.bs2-muc summary .material-icons-round { font-size: 16px; }
.bs2-muc.chan summary .material-icons-round { color: #c0392b; }
.bs2-muc.nhac summary .material-icons-round { color: #d19314; }
.bs2-muc-ten { flex: 1; min-width: 0; }

.bs2-muc-so {
    font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
    background: #eef1f4; color: #6b7684; white-space: nowrap;
}

.bs2-muc.chan .bs2-muc-so { background: #f7dada; color: #a83232; }
.bs2-muc.nhac .bs2-muc-so { background: #fbeccd; color: #96660d; }

.bs2-muc-goi {
    margin: 0; padding: 0 12px 8px 36px; font-size: 11.5px;
    line-height: 1.6; color: #6b7684;
}

.bs2-muc-ds {
    margin: 0; padding: 0 12px 11px 36px; list-style: none;
    display: flex; flex-direction: column; gap: 6px;
}

.bs2-muc-ds li { line-height: 1.6; color: #4a5560; }

.bs2-dong {
    display: inline-block; min-width: 62px; font-size: 11px; font-weight: 700;
    color: #bb2649; background: #fdeef2; border-radius: 4px;
    padding: 1px 6px; margin-right: 6px;
}

.bs2-vi { font-size: 11.5px; color: #96660d; margin-right: 6px; }

.bs2-muc-ds code {
    display: block; margin-top: 3px; padding: 5px 8px; border-radius: 5px;
    background: #fff; border: 1px solid #e6eaef; font-size: 11.5px;
    color: #33404f; word-break: break-word;
}

.bs2-con { font-size: 11.5px; color: #8b95a1; font-style: italic; }

.bs2-soat-nut {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 24px 18px; border-top: 1px solid #eef1f4; background: #fbfcfd;
}

.bs2-soat-nut .bs2-nut-chinh { flex: 0 0 auto; margin-top: 0; padding: 11px 22px; }

/* ---------- Nhãn định vị: SỐ CÂU đứng trước, số dòng lùi xuống ---------- */
.bs2-neo-cau {
    display: inline-block; font-size: 11.5px; font-weight: 700;
    color: #bb2649; background: #fdeef2; border-radius: 5px;
    padding: 2px 8px; margin-right: 7px; white-space: nowrap;
}

/* Mốc câu bị `**` làm vỡ — bộ tách sẽ không đếm nó là câu. */
.bs2-neo-cau.vo { color: #a83232; background: #f7dada; }
.bs2-neo-cau.vo::after { content: ' ⚠'; }
.bs2-neo-cau.ngoai { color: #6b7684; background: #eef1f4; font-weight: 600; }

.bs2-neo-phu { font-size: 11px; color: #8b95a1; }

/* ---------- Ô chữ lùi khi trình duyệt chặn clipboard ---------- */
.bs2-soat-chu {
    margin: 0 24px 12px; padding: 10px 12px; height: 130px; resize: vertical;
    border: 1px solid #d7dee6; border-radius: 8px; background: #fbfcfd;
    font-family: ui-monospace, "Consolas", monospace; font-size: 11.5px;
    line-height: 1.55; color: #33404f; white-space: pre;
}

.bs2-soat-chu[hidden] { display: none; }
.bs2-soat-nut .bs2-nut-phu { display: inline-flex; align-items: center; gap: 6px; }
.bs2-soat-nut .bs2-nut-phu .material-icons-round { font-size: 17px; }
.bs2-soat-nut { flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   VIỆC 10 · AI PHÂN LOẠI — ĐÍCH TRONG NGÂN HÀNG            (04/09/2026)
   ═══════════════════════════════════════════════════════════════════════ */

.bs2-nut-ai.dang-mo { background: #fdeef2; border-color: #f0c4d2; color: #bb2649; }

/* ---------- Dòng đích dưới tên Dạng ---------- */
.bs2-dich {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin: 7px 0 0; font-size: 12.5px; line-height: 1.5;
}

.bs2-dich .material-icons-round { font-size: 16px; flex-shrink: 0; }
.bs2-dich.co   { color: #22764a; }
.bs2-dich.moi  { color: #a06a10; }
.bs2-dich.chua { color: #97a2ad; }
.bs2-dich.ngo  { color: #a06a10; }
.bs2-dich-duong { color: #1d2530; font-weight: 500; }
.bs2-dich.chua .bs2-dich-duong { color: inherit; }

.bs2-nhan-moi, .bs2-nhan-ngo, .bs2-nhan-tay, .bs2-nhan-dung {
    font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
    border-radius: 4px; padding: 2px 6px; white-space: nowrap;
}

.bs2-nhan-moi  { background: #fff2dc; color: #a06a10; }
.bs2-nhan-ngo  { background: #fdeef2; color: #bb2649; }
.bs2-nhan-tay  { background: #e8f0fe; color: #1a56b8; }
.bs2-nhan-dung { background: #eef1f4; color: #6b7684; }

.bs2-dich-sua {
    border: 1px solid #d7dee6; border-radius: 6px; background: #fff;
    color: #4a5560; font-size: 11.5px; font-family: inherit;
    padding: 3px 9px; cursor: pointer;
}

.bs2-dich-sua:hover { background: #f0f3f6; border-color: #bfc9d4; }

.bs2-dich-bo {
    border: 0; background: transparent; color: #97a2ad;
    cursor: pointer; padding: 3px; display: inline-flex; border-radius: 6px;
}

.bs2-dich-bo:hover { color: #bb2649; background: #fff0f3; }
.bs2-dich-bo .material-icons-round { font-size: 16px; }

/* ---------- Bảng đích ---------- */
.bs2-bang-dich { padding: 16px 18px 30px; }

.bs2-bd-dau {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; margin-bottom: 14px;
}

.bs2-bd-dau h3 { margin: 0 0 3px; font-size: 16px; color: #1d2530; }
.bs2-bd-dau p { margin: 0; font-size: 12.5px; color: #6b7684; }
.bs2-bd-dau b { color: #bb2649; }

.bs2-bd-nhac {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    padding: 10px 13px; border-radius: 9px; font-size: 12.5px;
    background: #fffbf3; border: 1px solid #f0dfbc; color: #96660d;
}

.bs2-bd-nhac .material-icons-round { font-size: 18px; }

.bs2-bd-bang { width: 100%; border-collapse: separate; border-spacing: 0 6px; }

.bs2-bd-bang td {
    background: #fff; border-top: 1px solid #e6eaef; border-bottom: 1px solid #e6eaef;
    padding: 10px 12px; vertical-align: middle;
}

.bs2-bd-bang td:first-child { border-left: 1px solid #e6eaef; border-radius: 9px 0 0 9px; }
.bs2-bd-bang td:last-child  { border-right: 1px solid #e6eaef; border-radius: 0 9px 9px 0; }
.bs2-bd-bang tr.chua td { background: #fbfcfd; border-color: #e2e7ed; }

.bs2-bd-nguon { width: 42%; }
.bs2-bd-nguon b { display: block; font-size: 13px; color: #1d2530; line-height: 1.45; }
.bs2-bd-nguon span { font-size: 11.5px; color: #8b95a1; }

.bs2-bd-mui { width: 30px; text-align: center; }
.bs2-bd-mui .material-icons-round { font-size: 17px; color: #cfd6de; }

.bs2-bd-dich { font-size: 12.5px; }
.bs2-bd-dich .bs2-dich-duong { margin-right: 6px; }
.bs2-bd-chua { color: #97a2ad; font-style: italic; }

.bs2-bd-nut { width: 96px; text-align: right; white-space: nowrap; }

/* ---------- Popup chọn đích ---------- */
.pl-hop-dich {
    background: #fff; border-radius: 14px; padding: 26px 28px;
    width: min(520px, 94vw); box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}

.pl-hop-dich h2 { margin: 0 0 6px; font-size: 18px; text-align: center; color: #1d2530; }

.pl-dich-ten {
    margin: 0 0 4px; font-size: 13.5px; font-weight: 600;
    text-align: center; color: #bb2649; line-height: 1.5;
}

.pl-hai-kho { display: flex; gap: 8px; margin: 14px 0 4px; }
.pl-hai-kho .md-dong-chon { flex: 1; grid-template-columns: 18px 1fr; }

/* ═══════════════════════════════════════════════════════════════════════
   VIỆC 9 · AI LỜI GIẢI VÀ ĐÁP ÁN                           (04/09/2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Cảnh báo trong hộp thoại ---------- */
.lg-canh {
    display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0;
    padding: 10px 12px; border-radius: 9px; font-size: 12px; line-height: 1.6;
    background: #fdf4f4; border: 1px solid #f0c4c4; color: #a83232;
}

.lg-canh .material-icons-round { font-size: 18px; flex-shrink: 0; }

.lg-gia {
    display: flex; align-items: baseline; gap: 9px; margin: 14px 0 0;
    padding: 12px 14px; border-radius: 10px; background: #f4f6f8;
    border: 1px solid #e6eaef;
}

.lg-gia > span:first-child { font-size: 12.5px; color: #6b7684; }
.lg-gia b { font-size: 19px; color: #bb2649; }
.lg-gia .md-nho { margin: 0 0 0 auto; }

/* ---------- Nút lọc cờ đỏ trên thanh công cụ ---------- */
.bs2-nut-co {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    padding: 7px 11px; border-radius: 8px; font-family: inherit;
    font-size: 12.5px; font-weight: 600;
    border: 1px solid #f0c4c4; background: #fdf4f4; color: #b03030;
}

.bs2-nut-co:hover { background: #fbe9e9; }
.bs2-nut-co.dang-bat { background: #b03030; border-color: #b03030; color: #fff; }
.bs2-nut-co .material-icons-round { font-size: 16px; }

/* ---------- Ô lời giải trên thẻ câu ---------- */
.bs2-the.bs2-co-do { border-color: #e8a3a3; box-shadow: 0 0 0 1px #f7dada inset; }

.lg-o { margin-top: 10px; border-top: 1px dashed #e6eaef; padding-top: 9px; }
.lg-o.co-do { border-top-color: #f0c4c4; }

.lg-co-do {
    display: flex; align-items: flex-start; gap: 7px; margin-bottom: 8px;
    padding: 9px 11px; border-radius: 8px; font-size: 12px; line-height: 1.6;
    background: #fdf4f4; border: 1px solid #f0c4c4; color: #a83232;
}

.lg-co-do .material-icons-round { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════════════
   HAI CỘT ĐỐI CHIẾU HAI LƯỢT AI            (05/09/2026 tối, Thầy đặt)
   ───────────────────────────────────────────────────────────────────────
   Trước đây bản lượt hai nằm cách bản lượt một nửa thẻ, phải bấm mới bung.
   Đối chiếu kiểu đó là bắt mắt nhớ bản trên trong lúc đọc bản dưới. Nay hai
   bản nằm SONG SONG trong nút "Lời giải".

   HAI TÔNG ẤM ↔ LẠNH, không phải hai sắc độ của một màu — liếc là biết đang
   đọc cột nào mà không cần đọc nhãn:
     · AI 1 — greige ấm       · AI 2 — xanh xám lạnh
     · Ô soạn (bản của Thầy)  — trắng ngà + thanh ĐỎ THƯƠNG HIỆU, vì đó mới
       là bản đi vào ngân hàng.
   ⚠ Không mượn bốn màu đã có nghĩa: vàng = nháp AI · xanh lá = đã duyệt ·
     tím = chưa có gì · hồng #fdf4f4 = ô CỜ ĐỎ.
   ═══════════════════════════════════════════════════════════════════════ */

.lg-doi {
    display: grid; gap: 10px; margin-bottom: 10px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.lg-cot {
    border-radius: 9px; overflow: hidden; min-width: 0;
    border: 1px solid #e6eaef; border-left-width: 3px;
}

.lg-cot-1 { background: #f8f4ed; border-color: #e4dbcd; border-left-color: #a98f6f; }
.lg-cot-2 { background: #ecf2f9; border-color: #d0dcea; border-left-color: #7b8ea6; }

/* Cột đang được dùng làm bản chính: viền đậm hơn + vệt sáng, để không phải
   dò chữ mới biết ô soạn bên dưới đang chở bản của bên nào. */
.lg-cot.dang-dung { box-shadow: 0 0 0 2px rgba(187, 38, 73, .16); border-left-color: #bb2649; }

.lg-cot-dau {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 7px 10px; border-bottom: 1px solid rgba(0, 0, 0, .06);
    font-size: 11px; color: #6b7684;
}

.lg-cot-ten { font-weight: 800; letter-spacing: .3px; color: #3d4753; }
.lg-cot-model { font-weight: 600; }
.lg-cot-da b { color: #bb2649; }
.lg-cot-trong { font-style: italic; }

.lg-dang-dung {
    margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
    padding: 2px 6px; border-radius: 4px; background: #bb2649; color: #fff;
}

.lg-cot-than {
    padding: 10px 12px; font-size: 13px; line-height: 1.75; color: #1d2530;
    max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
}

.lg-cot-than p { margin: 0 0 7px; }
.lg-cot-than p:last-child { margin-bottom: 0; }
.lg-cot-rong { color: #8b95a1; font-style: italic; }

.lg-nhac-chon {
    margin: 9px 0 12px; font-size: 11.5px; line-height: 1.55; color: #7c8791;
    padding: 6px 9px; border-radius: 7px; background: #f7f8fa; border: 1px dashed #e0e5ea;
}
.lg-nhac-chon b { color: #4a5560; }

/* Ô soạn — bản của Thầy, bản DUY NHẤT đi vào ngân hàng. Nền trắng ngà cho
   dịu mắt khi gõ, việc tách khỏi nền thẻ để thanh đỏ thương hiệu gánh. */
.lg-o-soan {
    background: #f9f7f1; border: 1px solid #e6ded3; border-left: 3px solid #bb2649;
    border-radius: 8px; color: #1d2530;
}
.lg-o-soan:focus { background: #fffefb; border-color: #d9c9b8; border-left-color: #bb2649; }

.lg-nhan-soan {
    margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; color: #bb2649;
}

.lg-chon-hai { display: flex; gap: 8px; margin-top: 9px; }

.lg-chon-hai button {
    flex: 1; padding: 8px 10px; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 600; border-radius: 8px;
    border: 1px solid #d7dee6; background: #fff; color: #4a5560;
}

.lg-chon-hai button:hover { background: #fff5f7; border-color: #bb2649; color: #bb2649; }

/* Lượt không chốt được đáp án: nút KHOÁ THẬT, không chỉ tô mờ — bấm vào chỉ
   nhận một câu từ chối, mà cái nút thì đã hứa là lấy được. */
.lg-chon-hai button:disabled {
    cursor: not-allowed; opacity: .55; background: #f5f6f8; color: #93a0ad;
}
.lg-chon-hai button:disabled:hover { background: #f5f6f8; border-color: #d7dee6; color: #93a0ad; }
.lg-chon-hai button b { color: #bb2649; margin-left: 3px; }
.lg-chon-hai button:disabled b { color: inherit; }

/* Mẩu chữ "· so sánh 2 lượt" trên nút Lời giải — nhỏ và mờ hơn chữ chính, để
   MÀU vẫn là thứ đầu tiên đập vào mắt. */
.lg-nut-luot { font-size: 11px; font-weight: 600; opacity: .72; }

/* ═══════════════════════════════════════════════════════════════════════
   VIỆC 11 · DUYỆT · DÒ TRÙNG · HỘP CHỜ                     (04/09/2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Thanh Duyệt ở cuối trang Dạng ---------- */
.dy-thanh {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 18px 0 4px; padding: 14px 16px; border-radius: 11px;
    background: #fff5f7; border: 1px solid #f0c4d2;
}

.dy-thanh.xong {
    background: #f4fbf6; border-color: #b9e0c6; color: #22764a;
    font-size: 13px; gap: 8px;
}

.dy-thanh.xong .material-icons-round { font-size: 19px; }
.dy-chu { flex: 1; min-width: 0; font-size: 13px; color: #4a5560; line-height: 1.6; }
.dy-chu b { color: #bb2649; }
.dy-chu span { display: block; font-size: 11.5px; color: #8b95a1; }
.dy-thieu { color: #b03030 !important; font-weight: 600; }

.dy-nut {
    flex: 0 0 auto; margin-top: 0; display: inline-flex; align-items: center;
    gap: 6px; padding: 11px 18px;
}

.dy-nut .material-icons-round { font-size: 18px; }
.dy-ten { margin: 0 0 12px; font-size: 13px; text-align: center; color: #bb2649; font-weight: 600; }

.dy-nk {
    margin: 4px 0 12px; border: 1px solid #e6eaef; border-radius: 9px;
    background: #fbfcfd; font-size: 12px;
}

.dy-nk summary { padding: 9px 12px; cursor: pointer; font-weight: 600; color: #4a5560; }
.dy-nk ul { margin: 0; padding: 0 12px 10px 28px; line-height: 1.6; color: #6b7684; }
.dy-nk li.trung_xoa { color: #a83232; }

.dy-ly {
    margin: 0 0 4px; padding: 0 0 0 18px; font-size: 12.5px;
    line-height: 1.65; color: #4a5560;
}

/* ---------- Nút Hộp chờ trên thanh công cụ ---------- */
.bs2-nut-cho {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    padding: 7px 11px; border-radius: 8px; font-family: inherit;
    font-size: 12.5px; font-weight: 600;
    border: 1px solid #f0dfbc; background: #fffbf3; color: #96660d;
}

.bs2-nut-cho:hover { background: #fdf3e0; }
.bs2-nut-cho.dang-bat { background: #a06a10; border-color: #a06a10; color: #fff; }
.bs2-nut-cho .material-icons-round { font-size: 16px; }

/* ---------- Nhãn trạng thái trên thẻ câu ---------- */
.bs2-nhan-day, .bs2-nhan-xoa, .bs2-nhan-treo {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; border-radius: 5px; padding: 2px 7px;
}

.bs2-nhan-day  { background: #eaf6ee; color: #22764a; }
.bs2-nhan-xoa  { background: #eef1f4; color: #8b95a1; }
.bs2-nhan-treo { background: #fff2dc; color: #a06a10; }
.bs2-nhan-day .material-icons-round { font-size: 13px; }
.bs2-the.bs2-da-xu { opacity: .58; }

/* ---------- Màn Hộp chờ ---------- */
.hc-man { padding: 16px 18px 30px; }
.hc-nhom { margin-bottom: 20px; }

.hc-nhom h4 {
    margin: 0 0 9px; font-size: 13.5px; color: #1d2530;
    display: flex; align-items: baseline; gap: 8px;
}

.hc-nhom h4 span { font-size: 11.5px; font-weight: 500; color: #8b95a1; }

.hc-the {
    border: 1px solid #f0dfbc; border-radius: 11px; background: #fffdf8;
    padding: 13px 15px; margin-bottom: 10px;
}

.hc-ly {
    display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px;
}

.hc-ly .material-icons-round { font-size: 17px; color: #d19314; flex-shrink: 0; }
.hc-ly ul { flex: 1; min-width: 200px; margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.65; color: #96660d; }

.hc-nhan-trung {
    font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
    background: #f7dada; color: #a83232; border-radius: 4px; padding: 3px 7px;
}

.hc-noi {
    font-size: 13px; line-height: 1.7; color: #1d2530;
    padding: 10px 12px; border-radius: 9px; background: #fff; border: 1px solid #eee4cf;
}

.hc-nut { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.hc-nut .bs2-nut-phu { display: inline-flex; align-items: center; gap: 5px; }
.hc-nut .bs2-nut-phu .material-icons-round { font-size: 16px; }
.hc-nut .hc-bo:hover { border-color: #e8a3a3; color: #b03030; background: #fdf4f4; }
.hc-nut .hc-day { flex: 0 0 auto; margin-top: 0; margin-left: auto; padding: 9px 18px; }

/* ---------- Ô sửa nhanh trong Hộp chờ ---------- */
.hc-sua {
    margin-top: 11px; padding: 12px 13px; border-radius: 9px;
    background: #fff; border: 1px solid #e6eaef;
    display: flex; flex-direction: column; gap: 9px;
}

.hc-o { display: flex; flex-direction: column; gap: 4px; }
.hc-o > span { font-size: 11.5px; font-weight: 600; color: #6b7684; }
.hc-o > span i { font-weight: 400; color: #97a2ad; }

.hc-o textarea, .hc-o input {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid #d7dee6; border-radius: 7px; font-family: inherit;
    font-size: 12.5px; line-height: 1.6; color: #1d2530; resize: vertical;
}

.hc-o textarea:focus, .hc-o input:focus { outline: 0; border-color: #bb2649; }
.hc-o-ngan input { max-width: 220px; }
.hc-sua-nut { display: flex; justify-content: flex-end; }
.hc-sua-nut .bs2-nut-chinh { margin-top: 0; padding: 9px 20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   04/09/2026 CHIỀU — THẺ CÂU KIỂU NGÂN HÀNG · BA NÚT AI CÓ MÀU · CHUYỂN DẠNG
   ───────────────────────────────────────────────────────────────────────────
   Thẻ câu của Trình bổ sung nay là `question-card-v2`, dùng lại y nguyên hình
   dáng của hai Ngân hàng: thanh đỏ do `the-cau-hoi.css` lo, huy hiệu mức độ và
   menu bốn màu do `teacher.css` lo, ô chọn đáp án do `dap-an-nhanh.css` lo.
   Ở đây CHỈ khai những gì Trình bổ sung có mà ngân hàng không có — không chép
   lại một dòng nào của ba file kia, để ngân hàng đổi kiểu là bên này đổi theo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- ① BA NÚT AI: MỖI NÚT MỘT MÀU, MỜ KHI CHƯA KÍCH HOẠT ---------- */
/* Màu chọn theo nghĩa của việc: thang đo → xanh dương · bóng đèn → hổ phách ·
   cây phân nhánh → tím. Ba màu này cố ý KHÔNG đụng bốn màu mức độ
   NB/TH/VD/VDC ở `teacher.css`, để thanh công cụ và huy hiệu trên thẻ không
   bao giờ nói cùng một màu về hai việc khác nhau. */
.bs2-nut-ai.bs2-ai-muc  { border-color: #bcd4f0; color: #1d5fa8; background: #f2f7fd; }
.bs2-nut-ai.bs2-ai-giai { border-color: #f3d9a2; color: #a4650a; background: #fffaf0; }
.bs2-nut-ai.bs2-ai-loai { border-color: #d6cdf2; color: #5b46a8; background: #f8f6fe; }

.bs2-nut-ai.bs2-ai-muc:hover:not([disabled])  { background: #e3eefb; }
.bs2-nut-ai.bs2-ai-giai:hover:not([disabled]) { background: #fdf2df; }
.bs2-nut-ai.bs2-ai-loai:hover:not([disabled]) { background: #f0ebfc; }

/* ⚠ Nút mờ phải KÈM `disabled` trong HTML — xem `BoSung.veThanhCu`. Chỉ tô mờ
   bằng CSS thì lượt bấm vẫn chạy thẳng vào hàm gọi Gemini với khoá rỗng. */
.bs2-nut-ai.bs2-ai-mo {
    opacity: .45; cursor: not-allowed; filter: grayscale(.35);
}


.bs2-nhac-ai {
    font-size: 11.5px; color: #97a2ad; font-style: italic; white-space: nowrap;
}

/* ---------- ② HUY HIỆU MỨC ĐỘ: TRẠNG THÁI RIÊNG CỦA TRÌNH BỔ SUNG -------- */
/* Sách vừa nạp thì phần lớn câu chưa ai chấm mức nào. Ngân hàng rơi về "NB",
   ở đây KHÔNG được phép — in NB lên là bịa ra một dữ kiện Thầy chưa hề chốt. */
.bs2-the .q-difficulty-v2.chua {
    background: #eef1f4 !important; color: #97a2ad !important; font-weight: 700;
}

/* Mức AI vừa chấm mà Thầy chưa nhận: VIỀN ĐỨT NÉT + chấm "AI".
   Ba lớp bộ chọn để thắng `border-color … !important` của `the-cau-hoi.css`. */
.bs2-the .q-title-row-v2 .q-difficulty-container.md-nhap .q-difficulty-v2 {
    border-style: dashed !important;
    border-width: 1.5px !important;
    border-color: rgba(255, 255, 255, .95) !important;
}

.bs2-the .q-difficulty-v2 .md-cham {
    margin-left: 4px; font-size: 8.5px; font-weight: 800; letter-spacing: .4px;
    background: rgba(255, 255, 255, .82); color: #7a4a00;
    border-radius: 4px; padding: 0 3px; line-height: 1.5;
}

/* ---------- ③ NÚT CHUYỂN DẠNG TRÊN THANH ĐỎ ---------- */
.bs2-nut-chuyen {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .14); color: #fff; padding: 0;
}

.bs2-nut-chuyen:hover { background: rgba(255, 255, 255, .3); }
.bs2-nut-chuyen .material-icons-round { font-size: 17px; }

/* ---------- ④ HỘP CHỌN DẠNG ĐÍCH ---------- */
.bs2-hop {
    background: #fff; border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    display: flex; flex-direction: column; overflow: hidden;
}

.bs2-hop-cd { width: min(560px, 94vw); max-height: 82vh; }

.bs2-hop-dau {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px 20px; border-bottom: 1px solid #e6eaef;
}

.bs2-hop-dau h3 { margin: 0; font-size: 16px; color: #1d2530; }

.bs2-cd-nhac {
    margin: 0; padding: 10px 20px; font-size: 12.5px; line-height: 1.6;
    color: #6b7684; background: #f7f9fb; border-bottom: 1px solid #eef1f4;
}

.bs2-cd-ds { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }

.bs2-cd-dong {
    display: flex; flex-direction: column; gap: 2px; text-align: left;
    padding: 9px 12px; border-radius: 9px; border: 1px solid #e6eaef;
    background: #fff; cursor: pointer; font-family: inherit; width: 100%;
}

.bs2-cd-dong:hover:not([disabled]) { border-color: #bb2649; background: #fff5f7; }
.bs2-cd-dong[disabled] { cursor: not-allowed; opacity: .5; background: #f7f9fb; }
.bs2-cd-dong.dang-o { border-color: #bb2649; background: #fdeef2; opacity: 1; }
.bs2-cd-ten { font-size: 13.5px; font-weight: 700; color: #1d2530; line-height: 1.4; }
.bs2-cd-phu { font-size: 11.5px; color: #8b95a1; }

/* ---------- ⑤ ĐÍCH ĐÃ CHỐT (Dạng đã duyệt) ---------- */
.bs2-dich.khoa { color: #6b7684; }

.bs2-nhan-khoa {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 800; letter-spacing: .3px;
    background: #eef1f4; color: #6b7684; border-radius: 5px; padding: 2px 7px;
}

.bs2-nhan-khoa .material-icons-round { font-size: 12px; }
.bs2-bd-bang tr.da-duyet { background: #fafbfc; }
.bs2-bd-bang tr.da-duyet .bs2-bd-nguon b { color: #6b7684; }

/* ---------- ⑥ ẢNH PHƯƠNG ÁN & NÚT LẤY LẠI ---------- */
.bs2-anh-pa { display: inline-block; vertical-align: middle; margin-left: 6px; }
.bs2-anh-pa img { max-height: 74px; border-radius: 5px; cursor: zoom-in; vertical-align: middle; }

.bs2-nut-lay-lai {
    background: #eef6f1 !important; color: #22764a !important;
    border: 1px solid #bfe3cd !important;
}

.bs2-nut-lay-lai:hover { background: #dcefe4 !important; }

/* ---------- ⑦ THẺ TRONG CỘT PHẢI ---------- */
/* `.bs2-ds-cau` đã có `gap: 10px`; lề dưới 16px của `question-card-v2` cộng
   thêm vào thành 26px, thưa hẳn so với phần còn lại của màn. */
.bs2-ds-cau .question-card-v2 { margin-bottom: 0; }

/* Thẻ đã xử xong (đã vào ngân hàng / Thầy đã bỏ / đang treo) mờ đi, và KHÔNG
   nhấc lên khi rê chuột — nhấc lên là mời bấm, mà bấm thì không còn gì để bấm. */
.bs2-the.bs2-da-xu:hover { transform: none; box-shadow: none; border-color: #eceff3; }

/* Ô soạn lời giải mượn `soln-block-v2` của ngân hàng; ở đây thẻ hẹp hơn nên
   hàng nút dễ tràn — cho phép xuống dòng thay vì đẩy ngang. */
.bs2-the .soln-hang-nut { row-gap: 7px; }

/* Hộp sửa nhanh mượn của Hộp chờ, nay bung ngay trong thẻ câu của trang Dạng.
   Ở Hộp chờ nó nằm trên nền trắng của thẻ treo; trong thẻ câu thì phải tự tách
   nền, nếu không nhìn như một phần của đề bài. */
.bs2-the .hc-sua {
    margin-top: 12px; padding: 12px; border-radius: 10px;
    background: #f7f9fb; border: 1px solid #e6eaef;
}

/* ⚠⚠ THANH ĐỎ PHẢI TRÀN HẾT BỀ NGANG THẺ — 04/09/2026 chiều.
   ───────────────────────────────────────────────────────────────────────────
   `the-cau-hoi.css` cho thanh tràn viền bằng LỀ ÂM và `width: auto`. Lề âm chỉ
   nở được hộp khi hộp đó là một khối BÌNH THƯỜNG chiếm trọn bề ngang. Bên hai
   Ngân hàng điều đó có sẵn nhờ `style.css`:

       .bank-panel   .question-card-v2 .q-header-v2:not(:has(> .q-checkbox-v2)),
       .content-page .question-card-v2 .q-header-v2:not(:has(> .q-checkbox-v2))
       { display: block !important; }

   Hai bộ chọn ấy đòi tổ tiên là `.bank-panel` hoặc `.content-page`. Cột phải
   của Trình bổ sung là `.bs2-phai`, KHÔNG có tổ tiên nào trong hai cái đó, nên
   `.q-header-v2` giữ nguyên `display: flex` của `teacher.css`. Trong hộp flex,
   phần tử con co lại vừa nội dung (`align-items: flex-start`) — thanh đỏ chỉ
   dài bằng chữ, đúng lỗi "thanh đỏ không chiếm hoàn toàn bề ngang" mà Thầy đã
   báo một lần hôm 19/08 ở màn Ngân hàng.

   Khai lại đúng một dòng ấy cho thẻ của Trình bổ sung. KHÔNG mượn class
   `.bank-panel` cho cột phải: class đó còn kéo theo vài chục rule khác về nền,
   đệm và phân trang của màn Ngân hàng. */
.bs2-the.question-card-v2 > .q-header-v2 { display: block !important; }
.bs2-the.question-card-v2 > .q-header-v2 > .bs2-the-dau { display: block; }

/* Hộp chờ cho nút "Lưu câu" nở hết bề ngang (thẻ treo hẹp); trong thẻ câu của
   trang Dạng thì thẻ rộng, nút nở hết trông như một thanh chặn ngang màn. */
.bs2-the .hc-sua-nut .bs2-nut-chinh { width: auto; align-self: flex-end; }

/* ==========================================================================
   CHẾ ĐỘ 2 — NẠP NHIỀU TÀI LIỆU & TỰ PHÂN LOẠI  (29/09/2026)
   Tiền tố `bsn-`. Màu: tím #7b3fbf = AI phân loại (cùng họ nút "AI phân loại"),
   xanh lá #2e9d5b = đạt, đỏ #c0392b = hỏng.
   ========================================================================== */

/* ---------- Popup hai lựa chọn ---------- */
.bsn-chon {
    background: #fff; border-radius: 14px; padding: 18px 20px 22px;
    width: min(620px, 94vw); box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
.bsn-chon-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.bsn-chon-o {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 24px 16px 20px; border: 1.5px solid #e6eaef; border-radius: 12px;
    background: #fff; cursor: pointer; text-align: center; color: #1d2530;
    transition: border-color .15s, background .15s, transform .15s;
}
.bsn-chon-o:hover { border-color: #bb2649; background: #fff5f7; transform: translateY(-2px); }
.bsn-chon-o .material-icons-round { font-size: 34px; color: #bb2649; }
.bsn-chon-o:last-child .material-icons-round { color: #7b3fbf; }
.bsn-chon-o b { font-size: 14.5px; }
.bsn-chon-o small { font-size: 12px; color: #6b7684; line-height: 1.5; }
.bsn-chon-so {
    position: absolute; top: 10px; left: 12px; width: 22px; height: 22px; border-radius: 50%;
    background: #f0f3f6; color: #6b7684; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
@media (max-width: 560px) { .bsn-chon-luoi { grid-template-columns: 1fr; } }

/* ---------- Danh sách file ở cột trái ---------- */
.bsn-tong { display: flex; gap: 10px; margin: 14px 0 8px; font-size: 12.5px; color: #6b7684; }
.bsn-tong .dat { color: #2e9d5b; font-weight: 700; }
.bsn-tong .hong { color: #c0392b; font-weight: 700; }
.bsn-ds-tep { list-style: none; margin: 0 0 4px; padding: 0; max-height: 46vh; overflow-y: auto; }
.bsn-tep {
    display: flex; align-items: stretch; border: 1px solid #e6eaef; border-radius: 9px;
    margin-bottom: 7px; background: #fff; overflow: hidden;
}
.bsn-tep-mo {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border: 0; background: none; text-align: left; cursor: default;
}
.bsn-tep.dat .bsn-tep-mo, .bsn-tep.hong .bsn-tep-mo { cursor: pointer; }
.bsn-tep-icon { font-size: 20px !important; color: #b0b9c3; flex-shrink: 0; }
.bsn-tep-chu { min-width: 0; display: block; }
.bsn-tep-ten {
    display: block; font-size: 13px; font-weight: 600; color: #1d2530;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bsn-tep-phu { display: block; font-size: 11.5px; color: #6b7684; margin-top: 1px; }
.bsn-tep-xoa {
    border: 0; background: none; color: #97a2ad; cursor: pointer; padding: 0 10px; flex-shrink: 0;
}
.bsn-tep-xoa:hover:not(:disabled) { color: #c0392b; background: #fff0f0; }
.bsn-tep-xoa:disabled { opacity: .35; cursor: not-allowed; }
.bsn-tep-xoa .material-icons-round { font-size: 20px; }

.bsn-tep.soat .bsn-tep-icon { color: #7b3fbf; animation: bs2-quay 1s linear infinite; }
.bsn-tep.dat { border-color: #bfe5cc; background: #f3fbf6; }
.bsn-tep.dat .bsn-tep-icon { color: #2e9d5b; }
.bsn-tep.dat .bsn-tep-phu { color: #2e7d4f; }
.bsn-tep.hong { border-color: #f1b0a9; background: #fdecea; }
.bsn-tep.hong .bsn-tep-icon, .bsn-tep.hong .bsn-tep-phu { color: #c0392b; }
.bsn-tep.hong .bsn-tep-xoa { color: #c0392b; }
.bsn-tep.loi { border-color: #f3d19b; background: #fff8ec; }
.bsn-tep.loi .bsn-tep-icon, .bsn-tep.loi .bsn-tep-phu { color: #b45309; }

/* ---------- Hàng tab ở cột phải ---------- */
.bsn-hang-tab {
    display: flex; gap: 4px; padding: 8px 12px 0; background: #eef1f5;
    border-bottom: 1px solid #dfe4ea; overflow-x: auto; flex-shrink: 0;
    scrollbar-width: thin;
}
.bsn-tab {
    display: flex; align-items: center; flex-shrink: 0; max-width: 240px;
    background: #e2e7ee; border: 1px solid #d5dbe3; border-bottom: 0;
    border-radius: 9px 9px 0 0; margin-bottom: -1px;
}
.bsn-tab.mo { background: #fff; border-color: #dfe4ea; box-shadow: inset 0 3px 0 #bb2649; }
.bsn-tab-mo {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    padding: 8px 4px 8px 12px; border: 0; background: none; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: #4a5560;
}
.bsn-tab.mo .bsn-tab-mo { color: #1d2530; }
.bsn-tab-ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsn-tab-so {
    flex-shrink: 0; min-width: 20px; padding: 1px 6px; border-radius: 10px;
    background: #7b3fbf; color: #fff; font-size: 11px; font-weight: 700; text-align: center;
}
.bsn-tab-v { font-size: 16px !important; color: #2e9d5b; }
.bsn-tab.xong .bsn-tab-ten { color: #6b7684; }
.bsn-tab-dong {
    border: 0; background: none; color: #97a2ad; cursor: pointer; padding: 4px 6px;
    border-radius: 6px; margin-right: 4px; display: flex;
}
.bsn-tab-dong:hover { color: #bb2649; background: #fdeef2; }
.bsn-tab-dong .material-icons-round { font-size: 16px; }

/* ---------- Ô chọn khối trên thanh công cụ ---------- */
.bsn-khoi {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px;
    border: 1px solid #d7dee6; border-radius: 8px; background: #fff; font-size: 13px;
}
.bsn-khoi .material-icons-round { font-size: 17px; color: #6b7684; }
.bsn-khoi select { border: 0; background: none; font-size: 13px; font-weight: 600; color: #1d2530; cursor: pointer; }
.bsn-khoi.chua { border-color: #e67e22; background: #fff8ec; }
.bsn-khoi.chua .material-icons-round, .bsn-khoi.chua select { color: #b45309; }

/* ---------- Hộp xác nhận / tiến độ / kết quả ---------- */
.bsn-hop-hoi, .bsn-hop-kq { width: min(560px, 94vw); }
.bsn-hoi-than { padding: 4px 2px 0; }
.bsn-pv {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid #e6eaef; border-radius: 9px; cursor: pointer; font-size: 13.5px;
}
.bsn-pv:has(input:checked) { border-color: #7b3fbf; background: #f7f1fd; }
.bsn-pv input { margin-top: 3px; accent-color: #7b3fbf; }
.bsn-pv small { color: #6b7684; }
.bsn-model { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 13px; font-weight: 600; }
.bsn-model select { flex: 1; padding: 7px 9px; border: 1px solid #d7dee6; border-radius: 8px; font-size: 13px; }
.bsn-hoi-ds { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: #4a5560; }
.bsn-hoi-nut { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.bsn-hoi-nut .bs2-nut-chinh { width: auto; margin-top: 0; padding: 9px 22px; }

.bsn-hop-tien { width: min(440px, 92vw); text-align: center; padding: 24px 26px; }
.bsn-tien-tab { margin: 12px 0 2px; font-size: 12.5px; color: #6b7684; word-break: break-word; }
.bsn-tien-buoc { margin: 0 0 12px; font-size: 14.5px; font-weight: 700; color: #1d2530; }
.bsn-thanh { height: 8px; border-radius: 4px; background: #eef1f5; overflow: hidden; }
.bsn-thanh span { display: block; height: 100%; background: linear-gradient(90deg, #7b3fbf, #bb2649); transition: width .4s; }
.bsn-tien-so { margin: 10px 0 14px; font-size: 12.5px; color: #4a5560; }

.bsn-kq-than { max-height: 58vh; overflow-y: auto; padding-right: 4px; }
.bsn-kq-tab { border: 1px solid #e6eaef; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.bsn-kq-tab h4 { margin: 0 0 6px; font-size: 13.5px; color: #1d2530; word-break: break-word; }
.bsn-kq-tab ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: #35404d; }
.bsn-kq-tab li.canh { color: #b45309; }
.bsn-kq-chan { margin: 8px 0 0; font-size: 12px; color: #6b7684; }
.bsn-hoi-canh {
    display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 10px; padding: 9px 11px;
    border-radius: 9px; background: #fff8ec; border: 1px solid #f3d19b; font-size: 12.5px; color: #7a4a0c;
}
.bsn-hoi-canh .material-icons-round { font-size: 18px; color: #b45309; }
.bsn-tep-chu { flex: 1; }
.bsn-hop-hoi .bsn-hoi-than, .bsn-hop-kq .bsn-kq-than { padding: 14px 20px 0; }
.bsn-hop-hoi .bsn-hoi-nut, .bsn-hop-kq .bsn-hoi-nut { padding: 0 20px 18px; }
.bsn-hop-kq .bsn-kq-chan { padding: 0 20px; }
.bsn-chon .bs2-hop-dau { padding-left: 4px; }

/* ═══ ẢNH ĐỀ BÀI TRONG THẺ — câu có nhiều hình (30/09/2026) ═══════════════ */
.bs2-anh-de { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.bs2-anh-o img { display: block; width: 100%; height: auto; border-radius: 8px; cursor: zoom-in; }
.bs2-anh-nut { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.bs2-anh-nut button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 22px; padding: 0; border: 1px solid #e2e8f0; border-radius: 6px;
    background: #fff; color: #475569; cursor: pointer;
}
.bs2-anh-nut button .material-icons-round { font-size: 16px; }
.bs2-anh-nut button:hover { background: #f1f5f9; }
.bs2-anh-nut button.xoa:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.bs2-anh-dem { align-self: center; font-size: 11px; font-weight: 700; color: #be123c; background: #fff1f2;
    border-radius: 999px; padding: 1px 8px; }