/* ══════════════════════════════════════════════════════════════════════════
   bien-soan.css — TRÌNH BIÊN SOẠN  (31/08/2026)

   Khung ngoài (thanh đỏ, nút đóng, nền) DÙNG LẠI của kho-xay-dung.css:
   `.kxd-wrap` · `.kxd-topbar` · `.kxd-body` · `.kxd-icon-btn`. File này chỉ lo
   phần thân — màn nhập khoá và ba cột. Nhờ vậy Thầy đổi tông màu thanh đỏ một
   chỗ là cả Kho xây dựng lẫn Trình biên soạn đổi theo.

   Mã màu lấy đúng của dự án: đỏ #bb2649, đỏ đậm #991f3a, cam #ff8c00.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   ⚠ THẺ CÓ `display:` RIÊNG THÌ THUỘC TÍNH `hidden` MẤT TÁC DỤNG

   `hidden` chỉ là một luật `display: none` của trình duyệt, hạng thấp nhất —
   bất kỳ luật `display:` nào viết theo LỚP cũng đè lên nó. Các lớp dưới đây
   đều có `display: flex` hoặc `inline-flex` riêng, nên nếu không nói lại
   thì: ba ô nguồn (văn bản · ảnh · .md) hiện cùng một lúc, thanh chọn loại câu
   hiện ngay từ đầu, nút Sao chép hiện khi chưa thiết kế gì.

   Đây đúng là lỗi Thầy báo ngày 31/08. Thêm lớp nào có `display:` riêng mà
   cũng dùng `hidden` thì nhớ thêm tên vào danh sách này.
   ══════════════════════════════════════════════════════════════════════════ */
.bs-o-nguon[hidden],
.bs-nhan-canh[hidden],
.bs-o-1[hidden],
.bs-thanh-duoi[hidden],
.bs-thanh-giua[hidden],
.bs-than3[hidden],
.bs-khu-anh[hidden],
.bs-nut-nho[hidden],
.bs-nut-phu[hidden],
.bs-khu-model[hidden],
.bs-hang-khoa[hidden],
.bs-nut-luu-khoa[hidden],
.bs-nut-sao[hidden] { display: none !important; }

/* Cụm đang chờ mở khoá: thấy được nhưng mờ và không bấm được. Thầy chốt kiểu
   này thay cho ẩn hẳn — nhìn là biết bước sau còn gì, chứ không phải nút tự
   nhiên mọc ra. */
.bs-mo { opacity: .45; pointer-events: none; filter: saturate(.4); }

/* ---------- Nút dùng chung ---------- */
.bs-nut-chinh {
    background: #bb2649; color: #fff; border: none; border-radius: 10px;
    padding: 11px 20px; font-size: 15px; font-weight: 700; cursor: pointer;
    font-family: inherit;              /* ⚠ button KHÔNG tự kế thừa phông */
    transition: background .2s, opacity .2s;
}
.bs-nut-chinh:hover:not(:disabled) { background: #991f3a; }
.bs-nut-chinh:disabled { opacity: .55; cursor: default; }
.bs-nut-cam { background: #ff8c00; }
.bs-nut-cam:hover:not(:disabled) { background: #e07b00; }

.bs-nut-phu {
    background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 9px 15px; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
}
.bs-nut-phu:hover { background: #e2e8f0; }
.bs-nut-phu .material-icons-round { font-size: 18px; }

.bs-nut-nho {
    background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe;
    border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
}
.bs-nut-nho .material-icons-round { font-size: 15px; }

.bs-nhan-nho { font-size: 12px; font-weight: 700; color: #64748b; }
.bs-ghi-chu { font-size: 12px; color: #64748b; line-height: 1.5; margin: 0; }

.bs-chon {
    width: 100%; padding: 9px 11px; border: 1px solid #e2e8f0; border-radius: 9px;
    font-size: 13.5px; font-family: inherit; background: #fff; color: #1e293b;
}

/* ---------- Màn nhập khoá ---------- */
.bs-body-khoa { display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px 60px; }

.bs-hop-khoa {
    background: #fff; border: 1px solid #e6eaef; border-radius: 18px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .08);
    padding: 30px 32px 32px; width: 100%; max-width: 470px;
    display: flex; flex-direction: column; gap: 13px;
}
.bs-khoa-icon {
    width: 46px; height: 46px; border-radius: 13px; background: #fdf2f5;
    display: flex; align-items: center; justify-content: center;
}
.bs-khoa-icon .material-icons-round { color: #bb2649; font-size: 24px; }
.bs-khoa-tieu { margin: 0; font-size: 19px; font-weight: 800; color: #1e293b; }
.bs-khoa-phu { margin: 0; font-size: 13px; color: #64748b; line-height: 1.6; }

.bs-o-khoa {
    width: 100%; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 11px;
    font-size: 14px; font-family: ui-monospace, Consolas, monospace;
    letter-spacing: .5px; background: #f8fafc;
}
.bs-o-khoa:focus { outline: none; border-color: #bb2649; background: #fff; }
.bs-o-khoa:disabled { color: #94a3b8; }

.bs-lien-ket {
    font-size: 13px; color: #2563eb; text-decoration: none; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
}
.bs-lien-ket:hover { text-decoration: underline; }
.bs-lien-ket .material-icons-round { font-size: 15px; }

/* ---------- Lưu khoá trên máy này (31/08/2026 · lần 8) ---------- */
/* Liên kết lấy khoá đứng trái, nút lưu dồn phải trên cùng một hàng.
   `.bs-lien-ket` có `align-self: flex-start` cho khối dọc của hộp khoá; nằm
   trong hàng ngang này thì thuộc tính đó vô hại. */
.bs-hang-khoa {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.bs-nut-luu-khoa {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 5px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid #e2e8f0; background: #f8fafc; color: #475569;
    font-family: inherit; font-size: 12px; font-weight: 700;
    /* Hộp khoá chỉ rộng 470px: nút mà tự xuống dòng bên trong thì rối mắt.
       Hết chỗ thì CẢ NÚT rơi xuống hàng dưới (flex-wrap của .bs-hang-khoa). */
    white-space: nowrap;
    transition: background .18s, border-color .18s, color .18s;
}
.bs-nut-luu-khoa:hover { background: #f1f5f9; border-color: #cbd5e1; }
.bs-nut-luu-khoa .material-icons-round { font-size: 16px; }
/* Đang lưu: xanh lá, cùng bộ màu với dòng "Kết nối thành công" ngay dưới. */
.bs-nut-luu-khoa.bat {
    background: #f0fdf4; border-color: #bbf7d0; color: #15803d;
}
.bs-nut-luu-khoa.bat:hover { background: #dcfce7; border-color: #86efac; }

/* Dòng mách khi máy đã có khoá lưu sẵn. */
.bs-mach-khoa {
    margin: 0; font-size: 12.5px; line-height: 1.55; color: #92400e;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
    padding: 8px 11px;
}

/* Dòng báo kết nối thành công + model đang chọn sẵn. */
.bs-trang-thai {
    margin: 0; font-size: 13px; font-weight: 600; color: #15803d;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
    padding: 9px 12px; line-height: 1.5;
}
.bs-trang-thai[hidden] { display: none !important; }

.bs-khu-model {
    display: flex; flex-direction: column; gap: 9px;
    border-top: 1px solid #f1f5f9; padding-top: 15px; margin-top: 3px;
}

/* ---------- Ba cột ---------- */
/* ⚠ BA CON SỐ CỘNG LẠI ĐÚNG 3 (31/08/2026).
   Trước là ba cột bằng nhau (1fr mỗi cột). Thầy xin cột 1 còn 75%, cột 2 còn
   85%; phần dôi ra dồn hết sang cột 3 vì nay cột đó chứa cả ô sửa từng phần,
   ảnh của câu, lẫn hộp phân loại. Giữ tổng bằng 3 thì bề ngang cả màn không
   đổi, chỉ chia lại. */
.bs-body {
    display: grid;
    grid-template-columns: 0.75fr 0.85fr 1.4fr;
    gap: 14px;
    padding: 16px 18px;
    overflow: hidden;                 /* cùng với min-height:0 của .kxd-body */
    /* Nền hồng rất nhạt cùng tông với thanh đỏ #bb2649, thay cho xám trung
       tính của Kho xây dựng. Chỉ đặt cho màn này nên Kho xây dựng không đổi. */
    background: #fdf2f5;
}

/* Cột 2 KHÔNG phải một thẻ trắng như hai cột kia, mà là chồng ba tầng:
   vùng trắng trên · thanh điều khiển · vùng trắng dưới. */
.bs-cot2 { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.bs-o-trang {
    flex: 1; min-height: 0;
    background: #fff; border: 1px solid #e6eaef; border-radius: 14px;
    display: flex; flex-direction: column; padding: 13px 14px 14px; gap: 9px;
}

/* Thanh điều khiển giữa hai vùng — rộng đúng bằng cột 2. */
.bs-thanh-giua {
    display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e6eaef; border-radius: 12px;
    padding: 8px 12px; flex-shrink: 0;
}
.bs-thanh-giua[hidden] { display: none !important; }

.bs-nut-play {
    margin-left: auto; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: #ff8c00; color: #fff; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, opacity .2s;
}
.bs-nut-play:hover:not(:disabled) { background: #e07b00; }
.bs-nut-play:disabled { opacity: .4; cursor: default; }
.bs-nut-play .material-icons-round { font-size: 22px; }

/* ---------- ★ Giữ nguyên (31/08/2026 · lần 8) ---------- */
/* ⚠ CHỖ DỒN PHẢI CHUYỂN SANG NÚT ★. Trước đây `.bs-nut-play` ôm
   `margin-left: auto` nên nó tự dồn về cuối thanh. Nay ★ đứng NGAY TRƯỚC ▶
   (Thầy chốt: giữa TLN và ▶) nên chỗ dồn phải là ★, còn ▶ đi liền sau nó.
   Hai luật dưới đây hạng (0,2,0) — thắng `.bs-nut-play` hạng (0,1,0) ở trên,
   KHÔNG dùng !important, và luật cũ vẫn còn nguyên đó cho ai đọc lại lịch sử. */
.bs-thanh-giua .bs-nut-sao { margin-left: auto; }
.bs-thanh-giua .bs-nut-play { margin-left: 0; }

.bs-nut-sao {
    flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 1px solid #e2e8f0; background: #fff; color: #94a3b8;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, color .18s, border-color .18s;
}
.bs-nut-sao:hover:not(:disabled) { background: #fffbeb; border-color: #fde68a; color: #d97706; }
.bs-nut-sao:disabled { opacity: .4; cursor: default; }
.bs-nut-sao .material-icons-round { font-size: 21px; }
/* Đang bật: vàng đặc, nhìn từ xa cũng biết lượt này KHÔNG gọi AI. */
.bs-nut-sao.bat {
    background: #fef9c3; border-color: #facc15; color: #ca8a04;
}
.bs-nut-sao.bat:hover:not(:disabled) { background: #fef08a; }

/* Cột 3: đầu cột có hai nút nhỏ, thân cột tự cuộn khi dài. */
.bs-cot-nut { display: flex; gap: 6px; flex-shrink: 0; }
.bs-than3 {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 11px;
}
/* ⚠ `flex-shrink: 0` cho TỪNG con (31/08/2026 — Thầy báo "chèn ảnh vào thì
   phần phân loại nhỏ xíu ở dưới"). Con của một flex cột mặc định co được
   (flex-shrink: 1). Ảnh đồ thị vào làm tổng chiều cao vượt cột, trình duyệt
   bèn BÓP mọi con lại cho vừa thay vì cho cột cuộn — hộp phân loại bị ép
   xuống còn vài chục pixel. Cấm co thì phần thừa rơi vào thanh cuộn của
   `.bs-than3`, đúng như mong đợi. */
.bs-than3 > * { flex-shrink: 0; }
.bs-than3[hidden] { display: none !important; }

/* Ảnh CỦA CÂU HỎI (khác ảnh nguồn ở cột 1). */
.bs-khu-anh { display: flex; flex-direction: column; gap: 6px; }
.bs-anh-cau {
    min-height: 72px; border: 1px dashed #cbd5e1; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 12.5px; padding: 8px; background: #fbfcfe;
}
.bs-anh-cau img { max-width: 100%; max-height: 148px; border-radius: 8px; }
.bs-anh-cau { cursor: pointer; }
.bs-anh-xem { cursor: pointer; }

/* Ô đang chờ Ctrl+V — viền đỏ nét đứt, nền hồng nhạt. Màn có HAI ô ảnh dùng
   vào hai việc khác nhau, nhìn viền là biết ảnh sắp rơi vào ô nào. */
.bs-anh-cau.dang-cho, .bs-anh-xem.dang-cho {
    border-color: #bb2649; border-style: dashed; background: #fdf2f5; color: #bb2649;
}
.bs-anh-cau:focus, .bs-anh-xem:focus { outline: none; }

/* Ghi chú một dòng, nhỏ — thay cho hai câu dài của bản trước. */
.bs-ghi-nho { margin: 0; font-size: 11.5px; color: #94a3b8; line-height: 1.45; }
.bs-cot {
    background: #fff; border: 1px solid #e6eaef; border-radius: 14px;
    display: flex; flex-direction: column; min-width: 0; min-height: 0;
    padding: 13px 14px 14px; gap: 10px;
}
.bs-cot-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.bs-cot-ten { font-size: 15px; font-weight: 800; color: #bb2649; }

.bs-tabs { display: flex; gap: 6px; }
.bs-tab {
    flex: 1; padding: 7px 4px; border: 1px solid #e2e8f0; background: #f8fafc;
    border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #64748b;
    cursor: pointer; font-family: inherit;
}
.bs-tab.active { background: #bb2649; border-color: #bb2649; color: #fff; }

.bs-o-nguon { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; }

/* ⚠ PHÔNG CHỮ CỦA ĐỀ — Times New Roman, 31/08/2026 (Thầy chốt).
   Đề in ra Word cũng Times New Roman 12, nên nhìn trên màn đúng như nhìn trên
   giấy. Times hẹp hơn phông không chân nên cùng một cỡ px trông đã nhỏ hơn;
   hạ thêm một nấc nữa cho cân với phần còn lại của trang.

   ⚠ Ô NGUỒN Ở CỘT 1 CỐ Ý KHÔNG ĐỔI. Đề gốc hay là tiếng Trung, tiếng Nhật —
   Times New Roman không có mặt chữ cho những ký tự đó, trình duyệt phải mượn
   phông khác và mỗi dòng lại cao thấp một kiểu. */
.bs-nhap {
    flex: 1; min-height: 0; width: 100%; resize: none;
    border: 1px solid #e2e8f0; border-radius: 11px; padding: 11px 13px;
    font-size: 14px; line-height: 1.65; font-family: inherit; color: #1e293b;
    background: #fbfcfe;
}
.kxd-wrap .bs-ket-qua {
    flex: 1; min-height: 0; width: 100%; resize: none;
    border: 1px solid #e2e8f0; border-radius: 11px; padding: 11px 13px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px; line-height: 1.6; color: #1e293b;
    background: #fbfcfe;
}
.bs-nhap:focus, .kxd-wrap .bs-ket-qua:focus { outline: none; border-color: #bb2649; background: #fff; }

.bs-anh-xem, .bs-md-xem {
    flex: 1; min-height: 90px; border: 1px dashed #cbd5e1; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; overflow: auto;
    color: #94a3b8; font-size: 13px; text-align: center; padding: 10px; background: #fbfcfe;
}
.bs-anh-xem img { max-width: 100%; max-height: 100%; border-radius: 8px; }

.bs-cot-duoi { display: flex; flex-direction: column; gap: 7px; }
.bs-cot-duoi .bs-nut-chinh { width: 100%; }

/* Thanh chạy — KHÔNG đo phần trăm giả. Bản gốc WisInterpreter cho thanh bò dần
   theo đồng hồ chứ không theo tiến độ thật; ở đây thà chạy vô định còn hơn
   hiện một con số không có thật. */
.bs-thanh-chay { height: 4px; border-radius: 3px; background: #f1f5f9; overflow: hidden; }
.bs-thanh-chay > i { display: block; height: 100%; width: 38%; border-radius: 3px; background: #bb2649;
    animation: bs-bo 1.1s ease-in-out infinite; }
@keyframes bs-bo { 0% { margin-left: -38%; } 100% { margin-left: 100%; } }

/* ---------- Thanh dưới ---------- */
.bs-thanh-duoi {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: #fff; border-top: 1px solid #e6eaef;
    padding: 11px 20px; padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
}
.bs-thanh-nhan { font-size: 14px; font-weight: 700; color: #334155; }
.bs-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; font-weight: 600; color: #334155; }
.bs-radio input { accent-color: #bb2649; width: 16px; height: 16px; cursor: pointer; }
.bs-nut-phai { margin-left: auto; }

/* ---------- Điện thoại ---------- */
@media (max-width: 900px) {
    /* Ba cột trên màn hẹp là cột nào cũng không đọc nổi — cho xếp chồng và
       cuộn dọc, mỗi cột cao vừa một màn tay. */
    .bs-body { grid-template-columns: 1fr; overflow-y: auto; padding: 12px; gap: 12px; }
    .bs-than3 { overflow: visible; }
    .bs-cot { min-height: 320px; }
    .bs-thanh-duoi { gap: 10px; padding: 10px 12px; }
    .bs-nut-phai { margin-left: 0; flex: 1 1 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HỘP PHÂN LOẠI — nằm dưới ô chữ của cột 3  (chặng 2 · 31/08/2026)

   Cột 3 nay có hai phần chồng lên nhau: ô chữ AI trả về (co giãn) và hộp này
   (cao theo nội dung). Hộp có thể dài hơn cột nên tự cuộn riêng, KHÔNG kéo dài
   cả cột — nếu không thì thanh cuộn của cả màn xuất hiện và ba cột lệch nhau.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠ Bản trước hộp tự cuộn riêng (`max-height: 58%; overflow-y: auto`). Bỏ đi
   (31/08/2026): 58% tính theo chiều cao của `.bs-than3` — mà `.bs-than3`
   đang cuộn nên con số ấy vô nghĩa, kết quả là hộp co thành một khe hẹp có
   thanh cuộn riêng bên trong một cột cũng có thanh cuộn. Nay hộp cao đúng
   theo nội dung, phần thừa để CẢ THÂN CỘT cuộn — một thanh cuộn, không phải
   hai. Cả màn vẫn không sinh thanh cuộn vì `.bs-than3` đã chặn rồi. */
.bs-hop {
    display: flex; flex-direction: column; gap: 9px;
    border-top: 1px solid #eef2f7; padding-top: 11px; margin-top: 2px;
}
.bs-hop[hidden] { display: none !important; }
.bs-hop-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bs-hop-ten { font-size: 13.5px; font-weight: 800; color: #334155; }

.bs-hang { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.bs-luoi-pa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bs-o-cay { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-o-cay[hidden] { display: none !important; }

/* ⚠ PHẢI VIẾT `.kxd-wrap .bs-o-chu`, KHÔNG PHẢI `.bs-o-chu` (31/08/2026).
   kho-xay-dung.css có luật `.kxd-wrap input { font-family: inherit }` — hạng
   (0,1,1) vì gồm một lớp và một TÊN THẺ, cao hơn `.bs-o-chu` hạng (0,1,0).
   Vì vậy bản trước: ô Nội dung đề (thẻ <textarea>, không nằm trong luật kia)
   ra Times đúng, còn bốn ô Phương án và ô Đáp án (thẻ <input>) vẫn phông cũ —
   đúng chỗ Thầy báo. Thêm một lớp nữa là hạng (0,2,0), thắng.
   ⚠ Đừng "sửa" bằng !important: luật kia có lý do của nó (nút và ô nhập không
   tự kế thừa phông của trang), chỉ cần nói rõ hơn nó là đủ. */
.kxd-wrap .bs-o-chu {
    width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 9px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 13px; line-height: 1.5; color: #1e293b; background: #fff;
}
.kxd-wrap .bs-o-chu:focus { outline: none; border-color: #bb2649; }
.bs-o-de { min-height: 74px; resize: vertical; line-height: 1.55; }


/* ══════════════════════════════════════════════════════════════════════════
   ĐÁP ÁN = Ô PHƯƠNG ÁN TÔ VÀNG (31/08/2026)
   Không còn ô nhập "Đáp án (A/B/C/D)". Bấm tên phương án thì ô đó vàng lên.
   Vàng #fef9c3 / viền #facc15 — đúng bộ màu `.bs-xt-dung` của bản Xem thử
   và của thẻ câu hỏi bên hai Ngân hàng, nên nhìn ở đâu cũng một màu.
   ⚠ Luật tô ô nhập phải viết `.kxd-wrap .bs-pa.dung .bs-o-chu` (hạng 0,4,0)
     để thắng `.kxd-wrap .bs-o-chu` (0,2,0) ngay phía trên — cùng lý do đã
     ghi ở khối phông Times. Không dùng !important.
   ══════════════════════════════════════════════════════════════════════════ */
.bs-pa { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-pa-nhan {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 11.5px; font-weight: 700; color: #64748b; text-align: left;
}
.bs-pa-nhan:hover { color: #bb2649; }
.bs-pa-cham {
    width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid #cbd5e1; background: #fff; transition: background .15s, border-color .15s;
}
.bs-pa-nhan:hover .bs-pa-cham { border-color: #bb2649; }
.bs-pa.dung .bs-pa-cham { border-color: #eab308; background: #facc15; }
.bs-pa.dung .bs-pa-nhan { color: #a16207; }
.kxd-wrap .bs-pa.dung .bs-o-chu { background: #fef9c3; border-color: #facc15; }
.kxd-wrap .bs-pa.dung .bs-o-chu:focus { border-color: #eab308; }

/* Câu đúng/sai: mỗi ý một cặp nút Đ | S. Đ được chọn thì ô cũng vàng. */
.bs-pa-ds { display: inline-flex; align-items: center; gap: 5px; cursor: default; }
.bs-ds-nut {
    min-width: 22px; padding: 1px 6px; border-radius: 6px; cursor: pointer;
    border: 1px solid #e2e8f0; background: #fff; color: #94a3b8;
    font-size: 11px; font-weight: 800; line-height: 1.5;
}
.bs-ds-nut:hover { border-color: #cbd5e1; color: #64748b; }
.bs-ds-nut.chon[data-ds="Đ"] { background: #facc15; border-color: #eab308; color: #713f12; }
.bs-ds-nut.chon[data-ds="S"] { background: #e2e8f0; border-color: #cbd5e1; color: #475569; }

.bs-pa-mach { margin: -2px 0 0; font-size: 11px; color: #94a3b8; }

.bs-tach { display: flex; flex-direction: column; gap: 8px; }

.bs-canh {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px;
    padding: 8px 11px; font-size: 12.5px; color: #92400e; line-height: 1.55;
}
.bs-canh[hidden] { display: none !important; }
.bs-canh-nho { color: #a16207; margin-top: 3px; }

.bs-nut-luu {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: #16a34a;
}
.bs-nut-luu:hover:not(:disabled) { background: #15803d; }
.bs-nut-luu .material-icons-round { font-size: 19px; }

@media (max-width: 900px) {
    /* .bs-hop không còn max-height/overflow riêng nên ở đây hết việc gỡ. */
    .bs-luoi-pa { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   POPUP CHỮ NHẬT — "Xem thử" nay, "Lịch sử tạo câu" ở chặng sau.
   z-index 1200: cao hơn thanh đỏ (30) và cao hơn bảng chọn của UISelect.
   ══════════════════════════════════════════════════════════════════════════ */
.bs-nen-popup {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.bs-popup {
    background: #fff; border-radius: 16px; width: 100%; max-width: 760px;
    max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.bs-popup-dau {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #bb2649; color: #fff; padding: 12px 18px;
    font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.bs-popup-x {
    background: rgba(255, 255, 255, .18); border: none; color: #fff; cursor: pointer;
    width: 30px; height: 30px; border-radius: 8px; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
}
.bs-popup-x:hover { background: rgba(255, 255, 255, .32); }
.bs-popup-than { padding: 18px; overflow-y: auto; background: #f6f8fb; }

/* Đáp án đúng của câu trắc nghiệm: tô nền vàng như file Word xuất ra. */
.bs-xt-dung { background: #fef9c3; border-radius: 8px; }
.bs-xt-tln { padding: 10px 13px; background: #fff; border-radius: 10px; font-size: 15px; }
.bs-xt-tln span { background: #fef9c3; padding: 1px 7px; border-radius: 6px; font-weight: 700; }

@media (max-width: 900px) {
    .bs-cot2 { min-height: 640px; }
    .bs-popup-than { padding: 12px; }
}

/* ---------- Popup Lịch sử tạo câu ---------- */
.bs-popup-ls .bs-popup { max-width: 900px; }
.bs-ls-cho { display: flex; justify-content: center; padding: 40px 0; }
.bs-ls-trong { text-align: center; color: #64748b; font-size: 14px; padding: 34px 0; }
.bs-ls-ds { display: flex; flex-direction: column; gap: 8px; }

.bs-ls-muc { display: flex; align-items: stretch; gap: 6px; }
.bs-ls-mo {
    flex: 1; min-width: 0; text-align: left; cursor: pointer; font-family: inherit;
    background: #fff; border: 1px solid #e6eaef; border-radius: 11px;
    padding: 10px 13px; display: flex; flex-direction: column; gap: 4px;
    transition: border-color .2s, box-shadow .2s;
}
.bs-ls-mo:hover { border-color: #f2c2ce; box-shadow: 0 6px 16px rgba(187, 38, 73, .12); }
.bs-ls-hang1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bs-ls-loai { font-size: 12px; font-weight: 800; color: #bb2649; }
.bs-ls-daluu { font-size: 11px; font-weight: 700; color: #15803d; background: #f0fdf4;
    border: 1px solid #bbf7d0; border-radius: 6px; padding: 1px 7px; }
.bs-ls-chua { font-size: 11px; font-weight: 700; color: #a16207; background: #fffbeb;
    border: 1px solid #fde68a; border-radius: 6px; padding: 1px 7px; }
.bs-ls-luc { margin-left: auto; font-size: 11.5px; color: #94a3b8; }
/* Tóm tắt gói đúng hai dòng — mục nào cũng cao bằng nhau, danh sách nhìn đều. */
.bs-ls-tom {
    font-size: 13px; color: #334155; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.bs-ls-xoa {
    flex-shrink: 0; width: 38px; border: 1px solid #e6eaef; border-radius: 11px;
    background: #fff; color: #94a3b8; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
}
.bs-ls-xoa:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.bs-ls-xoa .material-icons-round { font-size: 18px; }

/* ══════════════════════════════════════════════════════════════════════════
   BẢNG PHÂN LOẠI — NHÃN BÊN TRÁI, Ô CHỌN BÊN PHẢI  (31/08/2026, Thầy chốt)

       Phân loại vào ngân hàng          ← dòng tiêu đề riêng
       Chọn NH │ [ Ngân hàng Bài tập ▾ ..................... ]
       Khối    │ [ … ]  │ Chương │ [ … ]
       Bài     │ [ … ]  │ Dạng   │ [ … ]
       Mức độ  │ ○ NB ○ TH ○ VD ○ VDC
       Tag sưu tầm │ [ … ]

   Bản trước xếp nhãn NẰM TRÊN ô chọn, mỗi cặp chiếm hai hàng — cao gấp đôi
   mà cột 3 thì đã phải chứa cả ô sửa đề lẫn ảnh. Kiểu nhãn-bên-trái đọc theo
   hàng ngang, gọn hơn hẳn.

   Hai nút tròn Bài tập / Lý thuyết đổi thành MỘT Ô CHỌN (31/08 lần 2): nó nằm
   cùng một cột với bốn ô chọn cây bên dưới nên cả khối thẳng một mạch.

   ══════════════════════════════════════════════════════════════════════════ */
.bs-hop-tieu {
    font-size: 13.5px; font-weight: 800; color: #334155; margin-bottom: 2px;
}

/* ⚠ CỘT NHÃN RỘNG CỐ ĐỊNH, NHÃN CĂN TRÁI (31/08/2026, Thầy chốt lần 2).
   Bản trước để cột nhãn `auto` và căn PHẢI: mỗi nhãn một độ dài nên mép trái
   lởm chởm, cả khối trông như bị dồn vào giữa. Nay cột 1 và 3 rộng bằng nhau
   và ghim cứng, nhãn căn trái ⇒ hai mép thẳng, và hai ô chọn trên cùng một
   hàng luôn bằng nhau.

   Lưới trải hết bề ngang của hộp, mà nút "Lưu vào ngân hàng" cũng vậy — nên
   mép phải của ô chọn ngoài cùng trùng đúng mép nút. Đó là lý do KHÔNG đặt
   max-width cho lưới này. */
.bs-hop-luoi {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 62px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
}
.bs-nhan-canh {
    font-size: 12.5px; font-weight: 700; color: #64748b;
    white-space: nowrap; text-align: left;
}
.bs-nhan-canh[hidden] { display: none !important; }

/* ⚠ GIỮ CHỖ TRONG LƯỚI. Ẩn cấp Dạng (Ngân hàng Lý thuyết chỉ có ba cấp)
   mà dùng `display: none` thì hai ô biến mất khỏi lưới, hàng dưới dồn lên lấp
   chỗ — cụm "Mức độ" nhảy lên nằm cạnh ô Bài. `visibility` vẫn chiếm ô. */
.bs-giu-cho { visibility: hidden; }

.bs-o-1 { min-width: 0; }
.bs-o-1[hidden] { display: none !important; }
/* Hàng chỉ có một ô thì trải hết ba cột còn lại. */
.bs-o-3 { grid-column: 2 / -1; min-width: 0; }

@media (max-width: 900px) {
    /* Màn hẹp: quay về nhãn nằm trên, hai cột. Ép nhãn-bên-trái trên điện
       thoại thì ô chọn hẹp tới mức không đọc nổi tên chương. */
    .bs-hop-luoi { grid-template-columns: 1fr; gap: 4px; }
    .bs-nhan-canh { margin-top: 5px; }
    .bs-o-3 { grid-column: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MÀN CHỌN CHẾ ĐỘ — hai ô chữ nhật giữa màn  (31/08/2026, lần 5)

   Ô CHỮ NHẬT chứ không vuông như hai ô của Kho xây dựng: mỗi ô ở đây có thêm
   một dòng mô tả, ô vuông thì chữ bị bó lại thành bốn năm dòng ngắn.
   ══════════════════════════════════════════════════════════════════════════ */
.bs-body-cd {
    display: flex; align-items: flex-start; justify-content: center;
    padding: 48px 24px 60px; background: #fdf2f5;
}
.bs-luoi-cd {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px; width: 100%; max-width: 720px;
}
.bs-the-cd {
    background: #fff; border: 1px solid #e6eaef; border-radius: 16px;
    padding: 24px 22px; cursor: pointer; text-align: left; font-family: inherit;
    display: flex; flex-direction: column; gap: 8px; color: #1e293b;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.bs-the-cd:hover {
    transform: translateY(-3px); border-color: #f2c2ce;
    box-shadow: 0 14px 30px rgba(187, 38, 73, .16);
}
.bs-the-cd-icon { font-size: 30px !important; color: #bb2649; line-height: 1; }
.bs-the-cd-ten { font-size: 16px; font-weight: 800; }
.bs-the-cd-mo { font-size: 12.5px; color: #64748b; line-height: 1.55; }

@media (max-width: 700px) {
    .bs-luoi-cd { grid-template-columns: 1fr; }
    .bs-body-cd { padding: 24px 14px 40px; }
}
.bs-ls-cd { font-size: 11px; font-weight: 700; color: #475569; background: #f1f5f9;
    border: 1px solid #e2e8f0; border-radius: 6px; padding: 1px 7px; }