/* =====================================================================================
   GIAO DIỆN TRỢ GIẢNG DÙNG ĐIỆN THOẠI — tab "Hôm nay" (js/hom-nay.js), tab "Kiểm tra bài" của cô Nhàn
   (js/kiem-tra-bai.js), và điểm danh dạng thẻ trên màn hình hẹp. Theo bản mẫu đã chốt 25/09/2026:
   chữ thường (không in hoa), vàng = nút chính, đỏ chỉ cho lỗi / xoá, xanh lá = xong, nút cao ≥ 44px.
   ===================================================================================== */
.tg {
  --tg-nen: #0A1120; --tg-the: #16223D; --tg-the2: #111B31; --tg-vien: #22325A; --tg-o: #0D1628; --tg-vien-o: #2A3C66;
  --tg-chu: #EDEFF7; --tg-phu: #AEB8D6; --tg-vang: #F2B705; --tg-xanh: #3DD68C; --tg-cam: #F59E42; --tg-do: #FF8A8A; --tg-lam: #7FB0FF;
  color: var(--tg-chu); font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: 15px; max-width: 560px; margin: 0 auto;
}
.tg * { text-transform: none; letter-spacing: normal; }
.tg h2, .tg .tg-tieu-de { font-family: 'Chakra Petch', 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 18px; margin: 18px 0 10px; }
.tg .tg-phu { color: var(--tg-phu); font-size: 13px; }
.tg .tg-the { background: var(--tg-the); border: 1px solid var(--tg-vien); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.tg .tg-the.nhe { background: var(--tg-the2); }
.tg .tg-the.canh-bao { border-color: #8A3A45; }
.tg .tg-hang { display: flex; align-items: center; gap: 10px; }
.tg .tg-hang > .gian { flex-grow: 1; min-width: 0; }
.tg .tg-ten { font-weight: 700; }
.tg .tg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: #1E2B4A; color: var(--tg-phu); }
.tg .tg-chip.xanh { background: rgba(61,214,140,.14); color: var(--tg-xanh); }
.tg .tg-chip.cam { background: rgba(245,158,66,.16); color: var(--tg-cam); }
.tg .tg-chip.vang { background: rgba(242,183,5,.14); color: var(--tg-vang); }
.tg .tg-chip.do { background: rgba(255,107,107,.14); color: var(--tg-do); }
.tg .tg-chip.lam { background: rgba(127,176,255,.14); color: var(--tg-lam); }
.tg button, .tg .tg-nut { font-family: inherit; }
.tg .tg-nut { min-height: 48px; border-radius: 12px; border: 1px solid var(--tg-vien-o); background: var(--tg-the2); color: var(--tg-chu);
  font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; text-decoration: none; cursor: pointer; }
.tg .tg-nut:disabled { opacity: .5; cursor: default; }
.tg .tg-nut.chinh { background: var(--tg-vang); border-color: var(--tg-vang); color: #0A1120; font-weight: 700; }
.tg .tg-nut.xanh { background: rgba(61,214,140,.12); border-color: #2E9E68; color: var(--tg-xanh); }
.tg .tg-nut.xanh.on { background: rgba(61,214,140,.22); }
.tg .tg-nut.vien-lam { border-color: #3B6FD8; }
.tg .tg-nut.nho { min-height: 40px; font-size: 13px; padding: 0 12px; }
.tg .tg-nut.day-du { width: 100%; }
.tg .tg-luoi2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tg .tg-luoi3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* Ô ngày giờ (iPhone vẽ rộng hơn cột) → điện thoại xếp dọc */
.tg input[type="datetime-local"].tg-o { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
.tg .tg-o { height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; border: 1px solid var(--tg-vien-o); background: var(--tg-o); color: var(--tg-chu); font-family: inherit; font-size: 15px; width: 100%; }
.tg select.tg-o { height: 48px; font-weight: 600; }
.tg label.tg-nhan { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tg-phu); }
.tg .tg-o-so { width: 84px; height: 48px; border-radius: 12px; background: var(--tg-o); border: 1px solid var(--tg-vien-o); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.tg .tg-o-so small { font-size: 14px; color: var(--tg-phu); font-weight: 500; margin-left: 4px; }
.tg .tg-nut-vuong { width: 48px; min-width: 48px; padding: 0; font-size: 22px; }
.tg .tg-tien-do { height: 8px; border-radius: 4px; background: #1E2B4A; overflow: hidden; }
.tg .tg-tien-do > div { height: 8px; border-radius: 4px; background: var(--tg-vang); }
.tg .tg-o-viec { min-height: 72px; box-sizing: border-box; padding: 10px; border-radius: 14px; background: var(--tg-the2); border: 1px solid var(--tg-vien);
  color: var(--tg-chu); text-decoration: none; display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; }
.tg .tg-o-viec.on { background: #1A2848; border: 2px solid var(--tg-vang); }
.tg .tg-o-viec b { font-size: 20px; }
.tg .tg-o-viec span { font-size: 12px; color: var(--tg-phu); }
.tg .tg-bao { padding: 10px 12px; border-radius: 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.tg .tg-bao.do { background: rgba(255,107,107,.10); color: var(--tg-do); }
.tg .tg-bao.nhe { background: var(--tg-the2); color: var(--tg-phu); font-size: 13px; }
.tg .tg-day { position: sticky; bottom: 0; z-index: 5; margin: 12px -12px 0; padding: 12px 12px 16px; background: #0D1628; border-top: 1px solid #1E2B4A; display: flex; flex-direction: column; gap: 6px; }
.tg .tg-trong { text-align: center; padding: 28px 12px; color: var(--tg-phu); }
.tg .tg-muc-viec { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--tg-the2); border: 1px solid var(--tg-vien);
  color: var(--tg-chu); text-decoration: none; margin-bottom: 8px; width: 100%; text-align: left; cursor: pointer; }
.tg .tg-muc-viec .bieu-tuong { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tg svg { flex-shrink: 0; }

/* ───────────── Kế hoạch buổi (js/ke-hoach-buoi.js): mốc giờ → việc có ô đánh dấu ───────────── */
.tg .khb-moc { margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--tg-vien); display: flex; flex-direction: column; gap: 8px; }
.tg .khb-moc.nay { border-left-color: var(--tg-vang); }
.tg .khb-moc-dau { flex-wrap: wrap; margin-bottom: 2px; }
.tg .khb-moc-dau h2 { font-size: 17px; }
.tg .khb-viec { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; background: var(--tg-the); border: 1px solid var(--tg-vien); }
.tg .khb-viec.xong { background: var(--tg-the2); }
.tg .khb-viec.xong .khb-chu { color: var(--tg-phu); text-decoration: line-through; text-decoration-color: rgba(174,184,214,.5); }
.tg .khb-chu { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.tg .khb-tick { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; border: 2px solid var(--tg-vien-o); background: var(--tg-o); color: var(--tg-phu);
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.tg span.khb-tick { cursor: default; border-style: dashed; }
.tg .khb-tick.on { border: 2px solid #2E9E68; background: rgba(61,214,140,.18); color: var(--tg-xanh); }
.tg .khb-tick:focus-visible, .tg .khb-loc:focus-visible { outline: 2px solid var(--tg-vang); outline-offset: 2px; }
.tg .khb-loc { border: 0; min-height: 36px; cursor: pointer; }
.tg .khb-ds { display: flex; flex-wrap: wrap; gap: 6px; }
.tg .khb-nhom { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--tg-the2); border: 1px solid var(--tg-vien); }
.tg .khb-tin summary { cursor: pointer; }
.tg .khb-tin textarea { height: auto; padding: 10px 12px; margin-top: 6px; font-size: 13px; line-height: 1.5; resize: vertical; }
.tg .khb-viec .tg-nut.nho { align-self: flex-start; }

/* ───────────── Điểm danh: nút trạng thái to + dạng thẻ trên màn hình hẹp ───────────── */
.att-seg { display: none; }
/* Miễn BTVN: từng em (cột BTVN) + cả lớp (trên bảng) */
.att-mien { display: inline-flex; align-items: center; gap: 5px; margin: 0; white-space: nowrap; cursor: pointer; font-size: 12px; }
.att-mien .form-check-input { margin: 0; cursor: pointer; }
.att-mien-ca { font-weight: 600; font-size: 13px; }
.att-mien[hidden] { display: none; }
#attList tr.att-row.kt-mien .att-kt-mien-o { color: #5fae70; font-weight: 600; }
#attList tr.att-row.btvn-mien .att-bt { opacity: .45; }
#attList tr.att-row.btvn-mien .att-mien { color: #5fae70; font-weight: 600; }
#attList th .att-mien-th { margin-left: 6px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: normal; vertical-align: middle; color: inherit !important; }
/* Có mặt mà chưa có Test/BTVN → ô lý do bắt buộc (cột Ghi chú) */
.att-lydo { margin-top: 4px; min-width: 170px; }
.att-gc:empty + .att-lydo { margin-top: 0; }
.att-lydo-nhan { color: #AEB8D6; font-size: 11px; margin-bottom: 2px; white-space: nowrap; }
.att-lydo.can .att-lydo-nhan { color: #FF8A8A; font-weight: 700; }
.att-lydo.can .att-lydo-in { border-color: #FF6B6B; box-shadow: 0 0 0 2px rgba(255,107,107,.25); }
#attStatusFilterRow .pill.att-pill-thieu { border-color: #FF6B6B !important; color: #FF8A8A !important; }
/* Nút lưu điểm danh: vàng = nút chính (đỏ chỉ dành cho lỗi / xoá) */
#attFooter #attSaveBtn { background: #F2B705 !important; border-color: #F2B705 !important; color: #0A1120 !important;
  font-weight: 700; text-transform: none; letter-spacing: normal; clip-path: none; border-radius: 14px; min-height: 48px; }
@media (max-width: 767.98px) {
  #attList .table-responsive { overflow: visible; }
  #attList table, #attList tbody { display: block; width: 100%; }
  #attList thead { display: none; }
  #attList tr.att-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 12px; margin-bottom: 10px;
    border: 1px solid #22325A; border-radius: 14px; background: #16223D; }
  #attList tr.att-row > td { display: block; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
  /* cột theo lớp (03/10/2026 bỏ cột Tình trạng — không dùng nth-child nữa) */
  #attList tr.att-row > td.att-ten { order: 1; font-weight: 700; font-size: 15px; align-self: center; }
  #attList tr.att-row > td.att-ma { order: 2; align-self: center; font-size: 12px; }
  #attList tr.att-row > td.att-lop { display: none; }
  #attList tr.att-row > td.att-dd { order: 4; grid-column: 1 / -1; }
  #attList tr.att-row > td.att-td-test { order: 5; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  #attList tr.att-row > td.att-td-test::before { content: 'Điểm test'; color: #AEB8D6; font-size: 14px; }
  #attList tr.att-row > td.att-td-btvn { order: 6; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; }
  #attList tr.att-row > td.att-td-btvn:not([style*="none"]) { display: flex; }
  #attList tr.att-row > td.att-td-btvn::before { content: 'BTVN (số bài làm)'; color: #AEB8D6; font-size: 14px; }
  #attList tr.att-row > td.att-ghichu { order: 7; grid-column: 1 / -1; }
  #attList .att-lydo-in { height: 44px; font-size: 16px; }
  #attList .att-lydo-nhan { font-size: 13px; white-space: normal; }
  #attList tr.att-row > td.att-thu { order: 8; grid-column: 1 / -1; }
  #attList tr.att-row > td.att-thu.trong { display: none; }
  #attList tr.att-row > td.att-thu::before { content: 'Thu bài phạt'; display: block; color: #AEB8D6; font-size: 13px; margin-bottom: 2px; }
  #attList .att-kt, #attList .att-bt { width: 110px !important; height: 44px; font-size: 17px; font-weight: 700; text-align: center; }
  #attList .att-thu-sel { height: 44px; }
  #attList .att-mien, .att-mien-ca { font-size: 15px; }
  #attList .att-mien .form-check-input, .att-mien-ca .form-check-input { width: 22px; height: 22px; }
  #attList tr.att-row[data-vang="1"] > td.att-td-test { opacity: .4; }
  #attList .att-diemdanh { display: none; }
  #attList .att-seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  #attList .att-seg button { height: 44px; padding: 0 2px; border-radius: 10px; border: 1px solid #22325A; background: #111B31; color: #AEB8D6;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.1; text-transform: none; letter-spacing: normal; }
  #attList .att-seg button:disabled { opacity: .55; }
  #attList .att-seg button.on[data-v="Có mặt"] { border-color: #3DD68C; background: rgba(61,214,140,.16); color: #3DD68C; }
  #attList .att-seg button.on[data-v="Đi muộn"] { border-color: #7FB0FF; background: rgba(127,176,255,.16); color: #7FB0FF; }
  #attList .att-seg button.on[data-v="Vắng có phép"] { border-color: #F59E42; background: rgba(245,158,66,.16); color: #F59E42; }
  #attList .att-seg button.on[data-v="Vắng không phép"] { border-color: #FF8A8A; background: rgba(255,107,107,.14); color: #FF8A8A; }
  #attList .att-seg button.on[data-v="Học online"] { border-color: #B79CFF; background: rgba(183,156,255,.14); color: #B79CFF; }
}

/* ───── Chấm trắc nghiệm bằng phiếu tô (js/cham-tn.js) — rộng hơn các tab trợ giảng vì có bảng điểm và ảnh phiếu ───── */
.tg.ctn { max-width: 1100px; }
.tg .ctn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Danh sách bài kiểm tra: lọc lớp + nhóm theo ngày */
.tg button.tg-chip { border: 1px solid var(--tg-vien-o); cursor: pointer; font-family: inherit; min-height: 36px; }
.tg .ctn-luoi-nho { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.tg .ctn-o-nho { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tg-phu); }
.tg .ctn-dap-an, .tg .ctn-o-nho input { font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.tg .ctn-tha { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px dashed var(--tg-vien-o); border-radius: 16px;
  padding: 22px 14px; text-align: center; cursor: pointer; }
.tg .ctn-tha:hover, .tg .ctn-tha.keo { border-color: var(--tg-vang); background: rgba(242,183,5,.06); }
.tg .ctn-chon { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--tg-vien-o);
  background: var(--tg-o); color: var(--tg-chu); cursor: pointer; font-size: 14px; }
.tg .ctn-chon.on { border-color: var(--tg-vang); background: rgba(242,183,5,.08); }
.tg .ctn-chon input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--tg-vang); }
/* Học sinh làm bài online (js/lam-bai-tn.js) — nút to, dễ bấm trên điện thoại */
.tg.ltn h2 { font-size: 16px; margin: 20px 0 8px; }
.tg .ltn-thanh { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 -4px;
  background: #0D1628; border: 1px solid var(--tg-vien); border-radius: 14px; }
.tg .ltn-thanh .gian { flex: 1; min-width: 0; }
.tg .ltn-gio { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg .ltn-gio.gap { color: var(--tg-do); }
.tg .ltn-de { width: 100%; height: 70vh; border: 1px solid var(--tg-vien); border-radius: 12px; background: #fff; }
.tg .ltn-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; }
.tg .ltn-cau { display: flex; align-items: center; gap: 6px; }
.tg .ltn-so { min-width: 28px; font-weight: 700; color: var(--tg-phu); text-align: right; }
.tg .ltn-o { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 22px; border: 1px solid var(--tg-vien-o); background: var(--tg-o);
  color: var(--tg-chu); font: inherit; font-weight: 700; cursor: pointer; }
.tg .ltn-o.on { background: var(--tg-vang); border-color: var(--tg-vang); color: #0A1120; }
.tg .ltn-o:focus-visible { outline: 2px solid var(--tg-lam); outline-offset: 2px; }
.tg .ltn-ds { gap: 6px; }
.tg .ltn-luoi3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.tg .ltn-tln { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tg-phu); }
.tg .ltn-tln input { font-size: 18px; font-weight: 700; text-align: center; letter-spacing: .05em; }
.tg .ltn-diem { font-size: 16px; }
.tg .ltn-diem b { color: var(--tg-vang); font-size: 20px; }
.tg .ltn-ma-de { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--tg-vang); background: rgba(242,183,5,.08); font-size: 16px; }
.tg .ltn-ma-de b { color: var(--tg-vang); font-size: 22px; letter-spacing: .06em; }
/* Đáp án & lỗi sai sau khi công bố */
.tg.ltn [hidden] { display: none !important; }
.tg .ltn-kq { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--tg-vien); font-size: 14px; }
.tg .ltn-kq .gian { flex: 1; min-width: 0; }
.tg .ltn-kq.dung { background: rgba(61,214,140,.07); }
.tg .ltn-kq.sai { background: rgba(255,107,107,.1); border-color: rgba(255,107,107,.45); }
.tg .tg-the .ltn-kq { margin-top: 6px; }
.tg .ltn-dau { font-weight: 800; font-size: 16px; }
.tg .ltn-dau.dung { color: var(--tg-xanh); }
.tg .ltn-dau.sai { color: var(--tg-do); }
.tg .ltn-chi-sai { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; cursor: pointer; }
.tg .ltn-chi-sai input { width: 20px; height: 20px; accent-color: var(--tg-vang); }
/* Ô tích "Cần thầy sửa" cuối mỗi câu — bài luyện tập (20/10/2026) */
.tg .ltn-can-sua { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; min-height: 36px; border: 1.5px dashed var(--tg-vien);
  border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer; user-select: none; }
.tg .ltn-can-sua input { width: 18px; height: 18px; margin: 0; accent-color: #d0142f; }
.tg .ltn-can-sua.on { border-style: solid; border-color: #d0142f; background: #fff0f1; color: #a10e24; }
.tg .ltn-kq:has(.ltn-can-sua) { flex-wrap: wrap; }
.tg .ltn-kq .ltn-can-sua { margin-top: 0; flex-basis: 100%; justify-content: flex-start; }
.tg .ltn-can-sua-ghi { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: #fff7e0; border: 1px solid #f0d58a; font-size: 13.5px; line-height: 1.5; color: #5a3d00; }
.tg .ltn-can-sua-ghi span:not(:empty) { display: block; margin-top: 4px; font-weight: 800; color: #a10e24; }
/* Đề từng câu (05/10/2026): mỗi câu 1 thẻ — đề bài (công thức, hình), ô chọn đáp án ngay bên dưới; xem lại thì tô đáp án đúng / em chọn sai */
.tg .ltn-ch { background: var(--tg-the); border: 1px solid var(--tg-vien); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.tg .ltn-ch.sai { border-color: var(--tg-do); }
.tg .ltn-ch-nd { position: relative; line-height: 1.65; overflow-wrap: anywhere; }
.tg .ltn-ch-so { color: var(--tg-vang); margin-right: 2px; }
.tg .ltn-ch-nd > .ltn-dau, .tg .ltn-ch-nd > .ltn-ch-diem { float: right; margin-left: 8px; }
.tg .ltn-ch .katex { font-size: 1.12em; }
.tg .ltn-hinh { display: block; max-width: 100%; height: auto; margin: 8px auto; border-radius: 8px; background: #fff; }
.tg .ltn-ch-lc { display: grid; gap: 8px; margin-top: 12px; }
.tg .ltn-pa.xem { flex-wrap: wrap; }
.tg .ltn-pa.xem > span { flex-basis: 60%; }
.tg .ltn-pa { display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box; width: 100%; height: auto; min-height: 48px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--tg-vien-o); background: var(--tg-o); color: var(--tg-chu); font: inherit; font-weight: 500; text-align: left; line-height: 1.55; }
.tg .ltn-pa > b { flex: 0 0 28px; height: 28px; border-radius: 50%; border: 1px solid var(--tg-vien-o); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.tg .ltn-pa > span { flex: 1; min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.tg .ltn-pa .ltn-hinh { margin: 6px 0; max-height: 220px; width: auto; }
.tg button.ltn-pa { cursor: pointer; }
.tg button.ltn-pa.on { border-width: 2px; padding: 9px 11px; }
.tg button.ltn-pa.on > b { background: #0A1120; border-color: #0A1120; color: #fff; }
.tg .ltn-pa.xem.dung { border-color: var(--tg-xanh); background: rgba(61,214,140,.12); }
.tg .ltn-pa.xem.dung > b { background: var(--tg-xanh); border-color: var(--tg-xanh); color: #fff; }
.tg .ltn-pa.xem.sai { border-color: var(--tg-do); background: rgba(255,107,107,.12); }
.tg .ltn-nhan { flex: none; align-self: center; font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tg .ltn-nhan.dung { color: var(--tg-xanh); border: 1px solid var(--tg-xanh); }
.tg .ltn-nhan.sai { color: var(--tg-do); border: 1px solid var(--tg-do); }
.tg .ltn-y { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--tg-vien); }
.tg .ltn-ch-nd + .ltn-y { margin-top: 10px; }
.tg .ltn-y-nd { flex: 1; min-width: 0; line-height: 1.55; overflow-wrap: anywhere; }
.tg .ltn-y-nut { display: flex; gap: 6px; flex: none; }
.tg .ltn-y-nut .ltn-o { min-width: 60px; }
.tg .ltn-y.xem { flex-wrap: wrap; }
.tg .ltn-y.xem .ltn-y-nd { flex-basis: 100%; }
.tg .ltn-y-kq { font-size: 14px; margin-top: 8px; }
.tg .ltn-y.xem .ltn-y-kq { margin-top: 0; }
.tg .ltn-y.xem.sai .ltn-y-kq { color: var(--tg-do); }
.tg .ltn-ch-tln { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--tg-phu); }
.tg .ltn-ch-tln input { width: 130px; font-size: 18px; font-weight: 700; text-align: center; letter-spacing: .05em; }
.tg .ltn-ch-bo { margin-top: 8px; }
.tg .ltn-ch-lg { margin-top: 12px; border-top: 1px dashed var(--tg-vien); padding-top: 10px; }
.tg .ltn-ch-lg > summary { cursor: pointer; font-weight: 700; color: var(--tg-lam); min-height: 32px; }
.tg .ltn-ch-lg > div { margin-top: 8px; line-height: 1.65; overflow-wrap: anywhere; }
/* thanh giờ dính trên đầu: điện thoại chỉ giữ 1 dòng tên bài để còn chỗ đọc câu hỏi */
@media (max-width: 600px) { .tg .ltn-thanh .tg-ten { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } }
@media (max-width: 420px) { .tg .ltn-y { flex-wrap: wrap; } .tg .ltn-y-nd { flex-basis: 100%; } .tg .ltn-y-nut { margin-left: auto; } }
/* Chấm bằng camera: toàn màn hình, khung ngắm A4 */
.tg .ctn-cam { position: fixed; inset: 0; z-index: 1070; background: #000; display: flex; align-items: center; justify-content: center; }
.tg .ctn-cam video { width: 100%; height: 100%; object-fit: contain; }
.tg .ctn-cam-khung { position: absolute; height: 86%; aspect-ratio: 210 / 297; max-width: 92%; border: 3px dashed rgba(242,183,5,.85); border-radius: 8px; pointer-events: none; }
.tg .ctn-cam.chop::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.55); pointer-events: none; }
.tg .ctn-cam-tren { position: absolute; top: 0; left: 0; right: 0; padding: 12px 16px; background: linear-gradient(rgba(0,0,0,.75), transparent); text-align: center; font-size: 16px; font-weight: 600; }
.tg .ctn-cam-tren .xong { color: var(--tg-xanh); }
.tg .ctn-cam-tren .canh-bao { color: var(--tg-vang); }
.tg .ctn-cam-duoi { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 10px; justify-content: center; padding: 16px; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.tg .ctn-o-tl { width: 72px; height: 36px; padding: 0 6px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.tg .ctn-x { border: 0; background: transparent; color: inherit; font-size: 15px; padding: 0 0 0 4px; cursor: pointer; min-height: 0; }
.tg .ctn-tl-khung { max-width: 820px; margin: 0 auto; background: var(--tg-the); border: 1px solid var(--tg-vien); border-radius: 14px; padding: 14px; }
.tg .ctn-tl-luoi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tg .ctn-tl { display: inline-block; padding: 4px 8px; border-radius: 8px; font-size: 13px; font-weight: 600; margin: 2px 4px 2px 0; font-variant-numeric: tabular-nums; }
.tg .ctn-tl.dung { background: rgba(61,214,140,.14); color: var(--tg-xanh); }
.tg .ctn-tl.sai { background: rgba(255,107,107,.14); color: var(--tg-do); }
.tg .ctn-cuon { overflow-x: auto; }
.tg .ctn-tk-hang { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tg .ctn-tk { width: 30px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--tg-phu); }
.tg .ctn-tk b { font-size: 11px; font-variant-numeric: tabular-nums; }
.tg .ctn-tk-cot { width: 14px; height: 44px; border-radius: 4px; background: #1E2B4A; display: flex; align-items: flex-end; overflow: hidden; }
.tg .ctn-tk-cot > div { width: 100%; border-radius: 4px; }
/* Khung xem & sửa 1 phiếu (phủ kín màn hình) */
.tg .ctn-xem { position: fixed; inset: 0; z-index: 1060; background: rgba(5,9,18,.94); display: flex; }
.tg .ctn-xem-anh { flex: 1 1 auto; overflow: auto; padding: 12px; }
.tg .ctn-anh-khung { position: relative; width: 100%; max-width: 820px; margin: 0 auto; background: #fff; }
.tg .ctn-xem-anh.to .ctn-anh-khung { max-width: none; width: 170%; }
.tg .ctn-anh-khung img { display: block; width: 100%; height: 100%; }
.tg .ctn-lop { position: absolute; inset: 0; width: 100%; height: 100%; }
.tg .ctn-lop circle { fill: transparent; stroke: transparent; stroke-width: 2.5; vector-effect: non-scaling-stroke; pointer-events: all; cursor: pointer; }
.tg .ctn-lop circle:hover { stroke: #3B6FD8; }
.tg .ctn-lop circle.chon.dung { stroke: #12A150; fill: rgba(18,161,80,.22); }
.tg .ctn-lop circle.chon.sai { stroke: #D92D2D; fill: rgba(217,45,45,.2); }
.tg .ctn-lop circle.chon.md { stroke: #2F62D0; fill: rgba(47,98,208,.2); }
.tg .ctn-lop circle.dap-an { stroke: #12A150; stroke-dasharray: 4 3; }
.tg .ctn-lop circle.xem { stroke: #E0A800; stroke-width: 3.5; }
.tg .ctn-xem-ben { flex: 0 0 340px; background: var(--tg-the); border-left: 1px solid var(--tg-vien); padding: 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; }
.tg .ctn-diem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tg .ctn-diem > div { background: var(--tg-the2); border: 1px solid var(--tg-vien); border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; }
.tg .ctn-diem span { font-size: 12px; color: var(--tg-phu); }
.tg .ctn-diem b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tg .ctn-diem small { font-size: 12px; color: var(--tg-phu); }
.tg .ctn-diem .tong { border-color: var(--tg-vang); }
.tg .ctn-diem .tong b { color: var(--tg-vang); font-size: 22px; }
.tg .ctn-mau { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid; vertical-align: -1px; margin-left: 4px; }
.tg .ctn-mau.dung { border-color: #12A150; background: rgba(18,161,80,.3); }
.tg .ctn-mau.sai { border-color: #D92D2D; background: rgba(217,45,45,.3); }
.tg .ctn-mau.dap-an { border-color: #12A150; border-style: dashed; }
@media (max-width: 800px) {
  .tg .ctn-xem { flex-direction: column; }
  .tg .ctn-xem-ben { flex: 0 0 auto; max-height: 48vh; border-left: 0; border-top: 1px solid var(--tg-vien); }
  .tg .ctn-xem-anh.to .ctn-anh-khung { width: 250%; }
}

/* ───────────── Tổng quan: học sinh mới chờ duyệt + thiếu thông tin (js/hs-moi.js) ───────────── */
#tqHsMoiCard .hsm-dong { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px dashed rgba(128,128,128,.35); }
#tqHsMoiCard .hsm-dong:last-of-type { border-bottom: 0; }
#tqHsMoiCard .hsm-ten { flex: 1 1 260px; min-width: 0; }
#tqHsMoiCard .hsm-nut { display: flex; gap: 6px; flex-wrap: wrap; }

/* ───────────── Ngân hàng câu hỏi: tìm câu trùng (js/cau-trung.js) ───────────── */
#ctrModal .ctr-cau { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 8px; border: 1px solid rgba(128,128,128,.3); margin-bottom: 6px; cursor: pointer; }
#ctrModal .ctr-cau.giu { border-color: #e0b04e; background: rgba(224,176,78,.08); }
#ctrModal .ctr-cau:has(input:checked) { border-color: #d97b6c; background: rgba(217,123,108,.08); }
#ctrModal .ctr-de img, #ctrModal .ctr-pa img { max-height: 160px; }

/* ───────────── Danh sách học sinh: báo cáo số lượng (app.js veBaoCaoSoLuongHs_) ───────────── */
.hs-bao-cao { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(128,128,128,.35); }
.hs-bao-cao .hs-bc-tong { font-size: 15px; }
.hs-bao-cao .hs-bc-tong b { font-size: 20px; }
.hs-bao-cao .hs-bc-dong { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.hs-bao-cao .hs-bc-nhan { opacity: .75; margin-right: 2px; }
.hs-bao-cao .hs-bc-chip { border: 1px solid rgba(128,128,128,.45); background: transparent; color: inherit; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; }
.hs-bao-cao .hs-bc-chip.on { border-color: #e0b04e; background: rgba(224,176,78,.18); }

/* ───────────── Ngân hàng câu hỏi: nhãn nguồn đẹp (app.js chHtmlNguon_, js/nhan-nguon.js) ───────────── */
.ch-nguon { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1.5px solid; vertical-align: middle; }
.ch-nguon.to { font-size: 13px; padding: 2px 11px; }
.ch-nguon-bo     { color: #8a1c1c; background: #fdecec; border-color: #d9a3a3; }
.ch-nguon-so     { color: #1f4f96; background: #eaf1fc; border-color: #9fb9e3; }
.ch-nguon-chuyen { color: #6b2fa0; background: #f4ecfb; border-color: #c7a8e4; }
.ch-nguon-truong { color: #1b6e45; background: #e8f6ee; border-color: #9ccfb2; }
.ch-nguon-hsg    { color: #9a5b00; background: #fff4de; border-color: #e9c27a; }
.ch-nguon-vao10  { color: #0f6b73; background: #e3f6f7; border-color: #92cfd4; }
.ch-nguon-sach   { color: #4b4f58; background: #f1f2f4; border-color: #c3c7cf; }
.ch-nguon-khac   { color: #5d554b; background: #f6f2ea; border-color: #cfc5b3; }

/* Cây Ngân hàng câu hỏi: dạng do AI tự thêm (app.js veCayCh_) */
.ch-ai-moi { margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #6b2fa0; background: #f4ecfb; border: 1px solid #c7a8e4; cursor: pointer; white-space: nowrap; }

/* ───────────── Chụp ảnh chấm công cá nhân (js/anh-cham-cong.js): toàn màn hình, camera trước ───────────── */
body.acc-mo { overflow: hidden; }
.acc-lop { position: fixed; inset: 0; z-index: 2000; background: #000; color: #fff; display: flex; flex-direction: column; }
.acc-tren { padding: 10px 16px calc(8px) ; padding-top: max(10px, env(safe-area-inset-top)); font-size: 14px; line-height: 1.4; background: rgba(0,0,0,.6); }
.acc-tren b { font-size: 16px; color: #f5b82e; }
#accViTri { font-size: 13px; color: #e8e8e8; }
.acc-khung { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.acc-khung video, .acc-khung img { max-width: 100%; max-height: 100%; object-fit: contain; }
.acc-khung video.acc-guong { transform: scaleX(-1); }
.acc-loi { margin: 0 16px 8px; padding: 8px 12px; border-radius: 8px; background: #5b1d1d; color: #ffd9d9; font-size: 13.5px; }
.acc-duoi { display: flex; gap: 10px; justify-content: center; align-items: center; padding: 12px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); background: rgba(0,0,0,.6); }
.acc-duoi .btn { min-height: 46px; }
.acc-duoi .acc-chup, .acc-duoi [data-act="dung"] { flex: 1; max-width: 260px; font-weight: 700; font-size: 17px; }

/* Ngân hàng câu hỏi: nhánh ảo "🔁 Câu tương tự" dưới dạng + nhãn trên thẻ câu (app.js veCayCh_ / theCh_, 01/10/2026) */
.ch-nut.ch-tuong-tu .ch-ten { font-style: italic; color: #1f6f8b; }
.ch-nut.ch-tuong-tu.dang-chon .ch-ten { color: inherit; }
.ch-tag.ch-tag-tuong-tu, .mv .ch-tag.ch-tag-tuong-tu { background: #e3f6f7; color: #0f6b73; border: 1.5px solid #92cfd4; }
/* Đánh dấu khi rà phân dạng nâng cao: đề lỗi · chưa chắc dạng · ngoài chương trình */
.ch-tag.ch-tag-loi, .mv .ch-tag.ch-tag-loi { background: #fdecec; color: #a32020; border: 1.5px solid #e9a3a3; }
.ch-tag.ch-tag-ra, .mv .ch-tag.ch-tag-ra { background: #fff6e0; color: #8a5a00; border: 1.5px solid #f0cf7d; }
.ch-de-loi { border: 1.5px solid #e9a3a3; background: #fdecec; color: #7d1a1a; border-radius: 8px; padding: .45rem .6rem; }
/* ID nhánh trên cây Ngân hàng câu hỏi — để ghi thẻ {#ID M2} trong file Word (01/10/2026) */
.ch-id { margin-left: 5px; font-size: 10px; font-weight: 600; opacity: .55; font-family: ui-monospace, Consolas, monospace; }
/* Bảng số liệu trong đề (dòng "ô | ô | ô"): viền đen rõ, hàng/cột tiêu đề nền đỏ — giống file PDF; bảng rộng cuộn ngang */
.tg .ltn-bang-cuon { overflow-x: auto; margin: 8px 0; -webkit-overflow-scrolling: touch; }
.tg .ltn-bang { border-collapse: collapse; margin: 0 auto; background: #fff; color: #000; font-size: 1rem; line-height: 1.45; }
.tg .ltn-bang th, .tg .ltn-bang td { border: 1.5px solid #15110f; padding: 6px 12px; text-align: center; vertical-align: middle; min-width: 44px; background: #fff; color: #000; }
.tg .ltn-bang th { background: #C00000; color: #fff; font-weight: 800; }
.tg .ltn-bang .katex { font-size: 1.05em; }
.tg .ltn-hinh { cursor: zoom-in; }
.ltn-phong-to { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto; padding: 12px; cursor: zoom-out; touch-action: pinch-zoom; }
.ltn-phong-to img { max-width: 100%; max-height: 88vh; background: #fff; border-radius: 8px; }
.ltn-phong-to span { margin-top: 10px; color: #fff; font-size: .85rem; opacity: .8; }

/* Dấu * bắt buộc ở form bài kiểm tra (06/11/2026) */
.ctn-bat-buoc{ color:#b3261e; font-weight:900; margin-left:2px; }

/* Giao diện HS/PH đỏ – vàng. Phạm vi riêng để giữ giao diện quản lý.
   Chuyển động chỉ dùng transform / opacity (mượt cả trên điện thoại); js/hoc-sinh-giao-dien.js gắn lớp + biến. */
#studentResultScreen {
  --hs-do:#b5091c; --hs-vang:#ffce42; --hs-muc:#211b18;
  --hs-em:cubic-bezier(.16,1,.3,1);       /* ra nhanh, hãm êm */
  --hs-nay:cubic-bezier(.34,1.56,.64,1);  /* nảy nhẹ */
  position:relative; isolation:isolate; padding:24px clamp(12px,3vw,48px) 48px !important;
  color:var(--hs-muc); background:#780b13 !important; overflow:hidden; overflow:clip;   /* clip (không phải hidden) để thanh đầu dính được */
  font-family:'Be Vietnam Pro',system-ui,sans-serif;
}
/* Nền: lớp đỏ trôi chậm + vệt tốc độ lướt qua lại */
#studentResultScreen::before {
  content:''; position:fixed; z-index:-2; inset:-8%; pointer-events:none;
  background:radial-gradient(ellipse at 18% 35%,#ed2d25aa,transparent 45%),radial-gradient(circle,#ffce4255 1px,transparent 1.6px) 0 0/12px 12px,linear-gradient(125deg,#4d050b,#b40b19 50%,#57070d);
  animation:hs-nen-troi 22s ease-in-out infinite alternate;
}
#studentResultScreen::after {
  content:''; position:fixed; z-index:-1; inset:-10% -20%; pointer-events:none;
  background:repeating-linear-gradient(145deg,transparent 0 100px,#ff9c2425 101px 103px,transparent 104px 205px),repeating-linear-gradient(145deg,transparent 0 260px,#ffd45a1c 261px 262px,transparent 263px 420px);
  animation:hs-vet-toc 16s ease-in-out infinite alternate;
}
@keyframes hs-nen-troi { from{transform:translate3d(-1%,-1%,0) scale(1.02)} to{transform:translate3d(1%,1%,0) scale(1.06)} }
@keyframes hs-vet-toc { from{transform:translate3d(-70px,0,0)} to{transform:translate3d(70px,0,0)} }
#studentResultScreen > .mv-man {
  max-width:1360px; margin:0 auto; border:9px solid #211c1a; border-radius:24px;
  box-shadow:0 0 0 1px #b79768,0 28px 80px #24010499; overflow:hidden; overflow:clip;   /* clip: thanh đầu vẫn dính được khi cuộn */
  background:#fff9ec radial-gradient(#c4a46b20 .8px,transparent 1px) 0 0/8px 8px;
  animation:hs-man-vao .9s var(--hs-em) backwards;
}
@keyframes hs-man-vao { from{opacity:0;transform:translate3d(0,24px,0) scale(.985)} to{opacity:1;transform:none} }

/* ---------- Thanh đỏ trên cùng: thương hiệu · mục · hồ sơ ---------- */
#studentResultScreen .hs-thanh-dau {
  position:sticky; top:0; z-index:40; display:flex; flex-wrap:nowrap; align-items:center; gap:14px 18px; padding:16px 26px; border-bottom:2px solid #251511;
  background:repeating-linear-gradient(145deg,transparent 0 52px,#ffb93218 53px 55px,transparent 56px 100px),linear-gradient(115deg,#64030d,#bd0816 55%,#780510);
  transition:box-shadow .5s var(--hs-em);
}
#studentResultScreen .hs-thanh-dau.hs-da-cuon { box-shadow:0 12px 30px #2a020870; }
#studentResultScreen .hs-thanh-dau > * { animation:hs-dau-vao .8s var(--hs-em) backwards; }
#studentResultScreen .hs-thanh-dau > :nth-child(2) { animation-delay:.06s; }
#studentResultScreen .hs-thanh-dau > :nth-child(3) { animation-delay:.12s; }
#studentResultScreen .hs-thanh-dau > :nth-child(n+4) { animation-delay:.18s; }
@keyframes hs-dau-vao { from{opacity:0;transform:translate3d(0,-14px,0)} to{opacity:1;transform:none} }
#studentResultScreen .mv-logo-anh { flex:none; width:60px; height:60px; padding:3px; background:#251711; border:2px solid #fbd455; box-shadow:0 0 0 3px #3a170e; transition:transform .6s var(--hs-nay); }
#studentResultScreen .mv-logo-anh:hover { transform:rotate(-8deg) scale(1.06); }
#studentResultScreen .mv-logo-anh img { width:100%; height:100%; object-fit:contain; }
#studentResultScreen .hs-thuong-hieu { flex:none; }
#studentResultScreen .mv-tieu-de { font-size:clamp(24px,2.4vw,33px); letter-spacing:.025em; font-style:italic; white-space:nowrap; }
/* Khẩu hiệu "Dạy Bằng Cả Cái Tâm" dưới tên Tập đoàn: chữ vàng, hai vạch vàng hai bên */
#studentResultScreen .hs-thuong-hieu { text-align:center; }
#studentResultScreen .mv-phu { display:flex; align-items:center; justify-content:center; gap:8px; color:#ffd75a; font-size:12.5px; font-weight:700; font-style:italic; letter-spacing:.09em; }
#studentResultScreen .mv-phu::before,#studentResultScreen .mv-phu::after { content:''; height:1.5px; width:18px; background:linear-gradient(90deg,transparent,#ffd75a); }
#studentResultScreen .mv-phu::after { transform:scaleX(-1); }
.hs-thanh-menu { flex:1; min-width:0; display:flex; justify-content:center; }
.hs-ho-so { margin-left:auto; display:flex; align-items:center; gap:10px; color:#fff; flex:none; }
.hs-ho-so b { display:block; font-size:13px; white-space:nowrap; }
.hs-ho-so small { display:block; font-size:10px; color:#ffe2cb; margin-top:4px; }
.hs-avatar { display:grid; place-items:center; width:42px; height:42px; border:2px solid #ffedb2; border-radius:50%; background:#ffe3a8; color:#860818; font-weight:800; font-size:20px; box-shadow:0 0 0 3px #ffd75a33; }
#studentResultScreen #hsLogoutBtn,#studentResultScreen #hsDoiMkBtn { flex:none; margin-left:0 !important; padding:8px 12px; color:#fff; border:1px solid #ffffff6b !important; background:#67050b44; box-shadow:none; border-radius:8px; font-family:inherit; font-size:12px; }
#studentResultScreen #hsLogoutBtn:hover,#studentResultScreen #hsDoiMkBtn:hover { background:#ffffff1f; transform:translateY(-1px); }
/* Vạch tiến độ cuộn trang (vàng, chạy dưới thanh đầu) */
.hs-tien-do { position:absolute; left:0; right:0; bottom:-2px; height:3px; transform-origin:left; transform:scaleX(var(--hs-tien-do,0)); background:linear-gradient(90deg,#ffc22e,#fff1a8); box-shadow:0 0 10px #ffcf4a88; opacity:0; transition:opacity .4s ease; pointer-events:none; animation:none !important; }
.hs-da-cuon .hs-tien-do { opacity:1; }

.hs-noi-dung { max-width:1200px; padding:0 24px 28px; margin:auto; }
/* Thanh mục khi chưa được chuyển lên thanh đỏ (không có JS) */
#studentResultScreen #kqTabNav { margin:0 -24px 18px !important; padding:0 24px; gap:4px; display:flex; border-bottom:1px solid #ddcdb6; background:#fff5e1; }
#studentResultScreen #kqTabNav .nav-item { margin:0; }
#studentResultScreen #kqTabNav .nav-link {
  padding:16px 15px !important; display:flex; gap:8px; align-items:center; font-family:inherit !important;
  font-size:13px !important; font-weight:700; color:#5c4033; border:0 !important; border-bottom:3px solid transparent !important;
  border-radius:0 !important; box-shadow:none !important; background:transparent !important; transform:none !important;
}
#studentResultScreen #kqTabNav .nav-link.active { color:#af071a; border-bottom-color:#af071a !important; }
#studentResultScreen #kqTabNav .kq-huy { width:22px; height:22px; min-width:22px; background:none; color:inherit; box-shadow:none; border:0; font-size:17px; transition:transform .5s var(--hs-nay); }
#studentResultScreen #kqTabNav .kq-huy::before,#studentResultScreen #kqTabNav .kq-huy::after { display:none; }
/* Thanh mục trên thanh đỏ + vạch vàng trượt */
#studentResultScreen .hs-thanh-menu #kqTabNav { position:relative; margin:0 !important; padding:0 4px; gap:2px; flex-wrap:nowrap; border:0; background:transparent; overflow-x:auto; scrollbar-width:none; }
#studentResultScreen .hs-thanh-menu #kqTabNav::-webkit-scrollbar { display:none; }
#studentResultScreen .hs-thanh-menu #kqTabNav .nav-link {
  position:relative; z-index:1; padding:12px 13px !important; white-space:nowrap; font-size:14.5px !important; font-weight:700 !important; color:#ffeccf !important;
  text-transform:none; letter-spacing:0 !important; line-height:1.2 !important;
  border:0 !important; border-radius:9px !important; transition:color .35s ease,background-color .35s ease;
}
#studentResultScreen .hs-thanh-menu #kqTabNav .nav-link .kq-huy { font-size:16px; width:20px; min-width:20px; height:20px; text-shadow:none !important; }
#studentResultScreen .hs-thanh-menu #kqTabNav .nav-link:hover { color:#fff !important; background:#ffffff14 !important; }
#studentResultScreen .hs-thanh-menu #kqTabNav .nav-link:hover .kq-huy { transform:translateY(-2px) scale(1.12); }
#studentResultScreen .hs-thanh-menu #kqTabNav .nav-link.active { color:#ffd75a !important; background:transparent !important; }
#studentResultScreen .hs-thanh-menu #kqTabNav .nav-link.active .kq-huy { transform:none; }
#studentResultScreen .hs-thanh-menu #kqTabNav.co-truot .nav-link { border-bottom-color:transparent !important; }
.hs-menu-gach { position:absolute; left:0; top:0; z-index:0; width:var(--w,0); height:3px; border-radius:3px; pointer-events:none;
  transform:translate3d(var(--x,0),calc(var(--y,0px) + var(--h,0px) - 4px),0); background:linear-gradient(90deg,#ffe78a,#ffc22e); box-shadow:0 0 12px #ffcf4aaa;
  transition:transform .55s var(--hs-em),width .55s var(--hs-em); }
#studentResultScreen .hs-thanh-menu .kq-live-cham { margin-left:2px; }

/* ---------- Bài giảng / Bài kiểm tra / Lớp live: khối vàng trượt ---------- */
#studentResultScreen .bt-muc-nav { position:relative; max-width:820px; margin:0 auto 20px; padding:4px; display:flex; gap:0; background:#fff; border:1px solid #c9bca7; border-radius:12px; box-shadow:0 2px 3px #35220c0a; }
#studentResultScreen .bt-muc-nav .bt-muc { position:relative; z-index:1; flex:1; justify-content:center; gap:9px; padding:10px 12px; min-height:46px; font-family:inherit; font-size:14px; font-weight:800; color:#211b18; background:transparent; border:1px solid transparent; border-radius:8px; box-shadow:none; transform:none; }
#studentResultScreen .bt-muc.active { background:linear-gradient(#ffe788,#ffc52e); border-color:#a57b20; box-shadow:inset 0 1px 0 #fff,0 2px 0 #211b18; }
#studentResultScreen .bt-muc-nav.co-truot .bt-muc.active { background:transparent; border-color:transparent; box-shadow:none; }
.hs-muc-truot { position:absolute; left:0; top:0; z-index:0; width:var(--w,0); height:var(--h,0); border-radius:8px; pointer-events:none;
  transform:translate3d(var(--x,0),var(--y,0),0); background:linear-gradient(#ffe788,#ffc52e); border:1px solid #a57b20;
  box-shadow:inset 0 1px 0 #fff,0 2px 0 #211b18,0 8px 18px #ffb40030; transition:transform .6s var(--hs-em),width .6s var(--hs-em); }
#studentResultScreen .bt-muc .kq-huy { width:25px; height:25px; background:none; border:0; box-shadow:none; color:#211b18; font-size:20px; }
#studentResultScreen .bt-muc .kq-huy::before,#studentResultScreen .bt-muc .kq-huy::after { display:none; }

/* ---------- Banner lớp live ---------- */
#studentResultScreen .kq-live-phong { margin:0 0 24px; border:2px solid #3e1610; border-radius:16px; box-shadow:0 10px 30px #30190922; background:#8f0913; overflow:hidden; }
#studentResultScreen .kq-live-bia { isolation:isolate; aspect-ratio:auto; min-height:380px; border:0; overflow:hidden; background:radial-gradient(ellipse at 72% 45%,#ffae2966,transparent 42%),repeating-linear-gradient(150deg,transparent 0 70px,#ffca3340 71px 73px,transparent 74px 140px),radial-gradient(#ffdb5a22 1px,transparent 1.5px) 0 0/7px 7px,linear-gradient(110deg,#720007,#c61716 60%,#770310); }
#studentResultScreen .kq-live-bia > img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; object-position:center;
  transform:scale(1.06) translate3d(calc(var(--px,0) * -14px),calc(var(--py,0) * -10px),0); transition:transform 1s var(--hs-em); }
#studentResultScreen .kq-live-bia::after { inset:0; background:linear-gradient(90deg,#4f000ada 0%,#67000699 40%,#65000510 76%); }
/* Vệt sáng quét ngang định kỳ */
#studentResultScreen .kq-live-bia::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(105deg,transparent 38%,#fff6d02e 48%,#ffffff40 50%,transparent 62%); transform:translate3d(-100%,0,0); animation:hs-quet 8s var(--hs-em) 1.4s infinite; }
@keyframes hs-quet { 0%{transform:translate3d(-100%,0,0)} 28%,100%{transform:translate3d(100%,0,0)} }
/* Hình bên phải: tia xoay + logo nổi + sét + đồ thị + công thức trôi */
.hs-hero-nghe { position:absolute; inset:0 0 0 46%; pointer-events:none; transform:translate3d(calc(var(--px,0) * -26px),calc(var(--py,0) * -18px),0); transition:transform 1s var(--hs-em); }
.hs-hero-tia { position:absolute; left:50%; top:48%; width:150%; aspect-ratio:1; translate:-50% -50%; background:repeating-conic-gradient(#ffd65a26 0 6deg,transparent 6deg 18deg); -webkit-mask:radial-gradient(circle,#000 0 18%,transparent 60%); mask:radial-gradient(circle,#000 0 18%,transparent 60%); animation:hs-xoay 70s linear infinite; }
@keyframes hs-xoay { to{transform:rotate(360deg)} }
.hs-hero-huy { position:absolute; left:46%; top:46%; width:min(180px,36%); aspect-ratio:1; translate:-50% -50%; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle,#ffe58a66,transparent 68%); animation:hs-noi 6s ease-in-out infinite; }
.hs-hero-huy img { width:86%; filter:drop-shadow(0 12px 22px #3a0005aa) drop-shadow(0 0 22px #ffcf4a66); }
@keyframes hs-noi { 50%{transform:translate3d(0,-10px,0) rotate(-2deg)} }
.hs-set { position:absolute; fill:#ffd23f; filter:drop-shadow(0 0 10px #ffc83a); animation:hs-chop 5s linear infinite; }
.hs-set.s1 { right:7%; top:7%; width:46px; rotate:14deg; }
.hs-set.s2 { left:4%; bottom:16%; width:34px; rotate:-20deg; animation-delay:-2.3s; }
@keyframes hs-chop { 0%,44%,60%,100%{opacity:.9} 46%{opacity:.15} 48%{opacity:1} 50%{opacity:.3} 53%{opacity:1} }
.hs-hero-do-thi { position:absolute; right:6%; top:9%; width:28%; fill:none; stroke:#ffe3a0; stroke-width:2.4; stroke-linecap:round; opacity:.8; }
.hs-hero-do-thi .truc { stroke-width:1.2; opacity:.55; }
.hs-hero-do-thi .parabol { stroke-dasharray:420; stroke-dashoffset:420; animation:hs-ve 2.4s var(--hs-em) .7s forwards; }
@keyframes hs-ve { to{stroke-dashoffset:0} }
.hs-cong-thuc { position:absolute; white-space:nowrap; font:italic 500 clamp(13px,1.6vw,22px)/1 'Be Vietnam Pro',sans-serif; color:#ffe7a6; opacity:.78; text-shadow:0 2px 0 #4c0408; animation:hs-troi 9s ease-in-out infinite alternate; }
.hs-cong-thuc.c1 { left:2%; top:10%; }
.hs-cong-thuc.c2 { right:3%; bottom:38%; animation-duration:11s; animation-delay:-3s; }
.hs-cong-thuc.c3 { left:8%; bottom:9%; font-size:clamp(12px,1.3vw,18px); opacity:.6; animation-duration:13s; animation-delay:-6s; }
@keyframes hs-troi { from{transform:translate3d(0,0,0)} to{transform:translate3d(10px,-14px,0)} }
.hs-hero-nam { position:absolute; right:5%; bottom:11%; padding:6px 16px 4px; text-align:center; color:#2a1006; background:linear-gradient(#ffe582,#ffbf2a); border:2px solid #2a1006; box-shadow:4px 4px 0 #3c0a05; transform:rotate(-6deg) skewX(-8deg); }
.hs-hero-nam b { display:block; font:400 clamp(18px,2vw,28px)/1 'Bangers',sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.hs-hero-nam small { display:block; font-weight:800; font-size:12px; letter-spacing:.08em; }
/* Đốm lửa bay lên */
.hs-lua { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.hs-lua i { position:absolute; left:var(--l); bottom:-12px; width:var(--s,3px); height:var(--s,3px); border-radius:50%; background:#ffd36a; box-shadow:0 0 8px 2px #ffb3307a; opacity:0; animation:hs-lua var(--t,7s) linear var(--d,0s) infinite; }
@keyframes hs-lua { 0%{opacity:0;transform:translate3d(0,0,0) scale(1)} 12%{opacity:.95} 100%{opacity:0;transform:translate3d(36px,-400px,0) scale(.3)} }
/* Chữ banner: tem nảy vào, khẩu hiệu hiện từng chữ, rồi tên bài / giờ / nút */
#studentResultScreen .kq-live-bia-tem { z-index:2; top:24px; left:32px; font-family:inherit; font-size:12px; font-weight:800; letter-spacing:.06em; padding:6px 12px; color:#fff6df; background:#8b030eb3; border:1px solid #ffc637; border-radius:6px; box-shadow:3px 3px 0 #250908; transform:skew(-5deg); animation:hs-tem-vao .7s var(--hs-nay) .1s backwards; }
@keyframes hs-tem-vao { from{opacity:0;transform:skew(-5deg) scale(.6)} to{opacity:1;transform:skew(-5deg) scale(1)} }
#studentResultScreen .kq-live-bia-chu { z-index:2; left:32px; right:28px; bottom:30px; max-width:56%; transform:translate3d(calc(var(--px,0) * 10px),calc(var(--py,0) * 6px),0); transition:transform 1s var(--hs-em); }
.hs-hero-khau-hieu { font-family:'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; font-size:clamp(32px,4.4vw,62px); line-height:1.08; color:#ffda4b; text-transform:uppercase; letter-spacing:.025em; text-shadow:2px 3px 0 #2b0803,4px 5px 0 #3c0a05; margin-bottom:8px; }
.hs-hero-khau-hieu > span { display:inline-block; animation:hs-chu-vao .9s var(--hs-em) backwards; animation-delay:calc(.2s + var(--i,0) * .09s); }
@keyframes hs-chu-vao { from{opacity:0;transform:translate3d(-.3em,.55em,0) skewX(-10deg)} to{opacity:1;transform:none} }
#studentResultScreen .kq-live-bia-ten { font-family:'Be Vietnam Pro',sans-serif; font-style:italic; font-weight:800; font-size:clamp(22px,2.8vw,37px); letter-spacing:-.035em; text-shadow:2px 3px 0 #33130a; animation:hs-len .8s var(--hs-em) .5s backwards; }
#studentResultScreen .kq-live-bia-gio { margin-top:14px; font-size:14px; font-weight:700; animation:hs-len .8s var(--hs-em) .6s backwards; }
.hs-hero-hanh-dong { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:24px; animation:hs-len .8s var(--hs-em) .7s backwards; }
@keyframes hs-len { from{opacity:0;transform:translate3d(0,16px,0)} to{opacity:1;transform:none} }
/* Nút vàng: nâng + nảy khi rê, vệt sáng lướt, nhấn lún; đang live thì toả nhịp */
#studentResultScreen .kq-bg-xem { position:relative; isolation:isolate; overflow:hidden; padding:10px 20px; border:2px solid #29160c; border-radius:9px; background:linear-gradient(#ffe582,#ffc42e); color:#19130c; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:25px; font-style:italic; text-transform:uppercase; box-shadow:0 4px 0 #3c0c08,inset 0 0 0 1px #fff2b8; }
#studentResultScreen .kq-bg-xem::after { content:''; position:absolute; z-index:-1; inset:-2px; background:linear-gradient(110deg,transparent 30%,#ffffffb0 50%,transparent 70%); transform:translate3d(-130%,0,0); transition:transform .9s var(--hs-em); pointer-events:none; }
#studentResultScreen .kq-bg-xem i { background:#fff9e8; color:#19130c; border-color:#19130c; width:30px; height:30px; transition:transform .5s var(--hs-nay); }
#studentResultScreen .kq-live-khoa { font-family:inherit; font-size:14px; font-style:normal; text-transform:none; background:#fff0c9; color:#574020; }
#studentResultScreen .kq-live-phong.dang .kq-live-bia a.kq-bg-xem { animation:hs-nhip 2.2s ease-out infinite; }
@keyframes hs-nhip { 0%{box-shadow:0 4px 0 #3c0c08,inset 0 0 0 1px #fff2b8,0 0 0 0 #ffd24daa} 70%,100%{box-shadow:0 4px 0 #3c0c08,inset 0 0 0 1px #fff2b8,0 0 0 16px #ffd24d00} }
.hs-hero-trang-thai { font-size:12px; color:#fff5dc; display:flex; gap:8px; align-items:center; padding:10px 12px; border:1px solid #ffb630aa; border-radius:8px; background:#75000a99; }
.hs-hero-trang-thai i { width:7px; height:7px; border-radius:50%; background:#5bea86; animation:hs-cham 1.8s ease-out infinite; }
@keyframes hs-cham { 0%{box-shadow:0 0 0 0 #5bea86cc} 80%,100%{box-shadow:0 0 0 9px #5bea8600} }
#studentResultScreen .kq-live-duoi { padding:12px 24px; background:#fff5df; border-top:1px solid #f7bd4a; }
#studentResultScreen .kq-live-dem { font-family:inherit; font-size:13px; letter-spacing:0; font-weight:700; color:#9c1020; }
.hs-xem-lich { border:0; background:transparent; font-size:12px; font-weight:700; color:#584032; padding:6px; }
.hs-xem-lich:hover .fa-arrow-down { transform:translateY(3px); }
.hs-xem-lich .fa-arrow-down { transition:transform .4s var(--hs-nay); }

/* ---------- Banner riêng từng khối (anh/banner-live-<khối>.webp, js/lop-live.js) ----------
   Ảnh có sẵn chữ + ảnh thầy → không đè chữ lên ảnh; thông tin buổi học ở dải đỏ ngay dưới. */
#studentResultScreen .kq-live-phong.co-banner { background:#5a040b; }
.hs-banner { position:relative; isolation:isolate; overflow:hidden; aspect-ratio:3 / 1; background:#7a0610; animation:hs-banner-vao 1.2s var(--hs-em) backwards; }
@keyframes hs-banner-vao { from{clip-path:inset(0 100% 0 0);opacity:.4} to{clip-path:inset(0 0 0 0);opacity:1} }
.hs-banner-truot { position:absolute; inset:0; animation:hs-banner-tho 18s ease-in-out 1.2s infinite alternate; }
@keyframes hs-banner-tho { from{transform:scale(1)} to{transform:scale(1.045)} }
.hs-banner-anh { display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.03) translate3d(calc(var(--px,0) * -12px),calc(var(--py,0) * -7px),0); transition:transform 1s var(--hs-em); }
/* vệt sáng quét chéo định kỳ */
.hs-banner::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(105deg,transparent 38%,#fff6d026 48%,#ffffff3d 50%,transparent 62%); transform:translate3d(-100%,0,0); animation:hs-quet 9s var(--hs-em) 2s infinite; }
.hs-banner .hs-lua { z-index:2; }
.hs-banner-thanh { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; padding:18px 28px; color:#fff;
  background:repeating-linear-gradient(145deg,transparent 0 60px,#ffb93214 61px 63px,transparent 64px 120px),linear-gradient(115deg,#4f030a,#a10a17 55%,#6c040e); border-top:2px solid #ffc637; }
.hs-banner-thanh::before { content:''; position:absolute; left:0; right:0; top:-2px; height:2px; background:linear-gradient(90deg,transparent,#fff6c8,transparent); transform:translate3d(-100%,0,0); animation:hs-quet 6s linear 1.5s infinite; }
.hs-banner-chu { min-width:0; flex:1 1 320px; text-shadow:0 2px 4px #0006; }
#studentResultScreen .hs-banner-thanh .kq-live-bia-tem { position:static; display:inline-flex; margin-bottom:10px; }
#studentResultScreen .hs-banner-thanh .kq-live-bia-ten { animation-delay:.35s; }
#studentResultScreen .hs-banner-thanh .kq-live-bia-gio { margin-top:6px; animation-delay:.45s; text-transform:capitalize; }
#studentResultScreen .hs-banner-thanh .hs-hero-hanh-dong { margin-top:0; animation-delay:.55s; }
#studentResultScreen .kq-live-phong.dang .hs-banner-thanh a.kq-bg-xem { animation:hs-nhip 2.2s ease-out infinite; }

/* ---------- Tiêu đề mục ---------- */
.hs-muc-dau { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:28px 0 14px; }
#studentResultScreen .hs-muc-dau h3 { position:relative; isolation:isolate; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; font-size:34px; text-transform:uppercase; color:#b20b18; letter-spacing:.025em; margin:0; text-shadow:1px 1px #fff,2px 2px #271911; }
.hs-muc-dau h3::after { content:''; position:absolute; z-index:-1; height:9px; left:3px; right:-40px; bottom:2px; background:linear-gradient(90deg,#ffd854,#ffd85400); transform:skew(-35deg); transform-origin:left; }
.hs-muc-dau.hs-hien-dan h3::after { transform:skew(-35deg) scaleX(0); transition:transform 1s var(--hs-em) .25s; }
.hs-muc-dau.hs-hien-dan.hs-da-hien h3::after { transform:skew(-35deg) scaleX(1); }
.hs-muc-dau > span { font-size:12px; color:#89725e; }

/* ---------- Lịch học sắp tới ---------- */
.hs-lich { scroll-margin-top:110px; }
.hs-lich-luoi { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.hs-lich-the { position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:16px; padding:18px 16px; background:linear-gradient(130deg,#fffdf5,#fff8e9); border:1px solid #d9c9b0; border-radius:14px; box-shadow:0 3px 5px #4e301414; }
.hs-lich-the.hs-lich-dang { border-color:#e69b34; box-shadow:0 0 0 1px #f0a53a55,0 8px 22px #e8901f26; }
.hs-lich-the.hs-lich-dang::before { content:''; position:absolute; inset:0; border-radius:inherit; border:2px solid #f0a53a; opacity:0; pointer-events:none; animation:hs-vien 2.4s ease-in-out infinite; }
@keyframes hs-vien { 50%{opacity:.9} }
.hs-ngay { flex:none; position:relative; z-index:1; width:62px; border:1px solid #c52229; border-radius:8px; text-align:center; overflow:hidden; background:#fff; box-shadow:0 3px 0 #c5222922; transition:transform .55s var(--hs-nay); }
.hs-ngay > span { display:block; background:#bf1021; color:#fff; font-size:10px; text-transform:uppercase; padding:5px 2px; font-weight:800; }
.hs-ngay b { display:block; color:#bb1020; font-size:30px; font-weight:800; font-style:italic; line-height:1.25; margin-top:4px; }
.hs-ngay small { display:block; color:#3f3025; font-size:10px; text-transform:capitalize; padding:2px 0 6px; }
.hs-lich-chu { min-width:0; position:relative; z-index:1; flex:1; }
#studentResultScreen .hs-lich-chu h4 { font-family:inherit; color:#241f1a; font-size:15.5px; font-weight:800; margin:8px 0; line-height:1.45; }
.hs-lich-chu p { font-size:13px; margin:8px 0; color:#4d3a2c; }
.hs-chip { display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; background:#fde3dc; color:#b3121f; }
.hs-live-nhan,.hs-lich-nhan { display:inline-block; font-size:10px; padding:3px 7px; border-radius:4px; background:#bd1020; color:#fff; font-weight:800; }
.hs-lich-nhan { background:#f4e7d1; color:#8a5c33; }
.hs-lich-chu summary { font-size:12.5px; font-weight:700; cursor:pointer; list-style:none; margin-top:12px; display:inline-flex; align-items:center; gap:8px; }
.hs-lich-chu summary::-webkit-details-marker { display:none; }
.hs-lich-chu summary i { transition:transform .45s var(--hs-nay); }
.hs-lich-chu summary:hover i { transform:translateX(4px); }
.hs-lich-chu details[open] summary i { transform:rotate(90deg); }
.hs-lich-chu details > :not(summary) { animation:hs-len .5s var(--hs-em) backwards; }
.hs-lich-chu details small,.hs-lich-chu details a { font-size:12px; }
.hs-toan-trang-tri { position:absolute; right:12px; top:14px; color:#a8875a; opacity:.5; font-style:italic; font-size:12px; line-height:1.4; pointer-events:none; transition:transform .8s var(--hs-em),opacity .5s ease; }
.hs-toan-trang-tri svg { display:block; width:46px; fill:none; stroke:#c0262f; stroke-width:2.2; stroke-linecap:round; }
.hs-toan-trang-tri svg .truc { stroke:#8b7258; stroke-width:1.2; }
.hs-tt-he { display:block; padding-left:7px; border-left:2px solid currentColor; border-radius:8px 0 0 8px; font-size:11px; }

/* ---------- Bài giảng nổi bật: băng trượt ngang ---------- */
.hs-truot-nut { display:inline-flex; gap:8px; }
.hs-truot-nut[hidden] { display:none; }
#studentResultScreen .hs-truot-nut button { display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #d8c5a6; border-radius:10px; background:#fff; color:#3b2a1d; box-shadow:0 2px 0 #d8c5a6; }
#studentResultScreen .hs-truot-nut button:disabled { opacity:.38; cursor:default; }
.hs-bai-luoi { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 42px) / 4); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding:8px 4px 18px; margin:-8px -4px 0; scrollbar-width:none; }
.hs-bai-luoi::-webkit-scrollbar { display:none; }
.hs-bai-noi-bat { scroll-snap-align:start; display:block; padding:0; overflow:hidden; text-align:left; background:#fffdf8; border:1px solid #d7c6ad; border-radius:13px; color:#211b18; box-shadow:0 3px 6px #341a0814; }
.hs-bai-anh { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; min-height:150px; padding:18px; color:#fff3d0; }
.hs-bai-anh::before { content:''; position:absolute; z-index:-1; inset:0; background:repeating-linear-gradient(145deg,transparent 0 45px,#ffbb2a33 46px 48px,transparent 49px 90px),radial-gradient(circle at 80% 80%,#f77920,#b50c18 50%,#5e0109); transition:transform 1.1s var(--hs-em); }
.hs-bai-noi-bat:nth-child(4n+2) .hs-bai-anh::before { background:repeating-linear-gradient(35deg,transparent 0 45px,#ffbb2a2e 46px 48px,transparent 49px 90px),radial-gradient(circle at 20% 90%,#ff8a2a,#a90a1b 52%,#4f0108); }
.hs-bai-noi-bat:nth-child(4n+3) .hs-bai-anh::before { background:repeating-linear-gradient(160deg,transparent 0 38px,#ffd45a30 39px 41px,transparent 42px 80px),radial-gradient(circle at 90% 10%,#e8571c,#9f0816 55%,#45010a); }
.hs-bai-logo { position:absolute; z-index:-1; right:-16px; top:-12px; width:104px; opacity:.16; transform:rotate(-12deg); transition:transform 1s var(--hs-em),opacity .5s ease; }
.hs-bai-anh > span { font-size:10px; font-weight:800; letter-spacing:.08em; color:#ffdf75; text-transform:uppercase; }
.hs-bai-anh > b { font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:23px; font-weight:400; font-style:italic; line-height:1.1; letter-spacing:.02em; text-transform:uppercase; padding-right:40px; text-shadow:2px 2px 0 #3a0306; }
.hs-bai-anh > i { position:absolute; right:14px; bottom:14px; border:1px solid #ffffff77; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; font-size:11px; background:#ffffff20; transition:transform .5s var(--hs-nay),background-color .35s ease,color .35s ease; }
.hs-bai-thong-tin { display:block; padding:14px; }
.hs-bai-thong-tin > b { display:block; font-size:13.5px; line-height:1.5; }
.hs-bai-thong-tin > small { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#91755b; font-size:11px; margin-top:10px; }
.hs-bai-thong-tin > small i { transition:transform .45s var(--hs-nay); }
.hs-lich-trong { padding:16px; border:1px dashed #d6b990; border-radius:10px; background:#fff4d9; color:#85613d; font-size:13px; }
/* Thẻ "Làm bài kiểm tra" thay buổi live (js/live-bai-thay.js, 23/10/2026) */
.lv-thay { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 16px; padding:16px 20px; border:3px solid var(--hs-muc,#211b18); border-radius:12px; box-shadow:5px 5px 0 var(--hs-muc,#211b18);
  background:#fff4cf radial-gradient(#c4a46b30 .8px,transparent 1px) 0 0/8px 8px; }
.lv-thay-icon { flex:none; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; border:3px solid var(--hs-muc,#211b18); background:var(--hs-do,#b5091c); color:#fff; font-size:20px; }
.lv-thay-chu { flex:1 1 260px; min-width:0; }
.lv-thay-tem { display:inline-block; padding:2px 10px; border:2px solid var(--hs-muc,#211b18); border-radius:20px; background:var(--hs-vang,#ffce42); font-size:11.5px; font-weight:800; }
.lv-thay-chu h3 { margin:8px 0 4px; font-size:20px; font-weight:900; color:var(--hs-do,#b5091c); line-height:1.25; }
.lv-thay-chu p { margin:0; font-size:13px; color:#584032; }
.lv-thay-nut { flex:none; display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border:3px solid var(--hs-muc,#211b18); border-radius:10px; background:var(--hs-do,#b5091c); color:#fff; font:inherit; font-size:16px; font-weight:900;
  box-shadow:4px 4px 0 var(--hs-muc,#211b18); cursor:pointer; transition:transform .12s, box-shadow .12s; }
.lv-thay-nut:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--hs-muc,#211b18); }
.lv-thay-nut:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--hs-muc,#211b18); }
@media (max-width:600px) { .lv-thay-nut { width:100%; justify-content:center; } }

/* ---------- Thẻ chung ---------- */
#studentResultScreen .card,#studentResultScreen .kq-bg-nhom { border:1px solid #dbc9b0 !important; border-radius:12px !important; box-shadow:0 3px 8px #39200d10 !important; }
#studentResultScreen .kq-bg-the { border:1px solid #dfcdb3; border-radius:9px; box-shadow:none; }

/* ---------- Chuyển mục + hiện dần khi cuộn ---------- */
#studentResultScreen [data-bgmuc-pane],#studentResultScreen [id^="kqTab"]:not(#kqTabNav):not(#kqTabLive):not(#kqTabbaikt) { animation:hs-tab-hien .6s var(--hs-em) backwards; }
@keyframes hs-tab-hien { from{opacity:0;transform:translate3d(0,14px,0)} to{opacity:1;transform:none} }
.hs-hien-dan { opacity:0; transform:translate3d(0,30px,0) scale(.985); transition:opacity .8s var(--hs-em) var(--hs-tre,0ms),transform 1s var(--hs-em) var(--hs-tre,0ms) !important; }
.hs-hien-dan.hs-da-hien { opacity:1; transform:none; }

/* ---------- Rê chuột / nhấn ---------- */
#studentResultScreen button,#studentResultScreen a.kq-bg-xem,#studentResultScreen .hs-lich-the { transition:transform .45s var(--hs-em),box-shadow .45s var(--hs-em),background-color .3s ease,border-color .3s ease,color .3s ease; }
#studentResultScreen a.kq-bg-xem,#studentResultScreen button.kq-bg-xem { transition:transform .45s var(--hs-nay),box-shadow .45s var(--hs-em),background-color .3s ease; }
@media (hover:hover) {
  #studentResultScreen .kq-bg-xem:not(.kq-live-khoa):hover { transform:translate3d(0,-3px,0) scale(1.035); box-shadow:0 7px 0 #3c0c08,0 14px 26px #26070548,inset 0 0 0 1px #fff2b8; animation-play-state:paused; }
  #studentResultScreen .kq-bg-xem:not(.kq-live-khoa):hover::after { transform:translate3d(130%,0,0); }
  #studentResultScreen .kq-bg-xem:not(.kq-live-khoa):hover i { transform:scale(1.12) rotate(-8deg); }
  #studentResultScreen .hs-lich-the:hover { transform:translate3d(0,-6px,0); border-color:#e8b765; box-shadow:0 16px 30px #6c3d1924; }
  #studentResultScreen .hs-lich-the:hover .hs-ngay { transform:rotate(-4deg) scale(1.06); }
  #studentResultScreen .hs-lich-the:hover .hs-toan-trang-tri { transform:translate3d(-6px,4px,0) scale(1.08); opacity:.6; }
  #studentResultScreen .hs-bai-noi-bat:hover { transform:translate3d(0,-6px,0); box-shadow:0 18px 32px #6c3d1928; border-color:#e8b765; }
  #studentResultScreen .hs-bai-noi-bat:hover .hs-bai-anh::before { transform:scale(1.1); }
  #studentResultScreen .hs-bai-noi-bat:hover .hs-bai-logo { transform:rotate(-2deg) scale(1.12); opacity:.26; }
  #studentResultScreen .hs-bai-noi-bat:hover .hs-bai-anh > i { transform:scale(1.18); background:#ffd75a; color:#3a0a06; border-color:#ffd75a; }
  #studentResultScreen .hs-bai-noi-bat:hover .hs-bai-thong-tin > small i { transform:translateX(5px); }
  #studentResultScreen .hs-truot-nut button:not(:disabled):hover { transform:translate3d(0,-2px,0); background:#ffd95a; border-color:#a57b20; box-shadow:0 4px 0 #a57b20; }
  #studentResultScreen .bt-muc:not(.active):hover .kq-huy { transform:translateY(-2px) scale(1.1); }
  #studentResultScreen .bt-muc-nav:not(.co-truot) .bt-muc:not(.active):hover { background:#fff4d5; }
}
#studentResultScreen .kq-bg-xem:not(.kq-live-khoa):active,#studentResultScreen .hs-bai-noi-bat:active,#studentResultScreen .hs-truot-nut button:active { transform:translate3d(0,1px,0) scale(.97); transition-duration:.12s; }
#studentResultScreen button:focus-visible,#studentResultScreen a:focus-visible,#studentResultScreen summary:focus-visible { outline:3px solid #bc4913; outline-offset:4px; }

/* Form HS dùng cùng bảng màu của trang học tập. */
#loginCardStudent { max-width:440px !important; border-radius:18px !important; box-shadow:0 20px 65px #26050744 !important; overflow:hidden; }
#loginCardStudent .mv-bang { padding:18px 24px; background:linear-gradient(120deg,#6e0410,#c01621); }
#loginCardStudent .card-body { background:#fff9ec; }
#loginCardStudent .brand-title { color:#9e0b1b; text-shadow:none; font-size:28px; }
#loginCardStudent .brand-slogan { color:#8e5b14; background:#fff0c9; border:0; letter-spacing:.08em; }
#loginCardStudent .form-control { min-height:48px; border:1px solid #d2bfa2 !important; border-radius:9px !important; background:#fff !important; color:#241c16 !important; box-shadow:none; transition:border-color .3s ease,box-shadow .3s ease; }
#loginCardStudent .form-control:focus { border-color:#bc1626 !important; box-shadow:0 0 0 4px #bc162618 !important; }
#loginCardStudent #hsLoginBtn { min-height:48px; border:1px solid #8b5814 !important; border-radius:9px !important; background:linear-gradient(#ffdf71,#ffc636) !important; color:#241b0f !important; font-family:inherit; font-weight:800; box-shadow:0 3px 0 #8b5814; transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease; }
#loginCardStudent #hsLoginBtn:hover { transform:translateY(-2px); box-shadow:0 5px 0 #8b5814,0 10px 20px #8b581430; }
#loginCardStudent #hsLoginBtn:active { transform:translateY(1px); box-shadow:0 1px 0 #8b5814; transition-duration:.1s; }

/* ---------- Màn vừa: thanh mục xuống hàng riêng trong thanh đỏ ---------- */
/* Thanh mục xuống hàng riêng: dưới 1600px, hoặc màn rộng hơn mà vẫn không đủ chỗ (js/hoc-sinh-giao-dien.js đo thật → .menu-xuong) */
#studentResultScreen .hs-thanh-dau.co-menu.menu-xuong { flex-wrap:wrap; padding-bottom:6px; }
#studentResultScreen .hs-thanh-dau.co-menu.menu-xuong .hs-thanh-menu { order:5; flex:1 0 100%; justify-content:flex-start; margin:0 -14px; border-top:1px solid #ffffff1f; padding-top:4px; }
@media (max-width:1600px) {
  #studentResultScreen .hs-thanh-dau.co-menu { flex-wrap:wrap; padding-bottom:6px; }
  #studentResultScreen .hs-thanh-dau.co-menu .hs-thanh-menu { order:5; flex:1 0 100%; justify-content:flex-start; margin:0 -14px; border-top:1px solid #ffffff1f; padding-top:4px; }
}
@media (max-width:900px) {
  .hs-lich-luoi { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hs-bai-luoi { grid-auto-columns:calc((100% - 14px) / 2); }
  #studentResultScreen #kqTabNav .nav-link { font-size:12px !important; padding:13px 10px !important; }
  #studentResultScreen .kq-live-bia-chu { max-width:85%; }
  .hs-hero-nghe { inset:0 0 0 30%; opacity:.45; }
  .hs-hero-nam,.hs-hero-do-thi { display:none; }
}
@media (max-width:600px) {
  #studentResultScreen { padding:8px 6px 24px !important; }
  #studentResultScreen > .mv-man { border-width:4px; border-radius:16px; }
  #studentResultScreen .hs-thanh-dau { position:relative; padding:14px 14px 4px; gap:10px; }
  #studentResultScreen .mv-logo-anh { width:44px; height:44px; }
  #studentResultScreen .hs-thuong-hieu { flex:1; }
  #studentResultScreen .mv-tieu-de { font-size:24px; }
  #studentResultScreen .mv-phu { font-size:9px; }
  .hs-ho-so { flex:1; margin:4px 0 0; }
  .hs-avatar { width:32px; height:32px; font-size:15px; }
  .hs-ho-so b { font-size:11px; }
  #studentResultScreen .hs-thanh-dau.co-menu .hs-thanh-menu { margin:0 -14px; }
  .hs-noi-dung { padding:0 12px 20px; }
  #studentResultScreen #kqTabNav { margin:0 -12px 14px !important; padding:0 8px; flex-wrap:nowrap; overflow-x:auto; }
  #studentResultScreen #kqTabNav .nav-link { white-space:nowrap; font-size:11px !important; padding:12px 10px !important; }
  /* Điện thoại: thanh mục chia đều cả chiều ngang, biểu tượng trên – chữ dưới (kiểu ứng dụng), đủ chỗ mọi mục không phải vuốt */
  #studentResultScreen .hs-thanh-menu #kqTabNav { margin:0 !important; padding:0; gap:0; width:100%; overflow:visible; }
  #studentResultScreen .hs-thanh-menu #kqTabNav .nav-item { flex:1 1 0; min-width:0; }
  #studentResultScreen .hs-thanh-menu #kqTabNav .nav-link { position:relative; width:100%; flex-direction:column; justify-content:center; gap:4px !important; padding:9px 2px 11px !important; font-size:11px !important; white-space:nowrap; }
  #studentResultScreen .hs-thanh-menu #kqTabNav .nav-link .kq-huy { width:22px; min-width:22px; height:20px; font-size:17px; }
  #studentResultScreen .hs-thanh-menu #kqTabNav .nav-link .kq-live-cham { position:absolute; top:5px; left:calc(50% + 8px); margin:0; padding:2px; font-size:0; border-radius:50%; }
  #studentResultScreen #kqTabNav .kq-huy { width:16px; min-width:16px; font-size:14px; }
  #studentResultScreen .bt-muc-nav { margin-bottom:14px; }
  #studentResultScreen .bt-muc-nav .bt-muc { flex:1 1 0; min-width:0; padding:8px 5px; gap:5px; font-size:10px; min-height:40px; }
  #studentResultScreen .bt-muc-nav .kq-live-cham { display:none; }
  #studentResultScreen .bt-muc-nav .kq-bg-test-dem { position:absolute; top:-6px; right:-2px; min-width:18px; height:18px; font-size:10px; padding:0 4px; }
  #studentResultScreen .bt-muc .kq-huy { width:18px; height:18px; font-size:15px; }
  #studentResultScreen .kq-live-bia { min-height:340px; }
  #studentResultScreen .kq-live-bia-tem { left:18px; top:18px; font-size:10px; }
  #studentResultScreen .kq-live-bia-chu { left:18px; right:16px; max-width:100%; bottom:22px; }
  .hs-hero-nghe { inset:0 0 30% 40%; opacity:.4; }
  .hs-banner-thanh { padding:14px 16px; gap:12px; }
  .hs-banner-thanh .hs-hero-hanh-dong { width:100%; }
  .hs-set.s2,.hs-cong-thuc.c3 { display:none; }
  .hs-hero-khau-hieu { font-size:38px; }
  #studentResultScreen .kq-live-bia-ten { font-size:23px; }
  #studentResultScreen .kq-live-bia-gio { font-size:11px; }
  .hs-hero-hanh-dong { gap:10px; margin-top:18px; }
  #studentResultScreen .kq-bg-xem { font-size:20px; padding:8px 14px; }
  #studentResultScreen .kq-live-khoa { font-size:12px; }
  .hs-hero-trang-thai { font-size:10px; padding:8px; }
  #studentResultScreen .kq-live-duoi { padding:10px 16px; }
  #studentResultScreen .kq-live-dem { font-size:11px; }
  .hs-xem-lich { font-size:10px; }
  .hs-lich { scroll-margin-top:16px; }
  .hs-lich-luoi { grid-template-columns:1fr; }
  #studentResultScreen .hs-muc-dau h3 { font-size:28px; }
  .hs-muc-dau > span { font-size:10px; }
  .hs-bai-luoi { gap:10px; grid-auto-columns:76%; }
  .hs-bai-anh { min-height:130px; padding:14px; }
  .hs-bai-anh > b { font-size:19px; }
  .hs-bai-thong-tin { padding:11px; }
  .hs-bai-thong-tin > b { font-size:12px; }
  .hs-bai-thong-tin > small { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  #studentResultScreen *,#studentResultScreen *::before,#studentResultScreen *::after,#studentResultScreen::before,#studentResultScreen::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  #loginCardStudent * { transition:none !important; }
  .hs-hien-dan { opacity:1; transform:none; }
  .hs-hero-do-thi .parabol { stroke-dashoffset:0; }
  .hs-lua,#studentResultScreen .kq-live-bia::before,.hs-banner::after,.hs-banner-thanh::before { display:none; }
}

/* Menu "Học tập" (thầy chốt 04/10/2026): đường dẫn trên mục Lớp trực tuyến (các mục khác tự có trong đầu trang) */
#studentResultScreen .hs-duong-hoc-tap { margin:0 0 12px; }
@media (max-width:767.98px) {
  /* 4 mục con: chữ xuống dòng gọn trong ô, không tràn */
  #studentResultScreen .bt-muc-nav .bt-muc > span:not(.kq-huy):not(.kq-live-cham):not(.kq-bg-test-dem) { white-space:normal; line-height:1.15; text-align:center; }
}

/* Trang chủ HS/PH (js/hoc-sinh-trang-chu.js). Cỡ chữ là trước CSS zoom 1,14–1,42 của trang HS.
   .hs-home-vong (vòng tiến độ) + .hs-home-chan (chân trang) dùng chung cho Thư viện bài giảng / Bài kiểm tra — đừng bỏ. */
@property --hs-phan-tram { syntax:'<percentage>'; inherits:false; initial-value:0%; }
.hs-home-vong { display:grid; place-items:center; margin:0 auto; width:152px; height:152px; border-radius:50%; background:conic-gradient(#b51b28 var(--hs-phan-tram),#f0e2cf 0); padding:9px; animation:hs-vong 1.8s var(--hs-em) .35s backwards; }
@keyframes hs-vong { from { --hs-phan-tram:0%; } }
.hs-home-vong > span { display:grid; align-content:center; justify-items:center; width:100%; height:100%; border-radius:50%; background:#fffdf7; text-align:center; }
.hs-home-vong b { color:#a91a27; font-size:34px; letter-spacing:-.07em; }
.hs-home-vong b > small { font-size:14px; margin-left:2px; }
.hs-home-vong > span > small { color:#a18567; font-size:8px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.hs-home-chan { display:flex; align-items:center; gap:12px; margin-top:22px; padding:20px 0 6px; border-top:1px solid #e4d4bb; color:#967756; font-size:10px; }
.hs-home-chan > span:nth-child(2) { font-size:11px; font-weight:800; color:#7d5037; }
.hs-home-chan small { display:block; font-size:9px; font-weight:400; margin-top:3px; }
.hs-home-chan > span:last-child { margin-left:auto; font-style:italic; }

/* ---------- Khung chung ---------- */
#studentResultScreen .th { padding-top:22px; color:#2d211a; }
.th-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#b20b18; }
.th-dau { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:12px; }
#studentResultScreen .th-dau h2 { margin:4px 0 0; font-family:'Be Vietnam Pro',sans-serif; font-size:19px; font-weight:800; letter-spacing:-.03em; color:#2b1d16; }
.th-link { flex:none; display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:4px 0; font-size:11px; font-weight:800; color:#b20b18; }
.th-link i { transition:transform .4s var(--hs-nay); } .th-link:hover i { transform:translateX(4px); }
.th-the { padding:18px; background:linear-gradient(165deg,#fffefb,#fff9ee); border:1px solid #e6d6bd; border-radius:18px; box-shadow:0 1px 2px #4e301412,0 8px 22px #4e30140f; }
.th-khoi { margin:20px 0; }

/* ---------- Lời chào ---------- */
.th-chao { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.th-avatar { flex:none; display:grid; place-items:center; width:58px; height:58px; border-radius:18px; font:400 30px/1 'Bangers','Be Vietnam Pro',sans-serif; color:#8b0711;
  background:radial-gradient(circle at 30% 25%,#fff3b0,#ffcf3c 60%,#d99a12); box-shadow:0 0 0 4px #fff,0 0 0 5px #f0d9a8,0 10px 20px #c9962e40; transform:rotate(-6deg); animation:hs-dap .7s var(--hs-nay) .1s backwards; }
.th-chao-chu { flex:1; min-width:0; }
#studentResultScreen .th h1 { margin:5px 0 4px; font-family:'Be Vietnam Pro',sans-serif; font-size:clamp(22px,2.4vw,30px); font-weight:800; letter-spacing:-.045em; line-height:1.2; color:#2b1d16; }
.th h1 > span { background:linear-gradient(100deg,#b20b18,#e8452c 60%,#f29a1a); -webkit-background-clip:text; background-clip:text; color:transparent; padding:.24em 0 .2em; margin:-.24em 0 -.2em; }
.th-chao-chu p { margin:0; font-size:12px; color:#7a6350; }
.th-chao-phai { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.th-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid #e6d6bd; border-radius:999px; background:#fffcf5; font-size:10.5px; font-weight:600; color:#6b4e3a; text-transform:capitalize; }
.th-chip i { color:#c0121f; }

/* ---------- Banner ---------- */
.th-hero { position:relative; isolation:isolate; overflow:hidden; border-radius:20px; border:1px solid #5a0a10; box-shadow:0 18px 40px #5a0a1030; background:#7a0610; }
.th-hero > img { display:block; width:100%; height:auto; animation:hs-banner-vao 1.2s var(--hs-em) .1s backwards; }
.th-hero::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(105deg,transparent 38%,#fff6d026 48%,#ffffff3d 50%,transparent 62%); transform:translate3d(-100%,0,0); animation:hs-quet 9s var(--hs-em) 2s infinite; }

/* ---------- Hôm nay của bạn ---------- */
.th-viec-luoi { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.th-viec { position:relative; display:flex; align-items:center; gap:12px; width:100%; padding:14px; text-align:left; border:1px solid #e6d6bd; border-radius:16px; background:#fff;
  box-shadow:0 2px 6px #4e301410; transition:transform .5s var(--hs-em),box-shadow .5s var(--hs-em),border-color .3s ease !important; animation:hs-len .55s var(--hs-em) backwards; }
.th-viec:nth-child(2) { animation-delay:.07s; } .th-viec:nth-child(3) { animation-delay:.14s; } .th-viec:nth-child(4) { animation-delay:.21s; }
.th-viec.nong { border-color:#f0b24a; background:linear-gradient(165deg,#fffdf6,#fff3d4); box-shadow:0 0 0 2px #f6c76a55,0 10px 22px #c9962e26; }
.th-viec.can { border-color:#f2c4c4; background:linear-gradient(165deg,#fff,#fff4f3); }
.th-viec-icon { position:relative; flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; font-size:18px; transition:transform .5s var(--hs-nay); }
.th-viec-icon.do { background:#fdeaea; color:#c0121f; } .th-viec-icon.vang { background:#fff2cc; color:#b77e1a; } .th-viec-icon.tim { background:#f0eafc; color:#7257a8; }
.th-viec-icon.xanh { background:#e3f6e8; color:#1f9a4d; } .th-viec-icon.cam { background:#ffeedb; color:#d0721a; }
.th-cham { position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%; background:#e3242b; border:2px solid #fff; animation:hs-cham-do 1.6s ease-out infinite; }
@keyframes hs-cham-do { 0%{box-shadow:0 0 0 0 #e3242baa} 80%,100%{box-shadow:0 0 0 8px #e3242b00} }
.th-viec-chu { flex:1; min-width:0; }
.th-viec-chu small { display:block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8a6f58; }
.th-viec-chu b { display:block; margin-top:2px; font-size:14px; font-weight:800; color:#2b1d16; }
.th-viec.can .th-viec-chu b { color:#b20b18; }
.th-viec-chu em { display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; font-style:normal; color:#7a6350; }
.th-phat { display:block; margin-top:6px; padding:5px 8px; border-radius:8px; background:#ffe9e9; font-size:10.5px; line-height:1.4; color:#9b0d22; white-space:normal; }
.th-phat i { margin-right:4px; color:#d32f3a; } .th-viec-chu .th-phat b { display:inline; margin:0; font-size:inherit; color:#b20b18; }
.th-mui { flex:none; font-size:10px; color:#c0a684; transition:transform .45s var(--hs-nay),color .3s ease; }

/* ---------- Hai cột ---------- */
.th-cot { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:16px; align-items:start; }
.th-ben { display:flex; flex-direction:column; gap:16px; min-width:0; }
.th-noi-bat { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:0; width:100%; padding:0; overflow:hidden; text-align:left; border:1px solid #e6d6bd; border-radius:16px; background:#fff;
  box-shadow:0 4px 12px #4e301414; transition:transform .5s var(--hs-em),box-shadow .5s var(--hs-em),border-color .3s ease !important; }
.th-noi-bat-anh { position:relative; display:block; min-height:170px; overflow:hidden; background:radial-gradient(ellipse at 70% 35%,#ff8a2a40,transparent 55%),linear-gradient(140deg,#3d0207,#8c0a14 55%,#4a0309); }
.th-noi-bat-anh .hs-tv-hinh { position:absolute; inset:0; width:100%; height:100%; transition:transform 1s var(--hs-em); }
.th-play { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:#fff; color:#b20b18; font-size:17px; padding-left:3px;
  box-shadow:0 8px 20px #0007,0 0 0 8px #ffffff2e; animation:hs-nhip-trang 2.4s ease-out infinite; transition:transform .5s var(--hs-nay); }
@keyframes hs-nhip-trang { 0%{box-shadow:0 8px 20px #0007,0 0 0 0 #ffffff66} 80%,100%{box-shadow:0 8px 20px #0007,0 0 0 16px #ffffff00} }
.th-noi-bat-chu { display:flex; flex-direction:column; justify-content:center; gap:6px; padding:18px; }
.th-noi-bat-chu small { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#b20b18; }
.th-noi-bat-chu b { font-size:18px; font-weight:800; line-height:1.3; letter-spacing:-.02em; color:#2b1d16; }
.th-noi-bat-chu em { font-size:11px; font-style:normal; color:#7a6350; }
.th-nut-do { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:9px 16px; border-radius:10px; font-size:12.5px; font-weight:800; color:#fff;
  background:linear-gradient(115deg,#a50d18,#d0222b); box-shadow:0 3px 0 #6e040d,0 8px 16px #a50d1826; transition:transform .4s var(--hs-nay),box-shadow .3s ease; }
.th-bai-ds { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.th-bai { display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; text-align:left; border:1px solid #ecdfca; border-radius:12px; background:#fffcf6;
  transition:transform .45s var(--hs-em),border-color .3s ease,background-color .3s ease !important; animation:hs-dong-vao .5s var(--hs-em) backwards; }
.th-bai:nth-child(2) { animation-delay:.06s; } .th-bai:nth-child(3) { animation-delay:.12s; }
.th-bai-so { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; font-size:16px; font-weight:800; font-style:italic; color:#fff5d3; background:linear-gradient(130deg,#790611,#c2242b); }
.th-bai-chu { flex:1; min-width:0; }
.th-bai-chu small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9.5px; color:#a3896d; }
.th-bai-chu b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:#3b2a1f; }
.th-bai-play { flex:none; display:grid; place-items:center; width:30px; height:30px; border:1px solid #ddb884; border-radius:50%; background:#fff0c4; color:#a91823; font-size:10px; transition:transform .45s var(--hs-nay),background-color .3s ease; }
.th-trong { padding:24px; text-align:center; border:1px dashed #e2cfb0; border-radius:12px; background:#fff9ec; color:#a0815b; }
.th-trong > i { display:block; font-size:24px; margin-bottom:8px; color:#c4a06e; } .th-trong > b { display:block; font-size:13px; color:#88633f; } .th-trong > p { font-size:11.5px; margin:6px 0 0; }

/* Số liệu */
.th-so-hang { display:flex; align-items:center; gap:16px; }
#studentResultScreen .th-vong { width:120px; height:120px; padding:8px; margin:0; flex:none; }
#studentResultScreen .th-vong b { font-size:28px; }
.th-so-ds { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.th-so-ds > div { display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:8px; padding:7px 10px; border-radius:10px; background:#fff; border:1px solid #f0e6d4; }
.th-so-ds small { grid-column:1 / -1; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8a6f58; }
.th-so-ds b { font-size:18px; font-weight:800; color:#a10a17; letter-spacing:-.02em; }
.th-so-ds span { font-size:10.5px; color:#7a6350; }
.th-spark-khung { margin:14px 0 6px; padding:10px 12px 6px; border-radius:12px; background:#fff; border:1px solid #f0e6d4; }
.th-spark-khung small { font-size:10px; font-weight:700; color:#8a6f58; }
.th-spark { display:block; width:100%; height:auto; margin-top:4px; overflow:visible; }
.th-spark .vung { fill:#e3242b18; } .th-spark .duong { fill:none; stroke:#d0222b; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:hs-ve-1 1.4s var(--hs-em) .4s forwards; }
.th-spark circle { fill:#fff; stroke:#f2a516; stroke-width:3; }
@keyframes hs-ve-1 { to { stroke-dashoffset:0; } }

/* ---------- Lịch 7 ngày ---------- */
.th-tuan { margin-top:16px; }
.th-tuan-luoi { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.th-ngay { display:flex; flex-direction:column; gap:6px; min-height:110px; padding:8px; border:1px solid #ecdfca; border-radius:13px; background:#fff; animation:hs-len .5s var(--hs-em) backwards; }
.th-ngay:nth-child(2) { animation-delay:.04s; } .th-ngay:nth-child(3) { animation-delay:.08s; } .th-ngay:nth-child(4) { animation-delay:.12s; } .th-ngay:nth-child(5) { animation-delay:.16s; } .th-ngay:nth-child(6) { animation-delay:.2s; } .th-ngay:nth-child(7) { animation-delay:.24s; }
.th-ngay.nay { border-color:#e8b14a; background:linear-gradient(165deg,#fffbef,#fff1cf); box-shadow:0 0 0 2px #f6c76a44; }
.th-ngay-dau { display:flex; flex-direction:column; gap:1px; padding-bottom:6px; border-bottom:1px dashed #ecdfca; }
.th-ngay-dau small { font-size:10px; font-weight:800; color:#8a6f58; text-transform:uppercase; }
.th-ngay.nay .th-ngay-dau small { color:#b20b18; }
.th-ngay-dau b { font-size:13px; font-weight:800; color:#2b1d16; }
.th-sk { display:flex; align-items:center; gap:5px; padding:4px 6px; border-radius:7px; font-size:10px; font-weight:700; line-height:1.3; }
.th-sk.live { background:#f0eafc; color:#5b3f96; } .th-sk.bt { background:#ffeedb; color:#a2580a; } .th-sk.trong { justify-content:center; color:#cdbba3; font-weight:400; }

/* ---------- Lối tắt ---------- */
.th-loi-tat { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:16px; }
.th-loi { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e6d6bd; border-radius:14px; background:#fff; font-size:12.5px; font-weight:800; color:#2b1d16;
  transition:transform .45s var(--hs-em),border-color .3s ease,box-shadow .4s ease !important; }
.th-loi .th-viec-icon { width:34px; height:34px; border-radius:10px; font-size:15px; }

@media (hover:hover) {
  .th-viec:hover,.th-loi:hover { transform:translate3d(0,-4px,0); border-color:#e8c27a; box-shadow:0 14px 26px #6c3d1920; }
  .th-viec:hover .th-viec-icon,.th-loi:hover .th-viec-icon { transform:rotate(-8deg) scale(1.1); }
  .th-viec:hover .th-mui { transform:translateX(4px); color:#b20b18; }
  .th-noi-bat:hover { transform:translate3d(0,-4px,0); border-color:#e8c27a; box-shadow:0 20px 36px #6c3d1926; }
  .th-noi-bat:hover .hs-tv-hinh { transform:scale(1.07); }
  .th-noi-bat:hover .th-play { transform:scale(1.12); }
  .th-noi-bat:hover .th-nut-do { transform:translateY(-2px); box-shadow:0 5px 0 #6e040d,0 12px 22px #a50d1838; }
  .th-bai:hover { transform:translate3d(4px,0,0); border-color:#e8c27a; background:#fff; }
  .th-bai:hover .th-bai-play { transform:scale(1.15); background:#ffd75a; }
}
.th-viec:active,.th-noi-bat:active,.th-bai:active,.th-loi:active { transform:scale(.98) !important; transition-duration:.1s !important; }

@media (max-width:900px) {
  .th-cot { grid-template-columns:minmax(0,1fr); }
  .th-tuan-luoi { display:flex; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; scrollbar-width:none; }
  .th-tuan-luoi::-webkit-scrollbar { display:none; }
  .th-ngay { flex:0 0 120px; scroll-snap-align:start; }
}
@media (max-width:600px) {
  #studentResultScreen .th { padding-top:14px; }
  .th-chao { flex-wrap:wrap; gap:12px; }
  .th-avatar { width:48px; height:48px; font-size:25px; border-radius:15px; }
  .th-chao-chu p { font-size:12.5px; }
  .th-chao-phai { flex-direction:row; flex-wrap:wrap; align-items:center; flex-basis:100%; }
  .th-hero { border-radius:14px; }
  .th-viec-luoi { grid-template-columns:minmax(0,1fr); gap:8px; }
  .th-viec-chu em,.th-bai-chu small,.th-so-ds span,.th-noi-bat-chu em { font-size:11.5px; }
  .th-noi-bat { grid-template-columns:minmax(0,1fr); }
  .th-noi-bat-anh { min-height:0; aspect-ratio:16 / 9; }
  .th-so-hang { flex-direction:column; align-items:stretch; }
  #studentResultScreen .th-vong { margin:0 auto; }
  .th-loi-tat { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hs-home-chan > span:last-child { display:none; }
}
@media (prefers-reduced-motion:reduce) { .th-hero::after { display:none; } .th-spark .duong { stroke-dashoffset:0; } }

/* Bài tập phạt của bạn — phiếu trợ giảng đăng ở Kế hoạch buổi (js/hoc-sinh-trang-chu.js htmlBaiPhat) */
.th-phat-khung { margin:0 0 20px; border-color:#f0c4c4; background:linear-gradient(165deg,#fffdfb,#fff4f2); }
.th-phat-ds { display:flex; flex-direction:column; gap:8px; }
.th-phat-dong { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:#fff; border:1px solid #f1d9d4; }
.th-phat-chu { display:flex; flex-direction:column; gap:2px; min-width:0; }
.th-phat-chu b { font-size:14.5px; color:#2b1a12; } .th-phat-chu small { font-size:12.5px; color:#7a6458; }
.th-phat-chu em { font-style:normal; font-size:12.5px; color:#a50d18; font-weight:700; }
.th-phat-dong .th-nut-do { margin-top:0; align-self:center; border:0; cursor:pointer; }
.th-phat-dong .th-nut-do:disabled { opacity:.7; cursor:progress; }
.th-phat-cho { font-size:12px; color:#8a7b70; white-space:nowrap; }
@media (max-width:600px) { .th-phat-dong { grid-template-columns:42px minmax(0,1fr); } .th-phat-dong > :last-child { grid-column:2; justify-self:start; } }

/* Khung xem phiếu bài phạt ngay trong trang (như đề kiểm tra) — 07/10/2026 */
.hs-phieu-xem{ position:fixed; inset:0; z-index:2000; display:flex; flex-direction:column; background:#2a0508; }
.hs-phieu-xem-dau{ display:flex; align-items:center; gap:10px; padding:10px 14px; color:#fff3dc; background:linear-gradient(115deg,#3d0207,#7a0812 55%,#5a060e); border-bottom:2px solid #f6b52a; }
.hs-phieu-xem-dau > i{ color:#ffd24d; font-size:18px; }
.hs-phieu-xem-dau > b{ font-weight:800; white-space:nowrap; }
.hs-phieu-xem-dau > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; opacity:.85; }
.hs-phieu-xem-nut{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:0; border-radius:12px; font:inherit; font-size:14px; font-weight:800; cursor:pointer; text-decoration:none; color:#2a1606; background:linear-gradient(#ffe48a,#f6c33f 55%,#e5a019); }
.hs-phieu-xem-nut.dong{ color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,225,160,.45); }
.hs-phieu-xem-than{ flex:1; min-height:0; display:flex; justify-content:center; align-items:flex-start; overflow:auto; background:#3a0f12; }
.hs-phieu-xem-than iframe{ width:100%; height:100%; border:0; background:#fff; }
.hs-phieu-xem-than img{ max-width:100%; height:auto; background:#fff; }
body.hs-phieu-mo{ overflow:hidden; }
@media (max-width:640px){ .hs-phieu-xem-dau > span{ display:none; } .hs-phieu-xem-dau{ gap:8px; padding:8px 10px; } }

/* Bài phạt RIÊNG của em: đúng N bài như bài kiểm tra (07/10/2026) */
.hs-pp-giay{ background:#3a0f12; padding:14px 10px 40px; }
.hs-pp-trang{ width:min(820px,100%); margin:0 auto; background:#fff; color:#111; border-radius:6px; padding:22px 26px 28px; font-family:'Palatino Linotype','Book Antiqua',Palatino,'Times New Roman',serif; font-size:17px; line-height:1.55; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.hs-pp-tieu{ text-align:center; font-weight:700; color:#c8102e; font-size:20px; } .hs-pp-tieu small{ display:block; color:#a67c00; font-style:italic; font-weight:400; font-size:13px; }
.hs-pp-ghi{ margin:10px 0 16px; padding:8px 12px; border-left:4px solid #f5b82e; background:#fff8e1; font-size:15px; }
.hs-pp-bai{ margin:0 0 16px; page-break-inside:avoid; } .hs-pp-so{ color:#c8102e; }
.hs-pp-bai img{ max-width:100%; max-height:300px; display:block; margin:6px auto; }
.hs-pp-lc{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px; margin:6px 0 0 14px; } .hs-pp-lc.doc{ grid-template-columns:1fr; }
.hs-pp-het{ text-align:center; font-weight:700; color:#c8102e; margin-top:14px; }
@media (max-width:640px){ .hs-pp-trang{ padding:14px 14px 22px; font-size:16px; } .hs-pp-lc{ grid-template-columns:1fr; } }
@media print{ body.hs-phieu-mo > *:not(#hsPhieuXem){ display:none !important; } .hs-phieu-xem{ position:static; } .hs-phieu-xem-dau{ display:none; } .hs-pp-giay{ background:#fff; padding:0; } .hs-pp-trang{ box-shadow:none; width:100%; } }

/* Trang HS/PH — các tab Học phí / Kết quả / Bài giảng / Bài kiểm tra / Bổ trợ / Học chéo cùng tông đỏ – vàng mềm của tab Lớp live
   (css/hoc-sinh.css). Thay kiểu "ô truyện tranh" (viền mực dày, bóng lệch — css/marvel-tab.css) bằng thẻ bo tròn, bóng mềm,
   nút vàng có vệt sáng. Chỉ trong #studentResultScreen: tab nội bộ "Kết quả HS" của nhân viên giữ nguyên.
   Chuyển động chỉ dùng transform / opacity; js/hoc-sinh-giao-dien.js lo phần hiện dần khi cuộn. */
#studentResultScreen {
  --hs-kem:#fff8ea; --hs-vien:#e2d3bb; --hs-vien-dam:#d3bf9f; --hs-chu:#241c16; --hs-chu-phu:#7a6350;
  --hs-bong:0 1px 2px #4e301412,0 6px 18px #4e30140d; --hs-bong-noi:0 2px 4px #4e301414,0 18px 36px #6c3d1924;
  --hs-the:linear-gradient(165deg,#fffefb,#fff8ea);
}

/* ---------- Thẻ / khung chung ---------- */
#studentResultScreen .card,
#studentResultScreen .tg .tg-the,
#studentResultScreen .kq-hp,
#studentResultScreen .kq-the-hs,
#studentResultScreen .kq-bg-nhom,
#studentResultScreen .table-responsive,
#studentResultScreen .kq-hp-chi-tiet,
#studentResultScreen .tg .ltn-thanh {
  background:var(--hs-the) !important; color:var(--hs-chu); border:1px solid var(--hs-vien) !important; border-radius:16px !important;
  box-shadow:var(--hs-bong) !important;
}
#studentResultScreen .tg .tg-the { padding:18px; gap:12px; margin-bottom:12px; transition:transform .5s var(--hs-em),box-shadow .5s var(--hs-em),border-color .3s ease; }
#studentResultScreen .tg .tg-the.nhe { background:linear-gradient(165deg,#fff9ec,#fff1d6) !important; border-color:#f0d9a8 !important; }
#studentResultScreen .tg { max-width:760px; color:var(--hs-chu); }
#studentResultScreen .tg .tg-phu { color:var(--hs-chu-phu); }
#studentResultScreen .tg .tg-ten { color:var(--hs-chu); }

/* Tiêu đề mục trong tab: chữ Bangers đỏ + vệt vàng như "Lịch học sắp tới" */
#studentResultScreen .tg h2,
#studentResultScreen .tg .tg-tieu-de,
#studentResultScreen .hc-ph-tieu-de {
  position:relative; isolation:isolate; display:inline-block; margin:26px 0 12px; font-family:'Bangers','Be Vietnam Pro',sans-serif !important;
  font-weight:400; font-style:italic; font-size:27px; letter-spacing:.03em; text-transform:uppercase; color:#b20b18; text-shadow:1px 1px #fff,2px 2px #271911;
}
#studentResultScreen .tg h2::after,
#studentResultScreen .tg .tg-tieu-de::after,
#studentResultScreen .hc-ph-tieu-de::after { content:''; position:absolute; z-index:-1; left:3px; right:-30px; bottom:2px; height:8px; background:linear-gradient(90deg,#ffd854,#ffd85400); transform:skew(-35deg); }
#studentResultScreen .hc-ph-tieu-de { margin-top:4px; font-size:25px; }
/* Dải tiêu đề thẻ (vd "Lịch sử tất cả các buổi"): bỏ viền mực, dùng chữ đỏ + vệt vàng */
#studentResultScreen .card.p-3 > .small.text-secondary:first-child,
#studentResultScreen .card.p-3 > .mb-2.small.text-secondary:first-child {
  position:relative; isolation:isolate; display:inline-flex !important; margin:2px 0 14px !important; padding:0 !important; background:none !important; border:0 !important;
  font-style:italic; color:#b20b18 !important; text-shadow:1px 1px #fff,2px 2px #271911 !important;
}
#studentResultScreen .card.p-3 > .small.text-secondary:first-child::after,
#studentResultScreen .card.p-3 > .mb-2.small.text-secondary:first-child::after { content:''; position:absolute; z-index:-1; left:3px; right:-30px; bottom:1px; height:8px; background:linear-gradient(90deg,#ffd854,#ffd85400); transform:skew(-35deg); }
#studentResultScreen .kq-ten-hs { color:#b20b18 !important; text-shadow:1px 1px #fff,2px 2px #271911 !important; font-style:italic; }
#studentResultScreen .kq-ma-lop { color:#ffd75a !important; background:linear-gradient(115deg,#8b0711,#c0121f) !important; border-radius:6px; }

/* ---------- Nút ---------- */
#studentResultScreen .tg .tg-nut,
#studentResultScreen .btn-outline-danger,
#studentResultScreen .btn-outline-secondary,
#studentResultScreen .btn-outline-warning,
#studentResultScreen .pill,
#studentResultScreen .kq-bg-che-do button,
#studentResultScreen .kq-bg-tl {
  position:relative; border:1px solid var(--hs-vien-dam) !important; border-radius:11px !important; background:#fff !important; color:var(--hs-chu) !important;
  box-shadow:0 2px 0 var(--hs-vien) !important; font-family:'Be Vietnam Pro',sans-serif !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important;
  transition:transform .4s var(--hs-nay),box-shadow .35s var(--hs-em),background-color .3s ease,border-color .3s ease,color .3s ease !important;
}
#studentResultScreen .btn-outline-danger,
#studentResultScreen .tg .tg-nut.dkbt-huy { color:#b3121f !important; border-color:#efc3c3 !important; box-shadow:0 2px 0 #f3d6d6 !important; }
/* Nút chính vàng: vệt sáng lướt khi rê */
#studentResultScreen .tg .tg-nut.chinh,
#studentResultScreen .btn-gold,
#studentResultScreen .kq-bg-kt-nut,
#studentResultScreen .pill.active {
  overflow:hidden; isolation:isolate; background:linear-gradient(#ffe582,#ffc42e) !important; color:#21170c !important; border:1px solid #9a6a1c !important;
  box-shadow:0 3px 0 #9a6a1c,inset 0 1px 0 #fff8 !important;
}
#studentResultScreen .tg .tg-nut.chinh::after,
#studentResultScreen .btn-gold::after,
#studentResultScreen .kq-bg-kt-nut::after { content:''; position:absolute; z-index:-1; inset:-2px; pointer-events:none; background:linear-gradient(110deg,transparent 30%,#ffffffb0 50%,transparent 70%); transform:translate3d(-130%,0,0); transition:transform .9s var(--hs-em); }
#studentResultScreen .tg .tg-nut.chinh { min-height:50px; font-size:15.5px; }
#studentResultScreen .kq-bg-kt-nut { position:relative; border-radius:9px !important; font-weight:800; }
@media (hover:hover) {
  #studentResultScreen .tg .tg-nut:not(:disabled):hover,
  #studentResultScreen .btn-outline-danger:not(:disabled):hover,
  #studentResultScreen .btn-outline-secondary:not(:disabled):hover,
  #studentResultScreen .btn-outline-warning:not(:disabled):hover,
  #studentResultScreen .pill:not(:disabled):not(.active):hover,
  #studentResultScreen .kq-bg-che-do button:not(.on):hover,
  #studentResultScreen .kq-bg-tl:hover { transform:translate3d(0,-2px,0); background:#fff6dc !important; border-color:#e0b765 !important; box-shadow:0 4px 0 #e8d3a8,0 10px 18px #8b581420 !important; }
  #studentResultScreen .btn-outline-danger:not(:disabled):hover,
  #studentResultScreen .tg .tg-nut.dkbt-huy:not(:disabled):hover { background:#fff0f0 !important; border-color:#e79a9a !important; box-shadow:0 4px 0 #f3d0d0,0 10px 18px #b3121f1c !important; }
  #studentResultScreen .tg .tg-nut.chinh:not(:disabled):hover,
  #studentResultScreen .btn-gold:not(:disabled):hover,
  #studentResultScreen .kq-bg-kt-nut:not(:disabled):hover { transform:translate3d(0,-2px,0) scale(1.01); background:linear-gradient(#ffe993,#ffc93f) !important; border-color:#9a6a1c !important; box-shadow:0 5px 0 #9a6a1c,0 14px 24px #8b581433,inset 0 1px 0 #fff8 !important; }
  #studentResultScreen .tg .tg-nut.chinh:not(:disabled):hover::after,
  #studentResultScreen .btn-gold:not(:disabled):hover::after,
  #studentResultScreen .kq-bg-kt-nut:not(:disabled):hover::after { transform:translate3d(130%,0,0); }
  #studentResultScreen .tg .tg-the:has(> .tg-nut):hover,
  #studentResultScreen .tg section.tg-the:hover,
  #studentResultScreen .hc-buoi:hover { transform:translate3d(0,-3px,0); border-color:#e8c27a !important; box-shadow:var(--hs-bong-noi) !important; }
}
#studentResultScreen .tg .tg-nut:not(:disabled):active,
#studentResultScreen .btn:not(:disabled):active,
#studentResultScreen .pill:not(:disabled):active,
#studentResultScreen .kq-bg-kt-nut:not(:disabled):active,
#studentResultScreen .kq-bg-tl:active { transform:translate3d(0,1px,0) scale(.98) !important; transition-duration:.1s !important; }
#studentResultScreen .kq-bg-che-do button.on { background:linear-gradient(115deg,#8b0711,#c0121f) !important; color:#ffe08a !important; border-color:#6e0410 !important; box-shadow:0 3px 0 #4d0209,0 8px 16px #8b071126 !important; transform:none; }

/* ---------- Chip / tem ---------- */
#studentResultScreen .tg .tg-chip,
#studentResultScreen .kq-bg-nhan,
#studentResultScreen .badge-status {
  border:1px solid transparent !important; border-radius:999px !important; box-shadow:none !important; filter:none !important; font-weight:700 !important; padding:4px 11px !important;
  background:#f3eadb; color:#5d4a3a;
}
#studentResultScreen .tg .tg-chip.xanh, #studentResultScreen .kq-bg-nhan.da { background:#e3f6e8 !important; color:#1b6b3e !important; border-color:#bfe6cb !important; }
#studentResultScreen .tg .tg-chip.cam { background:#fff0db !important; color:#8a4300 !important; border-color:#f6d3a6 !important; }
#studentResultScreen .tg .tg-chip.vang { background:#fff3c8 !important; color:#6b4f00 !important; border-color:#f2d67c !important; animation:hs-chip-nhip 2.4s ease-in-out infinite; }
#studentResultScreen .tg .tg-chip.do { background:#ffe5e5 !important; color:#9b0d22 !important; border-color:#f5c0c0 !important; }
#studentResultScreen .tg .tg-chip.lam { background:#e3edff !important; color:#16458f !important; border-color:#c3d6fa !important; }
@keyframes hs-chip-nhip { 50%{ box-shadow:0 0 0 5px #ffd24d33; } }
#studentResultScreen .kq-hp-tem { border-width:2px !important; border-radius:10px !important; box-shadow:0 6px 14px #8b071118 !important; font-size:19px; }
#studentResultScreen .kq-hp-tem.chua:not(.kq-bg-tem-dung) { animation:hs-tem-dap .9s var(--hs-nay) .3s backwards,mvTemNhay 2.4s ease-in-out 1.2s infinite; }
@keyframes hs-tem-dap { from{opacity:0;transform:rotate(-6deg) scale(1.8)} to{opacity:1;transform:rotate(-6deg) scale(1)} }

/* ---------- Ô thông báo / hướng dẫn ---------- */
#studentResultScreen .kq-hp-huong-dan,
#studentResultScreen .tg .tg-bao,
#studentResultScreen .hc-quy-dinh,
#studentResultScreen .kq-nx,
#studentResultScreen .kq-nxb {
  background:#fff6df !important; color:#4d3a2c !important; border:1px solid #f0d9a8 !important; border-left:4px solid #f2b63a !important; border-radius:12px !important;
  box-shadow:none !important; line-height:1.6;
}
#studentResultScreen .tg .tg-bao.do { background:#fff1f1 !important; color:#9b0d22 !important; border-color:#f5c9c9 !important; border-left-color:#d32f3a !important; }
#studentResultScreen .kq-nx { border-left-color:#c0121f !important; }
#studentResultScreen .kq-nx b { color:#b20b18; }

/* ---------- Học phí ---------- */
#studentResultScreen .kq-hp { padding:22px !important; }
#studentResultScreen .kq-hp .kt-nhom-nhan { color:#b20b18 !important; font-style:italic; }
#studentResultScreen .kq-hp .pill { padding:9px 16px !important; font-size:14px !important; }
#studentResultScreen .kq-hp .pill.active { transform:translate3d(0,-1px,0); }
#studentResultScreen .kq-hp .pill:disabled { background:#f6f1e7 !important; box-shadow:none !important; }
#studentResultScreen .kq-hp .kt-ds-chon > .d-flex { border-bottom:1px dashed var(--hs-vien-dam) !important; animation:hs-dong-vao .45s var(--hs-em) backwards; }
@keyframes hs-dong-vao { from{opacity:0;transform:translate3d(-10px,0,0)} to{opacity:1;transform:none} }
#studentResultScreen .kt-tong-hang,
#studentResultScreen .kq-hp-tong {
  border:1px solid #c99a2e !important; border-radius:14px !important; padding:12px 18px !important;
  background:linear-gradient(115deg,#ffe582,#ffc42e 60%,#ffb21f) !important; box-shadow:0 8px 20px #c9962e33,inset 0 1px 0 #fff9 !important;
}
#studentResultScreen .kt-tong { display:inline-block; animation:hs-so-nay .6s var(--hs-nay) backwards; }
@keyframes hs-so-nay { from{transform:scale(.7);opacity:.2} to{transform:none;opacity:1} }
#studentResultScreen .kq-hp .hs-qr-slot .qr-ck-img { border:1px solid var(--hs-vien) !important; border-radius:16px !important; box-shadow:0 18px 40px #4e30142a !important; animation:hs-qr-vao .7s var(--hs-em) backwards; }
@keyframes hs-qr-vao { from{opacity:0;transform:translate3d(0,18px,0) scale(.96)} to{opacity:1;transform:none} }
#studentResultScreen .kq-hp-tieu-de { border-radius:16px 16px 0 0; border-bottom:0 !important; text-shadow:1px 2px 0 #4c0408 !important; }

/* ---------- Kết quả học tập: bảng buổi học ---------- */
#studentResultScreen .table-responsive { overflow:hidden; }
#studentResultScreen .table > thead > tr > th:not(#kqExportArea *) { background:linear-gradient(115deg,#8b0711,#c0121f 70%,#d2331f) !important; border-bottom:0 !important; }
#studentResultScreen .table > tbody > tr > td { transition:background-color .3s ease; }
@media (hover:hover) { #studentResultScreen .table > tbody > tr:hover > td { background:#fff4dc !important; } }
/* Các dòng hiện lần lượt mỗi khi mở tab */
#studentResultScreen .table > tbody > tr { animation:hs-dong-vao .55s var(--hs-em) backwards; }
#studentResultScreen .table > tbody > tr:nth-child(2) { animation-delay:.04s; } #studentResultScreen .table > tbody > tr:nth-child(3) { animation-delay:.08s; }
#studentResultScreen .table > tbody > tr:nth-child(4) { animation-delay:.12s; } #studentResultScreen .table > tbody > tr:nth-child(5) { animation-delay:.16s; }
#studentResultScreen .table > tbody > tr:nth-child(6) { animation-delay:.2s; } #studentResultScreen .table > tbody > tr:nth-child(7) { animation-delay:.24s; }
#studentResultScreen .table > tbody > tr:nth-child(8) { animation-delay:.28s; } #studentResultScreen .table > tbody > tr:nth-child(n+9) { animation-delay:.32s; }

/* ---------- Bài giảng: thanh tiến độ, nhóm chương, thẻ buổi ---------- */
#studentResultScreen .kq-bg-tien-do { height:16px; border:1px solid var(--hs-vien-dam) !important; border-radius:999px !important; background:#f6eedd !important; box-shadow:inset 0 1px 3px #4e30141f !important; }
#studentResultScreen .kq-bg-tien-do > div { border-radius:999px; border-right:0 !important; transform-origin:left; animation:hs-thanh-vao 1.4s var(--hs-em) .2s backwards,hs-soc 1.2s linear infinite;
  background:repeating-linear-gradient(115deg,#ffffff38 0 8px,transparent 8px 18px) 0 0/40px 100%,linear-gradient(90deg,#c0121f,#e8452c 60%,#ffc42e) !important; }
@keyframes hs-thanh-vao { from{transform:scaleX(0)} to{transform:none} }
@keyframes hs-soc { to{ background-position:40px 0,0 0; } }
#studentResultScreen .kq-bg-tien-do > span { font-size:12px; color:#3a2410; text-shadow:0 1px 0 #fff8; }
#studentResultScreen .kq-bg-nhom { overflow:hidden; }
#studentResultScreen .kq-bg-nhom > summary { padding:13px 16px; background:linear-gradient(115deg,#7a0610,#b80d1b 65%,#c9261c) !important; color:#fff4dc; border:0 !important; transition:filter .3s ease; }
#studentResultScreen .kq-bg-nhom > summary:hover { filter:brightness(1.08); }
#studentResultScreen .kq-bg-nhom .kq-bg-mui { transition:transform .5s var(--hs-nay); }
#studentResultScreen .kq-bg-nhom[open] > .kq-bg-nhom-ds { animation:hs-mo-nhom .55s var(--hs-em); }
@keyframes hs-mo-nhom { from{opacity:0;transform:translate3d(0,-10px,0)} to{opacity:1;transform:none} }
#studentResultScreen .kq-bg-nhom-ds { background:#fffbf2 !important; padding:14px 14px 4px; }
#studentResultScreen .kq-bg-the { border:1px solid var(--hs-vien) !important; border-radius:14px !important; box-shadow:0 2px 6px #4e301410 !important; background:#fff !important;
  transition:transform .5s var(--hs-em),box-shadow .5s var(--hs-em),border-color .3s ease !important; }
#studentResultScreen .kq-bg-the.da-xem { background:linear-gradient(165deg,#fbfff9,#f1faf1) !important; }
#studentResultScreen .kq-bg-the .kq-bg-xem { font-size:19px !important; padding:7px 15px !important; }
@media (hover:hover) {
  #studentResultScreen .kq-bg-the:hover { transform:translate3d(4px,-2px,0) !important; border-color:#e8c27a !important; box-shadow:-4px 0 0 #f2b63a,0 14px 28px #6c3d1922 !important; }
  #studentResultScreen .kq-bg-the:hover .kq-bg-huy { transform:rotate(-10deg) scale(1.1); }
}
#studentResultScreen .kq-bg-the .kq-bg-huy { transition:transform .5s var(--hs-nay); }
#studentResultScreen .kq-bg-kt { border-top:1px dashed #e6b9b9 !important; }

/* ---------- Bài kiểm tra ---------- */
#studentResultScreen .tg .ltn-diem b { display:inline-block; color:#b20b18; font-size:1.25em; }
#studentResultScreen .tg .ltn-kq { border-radius:10px !important; border-width:1px !important; transition:transform .35s var(--hs-em); }
#studentResultScreen .tg .ltn-kq:hover { transform:translate3d(0,-2px,0); }

/* ---------- Bổ trợ: chọn ngày ---------- */
#studentResultScreen .dkph .dkph-ngay-ds { padding:6px 4px 10px; margin:0 -4px; scroll-snap-type:x proximity; scrollbar-width:none; }
#studentResultScreen .dkph .dkph-ngay-ds::-webkit-scrollbar { display:none; }
#studentResultScreen .dkph .dkph-ngay { scroll-snap-align:center; background:#fff !important; border:1px solid var(--hs-vien-dam) !important; border-radius:14px !important; box-shadow:0 2px 0 var(--hs-vien) !important;
  transition:transform .45s var(--hs-nay),box-shadow .35s var(--hs-em),background-color .3s ease,border-color .3s ease !important; }
#studentResultScreen .dkph .dkph-ngay.on { background:linear-gradient(#ffe582,#ffc42e) !important; border-color:#9a6a1c !important; box-shadow:0 4px 0 #9a6a1c,0 12px 22px #c9962e40 !important; transform:translate3d(0,-3px,0); }
#studentResultScreen .dkph .dkph-ngay.het { opacity:.55; }
@media (hover:hover) { #studentResultScreen .dkph .dkph-ngay:not(.on):hover { transform:translate3d(0,-3px,0); border-color:#e0b765 !important; box-shadow:0 5px 0 #e8d3a8,0 12px 20px #8b581420 !important; } }
#studentResultScreen .dkph .dkph-gio { color:#b20b18; }
#studentResultScreen .dkbt-form,
#studentResultScreen .hc-form { animation:hs-mo-nhom .45s var(--hs-em); }
#studentResultScreen .tg .tg-o,
#studentResultScreen .form-control,
#studentResultScreen .form-select {
  background:#fff !important; color:var(--hs-chu) !important; border:1px solid var(--hs-vien-dam) !important; border-radius:11px !important; box-shadow:none !important;
  transition:border-color .3s ease,box-shadow .3s ease !important;
}
#studentResultScreen .tg .tg-o:focus,
#studentResultScreen .form-control:focus,
#studentResultScreen .form-select:focus { border-color:#c0121f !important; box-shadow:0 0 0 4px #c0121f1c !important; outline:none; }
#studentResultScreen .tg details > summary { cursor:pointer; font-weight:700; color:#7a5636; }

/* ---------- Học chéo ---------- */
#studentResultScreen .hc-ph { padding:22px !important; }
#studentResultScreen .hc-buoi { padding:14px 16px !important; margin-bottom:10px !important; background:#fff !important; border:1px solid var(--hs-vien) !important; border-radius:14px !important;
  box-shadow:0 2px 6px #4e301410; transition:transform .5s var(--hs-em),box-shadow .5s var(--hs-em),border-color .3s ease; }
#studentResultScreen .hc-buoi.co-dk { background:linear-gradient(165deg,#fbfff9,#f1faf1) !important; border-color:#cfe9d6 !important; }
#studentResultScreen .hc-ls { border-top:1px dashed var(--hs-vien-dam) !important; }

/* ---------- Khung xem video bài giảng (nằm ngoài #studentResultScreen): bật lên êm + nền mờ — chỉ khi đang ở trang HS ---------- */
body:has(#studentResultScreen[style*="display: block"]) #videoModal .modal-dialog { transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease; }
body:has(#studentResultScreen[style*="display: block"]) #videoModal.fade:not(.show) .modal-dialog { transform:translate3d(0,30px,0) scale(.95); opacity:0; }
body:has(#studentResultScreen[style*="display: block"]) #videoModal .modal-content { border-radius:18px; overflow:hidden; box-shadow:0 30px 80px #1a0003aa; }
body:has(#studentResultScreen[style*="display: block"]) .modal-backdrop.show { opacity:.7; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

/* ---------- Điện thoại ---------- */
@media (max-width:600px) {
  #studentResultScreen .tg .tg-the, #studentResultScreen .kq-hp, #studentResultScreen .hc-ph { padding:14px !important; }
  #studentResultScreen .tg h2, #studentResultScreen .tg .tg-tieu-de { font-size:23px; }
  #studentResultScreen .kq-hp-dau .kq-ten-hs { font-size:24px !important; }
  #studentResultScreen .kq-hp-tem { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
  #studentResultScreen .kq-bg-tien-do > div { animation:none !important; }
}

/* Thư viện bài giảng — trang HS/PH (js/thu-vien-bai-giang.js). Nội dung trang HS có CSS zoom 1,14–1,42 (index.html):
   cỡ chữ / khoảng cách ở đây là trước khi phóng. Chuyển động chỉ transform / opacity / stroke. */
.hs-tv [hidden] { display:none !important; }
.hs-tv { color:#2d211a; }
/* ---- Đầu trang: đường dẫn + tiêu đề ---- */
.hs-tv-dau { margin:4px 0 16px; }
.hs-tv-duong { display:flex; align-items:center; gap:7px; font-size:10.5px; color:#8a6f58; }
.hs-tv-duong button { border:0; background:none; padding:0; color:#6b4e3a; font:inherit; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.hs-tv-duong button:hover { color:#b20b18; }
#studentResultScreen .hs-tv-dau h2 { position:relative; margin:8px 0 6px; padding-bottom:7px; font-family:'Be Vietnam Pro',sans-serif; font-weight:800; font-size:27px; letter-spacing:-.035em; color:#2b1d16; }
#studentResultScreen .hs-tv-dau h2::after { content:''; position:absolute; left:0; bottom:0; width:42px; height:3px; border-radius:3px; background:linear-gradient(90deg,#c0121f,#ffb21f); transform-origin:left; animation:hs-thanh-vao .9s var(--hs-em) .2s backwards; }
.hs-tv-dau p { margin:0; font-size:12px; color:#7a6350; }

/* ---- Banner khoá học + tiến độ ---- */
.hs-tv-banner { position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 205px; align-items:center; gap:14px; min-height:150px; padding:16px 16px 16px 26px;
  border:1px solid #5a0a10; border-radius:16px; box-shadow:0 12px 28px #5a0a1026;
  background:radial-gradient(ellipse at 62% 40%,#ff9d2a55,transparent 45%),repeating-linear-gradient(145deg,transparent 0 60px,#ffb93214 61px 63px,transparent 64px 120px),linear-gradient(115deg,#4f030a,#a10a17 50%,#6c040e); }
.hs-tv-banner.co-anh .hs-tv-banner-anh { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; opacity:.55; }
.hs-tv-banner::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg,transparent 38%,#fff6d01f 48%,#ffffff33 50%,transparent 62%); transform:translate3d(-100%,0,0); animation:hs-quet 9s var(--hs-em) 2s infinite; }
.hs-tv-banner-chu { min-width:0; }
.hs-tv-banner-the { display:flex; align-items:center; gap:10px; margin-bottom:8px; animation:hs-len .7s var(--hs-em) .1s backwards; }
.hs-tv-banner-the b { padding:3px 14px 2px; font:400 26px/1.1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:linear-gradient(#a50d18,#6e040d); border:1.5px solid #ffc637; border-radius:9px; box-shadow:0 0 14px #ffb21f55; transform:skew(-6deg); }
.hs-tv-banner-the span { font:400 23px/1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.04em; color:#ffd24d; text-shadow:0 2px 0 #4c0408; }
.hs-tv-banner-kh span { display:block; font:400 clamp(24px,2.4vw,33px)/1.08 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.025em; color:#fff6e3; text-shadow:2px 3px 0 #3c0a05; animation:hs-chu-vao .9s var(--hs-em) .25s backwards; }
.hs-tv-banner-kh span + span { padding-left:24px; color:#ffcf3c; animation-delay:.38s; }
.hs-tv-banner-hinh { width:100%; max-height:130px; overflow:visible; }
.hs-tv-banner-hinh .truc { fill:none; stroke:#ffd9a055; stroke-width:1.4; }
.hs-tv-banner-hinh .net { fill:none; stroke:#ffd36a; stroke-width:2.6; stroke-linecap:round; filter:drop-shadow(0 0 5px #ffb21f); stroke-dasharray:420; stroke-dashoffset:420; animation:hs-ve 2.2s var(--hs-em) .4s forwards; }
.hs-tv-banner-hinh .net.mo { opacity:.55; animation-delay:.8s; }
.hs-tv-banner-hinh text { fill:#ffcf5a; font:italic 600 26px 'Times New Roman',serif; filter:drop-shadow(0 0 6px #ffb21f99); animation:hs-troi 7s ease-in-out infinite alternate; }
.hs-tv-tien-do { position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; padding:14px 14px 15px; border-radius:13px; background:linear-gradient(165deg,#fffdf8,#fff4de); border:1px solid #f3d9a8; box-shadow:0 10px 24px #2a020833; animation:hs-len .8s var(--hs-em) .35s backwards; }
.hs-tv-tien-do > b { font-size:13px; color:#2b1d16; }
.hs-tv-tien-do-giua { display:flex; align-items:center; gap:12px; }
#studentResultScreen .hs-tv-vong { width:74px; height:74px; margin:0; padding:7px; flex:none; }
#studentResultScreen .hs-tv-vong b { font-size:19px; }
#studentResultScreen .hs-tv-vong b small { font-size:10px; }
.hs-tv-dem { font-size:11px; color:#5d4636; line-height:1.4; }
.hs-tv-dem small { display:block; color:#8a6f58; font-size:10px; }
.hs-tv-dem b { font-size:18px; color:#b20b18; }
.hs-tv-thanh { display:block; height:7px; border-radius:7px; background:#efe3d0; overflow:hidden; }
.hs-tv-thanh i { display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,#c0121f,#e8452c); transform-origin:left; animation:hs-thanh-vao 1.4s var(--hs-em) .4s backwards; }

/* ---- Hai cột ---- */
.hs-tv-cot { display:grid; grid-template-columns:230px minmax(0,1fr); gap:14px; align-items:start; margin-top:14px; }
.hs-tv-ben,.hs-tv-chinh { background:linear-gradient(165deg,#fffefb,#fff9ee); border:1px solid #e6d6bd; border-radius:15px; box-shadow:0 1px 2px #4e301412,0 6px 18px #4e30140d; }
.hs-tv-ben { padding:14px; display:flex; flex-direction:column; gap:10px; }
.hs-tv-ben-dau { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; color:#a10a17; }
.hs-tv-che-do { display:grid; grid-template-columns:1fr 1fr; padding:3px; border:1px solid #e6d6bd; border-radius:10px; background:#fff; }
.hs-tv-che-do button { border:0; border-radius:8px; padding:7px 4px; background:none; font-size:11.5px; font-weight:700; color:#5d4636; transition:background-color .3s ease,color .3s ease,box-shadow .3s ease; }
.hs-tv-che-do button.on { background:linear-gradient(115deg,#a50d18,#d0222b); color:#fff; box-shadow:0 4px 10px #a50d1833; }
.hs-tv-muc-ds { display:flex; flex-direction:column; gap:7px; }
.hs-tv-muc { position:relative; display:flex; align-items:center; gap:9px; width:100%; padding:10px; text-align:left; border:1px solid #ecdfca; border-radius:11px; background:#fff;
  transition:transform .45s var(--hs-em),border-color .3s ease,background-color .3s ease,box-shadow .35s ease !important; }
.hs-tv-muc > i:first-child { flex:none; font-size:17px; color:#e8a53a; }
.hs-tv-muc-chu { flex:1; min-width:0; }
.hs-tv-muc-chu b { display:block; font-size:12.5px; color:#2b1d16; }
.hs-tv-muc-chu small { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin-top:2px; font-size:10px; line-height:1.4; color:#8a6f58; overflow:hidden; }
.hs-tv-muc-dem { flex:none; padding:2px 8px; border-radius:999px; background:#f3eadb; font-size:10.5px; font-weight:800; color:#5d4636; }
.hs-tv-muc-dem.du { background:#e3f6e8; color:#1b6b3e; }
.hs-tv-muc-mui { flex:none; font-size:10px; color:#b59a7c; transition:transform .45s var(--hs-nay); }
.hs-tv-muc.on { background:#fdeeee; border-color:#efb8b8; box-shadow:inset 3px 0 0 #c0121f; }
.hs-tv-muc.on > i:first-child,.hs-tv-muc.on .hs-tv-muc-chu b { color:#b20b18; }
.hs-tv-deu { display:flex; align-items:center; gap:10px; margin-top:6px; padding:12px; text-align:left; border:1px solid #f0d9a8; border-radius:12px; background:linear-gradient(165deg,#fff9ea,#fff1cf); color:#5d4636; }
.hs-tv-deu > i:first-child { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#ffe3a3; color:#b20b18; font-size:14px; }
.hs-tv-deu span { flex:1; }
.hs-tv-deu b { display:block; font-size:12px; color:#a10a17; }
.hs-tv-deu small { display:block; margin-top:2px; font-size:10px; line-height:1.4; }

/* ---- Cột chính: tìm + lọc + lưới bài ---- */
.hs-tv-chinh { padding:14px 16px 18px; min-height:300px; }
.hs-tv-loc { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; }
.hs-tv-tim { flex:1 1 220px; display:flex; align-items:center; gap:9px; margin:0; padding:0 12px; height:40px; border:1px solid #dccab0; border-radius:11px; background:#fff; color:#8a6f58; transition:border-color .3s ease,box-shadow .3s ease; }
.hs-tv-tim:focus-within { border-color:#c0121f; box-shadow:0 0 0 4px #c0121f18; }
.hs-tv-tim input { flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; font-size:12.5px; color:#2b1d16; }
.hs-tv-loc-nut { display:flex; gap:7px; }
.hs-tv-loc-nut button { padding:8px 15px; border:1px solid #dccab0; border-radius:999px; background:#fff; font-size:11.5px; font-weight:700; color:#5d4636; transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .4s var(--hs-nay) !important; }
.hs-tv-loc-nut button.on { background:linear-gradient(115deg,#a50d18,#d0222b); border-color:#8b0711; color:#fff; box-shadow:0 5px 12px #a50d1830; }
#studentResultScreen .hs-tv-nhom h3 { margin:2px 0 3px; font-family:'Be Vietnam Pro',sans-serif; font-size:18px; font-weight:800; letter-spacing:-.02em; color:#7a0610; }
.hs-tv-nhom-dem { margin:0 0 12px; font-size:11px; color:#8a6f58; }
.hs-tv-nhom:not([hidden]) { animation:hs-tab-hien .5s var(--hs-em) backwards; }
.hs-tv-nhom + .hs-tv-nhom:not([hidden]) { margin-top:18px; }
.hs-tv-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:12px; }
.hs-tv-the { display:flex; flex-direction:column; overflow:hidden; border:1px solid #e6d6bd; border-radius:14px; background:#fff; box-shadow:0 2px 6px #4e301410;
  transition:transform .5s var(--hs-em),box-shadow .5s var(--hs-em),border-color .3s ease; animation:hs-len .55s var(--hs-em) backwards; }
.hs-tv-the:nth-child(2) { animation-delay:.06s; } .hs-tv-the:nth-child(3) { animation-delay:.12s; } .hs-tv-the:nth-child(4) { animation-delay:.18s; } .hs-tv-the:nth-child(n+5) { animation-delay:.24s; }
.hs-tv-anh { position:relative; display:block; width:100%; padding:0; border:0; overflow:hidden; aspect-ratio:16 / 9.5; cursor:pointer;
  background:radial-gradient(ellipse at 70% 35%,#ff8a2a40,transparent 55%),linear-gradient(140deg,#3d0207,#8c0a14 55%,#4a0309); }
.hs-tv-hinh { display:block; width:100%; height:100%; transition:transform 1s var(--hs-em); }
.hs-tv-hinh .luoi { fill:none; stroke:#ffffff0f; stroke-width:1; }
.hs-tv-hinh .truc { fill:none; stroke:#ffd9a070; stroke-width:1.3; }
.hs-tv-hinh .chu-truc { fill:#ffd9a0aa; font:italic 11px 'Times New Roman',serif; }
.hs-tv-hinh .net path,.hs-tv-hinh .net circle { fill:none; stroke:#ffcf4a; stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px #ffa51f); stroke-dasharray:640; stroke-dashoffset:640; animation:hs-ve 1.8s var(--hs-em) .25s forwards; }
.hs-tv-hinh .net .to { fill:#ffc83a2e; }
.hs-tv-hinh .net .phu { stroke:#fff3c8; stroke-width:1.6; stroke-dasharray:5 5; stroke-dashoffset:0; animation:none; opacity:.8; }
.hs-tv-hinh .net .cham { fill:#ffcf4a; stroke:none; animation:none; }
.hs-tv-hinh .nhan { fill:#ffe7b0; font:italic 600 16px 'Times New Roman',serif; filter:drop-shadow(0 1px 2px #000a); }
.hs-tv-play { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; background:#fff; color:#b20b18; font-size:14px; padding-left:3px;
  box-shadow:0 6px 16px #0006,0 0 0 6px #ffffff2e; transition:transform .5s var(--hs-nay),box-shadow .4s ease; }
.hs-tv-chu { display:flex; flex-direction:column; gap:8px; flex:1; padding:12px 13px 13px; }
#studentResultScreen .hs-tv-chu h4 { margin:0; font-family:'Be Vietnam Pro',sans-serif; font-size:13.5px; font-weight:800; line-height:1.4; color:#2b1d16; }
.hs-tv-tt { align-self:flex-start; display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:700; background:#fff3d6; color:#9a6a0c; border:1px solid #f4dca0; }
.hs-tv-tt.da { background:#e3f6e8; color:#1b6b3e; border-color:#bfe6cb; }
.hs-tv-links { display:flex; flex-wrap:wrap; gap:6px 12px; }
#studentResultScreen .hs-tv-link { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:2px 0 !important; border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important;
  font-size:11px !important; font-weight:600 !important; color:#5d4636 !important; text-decoration:none; transform:none !important; }
#studentResultScreen .hs-tv-link.kt i { color:#b20b18; }
#studentResultScreen .hs-tv-link.kt.mo { color:#b20b18 !important; font-weight:800 !important; }
#studentResultScreen .hs-tv-link.tat { opacity:.75; }
#studentResultScreen button.hs-tv-link:hover span { text-decoration:underline; text-underline-offset:3px; color:#b20b18; }
.hs-tv-link .kq-bg-tl-ten { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-tv-nut { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:9px 10px; border-radius:10px; border:1px solid #8b0711; font-size:12.5px; font-weight:800;
  color:#fff; background:linear-gradient(115deg,#a50d18,#d0222b); box-shadow:0 3px 0 #6e040d,0 8px 16px #a50d1826; }
.hs-tv-nut.lai { color:#b20b18; background:#fff; border-color:#efb8b8; box-shadow:0 2px 0 #f3d6d6; }
.hs-tv-trong { padding:22px 14px; text-align:center; font-size:12.5px; color:#8a6f58; border:1px dashed #e2cfb0; border-radius:12px; background:#fffaf0; }
@media (hover:hover) {
  .hs-tv-muc:hover { transform:translate3d(3px,0,0); border-color:#e8c27a; }
  .hs-tv-muc:hover .hs-tv-muc-mui { transform:translateX(3px); }
  .hs-tv-the:hover { transform:translate3d(0,-5px,0); border-color:#e8c27a; box-shadow:0 18px 32px #6c3d1926; }
  .hs-tv-the:hover .hs-tv-hinh { transform:scale(1.07); }
  .hs-tv-the:hover .hs-tv-play { transform:scale(1.15); box-shadow:0 8px 20px #0007,0 0 0 9px #ffd75a55; }
  .hs-tv-nut:not(.lai):hover { transform:translate3d(0,-2px,0); box-shadow:0 5px 0 #6e040d,0 14px 24px #a50d1838; }
  .hs-tv-nut.lai:hover { background:#fff0f0; }
  .hs-tv-loc-nut button:not(.on):hover,.hs-tv-che-do button:not(.on):hover { background:#fff3dc; border-color:#e0b765; }
  .hs-tv-deu:hover { transform:translate3d(0,-2px,0); }
}
.hs-tv-nut:active,.hs-tv-anh:active { transform:scale(.98); transition-duration:.1s; }

/* ---- Màn vừa / điện thoại ---- */
@media (max-width:900px) {
  .hs-tv-banner { grid-template-columns:minmax(0,1fr) 190px; }
  .hs-tv-banner-hinh { display:none; }
  .hs-tv-cot { grid-template-columns:minmax(0,1fr); }   /* minmax(0,…): hàng chương cuộn ngang không kéo giãn cả cột */
  .hs-tv-ben,.hs-tv-chinh { min-width:0; }
  .hs-tv-ben { position:static; }
  .hs-tv-muc-ds { flex-direction:row; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; scrollbar-width:none; }
  .hs-tv-muc-ds::-webkit-scrollbar { display:none; }
  .hs-tv-muc { flex:0 0 auto; width:auto; max-width:240px; scroll-snap-align:start; }
  .hs-tv-muc-mui,.hs-tv-deu { display:none; }
}
@media (max-width:600px) {
  .hs-tv-banner { grid-template-columns:1fr; padding:16px; gap:12px; }
  .hs-tv-banner-the b { font-size:22px; } .hs-tv-banner-the span { font-size:20px; }
  .hs-tv-banner-kh span { font-size:26px; }
  #studentResultScreen .hs-tv-dau h2 { font-size:24px; }
  .hs-tv-dau p,.hs-tv-duong { font-size:12px; }
  .hs-tv-chinh { padding:12px; }
  .hs-tv-loc-nut { width:100%; } .hs-tv-loc-nut button { flex:1; font-size:12px; padding:9px 6px; }
  .hs-tv-luoi { grid-template-columns:1fr; }
  #studentResultScreen .hs-tv-chu h4 { font-size:14px; }
  .hs-tv-tt,#studentResultScreen .hs-tv-link,.hs-tv-muc-chu small,.hs-tv-nhom-dem { font-size:11.5px !important; }
  .hs-tv-nut { font-size:13.5px; padding:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .hs-tv-hinh .net path,.hs-tv-hinh .net circle,.hs-tv-banner-hinh .net { stroke-dashoffset:0; }
  .hs-tv-banner::after { display:none; }
}

/* Học phí — trang HS/PH (js/hoc-phi-hs.js). Cỡ chữ là trước CSS zoom 1,14–1,42 của trang HS. Đầu trang dùng chung .hs-tv-dau. */
.hs-hp [hidden] { display:none !important; }
.hs-hp { color:#2d211a; }
/* ---- Banner + trạng thái tháng này ---- */
.hs-hp-banner { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; gap:18px; min-height:96px; padding:12px 14px 12px 18px; border:1px solid #5a0a10; border-radius:16px; box-shadow:0 12px 28px #5a0a1026;
  background:radial-gradient(ellipse at 22% 50%,#ff9d2a44,transparent 40%),repeating-linear-gradient(145deg,transparent 0 60px,#ffb93214 61px 63px,transparent 64px 120px),linear-gradient(115deg,#4f030a,#a10a17 50%,#6c040e); }
.hs-hp-banner::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg,transparent 38%,#fff6d01f 48%,#ffffff33 50%,transparent 62%); transform:translate3d(-100%,0,0); animation:hs-quet 9s var(--hs-em) 2s infinite; }
.hs-hp-banner-hinh { position:relative; flex:none; width:96px; height:72px; animation:hs-noi 6s ease-in-out infinite; }
.hs-hp-giay { position:absolute; left:14px; top:0; font-size:40px; color:#fff3d6; transform:rotate(-14deg); filter:drop-shadow(0 4px 6px #0005); }
.hs-hp-vi { position:absolute; left:0; bottom:0; font-size:48px; color:#8a4a1f; filter:drop-shadow(0 6px 8px #0006); }
.hs-hp-xu { position:absolute; right:2px; bottom:2px; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff1a8,#ffc42e 55%,#c98a12); color:#5a2a05; font-size:17px; box-shadow:0 0 0 3px #ffd75a66,0 6px 14px #0006; animation:hs-xu-xoay 4s ease-in-out infinite; }
@keyframes hs-xu-xoay { 0%,70%,100%{transform:rotateY(0)} 85%{transform:rotateY(180deg)} }
.hs-hp-banner-chu { flex:1; min-width:0; }
.hs-hp-banner-chu small { display:block; font:400 17px/1.1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.05em; text-transform:uppercase; color:#ffd24d; animation:hs-len .7s var(--hs-em) .1s backwards; }
.hs-hp-banner-chu b { display:block; margin-top:4px; text-wrap:balance; font:400 clamp(20px,2vw,27px)/1.12 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.02em; color:#fff6e3; text-shadow:2px 3px 0 #3c0a05; animation:hs-chu-vao .9s var(--hs-em) .2s backwards; }
.hs-hp-tt { flex:none; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:13px; background:linear-gradient(165deg,#fffdf8,#fff4de); border:1px solid #f3d9a8; box-shadow:0 10px 24px #2a020833; animation:hs-len .8s var(--hs-em) .35s backwards; }
.hs-hp-tt-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#fff0c4; color:#b77e1a; font-size:17px; box-shadow:0 0 0 4px #ffe6a7; }
.hs-hp-tt.da .hs-hp-tt-icon { background:#2fa65a; color:#fff; box-shadow:0 0 0 4px #c9efd5; animation:hs-dap .7s var(--hs-nay) .6s backwards; }
@keyframes hs-dap { from{transform:scale(.3);opacity:0} to{transform:none;opacity:1} }
.hs-hp-tt small { display:block; font-size:11px; font-weight:700; color:#5d4636; }
.hs-hp-tt b { display:inline-block; margin-top:5px; padding:3px 14px; border-radius:8px; font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:#9a6a0c; background:#fff3d6; border:1px solid #f2d67c; }
.hs-hp-tt.da b { color:#1b6b3e; background:#e3f6e8; border-color:#9fd9b2; }

/* ---- 3 thẻ số ---- */
.hs-hp-so { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:12px 0; }
.hs-hp-o { display:flex; align-items:center; gap:12px; padding:12px 14px; background:linear-gradient(165deg,#fffefb,#fff9ee); border:1px solid #e6d6bd; border-radius:14px; box-shadow:0 1px 2px #4e301412,0 6px 18px #4e30140d; }
.hs-hp-o-icon { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; font-size:18px; }
.hs-hp-o-icon.do { background:#fdeaea; color:#c0121f; } .hs-hp-o-icon.vang { background:#fff3d0; color:#c78a12; } .hs-hp-o-icon.cam { background:#ffeedb; color:#d0721a; }
.hs-hp-o > span:last-child { min-width:0; }
.hs-hp-o small { display:block; font-size:10.5px; color:#7a6350; }
.hs-hp-o b { display:inline-block; margin-top:2px; font-size:20px; font-weight:800; letter-spacing:-.02em; color:#a10a17; }
.hs-hp-o b[data-hp-tong-nho] { animation:hs-so-nay .5s var(--hs-nay); }
.hs-hp-chip { display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:2px 9px; border-radius:999px; font-size:10px; font-style:normal; font-weight:700; vertical-align:middle; background:#fff3d6; color:#9a6a0c; border:1px solid #f4dca0; }
.hs-hp-chip.da { background:#e3f6e8; color:#1b6b3e; border-color:#bfe6cb; }
.hs-hp-chip.truoc { margin:4px 0 0; background:#fff1d0; color:#8a5a00; border-color:#f2d67c; }

/* ---- Hai cột ---- */
.hs-hp-cot { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:12px; align-items:start; }
.hs-hp-trai { display:flex; flex-direction:column; gap:12px; min-width:0; }
.hs-hp-the { padding:14px 16px 16px; background:linear-gradient(165deg,#fffefb,#fff9ee); border:1px solid #e6d6bd; border-radius:15px; box-shadow:0 1px 2px #4e301412,0 6px 18px #4e30140d; min-width:0; }
.hs-hp-the-dau { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.hs-hp-the-dau > i { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#fdeaea; color:#c0121f; font-size:16px; }
.hs-hp-the-dau > div { flex:1; min-width:0; }
#studentResultScreen .hs-hp-the-dau h3 { margin:3px 0 0; font-family:'Be Vietnam Pro',sans-serif; font-size:16px; font-weight:800; color:#7a0610; letter-spacing:-.01em; }
.hs-hp-the-dau p { margin:2px 0 0; font-size:10.5px; color:#7a6350; }
.hs-hp-thang { display:grid; grid-template-columns:repeat(auto-fill,minmax(142px,1fr)); gap:8px; }
.hs-hp-o-thang > span:last-child { min-width:0; }
.hs-hp-o-thang b,.hs-hp-o-thang strong { white-space:nowrap; }
.hs-hp-o-thang { position:relative; display:flex; align-items:flex-start; gap:9px; padding:11px 10px; text-align:left; border:1px solid #e6d6bd; border-radius:12px; background:#fff;
  transition:transform .45s var(--hs-nay),border-color .3s ease,background-color .3s ease,box-shadow .35s ease !important; }
.hs-hp-o-thang b { display:block; font-size:12px; color:#2b1d16; }
.hs-hp-o-thang strong { display:block; margin-top:3px; font-size:13px; font-weight:800; color:#2b1d16; }
.hs-hp-o-thang small { display:block; margin-top:3px; font-size:9.5px; color:#8a6f58; line-height:1.35; }
.hs-hp-dau { flex:none; display:grid; place-items:center; width:20px; height:20px; margin-top:1px; border:1.5px solid #c9b495; border-radius:6px; background:#fff; color:#fff; font-size:11px; transition:background-color .25s ease,border-color .25s ease,transform .4s var(--hs-nay); }
.hs-hp-o-thang.on { border-color:#d23a3a; background:#fff5f4; box-shadow:0 0 0 2px #d23a3a26,0 8px 18px #a50d1814; }
.hs-hp-o-thang.on strong { color:#b20b18; }
.hs-hp-o-thang.on .hs-hp-dau,.hs-hp-dong-sach.on .hs-hp-dau { background:#c0121f; border-color:#c0121f; transform:scale(1.08); }
.hs-hp-o-thang.da { background:#f3fbf5; border-color:#cfe9d6; }
.hs-hp-o-thang.da .hs-hp-dau { width:26px; height:26px; border:0; border-radius:50%; background:#2fa65a; font-size:12px; }
.hs-hp-o-thang.khoa:not(.da) { opacity:.6; cursor:not-allowed; }
.hs-hp-nho { display:flex; align-items:center; gap:8px; margin:14px 0 8px; font-family:'Be Vietnam Pro',sans-serif; font-size:13.5px; font-weight:800; color:#7a0610; }
.hs-hp-sach { display:flex; flex-direction:column; gap:7px; }
.hs-hp-dong-sach { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; text-align:left; border:1px solid #e6d6bd; border-radius:11px; background:#fff; transition:border-color .3s ease,background-color .3s ease,transform .45s var(--hs-em) !important; }
.hs-hp-dong-sach b { flex:1; min-width:0; font-size:12.5px; font-weight:600; color:#2b1d16; }
.hs-hp-dong-sach strong { font-size:12.5px; font-weight:800; color:#2b1d16; white-space:nowrap; }
.hs-hp-sach-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#fdeaea; color:#c0121f; font-size:13px; }
.hs-hp-dong-sach.on { border-color:#d23a3a; background:#fff5f4; }
.hs-hp-dong-sach.khoa { opacity:.7; cursor:default; }
.hs-hp-dong-sach.khoa .hs-hp-dau { background:#2fa65a; border-color:#2fa65a; }
.hs-hp-luu-y { display:flex; align-items:center; gap:8px; margin:12px 0 8px; padding:9px 12px; border:1px solid #f0d9a8; border-radius:10px; background:#fff8e6; font-size:11px; color:#7a5636; }
.hs-hp-luu-y i { color:#d99a1a; }
.hs-hp-ds > div { display:flex; justify-content:space-between; gap:10px; padding:6px 2px; font-size:12px; border-bottom:1px dashed #e2cfb0; animation:hs-dong-vao .4s var(--hs-em) backwards; }
.hs-hp-ds small { color:#8a6f58; }
.hs-hp-tong { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:12px 16px; border-radius:12px; color:#fff;
  background:linear-gradient(115deg,#7a0610,#c0121f 65%,#d2331f); box-shadow:0 10px 22px #a50d1833; }
.hs-hp-tong span { font-size:14px; font-weight:800; }
.hs-hp-tong b { display:inline-block; font:400 26px/1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.03em; color:#ffd24d; text-shadow:1px 2px 0 #4c0408; animation:hs-so-nay .55s var(--hs-nay); }
.hs-hp-trong { grid-column:1 / -1; padding:16px; text-align:center; font-size:12px; color:#7a6350; border:1px dashed #e2cfb0; border-radius:10px; }
/* Lịch sử */
.hs-hp-ls table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; overflow:hidden; border:1px solid #ecdfca; border-radius:11px; }
#studentResultScreen .hs-hp-ls th { padding:8px 12px; text-align:left; font-family:'Be Vietnam Pro',sans-serif !important; font-size:11px; font-weight:700; letter-spacing:0; text-transform:none; color:#5d4636 !important; background:#f6eedd !important; border:0 !important; text-shadow:none !important; }
#studentResultScreen .hs-hp-qr .qr-share-btn,#studentResultScreen .hs-hp-qr .qr-copy-btn { font-family:'Be Vietnam Pro',sans-serif !important; font-size:13px !important; letter-spacing:0 !important; text-transform:none !important; }
#studentResultScreen .hs-hp-ls td { padding:9px 12px; border-top:1px solid #f0e6d4; background:#fff; font-family:'Be Vietnam Pro',sans-serif !important; font-style:normal; font-size:12px; letter-spacing:0; color:#2b1d16; }
#studentResultScreen .hs-hp-ls td:nth-child(2) { font-weight:700; }
.hs-hp-da { display:inline-flex; align-items:center; gap:6px; color:#1b6b3e; font-weight:700; }
.hs-hp-da i { color:#2fa65a; }
.hs-hp-xem-het { flex:none; align-self:center; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border:1px solid #dccab0; border-radius:9px; background:#fff; font-size:11px; font-weight:700; color:#5d4636; }

/* ---- Cột QR ---- */
.hs-hp-qr { position:sticky; top:12px; }
.hs-hp-qr .hs-qr-slot { text-align:center; }
#studentResultScreen .hs-hp-qr .qr-ck-img { display:block; width:100%; max-width:250px; margin:0 auto; border:1px solid #e6d6bd !important; border-radius:14px !important; box-shadow:0 14px 30px #4e301424 !important; animation:hs-qr-vao .7s var(--hs-em) backwards; }
.hs-hp-qr-tien { margin:12px auto 8px; padding:8px 14px; max-width:260px; border-radius:11px; font-size:21px; font-weight:800; color:#a10a17; background:linear-gradient(#ffe993,#ffc93f); border:1px solid #d9a52a; box-shadow:inset 0 1px 0 #fff9; animation:hs-so-nay .55s var(--hs-nay); }
.hs-hp-qr-nd { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 auto; max-width:300px; padding:7px 8px 7px 12px; border:1px solid #e6d6bd; border-radius:10px; background:#fff; font-size:11.5px; color:#5d4636; text-align:left; }
.hs-hp-qr-nd b { color:#2b1d16; letter-spacing:.02em; }
.hs-hp-qr-nd button { flex:none; display:grid; place-items:center; width:30px; height:30px; border:1px solid #e6d6bd; border-radius:8px; background:#fff9ee; color:#7a5636; transition:background-color .25s ease,color .25s ease,transform .35s var(--hs-nay) !important; }
.hs-hp-qr-nd button:hover { background:#fff1cf; transform:scale(1.08); }
.hs-hp-qr-nd button.xong { background:#2fa65a; border-color:#2fa65a; color:#fff; }
.hs-hp-qr-ghi { display:block; margin:5px 0 10px; font-size:10px; color:#8a6f58; }
#studentResultScreen .hs-hp-qr .qr-share-btn { display:flex; justify-content:center; width:100%; padding:10px; border-radius:10px !important; color:#fff !important; border:1px solid #8b0711 !important; background:linear-gradient(115deg,#a50d18,#d0222b) !important; box-shadow:0 3px 0 #6e040d,0 8px 16px #a50d1826 !important; }
#studentResultScreen .hs-hp-qr .qr-copy-btn { display:flex; justify-content:center; width:100%; padding:10px; }
#studentResultScreen .hs-hp-qr .qr-share-btn::after { display:none; }
.hs-hp-qr .hs-qr-slot > .text-center > .d-flex { flex-direction:column; gap:8px !important; }
.hs-hp-tu-ghi { display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 12px; border-radius:10px; background:#eaf8ee; border:1px solid #c6ead2; font-size:11px; color:#1b6b3e; }
.hs-hp-tu-ghi i { color:#2fa65a; }
.hs-hp-buoc { margin-top:12px; padding:12px; border:1px solid #f0d9a8; border-radius:12px; background:linear-gradient(165deg,#fff9ea,#fff4dc); }
.hs-hp-buoc > b { display:flex; align-items:center; gap:7px; font-size:12px; color:#2b1d16; }
.hs-hp-buoc > b i { color:#e0a520; }
.hs-hp-buoc ol { display:flex; flex-direction:column; gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.hs-hp-buoc li { position:relative; display:flex; align-items:center; gap:9px; font-size:11.5px; line-height:1.35; color:#5d4636; }
.hs-hp-buoc li + li::before { content:''; position:absolute; left:11px; top:-9px; height:10px; border-left:2px dotted #e0b765; }
.hs-hp-buoc li span { flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#ffd75a; color:#3a0a06; font-weight:800; font-size:11px; }
@media (hover:hover) {
  .hs-hp-o-thang:not(.khoa):not(.da):hover { transform:translate3d(0,-3px,0); border-color:#e0b765; box-shadow:0 10px 20px #6c3d1918; }
  .hs-hp-dong-sach:not(.khoa):hover { transform:translate3d(3px,0,0); border-color:#e0b765; }
  .hs-hp-o:hover .hs-hp-o-icon { transform:rotate(-8deg) scale(1.08); }
}
.hs-hp-o-icon { transition:transform .5s var(--hs-nay); }
.hs-hp-o-thang:not(.khoa):active { transform:scale(.97) !important; transition-duration:.1s !important; }

/* ---- Màn vừa / điện thoại ---- */
@media (max-width:900px) {
  .hs-hp-cot { grid-template-columns:minmax(0,1fr); }
  .hs-hp-qr { position:static; }
  /* 1 cột: mã QR ngay sau ô chọn khoản, chi tiết + lịch sử xuống dưới */
  .hs-hp-trai { display:contents; }
  .hs-hp-trai > .hs-hp-the:first-child { order:1; } .hs-hp-qr { order:2; } .hs-hp-chi-tiet { order:3; } .hs-hp-ls { order:4; }
}
@media (max-width:600px) {
  .hs-hp-banner { flex-wrap:wrap; padding:14px; }
  .hs-hp-banner-hinh { width:80px; height:62px; }
  .hs-hp-banner-chu b { font-size:24px; }
  .hs-hp-tt { width:100%; }
  .hs-hp-so { grid-template-columns:1fr; gap:8px; }
  .hs-hp-o b { font-size:19px; }
  .hs-hp-o small,.hs-hp-the-dau p,.hs-hp-luu-y,.hs-hp-tu-ghi { font-size:11.5px; }
  .hs-hp-banner-chu b { font-size:21px; }
  .hs-hp-thang { grid-template-columns:minmax(0,1fr); gap:7px; }
  .hs-hp-o-thang { align-items:center; }
  .hs-hp-o-thang > span:last-child { flex:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 10px; }
  .hs-hp-o-thang strong { margin:0; }
  .hs-hp-o-thang small,.hs-hp-o-thang .hs-hp-chip { flex-basis:100%; margin:0; font-size:10.5px; }
  .hs-hp-o-thang .hs-hp-chip { flex-basis:auto; }
  .hs-hp-ds > div b,.hs-hp-tong b,#studentResultScreen .hs-hp-ls td:nth-child(2) { white-space:nowrap; }
  .hs-hp-tong { padding:11px 13px; }
  .hs-hp-tong span { font-size:13px; }
  .hs-hp-tong b { font-size:22px; }
  #studentResultScreen .hs-hp-ls th,#studentResultScreen .hs-hp-ls td { padding:8px 9px; font-size:11.5px; }
  .hs-hp-buoc li { font-size:12.5px; }
  .hs-hp-ls table { font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce) { .hs-hp-banner::after { display:none; } }

/* Kết quả học tập (js/ket-qua-hs.js) + Bài kiểm tra của bạn (js/bai-kt-hs.js) — trang HS/PH.
   Dùng chung .hs-tv-* (thu-vien-bai-giang.css) và .hs-hp-* (hoc-phi-hs.css). Cỡ chữ là trước CSS zoom 1,14–1,42 của trang HS. */
.hs-kq [hidden],.hs-bkt [hidden] { display:none !important; }
.hs-hp-o-icon.xanh { background:#e3f6e8; color:#1f9a4d; } .hs-hp-o-icon.lam { background:#e5eeff; color:#2f63c8; }
.hs-hp-chip.lam { background:#e5eeff; color:#2f63c8; border-color:#c6d7fb; } .hs-hp-chip.xam { background:#f1ece4; color:#7a6a5a; border-color:#e2d8c8; }

/* ================= KẾT QUẢ ================= */
.hs-kq-dau { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 16px; }
.hs-kq-dau .hs-tv-dau { margin-bottom:12px; }
.hs-kq-cong-cu { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.hs-kq-chon-thang,.hs-kq-loc { display:inline-flex; align-items:center; gap:8px; margin:0; padding:0 10px; height:38px; border:1px solid #dccab0; border-radius:10px; background:#fff; color:#a10a17; font-size:12px; }
.hs-kq-chon-thang select,.hs-kq-loc select { border:0; outline:0; background:none; font:inherit; font-weight:700; color:#2b1d16; cursor:pointer; }
#studentResultScreen .hs-kq-tai { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border:1.5px solid #c0121f !important; border-radius:10px; background:#fff !important; color:#b20b18 !important; font-size:12px; font-weight:800; box-shadow:none !important; }
#studentResultScreen .hs-kq-tai:hover { background:#fff0f0 !important; transform:translateY(-2px); }
.hs-kq-banner { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; gap:18px; min-height:92px; padding:14px 22px; border:1px solid #5a0a10; border-radius:16px; box-shadow:0 12px 28px #5a0a1026;
  background:radial-gradient(ellipse at 88% 50%,#ff9d2a55,transparent 40%),repeating-linear-gradient(145deg,transparent 0 60px,#ffb93214 61px 63px,transparent 64px 120px),linear-gradient(115deg,#4f030a,#a10a17 50%,#6c040e); }
.hs-kq-banner::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg,transparent 38%,#fff6d01f 48%,#ffffff33 50%,transparent 62%); transform:translate3d(-100%,0,0); animation:hs-quet 9s var(--hs-em) 2s infinite; }
.hs-kq-avatar { flex:none; display:grid; place-items:center; width:60px; height:60px; border-radius:50%; font:400 32px/1 'Bangers','Be Vietnam Pro',sans-serif; color:#8b0711;
  background:radial-gradient(circle at 35% 30%,#fff3b0,#ffcf3c 60%,#d99a12); box-shadow:0 0 0 4px #ffd75a55,0 8px 18px #0005; animation:hs-dap .7s var(--hs-nay) .2s backwards; }
.hs-kq-ten { flex:none; padding-right:20px; border-right:1px solid #ffffff3d; }
.hs-kq-ten b { display:block; font-size:21px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.hs-kq-ten small { display:block; margin-top:3px; font-size:12px; font-weight:700; color:#ffd24d; }
.hs-kq-khau-hieu { flex:1; min-width:0; }
.hs-kq-khau-hieu b { display:block; font:400 clamp(20px,2vw,27px)/1.1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.02em; color:#ffd24d; text-shadow:1px 2px 0 #3c0a05; animation:hs-chu-vao .9s var(--hs-em) .25s backwards; }
.hs-kq-khau-hieu small { display:block; margin-top:4px; font-size:12px; color:#ffeccf; }
.hs-kq-mu { flex:none; position:relative; width:70px; height:56px; animation:hs-noi 6s ease-in-out infinite; }
.hs-kq-mu i:first-child { position:absolute; right:6px; top:0; font-size:40px; color:#2b1206; filter:drop-shadow(0 0 8px #ffb21f88); }
.hs-kq-mu i:last-child { position:absolute; left:0; bottom:0; font-size:30px; color:#fff1d2; transform:rotate(-20deg); filter:drop-shadow(0 4px 6px #0006); }
.hs-kq-so { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:12px 0; }
.hs-kq-so .hs-hp-o b em { font-size:.6em; font-style:normal; color:#7a6350; }
.hs-kq-so .hs-hp-o { animation:hs-len .55s var(--hs-em) backwards; }
.hs-kq-so .hs-hp-o:nth-child(2) { animation-delay:.06s; } .hs-kq-so .hs-hp-o:nth-child(3) { animation-delay:.12s; } .hs-kq-so .hs-hp-o:nth-child(4) { animation-delay:.18s; }
.hs-kq-hang { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:12px; align-items:start; margin-bottom:12px; }
.hs-kq-thang-nhan { flex:none; align-self:center; padding:4px 11px; border:1px solid #e6d6bd; border-radius:999px; background:#fff; font-size:10.5px; font-weight:700; color:#5d4636; }
.hs-kq-bd { display:block; width:100%; height:auto; overflow:visible; }
.hs-kq-bd .luoi { stroke:#efe3d0; stroke-width:1; }
.hs-kq-bd .truc { fill:#8a6f58; font-size:11px; font-family:'Be Vietnam Pro',sans-serif; }
.hs-kq-bd .vung { fill:url(#hsKqTo); animation:hs-tab-hien 1s var(--hs-em) .6s backwards; }
.hs-kq-bd .duong { fill:none; stroke:#d0222b; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:hs-ve-1 1.4s var(--hs-em) .2s forwards; }
@keyframes hs-ve-1 { to { stroke-dashoffset:0; } }
.hs-kq-bd .diem circle { fill:#fff; stroke:#f2a516; stroke-width:3; }
.hs-kq-bd .diem text:not(.truc) { fill:#b20b18; font:800 13px 'Be Vietnam Pro',sans-serif; }
.hs-kq-bd .diem { animation:hs-dap .5s var(--hs-nay) backwards; animation-delay:calc(.3s + var(--i) * .15s); transform-box:fill-box; transform-origin:center; }
.hs-kq-xu { display:flex; align-items:center; justify-content:center; gap:8px; width:fit-content; margin:6px auto 0; padding:6px 16px; border-radius:999px; font-size:12px; font-weight:700; }
.hs-kq-xu.len { background:#e3f6e8; color:#1b6b3e; } .hs-kq-xu.xuong { background:#fff1e0; color:#a2580a; } .hs-kq-xu.deu { background:#eef2ff; color:#2f4fa8; }
.hs-kq-nx-o { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; padding:12px 14px; border-radius:12px; border:1px solid; }
.hs-kq-nx-o > span { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font-size:15px; color:#fff; }
.hs-kq-nx-o.xanh { background:#f0faf3; border-color:#cfe9d6; } .hs-kq-nx-o.xanh > span { background:#2fa65a; }
.hs-kq-nx-o.vang { background:#fff8e6; border-color:#f2dca4; } .hs-kq-nx-o.vang > span { background:#f0ad1c; }
.hs-kq-nx-o b { display:block; font-size:13px; color:#2b1d16; }
.hs-kq-nx-o p { margin:3px 0 0; font-size:11.5px; line-height:1.55; color:#5d4636; }
.hs-kq-nx .hs-hp-luu-y { margin:2px 0 0; }
#kqNhanXetAi:empty { display:none; }
#kqNhanXetAi { margin-bottom:12px; }
.hs-kq-hang.duoi { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.hs-kq-bang { overflow-x:auto; border:1px solid #ecdfca; border-radius:11px; }
.hs-kq-bang table { width:100%; border-collapse:collapse; font-size:12px; }
#studentResultScreen .hs-kq-bang th { padding:8px 10px; text-align:left; font-family:'Be Vietnam Pro',sans-serif !important; font-size:11px; font-weight:700; letter-spacing:0; text-transform:none; color:#5d4636 !important; background:#f6eedd !important; border:0 !important; text-shadow:none !important; white-space:nowrap; }
#studentResultScreen .hs-kq-bang td { font-style:normal !important; font-size:12px !important; letter-spacing:0 !important; padding:8px 10px; border-top:1px solid #f0e6d4; background:#fff; color:#2b1d16; font-family:'Be Vietnam Pro',sans-serif; vertical-align:middle; }
.hs-kq-bang tbody tr { animation:hs-dong-vao .45s var(--hs-em) backwards; }
@media (hover:hover) { #studentResultScreen .hs-kq-bang tbody tr:hover td { background:#fff8e8; } }
.hs-kq-bt { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:6px; font-size:9.5px; font-style:normal; font-weight:700; background:#fff1d0; color:#8a5a00; }
.hs-kq-dd { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:7px; font-size:11px; font-weight:700; white-space:nowrap; background:#f3eadb; color:#5d4636; }
.hs-kq-dd.xanh { background:#e3f6e8; color:#1b6b3e; } .hs-kq-dd.lam { background:#e5eeff; color:#2f63c8; } .hs-kq-dd.vang { background:#fff3d0; color:#8a5a00; }
.hs-kq-dd.cam { background:#fff0db; color:#a2580a; } .hs-kq-dd.do { background:#ffe5e5; color:#9b0d22; }
#studentResultScreen .hs-kq-diem { font-weight:800; color:#b20b18; } #studentResultScreen .hs-kq-diem.thap { color:#c2410c; }
#studentResultScreen .hs-kq-nxb td { background:#fffaf0 !important; font-size:11px; color:#5d4636; }
.hs-kq-nxb i { color:#d99a1a; }
.hs-kq-xem-het { display:flex; align-items:center; gap:7px; margin:10px 0 0 auto; border:0; background:none; font-size:12px; font-weight:800; color:#b20b18; }
.hs-kq-xem-het i { transition:transform .4s var(--hs-nay); } .hs-kq-xem-het:hover i { transform:translateX(4px); }
.hs-kq-bt-buoi { display:flex; align-items:center; gap:12px; margin-bottom:9px; padding:10px 12px; border:1px solid #ecdfca; border-radius:12px; background:#fff; animation:hs-len .5s var(--hs-em) backwards; }
.hs-kq-bt-ngay { flex:none; width:52px; overflow:hidden; text-align:center; border:1px solid #d23a3a; border-radius:8px; }
.hs-kq-bt-ngay b { display:block; padding:3px 0 1px; font-size:22px; font-weight:800; color:#fff; background:#c0121f; }
.hs-kq-bt-ngay small { display:block; padding:2px 0; font-size:9px; font-weight:700; color:#b20b18; }
.hs-kq-bt-buoi > div { flex:1; min-width:0; }
.hs-kq-bt-buoi > div b { display:block; font-size:12.5px; color:#2b1d16; }
.hs-kq-bt-buoi > div small { display:block; margin-top:3px; font-size:11px; color:#7a6350; }
.hs-kq-bt-buoi > div small i { color:#c0121f; }
.hs-kq-bt-ghi { display:block; margin-top:7px; text-align:center; font-size:10.5px; color:#8a6f58; }
.hs-kq-bt .hs-tv-nut { margin-top:4px; }
.hs-kq-trong { padding:20px 12px; text-align:center; font-size:12px; color:#8a6f58; }
.hs-kq-trong.nho { margin-bottom:10px; border:1px dashed #e2cfb0; border-radius:10px; background:#fffaf0; }

/* ================= BÀI KIỂM TRA ================= */
.hs-bkt-bao { display:flex; align-items:center; gap:8px; margin-bottom:12px; padding:10px 14px; border-radius:11px; background:#eaf8ee; border:1px solid #c6ead2; font-size:12px; font-weight:600; color:#1b6b3e; animation:hs-len .5s var(--hs-em); }
.hs-bkt-banner { grid-template-columns:110px minmax(0,1fr) 205px; }
.hs-bkt-banner .hs-tv-banner-kh span + span { padding-left:0; margin-top:4px; font-size:clamp(16px,1.5vw,20px); }
/* Khung lam-bai-tn.js là .tg — bỏ kiểu tiêu đề Bangers của .tg h2 (hoc-sinh-tab.css) cho đầu trang mới */
#studentResultScreen .hs-bkt .hs-tv-dau h2 { display:block; margin:8px 0 6px; font-family:'Be Vietnam Pro',sans-serif !important; font-style:normal; font-size:27px; font-weight:800; letter-spacing:-.035em; text-transform:none; color:#2b1d16; text-shadow:none; }
#studentResultScreen .hs-bkt .hs-tv-dau h2::after { right:auto; left:0; bottom:0; width:42px; height:3px; border-radius:3px; background:linear-gradient(90deg,#c0121f,#ffb21f); transform:none; }
#studentResultScreen .tg.ltn:has(.hs-bkt) { max-width:none; }
.hs-bkt-banner-hinh { position:relative; height:90px; animation:hs-noi 6s ease-in-out infinite; }
.hs-bkt-banner-hinh i:first-child { position:absolute; left:8px; top:2px; font-size:68px; color:#fff1d2; transform:rotate(-8deg); filter:drop-shadow(0 8px 12px #0006); }
.hs-bkt-banner-hinh i:last-child { position:absolute; left:62px; top:30px; font-size:38px; color:#ffc42e; transform:rotate(18deg); filter:drop-shadow(0 4px 6px #0006); }
.hs-bkt-so { grid-template-columns:repeat(4,minmax(0,1fr)); }
.hs-bkt-so .hs-hp-o b { font-size:22px; }
.hs-tv-muc i.do { color:#c0121f; } .hs-tv-muc i.cam { color:#ef8a12; } .hs-tv-muc i.xanh { color:#1f9a4d; } .hs-tv-muc i.lam { color:#2f63c8; } .hs-tv-muc i.xam { color:#9a8a78; }
.hs-bkt-ben-chuong { margin-top:6px; }
.hs-bkt-truoc { cursor:default; } .hs-bkt-truoc > i:first-child { background:#ffe3a3; color:#b77e1a; }
#studentResultScreen .hs-bkt-tieu-de { margin:2px 0 3px; font-family:'Be Vietnam Pro',sans-serif; font-size:17px; font-weight:800; color:#7a0610; }
.hs-bkt-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }
.hs-bkt-the { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #e6d6bd; border-radius:14px; background:#fff; box-shadow:0 2px 6px #4e301410;
  transition:transform .5s var(--hs-em),box-shadow .5s var(--hs-em),border-color .3s ease; animation:hs-len .5s var(--hs-em) backwards; }
.hs-bkt-the:nth-child(2) { animation-delay:.05s; } .hs-bkt-the:nth-child(3) { animation-delay:.1s; } .hs-bkt-the:nth-child(4) { animation-delay:.15s; } .hs-bkt-the:nth-child(n+5) { animation-delay:.2s; }
.hs-bkt-the.xong { background:linear-gradient(165deg,#fff,#f7fcf8); }
.hs-bkt-icon { flex:none; display:grid; place-items:center; width:48px; height:52px; border-radius:11px; font-size:22px; background:#fdeaea; color:#c0121f; }
.hs-bkt-the.xong .hs-bkt-icon { background:#e3f6e8; color:#1f9a4d; } .hs-bkt-the.sap .hs-bkt-icon { background:#e5eeff; color:#2f63c8; } .hs-bkt-the.dong .hs-bkt-icon { background:#f1ece4; color:#9a8a78; }
.hs-bkt-giua { flex:1; min-width:0; }
.hs-bkt-ten { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
#studentResultScreen .hs-bkt-ten h4 { margin:0; font-family:'Be Vietnam Pro',sans-serif; font-size:13.5px; font-weight:800; color:#2b1d16; line-height:1.35; }
.hs-bkt-ten .hs-hp-chip { margin:0; }
.hs-bkt-giua > p { margin:3px 0 0; font-size:11px; color:#7a6350; }
.hs-bkt-meta { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:10.5px; color:#5d4636; }
.hs-bkt-meta i { color:#c0121f; margin-right:3px; }
.hs-bkt-hanh { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; max-width:48%; }
.hs-bkt-hanh .hs-tv-nut { margin:0; width:auto; padding:9px 14px; white-space:nowrap; }
.hs-bkt-diem { display:flex; align-items:baseline; gap:4px; }
.hs-bkt-diem b { font-size:24px; font-weight:800; color:#1b8a45; letter-spacing:-.02em; }
.hs-bkt-diem span { font-size:12px; font-weight:700; color:#7a6350; } .hs-bkt-diem small { font-size:10px; color:#7a6350; }
.hs-bkt-dap-an { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid #bfe6cb; border-radius:9px; background:#effaf2; font-size:11.5px; font-weight:700; color:#1b6b3e; white-space:nowrap;
  transition:background-color .3s ease,transform .4s var(--hs-nay) !important; }
.hs-bkt-dap-an:hover { background:#dff4e6; transform:translateY(-2px); }
.hs-bkt-cho,.hs-bkt-ghi { font-size:10.5px; color:#7a6350; text-align:right; }
.hs-bkt-khoa { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:9px; background:#f1ece4; font-size:11px; font-weight:700; color:#8a7a68; white-space:nowrap; }
.hs-bkt-tai-lai { display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding:7px 12px; border:1px solid #dccab0; border-radius:9px; background:#fff; font-size:11.5px; font-weight:700; color:#5d4636; }
@media (hover:hover) { .hs-bkt-the:hover { transform:translate3d(0,-4px,0); border-color:#e8c27a; box-shadow:0 16px 28px #6c3d1922; } }

@media (max-width:900px) {
  .hs-kq-hang,.hs-kq-hang.duoi { grid-template-columns:minmax(0,1fr); }
  .hs-kq-so,.hs-bkt-so { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hs-kq-mu { display:none; }
  .hs-bkt-banner { grid-template-columns:minmax(0,1fr) 190px; } .hs-bkt-banner-hinh { display:none; }
}
@media (max-width:600px) {
  .hs-kq-banner { flex-wrap:wrap; gap:12px; padding:14px; }
  .hs-kq-ten { border-right:0; padding-right:0; }
  .hs-kq-khau-hieu { flex-basis:100%; }
  .hs-kq-so,.hs-bkt-so { gap:8px; }
  .hs-kq-so .hs-hp-o,.hs-bkt-so .hs-hp-o { flex-direction:column; align-items:flex-start; gap:6px; padding:10px; }
  .hs-kq-so .hs-hp-o-icon,.hs-bkt-so .hs-hp-o-icon { width:34px; height:34px; font-size:15px; }
  .hs-kq-cong-cu { width:100%; } .hs-kq-chon-thang,.hs-kq-tai { flex:1; justify-content:center; }
  .hs-kq-nx-o p,.hs-kq-dd,.hs-bkt-meta,.hs-bkt-giua > p { font-size:12px; }
  .hs-bkt-banner { grid-template-columns:1fr; }
  .hs-bkt-luoi { grid-template-columns:1fr; }
  .hs-bkt-the { flex-wrap:wrap; }
  .hs-bkt-hanh { flex-basis:100%; max-width:none; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; }
  .hs-bkt-hanh .hs-tv-nut { flex:1; }
}
@media (prefers-reduced-motion:reduce) { .hs-kq-bd .duong { stroke-dashoffset:0; } .hs-kq-banner::after { display:none; } }

/* Tab Học vụ — Đăng ký bổ trợ (js/dang-ky-bo-tro.js) + Học chéo (js/hoc-cheo.js veBuoiPhuHuynh), trang HS/PH.
   Dùng chung .hs-hp-o / .hs-hp-the / .hs-hp-chip (hoc-phi-hs.css). Cỡ chữ là trước CSS zoom 1,14–1,42 của trang HS. */
#studentResultScreen #kqTabbotro .tg.dkph { max-width:none; }
/* ---- Banner đầu tab: nền đêm truyện tranh + huy hiệu lớn + ô số nhanh (window.datSoHocVu) ---- */
.hs-hv-banner { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-bottom:14px; padding:34px 24px 18px; border:3px solid #15110f; border-radius:18px;
  box-shadow:6px 6px 0 #c0121f,0 16px 32px #5a0a1030; color:#fff;
  background:radial-gradient(circle,#ffffff12 1px,transparent 1.5px) 0 0/9px 9px,radial-gradient(ellipse at 12% 60%,#ff9d2a55,transparent 42%),repeating-linear-gradient(145deg,transparent 0 60px,#ffb93212 61px 63px,transparent 64px 120px),linear-gradient(115deg,#15110f,#5a040b 45%,#a10a17 75%,#3a0207); }
.hs-hv-banner::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg,transparent 38%,#fff6d026 48%,#ffffff33 50%,transparent 62%); transform:translate3d(-100%,0,0); animation:hs-quet 8s var(--hs-em) 1.5s infinite; }
.hs-hv-duong { position:absolute; left:24px; top:11px; display:flex; align-items:center; gap:8px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#ffd9c0; }
.hs-hv-duong i { font-size:8px; } .hs-hv-duong b { color:#ffd24d; }
#studentResultScreen .hs-hv-huy { flex:none; display:grid; place-items:center; width:62px; height:62px; border-radius:50%; font-size:25px; color:#fff; border:3px solid #fff;
  box-shadow:0 0 0 3px #15110f,4px 4px 0 3px #15110f,0 0 22px #ffb21f88; text-shadow:0 2px 0 #15110f; animation:hs-noi 5s ease-in-out infinite; }
#studentResultScreen .hs-hv-huy.huy-giap { background:linear-gradient(135deg,#e23636 0 50%,#f0b429 50% 100%); }
#studentResultScreen .hs-hv-huy.huy-nhen { background:repeating-conic-gradient(rgba(0,0,0,.55) 0 3deg,transparent 3deg 45deg),repeating-radial-gradient(circle,#e0202f 0 5px,#5c0710 5px 6.5px); }
.hs-hv-banner-chu { flex:1 1 220px; min-width:0; }
#studentResultScreen .hs-hv-banner h2 { margin:0; font:400 clamp(28px,2.8vw,38px)/1 'Bangers','Be Vietnam Pro',sans-serif !important; letter-spacing:.04em; text-transform:uppercase; color:#ffd24d; text-shadow:3px 3px 0 #7a0610,4px 4px 0 #15110f; animation:hs-chu-vao .8s var(--hs-em) backwards; }
.hs-hv-banner p { margin:6px 0 0; font-size:13px; color:#ffeccf; }
.hs-hv-banner-so { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; flex:1 1 420px; }
.hs-hv-banner-so:empty { display:none; }
.hs-hv-so { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 6px 7px; border:2px solid #15110f; border-radius:11px; background:linear-gradient(#fffdf6,#ffe9b0); box-shadow:3px 3px 0 #c0121f; transform:skew(-4deg); animation:hs-dap .55s var(--hs-nay) backwards; text-align:center; }
.hs-hv-so:nth-child(2) { animation-delay:.07s; } .hs-hv-so:nth-child(3) { animation-delay:.14s; } .hs-hv-so:nth-child(4) { animation-delay:.21s; }
.hs-hv-so i { font-size:12px; color:#c0121f; }
.hs-hv-so b { font:400 26px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.03em; color:#b20b18; text-shadow:1px 1px 0 #fff3b0; font-variant-numeric:tabular-nums; }
.hs-hv-so small { font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#5a0a10; line-height:1.2; }/* ---- Hai cột ---- */
.hs-hv-cot { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:12px; align-items:start; }
.hs-hv-ben { display:flex; flex-direction:column; gap:12px; min-width:0; }
.hs-hv-chinh { min-width:0; }
.hs-hv-trong { padding:16px; text-align:center; font-size:12px; color:#7a6350; border:1px dashed #e2cfb0; border-radius:11px; background:#fffaf0; }
.hs-hv-ngay-chon { display:flex; align-items:center; gap:10px; margin:6px 0 10px; font-size:12px; font-weight:600; color:#5d4636; }
.hs-hv-ngay-chon::after { content:''; flex:1; height:1px; background:#ecdfca; }
#studentResultScreen .hs-hv-buoi { border-radius:14px !important; }
#studentResultScreen .hs-hv-buoi .dkph-gio { font-size:20px; font-weight:800; color:#b20b18; }
#studentResultScreen .hs-hv-buoi .dkph-gio i { font-size:.75em; margin-right:4px; }
#studentResultScreen .hs-hv-buoi .dkbt-mo { min-height:46px; font-size:14.5px; }
.hs-hv-bu { display:flex; gap:12px; margin-top:12px; padding:12px 14px; border:1px solid #cfe0fb; border-radius:12px; background:#f1f6ff; }
.hs-hv-bu > i { flex:none; margin-top:2px; font-size:18px; color:#2f63c8; }
.hs-hv-bu b { display:block; font-size:12.5px; color:#1e3f86; }
.hs-hv-bu p { margin:3px 0 0; font-size:11px; line-height:1.55; color:#3c4f78; }
/* Lịch đã đăng ký */
.hs-hv-dk { display:flex; align-items:center; gap:12px; margin-bottom:9px; padding:10px 12px; border:1px solid #ecdfca; border-radius:12px; background:#fff; animation:hs-len .5s var(--hs-em) backwards; }
.hs-hv-ngay { flex:none; width:54px; overflow:hidden; text-align:center; border:1px solid #d23a3a; border-radius:8px; }
.hs-hv-ngay small { display:block; padding:2px 0; font-size:9.5px; font-weight:800; color:#fff; background:#c0121f; }
.hs-hv-ngay b { display:block; padding:3px 0; font-size:15px; font-weight:800; color:#b20b18; }
.hs-hv-dk-giua { flex:1; min-width:0; }
.hs-hv-dk-giua b { display:block; font-size:14px; color:#2b1d16; }
.hs-hv-dk-giua small { display:block; margin-top:2px; font-size:11px; color:#7a6350; }
.hs-hv-dk { flex-wrap:wrap; }
.hs-hv-dk-phai { flex:1 0 100%; display:flex; align-items:center; justify-content:space-between; gap:6px; padding-top:8px; border-top:1px dashed #ecdfca; }
#studentResultScreen .hs-hv-dk-phai .tg-nut.nho,#studentResultScreen .hs-hv-hc-phai .tg-nut.nho { min-height:32px; padding:0 10px; font-size:11.5px; }
.hs-hv-truoc { margin-top:8px; } .hs-hv-truoc summary { cursor:pointer; font-size:12px; font-weight:700; color:#7a5636; margin-bottom:8px; }
.hs-hv-thong-tin ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.hs-hv-thong-tin li { display:flex; gap:12px; align-items:flex-start; }
.hs-hv-thong-tin li > i { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#fdeaea; color:#c0121f; font-size:13px; }
.hs-hv-thong-tin li span { font-size:11px; line-height:1.5; color:#7a6350; }
.hs-hv-thong-tin li b { display:block; font-size:12.5px; color:#2b1d16; }
.hs-hv-goi-y { display:flex; align-items:center; gap:9px; padding:11px 14px; border:1px solid #f5c9c9; border-radius:12px; background:#fff3f2; font-size:11.5px; font-weight:600; color:#9b0d22; }
.hs-hv-goi-y i { color:#e0a520; font-size:15px; }
/* ---- Học chéo ---- */
.hs-hv-hc-buoi { display:flex; align-items:center; gap:12px; margin-bottom:9px; padding:11px 14px; border:1px solid #ecdfca; border-radius:13px; background:#fff;
  transition:border-color .3s ease,background-color .3s ease,box-shadow .35s ease,transform .45s var(--hs-em); animation:hs-len .5s var(--hs-em) backwards; }
.hs-hv-hc-buoi.duoc { cursor:pointer; }
.hs-hv-hc-buoi.on { border-color:#e8b14a; background:linear-gradient(165deg,#fffbef,#fff4d6); box-shadow:0 0 0 2px #f2c46a55; }
@media (hover:hover) { .hs-hv-hc-buoi.duoc:not(.on):hover { transform:translate3d(3px,0,0); border-color:#e0b765; } }
.hs-hv-radio { flex:none; width:18px; height:18px; border:2px solid #c9b495; border-radius:50%; transition:border .25s ease; }
.hs-hv-hc-buoi:not(.duoc) .hs-hv-radio { visibility:hidden; }
.hs-hv-hc-buoi.on .hs-hv-radio { border:5px solid #c0121f; }
.hs-hv-lich { flex:none; width:56px; overflow:hidden; text-align:center; border:1px solid #ecdfca; border-radius:9px; background:#fff; box-shadow:0 2px 4px #4e301412; }
.hs-hv-lich small { display:block; padding:2px 0; font-size:9px; font-weight:800; color:#fff; background:#c0121f; }
.hs-hv-lich b { display:block; font-size:21px; font-weight:800; line-height:1.15; color:#2b1d16; }
.hs-hv-lich em { display:block; padding-bottom:2px; font-size:9.5px; font-style:normal; color:#7a6350; }
.hs-hv-hc-giua { flex:1; min-width:0; }
.hs-hv-hc-giua > b { display:block; font-size:14px; color:#2b1d16; }
.hs-hv-hc-giua small { display:block; margin-top:3px; font-size:11px; color:#7a6350; }
.hs-hv-hc-giua small i { color:#c0121f; }
.hs-hv-chuyen b { color:#2b1d16; }
.hs-hv-hc-phai { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.hs-hv-chon-nut { padding:8px 18px; border:1px solid #dccab0; border-radius:10px; background:#fff; font-size:12px; font-weight:800; color:#2b1d16; transition:background-color .3s ease,transform .4s var(--hs-nay) !important; }
.hs-hv-chon-nut.on { background:linear-gradient(#ffe582,#ffc42e); border-color:#9a6a1c; box-shadow:0 3px 0 #9a6a1c; }
.hs-hv-chon-nut:not(.on):hover { background:#fff3dc; transform:translateY(-2px); }
.hs-hv-form .hc-form { display:block !important; animation:none; }
.hs-hv-nhan { display:block; margin:8px 0 5px; font-size:11.5px; font-weight:700; color:#5d4636; }
.hs-hv-o-doc { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #ecdfca; border-radius:10px; background:#f8f3ea; font-size:12.5px; font-weight:600; color:#2b1d16; }
.hs-hv-o-doc i { color:#c0121f; }
.hs-hv-mui { margin:4px 0 -2px; text-align:center; color:#e0a520; font-size:16px; animation:hs-noi 2.4s ease-in-out infinite; }
.hs-hv-hang-chon { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.hs-hv-hang-chon select { flex:1 0 100%; min-width:0; font-size:12.5px !important; }
.hs-hv-con { flex:none; margin:0 0 0 auto !important; }
.hs-hv-form textarea { font-size:12.5px !important; resize:vertical; }
.hs-hv-luot { margin-top:8px; font-size:11px; color:#7a6350; } .hs-hv-luot.canh-bao { color:#9a5a00; }
.hs-hv-gui { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:10px; padding:11px; border:1px solid #9a6a1c; border-radius:11px; font-size:14px; font-weight:800; color:#21170c;
  background:linear-gradient(#ffe582,#ffc42e); box-shadow:0 3px 0 #9a6a1c; transition:transform .4s var(--hs-nay),box-shadow .3s ease !important; }
.hs-hv-gui:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 5px 0 #9a6a1c,0 12px 22px #c9962e40; }
.hs-hv-gui:disabled { opacity:.6; }
.hs-hv-han { display:block; margin-top:8px; text-align:center; font-size:10.5px; color:#7a6350; } .hs-hv-han i { color:#c0121f; }
.hs-hv-quy-dinh { padding:14px; border:1px solid #f0d9a8; border-radius:14px; background:linear-gradient(165deg,#fff9ea,#fff1cf); }
.hs-hv-quy-dinh > b { display:flex; align-items:center; gap:8px; font-size:13px; color:#2b1d16; } .hs-hv-quy-dinh > b i { color:#d99a1a; }
.hs-hv-quy-dinh ol { margin:10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.hs-hv-quy-dinh li { display:flex; gap:9px; font-size:11px; line-height:1.5; color:#5d4636; }
.hs-hv-quy-dinh li span { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#f0ad1c; color:#fff; font-size:11px; font-weight:800; }
.hs-hv-ls { margin-top:12px; }
.hs-hv-ls-dong { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #ecdfca; border-radius:12px; background:#fff; margin-bottom:8px; }
.hs-hv-ls-dong .hs-hv-hc-giua > b i { margin:0 6px; color:#e0a520; }
.hs-hp-chip.vang { background:#fff3d0; color:#8a5a00; border-color:#f2d67c; } .hs-hp-chip.do { background:#ffe5e5; color:#9b0d22; border-color:#f5c0c0; }

/* ---- Tờ lịch chọn ngày ---- */
#studentResultScreen .dkph .hs-hv-to-lich { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:78px; padding:0 0 8px !important; overflow:hidden; }
#studentResultScreen .dkph .hs-hv-to-lich .hs-hv-to-thang { align-self:stretch; padding:3px 0; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff !important; background:#c0121f; opacity:1; }
#studentResultScreen .dkph .hs-hv-to-lich.het .hs-hv-to-thang { background:#b9a892; }
#studentResultScreen .hs-hv-dk-phai .tg-nut.nho { white-space:nowrap; }
#studentResultScreen .hs-hv-to-lich b { margin-top:4px; font:400 30px/1 'Bangers','Be Vietnam Pro',sans-serif; color:#2b1d16; }
#studentResultScreen .hs-hv-to-lich > span:not(.hs-hv-to-thang) { font-size:10.5px; font-weight:700; color:#7a6350; }
.hs-hv-to-tt { display:inline-flex; align-items:center; gap:4px; margin-top:3px; font-size:9.5px; font-style:normal; font-weight:800; color:#1b6b3e; }
.hs-hv-to-tt i { width:7px; height:7px; border-radius:50%; background:#2fa65a; }
.hs-hv-to-lich.co-dk .hs-hv-to-tt { color:#8a5a00; } .hs-hv-to-lich.co-dk .hs-hv-to-tt i { background:#f0ad1c; }
.hs-hv-to-lich.het .hs-hv-to-tt { color:#9a8a78; } .hs-hv-to-lich.het .hs-hv-to-tt i { background:#c9b9a5; }
#studentResultScreen .dkph .hs-hv-to-lich.on .hs-hv-to-thang { background:#15110f; color:#ffd24d; }
#studentResultScreen .dkph .hs-hv-to-lich.on b { color:#7a0610; }

/* ---- Thẻ ca bổ trợ (dòng thời gian) ---- */
#studentResultScreen .tg .hs-hv-ca { display:grid !important; grid-template-columns:76px minmax(0,1fr) auto; align-items:center; gap:10px 16px !important; padding:14px 16px !important; border-left:5px solid #c0121f !important; }
#studentResultScreen .tg .hs-hv-ca.da { border-left-color:#2fa65a !important; background:linear-gradient(165deg,#fbfff9,#f1faf1) !important; }
#studentResultScreen .tg .hs-hv-ca.tat { border-left-color:#c9b9a5 !important; opacity:.8; }
.hs-hv-ca-gio { display:flex; flex-direction:column; align-items:center; padding-right:14px; border-right:1px dashed #e2cfb0; }
.hs-hv-ca-gio b { font:400 26px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.03em; color:#b20b18; }
.hs-hv-ca-gio span { width:2px; height:12px; margin:4px 0; border-radius:2px; background:linear-gradient(#c0121f,#ffb21f); }
.hs-hv-ca-gio small { font-size:12px; font-weight:800; color:#7a6350; }
.hs-hv-ca-giua { min-width:0; display:flex; flex-direction:column; gap:8px; }
.hs-hv-tg { display:flex; align-items:center; gap:10px; }
.hs-hv-tg-anh { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font:400 19px/1 'Bangers','Be Vietnam Pro',sans-serif; color:#7a0610;
  background:radial-gradient(circle at 35% 30%,#fff3b0,#ffcf3c 60%,#d99a12); border:2px solid #fff; box-shadow:0 0 0 2px #15110f,2px 2px 0 2px #15110f; }
.hs-hv-tg-anh.cho { font-size:13px; background:linear-gradient(135deg,#f4f6f8,#aeb6bf); color:#1d2733; }
.hs-hv-tg small { display:block; font-size:10px; color:#8a6f58; } .hs-hv-tg b { display:block; font-size:14px; color:#2b1d16; }
.hs-hv-ca-the { display:flex; flex-wrap:wrap; gap:6px; }
.hs-hv-the-nho,.hs-hv-con-han { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:7px; font-size:10.5px; font-weight:700; background:#f6eedd; color:#5d4636; }
.hs-hv-con-han { background:#eef2ff; color:#2f4fa8; } .hs-hv-con-han.gap { background:#fff0db; color:#a2580a; animation:hs-chip-nhip 2s ease-in-out infinite; }
.hs-hv-ca-phai { align-self:start; }
.hs-hv-ca-hanh { grid-column:2 / -1; }
#studentResultScreen .hs-hv-ca .dkbt-mo { min-height:42px !important; width:auto !important; padding:0 22px !important; font-size:13.5px !important; float:right; }
#studentResultScreen .hs-hv-ca .dkbt-form { clear:both; padding:12px; border:1px dashed #e0b765; border-radius:12px; background:#fffaf0; }

/* ---- Vé đã đăng ký: răng cưa 2 bên ---- */
#studentResultScreen .hs-hv-ve { position:relative; border-left:5px solid #f0ad1c; }
#studentResultScreen .hs-hv-ve.tt-da_xac_nhan { border-left-color:#2fa65a; } #studentResultScreen .hs-hv-ve.tt-tu_choi { border-left-color:#d32f3a; } #studentResultScreen .hs-hv-ve.tt-da_huy { border-left-color:#c9b9a5; opacity:.75; }
.hs-hv-ve::before,.hs-hv-ve::after { content:''; position:absolute; top:28px; width:14px; height:14px; border-radius:50%; background:#fff9ee; border:1px solid #ecdfca; }
.hs-hv-ve::before { left:-9px; } .hs-hv-ve::after { right:-8px; }

/* ---- Học chéo: 2 vé buổi gốc → buổi mới ---- */
.hs-hv-ve-doi { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; margin:2px 0 6px; }
.hs-hv-ve-o { position:relative; padding:10px 12px; border:2px solid #15110f; border-radius:12px; text-align:center; box-shadow:3px 3px 0 #15110f; }
.hs-hv-ve-o.goc { background:#f6eedd; } .hs-hv-ve-o.moi { background:linear-gradient(#ffe993,#ffc93f); box-shadow:3px 3px 0 #c0121f; }
.hs-hv-ve-o.lat { animation:hs-dap .5s var(--hs-nay); }
.hs-hv-ve-o small { display:block; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#7a5636; }
.hs-hv-ve-o b { display:block; margin:2px 0; font:400 22px/1.05 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.03em; color:#7a0610; }
.hs-hv-ve-o span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; color:#2b1d16; }
.hs-hv-ve-mui { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#fff; font-size:14px; background:linear-gradient(135deg,#e23636 0 50%,#f0b429 50% 100%);
  border:2px solid #fff; box-shadow:0 0 0 2px #15110f,2px 2px 0 2px #15110f; animation:hs-noi 3s ease-in-out infinite; }

@media (max-width:900px) {
  .hs-hv-cot { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px) {
  .hs-hv-banner { padding:32px 14px 14px; gap:12px; }
  #studentResultScreen .hs-hv-huy { width:48px; height:48px; font-size:19px; }
  .hs-hv-banner-chu { flex:1 1 0; }
  .hs-hv-banner-so { flex-basis:100%; gap:6px; }
  .hs-hv-so b { font-size:21px; } .hs-hv-so small { font-size:8.5px; }
  #studentResultScreen .tg .hs-hv-ca { grid-template-columns:62px minmax(0,1fr) !important; padding:12px !important; }
  .hs-hv-ca-gio { padding-right:10px; } .hs-hv-ca-gio b { font-size:21px; }
  .hs-hv-ca-phai { grid-column:2; grid-row:2; justify-self:start; }
  .hs-hv-ca-hanh { grid-column:1 / -1; }
  #studentResultScreen .hs-hv-ca .dkbt-mo { float:none; width:100% !important; }
  .hs-hv-the-nho,.hs-hv-con-han { font-size:11.5px; }
  #studentResultScreen .hs-hv-banner h2 { font-size:26px; }
  .hs-hv-hc-buoi,.hs-hv-dk,.hs-hv-ls-dong { flex-wrap:wrap; }
  .hs-hv-hc-phai,.hs-hv-dk-phai { flex-basis:100%; flex-direction:row; justify-content:flex-end; }
  .hs-hv-hc-giua small,.hs-hv-dk-giua small,.hs-hv-quy-dinh li,.hs-hv-thong-tin li span,.hs-hv-bu p { font-size:12px; }
  .hs-hv-hang-chon { flex-wrap:wrap; } .hs-hv-hang-chon select { flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) { .hs-hv-banner::after { display:none; } }

/* Trang HS/PH — biểu tượng kiểu huy hiệu siêu anh hùng (thầy yêu cầu 03/10/2026) + bảng điều khiển Lớp live (js/lop-live.js)
   + đếm ngược thi tốt nghiệp THPT ở trang chủ lớp 12 (js/hoc-sinh-trang-chu.js). Chỉ phong cách chung (giáp đỏ–vàng, găng vàng,
   khiên tròn, sấm sét, gamma, vibranium…), không dùng logo / nhân vật của hãng nào. Cỡ chữ là trước CSS zoom của trang HS. */

/* ================= HUY HIỆU ================= */
#studentResultScreen {
  --huy-giap: linear-gradient(135deg,#e23636 0 50%,#f0b429 50% 100%);
  --huy-gang: linear-gradient(135deg,#ffe58a,#f0b429 42%,#a86d00);
  --huy-khien: radial-gradient(circle,#1f5fbf 0 34%,#c8102e 35% 50%,#f3f3f3 51% 66%,#c8102e 67%);
  --huy-sam: radial-gradient(circle at 30% 25%,#c9ecff,#2b6ce0 45%,#102a6b);
  --huy-gamma: radial-gradient(circle at 30% 25%,#a6f08f,#2e8b3e 55%,#1d4a24);
  --huy-vibranium: radial-gradient(circle at 30% 25%,#b7a8e8,#3b2f63 50%,#0e0a14);
  --huy-phep: repeating-conic-gradient(#ffb02e 0 10deg,#e2640f 10deg 20deg);
  --huy-phan-ung: radial-gradient(circle,#ffffff 0 14%,#8ff3ff 22%,#18b6d6 40%,#0b3b4f 58%,#6b7680 60% 68%,#2a3036 70%);
  --huy-nhen: repeating-conic-gradient(rgba(0,0,0,.55) 0 3deg,transparent 3deg 45deg),repeating-radial-gradient(circle,#e0202f 0 5px,#5c0710 5px 6.5px);
  --huy-bua: linear-gradient(135deg,#f4f6f8 0%,#aeb6bf 38%,#6d7782 62%,#c9d0d6 100%);
  --huy-muc: #15110f;
}
/* Ô biểu tượng trong thẻ (thẻ số, việc hôm nay, thông tin…) → huy hiệu tròn viền mực, bóng lệch kiểu truyện tranh */
#studentResultScreen :is(.hs-hp-o-icon,.th-viec-icon) {
  border-radius:50% !important; border:2px solid #fff; color:#fff !important;
  box-shadow:0 0 0 2px var(--huy-muc),2px 3px 0 2px var(--huy-muc) !important;
  text-shadow:0 1px 0 var(--huy-muc),0 0 5px #000a;
}
#studentResultScreen :is(.hs-hp-o-icon,.th-viec-icon).do { background:var(--huy-giap) !important; }
#studentResultScreen :is(.hs-hp-o-icon,.th-viec-icon).vang { background:var(--huy-gang) !important; color:#7a0610 !important; text-shadow:0 0 5px #fff,0 0 2px #fff; }
#studentResultScreen :is(.hs-hp-o-icon,.th-viec-icon).cam { background:var(--huy-phep) !important; }
#studentResultScreen :is(.hs-hp-o-icon,.th-viec-icon).xanh { background:var(--huy-gamma) !important; }
#studentResultScreen :is(.hs-hp-o-icon,.th-viec-icon).lam { background:var(--huy-khien) !important; }
#studentResultScreen :is(.hs-hp-o-icon,.th-viec-icon).tim { background:var(--huy-vibranium) !important; color:#e9dcff !important; }
#studentResultScreen :is(.hs-hp-o-icon,.th-viec-icon).xam { background:var(--huy-bua) !important; color:#1d2733 !important; text-shadow:0 1px 0 #fff; }
/* Biểu tượng đầu thẻ (Chọn khoản muốn đóng, Lịch sử…) → giáp đỏ–vàng; khung nhận xét tháng → gamma / găng */
#studentResultScreen .hs-hp-the-dau > i,#studentResultScreen .hs-hv-thong-tin li > i {
  background:var(--huy-giap) !important; color:#fff !important; border-radius:50% !important; border:2px solid #fff;
  box-shadow:0 0 0 2px var(--huy-muc),2px 3px 0 2px var(--huy-muc); text-shadow:0 1px 0 var(--huy-muc),0 0 5px #000a;
}
#studentResultScreen .hs-kq-nx-o > span { border:2px solid #fff; box-shadow:0 0 0 2px var(--huy-muc),2px 3px 0 2px var(--huy-muc); text-shadow:0 1px 0 var(--huy-muc); }
#studentResultScreen .hs-kq-nx-o.xanh > span { background:var(--huy-gamma); } #studentResultScreen .hs-kq-nx-o.vang > span { background:var(--huy-gang); color:#7a0610; text-shadow:0 0 4px #fff; }
/* Ô biểu tượng thẻ bài kiểm tra */
#studentResultScreen .hs-bkt-icon { border-radius:14px; border:2px solid #fff; color:#fff !important; box-shadow:0 0 0 2px var(--huy-muc),3px 3px 0 2px var(--huy-muc); text-shadow:0 1px 0 var(--huy-muc),0 0 6px #000a; background:var(--huy-giap) !important; }
#studentResultScreen .hs-bkt-the.xong .hs-bkt-icon { background:var(--huy-gamma) !important; }
#studentResultScreen .hs-bkt-the.sap .hs-bkt-icon { background:var(--huy-sam) !important; }
#studentResultScreen .hs-bkt-the.dong .hs-bkt-icon { background:var(--huy-bua) !important; color:#1d2733 !important; text-shadow:0 1px 0 #fff; }
/* Thanh mục trên + hàng mục con: huy hiệu tròn nhỏ */
#studentResultScreen #kqTabNav .kq-huy[class*="huy-"],#studentResultScreen .bt-muc .kq-huy[class*="huy-"] {
  display:grid; place-items:center; border-radius:50%; border:2px solid #fff; color:#fff;
  box-shadow:0 0 0 2px var(--huy-muc),2px 2px 0 2px var(--huy-muc); text-shadow:0 1px 0 var(--huy-muc),0 0 4px #000a !important;
  transition:transform .5s var(--hs-nay);
}
#studentResultScreen .hs-thanh-menu #kqTabNav .nav-link .kq-huy[class*="huy-"] { width:26px; min-width:26px; height:26px; font-size:11.5px; }
#studentResultScreen .bt-muc .kq-huy[class*="huy-"] { width:30px; height:30px; font-size:13px; }
#studentResultScreen :is(#kqTabNav,.bt-muc-nav) .kq-huy.huy-khien { background:var(--huy-khien); }
#studentResultScreen :is(#kqTabNav,.bt-muc-nav) .kq-huy.huy-gang { background:var(--huy-gang); color:#7a0610; text-shadow:0 0 4px #fff !important; }
#studentResultScreen :is(#kqTabNav,.bt-muc-nav) .kq-huy.huy-phan-ung { background:var(--huy-phan-ung); color:#0b3b4f; text-shadow:0 0 4px #fff !important; }
#studentResultScreen :is(#kqTabNav,.bt-muc-nav) .kq-huy.huy-sam { background:var(--huy-sam); }
#studentResultScreen :is(#kqTabNav,.bt-muc-nav) .kq-huy.huy-giap { background:var(--huy-giap); }
#studentResultScreen :is(#kqTabNav,.bt-muc-nav) .kq-huy.huy-gamma { background:var(--huy-gamma); }
#studentResultScreen :is(#kqTabNav,.bt-muc-nav) .kq-huy.huy-nhen { background:var(--huy-nhen); }
#studentResultScreen :is(#kqTabNav,.bt-muc-nav) .kq-huy.huy-vibranium { background:var(--huy-vibranium); }
#studentResultScreen #kqTabNav .nav-link.active .kq-huy[class*="huy-"],#studentResultScreen .bt-muc.active .kq-huy[class*="huy-"] { transform:rotate(-10deg) scale(1.12); box-shadow:0 0 0 2px var(--huy-muc),2px 2px 0 2px var(--huy-muc),0 0 12px #ffd24d; }
@media (hover:hover) {
  #studentResultScreen :is(.hs-hp-o,.th-viec,.th-loi,.lv-cb-dong):hover :is(.hs-hp-o-icon,.th-viec-icon) { transform:rotate(-12deg) scale(1.1); }
  #studentResultScreen #kqTabNav .nav-link:hover .kq-huy[class*="huy-"],#studentResultScreen .bt-muc:hover .kq-huy[class*="huy-"] { transform:rotate(-12deg) scale(1.12); }
}
#studentResultScreen :is(.hs-hp-o-icon,.th-viec-icon) { transition:transform .5s var(--hs-nay); }
@media (max-width:600px) {
  #studentResultScreen .hs-thanh-menu #kqTabNav .nav-link .kq-huy[class*="huy-"] { width:24px; min-width:24px; height:24px; font-size:10.5px; }
  /* hàng mục con: huy hiệu trên – chữ dưới cho đủ chỗ */
  #studentResultScreen .bt-muc-nav .bt-muc { flex-direction:column; gap:5px !important; padding:8px 4px !important; min-height:62px !important; font-size:11px !important; }
  #studentResultScreen .bt-muc .kq-huy[class*="huy-"] { width:26px; height:26px; font-size:11px; }
}

/* ================= LỚP LIVE: bảng điều khiển phòng học ================= */
.lv-dk { margin:0 0 6px; }
.lv-dem-khung { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; margin:-12px 0 16px; padding:20px 24px; border:2px solid var(--huy-muc);
  border-radius:0 0 18px 18px; color:#fff; box-shadow:0 12px 26px #5a0a1026;
  background:radial-gradient(circle,#ffffff14 1px,transparent 1.5px) 0 0/9px 9px,linear-gradient(115deg,#15110f,#3a0710 55%,#15110f); }
.lv-dem-khung::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 40%,#ffd24d22 50%,transparent 60%); transform:translate3d(-100%,0,0); animation:hs-quet 7s var(--hs-em) 1s infinite; }
.lv-dem-tieu-de { font:400 22px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#ffd24d; text-shadow:2px 2px 0 #7a0610; }
.lv-o-ds { display:flex; align-items:center; gap:8px; }
.lv-o { display:flex; flex-direction:column; align-items:center; min-width:70px; padding:8px 6px 6px; border:3px solid var(--huy-muc); border-radius:10px; background:linear-gradient(#fffdf6,#ffe9b0);
  box-shadow:4px 4px 0 #c0121f; transform:skew(-4deg); }
.lv-o b { display:block; font:400 40px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.04em; color:#b20b18; text-shadow:2px 2px 0 #ffd24d; font-variant-numeric:tabular-nums; }
.lv-o b.lat { animation:lv-lat .45s var(--hs-nay); }
@keyframes lv-lat { from { transform:translateY(-35%) scale(1.15); opacity:.2; } to { transform:none; opacity:1; } }
.lv-o small { margin-top:3px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#5a0a10; }
.lv-hai-cham { font:400 34px/1 'Bangers',sans-serif; color:#ffd24d; animation:lv-nhay 1s steps(1) infinite; }
@keyframes lv-nhay { 50% { opacity:.25; } }
.lv-dang { min-width:min(420px,100%); }
.lv-dang b { display:flex; align-items:center; gap:8px; font:400 26px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.lv-dang b i { font-size:12px; color:#ff3b3b; animation:hs-cham-do 1.4s ease-out infinite; border-radius:50%; }
.lv-thanh { display:block; height:12px; margin:10px 0 6px; overflow:hidden; border:2px solid var(--huy-muc); border-radius:999px; background:#ffffff22; }
.lv-thanh i { display:block; height:100%; border-radius:999px; background:repeating-linear-gradient(115deg,#ffffff40 0 8px,transparent 8px 16px) 0 0/32px 100%,linear-gradient(90deg,#c0121f,#ffb21f); animation:hs-soc 1s linear infinite; }
.lv-dang small { font-size:12px; color:#ffe7c4; }
.lv-dem-khung .hs-xem-lich { color:#ffe7c4; font-size:12px; }
.lv-hang { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-bottom:8px; }
.lv-tin ul { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
.lv-tin li { display:flex; align-items:center; gap:12px; }
.lv-tin .hs-hp-o-icon { flex:none; display:grid; place-items:center; width:38px; height:38px; font-size:15px; }
.lv-tin li small { display:block; font-size:10.5px; color:#8a6f58; }
.lv-tin li b { display:block; font-size:13px; color:#2b1d16; text-transform:none; }
.lv-cb-dong { display:flex; align-items:center; gap:12px; width:100%; margin-bottom:8px; padding:9px 12px; text-align:left; border:1px solid #ecdfca; border-radius:12px; background:#fff;
  transition:background-color .3s ease,border-color .3s ease,transform .45s var(--hs-em) !important; }
.lv-cb-dong .hs-hp-o-icon { flex:none; display:grid; place-items:center; width:34px; height:34px; font-size:14px; }
.lv-cb-chu { flex:1; min-width:0; }
.lv-cb-chu b { display:block; font-size:12.5px; color:#2b1d16; } .lv-cb-chu small { display:block; font-size:10.5px; color:#7a6350; }
.lv-tich { flex:none; display:grid; place-items:center; width:26px; height:26px; border:2px solid #c9b495; border-radius:8px; color:transparent; font-size:12px; transition:all .35s var(--hs-nay); }
.lv-cb-dong.xong { background:#f0faf3; border-color:#bfe6cb; }
.lv-cb-dong.xong .lv-tich { background:#2fa65a; border-color:#2fa65a; color:#fff; transform:rotate(-8deg) scale(1.08); }
.lv-cb-dong.xong .lv-cb-chu b { color:#1b6b3e; }
@media (hover:hover) { .lv-cb-dong:hover { transform:translate3d(3px,0,0); border-color:#e0b765; } }

/* ================= TRANG CHỦ LỚP 12: đếm ngược thi tốt nghiệp THPT ================= */
.th-thi { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin:18px 0 6px; padding:18px 22px; border:3px solid var(--huy-muc); border-radius:18px;
  box-shadow:6px 6px 0 #c0121f,0 16px 32px #5a0a1030; color:#fff;
  background:radial-gradient(circle,#ffffff12 1px,transparent 1.5px) 0 0/9px 9px,radial-gradient(ellipse at 15% 50%,#ff9d2a44,transparent 45%),linear-gradient(115deg,#15110f,#4f030a 50%,#15110f); }
.th-thi::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 40%,#ffd24d22 50%,transparent 60%); transform:translate3d(-100%,0,0); animation:hs-quet 7s var(--hs-em) 1.5s infinite; }
.th-thi-huy { flex:none; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; font-size:28px; color:#fff; background:var(--huy-giap); border:3px solid #fff;
  box-shadow:0 0 0 3px var(--huy-muc),4px 4px 0 3px var(--huy-muc),0 0 20px #ffb21f88; text-shadow:0 2px 0 var(--huy-muc); animation:hs-noi 5s ease-in-out infinite; }
.th-thi-chu { flex:1 1 260px; min-width:0; }
.th-thi .th-eyebrow { color:#ffd24d; }
#studentResultScreen .th-thi h2 { margin:4px 0; font:400 clamp(24px,2.4vw,32px)/1.05 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.04em; text-transform:uppercase; color:#fff; text-shadow:2px 2px 0 #c0121f; }
.th-thi-chu p { margin:0; font-size:12px; color:#ffe7c4; text-transform:none; }
.th-thi-o { display:flex; gap:8px; }
.th-thi-so { display:flex; flex-direction:column; align-items:center; min-width:66px; padding:7px 6px 5px; border:3px solid var(--huy-muc); border-radius:10px; background:linear-gradient(#fffdf6,#ffe9b0); box-shadow:4px 4px 0 #c0121f; transform:skew(-4deg); }
.th-thi-so:first-child { min-width:84px; background:linear-gradient(#ffe582,#ffc42e); }
.th-thi-so b { font:400 36px/1 'Bangers','Be Vietnam Pro',sans-serif; color:#b20b18; text-shadow:2px 2px 0 #fff3b0; font-variant-numeric:tabular-nums; }
.th-thi-so small { margin-top:2px; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#5a0a10; }

@media (max-width:900px) { .lv-hang { grid-template-columns:minmax(0,1fr); } }
@media (max-width:600px) {
  .lv-dem-khung { padding:16px 14px; }
  .lv-o { min-width:56px; } .lv-o b { font-size:30px; }
  .lv-hai-cham { font-size:24px; }
  .lv-o-ds { gap:5px; }
  .th-thi { padding:16px 14px; gap:12px 14px; }
  .th-thi-huy { width:46px; height:46px; font-size:20px; }
  .th-thi-chu { flex:1 1 0; }
  .th-thi-o { width:100%; justify-content:space-between; gap:6px; }
  .th-thi-so { flex:1; min-width:0; } .th-thi-so:first-child { min-width:0; }
  .th-thi-so b { font-size:28px; }
  .lv-tin li b,.lv-cb-chu b { font-size:13.5px; } .lv-cb-chu small,.lv-tin li small { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .lv-dem-khung::after,.th-thi::after { display:none; } .lv-hai-cham { animation:none; } }

/* Đợt bổ trợ — trang HS/PH, mục Học vụ → Bổ trợ (js/hs-dot-bo-tro.js). Đỏ rượu – vàng như hs-dat-coc.css / hoc-vu-hs.css.
   Khối nằm trong vùng nội dung có CSS zoom 1,14–1,42 (index.html) → cỡ chữ tính theo px "gốc". Hộp xác nhận (#dotBtDlg) nằm ngoài vùng zoom
   và dùng lại .dc-dlg của hs-dat-coc.css. */
.dotbt, .dotbt-dlg {
  --db-do:#b5091c; --db-do2:#8e1b24; --db-vang:#ffce42; --db-kem:#fff8e8; --db-muc:#211b18; --db-xam:#6b5d5d; --db-xanh:#1f7a4d; --db-vien:#e7d9b8;
}
.dotbt:empty { display:none; }
.dotbt-the { margin-bottom:14px; }
.dotbt-the .hs-hp-the-dau > i { background:#fff3d0; color:#c78a12; }
.dotbt-nho { margin:6px 0; font-size:11.5px; line-height:1.55; color:var(--db-xam); }

/* ---------- Giới thiệu đợt ---------- */
.dotbt-gt { margin-bottom:12px; padding:11px 13px; border:1px solid var(--db-vien); border-left:4px solid var(--db-do); border-radius:12px; background:var(--db-kem); }
.dotbt-gt p { margin:0; font-size:12px; line-height:1.65; color:#3d3029; }
.dotbt-gt p b { color:var(--db-do2); }
.dotbt-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.dotbt-ghi-chu { margin-top:8px !important; font-size:11.5px !important; font-style:italic; color:var(--db-xam) !important; }

/* ---------- Chip ---------- */
.dotbt-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:700; line-height:1.5; white-space:nowrap; background:#f1e9da; color:#6b5640; }
.dotbt-chip.xanh { background:#e0f2e8; color:var(--db-xanh); }
.dotbt-chip.do { background:#fde7e7; color:#b3262f; }
.dotbt-chip.cam { background:#ffe9d2; color:#a3520a; }
.dotbt-chip.vang { background:#fff3cd; color:#8a6a00; }
.dotbt-chip.tim { background:#ece6fb; color:#5a3fb5; }
.dotbt-chip.xam { background:#eee8de; color:#7a6e60; }

/* ---------- Nút ---------- */
.dotbt-nut { display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-top:6px; padding:8px 16px; border:1px solid #6e040d; border-radius:10px; background:linear-gradient(#d3202e,#a50d18); color:#fff; font:inherit; font-size:12px; font-weight:800; cursor:pointer; box-shadow:0 3px 0 #6e040d; transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease; }
.dotbt-nut:hover:not([disabled]) { transform:translateY(-2px); box-shadow:0 5px 0 #6e040d,0 10px 18px #a50d1838; }
.dotbt-nut:active:not([disabled]) { transform:translateY(1px); box-shadow:0 1px 0 #6e040d; transition-duration:.1s; }
.dotbt-nut.vang { border-color:#8b5814; background:linear-gradient(#ffdf71,#ffc636); color:#241b0f; box-shadow:0 3px 0 #8b5814; }
.dotbt-nut.vang:hover:not([disabled]) { box-shadow:0 5px 0 #8b5814,0 10px 18px #8b581430; }
.dotbt-nut[disabled] { opacity:.55; cursor:not-allowed; }
.dotbt-nut.tat { border-color:#bfae94; background:#e6dccb; color:#6b5d5d; box-shadow:0 2px 0 #bfae94; }

/* ---------- Thông báo / cổng nội quy (lớp .dotbt-coc giữ tên từ thời đặt cọc) ---------- */
.dotbt-bao { margin:0 0 12px; padding:10px 13px; border:1px solid #e0b04a; border-radius:12px; background:#fff3d6; font-size:12px; line-height:1.55; color:#5a4310; }
.dotbt-bao.do { border-color:#e3a4a8; background:#fdeaea; color:#7a1620; }
.dotbt-coc { position:relative; margin:0 0 14px; padding:14px 16px; border:2px solid var(--db-vang); border-radius:14px; color:#fff;
  background:radial-gradient(circle at 92% 12%,#ffce4233,transparent 45%),linear-gradient(160deg,#a5121e,#5a050c); box-shadow:0 8px 22px #5a050c33; }
.dotbt-coc-nhan { display:inline-block; margin-bottom:3px; font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--db-vang); }
.dotbt-coc > b { display:block; font-size:15px; font-weight:800; }
.dotbt-coc > p { margin:4px 0 6px; font-size:12px; line-height:1.55; color:#ffe9d6; }
.dotbt-coc > p b { color:var(--db-vang); }
.dotbt-coc-loi { margin-top:6px; font-size:12px; font-weight:700; color:#ffd2d2; }
.dotbt-coc-loi:empty { display:none; }
/* Dòng khiên (đang tham gia): "Con có N/3 khiên — …" */
.dotbt-khien { display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; padding:9px 12px; border:1px solid #e0b04a; border-left:4px solid #c78a12; border-radius:10px; background:linear-gradient(165deg,#fffbe9,#fff3d4); font-size:11.5px; font-weight:600; line-height:1.5; color:#5a4310; }
.dotbt-khien > i { flex:none; margin-top:2px; color:#c78a12; }
.dotbt-khien b { color:#8e1b24; }
.dotbt-khien.gap { border-color:#e3a4a8; border-left-color:#c0121f; background:#fdeaea; color:#7a1620; }
.dotbt-khien.gap > i { color:#c0121f; }

/* ---------- Lưới ca theo thứ ---------- */
.dotbt-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; align-items:start; }
.dotbt-thu { min-width:0; }
.dotbt-thu h4 { margin:0 0 6px; padding:5px 10px; border-radius:8px 8px 0 0; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#ffd24d; background:linear-gradient(115deg,#64030d,#bd0816); border-bottom:3px solid var(--db-vang); }
.dotbt-ca { display:grid; grid-template-columns:62px minmax(0,1fr); gap:6px 12px; margin-bottom:8px; padding:11px 12px; border:1px solid #e6d6bd; border-left:5px solid #c0121f; border-radius:12px; background:linear-gradient(165deg,#fffefb,#fff9ee); box-shadow:0 1px 2px #4e301412; transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease; }
.dotbt-ca:hover { transform:translateY(-2px); box-shadow:0 8px 18px #4e301420; }
.dotbt-ca.cheo { border-left-color:#7d5fd0; }
.dotbt-ca.day { border-left-color:#c9b9a5; background:#f6f1e8; }
.dotbt-ca.day .dotbt-ca-giua, .dotbt-ca.day .dotbt-ca-gio { opacity:.7; }
.dotbt-ca.cua-em { border-color:#e0a800; border-left-color:#2fa65a; background:linear-gradient(165deg,#fffbe9,#fff1c2); box-shadow:0 0 0 2px #ffce4266,0 8px 20px #c9962e33; }
.dotbt-ca-gio { display:flex; flex-direction:column; align-items:center; padding-right:10px; border-right:1px dashed #e2cfb0; }
.dotbt-ca-gio b { font:400 21px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.03em; color:#b20b18; }
.dotbt-ca-gio span { width:2px; height:10px; margin:3px 0; border-radius:2px; background:linear-gradient(#c0121f,#ffb21f); }
.dotbt-ca-gio small { font-size:11px; font-weight:800; color:#7a6350; }
.dotbt-ca-giua { min-width:0; }
.dotbt-ca-tg { font-size:11.5px; color:var(--db-xam); }
.dotbt-ca-tg i { margin-right:3px; color:#c78a12; }
.dotbt-ca-tg b { color:var(--db-muc); font-size:12.5px; }
.dotbt-ca-tin { display:flex; flex-wrap:wrap; gap:3px 10px; margin-top:3px; font-size:11px; color:var(--db-xam); }
.dotbt-ca-tin i { margin-right:2px; color:#b5091c; }
.dotbt-ngay-ds { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.dotbt-ngay-ds span { display:flex; flex-direction:column; align-items:center; min-width:46px; padding:2px 6px; border:1px solid var(--db-vien); border-radius:8px; background:#fff; font-size:11.5px; font-weight:800; color:#2b1d16; }
.dotbt-ngay-ds small { font-size:8.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#9a8a78; }
.dotbt-ca-phai { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding-top:7px; border-top:1px dashed #ecdfca; }
.dotbt-ca-phai .dotbt-nut { margin:0 0 0 auto; }

/* ---------- Đã đăng ký: lịch + tiến bộ ---------- */
.dotbt-lich-dau { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.dotbt-lich-dau h4 { margin:0; font-size:15px; font-weight:800; color:var(--db-do2); }
.dotbt-lich-dau p { margin:2px 0 0; font-size:11.5px; color:var(--db-xam); }
.dotbt-dong-thoi { position:relative; list-style:none; margin:0 0 12px; padding:0 0 0 18px; }
.dotbt-dong-thoi::before { content:''; position:absolute; left:6px; top:8px; bottom:8px; width:2px; border-radius:2px; background:linear-gradient(#c0121f,#ffb21f); }
.dotbt-buoi { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-bottom:6px; padding:8px 11px; border:1px solid var(--db-vien); border-radius:11px; background:#fff; font-size:12px; }
.dotbt-buoi::before { content:''; position:absolute; left:-17px; top:50%; width:11px; height:11px; margin-top:-5.5px; border-radius:50%; background:#c9b9a5; box-shadow:0 0 0 3px #fff9ee; }
.dotbt-buoi.tt-da_di::before { background:#2fa65a; } .dotbt-buoi.tt-vang::before { background:#d32f3a; } .dotbt-buoi.tt-sap_toi::before { background:#f0ad1c; }
.dotbt-buoi.tt-sap_toi { border-color:#ecd48a; background:#fffaea; }
.dotbt-buoi-k { font-weight:800; color:var(--db-do2); }
.dotbt-buoi-ngay { color:#3d3029; } .dotbt-buoi-ngay b { margin-right:3px; }
.dotbt-buoi-diem { margin-left:auto; font-size:11.5px; color:var(--db-xam); }
.dotbt-buoi-diem b { font-size:14px; color:#7a0610; }
.dotbt-buoi-diem.chua { font-style:italic; }
.dotbt-tien-bo { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:12px; align-items:stretch; margin-bottom:12px; }
.dotbt-bd-khung { padding:10px 12px; border:1px solid var(--db-vien); border-radius:12px; background:#fff; }
.dotbt-bd-khung h5 { margin:0 0 4px; font-size:11.5px; font-weight:800; color:var(--db-do2); }
.dotbt-bd { display:block; width:100%; height:auto; max-height:170px; }
.dotbt-bd-trong { padding:14px 4px; text-align:center; }
.dotbt-bd-luoi { stroke:#eadfc9; stroke-width:1; }
.dotbt-bd-muc { stroke:#e0a800; stroke-width:1; stroke-dasharray:4 3; }
.dotbt-bd-muc-nhan { font-size:8px; font-weight:700; fill:#a37a00; }
.dotbt-bd-nhan { font-size:9px; fill:#7a6350; font-weight:600; }
.dotbt-bd-duong { fill:none; stroke:#b5091c; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.dotbt-bd-cham { fill:#ffce42; stroke:#8e1b24; stroke-width:2; }
.dotbt-bd-so { font-size:10px; font-weight:800; fill:#7a0610; }
.dotbt-kl { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--db-vien); border-radius:12px; background:#f4efe6; }
.dotbt-kl-bieu { flex:none; font-size:26px; line-height:1; }
.dotbt-kl b { display:block; font-size:13px; line-height:1.45; color:var(--db-muc); }
.dotbt-kl p { margin:3px 0 0; font-size:11px; color:var(--db-xam); }
.dotbt-kl.xanh { border-color:#9fd3b4; background:linear-gradient(165deg,#f2fbf5,#e3f5ea); } .dotbt-kl.xanh b { color:#175c38; }
.dotbt-kl.vang { border-color:#ecd48a; background:linear-gradient(165deg,#fffbe9,#fff3cd); } .dotbt-kl.vang b { color:#6b5200; }
.dotbt-kl.do { border-color:#e3a4a8; background:linear-gradient(165deg,#fff4f4,#fdeaea); } .dotbt-kl.do b { color:#8a1520; }
.dotbt-mini { display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:11px 14px; border:1px dashed #cdb98c; border-radius:12px; background:var(--db-kem); }
.dotbt-mini > i { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; font-size:16px; background:#fff3d0; color:#c78a12; }
.dotbt-mini small { display:block; font-size:10.5px; color:var(--db-xam); }
.dotbt-mini b { font-size:13px; color:var(--db-do2); }
.dotbt-mini.co { border:2px solid var(--db-vang); border-style:solid; background:linear-gradient(165deg,#fffbe9,#ffefb8); }
.dotbt-mini.co b { font:400 30px/1.1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.03em; color:#7a0610; }
.dotbt-mini.co b em { font:700 13px 'Be Vietnam Pro',sans-serif; font-style:normal; color:var(--db-xam); }
.dotbt-nhac { margin:0 0 10px; padding:8px 12px; border-radius:10px; background:#fde7e7; font-size:11.5px; font-weight:600; line-height:1.5; color:#8a1520; }
.dotbt-nhac i { margin-right:4px; }
.dotbt-ca-lai { border-top:1px dashed var(--db-vien); padding-top:8px; }
.dotbt-ca-lai summary { cursor:pointer; font-size:12px; font-weight:700; color:var(--db-do2); }
.dotbt-ca-lai .dotbt-luoi { margin-top:8px; }

/* ---------- Phần đăng ký buổi lẻ cũ khi đã có đợt (dang-ky-bo-tro.js) ---------- */
.dotbt-le > summary { display:none; }
.dotbt-le.co-dot { margin-top:6px; padding:0; }
.dotbt-le.co-dot > summary { display:flex; align-items:center; gap:8px; padding:11px 14px; border:1px solid #e6d6bd; border-radius:14px; background:linear-gradient(165deg,#fffefb,#fff9ee); font-size:13px; font-weight:800; color:#8e1b24; cursor:pointer; list-style:none; }
.dotbt-le.co-dot > summary::-webkit-details-marker { display:none; }
.dotbt-le.co-dot > summary::after { content:'▾'; margin-left:auto; color:#c78a12; transition:transform .3s ease; }
.dotbt-le.co-dot[open] > summary::after { transform:rotate(180deg); }
.dotbt-le.co-dot[open] > summary { margin-bottom:12px; border-color:#e0b04a; }
.dotbt-le-cho { visibility:hidden; }

/* ---------- Hộp xác nhận ---------- */
.dotbt-xn-ca { margin:0 0 6px; padding:10px 12px; border:1px solid var(--db-vien); border-left:4px solid var(--db-do); border-radius:10px; background:var(--db-kem); line-height:1.5; }
.dotbt-xn-ca span { font-size:13px; color:var(--db-xam); }
.dotbt-loi { margin-top:6px; color:#b3262f; font-size:13px; font-weight:600; line-height:1.5; }
.dotbt-loi:empty { display:none; }
.dotbt-xn-nut { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.dotbt-xn-nut .dc-nut { margin-top:0; }

@media (max-width:768px) {
  .dotbt-luoi { grid-template-columns:minmax(0,1fr); }
  .dotbt-tien-bo { grid-template-columns:minmax(0,1fr); }
  .dotbt-buoi-diem { margin-left:0; }
  .dotbt-ca-phai .dotbt-nut { flex:1 1 100%; margin-left:0; padding:10px 16px; font-size:13px; }
  .dotbt-lich-dau { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  .dotbt-ca, .dotbt-nut, .dotbt-le.co-dot > summary::after { transition:none; }
  .dotbt-ca:hover { transform:none; }
}

/* Nội quy ca bổ trợ "3 khiên / 3 thẻ phạt" (trước là đặt cọc cam kết) — trang HS/PH (js/hs-dat-coc.js). Đỏ rượu – vàng như phần còn lại của trang học sinh.
   Thẻ Trang chủ (thư mời · thẻ khiên) + khối cấn trừ / ví cọc cũ nằm trong vùng nội dung có CSS zoom 1,14–1,42 (index.html) → cỡ chữ ở đây tính theo px "gốc".
   Chuông + hộp thoại nằm NGOÀI vùng zoom (thanh đầu, <body>) → cỡ chữ lớn hơn một chút. */
.dc-the-moi, .dc-vi, .dc-chuong, .dc-dlg {
  --dc-do:#b5091c; --dc-do2:#8e1b24; --dc-vang:#ffce42; --dc-kem:#fff8e8; --dc-muc:#211b18; --dc-xam:#6b5d5d; --dc-xanh:#1f7a4d; --dc-vien:#e7d9b8;
}

/* ---------- Thẻ nổi ở Trang chủ ---------- */
.dc-the-moi { position:relative; margin:14px 0 0; padding:16px 18px; border:2px solid var(--dc-vang); border-radius:16px; color:#fff;
  background:radial-gradient(circle at 92% 12%,#ffce4233,transparent 45%),linear-gradient(160deg,#a5121e,#5a050c); box-shadow:0 10px 26px #5a050c40; overflow:hidden; }
.dc-the-moi::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 40%,#ffffff30 50%,transparent 60%); transform:translate3d(-100%,0,0); animation:dc-quet 7s ease-in-out 1.5s infinite; }
@keyframes dc-quet { 0%,55% { transform:translate3d(-100%,0,0); } 100% { transform:translate3d(100%,0,0); } }
.dc-the-nhan { display:inline-block; margin-bottom:4px; font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--dc-vang); }
.dc-the-moi > b { display:block; font-size:16px; font-weight:800; letter-spacing:-.01em; }
.dc-the-moi > p { margin:4px 0 12px; font-size:12.5px; color:#ffe9d6; }
.dc-the-qr { color:var(--dc-muc); border-color:#e0b04a; background:linear-gradient(165deg,#fffdf6,#fff3d4); box-shadow:0 8px 22px #c9962e26; }
.dc-the-qr .dc-the-nhan { color:#9a6a0c; }
.dc-the-qr > p { color:#6b5640; }
.dc-the-qr::after { display:none; }

/* ---------- Thẻ "Khiên bổ trợ" ở Trang chủ (quy chế 3 khiên / 3 thẻ phạt) — bảng năng lượng kiểu game, đỏ rượu – vàng ----------
   Rung + chớp đỏ khi vừa mất khiên chạy trên .dc-khien-trong / ::before (KHÔNG đặt animation lên chính .dc-khien: thẻ đang "hiện dần" bằng lớp hs-hien-dan). */
.dc-khien { padding:0; border:1px solid #ffce4299; color:#ffe9d6;
  background:
    repeating-linear-gradient(0deg,#ffffff07 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,#ffffff07 0 1px,transparent 1px 22px),
    radial-gradient(120% 90% at 10% 0%,#c0121f70,transparent 60%),
    linear-gradient(160deg,#4a0810,#1d0306);
  box-shadow:0 12px 30px #2a020850, inset 0 0 0 1px #ffffff12, inset 0 0 34px #ffce4212; }
.dc-khien::after { display:none; }
.dc-khien::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(circle at 50% 40%,#ff3b3bcc,#c0121f99); opacity:0; }
.dc-khien-trong { position:relative; padding:13px 16px 14px; }
/* 4 góc ngắm kiểu màn hình điều khiển */
.dc-khien-trong::before, .dc-khien-trong::after { content:''; position:absolute; width:16px; height:16px; pointer-events:none; border:2px solid var(--dc-vang); opacity:.8; }
.dc-khien-trong::before { left:7px; top:7px; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.dc-khien-trong::after { right:7px; bottom:7px; border-left:0; border-top:0; border-radius:0 0 6px 0; }
.dc-khien-dau { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; padding-left:12px; }
.dc-khien-td { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--dc-vang); text-shadow:0 0 10px #ffce4266; }
.dc-khien-td i { width:8px; height:8px; border-radius:50%; background:#5dffa0; box-shadow:0 0 0 3px #5dffa033,0 0 8px #5dffa0; }
.dc-khien-nq { flex:none; padding:4px 11px; border:1px solid #ffce4277; border-radius:999px; background:#ffffff0f; color:#ffe9b0; font:inherit; font-size:11px; font-weight:700; cursor:pointer; transition:background .25s ease,border-color .25s ease; }
.dc-khien-nq:hover { background:#ffce4226; border-color:var(--dc-vang); }
.dc-khien-nq:focus-visible, .dc-khien .dc-lk:focus-visible { outline:2px solid var(--dc-vang); outline-offset:2px; }
.dc-khien-than { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; }
.dc-khien-ds { flex:none; display:flex; gap:10px; }
.dc-kh { display:block; width:46px; height:54px; overflow:visible; }
.dc-kh-nen { stroke-width:2.5; stroke-linejoin:round; }
.dc-kh.con { filter:drop-shadow(0 0 5px #ffce42aa); animation:dc-kh-sang 2.8s ease-in-out infinite; }
.dc-kh.con:nth-child(2) { animation-delay:.35s; } .dc-kh.con:nth-child(3) { animation-delay:.7s; }
.dc-kh.con .dc-kh-nen { fill:#ffc636; stroke:#fff3b8; }
.dc-kh.con .dc-kh-trong { fill:#a5121e; stroke:#ffe27a; stroke-width:1.2; }
.dc-kh.con .dc-kh-tia { fill:#ffe27a; }
.dc-kh.mat { opacity:.9; }
.dc-kh.mat .dc-kh-nen { fill:#3a1418; stroke:#8a4a50; stroke-dasharray:5 3; }
.dc-kh.mat .dc-kh-nut { fill:none; stroke:#ff6b6b; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dc-kh.mat .dc-kh-nut.nho { stroke:#b3565b; stroke-width:1.4; }
@keyframes dc-kh-sang { 0%,100% { filter:drop-shadow(0 0 4px #ffce4288); } 50% { filter:drop-shadow(0 0 10px #ffe27add); } }
.dc-khien-tt { flex:1 1 150px; min-width:0; }
.dc-khien-so { display:flex; align-items:baseline; gap:2px; line-height:1; color:#ffe9b0; }
.dc-khien-so b { font:400 34px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.03em; color:var(--dc-vang); text-shadow:0 0 12px #ffce4266; }
.dc-khien-so i { font:400 20px/1 'Bangers','Be Vietnam Pro',sans-serif; font-style:normal; opacity:.75; }
.dc-khien-so small { margin-left:5px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.8; }
.dc-khien-chu { margin:5px 0 0; font-size:12.5px; line-height:1.45; color:#ffe9d6; overflow-wrap:anywhere; }
.dc-khien-chu b { color:#fff; }
.dc-khien-thanh { display:flex; gap:5px; margin-top:11px; }
.dc-khien-thanh i { flex:1; height:5px; border-radius:3px; background:#ffffff1c; transform:skewX(-18deg); }
.dc-khien-thanh i.co { background:linear-gradient(90deg,#ffb21f,#ffe27a); box-shadow:0 0 8px #ffce4288; }
/* Mức: giảm · cảnh báo (còn 1) · đình chỉ */
.dc-khien-giam .dc-khien-chu b { color:#ffd27a; }
.dc-khien-canh-bao { border-color:#ff6b6b; }
.dc-khien-canh-bao .dc-khien-td i { background:#ff5a5a; box-shadow:0 0 0 3px #ff5a5a33,0 0 8px #ff5a5a; }
.dc-khien-canh-bao .dc-khien-so b { color:#ff8a7a; text-shadow:0 0 12px #ff3b3b88; }
.dc-khien-canh-bao .dc-khien-chu { padding:6px 10px; border:1px solid #ff8a8a; border-radius:9px; background:#d3202e; color:#fff; font-weight:600; animation:dc-nhay 1.2s ease-in-out infinite; }
.dc-khien-canh-bao .dc-khien-thanh i.co { background:linear-gradient(90deg,#ff3b3b,#ff9a7a); box-shadow:0 0 8px #ff3b3b99; }
@keyframes dc-nhay { 0%,100% { opacity:1; box-shadow:0 0 0 0 #ff3b3b00; } 50% { opacity:.62; box-shadow:0 0 14px 2px #ff3b3b88; } }
.dc-khien-dinh-chi { border-color:#ffb0b0; background:repeating-linear-gradient(135deg,#00000018 0 12px,transparent 12px 24px),linear-gradient(160deg,#d3202e,#7a0610); box-shadow:0 12px 30px #7a061060, inset 0 0 0 1px #ffffff22; }
.dc-khien-dinh-chi .dc-khien-td i { background:#fff; box-shadow:0 0 0 3px #ffffff33; }
.dc-khien-dinh-chi .dc-khien-so b { color:#fff; text-shadow:none; }
.dc-khien-dinh-chi .dc-khien-chu { color:#fff; font-size:13px; }
.dc-khien-dinh-chi .dc-kh.mat .dc-kh-nen { fill:#4a0a10; stroke:#ffb0b0; }
.dc-khien-dinh-chi .dc-kh.mat .dc-kh-nut { stroke:#fff; }
/* Vừa mất khiên (so với lần xem trước): rung + chớp đỏ đúng 1 lần, khiên vừa mất "vỡ" từ vàng sang xám đỏ */
.dc-khien-vua-mat .dc-khien-trong { animation:dc-rung .62s cubic-bezier(.36,.07,.19,.97) .7s 1 both; }
.dc-khien-vua-mat::before { animation:dc-chop 1s ease-out .7s 1 both; }
.dc-kh.vua-mat { animation:dc-kh-vo 1s ease-out .7s 1 backwards; }
@keyframes dc-rung { 0%,100% { transform:translate3d(0,0,0); } 12% { transform:translate3d(-7px,0,0) rotate(-.5deg); } 26% { transform:translate3d(6px,0,0) rotate(.5deg); } 42% { transform:translate3d(-5px,0,0); } 58% { transform:translate3d(4px,0,0); } 76% { transform:translate3d(-2px,0,0); } }
@keyframes dc-chop { 0% { opacity:0; } 14% { opacity:.75; } 30% { opacity:.15; } 44% { opacity:.5; } 100% { opacity:0; } }
@keyframes dc-kh-vo { 0% { transform:scale(1); filter:drop-shadow(0 0 10px #ffe27a) brightness(2.2) sepia(1) saturate(4) hue-rotate(-12deg); } 30% { transform:scale(1.22) rotate(-6deg); filter:drop-shadow(0 0 14px #ff3b3b) brightness(1.8); } 60% { transform:scale(.9) rotate(4deg); } 100% { transform:none; filter:none; } }
/* Danh sách thẻ phạt trong thẻ khiên */
.dc-tp { margin-top:12px; padding-top:9px; border-top:1px dashed #ffffff3a; }
.dc-tp h4 { margin:0 0 2px; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dc-vang); }
.dc-khien-dinh-chi .dc-tp h4 { color:#fff; }
.dc-tp-ds { list-style:none; margin:0; padding:0; }
.dc-tp-dong { display:flex; align-items:flex-start; gap:10px; padding:7px 0; border-bottom:1px solid #ffffff1c; font-size:12.5px; }
.dc-tp-dong:last-child { border-bottom:0; padding-bottom:0; }
.dc-tp-ngay { flex:none; width:38px; font-weight:800; color:#ffd98a; }
.dc-tp-chu { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; overflow-wrap:anywhere; }
.dc-tp-chu > b { color:#fff; }
.dc-tp-ct { font-size:11.5px; color:#ffd9c2; }
.dc-tp-xoa { flex:none; padding:1px 8px; border:1px solid #ffffff55; border-radius:999px; font-size:10.5px; font-style:normal; font-weight:700; color:#ffe9d6; }
.dc-tp-dong.da-xoa > :not(.dc-tp-xoa) { opacity:.5; }
.dc-tp-dong.da-xoa .dc-tp-chu > b { text-decoration:line-through; }
.dc-khien .dc-lk { color:var(--dc-vang); font-size:12px; text-align:left; }
.dc-khien .dc-ph-da { color:#ffd9c2; }
.dc-khien .dc-tra-loi { align-self:stretch; }

/* ---------- Nút ---------- */
.dc-nut { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 18px; border:1px solid #6e040d; border-radius:10px; background:linear-gradient(#d3202e,#a50d18); color:#fff; font:inherit; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 3px 0 #6e040d; transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease; }
.dc-nut:hover { transform:translateY(-2px); box-shadow:0 5px 0 #6e040d,0 10px 18px #a50d1838; }
.dc-nut:active { transform:translateY(1px); box-shadow:0 1px 0 #6e040d; transition-duration:.1s; }
.dc-nut-vang { border-color:#8b5814; background:linear-gradient(#ffdf71,#ffc636); color:#241b0f; box-shadow:0 3px 0 #8b5814; }
.dc-nut-vang:hover { box-shadow:0 5px 0 #8b5814,0 10px 18px #8b581430; }
.dc-nut[disabled] { opacity:.5; cursor:not-allowed; transform:none; }
.dc-nut-rong { width:100%; margin-top:10px; padding:12px 16px; font-size:15px; }
.dc-nut-nho { margin-top:6px; padding:6px 12px; font-size:12px; border-radius:8px; }
.dc-lk { padding:0; border:0; background:none; color:#b5091c; font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }

/* ---------- Ví cọc (mục Học phí) ---------- */
.dc-vi .hs-hp-the-dau > i { background:#fff3d0; color:#c78a12; }
.dc-vi-so { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; }
.dc-vi-so small { flex-basis:100%; font-size:10.5px; color:#7a6350; }
.dc-vi-so strong { font-size:28px; font-weight:800; letter-spacing:-.02em; color:#a10a17; line-height:1.1; }
.dc-vi-so span { font-size:12px; color:#7a6350; }
.dc-vi-thanh { height:10px; margin:8px 0; overflow:hidden; border-radius:6px; background:#efe7d6; }
.dc-vi-thanh > i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#ffc22e,#ffe27a); transition:width .9s cubic-bezier(.16,1,.3,1); }
.dc-vi-lan { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:6px 0 10px; font-size:12.5px; font-weight:600; }
.dc-chams { display:inline-flex; gap:4px; }
.dc-cham { display:inline-block; width:14px; height:14px; border-radius:50%; background:#ddd; }
.dc-cham.x { background:#c0121f; box-shadow:0 0 0 2px #fbd0d0; }
.dc-chip { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; background:#fde7e7; color:#b3262f; }
.dc-chip.v { background:#fff3cd; color:#8a6a00; }
.dc-chip.g { background:#e0f2e8; color:var(--dc-xanh); }
.dc-ls { list-style:none; margin:0 0 8px; padding:0; border-top:1px solid var(--dc-vien); }
.dc-ls-dong { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--dc-vien); font-size:12.5px; }
.dc-ls-ngay { flex:none; width:38px; color:#7a6350; font-weight:700; }
.dc-ls-chu { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.dc-ls-tien { flex:none; font-weight:800; white-space:nowrap; }
.dc-ls-tien.tru { color:#b3262f; } .dc-ls-tien.cong { color:var(--dc-xanh); }
.dc-ph-da { color:#7a6350; font-size:11.5px; font-style:italic; }
.dc-tra-loi { display:block; padding:6px 9px; border-left:3px solid var(--dc-xanh); border-radius:6px; background:#eaf7ef; color:#175c38; font-size:11.5px; line-height:1.45; }
.dc-nho { font-size:12px; color:#6b5d5d; line-height:1.5; }
.dc-vi .dc-nho { margin:6px 0 0; }
.dc-vi-ghi b { color:#a10a17; }
.dc-vi-cho .dc-nut { margin-top:10px; }
.dc-can-tru { margin-top:10px; padding:9px 12px; border:1px dashed #5aa87a; border-radius:10px; background:#eaf7ef; color:#175c38; font-size:12.5px; }
.dc-can-tru p { margin:2px 0; }
.dc-can-tru i { margin-right:4px; }
/* Điện thoại / 1 cột: ví cọc đứng sau mã QR, cùng hàng với "chi tiết học phí" (hoc-phi-hs.css đặt order cho các khối cùng cột) */
@media (max-width:900px) { .hs-hp-trai > .dc-vi { order:3; } }

/* ---------- Chuông hộp thư (thanh đầu đỏ) ---------- */
.dc-chuong { position:relative; flex:none; display:inline-flex; align-items:center; }
.dc-chuong:empty { display:none; }
.dc-chuong-nut { position:relative; width:40px; height:40px; display:grid; place-items:center; border:1px solid #ffffff6b; border-radius:50%; background:#67050b44; color:#fff; font-size:16px; cursor:pointer; transition:background .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1); }
.dc-chuong-nut:hover { background:#ffffff26; transform:translateY(-1px); }
.dc-chuong-so { position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--dc-vang); color:#4a030a; font-size:11px; font-weight:800; line-height:19px; text-align:center; box-shadow:0 0 0 2px #8e0a15; }
.dc-chuong-so[hidden], .dc-chuong-bang[hidden] { display:none; }
.dc-chuong-bang { position:absolute; z-index:60; top:calc(100% + 10px); right:0; width:min(380px,calc(100vw - 16px)); max-height:min(70vh,520px); display:flex; flex-direction:column; overflow:hidden; color:var(--dc-muc); background:#fffdf7; border:2px solid #251511; border-radius:14px; box-shadow:0 18px 40px #24010466; animation:dc-bang-vao .35s cubic-bezier(.16,1,.3,1); }
@keyframes dc-bang-vao { from { opacity:0; transform:translate3d(0,-8px,0); } to { opacity:1; transform:none; } }
.dc-chuong-dau { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px; color:#fff; font-size:14px; background:linear-gradient(115deg,#64030d,#bd0816); border-bottom:3px solid var(--dc-vang); }
.dc-chuong-dau .dc-lk { color:var(--dc-vang); font-size:12px; }
.dc-chuong-ds { overflow-y:auto; overscroll-behavior:contain; padding:0 6px; }
.dc-trong { margin:0; padding:22px 10px; text-align:center; color:var(--dc-xam); font-size:13px; }
.dc-thu { border-bottom:1px solid var(--dc-vien); }
.dc-thu:last-child { border-bottom:0; }
.dc-thu-than { display:block; width:100%; padding:10px 8px 6px; text-align:left; border:0; border-radius:8px; background:none; color:inherit; font:inherit; cursor:pointer; }
.dc-thu-than:hover { background:#fff3d6; }
.dc-thu-gio { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--dc-xam); }
.dc-thu-gio em { margin-left:auto; padding:1px 8px; border-radius:999px; font-style:normal; font-size:10.5px; font-weight:700; background:#fde7e7; color:#b3262f; }
.dc-cham-vang { display:inline-block; width:9px; height:9px; border-radius:50%; background:#e0a800; box-shadow:0 0 0 3px #ffce4244; }
.dc-thu-than b { display:block; margin-top:2px; font-size:14px; color:var(--dc-do2); }
.dc-thu-nd { display:block; margin-top:2px; font-size:13px; line-height:1.45; color:#4a3d3d; }
.dc-thu:not(.chua) .dc-thu-nd, .dc-thu:not(.chua) .dc-thu-than b { opacity:.75; }
.dc-thu-nut { padding:0 10px 10px; }
.dc-thu-lien { display:inline-block; padding:0 10px 10px; font-size:12px; font-weight:700; color:var(--dc-do); }

/* ---------- Hộp thoại (nội quy / QR / phản hồi) ---------- */
.dc-dlg { width:min(560px,calc(100vw - 16px)); max-height:min(92vh,880px); padding:0; border:3px solid #251511; border-radius:18px; color:var(--dc-muc); background:#fffdf7; box-shadow:0 24px 60px #24010480; font-family:'Be Vietnam Pro',system-ui,sans-serif; font-size:15px; line-height:1.5; overflow:hidden; }
.dc-dlg-nho { width:min(460px,calc(100vw - 16px)); }
.dc-dlg::backdrop { background:#2a0208b3; backdrop-filter:blur(2px); }
.dc-dlg[open] { animation:dc-dlg-vao .4s cubic-bezier(.16,1,.3,1); }
@keyframes dc-dlg-vao { from { opacity:0; transform:translate3d(0,18px,0) scale(.98); } to { opacity:1; transform:none; } }
.dc-dlg-trong { display:flex; flex-direction:column; max-height:min(92vh,880px); }
.dc-dlg-dau { flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; color:#fff; background:linear-gradient(115deg,#64030d,#bd0816); border-bottom:4px solid var(--dc-vang); }
.dc-dlg-dau b { font-size:17px; }
.dc-dong { width:34px; height:34px; border:1px solid #ffffff6b; border-radius:50%; background:#67050b44; color:#fff; font-size:16px; cursor:pointer; }
.dc-dong:hover { background:#ffffff26; }
.dc-dlg-than { overflow-y:auto; overscroll-behavior:contain; padding:16px; }
.dc-moi { text-align:left; }
.dc-moi-logo { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px; margin-bottom:8px; color:var(--dc-do2); text-align:center; }
.dc-moi-logo img { object-fit:contain; }
.dc-moi p { margin:6px 0; }
.dc-moi-mien { font-size:16px; }
.dc-moi-coc { margin:12px 0; padding:12px 14px; border:1px solid var(--dc-vien); border-radius:12px; background:var(--dc-kem); }
.dc-dlg h2 { margin:14px 0 4px; font-size:16px; color:var(--dc-do2); }
.dc-dlg h3 { margin:12px 0 4px; font-size:15px; color:var(--dc-do); }
.dc-moi-coc h3 { margin-top:0; }
.dc-dlg ol, .dc-dlg ul { margin:6px 0; padding-left:22px; }
.dc-dlg li { margin:4px 0; }
.dc-dlg .dc-nho { font-size:13px; }
.dc-dong-y { display:flex; align-items:flex-start; gap:10px; margin:16px 0 4px; padding:10px 12px; border:1px solid #e0b04a; border-radius:10px; background:#fff3d6; font-weight:700; cursor:pointer; }
.dc-dong-y input { flex:none; width:20px; height:20px; margin-top:2px; accent-color:var(--dc-do); }
.dc-loi { min-height:0; margin-top:6px; color:#b3262f; font-size:13px; font-weight:600; }
.dc-loi:empty { display:none; }
.dc-ok { padding:14px; border-radius:10px; background:#e9f5ee; color:#175c38; font-weight:700; text-align:center; }
.dc-qr { text-align:center; min-height:120px; }
.dc-qr .qr-ck-img { width:min(340px,100%); height:auto; }
.dc-qr-gt { margin:0 0 8px; }
.dc-qr-thieu { padding:6px 10px; border-radius:8px; background:#fff3cd; }
.dc-nq-lai { margin-top:14px; border-top:1px dashed var(--dc-vien); padding-top:8px; }
.dc-nq-lai summary { cursor:pointer; font-weight:700; color:var(--dc-do2); }
.dc-ph-nhan { display:block; margin:10px 0 4px; font-weight:700; }
.dc-ph-o { width:100%; padding:10px 12px; border:1px solid #c9b78f; border-radius:10px; font:inherit; resize:vertical; }
.dc-ph-o:focus { outline:2px solid #bc162644; border-color:#bc1626; }

@media (max-width:600px) {
  .dc-chuong-nut { width:34px; height:34px; font-size:14px; }
  .dc-the-moi { padding:14px; }
  .dc-khien { padding:0; }
  .dc-khien-trong { padding:12px 13px 13px; }
  .dc-khien-than { gap:9px 13px; }
  .dc-khien-ds { gap:7px; }
  .dc-kh { width:38px; height:45px; }
  .dc-khien-so b { font-size:28px; }
  .dc-khien-td { letter-spacing:.1em; }
  .dc-vi-so strong { font-size:25px; }
  .dc-dlg { border-width:2px; border-radius:14px; }
  .dc-dlg-than { padding:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .dc-the-moi::after, .dc-chuong-bang, .dc-dlg[open] { animation:none; }
  .dc-kh.con, .dc-kh.vua-mat, .dc-khien-canh-bao .dc-khien-chu, .dc-khien-vua-mat .dc-khien-trong, .dc-khien-vua-mat::before { animation:none; }
  .dc-khien-nq { transition:none; }
  .dc-vi-thanh > i { transition:none; }
}

/* THƯỞNG TIỀN THEO KHIÊN CHO TRỢ GIẢNG — đầu tab Lương (js/thuong-khien.js). Kem · đỏ rượu · vàng như khung nhân viên; hình khiên Marvel dùng chung (css/khien-svg.css). */
#thuongKhienKhung:empty{ display:none; }
#thuongKhienKhung{ margin:0 0 16px; --tk-do1:var(--nv-do-1,#7d0814); --tk-do2:var(--nv-do-2,#b10e25); --tk-do3:var(--nv-do-3,#d81a32); --tk-vien:#ecddd0; --tk-phu:#7a6a60; }
.tk-the{ position:relative; padding:18px 20px 16px; border:1px solid var(--tk-vien); border-radius:18px; background:linear-gradient(160deg,#fffaf2,#fffdf9); box-shadow:0 6px 20px #5b191410; color:#21160f; }
.tk-the::before{ content:''; position:absolute; inset:0 0 auto 0; height:4px; border-radius:18px 18px 0 0; background:linear-gradient(90deg,#2f7bea,#9cc8ff 35%,#f7c544 70%,#e39b16); }
.tk-dau{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.tk-dau h3{ display:flex; align-items:center; gap:10px; margin:0; font-size:17px; font-weight:800; color:var(--tk-do2); }
.tk-dau h3 > i{ width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:10px; font-size:14px; color:#ffe9a3; background:linear-gradient(140deg,var(--tk-do2),var(--tk-do1)); }
.tk-chon{ display:flex; align-items:center; gap:8px; margin:0; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--tk-phu); }
.tk-chon .form-select{ min-width:190px; border-radius:11px; font-size:14px; font-weight:600; text-transform:none; letter-spacing:0; }
.tk-ghi{ margin:0 0 12px; font-size:13px; line-height:1.55; color:#5d4d45; }
.tk-phu{ font-size:12px; color:var(--tk-phu); }
.tk-trong{ margin:8px 0; padding:14px; text-align:center; font-size:13.5px; color:var(--tk-phu); }
.tk-ic{ display:block; width:24px; height:28px; flex:none; overflow:visible; }
.tk-ds{ display:inline-flex; gap:3px; vertical-align:middle; }
.tk-ds + small{ margin-left:6px; font-weight:800; color:var(--tk-phu); }
/* Bảng Admin */
.tk-bang-bao{ overflow-x:auto; border:1px solid var(--tk-vien); border-radius:14px; }
.tk-bang{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tk-bang thead th{ padding:10px 12px; text-align:left; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#ffe9a3; background:linear-gradient(115deg,#64030d,#bd0816); white-space:nowrap; }
.tk-bang td{ padding:10px 12px; border-top:1px solid var(--tk-vien); vertical-align:middle; background:#fffdf9; }
.tk-bang tbody tr:nth-child(even) td{ background:#fff7ee; }
.tk-bang td b{ color:#5f0e1a; }
.tk-canh{ display:block; margin-top:3px; font-size:11.5px; font-weight:700; color:#9a4a00; }
.tk-de-xuat{ font-size:15px; color:var(--tk-do2) !important; font-variant-numeric:tabular-nums; }
.tk-tem{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:800; background:#eee8e2; color:#6f635b; }
.tk-tem.ok{ background:#dff5e6; color:#14693a; } .tk-tem.cho{ background:#fff0d6; color:#9a4a00; }
.tk-thao{ min-width:300px; }
.tk-lay{ display:grid; grid-template-columns:116px minmax(0,1fr); gap:6px; align-items:center; }
.tk-lay .tk-o{ width:100%; margin:0; height:34px; }
.tk-nut-hang{ grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; }
.tk-o{ padding:7px 10px; border:1px solid #e4d4c5; border-radius:10px; background:#fff; font:inherit; font-size:13px; color:#21160f; }
.tk-o:focus-visible{ outline:2px solid var(--tk-do3); outline-offset:1px; }
.tk-da{ display:inline-flex; flex-direction:column; margin-right:10px; vertical-align:middle; } .tk-da small{ font-size:11.5px; color:var(--tk-phu); }
.tk-nut{ padding:7px 15px; border:0; border-radius:10px; font:inherit; font-size:13px; font-weight:800; color:#fff7d6; background:linear-gradient(135deg,var(--tk-do3),var(--tk-do1)); box-shadow:0 4px 12px #7d081433; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }
.tk-nut:hover{ transform:translateY(-1px); box-shadow:0 7px 16px #7d081447; }
.tk-nut-nho{ padding:6px 12px; border:1px solid #e3c4c6; border-radius:10px; background:#fff6ee; font:inherit; font-size:12.5px; font-weight:700; color:var(--tk-do2); cursor:pointer; }
.tk-nut-nho:hover{ background:var(--tk-do2); color:#fff; border-color:var(--tk-do2); }
.tk-nut:disabled, .tk-nut-nho:disabled{ opacity:.55; cursor:wait; }
.tk-nut:focus-visible, .tk-nut-nho:focus-visible{ outline:2px solid var(--tk-do3); outline-offset:2px; }
/* Mức thưởng */
.tk-cai-dat{ margin-top:14px; padding:10px 14px; border:1px dashed #d9a9ac; border-radius:12px; background:#fff8f2; }
.tk-cai-dat summary{ cursor:pointer; font-size:13px; font-weight:800; color:var(--tk-do2); }
.tk-cd-luoi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:10px 0 6px; }
.tk-cd-luoi label{ display:grid; gap:4px; font-size:12px; font-weight:800; color:var(--tk-phu); }
.tk-msg{ margin:10px 0 0; font-size:13px; font-weight:700; } .tk-msg:empty{ display:none; }
.tk-msg.ok{ padding:8px 12px; border-radius:10px; background:#dff5e6; color:#14693a; } .tk-msg.loi{ padding:8px 12px; border-radius:10px; background:#fde5e3; color:#a30f20; }
/* Thẻ của trợ giảng */
.tk-cua-luoi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:8px 0 12px; }
.tk-o-so{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:12px 14px; border:1px solid #5aa2ff44; border-radius:14px; background:radial-gradient(90% 120% at 0 0,#2a6fe41f,transparent 70%),#fff; }
.tk-o-so.vang{ border-color:#ffce4288; background:radial-gradient(90% 120% at 0 0,#ffce4233,transparent 70%),#fff; }
.tk-o-so.tong{ border-color:#c0121f55; background:radial-gradient(90% 120% at 0 0,#c0121f22,transparent 70%),#fff; }
.tk-o-so small{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tk-phu); }
.tk-o-so b{ font-size:22px; font-weight:900; color:#5f0e1a; line-height:1; } .tk-o-so em{ font-style:normal; font-size:13px; font-weight:700; color:#8a5a00; }
.tk-tong{ font-size:28px !important; color:var(--tk-do2) !important; font-variant-numeric:tabular-nums; }
@media (max-width:900px){
  .tk-bang thead{ display:none; }
  .tk-bang, .tk-bang tbody, .tk-bang tr, .tk-bang td{ display:block; width:100%; }
  .tk-bang tr{ padding:8px 4px; border-top:6px solid #f3e7da; }
  .tk-bang td{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; padding:6px 12px; background:transparent !important; }
  .tk-bang td::before{ content:attr(data-l); flex:none; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--tk-phu); }
  .tk-thao{ min-width:0; flex-wrap:wrap; } .tk-thao .tk-o, .tk-thao .tk-o-gc{ width:100%; margin-right:0; }
  .tk-cua-luoi{ grid-template-columns:1fr; }
}

/* HÌNH KHIÊN KIỂU MARVEL dùng chung (js/khien-svg.js) — khiên xanh "Đội trưởng", khiên vàng vương miện, khiên mất nứt.
   Chỉ định màu + ánh sáng; kích thước do từng nơi dùng đặt (.khs-ic ở css/khien.css, .tgc-kh ở css/chi-huy-tro-giang.css). */
.ks-nen{ stroke-width:1.8; stroke-linejoin:round; fill:#3f8cf2; stroke:#d6e8ff; }
.ks-sang{ fill:#fff; opacity:.24; }
.ks-sang2{ fill:#fff; opacity:.13; }
.ks-trong{ fill:#102f7a; stroke:#9cc8ff; stroke-width:.9; stroke-linejoin:round; }
.ks-vong-do{ fill:#e0243a; }
.ks-vong-trang{ fill:#f3f7ff; }
.ks-vong-xanh{ fill:#2866dc; }
.ks-sao{ fill:#fff; stroke:#cfe0ff; stroke-width:.4; stroke-linejoin:round; }
/* Khiên vàng */
.vang .ks-nen{ fill:#ffc636; stroke:#fff3b8; }
.vang .ks-trong{ fill:#a5121e; stroke:#ffe27a; stroke-width:1.1; }
.vang .ks-mien{ fill:#ffe27a; stroke:#fff6c8; stroke-width:.5; stroke-linejoin:round; }
/* Khiên đã mất */
.mat .ks-nen{ fill:#00000026; stroke:#ffffff66; stroke-width:1.5; stroke-dasharray:4 2.6; }
.mat .ks-nut{ fill:none; stroke:#ff8a80; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* Ánh sáng: còn khiên thì phát sáng nhẹ, thở chậm */
svg.xanh{ filter:drop-shadow(0 0 5px #4a97f5b0); animation:ks-tho 3.2s ease-in-out infinite; }
svg.vang{ filter:drop-shadow(0 0 5px #ffce42b8); animation:ks-tho 3.2s ease-in-out infinite; }
svg.xanh:nth-child(2), svg.vang:nth-child(2){ animation-delay:.35s; }
svg.xanh:nth-child(3){ animation-delay:.7s; } svg.xanh:nth-child(n+4){ animation-delay:1s; }
svg.mat{ opacity:.85; }
@keyframes ks-tho{ 0%,100%{ filter:drop-shadow(0 0 4px #4a97f580); } 50%{ filter:drop-shadow(0 0 11px #7db6ffee); } }
svg.vang{ animation-name:ks-tho-vang; }
@keyframes ks-tho-vang{ 0%,100%{ filter:drop-shadow(0 0 4px #ffce4285); } 50%{ filter:drop-shadow(0 0 11px #ffe27aee); } }
@media (prefers-reduced-motion:reduce){ svg.xanh, svg.vang{ animation:none; } }

/* KHIÊN HỌC TẬP — lớp chính khóa (thầy chốt 05/10/2026).
   .kh-*  : tab nhân viên "Khiên học tập" (js/khien.js) — nền sáng, theo token --nv-* của css/khung-nhan-vien.css
   .khs-* : thẻ ở Trang chủ học sinh / phụ huynh (js/hs-khien.js) — nền đỏ rượu viền vàng như thẻ Khiên bổ trợ
   .att-tre, .dd-big-tick : ô tích ở màn Điểm danh */

/* ───────── Điểm danh ───────── */
.dd-big-tick{ display:flex; width:fit-content; margin:12px 0 -4px; padding:5px 12px; border:1px dashed #e3b34a; border-radius:999px; background:#fff8e6; font-size:13px; font-weight:600; color:#8a5a00; white-space:normal; }
.dd-big-tick span{ font-weight:500; opacity:.8; }
.dd-big-tick:has(input:checked){ border-style:solid; background:#ffe9a3; }
.dd-big-tick input{ margin-top:0; }
#attBaiDay[readonly]{ background:#fff6dc; font-weight:700; color:#8a5a00; }
.att-tre{ display:flex; margin-top:5px; font-size:11.5px; font-weight:600; color:#b3261e; }
.att-tre[hidden]{ display:none; }
.att-tre input{ margin-top:0; }

/* ───────── Tab nhân viên ───────── */
#khKhung{ --kh-xanh:#1f6fd0; --kh-xanh-nhat:#e7f0fc; --kh-vang:#e39b16; --kh-do:#c62828; display:flex; flex-direction:column; gap:14px; }
.kh-loi, .kh-chua-bat{ display:flex; align-items:center; gap:12px; padding:14px 16px !important; font-size:14px; }
.kh-chua-bat{ border:1.5px dashed var(--kh-vang) !important; background:#fff8e6 !important; }
.kh-chua-bat > i{ font-size:20px; color:var(--kh-vang); }
.kh-loi{ color:var(--kh-do); }

.kh-so-hang{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.kh-so{ display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--nv-vien, #0000001a); border-radius:16px; background:var(--nv-the, #fff); text-align:left; cursor:pointer; font:inherit; color:inherit;
  transition:transform .25s var(--nv-em, ease), box-shadow .25s ease; }
.kh-so:hover{ transform:translateY(-2px); box-shadow:0 8px 20px #7d08141a; }
.kh-so:focus-visible, .kh-muc:focus-visible{ outline:2px solid var(--nv-do-3, #d81a32); outline-offset:2px; }
.kh-so-ic{ width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:18px; color:#fff; }
.kh-so.do .kh-so-ic{ background:linear-gradient(135deg, #d81a32, #7d0814); }
.kh-so.cam .kh-so-ic{ background:linear-gradient(135deg, #f7a531, #d97a06); }
.kh-so.xam .kh-so-ic{ background:linear-gradient(135deg, #8a8f98, #4b5058); }
.kh-so.xanh .kh-so-ic{ background:linear-gradient(135deg, #3d8bea, #174f9c); }
.kh-so-chu{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.kh-so-chu b{ font-size:24px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kh-so-chu span{ font-size:13.5px; font-weight:700; }
.kh-so-chu small{ font-size:11.5px; color:var(--nv-phu, #7a6a60); }

.kh-thanh{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.kh-muc-hang{ display:inline-flex; gap:4px; padding:4px; border-radius:14px; background:#7d08140f; flex-wrap:wrap; }
.kh-muc{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:0; border-radius:11px; background:none; font:inherit; font-size:14px; font-weight:700; color:var(--nv-phu, #7a6a60); cursor:pointer; transition:background .2s ease, color .2s ease; }
.kh-muc.chon{ background:linear-gradient(135deg, var(--nv-do-2, #b10e25), var(--nv-do-1, #7d0814)); color:#ffe9a3; box-shadow:0 4px 12px #7d081433; }
.kh-muc-so{ min-width:20px; padding:1px 6px; border-radius:999px; background:#fff; color:var(--nv-do-2, #b10e25); font-size:12px; text-align:center; }
.kh-msg{ font-size:13.5px; font-weight:600; min-height:0; }
.kh-msg:empty{ display:none; }
.kh-msg.ok{ color:#1b7a3d; } .kh-msg.loi{ color:var(--kh-do); }

.kh-the{ padding:16px !important; }
.kh-the + .kh-the{ margin-top:14px; }
.kh-the-dau{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.kh-the-dau h3, .kh-quy h3{ margin:0 0 3px; font-size:16.5px; font-weight:800; }
.kh-the-dau p{ margin:0; font-size:13px; color:var(--nv-phu, #7a6a60); max-width:72ch; }
.kh-duyet-het{ font-weight:800 !important; white-space:nowrap; }
.kh-trong{ padding:18px 10px; text-align:center; font-size:13.5px; color:var(--nv-phu, #7a6a60); }
.kh-bang td{ vertical-align:middle; }
.kh-phu{ font-size:12px; color:var(--nv-phu, #7a6a60); }
.kh-ct{ margin-top:3px; font-size:12.5px; font-style:italic; overflow-wrap:anywhere; }
.kh-nut{ text-align:right; }
.kh-nut .btn{ margin:2px 0 2px 5px; white-space:nowrap; }
.kh-bang table{ table-layout:auto; width:100%; }
tr.kh-hs > td:nth-child(5){ max-width:170px; }
.kh-mui{ font-size:12.5px; font-weight:700; color:var(--kh-do); white-space:nowrap; }
.kh-tem{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; background:#00000010; font-size:12px; font-weight:700; white-space:nowrap; }
.kh-tem.ok{ background:#e3f5e8; color:#1b7a3d; }
.kh-tem.cho{ background:#fff3d6; color:#8a5a00; }
.kh-tem.vang_khong_phep, .kh-tem.hanh_vi{ background:#fde5e3; color:var(--kh-do); }
.kh-tem.di_tre{ background:#fff0dc; color:#a85b00; }
.kh-tem.thieu_bai{ background:#ece8fb; color:#4b3aa8; }

.kh-ic{ width:17px; height:20px; flex:none; }
.kh-xanh, .kh-vang{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.kh-xanh b, .kh-vang b{ margin-left:5px; font-size:13.5px; font-variant-numeric:tabular-nums; }
.kh-xanh .kh-ic.con path{ fill:var(--kh-xanh); stroke:#174f9c; stroke-width:1.5; }
.kh-xanh .kh-ic.mat path{ fill:#f1f1f1; stroke:#b9bcc2; stroke-width:1.5; stroke-dasharray:3 2; }
.kh-xanh.muc-mot b{ color:#c56a00; } .kh-xanh.muc-het b{ color:var(--kh-do); }
.kh-vang .kh-ic path{ fill:#f1f1f1; stroke:#b9bcc2; stroke-width:1.5; }
.kh-vang.co .kh-ic path{ fill:#f7c544; stroke:#b97a00; }
.kh-vang.co b{ color:#8a5a00; }
.kh-mvp{ font-size:17px; font-variant-numeric:tabular-nums; }
.kh-nv{ display:inline-block; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; vertical-align:middle; }
.kh-nv.xong{ color:#1b7a3d; font-weight:700; }
tr.kh-hs.muc-het > td:first-child{ box-shadow:inset 4px 0 0 var(--kh-do); }
tr.kh-hs.muc-mot > td:first-child{ box-shadow:inset 4px 0 0 #f7a531; }
tr.kh-hs.mo > td{ background:#fff8ec; }
tr.kh-ct-hang > td{ background:#fffbf3; padding:12px 14px !important; }

.kh-loc{ display:flex; align-items:flex-end; gap:10px 14px; flex-wrap:wrap; margin-bottom:12px; }
.kh-loc label{ display:flex; flex-direction:column; gap:3px; margin:0; font-size:12px; font-weight:700; color:var(--nv-phu, #7a6a60); }
.kh-loc label.rong{ flex:1 1 180px; }
.kh-dem{ margin-left:auto; font-size:13px; font-weight:700; }
.kh-ghi{ margin:0 0 10px; padding:8px 12px; border-radius:10px; background:#fff8e6; font-size:12.5px; }

.kh-ct-khung{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:16px; }
.kh-ct-cot h4{ margin:0 0 6px; font-size:13.5px; font-weight:800; }
.kh-nk, .kh-vp{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.kh-nk-dong{ display:flex; flex-wrap:wrap; gap:3px 10px; align-items:center; padding:6px 10px; border-radius:9px; background:#fff; border-left:4px solid #c9c9c9; font-size:13px; }
.kh-nk-dong.do{ border-left-color:var(--kh-do); } .kh-nk-dong.xanh{ border-left-color:var(--kh-xanh); } .kh-nk-dong.vang{ border-left-color:var(--kh-vang); }
.kh-nk-ngay{ flex:none; width:62px; font-weight:700; font-variant-numeric:tabular-nums; }
.kh-nk-chu{ flex:1 1 130px; min-width:0; }
.kh-nk-chu small{ display:block; font-size:11.5px; color:var(--nv-phu, #7a6a60); overflow-wrap:anywhere; }
.kh-nk-so{ margin-left:auto; font-weight:800; white-space:nowrap; }
.kh-nk-dong.do .kh-nk-so{ color:var(--kh-do); } .kh-nk-dong.xanh .kh-nk-so{ color:var(--kh-xanh); } .kh-nk-dong.vang .kh-nk-so{ color:#8a5a00; }
.kh-nk-sau{ font-size:11.5px; color:var(--nv-phu, #7a6a60); white-space:nowrap; }
.kh-vp li{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; border-radius:9px; background:#fff; font-size:13px; }

.kh-hv-luoi{ display:grid; grid-template-columns:minmax(140px, 200px) minmax(140px, 180px) minmax(0, 1fr) auto; gap:10px 12px; align-items:end; }
.kh-hv-luoi label{ display:flex; flex-direction:column; gap:3px; margin:0; font-size:12px; font-weight:700; color:var(--nv-phu, #7a6a60); }
.kh-tl-hang{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.kh-tl-hang input{ max-width:200px; }
.kh-lop-so{ display:inline-block !important; width:76px !important; }
.kh-quy ul{ margin:8px 0 0; padding-left:20px; font-size:13.5px; line-height:1.6; }

@media (max-width:991.98px){
  .kh-so-hang{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kh-ct-khung{ grid-template-columns:1fr; }
  .kh-hv-luoi{ grid-template-columns:1fr 1fr; }
  .kh-hv-luoi label.rong, .kh-hv-luoi > .btn{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .kh-so{ padding:10px; } .kh-so-chu b{ font-size:20px; }
  .kh-bang thead{ display:none; }
  .kh-bang tr{ display:block; padding:10px 4px; border-bottom:1px solid var(--nv-vien, #0000001a); }
  .kh-bang td{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 8px !important; border:0 !important; }
  .kh-bang td[data-nhan]:not([data-nhan=""])::before{ content:attr(data-nhan); flex:none; font-size:12px; font-weight:700; color:var(--nv-phu, #7a6a60); }
  .kh-bang td.kh-nut{ justify-content:flex-end; flex-wrap:wrap; }
  tr.kh-ct-hang > td{ display:block; }
  .kh-nk-sau{ display:none; }
}

/* ───────── Thẻ Trang chủ học sinh / phụ huynh ───────── */
/* Bảng điều khiển kiểu Marvel: nền lưới + 4 góc ngắm (cùng họ với thẻ "Khiên bổ trợ" css/hs-dat-coc.css) */
.khs-the{ --khs-vang:#ffce42; position:relative; margin:14px 0 0; padding:16px 18px 14px; border:1px solid #ffce4299; border-radius:16px; color:#ffe9d6;
  background:
    repeating-linear-gradient(0deg, #ffffff07 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, #ffffff07 0 1px, transparent 1px 22px),
    radial-gradient(120% 90% at 8% 0%, #c0121f80, transparent 60%),
    radial-gradient(70% 90% at 100% 100%, #ffce4220, transparent 60%),
    linear-gradient(160deg, #5a0a14, #1d0306);
  box-shadow:0 12px 30px #2a020850, inset 0 0 0 1px #ffffff12, inset 0 0 34px #ffce4212; overflow:hidden; }
.khs-the::before, .khs-the::after{ content:''; position:absolute; width:16px; height:16px; pointer-events:none; border:2px solid var(--khs-vang); opacity:.8; }
.khs-the::before{ left:7px; top:7px; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.khs-the::after{ right:7px; bottom:7px; border-left:0; border-top:0; border-radius:0 0 6px 0; }
.khs-dau{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding-left:10px; }
.khs-td{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--khs-vang); text-shadow:0 0 10px #ffce4266; }
.khs-dot{ width:8px; height:8px; flex:none; border-radius:50%; background:#5dffa0; box-shadow:0 0 0 3px #5dffa033, 0 0 8px #5dffa0; }
.khs-mvp{ padding:3px 11px; border:1px solid #ffce4277; border-radius:999px; background:#ffffff0f; font-size:11.5px; font-weight:700; color:#ffe9b0; white-space:nowrap; }
.khs-mvp b{ margin-left:4px; font-size:14px; color:#fff; font-variant-numeric:tabular-nums; }
.khs-than{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap:10px; }
.khs-o{ position:relative; padding:10px 12px 11px; border:1px solid #ffffff1c; border-radius:13px; background:linear-gradient(160deg, #00000040, #00000020); min-width:0; }
.khs-o small{ display:block; margin-bottom:7px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#ffd9c2; }
.khs-o-xanh{ border-color:#5aa2ff55; background:radial-gradient(90% 120% at 0% 0%, #2a6fe42e, transparent 70%), linear-gradient(160deg, #00000040, #00000020); }
.khs-o-vang{ border-color:#ffce4255; background:radial-gradient(90% 120% at 0% 0%, #ffce422e, transparent 70%), linear-gradient(160deg, #00000040, #00000020); }
.khs-o-xanh small{ color:#bcd9ff; } .khs-o-vang small{ color:#ffe9a3; }
.khs-ds{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.khs-ic{ display:block; width:40px; height:47px; flex:none; overflow:visible; }
.khs-so{ margin-left:6px; font:400 18px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.03em; color:#ffe9b0; opacity:.9; font-variant-numeric:tabular-nums; white-space:nowrap; }
.khs-so b{ font:400 38px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.03em; color:#fff; text-shadow:0 0 12px #7db6ff77; }
.khs-o-vang .khs-so b{ color:var(--khs-vang); text-shadow:0 0 12px #ffce4266; }
/* Thanh năng lượng dưới hàng Khiên xanh: mỗi vạch = 1 Khiên, nghiêng như thẻ Khiên bổ trợ */
.khs-thanh{ display:flex; gap:5px; margin-top:10px; }
.khs-thanh i{ flex:1; height:5px; border-radius:3px; background:#ffffff1c; transform:skewX(-18deg); }
.khs-thanh i.co{ background:linear-gradient(90deg, #2f7bea, #9cc8ff); box-shadow:0 0 8px #4a97f599; }
.khs-luot{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-size:13px; font-weight:800; }
.khs-luot.con{ background:linear-gradient(135deg, #2ba862, #167a43); color:#fff; box-shadow:0 0 12px #2ba86277; } .khs-luot.het{ background:#ffffff1c; color:#ffd9c2; }
.khs-o-luot{ display:flex; flex-direction:column; justify-content:space-between; }
.khs-chu{ margin:10px 0 0; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.khs-chu b{ color:#fff; }
.khs-mot{ border-color:#ffb27a; } .khs-mot .khs-chu, .khs-het .khs-chu{ padding:7px 11px; border-radius:10px; background:#00000033; }
.khs-het{ border-color:#ffb0b0; }
.khs-nv{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:9px 12px; border:1px dashed #ffce4288; border-radius:12px; background:#ffffff0d; }
.khs-nv > i{ font-size:18px; color:var(--khs-vang); }
.khs-nv small{ display:block; font-size:11px; color:#ffd9c2; } .khs-nv b{ font-size:13.5px; color:#fff; overflow-wrap:anywhere; }
.khs-nv.xong > i{ color:#7dffa8; }
.khs-mo{ margin-top:8px; border-top:1px solid #ffffff1f; padding-top:8px; }
.khs-mo summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--khs-vang); list-style-position:inside; }
.khs-mo summary:focus-visible{ outline:2px solid var(--khs-vang); outline-offset:3px; border-radius:4px; }
.khs-nk{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.khs-nk li{ display:grid; grid-template-columns:46px minmax(0, 1fr) auto; gap:8px; align-items:center; padding:6px 10px; border-radius:9px; background:#00000026; border-left:3px solid #ffffff55; font-size:12.5px; }
.khs-nk li.do{ border-left-color:#ff7a6b; } .khs-nk li.xanh{ border-left-color:#6fb0ff; } .khs-nk li.vang{ border-left-color:var(--khs-vang); }
.khs-nk-ngay{ font-weight:700; font-variant-numeric:tabular-nums; }
.khs-nk-so{ text-align:right; font-size:12px; color:#fff; }
.khs-nk li.do .khs-nk-so{ color:#ffb3a8; } .khs-nk li.vang .khs-nk-so{ color:var(--khs-vang); } .khs-nk li.xanh .khs-nk-so{ color:#b8d8ff; }
.khs-trong, .khs-ghi{ margin:8px 0 0; font-size:12px; color:#ffd9c2; }
.khs-quy{ margin:8px 0 0; padding-left:18px; font-size:12.5px; line-height:1.6; }
.khs-quy b{ color:#fff; }
@media (max-width:560px){
  .khs-than{ grid-template-columns:1fr 1fr; } .khs-o-xanh{ grid-column:1 / -1; }
  .khs-the{ padding:14px 13px 12px; } .khs-ic{ width:33px; height:39px; } .khs-ds{ gap:5px; } .khs-so b{ font-size:32px; }
  .khs-nk li{ grid-template-columns:42px minmax(0, 1fr); } .khs-nk-so{ grid-column:2; text-align:left; }
}
@media (prefers-reduced-motion:reduce){ .kh-so{ transition:none; } .kh-so:hover{ transform:none; } }

/* ───────── Đợt 2: thẻ chưa bật · nút · mục "Khiên & xin nghỉ" (js/hs-khien.js) ───────── */
.khs-chan{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid #ffffff1f}
.khs-nut{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:0;border-radius:11px;font:inherit;font-size:13px;font-weight:800;color:#5a0a14;background:linear-gradient(135deg,#ffe9a3,#f7c544);box-shadow:0 4px 12px #0003;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.khs-nut:hover{transform:translateY(-1px);box-shadow:0 7px 16px #0004}.khs-nut:focus-visible,.khs-nut-nho:focus-visible{outline:2px solid #ffce42;outline-offset:2px}.khs-nut:disabled{opacity:.6;cursor:wait}
.khs-canh{margin:10px 0 0;padding:8px 12px;border:1px solid #ffdc5866;border-radius:10px;background:#ffce4222;font-size:12.5px;color:#ffe9b0}
.khs-chua-bat .khs-chu b{color:#ffe27a}
.khs-day{border-color:#ffce42}

.khs-muc{display:grid;gap:14px}
.khs-khung{padding:18px 18px 16px;border:1px solid #ecddd0;border-radius:18px;background:#fffdf9;color:#21160f;box-shadow:0 5px 16px #5b191409}
.khs-khung h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:17px;font-weight:800;color:#b10e25}
.khs-khung h3 > i{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:10px;font-size:14px;color:#ffe9a3;background:linear-gradient(140deg,#b10e25,#7d0814)}
.khs-khung h4{margin:14px 0 6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7a6a60}
.khs-khung .khs-ghi{margin:0 0 10px;font-size:13px;line-height:1.55;color:#5d4d45}
.khs-khung .khs-trong{margin:6px 0;font-size:13px;color:#7a6a60}
.khs-loi{margin:0;padding:9px 12px;border-radius:10px;background:#fde5e3;color:#a30f20;font-size:13px;font-weight:600}
.khs-msg{margin:0;padding:0;font-size:13.5px;font-weight:700}.khs-msg:empty{display:none}.khs-msg.ok{padding:9px 13px;border-radius:11px;background:#dff5e6;color:#14693a}.khs-msg.loi{padding:9px 13px;border-radius:11px;background:#fde5e3;color:#a30f20}
.khs-ds-buoi{display:grid;gap:9px}
.khs-b{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:11px 13px;border:1px solid #ecddd0;border-left:5px solid #f7a531;border-radius:13px;background:linear-gradient(100deg,#fff8ee,#fffdf9)}
.khs-b.da-qua{border-left-color:#c9c0b8;background:#f8f4ef;opacity:.8}
.khs-b-gio{display:flex;flex-direction:column;min-width:78px;line-height:1.25}.khs-b-gio b{font-size:14.5px;font-weight:800;color:#b10e25}.khs-b-gio small{font-size:11.5px;font-weight:700;color:#7a6a60}
.khs-b-noi{display:flex;flex-direction:column;gap:3px;min-width:0}.khs-b-noi p{margin:0;font-size:13px;overflow-wrap:anywhere}.khs-b-noi small{font-size:12px;color:#7a6a60}.khs-muon{color:#9a4a00 !important;font-weight:600}
.khs-tem{align-self:flex-start;padding:2px 10px;border-radius:999px;background:#eee8e2;font-size:12px;font-weight:800;color:#6f635b}
.khs-tem.ok{background:#dff5e6;color:#14693a}.khs-tem.cho{background:#fff0d6;color:#9a4a00}.khs-tem.loi{background:#fde5e3;color:#a30f20}
.khs-nut-nho{padding:6px 13px;border:1px solid #e3c4c6;border-radius:10px;background:#fff6ee;font:inherit;font-size:12.5px;font-weight:700;color:#b10e25;cursor:pointer;white-space:nowrap}
.khs-nut-nho:hover{background:#b10e25;color:#fff;border-color:#b10e25}.khs-nut-nho.chinh{border:0;color:#fff7d6;background:linear-gradient(135deg,#d81a32,#7d0814)}
.khs-form{grid-column:1/-1;display:grid;gap:8px;margin-top:4px;padding:11px;border-radius:12px;background:#fff1e4}.khs-form[hidden]{display:none}
.khs-form label{display:grid;gap:4px;font-size:12px;font-weight:800;color:#7a6a60}
.khs-form textarea{width:100%;padding:8px 11px;border:1px solid #e4d4c5;border-radius:10px;background:#fff;font:inherit;font-size:13.5px;color:#21160f;resize:vertical}
.khs-form-nut{display:flex;gap:8px;flex-wrap:wrap}.khs-form .khs-nut{color:#fff7d6;background:linear-gradient(135deg,#d81a32,#7d0814);box-shadow:0 4px 12px #7d081433}
.khs-khung .khs-mo{margin-top:12px;border-top:1px solid #ecddd0}.khs-khung .khs-mo summary{color:#b10e25}
.khs-khung .khs-nk li{background:#fff6ee;border-left-color:#cdbfb3;color:#21160f}.khs-khung .khs-nk li.xanh{border-left-color:#3d8bea}.khs-khung .khs-nk li.vang{border-left-color:#f7a531}.khs-khung .khs-nk li.do{border-left-color:#d81a32}
.khs-khung .khs-nk-chu small{display:block;font-size:11.5px;color:#7a6a60}.khs-khung .khs-nk-so{color:#5d4d45;font-size:12px}
.khs-vp{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.khs-vp li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 12px;border:1px solid #ecddd0;border-radius:12px;background:#fffaf4}
.khs-vp li > div{display:flex;flex-direction:column;gap:2px;min-width:0}.khs-vp b{font-size:13.5px;color:#5f0e1a}.khs-vp small{font-size:12px;color:#7a6a60;overflow-wrap:anywhere}
.khs-han{color:#9a4a00 !important;font-weight:700}.khs-tl{color:#21160f !important}.khs-tl b{color:#14693a}
.khs-vinh-danh{border-color:#e9c766;background:linear-gradient(160deg,#fff8dc,#fffdf9)}
.khs-top{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:7px}
.khs-top li{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:12px;background:#fff;border:1px solid #efdca3}.khs-top b{font-size:14.5px;color:#5f0e1a}
.khs-hang{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:15px;font-weight:900;color:#5a0a14;background:linear-gradient(140deg,#ffe9a3,#f7c544);box-shadow:inset 0 -3px 0 #0002}
.khs-top li.hang-2 .khs-hang{background:linear-gradient(140deg,#f1f1f1,#bfc3c9)}
@media (max-width:560px){.khs-b{grid-template-columns:1fr}.khs-b > .khs-nut-nho{justify-self:start}.khs-vp li{grid-template-columns:1fr}.khs-vp li > .khs-nut-nho{justify-self:start}}

/* ───────── Đợt 2 — tab nhân viên: xin nghỉ · khiếu nại · MVP ───────── */
.kh-so.tim .kh-so-ic{background:linear-gradient(135deg,#9362e0,#5a2fa8)}
.kh-tem.loi{background:#fde5e3;color:#a30f20}
.kh-mo-chi-tiet{margin-top:12px}.kh-mo-chi-tiet summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--nv-do-2,#b10e25)}
.kh-lop-tieu-de{margin:16px 0 6px;font-size:14px;font-weight:800;color:var(--nv-do-2,#b10e25)}
.kh-hang{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eee8e2;font-size:13px;font-weight:900;color:#6f635b}
.kh-hang.h1{background:linear-gradient(140deg,#ffe9a3,#f7c544);color:#5a0a14}.kh-hang.h2{background:linear-gradient(140deg,#f1f1f1,#bfc3c9);color:#3d4047}.kh-hang.h3{background:linear-gradient(140deg,#f2c9a0,#c8844a);color:#4a2308}
tr.kh-vd > td{background:#fff8e1}
.dd-nhan-nghi{background:#ece8fb !important;color:#4b3aa8 !important}

/* Nửa Khiên xanh (số lẻ từ kỳ 3, 06/11/2026): khiên mờ phía sau + khiên đầy bị cắt nửa bên trái */
.kh-nua, .khs-nua{ position:relative; display:inline-block; flex:none; line-height:0; }
.kh-nua .kh-ic.con, .khs-nua > .khs-ic:last-child{ position:absolute; left:0; top:0; clip-path:inset(0 50% 0 0); }
.khs-thanh i.nua{ background:linear-gradient(90deg, #2f7bea 50%, #ffffff1c 50%); }

/* =====================================================================================
 * KHUNG NHÂN VIÊN (Admin / trợ giảng / kế toán) — thầy gửi ảnh mẫu 03/10/2026: thanh đầu đỏ bóng + chỉ vàng,
 * menu dọc đỏ đậm, mục đang mở = viên vàng TRƯỢT tới, mục con = thẻ trắng bo tròn, mục đang mở = viên đỏ trượt,
 * tiêu đề trang sạch (chữ đậm tối + dòng mô tả), mọi chuyển động êm (cubic-bezier giảm tốc).
 * Nạp SAU sieu-anh-hung.css + marvel-tab.css nên ghi đè được; chỉ đổi khung, không đụng nội dung trong tab.
 * JS đi kèm: app.js (datThanhChay_, capNhatMenuChinh_, hienTab_, tài khoản thả xuống).
 * ===================================================================================== */
:root{
  --nv-do-1:#7d0814; --nv-do-2:#b10e25; --nv-do-3:#d81a32; --nv-do-4:#ec3346;
  --nv-vang-1:#ffe9a3; --nv-vang-2:#f7c544; --nv-vang-3:#e39b16;
  --nv-nen:#f9f2ea; --nv-the:#fffdf9; --nv-chu:#21160f; --nv-phu:#7a6a60; --nv-vien:rgba(125,35,20,.10);
  --nv-em:cubic-bezier(.22,1,.36,1);            /* giảm tốc êm — mọi chuyển động chính */
  --nv-nay:cubic-bezier(.34,1.56,.64,1);        /* nảy nhẹ — huy hiệu */
}
html.gd-sieu-anh-hung{ --sidebar:228px; --head:88px; }
@media (max-width:991.98px){ html.gd-sieu-anh-hung{ --head:74px; } }
@media (max-width:640px){ html.gd-sieu-anh-hung{ --head:66px; } }

/* Nền trang khi đang ở khung nhân viên (app.js gắn body.nv-khung lúc đăng nhập) */
html.gd-sieu-anh-hung body.nv-khung{
  background-color:var(--nv-nen);
  background-image:
    radial-gradient(900px 520px at 100% 0%, rgba(216,26,50,.07), transparent 60%),
    radial-gradient(700px 480px at 0% 100%, rgba(247,197,68,.10), transparent 60%);
  background-size:auto; background-attachment:fixed;
}

/* ═════════════ THANH ĐẦU ═════════════ */
html.gd-sieu-anh-hung #appShell .navbar{
  min-height:var(--head); padding:0; isolation:isolate; overflow:visible;
  background:
    /* màu theo ảnh mẫu thầy 03/10/2026 tối: đỏ rượu đậm, 2 vệt sáng cong mảnh ở giữa, không viền vàng */
    radial-gradient(60% 140% at 50% 120%, rgba(255,70,80,.22), transparent 60%),
    linear-gradient(118deg, transparent 52%, rgba(255,120,120,.20) 53.2%, transparent 55%, transparent 58%, rgba(255,140,140,.14) 59%, transparent 61.5%),
    radial-gradient(90% 180% at 8% 50%, rgba(0,0,0,.28), transparent 60%),
    linear-gradient(100deg, #4a050c 0%, #7a0812 30%, #a10d1c 55%, #8a0a17 75%, #5a060e 100%);
  border:0 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 2px 0 #2c0206, 0 14px 30px -14px rgba(60,0,8,.8);
}
/* vệt sáng lướt chậm qua thanh đầu (9 s một lần, chỉ chiếm ~1 s đầu) */
html.gd-sieu-anh-hung #appShell .navbar::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.13) 48%, transparent 61%) no-repeat;
  background-size:60% 100%; background-position:-80% 0;
  animation:nvVetSang 9s var(--nv-em) 1.2s infinite;
}
@keyframes nvVetSang{ 0%{ background-position:-80% 0; } 14%, 100%{ background-position:220% 0; } }
/* chỉ vàng sáng dọc mép dưới thanh đầu + đốm sáng chạy dọc theo chỉ (thầy yêu cầu 04/10/2026) */
html.gd-sieu-anh-hung #appShell .navbar::before{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.95) 45%, #fff6c8 50%, rgba(255,255,255,.95) 55%, transparent) no-repeat,
    linear-gradient(90deg, rgba(227,155,22,.35) 0%, var(--nv-vang-2) 18%, var(--nv-vang-1) 50%, var(--nv-vang-2) 82%, rgba(227,155,22,.35) 100%);
  background-size:18% 100%, 100% 100%; background-position:-20% 0, 0 0;
  box-shadow:0 0 6px rgba(255,210,77,.75), 0 0 16px rgba(247,197,68,.45);
  animation:nvChiVang 4.5s cubic-bezier(.45,.05,.35,1) infinite;
}
@keyframes nvChiVang{ 0%{ background-position:-20% 0, 0 0; } 70%, 100%{ background-position:120% 0, 0 0; } }
html.gd-sieu-anh-hung #appShell .navbar > .container-fluid{ min-height:var(--head); padding-left:22px !important; padding-right:22px !important; }

html.gd-sieu-anh-hung #appShell .navbar-brand{
  column-gap:16px; font-family:'Be Vietnam Pro', system-ui, sans-serif; font-style:italic; font-weight:900;
  font-size:31px; letter-spacing:.005em; line-height:1; text-shadow:none; color:#fff !important;
  animation:nvHienTrai .7s var(--nv-em) both;
}
html.gd-sieu-anh-hung #appShell .navbar-brand .ten-td{
  background:linear-gradient(180deg, #fff 0%, #fff 52%, #ffe3a3 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:.24em 0 .2em; margin:-.24em 0 -.2em;   /* chừa chỗ cho dấu trên/dưới (chữ tô gradient chỉ hiện trong khung) */
  filter:drop-shadow(0 2px 0 rgba(70,0,10,.55)) drop-shadow(0 6px 10px rgba(70,0,10,.35));
  padding-right:.08em;                          /* chữ nghiêng: không cụt nét chữ cuối */
  /* Dấu chồng (Ậ, Ầ, Ạ) nằm ngoài khung dòng cao 1 → nền cắt theo chữ không tô tới, dấu bị mờ / mất (thầy báo 03/10/2026).
     Nới khung trên/dưới cho nền phủ hết dấu, kéo margin âm để chữ không bị đẩy lệch. */
  display:inline-block; padding-top:.3em; padding-bottom:.12em; margin-top:-.3em; margin-bottom:-.12em; line-height:1.05;
}
html.gd-sieu-anh-hung #appShell .navbar-brand::before{
  width:68px; height:68px; background:#170d0a url('../logo.png') center / 84% no-repeat;
  border:2.5px solid #fff4d6;
  box-shadow:0 0 0 3px var(--nv-vang-2), 0 0 0 5px rgba(90,0,10,.55), 0 8px 18px rgba(40,0,5,.55), 0 0 22px rgba(247,197,68,.35);
  transition:transform .6s var(--nv-nay);
}
html.gd-sieu-anh-hung #appShell .navbar-brand:hover::before{ transform:rotate(-10deg) scale(1.05); }
html.gd-sieu-anh-hung #appShell .navbar-brand small{
  margin-top:9px; padding:3px 14px; transform:skew(-14deg); font-style:normal;
  font-family:'Be Vietnam Pro', system-ui, sans-serif; font-weight:800; font-size:14px; letter-spacing:.01em; text-transform:none; font-style:italic;
  color:#5a0a10; background:linear-gradient(180deg, var(--nv-vang-1), var(--nv-vang-2) 55%, var(--nv-vang-3));
  border:0; border-radius:3px; box-shadow:0 3px 10px rgba(60,0,8,.35), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Tìm nhanh */
html.gd-sieu-anh-hung .tim-nhanh{ width:min(330px, 26vw); }
html.gd-sieu-anh-hung .tim-nhanh > i{ left:16px; color:var(--nv-do-2); font-size:16px; }
html.gd-sieu-anh-hung #timNhanhO{
  height:46px; padding:0 16px 0 44px; font-weight:500; font-size:15px; color:var(--nv-chu); background:#fff;
  border:0; border-radius:14px; box-shadow:0 6px 16px -6px rgba(60,0,10,.45), inset 0 0 0 1px rgba(255,255,255,.6);
  transition:box-shadow .3s var(--nv-em), transform .3s var(--nv-em);
}
html.gd-sieu-anh-hung #timNhanhO::placeholder{ color:#9a8b82; }
html.gd-sieu-anh-hung #timNhanhO:focus{ box-shadow:0 10px 24px -8px rgba(60,0,10,.5), 0 0 0 3px rgba(255,214,102,.75); transform:translateY(-1px); }
html.gd-sieu-anh-hung .tim-nhanh-ds{
  top:calc(100% + 10px); padding:8px; background:#fff; border:1px solid var(--nv-vien); border-radius:16px;
  box-shadow:0 22px 48px -18px rgba(70,15,10,.45); animation:nvBangHien .28s var(--nv-em);
}
html.gd-sieu-anh-hung .tim-nhanh-ds li{ border-radius:10px; transition:background-color .2s, box-shadow .2s; }
html.gd-sieu-anh-hung .tim-nhanh-ds li i{ color:var(--nv-do-2); }
html.gd-sieu-anh-hung .tim-nhanh-ds li small{ color:var(--nv-phu); }
html.gd-sieu-anh-hung .tim-nhanh-ds li.dang-chon, html.gd-sieu-anh-hung .tim-nhanh-ds li[data-i]:hover{ background:#fff3e0; box-shadow:inset 3px 0 0 var(--nv-do-2); }

/* Nút tròn thanh đầu: chuông */
html.gd-sieu-anh-hung .chuong-nut{
  width:46px; height:46px; border-radius:14px; font-size:18px; color:#fff;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.45); box-shadow:0 6px 14px -8px rgba(40,0,5,.7);
  transition:background-color .25s var(--nv-em), transform .3s var(--nv-em), box-shadow .3s var(--nv-em);
}
html.gd-sieu-anh-hung .chuong-nut:hover, html.gd-sieu-anh-hung .chuong-nut:focus-visible, html.gd-sieu-anh-hung .chuong-nut[aria-expanded="true"]{
  color:#fff; background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.75); transform:translateY(-2px); box-shadow:0 10px 18px -8px rgba(40,0,5,.8);
}
html.gd-sieu-anh-hung .chuong-nut:hover i{ animation:nvLacChuong .7s var(--nv-em); }
@keyframes nvLacChuong{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(16deg); } 45%{ transform:rotate(-12deg); } 70%{ transform:rotate(6deg); } }
html.gd-sieu-anh-hung .chuong-nut:active{ transform:scale(.95); }
html.gd-sieu-anh-hung .chuong-so{
  top:-7px; right:-7px; min-width:22px; height:22px; font-size:11px; font-weight:800; color:#fff;
  background:linear-gradient(180deg, #ff4a5c, #e0142c); border:2px solid #fff; box-shadow:0 3px 8px rgba(60,0,8,.45);
}
html.gd-sieu-anh-hung .chuong-so:not([hidden])::after{   /* gợn sóng nhẹ quanh số đếm */
  content:''; position:absolute; inset:-2px; border-radius:inherit; border:2px solid rgba(255,90,100,.8); animation:nvGon 2.4s var(--nv-em) infinite;
}
@keyframes nvGon{ 0%{ transform:scale(1); opacity:.9; } 70%, 100%{ transform:scale(1.7); opacity:0; } }
html.gd-sieu-anh-hung .chuong-bang{
  top:calc(100% + 12px); padding:8px; color:var(--nv-chu); background:#fff; border:1px solid var(--nv-vien); border-radius:18px;
  box-shadow:0 24px 50px -18px rgba(70,15,10,.5); animation:nvBangHien .3s var(--nv-em);
}
html.gd-sieu-anh-hung .chuong-tieu-de{
  margin:-8px -8px 8px; padding:12px 16px; font-family:'Be Vietnam Pro', system-ui, sans-serif; font-weight:800; font-size:16px;
  letter-spacing:0; text-transform:none; text-shadow:none; border:0;
  background:linear-gradient(100deg, var(--nv-do-1), var(--nv-do-3));
}
html.gd-sieu-anh-hung .chuong-muc{ border-radius:12px; color:var(--nv-chu); transition:background-color .2s, transform .25s var(--nv-em); }
html.gd-sieu-anh-hung .chuong-muc:hover, html.gd-sieu-anh-hung .chuong-muc:focus-visible{ background:#fff3e0; transform:translateX(3px); }
html.gd-sieu-anh-hung .chuong-icon{ border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(214,160,40,.7), 0 3px 8px rgba(0,0,0,.2); }

/* Tài khoản: viên "QL  Tên ⌄" + bảng thả xuống (Đổi mật khẩu / Đăng xuất) */
.tai-khoan{ position:relative; display:flex; align-items:center; gap:8px; }
html.gd-sieu-anh-hung .tai-khoan .user-pill{
  display:inline-flex; align-items:center; gap:10px; height:46px; padding:4px 14px 4px 5px; cursor:pointer; color:#fff; font:inherit;
  background:rgba(0,0,0,.16); border:1.5px solid rgba(255,255,255,.4); border-radius:14px; box-shadow:0 6px 14px -8px rgba(40,0,5,.7);
  transition:background-color .25s var(--nv-em), border-color .25s, transform .3s var(--nv-em);
}
html.gd-sieu-anh-hung .tai-khoan .user-pill:hover, html.gd-sieu-anh-hung .tai-khoan .user-pill[aria-expanded="true"]{
  background:rgba(0,0,0,.26); border-color:rgba(255,255,255,.75); transform:translateY(-2px);
}
html.gd-sieu-anh-hung .tai-khoan .user-pill:focus-visible{ outline:3px solid var(--nv-vang-2); outline-offset:2px; }
html.gd-sieu-anh-hung .tai-khoan .user-avatar{
  width:36px; height:36px; font-family:'Be Vietnam Pro', system-ui, sans-serif; font-weight:800; font-size:13px; letter-spacing:.02em;
  color:#fff; background:rgba(255,255,255,.1); border:2px solid #fff; text-shadow:none;
}
html.gd-sieu-anh-hung .tai-khoan .role-badge{
  display:flex; flex-direction:column; align-items:flex-start; max-width:170px; padding:0; color:#fff; background:none; border:0;
  font-family:'Be Vietnam Pro', system-ui, sans-serif; font-size:14px; letter-spacing:0; text-transform:none; line-height:1.15;
}
.role-badge b{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.role-badge small{ font-size:11.5px; font-weight:500; opacity:.82; }
html:not(.gd-sieu-anh-hung) .role-badge small::before{ content:' ('; } html:not(.gd-sieu-anh-hung) .role-badge small::after{ content:')'; }
.tai-khoan-mui{ font-size:11px; opacity:.85; transition:transform .35s var(--nv-em); }
.user-pill[aria-expanded="true"] .tai-khoan-mui{ transform:rotate(180deg); }
html.gd-sieu-anh-hung .tai-khoan-bang{
  position:absolute; top:calc(100% + 12px); right:0; z-index:1100; min-width:210px; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:#fff; border:1px solid var(--nv-vien); border-radius:16px; box-shadow:0 24px 50px -18px rgba(70,15,10,.5);
  transform-origin:top right; animation:nvBangHien .28s var(--nv-em);
}
html.gd-sieu-anh-hung .tai-khoan-bang[hidden]{ display:none; }
html.gd-sieu-anh-hung #appShell .navbar .tai-khoan-bang .btn{
  display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100%; height:auto; padding:10px 12px; border-radius:11px;
  font-size:14.5px; font-weight:600; color:var(--nv-chu); background:none; border:0; box-shadow:none; transform:none;
  transition:background-color .2s, transform .25s var(--nv-em);
}
html.gd-sieu-anh-hung #appShell .navbar .tai-khoan-bang .btn i{ width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--nv-do-2); background:#fff1ec; }
html.gd-sieu-anh-hung #appShell .navbar .tai-khoan-bang .btn:hover, html.gd-sieu-anh-hung #appShell .navbar .tai-khoan-bang .btn:focus-visible{ background:#fff3e0; transform:translateX(3px); }
html.gd-sieu-anh-hung #appShell .navbar .tai-khoan-bang #changePassBtn{ display:flex; }   /* điện thoại cũng hiện (luật cũ ẩn ≤640px) */
html.gd-sieu-anh-hung #appShell .navbar .tai-khoan-bang #logoutBtn{ color:var(--nv-do-2); }
html.gd-sieu-anh-hung #appShell .navbar .tai-khoan-bang #logoutBtn i{ color:#fff; background:var(--nv-do-3); }
/* Giao diện cổ điển (?giaodien=macdinh): 2 nút luôn hiện cạnh tên như trước */
html:not(.gd-sieu-anh-hung) .tai-khoan-bang{ display:inline-flex !important; gap:8px; }
html:not(.gd-sieu-anh-hung) .tai-khoan-bang .chi-gd-moi, html:not(.gd-sieu-anh-hung) .tai-khoan-mui{ display:none; }
html:not(.gd-sieu-anh-hung) .tai-khoan .user-pill{ background:none; border:0; padding:0; color:inherit; pointer-events:none; }
@keyframes nvBangHien{ from{ opacity:0; transform:translateY(-8px) scale(.97); } to{ opacity:1; transform:none; } }

/* ═════════════ MENU DỌC ═════════════ */
html.gd-sieu-anh-hung .menu-chinh{
  padding:24px 12px 20px; gap:14px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
  background:
    radial-gradient(120% 40% at 0% 0%, rgba(255,80,80,.10), transparent 60%),
    linear-gradient(180deg, #4e070d 0%, #3e0509 45%, #2c0306 100%);   /* đỏ rượu rất đậm như ảnh mẫu */
  border-right:0; box-shadow:inset -1px 0 0 rgba(255,255,255,.07), 8px 0 26px -16px rgba(80,0,10,.7);
}
html.gd-sieu-anh-hung .menu-chinh-tren, html.gd-sieu-anh-hung .menu-chinh-duoi{ gap:6px; }   /* KHÔNG position: nút phải đo offset theo #menuChinh */
html.gd-sieu-anh-hung .menu-chinh-duoi{ padding-top:14px; border-top:1px solid rgba(255,255,255,.13); }
html.gd-sieu-anh-hung .menu-chinh-nut{
  position:relative; z-index:1; min-height:58px; gap:14px; padding:8px 12px 8px 9px; border:0; border-radius:16px;
  font-family:'Be Vietnam Pro', system-ui, sans-serif; font-weight:600; font-size:17px; letter-spacing:0; text-transform:none; line-height:1.2;
  color:rgba(255,246,236,.93); background:transparent; box-shadow:none; transform:none;
  transition:color .35s var(--nv-em), background-color .3s var(--nv-em), transform .4s var(--nv-em);
}
html.gd-sieu-anh-hung .menu-chinh-nut:hover{ color:#fff; background:rgba(255,255,255,.08); border:0; transform:translateX(4px); }
html.gd-sieu-anh-hung .menu-chinh-nut:focus-visible{ outline:2px solid var(--nv-vang-2); outline-offset:2px; }
html.gd-sieu-anh-hung .menu-chinh-nut.active{ color:#3d1a02; font-weight:700; background:transparent; box-shadow:none; transform:none; }
html.gd-sieu-anh-hung .menu-chinh:not(.co-chay) .menu-chinh-nut.active{ background:linear-gradient(135deg, var(--nv-vang-1), var(--nv-vang-2) 45%, var(--nv-vang-3)); }
html.gd-sieu-anh-hung .menu-chinh-duoi .menu-chinh-nut{ font-size:16px; }
/* Viên vàng trượt tới mục đang mở (app.js datThanhChay_) */
.menu-chinh-chay, .menu-con-chay{ position:absolute; left:0; top:0; z-index:0; width:0; height:0; opacity:0; pointer-events:none;
  transition:transform .55s var(--nv-em), width .55s var(--nv-em), height .55s var(--nv-em), opacity .3s; will-change:transform; }
html:not(.gd-sieu-anh-hung) .menu-chinh-chay, html:not(.gd-sieu-anh-hung) .menu-con-chay{ display:none; }
.menu-chinh-chay{
  border-radius:16px; background:linear-gradient(135deg, var(--nv-vang-1) 0%, var(--nv-vang-2) 46%, var(--nv-vang-3) 100%);
  box-shadow:0 10px 22px -8px rgba(250,170,30,.75), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(160,90,0,.25);
}
.menu-chinh-chay::after{   /* ánh kim lướt qua mỗi lần trượt tới mục mới */
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%) no-repeat; background-size:220% 100%; background-position:130% 0;
}
.menu-chinh-chay.loe::after{ animation:nvAnhKim .9s var(--nv-em) .15s; }
@keyframes nvAnhKim{ from{ background-position:130% 0; } to{ background-position:-90% 0; } }
/* Huy hiệu nhóm: viền vàng + bóng kính, nảy nhẹ khi rê chuột */
html.gd-sieu-anh-hung .menu-chinh .menu-huy{
  position:relative; width:44px; height:44px; border:2px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 2.5px rgba(242,190,70,.95), 0 0 0 4px rgba(70,0,8,.35), 0 6px 12px rgba(30,0,4,.45);
  transition:transform .55s var(--nv-nay), box-shadow .4s var(--nv-em);
}
html.gd-sieu-anh-hung .menu-chinh .menu-huy i{ font-size:17px; }
.menu-huy, .tab-huy, html.gd-sieu-anh-hung #appShell .mv-bang .mv-logo{ position:relative; }   /* bắt buộc: lớp bóng kính ::after phải nằm gọn trong huy hiệu */
.menu-huy::after, .tab-huy::after, html.gd-sieu-anh-hung #appShell .mv-bang .mv-logo::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 32% 24%, rgba(255,255,255,.6), rgba(255,255,255,.12) 34%, transparent 52%);
}
html.gd-sieu-anh-hung .menu-chinh-nut:hover .menu-huy{ transform:rotate(-12deg) scale(1.1); }
html.gd-sieu-anh-hung .menu-chinh-nut.active .menu-huy{ transform:scale(1.06); box-shadow:0 0 0 2.5px #fff7df, 0 0 0 4px rgba(150,80,0,.35), 0 6px 14px rgba(120,60,0,.45); }
html.gd-sieu-anh-hung .menu-chinh-nut.active:hover .menu-huy{ transform:rotate(-10deg) scale(1.12); }
html.gd-sieu-anh-hung .menu-dem{
  min-width:24px; padding:2px 8px; font-size:12px; color:#fff; border:0; box-shadow:0 3px 8px rgba(60,0,8,.35);
  background:linear-gradient(180deg, #ff4a5c, #d9122a);
}

/* ═════════════ MỤC CON (thanh viên trắng, mục đang mở = viên đỏ trượt) ═════════════ */
html.gd-sieu-anh-hung .menu-con{ position:relative; gap:10px; margin:6px 0 20px; }
html.gd-sieu-anh-hung .menu-con-nut{
  position:relative; z-index:1; min-height:50px; gap:10px; padding:6px 20px 6px 7px; border-radius:16px;
  font-family:'Be Vietnam Pro', system-ui, sans-serif; font-weight:600; font-size:15.5px; letter-spacing:0; text-transform:none; line-height:1.2;
  color:var(--nv-chu); background:#fff; border:1px solid var(--nv-vien);
  box-shadow:0 2px 4px rgba(90,25,10,.05), 0 8px 18px -12px rgba(90,25,10,.35);
  transition:color .35s var(--nv-em), background-color .35s var(--nv-em), border-color .35s, box-shadow .35s var(--nv-em), transform .35s var(--nv-em);
}
html.gd-sieu-anh-hung .menu-con-nut:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 8px rgba(90,25,10,.06), 0 14px 26px -14px rgba(90,25,10,.45); }
html.gd-sieu-anh-hung .menu-con-nut:active{ transform:translateY(0) scale(.98); }
html.gd-sieu-anh-hung .menu-con-nut:focus-visible{ outline:2px solid var(--nv-do-3); outline-offset:2px; }
html.gd-sieu-anh-hung .menu-con-nut.active{ color:#2a1606; font-weight:800; background:transparent; border-color:transparent; box-shadow:none; transform:none; }
html.gd-sieu-anh-hung .menu-con:not(.co-chay) .menu-con-nut.active{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d); }
.menu-con-chay{
  border-radius:16px; background:linear-gradient(180deg, #ffe48a 0%, #f8cf55 55%, #eeb32d 100%);
  box-shadow:0 10px 22px -12px rgba(170,110,0,.85), inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(200,140,20,.55);
}
.menu-con-chay.moi{ animation:nvNoRa .45s var(--nv-em); }
@keyframes nvNoRa{ from{ opacity:0; transform:var(--nv-vi-tri) scale(.85); } }
html.gd-sieu-anh-hung .menu-con-nut .tab-huy{
  position:relative; width:34px; height:34px; border:2px solid #fff;
  box-shadow:0 0 0 1.5px rgba(214,160,40,.85), 0 3px 8px rgba(40,0,5,.28);
  transition:transform .55s var(--nv-nay), box-shadow .35s;
}
html.gd-sieu-anh-hung .menu-con-nut .tab-huy i{ font-size:13px; }
html.gd-sieu-anh-hung .menu-con-nut:hover .tab-huy{ transform:rotate(-12deg) scale(1.1); }
html.gd-sieu-anh-hung .menu-con-nut.active .tab-huy{ transform:scale(1.05); box-shadow:0 0 0 2px rgba(255,225,150,.95), 0 3px 10px rgba(40,0,5,.4); }
/* Đổi nhóm: các mục con hiện lần lượt */
.menu-con.vao .menu-con-nut{ animation:nvLen .5s var(--nv-em) both; animation-delay:calc(var(--i, 0) * 45ms); }

/* ═════════════ KHUNG TAB + TIÊU ĐỀ TRANG ═════════════ */
html.gd-sieu-anh-hung #appShell .mv.tab-pane{
  background:var(--nv-the); border:1px solid var(--nv-vien); border-radius:24px; padding:0 22px 22px; margin-bottom:16px;
  box-shadow:0 1px 2px rgba(90,25,10,.04), 0 18px 40px -22px rgba(110,30,15,.35);
}
html.gd-sieu-anh-hung #appShell .mv.tab-pane > .mv-bang{
  position:relative; gap:16px; margin:0 -22px 20px; padding:20px 24px 18px; color:var(--nv-chu);
  background:linear-gradient(180deg, #fff 0%, #fff9f1 100%); border-bottom:1px solid var(--nv-vien); border-radius:24px 24px 0 0;
}
html.gd-sieu-anh-hung #appShell .mv.tab-pane > .mv-bang::after{   /* gạch vàng-đỏ mảnh dưới tiêu đề */
  content:''; position:absolute; left:24px; bottom:-1px; width:86px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--nv-do-3), var(--nv-vang-2));
}
html.gd-sieu-anh-hung #appShell .mv-bang .mv-logo{
  position:relative; width:56px; height:56px; font-size:21px; border:2.5px solid #fff;
  box-shadow:0 0 0 2.5px rgba(232,178,52,.95), 0 8px 18px -6px rgba(90,20,5,.5);
}
html.gd-sieu-anh-hung #appShell .mv-bang .mv-tieu-de{
  font-family:'Be Vietnam Pro', system-ui, sans-serif; font-weight:800; font-size:29px; letter-spacing:-.01em; line-height:1.15;
  color:var(--nv-chu) !important; text-shadow:none !important; text-transform:none;
}
html.gd-sieu-anh-hung #appShell .mv-bang .mv-phu{ margin-top:4px; font-size:14.5px; font-weight:500; color:var(--nv-phu); opacity:1; }

/* Chuyển tab: khung trồi lên + từng khối bên trong hiện lần lượt */
#appShell .tab-pane.nv-vao{ animation:nvLen .5s var(--nv-em) both; }
#appShell .tab-pane.nv-vao > .mv-bang .mv-logo{ animation:nvHuyVao .7s var(--nv-nay) .08s both; }
#appShell .tab-pane.nv-vao > .mv-bang > div{ animation:nvHienTrai .55s var(--nv-em) .1s both; }
#appShell .tab-pane.nv-vao > :not(.mv-bang):nth-child(-n+9),
#appShell .tab-pane.nv-vao > .tg > :nth-child(-n+8){ animation:nvLen .55s var(--nv-em) both; }
#appShell .tab-pane.nv-vao > :nth-child(2), #appShell .tab-pane.nv-vao > .tg > :nth-child(1){ animation-delay:.06s; }
#appShell .tab-pane.nv-vao > :nth-child(3), #appShell .tab-pane.nv-vao > .tg > :nth-child(2){ animation-delay:.11s; }
#appShell .tab-pane.nv-vao > :nth-child(4), #appShell .tab-pane.nv-vao > .tg > :nth-child(3){ animation-delay:.16s; }
#appShell .tab-pane.nv-vao > :nth-child(5), #appShell .tab-pane.nv-vao > .tg > :nth-child(4){ animation-delay:.21s; }
#appShell .tab-pane.nv-vao > :nth-child(6), #appShell .tab-pane.nv-vao > .tg > :nth-child(5){ animation-delay:.26s; }
#appShell .tab-pane.nv-vao > :nth-child(n+7), #appShell .tab-pane.nv-vao > .tg > :nth-child(n+6){ animation-delay:.3s; }
@keyframes nvLen{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes nvHienTrai{ from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:none; } }
@keyframes nvHuyVao{ from{ opacity:0; transform:scale(.6) rotate(-25deg); } to{ opacity:1; transform:none; } }

/* Bảng khung trên nền giấy: đang tải, cảnh báo kết nối, thanh lưu điểm danh */
html.gd-sieu-anh-hung #dsLoading{
  display:none; width:max-content; margin:12px 0 0 calc(var(--sidebar) + 32px); padding:6px 14px !important; border-radius:999px;
  font-size:13px; color:var(--nv-do-2) !important; background:#fff; box-shadow:0 6px 16px -10px rgba(90,25,10,.5); animation:nvBangHien .3s var(--nv-em);
}
@media (max-width:991.98px){ html.gd-sieu-anh-hung #dsLoading{ margin-left:12px; } }
html.gd-sieu-anh-hung .att-footer{
  color:var(--nv-chu); background:rgba(255,253,249,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--nv-vien); box-shadow:0 -12px 30px -18px rgba(90,25,10,.45); animation:nvLenDay .45s var(--nv-em);
}
html.gd-sieu-anh-hung .att-footer .text-secondary{ color:var(--nv-phu) !important; font-weight:600; }
@keyframes nvLenDay{ from{ transform:translateY(100%); } to{ transform:none; } }

/* ═════════════ MÀN NHỎ ═════════════ */
@media (min-width:992px){
  html.gd-sieu-anh-hung #appShell > .px-3:has(> .tab-pane){ padding:22px 30px 48px !important; }
}
@media (max-width:991.98px){
  html.gd-sieu-anh-hung #appShell .navbar > .container-fluid{ padding-left:12px !important; padding-right:12px !important; }
  html.gd-sieu-anh-hung #appShell .navbar-brand{ font-size:clamp(17px, 2.7vw, 24px); column-gap:12px; }
  html.gd-sieu-anh-hung #appShell .navbar-brand::before{ width:50px; height:50px; }
  html.gd-sieu-anh-hung #appShell .navbar-brand small{ font-size:11px; letter-spacing:0; margin-top:6px; padding:2px 9px; }
  html.gd-sieu-anh-hung .chuong-nut{ width:40px; height:40px; border-radius:12px; font-size:16px; }
  html.gd-sieu-anh-hung #timNhanhO{ height:40px; font-size:14px; padding-left:38px; border-radius:12px; }
  html.gd-sieu-anh-hung .tim-nhanh > i{ left:13px; font-size:14px; }
  html.gd-sieu-anh-hung .user-pill{ display:inline-flex !important; }
  html.gd-sieu-anh-hung .tai-khoan .user-pill{ height:40px; padding:3px; border-radius:12px; }
  html.gd-sieu-anh-hung .tai-khoan .user-avatar{ width:32px; height:32px; font-size:12px; }
  html.gd-sieu-anh-hung .tai-khoan .role-badge, html.gd-sieu-anh-hung .tai-khoan-mui{ display:none; }
  /* menu nhóm thành thanh ngang đỏ, viên vàng trượt ngang */
  html.gd-sieu-anh-hung .menu-chinh{ padding:8px 10px; gap:6px; border-bottom:0; box-shadow:0 10px 22px -14px rgba(80,0,10,.8);
    background:linear-gradient(100deg, #4e070d, #2c0306); }
  html.gd-sieu-anh-hung .menu-chinh-tren, html.gd-sieu-anh-hung .menu-chinh-duoi{ gap:4px; }
  html.gd-sieu-anh-hung .menu-chinh-duoi{ padding:0 0 0 8px; border-top:0; border-left:1px solid rgba(255,255,255,.15); }
  html.gd-sieu-anh-hung .menu-chinh-nut{ min-height:46px; padding:5px 14px 5px 5px; gap:9px; font-size:15px; border-radius:14px; }
  html.gd-sieu-anh-hung .menu-chinh-nut:hover{ transform:translateY(-1px); }
  html.gd-sieu-anh-hung .menu-chinh .menu-huy{ width:34px; height:34px; }
  html.gd-sieu-anh-hung .menu-chinh .menu-huy i{ font-size:14px; }
  html.gd-sieu-anh-hung .menu-chinh-duoi .menu-chinh-nut{ padding-right:5px; }
  .menu-chinh-chay{ border-radius:14px; }
  html.gd-sieu-anh-hung .menu-con{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:12px -12px 14px; padding:4px 12px 10px; }
  html.gd-sieu-anh-hung .menu-con::-webkit-scrollbar{ display:none; }
  html.gd-sieu-anh-hung .menu-con-nut{ flex:none; white-space:nowrap; min-height:44px; font-size:14.5px; padding-right:16px; }
  html.gd-sieu-anh-hung .menu-con-nut .tab-huy{ width:30px; height:30px; }
}
@media (max-width:640px){
  html.gd-sieu-anh-hung #appShell .navbar-brand{ font-size:16px; }
  html.gd-sieu-anh-hung #appShell .navbar-brand::before{ width:44px; height:44px; }
  html.gd-sieu-anh-hung #appShell .navbar-brand small{ font-size:8px; letter-spacing:.1em; }
  html.gd-sieu-anh-hung #appShell .mv.tab-pane{ border-radius:18px; padding:0 12px 14px; }
  html.gd-sieu-anh-hung #appShell .mv.tab-pane > .mv-bang{ margin:0 -12px 14px; padding:14px 14px 12px; gap:12px; border-radius:18px 18px 0 0; }
  html.gd-sieu-anh-hung #appShell .mv.tab-pane > .mv-bang::after{ left:14px; }
  html.gd-sieu-anh-hung #appShell .mv-bang .mv-logo{ width:44px; height:44px; font-size:17px; }
  html.gd-sieu-anh-hung #appShell .mv-bang .mv-tieu-de{ font-size:21px; }
  html.gd-sieu-anh-hung #appShell .mv-bang .mv-phu{ font-size:12.5px; }
}

@media (prefers-reduced-motion: reduce){
  html.gd-sieu-anh-hung #appShell .navbar::after, html.gd-sieu-anh-hung #appShell .navbar::before, .chuong-so::after{ animation:none; }
  .menu-chinh-chay, .menu-con-chay{ transition:none; }
  #appShell .tab-pane.nv-vao, #appShell .tab-pane.nv-vao *, .menu-con.vao .menu-con-nut, .menu-con-chay.moi, .menu-chinh-chay.loe::after,
  html.gd-sieu-anh-hung #appShell .navbar-brand, .tai-khoan-bang, .chuong-bang, .tim-nhanh-ds, .att-footer{ animation:none !important; }
}
@media print{ html.gd-sieu-anh-hung body.nv-khung{ background:#fff; } }

/* ADMIN "XEM NHƯ" trợ giảng / học sinh (chỉ xem) — js/xem-nhu.js, 07/10/2026 */
.xem-nhu-bang{ position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:3000; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 20px);
  padding:9px 10px 9px 16px; border-radius:999px; color:#fff3dc; font-size:14px; background:linear-gradient(115deg,#3d0207,#7a0812 55%,#5a060e); border:2px solid #f6b52a; box-shadow:0 10px 28px rgba(60,0,8,.55); }
.xem-nhu-bang[hidden]{ display:none; }
.xem-nhu-bang > i{ color:#ffd24d; font-size:17px; }
.xem-nhu-bang > span{ min-width:0; } .xem-nhu-bang b{ color:#ffd24d; }
.xem-nhu-thoat{ flex:none; display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border:0; border-radius:999px; font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; color:#2a1606; background:linear-gradient(#ffe48a,#f6c33f 55%,#e5a019); }
.xem-nhu-thoat:hover{ filter:brightness(1.06); }
body.dang-xem-nhu{ padding-bottom:64px; }
.xem-nhu-goiy{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.xem-nhu-goiy > button{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 12px; border:1px solid #ecddd0; border-radius:12px; background:#fffdf9; text-align:left; cursor:pointer; }
.xem-nhu-goiy > button:hover{ background:#fff3dc; border-color:#f6b52a; } .xem-nhu-goiy small{ color:#7a6a60; }
@media (max-width:640px){ .xem-nhu-bang{ bottom:8px; font-size:12.5px; padding:7px 8px 7px 12px; } .xem-nhu-bang > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
@media print{ .xem-nhu-bang{ display:none !important; } }

/* =====================================================================================
 * NỘI DUNG MỌI TAB + HỘP THOẠI của khung nhân viên — kiểu mềm theo ảnh mẫu thầy gửi 03/10/2026:
 * thẻ trắng bo 18px viền mờ + bóng mềm, bảng tiêu đề kem, nút bo tròn nổi nhẹ, ô nhập viền mảnh, chữ Be Vietnam Pro.
 * Ghi đè kiểu truyện tranh viền mực (marvel-tab.css, sieu-anh-hung.css, tro-giang.css) CHỈ trong:
 *   #appShell .mv  (các tab nhân viên)   và   body.nv-khung .mv-hop  (hộp thoại khi đang ở khung nhân viên).
 * Trang HS/PH (#studentResultScreen) không bị ảnh hưởng. Vùng dựng ảnh gửi phụ huynh (#kqExportArea) giữ nguyên.
 * ===================================================================================== */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop){
  --nv-do-1:#7d0814; --nv-do-2:#b10e25; --nv-do-3:#d81a32; --nv-do-4:#ec3346;
  --nv-vang-1:#ffe9a3; --nv-vang-2:#f7c544; --nv-vang-3:#e39b16;
  --nv-chu:#21160f; --nv-phu:#7a6a60; --nv-vien:rgba(125,35,20,.12); --nv-vien-dam:rgba(125,35,20,.22);
  --nv-bong:0 1px 2px rgba(90,25,10,.05), 0 10px 26px -16px rgba(110,30,15,.38);
  --nv-bong-nho:0 1px 2px rgba(90,25,10,.06), 0 4px 10px -6px rgba(90,25,10,.28);
  --nv-em:cubic-bezier(.22,1,.36,1);
  /* biến của bộ .tg (tro-giang.css) + giao diện cổ điển */
  --line:var(--nv-vien); --hairline:var(--nv-vien); --ink-dim:var(--nv-vien);
  --mv-phu:#7a6a60; --mv-kem:#fff5e6; --mv-giay:#fffaf3;
}
/* Chữ: mọi thứ Be Vietnam Pro (bỏ chữ truyện tranh Bangers / Chakra Petch) — trừ biểu tượng, công thức, hình vẽ */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :not(i):not([class*="fa-"]):not(.katex):not(.katex *):not(svg):not(svg *):not(code):not(pre):not(.sepay-nd):not(#kqExportArea *){
  font-family:'Be Vietnam Pro', system-ui, sans-serif !important;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(h1, h2, h3, h4, h5, h6, .h5, .h6, .card-title, .sec-title, .ch-cay b:first-child, .tw-tieude, .nxb-tieu-de,
  .ch-thongke .ch-nhan, .kt-nhom-nhan, .tg-tieu-de, .cname, .tq-chia, .tq-lien-ket, .tq-nut-den, .kq-hp-tieu-de, .kq-bg-ten, .kq-bg-nhom-ten, .kq-live-lich-tieu):not(#kqExportArea *){
  font-weight:800 !important; letter-spacing:-.005em !important; text-transform:none !important; text-shadow:none !important;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.stat-card .num, .sepay-tien, .tq-gio, .tq-si-so-so, .kq-hp-tong > b, .kt-tong-hang > b, td.mv-o-so, input[type="number"], .tq-nv-so):not(#kqExportArea *){
  font-weight:800 !important; letter-spacing:-.01em !important; font-variant-numeric:tabular-nums; text-shadow:none !important;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.hsy-muc, .kq-hp-tem, .mv-so, .kq-ma-lop, .kq-bg-thang, .ch-tag, .ch-ma, .badge-status, .pill, .seg-btn, .tq-tt, .tq-tem):not(#kqExportArea *){
  letter-spacing:.01em; text-shadow:none !important; transform:none;
}

/* ── Thẻ / khung ── */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.card, details.card, .stat-card):not(#kqExportArea *):not(#kqExportArea){
  background:#fff !important; border:1px solid var(--nv-vien) !important; border-radius:18px !important; box-shadow:var(--nv-bong) !important;
  transition:box-shadow .35s var(--nv-em), transform .35s var(--nv-em), border-color .3s;
}
.gd-sieu-anh-hung #appShell .mv :is(.class-card, .stat-card[role="button"], .stat-card.co-bam, a.card, button.card):hover{
  transform:translateY(-3px); border-color:rgba(216,26,50,.28) !important; box-shadow:0 2px 4px rgba(90,25,10,.06), 0 18px 34px -18px rgba(110,30,15,.5) !important;
}
/* Dải tiêu đề đầu khung (VD "① Chọn buổi bổ trợ") */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.card.p-3 > .small.text-secondary:first-child, .card.p-3 > .mb-2.small.text-secondary:first-child, .card.p-3 > .d-flex:first-child:has(> .small.text-secondary)){
  background:linear-gradient(180deg, #fffdf9, #fff6ea) !important; border-bottom:1px solid var(--nv-vien) !important; border-radius:18px 18px 0 0 !important; box-shadow:none !important;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.card.p-3 > .small.text-secondary:first-child, .card.p-3 > .mb-2.small.text-secondary:first-child, .card.p-3 > .d-flex:first-child > .small.text-secondary){
  font-weight:800 !important; font-size:16.5px !important; letter-spacing:-.005em !important; text-transform:none; color:var(--nv-chu) !important; text-shadow:none !important;
}
.gd-sieu-anh-hung #appShell .mv :is(.tq-canh-bao > .small:first-child, .card:has(#ktUnpaidList) > .small:first-child){ background:linear-gradient(180deg, #fff7f6, #ffecea) !important; }
.gd-sieu-anh-hung #appShell .mv :is(.tq-canh-bao, .card:has(#ktUnpaidList)){ border-color:rgba(216,26,50,.25) !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .mv-so{
  font-weight:800; font-size:.82em; color:#fff; border:0; transform:none;
  background:linear-gradient(135deg, var(--nv-do-4), var(--nv-do-2)); box-shadow:0 3px 8px -2px rgba(177,14,37,.55); text-shadow:none !important;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.card-header, .card-footer){ background:#fff8ef; border-color:var(--nv-vien); font-weight:700; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .alert{ border:1px solid var(--nv-vien-dam); border-radius:14px; box-shadow:var(--nv-bong-nho); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .alert-warning{ background:#fff7e0; border-color:rgba(227,155,22,.35); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .alert-danger{ background:#fff0ef; border-color:rgba(216,26,50,.3); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .alert-success{ background:#effaf2; border-color:rgba(27,138,79,.3); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.dropdown-menu){ border:1px solid var(--nv-vien); border-radius:14px; box-shadow:0 20px 40px -18px rgba(70,15,10,.45); padding:6px; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .dropdown-item{ border-radius:9px; font-weight:600; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .dropdown-item:is(:hover, :focus){ background:#fff3e0; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.border, .border-top, .border-bottom){ border-color:var(--nv-vien) !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) hr{ border-color:var(--nv-vien-dam); opacity:1; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .bg-light{ background:#fffaf3 !important; }

/* ── Nút ── */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.btn, .tg .tg-nut){
  font-weight:600; letter-spacing:0; text-transform:none; color:var(--nv-chu); background:#fff;
  border:1px solid var(--nv-vien-dam) !important; border-radius:12px !important; box-shadow:var(--nv-bong-nho);
  transition:transform .25s var(--nv-em), box-shadow .25s var(--nv-em), background-color .2s, border-color .2s, color .2s;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.btn, .tg .tg-nut):hover:not(:disabled){
  transform:translateY(-1px); background:#fffaf2; color:var(--nv-chu); border-color:rgba(216,26,50,.3) !important;
  box-shadow:0 2px 4px rgba(90,25,10,.06), 0 10px 18px -10px rgba(110,30,15,.45);
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.btn, .tg .tg-nut):active:not(:disabled){ transform:scale(.97); box-shadow:var(--nv-bong-nho); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.btn, .tg .tg-nut):focus-visible{ outline:2px solid var(--nv-do-3); outline-offset:2px; box-shadow:var(--nv-bong-nho); }
/* nút chính: vàng óng */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.btn-gold, .btn-warning, .btn.active, .btn-group > .btn.active, .btn-check:checked + .btn, .tg .tg-nut.chinh){
  color:#3d1a02 !important; background:linear-gradient(135deg, var(--nv-vang-1), var(--nv-vang-2) 50%, var(--nv-vang-3)) !important;
  border-color:rgba(190,120,0,.35) !important; box-shadow:0 8px 16px -10px rgba(230,150,20,.85), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.btn-gold, .btn-warning):hover:not(:disabled){ filter:brightness(1.04) saturate(1.05) !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.btn-danger){ color:#fff !important; background:linear-gradient(135deg, var(--nv-do-4), var(--nv-do-2)) !important; border-color:transparent !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.btn-success, .tg .tg-nut.xanh){ color:#fff !important; background:linear-gradient(135deg, #2fb36b, #1b8a4f) !important; border-color:transparent !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.btn-primary, .btn-info){ color:#fff !important; background:linear-gradient(135deg, #3d7ee6, #1f5fbf) !important; border-color:transparent !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .btn-secondary{ color:#fff !important; background:linear-gradient(135deg, #8a7c73, #5d554b) !important; border-color:transparent !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .btn-outline-danger{ color:var(--nv-do-2); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .btn-outline-danger:hover:not(:disabled){ color:var(--nv-do-2); background:#fff0ef; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .btn-outline-success{ color:#1b7a44; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.btn-outline-info, .btn-outline-primary){ color:#1f5fbf; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .btn:disabled{ opacity:.5; box-shadow:none; }
.gd-sieu-anh-hung .nv-khung .mv-hop .modal-footer .btn-gold.w-100{ font-weight:800 !important; font-size:1.05rem; letter-spacing:.01em; padding:10px 14px; text-transform:none; }
/* huy hiệu trong nút: viền trắng + vòng vàng mảnh thay viền mực */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .nut-huy{ border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(214,160,40,.75), 0 2px 5px rgba(40,0,5,.25); transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.pill, .ch-pill, .seg-btn, .live-chip, .kq-bg-che-do button){
  border:1px solid var(--nv-vien-dam) !important; border-radius:999px; background:#fff; color:var(--nv-chu); font-weight:600; box-shadow:none;
  transition:background-color .25s, color .25s, border-color .25s, box-shadow .3s var(--nv-em), transform .3s var(--nv-em);
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .seg-btn{ border-radius:12px; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.pill, .ch-pill, .seg-btn):hover:not(:disabled){ transform:translateY(-1px); border-color:rgba(216,26,50,.35) !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.pill.active, .ch-pill.dang-chon, .kq-bg-che-do button.on){
  color:#3d1a02; background:linear-gradient(135deg, var(--nv-vang-1), var(--nv-vang-2)); border-color:rgba(190,120,0,.35) !important; box-shadow:0 6px 12px -8px rgba(230,150,20,.9);
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .ch-pill b{ color:var(--nv-do-2); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .seg-btn[class*="on-"]{ border-color:transparent !important; box-shadow:0 6px 12px -8px rgba(0,0,0,.45); }

/* ── Ô nhập ── */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.form-control, .form-select, .tg .tg-o, .tg .tg-o-so, .tg select.tg-o){
  color:var(--nv-chu) !important; background-color:#fff !important; border:1px solid var(--nv-vien-dam) !important; border-radius:12px !important;
  box-shadow:inset 0 1px 2px rgba(90,25,10,.05) !important; transition:border-color .25s, box-shadow .3s var(--nv-em);
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.form-control, .form-select, .tg .tg-o):hover:not(:disabled):not(:focus){ border-color:rgba(216,26,50,.35) !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.form-control, .form-select, .tg .tg-o, .tg .tg-o-so):focus{
  border-color:rgba(216,26,50,.6) !important; box-shadow:0 0 0 4px rgba(216,26,50,.12) !important; outline:0;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .form-control::placeholder{ color:#a3958c; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23b10e25' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:14px 14px !important; padding-right:36px !important; font-weight:600 !important;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .form-select:hover{ box-shadow:inset 0 1px 2px rgba(90,25,10,.05) !important; }
/* Bỏ danh sách xổ kiểu truyện tranh (appearance:base-select của marvel-tab.css): ô hẹp bị chữ đè mũi tên + dấu ✓ lọt vào ô.
   Dùng ô chọn gọn của hệ điều hành: chữ dài tự cắt "…", mũi tên đỏ luôn thấy. */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) select.form-select{ appearance:none !important; -webkit-appearance:none !important; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) select.form-select option{ font-weight:600; color:var(--nv-chu); background:#fff; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(select, .form-select, input[type="date"], input[type="month"], input[type="time"]){ font-weight:600 !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) input[type="number"]{ font-size:1rem !important; color:var(--nv-chu) !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .form-check-input{ border:1.5px solid rgba(125,35,20,.35) !important; border-radius:.4em; transition:background-color .2s, border-color .2s, box-shadow .2s; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .form-check-input:checked{ background-color:var(--nv-do-3) !important; border-color:var(--nv-do-3) !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .form-check-input:focus{ box-shadow:0 0 0 4px rgba(216,26,50,.14) !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .form-label{ font-weight:600; color:#5b4a41; text-transform:none; letter-spacing:0; font-size:13px; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.input-group-text, .pw-eye){ background:#fff8ef !important; border:1px solid var(--nv-vien-dam) !important; color:var(--nv-chu) !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .input-group > :not(:first-child){ border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .input-group > :not(:last-child){ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .search-wrap i{ color:var(--nv-do-2); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.o-anh, .tw-tha, .tg .ctn-tha){ border:1.5px dashed rgba(125,35,20,.3) !important; border-radius:16px; background:#fffcf8; transition:border-color .25s, background-color .25s; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.o-anh:hover, .tw-tha.tw-keo, .tg .ctn-tha:hover, .tg .ctn-tha.keo){ border-color:var(--nv-do-3) !important; background:#fff5ea; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .progress{ background:#f6ece1; border:0; border-radius:999px; }

/* ── Bảng ── */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .table-responsive:not(#kqExportArea *){
  background:#fff; border:1px solid var(--nv-vien) !important; border-radius:16px !important; box-shadow:var(--nv-bong) !important;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .table:not(#kqExportArea *){ --bs-table-hover-bg:#fff4e6; --bs-table-striped-bg:#fffaf4; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.table > thead > tr > th, th):not(#kqExportArea *){
  background:#fbf1e6 !important; color:#4a372d !important; font-weight:700 !important; font-size:13px !important; letter-spacing:.01em !important;
  text-transform:none !important; text-shadow:none !important; padding:11px 12px !important; border-bottom:1px solid var(--nv-vien-dam) !important;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .table > thead > tr > th + th:not(#kqExportArea *){ border-left:0; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .table > tbody > tr > td:not(#kqExportArea *){
  font-weight:500; color:var(--nv-chu); padding:10px 12px; border-bottom:1px solid rgba(125,35,20,.08) !important; transition:background-color .25s, box-shadow .25s;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .table > tbody > tr:nth-child(even) > td:not(#kqExportArea *){ background-color:#fffbf6; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .table > tbody > tr:hover > td:not(#kqExportArea *){ background-color:#fff4e6 !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .table > tbody > tr:hover > td:first-child:not(#kqExportArea *){ box-shadow:inset 3px 0 0 var(--nv-do-3) !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .table > tbody > tr:last-child > td{ border-bottom:0 !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) td.mv-o-so:not(#kqExportArea *){ font-size:15px !important; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) table[data-cot-ten] > tbody > tr > td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6)):not(#kqExportArea *){ color:var(--nv-chu) !important; }
/* Nút nhỏ trong ô bảng (xem / sửa / xoá…): vuông bo tròn, nổi nhẹ */
.gd-sieu-anh-hung #appShell .mv td .btn{ border-radius:10px !important; box-shadow:0 1px 2px rgba(90,25,10,.06); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .badge-status{ border-radius:999px !important; font-weight:700; text-transform:none; letter-spacing:0; filter:none; }

/* ── Tab con / thanh mục trong tab ── */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .nav-tabs{ border-bottom:0 !important; gap:8px; margin-bottom:14px; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.nav-tabs, .nav-pills) .nav-link{
  border:1px solid var(--nv-vien-dam) !important; border-radius:12px !important; background:#fff !important; color:var(--nv-chu) !important; font-weight:600;
  box-shadow:var(--nv-bong-nho) !important; transition:transform .3s var(--nv-em), background-color .25s, color .25s, box-shadow .3s;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.nav-tabs, .nav-pills) .nav-link:hover{ transform:translateY(-1px); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) :is(.nav-tabs, .nav-pills) .nav-link.active{
  color:#fff !important; background:linear-gradient(135deg, var(--nv-do-4), var(--nv-do-2) 60%, var(--nv-do-1)) !important; border-color:transparent !important;
  box-shadow:0 10px 20px -10px rgba(177,14,37,.75) !important;
}
.gd-sieu-anh-hung #appShell .mv .bt-muc-nav{ padding:6px; gap:6px; background:#fff; border:1px solid var(--nv-vien); border-radius:16px; box-shadow:var(--nv-bong); }
.gd-sieu-anh-hung #appShell .mv .bt-muc{ border-radius:12px; color:var(--nv-chu); font-weight:600; transition:background-color .3s var(--nv-em), color .3s, box-shadow .3s; }
.gd-sieu-anh-hung #appShell .mv .bt-muc:hover{ color:var(--nv-do-2); background:#fff6ec; }
.gd-sieu-anh-hung #appShell .mv .bt-muc.active{ color:#fff; background:linear-gradient(135deg, var(--nv-do-4), var(--nv-do-2) 60%, var(--nv-do-1)); box-shadow:0 10px 20px -10px rgba(177,14,37,.75); }
.gd-sieu-anh-hung #appShell .mv .bt-muc .tab-huy, .gd-sieu-anh-hung #appShell .mv .bt-muc .kq-huy{ border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(214,160,40,.8), 0 2px 6px rgba(40,0,5,.25); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .bt-huong-dan{ color:#5b4a41; background:#fff8ec; border:0; border-left:3px solid var(--nv-vang-2); border-radius:12px; opacity:1; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .bt-huong-dan b{ color:var(--nv-do-2); }

/* ── Thành phần riêng: thống kê, tổng quan, SePay, bổ trợ, miễn giảm ── */
/* Thẻ số liệu như ảnh mẫu: huy hiệu tròn bên trái, nhãn ở trên, số to bên dưới */
.gd-sieu-anh-hung #appShell .mv .stat-card:has(> .stat-icon){
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon lbl" "icon num"; column-gap:16px; row-gap:2px; align-content:center; padding:18px 18px;
}
.gd-sieu-anh-hung #appShell .mv .stat-card:has(> .stat-icon) > .stat-icon{ grid-area:icon; align-self:center; margin:0; width:58px; height:58px; font-size:22px; }
.gd-sieu-anh-hung #appShell .mv .stat-card:has(> .stat-icon) > .lbl{ grid-area:lbl; align-self:end; margin:0; color:#3a2a22 !important; font-size:14.5px; }
.gd-sieu-anh-hung #appShell .mv .stat-card:has(> .stat-icon) > .num{ grid-area:num; align-self:start; min-width:0; font-size:36px !important; line-height:1.1; }
.gd-sieu-anh-hung #appShell .mv .stat-card .num{ color:var(--nv-chu) !important; }
.gd-sieu-anh-hung #appShell .mv .tone-do .num{ color:var(--nv-do-3) !important; }
.gd-sieu-anh-hung #appShell .mv .stat-icon::after{ content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 32% 24%, rgba(255,255,255,.55), rgba(255,255,255,.1) 34%, transparent 52%); }
.gd-sieu-anh-hung #appShell .mv .stat-icon{ position:relative; }
.gd-sieu-anh-hung #appShell .mv .tone-do .stat-icon{ background:radial-gradient(circle at 35% 30%, #ff5a5a, #c8102e 60%, #6d0a12); }
.gd-sieu-anh-hung #appShell .mv .tone-vang .stat-icon{ background:radial-gradient(circle at 35% 30%, #ffe58a, #f0b429 55%, #a86d00); color:#3d1a02; }
.gd-sieu-anh-hung #appShell .mv .tone-xanh .stat-icon{ background:radial-gradient(circle at 35% 30%, #8fc2ff, #2b6ce0 55%, #102a6b); }
.gd-sieu-anh-hung #appShell .mv .tone-la .stat-icon{ background:radial-gradient(circle at 35% 30%, #9ff0b9, #1f9a57 55%, #0c4a28); }
/* Nhãn trạng thái đứng riêng trong ô bảng: viên có chấm màu phía trước (Đang học, Bảo lưu…) */
.gd-sieu-anh-hung #appShell .mv td > .badge-status:only-child:not([style*="font-size:9.5px"]){ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; font-size:12px; white-space:nowrap; }
.gd-sieu-anh-hung #appShell .mv td > .badge-status:only-child:not([style*="font-size:9.5px"])::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.gd-sieu-anh-hung #appShell .mv .stat-card .lbl{ text-transform:none; letter-spacing:0; font-weight:600; font-size:13.5px; color:var(--nv-phu) !important; }
.gd-sieu-anh-hung #appShell .mv .stat-card::after{ border-color:rgba(216,26,50,.05); }
.gd-sieu-anh-hung #appShell .mv .stat-icon{ border-radius:50%; border:2.5px solid #fff; box-shadow:0 0 0 2px rgba(232,178,52,.9), 0 6px 14px -6px rgba(90,20,5,.5) !important; }
.gd-sieu-anh-hung #appShell .mv .tone-do{ background:linear-gradient(135deg, #fff, #fff1f0) !important; }
.gd-sieu-anh-hung #appShell .mv .tone-vang{ background:linear-gradient(135deg, #fff, #fff7e3) !important; }
.gd-sieu-anh-hung #appShell .mv .tone-xanh{ background:linear-gradient(135deg, #fff, #eef4ff) !important; }
.gd-sieu-anh-hung #appShell .mv .tone-la{ background:linear-gradient(135deg, #fff, #ecf8f0) !important; }
.gd-sieu-anh-hung #appShell .mv .class-card .cname{ color:var(--nv-do-2) !important; }
.gd-sieu-anh-hung #appShell .mv .tq-gio{ color:#fff; background:linear-gradient(135deg, var(--nv-do-4), var(--nv-do-2)); border-radius:10px; box-shadow:0 6px 12px -8px rgba(177,14,37,.8); }
.gd-sieu-anh-hung #appShell .mv :is(.tq-lop, .tq-hs, .tq-nv-dong){ border-bottom-color:rgba(125,35,20,.08); border-radius:12px; transition:background-color .25s, box-shadow .25s, transform .3s var(--nv-em); }
.gd-sieu-anh-hung #appShell .mv :is(.tq-lop, .tq-hs, .tq-nv-dong):hover{ background:#fff6ec; box-shadow:inset 3px 0 0 var(--nv-do-3); transform:translateX(2px); }
.gd-sieu-anh-hung #appShell .mv .tq-si-so-o{ background:#fff; border:1px solid var(--nv-vien); box-shadow:var(--nv-bong-nho); border-radius:14px; transition:transform .3s var(--nv-em), box-shadow .3s; }
.gd-sieu-anh-hung #appShell .mv .tq-si-so-o:hover{ transform:translateY(-2px); background:#fff; box-shadow:0 12px 22px -14px rgba(110,30,15,.5); }
.gd-sieu-anh-hung #appShell .mv .tq-si-so-lop{ color:var(--nv-do-2); font-weight:700; }
.gd-sieu-anh-hung #appShell .mv .tq-hs .user-avatar{ color:var(--nv-do-2); background:#fff0ef; border:0; box-shadow:inset 0 0 0 1px rgba(216,26,50,.2); font-weight:800; }
.gd-sieu-anh-hung #appShell .mv .tq-nut-den{ color:var(--nv-chu); background:#fff; box-shadow:var(--nv-bong-nho); border:1px solid var(--nv-vien-dam); border-radius:12px; }
.gd-sieu-anh-hung #appShell .mv .tq-nut-den:hover{ color:#fff; background:linear-gradient(135deg, var(--nv-do-4), var(--nv-do-2)); }
.gd-sieu-anh-hung #appShell .mv .tq-lien-ket{ color:var(--nv-do-2); font-size:14px; }
.gd-sieu-anh-hung #appShell .mv :is(.sepay-gd, .dkbt-buoi, .hsy-the, .kq-nxb){ background:#fff; border:1px solid var(--nv-vien) !important; border-radius:16px; box-shadow:var(--nv-bong); }
.gd-sieu-anh-hung #appShell .mv .sepay-gd{ border-left:4px solid var(--nv-vien-dam) !important; }
.gd-sieu-anh-hung #appShell .mv .sepay-gd.can{ border-left-color:var(--nv-vang-2) !important; }
.gd-sieu-anh-hung #appShell .mv .sepay-gd.ok{ border-left-color:#2fb36b !important; }
.gd-sieu-anh-hung #appShell .mv .hsy-the.hsy-cao{ border-left:5px solid var(--nv-do-3) !important; }
.gd-sieu-anh-hung #appShell .mv .hsy-the.hsy-vua{ border-left:5px solid var(--nv-vang-2) !important; }
.gd-sieu-anh-hung #appShell .mv .hsy-the.hsy-theo-doi{ border-left:5px solid #3d7ee6 !important; }
.gd-sieu-anh-hung #appShell .mv .hsy-muc{ border:0; border-radius:999px; box-shadow:none; }
.gd-sieu-anh-hung #appShell .mv .sepay-nd{ background:#fff8ef; border:1px solid var(--nv-vien); border-radius:10px; }
.gd-sieu-anh-hung #appShell .mv :is(.mien-giam-khung){ border:1px dashed var(--nv-vien-dam); border-radius:14px; }
.gd-sieu-anh-hung #appShell .mv :is(.bt-dd-nut){ border:1px solid var(--nv-vien-dam); border-radius:10px; transition:background-color .2s, color .2s; }
.gd-sieu-anh-hung #appShell .mv :is(.nxb-tt, .the-mien-giam){ border:0; border-radius:999px; }
.gd-sieu-anh-hung #appShell .mv .kq-nxb{ border-left:4px solid var(--nv-do-3) !important; }

/* ── Bộ thẻ .tg (Hôm nay, Kế hoạch buổi, Chấm trắc nghiệm…) ── */
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .tg{ --tg-vien:var(--nv-vien); --tg-vien-o:var(--nv-vien-dam); --tg-the2:#fffaf3; --tg-nen:#fffaf3; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .tg :is(.tg-the, .tg-muc-viec, .tg-o-viec, .ltn-thanh){
  border:1px solid var(--nv-vien) !important; border-radius:18px !important; box-shadow:var(--nv-bong) !important;
  transition:transform .35s var(--nv-em), box-shadow .35s var(--nv-em), border-color .3s;
}
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .tg :is(.tg-chip, button.tg-chip){ border:1px solid transparent; border-radius:999px; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .tg .tg-bao{ border:1px solid var(--nv-vien-dam); border-radius:14px; box-shadow:var(--nv-bong-nho); }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .tg .tg-bao.do{ border-color:rgba(216,26,50,.3); background:#fff0ef; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .tg :is(.ctn-chon, .ltn-ma-de){ border:1px solid var(--nv-vien-dam); border-radius:12px; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .tg .ctn-chon.on{ border-color:var(--nv-do-3); background:#fff4e6; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .tg .tg-tien-do{ background:#f6ece1; border:0; border-radius:999px; overflow:hidden; }
.gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) .tg .tg-tien-do > div{ background:linear-gradient(90deg, var(--nv-do-3), var(--nv-vang-2)); border-radius:999px; }

/* ── Ngân hàng câu hỏi, nhập Word ── */
.gd-sieu-anh-hung #appShell .mv :is(.ch-the, .tw-cau, .tw-thanh){ border:1px solid var(--nv-vien) !important; border-radius:16px !important; box-shadow:var(--nv-bong) !important; }
.gd-sieu-anh-hung #appShell .mv .ch-the:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -18px rgba(110,30,15,.5) !important; }
.gd-sieu-anh-hung #appShell .mv .ch-the.ch-chon{ outline:2px solid var(--nv-do-3); outline-offset:2px; }
.gd-sieu-anh-hung #appShell .mv :is(.ch-the-dau, .tw-dau){ background:#fff8ef; border-bottom:1px solid var(--nv-vien); }
.gd-sieu-anh-hung #appShell .mv .ch-tag{ border:0; border-radius:999px; padding:1px 9px; background:#fff0cf; color:#6b4300; }
.gd-sieu-anh-hung #appShell .mv .ch-tag.ch-moi{ background:#f3ece6; color:var(--nv-phu); }
.gd-sieu-anh-hung #appShell .mv .ch-tag.ch-duyet{ background:#dff5e7; color:#1b6b3e; }
.gd-sieu-anh-hung #appShell .mv .ch-ma{ border:0; border-radius:8px; background:#2a1d17; color:var(--nv-vang-1); }
.gd-sieu-anh-hung #appShell .mv .ch-muc button{ border:1px solid var(--nv-vien-dam); border-radius:8px; font-weight:600; transition:background-color .2s, color .2s; }
.gd-sieu-anh-hung #appShell .mv .ch-muc button.dang-chon{ background:var(--nv-do-3); border-color:var(--nv-do-3); }
.gd-sieu-anh-hung #appShell .mv .ch-them{ border:1.5px solid rgba(125,35,20,.35); }
.gd-sieu-anh-hung #appShell .mv .ch-the.ch-chon .ch-them{ background:var(--nv-do-3); border-color:var(--nv-do-3); }
.gd-sieu-anh-hung #appShell .mv .ch-nut{ border-radius:10px; transition:background-color .2s; }
.gd-sieu-anh-hung #appShell .mv .ch-nut:hover{ background:#fff4e6; }
.gd-sieu-anh-hung #appShell .mv .ch-nut.dang-chon{ background:linear-gradient(135deg, var(--nv-vang-1), var(--nv-vang-2)); }
.gd-sieu-anh-hung #appShell .mv .ch-nut .ch-dem{ background:#2a1d17; color:var(--nv-vang-1); }
.gd-sieu-anh-hung #appShell .mv .ch-goiy{ border:1px dashed rgba(31,95,191,.45); border-radius:12px; }
.gd-sieu-anh-hung #appShell .mv .ch-con{ border-left:1px solid var(--nv-vien-dam); }
.gd-sieu-anh-hung #appShell .mv .ch-nd::after{ background:linear-gradient(transparent, #fff); }

/* ── Hộp thoại ── */
.gd-sieu-anh-hung .nv-khung .mv-hop .modal-content{
  border:0 !important; border-radius:22px !important; overflow:hidden !important; background:#fffdf9 !important; color:var(--nv-chu) !important;
  box-shadow:0 30px 70px -24px rgba(60,10,5,.6), 0 0 0 1px rgba(125,35,20,.08) !important;
}
.gd-sieu-anh-hung .nv-khung .mv-hop .modal-header{
  padding:16px 20px; border:0 !important; border-radius:0 !important;
  background:radial-gradient(120% 160% at 10% -20%, rgba(255,120,120,.35), transparent 55%), linear-gradient(100deg, #8d0b19, #c8102e 60%, #d81a32) !important;
  box-shadow:inset 0 -3px 0 #f7c544 !important;
}
.gd-sieu-anh-hung .nv-khung .mv-hop .modal-title{ font-family:'Be Vietnam Pro', system-ui, sans-serif !important; font-weight:800 !important; font-size:1.15rem !important; letter-spacing:0 !important; text-transform:none; text-shadow:none !important; }
.gd-sieu-anh-hung .nv-khung .mv-hop .modal-body.mv-trong-hop{ background:#fffdf9 !important; }
.gd-sieu-anh-hung .nv-khung .mv-hop .modal-footer.mv-trong-hop{ background:#fbf5ee !important; border-top:1px solid var(--nv-vien) !important; }
.gd-sieu-anh-hung .nv-khung .mv-hop .modal-header .btn-close{ border-radius:10px; transition:transform .3s var(--nv-em), background-color .2s; }
.gd-sieu-anh-hung .nv-khung .mv-hop .modal-header .btn-close:hover{ transform:rotate(90deg); background-color:rgba(255,255,255,.15); }
/* Hộp hiện / ẩn êm: trồi lên + phóng nhẹ, nền mờ */
.gd-sieu-anh-hung .nv-khung .modal.fade .modal-dialog{ transform:translateY(26px) scale(.965); transition:transform .45s var(--nv-em), opacity .3s; opacity:0; }
.gd-sieu-anh-hung .nv-khung .modal.show .modal-dialog{ transform:none; opacity:1; }
.gd-sieu-anh-hung .nv-khung .modal-backdrop{ background:#2a0a08; transition:opacity .35s var(--nv-em); }
.gd-sieu-anh-hung .nv-khung .modal-backdrop.show{ opacity:.42; }

/* ── Ma trận đề (khung riêng css/ma-tran-de.css, không có .mv): cùng kiểu mềm ── */
.gd-sieu-anh-hung #appShell #pane-matran{ --nv-vien:rgba(125,35,20,.12); --nv-vien-dam:rgba(125,35,20,.22); --nv-em:cubic-bezier(.22,1,.36,1); }
.gd-sieu-anh-hung #appShell #pane-matran .mt-khung{
  border:1px solid var(--nv-vien) !important; border-radius:24px !important; background:#fffdf9 !important;
  box-shadow:0 1px 2px rgba(90,25,10,.04), 0 18px 40px -22px rgba(110,30,15,.35) !important;
}
.gd-sieu-anh-hung #appShell #pane-matran .mt-dau{
  border-bottom:0 !important; box-shadow:inset 0 -3px 0 #f7c544;
  background:radial-gradient(120% 160% at 10% -20%, rgba(255,120,120,.35), transparent 55%), linear-gradient(100deg, #8d0b19, #c8102e 60%, #d81a32) !important;
}
.gd-sieu-anh-hung #appShell #pane-matran .mt-tieu-de h2{ font-family:'Be Vietnam Pro', system-ui, sans-serif !important; font-weight:800; letter-spacing:0; font-size:1.45rem; text-shadow:0 2px 6px rgba(60,0,8,.35) !important; }
.gd-sieu-anh-hung #appShell #pane-matran .mt-logo{ box-shadow:0 0 0 2px rgba(247,197,68,.95), 0 4px 10px rgba(40,0,5,.4) !important; }
.gd-sieu-anh-hung #appShell #pane-matran .mt-bangers{ font-family:'Be Vietnam Pro', system-ui, sans-serif !important; font-weight:800 !important; letter-spacing:0 !important; }
.gd-sieu-anh-hung #appShell #pane-matran .mt-nut{
  border:1px solid var(--nv-vien-dam) !important; border-radius:12px !important; text-transform:none !important; font-weight:700 !important; font-size:.8rem !important;
  box-shadow:0 1px 2px rgba(90,25,10,.06), 0 4px 10px -6px rgba(90,25,10,.3) !important; transition:transform .25s var(--nv-em), box-shadow .25s, background-color .2s;
}
.gd-sieu-anh-hung #appShell #pane-matran .mt-nut:hover:not(:disabled){ transform:translateY(-1px) !important; box-shadow:0 10px 18px -10px rgba(110,30,15,.5) !important; }
.gd-sieu-anh-hung #appShell #pane-matran .mt-nut:active:not(:disabled){ transform:scale(.97) !important; }
.gd-sieu-anh-hung #appShell #pane-matran :is(.mt-nut.vang, .mt-nut.dang-chon){ color:#3d1a02; background:linear-gradient(135deg, #ffe9a3, #f7c544 50%, #e39b16) !important; border-color:rgba(190,120,0,.35) !important; }
.gd-sieu-anh-hung #appShell #pane-matran .mt-nut.do{ background:linear-gradient(135deg, #ec3346, #b10e25) !important; border-color:transparent !important; }
.gd-sieu-anh-hung #appShell #pane-matran .mt-nut.den{ background:#2a1d17 !important; border-color:transparent !important; }
.gd-sieu-anh-hung #appShell #pane-matran :is(.mt-the, .mt-cot > div, .mt-nhan-phan, .mt-o-nhap, .mt-stt, .mt-o-nhanh, .mt-kieu, .mt-chon, .mt-o-cau, .mt-nut-dong, .mt-bao, .dropdown-menu){
  border-width:1px !important; border-color:var(--nv-vien-dam) !important; box-shadow:none !important; text-shadow:none !important;
  font-family:'Be Vietnam Pro', system-ui, sans-serif !important; letter-spacing:0 !important;
}
.gd-sieu-anh-hung #appShell #pane-matran :is(.mt-o-nhap, .mt-o-nhanh, .mt-chon, .mt-o-cau, .mt-nut-dong, .mt-bao, .dropdown-menu, .mt-cot > div){ border-radius:12px !important; }
.gd-sieu-anh-hung #appShell #pane-matran .mt-bao{ box-shadow:0 8px 18px -12px rgba(110,30,15,.4) !important; }
.gd-sieu-anh-hung #appShell #pane-matran :is(.mt-tin, .mt-chan){ border-color:var(--nv-vien) !important; border-style:solid !important; border-width:1px 0 0 !important; }
.gd-sieu-anh-hung #appShell #pane-matran .mt-tin{ border-width:0 0 1px !important; }

@media (prefers-reduced-motion: reduce){
  .gd-sieu-anh-hung :is(#appShell .mv, .nv-khung .mv-hop) *{ transition:none !important; }
  .gd-sieu-anh-hung .nv-khung .modal.fade .modal-dialog{ transition:none; transform:none; }
}

/* Màn đăng nhập CHUNG (nhân viên · học sinh · phụ huynh) — theo ảnh mẫu thầy 03/10/2026: nền đỏ vệt sáng vàng chéo,
   thẻ kem viền vàng phát sáng, thương hiệu đậm nghiêng, dải khẩu hiệu vàng, ô nhập có biểu tượng, nút vàng kim.
   Ghi đè kiểu truyện tranh cũ (marvel-tab.css, sieu-anh-hung.css) nên nhiều chỗ cần !important. */
#loginScreen.mv-nen-dn{
  isolation:isolate; padding:28px 16px;   /* #loginScreen vốn position:fixed (index.html) — đừng đổi */
  background:
    linear-gradient(122deg, transparent 0 18%, rgba(255,214,120,.55) 18.15%, transparent 18.5%),
    linear-gradient(122deg, transparent 0 76%, rgba(255,214,120,.5) 76.12%, transparent 76.45%),
    linear-gradient(58deg, transparent 0 8%, rgba(255,200,100,.35) 8.1%, transparent 8.4%),
    linear-gradient(58deg, transparent 0 88%, rgba(255,214,120,.45) 88.1%, transparent 88.4%),
    linear-gradient(122deg, transparent 0 26%, rgba(255,255,255,.05) 26% 40%, transparent 40% 62%, rgba(0,0,0,.14) 62% 74%, transparent 74%),
    linear-gradient(58deg, transparent 0 20%, rgba(0,0,0,.16) 20% 33%, transparent 33% 70%, rgba(255,255,255,.05) 70% 82%, transparent 82%),
    radial-gradient(ellipse at 50% 45%, #c8141f 0%, #9a0b16 45%, #5a040c 100%) !important;
  background-size:auto !important;
}
/* chấm bi mờ ở 4 góc */
#loginScreen.mv-nen-dn::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(rgba(255,190,150,.22) 1.2px, transparent 1.8px) 0 0/11px 11px;
  -webkit-mask:radial-gradient(circle at 0 0,#000,transparent 26%), radial-gradient(circle at 100% 100%,#000,transparent 26%),
               radial-gradient(circle at 100% 0,#000,transparent 20%), radial-gradient(circle at 0 100%,#000,transparent 20%);
          mask:radial-gradient(circle at 0 0,#000,transparent 26%), radial-gradient(circle at 100% 100%,#000,transparent 26%),
               radial-gradient(circle at 100% 0,#000,transparent 20%), radial-gradient(circle at 0 100%,#000,transparent 20%);
}

#loginScreen #loginCardStaff{
  margin:auto; /* màn thấp: cuộn được tới đầu thẻ (căn giữa flex sẽ cắt mất phần trên) */
  max-width:460px !important; padding:0 !important; border:2px solid #e9b84c !important; border-radius:22px !important; overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%, #fffdf6, #f8f0df 70%) !important;
  box-shadow:0 0 0 1px rgba(120,60,0,.35), 0 0 28px rgba(255,196,80,.45), 0 30px 70px rgba(30,2,6,.6) !important;
  animation:dn-vao .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes dn-vao{ from{ opacity:0; transform:translateY(18px) scale(.98); } to{ opacity:1; transform:none; } }

/* Thanh đầu thẻ: logo tròn + ĐĂNG NHẬP */
#loginScreen #loginCardStaff .mv-bang{
  margin:0 !important; padding:14px 22px; gap:16px; border:0 !important; border-bottom:2px solid #e9b84c !important; box-shadow:none !important;
  background:
    linear-gradient(115deg, transparent 0 55%, rgba(255,255,255,.07) 55% 70%, transparent 70%),
    linear-gradient(120deg, #6e0410, #a50d1a 55%, #8a0814) !important;
}
#loginScreen #loginCardStaff .mv-bang::before, #loginScreen #loginCardStaff .mv-bang::after{ display:none !important; }
#loginScreen #loginCardStaff .mv-logo{
  width:62px !important; height:62px !important; padding:0 !important; background:#1a0d06 !important;
  border:2px solid #e9b84c !important; box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.4) !important;
}
#loginScreen #loginCardStaff .mv-tieu-de{
  font-family:'Be Vietnam Pro',system-ui,sans-serif !important; font-weight:900 !important; font-style:italic; font-size:1.75rem !important;
  letter-spacing:.01em !important; text-transform:uppercase !important; color:#fff4d8 !important;
  text-shadow:0 2px 0 rgba(0,0,0,.35) !important; margin:0;
}
#loginScreen #loginCardStaff .card-body{ padding:20px 34px 18px !important; }

/* Logo lớn + tên Tập đoàn + dải khẩu hiệu */
#loginScreen #loginCardStaff img.dn-logo{ width:168px !important; max-width:52%; filter:drop-shadow(0 10px 14px rgba(110,4,16,.3)) !important; }
#loginScreen #loginCardStaff .brand-title{
  font-family:'Be Vietnam Pro',system-ui,sans-serif !important; font-weight:900 !important; font-style:italic; font-size:31px !important;
  letter-spacing:-.005em; text-transform:uppercase; color:#5e0510 !important; margin:4px 0 8px;
  text-shadow:0 1px 0 #f3c55a, 0 2px 0 #c8902a, 0 5px 10px rgba(60,10,0,.25) !important;
}
#loginScreen #loginCardStaff .brand-title .ten-td > span + span{ font-size:1.18em; margin-top:.18em; }
#loginScreen #loginCardStaff .brand-slogan{
  display:table !important; margin:0 auto 18px !important; padding:5px 26px !important; transform:skew(-14deg);
  border:1px solid #8b5814 !important; border-radius:3px !important;
  background:linear-gradient(#fff0b3, #f3cc62 45%, #d9a033) !important; box-shadow:0 3px 8px rgba(110,60,0,.28) !important;
  color:#3a1f05 !important; font-weight:800 !important; font-size:13px !important; letter-spacing:.24em !important;
}
#loginScreen #loginCardStaff .brand-slogan > span{ display:inline-block; transform:skew(14deg); }
.dn-chao{ text-align:center; font-size:26px; font-weight:800; color:#14193a; line-height:1.2; }
.dn-chao-phu{ text-align:center; font-size:15px; color:#6c6358; margin:4px 0 18px; }

/* Ô nhập có biểu tượng */
#loginScreen #loginCardStaff .form-label{
  display:flex; align-items:center; gap:8px; text-transform:none !important; letter-spacing:0 !important;
  font-size:15px !important; font-weight:700; color:#231a12 !important; margin-bottom:6px;
}
.dn-vai-nhan:empty{ display:none; }
.dn-vai-nhan{
  font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; background:#efe6d6; color:#5a4a38;
  animation:dn-hien .3s ease both;
}
.dn-vai-nhan.la-hs{ background:#fde3b3; color:#8a3a07; }
@keyframes dn-hien{ from{ opacity:0; transform:translateX(-4px); } to{ opacity:1; transform:none; } }
.dn-o{ position:relative; }
.dn-o-icon{ position:absolute; left:17px; top:50%; transform:translateY(-50%); z-index:5; color:#6b5644; font-size:17px; pointer-events:none; }
#loginScreen #loginCardStaff .form-control{
  min-height:54px; font-size:1.02rem; padding-left:50px !important; border:1px solid #d8bf8c !important; border-radius:11px !important;
  background:#fff !important; color:#241c16 !important; box-shadow:inset 0 1px 2px rgba(80,50,0,.06) !important;
  transition:border-color .25s ease, box-shadow .25s ease;
}
#loginScreen #loginCardStaff .form-control::placeholder{ color:#a3978a; }
#loginScreen #loginCardStaff .form-control:focus{ border-color:#bc1626 !important; box-shadow:0 0 0 4px rgba(188,22,38,.12) !important; }
#loginScreen #loginCardStaff .input-group .form-control{ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; border-right:0 !important; }
#loginScreen #loginCardStaff .pw-eye{
  position:relative; width:58px; border:1px solid #d8bf8c !important; border-left:0 !important; border-radius:0 11px 11px 0 !important;
  background:#fff !important; color:#3a2c20 !important; box-shadow:none !important; font-size:18px;
}
#loginScreen #loginCardStaff .pw-eye::before{ content:''; position:absolute; left:0; top:11px; bottom:11px; width:1px; background:#ddd0b8; }

/* Nút vàng kim */
#loginScreen #loginCardStaff #loginBtn{
  min-height:56px; margin-top:4px; font-size:1.25rem !important; font-weight:800; letter-spacing:.01em;
  border:1px solid #8b5814 !important; border-radius:12px !important; color:#7a1608 !important; text-shadow:0 1px 0 rgba(255,240,190,.7) !important;
  background:linear-gradient(#fff0b0 0%, #f6cf5c 42%, #e0a42c 58%, #f1c04e 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 4px 0 #6e4410, 0 10px 22px rgba(110,60,0,.28) !important;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, filter .3s ease;
}
#loginScreen #loginCardStaff #loginBtn:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.04); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 0 #6e4410, 0 14px 26px rgba(110,60,0,.3) !important; }
#loginScreen #loginCardStaff #loginBtn:active{ transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 #6e4410 !important; transition-duration:.1s; }
#loginScreen #loginCardStaff #loginBtn i{ transition:transform .3s ease; }
#loginScreen #loginCardStaff #loginBtn:hover i{ transform:translateX(3px); }

/* Dòng hướng dẫn HS/PH + chân thẻ, có gạch hai bên */
.dn-goi-y, .dn-chan{ display:flex; align-items:center; gap:10px; }
.dn-goi-y::before, .dn-goi-y::after, .dn-chan::before, .dn-chan::after{ content:''; flex:1 1 18px; height:1px; background:#d9c9a8; }
/* Hộp gợi ý: chữ luôn xuống dòng đủ, không bị cắt (trước đây nowrap làm mất "… 4 số cuối SĐT") */
.dn-goi-y{ margin-top:18px; padding:10px 12px; font-size:13px; line-height:1.45; color:#6e3a12; text-align:left; gap:10px;
  background:#fff6e2; border:1px solid #e6d3a8; border-radius:11px; }
.dn-goi-y::before, .dn-goi-y::after{ display:none; }
.dn-goi-y > span:last-child{ flex:1 1 0; min-width:0; white-space:normal; overflow-wrap:break-word; }
.dn-goi-y b{ color:#9e0b1b; }
.dn-goi-y-icon{
  flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:8px 8px 14px 14px;
  background:linear-gradient(#c8141f,#7a0712); color:#ffd56a; font-size:14px; box-shadow:0 2px 4px rgba(110,4,16,.35);
}
.dn-chan{ margin-top:14px; font-size:13px; color:#8a7d6c; }
.dn-chan::before, .dn-chan::after{ flex:0 1 54px; }
.dn-chan{ justify-content:center; }

@media (max-width:440px){
  #loginScreen #loginCardStaff .card-body{ padding:16px 18px 16px !important; }
  #loginScreen #loginCardStaff .brand-title{ font-size:25px !important; }
  #loginScreen #loginCardStaff .brand-slogan{ font-size:11.5px !important; letter-spacing:.18em !important; padding:4px 18px !important; }
  #loginScreen #loginCardStaff .mv-logo{ width:52px !important; height:52px !important; }
  #loginScreen #loginCardStaff .mv-tieu-de{ font-size:1.5rem !important; }
  .dn-goi-y::before, .dn-goi-y::after{ display:none; }
  .dn-goi-y{ justify-content:center; text-align:left; }
  .dn-goi-y > span:last-child{ white-space:normal; flex:0 1 auto; }
  .dn-chao{ font-size:22px; }
  .dn-chao-phu{ font-size:14px; }
}
@media (prefers-reduced-motion:reduce){
  #loginScreen #loginCardStaff, .dn-vai-nhan, #loginScreen #loginCardStaff #loginBtn, #loginScreen #loginCardStaff #loginBtn i{ animation:none !important; transition:none !important; }
}

/* ───── Đặt / đổi mật khẩu học sinh (app.js moDoiMatKhauHs_, thầy chốt 05/10/2026) ───── */
.hs-mk-dlg{ border:0; border-radius:18px; padding:0; width:min(440px, calc(100vw - 32px)); box-shadow:0 30px 80px -20px rgba(60,10,10,.55); color:#2a1810; }
.hs-mk-dlg::backdrop{ background:rgba(30,8,8,.5); }
.hs-mk-form{ padding:22px 22px 18px; background:#fffaf2; }
.hs-mk-dau{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.hs-mk-dau b{ display:block; font-size:19px; font-weight:800; color:#8a1a24; }
.hs-mk-dau small{ display:block; font-size:12.5px; color:#7a6a60; line-height:1.35; }
.hs-mk-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#b3101f,#7a0c18); color:#ffd36b; font-size:19px; flex:none; }
.hs-mk-form .form-label{ margin:10px 0 4px; font-size:13.5px; font-weight:700; color:#5c4a40; }
.hs-mk-form .form-label small{ font-weight:500; color:#8a7b70; }
.hs-mk-form .form-control{ color:#1b120c; background:#fff; border:1px solid rgba(125,35,20,.25); border-radius:10px; padding:9px 12px; }
.hs-mk-form .form-control:focus{ border-color:#e9b84c; box-shadow:0 0 0 3px rgba(233,184,76,.25); }
.hs-mk-hien{ display:flex; align-items:center; gap:7px; margin-top:10px; font-size:13px; cursor:pointer; }
.hs-mk-ghi{ display:flex; gap:8px; margin-top:12px; padding:9px 11px; border-radius:10px; background:#fff3d6; color:#7a5200; font-size:12.5px; line-height:1.4; }
.hs-mk-loi{ min-height:18px; margin-top:8px; }
.hs-mk-nut{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.hs-mk-huy{ background:#fff; border:1px solid rgba(125,35,20,.2); color:#2a1810; }
@media (max-width:575.98px){ .hs-nut-doi-mk span{ display:none; } }

/* =====================================================================================
 * TAB ĐIỂM DANH — theo ảnh mẫu thầy 03/10/2026: thẻ chọn buổi có nhãn + thẻ Học chéo ca, hàng lọc trạng thái có màu,
 * bảng gọn (SĐT dưới tên, ô điểm danh tô màu, ô Ghi chú luôn hiện), thẻ cảnh báo chuyên cần thu gọn,
 * khung "Lỗi máy tự kiểm", chân trang "Có thay đổi chưa lưu" + Làm mới + Lưu.
 * Bố cục (grid) áp cho mọi giao diện; màu chỉ cho giao diện Siêu anh hùng (html.gd-sieu-anh-hung).
 * JS: app.js (renderAttendanceList, attRowHtml, theadDiemDanh_, hienLoiBuoi_, datThayDoiDd_).
 * ===================================================================================== */

/* ───────── Bố cục ───────── */
.dd-dau{ display:grid; grid-template-columns:minmax(0, 2.2fr) minmax(280px, 1fr); gap:16px; margin-bottom:14px; align-items:stretch; }
.dd-buoi, .dd-cheo{ padding:16px 18px; }
.dd-hang{ display:grid; gap:12px; }
.dd-hang-1{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.dd-hang-2{ grid-template-columns:minmax(0, 2fr) minmax(110px, .8fr) minmax(170px, 1.2fr) auto; margin-top:12px; align-items:end; }
.dd-hang-2.chi-bai-day{ grid-template-columns:minmax(0, 1fr); }
.dd-tu-den{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dd-mien{ padding-bottom:12px; white-space:nowrap; }
.dd-buoi .form-label{ margin-bottom:5px; }
.dd-sao{ color:#d81a32; }
.dd-cheo{ display:flex; flex-direction:column; gap:8px; }
.dd-cheo-dau{ display:flex; align-items:center; gap:10px; }
.dd-cheo-ten{ font-size:17px; flex:1; }
.dd-cheo-link{ font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.dd-cheo-dem{ font-weight:700; }
.dd-cheo-ghi{ font-size:12.5px; line-height:1.45; }
.dd-cheo-them{ position:relative; }
.dd-cheo-them > i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); z-index:2; pointer-events:none; }
.dd-cheo-them .form-control{ padding-left:38px !important; }

.dd-thanh-loc{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.dd-loc-trai{ display:flex; flex-wrap:wrap; gap:8px; flex:1; min-width:0; }
.dd-in{ flex:none; white-space:nowrap; }
.dd-loc-phu{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:10px; }
.dd-loc-phu .search-wrap{ flex:0 1 280px; min-width:200px; }
.dd-diem-loc{ display:inline-flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; margin:0; }
.dd-diem-loc .form-control{ width:72px; }
.pill.dd-loc{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; font-size:13.5px; letter-spacing:0 !important; text-transform:none !important; white-space:nowrap; }
.pill.dd-loc .dd-so{ font-weight:600; opacity:.85; }
.pill.dd-loc .dd-so:empty{ display:none; }

#attList .dd-bang table{ font-size:13.5px; margin-bottom:0; }
#attList .dd-bang th small{ display:block; font-weight:500; font-size:11px; opacity:.75; }
#attList td.att-ten{ min-width:150px; }
.att-ten-chu{ font-weight:700; }
.att-sdt{ font-size:12px; margin-top:2px; white-space:nowrap; }
.att-sdt i{ font-size:10px; margin-right:2px; }
.dd-nhan-hs{ display:inline-block; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px; vertical-align:1px; }
#attList td.att-dd{ min-width:170px; }
#attList td.att-dd .att-diemdanh{ min-width:150px; }
#attList td.att-ghichu{ min-width:170px; }
#attList td.att-thu{ min-width:150px; max-width:190px; }
#attList td.att-thu > div > div:first-child{ white-space:normal !important; line-height:1.3; }
#attList .dd-bang :is(th, td){ padding-left:10px !important; padding-right:10px !important; }
.att-lydo{ margin-top:0; }
.att-gc:not(:empty){ margin-bottom:4px; }

.dd-cb{ padding:14px 18px; }
.dd-cb-dau{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dd-cb-ten{ font-size:17px; flex:1; min-width:220px; }
.dd-cb-chon{ display:flex; align-items:center; gap:8px; }
.dd-cb-chon .form-select{ width:auto; }
.dd-cb-mo{ width:34px; height:34px; border-radius:10px; border:1px solid rgba(125,35,20,.15); background:#fff; display:grid; place-items:center; cursor:pointer; }
.dd-cb-mo i{ transition:transform .3s ease; }
.dd-cb-mo.mo i{ transform:rotate(180deg); }
.dd-cb-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.dd-cb-chip{ display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border-radius:12px; border:1px solid transparent; cursor:pointer; font:inherit; font-size:14px; }
.dd-cb-chi-tiet{ margin-top:12px; }

.dd-loi{ margin:0 0 14px; padding:12px 16px; border-radius:16px; }
.dd-loi-dau{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dd-loi-ten{ flex:1; min-width:220px; display:flex; flex-direction:column; }
.dd-loi-ten small{ font-size:12.5px; }
.dd-loi-nut{ display:flex; gap:8px; flex-wrap:wrap; }
.dd-loi-ds{ margin:10px 0 0; padding-left:20px; font-size:13.5px; line-height:1.6; }
.dd-loi-hs{ border:0; background:none; padding:0; font:inherit; font-weight:700; text-decoration:underline dotted; cursor:pointer; }
.dd-loi-tt{ font-size:11.5px; padding:0 7px; border-radius:999px; margin-left:4px; }
.dd-loi.het{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; padding:9px 14px; }

#attFooter{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dd-chan-tt{ display:flex; align-items:center; gap:6px; min-width:0; flex-wrap:wrap; }
.dd-chan-cham{ width:9px; height:9px; border-radius:50%; background:#3aa76d; flex:none; transition:background-color .3s; }
#attFooter.co-doi .dd-chan-cham{ background:#e5a019; box-shadow:0 0 0 4px rgba(229,160,25,.18); }
.dd-chan-doi{ font-size:13.5px; font-weight:600; }
.dd-chan-nut{ display:flex; gap:10px; flex:none; }

@media (max-width:1199.98px){
  .dd-hang-2{ grid-template-columns:minmax(0, 1fr) minmax(110px, .6fr); }
  .dd-hang-2 .dd-tu-den{ grid-column:1 / 2; }
}
@media (max-width:991.98px){ .dd-dau{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:767.98px){
  .dd-hang-1{ grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); }
  .dd-hang-1 > :first-child{ grid-column:1 / -1; }
  .dd-hang-2, .dd-hang-2.chi-bai-day{ grid-template-columns:minmax(0, 1fr); }
  .dd-hang-2 .dd-tu-den{ grid-column:auto; }
  .dd-mien{ padding-bottom:0; }
  .dd-thanh-loc{ flex-direction:column; align-items:stretch; }
  .dd-loc-trai{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .dd-loc-trai .pill{ flex:none; }
  .dd-in{ align-self:flex-end; }
  .dd-chan-nut .dd-lam-moi{ display:none; }
  #attList td.att-dd, #attList td.att-ghichu, #attList td.att-thu, #attList td.att-ten{ min-width:0; }
  .att-sdt{ font-weight:500; }
}

/* ───────── Màu — giao diện Siêu anh hùng (mềm đỏ–vàng) ───────── */
html.gd-sieu-anh-hung .dd-buoi .form-label{ color:#3b2a20 !important; font-weight:700 !important; }
html.gd-sieu-anh-hung .dd-cheo{ background:linear-gradient(180deg, #fffaf2, #fff) !important; }
html.gd-sieu-anh-hung .dd-cheo-huy{
  width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:16px;
  background:radial-gradient(circle at 35% 30%, #ff6b5b, #c8102e 70%); border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(214,160,40,.8), 0 4px 10px -4px rgba(120,0,10,.6);
}
html.gd-sieu-anh-hung .dd-cheo-ten{ color:#2a1810; }
html.gd-sieu-anh-hung .dd-cheo-link{ color:#c8102e !important; }
html.gd-sieu-anh-hung .dd-cheo-dem{ color:#8a7b70; }
html.gd-sieu-anh-hung .dd-cheo-dem.co{ color:#c8102e; font-size:15.5px; }
html.gd-sieu-anh-hung .dd-cheo-ghi{ color:#7a6a60; }
html.gd-sieu-anh-hung .dd-cheo-them > i{ color:#8a7b70; }

/* Nút lọc trạng thái — mỗi trạng thái 1 màu như ảnh mẫu; "Tất cả" đang chọn = đỏ đặc */
html.gd-sieu-anh-hung #pane-diemdanh .pill.dd-loc{ font-weight:700; }
html.gd-sieu-anh-hung #pane-diemdanh .pill.dd-loc[data-val=""].active{ background:linear-gradient(135deg, #e0213a, #b10e25) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 8px 16px -10px rgba(177,14,37,.9) !important; }
html.gd-sieu-anh-hung #pane-diemdanh .pill.dd-loc[data-val="Có mặt"]{ background:#ecf8f0 !important; color:#1e7a46 !important; border-color:#bfe6cd !important; }
html.gd-sieu-anh-hung #pane-diemdanh .pill.dd-loc[data-val="Vắng có phép"]{ background:#fff6e3 !important; color:#a86b00 !important; border-color:#f3dca6 !important; }
html.gd-sieu-anh-hung #pane-diemdanh .pill.dd-loc[data-val="Vắng không phép"]{ background:#ffeeee !important; color:#c53030 !important; border-color:#f6c6c6 !important; }
html.gd-sieu-anh-hung #pane-diemdanh .pill.dd-loc[data-val="Đi muộn"]{ background:#fff1e6 !important; color:#c05621 !important; border-color:#f6d2b4 !important; }
html.gd-sieu-anh-hung #pane-diemdanh .pill.dd-loc[data-val="Học online"]{ background:#ebf3ff !important; color:#2b6cb0 !important; border-color:#c4dafa !important; }
html.gd-sieu-anh-hung #pane-diemdanh .pill.dd-loc:is([data-val="__ghichu__"], [data-val="__thieu__"]){ background:#fff !important; color:#7a6a60 !important; }
html.gd-sieu-anh-hung #pane-diemdanh .pill.dd-loc.active:not([data-val=""]){ box-shadow:0 0 0 2px currentColor !important; }
html.gd-sieu-anh-hung #pane-diemdanh .pill.dd-loc.att-pill-thieu{ color:#c53030 !important; border-color:#f6c6c6 !important; }
html.gd-sieu-anh-hung #pane-diemdanh :is(.dd-in, #attDiemClearBtn, .dd-lam-moi){ background:#fff !important; border:1px solid rgba(125,35,20,.16) !important; color:#2a1810 !important; font-weight:700; border-radius:12px !important; }

/* Bảng */
html.gd-sieu-anh-hung #pane-diemdanh #attList .dd-bang td.att-ma{ color:#5b4a41 !important; font-weight:600 !important; }
html.gd-sieu-anh-hung #pane-diemdanh #attList .att-ten-chu{ color:#21160f; font-size:14.5px; }
html.gd-sieu-anh-hung #pane-diemdanh #attList .att-sdt{ color:#8a7b70; }
html.gd-sieu-anh-hung .dd-nhan-online{ background:#ebf3ff; color:#2b6cb0; }
html.gd-sieu-anh-hung .dd-nhan-cheo{ background:#fff3d6; color:#9a5b00; }
html.gd-sieu-anh-hung #pane-diemdanh #attList select.att-diemdanh{ border-radius:999px !important; font-weight:700 !important; padding-left:14px !important; transition:background-color .25s, color .25s, border-color .25s; }
html.gd-sieu-anh-hung #pane-diemdanh #attList select.att-diemdanh[data-v="Có mặt"]{ background-color:#ecf8f0 !important; color:#1e7a46 !important; border-color:#bfe6cd !important; }
html.gd-sieu-anh-hung #pane-diemdanh #attList select.att-diemdanh[data-v="Vắng có phép"]{ background-color:#fff6e3 !important; color:#a86b00 !important; border-color:#f3dca6 !important; }
html.gd-sieu-anh-hung #pane-diemdanh #attList select.att-diemdanh[data-v="Vắng không phép"]{ background-color:#ffeeee !important; color:#c53030 !important; border-color:#f6c6c6 !important; }
html.gd-sieu-anh-hung #pane-diemdanh #attList select.att-diemdanh[data-v="Đi muộn"]{ background-color:#fff1e6 !important; color:#c05621 !important; border-color:#f6d2b4 !important; }
html.gd-sieu-anh-hung #pane-diemdanh #attList select.att-diemdanh[data-v="Học online"]{ background-color:#ebf3ff !important; color:#2b6cb0 !important; border-color:#c4dafa !important; }
html.gd-sieu-anh-hung #pane-diemdanh #attList :is(.att-kt, .att-bt){ text-align:center; font-weight:700 !important; width:76px !important; }
html.gd-sieu-anh-hung #pane-diemdanh #attList tr.att-row[data-vang="1"] :is(.att-kt, .att-bt){ background-color:#f6f1ec !important; }
html.gd-sieu-anh-hung #pane-diemdanh #attList .att-gc{ color:#b7791f; }
html.gd-sieu-anh-hung #pane-diemdanh #attList .att-lydo-nhan{ color:#c05621 !important; font-weight:700; }
/* "Lý do không test": có điểm Test → ô khoá xám (thầy chốt 04/10/2026) */
html.gd-sieu-anh-hung #pane-diemdanh #attList .att-co-diem .att-lydo-in:disabled{ background:#f3eee8 !important; border-style:dashed !important; color:#9a8d83 !important; cursor:not-allowed; }
html.gd-sieu-anh-hung #pane-diemdanh #attList .att-co-diem .att-lydo-in:disabled::placeholder{ color:#a3958c; font-style:italic; }
html.gd-sieu-anh-hung #pane-diemdanh #attList .att-lydo.can .att-lydo-in{ border-color:#f0b37e !important; box-shadow:0 0 0 3px rgba(240,140,60,.15) !important; }
html.gd-sieu-anh-hung #pane-diemdanh #attList .att-thu-sel{ border-radius:10px !important; }

/* Cảnh báo chuyên cần */
html.gd-sieu-anh-hung .dd-cb-icon{ color:#c8102e; font-size:22px; }
html.gd-sieu-anh-hung .dd-cb-ten{ color:#c8102e; }
html.gd-sieu-anh-hung .dd-cb-chip{ background:#fff4f2; color:#4a2a20; border-color:#f6d3cc; transition:transform .25s ease, box-shadow .25s ease; }
html.gd-sieu-anh-hung .dd-cb-chip i:first-child{ color:#c8102e; }
html.gd-sieu-anh-hung .dd-cb-chip.co{ background:#ffe9e6; border-color:#f2b3a8; }
html.gd-sieu-anh-hung .dd-cb-chip:hover{ transform:translateY(-1px); box-shadow:0 8px 16px -12px rgba(160,20,30,.7); }
html.gd-sieu-anh-hung .dd-cb-chip b{ color:#c8102e; }

/* Lỗi máy tự kiểm */
html.gd-sieu-anh-hung .dd-loi{ background:linear-gradient(180deg, #fff6f3, #fff); border:1px solid #f6c9bf; box-shadow:0 10px 24px -20px rgba(160,20,30,.8); animation:ddLoiVao .45s cubic-bezier(.22,1,.36,1); }
html.gd-sieu-anh-hung .dd-loi.da-xem{ background:#fbf8f4; border-color:rgba(125,35,20,.12); }
html.gd-sieu-anh-hung .dd-loi-icon{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; background:radial-gradient(circle at 35% 30%, #ff6b5b, #c8102e 70%); flex:none; }
html.gd-sieu-anh-hung .dd-loi.da-xem .dd-loi-icon{ background:#b9aca2; }
html.gd-sieu-anh-hung .dd-loi-ten b{ color:#a3122a; font-size:15px; }
html.gd-sieu-anh-hung .dd-loi.da-xem .dd-loi-ten b{ color:#5b4a41; }
html.gd-sieu-anh-hung .dd-loi-ten small{ color:#7a6a60; }
html.gd-sieu-anh-hung .dd-loi-ds{ color:#3b2a20; }
html.gd-sieu-anh-hung .dd-loi-hs{ color:#a3122a; }
html.gd-sieu-anh-hung .dd-loi-tt{ background:#f6efe8; color:#6b5a50; }
html.gd-sieu-anh-hung .dd-loi.het{ background:#ecf8f0; border:1px solid #bfe6cd; color:#1e7a46; box-shadow:none; }
@keyframes ddLoiVao{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* Chân trang */
html.gd-sieu-anh-hung #attFooter .dd-chan-doi{ color:#a86b00; }
html.gd-sieu-anh-hung #attFooter #attSaveBtn{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019) !important; border:1px solid #b97a0a !important; color:#2a1606 !important; border-radius:14px !important; font-weight:800; }

/* Điện thoại: thẻ học sinh sáng (đè kiểu tối của tro-giang.css) */
@media (max-width:767.98px){
  html.gd-sieu-anh-hung #pane-diemdanh #attList tr.att-row{ background:#fff !important; border:1px solid rgba(125,35,20,.12) !important; box-shadow:0 8px 20px -16px rgba(90,25,10,.6); }
  html.gd-sieu-anh-hung #pane-diemdanh #attList tr.att-row > td.att-td-test::before, html.gd-sieu-anh-hung #pane-diemdanh #attList tr.att-row > td.att-td-btvn::before,
  html.gd-sieu-anh-hung #pane-diemdanh #attList tr.att-row > td.att-thu::before{ color:#7a6a60 !important; }
  html.gd-sieu-anh-hung #pane-diemdanh #attList .att-seg button{ background:#fffaf4 !important; border-color:rgba(125,35,20,.15) !important; color:#5b4a41 !important; }
  html.gd-sieu-anh-hung #pane-diemdanh #attList .att-seg button.on[data-v="Có mặt"]{ background:#ecf8f0 !important; color:#1e7a46 !important; border-color:#7cc99c !important; }
  html.gd-sieu-anh-hung #pane-diemdanh #attList .att-seg button.on[data-v="Đi muộn"]{ background:#fff1e6 !important; color:#c05621 !important; border-color:#f0a96e !important; }
  html.gd-sieu-anh-hung #pane-diemdanh #attList .att-seg button.on[data-v="Vắng có phép"]{ background:#fff6e3 !important; color:#a86b00 !important; border-color:#e9c46a !important; }
  html.gd-sieu-anh-hung #pane-diemdanh #attList .att-seg button.on[data-v="Vắng không phép"]{ background:#ffeeee !important; color:#c53030 !important; border-color:#ee9a9a !important; }
  html.gd-sieu-anh-hung #pane-diemdanh #attList .att-seg button.on[data-v="Học online"]{ background:#ebf3ff !important; color:#2b6cb0 !important; border-color:#8db6ee !important; }
}
/* Tổng quan → Cần phản hồi → "Lỗi điểm danh của trợ giảng": danh sách buổi có lỗi, bấm để mở đúng buổi */
.tq-loi-dd{ display:flex; flex-direction:column; gap:6px; margin:2px 0 8px 46px; }
.tq-loi-buoi{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-radius:12px; font:inherit; font-size:13px; text-align:left; cursor:pointer;
  border:1px solid #f6c9bf; background:#fff6f3; color:#3b2a20; transition:transform .25s ease, box-shadow .25s ease; }
.tq-loi-buoi:hover{ transform:translateX(2px); box-shadow:0 8px 16px -12px rgba(160,20,30,.7); }
.tq-loi-buoi.da-xem{ border-color:rgba(125,35,20,.12); background:#fbf8f4; color:#7a6a60; }
.tq-loi-so{ font-weight:700; color:#a3122a; white-space:nowrap; }
.tq-loi-buoi.da-xem .tq-loi-so{ color:#8a7b70; }
@media (max-width:575.98px){ .tq-loi-dd{ margin-left:0; } .tq-loi-buoi{ flex-direction:column; align-items:flex-start; } }

@media (prefers-reduced-motion:reduce){
  .dd-loi, .dd-cb-mo i, .dd-cb-chip, .tq-loi-buoi{ animation:none !important; transition:none !important; }
}

/* =====================================================================================
 * TAB THU HỌC PHÍ — theo ảnh mẫu thầy 03/10/2026: form lập phiếu bên trái (học sinh · ngày thu · hình thức, bảng khoản
 * có ô tích + tổng, nhân viên nhận + ghi chú có đếm chữ), PHIẾU THU XEM TRƯỚC bên phải (bản nháp, nút Lưu nằm trong
 * phiếu), 2 thẻ đi tới Kế toán / Giao dịch SePay.
 * Bố cục cho mọi giao diện; màu cho giao diện Siêu anh hùng. JS: app.js (taoBoChonKhoanThu kieu:'bang', capNhatPhieuThp_).
 * ===================================================================================== */

/* ───────── Bố cục ───────── */
.thp-luoi{ display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(320px, 1fr); gap:18px; align-items:start; }
.thp-form{ padding:18px 20px; }
.thp-hang-1{ display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(150px, 1fr) minmax(170px, 1fr); gap:12px; align-items:start; }
.thp-hang-3{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; margin-top:16px; }
.thp-form .form-label{ margin-bottom:5px; }
.thp-o-icon{ position:relative; }
.thp-o-icon > i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); z-index:3; pointer-events:none; font-size:15px; }
.thp-o-icon.thp-gc > i{ top:20px; }
.thp-o-icon > :is(.form-control, .form-select){ padding-left:40px !important; }
#thpMa{ padding-right:38px !important; }
.thp-xoa-hs{ position:absolute; right:8px; top:50%; transform:translateY(-50%); z-index:3; width:28px; height:28px; border:0; border-radius:8px; background:transparent; display:grid; place-items:center; cursor:pointer; }
.thp-xoa-hs[hidden]{ display:none; }
.thp-gc textarea{ resize:vertical; min-height:58px; padding-bottom:20px !important; }
.thp-dem{ position:absolute; right:12px; bottom:6px; font-size:11.5px; pointer-events:none; }

.thp-khoan-dau{ display:flex; align-items:center; gap:10px; margin:18px 0 8px; flex-wrap:wrap; }
.thp-khoan-dau b{ font-size:16.5px; }
.thp-khoan-dau small{ font-size:12.5px; }
.thp-khoan-icon{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:14px; flex:none; }
.thp-k-bang{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.thp-k-bang th{ padding:9px 12px; font-size:13px; }
.thp-k-bang td{ padding:9px 12px; vertical-align:middle; }
.thp-k-cot-cb{ width:44px; text-align:center; }
.thp-k-cb{ width:20px; height:20px; cursor:pointer; margin:0; }
tr.thp-k:not(.khoa) td:not(.text-end){ cursor:pointer; }
tr.thp-k.khoa{ opacity:.5; }
.thp-k-ten{ font-weight:600; }
.thp-k-phu{ display:block; font-size:12px; }
.thp-k-tien-o{ display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; }
.thp-k-tien-o .kt-tien{ width:140px; font-weight:700 !important; }
.thp-k-tien{ font-weight:600; white-space:nowrap; }
.thp-da-dong{ font-size:12.5px; margin-top:8px; }
.thp-tong{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:13px 16px; border-radius:14px; }
.thp-tong span{ font-weight:700; }
.thp-tong small{ font-weight:500; }
.thp-tong b{ font-size:24px; font-weight:900; letter-spacing:-.01em; white-space:nowrap; }
.thp-khoan{ overflow:hidden; }

.thp-phai{ display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--head, 88px) + 14px); }
.thp-phieu{ padding:18px 20px; }
.thp-qr{ padding:16px 18px; }
.thp-qr #thpQRBox{ display:flex; flex-direction:column; align-items:center; }
.thp-phieu-dau{ display:flex; align-items:center; gap:12px; padding-bottom:12px; margin-bottom:6px; }
.thp-phieu-logo{ width:52px; height:52px; object-fit:contain; flex:none; }
.thp-phieu-ten{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.thp-phieu-ten b{ font-size:15.5px; font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:-.01em; }
.thp-phieu-ten small{ font-size:12.5px; margin-top:3px; }
.thp-phieu-tem{ flex:none; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:5px 11px; border-radius:999px; white-space:nowrap; }
.thp-phieu-muc{ font-weight:800; font-size:14.5px; margin:12px 0 6px; }
.thp-phieu-dl{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; font-size:13.5px; }
.thp-phieu-dl dt{ font-weight:500; }
.thp-phieu-dl dd{ margin:0; font-weight:600; text-align:left; min-width:0; overflow-wrap:anywhere; }
.thp-phieu-bang{ width:100%; font-size:13px; border-collapse:separate; border-spacing:0; border-radius:12px; overflow:hidden; }
.thp-phieu-bang th, .thp-phieu-bang td{ padding:7px 10px; }
.thp-phieu-bang th:first-child, .thp-phieu-bang td:first-child{ width:44px; text-align:center; }
.thp-trong{ text-align:center !important; font-style:italic; }
.thp-phieu-tong{ display:flex; justify-content:space-between; align-items:center; margin:12px 0; padding:12px 14px; border-radius:12px; }
.thp-phieu-tong span{ font-weight:800; }
.thp-phieu-tong b{ font-size:22px; font-weight:900; }
.thp-phieu-chan{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.thp-kiem{ font-size:13px; display:inline-flex; align-items:center; gap:6px; }
#thpSaveBtn{ min-height:46px; padding:0 22px; font-weight:800; }

.thp-di-toi{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.thp-di{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:18px; text-align:left; cursor:pointer; font:inherit; }
.thp-di > span:nth-child(2){ flex:1; display:flex; flex-direction:column; }
.thp-di b{ font-size:17px; }
.thp-di small{ font-size:13px; }
.thp-di-huy{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-size:20px; color:#fff; flex:none; }

@media (max-width:1199.98px){ .thp-hang-1{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .thp-o-hs{ grid-column:1 / -1; } }
@media (max-width:991.98px){
  .thp-luoi{ grid-template-columns:minmax(0, 1fr); }
  .thp-phai{ position:static; }
}
@media (max-width:575.98px){
  .thp-form, .thp-phieu{ padding:14px; }
  .thp-hang-1, .thp-hang-3, .thp-di-toi{ grid-template-columns:minmax(0, 1fr); }
  .thp-k-tien-o{ gap:4px; }
  .thp-k-tien-o .kt-tien{ width:92px; padding-left:6px !important; padding-right:6px !important; font-size:14px !important; }
  .thp-k-tien-o .kt-luu-muc{ padding:4px 7px; }
  .thp-k-bang td, .thp-k-bang th{ padding:8px 4px; }
  .thp-k-cot-cb{ width:34px; }
  .thp-k-tien{ white-space:normal; font-size:13px; }
  .thp-tong{ padding:11px 12px; }
  .thp-tong b{ font-size:20px; }
  .thp-phieu-tem{ display:none; }
}

/* ───────── Màu — giao diện Siêu anh hùng ───────── */
html.gd-sieu-anh-hung .thp-form .form-label{ color:#3b2a20 !important; font-weight:700 !important; }
html.gd-sieu-anh-hung .thp-o-icon > i{ color:#7a6a60; }
html.gd-sieu-anh-hung .thp-xoa-hs{ color:#8a7b70; }
html.gd-sieu-anh-hung .thp-xoa-hs:hover{ background:#fbeee4; color:#b10e25; }
html.gd-sieu-anh-hung .thp-dem{ color:#a3958c; }
html.gd-sieu-anh-hung .thp-hs-ok{ color:#1e7a46; }
html.gd-sieu-anh-hung .thp-hs-loi{ color:#c53030; }
html.gd-sieu-anh-hung #thpGoiY{ color:#a86b00; }
html.gd-sieu-anh-hung .thp-khoan-dau b{ color:#2a1810; }
html.gd-sieu-anh-hung .thp-khoan-dau small{ color:#8a7b70; }
html.gd-sieu-anh-hung .thp-khoan-icon{ color:#fff; background:linear-gradient(135deg, #e0213a, #a50d1f); box-shadow:0 4px 10px -4px rgba(160,10,30,.7); }
html.gd-sieu-anh-hung .thp-khoan{ border:1px solid rgba(125,35,20,.12); border-radius:16px; background:#fff; padding:4px 0 0; }
html.gd-sieu-anh-hung .thp-k-bang th{ background:#fbf3e8 !important; color:#4a372d !important; border-bottom:1px solid rgba(125,35,20,.12) !important; }
html.gd-sieu-anh-hung .thp-k-bang thead th:first-child{ border-top-left-radius:12px; }
html.gd-sieu-anh-hung .thp-k-bang thead th:last-child{ border-top-right-radius:12px; }
html.gd-sieu-anh-hung .thp-k-bang td{ border-bottom:1px solid rgba(125,35,20,.07); color:#21160f; transition:background-color .2s; }
html.gd-sieu-anh-hung tr.thp-k:hover td{ background:#fffaf2; }
html.gd-sieu-anh-hung tr.thp-k.chon td{ background:#fffbef; }
html.gd-sieu-anh-hung .thp-k-phu{ color:#8a7b70; }
html.gd-sieu-anh-hung .thp-da-dong{ color:#1e7a46; padding:0 12px; }
html.gd-sieu-anh-hung .thp-tong{ margin:12px; background:linear-gradient(135deg, #fff6dc, #ffeebd); border:1px solid #f1d590; }
html.gd-sieu-anh-hung .thp-tong span{ color:#3b2a20; }
html.gd-sieu-anh-hung .thp-tong small{ color:#7a6a60; }
html.gd-sieu-anh-hung .thp-tong b{ color:#c8102e; }

html.gd-sieu-anh-hung .thp-phieu{ background:linear-gradient(180deg, #fffaf0, #fff 40%) !important; border:1.5px dashed rgba(200,140,40,.55) !important; box-shadow:0 18px 40px -30px rgba(120,60,0,.7) !important; }
html.gd-sieu-anh-hung .thp-phieu-dau{ border-bottom:1px solid rgba(125,35,20,.12); }
html.gd-sieu-anh-hung .thp-phieu-ten b{ color:#9e0b1b; }
html.gd-sieu-anh-hung .thp-phieu-ten small{ color:#6b5a50; }
html.gd-sieu-anh-hung .thp-phieu-tem{ color:#9a5b00; background:#fff3cf; border:1px solid #f0cf7e; }
html.gd-sieu-anh-hung .thp-phieu-muc{ color:#21160f; }
html.gd-sieu-anh-hung .thp-phieu-dl dt{ color:#7a6a60; }
html.gd-sieu-anh-hung .thp-phieu-dl dd{ color:#21160f; }
html.gd-sieu-anh-hung .thp-phieu-bang{ border:1px solid rgba(125,35,20,.12); }
html.gd-sieu-anh-hung .thp-phieu-bang th{ background:#fbf3e8 !important; color:#4a372d !important; font-size:12.5px !important; padding:7px 10px !important; border-bottom:1px solid rgba(125,35,20,.12) !important; }
html.gd-sieu-anh-hung .thp-phieu-bang td{ border-bottom:1px solid rgba(125,35,20,.07); color:#21160f; }
html.gd-sieu-anh-hung .thp-phieu-bang tr:last-child td{ border-bottom:0; }
html.gd-sieu-anh-hung .thp-trong{ color:#a3958c !important; }
html.gd-sieu-anh-hung .thp-phieu-tong{ background:linear-gradient(135deg, #fff6dc, #ffeebd); border:1px solid #f1d590; }
html.gd-sieu-anh-hung .thp-phieu-tong span{ color:#3b2a20; }
html.gd-sieu-anh-hung .thp-phieu-tong b{ color:#c8102e; }
html.gd-sieu-anh-hung .thp-kiem{ color:#7a6a60; }
html.gd-sieu-anh-hung .thp-kiem i{ color:#e39b16; font-size:16px; }
html.gd-sieu-anh-hung #thpSaveBtn{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019) !important; border:1px solid #b97a0a !important; color:#2a1606 !important; border-radius:12px !important; }

html.gd-sieu-anh-hung .thp-di{ border:1px solid rgba(125,35,20,.12); background:linear-gradient(135deg, #f3f8ff, #fff 60%); color:#21160f; box-shadow:0 12px 26px -22px rgba(30,40,90,.7);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
html.gd-sieu-anh-hung .thp-di[data-thp-tab="sepay"]{ background:linear-gradient(135deg, #f5f1ff, #fff 60%); }
html.gd-sieu-anh-hung .thp-di:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -20px rgba(30,40,90,.7); }
html.gd-sieu-anh-hung .thp-di small{ color:#6b5a50; }
html.gd-sieu-anh-hung .thp-di > i{ color:#5b4a41; }
html.gd-sieu-anh-hung .thp-di-huy{ border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(214,160,40,.8), 0 6px 12px -6px rgba(0,0,0,.45); }
html.gd-sieu-anh-hung .thp-di-huy.huy-do{ background:radial-gradient(circle at 35% 30%, #ff6b5b, #b10e25 70%); }
html.gd-sieu-anh-hung .thp-di-huy.huy-lam{ background:radial-gradient(circle at 35% 30%, #6fa8ff, #1d4fbf 70%); }

@media (prefers-reduced-motion:reduce){ .thp-di{ transition:none !important; } }

/* ===== Đặt cọc cam kết bổ trợ (05/10/2026): khoản cọc, dòng cấn trừ âm, ghi chú trên phiếu ===== */
.thp-phieu-coc-ghi-chu{ margin:0 0 10px; padding:8px 12px; border-radius:10px; font-size:12.5px; font-style:italic; line-height:1.45; background:#fff8e8; border:1px dashed #d9b155; color:#5a3a12; }
.thp-phieu-coc-ghi-chu[hidden]{ display:none; }
.thp-phieu-bang td.thp-cantru, .thp-phieu-bang td.thp-cantru + td{ color:#1d7a46; }
.hs-hp-dong-sach .kt-coc-chip{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:700; background:#fff3b0; color:#7a4a05; border:1px solid #d9b155; }
.hs-hp-dong-sach .kt-coc-phu{ display:block; font-size:11.5px; font-weight:500; color:#7a6a60; }

/* =====================================================================================
 * TAB TỔNG QUAN (Admin) — theo ảnh mẫu thầy 03/10/2026: 4 thẻ số liệu nền màu nhạt + huy hiệu, sĩ số theo lớp dạng viên màu,
 * Cần phản hồi | Lớp học hôm nay (dòng thời gian), Học sinh cần bổ trợ gấp | Cảnh báo học phí, 3 thanh mở rộng ở cuối.
 * Chỉ có ở giao diện Siêu anh hùng (#tongQuan .chi-gd-moi). JS: app.js renderTongQuan_, veSiSoLopTongQuan_,
 * htmlDongCbtgTq_, moThanhTq_; hoc-sinh-yeu.js (số em ở thanh AI).
 * ===================================================================================== */

/* ───────── 4 thẻ số liệu ───────── */
.tq2-the-luoi{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-bottom:16px; }
.tq2-the{
  position:relative; display:flex; align-items:center; gap:14px; padding:18px 30px 18px 16px; border-radius:18px; text-align:left;
  font:inherit; cursor:pointer; border:1px solid transparent; min-width:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
  animation:tq2Len .5s cubic-bezier(.22,1,.36,1) both;
}
.tq2-the:nth-child(2){ animation-delay:.05s; } .tq2-the:nth-child(3){ animation-delay:.1s; } .tq2-the:nth-child(4){ animation-delay:.15s; }
.tq2-the:hover{ transform:translateY(-3px); }
.tq2-the-huy{ width:62px; height:62px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:24px;
  border:3px solid #fff; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.tq2-the:hover .tq2-the-huy{ transform:rotate(-8deg) scale(1.06); }
.tq2-the-noi{ display:flex; flex-direction:column; min-width:0; }
.tq2-the-nhan{ font-size:15px; font-weight:700; line-height:1.25; }
.tq2-the-so{ font-size:36px; font-weight:900; line-height:1.1; letter-spacing:-.02em; margin:2px 0; white-space:nowrap; }
.tq2-the-phu{ font-size:13px; font-weight:600; line-height:1.3; }
.tq2-the-phu i{ font-size:11px; }
.tq2-the-mui{ position:absolute; top:16px; right:14px; font-size:22px; opacity:.4; transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.tq2-the:hover .tq2-the-mui{ transform:scale(1.12) rotate(-6deg); opacity:.75; }
@keyframes tq2Len{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ───────── Khung chung ───────── */
.tq2-khung{ padding:16px 18px !important; margin-bottom:16px; }
.tq2-dau{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.tq2-huy{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:16px; border:2px solid #fff; }
.tq2-ten{ font-size:19px; font-weight:800; }
.tq2-phu-dau{ margin-left:auto; font-size:13px; }
.tq2-dem{ min-width:28px; height:24px; padding:0 8px; border-radius:999px; display:inline-grid; place-items:center; font-size:13px; font-weight:800; color:#fff; }
.tq2-dem[hidden]{ display:none; }
.tq2-xem{ margin-left:auto; border:0; background:none; font:inherit; font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:4px 2px; }
.tq2-xem[hidden]{ display:none; }
.tq2-xem i{ transition:transform .25s; }
.tq2-xem:hover i{ transform:translateX(3px); }
.tq2-ghi{ font-size:12.5px; margin:-4px 0 10px; }
.tq2-tom{ font-size:12.5px; margin:-4px 0 8px; }

/* Sĩ số theo lớp */
.tq2-si-so .tq2-dau{ margin-bottom:10px; }
.tq2-lop{ display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:10px; }
.tq2-lop-o{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:8px 6px; border-radius:12px; border:1px solid transparent;
  font:inherit; cursor:pointer; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; min-height:54px; }
.tq2-lop-o:hover{ transform:translateY(-2px); }
.tq2-lop-o b{ font-size:17px; font-weight:800; line-height:1.15; }
.tq2-lop-o small{ font-size:12px; }
.tq2-lop-het{ font-size:22px; }

/* 2 cột */
.tq2-hai-cot{ display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); gap:16px; align-items:stretch; }
.tq2-hai-cot.deu{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.tq2-hai-cot > .tq2-khung{ margin-bottom:16px; }

/* Cần phản hồi */
.tq2-nv{ display:grid; grid-template-columns:36px minmax(150px, 1fr) 52px minmax(0, 1.25fr) auto; align-items:center; gap:12px;
  padding:10px 12px; border-radius:14px; margin-bottom:8px; cursor:pointer; transition:transform .25s, box-shadow .25s, background-color .25s; }
.tq2-nv:hover{ transform:translateX(2px); }
.tq2-nv-icon{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:15px; }
.tq2-nv-ten{ font-size:15px; font-weight:700; line-height:1.25; }
.tq2-nv-so{ justify-self:center; min-width:42px; padding:3px 10px; border-radius:999px; text-align:center; font-weight:800; font-size:14px; }
.tq2-nv-mo{ font-size:13px; line-height:1.35; }
.tq2-nv-xem{ font-size:13px; font-weight:700; padding:6px 12px; border-radius:10px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }

/* Lớp học hôm nay — dòng thời gian */
.tq2-dong-tg{ position:relative; }
.tq2-tl{ position:relative; width:100%; display:grid; grid-template-columns:104px 16px minmax(0, 1fr) auto; align-items:center; gap:10px;
  padding:14px 8px; border:0; background:none; font:inherit; text-align:left; cursor:pointer; border-radius:12px; transition:background-color .25s; }
.tq2-tl + .tq2-tl::before{ content:''; position:absolute; left:calc(8px + 104px + 10px + 7px); top:-14px; height:28px; width:2px; }
.tq2-tl-gio{ font-size:14.5px; font-weight:700; white-space:nowrap; }
.tq2-tl-cham{ width:14px; height:14px; border-radius:50%; justify-self:center; position:relative; z-index:1; }
.tq2-tl-noi{ display:flex; flex-direction:column; min-width:0; }
.tq2-tl-noi b{ font-size:15px; }
.tq2-tl-noi small{ font-size:12.5px; }
.tq2-tl-noi small i{ font-size:11px; margin-right:2px; }
.tq2-tt{ font-size:12.5px; font-weight:700; padding:6px 10px; border-radius:12px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }

/* Học sinh cần bổ trợ gấp + Cảnh báo học phí */
.tq2-av{ width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:16px; }
.tq2-hs-ten{ display:flex; flex-direction:column; min-width:0; }
.tq2-hs-ten b{ font-size:15px; }
.tq2-hs-ten small{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tq2-hs-ten small i{ font-style:normal; margin:0 3px; opacity:.5; }
.tq2-hs-ten small a{ color:inherit; text-decoration:none; }
.tq2-bt{ display:grid; grid-template-columns:46px minmax(0, 1.15fr) minmax(0, 1.2fr) auto; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; margin-bottom:8px; }
.tq2-bt.tq2-an{ display:none; }
#tqCanBoTro.mo-het .tq2-bt.tq2-an{ display:grid; }
.tq2-bt-ly{ display:flex; flex-direction:column; min-width:0; }
.tq2-bt-ly b{ font-size:13.5px; }
.tq2-bt-ly small{ font-size:12px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.tq2-bt-nut{ display:flex; flex-direction:column; gap:6px; }
.tq2-bt-nut .btn{ font-size:12.5px !important; font-weight:700; padding:5px 12px !important; white-space:nowrap; border-radius:10px !important; }
.tq2-hs{ width:100%; display:grid; grid-template-columns:46px minmax(0, 1fr) auto auto 14px; align-items:center; gap:12px; padding:10px 12px;
  border-radius:14px; margin-bottom:8px; font:inherit; text-align:left; cursor:pointer; transition:transform .25s, box-shadow .25s; }
.tq2-hs:hover{ transform:translateX(2px); }
.tq2-tem{ font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:10px; white-space:nowrap; }
.tq2-hs-tien{ display:flex; flex-direction:column; align-items:flex-end; min-width:96px; }
.tq2-hs-tien b{ font-size:15px; font-weight:800; white-space:nowrap; }
.tq2-hs-tien small{ font-size:12px; text-align:right; }
.tq2-hs-mui{ font-size:13px; opacity:.55; }

/* 3 thanh mở rộng */
.tq2-thanh{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:4px 0 16px; }
.tq2-thanh-nut{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:16px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; text-align:left;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s; min-width:0; }
.tq2-thanh-nut > span:first-of-type{ min-width:0; }
.tq2-thanh-nut:hover{ transform:translateY(-2px); }
.tq2-mui{ margin-left:auto; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.tq2-thanh-nut.mo .tq2-mui{ transform:rotate(180deg); }
.tq2-mo{ animation:tq2Len .4s cubic-bezier(.22,1,.36,1) both; }
html.gd-sieu-anh-hung #pane-dashboard .tq2-mo-thong-ke{ display:none; }   /* thống kê kiểu cũ — giao diện mới dùng .tq2-thong-ke */
html.gd-sieu-anh-hung #pane-dashboard .tq2-mo-thong-ke.mo{ animation:tq2Len .4s cubic-bezier(.22,1,.36,1) both; }
.tq-loi-dd{ margin:0 0 8px 48px !important; }

@media (max-width:1499.98px){ .tq2-the-so{ font-size:31px; } .tq2-the-huy{ width:54px; height:54px; font-size:21px; } .tq2-the-nhan{ font-size:14px; } }
@media (max-width:1199.98px){
  .tq2-the-luoi{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tq2-hai-cot, .tq2-hai-cot.deu{ grid-template-columns:minmax(0, 1fr); gap:0; }
}
@media (max-width:767.98px){
  .tq2-thanh{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .tq2-nv{ grid-template-columns:36px minmax(0, 1fr) auto; grid-template-areas:'i t s' 'i m m'; row-gap:2px; }
  .tq2-nv-icon{ grid-area:i; } .tq2-nv-ten{ grid-area:t; } .tq2-nv-so{ grid-area:s; } .tq2-nv-mo{ grid-area:m; }
  .tq2-nv-xem{ display:none; }
  .tq2-tl{ grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:'g t' 'n n'; row-gap:4px; }
  .tq2-tl-gio{ grid-area:g; } .tq2-tl-noi{ grid-area:n; } .tq2-tt{ grid-area:t; } .tq2-tl-cham{ display:none; }
  .tq2-tl + .tq2-tl::before{ display:none; }
  .tq2-bt{ grid-template-columns:46px minmax(0, 1fr); }
  .tq2-bt-ly, .tq2-bt-nut{ grid-column:1 / -1; }
  .tq2-bt-nut{ flex-direction:row; }
  .tq2-bt-nut .btn{ flex:1; }
  .tq2-hs{ grid-template-columns:46px minmax(0, 1fr) auto; }
  .tq2-tem{ grid-column:2; justify-self:start; }
  .tq2-hs-tien{ grid-column:3; grid-row:1 / span 2; }
  .tq2-hs-mui{ display:none; }
}
@media (max-width:575.98px){
  .tq2-the-luoi{ gap:10px; }
  .tq2-the{ padding:14px 28px 14px 12px; gap:10px; flex-direction:column; align-items:flex-start; }
  .tq2-the-huy{ width:44px; height:44px; font-size:18px; }
  .tq2-the-so{ font-size:26px; }
  .tq2-the-mui{ top:14px; right:12px; }
  .tq-loi-dd{ margin-left:0 !important; }
  .tq2-ten{ font-size:17px; }
  .tq2-khung{ padding:14px !important; }
  .tq2-lop{ grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); gap:8px; }
  .tq2-nv{ padding:10px; gap:10px; }
}

/* ───────── Màu (giao diện Siêu anh hùng) ───────── */
html.gd-sieu-anh-hung .tq2-the-do{ background:linear-gradient(135deg, #fff6ef, #fffaf6) !important; border-color:#f3d9c6 !important; box-shadow:0 14px 28px -24px rgba(160,60,20,.8); }
html.gd-sieu-anh-hung .tq2-the-lam{ background:linear-gradient(135deg, #eaf4ff, #f5f9ff) !important; border-color:#c9def6 !important; box-shadow:0 14px 28px -24px rgba(30,80,160,.8); }
html.gd-sieu-anh-hung .tq2-the-hong{ background:linear-gradient(135deg, #ffeef0, #fff7f8) !important; border-color:#f4c8cd !important; box-shadow:0 14px 28px -24px rgba(180,20,40,.8); }
html.gd-sieu-anh-hung .tq2-the-vang{ background:linear-gradient(135deg, #fff7df, #fffbef) !important; border-color:#f1dda0 !important; box-shadow:0 14px 28px -24px rgba(170,110,0,.8); }
html.gd-sieu-anh-hung .tq2-the:hover{ box-shadow:0 20px 34px -22px rgba(90,25,10,.65); }
html.gd-sieu-anh-hung .tq2-the-nhan{ color:#2a1810; }
html.gd-sieu-anh-hung .tq2-the-so{ color:#1b120c; }
html.gd-sieu-anh-hung .tq2-the-so.canh-bao{ color:#d81a32; }
html.gd-sieu-anh-hung .tq2-the-vang .tq2-the-so{ color:#a8650a; }
html.gd-sieu-anh-hung .tq2-the-phu{ color:#5b4a41; }
html.gd-sieu-anh-hung .tq2-the-do .tq2-the-phu{ color:#1e7a46; }
html.gd-sieu-anh-hung .tq2-the-hong .tq2-the-phu{ color:#c53030; }
html.gd-sieu-anh-hung .tq2-the-vang .tq2-the-phu{ color:#1e7a46; }
html.gd-sieu-anh-hung .tq2-the-mui{ color:#5b4a41; }
html.gd-sieu-anh-hung .tq2-the-huy{ box-shadow:0 0 0 2px rgba(214,160,40,.85), 0 8px 16px -8px rgba(0,0,0,.55); }
html.gd-sieu-anh-hung .tq2-the-do .tq2-the-huy{ background:radial-gradient(circle at 35% 30%, #ff6b5b, #b10e25 72%); }
html.gd-sieu-anh-hung .tq2-the-lam .tq2-the-huy{ background:radial-gradient(circle at 35% 30%, #6fa8ff, #1d4fbf 72%); }
html.gd-sieu-anh-hung .tq2-the-hong .tq2-the-huy{ background:radial-gradient(circle at 35% 30%, #ff7a6b, #c8102e 72%); }
html.gd-sieu-anh-hung .tq2-the-vang .tq2-the-huy{ background:radial-gradient(circle at 35% 30%, #ffe48a, #e39b16 72%); color:#5a3000; }

html.gd-sieu-anh-hung .tq2-huy{ box-shadow:0 0 0 1.5px rgba(214,160,40,.85), 0 6px 12px -6px rgba(0,0,0,.5); }
html.gd-sieu-anh-hung .tq2-huy.huy-do{ background:radial-gradient(circle at 35% 30%, #ff6b5b, #b10e25 72%); }
html.gd-sieu-anh-hung .tq2-huy.huy-vang{ background:radial-gradient(circle at 35% 30%, #ffe48a, #e39b16 72%); color:#5a3000; }
html.gd-sieu-anh-hung .tq2-huy.huy-trang{ background:#fff; color:#c8102e; border-color:#fbe1e1; font-size:18px; }
html.gd-sieu-anh-hung .tq2-ten{ color:#1b120c; }
html.gd-sieu-anh-hung .tq2-phu-dau, html.gd-sieu-anh-hung .tq2-ghi, html.gd-sieu-anh-hung .tq2-tom{ color:#8a7b70; }
html.gd-sieu-anh-hung .tq2-ghi b{ color:#5b4a41; }
html.gd-sieu-anh-hung .tq2-dem{ background:linear-gradient(135deg, #e0213a, #b10e25); box-shadow:0 4px 10px -4px rgba(177,14,37,.8); }
html.gd-sieu-anh-hung .tq2-xem{ color:#c8102e; }

/* 8 màu lớp */
html.gd-sieu-anh-hung .tq2-lop-o.mau-0{ background:#ffeaea; border-color:#f7cccc; color:#8d1020; }
html.gd-sieu-anh-hung .tq2-lop-o.mau-1{ background:#e7f1ff; border-color:#c8dcf7; color:#1d4f9a; }
html.gd-sieu-anh-hung .tq2-lop-o.mau-2{ background:#e8f7ec; border-color:#c4e7cf; color:#1e6b3e; }
html.gd-sieu-anh-hung .tq2-lop-o.mau-3{ background:#fff5dc; border-color:#f1dca2; color:#8a5a00; }
html.gd-sieu-anh-hung .tq2-lop-o.mau-4{ background:#f1eaff; border-color:#dacbf7; color:#5b2da0; }
html.gd-sieu-anh-hung .tq2-lop-o.mau-5{ background:#ffeee2; border-color:#f6d3bb; color:#9a4a12; }
html.gd-sieu-anh-hung .tq2-lop-o.mau-6{ background:#e6f4fb; border-color:#c3e1f0; color:#145f80; }
html.gd-sieu-anh-hung .tq2-lop-o.mau-7{ background:#fdeaf2; border-color:#f3c9db; color:#8e1d55; }
html.gd-sieu-anh-hung .tq2-lop-o small{ color:#5b4a41; }
html.gd-sieu-anh-hung .tq2-lop-het{ background:#ffecec; border-color:#f4c4c4; color:#d81a32; }
html.gd-sieu-anh-hung .tq2-lop-o:hover{ box-shadow:0 10px 18px -14px rgba(90,25,10,.7); }

/* Cần phản hồi */
html.gd-sieu-anh-hung .tq2-nv{ background:#fff; border:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .tq2-nv:hover{ background:#fffaf4; box-shadow:0 10px 18px -16px rgba(90,25,10,.7); }
html.gd-sieu-anh-hung .tq2-nv-icon.vang{ background:#fff3cf; color:#c47f00; }
html.gd-sieu-anh-hung .tq2-nv-icon.do{ background:#ffe6e6; color:#d81a32; }
html.gd-sieu-anh-hung .tq2-nv-icon.lam{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung .tq2-nv-ten{ color:#1b120c; }
html.gd-sieu-anh-hung .tq2-nv-so.vang{ background:#fff3cf; color:#a86b00; }
html.gd-sieu-anh-hung .tq2-nv-so.do{ background:#ffe6e6; color:#d81a32; }
html.gd-sieu-anh-hung .tq2-nv-so.lam{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung .tq2-nv-so.khong{ background:#f3f6fa; color:#5f7387; }
html.gd-sieu-anh-hung .tq2-nv-mo{ color:#7a6a60; }
html.gd-sieu-anh-hung .tq2-nv-xem{ color:#c8102e; border:1px solid #f1c7c7; background:#fff; }
html.gd-sieu-anh-hung .tq2-nv:hover .tq2-nv-xem{ background:#fff3f3; }

/* Dòng thời gian */
html.gd-sieu-anh-hung .tq2-tl:hover{ background:#fffaf4; }
html.gd-sieu-anh-hung .tq2-tl + .tq2-tl{ border-top:1px dashed rgba(125,35,20,.12); }
html.gd-sieu-anh-hung .tq2-tl + .tq2-tl::before{ background:#eadbd0; }
html.gd-sieu-anh-hung .tq2-tl-gio{ color:#1b120c; }
html.gd-sieu-anh-hung .tq2-tl-cham{ box-shadow:0 0 0 4px #fff, 0 0 0 5px rgba(125,35,20,.12); }
html.gd-sieu-anh-hung .tq2-tl-cham.mau-0{ background:#e0213a; } html.gd-sieu-anh-hung .tq2-tl-cham.mau-1{ background:#1d5fd0; }
html.gd-sieu-anh-hung .tq2-tl-cham.mau-2{ background:#7b3fe4; } html.gd-sieu-anh-hung .tq2-tl-cham.mau-3{ background:#1e8a4c; }
html.gd-sieu-anh-hung .tq2-tl-noi b{ color:#1b120c; }
html.gd-sieu-anh-hung .tq2-tl-noi small{ color:#7a6a60; }
html.gd-sieu-anh-hung .tq2-tt.lich, html.gd-sieu-anh-hung .tq2-tt.xong{ background:#e9f7ee; color:#1e7a46; }
html.gd-sieu-anh-hung .tq2-tt.dang{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung .tq2-tt.sap{ background:#fff3cf; color:#a86b00; }
html.gd-sieu-anh-hung .tq2-tt.tre{ background:#ffe6e6; color:#d81a32; }

/* Danh sách học sinh */
html.gd-sieu-anh-hung :is(.tq2-bt, .tq2-hs){ background:#fff; border:1px solid rgba(125,35,20,.10); color:#1b120c; }
html.gd-sieu-anh-hung :is(.tq2-bt, .tq2-hs):hover{ box-shadow:0 10px 18px -16px rgba(90,25,10,.7); }
html.gd-sieu-anh-hung .tq2-hs-ten small, html.gd-sieu-anh-hung .tq2-bt-ly small, html.gd-sieu-anh-hung .tq2-hs-tien small{ color:#8a7b70; }
html.gd-sieu-anh-hung .tq2-bt-ly b{ color:#2a1810; }
html.gd-sieu-anh-hung .tq2-av.mau-0{ background:#ffe3e6; color:#c8102e; } html.gd-sieu-anh-hung .tq2-av.mau-1{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung .tq2-av.mau-2{ background:#e4f6ea; color:#1e7a46; } html.gd-sieu-anh-hung .tq2-av.mau-3{ background:#efe6ff; color:#6a35c7; }
html.gd-sieu-anh-hung .tq2-av.mau-4{ background:#fff0d6; color:#a86b00; }
html.gd-sieu-anh-hung .tq2-tem.qua{ background:#ffe6e9; color:#d81a32; }
html.gd-sieu-anh-hung .tq2-tem.sap{ background:#fff3cf; color:#a86b00; }
html.gd-sieu-anh-hung .tq2-hs-tien b{ color:#1b120c; }
html.gd-sieu-anh-hung .tq2-nut-vang{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019) !important; border:1px solid #c98a12 !important; color:#2a1606 !important; }
html.gd-sieu-anh-hung .tq2-nut-trang{ background:#fff !important; border:1px solid rgba(125,35,20,.18) !important; color:#2a1810 !important; }

/* Thanh mở rộng */
html.gd-sieu-anh-hung .tq2-thanh-nut{ background:#fff; border:1px solid rgba(125,35,20,.14); color:#1b120c; box-shadow:0 10px 22px -20px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .tq2-thanh-nut > i:first-child{ color:#c8102e; font-size:18px; }
html.gd-sieu-anh-hung .tq2-thanh-nut.mo{ border-color:#f0c56b; background:linear-gradient(135deg, #fffaf0, #fff); }
html.gd-sieu-anh-hung .tq2-thanh-nut:hover{ box-shadow:0 14px 24px -18px rgba(90,25,10,.8); }

@media (prefers-reduced-motion:reduce){
  .tq2-the, .tq2-the-huy, .tq2-lop-o, .tq2-nv, .tq2-tl, .tq2-hs, .tq2-thanh-nut, .tq2-mui, .tq2-mo, .tq2-mo-thong-ke{ animation:none !important; transition:none !important; }
}

/* =====================================================================================
 * BỐ CỤC LẦN 2 (ảnh mẫu thầy 03/10/2026): biểu đồ sĩ số | nhiệm vụ, 3 cột (lớp hôm nay | học phí + bổ trợ | HS mới + AI),
 * khung chi tiết mở từ ô tóm tắt, thống kê theo khoảng ngày.
 * ===================================================================================== */
.tq2-hang{ display:grid; gap:16px; align-items:stretch; margin-bottom:16px; }
.tq2-hang > .tq2-khung, .tq2-cot > .tq2-khung{ margin-bottom:0; }
.tq2-hang-2{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); }
.tq2-hang-3{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); }
.tq2-cot{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.tq2-cot > .tq2-khung{ flex:1 1 auto; }
.tq2-icon-dau{ font-size:21px; width:26px; text-align:center; flex:none; }
.tq2-bieu-do{ position:relative; height:240px; }

/* Nhiệm vụ gọn: biểu tượng | số | tên + mô tả | Xem chi tiết */
.tq-nhiem-vu .tq2-nv{ grid-template-columns:34px 44px minmax(0, 1fr) auto; grid-template-areas:none; gap:12px; padding:8px 10px; margin-bottom:6px; }
.tq2-nv-chu{ display:flex; flex-direction:column; min-width:0; }
.tq-nhiem-vu .tq2-nv-ten{ font-size:14.5px; }
.tq-nhiem-vu .tq2-nv-mo{ font-size:12.5px; }
.tq-nhiem-vu .tq2-nv-so{ min-width:40px; padding:3px 8px; }
.tq-nhiem-vu .tq2-nv-icon{ width:34px; height:34px; }

/* 2 ô học phí */
.tq2-o-doi{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tq2-o{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px; border:1px solid transparent; font:inherit; text-align:left; cursor:pointer;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; min-width:0; }
.tq2-o:hover{ transform:translateY(-2px); }
.tq2-o > span:nth-child(2){ display:flex; flex-direction:column; min-width:0; flex:1; }
.tq2-o b{ font-size:26px; font-weight:900; line-height:1.05; }
.tq2-o span span{ font-size:14px; font-weight:700; }
.tq2-o small{ font-size:12px; }
.tq2-o > i{ opacity:.5; font-size:13px; }
.tq2-o-icon{ width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:18px; }

/* Học sinh cần bổ trợ (ô tóm tắt) */
.tq2-bt-tom{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; }
.tq2-so-tron{ width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:20px; font-weight:900; }
.tq2-bt-tom-chu{ display:flex; flex-direction:column; flex:1; min-width:0; }
.tq2-bt-tom-chu b{ font-size:15px; }
.tq2-bt-tom-chu small{ font-size:12.5px; }
.tq2-bt-tom .btn{ white-space:nowrap; font-weight:800 !important; border-radius:10px !important; padding:7px 14px !important; }

/* Học sinh mới & thiếu thông tin */
.tq2-dong-nho{ width:100%; display:grid; grid-template-columns:36px 40px minmax(0, 1fr) 14px; align-items:center; gap:10px; padding:9px 10px; border-radius:12px;
  margin-bottom:8px; font:inherit; text-align:left; cursor:pointer; transition:transform .25s, box-shadow .25s; }
.tq2-dong-nho:last-child{ margin-bottom:0; }
.tq2-dong-nho:hover{ transform:translateX(2px); }
.tq2-dong-nho .tq2-o-icon{ width:36px; height:36px; border-radius:50%; font-size:15px; }
.tq2-so-nho{ justify-self:center; min-width:36px; padding:3px 8px; border-radius:999px; text-align:center; font-weight:800; font-size:14px; }
.tq2-dong-chu{ display:flex; flex-direction:column; min-width:0; }
.tq2-dong-chu b{ font-size:14.5px; }
.tq2-dong-chu small{ font-size:12px; }
.tq2-dong-nho > i{ font-size:12px; opacity:.5; }

/* AI học lực yếu */
.tq2-ai-hang{ display:flex; gap:8px; flex-wrap:wrap; }
.tq2-ai-hang .form-select{ flex:1 1 110px; width:auto; min-width:0; }
.tq2-ai-hang .btn{ flex:1 1 140px; font-weight:800 !important; border-radius:10px !important; white-space:nowrap; }
.tq2-xem .tq2-dem{ height:20px; min-width:22px; font-size:11.5px; padding:0 6px; }

/* Khung chi tiết */
.tq2-chi-tiet{ scroll-margin-top:calc(var(--head, 88px) + 12px); }
.tq2-dong{ margin-left:auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; cursor:pointer; font-size:16px; }
.tq2-luoi-hs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:0 12px; }
.tq2-hs[hidden]{ display:none; }
#tqCanBoTro.mo-het{ display:grid; grid-template-columns:repeat(auto-fill, minmax(520px, 1fr)); gap:0 12px; }
#tqHsMoiCard{ padding:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; }

/* Thống kê theo khoảng ngày */
.tq2-tk-loc{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tq2-tk-loc label{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; margin:0; }
.tq2-tk-loc .form-select, .tq2-tk-loc .form-control{ width:auto; min-width:120px; }
.tq2-tk-loc .btn{ font-weight:800 !important; border-radius:10px !important; padding:6px 14px !important; white-space:nowrap; }
.tq2-tk-than{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:16px; align-items:center; }
.tq2-tk-bieu-do{ position:relative; height:190px; }
.tq2-tk-o{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.tq2-tk-o > .tq-trong, .tq2-tk-o > div:only-child{ grid-column:1 / -1; }
.tq2-tk-the{ display:flex; align-items:center; gap:10px; padding:14px 12px; border-radius:14px; border:1px solid transparent; min-width:0; }
.tq2-tk-the > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.tq2-tk-the small{ font-size:12.5px; font-weight:700; }
.tq2-tk-the b{ font-size:24px; font-weight:900; line-height:1.1; }
.tq2-tk-the span span{ font-size:11.5px; }
.tq2-tk-icon{ width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:18px; }

@media (max-width:1399.98px){
  .tq2-hang-3{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .tq2-hang-3 > :first-child{ grid-column:1 / -1; }
  .tq2-tk-than{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:1199.98px){
  .tq2-hang-2{ grid-template-columns:minmax(0, 1fr); }
  #tqCanBoTro.mo-het, .tq2-luoi-hs{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:767.98px){
  .tq2-hang-3{ grid-template-columns:minmax(0, 1fr); }
  .tq-nhiem-vu .tq2-nv{ grid-template-columns:34px 40px minmax(0, 1fr); }
  .tq-nhiem-vu .tq2-nv-xem{ display:none; }
  .tq2-tk-loc{ margin-left:0; width:100%; }
  .tq2-tk-loc label{ flex:1 1 130px; }
  .tq2-tk-loc label > *{ flex:1; min-width:0; }
  .tq2-tk-loc .btn{ flex:1 1 100%; }
  .tq2-tk-o{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  .tq2-tk-the{ flex-direction:column; align-items:flex-start; padding:10px; }
  .tq2-tk-the b{ font-size:20px; }
  .tq2-bieu-do{ height:200px; }
}

/* Màu */
html.gd-sieu-anh-hung .tq2-icon-dau.do{ color:#d81a32; } html.gd-sieu-anh-hung .tq2-icon-dau.lam{ color:#1d5fd0; } html.gd-sieu-anh-hung .tq2-icon-dau.tim{ color:#6a35c7; }
html.gd-sieu-anh-hung .tq2-the-mui{ opacity:.35; }
html.gd-sieu-anh-hung .tq2-the-do .tq2-the-mui{ color:#e07a4a; } html.gd-sieu-anh-hung .tq2-the-lam .tq2-the-mui{ color:#5b8fd6; }
html.gd-sieu-anh-hung .tq2-the-hong .tq2-the-mui{ color:#e05a6a; } html.gd-sieu-anh-hung .tq2-the-vang .tq2-the-mui{ color:#d9a033; }
html.gd-sieu-anh-hung .tq2-o.do{ background:linear-gradient(135deg, #ffecee, #fff6f6); border-color:#f6cdd2; color:#2a1810; }
html.gd-sieu-anh-hung .tq2-o.do b{ color:#d81a32; } html.gd-sieu-anh-hung .tq2-o.do .tq2-o-icon{ background:#ffd6dc; color:#d81a32; }
html.gd-sieu-anh-hung .tq2-o.lam{ background:linear-gradient(135deg, #e9f2ff, #f5f9ff); border-color:#cadcf6; color:#2a1810; }
html.gd-sieu-anh-hung .tq2-o.lam b{ color:#1d5fd0; } html.gd-sieu-anh-hung .tq2-o.lam .tq2-o-icon{ background:#d6e6ff; color:#1d5fd0; }
html.gd-sieu-anh-hung .tq2-o small{ color:#7a6a60; }
html.gd-sieu-anh-hung .tq2-o:hover{ box-shadow:0 12px 20px -16px rgba(90,25,10,.7); }
html.gd-sieu-anh-hung .tq2-bt-tom{ background:#fff7f5; border:1px solid #f6d6cf; }
html.gd-sieu-anh-hung .tq2-so-tron{ background:#ffe1e4; color:#d81a32; }
html.gd-sieu-anh-hung .tq2-so-tron.khong{ background:#e9f7ee; color:#1e7a46; }
html.gd-sieu-anh-hung .tq2-bt-tom-chu b{ color:#1b120c; } html.gd-sieu-anh-hung .tq2-bt-tom-chu small{ color:#8a7b70; }
html.gd-sieu-anh-hung .tq2-dong-nho{ background:#fff; border:1px solid rgba(125,35,20,.10); color:#1b120c; }
html.gd-sieu-anh-hung .tq2-dong-nho:hover{ box-shadow:0 10px 18px -16px rgba(90,25,10,.7); background:#fffaf4; }
html.gd-sieu-anh-hung .tq2-o-icon.vang{ background:#fff0cc; color:#c47f00; } html.gd-sieu-anh-hung .tq2-o-icon.lam{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung .tq2-so-nho.vang{ background:#ffe6e6; color:#d81a32; } html.gd-sieu-anh-hung .tq2-so-nho.lam{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung .tq2-dong-chu small{ color:#8a7b70; }
html.gd-sieu-anh-hung .tq2-chi-tiet{ border:1.5px solid #f0c56b !important; background:linear-gradient(180deg, #fffaf0, #fffdf9) !important; }
html.gd-sieu-anh-hung .tq2-dong{ border:1px solid rgba(125,35,20,.15); background:#fff; color:#5b4a41; }
html.gd-sieu-anh-hung .tq2-dong:hover{ background:#fff0f0; color:#d81a32; }
html.gd-sieu-anh-hung .tq2-tem.chua{ background:#fff3cf; color:#a86b00; }
html.gd-sieu-anh-hung .tq2-nut-do{ background:linear-gradient(135deg, #e0213a, #b10e25) !important; border:0 !important; color:#fff !important; box-shadow:0 8px 16px -10px rgba(177,14,37,.9); }
html.gd-sieu-anh-hung .tq2-tk-loc label{ color:#5b4a41; }
html.gd-sieu-anh-hung .tq2-tk-the.do{ background:#fff0f1; border-color:#f6d0d4; } html.gd-sieu-anh-hung .tq2-tk-the.do .tq2-tk-icon{ background:#ffd9de; color:#d81a32; }
html.gd-sieu-anh-hung .tq2-tk-the.lam{ background:#edf4ff; border-color:#cddff7; } html.gd-sieu-anh-hung .tq2-tk-the.lam .tq2-tk-icon{ background:#d8e7ff; color:#1d5fd0; }
html.gd-sieu-anh-hung .tq2-tk-the.vang{ background:#fff8e3; border-color:#f1dfa6; } html.gd-sieu-anh-hung .tq2-tk-the.vang .tq2-tk-icon{ background:#ffecb3; color:#c47f00; }
html.gd-sieu-anh-hung .tq2-tk-the.do small{ color:#c53030; } html.gd-sieu-anh-hung .tq2-tk-the.lam small{ color:#1d5fd0; } html.gd-sieu-anh-hung .tq2-tk-the.vang small{ color:#a86b00; }
html.gd-sieu-anh-hung .tq2-tk-the b{ color:#1b120c; } html.gd-sieu-anh-hung .tq2-tk-the span span{ color:#8a7b70; }
@media (prefers-reduced-motion:reduce){ .tq2-o, .tq2-dong-nho{ transition:none !important; } }

/* Sửa sau khi chụp thử (03/10/2026) */
.tq2-hang-3 .tq2-ten{ font-size:17px; }
.tq2-hang-3 .tq2-tl{ grid-template-columns:96px 14px minmax(0, 1fr); grid-template-areas:'g c n' 'g c t'; row-gap:6px; align-items:center; }
.tq2-hang-3 .tq2-tl-gio{ grid-area:g; font-size:14px; } .tq2-hang-3 .tq2-tl-cham{ grid-area:c; } .tq2-hang-3 .tq2-tl-noi{ grid-area:n; } .tq2-hang-3 .tq2-tt{ grid-area:t; justify-self:start; }
.tq2-hang-3 .tq2-tl + .tq2-tl::before{ left:calc(8px + 96px + 10px + 6px); }
.tq2-o{ position:relative; padding:12px 10px; gap:8px; }
.tq2-o-icon{ width:36px; height:36px; font-size:16px; border-radius:11px; }
.tq2-o > i{ position:absolute; top:10px; right:10px; }
.tq2-o b{ font-size:24px; }
.tq2-o span span{ font-size:13.5px; white-space:nowrap; }
.tq2-si-so .tq2-phu-dau{ margin-left:0; }
.tq2-the-nhan{ padding-right:22px; }
@media (max-width:1599.98px){ .tq2-the-huy{ width:50px; height:50px; font-size:20px; } .tq2-the{ gap:12px; } }
.tq2-the-nhan{ padding-right:14px; }
.tq2-the-mui{ font-size:19px; top:14px; right:12px; }
@media (max-width:1599.98px){ .tq2-the-nhan{ font-size:14.5px; } }
.tq2-tk-the{ flex-direction:column; align-items:flex-start; gap:8px; }
.tq2-tk-the small{ white-space:nowrap; }
.tq2-tk-the span span{ white-space:nowrap; }
@media (max-width:767.98px){
  .tq-nhiem-vu .tq2-nv{ grid-template-areas:none !important; grid-template-columns:34px 40px minmax(0, 1fr); }
  .tq-nhiem-vu .tq2-nv > *{ grid-area:auto !important; }
  .tq2-khung .tq2-ten{ font-size:16px; }
}

/* =====================================================================================
 * TAB DỰ BÁO DÒNG TIỀN & NGUY CƠ NGHỈ HỌC — theo ảnh mẫu thầy 03/10/2026. JS: js/du-bao.js.
 * Bố cục cho mọi giao diện; màu cho giao diện Siêu anh hùng.
 * ===================================================================================== */
.db2-dau{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.db2-cap-nhat{ display:flex; align-items:center; gap:8px; font-size:13.5px; min-width:0; }
.db2-cong-cu{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.db2-han{ display:inline-flex; align-items:center; gap:8px; padding:5px 6px 5px 14px; border-radius:12px; font-size:14px; font-weight:700; margin:0; }
.db2-han .form-select{ width:auto; min-width:118px; }
.db2-lam-moi{ font-weight:800 !important; padding:9px 18px !important; border-radius:12px !important; }
.db2-canh-bao{ display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:12px; font-size:13.5px; margin-bottom:14px; }
.db2-tai{ grid-column:1 / -1; }

/* 6 thẻ */
.db2-the-luoi{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px; margin-bottom:16px; }
.db2-the{ display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto; gap:6px 12px; padding:14px; border-radius:16px; border:1px solid transparent;
  animation:db2Len .5s cubic-bezier(.22,1,.36,1) both; min-width:0; }
.db2-the:nth-child(2){ animation-delay:.04s; } .db2-the:nth-child(3){ animation-delay:.08s; } .db2-the:nth-child(4){ animation-delay:.12s; } .db2-the:nth-child(5){ animation-delay:.16s; } .db2-the:nth-child(6){ animation-delay:.2s; }
.db2-the-huy{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:19px; border:2.5px solid #fff; grid-row:1; }
.db2-the-noi{ display:flex; flex-direction:column; min-width:0; }
.db2-the-nhan{ font-size:13.5px; font-weight:700; line-height:1.25; }
.db2-the-so{ font-size:28px; font-weight:900; line-height:1.1; letter-spacing:-.02em; white-space:nowrap; }
.db2-the-so small{ font-size:14px; font-weight:800; }
.db2-the-dv{ font-size:12px; }
.db2-the-phu{ grid-column:1 / -1; font-size:12.5px; font-weight:600; text-align:center; padding-top:6px; }
.db2-the-phu i{ font-size:11px; }
@keyframes db2Len{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* Khung biểu đồ */
.db2-hang{ display:grid; gap:16px; margin-bottom:16px; align-items:stretch; }
.db2-hang-1{ grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); }
.db2-hang-2{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); }
.db2-khung{ padding:16px 18px !important; min-width:0; }
.db2-khung-dau{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.db2-icon{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:16px; color:#fff; }
.db2-ten{ font-size:17px; font-weight:800; flex:1; min-width:180px; }
.db2-ten small{ font-size:13px; font-weight:600; }
.db2-chu-giai{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.db2-chu-giai .cham + *{ margin-right:8px; }
.cham{ display:inline-block; width:11px; height:11px; border-radius:50%; flex:none; }
.db2-don-vi{ font-size:12.5px; margin:2px 0 4px; }
.db2-bieu-do{ position:relative; height:250px; }
.db2-bieu-do.cao{ height:270px; }
.db2-loc{ width:auto !important; }

/* Vòng đóng học phí */
.db2-tron{ display:grid; grid-template-columns:minmax(170px, 1fr) minmax(0, 1.1fr); gap:16px; align-items:center; min-height:270px; }
.db2-tron-bd{ position:relative; height:230px; }
.db2-tron-giua{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; text-align:center; }
.db2-tron-giua b{ font-size:30px; font-weight:900; line-height:1; }
.db2-tron-giua span{ font-size:12.5px; font-weight:600; margin-top:4px; }
.db2-cg-dong{ display:grid; grid-template-columns:14px minmax(0, 1fr) auto auto; align-items:center; gap:8px; padding:7px 0; font-size:14px; }
.db2-cg-dong b{ font-weight:800; }
.db2-cg-dong small{ font-size:12.5px; }
.db2-ghi{ display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.4; padding:10px 12px; border-radius:12px; margin-top:10px; }

/* Bảng chểnh mảng */
.db2-rui-ro{ max-height:520px; overflow:auto; }
.db2-bang{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.db2-bang th{ position:sticky; top:0; z-index:1; padding:9px 10px; font-size:12.5px; font-weight:700; text-align:left; white-space:nowrap; }
.db2-bang td{ padding:9px 10px; vertical-align:middle; }
.db2-hs{ display:flex; align-items:center; gap:10px; min-width:140px; }
.db2-hs > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.db2-hs small{ font-size:11.5px; }
.db2-av{ width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; }
.db2-muc{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:800; white-space:nowrap; }
.db2-dau-hieu{ font-size:12.5px; line-height:1.4; min-width:160px; }
.db2-nut{ display:inline-flex; gap:6px; align-items:center; justify-content:flex-end; }
.db2-nut-tron{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:13px; cursor:pointer; text-decoration:none; }
.db2-xem{ padding:6px 12px; border-radius:10px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.db2-trong{ padding:16px; text-align:center; font-size:14px; }

/* Cách tính */
.db2-cach-tinh{ padding:0 !important; margin-bottom:16px; font-size:13.5px; }
.db2-cach-tinh summary{ display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; list-style:none; }
.db2-cach-tinh summary::-webkit-details-marker{ display:none; }
.db2-cach-tinh summary b{ font-size:16px; flex:1; }
.db2-mui{ transition:transform .35s cubic-bezier(.22,1,.36,1); }
.db2-cach-tinh[open] .db2-mui{ transform:rotate(180deg); }
.db2-cach-tinh ul{ padding:0 22px 16px 40px; margin:0 !important; line-height:1.55; }

@media (max-width:1699.98px){ .db2-the-luoi{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .db2-the-phu{ text-align:left; } }
@media (max-width:1199.98px){ .db2-hang-1, .db2-hang-2{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:767.98px){
  .db2-the-luoi{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .db2-the{ padding:12px; }
  .db2-the-huy{ width:40px; height:40px; font-size:16px; }
  .db2-the-so{ font-size:22px; }
  .db2-tron{ grid-template-columns:minmax(0, 1fr); }
  .db2-bang thead{ display:none; }
  .db2-bang, .db2-bang tbody, .db2-bang tr, .db2-bang td{ display:block; width:100%; }
  .db2-bang tr{ padding:10px 0; }
  .db2-bang td{ padding:3px 0; text-align:left !important; }
  .db2-nut{ justify-content:flex-start; }
}

/* ───────── Màu ───────── */
html.gd-sieu-anh-hung .db2-cap-nhat{ color:#7a6a60; } html.gd-sieu-anh-hung .db2-cap-nhat b{ color:#3b2a20; }
html.gd-sieu-anh-hung .db2-han{ background:#fff; border:1px solid rgba(125,35,20,.14); color:#3b2a20; }
html.gd-sieu-anh-hung .db2-han i{ color:#8a7b70; }
html.gd-sieu-anh-hung .db2-lam-moi{ background:linear-gradient(135deg, #9e0b1b, #c8102e) !important; border:0 !important; color:#fff !important; box-shadow:0 10px 18px -12px rgba(160,10,30,.9); }
html.gd-sieu-anh-hung .db2-canh-bao{ background:#fff7e6; border:1px solid #f1d590; color:#7a5200; }
html.gd-sieu-anh-hung .db2-the{ box-shadow:0 14px 26px -24px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .db2-the-huy{ box-shadow:0 0 0 1.5px rgba(214,160,40,.85), 0 6px 12px -6px rgba(0,0,0,.5); }
html.gd-sieu-anh-hung .db2-the-nhan{ color:#2a1810; } html.gd-sieu-anh-hung .db2-the-dv{ color:#8a7b70; }
html.gd-sieu-anh-hung .db2-the-phu{ color:#5b4a41; border-top:1px dashed rgba(125,35,20,.14); }
html.gd-sieu-anh-hung .db2-the-phu.tot{ color:#1e7a46; } html.gd-sieu-anh-hung .db2-the-phu.xau{ color:#c53030; }
html.gd-sieu-anh-hung .db2-the-xanh{ background:linear-gradient(135deg, #ecf8ef, #f7fcf8); border-color:#c6e8d1; } html.gd-sieu-anh-hung .db2-the-xanh .db2-the-huy{ background:radial-gradient(circle at 35% 30%, #4fcf86, #15803d 72%); } html.gd-sieu-anh-hung .db2-the-xanh .db2-the-so{ color:#166c3a; }
html.gd-sieu-anh-hung .db2-the-vang{ background:linear-gradient(135deg, #fff7df, #fffbef); border-color:#f1dda0; } html.gd-sieu-anh-hung .db2-the-vang .db2-the-huy{ background:radial-gradient(circle at 35% 30%, #ffd75e, #d98b0b 72%); } html.gd-sieu-anh-hung .db2-the-vang .db2-the-so{ color:#a8650a; }
html.gd-sieu-anh-hung .db2-the-lam{ background:linear-gradient(135deg, #eaf3ff, #f6faff); border-color:#c9def6; } html.gd-sieu-anh-hung .db2-the-lam .db2-the-huy{ background:radial-gradient(circle at 35% 30%, #6fa8ff, #1d4fbf 72%); } html.gd-sieu-anh-hung .db2-the-lam .db2-the-so{ color:#1d4f9a; }
html.gd-sieu-anh-hung .db2-the-xanh2{ background:linear-gradient(135deg, #ecf8ef, #f7fcf8); border-color:#c6e8d1; } html.gd-sieu-anh-hung .db2-the-xanh2 .db2-the-huy{ background:radial-gradient(circle at 35% 30%, #4fcf86, #15803d 72%); } html.gd-sieu-anh-hung .db2-the-xanh2 .db2-the-so{ color:#166c3a; }
html.gd-sieu-anh-hung .db2-the-do{ background:linear-gradient(135deg, #ffeef0, #fff8f8); border-color:#f4c8cd; } html.gd-sieu-anh-hung .db2-the-do .db2-the-huy{ background:radial-gradient(circle at 35% 30%, #ff6b5b, #b10e25 72%); } html.gd-sieu-anh-hung .db2-the-do .db2-the-so{ color:#c8102e; }
html.gd-sieu-anh-hung .db2-the-tim{ background:linear-gradient(135deg, #f4efff, #faf8ff); border-color:#dccff6; } html.gd-sieu-anh-hung .db2-the-tim .db2-the-huy{ background:radial-gradient(circle at 35% 30%, #b98bff, #6a35c7 72%); } html.gd-sieu-anh-hung .db2-the-tim .db2-the-so{ color:#5b2da0; }
html.gd-sieu-anh-hung .db2-icon.do{ background:linear-gradient(135deg, #e0213a, #a50d1f); } html.gd-sieu-anh-hung .db2-icon.vang{ background:linear-gradient(135deg, #ffcf4a, #d98b0b); color:#4a2a00; }
html.gd-sieu-anh-hung .db2-ten{ color:#1b120c; } html.gd-sieu-anh-hung .db2-ten small{ color:#8a7b70; }
html.gd-sieu-anh-hung .db2-chu-giai, html.gd-sieu-anh-hung .db2-don-vi{ color:#7a6a60; }
html.gd-sieu-anh-hung .cham.do{ background:#d81a32; } html.gd-sieu-anh-hung .cham.xanh{ background:#1e8a4c; } html.gd-sieu-anh-hung .cham.vang{ background:#f2b316; }
html.gd-sieu-anh-hung .cham.vang-vien{ background:rgba(242,179,22,.22); border:2px dashed #f2b316; border-radius:3px; }
html.gd-sieu-anh-hung .db2-tron-giua b{ color:#1b120c; } html.gd-sieu-anh-hung .db2-tron-giua span{ color:#5b4a41; }
html.gd-sieu-anh-hung .db2-cg-dong{ color:#3b2a20; border-bottom:1px dashed rgba(125,35,20,.1); } html.gd-sieu-anh-hung .db2-cg-dong small{ color:#8a7b70; }
html.gd-sieu-anh-hung .db2-ghi{ background:#fff7e6; color:#7a5200; border:1px solid #f3dfa8; }
html.gd-sieu-anh-hung .db2-bang th{ background:#fbf3e8; color:#4a372d; border-bottom:1px solid rgba(125,35,20,.12); }
html.gd-sieu-anh-hung .db2-bang td{ border-bottom:1px solid rgba(125,35,20,.07); color:#21160f; }
html.gd-sieu-anh-hung .db2-bang tbody tr:hover td{ background:#fffaf2; }
html.gd-sieu-anh-hung .db2-hs small{ color:#8a7b70; }
html.gd-sieu-anh-hung .db2-av.mau-0{ background:#ffe3e6; color:#c8102e; } html.gd-sieu-anh-hung .db2-av.mau-1{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung .db2-av.mau-2{ background:#e4f6ea; color:#1e7a46; } html.gd-sieu-anh-hung .db2-av.mau-3{ background:#efe6ff; color:#6a35c7; } html.gd-sieu-anh-hung .db2-av.mau-4{ background:#fff0d6; color:#a86b00; }
html.gd-sieu-anh-hung .db2-muc.cao{ background:#ffe3e6; color:#c8102e; } html.gd-sieu-anh-hung .db2-muc.vua{ background:#fff3cf; color:#a86b00; }
html.gd-sieu-anh-hung .db2-dau-hieu{ color:#5b4a41; }
html.gd-sieu-anh-hung .db2-nut-tron{ border:1px solid rgba(125,35,20,.16); background:#fff; color:#5b4a41; }
html.gd-sieu-anh-hung .db2-nut-tron:hover{ background:#fff3f3; color:#c8102e; }
html.gd-sieu-anh-hung .db2-xem{ border:1px solid #f1c7c7; background:#fff; color:#c8102e; }
html.gd-sieu-anh-hung .db2-xem:hover{ background:#fff3f3; }
html.gd-sieu-anh-hung .db2-trong{ color:#7a6a60; }
html.gd-sieu-anh-hung .db2-cach-tinh summary b{ color:#1b120c; } html.gd-sieu-anh-hung .db2-cach-tinh ul{ color:#3b2a20; }
@media (prefers-reduced-motion:reduce){ .db2-the, .db2-mui{ animation:none !important; transition:none !important; } }
.db2-lop{ white-space:nowrap; font-weight:600; }
.db2-bang td:last-child{ white-space:nowrap; }
html.gd-sieu-anh-hung .db2-xem-tron{ border-color:#f1c7c7; color:#c8102e; }

/* =====================================================================================
 * TAB HÔM NAY — theo ảnh mẫu thầy 03/10/2026: 3 thẻ số liệu, trái: học sinh cần bổ trợ chưa có lịch + bổ trợ đã hẹn,
 * phải: ca học hôm nay (3 nút) + việc còn tồn gom nhóm. JS: js/hom-nay.js. Bố cục mọi giao diện; màu cho Siêu anh hùng.
 * ===================================================================================== */
#hnKhung{ max-width:none; }
.hn2-the-luoi{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) auto; gap:14px; margin-bottom:16px; align-items:stretch; }
.hn2-the{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:18px; border:1px solid transparent; font:inherit; text-align:left; cursor:pointer;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; animation:hn2Len .5s cubic-bezier(.22,1,.36,1) both; min-width:0; }
.hn2-the:nth-child(2){ animation-delay:.05s; } .hn2-the:nth-child(3){ animation-delay:.1s; }
.hn2-the:hover{ transform:translateY(-3px); }
.hn2-the-huy{ width:58px; height:58px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:23px; border:3px solid #fff; }
.hn2-the-noi{ display:flex; flex-direction:column; min-width:0; }
.hn2-the-noi b{ font-size:32px; font-weight:900; line-height:1.05; }
.hn2-the-noi span{ font-size:16px; font-weight:800; }
.hn2-the-noi small{ font-size:13px; }
.hn2-tai-lai{ width:44px; border-radius:14px; display:grid; place-items:center; cursor:pointer; font-size:16px; }
@keyframes hn2Len{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.hn2-luoi{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:16px; align-items:start; }
.hn2-cot{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.hn2-khung{ padding:16px 18px; border-radius:20px; scroll-margin-top:calc(var(--head, 88px) + 12px); }
.hn2-khung-dau{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.hn2-khung-dau h2{ font-size:18px !important; font-weight:800 !important; margin:0 !important; flex:1; min-width:0; text-transform:none !important; letter-spacing:0 !important; }
.hn2-khung-dau h2 em{ font-style:normal; font-size:22px; }
.hn2-huy{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:16px; border:2px solid #fff; }
.hn2-xem{ border:0; background:none; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.hn2-trong{ display:flex; align-items:center; gap:8px; padding:14px; border-radius:14px; font-size:14px; }
.hn2-ghi{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; padding:10px 12px; border-radius:12px; margin-top:10px; }

/* Học sinh cần bổ trợ */
.hn2-bt{ padding:14px; border-radius:16px; margin-bottom:10px; }
.hn2-bt.an{ display:none; }
.hn2-bt-dau{ display:grid; grid-template-columns:62px minmax(0, 1fr) minmax(0, 1fr); gap:14px; align-items:center; }
.hn2-av{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:20px; flex:none; }
.hn2-bt-ten{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.hn2-bt-ten > div{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hn2-bt-ten b{ font-size:17px; }
.hn2-bt-ten small{ font-size:13px; }
.hn2-bt-ten small i{ font-style:normal; margin:0 3px; opacity:.5; }
.hn2-on i{ margin-right:4px; }
.hn2-tem{ font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; }
.hn2-ly{ list-style:none; margin:0; padding:10px 12px; border-radius:12px; display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:700; }
.hn2-ly li{ display:flex; gap:8px; align-items:flex-start; }
.hn2-ly i{ width:16px; text-align:center; margin-top:2px; }
.hn2-bt-nut{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:12px; }
.hn2-nut{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 12px; border-radius:12px; font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  text-decoration:none; white-space:nowrap; transition:transform .25s, box-shadow .25s, background-color .25s; min-width:0; }
.hn2-nut:hover{ transform:translateY(-1px); }
.hn2-nut.da{ cursor:default; transform:none !important; }

/* Bổ trợ đã hẹn */
.hn2-hen{ display:grid; grid-template-columns:46px minmax(110px, auto) minmax(0, 1fr) auto 30px; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; margin-bottom:8px; }
.hn2-hen .hn2-av{ width:46px; height:46px; font-size:17px; }
.hn2-hen-ten{ display:flex; flex-direction:column; }
.hn2-hen-ten b{ font-size:14.5px; } .hn2-hen-ten small{ font-size:12px; }
.hn2-hen-hs{ display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.hn2-hen-nut{ grid-column:2 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }   /* hàng riêng dưới danh sách em: trạng thái ảnh + nút Kế hoạch bổ trợ */
.hn2-hen-nut .hn2-nut{ font-size:13px; padding:7px 10px; }
.hn2-chip{ font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.hn2-tt{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:6px 10px; border-radius:10px; white-space:nowrap; border:0; font-family:inherit; }
.hn2-tt.nut{ cursor:pointer; }
.hn2-mui{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; cursor:pointer; border:0; background:none; }

/* Ca học hôm nay */
.hn2-ca{ padding:12px 14px; border-radius:16px; margin-bottom:10px; }
.hn2-ca-dau{ display:grid; grid-template-columns:14px auto minmax(0, 1fr) auto; gap:12px; align-items:center; }
.hn2-cham{ width:13px; height:13px; border-radius:50%; }
.hn2-ca-gio{ font-size:16px; font-weight:800; white-space:nowrap; }
.hn2-ca-ten{ display:flex; flex-direction:column; min-width:0; }
.hn2-ca-ten b{ font-size:15px; } .hn2-ca-ten small{ font-size:12.5px; }
.hn2-ca-nut{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:10px; }
.hn2-ca-nut .hn2-nut{ font-size:13px; padding:8px 10px; }

/* Việc còn tồn */
.hn2-nhom{ border-radius:14px; margin-bottom:8px; overflow:hidden; }
.hn2-nhom-dau{ width:100%; display:grid; grid-template-columns:44px minmax(0, 1fr) auto 16px; align-items:center; gap:12px; padding:10px 12px; border:0; background:none; font:inherit; text-align:left; cursor:pointer; }
.hn2-nhom-icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:18px; }
.hn2-nhom-chu{ display:flex; flex-direction:column; min-width:0; }
.hn2-nhom-chu b{ font-size:15px; } .hn2-nhom-chu small{ font-size:12.5px; }
.hn2-so{ min-width:38px; height:30px; padding:0 10px; border-radius:999px; display:grid; place-items:center; font-weight:900; font-size:15px; }
.hn2-nhom-mui{ font-size:12px; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.hn2-nhom.mo .hn2-nhom-mui{ transform:rotate(180deg); }
.hn2-nhom-ds{ display:none; padding:0 10px 10px; }
.hn2-nhom.mo .hn2-nhom-ds{ display:flex; flex-direction:column; gap:6px; animation:hn2Len .35s cubic-bezier(.22,1,.36,1) both; }
.hn2-muc{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:10px; font:inherit; text-align:left; cursor:pointer; }
.hn2-muc span{ display:flex; flex-direction:column; min-width:0; }
.hn2-muc b{ font-size:14px; } .hn2-muc small{ font-size:12px; }

@media (max-width:1299.98px){ .hn2-bt-dau{ grid-template-columns:58px minmax(0, 1fr); } .hn2-ly{ grid-column:1 / -1; } }
@media (max-width:1099.98px){ .hn2-luoi{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:767.98px){
  .hn2-the-luoi{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  .hn2-the{ flex-direction:column; align-items:flex-start; padding:12px; gap:8px; }
  .hn2-the-huy{ width:40px; height:40px; font-size:16px; }
  .hn2-the-noi b{ font-size:24px; } .hn2-the-noi span{ font-size:13px; } .hn2-the-noi small{ font-size:11px; }
  .hn2-tai-lai{ grid-column:1 / -1; width:auto; height:38px; }
  .hn2-khung{ padding:14px 12px; }
  .hn2-bt-nut, .hn2-ca-nut{ grid-template-columns:minmax(0, 1fr); }
  .hn2-hen{ grid-template-columns:46px minmax(0, 1fr) 30px; }
  .hn2-hen-hs, .hn2-hen > .hn2-tt, .hn2-hen > .hn2-hen-nut{ grid-column:1 / -1; }
  .hn2-hen > .hn2-tt{ justify-self:start; }
  .hn2-ca-dau{ grid-template-columns:14px minmax(0, 1fr) auto; }
  .hn2-ca-ten{ grid-column:2 / -1; }
}

/* ───────── Màu ───────── */
html.gd-sieu-anh-hung .hn2-the{ box-shadow:0 14px 28px -24px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .hn2-the:hover{ box-shadow:0 20px 34px -22px rgba(90,25,10,.65); }
html.gd-sieu-anh-hung .hn2-the-huy{ box-shadow:0 0 0 2px rgba(214,160,40,.85), 0 8px 16px -8px rgba(0,0,0,.55); }
html.gd-sieu-anh-hung .hn2-the.lam{ background:linear-gradient(135deg, #e7f1ff, #f4f8ff); border-color:#c6dbf6; } html.gd-sieu-anh-hung .hn2-the.lam .hn2-the-huy{ background:radial-gradient(circle at 35% 30%, #6fa8ff, #1d4fbf 72%); } html.gd-sieu-anh-hung .hn2-the.lam b{ color:#16336b; }
html.gd-sieu-anh-hung .hn2-the.do{ background:linear-gradient(135deg, #ffecee, #fff7f7); border-color:#f4c8cd; } html.gd-sieu-anh-hung .hn2-the.do .hn2-the-huy{ background:radial-gradient(circle at 35% 30%, #ff6b5b, #b10e25 72%); } html.gd-sieu-anh-hung .hn2-the.do b{ color:#c8102e; }
html.gd-sieu-anh-hung .hn2-the.vang{ background:linear-gradient(135deg, #fff6dc, #fffbef); border-color:#f1dda0; } html.gd-sieu-anh-hung .hn2-the.vang .hn2-the-huy{ background:radial-gradient(circle at 35% 30%, #ffe48a, #e39b16 72%); color:#5a3000; } html.gd-sieu-anh-hung .hn2-the.vang b{ color:#8a5200; }
html.gd-sieu-anh-hung .hn2-the-noi span{ color:#1b120c; } html.gd-sieu-anh-hung .hn2-the-noi small{ color:#7a6a60; }
html.gd-sieu-anh-hung .hn2-tai-lai{ background:#fff; border:1px solid rgba(125,35,20,.14); color:#5b4a41; }
html.gd-sieu-anh-hung .hn2-tai-lai:hover{ background:#fff3f3; color:#c8102e; }
html.gd-sieu-anh-hung .hn2-khung{ background:#fffdf9; border:1px solid rgba(125,35,20,.10); box-shadow:0 18px 40px -34px rgba(90,25,10,.7); }
html.gd-sieu-anh-hung .hn2-khung-dau h2{ color:#1b120c !important; }
html.gd-sieu-anh-hung .hn2-khung-dau h2 em{ color:#c8102e; }
html.gd-sieu-anh-hung .hn2-huy{ box-shadow:0 0 0 1.5px rgba(214,160,40,.85), 0 6px 12px -6px rgba(0,0,0,.5); }
html.gd-sieu-anh-hung .hn2-huy.do{ background:radial-gradient(circle at 35% 30%, #ff6b5b, #b10e25 72%); } html.gd-sieu-anh-hung .hn2-huy.vang{ background:radial-gradient(circle at 35% 30%, #ffe48a, #e39b16 72%); color:#5a3000; }
html.gd-sieu-anh-hung .hn2-xem{ color:#c8102e; }
html.gd-sieu-anh-hung .hn2-trong{ background:#f3faf5; color:#1e7a46; }
html.gd-sieu-anh-hung .hn2-ghi{ background:#fff7e6; color:#7a5200; border:1px solid #f3dfa8; }
html.gd-sieu-anh-hung .hn2-bt{ background:#fff; border:1px solid rgba(125,35,20,.10); box-shadow:0 10px 22px -20px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .hn2-av.mau-0{ background:#ffe0e5; color:#c8102e; } html.gd-sieu-anh-hung .hn2-av.mau-1{ background:#dfeeff; color:#1d5fd0; }
html.gd-sieu-anh-hung .hn2-av.mau-2{ background:#e2f6e8; color:#1e7a46; } html.gd-sieu-anh-hung .hn2-av.mau-3{ background:#ece3ff; color:#6a35c7; } html.gd-sieu-anh-hung .hn2-av.mau-4{ background:#fff0d2; color:#a86b00; }
html.gd-sieu-anh-hung .hn2-bt-ten b{ color:#1b120c; } html.gd-sieu-anh-hung .hn2-bt-ten small{ color:#7a6a60; } html.gd-sieu-anh-hung .hn2-on{ color:#3b2a20 !important; }
html.gd-sieu-anh-hung .hn2-tem.do{ background:#ffe3e6; color:#c8102e; }
html.gd-sieu-anh-hung .hn2-ly{ background:#fff1f1; color:#c8102e; }
html.gd-sieu-anh-hung .hn2-nut{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; }
html.gd-sieu-anh-hung .hn2-nut:hover{ box-shadow:0 8px 16px -12px rgba(90,25,10,.7); }
html.gd-sieu-anh-hung .hn2-nut.vang{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019); border-color:#c98a12; color:#2a1606; }
html.gd-sieu-anh-hung .hn2-nut.xanh{ background:linear-gradient(135deg, #22a35a, #15803d); border-color:#11692f; color:#fff; }
html.gd-sieu-anh-hung .hn2-nut.da{ background:#e9f7ee; border-color:#bfe6cd; color:#1e7a46; }
html.gd-sieu-anh-hung .hn2-hen{ background:#fff; border:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .hn2-hen-ten b{ color:#1b120c; } html.gd-sieu-anh-hung .hn2-hen-ten small{ color:#8a7b70; }
html.gd-sieu-anh-hung .hn2-chip{ background:#f5efe8; color:#5b4a41; } html.gd-sieu-anh-hung .hn2-chip.xanh{ background:#e2f6e8; color:#1e7a46; } html.gd-sieu-anh-hung .hn2-chip.do{ background:#ffe3e6; color:#c8102e; }
html.gd-sieu-anh-hung .hn2-tt{ background:#f5efe8; color:#5b4a41; }
html.gd-sieu-anh-hung .hn2-tt.xong{ background:#e2f6e8; color:#1e7a46; }
html.gd-sieu-anh-hung .hn2-tt.chua{ background:#ffe8eb; color:#c8102e; }
html.gd-sieu-anh-hung .hn2-mui{ color:#8a7b70; } html.gd-sieu-anh-hung .hn2-mui:hover{ background:#fff3f3; color:#c8102e; }
html.gd-sieu-anh-hung .hn2-ca{ background:#fff; border:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .hn2-cham.do{ background:#e0213a; } html.gd-sieu-anh-hung .hn2-cham.lam{ background:#1d5fd0; } html.gd-sieu-anh-hung .hn2-cham.tim{ background:#7b3fe4; } html.gd-sieu-anh-hung .hn2-cham.xanh{ background:#1e8a4c; }
html.gd-sieu-anh-hung .hn2-ca-gio{ color:#1b120c; } html.gd-sieu-anh-hung .hn2-ca-ten b{ color:#1b120c; } html.gd-sieu-anh-hung .hn2-ca-ten small{ color:#8a7b70; }
html.gd-sieu-anh-hung .hn2-nhom{ background:#fff; border:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .hn2-nhom.mo{ border-color:#f0c56b; }
html.gd-sieu-anh-hung .hn2-nhom-icon.lam{ background:#e3efff; color:#1d5fd0; } html.gd-sieu-anh-hung .hn2-nhom-icon.do{ background:#ffe3e6; color:#c8102e; } html.gd-sieu-anh-hung .hn2-nhom-icon.xanh{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung .hn2-nhom-chu b{ color:#1b120c; } html.gd-sieu-anh-hung .hn2-nhom-chu small{ color:#8a7b70; }
html.gd-sieu-anh-hung .hn2-so.lam{ background:#ffe3e6; color:#c8102e; } html.gd-sieu-anh-hung .hn2-so.do{ background:#fff0cc; color:#a86b00; } html.gd-sieu-anh-hung .hn2-so.xanh{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung .hn2-nhom-mui{ color:#8a7b70; }
html.gd-sieu-anh-hung .hn2-muc{ background:#fffaf4; border:1px solid rgba(125,35,20,.08); color:#1b120c; }
html.gd-sieu-anh-hung .hn2-muc small{ color:#8a7b70; } html.gd-sieu-anh-hung .hn2-muc:hover{ background:#fff3e6; }
@media (prefers-reduced-motion:reduce){ .hn2-the, .hn2-nut, .hn2-nhom-mui, .hn2-nhom-ds{ animation:none !important; transition:none !important; } }

/* Em vắng liên tiếp + em nghỉ tháng này (xoá khỏi nhóm Zalo) — thầy chốt 06/10/2026 */
.hn2-nghi{ display:grid; grid-template-columns:46px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; margin-bottom:8px; }
.hn2-nghi .hn2-av{ width:46px; height:46px; font-size:17px; }
.hn2-nghi-ten{ display:flex; flex-direction:column; min-width:0; }
.hn2-nghi-ten b{ font-size:14.5px; } .hn2-nghi-ten small{ font-size:12px; } .hn2-nghi-ten small i{ font-style:normal; margin:0 3px; opacity:.5; }
.hn2-nghi-chip{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.hn2-lh .hn2-bt-nut{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:640px){ .hn2-nghi{ grid-template-columns:46px minmax(0, 1fr); } .hn2-nghi-chip{ grid-column:1 / -1; justify-content:flex-start; } }
html.gd-sieu-anh-hung .hn2-nghi{ background:#fff; border:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .hn2-nghi-ten b{ color:#1b120c; } html.gd-sieu-anh-hung .hn2-nghi-ten small{ color:#7a6a60; }
html.gd-sieu-anh-hung .hn2-chip.do{ background:#ffe3e6; color:#c8102e; }
html.gd-sieu-anh-hung .hn2-tem.cam{ background:#fff0cc; color:#a86b00; }
html.gd-sieu-anh-hung .hn2-tem.vang{ background:#fff3d4; color:#9a5a00; }
html.gd-sieu-anh-hung .hn2-ly.cam{ background:#fff3dc; color:#a86b00; }
html.gd-sieu-anh-hung .hn2-ly.vang{ background:#fff8e1; color:#8a5a00; }

/* Dấu ✓ "đã cảnh báo phụ huynh" + số lần + SĐT phụ huynh trong các danh sách cảnh báo (js/canh-bao-ph.js, 15/10/2026).
   Dùng chung cho Tổng quan · Chỉ huy trợ giảng · Hôm nay · Bảng điểm · phiếu cảnh báo. */
.cbph-sdt{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.cbph-sdt a{font-weight:700;color:inherit;text-decoration:none;border-bottom:1px dotted currentColor;}
.cbph-sdt a:hover{text-decoration:underline;}
.cbph-copy{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid rgba(125,8,20,.25);border-radius:6px;background:#fff;color:#7d0814;font-size:11px;line-height:1;cursor:pointer;}
.cbph-copy:hover,.cbph-copy:focus-visible{background:#fdf0ee;}
.cbph-copy.xong{background:#e3f4e8;border-color:#2f8f4e;color:#2f8f4e;}

.cbph-hang{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px;}
.cbph{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;}
.cbph[hidden]{display:none!important;}
.cbph-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;}
.cbph-chip small{font-size:11.5px;font-weight:500;opacity:.85;}
.cbph-chip.chua{background:#f3f1ec;color:#6d665a;border:1px solid #e7e0d0;}
.cbph-chip.da{background:#e3f4e8;color:#1f6b3a;border:1px solid #b8dcc4;cursor:help;}
.cbph-chip.da.lap{background:#fff1da;color:#8a5200;border-color:#f0cf93;}   /* từ 2 lần mà em vẫn trong danh sách → nhắc xem có hiệu quả không */
.cbph-nut,.cbph-huy{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border:1px solid rgba(125,8,20,.3);border-radius:999px;background:#fff;color:#7d0814;font-size:11.5px;font-weight:600;line-height:1.6;cursor:pointer;}
.cbph-huy{padding:1px 6px;color:#6d665a;border-color:#d9d2c3;}
.cbph-nut:hover,.cbph-huy:hover,.cbph-nut:focus-visible,.cbph-huy:focus-visible{background:#fdf0ee;}
.cbph-nut:disabled,.cbph-huy:disabled{opacity:.55;cursor:wait;}

/* dải liên hệ phụ huynh dưới tiêu đề phiếu cảnh báo */
.cbph-lienhe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid rgba(0,0,0,.08);font-size:13px;background:rgba(255,255,255,.03);}
.cbph-lienhe:empty{display:none;}
.cbph-lienhe .cbph-sdt a{color:inherit;}
.cbph-lienhe .cbph-copy{background:transparent;color:inherit;border-color:currentColor;opacity:.85;}

/* SĐT phụ huynh dưới tên em ở ca bổ trợ · Khiên · thẻ phạt (htmlPh) */
.cbph-ph{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#6d665a;white-space:nowrap;}
.cbph-ph .cbph-sdt a{color:#7d0814;}
.dcnv-ph,.kh-phu .cbph-ph,.cbph-viec{display:block;margin-top:2px;}
.cbph-ca-ph{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 2px;font-size:12px;}
.cbph-ca-em{display:inline-flex;align-items:center;gap:5px;}
.cbph-ca-em b{font-weight:600;color:inherit;}

/* Ô tích "Đã liên hệ được Zalo phụ huynh" (js/zalo-ph.js, 18/10/2026): Danh sách học sinh · khung Vắng & đi muộn của Điểm danh. Đỏ–vàng, mềm. */
.zph{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:3px 0 0;padding:2px 10px 2px 7px;border-radius:999px;border:1px solid #e7e0d0;background:#f6f2ea;color:#6d665a;font-size:12px;font-weight:700;line-height:1.5;cursor:pointer;user-select:none;max-width:100%;}
.zph:hover{border-color:#e0b04e;background:#fff7e3;}
.zph.da{background:#e3f4e8;border-color:#b8dcc4;color:#1f6b3a;}
.zph.da:hover{border-color:#8fc9a3;background:#d9f0e0;}
.zph.chi-xem{cursor:default;}
.zph.chi-xem:hover{border-color:#e7e0d0;background:#f6f2ea;}
.zph.da.chi-xem:hover{border-color:#b8dcc4;background:#e3f4e8;}
.zph .zph-o{width:15px;height:15px;margin:0;accent-color:#c8102e;cursor:inherit;flex:none;}
.zph.da .zph-o{accent-color:#2f8f4e;}
.zph .zph-o:disabled{opacity:.7;}
.zph small{font-size:11px;font-weight:600;opacity:.85;white-space:nowrap;}
.zph-chu{white-space:nowrap;}

/* trong bảng Danh sách học sinh: nằm dưới SĐT phụ huynh */
.hs2-zalo{display:block;}

/* khung Vắng & đi muộn: dòng riêng dưới tên */
.dd-vm-ten .zph{margin-top:4px;align-self:flex-start;}

/* thẻ số thứ 5 "Chưa liên hệ Zalo PH" ở đầu Danh sách học sinh: lưới 5 cột trên màn rộng, gọn hơn 4 thẻ */
@media (min-width:1200px){
  .nvs-the-luoi.co-zalo{grid-template-columns:repeat(5, minmax(0, 1fr));gap:10px;}
  .nvs-the-luoi.co-zalo .nvs-the{padding:14px 12px;gap:10px;}
  .nvs-the-luoi.co-zalo .nvs-the-huy{width:48px;height:48px;font-size:20px;}
  .nvs-the-luoi.co-zalo .nvs-the-chu b{font-size:30px;}
  .nvs-the-luoi.co-zalo .nvs-the-chu > span{font-size:15px;}
}

/* Việc thầy giao cho trợ giảng (js/viec-giao.js) */
.vg-the{ margin:0 0 14px; padding:14px 16px; border-radius:16px; background:#fff8e6; border:1.5px solid #f0d58a; }
.vg-the.gap{ background:#fff1ee; border-color:#f0a9a0; }
.vg-the.qua{ background:#ffe3e0; border-color:#e0554a; }
.vg-the.xong{ background:#eefaf0; border-color:#9bd3a6; }
.vg-dau{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.vg-dau > i{ font-size:1.4rem; color:#8a5a00; }
.vg-the.gap .vg-dau > i, .vg-the.qua .vg-dau > i{ color:#b3261e; }
.vg-the.xong .vg-dau > i{ color:#2e7d32; }
.vg-dau > div{ flex:1 1 220px; display:flex; flex-direction:column; }
.vg-dau small{ color:#6f625a; }
.vg-nut{ border:0; border-radius:999px; padding:7px 14px; background:#7d2314; color:#fff; font-weight:600; }
.vg-nd{ margin:8px 0 6px; color:#5c4f48; font-size:.92rem; }
.vg-ds{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px; }
.vg-khoi{ display:flex; flex-wrap:wrap; gap:4px 16px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.7); }
.vg-khoi.xong{ opacity:.8; }
.vg-tg{ color:#6f625a; }
.vg-ok{ color:#2e7d32; font-weight:600; }

/* Việc của lớp tôi (TG1/TG2) + Báo Kế toán (js/viec-lop.js) */
.vl-khung{ margin:0 0 16px; }
.vl-tieu-de h3{ margin:0 0 2px; font-size:1.15rem; color:#7d2314; }
.vl-tieu-de p{ margin:0 0 10px; color:#6f625a; font-size:.9rem; }
.vl-xeplop{ margin:0 0 10px; padding:10px 14px; border-radius:12px; background:#eef4ff; border:1.5px solid #b9cdf5; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.vl-lop{ margin:0 0 12px; padding:12px 14px; border-radius:16px; background:#fff8e6; border:1.5px solid #f0d58a; }
.vl-lop.xong{ background:#eefaf0; border-color:#9bd3a6; }
.vl-dau{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:8px; }
.vl-dau small{ color:#6f625a; flex:1 1 200px; }
.vl-vai{ padding:2px 10px; border-radius:999px; background:#7d2314; color:#fff; font-size:.78rem; font-weight:700; }
.vl-vai.phu{ background:#5b6b8a; }
.vl-tong{ font-weight:700; color:#b3261e; }
.vl-lop.xong .vl-tong{ color:#2e7d32; }
.vl-ds{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.vl-viec{ display:grid; grid-template-columns:minmax(180px,1.2fr) 2fr auto; gap:6px 12px; align-items:center; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.75); }
.vl-ten{ font-weight:600; }
.vl-ten i{ width:1.2em; color:#8a5a00; }
.vl-so{ display:flex; flex-wrap:wrap; gap:6px; }
.vl-chip{ padding:2px 10px; border-radius:999px; background:#f1ece6; font-size:.85rem; color:#5c4f48; }
.vl-chip.vang{ background:#ffe9b8; color:#7a4b00; }
.vl-chip.do{ background:#ffd9d4; color:#9b1c13; }
.vl-chip.xanh{ background:#d8f2dd; color:#1f6b2c; }
.vl-nut{ border:0; border-radius:999px; padding:6px 14px; background:#efe6dd; color:#5a2014; font-weight:600; cursor:pointer; }
.vl-nut.vang{ background:#7d2314; color:#fff; }
.vl-nut.xanh{ background:#2e7d32; color:#fff; }
.vl-bao-dau{ margin:6px 0 10px; }
.vl-bao-tieu{ margin:10px 0 6px; font-size:1rem; color:#7d2314; }
.vl-bao-ds{ list-style:none; margin:0 0 10px; padding:0; display:grid; gap:8px; }
.vl-bao{ padding:10px 12px; border-radius:12px; background:#fff; border:1.5px solid #e6d9c8; }
.vl-bao.cho{ border-color:#f0c35a; background:#fffaf0; }
.vl-bao.da_xu_ly{ opacity:.8; }
.vl-bao.huy{ opacity:.65; }
.vl-bao-tren{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
.vl-tem{ padding:1px 9px; border-radius:999px; font-size:.78rem; font-weight:700; background:#ece5dc; }
.vl-tem.nghi{ background:#ffd9d4; color:#9b1c13; }
.vl-tem.bao_luu{ background:#e6e0ff; color:#3d2a8a; }
.vl-tem.chuyen_online{ background:#d9ecff; color:#134f8a; }
.vl-tem.tt.cho{ background:#ffe9b8; color:#7a4b00; }
.vl-tem.tt.da_xu_ly{ background:#d8f2dd; color:#1f6b2c; }
.vl-bao-giua{ margin:6px 0; color:#4d423b; font-size:.92rem; }
.vl-bao-nut{ display:flex; flex-wrap:wrap; gap:8px; }
.vl-kt{ margin:0 0 14px; padding:12px 14px; border-radius:16px; background:#fff8e6; border:1.5px solid #f0d58a; }
.vl-hop-nen{ position:fixed; inset:0; background:rgba(30,20,15,.5); z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px; }
.vl-hop{ width:min(460px,100%); max-height:92vh; overflow:auto; background:#fff; border-radius:18px; padding:18px; display:grid; gap:10px; }
.vl-hop h3{ margin:0; color:#7d2314; }
.vl-hop-ghi{ margin:0; color:#6f625a; font-size:.88rem; }
.vl-hop label{ display:grid; gap:4px; font-weight:600; font-size:.92rem; }
.vl-hop select,.vl-hop input,.vl-hop textarea{ font:inherit; padding:8px 10px; border:1.5px solid #d9cdbd; border-radius:10px; }
.vl-hop-loi{ padding:8px 10px; border-radius:10px; background:#ffe3e0; color:#9b1c13; }
.vl-hop-nut{ display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:640px){ .vl-viec{ grid-template-columns:1fr; } }

/* Nhập học sinh từ Excel (js/nhap-hs-excel.js) */
.nhx-nen{ position:fixed; inset:0; background:rgba(30,20,15,.55); z-index:2100; display:flex; align-items:center; justify-content:center; padding:16px; }
.nhx-hop{ width:min(980px,100%); max-height:92vh; overflow:auto; background:#fff; border-radius:18px; padding:18px; display:grid; gap:10px; align-content:start; }
.nhx-dau{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.nhx-dau h3{ margin:0; font-size:1.15rem; color:#7d2314; }
.nhx-x{ border:0; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; color:#7d2314; }
.nhx-ghi{ margin:0; color:#4d423b; font-size:.93rem; }
.nhx-xanh{ color:#1f6b2c; } .nhx-do{ color:#b3261e; }
.nhx-nut-hang{ display:flex; flex-wrap:wrap; gap:10px; }
.nhx-nut{ border:0; border-radius:999px; padding:8px 18px; background:#efe6dd; color:#5a2014; font-weight:700; cursor:pointer; }
.nhx-nut.vang{ background:#7d2314; color:#fff; }
.nhx-nut:disabled{ opacity:.45; cursor:not-allowed; }
.nhx-loi{ padding:8px 12px; border-radius:10px; background:#ffe3e0; color:#9b1c13; }
.nhx-cuon{ max-height:52vh; overflow:auto; border:1.5px solid #e6d9c8; border-radius:12px; }
.nhx-bang{ width:100%; border-collapse:collapse; font-size:.88rem; }
.nhx-bang th{ position:sticky; top:0; background:#7d2314; color:#fff; text-align:left; padding:7px 9px; white-space:nowrap; }
.nhx-bang td{ padding:6px 9px; border-top:1px solid #f0e6d8; vertical-align:top; }
.nhx-bang tr.loi td{ background:#fff1ee; }
.nhx-bang tr.trung td{ background:#fffaf0; }
.nhx-tt{ font-weight:800; } .nhx-tt.ok{ color:#2e7d32; } .nhx-tt.trung{ color:#b8860b; } .nhx-tt.loi{ color:#b3261e; }
.nhx-l{ display:block; color:#b3261e; font-weight:600; }
.nhx-c{ display:block; color:#8a5a00; }
.nhx-them{ display:flex; gap:6px; align-items:center; margin-top:4px; font-weight:600; }
.nhx-thanh{ height:12px; border-radius:99px; background:#efe6dd; overflow:hidden; }
.nhx-thanh span{ display:block; height:100%; width:0; background:#2e7d32; transition:width .2s; }
/* Chữ luôn tối trên nền trắng (giao diện tối của trang có luật td/th riêng) */
.nhx-hop{ color:#2b211c; }
.nhx-hop .nhx-bang td{ color:#2b211c !important; border-bottom-color:#f0e6d8 !important; }
.nhx-hop .nhx-bang th{ color:#fff !important; text-transform:none; letter-spacing:0; font-size:.82rem; }
.nhx-hop .nhx-bang tr.loi td{ background:#fff1ee !important; } .nhx-hop .nhx-bang tr.trung td{ background:#fffaf0 !important; }
.nhx-hop .nhx-ghi{ color:#4d423b !important; }

/* Báo cáo học tập gửi phụ huynh (js/bao-cao-hoc-tap.js) */
.bch-nen{ position:fixed; inset:0; background:rgba(30,20,15,.55); z-index:2100; display:flex; align-items:center; justify-content:center; padding:14px; }
.bch-hop{ width:min(640px,100%); max-height:94vh; overflow:auto; background:#fff; border-radius:18px; padding:16px; display:grid; gap:10px; align-content:start; color:#2b211c; }
.bch-dau{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bch-dau h3{ margin:0; font-size:1.1rem; color:#7d2314; }
.bch-x{ border:0; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; color:#7d2314; }
.bch-ten{ font-weight:700; color:#5a2014; }
.bch-dieu{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.bch-dieu label{ display:flex; align-items:center; gap:6px; font-weight:600; }
.bch-dieu select{ font:inherit; padding:6px 10px; border:1.5px solid #d9cdbd; border-radius:10px; }
.bch-nut{ border:0; border-radius:999px; padding:7px 14px; background:#efe6dd; color:#5a2014 !important; font-weight:700; cursor:pointer; text-decoration:none; font-size:.9rem; }
.bch-nut.vang{ background:#7d2314; color:#fff !important; }
.bch-nut:disabled{ opacity:.5; cursor:wait; }
.bch-msg{ min-height:1.2em; font-size:.9rem; }
.bch-msg.ok{ color:#1f6b2c; } .bch-msg.loi{ color:#b3261e; } .bch-msg.canh{ color:#8a5a00; }
.bch-xem{ overflow:hidden; border-radius:14px; }
.bch-cho,.bch-loi{ padding:24px; text-align:center; color:#6f625a; } .bch-loi{ color:#b3261e; }
@media (max-width:640px){ .bch-nut{ flex:1 1 40%; text-align:center; } }

.bch-canh-bao{ padding:8px 12px; border-radius:10px; background:#fff1d6; border:1.5px solid #e9b847; color:#7a4b00; font-size:.9rem; line-height:1.4; }

/* Việc thầy giao → lương (js/cong-viec-giao.js) */
.cvg{ margin-top:16px; }
.cvg-ghi{ color:#6f625a; font-size:.92rem; margin:0 0 10px; }
.cvg-form{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.cvg-form .cvg-moi-nd{ flex:1 1 280px; }
.cvg-ds{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cvg-dong{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid #eadfd6; }
.cvg-dong.cho{ border-left:4px solid #e0a800; }
.cvg-dong.da_duyet{ border-left:4px solid #2e7d32; }
.cvg-dong.tu_choi{ border-left:4px solid #b3261e; opacity:.85; }
.cvg-nd{ flex:1 1 260px; }
.cvg-ben{ display:flex; flex-direction:column; align-items:flex-end; }
.cvg-tt{ font-weight:600; }
.cvg-tt.ok{ color:#2e7d32; } .cvg-tt.loi{ color:#b3261e; } .cvg-tt.cho{ color:#8a5a00; }
.cvg-ly{ color:#6f625a; max-width:260px; text-align:right; }
.cvg-duyet{ display:flex; gap:6px; align-items:center; }
.cvg-tien{ width:130px; }
.cvg-tong{ margin-top:10px; text-align:right; }
.cvg-trong{ color:#6f625a; padding:8px 0; }

/* Việc trong tuần giao cho trợ giảng (js/viec-tuan.js) — bản thử nghiệm */
.vt-khung{ margin:0 0 16px; padding:14px 16px; border-radius:16px; background:#fffdf8; border:1.5px solid #ead9b8; }
.vt-dau{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:10px; }
.vt-dau > i{ font-size:1.3rem; color:#7d2314; }
.vt-tuan{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.vt-form{ margin:0 0 14px; padding:12px; border-radius:12px; background:#fff; border:1px dashed #d9c9a8; }
.vt-luoi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:10px; }
.vt-luoi label{ display:flex; flex-direction:column; gap:4px; font-size:.85rem; font-weight:600; color:#5c4f48; }
.vt-luoi label.rong{ grid-column:1 / -1; }
.vt-chon-tg{ display:flex; flex-wrap:wrap; gap:6px 14px; border:0; padding:0; margin:0 0 10px; }
.vt-chon-tg legend{ font-size:.85rem; font-weight:600; color:#5c4f48; width:100%; margin-bottom:4px; float:none; }
.vt-tg{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#fff3e0; }
.vt-link{ background:none; border:0; padding:0; color:#7d2314; text-decoration:underline; cursor:pointer; font-size:.85rem; }
.vt-the{ margin:0 0 10px; padding:12px 14px; border-radius:14px; background:#fff; border:1px solid #eadfd6; border-left:5px solid #e0a800; }
.vt-the.gap{ border-left-color:#e07b00; background:#fff8ef; }
.vt-the.qua{ border-left-color:#b3261e; background:#fff1ef; }
.vt-the.cho{ border-left-color:#c7a100; }
.vt-the.xong{ border-left-color:#2e7d32; background:#f3fbf4; }
.vt-tren{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; }
.vt-han{ color:#5c4f48; }
.vt-mo-ta{ margin:6px 0 0; color:#6f625a; font-size:.92rem; }
.vt-tt{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:8px; }
.vt-chip{ padding:2px 10px; border-radius:999px; font-size:.82rem; font-weight:600; background:#f1ece6; color:#5c4f48; }
.vt-chip.ok{ background:#d8f2dc; color:#1f6b2a; } .vt-chip.vang{ background:#fff0c2; color:#7a5a00; } .vt-chip.loi{ background:#ffd9d4; color:#a1201a; } .vt-chip.cho{ background:#f1ece6; }
.vt-tien{ color:#1f6b2a; font-weight:600; }
.vt-admin{ margin:8px 0 0; color:#a1201a; font-size:.92rem; }
.vt-lam{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.vt-lam label{ display:flex; align-items:center; gap:6px; font-size:.85rem; }
.vt-td{ width:100px; } .vt-gc{ flex:1 1 200px; min-width:160px; }
.vt-ds{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.vt-dong{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:8px 10px; border-radius:10px; background:#faf7f2; border-left:4px solid #e0a800; }
.vt-dong.qua{ border-left-color:#b3261e; background:#fff1ef; } .vt-dong.xong{ border-left-color:#2e7d32; background:#f3fbf4; } .vt-dong.gap{ border-left-color:#e07b00; }
.vt-ten{ font-weight:700; min-width:90px; } .vt-tdo{ color:#6f625a; font-size:.88rem; }
.vt-nut{ margin-left:auto; display:inline-flex; gap:6px; align-items:center; } .vt-tien-in{ width:140px; }
.vt-chan{ margin-top:8px; text-align:right; }
.vt-trong{ color:#6f625a; margin:6px 0; }
@media (max-width:700px){ .vt-luoi{ grid-template-columns:1fr; } .vt-nut{ margin-left:0; width:100%; } }

/* =====================================================================================
 * TAB KẾ HOẠCH BUỔI — theo ảnh mẫu thầy 04/10/2026: thanh chọn ngày / ca / lớp, thanh vai + tiến độ,
 * cột trái "Tiến trình buổi học" (các mốc mở/đóng, mỗi việc có viên trợ giảng phụ trách),
 * cột phải Sĩ số · Học sinh cần chú ý (+ phân công kèm) · Bài cũ & bài giao mới · Bài phạt · Tin nhắn. JS: js/ke-hoach-buoi.js.
 * ===================================================================================== */
#khbKhung{ max-width:none; --kh-do:#b5121b; --kh-do-nhat:#fff1f2; --kh-vien:rgba(125,35,20,.12); --kh-chu:#1b120c; --kh-phu:#7a6a60; }

/* Thanh công cụ */
.kh3-cong-cu{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.kh3-ngay-chu{ font-size:15px; font-weight:700; margin-right:auto; display:flex; align-items:center; gap:8px; }
.kh3-hom-nay{ font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; }
.kh3-chon{ display:inline-flex; align-items:center; gap:8px; padding:4px 8px 4px 14px; border-radius:14px; margin:0; min-height:48px; }
.kh3-chon .form-control, .kh3-chon .form-select{ border:0 !important; box-shadow:none !important; background-color:transparent !important; font-weight:700 !important; min-height:40px; }
.kh3-chon-ca .form-select{ min-width:220px; }
.kh3-lop{ padding-right:16px; } .kh3-lop b{ font-size:14.5px; white-space:nowrap; }
.kh3-tai-lai{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; cursor:pointer; font-size:15px; }
.kh3-bao{ padding:10px 14px; border-radius:12px; font-size:13.5px; margin-bottom:12px; }
.kh3-trong{ padding:20px; text-align:center; border-radius:16px; }

/* Thanh vai + tiến độ */
.kh3-thanh-vai{ display:grid; grid-template-columns:minmax(0, 1fr) 1px minmax(0, 1fr) minmax(240px, 1.1fr); align-items:center; gap:14px; padding:10px 16px; border-radius:18px; margin-bottom:16px; }
.kh3-vach{ width:1px; height:34px; }
.kh3-vai{ display:flex; align-items:center; gap:10px; padding:4px 6px; border:0; background:none; border-radius:12px; font:inherit; text-align:left; cursor:pointer; min-width:0; transition:background .25s; }
.kh3-vai-huy{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:15px; border:2px solid #fff; }
.kh3-vai-chu{ font-size:14.5px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.kh3-vai-chu b{ font-weight:800; } .kh3-vai-chu em{ font-style:normal; }
.kh3-vai-nut{ font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.kh3-tien{ display:flex; align-items:center; gap:12px; min-width:0; }
.kh3-tien b{ font-size:15px; font-weight:800; white-space:nowrap; }
.kh3-thanh{ display:block; flex:1; height:10px; border-radius:999px; overflow:hidden; min-width:60px; }
.kh3-thanh > *{ display:block; height:100%; border-radius:999px; transition:width .8s cubic-bezier(.22,1,.36,1); }
.kh3-thanh.nho{ flex:none; height:6px; margin-top:6px; max-width:150px; }

/* 2 cột */
.kh3-luoi{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(340px, 1fr); gap:16px; align-items:start; }
.kh3-trai, .kh3-phai{ display:flex; flex-direction:column; gap:14px; min-width:0; }

/* Thẻ */
.kh3-the{ padding:16px 18px; border-radius:18px; }
.kh3-the-dau{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.kh3-the-dau h3{ font-size:17px !important; font-weight:900 !important; margin:0 !important; flex:1; text-transform:uppercase !important; letter-spacing:.01em !important; }
.kh3-huy{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:16px; border:2px solid #fff; flex:none; }
.kh3-pill{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; border:0; white-space:nowrap; }
button.kh3-pill{ cursor:pointer; }
.kh3-tien-nho{ display:flex; align-items:center; gap:10px; min-width:200px; }
.kh3-tien-nho b{ font-size:14px; white-space:nowrap; }
.kh3-rong{ font-size:13px; padding:12px; border-radius:12px; text-align:center; } .kh3-rong.nho{ padding:8px; margin-bottom:10px; }
.kh3-ghi-nho{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; margin-top:10px; line-height:1.45; }
.kh3-ghi-nho i{ margin-top:2px; }

/* Lọc việc */
.kh3-loc{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:-2px 0 12px; }
.kh3-loc button{ padding:6px 14px; border-radius:999px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.kh3-loc button:disabled{ cursor:not-allowed; opacity:.55; }
.kh3-loc small{ font-size:12px; margin-left:4px; }

/* Mốc */
.kh3-moc-ds{ display:flex; flex-direction:column; gap:8px; }
.kh3-moc{ border-radius:14px; overflow:hidden; transition:box-shadow .3s, border-color .3s; }
.kh3-moc-dau{ width:100%; display:grid; grid-template-columns:36px minmax(0, 1fr) auto 18px; align-items:center; gap:14px; padding:10px 14px;
  border:0; background:none; font:inherit; text-align:left; cursor:pointer; }
.kh3-moc-so{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:15px; }
.kh3-moc-ten{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; min-width:0; }
.kh3-moc-ten b{ font-size:15.5px; font-weight:800; } .kh3-moc-ten small{ font-size:12.5px; }
.kh3-moc-ten em{ font-style:normal; font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:999px; }
.kh3-moc-dem{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-weight:800; font-size:13.5px; white-space:nowrap; }
.kh3-moc-mui{ font-size:13px; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.kh3-moc.mo .kh3-moc-mui{ transform:rotate(180deg); }
.kh3-moc-than{ display:none; padding:0 14px 8px; }
.kh3-moc.mo .kh3-moc-than{ display:block; animation:kh3Mo .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes kh3Mo{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* Việc */
.kh3-viec{ display:grid; grid-template-columns:28px minmax(0, 1fr) auto; align-items:start; gap:12px; padding:10px 4px; }
.kh3-viec + .kh3-viec{ border-top:1px solid rgba(125,35,20,.08); }
.kh3-tick{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; cursor:pointer; padding:0; margin-top:1px; }
.kh3-tick.tu{ cursor:default; border-radius:50%; }
.kh3-viec-chu{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.kh3-viec-ten{ font-size:14px; font-weight:600; line-height:1.4; }
.kh3-viec.xong .kh3-viec-ten{ text-decoration:line-through; text-decoration-thickness:1px; opacity:.65; }
.kh3-viec-phu{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.kh3-viec-phai{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.kh3-tu{ font-size:12px; } .kh3-chua-lam{ font-size:12px; font-weight:800; padding:2px 8px; border-radius:999px; }
.kh3-xem{ font-size:12.5px; line-height:1.5; }
.kh3-goi-y{ font-style:normal; font-weight:700; }
.kh3-hs-ds{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.kh3-hs{ display:inline-block; font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; margin:2px 0; }
.kh3-nhom{ display:flex; flex-direction:column; padding:6px 10px; border-radius:10px; margin-top:6px; }
.kh3-nhom b{ font-size:12.5px; } .kh3-nhom span{ font-size:12px; }
.kh3-nut-vang{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:11px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap; }
.kh3-nut-nhat{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:11px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap; }
.kh3-nut-nhat:disabled{ cursor:default; }
.kh3-nut-nho{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; margin:0; }
.kh3-cho{ font-size:12px; white-space:nowrap; }

/* Viên trợ giảng */
.kh3-tg{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 3px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap; }
.kh3-tg-o{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:900; color:#fff; flex:none; }
.kh3-doi-kem{ border:0; background:none; padding:0; cursor:pointer; border-radius:999px; }
.kh3-doi-kem:disabled{ cursor:default; }

/* Sĩ số */
.kh3-so-luoi{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.kh3-so{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:10px 4px; border-radius:12px; }
.kh3-so small{ font-size:12px; font-weight:600; white-space:nowrap; } .kh3-so b{ font-size:28px; font-weight:900; line-height:1.15; } .kh3-so span{ font-size:11.5px; }
.kh3-so-them{ font-size:12.5px; margin-top:8px; }

/* Học sinh cần chú ý */
.kh3-chu-y{ display:flex; flex-direction:column; gap:6px; }
.kh3-chu-y-dong{ display:grid; grid-template-columns:36px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; }
.kh3-avatar{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:900; color:#fff; }
.kh3-chu-y-giua{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.kh3-chu-y-ten{ display:flex; align-items:baseline; gap:8px; min-width:0; } .kh3-chu-y-ten b{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kh3-chu-y-ten small{ font-size:11.5px; }
.kh3-the-ds{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.kh3-nhan{ font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.kh3-chu-y-viec{ font-size:12px; min-width:0; }
.kh3-chu-y-tg{ justify-self:end; }

/* Bài cũ & bài giao mới */
.kh3-bai-luoi{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; }
.kh3-bai{ display:grid; grid-template-columns:40px minmax(0, 1fr); gap:10px; padding:12px; border-radius:14px; align-items:start; }
.kh3-bai > .kh3-nut-vang{ grid-column:1 / -1; justify-self:start; }
.kh3-bai-icon{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-size:18px; color:#fff; }
.kh3-bai-chu{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kh3-bai-chu b{ font-size:15px; font-weight:800; } .kh3-bai-chu span{ font-size:13.5px; font-weight:600; } .kh3-bai-chu small{ font-size:12px; }

/* Bài phạt */
.kh3-phieu{ display:grid; grid-template-columns:38px minmax(0, 1fr) auto auto auto; align-items:center; gap:8px; padding:10px; border-radius:12px; margin-top:10px; }
.kh3-phieu-icon{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:18px; }
.kh3-phieu-chu{ display:flex; flex-direction:column; min-width:0; } .kh3-phieu-chu b{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kh3-phieu-chu small{ font-size:11.5px; }
.kh3-tai-phieu{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; cursor:pointer; margin:10px 0 0; transition:background .25s, border-color .25s; }
.kh3-tai-phieu > i{ font-size:22px; }
.kh3-tai-phieu span{ display:flex; flex-direction:column; } .kh3-tai-phieu b{ font-size:14px; } .kh3-tai-phieu small{ font-size:12px; }
.kh3-tai-phieu.dang{ cursor:progress; }
.kh3-loi-dan{ display:flex; gap:8px; margin-top:10px; }
.kh3-loi-dan .form-control{ font-size:13px !important; min-height:38px; }

/* Ghi nhận cuối buổi + nhắc ôn từ buổi trước */
.kh3-ghi-luoi{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.kh3-ghi-o{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:14px; margin:0; }
.kh3-ghi-o > span{ font-size:13.5px; font-weight:800; }
.kh3-ghi-o textarea{ font-size:13px !important; line-height:1.45; min-height:58px; resize:vertical; }
.kh3-ghi-tt{ font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.kh3-on-truoc{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.45; margin-bottom:12px; }
.kh3-on-icon{ width:28px; height:28px; flex:none; border-radius:8px; display:grid; place-items:center; font-size:13px; }

/* Tin nhắn */
.kh3-tin{ display:grid; grid-template-columns:38px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:10px; border-radius:14px; margin-bottom:8px; }
.kh3-tin:last-child{ margin-bottom:0; }
.kh3-tin-icon{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:16px; }
.kh3-tin-chu{ display:flex; flex-direction:column; min-width:0; } .kh3-tin-chu b{ font-size:14px; } .kh3-tin-chu small{ font-size:12px; }
.kh3-xem-truoc{ grid-column:1 / -1; font-size:12.5px; }
.kh3-xem-truoc summary{ cursor:pointer; }
.kh3-xem-truoc textarea{ margin-top:6px; font-size:12.5px !important; line-height:1.5; }

@media (max-width:1399.98px){ .kh3-thanh-vai{ grid-template-columns:minmax(0, 1fr) 1px minmax(0, 1fr); } .kh3-tien{ grid-column:1 / -1; } }
@media (max-width:1199.98px){ .kh3-luoi{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:767.98px){
  .kh3-ngay-chu{ width:100%; }
  .kh3-chon{ flex:1 1 140px; } .kh3-chon-ca .form-select{ min-width:0; }
  .kh3-thanh-vai{ grid-template-columns:minmax(0, 1fr); } .kh3-vach{ display:none; }
  .kh3-viec{ grid-template-columns:28px minmax(0, 1fr); } .kh3-viec-phai{ grid-column:2; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .kh3-so-luoi{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kh3-bai-luoi, .kh3-ghi-luoi{ grid-template-columns:minmax(0, 1fr); }
  .kh3-phieu{ grid-template-columns:38px minmax(0, 1fr); } .kh3-phieu > :is(button, label){ grid-row:2; }
  .kh3-tien-nho{ min-width:0; width:100%; }
}

/* ───────── Màu ───────── */
html.gd-sieu-anh-hung #khbKhung .kh3-ngay-chu{ color:#3b2a20; }
html.gd-sieu-anh-hung #khbKhung .kh3-hom-nay{ background:#fff0cc; color:#a86b00; }
html.gd-sieu-anh-hung #khbKhung :is(.kh3-chon, .kh3-tai-lai){ background:#fff; border:1px solid var(--kh-vien); color:#3b2a20; box-shadow:0 8px 18px -16px rgba(90,25,10,.7); }
html.gd-sieu-anh-hung #khbKhung .kh3-chon i{ color:#5b4a41; }
html.gd-sieu-anh-hung #khbKhung .kh3-tai-lai:hover{ background:#fff3f3; color:var(--kh-do); }
html.gd-sieu-anh-hung #khbKhung .kh3-bao{ background:#ecf8f0; color:#1e7a46; } html.gd-sieu-anh-hung #khbKhung .kh3-bao.loi{ background:#ffecee; color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-trong{ background:#fffdf9; border:1px solid var(--kh-vien); color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung :is(.kh3-thanh-vai, .kh3-the){ background:#fff; border:1px solid var(--kh-vien); box-shadow:0 14px 30px -28px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung #khbKhung .kh3-vach{ background:var(--kh-vien); }
html.gd-sieu-anh-hung #khbKhung .kh3-vai:hover{ background:#fff7f7; }
html.gd-sieu-anh-hung #khbKhung .kh3-vai-huy{ box-shadow:0 0 0 2px rgba(214,160,40,.85), 0 6px 12px -6px rgba(0,0,0,.5); background:radial-gradient(circle at 35% 30%, #ff6b5b, #b10e25 72%); }
html.gd-sieu-anh-hung #khbKhung .kh3-vai-huy.kiem_tra{ background:radial-gradient(circle at 35% 30%, #6fa8ff, #1d4fbf 72%); }
html.gd-sieu-anh-hung #khbKhung .kh3-vai-chu{ color:var(--kh-chu); } html.gd-sieu-anh-hung #khbKhung .kh3-vai-chu em{ color:var(--kh-do); }
html.gd-sieu-anh-hung #khbKhung .kh3-vai-nut{ background:#fff4e0; color:#a86b00; border:1px solid #f1dda0; }
html.gd-sieu-anh-hung #khbKhung .kh3-vai.cua-em .kh3-vai-nut{ background:#ecf8f0; border-color:#bfe6cd; color:#1e7a46; }
html.gd-sieu-anh-hung #khbKhung .kh3-tien b{ color:#c47f00; }
html.gd-sieu-anh-hung #khbKhung .kh3-thanh{ background:#f1e9df; } html.gd-sieu-anh-hung #khbKhung .kh3-thanh > *{ background:linear-gradient(90deg, #f6c33f, #e39b16); }
/* luật chung tiêu đề .mv (noi-dung-nhan-vien.css) nặng (2,4,1) + !important → cần 3 id (:not(#…)) mới đè được */
html.gd-sieu-anh-hung #appShell #khbKhung .kh3-the-dau h3:not(#kh3-khong){ color:var(--kh-do) !important; text-transform:uppercase !important; font-style:normal !important; }
html.gd-sieu-anh-hung #khbKhung .kh3-huy{ box-shadow:0 0 0 1.5px rgba(214,160,40,.85), 0 6px 12px -6px rgba(0,0,0,.5); }
html.gd-sieu-anh-hung #khbKhung .kh3-huy.do{ background:radial-gradient(circle at 35% 30%, #ff6b5b, #b10e25 72%); }
html.gd-sieu-anh-hung #khbKhung .kh3-tien-nho b{ color:#c47f00; }
html.gd-sieu-anh-hung #khbKhung .kh3-pill.chua{ background:#ffe3e6; color:#c8102e; } html.gd-sieu-anh-hung #khbKhung .kh3-pill.xong{ background:#e2f6e8; color:#1e7a46; }
html.gd-sieu-anh-hung #khbKhung .kh3-rong{ background:#faf6f1; color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung .kh3-ghi-nho{ color:var(--kh-phu); } html.gd-sieu-anh-hung #khbKhung .kh3-ghi-nho.do{ color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-loc button{ background:#fff; border:1px solid var(--kh-vien); color:#3b2a20; }
html.gd-sieu-anh-hung #khbKhung .kh3-loc button.on{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019); border-color:#c98a12; color:#2a1606; }
html.gd-sieu-anh-hung #khbKhung .kh3-loc small{ color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung .kh3-moc{ background:#fff; border:1px solid var(--kh-vien); }
html.gd-sieu-anh-hung #khbKhung .kh3-moc.mo{ border-color:#f3a6ae; background:var(--kh-do-nhat); box-shadow:0 0 0 3px rgba(216,26,50,.06); }
html.gd-sieu-anh-hung #khbKhung .kh3-moc.mo .kh3-moc-than{ background:#fff; border-top:1px solid #f6d3d7; }
html.gd-sieu-anh-hung #khbKhung .kh3-moc-so{ background:#fff; border:1.5px solid rgba(125,35,20,.18); color:#3b2a20; }
html.gd-sieu-anh-hung #khbKhung .kh3-moc.du .kh3-moc-so{ background:radial-gradient(circle at 35% 30%, #4fcf86, #15803d 72%); border-color:transparent; color:#fff; }
html.gd-sieu-anh-hung #khbKhung :is(.kh3-moc.nay, .kh3-moc.mo:not(.du)) .kh3-moc-so{ background:radial-gradient(circle at 35% 30%, #ff6b5b, #b10e25 72%); border-color:transparent; color:#fff; }
html.gd-sieu-anh-hung #khbKhung .kh3-moc-ten b{ color:var(--kh-chu); } html.gd-sieu-anh-hung #khbKhung .kh3-moc-ten small{ color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung .kh3-moc-ten em{ background:#ffe3e6; color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-moc-dem{ background:#f5efe8; color:#5b4a41; }
html.gd-sieu-anh-hung #khbKhung .kh3-moc-dem.du{ background:#e2f6e8; color:#1e7a46; } html.gd-sieu-anh-hung #khbKhung .kh3-moc-dem.tre{ background:#ffe3e6; color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-moc-mui{ color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung .kh3-tick{ background:#fff; border:1.5px solid rgba(125,35,20,.3); color:#fff; }
html.gd-sieu-anh-hung #khbKhung .kh3-tick.on{ background:#1e8a4c; border-color:#1e8a4c; }
html.gd-sieu-anh-hung #khbKhung .kh3-tick.tu{ background:#f5efe8; border-color:transparent; color:var(--kh-phu); } html.gd-sieu-anh-hung #khbKhung .kh3-tick.tu.on{ background:#1e8a4c; color:#fff; }
html.gd-sieu-anh-hung #khbKhung .kh3-viec-ten{ color:var(--kh-chu); }
html.gd-sieu-anh-hung #khbKhung :is(.kh3-tu, .kh3-xem, .kh3-cho){ color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung .kh3-goi-y{ color:#a86b00; }
html.gd-sieu-anh-hung #khbKhung .kh3-chua-lam{ background:#ffe3e6; color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-hs{ background:#f5efe8; color:#5b4a41; }
html.gd-sieu-anh-hung #khbKhung .kh3-hs.phat{ background:#fff0f1; color:#c8102e; border:1px solid #f4c8cd; }
html.gd-sieu-anh-hung #khbKhung .kh3-hs.xong{ background:#ecf8f0; color:#1e7a46; }
html.gd-sieu-anh-hung #khbKhung .kh3-nhom.xanh{ background:#ecf8f0; } html.gd-sieu-anh-hung #khbKhung .kh3-nhom.xanh b{ color:#1e7a46; }
html.gd-sieu-anh-hung #khbKhung .kh3-nhom.vang{ background:#fff7e3; } html.gd-sieu-anh-hung #khbKhung .kh3-nhom.vang b{ color:#a86b00; }
html.gd-sieu-anh-hung #khbKhung .kh3-nhom.do{ background:#fff0f1; } html.gd-sieu-anh-hung #khbKhung .kh3-nhom.do b{ color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-nut-vang{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019); border:1px solid #c98a12; color:#2a1606; }
html.gd-sieu-anh-hung #khbKhung .kh3-nut-vang:hover{ filter:brightness(1.04); box-shadow:0 8px 14px -10px rgba(170,110,0,.8); }
html.gd-sieu-anh-hung #khbKhung .kh3-nut-nhat{ background:#eef4ff; border:1px solid #cddff7; color:#1d4fbf; }
html.gd-sieu-anh-hung #khbKhung .kh3-nut-nhat:not(:disabled):hover{ background:#e2ecff; }
html.gd-sieu-anh-hung #khbKhung .kh3-nut-nhat.xong{ background:#ecf8f0; border-color:#bfe6cd; color:#1e7a46; }
html.gd-sieu-anh-hung #khbKhung .kh3-nut-nho{ background:#fff; border:1px solid var(--kh-vien); color:#3b2a20; }
html.gd-sieu-anh-hung #khbKhung .kh3-nut-nho:hover{ background:#fff7f7; }
html.gd-sieu-anh-hung #khbKhung .kh3-nut-nho.do{ color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-tg{ background:#fff1f2; border:1px solid #f6d3d7; color:#3b2a20; }
html.gd-sieu-anh-hung #khbKhung .kh3-tg.do .kh3-tg-o{ background:radial-gradient(circle at 35% 30%, #ff6b5b, #b10e25 72%); }
html.gd-sieu-anh-hung #khbKhung .kh3-tg.xanh{ background:#eef4ff; border-color:#cddff7; } html.gd-sieu-anh-hung #khbKhung .kh3-tg.xanh .kh3-tg-o{ background:radial-gradient(circle at 35% 30%, #6fa8ff, #1d4fbf 72%); }
html.gd-sieu-anh-hung #khbKhung .kh3-tg.ca-hai{ background:#fff7e3; border-color:#f1dda0; } html.gd-sieu-anh-hung #khbKhung .kh3-tg.ca-hai .kh3-tg-o{ background:#e5a019; font-size:10px; }
html.gd-sieu-anh-hung #khbKhung .kh3-tg.trong{ background:#fff; border:1px dashed #f1c7c7; color:#c8102e; } html.gd-sieu-anh-hung #khbKhung .kh3-tg.trong .kh3-tg-o{ background:#f1c7c7; }
html.gd-sieu-anh-hung #khbKhung .kh3-tg.goi-y{ border-style:dashed; border-width:1.5px; }
html.gd-sieu-anh-hung #khbKhung .kh3-doi-kem:not(:disabled):hover .kh3-tg{ filter:brightness(.97); box-shadow:0 4px 10px -6px rgba(90,25,10,.6); }
html.gd-sieu-anh-hung #khbKhung .kh3-so{ background:#fff; border:1px solid var(--kh-vien); }
html.gd-sieu-anh-hung #khbKhung .kh3-so small{ color:#5b4a41; } html.gd-sieu-anh-hung #khbKhung .kh3-so b{ color:var(--kh-chu); } html.gd-sieu-anh-hung #khbKhung .kh3-so span{ color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung .kh3-so.xanh b{ color:#1e7a46; } html.gd-sieu-anh-hung #khbKhung .kh3-so.do b{ color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-so-them{ color:var(--kh-phu); } html.gd-sieu-anh-hung #khbKhung .kh3-so-them b{ color:#3b2a20; }
html.gd-sieu-anh-hung #khbKhung .kh3-chu-y-dong{ background:#fff; border:1px solid var(--kh-vien); }
html.gd-sieu-anh-hung #khbKhung .kh3-avatar{ background:radial-gradient(circle at 35% 30%, #6fa8ff, #1d4fbf 72%); }
html.gd-sieu-anh-hung #khbKhung .kh3-chu-y-ten b{ color:var(--kh-chu); } html.gd-sieu-anh-hung #khbKhung .kh3-chu-y-ten small, html.gd-sieu-anh-hung #khbKhung .kh3-chu-y-viec{ color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung .kh3-nhan.test{ background:#ffe3e6; color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-nhan.btvn{ background:#fff0cc; color:#a86b00; }
html.gd-sieu-anh-hung #khbKhung .kh3-nhan.vang{ background:#fde7f3; color:#be185d; }
html.gd-sieu-anh-hung #khbKhung .kh3-bai.cu{ background:#f0f9f2; border:1px solid #cfe9d7; } html.gd-sieu-anh-hung #khbKhung .kh3-bai.cu .kh3-bai-icon{ background:radial-gradient(circle at 35% 30%, #4fcf86, #15803d 72%); }
html.gd-sieu-anh-hung #khbKhung .kh3-bai.moi{ background:#f0f5ff; border:1px solid #d3e1f8; } html.gd-sieu-anh-hung #khbKhung .kh3-bai.moi .kh3-bai-icon{ background:radial-gradient(circle at 35% 30%, #6fa8ff, #1d4fbf 72%); }
html.gd-sieu-anh-hung #khbKhung .kh3-bai-chu b{ color:var(--kh-chu); } html.gd-sieu-anh-hung #khbKhung .kh3-bai-chu span{ color:#3b2a20; } html.gd-sieu-anh-hung #khbKhung .kh3-bai-chu small{ color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung .kh3-phieu{ background:#faf6f1; border:1px solid var(--kh-vien); }
html.gd-sieu-anh-hung #khbKhung .kh3-phieu-icon{ background:#ffe3e6; color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-phieu-chu b{ color:var(--kh-chu); } html.gd-sieu-anh-hung #khbKhung .kh3-phieu-chu small{ color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung .kh3-tai-phieu{ background:#fff8f8; border:1.5px dashed #f1b5bc; color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-tai-phieu:hover{ background:#fff0f1; border-color:#e88a95; }
html.gd-sieu-anh-hung #khbKhung .kh3-tai-phieu b{ color:var(--kh-chu); } html.gd-sieu-anh-hung #khbKhung .kh3-tai-phieu small{ color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung .kh3-ghi-o{ background:#fff; border:1px solid var(--kh-vien); }
html.gd-sieu-anh-hung #khbKhung .kh3-ghi-o > span{ color:var(--kh-chu); } html.gd-sieu-anh-hung #khbKhung .kh3-ghi-o > span i{ color:var(--kh-do); }
html.gd-sieu-anh-hung #khbKhung .kh3-ghi-tt{ color:#1e7a46; } html.gd-sieu-anh-hung #khbKhung .kh3-ghi-tt.loi{ color:#c8102e; }
html.gd-sieu-anh-hung #khbKhung .kh3-on-truoc{ background:#fff7e3; border:1px solid #f1dda0; color:#5b3d06; }
html.gd-sieu-anh-hung #khbKhung .kh3-on-truoc b{ color:#a86b00; }
html.gd-sieu-anh-hung #khbKhung .kh3-on-icon{ background:#f6c33f; color:#2a1606; }
html.gd-sieu-anh-hung #khbKhung .kh3-tin{ background:#fff; border:1px solid var(--kh-vien); }
html.gd-sieu-anh-hung #khbKhung .kh3-tin-icon{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung #khbKhung .kh3-tin-chu b{ color:var(--kh-chu); } html.gd-sieu-anh-hung #khbKhung .kh3-tin-chu small{ color:var(--kh-phu); }
html.gd-sieu-anh-hung #khbKhung .kh3-xem-truoc summary{ color:var(--kh-phu); }
@media (prefers-reduced-motion:reduce){ .kh3-moc-mui, .kh3-moc-than, .kh3-thanh > *{ animation:none !important; transition:none !important; } }

/* 1 phiếu bài phạt dùng chung cho nhiều ca trong ngày (07/10/2026) */
.kh3-phieu-chung{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 12px; margin-bottom:8px; border-radius:12px; background:#fff8e1; border:1px solid #f3dca0; color:#6b4a00; font-size:13px; }
.kh3-phieu-chung > span{ flex:1 1 220px; min-width:0; }
.kh3-phieu-chung .kh3-nut-vang{ white-space:nowrap; }
.kh3-cho.do{ color:#c8102e; font-weight:800; }


/* Cột phải gọn: thẻ chuyển nhóm Lớp học · Bài tập & phạt · Tin nhắn (07/10/2026) */
.kh3-tab-phai{ margin:0 0 10px; flex-wrap:wrap; }
.kh3-tab-phai > button{ display:inline-flex; align-items:center; gap:7px; }
.kh3-dem{ font-style:normal; min-width:20px; padding:0 6px; border-radius:999px; font-size:11.5px; font-weight:800; line-height:20px; text-align:center; background:#7d081418; color:#7d0814; }
.kh3-dem.do{ background:#c8102e; color:#fff; }
.kh3-tab-phai > button.on .kh3-dem{ background:rgba(255,255,255,.25); color:inherit; }

/* ───────────── Kế hoạch CA BỔ TRỢ (js/ke-hoach-bo-tro.js) — thêm vào tab Kế hoạch buổi (06/10/2026) ─────────────
   Dùng lại gần hết lớp .kh3-* của css/ke-hoach-buoi.css; ở đây chỉ phần riêng: công tắc Chính khoá | Bổ trợ,
   dải "trợ giảng phụ trách" (thay thanh 2 vai), danh sách học sinh của ca, chữ cảnh báo thiếu lý do. */

/* Công tắc 2 nút — nằm NGOÀI #khbKhung nên tự khai báo màu */
.khbt-che-do{ display:inline-flex; gap:4px; padding:4px; margin:0 0 14px; border-radius:999px; background:#fff; border:1px solid rgba(125,35,20,.14); box-shadow:0 8px 18px -16px rgba(90,25,10,.7); }
.khbt-che-do button{ display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border:0; border-radius:999px; background:transparent; color:#3b2a20; font:inherit; font-size:14px; font-weight:800; cursor:pointer; transition:background .25s, color .25s, box-shadow .25s; }
.khbt-che-do button:hover{ background:#fff3f3; }
.khbt-che-do button.on{ background:linear-gradient(180deg, #d81a32, #a50f1e); color:#fff; box-shadow:0 6px 14px -8px rgba(165,15,30,.8); }
.khbt-che-do button:focus-visible{ outline:2px solid #d6a028; outline-offset:2px; }

/* Dải trợ giảng phụ trách + thông tin ca + tiến độ */
#khbKhung .khbt-thanh{ display:grid; grid-template-columns:auto minmax(0, 1fr) minmax(240px, 1fr); align-items:center; gap:14px; padding:10px 16px; border-radius:18px; margin-bottom:16px; background:#fff; border:1px solid var(--kh-vien); box-shadow:0 14px 30px -28px rgba(90,25,10,.8); }
#khbKhung .khbt-tg{ display:flex; align-items:center; gap:10px; min-width:0; }
#khbKhung .khbt-tg .kh3-vai-chu{ overflow:visible; text-overflow:clip; white-space:normal; }
#khbKhung .khbt-tg small{ font-weight:700; color:var(--kh-phu); }
#khbKhung .khbt-them{ font-size:13.5px; font-weight:700; color:var(--kh-phu); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1199.98px){ #khbKhung .khbt-thanh{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } #khbKhung .khbt-thanh .kh3-tien{ grid-column:1 / -1; } }
@media (max-width:767.98px){ #khbKhung .khbt-thanh{ grid-template-columns:minmax(0, 1fr); } #khbKhung .khbt-them{ white-space:normal; } }

/* Danh sách học sinh của ca */
#khbKhung .khbt-ds{ display:flex; flex-direction:column; gap:2px; margin-top:12px; max-height:420px; overflow:auto; }
#khbKhung .khbt-hs{ display:flex; align-items:center; gap:10px; padding:8px 4px; border-top:1px solid var(--kh-vien); }
#khbKhung .khbt-hs:first-child{ border-top:0; }
#khbKhung .khbt-hs-giua{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; flex:1; }
#khbKhung .khbt-hs-giua b{ font-size:14px; color:var(--kh-chu); }
#khbKhung .khbt-hs-giua small{ color:var(--kh-phu); font-weight:700; }
#khbKhung .khbt-hs-the{ display:flex; flex-wrap:wrap; gap:4px; flex-basis:100%; }
#khbKhung .khbt-tt, #khbKhung .khbt-test{ font-size:11.5px; font-weight:800; padding:2px 9px; border-radius:999px; white-space:nowrap; }
#khbKhung .khbt-tt.di{ background:#e2f6e8; color:#1e7a46; }
#khbKhung .khbt-tt.vang{ background:#ffe3e6; color:#c8102e; }
#khbKhung .khbt-tt.cho{ background:#f1e9df; color:#6b5a50; }
#khbKhung .khbt-test.dat{ background:#e2f6e8; color:#1e7a46; }
#khbKhung .khbt-test.chua{ background:#fff0cc; color:#a86b00; }
#khbKhung .kh3-avatar.test{ background:radial-gradient(circle at 35% 30%, #6fa8ff, #1d4fbf 72%); }
#khbKhung .kh3-avatar.vang{ background:radial-gradient(circle at 35% 30%, #ff6b5b, #b10e25 72%); }
#khbKhung .khbt-canh-bao{ color:#c8102e; font-weight:700; }

@media (prefers-reduced-motion:reduce){ .khbt-che-do button{ transition:none !important; } }

/* =====================================================================================
 * NHÓM HỌC SINH (nhân viên) — theo ảnh mẫu thầy 03/10/2026.
 *   Danh sách học sinh (.hs2-*), Lớp học (.lh2-*), Kết quả học tập (.kq2-*), Bài giảng (.bg2-*), Lớp live (.lv2-*).
 * Bố cục cho mọi giao diện; màu cho giao diện Siêu anh hùng.
 * ===================================================================================== */

/* ───────── Chung cho cả nhóm Học sinh (ảnh mẫu thầy 03/10/2026 lần 2) ─────────
 * Tiêu đề trang IN HOA đậm + dòng mô tả đỏ đậm (mục con đang mở = viên vàng: khung-nhan-vien.css, mọi nhóm);
 * thẻ số .nvs-the (huy hiệu tròn trái + số to + nhãn màu); bảng .nvs-bang tiêu đề đỏ chữ trắng. */
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-hocsinh, #pane-lophoc, #pane-ketqua, #pane-baigiang, #pane-live, #pane-diemdanh, #pane-hoccheo, #pane-kiemtrabai, #pane-bangdiem) > .mv-bang .mv-tieu-de{ text-transform:uppercase !important; font-weight:900 !important; letter-spacing:0 !important; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-hocsinh, #pane-lophoc, #pane-ketqua, #pane-baigiang, #pane-live, #pane-diemdanh, #pane-hoccheo, #pane-kiemtrabai, #pane-bangdiem) > .mv-bang .mv-phu{ color:#8a1a24; font-weight:600; }

.nvs-the-luoi{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-bottom:16px; }
.nvs-the{ position:relative; display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:16px; font:inherit; text-align:left; min-width:0; cursor:pointer;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s; animation:hs2Mo .45s cubic-bezier(.22,1,.36,1) both; }
div.nvs-the{ cursor:default; }
button.nvs-the:hover{ transform:translateY(-2px); }
.nvs-the:nth-child(2){ animation-delay:.05s; } .nvs-the:nth-child(3){ animation-delay:.1s; } .nvs-the:nth-child(4){ animation-delay:.15s; }
.nvs-the-huy{ width:62px; height:62px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:25px; transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
button.nvs-the:hover .nvs-the-huy{ transform:scale(1.08) rotate(-6deg); }
.nvs-the-chu{ display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.nvs-the-chu b{ font-size:36px; font-weight:900; letter-spacing:-.02em; line-height:1.05; }
.nvs-the-chu > span{ font-size:18px; font-weight:800; }
.nvs-the-chu small{ font-size:12.5px; font-weight:600; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nvs-the.on::after{ content:'\f00c'; font:900 11px 'Font Awesome 6 Free'; position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff; }
@media (max-width:1199.98px){ .nvs-the-luoi{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:575.98px){
  .nvs-the-luoi{ gap:10px; }
  .nvs-the{ padding:12px; gap:10px; } .nvs-the-huy{ width:44px; height:44px; font-size:18px; }
  .nvs-the-chu b{ font-size:26px; } .nvs-the-chu > span{ font-size:14px; white-space:nowrap; } .nvs-the-chu small{ display:none; }
}
html.gd-sieu-anh-hung .nvs-the{ border:1px solid; box-shadow:0 14px 26px -24px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .nvs-the.xanh{ background:linear-gradient(135deg, #f2fbf5, #e6f6ec); border-color:#c9e9d4; } html.gd-sieu-anh-hung .nvs-the.xanh .nvs-the-huy{ background:#dcf3e4; color:#1e8a4c; } html.gd-sieu-anh-hung .nvs-the.xanh .nvs-the-chu > span{ color:#1e7a46; }
html.gd-sieu-anh-hung .nvs-the.vang{ background:linear-gradient(135deg, #fffaef, #fff3dc); border-color:#f3dfae; } html.gd-sieu-anh-hung .nvs-the.vang .nvs-the-huy{ background:#ffedc4; color:#d98b0b; } html.gd-sieu-anh-hung .nvs-the.vang .nvs-the-chu > span{ color:#a35f00; }
html.gd-sieu-anh-hung .nvs-the.do{ background:linear-gradient(135deg, #fff5f5, #ffe9ea); border-color:#f6c9cd; } html.gd-sieu-anh-hung .nvs-the.do .nvs-the-huy{ background:#ffd9dc; color:#d81a32; } html.gd-sieu-anh-hung .nvs-the.do .nvs-the-chu > span{ color:#c8102e; }
html.gd-sieu-anh-hung .nvs-the.lam{ background:linear-gradient(135deg, #f3f8ff, #e6f0ff); border-color:#c8dbf6; } html.gd-sieu-anh-hung .nvs-the.lam .nvs-the-huy{ background:#d9e8ff; color:#1d63d8; } html.gd-sieu-anh-hung .nvs-the.lam .nvs-the-chu > span{ color:#1d4fa8; }
html.gd-sieu-anh-hung .nvs-the.tim{ background:linear-gradient(135deg, #faf6ff, #f0e8ff); border-color:#dccff6; } html.gd-sieu-anh-hung .nvs-the.tim .nvs-the-huy{ background:#e8dcff; color:#6a35c7; } html.gd-sieu-anh-hung .nvs-the.tim .nvs-the-chu > span{ color:#5b2da0; }
html.gd-sieu-anh-hung .nvs-the-chu b{ color:#1b120c; } html.gd-sieu-anh-hung .nvs-the-chu small{ color:#7a6a60; }
html.gd-sieu-anh-hung .nvs-the.xanh .nvs-the-chu b{ color:#145c33; } html.gd-sieu-anh-hung .nvs-the.vang .nvs-the-chu b{ color:#8a4f00; }
html.gd-sieu-anh-hung .nvs-the.do .nvs-the-chu b{ color:#a3122a; } html.gd-sieu-anh-hung .nvs-the.lam .nvs-the-chu b{ color:#17469a; }
html.gd-sieu-anh-hung button.nvs-the:hover{ box-shadow:0 18px 30px -22px rgba(90,25,10,.75); }
html.gd-sieu-anh-hung .nvs-the.on{ box-shadow:0 0 0 2.5px currentColor, 0 16px 28px -22px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .nvs-the.xanh.on{ color:#1e8a4c; } html.gd-sieu-anh-hung .nvs-the.vang.on{ color:#d98b0b; } html.gd-sieu-anh-hung .nvs-the.do.on{ color:#d81a32; } html.gd-sieu-anh-hung .nvs-the.lam.on{ color:#1d63d8; }
html.gd-sieu-anh-hung .nvs-the.on::after{ background:currentColor; }

/* Bảng tiêu đề đỏ chữ trắng (ảnh mẫu) — đè luật th chung của noi-dung-nhan-vien.css */
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-hocsinh, #pane-lophoc, #pane-ketqua, #pane-baigiang, #pane-live, #pane-diemdanh, #pane-hoccheo, #pane-kiemtrabai, #pane-bangdiem) .nvs-bang{ border-radius:16px !important; overflow:auto; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-hocsinh, #pane-lophoc, #pane-ketqua, #pane-baigiang, #pane-live, #pane-diemdanh, #pane-hoccheo, #pane-kiemtrabai, #pane-bangdiem) .nvs-bang > .table > thead > tr > th{
  background:linear-gradient(180deg, #b3101f 0%, #8e0a17 100%) !important; color:#fff !important; font-size:14.5px !important; font-weight:800 !important;
  padding:14px 16px !important; border:0 !important; border-bottom:2px solid #f2c14e !important; white-space:nowrap; position:sticky; top:0; z-index:1;
}
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-hocsinh, #pane-lophoc, #pane-ketqua, #pane-baigiang, #pane-live, #pane-diemdanh, #pane-hoccheo, #pane-kiemtrabai, #pane-bangdiem) .nvs-bang > .table > thead > tr > th + th{ border-left:1px solid rgba(255,255,255,.12) !important; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-hocsinh, #pane-lophoc, #pane-ketqua, #pane-baigiang, #pane-live, #pane-diemdanh, #pane-hoccheo, #pane-kiemtrabai, #pane-bangdiem) .nvs-bang > .table > tbody > tr > td{ padding:12px 16px; }

/* ───────── Danh sách học sinh ───────── */
#pane-hocsinh{ position:relative; }
.hs2-nut-dau{ position:absolute; top:26px; right:24px; display:flex; gap:12px; z-index:2; }
.hs2-nut-dau .btn{ display:inline-flex; align-items:center; gap:10px; font-weight:800 !important; padding:11px 22px !important; border-radius:12px !important; font-size:16px !important; }
.hs2-loc-hop{ padding:14px 16px !important; margin-bottom:16px; }
.hs2-loc{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hs2-tim{ flex:1 1 300px; min-width:200px; }
.hs2-chon-o{ position:relative; flex:0 1 270px; min-width:160px; }
.hs2-chon-o > i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:15px; pointer-events:none; z-index:1; }
.hs2-chon-o .hs2-chon{ width:100% !important; padding-left:40px !important; }
.hs2-in{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.hs2-nut-in{ display:inline-flex; align-items:center; gap:9px; font-size:14px !important; font-weight:600 !important; padding:9px 14px !important; border-radius:12px !important; white-space:nowrap; }
.hs2-tich{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; margin-top:12px; padding:0 2px; min-height:42px; }
.hs2-nhanh-cum{ display:contents; }
.hs2-o-tich{ display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:600; cursor:pointer; margin:0; user-select:none; }
.hs2-o-tich .form-check-input{ width:20px; height:20px; margin:0; border-radius:6px; cursor:pointer; flex:none; }
/* "HS mới tháng [ô chọn tháng]" — 04/10/2026 */
.hs2-moi-thang{ display:inline-flex; align-items:center; gap:8px; max-width:100%; min-width:0; }
.hs2-moi-thang .hs2-o-tich{ white-space:nowrap; flex:none; }
#appShell .hs2-chon-thang{ width:auto !important; min-width:0; flex:0 1 auto; text-overflow:ellipsis;padding:5px 34px 5px 12px !important; font-size:14px !important; font-weight:600; border-radius:10px !important; }
.hs2-dem{ font-size:12.5px; font-weight:800; padding:1px 8px; border-radius:999px; }
.hs2-dem:empty{ display:none; }
.hs2-bo-loc{ border:0; background:none; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; padding:4px 6px; border-radius:8px; }

.hs2-bang{ margin-bottom:14px; }
.hs2-bang table{ margin:0; font-size:15px; }
.hs2-xep{ border:0; background:none; color:inherit; font:inherit; padding:0; display:inline-flex; align-items:center; gap:9px; cursor:pointer; white-space:nowrap; }
.hs2-xep i{ font-size:12px; opacity:.75; transition:opacity .2s; }
.hs2-xep:hover i, .hs2-xep.on i{ opacity:1; }
.hs2-xep:focus-visible{ outline:2px solid #ffd76a; outline-offset:3px; border-radius:4px; }
.hs2-th-nut{ text-align:center; }
.hs2-ma{ font-weight:600; white-space:nowrap; }
.hs2-ten{ display:flex; align-items:center; gap:14px; min-width:210px; }
.hs2-av{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px; color:#fff; }
.hs2-ten-chu{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.hs2-ten-chu b{ font-size:15.5px; font-weight:600; }
.hs2-thieu-ic{ font-size:13px; margin-left:3px; vertical-align:1px; cursor:help; }
.hs2-tem-ds{ display:flex; flex-wrap:wrap; gap:4px; }
.hs2-tem-ds:empty{ display:none; }
.hs2-tem, .hs2-tem-ds .the-mien-giam{ font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; margin:0 !important; }
button.hs2-tem{ border:0; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.hs2-mui{ font-size:9px; transition:transform .25s; }
.hs2-mo-hp[aria-expanded="true"] .hs2-mui{ transform:rotate(180deg); }
.hs2-lop{ white-space:nowrap; font-weight:600; }
.hs2-sdt{ white-space:nowrap; text-decoration:none; font-weight:500; font-variant-numeric:tabular-nums; }
.hs2-thieu-chu{ font-size:13px; font-style:italic; }
.hs2-tt{ display:inline-flex; align-items:center; gap:9px; padding:7px 16px; border-radius:999px; font-size:14px; font-weight:700; white-space:nowrap; min-width:120px; }
.hs2-tt i{ font-size:12px; }
.hs2-tt i.fa-circle{ font-size:9px; }
.hs2-nut{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:nowrap; }
.hs2-n{ display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:10px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; list-style:none;
  transition:transform .2s, box-shadow .2s, background-color .2s; }
.hs2-n:hover{ transform:translateY(-1px); }
.hs2-n::-webkit-details-marker{ display:none; }
.hs2-ba-cham{ padding:8px 13px; }
.hs2-them-menu{ position:relative; }
.hs2-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:240px; padding:6px; border-radius:14px; display:flex; flex-direction:column; gap:2px;
  animation:hs2Mo .25s cubic-bezier(.22,1,.36,1) both; }
.hs2-muc-them{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; border:0; background:none; font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; white-space:nowrap; text-decoration:none; }
.hs2-muc-them i{ width:16px; text-align:center; }
.hs2-muc-trong{ padding:9px 12px; font-size:13px; }
@keyframes hs2Mo{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.hs2-dong-hp > td{ padding:0 14px 12px !important; }
.hs2-hp{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 12px; border-radius:12px; animation:hs2Mo .3s cubic-bezier(.22,1,.36,1) both; }
.hs2-hp-chu{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; min-width:0; }
.hs2-hp-chu > i{ font-size:20px; flex:none; }
.hs2-hp-nut{ display:flex; gap:6px; flex-wrap:wrap; }
.hs2-hp-nut .hs2-n{ padding:6px 12px; font-size:13px; }
.hs-sua-so-tien-box, .hs-dat-truoc-box{ margin-top:8px; gap:8px; }

.hs2-chan{ display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding:12px 16px !important; }
.hs2-thieu{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:15px; }
.hs2-thieu b{ font-size:16px; font-weight:800; }
.hs2-thieu-huy{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:18px; color:#fff; flex:none; }
.hs2-thieu-so{ font-weight:800; padding-right:16px; }
.hs2-thieu-xem{ border:0; background:none; font:inherit; font-size:14.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:6px; }
.hs2-thieu-ok{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.hs2-trang{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-left:auto; }
.hs2-trang-chu{ font-size:14px; }
.hs2-trang-nut{ display:flex; gap:8px; align-items:center; }
.hs2-trang-so{ min-width:40px; height:40px; padding:0 10px; border-radius:10px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.hs2-trang-so:not(:disabled):hover{ transform:translateY(-1px); }
.hs2-trang-so:disabled{ opacity:.4; cursor:not-allowed; }
.hs2-trang-cach{ padding:0 2px; letter-spacing:2px; }
.hs2-trong{ padding:16px; text-align:center; width:100%; }
.hs2-ma-dt{ display:none; font-size:12px; }

@media (max-width:1199.98px){ .hs2-nut-in span{ display:none; } .hs2-nut-in{ padding:9px 13px !important; } }
@media (max-width:1299.98px){ .hs2-nut .hs2-n span{ display:none; } .hs2-nut .hs2-n{ width:40px; height:38px; padding:0; justify-content:center; } .hs2-tt{ min-width:0; } }
@media (max-width:991.98px){ .hs2-nut-dau{ position:static; justify-content:flex-end; margin:-6px 0 14px; } .hs2-in{ margin-left:0; padding-left:0; } }
@media (max-width:767.98px){
  .hs2-chon-o{ flex:1 1 140px; }
  .hs2-in{ width:100%; } .hs2-nut-in{ flex:1; justify-content:center; } .hs2-nut-in span{ display:inline; font-size:13px; }
  .hs2-tich{ gap:10px 18px; } .hs2-o-tich{ font-size:14px; }
  .hs2-bang table, .hs2-bang tbody{ display:block; }
  .hs2-bang thead{ display:none; }
  .hs2-bang tr.hs2-dong{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px 10px; padding:12px; }
  .hs2-bang tr.hs2-dong > td{ display:block; border:0 !important; padding:0 !important; background:transparent !important; }
  .hs2-bang tr.hs2-dong > td.hs2-ma, .hs2-bang tr.hs2-dong > td:nth-child(3){ display:none !important; }
  .hs2-bang tr.hs2-dong > td:nth-child(2){ grid-column:1 / -1; }
  .hs2-bang tr.hs2-dong > td:nth-child(4){ grid-column:1; grid-row:2; align-self:center; }
  .hs2-bang tr.hs2-dong > td:nth-child(5){ grid-column:2; grid-row:2; justify-self:end; }
  .hs2-bang tr.hs2-dong > td:nth-child(6){ grid-column:1 / -1; }
  .hs2-nut{ justify-content:flex-start; }
  .hs2-nut .hs2-n span{ display:inline; } .hs2-nut .hs2-n{ width:auto; padding:7px 14px; }
  .hs2-bang tr.hs2-dong-hp{ display:block; } .hs2-bang tr.hs2-dong-hp > td{ display:block; }
  .hs2-ten{ min-width:0; } .hs2-ma-dt{ display:block; }
  .hs2-tt{ padding:5px 12px; font-size:13px; }
  .hs2-chan{ flex-direction:column; align-items:stretch; } .hs2-trang{ margin-left:0; justify-content:space-between; }
  .hs2-trang-so{ min-width:36px; height:36px; }
}

/* màu */
html.gd-sieu-anh-hung .hs2-them{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019) !important; border:1px solid #c98a12 !important; color:#2a1606 !important; box-shadow:0 10px 18px -12px rgba(170,110,0,.9); }
html.gd-sieu-anh-hung .hs2-lam-moi, html.gd-sieu-anh-hung .hs2-nut-in{ background:#fff !important; border:1px solid rgba(125,35,20,.16) !important; color:#2a1810 !important; box-shadow:0 6px 14px -12px rgba(90,25,10,.6); }
html.gd-sieu-anh-hung .hs2-nut-in:hover, html.gd-sieu-anh-hung .hs2-lam-moi:hover{ background:#fffaf3 !important; border-color:#e9b84c !important; }
html.gd-sieu-anh-hung .hs2-chon-o > i{ color:#3b2a20; }

html.gd-sieu-anh-hung .hs2-o-tich{ color:#2a1810; }
html.gd-sieu-anh-hung .hs2-o-tich .form-check-input{ border:1.5px solid #8a7b70; background-color:#fff; }
html.gd-sieu-anh-hung .hs2-o-tich .form-check-input:checked{ background-color:#c8102e; border-color:#c8102e; }
html.gd-sieu-anh-hung .hs2-dem{ background:#fff0f1; color:#c8102e; }
html.gd-sieu-anh-hung .hs2-bo-loc{ color:#c8102e; } html.gd-sieu-anh-hung .hs2-bo-loc:hover{ background:#fff0f1; }
html.gd-sieu-anh-hung .hs2-ma{ color:#2a1810; }
html.gd-sieu-anh-hung .hs2-av.lam{ background:linear-gradient(135deg, #79b8f2, #3d86d8); } html.gd-sieu-anh-hung .hs2-av.tim{ background:linear-gradient(135deg, #a98af0, #7552d6); }
html.gd-sieu-anh-hung .hs2-av.cam{ background:linear-gradient(135deg, #ffb35a, #f08a1c); } html.gd-sieu-anh-hung .hs2-av.hong{ background:linear-gradient(135deg, #f58bc0, #e05396); }
html.gd-sieu-anh-hung .hs2-av.xanh{ background:linear-gradient(135deg, #5fcfa3, #22a574); } html.gd-sieu-anh-hung .hs2-av.tim2{ background:linear-gradient(135deg, #c48cf5, #9b4fe0); }
html.gd-sieu-anh-hung .hs2-ten-chu b{ color:#1b120c; }
html.gd-sieu-anh-hung .hs2-thieu-ic{ color:#e07b00; }
html.gd-sieu-anh-hung .hs2-tem.do{ background:#ffe3e6; color:#c8102e; } html.gd-sieu-anh-hung .hs2-tem.vang{ background:#fff3d6; color:#9a5b00; }
html.gd-sieu-anh-hung button.hs2-tem.do:hover{ background:#ffd3d8; } html.gd-sieu-anh-hung button.hs2-tem.vang:hover{ background:#ffe9b8; }
html.gd-sieu-anh-hung .hs2-lop{ color:#2a1810; }
html.gd-sieu-anh-hung .hs2-sdt{ color:#2a1810; } html.gd-sieu-anh-hung .hs2-sdt:hover{ color:#c8102e; }
html.gd-sieu-anh-hung .hs2-thieu-chu{ color:#c0661a; }
html.gd-sieu-anh-hung .hs2-tt.xanh{ background:#e3f6e9; color:#17703d; } html.gd-sieu-anh-hung .hs2-tt.xanh i{ color:#1e9e52; }
html.gd-sieu-anh-hung .hs2-tt.lam{ background:#e4efff; color:#1d4fa8; } html.gd-sieu-anh-hung .hs2-tt.lam i{ color:#2a6fe0; }
html.gd-sieu-anh-hung .hs2-tt.cam{ background:#fff0d6; color:#8a4b00; } html.gd-sieu-anh-hung .hs2-tt.cam i{ color:#e07b00; }
html.gd-sieu-anh-hung .hs2-tt.vang{ background:#fff4d2; color:#8a5a00; } html.gd-sieu-anh-hung .hs2-tt.vang i{ color:#d98b0b; }
html.gd-sieu-anh-hung .hs2-tt.do{ background:#ffe5e8; color:#b10e25; } html.gd-sieu-anh-hung .hs2-tt.do i{ color:#e0213a; }
html.gd-sieu-anh-hung .hs2-tt.tim{ background:#f1e9ff; color:#5b2da0; } html.gd-sieu-anh-hung .hs2-tt.tim i{ color:#7d4ad8; }
html.gd-sieu-anh-hung .hs2-n{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; }
html.gd-sieu-anh-hung .hs2-n:hover{ box-shadow:0 8px 14px -10px rgba(90,25,10,.7); border-color:rgba(125,35,20,.3); }
html.gd-sieu-anh-hung .hs2-n.vang{ background:#fff7e6; border-color:#f1d590; color:#8a5200; }
html.gd-sieu-anh-hung .hs2-n.do{ background:#fff3f3; border-color:#f4c8cd; color:#c8102e; }
html.gd-sieu-anh-hung .hs2-n.vang-dac{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019); border-color:#c98a12; color:#2a1606; }
html.gd-sieu-anh-hung .hs2-them-menu[open] > .hs2-n{ background:#fff6ec; border-color:#e9b84c; }
html.gd-sieu-anh-hung .hs2-menu{ background:#fff; border:1px solid rgba(125,35,20,.14); box-shadow:0 18px 36px -18px rgba(60,15,5,.55); }
html.gd-sieu-anh-hung .hs2-muc-them{ color:#2a1810; } html.gd-sieu-anh-hung .hs2-muc-them:hover{ background:#fff6ec; color:#2a1810; }
html.gd-sieu-anh-hung .hs2-muc-them i{ color:#8a1a24; }
html.gd-sieu-anh-hung .hs2-muc-them.xoa, html.gd-sieu-anh-hung .hs2-muc-them.xoa i{ color:#c8102e; } html.gd-sieu-anh-hung .hs2-muc-them.xoa:hover{ background:#fff0f1; }
html.gd-sieu-anh-hung .hs2-muc-trong{ color:#8a7b70; }
html.gd-sieu-anh-hung #pane-hocsinh tr.mo-hp > td{ border-bottom:0 !important; }
html.gd-sieu-anh-hung #pane-hocsinh .hs2-dong-hp > td{ background:#fffdf9 !important; }
html.gd-sieu-anh-hung .hs2-hp{ background:linear-gradient(90deg, #fff1f1, #fff8ef); border:1px solid #f6d3cc; }
html.gd-sieu-anh-hung .hs2-hp-chu{ color:#a3122a; } html.gd-sieu-anh-hung .hs2-hp-chu > i{ color:#d81a32; }
html.gd-sieu-anh-hung .hs2-chan{ background:#fff !important; }
html.gd-sieu-anh-hung .hs2-thieu{ color:#1b120c; }
html.gd-sieu-anh-hung .hs2-thieu-huy{ background:radial-gradient(circle at 35% 30%, #ff5a68, #c8102e 70%); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #e9b84c, 0 6px 12px -6px rgba(160,10,30,.8); }
html.gd-sieu-anh-hung .hs2-thieu-so{ color:#c8102e; border-right:1px solid rgba(125,35,20,.18); }
html.gd-sieu-anh-hung .hs2-thieu-xem{ color:#1d5fd0; } html.gd-sieu-anh-hung .hs2-thieu-xem:hover{ color:#c8102e; }
html.gd-sieu-anh-hung .hs2-thieu-ok{ color:#1e7a46; }
html.gd-sieu-anh-hung .hs2-trang-chu{ color:#5b4a41; }
html.gd-sieu-anh-hung .hs2-trang-so{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; }
html.gd-sieu-anh-hung .hs2-trang-so.on{ background:linear-gradient(180deg, #e0213a, #b10e25); border-color:transparent; color:#fff; box-shadow:0 8px 16px -10px rgba(177,14,37,.9); }
html.gd-sieu-anh-hung .hs2-trang-cach{ color:#5b4a41; }
html.gd-sieu-anh-hung .hs2-trong{ color:#7a6a60; }
html.gd-sieu-anh-hung .hs2-ma-dt{ color:#8a7b70; }
@media (max-width:767.98px){ html.gd-sieu-anh-hung .hs2-bang tr.hs2-dong{ border-bottom:1px solid rgba(125,35,20,.10); } html.gd-sieu-anh-hung .hs2-in{ border-left:0; } }
@media (prefers-reduced-motion:reduce){ .hs2-n, .hs2-menu, .hs2-hp, .nvs-the, .nvs-the-huy{ animation:none !important; transition:none !important; } }


/* ───────── Lớp học ───────── */
.lh2-khoi{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin:-4px 0 12px; }
.lh2-khoi > span{ font-size:13.5px; font-weight:700; margin-right:4px; }
.lh2-khoi-nut{ min-width:44px; padding:6px 13px; border-radius:999px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; transition:transform .2s; }
.lh2-khoi-nut:hover{ transform:translateY(-1px); }
.lh2-luoi{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px; }
.lh2-the{ display:flex; flex-direction:column; border-radius:16px; overflow:hidden; cursor:pointer;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; animation:hs2Mo .45s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(min(var(--i, 0), 12) * 40ms); }
.lh2-the:hover{ transform:translateY(-3px); }
.lh2-the-dau{ position:relative; display:flex; align-items:center; gap:10px; padding:11px 14px; }
.lh2-khien{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:14px; position:relative; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.lh2-the:hover .lh2-khien{ transform:rotate(-14deg) scale(1.06); }
.lh2-ten{ flex:0 1 auto; margin:0; font-size:22px; font-weight:800; line-height:1.1; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.lh2-hom-nay{ margin-left:auto; flex:none; font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.lh2-hom-nay i{ font-size:7px; margin-right:4px; vertical-align:2px; animation:lh2Nhay 1.6s ease-in-out infinite; }
@keyframes lh2Nhay{ 50%{ opacity:.25; } }
.lh2-than{ padding:12px 16px 4px; display:flex; flex-direction:column; }
.lh2-si-so{ display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:12px; padding-bottom:12px; }
.lh2-si-so-ic{ font-size:30px; line-height:1; }
.lh2-si-so-so{ display:flex; flex-direction:column; line-height:1.05; }
.lh2-si-so-so b{ font-size:30px; font-weight:900; letter-spacing:-.02em; }
.lh2-si-so-so small{ font-size:14px; font-weight:500; }
.lh2-phu{ display:flex; flex-direction:column; gap:6px; justify-self:end; }
.lh2-phu-o{ display:inline-flex; align-items:center; gap:7px; padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.lh2-phu-o b{ font-weight:800; font-size:13px; }
.lh2-nguoi{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14.5px; min-width:0; }
.lh2-vai{ width:26px; font-size:12px; font-weight:700; flex:none; }
.lh2-av{ width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; }
.lh2-nguoi-ten{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lh2-lich{ display:flex; flex-direction:column; gap:4px; padding:10px 0 12px; margin-top:4px; font-size:14px; }
.lh2-lich > div{ display:grid; grid-template-columns:22px auto 1fr; align-items:center; gap:10px; }
.lh2-lich b{ font-weight:800; white-space:nowrap; } .lh2-lich span{ font-weight:500; padding-left:10px; white-space:nowrap; }
.lh2-ca-trong{ display:flex !important; gap:10px; font-size:13px; }
.lh2-nut{ display:flex; gap:8px; padding:0 14px 14px; margin-top:auto; }
.lh2-xem{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 12px; border-radius:11px; font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; transition:box-shadow .25s, transform .25s; }
.lh2-xem i{ transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.lh2-the:hover .lh2-xem i{ transform:translateX(4px); }
.lh2-dd{ width:44px; flex:none; border-radius:11px; font-size:16px; cursor:pointer; display:grid; place-items:center; transition:transform .2s; }
.lh2-dd:hover{ transform:translateY(-1px); }
.lh2-ghi{ display:flex; align-items:center; gap:10px; margin-top:16px; padding:10px 14px; border-radius:12px; font-size:13.5px; }
@media (min-width:1400px){ .lh2-luoi{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:575.98px){ .lh2-luoi{ grid-template-columns:minmax(0, 1fr); } .lh2-ten{ font-size:20px; } }

html.gd-sieu-anh-hung .lh2-khoi > span{ color:#7a6a60; }
html.gd-sieu-anh-hung .lh2-khoi-nut{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; }
html.gd-sieu-anh-hung .lh2-khoi-nut.on{ background:linear-gradient(180deg, #ffe48a, #f6c33f 55%, #e5a019); border-color:#c98a12; color:#2a1606; }
html.gd-sieu-anh-hung .lh2-the{ background:#fff; border:1px solid rgba(125,35,20,.12); box-shadow:0 16px 32px -28px rgba(90,25,10,.85); }
html.gd-sieu-anh-hung .lh2-the:hover{ box-shadow:0 22px 38px -24px rgba(90,25,10,.75); border-color:rgba(200,140,40,.5); }
html.gd-sieu-anh-hung .lh2-the-dau{ background:linear-gradient(135deg, #7d0712 0%, #a60f1e 55%, #7a0611 100%); box-shadow:inset 0 -2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12); }
html.gd-sieu-anh-hung .lh2-khien{ color:#fff; background:radial-gradient(circle, #1d4fb8 0 34%, #fff 35% 47%, #d81a32 48% 66%, #fff 67% 78%, #d81a32 79%);
  box-shadow:0 0 0 2px #f4c64f, 0 4px 10px rgba(0,0,0,.35); }
html.gd-sieu-anh-hung .lh2-khien i{ font-size:11px; }
html.gd-sieu-anh-hung .lh2-ten{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3); }
html.gd-sieu-anh-hung .lh2-hom-nay{ background:#fff4d2; color:#9a2a00; }
html.gd-sieu-anh-hung .lh2-hom-nay i{ color:#e0213a; }
html.gd-sieu-anh-hung .lh2-si-so{ border-bottom:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .lh2-si-so-ic{ color:#f39a1e; }
html.gd-sieu-anh-hung .lh2-si-so-so b{ color:#1b120c; } html.gd-sieu-anh-hung .lh2-si-so-so small{ color:#4a372d; }
html.gd-sieu-anh-hung .lh2-phu-o{ background:#fbf6f1; color:#4a372d; }
html.gd-sieu-anh-hung .lh2-phu-o.vang i{ color:#f0a020; } html.gd-sieu-anh-hung .lh2-phu-o.vang b{ color:#a35f00; }
html.gd-sieu-anh-hung .lh2-phu-o.do i, html.gd-sieu-anh-hung .lh2-phu-o.do b{ color:#d81a32; }
html.gd-sieu-anh-hung .lh2-vai{ color:#8a7b70; }
html.gd-sieu-anh-hung .lh2-av.lam{ background:linear-gradient(135deg, #3aa0e8, #1c6fc4); } html.gd-sieu-anh-hung .lh2-av.xanh{ background:linear-gradient(135deg, #34c07c, #149058); }
html.gd-sieu-anh-hung .lh2-nguoi-ten{ color:#1b120c; }
html.gd-sieu-anh-hung .lh2-lich{ border-top:1px solid rgba(125,35,20,.10); color:#1b120c; }
html.gd-sieu-anh-hung .lh2-lich i{ color:#3b2a20; }
html.gd-sieu-anh-hung .lh2-ca-trong{ color:#a3958c; }
html.gd-sieu-anh-hung .lh2-xem{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d); border:1px solid #d49a1c; color:#2a1606; box-shadow:0 8px 16px -12px rgba(170,110,0,.9), inset 0 1px 0 rgba(255,255,255,.6); }
html.gd-sieu-anh-hung .lh2-xem:hover{ box-shadow:0 12px 20px -12px rgba(170,110,0,1), inset 0 1px 0 rgba(255,255,255,.6); }
html.gd-sieu-anh-hung .lh2-dd{ background:#fff; border:1px solid rgba(125,35,20,.2); color:#c8102e; }
html.gd-sieu-anh-hung .lh2-dd:hover{ background:#fff0f1; }
html.gd-sieu-anh-hung .lh2-ghi{ background:#fffaf2; border:1px solid #f3e2c4; color:#5b4a41; }
html.gd-sieu-anh-hung .lh2-ghi i{ color:#d98b0b; }
@media (prefers-reduced-motion:reduce){ .lh2-the, .lh2-hom-nay i, .lh2-khien, .lh2-xem i{ animation:none !important; transition:none !important; } }

/* ───────── Kết quả học tập ───────── */
.kq2-ai{ padding:12px 16px !important; margin-bottom:14px; }
.kq2-ai-hang{ display:grid; grid-template-columns:minmax(330px, 1.7fr) repeat(3, minmax(120px, 1fr)) auto; gap:14px; align-items:end; }
.kq2-ai-dau{ display:flex; align-items:center; gap:14px; align-self:center; min-width:0; }
.kq2-ai-dau > div{ display:flex; flex-direction:column; min-width:0; }
.kq2-ai-dau b{ font-size:17px; font-weight:800; white-space:nowrap; } .kq2-ai-dau small{ font-size:13px; }
.kq2-ai-dau small i{ cursor:help; margin-left:3px; }
.kq2-ai-huy{ width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:20px; }
.kq2-ai-o{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.kq2-ai-o .form-label{ margin:0; font-size:13px; font-weight:600; }
.kq2-ai-xem{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 34px !important; font-size:16px !important; font-weight:800 !important; border-radius:12px !important; white-space:nowrap; }
#nxaLopKq:not(:empty){ margin-top:12px; }
.kq2-tim{ margin-bottom:16px; }
.kq2-hang{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.kq2-o{ flex:0 1 420px; min-width:240px; position:relative; }
.kq2-o .form-control{ padding-right:40px !important; }
.kq2-xoa{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:0; background:none; display:grid; place-items:center; cursor:pointer; z-index:2; }
.kq2-xoa[hidden]{ display:none; }
.kq2-lop{ flex:0 1 220px; width:auto !important; margin-left:auto; }
.kq2-xem{ font-weight:800 !important; padding:10px 30px !important; border-radius:12px !important; white-space:nowrap; font-size:15.5px !important; }
.kq2-goi{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; }
.kq2-goi:empty{ display:none; }
.kq2-goi-nhan{ font-size:13px; font-weight:700; margin-right:4px; }
.kq2-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border-radius:999px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:transform .2s; }
.kq2-chip:hover{ transform:translateY(-1px); }
.kq2-chip small{ font-size:11px; opacity:.7; }
.kq2-chip-av{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:800; }
@media (max-width:1199.98px){ .kq2-ai-hang{ grid-template-columns:repeat(3, minmax(0, 1fr)) auto; } .kq2-ai-dau{ grid-column:1 / -1; } }
@media (max-width:767.98px){ .kq2-ai-hang{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .kq2-ai-xem{ width:100%; } .kq2-o{ flex:1 1 100%; } .kq2-xem{ flex:1; } .kq2-lop{ flex:1 1 100%; margin-left:0; } }

/* Trang kết quả 1 học sinh (htmlKetQuaNhanVien_) */
.kq3-the-hs{ padding:16px 18px !important; margin-bottom:16px; animation:hs2Mo .45s cubic-bezier(.22,1,.36,1) both; }
.kq3-dau{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:14px; }
.kq3-av{ width:70px; height:70px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:26px; font-weight:800; }
.kq3-ten{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kq3-ten b{ font-size:27px; font-weight:800; line-height:1.15; }
.kq3-ma{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:16px; font-weight:500; }
.kq3-ma i{ font-style:normal; font-size:10px; opacity:.6; }
.kq3-thang{ border:0; background:none; font:inherit; font-weight:600; padding:0 18px 0 2px; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d4fa8' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; background-size:10px; }
.kq3-thang:focus-visible{ outline:2px solid #e9b84c; outline-offset:2px; border-radius:4px; }
.kq3-nut{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.kq3-n{ display:inline-flex; align-items:center; gap:9px; padding:9px 18px !important; border-radius:11px !important; font-weight:700 !important; font-size:14.5px !important; }
.kq3-o-luoi{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.kq3-o{ display:flex; align-items:center; gap:18px; padding:14px 18px; border-radius:14px; min-width:0; }
.kq3-o-huy{ width:64px; height:64px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:26px; }
.kq3-o > div{ display:flex; flex-direction:column; min-width:0; }
.kq3-o-nhan{ font-size:16px; font-weight:600; }
.kq3-o b{ font-size:32px; font-weight:900; line-height:1.15; letter-spacing:-.01em; }
.kq3-lech{ font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.kq3-ba{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap:16px; margin-bottom:16px; }
.kq3-khung{ padding:14px 16px !important; min-width:0; animation:hs2Mo .45s cubic-bezier(.22,1,.36,1) .08s both; }
.kq3-khung-dau{ display:flex; align-items:center; gap:10px; margin:0 0 12px !important; font-size:18px !important; font-weight:800 !important; }
.kq3-khung-dau small{ font-size:13px; font-weight:600; }
.kq3-xem-het{ margin-left:auto; border:0; background:none; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.kq3-nx{ display:flex; gap:14px; padding:12px 14px; border-radius:12px; margin-bottom:10px; }
.kq3-nx:last-child{ margin-bottom:0; }
.kq3-nx > span{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:17px; color:#fff; }
.kq3-nx b{ font-size:15.5px; font-weight:800; } .kq3-nx p{ margin:2px 0 0; font-size:14px; line-height:1.45; }
.kq3-bieu-do{ width:100%; height:auto; display:block; }
.kq3-bieu-do .luoi{ stroke-width:1; } .kq3-bieu-do .truc{ font-size:11px; font-weight:600; }
.kq3-bieu-do .duong{ fill:none; stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:900; stroke-dashoffset:900; animation:kq3Ve 1.2s cubic-bezier(.22,1,.36,1) .2s forwards; }
.kq3-bieu-do circle{ stroke-width:2.5; } .kq3-bieu-do .nhan{ font-size:12px; font-weight:800; }
@keyframes kq3Ve{ to{ stroke-dashoffset:0; } }
.kq3-trong{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px 10px; text-align:center; font-size:13.5px; }
.kq3-trong i{ font-size:26px; opacity:.5; }
.kq3-bt-nhom{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:800; margin:4px 0 6px; }
.kq3-bt-dong{ display:grid; grid-template-columns:36px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; margin-bottom:8px; }
.kq3-bt-lich{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:16px; }
.kq3-bt-chu{ display:flex; flex-direction:column; min-width:0; }
.kq3-bt-chu b{ font-size:14px; font-weight:700; } .kq3-bt-chu b span{ opacity:.5; }
.kq3-bt-chu small{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kq3-bt-tt{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.kq3-ls{ margin-bottom:16px; }
.kq3-bang{ border-radius:12px !important; }
.kq3-bang table{ font-size:14.5px; }
.kq3-ngay{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.kq3-so{ font-weight:700; font-variant-numeric:tabular-nums; }
.kq3-dd{ display:inline-flex; align-items:center; gap:8px; font-weight:600; white-space:nowrap; }
.kq3-tem{ font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px; vertical-align:1px; }
:is(.kq3-ls, #kqLichBt):not(.mo-het) .kq3-an{ display:none; }
.kq3-them{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:10px; padding:9px; border-radius:11px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.kq3-trong-o{ padding:20px !important; }
@media (max-width:1299.98px){ .kq3-ba{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .kq3-ba > :last-child{ grid-column:1 / -1; } }
@media (max-width:767.98px){
  .kq3-o-luoi, .kq3-ba{ grid-template-columns:minmax(0, 1fr); } .kq3-ba > :last-child{ grid-column:auto; }
  .kq3-av{ width:54px; height:54px; font-size:20px; } .kq3-ten b{ font-size:22px; } .kq3-nut{ margin-left:0; width:100%; } .kq3-n{ flex:1; justify-content:center; }
  .kq3-o-huy{ width:50px; height:50px; font-size:20px; } .kq3-o b{ font-size:26px; }
}

html.gd-sieu-anh-hung .kq2-ai{ background:linear-gradient(90deg, #fffbf1, #fff) !important; border:1px solid #f1d590 !important; }
html.gd-sieu-anh-hung .kq2-ai-huy{ background:radial-gradient(circle at 35% 30%, #ffe27a, #f2a516 72%); color:#fff; box-shadow:0 0 0 3px #fff3cf, 0 8px 16px -8px rgba(200,120,0,.8); }
html.gd-sieu-anh-hung .kq2-ai-dau b{ color:#1b120c; } html.gd-sieu-anh-hung .kq2-ai-dau small, html.gd-sieu-anh-hung .kq2-ai-o .form-label{ color:#5b4a41; }
html.gd-sieu-anh-hung .kq2-ai-xem, html.gd-sieu-anh-hung .kq2-xem{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d) !important; border:1px solid #d49a1c !important; color:#2a1606 !important; box-shadow:0 8px 16px -12px rgba(170,110,0,.9); }
html.gd-sieu-anh-hung .kq2-ai-xem i{ color:#c8102e; }
html.gd-sieu-anh-hung .kq2-xoa{ color:#8a7b70; } html.gd-sieu-anh-hung .kq2-xoa:hover{ background:#f5efe8; color:#2a1810; }
html.gd-sieu-anh-hung .kq2-goi-nhan{ color:#7a6a60; }
html.gd-sieu-anh-hung .kq2-chip{ background:#fff; border:1px solid rgba(125,35,20,.14); color:#2a1810; }
html.gd-sieu-anh-hung .kq2-chip:hover{ border-color:#f0c56b; background:#fffaf0; }
html.gd-sieu-anh-hung .kq2-chip-av{ background:#ffe3e6; color:#c8102e; } html.gd-sieu-anh-hung .kq2-chip.vua .kq2-chip-av{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung .kq3-av{ background:#ffe1e3; color:#c8102e; box-shadow:0 0 0 4px #fff3f3; }
html.gd-sieu-anh-hung .kq3-ten b{ color:#1b120c; }
html.gd-sieu-anh-hung .kq3-ma{ color:#1d4fa8; } html.gd-sieu-anh-hung .kq3-thang{ color:#1d4fa8; }
html.gd-sieu-anh-hung .kq3-n{ background:#fff !important; border:1px solid rgba(125,35,20,.18) !important; color:#2a1810 !important; }
html.gd-sieu-anh-hung .kq3-n:hover{ border-color:#e9b84c !important; background:#fffaf3 !important; }
html.gd-sieu-anh-hung .kq3-n.vang{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d) !important; border-color:#d49a1c !important; color:#2a1606 !important; }
html.gd-sieu-anh-hung .kq3-n.vang i{ color:#c8102e; }
html.gd-sieu-anh-hung .kq3-n.do{ color:#c8102e !important; }
html.gd-sieu-anh-hung .kq3-o{ border:1px solid; }
html.gd-sieu-anh-hung .kq3-o.xanh{ background:linear-gradient(135deg, #f3fbf6, #e8f7ee); border-color:#cdebd8; } html.gd-sieu-anh-hung .kq3-o.xanh .kq3-o-huy{ background:#d6f2e0; color:#1e8a4c; } html.gd-sieu-anh-hung .kq3-o.xanh b{ color:#1e8a4c; }
html.gd-sieu-anh-hung .kq3-o.vang{ background:linear-gradient(135deg, #fffbf0, #fff4dc); border-color:#f3e0b0; } html.gd-sieu-anh-hung .kq3-o.vang .kq3-o-huy{ background:radial-gradient(circle at 35% 30%, #ffe27a, #f2a516 72%); color:#fff; } html.gd-sieu-anh-hung .kq3-o.vang b{ color:#1b120c; }
html.gd-sieu-anh-hung .kq3-o.do{ background:linear-gradient(135deg, #fff6f6, #ffecec); border-color:#f6cfd3; } html.gd-sieu-anh-hung .kq3-o.do .kq3-o-huy{ background:radial-gradient(circle at 35% 30%, #ff6b78, #d81a32 72%); color:#fff; } html.gd-sieu-anh-hung .kq3-o.do b{ color:#d81a32; }
html.gd-sieu-anh-hung .kq3-o-nhan{ color:#2a1810; }
html.gd-sieu-anh-hung .kq3-lech{ color:#7a6a60; } html.gd-sieu-anh-hung .kq3-lech.len{ color:#1e7a46; } html.gd-sieu-anh-hung .kq3-lech.xuong{ color:#c8102e; }
html.gd-sieu-anh-hung .kq3-khung-dau{ color:#1b120c !important; } html.gd-sieu-anh-hung .kq3-khung-dau > i{ color:#d81a32; } html.gd-sieu-anh-hung .kq3-khung-dau small{ color:#8a7b70; }
html.gd-sieu-anh-hung .kq3-xem-het{ color:#c8102e; }
html.gd-sieu-anh-hung .kq3-nx.xanh{ background:#effaf3; } html.gd-sieu-anh-hung .kq3-nx.xanh > span{ background:linear-gradient(135deg, #34c07c, #149058); } html.gd-sieu-anh-hung .kq3-nx.xanh b{ color:#17703d; }
html.gd-sieu-anh-hung .kq3-nx.lam{ background:#eef5ff; } html.gd-sieu-anh-hung .kq3-nx.lam > span{ background:linear-gradient(135deg, #4a9af0, #1d63d8); } html.gd-sieu-anh-hung .kq3-nx.lam b{ color:#1d4fa8; }
html.gd-sieu-anh-hung .kq3-nx p{ color:#3b2a20; }
html.gd-sieu-anh-hung .kq3-bieu-do .luoi{ stroke:rgba(125,35,20,.09); } html.gd-sieu-anh-hung .kq3-bieu-do .truc{ fill:#7a6a60; }
html.gd-sieu-anh-hung .kq3-bieu-do .duong{ stroke:#22a05c; } html.gd-sieu-anh-hung .kq3-bieu-do circle{ fill:#22a05c; stroke:#fff; } html.gd-sieu-anh-hung .kq3-bieu-do .nhan{ fill:#1b120c; }
html.gd-sieu-anh-hung .kq3-trong{ color:#8a7b70; }
html.gd-sieu-anh-hung .kq3-bt-nhom{ color:#1d4fa8; }
html.gd-sieu-anh-hung .kq3-bt-dong{ background:#fff; border:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .kq3-bt-lich{ background:#fff0f1; color:#d81a32; }
html.gd-sieu-anh-hung .kq3-bt-chu b{ color:#1b120c; } html.gd-sieu-anh-hung .kq3-bt-chu small{ color:#7a6a60; }
html.gd-sieu-anh-hung .kq3-bt-tt.xanh{ background:#e3f6e9; color:#17703d; } html.gd-sieu-anh-hung .kq3-bt-tt.vang{ background:#fff3d6; color:#9a5b00; }
html.gd-sieu-anh-hung .kq3-bt-tt.do{ background:#ffe5e8; color:#b10e25; } html.gd-sieu-anh-hung .kq3-bt-tt.lam{ background:#e4efff; color:#1d4fa8; }
html.gd-sieu-anh-hung .kq3-dd.xanh i{ color:#1e9e52; } html.gd-sieu-anh-hung .kq3-dd.vang i{ color:#e08a00; } html.gd-sieu-anh-hung .kq3-dd.lam i{ color:#2a6fe0; }
html.gd-sieu-anh-hung .kq3-dd.do i{ color:#d81a32; } html.gd-sieu-anh-hung .kq3-dd.xam i{ color:#a3958c; }
html.gd-sieu-anh-hung .kq3-dd{ color:#1b120c; } html.gd-sieu-anh-hung .kq3-dd.lam{ color:#1d4fa8; } html.gd-sieu-anh-hung .kq3-dd.do{ color:#b10e25; }
html.gd-sieu-anh-hung .kq3-tem{ background:#fff3d6; color:#9a5b00; }
html.gd-sieu-anh-hung .kq3-them{ background:#fff; border:1px dashed rgba(125,35,20,.25); color:#8a1a24; } html.gd-sieu-anh-hung .kq3-them:hover{ background:#fff6ec; }
html.gd-sieu-anh-hung #appShell#appShell #pane-ketqua .kq3-bang > .table > thead > tr > th{ background:#fbf1e6 !important; color:#2a1810 !important; font-size:14px !important; padding:10px 14px !important; }
@media (prefers-reduced-motion:reduce){ .kq3-the-hs, .kq3-khung, .kq3-bieu-do .duong{ animation:none !important; stroke-dashoffset:0 !important; } }

/* ───────── Bài giảng ───────── */
#pane-baigiang{ position:relative; }
.bg2-dau{ position:absolute; top:16px; right:24px; z-index:2; display:flex; align-items:flex-end; gap:12px; }
.bg2-chon-khoa{ display:flex; flex-direction:column; gap:4px; }
.bg2-chon-khoa .form-label{ margin:0; font-size:13.5px; font-weight:600; }
.bg2-chon-khoa .form-select{ min-width:270px; font-weight:700 !important; }
.bg2-nut-anh{ display:inline-flex; align-items:center; gap:10px; padding:10px 18px !important; border-radius:12px !important; font-weight:700 !important; font-size:15px !important; white-space:nowrap; }
.bg2-khoa{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; margin-bottom:16px; }
.bg2-khoa:empty{ display:none; }
.bg2-khoa-the{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:16px; font:inherit; text-align:left; cursor:pointer; min-width:0;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s; }
.bg2-khoa-the:hover{ transform:translateY(-2px); }
.bg2-khoa-anh{ width:84px; height:56px; flex:none; border-radius:11px; overflow:hidden; display:grid; place-items:center; font-size:22px; }
.bg2-khoa-anh img{ width:100%; height:100%; object-fit:cover; }
.bg2-khoa-ten{ display:flex; flex-direction:column; min-width:0; }
.bg2-khoa-ten b{ font-size:14.5px; line-height:1.3; } .bg2-khoa-ten small{ font-size:12px; }
.bg2-luoi{ display:grid; grid-template-columns:360px minmax(0, 1fr); gap:18px; align-items:start; }
.bg2-luoi[hidden]{ display:none; }
.bg2-the{ padding:18px !important; display:flex; flex-direction:column; gap:6px; position:sticky; top:calc(var(--head, 88px) + 12px); }
.bg2-the .form-label{ margin:8px 0 2px; font-size:14.5px; font-weight:700; }
.bg2-sao{ font-weight:800; }
.bg2-the-dau{ display:flex; align-items:center; gap:12px; margin-bottom:6px; } .bg2-the-dau b{ font-size:19px; font-weight:800; }
.bg2-cong{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:15px; color:#fff; flex:none; }
.bg2-hai{ display:grid; grid-template-columns:1.25fr 1fr; gap:12px; }
.bg2-o-link{ position:relative; }
.bg2-o-link > i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:14px; pointer-events:none; z-index:1; }
.bg2-o-link .form-control{ padding-left:38px !important; }
.bg2-ghi{ display:flex; gap:10px; margin:12px 0 4px; font-size:12.5px; line-height:1.45; }
.bg2-ghi > i{ font-size:16px; margin-top:1px; }
.bg2-ghi > div > b{ display:block; font-size:13px; } .bg2-ghi > div > span{ display:block; }
.bg2-xem-truoc{ display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; margin-top:6px; }
.bg2-xem-truoc:empty{ display:none; }
.bg2-xem-truoc img{ width:96px; border-radius:8px; }
#bgThemMsg:empty{ display:none; }
.bg2-nut, .bg2-nut-vang{ display:inline-flex !important; align-items:center; justify-content:center; gap:9px; font-weight:800 !important; border-radius:12px !important; }
#bgThemBtn{ margin-top:10px; padding:12px !important; font-size:16.5px !important; }
.bg2-phai{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.bg2-banner{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1600 / 400; min-height:110px; }
.bg2-banner img#bgAnhBiaPreview{ width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block; }
.bg2-anh-trong{ position:absolute; inset:0; display:flex; align-items:center; gap:20px; padding:16px 28px; }
.bg2-anh-trong[hidden]{ display:none; }
.bg2-banner-logo{ width:76px; height:76px; flex:none; border-radius:50%; display:grid; place-items:center; }
.bg2-banner-logo img{ width:84%; }
.bg2-anh-trong b{ display:block; font-size:clamp(20px, 2.4vw, 34px); font-weight:900; line-height:1.1; text-transform:uppercase; letter-spacing:.01em; }
.bg2-anh-trong small{ display:block; font-size:13px; margin-top:6px; max-width:520px; }
.bg2-banner-msg{ position:absolute; right:12px; bottom:10px; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; }
.bg2-banner-msg:empty{ display:none; }
.bg2-cong-cu{ display:flex; gap:10px; }
.bg2-tim{ flex:1; }
.bg2-tom{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.bg2-tom-so{ display:flex; gap:8px; flex-wrap:wrap; }
.bg2-tom-so span{ padding:6px 12px; border-radius:11px; font-size:13.5px; }
.bg2-tom-so b{ font-size:16px; font-weight:900; }
.bg2-che-do-cum{ display:flex; gap:6px; }
.bg2-che-do{ padding:7px 14px; border-radius:11px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.bg2-nhom{ border-radius:16px; margin-bottom:14px; overflow:hidden; animation:hs2Mo .45s cubic-bezier(.22,1,.36,1) both; }
.bg2-nhom-dau{ width:100%; display:flex; align-items:center; gap:14px; padding:12px 18px; border:0; font:inherit; text-align:left; cursor:pointer; }
.bg2-nhom-huy{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center; font-size:15px; color:#fff; flex:none; }
.bg2-nhom-dau b{ font-size:18px; font-weight:800; } .bg2-nhom-so{ font-size:16px; font-weight:500; flex:1; }
.bg2-nhom-mui{ font-size:15px; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.bg2-nhom.dong .bg2-nhom-mui{ transform:rotate(180deg); }
.bg2-nhom-than{ display:flex; flex-direction:column; gap:12px; padding:12px 14px 14px; }
.bg2-nhom.dong .bg2-nhom-than{ display:none; }
.bg2-buoi{ border-radius:14px; padding:12px; transition:box-shadow .25s, border-color .25s; }
.bg2-buoi.an .bg2-anh img, .bg2-buoi.an .bg2-buoi-chu{ opacity:.6; }
.bg2-buoi-dong{ display:grid; grid-template-columns:160px minmax(0, 1fr) auto auto; gap:16px; align-items:start; }
.bg2-anh{ position:relative; width:160px; height:90px; border-radius:10px; overflow:hidden; border:0; padding:0; cursor:pointer; background:#2a1810; }
.bg2-anh img{ width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.bg2-anh > i{ position:absolute; inset:0; margin:auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:14px; color:#c8102e; background:#fff; box-shadow:0 0 0 3px rgba(200,16,46,.85), 0 4px 10px rgba(0,0,0,.45); padding-left:2px; }
.bg2-anh-so{ position:absolute; left:8px; bottom:6px; font-size:12.5px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.bg2-anh:hover img{ transform:scale(1.08); }
.bg2-buoi-chu{ display:flex; flex-direction:column; gap:5px; min-width:0; padding-top:2px; }
.bg2-buoi-chu b{ font-size:17px; font-weight:800; line-height:1.3; }
.bg2-buoi-chu small{ font-size:13.5px; display:block; line-height:1.45; }
.bg2-buoi-chu small > i:first-child{ width:16px; margin-right:5px; text-align:center; }
.bg2-cham{ opacity:.5; margin:0 4px; }
.bg2-tt{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700; white-space:nowrap; margin-top:4px; }
.bg2-buoi-nut{ display:flex; gap:8px; flex-wrap:nowrap; }
.bg2-n{ min-width:38px; height:38px; padding:0 13px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:transform .2s, box-shadow .2s, background-color .2s; }
.bg2-n:hover{ transform:translateY(-1px); }
.bg2-n:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.bg2-sua{ margin-top:12px; padding:14px; border-radius:12px; animation:hs2Mo .3s cubic-bezier(.22,1,.36,1) both; }
.bg2-sua-luoi{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.bg2-sua-luoi label{ display:flex; flex-direction:column; gap:4px; margin:0; font-size:13px; font-weight:700; }
.bg2-sua-rong{ grid-column:1 / -1; }
.bg2-sua-nut{ display:flex; gap:8px; margin-top:12px; } .bg2-sua-nut .btn{ padding:8px 20px !important; }
.bg2-tl{ margin-top:12px; padding:12px 14px; border-radius:12px; animation:hs2Mo .3s cubic-bezier(.22,1,.36,1) both; }
.bg2-tl-dau{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.bg2-tl-dau b{ font-size:15.5px; font-weight:800; display:inline-flex; align-items:center; gap:8px; }
.bg2-tl-them{ padding:7px 16px !important; font-size:14px !important; }
.bg2-tl-dong{ display:grid; grid-template-columns:40px minmax(0, 1fr) auto auto; align-items:center; gap:12px; padding:9px 4px; }
.bg2-tl-ic{ width:40px; height:40px; border-radius:9px; display:grid; place-items:center; font-size:21px; color:var(--mau); background:color-mix(in srgb, var(--mau) 10%, #fff); }
.bg2-tl-ten{ display:flex; flex-direction:column; min-width:0; }
.bg2-tl-ten b{ font-size:14.5px; font-weight:700; overflow-wrap:anywhere; } .bg2-tl-ten small{ font-size:12.5px; }
.bg2-tl-trong{ font-size:13.5px; padding:6px 2px; }
.bg2-tl-msg{ display:block; font-size:12.5px; margin-top:6px; } .bg2-tl-msg:empty{ display:none; }
.bg2-trong{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:34px 16px !important; border-radius:16px; }
.bg2-trong i{ font-size:30px; opacity:.5; }
@media (max-width:1599.98px){ .bg2-buoi-dong{ grid-template-columns:150px minmax(0, 1fr) auto; } .bg2-anh{ width:150px; height:84px; }
  .bg2-buoi-nut{ grid-column:2 / -1; flex-wrap:wrap; } .bg2-tt{ justify-self:end; } }
@media (max-width:1399.98px){ .bg2-luoi{ grid-template-columns:320px minmax(0, 1fr); } .bg2-buoi-nut .bg2-n span{ display:none; } .bg2-buoi-nut .bg2-n{ padding:0 11px; } }
@media (max-width:1199.98px){ .bg2-luoi{ grid-template-columns:minmax(0, 1fr); } .bg2-the{ position:static; order:2; } .bg2-buoi-nut .bg2-n span{ display:inline; } }
@media (max-width:991.98px){ .bg2-dau{ position:static; margin:-6px 0 14px; justify-content:flex-end; flex-wrap:wrap; } .bg2-chon-khoa{ flex:1 1 220px; } .bg2-chon-khoa .form-select{ min-width:0; } }
@media (max-width:575.98px){
  .bg2-buoi-dong{ grid-template-columns:110px minmax(0, 1fr); gap:10px; } .bg2-anh{ width:110px; height:62px; }
  .bg2-tt{ grid-column:2; justify-self:start; margin-top:0; } .bg2-buoi-nut{ grid-column:1 / -1; } .bg2-buoi-nut .bg2-n span{ display:none; }
  .bg2-buoi-chu b{ font-size:15px; } .bg2-tl-dong{ grid-template-columns:36px minmax(0, 1fr) auto auto; } .bg2-tl-dong .bg2-n span{ display:none; }
  .bg2-anh-trong{ padding:12px 16px; gap:12px; } .bg2-banner-logo{ width:52px; height:52px; } .bg2-anh-trong small{ display:none; }
  .bg2-sua-luoi{ grid-template-columns:minmax(0, 1fr); }
  .bg2-nhom-dau{ padding:10px 12px; gap:10px; } .bg2-nhom-dau b{ font-size:16px; white-space:nowrap; } .bg2-nhom-so{ font-size:14px; white-space:nowrap; } .bg2-nhom-than{ padding:10px 8px; }
}
html.gd-sieu-anh-hung .bg2-chon-khoa .form-label{ color:#2a1810; }
html.gd-sieu-anh-hung .bg2-nut-anh{ background:#eef5ff !important; border:1px solid #b9d2f3 !important; color:#1d4fa8 !important; }
html.gd-sieu-anh-hung .bg2-nut-anh:hover:not(:disabled){ background:#e2edff !important; }
html.gd-sieu-anh-hung .bg2-khoa-the{ background:#fff; border:1px solid rgba(125,35,20,.12); color:#1b120c; box-shadow:0 12px 24px -22px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .bg2-khoa-the:hover{ border-color:#e9b84c; }
html.gd-sieu-anh-hung .bg2-khoa-ten small{ color:#8a7b70; }
html.gd-sieu-anh-hung .bg2-khoa-the.mau-0 .bg2-khoa-anh{ background:#ffe3e6; color:#c8102e; } html.gd-sieu-anh-hung .bg2-khoa-the.mau-1 .bg2-khoa-anh{ background:#e3efff; color:#1d5fd0; }
html.gd-sieu-anh-hung .bg2-khoa-the.mau-2 .bg2-khoa-anh{ background:#e2f6e8; color:#1e7a46; } html.gd-sieu-anh-hung .bg2-khoa-the.mau-3 .bg2-khoa-anh{ background:#fff0d2; color:#a86b00; }
html.gd-sieu-anh-hung .bg2-khoa-the.mau-4 .bg2-khoa-anh{ background:#ece3ff; color:#6a35c7; } html.gd-sieu-anh-hung .bg2-khoa-the.mau-5 .bg2-khoa-anh{ background:#ffeadd; color:#a8440c; }
html.gd-sieu-anh-hung .bg2-the{ background:#fff !important; }
html.gd-sieu-anh-hung .bg2-the .form-label{ color:#1b120c; } html.gd-sieu-anh-hung .bg2-sao{ color:#d81a32; }
html.gd-sieu-anh-hung .bg2-the-dau b{ color:#1b120c; }
html.gd-sieu-anh-hung .bg2-cong{ background:linear-gradient(135deg, #34c07c, #149058); }
html.gd-sieu-anh-hung .bg2-o-link > i{ color:#5b4a41; }
html.gd-sieu-anh-hung .bg2-ghi{ color:#5b4a41; } html.gd-sieu-anh-hung .bg2-ghi > i{ color:#1d63d8; } html.gd-sieu-anh-hung .bg2-ghi b{ color:#2a1810; }
html.gd-sieu-anh-hung .bg2-xem-truoc{ color:#1e7a46; } html.gd-sieu-anh-hung .bg2-xem-truoc .loi{ color:#c8102e; }
html.gd-sieu-anh-hung .bg2-nut{ background:#fff !important; border:1px solid rgba(125,35,20,.16) !important; color:#2a1810 !important; }
html.gd-sieu-anh-hung .bg2-nut-vang{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d) !important; border:1px solid #d49a1c !important; color:#2a1606 !important; box-shadow:0 8px 16px -12px rgba(170,110,0,.9); }
html.gd-sieu-anh-hung .bg2-banner{ background:radial-gradient(120% 140% at 85% 0%, #e8233a 0%, #a10d1d 45%, #4a040b 100%); box-shadow:0 14px 30px -22px rgba(90,10,10,.9); border:1px solid rgba(125,35,20,.2); }
html.gd-sieu-anh-hung .bg2-banner-logo{ background:radial-gradient(circle at 35% 30%, #ffe27a, #d98b0b 72%); box-shadow:0 0 0 3px #3a0207, 0 0 0 5px #f4c64f, 0 8px 18px rgba(0,0,0,.5); }
html.gd-sieu-anh-hung .bg2-anh-trong b{ color:#ffe08a; text-shadow:0 2px 0 #5a0610, 0 4px 14px rgba(0,0,0,.4); }
html.gd-sieu-anh-hung .bg2-anh-trong small{ color:#ffd9dc; }
html.gd-sieu-anh-hung .bg2-banner-msg{ background:#fff; color:#2a1810; } html.gd-sieu-anh-hung .bg2-banner-msg.ok{ color:#1e7a46; } html.gd-sieu-anh-hung .bg2-banner-msg.loi{ color:#c8102e; }
html.gd-sieu-anh-hung .bg2-tom-so span{ background:#fff; border:1px solid rgba(125,35,20,.12); color:#5b4a41; } html.gd-sieu-anh-hung .bg2-tom-so b{ color:#c8102e; }
html.gd-sieu-anh-hung .bg2-che-do{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; }
html.gd-sieu-anh-hung .bg2-che-do.on{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d); border-color:#d49a1c; color:#2a1606; }
html.gd-sieu-anh-hung .bg2-nhom{ background:#fffdfb; border:1px solid rgba(200,16,46,.14); box-shadow:0 14px 30px -28px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .bg2-nhom-dau{ background:linear-gradient(90deg, #fff1f2, #fff8f6); color:#1b120c; }
html.gd-sieu-anh-hung .bg2-nhom-dau:hover{ background:linear-gradient(90deg, #ffe7e9, #fff3f0); }
html.gd-sieu-anh-hung .bg2-nhom.dong .bg2-nhom-dau{ background:#fff7f6; }
html.gd-sieu-anh-hung .bg2-nhom-huy{ background:linear-gradient(135deg, #f0384c, #c8102e); }
html.gd-sieu-anh-hung .bg2-nhom-dau b{ color:#1b120c; } html.gd-sieu-anh-hung .bg2-nhom-so{ color:#3b2a20; } html.gd-sieu-anh-hung .bg2-nhom-mui{ color:#5b4a41; }
html.gd-sieu-anh-hung .bg2-buoi{ background:#fff; border:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .bg2-buoi:hover, html.gd-sieu-anh-hung .bg2-buoi.mo{ box-shadow:0 12px 24px -20px rgba(90,25,10,.8); border-color:rgba(200,140,40,.4); }
html.gd-sieu-anh-hung .bg2-anh{ background:radial-gradient(circle at 30% 30%, #e0213a, #5a040c); }
html.gd-sieu-anh-hung .bg2-buoi-chu b{ color:#a3122a; } html.gd-sieu-anh-hung .bg2-buoi-chu small{ color:#5b4a41; }
html.gd-sieu-anh-hung .bg2-buoi-chu small i.fa-folder{ color:#e0a020; } html.gd-sieu-anh-hung .bg2-buoi-chu small i.fa-calendar{ color:#5b4a41; }
html.gd-sieu-anh-hung .bg2-tt.hien{ background:#e3f6e9; color:#17703d; } html.gd-sieu-anh-hung .bg2-tt.an{ background:#f1ece7; color:#5b4a41; }
html.gd-sieu-anh-hung .bg2-n{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; }
html.gd-sieu-anh-hung .bg2-n:hover{ background:#fffaf3; box-shadow:0 8px 14px -10px rgba(90,25,10,.7); }
html.gd-sieu-anh-hung .bg2-n i{ color:#1d4fa8; }
html.gd-sieu-anh-hung .bg2-n.lam{ background:#eef5ff; border-color:#b9d2f3; color:#1d4fa8; } html.gd-sieu-anh-hung .bg2-n.lam:hover{ background:#e2edff; }
html.gd-sieu-anh-hung .bg2-n.on{ background:#fff3d6; border-color:#e9b84c; color:#8a5200; } html.gd-sieu-anh-hung .bg2-n.on i{ color:#8a5200; }
html.gd-sieu-anh-hung .bg2-n.do, html.gd-sieu-anh-hung .bg2-n.do i{ color:#d81a32; } html.gd-sieu-anh-hung .bg2-n.do:hover{ background:#fff0f1; border-color:#f4c8cd; }
html.gd-sieu-anh-hung .bg2-sua{ background:#fffaf3; border:1px dashed rgba(200,140,40,.5); } html.gd-sieu-anh-hung .bg2-sua-luoi label{ color:#3b2a20; }
html.gd-sieu-anh-hung .bg2-tl{ background:#fffdf9; border:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .bg2-tl-dau b{ color:#1b120c; } html.gd-sieu-anh-hung .bg2-tl-dau b i{ color:#5b4a41; }
html.gd-sieu-anh-hung .bg2-tl-dong + .bg2-tl-dong{ border-top:1px solid rgba(125,35,20,.08); }
html.gd-sieu-anh-hung .bg2-tl-ten b{ color:#1b120c; } html.gd-sieu-anh-hung .bg2-tl-ten small{ color:#7a6a60; }
html.gd-sieu-anh-hung .bg2-tl-trong, html.gd-sieu-anh-hung .bg2-tl-msg{ color:#7a6a60; }
html.gd-sieu-anh-hung .bg2-trong{ background:#fff; border:1.5px dashed rgba(125,35,20,.2); color:#7a6a60; }
@media (prefers-reduced-motion:reduce){ .bg2-nhom, .bg2-sua, .bg2-tl, .bg2-anh img, .bg2-nhom-mui{ animation:none !important; transition:none !important; } }

/* ───────── Lớp live (js/lop-live.js) ───────── */
#pane-live{ position:relative; }
.lv2-nut-dau{ position:absolute; top:26px; right:24px; z-index:2; display:flex; gap:12px; }
.lv2-them{ display:inline-flex; align-items:center; gap:10px; padding:11px 20px !important; border-radius:12px !important; font-weight:800 !important; font-size:15.5px !important; }
.lv2-tren{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(380px, 1fr); gap:16px; align-items:start; margin-bottom:16px; }
#liveBox .lv2-khung{ border-radius:18px !important; padding:16px 18px !important; min-width:0; animation:hs2Mo .45s cubic-bezier(.22,1,.36,1) both; }
.lv2-khung-dau{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.lv2-khung-dau > div:not(.lv2-che-do){ display:flex; flex-direction:column; min-width:0; }
.lv2-khung-dau b{ font-size:19px; font-weight:800; line-height:1.25; }
.lv2-khung-dau small{ font-size:13.5px; margin-top:2px; }
.lv2-huy{ width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:17px; color:#fff; }
.lv2-huy.rang{ border-radius:50%; font-size:20px; background:none !important; }
.lv2-che-do{ margin-left:auto; display:flex; padding:3px; border-radius:11px; gap:2px; }
.lv2-che-do button{ border:0; background:none; font:inherit; font-size:13px; font-weight:700; padding:6px 12px; border-radius:9px; cursor:pointer; white-space:nowrap; transition:background-color .25s, color .25s, box-shadow .25s; }
.lv2-thiet-lap.nhay{ animation:lv2Nhay .7s cubic-bezier(.22,1,.36,1); }
@keyframes lv2Nhay{ 30%{ box-shadow:0 0 0 4px rgba(242,193,78,.65); } }
.lv2-bang{ border-radius:14px !important; }
.lv2-bang table{ font-size:14.5px; }
html.gd-sieu-anh-hung #appShell#appShell #pane-live .lv2-bang > .table > thead > tr > th{ background:#fbf1e6 !important; color:#2a1810 !important; font-size:13.5px !important; padding:11px 12px !important; border-bottom:1px solid rgba(125,35,20,.14) !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-live .lv2-bang > .table > tbody > tr > td{ padding:11px 10px; }
.lv2-lop{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.lv2-vien{ min-width:40px; height:30px; padding:0 8px; border-radius:999px; display:inline-grid; place-items:center; font-size:13px; font-weight:800; }
.lv2-lop-ten{ font-weight:700; } .lv2-lop-ten small{ font-size:11.5px; font-weight:700; padding:1px 6px; border-radius:999px; }
.lv2-tieu-de-nho{ display:block; font-size:12px; margin-top:3px; max-width:190px; line-height:1.35; }
.lv2-dam{ font-weight:800; white-space:nowrap; display:block; } .lv2-gio{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.lv2-gio-nho{ display:block; font-size:12.5px; margin-top:2px; font-variant-numeric:tabular-nums; }
.lv2-tam-dung{ font-size:11px; font-weight:800; padding:1px 7px; border-radius:999px; }
.lv2-phong{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lv2-phong i{ font-size:13px; }
.lv2-canh{ font-size:13px; margin-left:4px; cursor:help; }
.lv2-tt{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700; white-space:nowrap; }
.lv2-tt i.fa-circle{ font-size:8px; }
.lv2-nut{ display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:nowrap; }
.lv2-n{ min-height:38px; padding:0 14px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:transform .2s, box-shadow .2s, background-color .2s; }
.lv2-n:hover:not(:disabled){ transform:translateY(-1px); }
.lv2-n.chi-icon{ width:38px; padding:0; }
.lv2-n:disabled{ opacity:.5; cursor:wait; }
.lv2-cong-tac{ position:relative; width:48px; height:28px; flex:none; border-radius:999px; border:0; padding:0; cursor:pointer; transition:background-color .3s; }
.lv2-cong-tac span{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.25); transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.lv2-cong-tac.on span{ transform:translateX(20px); }
.lv2-cong-tac:focus-visible{ outline:2px solid #e9b84c; outline-offset:2px; }
tr.tat > td{ opacity:.62; }
tr.dang-sua > td{ box-shadow:inset 0 2px 0 #f2c14e, inset 0 -2px 0 #f2c14e; }
tr.dang-sua > td:first-child{ box-shadow:inset 3px 0 0 #f2c14e, inset 0 2px 0 #f2c14e, inset 0 -2px 0 #f2c14e !important; }
.lv2-trong{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 14px; text-align:center; font-size:14px; border-radius:14px; }
.lv2-trong i{ font-size:26px; opacity:.5; } .lv2-trong.nho{ padding:12px; }
/* Khung thiết lập: nhãn trái, ô phải như ảnh mẫu */
.lv2-form{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px 14px; align-items:start; }
.lv2-o{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.lv2-o .lv2-nhan small{ font-weight:500; font-size:12px; }
.lv2-ic-o{ position:relative; } .lv2-ic-o > i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px; pointer-events:none; z-index:1; } .lv2-ic-o .form-control{ padding-left:36px !important; }
.lv2-form[hidden]{ display:none; }
.lv2-nhan{ font-size:14px; font-weight:600; margin:0; }
.lv2-nhan-giua{ white-space:nowrap; }
.lv2-rong{ grid-column:1 / -1; min-width:0; }
.lv2-hai{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:10px; align-items:center; min-width:0; }
.lv2-thu{ display:flex; gap:6px; flex-wrap:wrap; }
.lv2-thu-o{ margin:0; cursor:pointer; }
.lv2-thu-o input{ position:absolute; opacity:0; pointer-events:none; }
.lv2-thu-o span{ min-width:46px; height:38px; padding:0 10px; border-radius:10px; display:grid; place-items:center; font-size:14px; font-weight:700; transition:background-color .2s, border-color .2s, transform .2s; }
.lv2-thu-o:hover span{ transform:translateY(-1px); }
.lv2-thu-o input:focus-visible + span{ outline:2px solid #e9b84c; outline-offset:2px; }
.lv2-phong-o, .lv2-mk{ position:relative; min-width:0; }
.lv2-phong-ic, .lv2-mk-ic{ position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px; pointer-events:none; z-index:1; }
.lv2-phong-o .form-control, .lv2-mk .form-control{ padding-left:36px !important; }
.lv2-mk .form-control{ padding-right:38px !important; }
.lv2-mk-xem{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:30px; height:30px; border:0; background:none; border-radius:8px; cursor:pointer; z-index:2; }
.lv2-msg{ font-size:13px; } .lv2-msg:empty{ display:none; }
.lv2-form-nut{ display:flex; gap:8px; flex-wrap:wrap; }
.lv2-luu{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:11px !important; border-radius:12px !important; font-weight:800 !important; font-size:16px !important; }
.lv2-phu{ padding:10px 14px !important; border-radius:12px !important; font-weight:700 !important; }
#liveBox .live-dt{ display:flex; flex-direction:column; gap:6px; }
#liveBox .live-dt-nhom{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
#liveBox .live-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; margin:0; transition:background-color .2s, border-color .2s; }
#liveBox .live-chip .form-check-input{ margin:0; width:15px; height:15px; }
#liveBox .live-chip.mo{ opacity:.45; }
/* Danh sách buổi */
.lv2-ds-khung{ margin-bottom:14px; }
.lv2-ds-dau{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.lv2-ds-dau .lv2-khung-dau{ margin:0; }
.lv2-khoang{ font-size:15px; font-weight:500; }
.lv2-loc{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lv2-loc label{ font-size:13.5px; font-weight:600; margin:0; }
.lv2-loc .form-select{ width:170px !important; } .lv2-loc .form-control{ width:160px !important; }
.lv2-loc-nut{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px !important; border-radius:11px !important; font-weight:800 !important; }
.lv2-mui-o{ width:40px; padding-right:0 !important; }
.lv2-mui{ width:30px; height:30px; border:0; background:none; border-radius:8px; cursor:pointer; display:grid; place-items:center; }
.lv2-mui i{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
.lv2-mui[aria-expanded="true"] i{ transform:rotate(90deg); }
tr.lv2-buoi{ cursor:pointer; }
tr.lv2-buoi.qua > td{ opacity:.78; }
.lv2-ngay{ display:block; font-weight:800; white-space:nowrap; }
.lv2-thu-chu{ font-size:12.5px; }
.lv2-nd{ min-width:180px; }
.lv2-nd b{ font-weight:700; } .lv2-nd small{ display:block; font-size:12.5px; margin-top:2px; }
.lv2-le{ font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; vertical-align:1px; white-space:nowrap; }
.lv2-so-hs{ white-space:nowrap; } .lv2-so-hs b{ font-weight:800; font-size:15px; }
.lv2-tach > td{ font-size:13px; font-weight:800; padding:8px 14px !important; }
tr.lv2-dong-hs > td{ padding:0 14px 14px !important; }
.lv2-hs-khung{ padding:12px 14px; border-radius:14px; animation:hs2Mo .3s cubic-bezier(.22,1,.36,1) both; }
.lv2-hs-dau{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.lv2-hs-dau b{ font-size:15px; font-weight:800; display:inline-flex; align-items:center; gap:8px; }
.lv2-hs-het{ border:0; background:none; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.lv2-hs-luoi{ display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); gap:10px; }
.lv2-hs{ display:grid; grid-template-columns:38px minmax(0, 1fr) auto auto; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; }
.lv2-hs-av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800; }
.lv2-hs-ten{ display:flex; flex-direction:column; min-width:0; }
.lv2-hs-ten b{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lv2-hs-ten small{ font-size:12px; }
.lv2-hs-phut{ font-size:13px; font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.lv2-huong-dan{ font-size:13px; padding:10px 14px; border-radius:12px; }
.lv2-huong-dan summary{ cursor:pointer; font-weight:700; }
.lv2-huong-dan p{ margin:8px 0 0; line-height:1.55; }
.lv2-menu .hs2-menu{ text-align:left; }
@media (max-width:1299.98px){ .lv2-tren{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:991.98px){ .lv2-nut-dau{ position:static; justify-content:flex-end; flex-wrap:wrap; margin:-6px 0 14px; } }
@media (max-width:767.98px){
  .lv2-form{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .lv2-che-do{ margin-left:0; width:100%; } .lv2-che-do button{ flex:1; } .lv2-khung-dau{ flex-wrap:wrap; }
  .lv2-loc{ width:100%; } .lv2-loc .form-select, .lv2-loc .form-control{ width:auto !important; flex:1 1 130px; } .lv2-loc-nut{ width:100%; justify-content:center; }
  .lv2-bang table{ min-width:560px; } .lv2-bang-buoi table{ min-width:900px; }
  .lv2-hs-luoi{ grid-template-columns:minmax(0, 1fr); } .lv2-hs{ grid-template-columns:34px minmax(0, 1fr) auto; } .lv2-hs-phut{ display:none; }
  .lv2-nut-dau .lv2-them{ flex:1; justify-content:center; }
}
html.gd-sieu-anh-hung .lv2-them{ background:#fff !important; border:1px solid rgba(125,35,20,.18) !important; color:#2a1810 !important; box-shadow:0 6px 14px -12px rgba(90,25,10,.6); }
html.gd-sieu-anh-hung .lv2-them.vang, html.gd-sieu-anh-hung .lv2-luu{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d) !important; border:1px solid #d49a1c !important; color:#2a1606 !important; box-shadow:0 10px 18px -12px rgba(170,110,0,.9); }
html.gd-sieu-anh-hung .lv2-them i{ color:#c8102e; } html.gd-sieu-anh-hung .lv2-luu i{ color:#7a3a00; }
html.gd-sieu-anh-hung #liveBox .lv2-khung{ background:#fff !important; }
html.gd-sieu-anh-hung .lv2-khung-dau b{ color:#1b120c; } html.gd-sieu-anh-hung .lv2-khung-dau small{ color:#7a6a60; }
html.gd-sieu-anh-hung .lv2-huy.do{ background:linear-gradient(135deg, #f0384c, #c8102e); box-shadow:0 6px 12px -6px rgba(200,16,46,.7); }
html.gd-sieu-anh-hung .lv2-huy.rang{ color:#d81a32; }
html.gd-sieu-anh-hung .lv2-che-do{ background:#f6efe8; }
html.gd-sieu-anh-hung .lv2-che-do button{ color:#5b4a41; }
html.gd-sieu-anh-hung .lv2-che-do button.on{ background:#fff; color:#c8102e; box-shadow:0 2px 6px rgba(90,25,10,.15); }
html.gd-sieu-anh-hung .lv2-vien.lam{ background:#e3efff; color:#1d4fa8; } html.gd-sieu-anh-hung .lv2-vien.hong{ background:#ffe3ea; color:#c8105a; }
html.gd-sieu-anh-hung .lv2-vien.tim{ background:#ece3ff; color:#5b2da0; } html.gd-sieu-anh-hung .lv2-vien.xanh{ background:#e2f6e8; color:#17703d; } html.gd-sieu-anh-hung .lv2-vien.cam{ background:#fff0d6; color:#9a5b00; }
html.gd-sieu-anh-hung .lv2-lop-ten{ color:#1b120c; } html.gd-sieu-anh-hung .lv2-lop-ten small{ background:#f1ece7; color:#5b4a41; }
html.gd-sieu-anh-hung .lv2-tieu-de-nho, html.gd-sieu-anh-hung .lv2-thu-chu, html.gd-sieu-anh-hung .lv2-nd small{ color:#8a7b70; }
html.gd-sieu-anh-hung .lv2-phong{ color:#2a1810; } html.gd-sieu-anh-hung .lv2-phong i{ color:#1d63d8; }
html.gd-sieu-anh-hung .lv2-canh{ color:#e07b00; } html.gd-sieu-anh-hung .lv2-gio-nho{ color:#5b4a41; } html.gd-sieu-anh-hung .lv2-tam-dung{ background:#f1ece7; color:#5b4a41; }
html.gd-sieu-anh-hung .lv2-tt.xanh{ background:#e3f6e9; color:#17703d; } html.gd-sieu-anh-hung .lv2-tt.xanh i{ color:#1e9e52; }
html.gd-sieu-anh-hung .lv2-tt.cam{ background:#fff0d6; color:#8a4b00; } html.gd-sieu-anh-hung .lv2-tt.cam i{ color:#f08a00; }
html.gd-sieu-anh-hung .lv2-tt.xam{ background:#f1ece7; color:#5b4a41; } html.gd-sieu-anh-hung .lv2-tt.xam i{ color:#a3958c; }
html.gd-sieu-anh-hung .lv2-tt.do{ background:#ffe5e8; color:#b10e25; } html.gd-sieu-anh-hung .lv2-tt.do i{ color:#e0213a; }
html.gd-sieu-anh-hung .lv2-n{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; }
html.gd-sieu-anh-hung .lv2-n:hover:not(:disabled){ box-shadow:0 8px 14px -10px rgba(90,25,10,.7); }
html.gd-sieu-anh-hung .lv2-n.vang{ background:linear-gradient(180deg, #fff1c4, #ffe08a); border-color:#efc35a; color:#4a2c00; }
html.gd-sieu-anh-hung .lv2-n.vang i{ color:#b06a00; }
html.gd-sieu-anh-hung .lv2-n.do{ color:#c8102e; border-color:#f4c8cd; } html.gd-sieu-anh-hung .lv2-n.do:hover{ background:#fff0f1; }
html.gd-sieu-anh-hung .lv2-cong-tac{ background:#d9cfc6; } html.gd-sieu-anh-hung .lv2-cong-tac.on{ background:linear-gradient(180deg, #ffd25a, #f0a516); }
html.gd-sieu-anh-hung .lv2-trong{ color:#8a7b70; background:#fffaf4; border:1.5px dashed rgba(125,35,20,.16); }
html.gd-sieu-anh-hung .lv2-nhan{ color:#3b2a20; }
html.gd-sieu-anh-hung .lv2-thu-o span{ background:#fff; border:1px solid rgba(125,35,20,.18); color:#3b2a20; }
html.gd-sieu-anh-hung .lv2-thu-o input:checked + span{ background:linear-gradient(180deg, #fff1c4, #ffd76a); border-color:#e0a82a; color:#2a1606; box-shadow:0 6px 12px -8px rgba(170,110,0,.8); }
html.gd-sieu-anh-hung .lv2-phong-ic{ color:#1d63d8; } html.gd-sieu-anh-hung .lv2-ic-o > i{ color:#5b4a41; } html.gd-sieu-anh-hung .lv2-mk-ic, html.gd-sieu-anh-hung .lv2-mk-xem{ color:#5b4a41; } html.gd-sieu-anh-hung .lv2-mk-xem:hover{ background:#f5efe8; }
html.gd-sieu-anh-hung .lv2-msg{ color:#5b4a41; } html.gd-sieu-anh-hung .lv2-msg.ok{ color:#1e7a46; } html.gd-sieu-anh-hung .lv2-msg.loi{ color:#c8102e; }
html.gd-sieu-anh-hung .lv2-phu{ background:#fff !important; border:1px solid rgba(125,35,20,.18) !important; color:#2a1810 !important; } html.gd-sieu-anh-hung .lv2-phu.do{ color:#c8102e !important; }
html.gd-sieu-anh-hung #liveBox .live-chip{ background:#eef5ff; border:1px solid #c8dbf6; color:#1d4fa8; }
html.gd-sieu-anh-hung #liveBox .live-chip:has(input:checked){ background:#1d63d8; border-color:#1d63d8; color:#fff; }
html.gd-sieu-anh-hung #liveBox .live-chip-khoa{ background:#fff7e6; border-color:#f1d590; color:#7a4a00; }
html.gd-sieu-anh-hung #liveBox .live-chip-khoa:has(input:checked){ background:#e5a019; border-color:#c98a12; color:#fff; }
html.gd-sieu-anh-hung .lv2-khoang{ color:#5b4a41; }
html.gd-sieu-anh-hung .lv2-loc label{ color:#5b4a41; }
html.gd-sieu-anh-hung .lv2-loc-nut{ background:linear-gradient(180deg, #e0213a, #b10e25) !important; border:0 !important; color:#fff !important; box-shadow:0 8px 16px -10px rgba(177,14,37,.9); }
html.gd-sieu-anh-hung .lv2-mui{ color:#5b4a41; } html.gd-sieu-anh-hung .lv2-mui:hover{ background:#f5efe8; }
html.gd-sieu-anh-hung .lv2-ngay{ color:#1b120c; } html.gd-sieu-anh-hung .lv2-nd b{ color:#1b120c; }
html.gd-sieu-anh-hung .lv2-le{ background:#e9e2ff; color:#5b2da0; }
html.gd-sieu-anh-hung .lv2-so-hs{ color:#3b2a20; }
html.gd-sieu-anh-hung #pane-live tr.lv2-buoi.mo > td{ background:#fffaf0 !important; border-bottom:0 !important; }
html.gd-sieu-anh-hung #pane-live tr.lv2-tach > td{ background:#f8f2ec !important; color:#7a6a60; }
html.gd-sieu-anh-hung #pane-live tr.lv2-dong-hs > td{ background:#fffaf0 !important; }
html.gd-sieu-anh-hung .lv2-hs-khung{ background:#fff; border:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .lv2-hs-dau b{ color:#1b120c; } html.gd-sieu-anh-hung .lv2-hs-dau b i{ color:#1e9e52; }
html.gd-sieu-anh-hung .lv2-hs-het{ color:#1d4fa8; }
html.gd-sieu-anh-hung .lv2-hs{ background:#fff; border:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .lv2-hs-av.lam{ background:#e3efff; color:#1d4fa8; } html.gd-sieu-anh-hung .lv2-hs-av.hong{ background:#ffe3ea; color:#c8105a; }
html.gd-sieu-anh-hung .lv2-hs-av.tim{ background:#ece3ff; color:#5b2da0; } html.gd-sieu-anh-hung .lv2-hs-av.xanh{ background:#e2f6e8; color:#17703d; } html.gd-sieu-anh-hung .lv2-hs-av.cam{ background:#fff0d6; color:#9a5b00; }
html.gd-sieu-anh-hung .lv2-hs-ten b{ color:#1b120c; } html.gd-sieu-anh-hung .lv2-hs-ten small{ color:#8a7b70; }
html.gd-sieu-anh-hung .lv2-hs-phut{ color:#3b2a20; }
html.gd-sieu-anh-hung .lv2-huong-dan{ background:#fffaf2; border:1px solid #f3e2c4; color:#5b4a41; } html.gd-sieu-anh-hung .lv2-huong-dan summary i{ color:#d98b0b; }
@media (prefers-reduced-motion:reduce){ #liveBox .lv2-khung, .lv2-hs-khung, .lv2-cong-tac span, .lv2-mui i, .lv2-thiet-lap.nhay{ animation:none !important; transition:none !important; } }

/* Nhóm học (VD 12 NC) — viên dưới tên học sinh + dòng ở thẻ lớp (06/11/2026) */
.hs2-tem.nhom{ background:#e6e0ff; color:#3d2a8a; }
.lh2-nhom{ display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 2px; }

/* Kết quả học tập (nhân viên): ô điểm được miễn / CHƯA NHẬP (06/11/2026) */
.kq3-mien{ display:inline-block; padding:1px 9px; border-radius:999px; background:#e6e0ff; color:#3d2a8a; font-size:.78rem; font-weight:700; }
.kq3-thieu{ display:inline-flex; align-items:center; gap:4px; padding:1px 9px; border-radius:999px; background:#ffe3e0; color:#b3261e; font-size:.78rem; font-weight:700; white-space:nowrap; }
.kq3-canh-bao{ display:flex; gap:10px; align-items:flex-start; margin:10px 0 4px; padding:10px 14px; border-radius:12px; background:#fff1d6; border:1.5px solid #e9b847; color:#7a4b00; line-height:1.45; }
.kq3-canh-bao > i{ font-size:1.3rem; color:#b3261e; margin-top:2px; }
.kq3-canh-chip{ display:inline-block; margin:3px 6px 0 0; padding:1px 9px; border-radius:999px; background:#fff; border:1px solid #e9b847; font-size:.8rem; font-weight:700; color:#8a3b00; }

/* Trang học sinh / phụ huynh: ô điểm được miễn / đang cập nhật (06/11/2026) */
.hs-kq-mien{ display:inline-block; padding:1px 9px; border-radius:999px; background:#e6e0ff; color:#3d2a8a; font-size:.78rem; font-weight:700; }
.hs-kq-cho{ display:inline-block; padding:1px 9px; border-radius:999px; background:#f1ece6; color:#6f625a; font-size:.74rem; font-weight:600; white-space:nowrap; }

/* ───────── Lớp live YouTube (js/lop-live.js, migration 20261004000300) ─────────
   1) Ô "Hình thức" Zoom / YouTube trong khung Thiết lập lịch + nhãn YouTube ở 2 bảng.
   2) PHÒNG ĐIỀU KHIỂN: khung phủ màn hình kiểu bảng chỉ huy siêu anh hùng (đen – đỏ – vàng, chấm halftone). */
:root{
  --ldk-den:#130e0c; --ldk-den-2:#1d1512; --ldk-vien:#3a2a24; --ldk-chu:#f6efe3; --ldk-mo:#b9a99c;
  --ldk-do:#d0142f; --ldk-do-dam:#8e0f22; --ldk-vang:#f5b82e; --ldk-kem:#fbf4e6; --ldk-xanh:#2fbf71;
}

/* 1. Hình thức */
.lv2-kieu{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lv2-kieu-o{ margin:0; cursor:pointer; position:relative; }
.lv2-kieu-o input{ position:absolute; opacity:0; pointer-events:none; }
.lv2-kieu-o span{ display:grid; grid-template-columns:auto 1fr; column-gap:9px; align-items:center; padding:9px 12px; border-radius:12px;
  border:1.5px solid rgba(125,35,20,.18); background:#fff; font-weight:800; font-size:14.5px; line-height:1.2; transition:border-color .2s, box-shadow .2s, background-color .2s; }
.lv2-kieu-o span i{ grid-row:span 2; font-size:20px; color:#2d6cdf; }
.lv2-kieu-o.yt span i{ color:#e3122d; }
.lv2-kieu-o small{ font-size:11.5px; font-weight:600; color:#7a6a60; }
.lv2-kieu-o input:checked + span{ border-color:#e9b84c; background:#fff8e6; box-shadow:0 0 0 3px rgba(242,193,78,.35); }
.lv2-kieu-o.yt input:checked + span{ border-color:#e3122d; background:#fff1f2; box-shadow:0 0 0 3px rgba(227,18,45,.16); }
.lv2-kieu-o input:focus-visible + span{ outline:2px solid #e9b84c; outline-offset:2px; }
.lv2-chi-zoom[hidden], .lv2-chi-yt[hidden]{ display:none !important; }
.lv2-phong.yt i{ color:#e3122d; font-size:15px; }
.lv2-chua-link{ font-size:11px; font-weight:800; padding:1px 7px; border-radius:999px; background:#fff1d6; color:#8a5200; }
.lv2-n.yt{ background:#e3122d; color:#fff; border:0; box-shadow:0 3px 0 #8e0f22; }
.lv2-n.yt:hover:not(:disabled){ box-shadow:0 4px 0 #8e0f22; }

/* 2. Phòng điều khiển */
body.ldk-mo{ overflow:hidden; }
.ldk{ position:fixed; inset:0; z-index:2000; display:flex; flex-direction:column; color:var(--ldk-chu);
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  background:var(--ldk-den) radial-gradient(rgba(208,20,47,.16) 1.2px, transparent 1.4px) 0 0/16px 16px;
  animation:ldkVao .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes ldkVao{ from{ opacity:0; transform:scale(.985); } }
.ldk-dau{ display:flex; align-items:center; gap:14px; padding:10px 18px; background:#000; border-bottom:5px solid var(--ldk-do);
  box-shadow:0 5px 0 var(--ldk-vang); flex:none; position:relative; }
.ldk-logo{ width:44px; height:44px; object-fit:contain; flex:none; }
.ldk-tieu{ min-width:0; flex:1; }
.ldk-nhan{ display:inline-block; font-size:11.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#000; background:var(--ldk-vang);
  padding:2px 9px; transform:skewX(-12deg); }
.ldk-tieu h2{ margin:3px 0 0; font-size:21px; font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:.01em; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }
.ldk-tieu small{ color:var(--ldk-mo); font-size:12.5px; }
.ldk-tt{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; font-family:'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.08em; font-size:17px;
  border:2px solid #fff; background:#3a2a24; transform:skewX(-10deg); white-space:nowrap; }
.ldk-tt::before{ content:''; width:10px; height:10px; border-radius:50%; background:#8b7b70; }
.ldk-tt.on{ background:var(--ldk-do); }
.ldk-tt.on::before{ background:#fff; animation:ldkNhay 1.2s ease-in-out infinite; }
@keyframes ldkNhay{ 50%{ opacity:.25; } }
.ldk-dem{ display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; }
.ldk-dem b{ font-family:'Bangers',sans-serif; font-size:26px; letter-spacing:.04em; color:var(--ldk-vang); font-weight:400; }
.ldk-dem small{ color:var(--ldk-mo); font-size:12.5px; }
.ldk-dong{ width:42px; height:42px; border-radius:10px; border:2px solid #fff; background:transparent; color:#fff; font-size:20px; cursor:pointer; flex:none; }
.ldk-dong:hover{ background:var(--ldk-do); }
.ldk-than{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) minmax(360px, 440px); gap:16px; padding:18px; }
.ldk-trai{ min-height:0; overflow:auto; display:flex; flex-direction:column; gap:14px; padding-right:4px; }
.ldk-the{ background:var(--ldk-den-2); border:2px solid #000; border-radius:6px; box-shadow:5px 5px 0 var(--ldk-do-dam); padding:14px 16px; }
.ldk-the h3{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:15.5px; font-weight:900; text-transform:uppercase; letter-spacing:.03em; color:#fff; }
.ldk-the h3 small{ color:var(--ldk-mo); font-weight:700; }
.ldk-so{ width:26px; height:26px; display:grid; place-items:center; background:var(--ldk-vang); color:#000; font-family:'Bangers',sans-serif; font-size:17px; font-weight:400;
  border:2px solid #000; transform:rotate(-6deg); flex:none; }
.ldk-link{ display:flex; gap:8px; flex-wrap:wrap; }
.ldk-link .form-control{ flex:1 1 260px; min-width:0; background:#0c0908 !important; color:#fff !important; border:1.5px solid var(--ldk-vien) !important; border-radius:8px !important; }
.ldk-link .form-control:focus{ border-color:var(--ldk-vang) !important; box-shadow:0 0 0 3px rgba(245,184,46,.25) !important; }
.ldk-nut{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 15px; border-radius:8px; border:2px solid #000; cursor:pointer;
  font:inherit; font-weight:800; font-size:14px; background:var(--ldk-vang); color:#000; box-shadow:3px 3px 0 #000; white-space:nowrap; transition:transform .15s, box-shadow .15s; }
.ldk-nut:hover:not(:disabled){ transform:translate(-1px, -1px); box-shadow:4px 4px 0 #000; }
.ldk-nut:active:not(:disabled){ transform:translate(2px, 2px); box-shadow:1px 1px 0 #000; }
.ldk-nut.do{ background:var(--ldk-do); color:#fff; }
.ldk-nut.phu{ background:#2a201c; color:#fff; border-color:#000; }
.ldk-nut:disabled{ opacity:.55; cursor:wait; }
.ldk-nut:focus-visible, .ldk-dong:focus-visible, .ldk-khoa:focus-visible{ outline:3px solid var(--ldk-vang); outline-offset:2px; }
.ldk-ghi{ margin:9px 0 0; font-size:12.5px; line-height:1.5; color:var(--ldk-mo); }
.ldk-ghi b{ color:#fff; }
.ldk-ok{ color:var(--ldk-xanh) !important; } .ldk-loi{ color:#ff7083 !important; }
.ldk-xem-thu{ margin-top:12px; }
.ldk-xem-khung{ position:relative; width:100%; aspect-ratio:16/9; border:3px solid #000; box-shadow:5px 5px 0 var(--ldk-vang); background:#000; overflow:hidden; overflow:clip; user-select:none; -webkit-user-select:none; }
.ldk-xem-khung iframe{ position:absolute; left:0; right:0; top:-90px; width:100%; height:calc(100% + 180px); border:0; background:#000; display:block; pointer-events:none; }
.ldk-xem-thu small{ display:block; margin-top:8px; font-size:12px; color:var(--ldk-mo); }
/* Độ chậm của khung xem thử (20/10/2026) + nút Về live */
.ldk-xem-duoi{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.ldk-xem-duoi .ldk-nut{ padding:6px 12px; font-size:13px; }
.ldk-tre{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--ldk-mo); }
.ldk-tre::before{ content:''; width:9px; height:9px; border-radius:50%; background:#8b7b70; flex:none; }
.ldk-tre.ok{ color:var(--ldk-xanh); } .ldk-tre.ok::before{ background:var(--ldk-xanh); }
.ldk-tre.vua{ color:var(--ldk-vang); } .ldk-tre.vua::before{ background:var(--ldk-vang); }
.ldk-tre.cham{ color:#ff7083; } .ldk-tre.cham::before{ background:#ff7083; }
/* Ảnh bài làm học sinh gửi trong chat (20/10/2026) */
.ldk-anh{ display:block; margin:5px 0 2px; padding:0; border:2px solid #000; border-radius:8px; overflow:hidden; background:#eee6da; cursor:zoom-in; max-width:100%; }
.ldk-anh img{ display:block; max-width:min(260px, 100%); max-height:220px; object-fit:contain; }
.ldk-anh span{ display:block; padding:18px 22px; font-size:12px; font-weight:700; color:#7a6a60; }
.ldk-anh:focus-visible{ outline:3px solid var(--ldk-vang); outline-offset:2px; }
.ldk-xem-anh{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px; background:rgba(0,0,0,.9); }
.ldk-xem-anh img{ max-width:100%; max-height:calc(100% - 60px); object-fit:contain; border:3px solid #fff; background:#fff; }
.ldk-xem-anh p{ margin:0; color:#fff; font-size:14px; font-weight:700; text-align:center; }
.ldk-xem-anh p span{ color:var(--ldk-mo); font-weight:600; }
.ldk-xem-anh button{ position:absolute; top:14px; right:16px; width:44px; height:44px; border-radius:50%; border:2px solid #fff; background:var(--ldk-do); color:#fff; font-size:20px; cursor:pointer; }
/* Học sinh giơ tay nói (20/10/2026) */
.ldk-mic-the{ border-color:var(--ldk-vang); }
.ldk-mic{ display:grid; gap:8px; }
.ldk-mic-dong{ display:grid; grid-template-columns:34px minmax(0, 1fr) auto auto; gap:9px; align-items:center; padding:7px 9px; border-radius:8px; background:#0f0b0a; border:1px solid var(--ldk-vien); }
.ldk-mic-dong.dang{ border-color:var(--ldk-do); box-shadow:0 0 0 2px rgba(208,20,47,.35); }
.ldk-mic-dong .lv2-hs-av{ width:34px; height:34px; font-size:12px; }
.ldk-mic-ben{ display:flex; align-items:center; gap:8px; min-width:0; }
.ldk-mic-nut{ display:flex; gap:6px; align-items:center; }
.ldk-mic-nut .ldk-nut, .ldk-mic-ben .ldk-nut{ padding:6px 11px; font-size:13px; }
.ldk-mic-tt{ font-size:12.5px; font-weight:800; white-space:nowrap; color:var(--ldk-mo); }
.ldk-mic-tt.cho{ color:var(--ldk-vang); } .ldk-mic-tt.noi{ color:#ff7083; } .ldk-mic-tt.hong{ color:#ff7083; font-weight:700; } .ldk-mic-tt.moi{ color:#fff; }
.ldk-mic-muc{ width:70px; height:8px; border-radius:999px; background:#2a201c; overflow:hidden; }
.ldk-mic-muc i{ display:block; height:100%; width:0; background:var(--ldk-xanh); transition:width .12s linear; }
@media (max-width: 575px){ .ldk-mic-dong{ grid-template-columns:34px minmax(0, 1fr); } .ldk-mic-ben, .ldk-mic-nut{ grid-column:2; } }
/* Trạng thái kênh chat ở đầu khung chat */
.ldk-kenh{ margin-left:auto; margin-right:4px; font-size:11.5px; font-weight:800; white-space:nowrap; opacity:.9; }
.ldk-kenh.hoi{ color:var(--ldk-vang); }
.ldk-hs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; max-height:280px; overflow:auto; }
.ldk-hs-dong{ display:grid; grid-template-columns:34px minmax(0, 1fr) auto; gap:9px; align-items:center; padding:6px 8px; border-radius:8px; background:#0f0b0a; border:1px solid var(--ldk-vien); }
.ldk-hs-dong .lv2-hs-av{ width:34px; height:34px; font-size:12px; }
.ldk-hs-dong.cam{ border-color:var(--ldk-do); }
.ldk-hs-ten{ min-width:0; display:flex; flex-direction:column; }
.ldk-hs-ten b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ldk-hs-ten small{ font-size:11.5px; color:var(--ldk-mo); }
.ldk-hs-nut{ border:1.5px solid var(--ldk-vien); background:transparent; color:var(--ldk-mo); font:inherit; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:6px; cursor:pointer; }
.ldk-hs-nut:hover{ color:#fff; border-color:var(--ldk-do); }
.ldk-hs-nut.on{ background:var(--ldk-do); border-color:var(--ldk-do); color:#fff; }
.ldk-trong{ color:var(--ldk-mo); font-size:13px; padding:10px 4px; list-style:none; text-align:center; }
.ldk-trong.loi{ color:#ff7083; }
.ldk-hd summary{ cursor:pointer; font-weight:800; color:#fff; }
.ldk-hd ol{ margin:10px 0 0; padding-left:20px; font-size:13px; line-height:1.6; color:var(--ldk-chu); }
.ldk-hd b{ color:var(--ldk-vang); }

/* Khung chat: giấy kem, khung đen đổ bóng vàng như ô truyện tranh */
.ldk-chat{ min-height:0; display:flex; flex-direction:column; background:var(--ldk-kem); color:#1b120c; border:3px solid #000; border-radius:6px; box-shadow:7px 7px 0 var(--ldk-vang); overflow:hidden; }
.ldk-chat-dau{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--ldk-do); color:#fff; border-bottom:3px solid #000; flex:none; }
.ldk-chat-dau b{ font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; display:inline-flex; gap:8px; align-items:center; }
.ldk-khoa{ display:inline-flex; align-items:center; gap:8px; border:2px solid #000; background:#fff; color:#000; font:inherit; font-size:12.5px; font-weight:800; padding:4px 10px 4px 5px; border-radius:999px; cursor:pointer; }
.ldk-khoa span{ width:30px; height:18px; border-radius:999px; background:#c9bdb1; position:relative; transition:background-color .25s; }
.ldk-khoa span::after{ content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.ldk-khoa.on{ background:var(--ldk-vang); }
.ldk-khoa.on span{ background:#000; } .ldk-khoa.on span::after{ transform:translateX(12px); }
.ldk-ghim{ display:flex; align-items:flex-start; gap:9px; padding:9px 12px; background:var(--ldk-vang); border-bottom:2px solid #000; font-size:13.5px; flex:none; }
.ldk-ghim[hidden]{ display:none; }
.ldk-ghim > i{ margin-top:3px; transform:rotate(30deg); }
.ldk-ghim span{ flex:1; min-width:0; overflow-wrap:anywhere; }
.ldk-ghim button{ border:1.5px solid #000; background:#fff; font:inherit; font-size:11.5px; font-weight:800; border-radius:6px; padding:2px 8px; cursor:pointer; }
.ldk-ds{ flex:1; min-height:0; overflow:auto; margin:0; padding:12px; list-style:none; display:flex; flex-direction:column; gap:8px;
  background:var(--ldk-kem) radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.2px) 0 0/12px 12px; }
.ldk-tin{ position:relative; background:#fff; border:2px solid #000; border-radius:10px; padding:7px 10px 6px; box-shadow:2px 2px 0 rgba(0,0,0,.85); max-width:100%; }
.ldk-tin.thay{ background:#fff3cf; border-color:var(--ldk-do); box-shadow:3px 3px 0 var(--ldk-do); }
.ldk-tin.an{ opacity:.5; background:#eee6da; box-shadow:none; border-style:dashed; }
.ldk-tin-dau{ display:flex; align-items:baseline; gap:8px; }
.ldk-tin-dau b{ font-size:12.5px; font-weight:800; color:#7a0f1d; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ldk-tin.thay .ldk-tin-dau b{ color:var(--ldk-do); }
.ldk-tin-dau time{ margin-left:auto; font-size:11px; color:#8a7a6e; font-variant-numeric:tabular-nums; flex:none; }
.ldk-da-an{ font-size:10.5px; font-weight:800; background:#000; color:#fff; padding:0 6px; border-radius:4px; flex:none; }
.ldk-tin p{ margin:2px 0 0; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.ldk-tin-nut{ display:flex; gap:6px; margin-top:5px; opacity:0; transition:opacity .15s; }
.ldk-tin:hover .ldk-tin-nut, .ldk-tin:focus-within .ldk-tin-nut{ opacity:1; }
.ldk-tin-nut button{ border:1.5px solid #000; background:#fff; font:inherit; font-size:11px; font-weight:800; padding:1px 7px; border-radius:6px; cursor:pointer; }
.ldk-tin-nut button:hover{ background:var(--ldk-vang); }
.ldk-tin-nut button.do{ color:var(--ldk-do); }
.ldk-gui{ display:flex; gap:8px; padding:10px; border-top:3px solid #000; background:#fff; flex:none; }
.ldk-gui .form-control{ flex:1; min-width:0; border:2px solid #000 !important; border-radius:8px !important;
  background:#fff !important; color:#1b120c !important; -webkit-text-fill-color:#1b120c; caret-color:#b5091c; font-size:16px; }   /* khung nền tối làm chữ gõ vào cũng màu sáng → trắng trên trắng, không thấy */
.ldk-gui .form-control::placeholder{ color:#7a6a60 !important; -webkit-text-fill-color:#7a6a60; opacity:1; }
.ldk-gui .form-control:focus{ border-color:#b5091c !important; box-shadow:0 0 0 3px rgba(245,184,46,.5) !important; }
.ldk-gui .ldk-nut{ width:46px; padding:0; }
@media (hover: none){ .ldk-tin-nut{ opacity:1; } }
@media (max-width: 991px){
  .ldk-than{ grid-template-columns:1fr; overflow:auto; }
  .ldk-chat{ min-height:70vh; }
  .ldk-dau{ flex-wrap:wrap; gap:10px; }
  .ldk-dem small{ display:none; }
}
@media (max-width: 575px){
  .ldk-than{ padding:12px; }
  .ldk-tieu h2{ font-size:17px; }
  .ldk-logo{ width:34px; height:34px; }
}
@media (prefers-reduced-motion: reduce){ .ldk, .ldk-tt.on::before{ animation:none; } }

/* Tạo buổi live YouTube tự động (Edge Function youtube_live): kết nối kênh · tạo buổi · thông tin OBS */
.ldk-td{ display:grid; gap:8px; margin-bottom:10px; }
.ldk-td p{ margin:0; }
.ldk-td-hang{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.ldk-td-tich{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; cursor:pointer; }
.ldk-td-tich input{ width:17px; height:17px; margin:0; accent-color:var(--ldk-do); }
.ldk-lk{ padding:0; border:0; background:none; color:inherit; font:inherit; text-decoration:underline; cursor:pointer; }
.ldk-td-obs{ display:grid; gap:8px; margin-top:8px; }
.ldk-td-obs label{ display:grid; gap:3px; font-size:12px; font-weight:800; }
.ldk-td-obs input{ width:100%; padding:7px 10px; border:2px solid #000; border-radius:6px; font:inherit; font-size:13px; }
.ldk-td-obs .ldk-nut{ padding:6px 12px; font-size:13px; }

/* =====================================================================================
 * NHÓM ĐIỂM DANH (nhân viên) — theo 4 ảnh mẫu thầy 03/10/2026:
 *   Bảng điểm Test (.bd2-*), Kiểm tra bài (.ktb2-*), Học chéo (.hc2-*). Điểm danh vẫn ở css/diem-danh.css.
 * Dùng chung thẻ số .nvs-the, bảng tiêu đề đỏ .nvs-bang, nút .hs2-n / menu ⋯ .hs2-them-menu của css/hoc-sinh-nv.css.
 * Bố cục cho mọi giao diện; màu cho giao diện Siêu anh hùng.
 * ===================================================================================== */

/* ───────── Bảng điểm Test ───────── */
.bd2-loc{ display:flex; flex-direction:row !important; align-items:flex-end; gap:14px 18px; flex-wrap:wrap; padding:14px 18px !important; margin-bottom:16px; }
.bd2-o{ display:flex; flex-direction:column; gap:5px; flex:0 1 185px; min-width:140px; }
.bd2-o .form-label{ margin:0; font-size:14px; font-weight:600; }
.bd2-khoang{ flex:0 1 210px; }
.bd2-ic{ position:relative; }
.bd2-ic > i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:15px; pointer-events:none; z-index:1; }
.bd2-ic .form-select{ padding-left:40px !important; }
.bd2-hai{ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; }
.bd2-hai .form-control{ text-align:center; }
.bd2-hai span{ font-size:14px; }
.bd2-tich{ display:flex; align-items:center; gap:12px; margin:0 0 6px; cursor:pointer; flex:0 1 230px; white-space:nowrap; }
.bd2-tich .form-check-input{ width:22px; height:22px; margin:0; flex:none; border-radius:6px; }
.bd2-tich span{ font-size:14.5px; font-weight:600; line-height:1.3; display:flex; flex-direction:column; }
.bd2-tich small{ font-weight:500; font-size:12.5px; }
.bd2-xem{ display:inline-flex; align-items:center; gap:10px; padding:11px 20px !important; border-radius:12px !important; font-weight:800 !important; font-size:16px !important; margin-left:auto; }
.bd2-the-luoi{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.bd2-bang table{ font-size:14.5px; }
.bd2-bang tbody td{ padding:7px 5px !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-bangdiem .bd2-bang > .table > thead > tr > th{ padding:13px 8px !important; font-size:14px !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-bangdiem .bd2-bang > .table > thead > tr > th:first-child{ padding-left:16px !important; }
.bd2-bang tbody td:first-child{ padding-left:16px !important; }
.bd2-hs{ display:flex; align-items:center; gap:10px; min-width:200px; }
.bd2-ma{ min-width:56px; font-weight:600; font-size:13.5px; white-space:nowrap; }
.bd2-hs .hs2-av{ width:34px; height:34px; font-size:12px; }
.bd2-ten{ display:flex; flex-direction:column; min-width:0; }
.bd2-ten b{ font-weight:600; font-size:14.5px; white-space:nowrap; } .bd2-ten small{ font-size:12px; }
.bd2-o-diem{ display:inline-grid; place-items:center; min-width:50px; height:36px; padding:0 8px; border-radius:9px; font-weight:700; font-variant-numeric:tabular-nums; }
.bd2-o-diem.tb{ font-weight:800; }
.bd2-td{ display:inline-flex; align-items:center; gap:8px; font-weight:600; white-space:nowrap; font-size:14px; }
.bd2-td i{ font-size:10px; }
.bd2-dong.mo > td{ border-bottom:0 !important; }
.bd2-chi-tiet > td{ padding:0 16px 14px !important; }
.bd2-ct{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px; padding:12px 14px; border-radius:12px; animation:hs2Mo .3s cubic-bezier(.22,1,.36,1) both; }
.bd2-ct-nx p{ margin:6px 0 4px; font-size:13.5px; line-height:1.5; }
.bd2-ct-nx small{ font-size:12.5px; }
.bd2-xl{ display:inline-block; font-size:12.5px; font-weight:800; padding:3px 10px; border-radius:999px; color:var(--mau); background:color-mix(in srgb, var(--mau) 14%, #fff); }
.bd2-ct-buoi{ display:flex; flex-direction:column; gap:6px; }
.bd2-ct-dong{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13.5px; }
.bd2-ct-dong i{ margin-right:6px; }
.bd2-ct-dong .hs2-n{ padding:5px 12px; font-size:13px; }
.bd2-ct-ok{ font-size:13.5px; font-weight:600; }
.bd2-ghi{ text-align:right; font-size:13px; margin:8px 2px 16px; }
.bd2-duoi{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.5fr); gap:16px; align-items:start; }
.bd2-khung{ padding:14px 18px !important; min-width:0; }
.bd2-khung-dau{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.bd2-khung-dau > div{ display:flex; flex-direction:column; }
.bd2-khung-dau b{ font-size:17px; font-weight:800; text-transform:uppercase; letter-spacing:.01em; }
.bd2-khung-dau small{ font-size:13px; }
.bd2-huy{ width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:17px; }
.bd2-cot-luoi{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; height:190px; align-items:end; padding:0 10px; }
.bd2-cot-o{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; }
.bd2-cot{ width:100%; max-width:130px; height:calc(var(--cao) * .72); border-radius:6px 6px 0 0; transform-origin:bottom; animation:bd2Moc .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes bd2Moc{ from{ transform:scaleY(0); } }
.bd2-cot-so{ font-size:15px; font-weight:800; } .bd2-cot-nhan{ font-size:13.5px; font-weight:600; padding-top:4px; }
.bd2-bang-nho table{ font-size:13.5px; }
.bd2-bang-nho .bd2-ma{ display:none; } .bd2-bang-nho .bd2-hs{ min-width:150px; } .bd2-bang-nho .hs2-n span{ display:none; } .bd2-bang-nho .hs2-n{ padding:7px 11px; }
.bd2-van-de{ min-width:210px; }
.bd2-van-de b{ font-weight:600; display:block; } .bd2-van-de small{ display:block; font-size:12px; margin-top:2px; }
.bd2-trong{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:34px 14px; border-radius:16px; text-align:center; }
.bd2-trong i{ font-size:28px; opacity:.5; }
.bd2-trong-o{ padding:22px !important; }
@media (max-width:1299.98px){ .bd2-duoi{ grid-template-columns:minmax(0, 1fr); } .bd2-xem{ margin-left:0; } }
@media (max-width:1499.98px){ .bd2-bang .hs2-nut .hs2-n span{ display:none; } .bd2-bang .hs2-nut .hs2-n{ padding:7px 11px; } }
@media (max-width:767.98px){
  .bd2-o, .bd2-khoang{ flex:1 1 140px; } .bd2-xem{ width:100%; justify-content:center; }
  .bd2-the-luoi{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .bd2-the-luoi .nvs-the-huy{ display:none; }
  .bd2-ct{ grid-template-columns:minmax(0, 1fr); } .bd2-hs{ min-width:180px; } .bd2-ma{ display:none; }
}
html.gd-sieu-anh-hung .bd2-o .form-label, html.gd-sieu-anh-hung .bd2-tich span{ color:#2a1810; }
html.gd-sieu-anh-hung .bd2-ic > i{ color:#3b2a20; } html.gd-sieu-anh-hung .bd2-hai span, html.gd-sieu-anh-hung .bd2-tich small{ color:#7a6a60; }
html.gd-sieu-anh-hung .bd2-tich .form-check-input{ border:1.5px solid #8a7b70; } html.gd-sieu-anh-hung .bd2-tich .form-check-input:checked{ background-color:#c8102e; border-color:#c8102e; }
html.gd-sieu-anh-hung .bd2-xem{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d) !important; border:1px solid #d49a1c !important; color:#2a1606 !important; box-shadow:0 8px 16px -12px rgba(170,110,0,.9); }
html.gd-sieu-anh-hung .bd2-ma{ color:#2a1810; } html.gd-sieu-anh-hung .bd2-ten b{ color:#1b120c; } html.gd-sieu-anh-hung .bd2-ten small{ color:#8a7b70; }
html.gd-sieu-anh-hung .bd2-o-diem.xanh{ background:#e3f6e9; color:#17703d; } html.gd-sieu-anh-hung .bd2-o-diem.lam{ background:#eaf2ff; color:#1d4fa8; }
html.gd-sieu-anh-hung .bd2-o-diem.do{ background:#ffe5e8; color:#b10e25; } html.gd-sieu-anh-hung .bd2-o-diem.vang{ background:#fff3c9; color:#8a5a00; }
html.gd-sieu-anh-hung .bd2-o-diem.tb{ background:#fdf0d8; color:#1b120c; } html.gd-sieu-anh-hung .bd2-o-diem.trong{ color:#b3a69c; }
html.gd-sieu-anh-hung .bd2-td{ color:#1b120c; }
html.gd-sieu-anh-hung .bd2-td.xanh i{ color:#1e9e52; } html.gd-sieu-anh-hung .bd2-td.lam i{ color:#2a6fe0; } html.gd-sieu-anh-hung .bd2-td.do i{ color:#e0213a; }
html.gd-sieu-anh-hung .bd2-td.cam i{ color:#f08a00; } html.gd-sieu-anh-hung .bd2-td.vang i{ color:#e0b000; } html.gd-sieu-anh-hung .bd2-td.xam i{ color:#b3a69c; }
html.gd-sieu-anh-hung #pane-bangdiem tr.bd2-dong.gap > td{ background:#fff3f3 !important; }
html.gd-sieu-anh-hung .bd2-lich{ background:linear-gradient(180deg, #e0213a, #b10e25) !important; border-color:transparent !important; color:#fff !important; }
html.gd-sieu-anh-hung #pane-bangdiem tr.bd2-chi-tiet > td{ background:#fffdf9 !important; }
html.gd-sieu-anh-hung .bd2-ct{ background:#fffaf2; border:1px solid #f3e2c4; }
html.gd-sieu-anh-hung .bd2-ct-nx p{ color:#3b2a20; } html.gd-sieu-anh-hung .bd2-ct-nx small{ color:#8a7b70; }
html.gd-sieu-anh-hung .bd2-ct-dong{ color:#3b2a20; } html.gd-sieu-anh-hung .bd2-ct-dong i{ color:#c8102e; } html.gd-sieu-anh-hung .bd2-ct-ok{ color:#1e7a46; }
html.gd-sieu-anh-hung .bd2-ghi{ color:#8a7b70; }
html.gd-sieu-anh-hung .bd2-khung{ background:#fff !important; }
html.gd-sieu-anh-hung .bd2-khung-dau b{ color:#1b120c; } html.gd-sieu-anh-hung .bd2-khung-dau small{ color:#7a6a60; }
html.gd-sieu-anh-hung .bd2-huy{ background:radial-gradient(circle at 35% 30%, #ff6b78, #c8102e 72%); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #e9b84c; }
html.gd-sieu-anh-hung .bd2-cot.do{ background:linear-gradient(180deg, #ff7a86, #e8394c); } html.gd-sieu-anh-hung .bd2-cot.lam{ background:linear-gradient(180deg, #5aa2ff, #2e7be6); }
html.gd-sieu-anh-hung .bd2-cot.xanh{ background:linear-gradient(180deg, #6fd696, #36b26a); }
html.gd-sieu-anh-hung .bd2-cot-o:has(.do) .bd2-cot-so{ color:#c8102e; } html.gd-sieu-anh-hung .bd2-cot-o:has(.lam) .bd2-cot-so{ color:#1d4fa8; } html.gd-sieu-anh-hung .bd2-cot-o:has(.xanh) .bd2-cot-so{ color:#17703d; }
html.gd-sieu-anh-hung .bd2-cot-nhan{ color:#3b2a20; border-top:1px solid rgba(125,35,20,.18); width:100%; text-align:center; }
html.gd-sieu-anh-hung .bd2-van-de b{ color:#b10e25; } html.gd-sieu-anh-hung .bd2-van-de small{ color:#7a6a60; }
html.gd-sieu-anh-hung .bd2-lich-co{ color:#1e7a46; } html.gd-sieu-anh-hung .bd2-lich-chua{ color:#b06a00; }
html.gd-sieu-anh-hung .bd2-trong{ background:#fffaf4; border:1.5px dashed rgba(125,35,20,.16); color:#8a7b70; }
@media (prefers-reduced-motion:reduce){ .bd2-cot, .bd2-ct{ animation:none !important; } }

/* ───────── Kiểm tra bài (js/kiem-tra-bai.js) ───────── */
#pane-kiemtrabai{ position:relative; }
#ktbKhung.tg{ max-width:none; padding:0; margin:0; background:none; }
.ktb2-nut-dau{ position:absolute; top:26px; right:24px; z-index:2; }
.ktb2-tai{ display:inline-flex; align-items:center; gap:9px; padding:10px 18px !important; border-radius:12px !important; font-weight:700 !important; }
.ktb2-bao{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; margin-bottom:12px; font-weight:600; animation:hs2Mo .3s cubic-bezier(.22,1,.36,1) both; }
.ktb2-the-luoi{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ktb2-the-luoi .nvs-the-huy{ width:70px; height:70px; font-size:28px; }
.ktb2-the-nhan{ font-size:17px !important; font-weight:800 !important; margin-bottom:2px; }
.ktb2-the-luoi .nvs-the-chu b{ font-size:40px; }
.ktb2-luoi{ display:grid; grid-template-columns:minmax(0, 1.12fr) minmax(0, 1fr); gap:16px; align-items:start; }
.ktb2-phai{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.ktb2-khung{ padding:16px 18px !important; min-width:0; scroll-margin-top:calc(var(--head, 88px) + 12px); }
.ktb2-khung.nhay{ animation:lv2Nhay .8s cubic-bezier(.22,1,.36,1); }
.ktb2-khung-dau{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.ktb2-khung-dau > b{ font-size:19px; font-weight:800; }
.ktb2-huy{ width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:17px; color:#fff; }
.ktb2-chon-buoi{ position:relative; margin-left:auto; min-width:min(330px, 100%); flex:0 1 330px; }
.ktb2-chon-buoi > i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); pointer-events:none; z-index:1; }
.ktb2-chon-buoi .form-select{ padding-left:40px !important; font-weight:600 !important; }
.ktb2-ghi{ margin-left:auto; font-size:12.5px; font-weight:500; padding:4px 10px; border-radius:8px; }
.ktb2-xem-het{ margin-left:auto; border:0; background:none; font:inherit; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.ktb2-dai{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; padding:12px 14px; border-radius:14px; margin-bottom:10px; }
.ktb2-dai-ic{ width:42px; height:42px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:20px; }
.ktb2-dai-buoi{ display:flex; flex-direction:column; min-width:150px; line-height:1.3; }
.ktb2-dai-buoi span{ font-size:13.5px; font-weight:700; } .ktb2-dai-buoi b{ font-size:16px; font-weight:700; } .ktb2-dai-buoi small{ font-size:12px; }
.ktb2-dai-o{ display:flex; flex-direction:column; gap:3px; margin:0; font-size:12.5px; font-weight:600; }
.ktb2-dai-o .form-control{ width:66px; height:38px; text-align:center; font-weight:800 !important; font-size:16px !important; padding:4px !important; }
.ktb2-dai-o.rong .form-control{ width:96px; font-size:14px !important; }
.ktb2-dai-gach{ width:1px; align-self:stretch; }
.ktb2-tich{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; margin:0; cursor:pointer; }
.ktb2-tich .form-check-input{ width:20px; height:20px; margin:0; border-radius:5px; flex:none; }
.ktb2-dai .ktb2-tich{ margin-left:auto; }
.ktb2-goi-y{ font-size:12.5px; font-weight:600; margin:-4px 0 10px 4px; }
.ktb2-bang table{ font-size:14.5px; }
.ktb2-bang.nho table{ font-size:13.5px; }
html.gd-sieu-anh-hung #appShell#appShell #pane-kiemtrabai .ktb2-bang.nho > .table > thead > tr > th{ padding:11px 10px !important; font-size:13.5px !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-kiemtrabai .ktb2-bang > .table > tbody > tr > td{ padding:9px 8px; }
html.gd-sieu-anh-hung #appShell#appShell #pane-kiemtrabai .ktb2-bang > .table > thead > tr > th{ padding:12px 8px !important; font-size:14px !important; }
.ktb2-bang:not(.nho) .ktb2-nut .hs2-n{ padding:6px 8px; font-size:13px; gap:5px; }
.ktb2-bang:not(.nho) .ktb2-nut{ gap:5px; }
.ktb2-ma{ font-weight:600; white-space:nowrap; }
.ktb2-hs{ display:flex; align-items:center; gap:9px; min-width:0; }
.ktb2-hs .hs2-av{ width:36px; height:36px; font-size:12.5px; display:grid !important; place-items:center; line-height:1; flex:none; }
.ktb2-hs > span{ display:flex; flex-direction:column; min-width:0; }
.ktb2-hs b{ font-weight:600; white-space:nowrap; } .ktb2-hs small{ font-size:12px; line-height:1.4; }
.ktb2-hs b em{ font-style:normal; font-weight:500; font-size:12px; margin-left:4px; }
.ktb2-nd strong{ font-weight:700; }
.ktb2-tu-den{ display:flex; align-items:center; gap:6px; } .ktb2-tu-den i{ font-style:normal; } .ktb2-tu-den .form-control{ width:84px; height:38px; text-align:center; font-weight:700 !important; font-size:14px !important; padding:4px !important; }
.ktb2-so{ display:inline-flex; align-items:stretch; border-radius:10px; overflow:hidden; }
.ktb2-so button{ width:30px; border:0; font:inherit; font-size:18px; font-weight:700; cursor:pointer; }
.ktb2-so input{ width:36px; border:0; text-align:center; font:inherit; font-weight:800; font-size:16px; padding:6px 0; }
.ktb2-so input:focus{ outline:2px solid #e9b84c; outline-offset:-2px; }
.ktb2-gach{ font-weight:700; }
.ktb2-tien{ display:flex; align-items:center; gap:6px; min-width:96px; }
.ktb2-tien > span{ flex:1; height:12px; border-radius:999px; overflow:hidden; }
.ktb2-tien i{ display:block; height:100%; border-radius:999px; transition:width .5s cubic-bezier(.22,1,.36,1); }
.ktb2-tien b{ font-size:13.5px; min-width:40px; text-align:right; }
.ktb2-chua{ font-size:13px; font-style:italic; }
.ktb2-nhac{ display:block; font-size:11.5px; font-weight:600; margin-top:3px; }
/* Cột Lý do (em chưa có bài / làm thiếu) — migration 20261004001000 */
.ktb2-th-phu{ font-size:11.5px; font-weight:500; opacity:.85; text-transform:none; }
.ktb2-ly-do{ min-width:170px; padding:6px 9px !important; font-size:13px !important; border-radius:9px !important; }
.ktb2-ly-do.thieu, html.gd-sieu-anh-hung #appShell#appShell #pane-kiemtrabai .form-control.ktb2-ly-do.thieu{ border-color:#d81a32 !important; background:#fff5f6 !important; box-shadow:0 0 0 2px rgba(216,26,50,.12) !important; }
.ktb2-ly-do.thieu::placeholder{ color:#c8102e; opacity:.8; }
.ktb2-ly-do-cu{ font-size:12px; font-style:italic; }
.ktb2-mien-o{ display:inline-flex; align-items:center; gap:7px; margin:0; font-size:13px; font-weight:700; cursor:pointer; padding:4px 8px; border-radius:8px; }
.ktb2-mien-o .form-check-input{ width:20px; height:20px; margin:0; }
.ktb2-bo-mien{ padding:6px 10px !important; font-size:13px !important; }
.ktb2-mien-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:6px 10px; border-radius:9px; white-space:nowrap; }
.ktb2-vang > td{ opacity:.7; }
.ktb2-vang-chu{ font-size:13px; font-style:italic; }
.ktb2-chan{ display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; padding-top:14px; }
.ktb2-chan .ktb2-tich i{ font-size:15px; cursor:help; }
.ktb2-dem{ margin-left:auto; font-size:14px; font-weight:600; }
.ktb2-luu{ margin-left:auto; display:inline-flex; align-items:center; gap:10px; padding:12px 30px !important; border-radius:12px !important; font-weight:800 !important; font-size:17px !important; }
.ktb2-loc{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.ktb2-chip{ padding:5px 12px; border-radius:999px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.ktb2-hoi{ cursor:help; font-size:15px; }
.ktb2-nd b{ display:block; font-weight:600; white-space:nowrap; } .ktb2-nd small{ display:block; font-size:12px; }
.ktb2-tt{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap;
  color:var(--mau); background:color-mix(in srgb, var(--mau) 11%, #fff); }
.ktb2-tt i{ font-size:8px; }
.ktb2-nut{ display:flex; gap:6px; align-items:center; justify-content:center; }
.ktb2-nut .hs2-n{ padding:6px 11px; font-size:13px; }
@media (max-width:1799.98px){ .ktb2-bang.nho .ktb2-nut .hs2-n span{ display:none; } }
.ktb2-xong > td{ opacity:.6; }
.ktb2-them{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:10px; padding:8px; border-radius:11px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.ktb2-ghi-dai{ font-size:12.5px; margin:-4px 0 10px; line-height:1.45; }
.ktb2-vo-tt{ display:inline-block; font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:999px; white-space:nowrap; }
.ktb2-ngay{ display:block; font-size:11.5px; margin-top:3px; }
.ktb2-vo-o{ display:flex; align-items:center; gap:8px; margin:3px 0; font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap; }
.ktb2-vo-o .form-check-input{ width:19px; height:19px; margin:0; border-radius:5px; }
.ktb2-ghi-nhan{ padding:7px 14px !important; font-size:13px !important; }
.ktb2-nhac-nut{ display:block; margin:5px auto 0; border:0; background:none; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.ktb2-du{ font-size:13px; font-weight:700; white-space:nowrap; }
.ktb2-trong{ padding:22px 12px; text-align:center; font-size:14px; border-radius:12px; }
@media (max-width:1299.98px){ .ktb2-luoi{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:991.98px){ .ktb2-nut-dau{ position:static; display:flex; justify-content:flex-end; margin:-6px 0 12px; } }
@media (max-width:767.98px){
  .ktb2-the-luoi .nvs-the-huy{ display:none; } .ktb2-the-luoi .nvs-the-chu b{ font-size:28px; } .ktb2-the-nhan{ font-size:13px !important; }
  .ktb2-chon-buoi{ flex:1 1 100%; margin-left:0; } .ktb2-dai .ktb2-tich{ margin-left:0; } .ktb2-dai-gach{ display:none; }
  .ktb2-bang:not(.nho) table{ min-width:820px; } .ktb2-bang.nho table{ min-width:520px; }
  .ktb2-dem{ margin-left:0; } .ktb2-luu{ width:100%; justify-content:center; }
}
/* Danh sách có thanh trượt (thầy yêu cầu 08/10/2026): màn rộng → 2 cột cao bằng khung nhìn, bảng cuộn trong khung, tiêu đề + chân Lưu đứng yên */
.ktb2-so-dem{ min-width:26px; height:26px; padding:0 8px; border-radius:999px; display:inline-grid; place-items:center; font-size:13px; font-weight:800; color:#fff; }
.ktb2-so-dem.do{ background:#d81a32; } .ktb2-so-dem.tim{ background:#6d46d6; }
.ktb2-khung .ktb2-cuon{ overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c9a27a transparent; }
.ktb2-cuon::-webkit-scrollbar{ width:9px; height:9px; } .ktb2-cuon::-webkit-scrollbar-thumb{ background:#c9a27a; border-radius:999px; }
@media (min-width:1300px){
  .ktb2-luoi{ height:max(560px, calc(100vh - 290px)); align-items:stretch; }
  .ktb2-luoi > .ktb2-khung, .ktb2-phai > .ktb2-khung{ display:flex; flex-direction:column; min-height:0; }
  .ktb2-phai{ display:grid; grid-template-rows:minmax(0, 1fr) minmax(0, 1fr); min-height:0; }
  .ktb2-khung > *{ flex:none; }
  .ktb2-khung > .ktb2-cuon{ flex:1 1 auto; min-height:0; }
  .ktb2-khung > .ktb2-trong{ flex:none; }
}
@media (max-width:1299.98px){
  #ktbBtvn .ktb2-cuon{ max-height:68vh; }
  #ktbPhat .ktb2-cuon, #ktbVo .ktb2-cuon{ max-height:50vh; }
}
html.gd-sieu-anh-hung .ktb2-tai{ background:#fff !important; border:1px solid rgba(125,35,20,.16) !important; color:#2a1810 !important; }
html.gd-sieu-anh-hung .ktb2-bao{ background:#e9f8ef; color:#17703d; border:1px solid #c6e8d1; }
html.gd-sieu-anh-hung #ktbKhung .ktb2-khung{ background:#fff !important; }
html.gd-sieu-anh-hung .ktb2-khung-dau > b{ color:#1b120c; }
html.gd-sieu-anh-hung .ktb2-huy.vang{ background:linear-gradient(135deg, #f7b733, #e08a00); } html.gd-sieu-anh-hung .ktb2-huy.do{ background:linear-gradient(135deg, #f0384c, #c8102e); }
html.gd-sieu-anh-hung .ktb2-huy.tim{ background:linear-gradient(135deg, #8f6af0, #5b35c7); }
html.gd-sieu-anh-hung .ktb2-chon-buoi > i{ color:#3b2a20; }
html.gd-sieu-anh-hung .ktb2-ghi{ background:#fff7e6; color:#7a5200; } html.gd-sieu-anh-hung .ktb2-ghi i{ color:#e08a00; }
html.gd-sieu-anh-hung .ktb2-xem-het{ color:#1d4fa8; }
html.gd-sieu-anh-hung .ktb2-dai{ background:#fffaee; border:1px solid #f2dfb0; }
html.gd-sieu-anh-hung .ktb2-dai-ic{ background:#fbe7c0; color:#a3630b; }
html.gd-sieu-anh-hung .ktb2-dai-buoi span{ color:#8a4f00; } html.gd-sieu-anh-hung .ktb2-dai-buoi b{ color:#1b120c; } html.gd-sieu-anh-hung .ktb2-dai-buoi small{ color:#7a6a60; }
html.gd-sieu-anh-hung .ktb2-dai-o{ color:#5b4a41; } html.gd-sieu-anh-hung .ktb2-dai-gach{ background:rgba(125,35,20,.15); }
html.gd-sieu-anh-hung .ktb2-tich{ color:#2a1810; } html.gd-sieu-anh-hung .ktb2-tich .form-check-input:checked{ background-color:#1d63d8; border-color:#1d63d8; }
html.gd-sieu-anh-hung .ktb2-goi-y{ color:#a35f00; }
html.gd-sieu-anh-hung .ktb2-ma{ color:#2a1810; } html.gd-sieu-anh-hung .ktb2-hs b{ color:#1b120c; } html.gd-sieu-anh-hung .ktb2-hs small{ color:#8a7b70; }
html.gd-sieu-anh-hung .ktb2-so{ border:1px solid rgba(125,35,20,.18); background:#fff; }
html.gd-sieu-anh-hung .ktb2-so button{ background:#fff; color:#3b2a20; } html.gd-sieu-anh-hung .ktb2-so button:hover{ background:#fff3e0; }
html.gd-sieu-anh-hung .ktb2-so input{ color:#1b120c; border-left:1px solid rgba(125,35,20,.12); border-right:1px solid rgba(125,35,20,.12); background:#fff; }
html.gd-sieu-anh-hung .ktb2-gach, html.gd-sieu-anh-hung .ktb2-chua{ color:#a3958c; }
html.gd-sieu-anh-hung .ktb2-tien > span{ background:#ece6e0; }
html.gd-sieu-anh-hung .ktb2-tien.xanh i{ background:linear-gradient(90deg, #34c07c, #1e9e52); } html.gd-sieu-anh-hung .ktb2-tien.vang i{ background:linear-gradient(90deg, #ffd25a, #f0a516); }
html.gd-sieu-anh-hung .ktb2-tien.do i{ background:linear-gradient(90deg, #ff6b78, #e0213a); }
html.gd-sieu-anh-hung .ktb2-tien.xanh b{ color:#17703d; } html.gd-sieu-anh-hung .ktb2-tien.vang b{ color:#a35f00; } html.gd-sieu-anh-hung .ktb2-tien.do b{ color:#c8102e; }
html.gd-sieu-anh-hung .ktb2-nhac{ color:#b06a00; } html.gd-sieu-anh-hung .ktb2-nhac.do{ color:#c8102e; }
html.gd-sieu-anh-hung .ktb2-mien-o.on{ background:#eef5ff; color:#1d4fa8; } html.gd-sieu-anh-hung .ktb2-mien-o .form-check-input:checked{ background-color:#1d63d8; border-color:#1d63d8; }
html.gd-sieu-anh-hung .ktb2-mien-chip{ background:#eef5ff; color:#1d4fa8; } html.gd-sieu-anh-hung .ktb2-du-nut{ color:#17703d !important; border-color:#9fd8b4 !important; }
html.gd-sieu-anh-hung .ktb2-bo-mien{ color:#c8102e !important; border-color:#f4c8cd !important; }
html.gd-sieu-anh-hung .ktb2-vang-chu{ color:#8a7b70; } html.gd-sieu-anh-hung .ktb2-vang-chu a{ color:#5b35c7; }
html.gd-sieu-anh-hung .ktb2-chan{ border-top:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .ktb2-chan .ktb2-tich i{ color:#e08a00; }
html.gd-sieu-anh-hung .ktb2-dem{ color:#5b4a41; } html.gd-sieu-anh-hung .ktb2-dem.cam b, html.gd-sieu-anh-hung .ktb2-dem.cam{ color:#b06a00; } html.gd-sieu-anh-hung .ktb2-dem.xanh{ color:#1e7a46; }
html.gd-sieu-anh-hung .ktb2-luu{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d) !important; border:1px solid #d49a1c !important; color:#2a1606 !important; box-shadow:0 10px 18px -12px rgba(170,110,0,.9); }
html.gd-sieu-anh-hung .ktb2-chip{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#3b2a20; }
html.gd-sieu-anh-hung .ktb2-chip.on{ background:linear-gradient(180deg, #fff1c4, #ffd76a); border-color:#e0a82a; color:#2a1606; } html.gd-sieu-anh-hung .ktb2-chip.do.on{ background:#ffe5e8; border-color:#f4c8cd; color:#b10e25; }
html.gd-sieu-anh-hung .ktb2-hoi{ color:#8a7b70; }
html.gd-sieu-anh-hung .ktb2-nd b{ color:#1b120c; } html.gd-sieu-anh-hung .ktb2-nd small{ color:#8a7b70; }
html.gd-sieu-anh-hung .ktb2-da-nop{ color:#17703d !important; border-color:#9fd8b4 !important; }
html.gd-sieu-anh-hung #pane-kiemtrabai tr.ktb2-tre > td{ background:#fff6f6 !important; }
html.gd-sieu-anh-hung .ktb2-them{ background:#fff; border:1px dashed rgba(125,35,20,.25); color:#8a1a24; }
html.gd-sieu-anh-hung .ktb2-ghi-dai{ color:#7a6a60; } html.gd-sieu-anh-hung .ktb2-ghi-dai b{ color:#2a1810; }
html.gd-sieu-anh-hung .ktb2-vo-tt.do{ background:#ffe5e8; color:#b10e25; } html.gd-sieu-anh-hung .ktb2-vo-tt.lam{ background:#e4efff; color:#1d4fa8; }
html.gd-sieu-anh-hung .ktb2-ngay{ color:#8a7b70; }
html.gd-sieu-anh-hung .ktb2-vo-o{ color:#2a1810; } html.gd-sieu-anh-hung .ktb2-vo-o .form-check-input:checked{ background-color:#1e9e52; border-color:#1e9e52; }
html.gd-sieu-anh-hung .ktb2-ghi-nhan{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d) !important; border-color:#d49a1c !important; color:#2a1606 !important; }
html.gd-sieu-anh-hung .ktb2-nhac-nut{ color:#8a7b70; } html.gd-sieu-anh-hung .ktb2-nhac-nut.on{ color:#1d4fa8; }
html.gd-sieu-anh-hung .ktb2-du{ color:#1e7a46; }
html.gd-sieu-anh-hung .ktb2-trong{ background:#fffaf4; border:1.5px dashed rgba(125,35,20,.16); color:#8a7b70; }
/* ───────── Học chéo (js/hoc-cheo.js — tab nhân viên) ───────── */
#pane-hoccheo{ position:relative; }
.hc2-qd{ padding:10px 14px !important; margin-bottom:14px; }
@media (min-width:1400px){ .hc2-qd{ position:absolute; top:10px; right:22px; z-index:2; width:min(720px, 52%); margin:0; } }
.hc2-qd-ten{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800; margin-bottom:6px; }
.hc2-hoi{ cursor:help; font-size:14px; }
.hc2-qd-hang{ display:flex; gap:10px; align-items:stretch; flex-wrap:nowrap; }
.hc2-qd-o{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:12px; margin:0; cursor:text; }
.hc2-qd-o > i{ font-size:20px; flex:none; }
.hc2-qd-o > span{ display:flex; flex-direction:column; font-size:11.5px; font-weight:600; min-width:0; white-space:nowrap; }
.hc2-qd-o input{ border:0; background:none; padding:0; font:inherit; font-size:18px; font-weight:800; width:100%; min-width:0; outline:none; }
.hc2-qd-o input:disabled{ cursor:default; }
.hc2-luu-qd{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px !important; font-size:14.5px !important; border-radius:12px !important; font-weight:800 !important; white-space:nowrap; }
.hc2-qd-msg{ font-size:12.5px; font-weight:600; margin-top:6px; } .hc2-qd-msg:empty{ display:none; }
.hc2-luoi{ display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:16px; align-items:start; margin-bottom:14px; }
.hc2-trai{ min-width:0; display:flex; flex-direction:column; gap:12px; }
.hc2-che-do{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.hc2-che-do button{ display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; border-radius:12px; font:inherit; font-size:15.5px; font-weight:700; cursor:pointer; transition:transform .2s, box-shadow .25s; }
.hc2-che-do button:hover{ transform:translateY(-1px); }
.hc2-che-do b{ font-weight:800; }
.hc2-loc{ display:flex; flex-direction:row !important; align-items:center; gap:10px 14px; flex-wrap:wrap; padding:10px 14px !important; }
.hc2-loc-o{ display:flex; align-items:center; gap:10px; margin:0; font-size:14px; font-weight:600; white-space:nowrap; }
.hc2-loc-o[hidden]{ display:none; }
.hc2-loc-o .form-control{ width:165px !important; }
.hc2-loc-lop{ position:relative; flex:1 1 180px; min-width:160px; }
.hc2-loc-lop > i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none; z-index:1; }
.hc2-loc-lop .form-select{ padding-left:38px !important; }
.hc2-tai{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px !important; border-radius:11px !important; font-weight:700 !important; }
#hcDs{ display:flex; flex-direction:column; gap:12px; }
.hc2-the{ padding:14px 16px !important; display:flex; flex-direction:column; gap:12px; animation:hs2Mo .4s cubic-bezier(.22,1,.36,1) both; }
.hc2-the-dau{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hc2-the-dau .hs2-av{ width:48px; height:48px; font-size:16px; }
.hc2-ten{ display:flex; flex-direction:column; min-width:120px; }
.hc2-ten b{ font-size:18px; font-weight:800; } .hc2-ten small{ font-size:13px; } .hc2-ten i{ font-style:normal; opacity:.5; margin:0 4px; }
.hc2-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font-size:14px; font-weight:700; white-space:nowrap; }
.hc2-luot{ margin-left:auto; display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:18px; align-items:center; padding:7px 14px; border-radius:12px; }
.hc2-luot small{ font-size:12.5px; font-weight:600; } .hc2-luot b{ grid-row:2; font-size:20px; font-weight:900; }
.hc2-luot span{ grid-row:1 / span 2; grid-column:2; font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
.hc2-the-than{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hc2-ca{ display:flex; align-items:center; gap:10px; flex:1 1 520px; min-width:0; }
.hc2-ca-o{ flex:1 1 0; display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; min-width:0; }
.hc2-ca-ic{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; font-size:16px; }
.hc2-ca-o > div{ display:flex; flex-direction:column; min-width:0; }
.hc2-ca-o small{ font-size:12px; font-weight:700; } .hc2-ca-o b{ font-size:13.5px; font-weight:600; white-space:nowrap; } .hc2-ca-o span{ font-size:13px; font-weight:600; }
.hc2-ca-o b i, .hc2-ca-o span i{ width:16px; margin-right:4px; opacity:.75; }
.hc2-mui{ font-size:17px; flex:none; }
.hc2-nut{ display:flex; flex-direction:column; gap:8px; min-width:120px; margin-left:auto; }
.hc2-nut .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 14px !important; border-radius:11px !important; font-weight:800 !important; }
.hc2-the-duoi{ display:flex; gap:12px 28px; flex-wrap:wrap; font-size:13.5px; }
.hc2-the-duoi > div{ display:flex; align-items:flex-start; gap:10px; flex:1 1 220px; min-width:0; }
.hc2-the-duoi > div > i{ font-size:17px; margin-top:3px; }
.hc2-the-duoi span{ display:flex; flex-direction:column; } .hc2-the-duoi small{ font-size:12px; font-weight:600; }
.hc2-the-duoi em{ opacity:.7; }
.hc2-the.da_huy, .hc2-the.tu_choi{ opacity:.72; }
.hc2-phai{ padding:16px !important; display:flex; flex-direction:column; gap:10px; position:sticky; top:calc(var(--head, 88px) + 12px); }
.hc2-phai-dau{ display:flex; align-items:flex-start; gap:12px; margin-bottom:4px; }
.hc2-phai-dau > div{ display:flex; flex-direction:column; flex:1; }
.hc2-phai-dau b{ font-size:19px; font-weight:900; text-transform:uppercase; } .hc2-phai-dau small{ font-size:13px; }
.hc2-phai-huy{ width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:19px; }
.hc2-tim{ position:relative; }
.hc2-tim > i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); pointer-events:none; z-index:1; }
.hc2-tim .form-control{ padding-left:40px !important; }
#hcHoBox{ display:flex; flex-direction:column; gap:8px; }
.hc2-ho-trong{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 10px; text-align:center; font-size:13.5px; border-radius:12px; }
.hc2-ho-trong i{ font-size:24px; opacity:.5; }
.hc2-ho-hs{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; }
.hc2-ho-hs > div{ display:flex; flex-direction:column; flex:1; min-width:0; }
.hc2-ho-hs b{ font-size:16px; font-weight:800; } .hc2-ho-hs small{ font-size:12.5px; } .hc2-ho-hs i{ font-style:normal; opacity:.5; margin:0 3px; }
.hc2-ho-doi{ width:30px; height:30px; border:0; border-radius:8px; background:none; cursor:pointer; }
.hc2-ho-nhan{ margin:6px 0 0; font-size:14.5px; font-weight:700; } .hc2-ho-nhan span{ font-weight:500; }
.hc2-ho-o{ position:relative; }
.hc2-ho-o > i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); pointer-events:none; z-index:1; }
.hc2-ho-o .form-select{ padding-left:40px !important; font-size:14px !important; }
.hc2-ho-luot{ font-size:12.5px; font-weight:600; padding:7px 10px; border-radius:10px; }
.hc2-ho-luot i{ margin-right:5px; }
.hc2-ho-gui{ display:flex; align-items:center; justify-content:center; gap:10px; padding:12px !important; border-radius:12px !important; font-weight:800 !important; font-size:17px !important; margin-top:4px; }
.hc2-ho-msg{ font-size:13px; font-weight:600; } .hc2-ho-msg:empty{ display:none; }
.hc2-ho-da{ display:flex; flex-direction:column; gap:6px; margin-top:6px; padding-top:10px; font-size:13px; }
.hc2-ho-da > b{ font-size:13.5px; }
.hc2-ho-da-dong{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hc2-ho-da-dong > span:first-child{ flex:1 1 160px; }
.hc2-ho-da-dong .hc2-chip{ font-size:11.5px; padding:3px 9px; }
.hc2-ho-huy{ width:28px; height:28px; border-radius:8px; cursor:pointer; }
.hc2-ghi-admin{ display:flex; gap:10px; font-size:12.5px; line-height:1.45; padding:10px 12px; border-radius:12px; margin-top:4px; }
.hc2-ghi-admin i{ margin-top:2px; }
.hc2-tong{ display:flex; flex-direction:row !important; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 18px !important; }
.hc2-tong:empty{ display:none; }
.hc2-tong-ten{ display:flex; align-items:center; gap:12px; font-size:17px; font-weight:900; text-transform:uppercase; margin-right:auto; }
.hc2-tong-ten i{ font-size:22px; }
.hc2-tong-o{ display:flex; align-items:center; gap:12px; padding:8px 22px; border-radius:12px; min-width:180px; }
.hc2-tong-o i{ font-size:24px; } .hc2-tong-o b{ font-size:26px; font-weight:900; } .hc2-tong-o span{ font-size:14.5px; font-weight:600; }
.hc2-trong{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:30px 14px; border-radius:16px; text-align:center; font-size:14px; }
.hc2-trong i{ font-size:26px; opacity:.5; }
.hc2-tk{ padding:14px 16px !important; }
.hc2-tk-dau{ display:flex; flex-direction:column; margin-bottom:10px; } .hc2-tk-dau b{ font-size:16px; font-weight:800; } .hc2-tk-dau small{ font-size:12.5px; }
.hc2-tk-hs{ display:flex; align-items:center; gap:10px; } .hc2-tk-hs > span:last-child{ display:flex; flex-direction:column; } .hc2-tk-hs small{ font-size:12px; }
.hc2-tk-so{ display:inline-grid; place-items:center; min-width:40px; height:32px; border-radius:9px; font-weight:800; }
.hc2-tk-ok{ font-size:13px; }
@media (max-width:1199.98px){ .hc2-luoi{ grid-template-columns:minmax(0, 1fr); } .hc2-phai{ position:static; } }
@media (max-width:767.98px){
  .hc2-qd-hang{ flex-wrap:wrap; } .hc2-qd-o{ flex:1 1 40%; } .hc2-luu-qd{ flex:1 1 100%; justify-content:center; }
  .hc2-che-do{ gap:6px; } .hc2-che-do button{ font-size:13px; padding:10px 6px; gap:6px; }
  .hc2-ca{ flex-direction:column; align-items:stretch; } .hc2-mui{ transform:rotate(90deg); align-self:center; }
  .hc2-nut{ flex-direction:row; width:100%; } .hc2-nut .btn{ flex:1; }
  .hc2-luot{ margin-left:0; } .hc2-loc-o .form-control{ width:auto !important; flex:1; }
  .hc2-tong-o{ min-width:0; flex:1; padding:8px 12px; } .hc2-tong-ten{ width:100%; }
}
html.gd-sieu-anh-hung .hc2-qd{ background:#fffdf8 !important; border:1px solid #f1d590 !important; }
html.gd-sieu-anh-hung .hc2-qd-ten{ color:#1b120c; } html.gd-sieu-anh-hung .hc2-qd-ten > i:first-child{ color:#3b2a20; } html.gd-sieu-anh-hung .hc2-hoi{ color:#8a7b70; }
html.gd-sieu-anh-hung .hc2-qd-o{ background:#fff; border:1px solid rgba(125,35,20,.14); }
html.gd-sieu-anh-hung .hc2-qd-o:focus-within{ border-color:#e9b84c; box-shadow:0 0 0 3px rgba(233,184,76,.25); }
html.gd-sieu-anh-hung .hc2-qd-o > i{ color:#d81a32; } html.gd-sieu-anh-hung .hc2-qd-o:nth-child(3) > i{ color:#f08a00; }
html.gd-sieu-anh-hung .hc2-qd-o > span{ color:#5b4a41; } html.gd-sieu-anh-hung .hc2-qd-o input{ color:#c8102e; }
html.gd-sieu-anh-hung .hc2-luu-qd, html.gd-sieu-anh-hung .hc2-ho-gui{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d) !important; border:1px solid #d49a1c !important; color:#2a1606 !important; box-shadow:0 8px 16px -12px rgba(170,110,0,.9); }
html.gd-sieu-anh-hung .hc2-qd-msg.ok{ color:#1e7a46; } html.gd-sieu-anh-hung .hc2-qd-msg.loi{ color:#c8102e; }
html.gd-sieu-anh-hung .hc2-che-do button{ background:#fff; border:1px solid rgba(125,35,20,.14); color:#2a1810; box-shadow:0 6px 14px -12px rgba(90,25,10,.6); }
html.gd-sieu-anh-hung .hc2-che-do button i{ color:#5b4a41; }
html.gd-sieu-anh-hung .hc2-che-do button.on{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d); border-color:#d49a1c; color:#2a1606; box-shadow:0 10px 18px -12px rgba(170,110,0,.9); }
html.gd-sieu-anh-hung .hc2-che-do button.on i{ color:#3d1a02; } html.gd-sieu-anh-hung .hc2-che-do b{ color:#c8102e; }
html.gd-sieu-anh-hung .hc2-loc{ background:#fff !important; } html.gd-sieu-anh-hung .hc2-loc-o{ color:#2a1810; } html.gd-sieu-anh-hung .hc2-loc-lop > i{ color:#3b2a20; }
html.gd-sieu-anh-hung .hc2-tai{ background:#fff !important; border:1px solid rgba(125,35,20,.16) !important; color:#2a1810 !important; }
html.gd-sieu-anh-hung .hc2-the{ background:#fff !important; }
html.gd-sieu-anh-hung .hc2-the.cho_duyet{ border-color:#f1d590 !important; }
html.gd-sieu-anh-hung .hc2-ten b{ color:#1b120c; } html.gd-sieu-anh-hung .hc2-ten small{ color:#5b4a41; }
html.gd-sieu-anh-hung .hc2-chip.xanh{ background:#e3f6e9; color:#17703d; } html.gd-sieu-anh-hung .hc2-chip.cam{ background:#fff0d6; color:#b04c00; }
html.gd-sieu-anh-hung .hc2-chip.cam i{ color:#e0670b; } html.gd-sieu-anh-hung .hc2-chip.do{ background:#ffe5e8; color:#b10e25; } html.gd-sieu-anh-hung .hc2-chip.xam{ background:#f1ece7; color:#5b4a41; }
html.gd-sieu-anh-hung .hc2-luot{ background:#fff7f7; border:1px solid #f6d3d6; } html.gd-sieu-anh-hung .hc2-luot small{ color:#5b4a41; } html.gd-sieu-anh-hung .hc2-luot b{ color:#1b120c; }
html.gd-sieu-anh-hung .hc2-luot.vuot b{ color:#c8102e; } html.gd-sieu-anh-hung .hc2-luot span{ color:#c8102e; }
html.gd-sieu-anh-hung .hc2-ca-o.goc{ background:#eef5ff; border:1px solid #cfe0f8; } html.gd-sieu-anh-hung .hc2-ca-o.goc .hc2-ca-ic{ background:#dbe9ff; color:#1d63d8; } html.gd-sieu-anh-hung .hc2-ca-o.goc small{ color:#1d4fa8; }
html.gd-sieu-anh-hung .hc2-ca-o.moi{ background:#effaf3; border:1px solid #cbebd6; } html.gd-sieu-anh-hung .hc2-ca-o.moi .hc2-ca-ic{ background:#d7f2e1; color:#1e8a4c; } html.gd-sieu-anh-hung .hc2-ca-o.moi small{ color:#17703d; }
html.gd-sieu-anh-hung .hc2-ca-o b, html.gd-sieu-anh-hung .hc2-ca-o span{ color:#1b120c; }
html.gd-sieu-anh-hung .hc2-mui{ color:#3b2a20; }
html.gd-sieu-anh-hung .hc2-duyet{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d) !important; border:1px solid #d49a1c !important; color:#2a1606 !important; }
html.gd-sieu-anh-hung .hc2-tu-choi{ background:#fff !important; border:1px solid #f4c8cd !important; color:#c8102e !important; }
html.gd-sieu-anh-hung .hc2-huy{ background:#fff !important; border:1px solid rgba(125,35,20,.18) !important; color:#5b4a41 !important; }
html.gd-sieu-anh-hung .hc2-the-duoi{ color:#1b120c; border-top:1px dashed rgba(125,35,20,.14); padding-top:10px; }
html.gd-sieu-anh-hung .hc2-the-duoi > div > i{ color:#5b4a41; } html.gd-sieu-anh-hung .hc2-the-duoi small{ color:#7a6a60; }
html.gd-sieu-anh-hung .hc2-phai{ background:#fff !important; }
html.gd-sieu-anh-hung .hc2-phai-dau b{ color:#1b120c; } html.gd-sieu-anh-hung .hc2-phai-dau small{ color:#1d4fa8; }
html.gd-sieu-anh-hung .hc2-phai-huy{ background:#eef5ff; color:#1d4fa8; } html.gd-sieu-anh-hung .hc2-phai-dau .hc2-hoi{ color:#e08a00; }
html.gd-sieu-anh-hung .hc2-tim > i, html.gd-sieu-anh-hung .hc2-ho-o > i{ color:#3b2a20; }
html.gd-sieu-anh-hung .hc2-ho-trong{ background:#fffaf4; border:1.5px dashed rgba(125,35,20,.16); color:#8a7b70; }
html.gd-sieu-anh-hung .hc2-ho-hs{ background:#fff; border:1px solid rgba(125,35,20,.14); } html.gd-sieu-anh-hung .hc2-ho-hs b{ color:#1b120c; } html.gd-sieu-anh-hung .hc2-ho-hs small{ color:#5b4a41; }
html.gd-sieu-anh-hung .hc2-ho-doi{ color:#8a7b70; } html.gd-sieu-anh-hung .hc2-ho-doi:hover{ background:#f5efe8; }
html.gd-sieu-anh-hung .hc2-ho-nhan{ color:#1b120c; } html.gd-sieu-anh-hung .hc2-ho-nhan span{ color:#7a6a60; }
html.gd-sieu-anh-hung .hc2-ho-luot{ background:#f4faf6; color:#1e7a46; } html.gd-sieu-anh-hung .hc2-ho-luot.canh{ background:#fff4e0; color:#a35f00; }
html.gd-sieu-anh-hung .hc2-ho-msg.ok{ color:#1e7a46; } html.gd-sieu-anh-hung .hc2-ho-msg.loi{ color:#c8102e; }
html.gd-sieu-anh-hung .hc2-ho-da{ border-top:1px dashed rgba(125,35,20,.16); color:#3b2a20; }
html.gd-sieu-anh-hung .hc2-ho-huy{ background:#fff; border:1px solid #f4c8cd; color:#c8102e; }
html.gd-sieu-anh-hung .hc2-ghi-admin{ background:#fffaf2; border:1px solid #f3e2c4; color:#5b4a41; } html.gd-sieu-anh-hung .hc2-ghi-admin i{ color:#d98b0b; }
html.gd-sieu-anh-hung .hc2-tong{ background:#fff !important; }
html.gd-sieu-anh-hung .hc2-tong-ten{ color:#1b120c; } html.gd-sieu-anh-hung .hc2-tong-ten i{ color:#1d4fa8; }
html.gd-sieu-anh-hung .hc2-tong-o{ border:1px solid rgba(125,35,20,.10); }
html.gd-sieu-anh-hung .hc2-tong-o.xanh{ background:#f2fbf5; } html.gd-sieu-anh-hung .hc2-tong-o.xanh i, html.gd-sieu-anh-hung .hc2-tong-o.xanh b{ color:#1e8a4c; }
html.gd-sieu-anh-hung .hc2-tong-o.cam{ background:#fff8ee; } html.gd-sieu-anh-hung .hc2-tong-o.cam i, html.gd-sieu-anh-hung .hc2-tong-o.cam b{ color:#e07b00; }
html.gd-sieu-anh-hung .hc2-tong-o.do{ background:#fff5f5; } html.gd-sieu-anh-hung .hc2-tong-o.do i, html.gd-sieu-anh-hung .hc2-tong-o.do b{ color:#d81a32; }
html.gd-sieu-anh-hung .hc2-tong-o span{ color:#3b2a20; }
html.gd-sieu-anh-hung .hc2-trong{ background:#fffaf4; border:1.5px dashed rgba(125,35,20,.16); color:#8a7b70; }
html.gd-sieu-anh-hung .hc2-tk{ background:#fff !important; } html.gd-sieu-anh-hung .hc2-tk-dau b{ color:#1b120c; } html.gd-sieu-anh-hung .hc2-tk-dau small, html.gd-sieu-anh-hung .hc2-tk-hs small{ color:#8a7b70; }
html.gd-sieu-anh-hung .hc2-tk-so{ background:#eaf2ff; color:#1d4fa8; } html.gd-sieu-anh-hung .hc2-tk-so.vuot{ background:#ffe5e8; color:#b10e25; } html.gd-sieu-anh-hung .hc2-tk-ok{ color:#1e7a46; }
@media (prefers-reduced-motion:reduce){ .hc2-the{ animation:none !important; } }
/* ───────── Điểm danh — bổ sung theo ảnh mẫu (app.js veTongKetDd_; bố cục cũ ở css/diem-danh.css) ───────── */
.dd2-khung-dau{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.dd2-khung-dau > i:first-child{ font-size:19px; }
.dd2-khung-dau b{ font-size:17px; font-weight:900; text-transform:uppercase; letter-spacing:.01em; flex:1; }
.dd2-hoi{ cursor:help; font-size:14px; }
.dd-cheo .dd-cheo-dem{ font-size:12.5px; font-weight:600; }
.dd2-cheo-o{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dd2-cheo-the{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; min-width:0; }
.dd2-cheo-the > span{ width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:19px; }
.dd2-cheo-the b{ display:block; font-size:28px; font-weight:900; line-height:1; } .dd2-cheo-the small{ display:block; font-size:11.5px; font-weight:600; line-height:1.3; }
.dd2-cheo-nut{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dd2-nut-trang{ display:inline-flex !important; align-items:center; justify-content:center; gap:8px; padding:9px 10px !important; border-radius:11px !important; font-size:13.5px !important; font-weight:700 !important; white-space:nowrap; }
#attCheoThuCong[hidden]{ display:none !important; }
.dd2-the-luoi{ margin-bottom:12px; }
.dd2-the-luoi .nvs-the{ padding:12px 16px; }
.dd2-the-luoi .nvs-the-huy{ width:54px; height:54px; font-size:22px; }
.dd2-the-luoi .nvs-the-chu b{ font-size:32px; }
.dd2-btvn{ display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding:11px 16px; border-radius:14px; margin-bottom:14px; font-size:14px; }
.dd2-btvn[hidden]{ display:none; }
.dd2-btvn-ic{ font-size:20px; }
.dd2-btvn b{ font-size:15.5px; font-weight:800; }
.dd2-btvn-dem{ font-weight:700; padding:2px 10px; border-radius:999px; font-size:13px; }
.dd2-btvn-gach{ width:1px; height:22px; }
.dd2-btvn-link{ font-weight:700; text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:7px; }
.dd2-btvn-cong{ margin-left:auto; font-size:13px; }
#attList .dd-bang td.att-ten{ position:relative; min-width:220px; padding-left:62px !important; }
.dd2-av{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:38px !important; height:38px !important; font-size:13px !important; display:grid !important; place-items:center; color:#fff; }
.dd2-ma-lop{ font-weight:600; }
.dd2-loc-an{ display:none !important; }
@media (min-width:992px){ #attList .dd-bang :is(th.att-ma, td.att-ma, th.att-lop, td.att-lop){ display:none; } }
#attFooter .dd2-chan-vang{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; min-width:0; }
#attFooter .dd2-chan-vang:empty{ display:none; }
.dd2-chan-huy{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:900; color:#fff; flex:none; }
.dd2-chan-vang a{ font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.dd2-chan-ok{ font-weight:600; font-size:13.5px; }
.dd2-chan-nut{ display:inline-flex !important; align-items:center; gap:8px; white-space:nowrap; }
@media (max-width:1499.98px){ .dd2-chan-nut span{ display:none; } }
@media (max-width:767.98px){
  .dd2-cheo-nut{ grid-template-columns:1fr; } .dd2-btvn-cong{ margin-left:0; } .dd2-cheo-the > span{ display:none; }
  .bd2-the-luoi .nvs-the-chu > span{ font-size:12px; white-space:normal; } .bd2-the-luoi .nvs-the-chu b{ font-size:22px; } .dd2-btvn-gach{ display:none; }
  .dd2-the-luoi .nvs-the-huy{ display:none; } .dd2-the-luoi .nvs-the-chu b{ font-size:24px; }
  #attList .dd-bang td.att-ten{ padding-left:10px !important; } .dd2-av{ display:none !important; }
}
html.gd-sieu-anh-hung .dd2-khung-dau{ color:#1b120c; } html.gd-sieu-anh-hung .dd2-khung-dau > i:first-child{ color:#3b2a20; } html.gd-sieu-anh-hung .dd-cheo .dd2-khung-dau > i:first-child{ color:#1d63d8; }
html.gd-sieu-anh-hung .dd2-hoi{ color:#8a7b70; }
html.gd-sieu-anh-hung .dd2-cheo-the.den{ background:#effaf3; border:1px solid #cbebd6; } html.gd-sieu-anh-hung .dd2-cheo-the.den > span{ background:#d7f2e1; color:#1e8a4c; } html.gd-sieu-anh-hung .dd2-cheo-the.den b{ color:#17703d; }
html.gd-sieu-anh-hung .dd2-cheo-the.di{ background:#fff4f4; border:1px solid #f6d3d6; } html.gd-sieu-anh-hung .dd2-cheo-the.di > span{ background:#ffdadd; color:#d81a32; } html.gd-sieu-anh-hung .dd2-cheo-the.di b{ color:#c8102e; }
html.gd-sieu-anh-hung .dd2-cheo-the small{ color:#3b2a20; }
html.gd-sieu-anh-hung .dd2-nut-trang{ background:#fff !important; border:1px solid rgba(125,35,20,.18) !important; color:#2a1810 !important; }
html.gd-sieu-anh-hung .dd2-nut-trang:hover{ border-color:#e9b84c !important; background:#fffaf3 !important; }
html.gd-sieu-anh-hung .dd2-btvn{ background:#fff7e1; border:1px solid #f1d590; color:#3b2a20; }
html.gd-sieu-anh-hung .dd2-btvn-ic{ color:#3b2a20; } html.gd-sieu-anh-hung .dd2-btvn b{ color:#1b120c; }
html.gd-sieu-anh-hung .dd2-btvn-dem{ background:#fff; color:#a35f00; } html.gd-sieu-anh-hung .dd2-btvn-gach{ background:rgba(125,35,20,.2); }
html.gd-sieu-anh-hung .dd2-btvn-link{ color:#1d4fa8; } html.gd-sieu-anh-hung .dd2-btvn-link:hover{ color:#c8102e; } html.gd-sieu-anh-hung .dd2-btvn-cong{ color:#3b2a20; }
html.gd-sieu-anh-hung .dd2-ma-lop{ color:#5b4a41; }
html.gd-sieu-anh-hung .dd2-chan-huy{ background:radial-gradient(circle at 35% 30%, #ff5a68, #c8102e 70%); }
html.gd-sieu-anh-hung #attFooter .dd2-chan-vang b{ color:#c8102e; } html.gd-sieu-anh-hung .dd2-chan-vang a{ color:#1d4fa8; } html.gd-sieu-anh-hung .dd2-chan-ok{ color:#1e7a46; }
html.gd-sieu-anh-hung .dd2-chan-nut{ background:#fff !important; border:1px solid rgba(125,35,20,.18) !important; color:#2a1810 !important; }
html.gd-sieu-anh-hung .dd2-chan-nut.do{ color:#c8102e !important; border-color:#f4c8cd !important; }
/* ===== Khung "Vắng & đi muộn — liên hệ phụ huynh" phía trên bảng điểm danh (07/10/2026) ===== */
.dd-vm{ margin:0 0 14px; padding:12px 14px; border-radius:16px; border:1px solid #f6d3d6; background:#fff4f4; }
.dd-vm-dau{ display:flex; align-items:center; gap:10px; margin-bottom:8px; color:#c8102e; font-size:15px; }
.dd-vm-dau i{ font-size:17px; }
.dd-vm-dong{ display:grid; grid-template-columns:minmax(150px, 1.4fr) auto minmax(150px, auto); align-items:center; gap:6px 14px; padding:9px 4px; border-top:1px solid rgba(200,16,46,.12); }
.dd-vm-ten{ display:flex; flex-direction:column; min-width:0; }
.dd-vm-ten b{ font-size:14.5px; color:#1b120c; overflow-wrap:anywhere; }
.dd-vm-ten small{ color:#6b5a4f; font-weight:600; }
.dd-vm-tt{ justify-self:start; padding:3px 11px; border-radius:999px; font-size:12.5px; font-weight:800; white-space:nowrap; }
.dd-vm-tt.kp{ background:#ffdadd; color:#c8102e; }
.dd-vm-tt.cp{ background:#fff0c9; color:#a35f00; }
.dd-vm-tt.muon{ background:#d7efec; color:#17756c; }
.dd-vm-sdt{ display:inline-flex; align-items:center; gap:7px; justify-self:end; font-weight:800; font-size:15px; color:#1d4fa8; text-decoration:none; padding:6px 12px; border-radius:12px; background:#fff; border:1px solid #cddcf5; white-space:nowrap; }
.dd-vm-sdt:hover{ color:#c8102e; border-color:#f4c8cd; }
.dd-vm-sdt small{ font-weight:600; font-size:11px; color:#6b5a4f; margin-left:2px; }
.dd-vm-sdt.chua{ color:#8a7b70; font-weight:600; font-size:13px; background:transparent; border-style:dashed; }
@media (max-width:767.98px){
  .dd-vm{ padding:10px 10px; }
  .dd-vm-dau{ font-size:14px; align-items:flex-start; }
  /* điện thoại: tên + trạng thái bên trái, nút gọi to bên phải — mỗi em 1 dòng gọn */
  .dd-vm-dong{ grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"ten sdt" "tt sdt"; gap:4px 10px; padding:8px 2px; }
  .dd-vm-ten{ grid-area:ten; } .dd-vm-tt{ grid-area:tt; } .dd-vm-sdt{ grid-area:sdt; justify-self:end; font-size:14.5px; padding:8px 10px; flex-direction:column; align-items:center; gap:2px; }
  .dd-vm-sdt small{ margin-left:0; }
  .dd-vm-sdt.chua{ font-size:12px; text-align:center; max-width:110px; white-space:normal; }
}
/* ===== Chân trang: nút "Số phụ huynh" + bảng tên / SĐT em vắng, đi muộn (07/10/2026) — hiện cả trên điện thoại ===== */
.dd2-chan-goi{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-weight:800; font-size:13.5px; cursor:pointer; background:#fff; color:#1d4fa8; border:1px solid #cddcf5; white-space:nowrap; }
.dd2-chan-goi:hover{ color:#c8102e; border-color:#f4c8cd; }
.dd-vm-panel{ position:absolute; left:0; right:0; bottom:100%; max-height:min(62vh, 460px); overflow:auto; padding:10px 14px 6px; background:#fff4f4; border-top:2px solid #f0b4bb; box-shadow:0 -10px 24px rgba(125,35,20,.18); z-index:5; }
.dd-vm-panel[hidden]{ display:none !important; }
.dd-vm-panel .dd-vm-dau{ position:sticky; top:-10px; background:#fff4f4; padding:4px 0 8px; margin:0; z-index:1; }
.dd-vm-dong-nut{ margin-left:auto; border:0; background:#fff; color:#c8102e; width:32px; height:32px; border-radius:50%; font-weight:900; cursor:pointer; box-shadow:0 0 0 1px #f4c8cd; }
@media (max-width:767.98px){
  #attFooter{ flex-wrap:wrap; row-gap:8px; }
  #attFooter .dd2-chan-vang{ order:-1; flex:1 0 100%; justify-content:space-between; flex-wrap:nowrap; gap:8px; }
  #attFooter .dd2-chan-vang .dd2-chan-loc, #attFooter .dd2-chan-vang .dd2-chan-huy{ display:none; }
  #attFooter .dd2-chan-vang b{ font-size:13px; line-height:1.25; }
  .dd2-chan-goi{ flex:none; padding:7px 12px; font-size:13px; }
}
/* 06/11/2026: Điểm danh không còn phần "Giao: từ bài → đến bài" — việc giao bài tập đã có tab Giao bài tập riêng */
#attBaiTuDenWrap{ display:none !important; }

/* Bảng điểm: mỗi em chỉ hiện các ngày em đó học + cột Nhận xét theo điểm số (06/11/2026) */
.bd2-cac-buoi{ display:flex; flex-wrap:wrap; gap:6px; min-width:180px; }
.bd2-buoi{ display:inline-flex; flex-direction:column; align-items:center; gap:1px; padding:3px 9px; border-radius:10px; background:#f1ece6; line-height:1.15; }
.bd2-buoi small{ font-size:.68rem; color:#6f625a; white-space:nowrap; }
.bd2-buoi b{ font-size:.95rem; }
.bd2-buoi.xanh{ background:#d8f2dd; } .bd2-buoi.xanh b{ color:#1f6b2c; }
.bd2-buoi.lam{ background:#dbe9fb; } .bd2-buoi.lam b{ color:#134f8a; }
.bd2-buoi.do{ background:#ffd9d4; } .bd2-buoi.do b{ color:#9b1c13; }
.bd2-buoi.vang{ background:#ffe9b8; } .bd2-buoi.vang b{ color:#7a4b00; }
.bd2-th-phu{ display:block; font-weight:400; font-size:.7rem; opacity:.8; text-transform:none; letter-spacing:0; }
.bd2-nx-o{ min-width:220px; max-width:320px; }
.bd2-nx-o .bd2-xl{ display:inline-block; }
.bd2-nx-o p{ margin:4px 0 0; font-size:.8rem; line-height:1.35; color:#4d423b; }

/* PHÁT SÁCH — ghi chú Sách 1 / Sách 2 đã đóng + ô tích "đã phát" (js/phat-sach.js, 07/10/2026) */
.ps-cho{ display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ps-cho:empty{ display:none; }
.ps-the{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 7px; border-radius:999px; font-size:12.5px; line-height:1.3; cursor:pointer; user-select:none;
  background:#fff7e1; border:1px solid #f1d590; color:#5b3d00; margin:0; }
.ps-the input{ -webkit-appearance:none; appearance:none; width:18px; height:18px; margin:0; border:2px solid #c9a24a; border-radius:5px; background:#fff; cursor:pointer; flex:none; display:inline-grid; place-content:center; box-shadow:none; padding:0; }
.ps-the input::after{ content:""; width:9px; height:5px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) translate(1px,-1px); opacity:0; }
.ps-the input:checked{ background:#1e8a4c; border-color:#1e8a4c; }
.ps-the input:checked::after{ opacity:1; }
.ps-the input:focus-visible{ outline:2px solid #1d4fa8; outline-offset:2px; }
.ps-the .ps-ten{ font-weight:800; }
.ps-the .ps-tt{ font-weight:600; color:#8a6a1f; }
.ps-the.phat{ background:#effaf3; border-color:#cbebd6; color:#14633a; }
.ps-the.phat .ps-tt{ color:#1e7a46; font-weight:700; }
.ps-the:has(input:disabled){ opacity:.6; cursor:progress; }
.ps-chua{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; color:#8a7b70; background:#f4efe9; border:1px dashed #d9cfc4; }
/* dòng Điểm danh: nằm dưới tên, gọn hơn */
.att-sdt .ps-cho{ display:flex; margin-top:5px; }
.att-sdt .ps-the{ font-size:12px; padding:2px 9px 2px 6px; }
@media (max-width:767.98px){
  .ps-the{ font-size:13px; padding:5px 11px 5px 8px; }
  .ps-the input{ width:22px; height:22px; }
}

/* TẤT TOÁN COMBO KHI HỌC SINH NGHỈ (js/tat-toan.js, 08/10/2026) — dùng màu thừa kế của khung để hợp cả nền sáng lẫn tối */
.tt-bang{ border:1px solid rgba(127,127,127,.28); border-radius:10px; overflow:hidden; }
.tt-dau, .tt-hang{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1.6fr) 132px; gap:4px 12px; align-items:center; padding:7px 12px; }
.tt-dau{ font-size:12px; font-weight:700; opacity:.7; white-space:nowrap; border-bottom:1px solid rgba(127,127,127,.28); }
.tt-hang + .tt-hang{ border-top:1px solid rgba(127,127,127,.18); }
.tt-ten{ font-weight:600; }
.tt-tien{ justify-self:end; width:100%; }
.tt-in-tien{ font-variant-numeric:tabular-nums; }
.tt-buoi{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.tt-in-buoi{ width:54px; text-align:center; padding:2px 4px; }
.tt-so{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 12px; border:1px solid rgba(127,127,127,.28); border-bottom:0; }
.tt-so:first-child{ border-radius:10px 10px 0 0; }
.tt-so:last-child{ border-bottom:1px solid rgba(127,127,127,.28); border-radius:0 0 10px 10px; }
.tt-so b{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.tt-hoan{ background:rgba(30,138,76,.14); font-size:1.08em; }
.tt-hoan b{ color:#1e8a4c; font-size:1.18em; }
.tt-thieu{ background:rgba(217,123,108,.16); }
.tt-thieu b{ color:#c0503f; font-size:1.12em; }
.tt-trong{ padding:14px 4px; line-height:1.55; }
.tt-da{ padding:7px 10px; margin-bottom:6px; border:1px solid rgba(127,127,127,.28); border-radius:10px; font-size:13px; }
.tt-da.huy{ opacity:.55; text-decoration:line-through; }
.tt-da.huy .badge{ text-decoration:none; }
.tt-da summary{ cursor:pointer; }
@media (max-width:575.98px){
  /* điện thoại: mỗi dòng là một thẻ — tên khoản + cách tính bên trái, ô số tiền bên phải (không phải cuộn ngang) */
  .tt-dau{ display:none; }
  .tt-hang{ grid-template-columns:minmax(0,1fr) 112px; padding:9px 10px; }
  .tt-ten{ grid-column:1; }
  .tt-cach{ grid-column:1; grid-row:2; }
  .tt-tien{ grid-column:2; grid-row:1 / span 2; align-self:center; }
  .tt-so{ padding:6px 9px; }
}

/* Khung Admin ở Tổng quan (app.js veTatToanTq_): các dòng chi tiết gập lại */
.tq-tt-ct{ margin:2px 0; }
.tq-tt-ct summary{ cursor:pointer; font-size:12px; opacity:.85; }
.tt-nhan-sach{ display:inline-flex; align-items:center; gap:6px; margin:0 6px 0 0; font-weight:600; cursor:pointer; }
.tt-nhan-sach input{ width:18px; height:18px; margin:0; cursor:pointer; }

/* Xem trước phiếu gửi phụ huynh: vẽ đúng mẫu 720px rồi thu nhỏ vừa khung */
.ttp-thu-nho{ position:relative; overflow:hidden; border:1px solid rgba(127,127,127,.28); border-radius:10px; background:#fff; }
.ttp-thu-nho-trong{ transform-origin:top left; width:720px; }

/* =====================================================================================
 * NHÓM TRỢ GIẢNG (nhân viên) — Chấm công (.cc2-*) / Bổ trợ (.bt2-*) / Lương trợ giảng (.lg2-*) / Kiểm tra chéo (.ktc2-*),
 * theo 4 ảnh mẫu thầy 03/10/2026 (ban-xem-thu/tro-giang-cac-muc-v1). Khung chung .tg2-*: thẻ trắng đầu đỏ viền vàng,
 * nút vàng, ô nhập có biểu tượng, bảng tiêu đề kem / đỏ. Thẻ số dùng chung .nvs-the của hoc-sinh-nv.css, chữ cái đầu .hs2-av.
 * Bố cục cho mọi giao diện; màu cho giao diện Siêu anh hùng. Đè luật chung của noi-dung-nhan-vien.css phải dùng #appShell#appShell.
 * JS: app.js (chấm công: veChamCongThang_, bổ trợ: btRowHtml / chonMucBoTro_), js/lich-bo-tro.js, js/luong-tro-giang.js, js/kiem-tra-cheo.js
 * ===================================================================================== */

/* Tiêu đề trang IN HOA + dòng mô tả đỏ đậm như các nhóm khác */
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo, #pane-phancong) > .mv-bang .mv-tieu-de{ text-transform:uppercase !important; font-weight:900 !important; letter-spacing:0 !important; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo, #pane-phancong) > .mv-bang .mv-phu{ color:#8a1a24; font-weight:600; }

/* ═════════════════════════ KHUNG CHUNG ═════════════════════════ */
.tg2-hop{ border-radius:16px; overflow:hidden; display:flex; flex-direction:column; min-width:0; animation:tg2Vao .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes tg2Vao{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.tg2-dau{ display:flex; align-items:center; gap:10px; padding:11px 16px; min-height:50px; flex-wrap:wrap; }
.tg2-dau > i{ font-size:17px; }
.tg2-dau > b{ font-size:16.5px; font-weight:800; min-width:0; flex:1; }
.tg2-dau > b small{ font-size:13px; font-weight:500; }
.tg2-so{ width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:15px; font-weight:900; }
.tg2-dem{ margin-left:auto; padding:4px 12px; border-radius:999px; font-size:13px; font-weight:800; white-space:nowrap; }
.tg2-tai{ width:32px; height:32px; border-radius:9px; border:0; display:grid; place-items:center; cursor:pointer; font-size:13px; flex:none; }
.tg2-than{ padding:16px 18px; flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.tg2-trong{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 16px; text-align:center; font-size:14px; font-weight:500; }
.tg2-trong i{ font-size:24px; }

/* ô nhập có nhãn + biểu tượng */
.tg2-o-luoi{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 14px; }
.tg2-o-rong{ grid-column:1 / -1; }
.tg2-o{ display:flex; flex-direction:column; min-width:0; }
.tg2-o .form-label{ font-size:13.5px; margin-bottom:5px; }
.tg2-o-icon{ position:relative; }
.tg2-o-icon > i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:15px; pointer-events:none; z-index:3; }
#appShell#appShell .tg2-o-icon > :is(.form-control, .form-select){ padding-left:40px !important; min-height:44px; }

/* nút */
.tg2-nut{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 18px; border-radius:12px; font:inherit; font-size:14.5px; font-weight:800; cursor:pointer; white-space:nowrap;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, filter .2s; }
.tg2-nut.lon{ min-height:50px; font-size:16px; padding:0 22px; border-radius:14px; }
.tg2-nut:hover:not(:disabled){ transform:translateY(-1px); }
.tg2-nut:active:not(:disabled){ transform:scale(.97); }
.tg2-nut:disabled{ cursor:not-allowed; }
.tg2-nut-nho{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:10px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.tg2-nut-nho:hover{ transform:translateY(-1px); }

/* ghi chú / nhãn */
.tg2-ghi{ display:flex; align-items:flex-start; gap:12px; padding:11px 14px; border-radius:12px; font-size:13.5px; line-height:1.5; }
.tg2-ghi > i{ font-size:17px; margin-top:1px; flex:none; }
.tg2-ghi > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tg2-ghi b{ font-weight:800; }
.tg2-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:800; white-space:nowrap; }

/* bảng: tiêu đề cột nền kem; .do = tiêu đề đỏ chữ trắng */
.tg2-bang{ width:100%; margin:0; border-collapse:separate; border-spacing:0; font-size:14px; }
.tg2-hs{ display:flex; align-items:center; gap:10px; min-width:0; }
.tg2-hs .hs2-av{ width:34px; height:34px; font-size:12.5px; }
.tg2-hs > span:not(.hs2-av){ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.tg2-hs b{ font-weight:700; }
.tg2-hs small{ font-size:12px; font-weight:600; }

/* ═════════════════════════ CHẤM CÔNG ═════════════════════════ */
.cc2-luoi{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px; align-items:start; }
.cc2-phai{ display:flex; flex-direction:column; gap:16px; min-width:0; }
#appShell#appShell .cc2-anh{ width:100%; height:230px; padding:16px; gap:10px; margin:0; }
#appShell#appShell .cc2-anh > i.o-anh-chu{ font-size:52px; }
.cc2-anh span.o-anh-chu{ display:flex; flex-direction:column; gap:4px; }
.cc2-anh span.o-anh-chu b{ font-size:17px; font-weight:700; }
.cc2-anh span.o-anh-chu small{ font-size:13.5px; font-weight:500; }
#appShell#appShell .cc2-anh.co-anh img{ object-fit:contain; }
.cc2-anh .o-anh-doi{ left:auto !important; right:10px !important; bottom:10px !important; padding:4px 12px !important; border-radius:999px !important; font-size:12px !important; }
.cc2-dau-anh{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 0; padding:11px 16px; border-radius:12px; font-size:14px; }
.cc2-dau-anh > span{ display:inline-flex; align-items:center; gap:8px; padding:0 16px; }
.cc2-dau-anh > span:first-child{ padding-left:0; }
.cc2-dau-anh > span + span{ border-left:1px solid; }
.cc2-dau-anh b{ font-weight:700; }
.cc2-nut{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cc2-loc{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr) auto; gap:12px; align-items:end; }
.cc2-loc .tg2-nut{ min-height:44px; }
.cc2-the{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.cc2-the:empty{ display:none; }
.cc2-the .nvs-the{ padding:12px; gap:10px; }
.cc2-the .nvs-the-huy{ width:44px; height:44px; font-size:19px; }
.cc2-the .nvs-the-chu b{ font-size:30px; }
.cc2-the .nvs-the-chu > span{ font-size:14.5px; white-space:nowrap; }
.cc2-the .nvs-the-chu small{ white-space:normal; font-size:12px; }
.cc2-bang{ font-size:13.5px; }
.cc2-bang .tg2-chip{ padding:3px 9px; font-size:12px; gap:5px; }
.cc2-bang .tg2-nut-nho{ padding:5px 10px; font-size:12.5px; }
@media (max-width:1799.98px){ .cc2-bang .cc2-an-hep{ display:none; } }
.cc2-bang td, .cc2-bang th{ text-align:center; }
.cc2-bang td:first-child, .cc2-bang th:first-child{ text-align:left; }
html.gd-sieu-anh-hung #appShell#appShell #pane-chamcong .cc2-bang > :is(thead, tbody) > tr > :is(th, td){ padding-left:10px !important; padding-right:10px !important; }
.cc2-viec{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; }
.cc2-viec-ic{ width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:22px; }
.cc2-viec-chu{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cc2-viec-chu b{ font-size:18px; font-weight:800; }
.cc2-viec-chu span{ font-size:13.5px; }
.cc2-viec-ds{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.cc2-lech{ font-size:12.5px; font-weight:600; }

/* ═════════════════════════ BỔ TRỢ ═════════════════════════ */
.bt2-thanh{ display:flex; align-items:stretch; gap:10px; margin-bottom:16px; }
#appShell#appShell #pane-botro .bt2-thanh .bt-muc-nav{ flex:1; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:0; padding:0; background:none; border:0; box-shadow:none; }
#appShell#appShell #pane-botro .bt-muc{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:8px 14px; border-radius:12px; font-size:15.5px; font-weight:700; }
#appShell#appShell #pane-botro .bt-muc > i{ font-size:19px; }
.bt2-hd-nut{ display:inline-flex; align-items:center; gap:8px; padding:0 16px; border-radius:12px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; }
#pane-botro.bt2-an-hd .bt-huong-dan{ display:none !important; }
#appShell#appShell #pane-botro .bt-huong-dan{ margin:0; padding:10px 14px; font-size:13px; line-height:1.6; }
.bt2-tren{ display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr); gap:16px; margin-bottom:16px; align-items:stretch; }
.bt2-tren .tg2-than > .tg2-nut{ align-self:flex-start; }
.bt2-khung{ margin-bottom:16px; }
.bt2-them{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .85fr) auto; gap:12px; align-items:end; }
.bt2-them .tg2-nut{ min-height:44px; }
.bt2-tl{ display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid; }
.bt2-tl-ten{ font-size:14.5px; font-weight:800; }
.bt2-tl-hop{ display:flex; align-items:flex-start; gap:12px; padding:10px 14px; border-radius:12px; }
.bt2-tl-hop > i{ font-size:18px; margin-top:3px; }
.bt2-tl-hop > div{ flex:1; min-width:0; }
.bt2-tl-tai{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#appShell#appShell .bt2-tl-tai .form-control{ flex:1 1 220px; min-width:0; max-width:none; min-height:42px; }
.bt2-anh-hang{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:14px; align-items:stretch; }
#appShell#appShell .bt2-anh{ width:100%; height:auto; min-height:96px; flex-direction:row; gap:16px; justify-content:flex-start; padding:12px 18px; text-align:left; }
#appShell#appShell .bt2-anh > i.o-anh-chu{ font-size:34px; }
#appShell#appShell .bt2-anh.co-anh{ min-height:150px; }
.bt2-anh span.o-anh-chu{ display:flex; flex-direction:column; gap:3px; }
.bt2-anh span.o-anh-chu b{ font-size:15.5px; font-weight:700; }
.bt2-anh span.o-anh-chu small{ font-size:12.5px; font-weight:500; }
.bt2-anh-hang .tg2-nut{ height:auto; white-space:normal; text-align:center; }
.bt2-bang-cuon{ overflow:auto; border-radius:12px; }
.bt2-bang{ font-size:13.5px; }
.bt2-bang .tg2-hs{ min-width:170px; }
.bt2-bang-ds{ min-width:1180px; }
#appShell#appShell .bt2-bang-ds :is(.form-control, .form-select){ min-height:36px; font-size:13.5px; }
#appShell#appShell .bt2-bang-ds .bt-baibotro{ min-width:160px; }
#appShell#appShell .bt2-bang-ds .bt-phong{ min-width:145px !important; }
#appShell#appShell .bt2-bang-ds .bt-tiendo-sel{ min-width:165px; }
.bt2-bang-ds .bt-tiendo{ min-width:175px; max-width:220px; }
.bt2-bang-ds .bt-dd{ white-space:nowrap; }
.bt2-chan{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px; align-items:center; }
.bt2-chan #btMsg{ grid-column:1 / -1; }
.bt2-chan #btMsg:empty{ display:none; }
.bt2-anh-tt{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 16px; border-radius:14px; font-size:15px; font-weight:600; text-align:center; }
html.gd-sieu-anh-hung .bt2-anh-tt{ background:#eef0f4; border:1px solid #d9dde5; color:#4b5563; }
html.gd-sieu-anh-hung .bt2-anh-tt.co{ background:#e3f6ea; border-color:#bfe6cd; color:#1e7a46; }
.bt2-ghi{ font-size:13.5px; }
/* bảng ③ (js/lich-bo-tro.js) */
.bt2-loai{ display:inline-block; padding:4px 10px; border-radius:8px; font-size:12.5px; font-weight:700; white-space:nowrap; }

/* ═════════════════════════ LƯƠNG TRỢ GIẢNG ═════════════════════════ */
#pane-luong{ position:relative; }
.lg2-loc{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; justify-content:flex-end; margin-bottom:14px; }
.lg2-loc .tg2-o{ width:230px; }
@media (min-width:1400px){ .lg2-loc{ position:absolute; top:22px; right:24px; z-index:2; margin:0; } }
.lg2-cong-thuc{ margin-bottom:16px; align-items:center; }
.lg2-cong-thuc small{ display:block; font-size:12.5px; margin-top:2px; }
.lg2-bang-khung{ border-radius:16px; overflow:auto; margin-bottom:16px; animation:tg2Vao .45s cubic-bezier(.22,1,.36,1) both; }
.lg2-bang{ font-size:14.5px; min-width:820px; }
.lg2-bang .tg2-hs{ min-width:160px; }
.lg2-bang .tg2-hs .hs2-av{ width:42px; height:42px; font-size:15px; }
.lg2-o{ display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1.25; white-space:nowrap; }
.lg2-o span{ font-size:13.5px; }
.lg2-o b{ font-size:16px; font-weight:800; }
.lg2-tong{ font-size:22px; font-weight:900; white-space:nowrap; letter-spacing:-.01em; }
.lg2-ct{ font-size:13px; line-height:1.7; }
.lg2-ct > div{ display:flex; gap:8px; }
.lg2-ct > div > b{ flex:none; min-width:150px; }
.lg2-duoi{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:16px; align-items:start; }
.lg2-duoi.mot{ grid-template-columns:minmax(0, 1fr); }
.lg2-gia{ font-size:13.5px; }
#appShell#appShell .lg2-gia input.form-control{ text-align:center; max-width:150px; margin:0 auto; min-height:38px; font-weight:700 !important; }
.lg2-luu{ display:flex; justify-content:center; }
.lg2-luu .tg2-nut{ min-width:260px; }
.lg2-cach{ gap:12px; }
.lg2-cach-o{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:14px; }
.lg2-cach-ic{ width:52px; height:52px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:22px; }
.lg2-cach-o > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.lg2-cach-o b{ font-size:17px; font-weight:800; }
.lg2-cach-o span{ font-size:13.5px; line-height:1.45; }

/* ═════════════════════════ KIỂM TRA CHÉO ═════════════════════════ */
#pane-kiemtra{ position:relative; }
.ktc2-dau{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.ktc2-luu-y{ flex:1 1 360px; align-items:center; font-size:15px; }
@media (min-width:1400px){ .ktc2-dau{ position:absolute; top:22px; right:24px; z-index:2; margin:0; max-width:56%; } .ktc2-luu-y{ flex:0 1 auto; } }
.ktc2-loc{ display:grid; grid-template-columns:minmax(165px, 1.2fr) minmax(165px, 1.2fr) repeat(3, minmax(0, 1fr)) auto auto; gap:12px; align-items:end; padding:14px 16px; margin-bottom:14px; overflow:visible; }
.ktc2-loc .tg2-nut{ min-height:44px; }
.ktc2-hien-xl{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; line-height:1.3; max-width:170px; cursor:pointer; padding-bottom:4px; }
.ktc2-hien-xl .form-check-input{ margin:0; flex:none; width:1.15em; height:1.15em; }
.ktc2-tt:empty{ display:none; }
.ktc2-tt{ margin-bottom:10px; }
.ktc2-the .nvs-the-chu b{ font-size:32px; }
.ktc2-the:empty{ display:none; }
.ktc2-ai{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 16px; border-radius:14px; margin-bottom:14px; font-size:13.5px; }
.ktc2-ai > i{ font-size:18px; }
.ktc2-ai > span{ flex:1; min-width:200px; }
.ktc2-luoi{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:16px; align-items:start; margin-bottom:16px; }
.ktc2-sap{ width:auto !important; min-height:34px !important; padding-top:4px !important; padding-bottom:4px !important; font-size:13.5px !important; }
#ktcDanhSach{ gap:12px; max-height:820px; overflow:auto; }
.ktc2-cb{ display:grid; grid-template-columns:72px minmax(0, 1fr); gap:14px; padding:14px; border-radius:14px; cursor:pointer; text-align:left; font:inherit; width:100%;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .2s; }
.ktc2-cb:hover{ transform:translateY(-1px); }
.ktc2-cb.xl{ opacity:.6; }
.ktc2-muc{ width:72px; height:72px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#fff; font-size:13.5px; font-weight:800; }
.ktc2-muc i{ font-size:24px; }
.ktc2-cb-than{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ktc2-cb-dong{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; font-size:14.5px; font-weight:800; }
.ktc2-cb-dong .ktc2-cham{ color:#c8b8ad; font-weight:400; }
.ktc2-cb-mo{ font-size:13.5px; font-weight:600; }
.ktc2-cb-ct{ font-size:13px; line-height:1.5; }
.ktc2-cb-chan{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px; }
.ktc2-xl{ font-size:12.5px; font-weight:700; }
.ktc2-ct .tg2-than{ gap:14px; }
.ktc2-ct-dau{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:16px; font-weight:800; }
.ktc2-tt-luoi{ display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:1px; border-radius:12px; overflow:hidden; }
.ktc2-tt-luoi > div{ display:flex; flex-direction:column; gap:3px; padding:10px 12px; min-width:0; }
.ktc2-tt-luoi span{ font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px; }
.ktc2-tt-luoi b{ font-size:14.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ktc2-nhan{ font-size:13px; font-weight:800; margin-bottom:-6px; }
.ktc2-dh{ padding:12px 14px; border-radius:12px; font-size:13.5px; line-height:1.55; }
.ktc2-dh b{ display:block; font-size:14.5px; margin-bottom:3px; }
.ktc2-mc{ display:flex; flex-direction:column; gap:8px; }
.ktc2-mc-anh{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; text-decoration:none; }
.ktc2-mc-anh img{ width:64px; height:48px; object-fit:cover; border-radius:8px; flex:none; }
.ktc2-mc-anh span{ display:flex; flex-direction:column; font-size:13px; font-weight:600; }
.ktc2-mc-trong{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 12px; border-radius:12px; text-align:center; font-size:13px; }
.ktc2-mc-trong i{ font-size:26px; }
.ktc2-hs-ds{ display:flex; flex-wrap:wrap; gap:6px; }
#appShell#appShell .ktc2-ghi-o{ min-height:84px; resize:vertical; font-size:14px; }
.ktc2-dem-chu{ text-align:right; font-size:12px; margin-top:-8px; }
.ktc2-ct-nut{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ktc2-ct-nut .rong{ grid-column:1 / -1; }
.ktc2-ct-nut .tg2-nut{ min-height:44px; font-size:14px; padding:0 12px; }
.ktc2-tk-dau{ display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; }
.ktc2-tk-dau::-webkit-details-marker{ display:none; }
.ktc2-tk-dau::after{ content:'\f078'; font:900 13px 'Font Awesome 6 Free'; margin-left:auto; transition:transform .3s; }
details[open] > .ktc2-tk-dau::after{ transform:rotate(180deg); }
.ktc2-tk{ display:block; margin-bottom:16px; }
.ktc2-tk > summary{ display:flex; }
a.tg2-nut-nho.disabled, a.ktc2-mc-anh.disabled{ pointer-events:none; opacity:.55; }
.ktc2-tk .tg2-than{ gap:8px; }
.ktc2-tk-cuon{ overflow:auto; border-radius:12px; }
.ktc2-chu-giai{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 0; padding:12px 16px; border-radius:14px; font-size:13.5px; }
.ktc2-chu-giai > b{ margin-right:14px; font-weight:800; }
.ktc2-chu-giai > span{ display:inline-flex; align-items:center; gap:10px; padding:0 18px; }
.ktc2-chu-giai > span + span{ border-left:1px solid; }
.ktc2-chu-giai > span > i{ font-size:22px; }
.ktc2-chu-giai > span > span{ display:flex; flex-direction:column; line-height:1.3; }
.ktc2-chu-giai small{ font-size:12px; }

/* ═════════════════════════ CO GIÃN ═════════════════════════ */
@media (max-width:1399.98px){
  .ktc2-loc{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .ktc2-loc .tg2-nut{ grid-column:span 1; }
  .ktc2-hien-xl{ max-width:none; grid-column:span 2; }
}
@media (max-width:1199.98px){
  .cc2-luoi, .bt2-tren, .lg2-duoi, .ktc2-luoi{ grid-template-columns:minmax(0, 1fr); }
  .bt2-them{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bt2-them .tg2-nut{ grid-column:1 / -1; }
}
@media (max-width:767.98px){
  .tg2-than{ padding:14px; }
  .tg2-o-luoi{ grid-template-columns:minmax(0, 1fr); }
  .cc2-loc{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .cc2-loc .tg2-nut{ grid-column:1 / -1; }
  .cc2-the{ grid-template-columns:minmax(0, 1fr); }
  .cc2-the .nvs-the-chu small{ display:block; }
  #appShell#appShell .cc2-anh{ height:190px; }
  .cc2-dau-anh{ flex-direction:column; align-items:flex-start; gap:6px; }
  .cc2-dau-anh > span{ padding:0; } .cc2-dau-anh > span + span{ border-left:0; }
  .cc2-viec{ flex-wrap:wrap; }
  .cc2-viec > .tg2-nut{ width:100%; }
  .cc2-nut{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .bt2-thanh{ flex-direction:column; }
  #appShell#appShell #pane-botro .bt2-thanh .bt-muc-nav{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #appShell#appShell #pane-botro .bt-muc{ font-size:13.5px; min-height:46px; padding:6px 8px; gap:7px; }
  .bt2-hd-nut{ min-height:40px; justify-content:center; }
  .bt2-them{ grid-template-columns:minmax(0, 1fr); }
  .bt2-anh-hang, .bt2-chan{ grid-template-columns:minmax(0, 1fr); }
  .lg2-loc{ justify-content:stretch; }
  .lg2-loc .tg2-o{ width:100%; }
  .lg2-loc .tg2-nut{ flex:1 1 140px; }
  .lg2-luu .tg2-nut{ min-width:0; width:100%; }
  .ktc2-loc{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .ktc2-loc .tg2-nut, .ktc2-hien-xl{ grid-column:1 / -1; }
  .ktc2-luoi .tg2-dau > b{ flex-basis:calc(100% - 30px); }
  .ktc2-sap{ width:100% !important; }
  .ktc2-cb{ grid-template-columns:56px minmax(0, 1fr); gap:10px; padding:12px; }
  .ktc2-muc{ width:56px; height:56px; font-size:12px; } .ktc2-muc i{ font-size:19px; }
  .ktc2-tt-luoi{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .ktc2-chu-giai > span{ padding:0 12px 0 0; } .ktc2-chu-giai > span + span{ border-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .tg2-hop, .lg2-bang-khung{ animation:none !important; }
  .tg2-nut, .tg2-nut-nho, .ktc2-cb{ transition:none !important; }
}

/* ═════════════════════════ BUỔI TRỰC BỔ TRỢ — danh sách trong khung tự lăn (.bt3-*, thầy yêu cầu 04/10/2026) ═════════════════════════ */
.bt3-tom{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:0 0 10px; font-size:13px; font-weight:600; color:#7a6a60; }
.bt3-tom:empty{ display:none; }
.bt3-tom b{ font-size:15px; font-weight:900; color:#b3101f; margin-right:3px; }
.bt3-lan{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; }
.bt3-lan i{ color:#e39b16; }
.bt3-khung{ position:relative; border-radius:14px; border:1px solid rgba(125,35,20,.13); background:#fffaf3; overflow:hidden; }
.bt3-khung::after{ content:''; position:absolute; left:0; right:10px; bottom:0; height:46px; pointer-events:none; opacity:0; transition:opacity .25s;
  background:linear-gradient(180deg, rgba(255,250,243,0), #fffaf3 85%); }
.bt3-khung.con-duoi::after{ opacity:1; }
.bt3-cuon{ max-height:min(520px, 62vh); overflow-y:auto; overscroll-behavior:contain; padding:0 10px 10px; scrollbar-width:thin; scrollbar-color:#e6c27a transparent; }
.bt3-cuon-thap{ max-height:min(340px, 50vh); padding-top:4px; }
.bt3-cuon:focus-visible{ outline:2px solid #d81a32; outline-offset:-2px; }
.bt3-cuon::-webkit-scrollbar{ width:8px; } .bt3-cuon::-webkit-scrollbar-thumb{ background:#e6c27a; border-radius:8px; }
.bt3-cuon > .text-secondary{ padding:14px 4px; }
#appShell#appShell .bt3-ngay{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:8px; margin:0 -10px 8px; padding:9px 14px;
  background:linear-gradient(180deg, #fff3dc, #fdeacb); border-bottom:1px solid rgba(125,35,20,.12); color:#b3101f; }
#appShell#appShell .bt3-ngay:not(:first-child){ margin-top:4px; }
.bt3-ngay b{ font-size:14.5px; font-weight:900; }
.bt3-ngay em{ padding:1px 8px; border-radius:999px; font-style:normal; font-size:11px; font-weight:800; background:#b3101f; color:#fff; }
.bt3-ngay em.mai{ background:#f6c33f; color:#3d1a02; }
.bt3-ngay small{ margin-left:auto; font-size:12px; font-weight:600; color:#7a6a60; }
.bt3-ngay.nay{ background:linear-gradient(180deg, #ffe9a3, #f9d46a); }
#appShell#appShell .bt3-buoi{ position:relative; margin:0 0 8px; padding:9px 12px 9px 16px !important; border-radius:12px !important; }
.bt3-buoi::before{ content:''; position:absolute; left:0; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0; background:#d9cfc6; }
.bt3-buoi.tren::before{ background:#c8102e; } .bt3-buoi.duoi::before{ background:#1d6fa8; }
.bt3-buoi.dong{ opacity:.6; }
.bt3-buoi-dau{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.bt3-gio{ font-size:14.5px; font-weight:800; color:#2a1810; white-space:nowrap; min-width:112px; }
.bt3-phong{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:800; white-space:nowrap; background:#f3efeb; color:#6f625a; }
.bt3-buoi.tren .bt3-phong{ background:#fff1f1; color:#c8102e; } .bt3-buoi.duoi .bt3-phong{ background:#ecf5fd; color:#1d6fa8; }
.bt3-phong i{ font-size:10px; }
.bt3-tg{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:#2a1810; }
.bt3-tg i{ font-size:10.5px; color:#e39b16; }
.bt3-phu{ font-size:12.5px; color:#7a6a60; min-width:0; }
.bt3-dem{ margin-left:auto; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; background:#f3efeb; color:#8a7d74; }
.bt3-dem.co{ background:#e3f6ea; color:#1e7a46; } .bt3-dem.day{ background:#ffe9ea; color:#c8102e; }
.bt3-dong{ padding:2px 8px; border-radius:6px; font-size:11px; font-weight:800; text-transform:uppercase; background:#efe9e3; color:#8a7d74; }
.bt3-buoi-dau .tg2-nut-nho{ padding:5px 11px; font-size:12.5px; }
.bt3-em-ds{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; padding-top:8px; border-top:1px dashed rgba(125,35,20,.12); }
.bt3-em-ds .dkbt-em{ background:#fff; font-size:12.5px; }
@media (max-width:767.98px){
  .bt3-cuon{ max-height:min(460px, 70vh); }
  .bt3-gio{ min-width:0; }
  .bt3-dem{ margin-left:0; }
  .bt3-buoi-dau .tg2-nut-nho{ margin-left:auto; }
  .bt3-lan{ margin-left:0; }
}

/* ═════════════════════════ LỊCH TRỰC HẰNG TUẦN (.lt3-*, js/dang-ky-bo-tro.js — thầy yêu cầu làm gọn 04/10/2026) ═════════════════════════
 * Tóm tắt số ca · bảng tuần 7 cột (mỗi ca = 1 thẻ, viền trái đỏ = phòng trên, xanh = phòng dưới) · form chọn thứ + ca bằng nút. */
#dkbtLtWrap{ --lt-do:#b3101f; --lt-tren:#c8102e; --lt-tren-nen:#fff1f1; --lt-duoi:#1d6fa8; --lt-duoi-nen:#ecf5fd; --lt-vien:rgba(125,35,20,.13); --lt-chu:#2a1810; --lt-phu:#7a6a60; }
.lt3-tom{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:2px 0 14px; }
.lt3-so{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-size:13px; font-weight:600; color:var(--lt-chu);
  background:#fff; border:1px solid var(--lt-vien); }
.lt3-so b{ font-size:15px; font-weight:900; }
.lt3-so i{ color:#e39b16; font-size:12px; }
.lt3-so.tren{ background:var(--lt-tren-nen); border-color:#f5c9cc; } .lt3-so.tren i, .lt3-so.tren b{ color:var(--lt-tren); }
.lt3-so.duoi{ background:var(--lt-duoi-nen); border-color:#c6def2; } .lt3-so.duoi i, .lt3-so.duoi b{ color:var(--lt-duoi); }
.lt3-so.ngung{ background:#f3efeb; } .lt3-so.ngung i, .lt3-so.ngung b{ color:#8a7d74; }
.lt3-luat{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:var(--lt-phu); }
.lt3-luat i{ color:#e39b16; }

/* bảng tuần: mỗi ngày 1 hàng (nhãn thứ bên trái, các ca xếp ngang) */
.lt3-tuan{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.lt3-ngay{ display:grid; grid-template-columns:112px minmax(0, 1fr); align-items:stretch; min-width:0; border-radius:14px; background:#fffdf9; border:1px solid var(--lt-vien); overflow:hidden; }
.lt3-ngay-dau{ display:flex; flex-direction:column; justify-content:center; gap:1px; padding:10px 14px; position:relative;
  background:linear-gradient(135deg, #fff6e6, #fdebd0); border-right:1px solid var(--lt-vien); }
.lt3-ngay-dau b{ font-size:16px; font-weight:900; line-height:1.15; color:var(--lt-do); white-space:nowrap; }
.lt3-ngay-dau small{ font-size:12px; font-weight:600; color:var(--lt-phu); white-space:nowrap; }
.lt3-thu-ngan{ display:none; }
.lt3-ngay.nay{ border-color:#e9b84c; box-shadow:0 0 0 2px rgba(247,197,68,.4); }
.lt3-ngay.nay .lt3-ngay-dau{ background:linear-gradient(135deg, #ffe48a, #f6c33f); }
.lt3-ngay.nay .lt3-ngay-dau small{ color:#5a3a06; font-weight:800; }
.lt3-ngay-than{ display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; padding:8px; min-width:0; }
.lt3-ngay.trong{ background:#fffcf7; }
.lt3-ngay.trong .lt3-ngay-dau{ background:#fbf3e6; }
.lt3-ngay.trong .lt3-ngay-dau b{ color:#c79a8f; }

.lt3-ca{ position:relative; flex:0 1 270px; min-width:220px; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:3px 10px; align-content:start;
  padding:9px 10px 9px 14px; border-radius:11px; background:#fff; border:1px solid var(--lt-vien);
  box-shadow:0 6px 14px -12px rgba(90,25,10,.55); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.lt3-ca > :not(.lt3-ca-nut){ grid-column:1; }
.lt3-ca::before{ content:''; position:absolute; left:0; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0; background:#d9cfc6; }
.lt3-ca.tren::before{ background:var(--lt-tren); } .lt3-ca.duoi::before{ background:var(--lt-duoi); }
.lt3-ca:hover{ transform:translateY(-2px); box-shadow:0 12px 20px -14px rgba(90,25,10,.6); }
.lt3-ca-gio{ font-size:15px; font-weight:800; color:var(--lt-chu); white-space:nowrap; letter-spacing:-.01em; }
.lt3-phong{ justify-self:start; display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:800; white-space:nowrap; background:#f3efeb; color:#6f625a; }
.lt3-ca.tren .lt3-phong{ background:var(--lt-tren-nen); color:var(--lt-tren); }
.lt3-ca.duoi .lt3-phong{ background:var(--lt-duoi-nen); color:var(--lt-duoi); }
.lt3-phong i{ font-size:10px; }
.lt3-ca-tg{ display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--lt-chu); }
.lt3-ca-tg i{ font-size:10px; color:#e39b16; }
.lt3-ca-phu{ font-size:12px; font-weight:500; color:var(--lt-phu); line-height:1.35; overflow-wrap:anywhere; }
.lt3-ngung-chu{ justify-self:start; padding:1px 7px; border-radius:6px; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:#efe9e3; color:#8a7d74; }
.lt3-ca.ngung{ background:#faf7f4; } .lt3-ca.ngung > :not(.lt3-ca-nut, .lt3-ngung-chu){ opacity:.55; }
.lt3-ca-nut{ grid-column:2; grid-row:1 / span 2; display:flex; gap:4px; align-self:start; }
#appShell#appShell #dkbtLtWrap .lt3-ic{ width:28px; height:28px; min-width:0; padding:0; border-radius:8px; display:grid; place-items:center; font-size:12px; cursor:pointer;
  background:#fff8ec; border:1px solid #f0dcb4; color:#8a5a06; box-shadow:none; transition:background .2s, color .2s, border-color .2s; }
#appShell#appShell #dkbtLtWrap .lt3-ic:hover{ background:#ffe9a3; border-color:#e9b84c; color:#5a3a06; }
#appShell#appShell #dkbtLtWrap .lt3-ic.xoa{ background:#fff3f3; border-color:#f5d0d3; color:var(--lt-tren); }
#appShell#appShell #dkbtLtWrap .lt3-ic.xoa:hover{ background:var(--lt-tren); border-color:var(--lt-tren); color:#fff; }
#appShell#appShell #dkbtLtWrap .lt3-them{ align-self:center; display:flex; align-items:center; justify-content:center; gap:6px; min-height:38px; min-width:96px; padding:0 14px; border-radius:10px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  background:transparent; border:1.5px dashed #e6cfa5; color:#a87a2a; box-shadow:none; transition:background .2s, color .2s, border-color .2s; }
#appShell#appShell #dkbtLtWrap .lt3-them:hover{ background:#fff3d6; border-color:#e9b84c; color:#7a4f06; }
#appShell#appShell #dkbtLtWrap .lt3-ngay.trong .lt3-them{ min-height:36px; }

/* form */
.lt3-form{ display:flex; flex-direction:column; gap:14px; padding:16px 18px; border-radius:16px; background:linear-gradient(180deg, #fffaf1, #fff); border:1px solid #f0dcb4;
  transition:border-color .3s, box-shadow .3s; }
.lt3-form.dang-sua{ border-color:#e9b84c; box-shadow:0 0 0 3px rgba(247,197,68,.28); }
.lt3-form-dau{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; }
.lt3-form-ic{ width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:16px; color:#fff; background:linear-gradient(135deg, #d81a32, #8e0a17); box-shadow:0 6px 12px -8px rgba(140,10,20,.8); }
.lt3-form.dang-sua .lt3-form-ic{ background:linear-gradient(135deg, #f6c33f, #e39b16); color:#3d1a02; }
.lt3-form-dau b{ font-size:16.5px; font-weight:800; color:var(--lt-chu); }
.lt3-form-dau small{ font-size:12.5px; font-weight:500; color:var(--lt-phu); }
.lt3-buoc{ display:grid; grid-template-columns:96px minmax(0, 1fr); gap:12px; align-items:start; }
.lt3-nhan{ display:flex; align-items:center; gap:8px; min-height:38px; font-size:13.5px; font-weight:800; color:var(--lt-chu); }
.lt3-nhan em{ width:22px; height:22px; flex:none; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:900; background:#fdebd0; color:var(--lt-do); }
.lt3-nut-ds{ display:flex; flex-wrap:wrap; gap:8px; }
#appShell#appShell .lt3-form .lt3-chon{ min-width:52px; min-height:38px; padding:0 14px; border-radius:11px; font:inherit; font-size:14px; font-weight:800; cursor:pointer;
  background:#fff; border:1.5px solid rgba(125,35,20,.18); color:var(--lt-chu); box-shadow:none;
  transition:background .2s, color .2s, border-color .2s, transform .2s cubic-bezier(.22,1,.36,1); }
#appShell#appShell .lt3-form .lt3-chon.ca{ font-weight:700; }
#appShell#appShell .lt3-form .lt3-chon:hover{ border-color:#e9b84c; transform:translateY(-1px); }
#appShell#appShell .lt3-form .lt3-chon.bat{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019); border-color:#c98a12; color:#2a1606; box-shadow:0 8px 14px -12px rgba(150,90,0,.9); }
#appShell#appShell .lt3-form .lt3-chon:focus-visible, #appShell#appShell #dkbtLtWrap .lt3-ic:focus-visible, #appShell#appShell #dkbtLtWrap .lt3-them:focus-visible{ outline:2px solid #d81a32; outline-offset:2px; }
.lt3-luoi{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px 12px; }
.lt3-o{ display:flex; flex-direction:column; min-width:0; }
.lt3-o .form-label{ margin-bottom:5px; font-size:12.5px; font-weight:700; color:var(--lt-chu); }
.lt3-o .form-label small{ font-weight:500; color:var(--lt-phu); }
.lt3-o-khoi{ grid-column:span 2; }
.lt3-o-rong{ grid-column:1 / -1; }
#appShell#appShell #dkbtLtWrap .lt3-o :is(.form-control, .form-select){ min-height:38px; }
.lt3-chot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:12px; border-top:1px dashed #ecd7ae; }
.lt3-xem{ flex:1 1 320px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.lt3-xem-nhan{ font-size:13px; font-weight:800; color:var(--lt-chu); margin-right:2px; }
.lt3-xem-nhan.nhat{ font-weight:500; color:var(--lt-phu); display:inline-flex; align-items:center; gap:7px; }
.lt3-cap{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.lt3-cap b{ font-weight:900; }
.lt3-cap i{ font-size:10px; }
.lt3-cap.tren{ background:var(--lt-tren-nen); color:var(--lt-tren); border:1px solid #f5c9cc; }
.lt3-cap.duoi{ background:var(--lt-duoi-nen); color:var(--lt-duoi); border:1px solid #c6def2; }
.lt3-cap.trung{ background:#f3efeb; color:#8a7d74; border:1px dashed #d9cfc6; text-decoration:line-through; }
.lt3-chot-nut{ display:flex; gap:10px; margin-left:auto; }
.lt3-luu{ min-width:190px; }
.lt3-luu:disabled{ opacity:.5; filter:saturate(.4); }
#dkbtLtMsg:empty{ display:none; }
#dkbtLtMsg{ display:flex; flex-direction:column; gap:6px; }
.lt3-msg{ display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:11px; font-size:13.5px; font-weight:600; background:#fff8ec; color:var(--lt-chu); }
.lt3-msg.ok{ background:#e3f6ea; color:#1e7a46; }
.lt3-msg.loi{ background:#ffe9ea; color:#c8102e; }

@media (max-width:1279.98px){ .lt3-luat{ margin-left:0; flex-basis:100%; } }
@media (max-width:767.98px){
  .lt3-buoc{ grid-template-columns:minmax(0, 1fr); gap:6px; }
  .lt3-nhan{ min-height:0; }
  .lt3-luoi{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .lt3-chot-nut{ width:100%; } .lt3-chot-nut .tg2-nut{ flex:1; } .lt3-luu{ min-width:0; }
  /* điện thoại: nhãn thứ thành dải ngang phía trên, thẻ ca rộng hết khung */
  .lt3-ngay{ grid-template-columns:minmax(0, 1fr); }
  .lt3-ngay-dau{ flex-direction:row; align-items:baseline; justify-content:space-between; padding:8px 12px; border-right:0; border-bottom:1px solid var(--lt-vien); }
  .lt3-ngay.trong{ grid-template-columns:minmax(0, 1fr) auto; align-items:center; }
  .lt3-ngay.trong .lt3-ngay-dau{ border-bottom:0; background:none; }
  .lt3-ngay.trong .lt3-ngay-than{ padding:6px 8px; }
  .lt3-ca{ flex:1 1 100%; min-width:0; }
  #appShell#appShell #dkbtLtWrap .lt3-ngay:not(.trong) .lt3-them{ flex:1 1 100%; }
  #appShell#appShell .lt3-form .lt3-chon{ flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce){ .lt3-ca, .lt3-form, #appShell#appShell .lt3-form .lt3-chon{ transition:none !important; } }

/* ═════════════════════════ MÀU — giao diện Siêu anh hùng ═════════════════════════ */
html.gd-sieu-anh-hung .tg2-hop{ background:#fff; border:1px solid rgba(125,35,20,.12); box-shadow:0 16px 30px -26px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .tg2-dau{ background:linear-gradient(180deg, #b3101f 0%, #8e0a17 100%); color:#fff; border-bottom:2px solid #f2c14e; }
html.gd-sieu-anh-hung .tg2-dau > b small{ color:#ffe3b5; }
html.gd-sieu-anh-hung .tg2-so{ background:#fff; color:#b3101f; box-shadow:0 0 0 2px rgba(242,193,78,.9); }
html.gd-sieu-anh-hung .tg2-dem{ background:#fff; color:#b3101f; }
html.gd-sieu-anh-hung .tg2-tai{ background:rgba(255,255,255,.16); color:#fff; transition:transform .4s, background-color .2s; }
html.gd-sieu-anh-hung .tg2-tai:hover{ background:rgba(255,255,255,.28); transform:rotate(90deg); }
html.gd-sieu-anh-hung .tg2-trong{ color:#7a6a60; }
html.gd-sieu-anh-hung .tg2-trong i{ color:#d0a24a; }
html.gd-sieu-anh-hung .tg2-o .form-label{ color:#3b2a20 !important; font-weight:700 !important; }
html.gd-sieu-anh-hung .tg2-o-icon > i{ color:#7a6a60; }
html.gd-sieu-anh-hung .tg2-nut.vang, html.gd-sieu-anh-hung .tg2-nut-nho.vang{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019); border:1px solid #c98a12; color:#2a1606; box-shadow:0 10px 18px -14px rgba(150,90,0,.9); }
html.gd-sieu-anh-hung .tg2-nut.vang:hover:not(:disabled), html.gd-sieu-anh-hung .tg2-nut-nho.vang:hover{ box-shadow:0 14px 22px -12px rgba(150,90,0,.9); }
html.gd-sieu-anh-hung .tg2-nut.vang i, html.gd-sieu-anh-hung .tg2-nut-nho.vang i{ color:#3d1a02; }
html.gd-sieu-anh-hung .tg2-nut.trang, html.gd-sieu-anh-hung .tg2-nut-nho.trang{ background:#fff; border:1px solid rgba(125,35,20,.2); color:#2a1810; box-shadow:0 6px 14px -12px rgba(90,25,10,.6); }
html.gd-sieu-anh-hung .tg2-nut.trang:hover:not(:disabled), html.gd-sieu-anh-hung .tg2-nut-nho.trang:hover{ border-color:#e9b84c; color:#b3101f; }
html.gd-sieu-anh-hung .tg2-nut.trang i{ color:#8a1a24; }
html.gd-sieu-anh-hung .tg2-nut.kem{ background:#fff8ea; border:1px solid #efd9a8; color:#3b2a20; }
html.gd-sieu-anh-hung .tg2-nut:disabled{ background:#e9e5e1 !important; border:1px solid #d9d2cc !important; color:#8f857d !important; box-shadow:none !important; }
html.gd-sieu-anh-hung .tg2-nut:disabled i{ color:#a59b93 !important; }
html.gd-sieu-anh-hung .tg2-nut:focus-visible, html.gd-sieu-anh-hung .tg2-nut-nho:focus-visible, html.gd-sieu-anh-hung .bt2-hd-nut:focus-visible, html.gd-sieu-anh-hung .ktc2-cb:focus-visible{ outline:2px solid #d81a32; outline-offset:2px; }
html.gd-sieu-anh-hung .tg2-ghi.lam{ background:#eef4ff; border:1px solid #d3e2fb; color:#1d3f7a; } html.gd-sieu-anh-hung .tg2-ghi.lam > i{ color:#1d63d8; }
html.gd-sieu-anh-hung .tg2-ghi.vang{ background:#fff8e6; border:1px solid #f3dfae; color:#3b2a20; } html.gd-sieu-anh-hung .tg2-ghi.vang > i{ color:#d98b0b; }
html.gd-sieu-anh-hung .tg2-ghi.do{ background:#fff1f1; border:1px solid #f6c9cd; color:#7a0f1c; } html.gd-sieu-anh-hung .tg2-ghi.do > i{ color:#d81a32; }
html.gd-sieu-anh-hung .tg2-ghi small{ color:#8a6a40; }
html.gd-sieu-anh-hung .tg2-chip.xanh{ background:#e3f6ea; color:#1e7a46; border:1px solid #bfe6cd; }
html.gd-sieu-anh-hung .tg2-chip.do{ background:#ffe9ea; color:#c8102e; border:1px solid #f6c9cd; }
html.gd-sieu-anh-hung .tg2-chip.vang{ background:#fff3d6; color:#a35f00; border:1px solid #f3dfae; }
html.gd-sieu-anh-hung .tg2-chip.lam{ background:#e6f0ff; color:#1d4fa8; border:1px solid #c8dbf6; }
html.gd-sieu-anh-hung .tg2-chip.xam{ background:#f3efeb; color:#6f625a; border:1px solid #e3dbd3; }
html.gd-sieu-anh-hung .tg2-hs b{ color:#21160f; } html.gd-sieu-anh-hung .tg2-hs small{ color:#8a7b70; }

/* bảng */
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .tg2-bang > thead > tr > th{
  background:#f6f1ea !important; color:#3b2a20 !important; font-size:13.5px !important; font-weight:800 !important; padding:11px 14px !important;
  border:0 !important; border-bottom:1px solid rgba(125,35,20,.14) !important; white-space:nowrap; position:sticky; top:0; z-index:1; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .tg2-bang.do > thead > tr > th{
  background:linear-gradient(180deg, #b3101f, #8e0a17) !important; color:#fff !important; font-size:15px !important; text-align:center; line-height:1.3; padding:12px 14px !important; border-bottom:2px solid #f2c14e !important; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .tg2-bang.do > thead > tr > th + th{ border-left:1px solid rgba(255,255,255,.14) !important; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .tg2-bang.do > thead > tr > th small{ display:block; font-size:12.5px; font-weight:500; color:#ffe3b5; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .tg2-bang > tbody > tr > td{ padding:10px 14px; vertical-align:middle; border-bottom:1px solid rgba(125,35,20,.08) !important; color:#21160f; background:#fff; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .tg2-bang > tbody > tr:last-child > td{ border-bottom:0 !important; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .tg2-bang > tbody > tr:hover > td{ background:#fffaf2 !important; box-shadow:none !important; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .tg2-bang td.mv-o-so{ font-size:inherit !important; }

/* chấm công */
html.gd-sieu-anh-hung #appShell#appShell .cc2-anh{ background:#f4f2f0 !important; border:1.5px dashed #c9c2bc !important; color:#6f655e; }
html.gd-sieu-anh-hung #appShell#appShell .cc2-anh:hover{ background:#fbf4ec !important; border-color:#d81a32 !important; }
html.gd-sieu-anh-hung #appShell#appShell .cc2-anh > i.o-anh-chu{ color:#8d8781; }
html.gd-sieu-anh-hung .cc2-anh span.o-anh-chu b{ color:#4a403a; }
html.gd-sieu-anh-hung #appShell#appShell .cc2-anh.co-anh{ background:#1d1512 !important; border:2px solid #f2c14e !important; }
html.gd-sieu-anh-hung .cc2-dau-anh{ background:#f6f3f0; color:#3b2a20; }
html.gd-sieu-anh-hung .cc2-dau-anh > span + span{ border-color:#ddd5ce; }
html.gd-sieu-anh-hung .cc2-dau-anh i{ color:#5b4a41; }
html.gd-sieu-anh-hung .cc2-dau-anh .chua{ color:#8f857d; font-weight:600; }
html.gd-sieu-anh-hung .cc2-dau-anh .co{ color:#1e7a46; }
html.gd-sieu-anh-hung .cc2-viec{ background:#fff4f1; border:1px solid #f6d3cf; }
html.gd-sieu-anh-hung .cc2-viec.ok{ background:#effaf2; border-color:#c4e8d0; }
html.gd-sieu-anh-hung .cc2-viec-ic{ background:#e0192f; color:#fff; box-shadow:0 6px 14px -8px rgba(200,16,46,.9); }
html.gd-sieu-anh-hung .cc2-viec.ok .cc2-viec-ic{ background:#1e9a55; box-shadow:0 6px 14px -8px rgba(30,154,85,.9); }
html.gd-sieu-anh-hung .cc2-viec-chu b{ color:#c8102e; } html.gd-sieu-anh-hung .cc2-viec.ok .cc2-viec-chu b{ color:#1e7a46; }
html.gd-sieu-anh-hung .cc2-viec-chu span{ color:#4a372d; }
html.gd-sieu-anh-hung .cc2-lech{ color:#c2410c; }
html.gd-sieu-anh-hung .cc2-ngay{ color:#1d4fa8; font-weight:700; }

/* bổ trợ */
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .bt-muc{ background:#fff !important; color:#2a1810 !important; border:1px solid rgba(125,35,20,.14) !important; box-shadow:0 6px 14px -12px rgba(90,25,10,.6) !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .bt-muc > i{ color:#8a1a24; }
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .bt-muc:hover{ border-color:#e9b84c !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .bt-muc.active{ background:linear-gradient(180deg, #ffe48a, #f8cf55 55%, #eeb32d) !important; border-color:#d49a1c !important; color:#2a1606 !important; box-shadow:0 10px 18px -12px rgba(170,110,0,.9) !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .bt-muc.active > i{ color:#3d1a02; }
html.gd-sieu-anh-hung .bt2-hd-nut{ background:#fff; border:1px solid rgba(125,35,20,.14); color:#5b4a41; }
html.gd-sieu-anh-hung .bt2-hd-nut:hover{ border-color:#e9b84c; color:#b3101f; }
html.gd-sieu-anh-hung .bt2-hd-nut[aria-pressed="true"]{ background:#fff8e6; border-color:#e9b84c; color:#8a4f00; }
html.gd-sieu-anh-hung .bt2-tl{ border-color:rgba(125,35,20,.1); }
html.gd-sieu-anh-hung .bt2-tl-ten{ color:#2a1810; }
html.gd-sieu-anh-hung .bt2-tl-hop{ background:#f7f5f3; border:1px solid #ebe5df; }
html.gd-sieu-anh-hung .bt2-tl-hop > i{ color:#5b4a41; }
html.gd-sieu-anh-hung #btTaiLieuList a{ color:#c8102e !important; font-weight:700; }
html.gd-sieu-anh-hung #appShell#appShell .bt2-anh{ background:#f4f2f0 !important; border:1.5px dashed #c9c2bc !important; color:#6f655e; }
html.gd-sieu-anh-hung #appShell#appShell .bt2-anh:hover{ background:#fbf4ec !important; border-color:#d81a32 !important; }
html.gd-sieu-anh-hung #appShell#appShell .bt2-anh > i.o-anh-chu{ color:#8d8781; }
html.gd-sieu-anh-hung .bt2-anh span.o-anh-chu b{ color:#3b2a20; }
html.gd-sieu-anh-hung #appShell#appShell .bt2-anh.co-anh{ background:#1d1512 !important; border:2px solid #f2c14e !important; }
html.gd-sieu-anh-hung .bt2-bang-cuon{ border:1px solid rgba(125,35,20,.1); }
html.gd-sieu-anh-hung .bt2-loai.bo{ background:#fff1cc; color:#8a5300; border:1px solid #f3dca0; }
html.gd-sieu-anh-hung .bt2-loai.bu{ background:#e3eeff; color:#1d4fa8; border:1px solid #c8dbf6; }
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .bt2-khung .table-responsive{ box-shadow:none !important; border-radius:12px !important; }
/* các khung "card" còn lại của Bổ trợ (Lịch trực, Tra cứu, Thiết lập — js/dang-ky-bo-tro.js) cùng kiểu đầu đỏ */
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .card.p-3{ padding:16px 18px !important; border-radius:16px !important; overflow:hidden; border-color:rgba(125,35,20,.12) !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .card.p-3 > :is(.small.text-secondary:first-child, .mb-2.small.text-secondary:first-child, .d-flex:first-child:has(> .small.text-secondary)){
  margin:-16px -18px 14px !important; padding:12px 18px !important; min-height:50px; display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, #b3101f 0%, #8e0a17 100%) !important; border:0 !important; border-bottom:2px solid #f2c14e !important; border-radius:0 !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .card.p-3 > :is(.small.text-secondary:first-child, .mb-2.small.text-secondary:first-child),
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .card.p-3 > .d-flex:first-child > .small.text-secondary{ color:#fff !important; font-size:16px !important; font-weight:800 !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .card.p-3 > .d-flex:first-child :is(b, .text-secondary){ color:#fff !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-botro .card.p-3 > .d-flex:first-child .btn{ background:rgba(255,255,255,.95) !important; }

/* lương */
html.gd-sieu-anh-hung .lg2-cong-thuc small{ color:#8a6a40; }
html.gd-sieu-anh-hung .lg2-bang-khung{ background:#fff; border:1px solid rgba(125,35,20,.12); box-shadow:0 16px 30px -26px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .lg2-o span{ color:#4a372d; } html.gd-sieu-anh-hung .lg2-o b{ color:#1b120c; }
html.gd-sieu-anh-hung .lg2-o .trong{ color:#b0a49b; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .lg2-bang > tbody > tr > td.lg2-o-tong{ background:#fff7f3 !important; }
html.gd-sieu-anh-hung .lg2-tong{ color:#c8102e; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .lg2-bang > tbody > tr.lg2-ct-dong > td{ background:#fffaf3 !important; }
html.gd-sieu-anh-hung .lg2-ct > div > b{ color:#8a1a24; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .lg2-bang > tfoot > tr > td{ padding:14px 18px; background:linear-gradient(180deg, #8e0a17, #6d0711) !important; color:#f7c544 !important; font-size:21px; font-weight:900; text-align:center; letter-spacing:.02em; border-top:2px solid #f2c14e; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-chamcong, #pane-botro, #pane-luong, #pane-kiemtra, #pane-duyetanh, #pane-tienbo) .lg2-bang > tfoot > tr > td + td{ border-left:1px solid rgba(255,255,255,.18); font-size:25px; }
html.gd-sieu-anh-hung .lg2-cach-o.do{ background:#fff1f1; border:1px solid #f8d3d6; } html.gd-sieu-anh-hung .lg2-cach-o.do .lg2-cach-ic{ background:#ffd9dc; color:#d81a32; } html.gd-sieu-anh-hung .lg2-cach-o.do b{ color:#c8102e; }
html.gd-sieu-anh-hung .lg2-cach-o.lam{ background:#eef4ff; border:1px solid #d3e2fb; } html.gd-sieu-anh-hung .lg2-cach-o.lam .lg2-cach-ic{ background:#d9e8ff; color:#1d63d8; } html.gd-sieu-anh-hung .lg2-cach-o.lam b{ color:#1d4fa8; }
html.gd-sieu-anh-hung .lg2-cach-o.xanh{ background:#effaf2; border:1px solid #c9e9d4; } html.gd-sieu-anh-hung .lg2-cach-o.xanh .lg2-cach-ic{ background:#d4f1de; color:#1e8a4c; } html.gd-sieu-anh-hung .lg2-cach-o.xanh b{ color:#1e7a46; }
html.gd-sieu-anh-hung .lg2-cach-o span{ color:#3b2a20; }

/* kiểm tra chéo */
html.gd-sieu-anh-hung .nvs-the.cam{ background:linear-gradient(135deg, #fff8f0, #ffeedd); border-color:#f8d6b3; } html.gd-sieu-anh-hung .nvs-the.cam .nvs-the-huy{ background:#ffe1c2; color:#e0700c; }
html.gd-sieu-anh-hung .nvs-the.cam .nvs-the-chu > span{ color:#c2560a; } html.gd-sieu-anh-hung .nvs-the.cam .nvs-the-chu b{ color:#a8470a; } html.gd-sieu-anh-hung .nvs-the.cam.on{ color:#e0700c; }
html.gd-sieu-anh-hung .ktc2-luu-y b{ color:#a3122a; font-weight:700; }
html.gd-sieu-anh-hung .ktc2-luu-y > i{ color:#a3122a !important; font-size:22px; }
html.gd-sieu-anh-hung .ktc2-hien-xl{ color:#3b2a20; }
html.gd-sieu-anh-hung .ktc2-ai{ background:#fff; border:1px solid rgba(125,35,20,.12); color:#3b2a20; box-shadow:0 10px 22px -20px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .ktc2-ai > i{ color:#7552d6; }
html.gd-sieu-anh-hung .ktc2-cb{ background:#fff; border:1.5px solid rgba(125,35,20,.12); box-shadow:0 8px 18px -16px rgba(90,25,10,.7); }
html.gd-sieu-anh-hung .ktc2-cb:hover{ border-color:#e9b84c; }
html.gd-sieu-anh-hung .ktc2-cb.cao{ border-color:#f4c9cd; } html.gd-sieu-anh-hung .ktc2-cb.vua{ border-color:#f6d9b0; } html.gd-sieu-anh-hung .ktc2-cb.nhe{ border-color:#f1e1a8; }
html.gd-sieu-anh-hung .ktc2-cb.on{ background:#fff7f6; border-color:#e0192f; box-shadow:0 0 0 2px rgba(224,25,47,.18), 0 12px 22px -16px rgba(150,10,20,.6); }
html.gd-sieu-anh-hung .ktc2-cb.vua.on{ background:#fffaf1; border-color:#f08a1c; box-shadow:0 0 0 2px rgba(240,138,28,.18); }
html.gd-sieu-anh-hung .ktc2-cb.nhe.on{ background:#fffcef; border-color:#e5b81c; box-shadow:0 0 0 2px rgba(229,184,28,.2); }
html.gd-sieu-anh-hung .ktc2-muc.cao{ background:linear-gradient(160deg, #f0283c, #b3101f); }
html.gd-sieu-anh-hung .ktc2-muc.vua{ background:linear-gradient(160deg, #ff9c3a, #e0700c); }
html.gd-sieu-anh-hung .ktc2-muc.nhe{ background:linear-gradient(160deg, #ffd34d, #e9a909); color:#4a2c00; }
html.gd-sieu-anh-hung .ktc2-cb-dong{ color:#1b120c; }
html.gd-sieu-anh-hung .ktc2-cb-mo{ color:#3b2a20; }
html.gd-sieu-anh-hung .ktc2-cb-ct{ color:#6b5a50; }
html.gd-sieu-anh-hung .ktc2-xl{ color:#1e7a46; }
html.gd-sieu-anh-hung .ktc2-ct-dau{ color:#1b120c; }
html.gd-sieu-anh-hung .ktc2-tt-luoi{ background:#efe7df; border:1px solid #efe7df; }
html.gd-sieu-anh-hung .ktc2-tt-luoi > div{ background:#fff; }
html.gd-sieu-anh-hung .ktc2-tt-luoi span{ color:#7a6a60; }
html.gd-sieu-anh-hung .ktc2-tt-luoi b{ color:#1b120c; }
html.gd-sieu-anh-hung .ktc2-nhan{ color:#3b2a20; }
html.gd-sieu-anh-hung .ktc2-dh{ background:#fff8f2; border:1px solid #f3e1d3; color:#3b2a20; }
html.gd-sieu-anh-hung .ktc2-dh b{ color:#a3122a; }
html.gd-sieu-anh-hung .ktc2-mc-anh{ background:#f7f5f3; border:1px solid #ebe5df; color:#2a1810; }
html.gd-sieu-anh-hung .ktc2-mc-anh:hover{ border-color:#e9b84c; }
html.gd-sieu-anh-hung .ktc2-mc-anh small{ color:#7a6a60; font-weight:500; }
html.gd-sieu-anh-hung .ktc2-mc-trong{ background:#f4f2f0; color:#7a6a60; } html.gd-sieu-anh-hung .ktc2-mc-trong i{ color:#a59b93; }
html.gd-sieu-anh-hung .ktc2-dem-chu{ color:#a3958c; }
html.gd-sieu-anh-hung .ktc2-chu-giai{ background:#fff; border:1px solid rgba(125,35,20,.12); color:#2a1810; }
html.gd-sieu-anh-hung .ktc2-chu-giai > span + span{ border-color:#ece4dc; }
html.gd-sieu-anh-hung .ktc2-chu-giai small{ color:#7a6a60; }
html.gd-sieu-anh-hung .ktc2-chu-giai i.lam{ color:#2f6fe0; } html.gd-sieu-anh-hung .ktc2-chu-giai i.tim{ color:#7552d6; } html.gd-sieu-anh-hung .ktc2-chu-giai i.cam{ color:#f08a1c; }
html.gd-sieu-anh-hung .ktc2-chu-giai i.do{ color:#d81a32; } html.gd-sieu-anh-hung .ktc2-chu-giai i.xanh{ color:#1e9a55; }
html.gd-sieu-anh-hung .ktc2-lech{ color:#c2410c; font-weight:700; }

/* ===== Duyệt ảnh (js/duyet-anh.js) + Tiến bộ bổ trợ (js/tien-bo-bo-tro.js) — thầy chốt 04/10/2026 ===== */
.tg2-nut.xanh, .tg2-nut-nho.xanh{ background:linear-gradient(#3cc47a, #1e9a55); border:1px solid #17804a; color:#fff; }
.tg2-nut.xanh i, .tg2-nut-nho.xanh i{ color:#fff; }
.tg2-chip.tim{ background:#f0eaff; color:#5b3cc4; border:1px solid #dcd0fb; }
.da-co-so{ margin-bottom:12px; }
.da-co-so-dong{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:4px 0; }
.da-co-so-dong label{ display:flex; align-items:center; gap:6px; margin:0; font-size:13.5px; }
.da-co-so-dong .da-ban-kinh{ width:90px; }
.da-thanh{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 4px; }
.da-thanh .gian{ flex:1 1 auto; }
.da-luoi{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; margin-top:8px; }
.da-the{ display:flex; flex-direction:column; background:#fff; border:1px solid rgba(125,35,20,.14); border-radius:16px; overflow:hidden; box-shadow:0 14px 28px -24px rgba(90,25,10,.8); }
.da-the.kl-dat{ border-color:#bfe6cd; } .da-the.kl-xem_lai{ border-color:#f3dfae; } .da-the.kl-khong_dat{ border-color:#f6c9cd; box-shadow:0 0 0 2px #ffe0e3; }
.da-anh{ display:flex; align-items:center; justify-content:center; background:#1b1410; height:220px; }
.da-anh img{ max-width:100%; max-height:220px; object-fit:contain; }
.da-anh span{ color:#ccc; }
.da-noi{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:5px; font-size:13.5px; }
.da-dau{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.da-dau b{ font-size:15px; }
.da-chon{ margin:0; display:flex; } .da-chon input{ width:18px; height:18px; }
.da-phu{ color:#6f625a; }
.da-kiem{ border-top:1px dashed #e3dbd3; padding-top:6px; display:flex; flex-direction:column; gap:3px; }
.da-kl{ display:flex; align-items:center; gap:8px; } .da-kl small{ color:#8a7b70; }
.da-dong{ display:flex; gap:7px; align-items:flex-start; line-height:1.35; }
.da-dong > i{ width:14px; margin-top:3px; color:#8a7b70; }
.da-dong.xanh > i{ color:#1e9a55; } .da-dong.vang{ color:#8a5200; } .da-dong.vang > i{ color:#d98b0b; } .da-dong.do{ color:#b00f22; font-weight:600; } .da-dong.do > i{ color:#d81a32; }
.da-ghi{ font-size:12.5px; color:#5d5048; background:#faf6f1; border-radius:8px; padding:5px 8px; }
.da-nut{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.tb-the{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; margin:8px 0 12px; }
.tb-bang td .form-select{ min-width:140px; }
.tb-thuong-dong{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.tb-thuong-dong input{ width:150px; }
@media (max-width: 575px){ .da-luoi{ grid-template-columns:1fr; } .da-anh{ height:180px; } .da-anh img{ max-height:180px; } }
#pane-duyetanh .ktc2-loc{ grid-template-columns:minmax(165px, 1fr) minmax(165px, 1fr) minmax(150px, 1fr) minmax(170px, 1fr) auto; }
#pane-tienbo .ktc2-loc{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-end; justify-content:flex-start; }
.tb-bang td.text-end{ white-space:nowrap; }
#pane-tienbo .ktc2-loc .tg2-o{ flex:0 0 auto; }
#pane-tienbo .ktc2-loc .tg2-nut{ white-space:nowrap; }
.tb-the{ grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }
.tb-the .nvs-the b{ white-space:nowrap; }
@media (max-width: 767px){ #pane-duyetanh .ktc2-loc{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }

/* ───── Chấm công hộ (Admin, thầy chốt 04/10/2026 — app.js moChamHo_) ───── */
.cc2-cham-ho-nut{ width:100%; margin-top:12px; justify-content:center; }
.cc2-ly-do-ho{ font-size:11.5px; color:#7a6a60; margin-top:3px; max-width:220px; white-space:normal; line-height:1.35; }
.cc-ho-dlg{ border:0; border-radius:18px; padding:0; width:min(480px, calc(100vw - 32px)); box-shadow:0 30px 80px -20px rgba(60,10,10,.55); color:#2a1810; }
.cc-ho-dlg::backdrop{ background:rgba(30,8,8,.45); }
.cc-ho-form{ padding:22px 22px 18px; background:#fff; }
#ccHoDlg .form-control, #ccDdDlg .form-control, #ccDdDlg .form-select{ color:#1b120c !important; background-color:#fff !important; border:1px solid rgba(125,35,20,.22) !important; border-radius:10px; }
#ccHoDlg .form-control::placeholder, #ccDdDlg .form-control::placeholder{ color:#a3958c !important; }
#ccHoDlg .form-control:focus, #ccDdDlg .form-control:focus, #ccDdDlg .form-select:focus{ border-color:#e9b84c !important; box-shadow:0 0 0 3px rgba(233,184,76,.25) !important; }
#ccHoDlg .form-label, #ccDdDlg .form-label{ color:#5c4a40; font-weight:700; }
.cc2-thay-cho{ font-size:11.5px; color:#5b3cc4; font-weight:700; margin-top:3px; white-space:normal; }
.cc-ho-dau{ display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.cc-ho-dau b{ display:block; font-size:18px; font-weight:800; color:#8a1a24; }
.cc-ho-dau small{ display:block; font-size:13px; color:#7a6a60; }
.cc-ho-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#b3101f,#7a0c18); color:#ffd36b; font-size:18px; flex:none; }
.cc-ho-phat{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cc-ho-phat input{ width:90px; font-weight:800; text-align:center; }
.cc-ho-phat > span{ font-weight:700; }
.cc-ho-chip{ display:flex; gap:6px; flex-wrap:wrap; margin-left:6px; }
.cc-ho-chip button{ border:1px solid rgba(125,35,20,.2); background:#fff; border-radius:999px; padding:4px 11px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; color:#2a1810; }
.cc-ho-chip button.on{ background:#b3101f; border-color:#b3101f; color:#fff; }
.cc-ho-tien{ margin:10px 0 12px; font-size:13.5px; color:#5c4a40; min-height:20px; }
.cc-ho-tien b{ color:#c8102e; }
.cc-ho-loi{ min-height:18px; margin-top:8px; }
.cc-ho-nut{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.lg2-phat{ font-size:11.5px; font-weight:700; color:#c8102e; margin-top:4px; }
.lg2-ho{ font-style:normal; color:#5b3cc4; font-weight:700; }

/* =====================================================================================
 * NHÓM ĐỀ THI (nhân viên) — Ngân hàng câu hỏi (.ch2-*) / Ma trận đề (.mt2-*) / Chấm trắc nghiệm (.ctn2-*) / Chuyển PPT (.cp2-*),
 * theo 4 ảnh mẫu thầy 04/10/2026 (ban-xem-thu/de-thi-v1). Dùng chung khung .tg2-* (thẻ trắng, đầu đỏ, nút vàng, ô có icon,
 * viên màu) của css/tro-giang-nhom.css. Bố cục cho mọi giao diện; màu cho giao diện Siêu anh hùng.
 * Đè luật chung của noi-dung-nhan-vien.css phải dùng #appShell#appShell + id khung tab.
 * JS: app.js (Ngân hàng: theCh_ / veThongKeCh_ / veTrangCh_), js/ma-tran-de.js, js/cham-tn.js (htmlDs_), js/chuyen-ppt.js.
 * ===================================================================================== */

/* ── Tiêu đề trang: chữ to đỏ đậm, không huy hiệu (như ảnh mẫu) ── */
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-cauhoi, #pane-matran, #pane-chamtn, #pane-chuyenppt) > .mv-bang .mv-logo{ display:none; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-cauhoi, #pane-matran, #pane-chamtn, #pane-chuyenppt) > .mv-bang .mv-tieu-de{ font-size:34px; font-weight:900 !important; color:#8e0a17 !important; letter-spacing:-.015em; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-cauhoi, #pane-matran, #pane-chamtn, #pane-chuyenppt) > .mv-bang .mv-phu{ font-size:17px; color:#5b5048; font-weight:500; }
@media (max-width:767.98px){
  html.gd-sieu-anh-hung #appShell#appShell :is(#pane-cauhoi, #pane-matran, #pane-chamtn, #pane-chuyenppt) > .mv-bang .mv-tieu-de{ font-size:24px; }
  html.gd-sieu-anh-hung #appShell#appShell :is(#pane-cauhoi, #pane-matran, #pane-chamtn, #pane-chuyenppt) > .mv-bang .mv-phu{ font-size:13.5px; }
}
/* Ma trận đề trước đây có khung riêng (không .mv) — giờ dùng chung khung tab */
html.gd-sieu-anh-hung #appShell#appShell #pane-matran.mv{ padding-bottom:22px; }

/* ── Dùng chung ── */
.dt2-ic-do{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:16px; }
.dt2-tha{ display:flex !important; align-items:center; justify-content:center; gap:18px; padding:18px 20px !important; margin:0 !important; text-align:left; cursor:pointer; border-radius:14px !important; }
.dt2-tha-ic{ display:flex; gap:6px; font-size:38px; flex:none; }
.dt2-tha-chu{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.dt2-tha-chu b{ font-size:17px; font-weight:800; }
.dt2-tha-chu small{ font-size:13.5px; font-weight:500; }
html.gd-sieu-anh-hung .dt2-ic-do{ background:linear-gradient(160deg, #e0192f, #a50d1f); color:#fff; box-shadow:0 6px 12px -8px rgba(160,10,25,.9); }
html.gd-sieu-anh-hung #appShell#appShell .dt2-tha{ background:#fffdf8 !important; border:1.5px dashed #e6b866 !important; }
html.gd-sieu-anh-hung #appShell#appShell .dt2-tha:hover, html.gd-sieu-anh-hung #appShell#appShell .dt2-tha.tw-keo{ background:#fff6e6 !important; border-color:#d81a32 !important; }
html.gd-sieu-anh-hung .dt2-tha-chu b{ color:#8e0a17; } html.gd-sieu-anh-hung .dt2-tha-chu small{ color:#6b5d55; }
html.gd-sieu-anh-hung .dt2-word{ color:#2b6cd8; } html.gd-sieu-anh-hung .dt2-pdf{ color:#d8262e; } html.gd-sieu-anh-hung .dt2-ppt{ color:#d9572a; }

/* ═════════════════════════ NGÂN HÀNG CÂU HỎI ═════════════════════════ */
.ch2-nhap{ margin-bottom:16px; }
.ch2-nhap{ padding:14px 16px; gap:12px; }
.ch2-nhap-dau{ display:flex; align-items:center; gap:10px; list-style:none; cursor:pointer; }
.ch2-nhap-dau::-webkit-details-marker{ display:none; }
.ch2-nhap-dau > b{ flex:1; min-width:0; }
.ch2-nhap-dau:focus-visible{ outline:2px solid #c8102e; outline-offset:5px; border-radius:8px; }
.ch2-nhap-bat{ display:inline-flex; align-items:center; gap:9px; flex:none; font-size:12px; font-weight:600; opacity:.8; }
.ch2-nhap-bat > i{ transition:transform .18s; }
.ch2-nhap .ch2-nhap-dong{ display:none; }
.ch2-nhap[open] .ch2-nhap-mo{ display:none; }
.ch2-nhap[open] .ch2-nhap-dong{ display:inline; }
.ch2-nhap[open] .ch2-nhap-bat > i{ transform:rotate(180deg); }
.ch2-nhap-than{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.ch2-nhap-goi-y{ font-size:12.5px; color:var(--bs-secondary-color, #7a6a60); }
@media (max-width:575.98px){ .ch2-nhap-bat .ch2-nhap-mo, .ch2-nhap[open] .ch2-nhap-bat .ch2-nhap-dong{ display:none; } }
.ch2-nhap-dau > b{ font-size:17px; font-weight:800; }
.ch2-nhap-dau > small{ margin-left:auto; font-size:12.5px; }
.ch2-nhap-o{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.1fr) auto; gap:12px; align-items:end; }
.ch2-loi-giai{ display:flex; align-items:center; gap:8px; min-height:44px; font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; }
.ch2-loi-giai .form-check-input{ margin:0; width:1.25em; height:1.25em; }
#appShell#appShell #pane-cauhoi .ch2-nhap-o :is(.form-control, .form-select){ min-height:44px; }
.ch2-cach-cu > summary{ font-size:12.5px; cursor:pointer; }
#twMsg:empty{ display:none; }

.ch2-luoi{ display:grid; grid-template-columns:minmax(300px, 380px) minmax(0, 1fr); gap:16px; align-items:start; }
.ch2-cay{ padding:14px; gap:10px; min-width:0; max-height:420px; }
/* 05/11/2026 (thầy yêu cầu): màn rộng — cây mục lục và danh sách câu MỖI BÊN MỘT THANH CUỘN RIÊNG, cuộn bên này bên kia đứng yên.
   Cả hai cột dính dưới thanh đầu trang (--head, css/header-marvel.css) và cao vừa phần màn hình còn lại (trừ lề dưới trang ≈ 130px: đệm tab + khung + body),
   nên khi trang đã cuộn hết phần tiêu đề thì hai cột nằm gọn trong màn, chỉ còn cuộn bên trong. Thanh công cụ (tìm, lọc, chọn, phân trang) dính đầu cột phải.
   Tab .mv được phóng zoom 1.12 (css/marvel-tab.css) mà 100vh và --head là px thật → chia cho --mv-zoom để ra px đã phóng. */
@media (min-width:992px){
  .ch2-luoi{ --ch2-dinh:calc((var(--head, 0px) + 12px) / var(--mv-zoom, 1)); --ch2-cao:calc((100vh - var(--head, 0px) - 146px) / var(--mv-zoom, 1)); }
  .ch2-cay{ position:sticky; top:var(--ch2-dinh); max-height:var(--ch2-cao); }
  .ch2-phai{ position:sticky; top:var(--ch2-dinh); max-height:var(--ch2-cao); overflow-y:auto; overflow-x:hidden; margin:0 -6px 0 -4px; padding:0 6px 8px 4px; scrollbar-width:thin; scrollbar-color:#e6c27a transparent; }
  .ch2-phai::-webkit-scrollbar{ width:8px; } .ch2-phai::-webkit-scrollbar-thumb{ background:#e6c27a; border-radius:8px; }
  .ch2-phai > .ch2-cong-cu{ position:sticky; top:0; z-index:6; flex:none; }
}
.ch2-cay-dau{ display:flex; align-items:center; gap:10px; }
.ch2-cay-dau > i{ font-size:20px; }
.ch2-cay-dau > b{ flex:1; font-size:19px; font-weight:800; }
.ch2-cay-ds{ overflow-y:auto; overflow-x:hidden; min-height:120px; margin:0 -4px; padding:0 4px; }
.ch2-them-nhanh{ padding:10px; border-radius:12px; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut{ padding:8px 6px; border-radius:9px; font-size:14px; line-height:1.45; align-items:flex-start; gap:5px; margin:2px 0; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-dem{ font-size:11px; line-height:1.5; font-weight:800; opacity:1; padding:1px 6px; border-radius:999px; min-width:28px; text-align:center; white-space:nowrap; margin-top:1px; font-variant-numeric:tabular-nums; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-id{ display:block; font-size:10px; line-height:1.5; margin:3px 0 0; opacity:.5; font-weight:500; letter-spacing:.02em; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-con{ margin-left:5px; padding-left:5px; }
/* Giữ chỗ cho tên ở cả tầng sâu: mũi tên, icon và số câu không lấn vào chữ. */
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-caret{ width:10px; line-height:1.45; flex:none; margin-top:1px; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-ic{ width:16px; flex:none; line-height:1.45; margin-top:3px; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-ten{ flex:1 1 0; min-width:0; white-space:normal; word-break:normal; overflow-wrap:anywhere; }
/* Huy hiệu đỏ–vàng gọn, đồng bộ ở mọi cấp của cây. */
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-ic{ width:18px; height:18px; margin-top:1px; color:#b9142d; background:none; border:0; border-radius:0; box-shadow:none; text-shadow:none; filter:none; transform:none; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-ic-svg{ display:block; width:16px; height:16px; flex:none; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-ic-goc{ width:22px; height:22px; margin-top:0; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-ic-goc .ch-ic-svg{ width:22px; height:22px; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-ic-vang{ color:#cc941c; }
#appShell#appShell #pane-cauhoi .ch2-cay :is(.ch-ic-goc,.ch-ic-lop,.ch-ic-bai) .ch-ic-vang{ color:#f4c954; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.dang-chon .ch-ic{ color:#981126; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-ai-moi{ flex:none; font-size:10px; }
#appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom .ch-ten{ letter-spacing:.02em; font-size:14.5px; }

.ch2-phai{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.ch2-cong-cu{ padding:12px 14px; gap:10px; }
.ch2-hang{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ch2-tim{ flex:1 1 180px; min-width:0; }
#appShell#appShell #pane-cauhoi .ch2-tim .form-control{ min-height:42px; }
.ch2-hang .tg2-nut{ min-height:42px; }
.ch2-kieu-xem{ margin-left:auto; display:inline-flex; gap:4px; padding:3px; border-radius:10px; }
.ch2-kieu-xem button{ width:34px; height:30px; border:0; border-radius:8px; display:grid; place-items:center; cursor:pointer; font-size:14px; }
.ch2-hop-phu{ margin:0 !important; }

.ch2-tk{ display:flex; flex-direction:column; gap:8px; }
.ch2-tk-hang{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ch2-tk-tong{ font-size:16px; font-weight:700; margin-right:10px; display:inline-flex; align-items:baseline; gap:6px; }
.ch2-tk-tong b{ font-size:26px; font-weight:900; letter-spacing:-.01em; }
.ch2-tk-tong small{ font-size:12px; font-weight:500; }
.ch2-loai-loc{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.ch2-loai-loc b{ font-weight:800; }
.ch2-loai-loc:hover{ transform:translateY(-1px); }
.ch2-tk-nhan{ font-size:12.5px; font-weight:700; margin-right:2px; }
.ch2-muc-loc{ display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:999px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.ch2-muc-loc b{ font-weight:600; opacity:.8; }

#appShell#appShell #pane-cauhoi .ch-luoi{ gap:14px; }
#appShell#appShell #pane-cauhoi .ch2-the{ display:flex; flex-direction:column; padding:0; border-radius:16px !important; overflow:hidden; transition:box-shadow .25s, border-color .2s, transform .25s; }
#appShell#appShell #pane-cauhoi .ch2-the:hover{ transform:translateY(-2px); }
.ch2-the-dau{ display:flex !important; align-items:center; gap:8px !important; flex-wrap:wrap; padding:10px 14px !important; font-size:14px !important; }
.ch2-the-dau > b{ font-size:15px; font-weight:800; }
.ch2-the-ic{ font-size:15px; }
.ch2-loai, .ch2-muc-chip, .ch2-tt{ display:inline-flex; align-items:center; padding:2px 11px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap; }
.ch2-tt{ font-size:11.5px; padding:1px 8px; }
.ch2-tick{ margin-left:auto; width:24px !important; height:24px !important; border-radius:6px !important; display:grid; place-items:center; font-size:12px; padding:0 !important; flex:none; }
.ch2-tick i{ opacity:0; transition:opacity .15s; }
.ch2-the.ch-chon .ch2-tick i{ opacity:1; }
#appShell#appShell #pane-cauhoi .ch2-the .ch-the-than{ padding:4px 14px 8px; flex:1; }
#appShell#appShell #pane-cauhoi .ch2-the .ch-ma{ border:0; border-radius:6px; padding:2px 9px; font-size:11.5px; font-weight:800; letter-spacing:.02em; margin-bottom:8px; opacity:1; }
#appShell#appShell #pane-cauhoi .ch2-the .ch-nd{ font-size:14.5px; line-height:1.6; max-height:9.6em; }
.ch2-pa{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin-top:8px; font-size:14px; }
.ch2-pa-o{ display:flex; align-items:center; gap:8px; min-width:0; }
.ch2-pa-o > span:last-child{ min-width:0; overflow:hidden; }
.ch2-pa-ky{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:800; }
.ch2-the-chan{ display:flex; align-items:center; gap:8px; padding:8px 12px 10px 14px; flex-wrap:wrap; }
.ch2-xem-lg{ display:inline-flex; align-items:center; gap:7px; border:0; background:none; padding:4px 0; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.ch2-xem-lg:hover{ text-decoration:underline; }
.ch2-muc{ margin-left:auto !important; display:flex; gap:3px; }
#appShell#appShell #pane-cauhoi .ch2-muc button{ font-size:11px; padding:1px 6px; border-radius:6px; font-weight:700; }
.ch2-ba-cham{ width:34px; height:30px; border-radius:9px; display:grid; place-items:center; cursor:pointer; font-size:14px; flex:none; }
#appShell#appShell #pane-cauhoi .ch2-the .ch-goiy{ margin:0 12px 8px; }
#appShell#appShell #pane-cauhoi .ch-luoi.ch-ds .ch2-pa{ grid-template-columns:repeat(4, minmax(0, 1fr)); }

.ch2-trang{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:4px; }
.ch2-trang:empty{ display:none; }
.ch2-trang-chu{ font-size:14px; font-weight:600; }
.ch2-trang-nut{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ch2-trang-so{ min-width:36px; height:36px; padding:0 8px; border-radius:10px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; display:grid; place-items:center; }
.ch2-trang-so:disabled{ opacity:.4; cursor:default; }
.ch2-trang-cham{ padding:0 2px; font-weight:700; }

@media (max-width:1399.98px){ .ch2-nhap-o{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width:991.98px){
  .ch2-luoi{ grid-template-columns:minmax(0, 1fr); }
  .ch2-cay{ position:static; max-height:420px; }
}
@media (max-width:767.98px){
  .ch2-nhap-o{ grid-template-columns:minmax(0, 1fr); }
  .ch2-nhap-dau > small{ margin-left:0; }
  .dt2-tha{ flex-direction:column; text-align:center; gap:10px; }
  .ch2-hang .tg2-nut{ flex:1 1 auto; }
  .ch2-kieu-xem{ margin-left:0; }
  .ch2-pa{ grid-template-columns:minmax(0, 1fr); }
  .ch2-trang{ justify-content:center; }
}

/* màu */
html.gd-sieu-anh-hung .ch2-nhap-dau > b{ color:#8e0a17; } html.gd-sieu-anh-hung .ch2-nhap-dau > small{ color:#7a6a60; }
html.gd-sieu-anh-hung .ch2-loi-giai{ color:#2a1810; }
html.gd-sieu-anh-hung .ch2-cach-cu > summary{ color:#7a6a60; }
html.gd-sieu-anh-hung .ch2-cay-dau > i{ color:#c8102e; } html.gd-sieu-anh-hung .ch2-cay-dau > b{ color:#8e0a17; }
html.gd-sieu-anh-hung .ch2-them-nhanh{ background:#fff8ec; border:1px solid #f3dfae; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut{ color:#2a1810; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut:hover{ background:#fff4e6; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.dang-chon{ background:linear-gradient(180deg, #ffe7a0, #f8d167); color:#2a1606; box-shadow:inset 0 0 0 1px #e3b13c; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-dem{ background:#3a2a22; color:#fff; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.dang-chon .ch-dem{ background:#6b3d00; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-con{ border-left-color:#eadbc8; }
html.gd-sieu-anh-hung .ch2-kieu-xem{ background:#f6f1ea; }
html.gd-sieu-anh-hung .ch2-kieu-xem button{ background:transparent; color:#5b4a41; }
html.gd-sieu-anh-hung .ch2-kieu-xem button.active{ background:linear-gradient(#ffe48a, #f6c33f); color:#2a1606; box-shadow:0 4px 8px -6px rgba(150,90,0,.9); }
html.gd-sieu-anh-hung #chDaChonChip.xam{ background:#f3efeb; color:#8f857d; border-color:#e3dbd3; }
html.gd-sieu-anh-hung .ch2-tk-tong{ color:#3b2a20; } html.gd-sieu-anh-hung .ch2-tk-tong b{ color:#c8102e; } html.gd-sieu-anh-hung .ch2-tk-tong small{ color:#7a6a60; }
html.gd-sieu-anh-hung .ch2-loai-loc{ border:1px solid; }
html.gd-sieu-anh-hung :is(.ch2-loai-loc, .ch2-loai).do{ background:#ffeef0; border-color:#f8cdd2; color:#c8102e; }
html.gd-sieu-anh-hung :is(.ch2-loai-loc, .ch2-loai).cam{ background:#fff3e6; border-color:#f6d5ad; color:#c2560a; }
html.gd-sieu-anh-hung :is(.ch2-loai-loc, .ch2-loai).lam{ background:#eaf2ff; border-color:#c8dbf6; color:#1d4fa8; }
html.gd-sieu-anh-hung :is(.ch2-loai-loc, .ch2-loai).xanh{ background:#e6f7ec; border-color:#bfe6cd; color:#1e7a46; }
html.gd-sieu-anh-hung :is(.ch2-loai-loc, .ch2-loai).tim{ background:#f1ebff; border-color:#dccff6; color:#5b2da0; }
html.gd-sieu-anh-hung .ch2-loai-loc b{ color:#1b120c; }
html.gd-sieu-anh-hung .ch2-loai-loc.dang-chon{ box-shadow:0 0 0 2px currentColor; }
html.gd-sieu-anh-hung .ch2-tk-nhan{ color:#7a6a60; }
html.gd-sieu-anh-hung .ch2-muc-loc{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#4a372d; }
html.gd-sieu-anh-hung .ch2-muc-loc.dang-chon{ background:linear-gradient(#ffe48a, #f6c33f); border-color:#d49a1c; color:#2a1606; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the{ background:#fff !important; border:1.5px solid rgba(125,35,20,.12) !important; box-shadow:0 10px 24px -20px rgba(90,25,10,.8) !important; outline:0; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the:hover{ border-color:#ecc671 !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the.ch-chon{ border-color:#e9a923 !important; box-shadow:0 0 0 2px rgba(240,180,40,.35), 0 12px 26px -18px rgba(150,90,0,.8) !important; background:#fffdf6 !important; }
html.gd-sieu-anh-hung .ch2-the-dau{ background:transparent !important; color:#1b120c; }
html.gd-sieu-anh-hung .ch2-the-ic{ color:#3b2a20; }
html.gd-sieu-anh-hung .ch2-muc-chip{ border:1px solid; }
html.gd-sieu-anh-hung .ch2-muc-chip.m1{ background:#e6f7ec; color:#1e7a46; border-color:#bfe6cd; }
html.gd-sieu-anh-hung .ch2-muc-chip.m2{ background:#ffeef3; color:#c2185b; border-color:#f8cddc; }
html.gd-sieu-anh-hung .ch2-muc-chip.m3{ background:#f1ebff; color:#5b2da0; border-color:#dccff6; }
html.gd-sieu-anh-hung .ch2-muc-chip.m4{ background:#fff1e3; color:#c2560a; border-color:#f6d5ad; }
html.gd-sieu-anh-hung .ch2-muc-chip.m5{ background:#ffe9ea; color:#a3122a; border-color:#f6c9cd; }
html.gd-sieu-anh-hung .ch2-muc-chip.m0{ background:#f3efeb; color:#8f857d; border-color:#e3dbd3; font-weight:600; }
html.gd-sieu-anh-hung .ch2-tt.duyet{ background:#e3f6ea; color:#1e7a46; } html.gd-sieu-anh-hung .ch2-tt.moi{ background:#f3efeb; color:#7a6a60; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-tick{ border:1.5px solid #c9bdb3 !important; background:#fff !important; color:#fff; box-shadow:none !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the.ch-chon .ch2-tick{ background:linear-gradient(#f7c544, #e39b16) !important; border-color:#d08a0e !important; color:#fff; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch-ma{ background:#2a1d17; color:#fff; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch-nd{ color:#21160f; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch-nd::after{ background:linear-gradient(rgba(255,255,255,0), #fff); }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the.ch-chon .ch-nd::after{ background:linear-gradient(rgba(255,253,246,0), #fffdf6); }
html.gd-sieu-anh-hung .ch2-pa-o{ color:#21160f; }
html.gd-sieu-anh-hung .ch2-pa-ky{ border:1.5px solid #3a2a22; color:#2a1810; background:#fff; }
html.gd-sieu-anh-hung .ch2-pa-o.dung .ch2-pa-ky{ background:#e0192f; border-color:#e0192f; color:#fff; box-shadow:0 0 0 3px #ffd9dc; }
html.gd-sieu-anh-hung .ch2-the-chan{ border-top:1px solid #f1e8de; }
html.gd-sieu-anh-hung .ch2-xem-lg{ color:#1d4fa8; } html.gd-sieu-anh-hung .ch2-xem-lg i{ color:#1d63d8; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-muc button{ border:1px solid #e3d7cb; background:#fff; color:#7a6a60; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-muc button.dang-chon{ background:#8e0a17; border-color:#8e0a17; color:#fff; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-muc button.goi-y{ border:1px dashed #1d63d8; color:#1d63d8; }
html.gd-sieu-anh-hung .ch2-ba-cham{ background:#fff; border:1px solid rgba(125,35,20,.18); color:#3b2a20; }
html.gd-sieu-anh-hung .ch2-ba-cham:hover{ border-color:#e9b84c; color:#b3101f; }
/* 05/11/2026 (thầy yêu cầu): thẻ câu ở Ngân hàng có KHUNG GIỐNG khối câu hỏi trong Sách (css/sach.css "#scNoiDung .sc-khoi.cau"):
   thẻ trắng viền kem #ecd2b8, vạch đỏ 6px bên trái, đáy vàng; "Câu #id" = biển đỏ nghiêng bóng vàng (như .sc-so-cau); chip loại kem (như .sc-chip);
   chip mức nền mực chữ vàng (như .sc-sao); nhãn "Mới" xám (như .sc-chip.phu); chân thẻ kem, "Xem lời giải" đỏ nghiêng (như .sc-lg summary). Chỉ đổi CSS, đặt SAU các quy tắc cũ để đè. */
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the{ position:relative; padding-left:6px; border:1px solid #ecd2b8 !important; border-radius:14px !important; box-shadow:0 3px 0 #f7c54466, 0 9px 18px #7d08140d !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg,#e0243d,#8f0b1a); pointer-events:none; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the:hover{ border-color:#e3b25a !important; box-shadow:0 3px 0 #f7c544, 0 12px 22px #7d081418 !important; transform:translateY(-1px); }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the.ch-chon{ border-color:#f7a531 !important; outline:2px solid #f7a531; outline-offset:-2px; background:#fff8e6 !important; box-shadow:0 3px 0 #f7c544, 0 9px 18px #7d08140d !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the.ch-chon .ch-nd::after{ background:linear-gradient(rgba(255,248,230,0), #fff8e6); }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch2-the-ic{ display:none; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the-dau > b{ display:inline-block; padding:1px 12px 1px 11px; border-radius:6px; background:linear-gradient(135deg,#d81a32,#8f0b1a); color:#fff3c4; font-size:13.5px; font-weight:900; letter-spacing:.02em; transform:skewX(-8deg); box-shadow:2px 2px 0 #f7c544; margin-right:4px; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch2-loai{ border:0; border-radius:999px; background:#fff0c2; color:#8a4a00; box-shadow:inset 0 0 0 1px #efc766; padding:2px 10px; font-size:11.5px; font-weight:800; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch2-muc-chip{ border:0; border-radius:999px; background:#2a1d17; color:#ffd75e; padding:1px 10px; font-size:11.5px; font-weight:800; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch2-muc-chip.m0{ background:#f4efe9; color:#6f635b; box-shadow:inset 0 0 0 1px #e0d6cb; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch2-tt{ border-radius:999px; background:#f4efe9; color:#6f635b; box-shadow:inset 0 0 0 1px #e0d6cb; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch-ma{ background:#2a1d17; color:#ffd75e; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch2-the-chan{ border-top:1px dashed #ecd2b8; background:#fffaf0; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch2-xem-lg{ color:#b10e25; font-style:italic; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-the .ch2-xem-lg i{ color:#b10e25; }
html.gd-sieu-anh-hung .ch2-trang-chu{ color:#5b4a41; }
html.gd-sieu-anh-hung .ch2-trang-so{ background:#fff; border:1px solid rgba(125,35,20,.18); color:#2a1810; }
html.gd-sieu-anh-hung .ch2-trang-so:hover:not(:disabled){ border-color:#e9b84c; }
html.gd-sieu-anh-hung .ch2-trang-so.on{ background:linear-gradient(#ffd25a, #e9a923); border-color:#c98a12; color:#2a1606; }
html.gd-sieu-anh-hung .ch2-trang-cham{ color:#7a6a60; }
.ch2-cong-cu{ overflow:visible !important; }

/* ═════════════════════════ CHUYỂN PPT ═════════════════════════ */
/* đầu khung nền trắng: biểu tượng đỏ + chữ đỏ (ảnh mẫu Chuyển PPT) */
.dt2-dau{ display:flex; align-items:center; gap:10px; padding:14px 18px 4px; }
.dt2-dau > i{ font-size:21px; width:24px; text-align:center; }
.dt2-dau > b{ font-size:19px; font-weight:800; flex:1; min-width:0; }
.cp2-dai{ flex-direction:row !important; align-items:center; gap:18px; padding:14px 20px; margin-bottom:16px; flex-wrap:wrap; }
.cp2-dai-ic{ display:flex; align-items:center; gap:8px; font-size:40px; }
.cp2-mui{ font-size:22px !important; }
.cp2-dai-chu{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:220px; }
.cp2-dai-chu b{ font-size:21px; font-weight:900; }
.cp2-dai-chu small{ font-size:15px; }
.cp2-dai-chip{ padding:7px 14px; font-size:13.5px; }
.cp2-luoi{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:16px; align-items:start; }
.cp2-cot{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.cp2-tha{ flex-direction:column; text-align:center !important; gap:8px !important; min-height:150px; }
.cp2-tha .dt2-tha-ic{ font-size:46px; gap:10px; }
.cp2-ds-file:empty{ display:none; }
.cp2-ds-file{ display:flex; flex-direction:column; gap:8px; }
.cp2-file, .cp2-kq-dau{ display:flex; align-items:center; gap:12px; }
.cp2-file{ padding:10px 12px; border-radius:12px; }
.cp2-file > i, .cp2-kq-dau > i{ font-size:28px; flex:none; }
.cp2-file-ten{ display:flex; flex-direction:column; flex:1; min-width:0; }
.cp2-file-ten b{ font-size:14.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp2-file-ten small{ font-size:12.5px; }
.cp2-bo{ width:32px; height:32px; border-radius:9px; border:0; display:grid; place-items:center; cursor:pointer; flex:none; background:none; }
.cp2-goi-y{ font-size:12.5px; margin-top:4px; }
.cp2-o4{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.cp2-cong-tac-hang{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.cp2-cong-tac{ display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; cursor:pointer; }
.cp2-cong-tac .form-check-input{ margin:0; width:2.4em; height:1.3em; border-radius:2em !important; flex:none; }
.cp2-chuyen{ width:100%; }
.cp2-word{ width:100%; }
.cp2-slide{ position:relative; aspect-ratio:16 / 9; border-radius:12px; overflow:hidden; padding:9% 7% 6%; display:flex; flex-direction:column; gap:4%; }
.cp2-slide.tieu-de{ align-items:center; justify-content:center; text-align:center; }
.cp2-logo{ position:absolute; top:5%; left:3.5%; width:9%; aspect-ratio:1; object-fit:contain; }
.cp2-ten{ font-family:'Palatino Linotype', Palatino, serif !important; font-size:clamp(18px, 2.3vw, 34px); font-weight:800; letter-spacing:.02em; }
.cp2-gach{ width:34%; height:3px; border-radius:3px; margin-top:12px; }
.cp2-nhan{ font-family:'Palatino Linotype', Palatino, serif !important; font-size:clamp(15px, 1.6vw, 24px); font-weight:800; }
.cp2-de{ font-family:'Palatino Linotype', Palatino, serif !important; font-size:clamp(13px, 1.3vw, 19px); line-height:1.55; overflow:hidden; }
.cp2-nho{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.cp2-nho-o{ display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:none; padding:0; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.cp2-nho-slide{ width:100%; aspect-ratio:16 / 9; border-radius:8px; padding:9% 8%; display:flex; flex-direction:column; gap:7%; overflow:hidden; text-align:left; }
.cp2-nho-slide.tieu-de{ align-items:center; justify-content:center; text-align:center; }
.cp2-nho-slide b{ font-size:11px; font-weight:800; line-height:1.2; }
.cp2-nho-slide i{ display:block; height:4px; border-radius:2px; width:90%; } .cp2-nho-slide i:last-child{ width:60%; }
.cp2-kq{ padding:12px 14px; border-radius:12px; }
.cp2-kq + .cp2-kq{ margin-top:10px; }
.cp2-kq-dau{ flex-wrap:wrap; }
.cp2-kq-nut{ display:flex; gap:6px; flex-wrap:wrap; flex-basis:100%; padding-left:40px; }
.cp2-kq details summary{ cursor:pointer; }
@media (max-width:1799.98px){ .cp2-o4{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:1199.98px){ .cp2-luoi{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:767.98px){
  .cp2-o4{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .cp2-dai-ic{ font-size:30px; }
  .cp2-kq-dau{ flex-wrap:wrap; }
  .cp2-kq-nut{ width:100%; justify-content:flex-start; }
}
html.gd-sieu-anh-hung .dt2-dau > i{ color:#c8102e; } html.gd-sieu-anh-hung .dt2-dau > b{ color:#8e0a17; }
html.gd-sieu-anh-hung .cp2-dai{ background:linear-gradient(100deg, #fff6df, #fffdf8 70%) !important; border-color:#f1dfb5 !important; }
html.gd-sieu-anh-hung .cp2-mui{ color:#e5a019; }
html.gd-sieu-anh-hung .cp2-dai-chu b{ color:#8e0a17; } html.gd-sieu-anh-hung .cp2-dai-chu small{ color:#5b4a41; }
html.gd-sieu-anh-hung .cp2-file{ background:#fff; border:1px solid rgba(125,35,20,.14); }
html.gd-sieu-anh-hung .cp2-file-ten b{ color:#1b120c; } html.gd-sieu-anh-hung .cp2-file-ten small{ color:#7a6a60; }
html.gd-sieu-anh-hung .cp2-bo{ color:#5b4a41; } html.gd-sieu-anh-hung .cp2-bo:hover{ background:#fff0ef; color:#c8102e; }
html.gd-sieu-anh-hung .cp2-goi-y{ color:#8a7b70; }
html.gd-sieu-anh-hung .cp2-cong-tac{ color:#2a1810; }
html.gd-sieu-anh-hung #appShell#appShell #pane-chuyenppt .cp2-cong-tac .form-check-input{ background-color:#d9d0c8 !important; border-color:#d9d0c8 !important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important; }
html.gd-sieu-anh-hung #appShell#appShell #pane-chuyenppt .cp2-cong-tac .form-check-input:checked{ background-color:#c8102e !important; border-color:#c8102e !important; }
html.gd-sieu-anh-hung .cp2-slide, html.gd-sieu-anh-hung .cp2-nho-slide{ background:radial-gradient(120% 140% at 85% 110%, #2a0508 0%, #050505 55%, #000 100%); color:#fff; box-shadow:0 14px 26px -18px rgba(0,0,0,.9); }
html.gd-sieu-anh-hung .cp2-ten{ color:#f7c544; text-shadow:0 2px 8px rgba(0,0,0,.6); }
html.gd-sieu-anh-hung .cp2-gach{ background:linear-gradient(90deg, #c8102e, #f7c544); }
html.gd-sieu-anh-hung .cp2-nhan{ color:#f7c544; }
html.gd-sieu-anh-hung .cp2-de{ color:#fff; }
html.gd-sieu-anh-hung .cp2-nho-o{ color:#5b4a41; }
html.gd-sieu-anh-hung .cp2-nho-o.on .cp2-nho-slide{ box-shadow:0 0 0 3px #f2c14e; }
html.gd-sieu-anh-hung .cp2-nho-o.on{ color:#8e0a17; }
html.gd-sieu-anh-hung .cp2-nho-slide b{ color:#f7c544; }
html.gd-sieu-anh-hung .cp2-nho-slide i{ background:rgba(255,255,255,.55); }
html.gd-sieu-anh-hung .cp2-kq{ background:#fffdf8; border:1px solid rgba(125,35,20,.12); }

/* ═════════════════════════ CHẤM TRẮC NGHIỆM (danh sách) ═════════════════════════ */
#pane-chamtn{ position:relative; }
.ctn2-dai{ display:flex; align-items:center; gap:16px; padding:14px 20px; border-radius:16px; margin-bottom:14px; flex-wrap:wrap; }
.ctn2-dai-ic{ width:58px; height:58px; flex:none; border-radius:14px; display:grid; place-items:center; font-size:28px; }
.ctn2-dai-chu{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:240px; }
.ctn2-dai-chu b{ font-size:21px; font-weight:900; }
.ctn2-dai-chu small{ font-size:15px; }
.ctn2-buoc-hang{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ctn2-buoc{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700; }
.ctn2-buoc b{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:16px; font-weight:900; }
.ctn2-loc{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.ctn2-tim{ flex:0 1 380px; min-width:220px; }
#appShell#appShell #pane-chamtn .ctn2-loc :is(.form-control, .form-select){ min-height:44px; }
.ctn2-lop-hang{ display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.ctn2-lop-loc{ padding:8px 16px; border-radius:12px; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; transition:transform .2s; }
.ctn2-lop-loc:hover{ transform:translateY(-1px); }
.ctn2-tt-loc{ width:auto !important; min-width:200px; margin-left:auto; }
.ctn2-luoi{ display:grid; grid-template-columns:minmax(0, 1.75fr) minmax(330px, 1fr); gap:16px; align-items:start; }
.ctn2-ds{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.ctn2-ngay{ display:flex; align-items:baseline; gap:10px; margin:0 0 10px; font-size:19px; font-weight:800; }
.ctn2-ngay i{ font-size:17px; }
.ctn2-ngay small{ font-size:13.5px; font-weight:500; }
.ctn2-luoi-the{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; }
.ctn2-the{ display:flex; flex-direction:column; gap:9px; padding:14px 16px; border-radius:16px; cursor:pointer; text-align:left; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .2s; }
.ctn2-the:hover{ transform:translateY(-2px); }
.ctn2-the-dau{ display:flex; align-items:flex-start; gap:10px; }
.ctn2-the-dau b{ flex:1; min-width:0; font-size:16.5px; font-weight:900; text-transform:uppercase; line-height:1.3; }
/* ô tích chọn nhiều bài để xoá (chỉ người có quyền xoá) */
.ctn2-tick{ display:inline-flex; align-items:center; flex:0 0 auto; padding:2px 0 0; cursor:pointer; }
.ctn2-tick input, .ctn2-tick-het input{ width:19px; height:19px; margin:0; accent-color:#c8102e; cursor:pointer; }
.ctn2-xoa-hang{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:-2px 0 12px; min-height:34px; font-size:14px; font-weight:700; }
.ctn2-xoa-hang:empty{ display:none; }
.ctn2-tick-het{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.ctn2-xoa-nhieu{ color:#b00020 !important; border-color:#e3a3ab !important; }
/* Cây thư mục bài kiểm tra (12/10/2026): Mini test · Bigtest · Ôn tập giữa kì · Ôn tập học kì · Chưa xếp */
.ctn2-chuyen{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; padding:4px 10px; border-radius:12px; background:#fff6dc; border:1.5px solid #e0a800; }
.ctn2-chuyen .form-select{ width:auto; min-width:180px; min-height:34px; padding-top:2px; padding-bottom:2px; font-size:14px; }
.ctn2-tm{ border:2px solid #e6d9bd; border-radius:16px; background:#fffdf7; overflow:hidden; transition:border-color .2s, box-shadow .25s; }
.ctn2-tm.mo{ border-color:#c8102e; box-shadow:0 3px 0 rgba(200,16,46,.14); }
.ctn2-tm.rong{ opacity:.6; }
.ctn2-tm-dau{ display:flex; align-items:center; gap:10px; padding:0 14px 0 12px; }
.ctn2-tm-nut{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:13px 2px; border:0; background:transparent; font:inherit; font-size:17px; font-weight:800; text-align:left; cursor:pointer; color:inherit; }
.ctn2-tm-nut:disabled{ cursor:default; }
.ctn2-tm-mui{ font-size:13px; transition:transform .2s; }
.ctn2-tm.mo .ctn2-tm-mui{ transform:rotate(90deg); }
.ctn2-tm-ic{ font-size:20px; color:#d99a00; }
.ctn2-tm.mo .ctn2-tm-ic{ color:#c8102e; }
.ctn2-tm-ten{ flex:1 1 auto; min-width:0; }
.ctn2-tm-ten i{ margin-right:4px; font-size:15px; color:#8a6d1a; }
.ctn2-tm-so{ padding:2px 12px; border-radius:999px; background:#f1e6c8; font-size:13px; font-weight:800; white-space:nowrap; }
.ctn2-tm-than{ padding:4px 14px 16px; display:flex; flex-direction:column; gap:14px; border-top:1px dashed #e0cfa4; }
@media (max-width:575.98px){ .ctn2-tm-nut{ flex-wrap:wrap; font-size:16px; } .ctn2-chuyen .form-select{ min-width:0; flex:1 1 150px; } }
.ctn2-lop{ display:flex; gap:6px; flex-wrap:wrap; }
.ctn2-lop-o{ display:inline-flex; padding:3px 12px; border-radius:999px; font-size:12.5px; font-weight:800; }
.ctn2-cau-truc{ font-size:13px; line-height:1.45; }
.ctn2-the-chan{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:4px; }
.ctn2-nut{ display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.ctn2-ba{ padding:6px 10px !important; }
.ctn2-ct{ position:sticky; top:12px; }
.ctn2-ct .tg2-than{ gap:12px; }
.ctn2-ct-ten{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; }
.ctn2-ct-ten > i{ font-size:20px; }
.ctn2-ct-ten b{ flex:1; font-size:15.5px; font-weight:900; text-transform:uppercase; min-width:0; }
.ctn2-ct-giua{ display:grid; grid-template-columns:minmax(0, 1fr) 130px; gap:14px; align-items:start; }
.ctn2-tt{ display:flex; flex-direction:column; }
.ctn2-tt-dong{ display:grid; grid-template-columns:20px minmax(0, 1fr) auto; gap:8px; align-items:center; padding:6px 0; font-size:13.5px; }
.ctn2-tt-dong b{ font-weight:700; text-align:right; }
.ctn2-phieu{ border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:6px; }
.ctn2-phieu-dau{ display:flex; align-items:center; gap:4px; }
.ctn2-phieu-dau b{ flex:1; font-size:6.5px; font-weight:900; line-height:1.2; }
.ctn2-phieu-dau i{ font-size:22px; }
.ctn2-phieu-bong{ display:grid; grid-template-columns:repeat(4, 1fr); gap:4px 6px; }
.ctn2-phieu-bong i{ height:7px; border-radius:50%; aspect-ratio:1; justify-self:center; }
.ctn2-nhan{ font-size:16px; font-weight:800; padding-top:4px; }
.ctn2-nguon{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ctn2-nguon-o{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; font:inherit; text-align:left; cursor:pointer; transition:transform .2s; }
.ctn2-nguon-o:hover:not(:disabled){ transform:translateY(-1px); }
.ctn2-nguon-o:disabled{ opacity:.5; cursor:not-allowed; }
.ctn2-nguon-o > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.ctn2-nguon-o b{ font-size:14px; font-weight:800; } .ctn2-nguon-o small{ font-size:12px; }
.ctn2-nguon-ic{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:17px; }
.ctn2-ct-nut{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ctn2-ct-nut .tg2-nut{ padding:0 12px; font-size:15px; }
@keyframes ctn2Nhay{ 0%,100%{ box-shadow:none; } 30%{ box-shadow:0 0 0 4px rgba(242,193,78,.85); } }
.ctn2-nhay{ animation:ctn2Nhay 1.5s ease 1; }
@media (max-width:1199.98px){ .ctn2-luoi{ grid-template-columns:minmax(0, 1fr); } .ctn2-ct{ position:static; } }
@media (max-width:767.98px){

  .ctn2-tim{ flex:1 1 100%; } .ctn2-tt-loc{ margin-left:0; width:100% !important; }
  .ctn2-luoi-the{ grid-template-columns:minmax(0, 1fr); }
  .ctn2-ct-giua{ grid-template-columns:minmax(0, 1fr); } .ctn2-phieu{ display:none; }
  .ctn2-nguon, .ctn2-ct-nut{ grid-template-columns:minmax(0, 1fr); }
}
html.gd-sieu-anh-hung .ctn2-dai{ background:linear-gradient(100deg, #fff6df, #fffdf8 70%); border:1px solid #f1dfb5; }
html.gd-sieu-anh-hung .ctn2-dai-ic{ background:#fff; color:#3b2a20; border:1.5px solid #e9c77a; box-shadow:inset 0 0 0 4px #fff3d6; }
html.gd-sieu-anh-hung .ctn2-dai-chu b{ color:#8e0a17; } html.gd-sieu-anh-hung .ctn2-dai-chu small{ color:#5b4a41; }
html.gd-sieu-anh-hung .ctn2-buoc{ color:#2a1810; } html.gd-sieu-anh-hung .ctn2-buoc-hang > i{ color:#5b4a41; }
html.gd-sieu-anh-hung .ctn2-buoc b{ background:radial-gradient(circle at 35% 30%, #ffe58a, #f0b429 55%, #b97700); color:#fff; box-shadow:0 0 0 2px #fff, 0 0 0 3px #e9b84c; }
html.gd-sieu-anh-hung .ctn2-lop-loc{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; }
html.gd-sieu-anh-hung .ctn2-lop-loc.on{ background:linear-gradient(180deg, #b3101f, #8e0a17); border-color:#8e0a17; color:#fff; box-shadow:0 8px 14px -10px rgba(140,10,20,.9); }
html.gd-sieu-anh-hung .ctn2-ngay{ color:#8e0a17; } html.gd-sieu-anh-hung .ctn2-ngay small{ color:#7a6a60; }
html.gd-sieu-anh-hung .ctn2-the{ background:#fff; border:1.5px solid rgba(125,35,20,.12); box-shadow:0 10px 22px -20px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .ctn2-the:hover{ border-color:#ecc671; }
html.gd-sieu-anh-hung .ctn2-the.on{ border-color:#e9a923; box-shadow:0 0 0 2px rgba(240,180,40,.3), 0 12px 24px -16px rgba(150,90,0,.7); }
html.gd-sieu-anh-hung .ctn2-the:focus-visible{ outline:2px solid #d81a32; outline-offset:2px; }
html.gd-sieu-anh-hung .ctn2-the-dau b{ color:#8e0a17; }
html.gd-sieu-anh-hung .ctn2-lop-o{ background:#e6f0ff; color:#1d4fa8; }
html.gd-sieu-anh-hung .ctn2-cau-truc{ color:#5b4a41; }
html.gd-sieu-anh-hung .tg2-chip.kem{ background:#fff8ea; color:#5b3d10; border:1px solid #efd9a8; }
html.gd-sieu-anh-hung .ctn2-cham{ color:#c8102e !important; } html.gd-sieu-anh-hung .ctn2-cham i{ color:#c8102e; }
html.gd-sieu-anh-hung .ctn2-ct-ten{ background:#fff8ea; border:1px solid #f1dfb5; }
html.gd-sieu-anh-hung .ctn2-ct-ten > i{ color:#e5a019; } html.gd-sieu-anh-hung .ctn2-ct-ten b{ color:#8e0a17; }
html.gd-sieu-anh-hung .ctn2-tt-dong{ border-bottom:1px solid #f1e8de; color:#5b4a41; }
html.gd-sieu-anh-hung .ctn2-tt-dong i{ color:#8a7b70; } html.gd-sieu-anh-hung .ctn2-tt-dong b{ color:#1b120c; }
html.gd-sieu-anh-hung .ctn2-phieu{ background:#fff; border:1px solid #e3dbd3; box-shadow:0 8px 16px -12px rgba(0,0,0,.4); }
html.gd-sieu-anh-hung .ctn2-phieu-dau{ color:#1b120c; }
html.gd-sieu-anh-hung .ctn2-phieu-bong i{ border:1px solid #9aa0a6; }
html.gd-sieu-anh-hung .ctn2-nhan{ color:#8e0a17; }
html.gd-sieu-anh-hung .ctn2-nguon-o{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; }
html.gd-sieu-anh-hung .ctn2-nguon-o:hover:not(:disabled){ border-color:#e9b84c; }
html.gd-sieu-anh-hung .ctn2-nguon-o small{ color:#7a6a60; }
html.gd-sieu-anh-hung .ctn2-nguon-ic.do{ background:#ffe9ea; color:#c8102e; }
.ctn2-tt-dong > span{ white-space:nowrap; }
.ctn2-ct-giua{ grid-template-columns:minmax(0, 1fr) 112px; }

/* ═════════════════════════ MA TRẬN ĐỀ ═════════════════════════ */
/* Giữ lưới dòng cũ (css/ma-tran-de.css .mt-luoi + container query) — chỉ đổi kiểu truyện tranh viền mực sang kiểu mềm của khung nhân viên */
#pane-matran .mt{ font-size:14px; color:#21160f; }
.mt2-dau{ display:grid !important; grid-template-columns:minmax(0, 1.2fr) auto minmax(0, 1fr) auto; gap:14px; align-items:end; padding:14px 16px; margin-bottom:14px; overflow:visible !important; }
#appShell#appShell #pane-matran .mt2-dau :is(.form-control, .form-select){ min-height:44px; font-weight:700 !important; }
.mt2-che-do-hang{ display:flex; gap:8px; }
.mt2-che-do{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 18px; border-radius:12px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap; }
.mt2-che-do:disabled{ opacity:.5; cursor:not-allowed; }
.mt2-tron{ width:18px; height:18px; border-radius:50%; flex:none; }
.mt2-xem{ min-height:46px; }
.mt2-the{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.mt2-the .nvs-the{ padding:12px 16px; } .mt2-the .nvs-the-huy{ width:52px; height:52px; font-size:22px; }
.mt2-the .nvs-the-chu b{ font-size:30px; }
#pane-matran .mt-bao{ margin:0 0 14px; border-radius:12px; border-width:1px; box-shadow:none; }
.mt2-luoi{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(280px, 330px); gap:16px; align-items:start; }
.mt2-trai{ padding:0 !important; display:flex; flex-direction:column; gap:14px; min-width:0; }
.mt2-phai{ display:flex; flex-direction:column; gap:14px; position:sticky; top:12px; }
.mt2-phan{ overflow:visible !important; }
.mt2-phan-dau{ display:flex; align-items:center; gap:10px; padding:12px 14px; flex-wrap:wrap; }
.mt2-so{ width:24px; height:24px; flex:none; border-radius:7px; display:grid; place-items:center; font-size:12.5px; font-weight:900; }
.mt2-so.lon{ width:34px; height:34px; border-radius:9px; font-size:17px; }
.mt2-ten{ font-size:18px; font-weight:800; }
#appShell#appShell #pane-matran .mt2-ten-phan{ width:200px; min-height:38px; font-weight:800 !important; }
#appShell#appShell #pane-matran .mt2-loai-phan{ width:auto; min-height:38px; }
.mt2-so-cau{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; }
#appShell#appShell #pane-matran .mt2-so-cau .form-control{ width:64px; min-height:36px; text-align:center; padding:4px; }
.mt2-phan-nut{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.mt2-bang{ padding:0 12px 12px; }
#pane-matran .mt-cot{ margin-bottom:4px; gap:0 !important; border-radius:10px; overflow:hidden; }
#pane-matran .mt-cot > div{ border:0; border-radius:0; box-shadow:none; font-family:'Be Vietnam Pro', system-ui, sans-serif !important; letter-spacing:0; font-size:13px; font-weight:800; padding:9px 6px; text-align:left; }
#pane-matran .mt-cot > div:first-child{ text-align:center; }
#pane-matran .mt-dong{ margin:0; padding:6px 0; }
#pane-matran .mt-dong > *{ min-height:36px; }
#pane-matran .mt-stt{ border:0; font-size:14px; font-weight:700; }
#pane-matran .mt .mt-o-nhanh{ border-radius:10px; font-size:13.5px; padding:4px 10px; }
#pane-matran .mt-kieu{ border:0; border-radius:999px; font-size:12px; font-weight:800; align-self:center; min-height:28px; padding:2px 10px; }
#pane-matran .mt .mt-chon{ appearance:none !important; -webkit-appearance:none; border-radius:999px; font-size:12.5px; font-weight:800; text-align:center; min-height:30px; align-self:center; padding:0 10px; }
#pane-matran .mt .mt-o-cau{ border-radius:10px; font-size:13.5px; padding:4px 10px; }
#pane-matran .mt .mt-o-cau .ma{ border-radius:6px; font-size:11px; }
#pane-matran .mt .mt-nut-dong{ border-radius:9px; box-shadow:none; width:34px; height:34px; align-self:center; justify-self:center; }
.mt2-xem-them{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0 12px 12px; padding:9px; border-radius:10px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; width:calc(100% - 24px); }
.mt2-phan.gap .mt2-phan-dau{ padding:10px 14px; }
.mt2-sl-chan{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 12px 12px; }
#pane-matran .mt .mt-nut{ border-width:1px; border-radius:10px; box-shadow:none; text-transform:none; font-size:12.5px; letter-spacing:0; }
#pane-matran .mt .mt-o-nhap{ border-width:1px; border-radius:8px; }
.mt2-ct{ gap:12px; }
.mt2-thanh{ display:flex; height:22px; border-radius:7px; overflow:hidden; gap:2px; }
.mt2-thanh span{ min-width:6px; }
.mt2-chu-giai, .mt2-ds-phan{ display:flex; flex-direction:column; gap:2px; }
.mt2-chu-giai > div, .mt2-ds-phan > div{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; gap:10px; align-items:center; padding:5px 0; font-size:14px; }
.mt2-ds-phan > div{ grid-template-columns:auto minmax(0, 1fr) auto; }
.mt2-chu-giai b, .mt2-ds-phan b{ font-weight:700; white-space:nowrap; }
.mt2-chu-giai small{ min-width:36px; text-align:right; font-size:13px; font-weight:600; }
.mt2-cham{ width:13px; height:13px; border-radius:50%; }
.mt2-du{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:12px; }
.mt2-du > i{ font-size:26px; }
.mt2-du > span{ display:flex; flex-direction:column; gap:2px; }
.mt2-du b{ font-size:15px; font-weight:800; } .mt2-du small{ font-size:12.5px; }
.mt2-kho{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px !important; }
.mt2-kho-nut{ display:flex; align-items:center; gap:10px; padding:10px 12px; min-height:52px; border-radius:12px; font:inherit; font-size:13.5px; font-weight:700; text-align:left; cursor:pointer; line-height:1.25; transition:transform .2s; }
.mt2-kho-nut:hover{ transform:translateY(-1px); }
.mt2-kho-nut i{ font-size:17px; flex:none; }
.mt2-chan{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:14px; }
.mt2-chan-phai{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
.mt2-tranh{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; cursor:pointer; user-select:none; }
.mt2-tranh input{ width:18px; height:18px; margin:0; accent-color:#c8102e; cursor:pointer; }
@media (max-width:1399.98px){ .mt2-dau{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .mt2-xem{ justify-self:start; } }
@media (max-width:1199.98px){ .mt2-luoi{ grid-template-columns:minmax(0, 1fr); } .mt2-phai{ position:static; } .mt2-the{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:767.98px){
  .mt2-dau{ grid-template-columns:minmax(0, 1fr); } .mt2-xem{ width:100%; }
  .mt2-che-do{ flex:1; justify-content:center; padding:0 10px; }
  .mt2-phan-nut{ margin-left:0; width:100%; }
  .mt2-chan-phai{ margin-left:0; }
  .mt2-chan .tg2-nut{ flex:1 1 auto; }
}
/* màu */
html.gd-sieu-anh-hung .mt2-che-do{ background:#fff; border:1px solid rgba(125,35,20,.2); color:#2a1810; }
html.gd-sieu-anh-hung .mt2-tron{ border:2px solid #b9aca2; background:#fff; }
html.gd-sieu-anh-hung .mt2-che-do.on{ background:linear-gradient(180deg, #b3101f, #8e0a17); border-color:#8e0a17; color:#fff; box-shadow:0 8px 14px -10px rgba(140,10,20,.9); }
html.gd-sieu-anh-hung .mt2-che-do.on .mt2-tron{ border-color:#fff; background:radial-gradient(circle, #fff 0 35%, transparent 40%); }
html.gd-sieu-anh-hung .mt2-so{ background:linear-gradient(#ffd25a, #e9a923); color:#2a1606; }
html.gd-sieu-anh-hung .mt2-ten{ color:#8e0a17; }
html.gd-sieu-anh-hung .mt2-so-cau{ color:#3b2a20; }
html.gd-sieu-anh-hung .mt2-xoa i{ color:#c8102e; }
html.gd-sieu-anh-hung #pane-matran .mt-cot > div{ background:#f6f1ea; color:#3b2a20; }
html.gd-sieu-anh-hung #pane-matran .mt-dong{ border-bottom:1px solid #f1e8de; }
html.gd-sieu-anh-hung #pane-matran .mt-stt{ background:transparent; color:#2a1810; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-o-nhanh{ background:#fff; border:1px solid rgba(125,35,20,.14); color:#21160f; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-o-nhanh:hover{ background:#fffaf2; border-color:#e9b84c; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-o-nhanh > i{ color:#c8102e; }
html.gd-sieu-anh-hung #pane-matran .mt-kieu{ background:#fff1cc; color:#8a5300; }
html.gd-sieu-anh-hung #pane-matran .mt-kieu.dung_sai{ background:#ffe9ea; color:#c8102e; }
html.gd-sieu-anh-hung #pane-matran .mt-kieu.dien_so{ background:#e6f7ec; color:#1e7a46; }
html.gd-sieu-anh-hung #pane-matran .mt-kieu.tu_luan{ background:#f1ebff; color:#5b2da0; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-chon{ background:#f3efeb; color:#6f625a; border:1px solid #e3dbd3; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-chon.m1{ background:#e6f7ec; color:#1e7a46; border-color:#bfe6cd; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-chon.m2{ background:#e6f0ff; color:#1d4fa8; border-color:#c8dbf6; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-chon.m3{ background:#f1ebff; color:#5b2da0; border-color:#dccff6; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-chon.m4{ background:#ffe9ea; color:#a3122a; border-color:#f6c9cd; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-chon.trang{ background:#fff; color:#21160f; border-color:rgba(125,35,20,.2); }
html.gd-sieu-anh-hung #pane-matran .mt .mt-o-cau{ background:#fff; border:1px dashed rgba(125,35,20,.25); color:#21160f; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-o-cau.co{ border:1px solid rgba(125,35,20,.14); }
html.gd-sieu-anh-hung #pane-matran .mt .mt-o-cau.trong{ color:#a3958c; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-o-cau .ma{ background:#2a1d17; color:#ffe9a3; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-nut-dong{ background:#fff; border:1px solid rgba(125,35,20,.2); color:#3b2a20; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-nut-dong:hover{ border-color:#e9b84c; color:#b3101f; background:#fffaf2; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-nut-dong.o-xoa{ color:#c8102e; }
html.gd-sieu-anh-hung .mt2-xem-them{ background:#fffaf0; border:1.5px dashed #e6b866; color:#8a4f00; }
html.gd-sieu-anh-hung .mt2-xem-them:hover{ background:#fff3d6; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-nut{ background:#fff; border-color:rgba(125,35,20,.2); color:#2a1810; }
html.gd-sieu-anh-hung #pane-matran .mt .mt-nut.vang{ background:linear-gradient(#ffe48a, #f6c33f); border-color:#c98a12; }
html.gd-sieu-anh-hung #pane-matran .mt-bao{ border-color:rgba(125,35,20,.18); }
html.gd-sieu-anh-hung .mt2-thanh{ background:#f1ebe4; }
html.gd-sieu-anh-hung .mt2-thanh .xanh, html.gd-sieu-anh-hung .mt2-cham.xanh{ background:#2fb36b; }
html.gd-sieu-anh-hung .mt2-thanh .vang, html.gd-sieu-anh-hung .mt2-cham.vang{ background:#f6b52a; }
html.gd-sieu-anh-hung .mt2-thanh .tim, html.gd-sieu-anh-hung .mt2-cham.tim{ background:#8a55e6; }
html.gd-sieu-anh-hung .mt2-thanh .do, html.gd-sieu-anh-hung .mt2-cham.do{ background:#d81a32; }
html.gd-sieu-anh-hung .mt2-thanh .xam, html.gd-sieu-anh-hung .mt2-cham.xam{ background:#b9aca2; }
html.gd-sieu-anh-hung .mt2-chu-giai > div{ color:#3b2a20; } html.gd-sieu-anh-hung .mt2-chu-giai small{ color:#7a6a60; }
html.gd-sieu-anh-hung .mt2-ds-phan{ border-top:1px solid #f1e8de; padding-top:8px; }
html.gd-sieu-anh-hung .mt2-ds-phan > div{ color:#3b2a20; }
html.gd-sieu-anh-hung .mt2-du{ background:#fff8e6; border:1px solid #f3dfae; }
html.gd-sieu-anh-hung .mt2-du > i{ color:#e39b16; } html.gd-sieu-anh-hung .mt2-du b{ color:#8a4f00; } html.gd-sieu-anh-hung .mt2-du small{ color:#7a6a60; }
html.gd-sieu-anh-hung .mt2-du.thieu{ background:#f7f5f3; border-color:#e3dbd3; } html.gd-sieu-anh-hung .mt2-du.thieu > i, html.gd-sieu-anh-hung .mt2-du.thieu b{ color:#5b4a41; }
html.gd-sieu-anh-hung .mt2-kho-nut{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; }
html.gd-sieu-anh-hung .mt2-kho-nut:hover{ border-color:#e9b84c; }
html.gd-sieu-anh-hung .mt2-kho-nut i{ color:#c8102e; }
html.gd-sieu-anh-hung .mt2-chan{ border-top:1px solid #f1e8de; }
html.gd-sieu-anh-hung .mt2-random{ color:#c8102e !important; } html.gd-sieu-anh-hung .mt2-random i{ color:#c8102e !important; }
/* hộp thoại Ma trận đề: kiểu mềm như các hộp khác */
.mt-modal .modal-content{ border:0 !important; border-radius:20px !important; box-shadow:0 30px 70px -24px rgba(60,10,5,.6) !important; background:#fffdf9 !important; overflow:hidden; }
.mt-modal .modal-header{ background:linear-gradient(100deg, #8d0b19, #c8102e 60%, #d81a32) !important; border:0 !important; box-shadow:inset 0 -3px 0 #f7c544; }
.mt-modal .modal-title{ font-family:'Be Vietnam Pro', system-ui, sans-serif !important; font-weight:800 !important; letter-spacing:0 !important; font-size:1.15rem !important; text-shadow:none !important; }
.mt-modal :is(.mt-the-cau, .mt-kho-dong){ border:1px solid rgba(125,35,20,.14) !important; border-radius:12px !important; box-shadow:0 8px 18px -16px rgba(90,25,10,.7) !important; }
.mt-modal .mt-the-cau.dang-chon{ border-color:#e9a923 !important; }
.mt-modal .mt-o-tim{ border:1px solid rgba(125,35,20,.22) !important; border-radius:12px !important; }
.mt-modal .mt-nhom-cau{ font-family:'Be Vietnam Pro', system-ui, sans-serif !important; font-weight:800; letter-spacing:0; color:#8e0a17; }
.mt-modal .mt-nut{ border-width:1px !important; border-radius:10px !important; box-shadow:none !important; text-transform:none !important; letter-spacing:0 !important; }
.mt-modal .mt-cay-nut .ch-dem{ background:#3a2a22 !important; color:#fff !important; }
@container (min-width: 880px){
  #pane-matran .mt-luoi.mt2-hang{ grid-template-columns:40px minmax(150px,1.4fr) 112px 118px minmax(160px,1.7fr) 72px; }
  #pane-matran .mt-luoi.mt2-hang.co-sua{ grid-template-columns:40px minmax(150px,1.4fr) 112px 118px minmax(160px,1.7fr) 40px 40px 40px; }
}
#pane-matran .mt-cot > .mt2-cot-tt{ text-align:center; }
/* Ma trận vẽ lại cả khung sau mỗi thao tác → tắt hiệu ứng hiện dần cho khỏi nháy */
#pane-matran :is(.tg2-hop, .nvs-the){ animation:none !important; }
#pane-matran .mt-cot > .mt2-cot-tt{ white-space:nowrap; padding-left:2px; padding-right:2px; }
/* KaTeX có phần MathML đặt absolute — ô câu phải là khung chứa để phần đó bị cắt gọn, không làm trang tràn ngang */
#pane-matran .mt .mt-o-cau, #pane-matran .mt .mt-o-cau .noi{ position:relative; }
@media (max-width:767.98px){ .ctn2-dai-ic{ width:46px; height:46px; font-size:22px; } .ctn2-dai-chu b{ font-size:18px; } }

/* ── Thông báo "câu đã dùng ở ma trận khác" (11/10/2026): gọn, gom theo ma trận, mỗi câu 1 ô nhỏ bấm để nhảy tới dòng ── */
#pane-matran .mt-bao.canh:has(.mt-trung){ background:linear-gradient(180deg,#fffaf0,#fff3d0); border-color:#e9b84c; padding:10px 14px; }
.mt-trung{ display:grid; gap:6px; font-weight:500; }
.mt-trung-dau{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-weight:800; font-size:13.5px; color:#3b2a20; }
.mt-trung-dau > i{ color:#c8102e; font-size:15px; }
.mt-trung-dau .so{ display:inline-block; min-width:26px; text-align:center; padding:0 8px; border-radius:999px; background:#c8102e; color:#fff; font-weight:800; }
.mt-trung-nut{ margin-left:auto; display:inline-flex; gap:6px; }
.mt-trung-luoi{ display:grid; }
.mt-trung-nhom{ display:flex; align-items:flex-start; gap:10px; padding:5px 0; border-top:1px dashed rgba(125,35,20,.28); }
.mt-trung-ten{ flex:0 0 168px; max-width:168px; font-size:12.5px; font-weight:800; color:#2a1810; line-height:1.25; padding-top:3px; overflow:hidden; text-overflow:ellipsis; }
.mt-trung-ten em{ display:block; font-style:normal; font-weight:600; font-size:11.5px; color:#b3101f; }
.mt-trung-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.mt-trung-chip{ display:inline-flex; align-items:baseline; gap:5px; padding:2px 8px; border-radius:8px; background:#fff; border:1px solid rgba(125,35,20,.28); color:#8a0d1c; font-size:12px; font-weight:800; text-decoration:none; transition:background .15s,border-color .15s,transform .15s; }
.mt-trung-chip small{ font-size:11px; font-weight:600; color:#7a6a5a; }
.mt-trung-chip:hover{ background:#ffe9a8; border-color:#c98a12; transform:translateY(-1px); color:#8a0d1c; }
.mt-trung-ghi{ font-size:11.5px; font-weight:500; color:#6a5442; }
@media (max-width:720px){ .mt-trung-nhom{ flex-direction:column; gap:3px; } .mt-trung-ten{ flex-basis:auto; max-width:none; padding-top:0; } .mt-trung-ten em{ display:inline; margin-left:6px; } }

/* ── Kho ma trận có thư mục (11/10/2026): đường dẫn + tìm + thư mục mới, hàng thư mục, thanh chuyển thư mục ── */
.mt-kho-thanh{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.mt-kho-duong{ flex:1 1 220px; min-width:0; font-size:13.5px; font-weight:700; color:#3b2a20; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mt-kho-duong i{ color:#c8102e; }
.mt-kho-duong a{ color:#8a0d1c; text-decoration:none; font-weight:700; }
.mt-kho-duong a:hover{ text-decoration:underline; }
.mt-kho-thanh .mt-o-tim{ flex:0 1 210px; min-width:130px; }
.mt-modal .mt-kho-thumuc{ display:flex; gap:10px; align-items:center; padding:9px 12px; margin-bottom:8px; border-radius:12px; cursor:pointer; background:linear-gradient(180deg,#fffaf0,#fff1c9); border:1px solid #e9b84c; box-shadow:0 8px 18px -16px rgba(90,25,10,.7); transition:transform .15s,box-shadow .15s,border-color .15s; }
.mt-modal .mt-kho-thumuc:hover, .mt-modal .mt-kho-thumuc:focus-visible{ transform:translateY(-1px); border-color:#c98a12; box-shadow:0 10px 20px -14px rgba(90,25,10,.8); outline:none; }
.mt-modal .mt-kho-thumuc > i.fa-folder{ color:#d99a00; font-size:22px; }
.mt-modal .mt-kho-thumuc .ten{ flex:1; min-width:0; font-weight:800; color:#2a1810; }
.mt-modal .mt-kho-thumuc .ten small{ display:block; font-weight:600; color:#7a6a5a; font-size:12px; }
.mt-modal .mt-kho-thumuc .mt-kho-mui{ color:#b3101f; opacity:.7; }
.mt-modal .mt-kho-thumuc .mt-nut-dong{ width:30px; height:30px; }
.mt-kho-tick{ flex:0 0 auto; width:18px; height:18px; margin:0; accent-color:#c8102e; cursor:pointer; }
.mt-kho-het{ display:flex; align-items:center; gap:8px; margin:2px 2px 8px; font-size:12.5px; font-weight:700; color:#6a5442; cursor:pointer; }
.mt-kho-het input{ width:17px; height:17px; margin:0; accent-color:#c8102e; }
.mt-kho-chuyen{ position:sticky; top:-1px; z-index:2; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px; padding:8px 12px; border-radius:12px; background:#fff3d0; border:1px solid #e9b84c; font-size:13px; font-weight:700; color:#3b2a20; }
.mt-kho-chuyen .mt-o-tim{ flex:1 1 180px; min-width:140px; }

.mts-loc{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; margin-bottom:8px; }
.mts-loc i{ color:#c8102e; }
.mts-loc select{ max-width:280px; }


/* ── Chấm bài RỘNG HƠN (thầy 26/10/2026): bỏ trần 1100px của .tg.ctn — danh sách bài + khung chi tiết dùng hết chiều ngang màn hình ── */
#appShell #pane-chamtn #ctnKhung.tg.ctn{ max-width:none; }
@media (min-width:1200px){
  #pane-chamtn .ctn2-luoi{ grid-template-columns:minmax(0, 1fr) clamp(360px, 27vw, 460px); }
  #pane-chamtn .ctn2-luoi-the{ grid-template-columns:repeat(auto-fill, minmax(clamp(300px, 21vw, 380px), 1fr)); }
}

/* Quản lý thư mục tự tạo: bút đổi tên + thùng rác cạnh tên thư mục */
.ctn2-tm-qly{ display:inline-flex; gap:4px; flex:none; }
.ctn2-tm-ico{ width:32px; height:32px; border-radius:9px; border:1px solid #e3c98f; background:#fffaf0; color:#8e0a17; cursor:pointer; display:inline-grid; place-items:center; font-size:13px; padding:0; }
.ctn2-tm-ico:hover{ background:#fff0c9; border-color:#c8102e; }
.ctn2-tm-ico:focus-visible{ outline:2px solid #c8102e; outline-offset:1px; }

/* Lớp ngoài / trường khác */
.ctb-ngoai{ display:flex; align-items:flex-start; gap:8px; margin:8px 0; padding:8px 12px; border-radius:10px; background:#eef6ff; border:1px solid #c5dcf5; font-size:13.5px; color:#1d3b5c; }
.ctb-ngoai > i{ margin-top:2px; }
.ctn-ng-dan{ margin:10px 0; }
.ctn-ng-dan summary{ cursor:pointer; font-weight:700; color:#8e0a17; }
.ctn-ng-dan textarea{ width:100%; margin:8px 0; font-family:inherit; }
.ctn-ng-xem{ margin-top:12px; padding:12px; border-radius:12px; background:#fffaf0; border:1px solid #f1dfb5; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.ctn-ng-cuon{ width:100%; max-height:340px; overflow:auto; border:1px solid #ecd9ad; border-radius:10px; background:#fff; }
.ctn-ng-bang{ width:100%; border-collapse:collapse; font-size:13.5px; }
.ctn-ng-bang th{ position:sticky; top:0; background:#fff3d0; text-align:left; padding:6px 10px; font-weight:800; color:#6d0a12; }
.ctn-ng-bang td{ padding:5px 10px; border-top:1px solid #f3e6c5; }
.ctn-ng-nut{ text-align:right; white-space:nowrap; }
.ctn-ng-nhom{ padding:10px 0; border-top:1px dashed #e6d3a3; display:flex; flex-direction:column; gap:8px; }
.ctn-ng-nhom:first-of-type{ border-top:0; }
.ctn-ng-them{ flex-wrap:wrap; }
.ctn-ng-them .tg-o:first-child{ flex:1 1 200px; }

/* Lớp ngoài trong thanh lọc lớp của Chấm trắc nghiệm (27/10/2026): chip + nút ✕ xoá nếu tạo sai, nút ＋ tạo mới */
.ctn2-lop-ng{ display:inline-flex; align-items:stretch; }
.ctn2-lop-ng .ctn2-lop-loc{ border-top-right-radius:0; border-bottom-right-radius:0; }
.ctn2-lop-x{ padding:0 10px; border:1px solid rgba(125,35,20,.16); border-left:0; border-radius:0 12px 12px 0; background:#fff; color:#8e0a17; font:inherit; font-size:13px; cursor:pointer; }
.ctn2-lop-x:hover{ background:#fde8e8; }

/* ===== Ngân hàng câu hỏi: nút icon Marvel + Cây mục lục Marvel (thầy 05/11/2026) ===== */
.ch2-cong-cu .sc-ic{ width:38px; height:38px; }
.ch2-cong-cu .sc-ic .sc-svg{ width:22px; height:22px; }
#appShell #pane-cauhoi .bcg-hanh-dong-chinh > button.sc-ic{ flex:none; }
.sc-ic:disabled{ filter:saturate(.4); }
.sc-ic-sl{ position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px; border:1.5px solid #fff; border-radius:999px; background:#2a1d17; color:#ffe9a3; font-size:10.5px; font-weight:900; line-height:16px; text-align:center; box-shadow:0 2px 5px #0004; pointer-events:none; }
.sc-ic-sl[hidden]{ display:none; }
.sc-ic.vang .sc-ic-sl{ background:#b10e25; color:#fff3c4; } .sc-ic.pri .sc-ic-sl{ background:#ffe9a3; color:#6d0714; border-color:#8f0b1a; }
.sc-ic.bat, .sc-ic.active{ --ic-k:#6d0714; --ic-a:#fff6d8; border-color:#e0a82a; background:linear-gradient(145deg,#ffe9a3,#f7c544); box-shadow:0 4px 10px #c9962e55, inset 0 1px 0 #fff; }
#chThuGonCayBtn.dong .sc-svg{ transform:scaleX(-1); }
html.gd-sieu-anh-hung .ch2-kieu-xem{ gap:6px; padding:0; background:none; }
html.gd-sieu-anh-hung .ch2-kieu-xem button.sc-ic{ width:34px; height:34px; border:1px solid #e6c9b6; border-radius:11px; background:linear-gradient(150deg,#fffaf2,#ffe9d8); color:var(--ic-k); }
html.gd-sieu-anh-hung .ch2-kieu-xem button.sc-ic:hover, html.gd-sieu-anh-hung .ch2-kieu-xem button.sc-ic.active{ border-color:#e0a82a; background:linear-gradient(145deg,#ffe9a3,#f7c544); color:var(--ic-k); }
.ch2-kieu-xem .sc-svg{ width:20px; height:20px; }

/* --- Cây mục lục --- */
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay{ border:1px solid #ecd2b8; border-radius:18px; overflow:hidden; padding-top:20px; background:radial-gradient(circle at 1px 1px,#d9a77a26 1px,transparent 1.6px) 0 0/10px 10px, linear-gradient(170deg,#fffaf2,#fff2e2); box-shadow:0 8px 22px #7d08141c; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay::before{ content:''; position:absolute; left:0; right:0; top:0; height:6px; background:repeating-linear-gradient(115deg,#b10e25 0 14px,#f7c544 14px 22px); }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay-dau{ padding-bottom:10px; border-bottom:3px solid transparent; border-image:linear-gradient(90deg,#b10e25,#f7c544 65%,transparent) 1; }
.ch-emblem{ flex:none; width:36px; height:36px; display:grid; place-items:center; filter:drop-shadow(0 3px 4px #7d081466); }
.ch-emblem .sc-svg{ width:36px; height:36px; overflow:visible; }
.ch-emblem .k{ fill:none; stroke:#7d0814; stroke-width:1.6; stroke-linejoin:round; } .ch-emblem .a{ fill:#d81a32; } .ch-emblem .f{ fill:#ffd75e; }
html.gd-sieu-anh-hung .ch2-cay-dau > b{ font-size:19px; font-weight:900; font-style:italic; letter-spacing:.05em; text-transform:uppercase; color:#8e0a17; text-shadow:2px 2px 0 #f7c54499; }
/* hàng nhãn khu (Toán 10 / 11 / 12, Cây thư mục) */
.ch2-cay .ch-nhan-khu{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:13px 0 5px; padding:4px 10px 4px 9px; border-left:4px solid #b10e25; border-radius:0 8px 8px 0; background:linear-gradient(90deg,#fff0c2,#fff8e6 80%,#fff8e600); }
.ch2-cay .ch-nhan-khu b{ font-size:12.5px; font-weight:900; font-style:italic; letter-spacing:.07em; text-transform:uppercase; color:#8e0a17; }
.ch2-cay .ch-nhan-khu em{ font-style:normal; font-size:11px; font-weight:600; color:#7a5a3a; }
/* mọi hàng */
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut{ border:1px solid transparent; border-radius:11px; transition:background .15s, transform .15s, box-shadow .15s; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut:hover{ background:#fff0d9; transform:translateX(2px); }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.dang-chon{ background:linear-gradient(95deg,#ffe9a3,#fff3cf 78%); border-color:#e9b93f; box-shadow:inset 4px 0 0 #b10e25, 0 3px 8px #c9962e33; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-dem{ padding:1px 8px; background:linear-gradient(#3b2a22,#241812); color:#ffd75e; box-shadow:0 1px 0 #fff8 inset; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.dang-chon .ch-dem{ background:linear-gradient(#d81a32,#8f0b1a); color:#fff3c4; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut .ch-caret{ color:#b10e25; font-size:11px; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-con{ margin-left:13px; padding-left:6px; border-left:2px dashed #e6c1a8; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-dang{ font-size:13px; }
/* hàng lọc nhanh có ô icon */
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-dac{ align-items:center; padding:5px 8px 5px 6px; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-dac .ch-caret{ display:none; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-dac .ch-dem{ margin-top:0; }
.ch-ic-dac{ flex:none; width:28px; height:28px; display:grid; place-items:center; border:1px solid #efd0bb; border-radius:9px; background:linear-gradient(145deg,#fff,#ffe9d8); color:#9c1024; box-shadow:0 1px 3px #7d08141a; }
.ch-ic-dac .sc-svg{ width:17px; height:17px; overflow:visible; }
.ch-ic-dac .k{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .ch-ic-dac .a{ fill:#f7c544; } .ch-ic-dac .f{ fill:currentColor; }
.ch-ic-dac.dg{ color:#c8102e; border-color:#f3b8bf; background:linear-gradient(145deg,#fff6f6,#ffdfe2); } .ch-ic-dac.dg .a{ fill:#ffc2c9; }
.ch-ic-dac.wn{ color:#a85b00; border-color:#f0cf8a; background:linear-gradient(145deg,#fffaf0,#ffe9bf); } .ch-ic-dac.wn .a{ fill:#ffd75e; }
.ch-ic-dac.xm{ color:#6a5f57; border-color:#ddd3ca; background:#f4f0ec; } .ch-ic-dac.xm .a{ fill:#e6ddd4; }
.ch-nut.dang-chon .ch-ic-dac{ color:#ffe9a3; border-color:#7d0814; background:linear-gradient(145deg,#e0243d,#8f0b1a); box-shadow:0 3px 7px #7d081455; } .ch-nut.dang-chon .ch-ic-dac .a{ fill:#ffffff30; }
/* 4 nhóm gốc (THPT / HSG / Chuyên / THCS): biển đỏ chữ vàng */
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom{ margin-top:9px; padding:8px 8px 8px 6px; border-color:#6d0714; background:linear-gradient(135deg,#8f0b1a,#c4122b 60%,#a50f22); color:#fff3c4; box-shadow:0 4px 10px #7d081444, inset 0 1px 0 #ff8a9666; text-transform:uppercase; letter-spacing:.05em; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom:hover{ background:linear-gradient(135deg,#a30f20,#d8182f 60%,#b8111f); transform:none; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom .ch-ten{ color:#fff3c4; font-weight:900; text-shadow:0 1px 0 #5e0813; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom .ch-caret{ color:#ffd75e; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom .ch-ic{ color:#fff3c4; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom .ch-ic-vang{ color:#ffd75e; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom .ch-id{ color:#ffe9a3; opacity:.6; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom .ch-dem{ background:linear-gradient(#ffe9a3,#f7c544); color:#5a0a14; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom.dang-chon{ background:linear-gradient(135deg,#ffe9a3,#f7c544); border-color:#d49a1c; box-shadow:inset 5px 0 0 #7d0814, 0 4px 10px #c9962e44; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom.dang-chon .ch-ten, html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom.dang-chon .ch-caret{ color:#5a0a14; text-shadow:none; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom.dang-chon .ch-ic{ color:#8f0b1a; }
html.gd-sieu-anh-hung #appShell#appShell #pane-cauhoi .ch2-cay .ch-nut.ch-cap-nhom.dang-chon .ch-dem{ background:linear-gradient(#d81a32,#8f0b1a); color:#fff3c4; }

/* ===== Ma trận đề — cùng phong cách Marvel với Sách / Ngân hàng (thầy 05/11/2026): nút icon, tiêu đề nghiêng, cây dạng bài, thẻ câu hỏi ===== */
.sc-ic.nho{ width:34px; height:34px; border-radius:10px; }
.sc-ic.nho .sc-svg{ width:19px; height:19px; }
.sc-ic.lon{ width:46px; height:46px; border-radius:13px; } .sc-ic.lon .sc-svg{ width:24px; height:24px; }
#pane-matran .mt .sc-ic.o-lay, #pane-matran .mt .sc-ic.o-chep, #pane-matran .mt .sc-ic.o-xoa{ align-self:center; justify-self:center; }
#pane-matran .mt-thao-tac{ gap:6px; }
.mt2-phan-nut{ gap:6px; align-items:center; }
.mt2-kho{ display:flex !important; flex-direction:row !important; flex-wrap:wrap; align-items:center; gap:10px !important; }
.mt2-chan{ gap:10px; align-items:center; }
html.gd-sieu-anh-hung .mt2-chan{ border-top:2px dashed #ecd2b8; }
/* thẻ khung: dải sọc đỏ–vàng lệch ở đỉnh */
html.gd-sieu-anh-hung #pane-matran .tg2-hop{ position:relative; }
html.gd-sieu-anh-hung #pane-matran .tg2-hop::before{ content:''; position:absolute; left:14px; right:14px; top:0; height:5px; border-radius:0 0 6px 6px; background:repeating-linear-gradient(115deg,#b10e25 0 14px,#f7c544 14px 22px); pointer-events:none; }
html.gd-sieu-anh-hung .dt2-dau > b, html.gd-sieu-anh-hung #pane-matran .mt2-ten{ font-style:italic; letter-spacing:.04em; text-transform:uppercase; color:#8e0a17; text-shadow:2px 2px 0 #f7c54499; }
html.gd-sieu-anh-hung .dt2-dau > b{ font-size:17px; }
html.gd-sieu-anh-hung #pane-matran .mt2-so, html.gd-sieu-anh-hung #pane-matran .mt2-so.lon{ background:linear-gradient(135deg,#d81a32,#8f0b1a); color:#fff3c4; transform:skewX(-8deg); box-shadow:2px 2px 0 #f7c544; }
html.gd-sieu-anh-hung #pane-matran .mt2-so .fa-list-ol{ transform:skewX(8deg); }
/* hộp chọn dạng bài (cây) */
.mt-modal .modal-title{ font-style:italic; letter-spacing:.04em; text-transform:uppercase; text-shadow:2px 2px 0 #5e0813; }
.mt-modal #mtCay{ margin-top:8px; }
.mt-modal .mt-cay-nut{ gap:6px; margin:2px 0; padding:6px 8px 6px 6px; border:1px solid transparent !important; border-radius:11px !important; transition:background .15s, transform .15s, box-shadow .15s; }
.mt-modal .mt-cay-nut:hover{ background:#fff0d9 !important; transform:translateX(2px); }
.mt-modal .mt-cay-nut.dang-chon{ background:linear-gradient(95deg,#ffe9a3,#fff3cf 78%) !important; border-color:#e9b93f !important; box-shadow:inset 4px 0 0 #b10e25, 0 3px 8px #c9962e33; font-weight:800; }
.mt-modal .mt-cay-nut .ch-caret{ color:#b10e25; font-size:11px; opacity:1; }
.mt-modal .mt-cay-nut .ch-ic{ flex:none; width:18px; height:18px; color:#b9142d; background:none; border:0; border-radius:0; box-shadow:none; text-shadow:none; filter:none; transform:none; display:inline-flex; align-items:center; justify-content:center; }
.mt-modal .mt-cay-nut .ch-ic-svg{ display:block; width:16px; height:16px; }
.mt-modal .mt-cay-nut .ch-ic-vang{ color:#cc941c; }
.mt-modal .mt-cay-nut .ch-dem{ padding:1px 8px; background:linear-gradient(#3b2a22,#241812) !important; color:#ffd75e !important; }
.mt-modal .mt-cay-nut .ch-dem.khong{ background:#e5ddd5 !important; color:#8a7e74 !important; }
.mt-modal .mt-cay-nut.dang-chon .ch-dem:not(.khong){ background:linear-gradient(#d81a32,#8f0b1a) !important; color:#fff3c4 !important; }
.mt-modal .mt-cay-nut.ch-cap-nhom{ margin-top:8px; border-color:#6d0714 !important; background:linear-gradient(135deg,#8f0b1a,#c4122b 60%,#a50f22) !important; color:#fff3c4; box-shadow:0 4px 10px #7d081444, inset 0 1px 0 #ff8a9666; text-transform:uppercase; letter-spacing:.05em; font-weight:900; }
.mt-modal .mt-cay-nut.ch-cap-nhom:hover{ transform:none; filter:brightness(1.08); }
.mt-modal .mt-cay-nut.ch-cap-nhom .ch-caret, .mt-modal .mt-cay-nut.ch-cap-nhom .ch-ic-vang{ color:#ffd75e; } .mt-modal .mt-cay-nut.ch-cap-nhom .ch-ic{ color:#fff3c4; }
.mt-modal .mt-cay-nut.ch-cap-nhom .ch-tong{ color:#ffe9a3; }
.mt-modal .mt-cay-nut.ch-cap-nhom .ch-dem{ background:linear-gradient(#ffe9a3,#f7c544) !important; color:#5a0a14 !important; }
.mt-modal .mt-cay-nut.ch-cap-nhom.dang-chon{ background:linear-gradient(135deg,#ffe9a3,#f7c544) !important; color:#5a0a14; box-shadow:inset 5px 0 0 #7d0814; }
.mt-modal .ch-con{ margin-left:13px; padding-left:6px; border-left:2px dashed #e6c1a8; }
/* thẻ câu hỏi trong hộp chọn câu */
.mt-modal .mt-the-cau{ position:relative; padding:12px 14px 12px 20px !important; border:1px solid #ecd2b8 !important; border-radius:14px !important; background:#fff; box-shadow:0 3px 0 #f7c54466, 0 9px 18px #7d08140d !important; transition:border-color .15s, box-shadow .15s; }
.mt-modal .mt-the-cau::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:14px 0 0 14px; background:linear-gradient(180deg,#e0243d,#8f0b1a); }
.mt-modal .mt-the-cau:hover{ border-color:#e3b25a !important; box-shadow:0 3px 0 #f7c544, 0 12px 22px #7d081418 !important; }
.mt-modal .mt-the-cau.dang-chon{ border-color:#e9a923 !important; background:#fff8e6; }
.mt-modal .mt-the-cau .dau .ma{ display:inline-block; padding:1px 11px; border-radius:6px; background:linear-gradient(135deg,#d81a32,#8f0b1a); color:#fff3c4; font-weight:900; transform:skewX(-8deg); box-shadow:2px 2px 0 #f7c544; }

/* ═════════ CHẤM TRẮC NGHIỆM — cùng phong cách Marvel với Sách / Ngân hàng câu hỏi / Ma trận (thầy 05/11/2026) ═════════
   Khung trái "BÀI KIỂM TRA" như Cây mục lục (dải sọc đỏ–vàng, tiêu đề nghiêng, nút icon .sc-ic), thư mục = biển đỏ chữ vàng,
   thẻ bài = thanh đỏ bên trái + bóng vàng, khung Chi tiết cùng dải sọc. Nút icon dùng MV_IC_ + chữ nổi .sc-tip của app.js. */
.ctn2-cay{ position:relative; min-width:0; display:flex; flex-direction:column; gap:12px; }
.ctn2-cay-dau{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:10px; }
.ctn2-cay-dau > b{ flex:1 1 130px; min-width:0; font-size:19px; font-weight:900; }
.ctn2-cay-nut{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; }
.ctn2-cay-nut .tg2-nut{ min-height:40px; padding:0 16px; font-size:14px; }
.ctn2-cay > .ctn2-loc, .ctn2-cay > .ctn2-xoa-hang{ margin:0; }
.ctn2-luoi.mot-cot{ grid-template-columns:minmax(0, 1fr); }
.sc-ic .sc-ic-sl{ position:absolute; right:-6px; top:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; display:grid; place-items:center; font-size:10.5px; font-weight:900; line-height:1; background:#b10e25; color:#fff3c4; border:1.5px solid #fff; }
.ctn2-xoa-hang .sc-ic.nho{ flex:none; }

html.gd-sieu-anh-hung #appShell#appShell #pane-chamtn :is(.ctn2-cay, .ctn2-ct){ border:1px solid #ecd2b8; border-radius:18px; padding:20px 16px 16px; background:radial-gradient(circle at 1px 1px,#d9a77a26 1px,transparent 1.6px) 0 0/10px 10px, linear-gradient(170deg,#fffaf2,#fff2e2); box-shadow:0 8px 22px #7d08141c; }
html.gd-sieu-anh-hung #pane-chamtn :is(.ctn2-cay, .ctn2-ct)::before{ content:''; position:absolute; left:0; right:0; top:0; height:6px; border-radius:18px 18px 0 0; background:repeating-linear-gradient(115deg,#b10e25 0 14px,#f7c544 14px 22px); pointer-events:none; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-cay-dau{ border-bottom:3px solid transparent; border-image:linear-gradient(90deg,#b10e25,#f7c544 65%,transparent) 1; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-cay-dau > b{ font-style:italic; letter-spacing:.05em; text-transform:uppercase; color:#8e0a17; text-shadow:2px 2px 0 #f7c54499; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-ct .dt2-dau{ padding-bottom:10px; border-bottom:3px solid transparent; border-image:linear-gradient(90deg,#b10e25,#f7c544 65%,transparent) 1; }

/* thư mục = biển đỏ chữ vàng (như 4 nhóm gốc của cây Ngân hàng) */
html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm{ border:1px solid #6d0714; border-radius:14px; background:#fff; box-shadow:0 4px 10px #7d081433; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm.mo{ border-color:#6d0714; box-shadow:0 6px 14px #7d08143d; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm-dau{ background:linear-gradient(135deg,#8f0b1a,#c4122b 60%,#a50f22); color:#fff3c4; box-shadow:inset 0 1px 0 #ff8a9666; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm-nut{ color:#fff3c4; text-transform:uppercase; letter-spacing:.05em; font-weight:900; font-size:15.5px; text-shadow:0 1px 0 #5e0813; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm-mui, html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm-ic, html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm-ten i{ color:#ffd75e; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm.mo .ctn2-tm-ic{ color:#ffd75e; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm-so{ background:linear-gradient(#ffe9a3,#f7c544); color:#5a0a14; text-shadow:none; letter-spacing:0; text-transform:none; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm-than{ border-top:0; background:#fffaf2; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm-ico{ color:#ffe9a3; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-tm-dau .ctn2-tick input{ accent-color:#f7c544; }

/* ngày = nhãn khu (vạch đỏ bên trái, nền vàng nhạt) */
html.gd-sieu-anh-hung #pane-chamtn .ctn2-ngay{ margin:0 0 10px; padding:5px 12px 5px 10px; border-left:4px solid #b10e25; border-radius:0 8px 8px 0; background:linear-gradient(90deg,#fff0c2,#fff8e6 80%,#fff8e600); font-size:16px; font-weight:900; font-style:italic; letter-spacing:.04em; text-transform:uppercase; color:#8e0a17; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-ngay small{ font-style:normal; text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600; color:#7a5a3a; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-ngay-nhom.hom-nay .ctn2-ngay{ border-left-color:#e5a019; }

/* thẻ bài kiểm tra = thanh đỏ bên trái + bóng vàng (như thẻ câu hỏi) */
html.gd-sieu-anh-hung #pane-chamtn .ctn2-the{ position:relative; padding:13px 16px 13px 22px; border:1px solid #ecd2b8; border-radius:14px; background:#fff; box-shadow:0 3px 0 #f7c54466, 0 9px 18px #7d08140d; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-the::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:14px 0 0 14px; background:linear-gradient(180deg,#e0243d,#8f0b1a); }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-the:hover{ border-color:#e3b25a; box-shadow:0 3px 0 #f7c544, 0 12px 22px #7d081418; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-the.on{ border-color:#e9a923; background:#fff8e6; box-shadow:0 3px 0 #f7c544, 0 12px 24px -16px rgba(150,90,0,.7); }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-the.on::before{ background:linear-gradient(180deg,#f7c544,#d49a1c); }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-lop-o{ background:linear-gradient(135deg,#d81a32,#8f0b1a); color:#fff3c4; border-radius:6px; transform:skewX(-8deg); box-shadow:2px 2px 0 #f7c544; padding:1px 11px; font-weight:900; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-ct .ctn2-lop-o{ transform:none; }

/* ô nguồn / khối chi tiết */
html.gd-sieu-anh-hung #pane-chamtn .ctn2-nhan{ font-style:italic; letter-spacing:.05em; text-transform:uppercase; font-size:14px; color:#8e0a17; text-shadow:2px 2px 0 #f7c54499; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-ct-ten{ border-left:4px solid #b10e25; }
html.gd-sieu-anh-hung #pane-chamtn .ctn2-dai{ border-left:6px solid #b10e25; }

/* khung trái hẹp: ô tìm / chip lớp / trạng thái xếp thành cột; khung Chi tiết rộng hơn để dòng thông tin không đè nhau */
.ctn2-cay > .ctn2-loc{ flex-direction:column; align-items:stretch; gap:10px; }
.ctn2-cay > .ctn2-loc .ctn2-tim{ flex:none; width:100%; min-width:0; }
.ctn2-cay > .ctn2-loc .ctn2-lop-hang{ flex:none; }
.ctn2-cay > .ctn2-loc .ctn2-tt-loc{ margin-left:0; width:100% !important; min-width:0; }
.ctn2-tt-dong{ grid-template-columns:20px auto minmax(0, 1fr); }
.ctn2-tt-dong b{ min-width:0; overflow-wrap:anywhere; }
@media (min-width:1200px){ #pane-chamtn .ctn2-luoi{ grid-template-columns:minmax(0, 1fr) clamp(400px, 32vw, 500px); } #pane-chamtn .ctn2-luoi.mot-cot{ grid-template-columns:minmax(0, 1fr); } }
html.gd-sieu-anh-hung #appShell#appShell #pane-chamtn .ctn2-tm-ico{ background:rgba(255,255,255,.14); border:1px solid #ffd75e88; color:#ffe9a3; }
html.gd-sieu-anh-hung #appShell#appShell #pane-chamtn .ctn2-tm-ico:hover{ background:linear-gradient(#ffe9a3,#f7c544); color:#5a0a14; }

/* MỤC SÁCH (js/sach.js) — kem · đỏ rượu · vàng như khung nhân viên; 2 cột: cây chương / mục + nội dung mục. */
#sachKhung{ --sc-do1:var(--nv-do-1,#7d0814); --sc-do2:var(--nv-do-2,#b10e25); --sc-do3:var(--nv-do-3,#d81a32); --sc-vien:#ecddd0; --sc-phu:#7a6a60; --sc-chu:#21160f; color:var(--sc-chu); }
.sc{ display:grid; grid-template-columns:minmax(250px,320px) minmax(0,1fr); gap:16px; align-items:start; }
.sc-trai, .sc-phai{ padding:16px; border:1px solid var(--sc-vien); border-radius:18px; background:linear-gradient(160deg,#fffaf2,#fffdf9); box-shadow:0 6px 20px #5b191410; min-width:0; }
.sc-trai{ position:sticky; top:12px; max-height:calc(100vh - 24px); display:flex; flex-direction:column; gap:10px; }
.sc-hang{ display:flex; flex-wrap:wrap; gap:6px; }
.sc-btn{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:0; border-radius:10px; font:inherit; font-size:13px; font-weight:800; color:#fff7d6; background:linear-gradient(135deg,var(--sc-do3),var(--sc-do1)); box-shadow:0 4px 12px #7d081433; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }
.sc-btn:hover{ transform:translateY(-1px); box-shadow:0 7px 16px #7d081447; }
.sc-btn.vang{ color:#5a0a14; background:linear-gradient(135deg,#ffe9a3,#f7c544); box-shadow:0 4px 12px #c9962e33; }
.sc-btn-nho{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid #e3c4c6; border-radius:9px; background:#fff6ee; font:inherit; font-size:12.5px; font-weight:700; color:var(--sc-do2); cursor:pointer; }
.sc-btn-nho:hover{ background:var(--sc-do2); color:#fff; border-color:var(--sc-do2); }
.sc-btn-nho.nguy:hover{ background:#a30f20; border-color:#a30f20; }
.sc-btn:disabled, .sc-btn-nho:disabled{ opacity:.55; cursor:wait; }
.sc-btn:focus-visible, .sc-btn-nho:focus-visible, .sc-ten:focus-visible, .sc-mo:focus-visible{ outline:2px solid var(--sc-do3); outline-offset:2px; }
/* cây */
.sc-cay{ overflow:auto; padding:6px 2px; border-top:1px dashed var(--sc-vien); }
.sc-ds{ list-style:none; margin:0; padding-left:14px; }
.sc-cay > .sc-ds{ padding-left:0; }
.sc-nut{ display:flex; align-items:center; gap:2px; border-radius:9px; }
.sc-nut.chon{ background:linear-gradient(90deg,#ffe9a3,#fff3cf); box-shadow:inset 3px 0 0 var(--sc-do2); }
.sc-mo{ flex:none; width:22px; height:26px; display:grid; place-items:center; border:0; background:none; font-size:10px; color:var(--sc-phu); cursor:pointer; }
.sc-mo.trong{ cursor:default; }
.sc-ten{ flex:1; min-width:0; padding:5px 6px; border:0; background:none; text-align:left; font:inherit; font-size:13.5px; font-weight:600; color:var(--sc-chu); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.sc-nut.chon .sc-ten{ color:var(--sc-do1); font-weight:800; }
.sc-dem{ flex:none; padding:0 7px; font-size:11px; font-weight:800; color:#8a5a00; }
.sc-trong{ margin:10px 0; padding:14px; text-align:center; font-size:13.5px; color:var(--sc-phu); }
/* phải */
.sc-tieu-de{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.sc-duong{ font-size:15px; font-weight:800; color:var(--sc-do2); line-height:1.4; }
.sc-duong i{ margin:0 4px; font-size:11px; color:var(--sc-phu); }
.sc-msg{ margin:6px 0; font-size:13px; font-weight:700; } .sc-msg:empty{ display:none; }
.sc-msg.ok{ padding:8px 12px; border-radius:10px; background:#dff5e6; color:#14693a; } .sc-msg.loi{ padding:8px 12px; border-radius:10px; background:#fde5e3; color:#a30f20; } .sc-msg.cho{ color:#8a5a00; }
.sc-ghi{ margin:6px 0 10px; font-size:13px; line-height:1.55; color:#5d4d45; }
.sc-noi-dung{ display:grid; gap:10px; margin-top:8px; }
.sc-khoi{ position:relative; padding:12px 14px 12px; border:1px solid var(--sc-vien); border-radius:14px; background:#fff; }
.sc-khoi.cau{ border-left:5px solid #f7a531; background:linear-gradient(100deg,#fff8ee,#fff); }
.sc-khoi-thao{ position:absolute; top:6px; right:8px; display:flex; gap:2px; opacity:.25; transition:opacity .2s ease; }
.sc-khoi:hover .sc-khoi-thao, .sc-khoi:focus-within .sc-khoi-thao{ opacity:1; }
.sc-khoi-thao button{ width:28px; height:28px; border:0; border-radius:8px; background:#fff6ee; font-size:12px; color:var(--sc-do2); cursor:pointer; }
.sc-khoi-thao button:hover:not(:disabled){ background:var(--sc-do2); color:#fff; } .sc-khoi-thao button:disabled{ opacity:.35; cursor:default; }
/* Ô tích chọn + tay kéo (27/10/2026): dải trái của mỗi khối, thanh chọn dính đầu danh sách */
.sc-khoi{ padding-left:40px; }
.sc-khoi-le{ position:absolute; top:8px; left:8px; width:24px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.sc-khoi-le input{ width:18px; height:18px; margin:0; cursor:pointer; accent-color:var(--sc-do2); }
.sc-keo{ width:24px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:6px; color:#a9937c; cursor:grab; touch-action:none; }
.sc-keo:hover{ background:#fff6ee; color:var(--sc-do2); } .sc-keo:active{ cursor:grabbing; }
.sc-khoi.da-chon{ outline:3px solid #f7a531; outline-offset:-1px; background-color:#fff4dc; }
.sc-khoi.dang-keo{ opacity:.45; }
.sc-khoi.keo-tren{ box-shadow:0 -5px 0 0 var(--sc-do2); } .sc-khoi.keo-duoi{ box-shadow:0 5px 0 0 var(--sc-do2); }
.sc-thanh-chon{ position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 12px; border:1px solid var(--sc-vien); border-radius:12px; background:#fffaf2; box-shadow:0 2px 6px rgba(0,0,0,.06); font-size:13px; }
.sc-chon-tat{ display:inline-flex; align-items:center; gap:6px; margin:0; font-weight:600; cursor:pointer; } .sc-chon-tat input{ width:18px; height:18px; accent-color:var(--sc-do2); }
.sc-dem-chon{ font-weight:700; color:var(--sc-do2); }
.sc-goi-y-keo{ margin-left:auto; color:#8a7a68; font-size:12px; }
@media (max-width:640px){ .sc-goi-y-keo{ display:none; } .sc-khoi{ padding-left:36px; } }
.sc-chu{ font-size:14.5px; line-height:1.7; overflow-wrap:anywhere; padding-right:112px; }
.sc-chu img, .sc-lg img{ max-width:100%; border-radius:8px; }
.sc-cau-dau{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; align-items:center; }
.sc-so-cau{ font-size:15px; font-weight:900; color:#b10e25; margin-right:2px; }
.sc-chip{ padding:2px 10px; border-radius:999px; background:#fff0d6; font-size:11.5px; font-weight:800; color:#9a4a00; } .sc-chip.phu{ background:#eee8e2; color:#6f635b; }
.sc-lc{ list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:4px 16px; font-size:14px; }
.sc-lc li{ display:flex; gap:6px; }
.sc-da{ margin-top:8px; padding:6px 10px; border-radius:9px; background:#e9f5ee; font-size:13.5px; color:#175c38; }
.sc-lg{ margin-top:8px; font-size:14px; } .sc-lg summary{ cursor:pointer; font-weight:800; color:var(--sc-do2); }
.sc-sua{ display:grid; gap:8px; margin-top:10px; padding:10px; border-radius:12px; background:#fff1e4; }
.sc-sua label{ display:grid; gap:4px; font-size:12px; font-weight:800; color:var(--sc-phu); }
.sc-sua-nut{ display:flex; gap:8px; }
/* nhập Word */
.sc-nhap{ margin:8px 0 14px; padding:14px; border:1px dashed #d9a9ac; border-radius:14px; background:#fff8f2; }
.sc-nhap-dau{ display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--sc-do2); }
.sc-nhap-luoi{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.sc-tha{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:130px; padding:14px; border:2px dashed #d9a9ac; border-radius:14px; background:#fff; text-align:center; font-weight:700; color:var(--sc-do2); cursor:pointer; transition:background .2s ease,border-color .2s ease; }
.sc-tha i{ font-size:26px; color:var(--sc-do3); } .sc-tha:hover, .sc-tha.keo{ background:#fff1e4; border-color:var(--sc-do3); }
.sc-nhap-tuy{ display:grid; gap:8px; align-content:start; }
.sc-nhap-tuy label{ display:grid; gap:4px; font-size:12px; font-weight:800; color:var(--sc-phu); }
.sc-xt-tom{ margin:12px 0 8px; font-size:13px; } .sc-xem{ color:#9a4a00; }
.sc-xt-cay{ max-height:420px; overflow:auto; padding:6px; border:1px solid var(--sc-vien); border-radius:12px; background:#fff; }
.sc-xt{ list-style:none; margin:0; padding-left:18px; } .sc-xt-cay > .sc-xt{ padding-left:0; }
.sc-xt li.bo > .sc-xt-hang{ opacity:.45; text-decoration:line-through; }
.sc-xt-hang{ display:flex; align-items:center; gap:8px; padding:3px 0; }
.sc-xt-ten{ flex:1; min-width:0; padding:3px 8px; border:1px solid transparent; border-radius:8px; background:transparent; font:inherit; font-size:13.5px; font-weight:600; }
.sc-xt-ten:hover, .sc-xt-ten:focus{ border-color:#e4d4c5; background:#fffaf2; outline:0; }
.sc-xt-hang small{ flex:none; font-size:11.5px; color:var(--sc-phu); }
/* hộp chuyển câu từ Ngân hàng */
.sc-dlg{ width:min(460px,calc(100vw - 24px)); padding:0; border:2px solid #251511; border-radius:16px; background:#fffdf7; color:var(--sc-chu, #21160f); box-shadow:0 24px 60px #24010480; }
.sc-dlg::backdrop{ background:#2a0208b3; }
.sc-dlg-than{ display:grid; gap:10px; padding:16px; } .sc-dlg-than h3{ margin:0; font-size:17px; font-weight:800; color:#b10e25; }
.sc-dlg .form-select, .sc-dlg .form-control, .sc-dlg .form-control:focus{ background-color:#fff; color:#21160f; border:1px solid #e4d4c5; border-radius:10px; }
.sc-dlg .form-control:focus{ border-color:#b10e25; box-shadow:0 0 0 3px #b10e2522; outline:0; }
.sc-dlg .form-control::placeholder{ color:#8a7a70; }
.sc-dlg-than label.sc-tick{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#21160f; }
.sc-dlg-than label.sc-tick input{ width:17px; height:17px; accent-color:#b10e25; }
.sc-dlg-than label{ display:grid; gap:4px; font-size:12px; font-weight:800; color:#7a6a60; }
/* Đổi câu / câu trùng (js/sach-doi-cau.js, 11/10/2026) */
.sc-dlg.sdc-hop.rong{ width:min(920px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); }
.sdc-cu{ padding:8px 12px; border:1px dashed #d9a9ac; border-radius:10px; background:#fff6ee; font-size:13px; line-height:1.45; }
.sdc-cu b{ color:#b10e25; }
.sdc-loc{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .sdc-loc input[type=search]{ flex:1 1 260px; min-width:0; }
.sdc-ds{ display:grid; gap:10px; max-height:52dvh; overflow:auto; padding-right:4px; }
.sdc-the{ padding:10px 12px; border:1.5px solid #251511; border-radius:12px; background:#fff; box-shadow:3px 3px 0 #f7c544; font-size:14px; line-height:1.5; }
.sdc-the-dau{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; font-size:12px; font-weight:800; color:#7a6a60; }
.sdc-the-dau .ma{ color:#b10e25; }
.sc-btn-nho.xoa{ color:#a30f20; border-color:#e6a8ad; } .sc-btn-nho.xoa:hover{ background:#fde4e4; }
.sc-btn.xoa{ background:#fde4e4; color:#a30f20; border-color:#a30f20; }
.sdc-cay{ padding:8px 10px; border:1.5px dashed #d9a9ac; border-radius:12px; background:#fffaf2; }
.sdc-cay-tieu, .sdc-cay-chon{ font-size:12.5px; font-weight:800; color:#7a6a60; margin-bottom:6px; } .sdc-cay-chon{ color:#5a0a14; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sdc-cay i{ color:#b10e25; }
.sdc-cay-ds{ list-style:none; margin:0; padding:0; display:grid; gap:4px; max-height:190px; overflow:auto; }
.sdc-cay-ds button{ width:100%; text-align:left; padding:4px 10px; border:1px solid #e4d4c5; border-radius:8px; background:#fff; color:#21160f; font-size:12.5px; font-weight:600; line-height:1.4; }
.sdc-cay-ds button:hover{ background:#fff3e0; border-color:#b10e25; }
.sdc-cay-ds button i{ margin:0 3px; font-size:10px; }
.sdc-duong{ margin:0 0 6px; padding:3px 9px; border-radius:8px; background:#fff3e0; color:#7a4a00; font-size:12px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
.sdc-duong i{ margin-right:4px; color:#b10e25; }
.sdc-giong{ padding:1px 8px; border-radius:99px; background:#ffe9a3; color:#5a0a14; }
.sdc-da-dung{ padding:1px 8px; border-radius:99px; background:#fde4e4; color:#a30f20; }
.sdc-nd img, .sdc-lc img{ max-width:100%; height:auto; }
.sdc-lc{ margin-top:6px; display:grid; gap:2px; }
.sdc-trang{ font-size:12.5px; font-weight:800; color:#7a6a60; }
.sdc-nhom-ds{ display:grid; gap:10px; max-height:50dvh; overflow:auto; padding-right:4px; }
.sdc-nhom{ padding:10px 12px; border:1.5px solid #251511; border-radius:12px; background:#fff; box-shadow:3px 3px 0 #f7c544; }
.sdc-nhom-dau{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; font-size:13.5px; } .sdc-nhom-dau b{ min-width:0; overflow-wrap:anywhere; }
.sdc-nhom ul{ margin:8px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.sdc-nhom li{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; } .sdc-nhom li span{ flex:1 1 220px; min-width:0; }
.sdc-nhom li em{ padding:0 7px; border-radius:99px; background:#e2f3df; color:#1d6b2a; font-style:normal; font-size:11.5px; font-weight:800; }
@media (max-width:900px){
  .sc{ grid-template-columns:1fr; } .sc-trai{ position:static; max-height:none; } .sc-cay{ max-height:260px; }
  .sc-nhap-luoi{ grid-template-columns:1fr; } .sc-chu{ padding-right:0; padding-top:30px; }
}
@media (prefers-reduced-motion:reduce){ .sc-btn, .sc-khoi-thao, .sc-tha{ transition:none; } }

.sc-phan{ margin:0; padding:8px 12px; border:1px dashed #d9a9ac; border-radius:12px; display:grid; gap:4px; }
.sc-phan legend{ float:none; width:auto; margin:0 0 2px; padding:0 6px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#7a6a60; }

/* ───── Khung kiểu Marvel (06/10/2026): mực đen + đỏ + vàng, viền dày, bóng cứng như trang truyện tranh ───── */
#sachKhung{ --mv-muc:#15110f; --mv-do:#c8102e; --mv-do-dam:#6d0a12; --mv-vang:#f5b82e; --mv-giay:#fbf5e8; --mv-kem:#fff3d1; }
.sc-duong{ display:inline-block; align-self:flex-start; padding:5px 14px; border:2px solid var(--mv-muc); background:var(--mv-do); color:#fff; font-size:14px; letter-spacing:.02em; transform:skewX(-6deg); box-shadow:4px 4px 0 var(--mv-muc); }
.sc-duong i{ color:var(--mv-vang); }
.sc-khoi.doan:not(.khung){ border:1px solid var(--sc-vien); }
.sc-khoi.khung{ margin-top:10px; padding:16px 16px 12px; border:2px solid var(--mv-muc); border-radius:4px; background:var(--mv-kem); box-shadow:5px 5px 0 var(--mv-muc); }
.sc-nhan-khung{ position:absolute; top:-12px; left:12px; padding:2px 12px; border:2px solid var(--mv-muc); background:var(--mv-do); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; transform:rotate(-2deg); }
.sc-khoi.kh-dinh_li{ background:#fff0e6; } .sc-khoi.kh-dinh_li .sc-nhan-khung{ background:var(--mv-do-dam); }
.sc-khoi.kh-ghi_nho{ background:#fffbe8; } .sc-khoi.kh-ghi_nho .sc-nhan-khung{ background:var(--mv-muc); color:var(--mv-vang); }
.sc-khoi.kh-luu_y{ background:#fff; border-left:12px solid var(--mv-do-dam); } .sc-khoi.kh-luu_y .sc-nhan-khung{ background:#fff; color:var(--mv-do-dam); }
.sc-khoi.kh-nhan_xet{ background:#fff8d8; border-radius:18px 18px 18px 2px; } .sc-khoi.kh-nhan_xet .sc-nhan-khung{ background:var(--mv-vang); color:var(--mv-muc); }
.sc-khoi.kh-phuong_phap{ background:var(--mv-giay); border-style:dashed; } .sc-khoi.kh-phuong_phap .sc-nhan-khung{ background:#fff; color:var(--mv-do); }
.sc-khoi.cau{ border:2px solid var(--mv-muc); border-left:8px solid var(--mv-do); border-radius:4px; background:#fff; }
.sc-chip{ border:1.5px solid var(--mv-muc); background:var(--mv-vang); color:var(--mv-muc); border-radius:3px; text-transform:uppercase; letter-spacing:.05em; font-size:10.5px; }
.sc-chip.phu{ background:#fff; color:#5d554b; }
.sc-sao{ display:inline-flex; align-items:center; padding:0 8px; border:1.5px solid var(--mv-muc); border-radius:3px; background:var(--mv-muc); color:var(--mv-vang); font-size:12px; letter-spacing:2px; }
.sc-da{ border:1.5px solid var(--mv-muc); border-radius:3px; background:var(--mv-kem); color:var(--mv-muc); }
.sc-lg{ padding:8px 12px; border-left:6px solid var(--mv-vang); background:var(--mv-giay); } .sc-lg summary{ color:var(--mv-do); font-style:italic; }
.sc-lg summary::marker{ color:var(--mv-do); }
@media (prefers-reduced-motion:no-preference){ .sc-khoi.khung{ transition:transform .15s ease, box-shadow .15s ease; } .sc-khoi.khung:hover{ transform:translate(-1px,-1px); box-shadow:7px 7px 0 var(--mv-muc); } }

/* ───── Tiêu đề dạng bài "☑ Tên dạng" (kieu 'dang', 14/10/2026): chữ đỏ đậm, không khung màu — đứng ngay trước nhóm câu của dạng ───── */
.sc-khoi.doan.dang{ padding:6px 14px; border:0; border-bottom:2px solid var(--mv-vang); border-radius:0; background:transparent; }
.sc-dang-ten{ padding-right:112px; font-size:15.5px; font-weight:800; line-height:1.5; color:var(--mv-do); overflow-wrap:anywhere; }
.sc-dang-o{ margin-right:2px; color:var(--mv-do-dam); }
@media (max-width:900px){ .sc-dang-ten{ padding-right:0; padding-top:30px; } }

/* Nút xoá ảnh trong câu / đoạn (js/sach.js ganNutXoaAnh) — thầy chốt 16/10/2026. Đặt GÓC DƯỚI TRÁI: thanh Phải chữ/Dưới đề/cỡ (hinh-chinh.js) chiếm góc trên phải, tay kéo cỡ chiếm góc dưới phải (29/10 thanh che mất nút) */
.sc-anh-hop{ position:relative; display:inline-block; max-width:100%; }
.sc-anh-xoa{ position:absolute; bottom:6px; left:6px; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border:0; border-radius:99px; background:#a30f20e6; color:#fff; font:inherit; font-size:12px; font-weight:800; cursor:pointer; opacity:.85; transition:opacity .15s ease; }
.sc-anh-hop:hover .sc-anh-xoa, .sc-anh-xoa:focus-visible{ opacity:1; }
.sc-anh-loi + .sc-anh-xoa{ position:static; margin-left:8px; }
/* Nút thay ảnh (04/11/2026): ngay trên nút xoá, cùng góc dưới trái, ảnh nhỏ vẫn không che tay kéo cỡ */
.sc-anh-thay{ position:absolute; bottom:34px; left:6px; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border:0; border-radius:99px; background:#16306be6; color:#fff; font:inherit; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; opacity:.85; transition:opacity .15s ease; }
.sc-anh-hop:hover .sc-anh-thay, .sc-anh-thay:focus-visible{ opacity:1; }
.sc-anh-loi ~ .sc-anh-thay{ position:static; margin-left:6px; }
@media (hover:none){ .sc-anh-xoa, .sc-anh-thay{ opacity:1; } }

/* ---- Bài soạn / Sách: bảng "| a | b |", ## tiêu đề hộp, **đậm** (js/sach.js dungGiau, 18/10/2026) ---- */
#sachKhung .sc-bang-cuon{ margin:6px 0; overflow-x:auto; background:#fff; border:2px solid #15110f; border-radius:11px; box-shadow:3px 3px 0 var(--sc-do2); }
#sachKhung .sc-bang{ width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.55; }
#sachKhung .sc-bang th, #sachKhung .sc-bang td{ padding:7px 11px; text-align:left; vertical-align:top; border-right:1px solid var(--sc-vien); border-bottom:1px solid var(--sc-vien); }
#sachKhung .sc-bang tr > :last-child{ border-right:0; }
#sachKhung .sc-bang tbody tr:last-child > *{ border-bottom:0; }
#sachKhung .sc-bang thead th{ text-align:center; font-weight:800; letter-spacing:.02em; color:#ffe29a; background:linear-gradient(135deg, var(--sc-do1), var(--sc-do2)); border-color:#15110f66; }
#sachKhung .sc-bang tbody tr:nth-child(even) > td{ background:#fffaf0; }
#sachKhung .sc-bang .sc-bang-nhan{ width:24%; font-weight:800; color:var(--sc-do1); background:#fdecec; }
#sachKhung .sc-tieu-hop{ margin:0 0 7px; padding-bottom:4px; font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8a3a00; border-bottom:2px solid #c9812a; }
#sachKhung .sc-chu strong, #sachKhung .sc-lg strong, #sachKhung .sc-dang-ten strong{ font-weight:800; }
#sachKhung .sc-bang{ min-width:460px; }
#sachKhung .sc-bang th, #sachKhung .sc-bang td{ min-width:110px; overflow-wrap:normal; word-break:normal; }
#sachKhung .sc-bang .sc-bang-nhan{ min-width:130px; }

/* ô tích / kéo thả: đặt CUỐI để thắng các kiểu khung Marvel phía trên */
#scNoiDung .sc-khoi, #scNoiDung .sc-khoi.khung, #scNoiDung .sc-khoi.doan.dang{ padding-left:40px; }
#scNoiDung .sc-khoi.da-chon{ outline:3px solid #f7a531; outline-offset:-1px; background:#fff4dc; }
#scNoiDung .sc-khoi.dang-keo{ opacity:.45; }

/* Đề xuất rà soát sách (29/10/2026): nhãn trên câu chờ thầy duyệt — đỏ = xoá, cam = thay bằng câu Ngân hàng, xanh = điền/sửa khoá */
.sc-dx-thanh{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 12px; border:2px dashed #c9302c; border-radius:12px; background:#fff3f2; font-size:13px; }
.sc-dx-chip{ padding:2px 10px; border-radius:999px; font-weight:800; font-size:12px; color:#fff; }
.sc-dx-chip.xoa{ background:#c9302c; } .sc-dx-chip.thay{ background:#e08600; } .sc-dx-chip.khoa{ background:#1f6fb5; }
.sc-dx-loc{ margin:0 0 0 auto; display:inline-flex; align-items:center; gap:6px; font-weight:700; cursor:pointer; } .sc-dx-loc input{ width:17px; height:17px; accent-color:#c9302c; }
.sc-dx{ margin:0 0 8px; padding:8px 10px; border-radius:8px; font-size:13px; line-height:1.5; border-left:5px solid #c9302c; background:#fdeceb; color:#5a1a17; }
.sc-dx-nhan{ display:inline-block; padding:1px 9px; border-radius:6px; font-weight:900; font-size:12px; color:#fff; background:#c9302c; text-transform:uppercase; letter-spacing:.2px; }
.sc-dx-bai{ margin-left:8px; font-size:11.5px; font-weight:700; color:#8a6a68; }
.sc-dx-ly{ margin-top:4px; }
.sc-dx-thay{ margin-top:4px; padding:5px 8px; border-radius:6px; background:#fff; border:1px dashed #e08600; color:#5b3a00; }
.sc-khoi.cau.dx-xoa{ border-color:#c9302c; border-left-color:#c9302c; background:linear-gradient(100deg,#fff1f0,#fff); }
.sc-khoi.cau.dx-thay{ border-color:#e08600; border-left-color:#e08600; background:linear-gradient(100deg,#fff6e8,#fff); }
.sc-khoi.cau.dx-thay .sc-dx{ border-left-color:#e08600; background:#fff2dd; color:#5b3a00; } .sc-khoi.cau.dx-thay .sc-dx-nhan{ background:#e08600; }
.sc-khoi.cau.dx-khoa{ border-color:#1f6fb5; border-left-color:#1f6fb5; }
.sc-khoi.cau.dx-khoa .sc-dx{ border-left-color:#1f6fb5; background:#e8f2fb; color:#133e66; } .sc-khoi.cau.dx-khoa .sc-dx-nhan{ background:#1f6fb5; }
.sc-khoi.cau.dx-trung{ border-color:#7a3fb5; border-left-color:#7a3fb5; background:linear-gradient(100deg,#f6f0fc,#fff); }
.sc-khoi.cau.dx-trung .sc-dx{ border-left-color:#7a3fb5; background:#f1e8fa; color:#3c1f5c; } .sc-khoi.cau.dx-trung .sc-dx-nhan{ background:#7a3fb5; }
.sc-dx-chip.trung{ background:#7a3fb5; }
.sc-dx-nut{ margin-top:6px; }
.sc-khoi.co-dx .sc-dx{ margin-top:34px; }   /* nằm dưới hàng nút Lên/Xuống/Sửa/Xoá ở góc phải */
.sc-noi-dung.dx-chi-hien .sc-khoi:not(.co-dx){ display:none; }
.sc-dx-them{ padding:8px 12px; border:2px dashed #e08600; border-radius:12px; background:#fff8ec; font-size:13px; display:grid; gap:6px; }
.sc-dx-chep{ margin-left:8px; font-weight:800; border-color:#e08600; color:#8a4b00; } .sc-dx-chep:disabled{ opacity:.5; }

/* ===== SỔ TAY A5 hai trang (29/10/2026, js/sach-so-tay.js) — bản xanh navy + vàng như ảnh mẫu; mọi cỡ chữ dùng cqw nên trang co giãn mà bố cục không đổi ===== */
.st-lop{ position:fixed; inset:0; z-index:3000; background:#1a0a10; overflow:auto; display:flex; flex-direction:column; align-items:center; padding:10px 12px 24px; gap:10px; }
.st-thanh{ position:sticky; top:0; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; width:min(1180px,100%); padding:8px 12px; border-radius:12px; background:#fff7e8; color:#3a1d12; font-size:14px; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.st-thanh b{ margin-right:auto; } .st-dem{ min-width:84px; text-align:center; font-weight:700; }
.st-nut{ border:1px solid #c9a24a; background:#fff; border-radius:9px; padding:5px 12px; font-weight:700; cursor:pointer; color:#7a1020; } .st-nut:disabled{ opacity:.4; cursor:default; } .st-nut.chinh{ background:#b3162a; color:#fff; border-color:#b3162a; }
.st-so-dau{ margin:0; display:inline-flex; align-items:center; gap:6px; font-weight:600; } .st-so-dau input{ width:64px; padding:3px 6px; border:1px solid #c9a24a; border-radius:8px; color:#3a1d12; background:#fff; }
.st-ghi-chu{ width:min(1180px,100%); margin:0; color:#d9c9b0; font-size:12.5px; line-height:1.5; }
.st-sach{ width:min(1180px,100%); }
.st-trai{ display:none; position:relative; grid-template-columns:1fr 1fr; gap:0; box-shadow:0 14px 40px rgba(0,0,0,.55); border-radius:6px; overflow:hidden; } .st-trai.hien{ display:grid; }
.st-trang{ container-type:inline-size; position:relative; aspect-ratio:148/210; background:linear-gradient(180deg,#fcf7ea,#f6edd8); color:#1d1a2b; overflow:hidden; font-size:3cqw; line-height:1.5; }
.st-trang.trai{ box-shadow:inset -3cqw 0 4cqw -3cqw rgba(60,30,10,.28); } .st-trang.phai{ box-shadow:inset 3cqw 0 4cqw -3cqw rgba(60,30,10,.28); }
.st-trong{ position:absolute; inset:1.6cqw; border:.5cqw solid #d7a94a; border-radius:2.4cqw; padding:2.4cqw 3cqw 0; display:flex; flex-direction:column; background:rgba(255,252,243,.6); }
.st-trong::before{ content:''; position:absolute; inset:.8cqw; border:.18cqw solid rgba(215,169,74,.55); border-radius:1.8cqw; pointer-events:none; }
.st-trong::after{ content:''; position:absolute; inset:-.6cqw; pointer-events:none;
  background:
   linear-gradient(#a8162a,#a8162a) left top/7cqw .8cqw no-repeat, linear-gradient(#a8162a,#a8162a) left top/.8cqw 7cqw no-repeat,
   linear-gradient(#a8162a,#a8162a) right top/7cqw .8cqw no-repeat, linear-gradient(#a8162a,#a8162a) right top/.8cqw 7cqw no-repeat,
   linear-gradient(#a8162a,#a8162a) left bottom/7cqw .8cqw no-repeat, linear-gradient(#a8162a,#a8162a) left bottom/.8cqw 7cqw no-repeat,
   linear-gradient(#a8162a,#a8162a) right bottom/7cqw .8cqw no-repeat, linear-gradient(#a8162a,#a8162a) right bottom/.8cqw 7cqw no-repeat; }
.st-hang-nho{ display:flex; justify-content:center; margin-top:-3.6cqw; position:relative; z-index:3; } .st-hang-nho span{ background:#7d0f1d; color:#f7e7c0; font-size:2.1cqw; font-weight:800; letter-spacing:.35cqw; padding:.7cqw 5cqw; border-radius:1cqw; border:.25cqw solid #d7a94a; box-shadow:0 0 0 .9cqw #fcf7ea; }
.st-dau{ position:relative; margin:1.8cqw 0 4.4cqw; padding:3cqw 17cqw; text-align:center; border-radius:2.2cqw; border:.5cqw solid #d7a94a; box-shadow:0 .5cqw 1.2cqw rgba(0,0,0,.25); }
.st-trang.trai .st-dau{ background:linear-gradient(100deg,#0c1c3f,#16305f 60%,#0c1c3f); } .st-trang.phai .st-dau{ background:linear-gradient(100deg,#6d0c18,#a8162a 60%,#6d0c18); }
.st-dau h2{ margin:0; font-size:8.6cqw; line-height:1.05; font-weight:900; text-transform:uppercase; letter-spacing:.2cqw; background:linear-gradient(180deg,#fff0b8,#e0a93a 70%,#b9801f); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 .3cqw .2cqw rgba(0,0,0,.45)); overflow-wrap:anywhere; }
.st-orb{ position:absolute; right:2.6cqw; top:50%; transform:translateY(-50%); width:14.5cqw; height:14.5cqw; display:block; filter:drop-shadow(0 .3cqw .5cqw rgba(0,0,0,.5)); }
.st-trang.trai .st-orb{ filter:drop-shadow(0 0 1.2cqw rgba(255,255,255,.45)) drop-shadow(0 .3cqw .5cqw rgba(0,0,0,.5)); } .st-trang.phai .st-orb{ filter:drop-shadow(0 0 1.8cqw rgba(70,215,255,.95)) drop-shadow(0 .3cqw .5cqw rgba(0,0,0,.5)); }
.st-phu{ position:absolute; left:50%; bottom:-2.6cqw; transform:translateX(-50%); white-space:nowrap; background:#0f244f; color:#59a9ff; border:.3cqw solid #d7a94a; border-radius:1.2cqw; padding:.5cqw 6cqw; font-size:2.3cqw; font-weight:800; letter-spacing:.7cqw; text-transform:uppercase; }
.st-trang.phai .st-phu{ color:#7fd0ff; }
.st-than{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:2.2cqw; padding-bottom:1cqw; }
.st-the,.st-nho,.st-can,.st-cau,.st-van{ position:relative; }
.st-the header{ display:flex; align-items:center; margin-bottom:-.8cqw; position:relative; z-index:1; }
.st-so{ width:7.6cqw; height:7.6cqw; display:flex; align-items:center; justify-content:center; background:#9e1224; color:#fff3d0; font-weight:900; font-size:3.6cqw; clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); margin-right:-1.4cqw; position:relative; z-index:2; }
.st-the h3,.st-dai h3{ margin:0; flex:1; background:linear-gradient(100deg,#132a57,#0c1c3f); color:#f6e8c4; font-size:3.4cqw; font-weight:900; text-transform:uppercase; letter-spacing:.25cqw; padding:1.2cqw 3cqw; border-radius:0 1.6cqw 0 0; clip-path:polygon(0 0,100% 0,97% 100%,0 100%); border-bottom:.3cqw solid #d7a94a; }
.st-the-than,.st-nho-than,.st-can-than{ border:.3cqw solid #d7a94a; border-radius:0 0 1.6cqw 1.6cqw; background:#fffdf6; padding:2.2cqw 3.4cqw; }
.st-gach{ list-style:none; margin:0; padding:0; } .st-gach li{ display:flex; gap:2.2cqw; align-items:baseline; padding:.7cqw 0; font-size:4.3cqw; } .st-kim{ color:#b3162a; font-size:2.6cqw; }
.st-chu{ margin:.4cqw 0; font-size:3.5cqw; line-height:1.5; } .st-van{ padding:0 1cqw; }
.st-cth{ margin:1.4cqw auto 0; padding:1.4cqw 3cqw; text-align:center; font-size:4.6cqw; background:#fffdf6; border:.3cqw solid #d7a94a; border-radius:1.6cqw; box-shadow:0 .3cqw .8cqw rgba(0,0,0,.12); }
.st-nho header{ display:flex; align-items:center; background:linear-gradient(100deg,#b8862a,#e9c25d 55%,#b8862a); border-radius:2.2cqw 2.2cqw 0 0; padding:.6cqw 3cqw .6cqw 1cqw; border:.3cqw solid #d7a94a; border-bottom:0; }
.st-den{ flex:none; width:7.6cqw; height:7.6cqw; padding:1.1cqw; border-radius:50%; background:#fff6d6; border:.4cqw solid #8a5d0c; display:flex; align-items:center; justify-content:center; margin-right:2.4cqw; }
.st-nho h3{ margin:0; font-size:3.4cqw; font-weight:900; text-transform:uppercase; letter-spacing:.25cqw; color:#3d2a06; }
.st-nho-than{ background:linear-gradient(180deg,#fff7de,#fbeab8); }
.st-can header{ display:flex; align-items:center; background:linear-gradient(100deg,#a8162a,#d02a3c); color:#fff; border-radius:1.6cqw 1.6cqw 0 0; padding:.9cqw 2.4cqw; gap:1.6cqw; } .st-can h3{ margin:0; font-size:3.3cqw; font-weight:900; text-transform:uppercase; } .st-tam{ flex:none; width:4.6cqw; height:4.6cqw; display:flex; }
.st-can-than{ background:#fde6e4; border-color:#e7b0ac; color:#5a1a17; font-size:3.2cqw; }
.st-dai{ display:flex; align-items:center; } .st-dai-bieu{ flex:none; width:8cqw; height:8cqw; padding:1cqw; border-radius:50%; background:#fff3d0; border:.4cqw solid #d7a94a; display:flex; align-items:center; justify-content:center; margin-right:-1.4cqw; position:relative; z-index:1; }
.st-dai h3{ padding-left:3cqw; }
.st-cau{ padding:.6cqw 1.4cqw; } .st-cau-dau{ display:flex; gap:2.6cqw; align-items:flex-start; }
.st-sttt{ flex:none; width:6.4cqw; height:6.4cqw; border-radius:50%; background:#9e1224; color:#fff3d0; font-weight:900; font-size:3.4cqw; display:flex; align-items:center; justify-content:center; margin-top:.3cqw; }
.st-de{ flex:1; font-size:3.7cqw; } .st-lc{ list-style:none; margin:1cqw 0 0 9cqw; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.4cqw 3cqw; }
.st-giai-hang{ margin:1.6cqw 0 0 9cqw; } .st-giai-nut{ border:.3cqw solid #b8862a; background:linear-gradient(180deg,#fff3c8,#efcf7a); color:#5a3a05; font-weight:900; font-size:2.9cqw; padding:.7cqw 3.2cqw; border-radius:1.2cqw 1.2cqw 0 0; cursor:pointer; }
.st-hang-giai{ display:grid; grid-template-columns:1.15fr 1fr; gap:2cqw; align-items:start; margin:0 0 0 9cqw; } .st-hang-giai .st-giai{ margin:0; grid-column:1; min-width:0; border-radius:0 1.6cqw 1.6cqw 1.6cqw; } .st-hang-giai .st-can{ grid-column:2; min-width:0; margin-top:1.2cqw; } .st-hang-giai .st-can-than{ font-size:3cqw; padding:1.8cqw 2.4cqw; }
.st-giai{ padding:1.6cqw 2.6cqw; border:.3cqw solid #d7a94a; background:#fffdf6; border-radius:0 1.6cqw 1.6cqw 1.6cqw; } .st-giai[hidden]{ display:none; }
.st-dap{ display:flex; gap:2cqw; align-items:center; margin:1.6cqw 0 .4cqw; padding:1.6cqw 3.4cqw; font-size:4cqw; background:linear-gradient(180deg,#fff8dc,#fbe9ad); border:.4cqw solid #d7a94a; border-radius:1.4cqw; box-shadow:0 .3cqw .8cqw rgba(0,0,0,.15); } .st-dap-mui{ color:#b3162a; font-weight:900; font-size:4.6cqw; }
.st-ke{ margin:2cqw 0 0 9cqw; } .st-ke i{ display:block; height:4.2cqw; border-bottom:.3cqw dotted #b49a6a; }
.st-chan{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding:1.6cqw 0 1.8cqw; } .st-trang.phai .st-chan{ flex-direction:row-reverse; }
.st-so-trang{ width:8cqw; height:5.2cqw; display:flex; align-items:center; justify-content:center; background:#9e1224; color:#fff3d0; font-weight:900; font-size:3cqw; border-radius:1cqw; border:.3cqw solid #d7a94a; }
.st-khau{ flex:1; text-align:center; font-size:2cqw; letter-spacing:.8cqw; color:#7a6a58; font-weight:700; }
.st-banner img,.st-van img,.st-the-than img,.st-giai img{ max-width:100%; border-radius:1cqw; }
.st-do{ position:absolute; left:-99999px; top:0; width:560px; visibility:hidden; pointer-events:none; }
/* bảng trong thẻ (| a | b |) */
.st-bang{ margin:1cqw 0; overflow:hidden; } .st-bang .sc-bang-cuon{ overflow:hidden; }
.st-trang .st-bang table.sc-bang{ width:100%; border-collapse:collapse; border:.3cqw solid #d7a94a; font-size:4.1cqw; line-height:1.4; background:#fffdf6; }
.st-trang .st-bang table.sc-bang th{ background:linear-gradient(100deg,#132a57,#0c1c3f); color:#f6e8c4; font-size:3.8cqw; font-weight:900; padding:.8cqw 1.6cqw; border:.2cqw solid #d7a94a; text-align:left; }
.st-trang .st-bang table.sc-bang td,.st-trang .st-bang table.sc-bang th.sc-bang-nhan{ padding:.8cqw 1.6cqw; border:.2cqw solid #e2cd9a; font-size:4.1cqw; } .st-trang .st-bang table.sc-bang th.sc-bang-nhan{ background:#fbeab8; color:#3d2a06; }
@media (max-width:760px){ .st-trai.hien{ grid-template-columns:1fr; } .st-ghi-chu{ display:none; } }
@page{ size:A5; margin:0; }
@media print{
  body.st-in > *:not(#stLop){ display:none !important; }
  body.st-in{ background:#fff !important; }
  body.st-in .st-lop{ position:static; padding:0; background:none; display:block; overflow:visible; }
  body.st-in .st-thanh, body.st-in .st-ghi-chu, body.st-in .st-do{ display:none !important; }
  body.st-in .st-sach{ width:auto; }
  body.st-in .st-trai, body.st-in .st-trai.hien{ display:block; box-shadow:none; border-radius:0; }
  body.st-in .st-trang{ width:148mm; height:210mm; aspect-ratio:auto; page-break-after:always; break-after:page; box-shadow:none !important; }
  body.st-in .st-trang-trong{ display:none; }
  body.st-in .st-than{ overflow:hidden; }
  body.st-in .st-giai{ display:block !important; } body.st-in .st-giai-hang{ display:none; }
  body.st-in *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}


/* ===== IN SÁCH RA PDF kiểu Sổ tay Marvel (30/10/2026, js/sach-in-pdf.js) — dùng lại khối .st-* của Sổ tay; mọi cỡ chữ theo cqw nên A5 và A4 giống hệt nhau ===== */
.sp-luoi{ width:min(1240px,100%); display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:18px; }
.sp-luoi .st-trang{ box-shadow:0 10px 30px rgba(0,0,0,.5); border-radius:4px; }
.sp-lop .st-so-dau select{ padding:3px 6px; border:1px solid #c9a24a; border-radius:8px; color:#3a1d12; background:#fff; }
.sp-lop .st-ghi-chu{ min-height:1.5em; }
.sp-trang .st-chan{ flex-direction:row; } .sp-trang.le .st-chan{ flex-direction:row-reverse; }
.sp-trang .st-dau h2{ font-size:7.6cqw; } .sp-trang .st-dau.c2 h2{ font-size:5.8cqw; } .sp-trang .st-dau.c3 h2{ font-size:4.6cqw; }
.sp-trang .st-phu{ max-width:70cqw; overflow:hidden; text-overflow:ellipsis; }
.sp-trang .st-than img{ max-height:46cqw; object-fit:contain; }
/* dải tiêu đề phần: icon + thanh navy */
.sp-dai h3{ font-size:3.2cqw; }
/* câu hỏi */
.sp-cau{ padding:.8cqw 1.4cqw 1.8cqw; border-bottom:.2cqw solid rgba(184,134,42,.4); }
/* dòng kẻ viết lời giải (bản học sinh): nét liền đen–đỏ xen kẽ, đầu dòng 1 có biểu tượng Lời giải — không dùng nét chấm */
/* công thức nằm trọn trong 1 dòng, không bị ngắt giữa chừng sau dấu + − = (KaTeX mặc định cho ngắt giữa các .base); công thức dài hơn cả dòng mới cho ngắt (.sp-katex-cho) */
.sp-cau .katex .katex-html{ display:inline-block; white-space:nowrap; } .sp-cau .katex .katex-html.sp-katex-cho{ display:inline; white-space:normal; }
/* công thức vừa cỡ chữ (KaTeX mặc định phóng 1,21 lần → quá to so với Palatino) và không kéo giãn dòng */
.sp-cau .katex{ font-size:1.02em; } .sp-cau .st-de, .sp-cau .st-giai{ line-height:1.55; } .sp-cau .katex .katex-html{ line-height:1.2; }
.sp-cau-ke{ padding-bottom:1.8cqw; } .sp-cau-ke:not(:has(.vd)){ border-bottom:.2cqw solid rgba(184,134,42,.4); } .sp-cau-ke > .sp-cau:not(.vd){ border-bottom:0; padding-bottom:.4cqw; }
.st-ke.sp-ke{ margin:2.4cqw 2.4cqw 0 11cqw; } .st-ke.sp-ke i{ display:flex; align-items:flex-end; height:6.4cqw; border-bottom:.28cqw solid #1b2540; } .st-ke.sp-ke i:nth-child(even){ border-bottom-color:#b0182a; }
.sp-cau-ke:not(:has(.vd)) .st-ke.sp-ke{ margin-right:1.4cqw; margin-left:9cqw; }
.sp-ke-nhan{ display:inline-flex; align-items:center; gap:1cqw; margin-bottom:.5cqw; padding:.3cqw 2.2cqw .3cqw 1cqw; background:linear-gradient(180deg,#fff3c8,#efcf7a); border:.3cqw solid #b8862a; border-radius:1cqw; font-weight:900; font-size:2.6cqw; line-height:1.2; color:#5a3a05; text-transform:uppercase; letter-spacing:.1cqw; } .sp-ke-nhan b{ display:flex; width:3.6cqw; height:3.6cqw; }
.sp-cau.vd{ background:#fffdf6; border:.3cqw solid #d7a94a; border-radius:1.8cqw; padding:1.8cqw 2.4cqw; box-shadow:0 .4cqw 1cqw rgba(0,0,0,.12); }
.sp-trang .st-sttt.dai{ width:auto; min-width:6.4cqw; padding:0 2cqw; border-radius:3.2cqw; font-size:3cqw; letter-spacing:.2cqw; }
.sp-cau.vd .st-sttt{ background:linear-gradient(100deg,#6d0c18,#a8162a); border:.3cqw solid #d7a94a; }
.sp-sao{ flex:none; display:flex; gap:.3cqw; margin-top:.9cqw; } .sp-sao i{ display:block; width:3cqw; height:3cqw; }
.sp-lc{ list-style:none; margin:1.2cqw 0 0 9cqw; padding:0; display:grid; gap:.8cqw 3cqw; } .sp-lc.c1{ grid-template-columns:1fr; } .sp-lc.c2{ grid-template-columns:1fr 1fr; } .sp-lc.c4{ grid-template-columns:repeat(4,1fr); }
.sp-lc li{ display:flex; gap:1.6cqw; align-items:center; font-size:3.5cqw; padding:.4cqw 1cqw; border-radius:1.4cqw; } .sp-lc li.dung{ background:rgba(215,169,74,.28); box-shadow:inset 0 0 0 .3cqw #d7a94a; }
.sp-ky{ flex:none; width:5.4cqw; height:5.4cqw; border-radius:50%; border:.35cqw solid #0c1c3f; color:#0c1c3f; background:#fffdf6; font-weight:900; font-size:2.8cqw; display:inline-flex; align-items:center; justify-content:center; }
.sp-lc li.dung .sp-ky{ background:#d7a94a; border-color:#8a5d0c; color:#2b1a00; }
.sp-ds{ margin:1.2cqw 0 0 9cqw; display:flex; flex-direction:column; gap:.9cqw; }
.sp-ds-hang{ display:grid; grid-template-columns:auto 1fr auto auto; gap:1.6cqw; align-items:center; font-size:3.5cqw; } .sp-ds-hang > b{ color:#9e1224; }
.sp-o{ font-style:normal; width:6.4cqw; height:5.2cqw; border:.35cqw solid #0c1c3f; border-radius:1.3cqw; font-size:2.7cqw; font-weight:900; display:flex; align-items:center; justify-content:center; color:#0c1c3f; background:#fffdf6; }
.sp-o.dung{ background:#1c8a4a; border-color:#136334; color:#fff; } .sp-o.sai{ background:#b3162a; border-color:#7d0f1d; color:#fff; }
.sp-so-hang{ display:flex; gap:1.6cqw; align-items:center; margin:1.6cqw 0 0 9cqw; }
.sp-so-nhan{ background:#0c1c3f; color:#f6e8c4; font-weight:900; font-size:2.4cqw; letter-spacing:.3cqw; padding:1.4cqw 2.6cqw; border-radius:1.2cqw; border:.3cqw solid #d7a94a; }
.sp-so-hang i{ width:6.6cqw; height:6.6cqw; border:.4cqw solid #0c1c3f; border-radius:1.3cqw; background:#fffdf6; box-shadow:.4cqw .4cqw 0 #0c1c3f; }
.sp-dapan{ display:inline-flex; align-items:center; gap:1.4cqw; margin:1.4cqw 0 0 9cqw; padding:.8cqw 2.6cqw .8cqw 1.2cqw; font-size:3.3cqw; background:linear-gradient(180deg,#fff8dc,#fbe9ad); border:.3cqw solid #d7a94a; border-radius:3cqw; color:#5a1a17; } .sp-dapan-ic{ width:4.6cqw; height:4.6cqw; display:flex; } .sp-dapan span:last-child{ color:#9e1224; font-weight:900; }
.sp-lg{ margin:1.4cqw 0 0 9cqw; } .sp-lg-nhan{ display:inline-flex; align-items:center; gap:1.2cqw; background:linear-gradient(180deg,#fff3c8,#efcf7a); border:.3cqw solid #b8862a; border-bottom:0; border-radius:1.2cqw 1.2cqw 0 0; padding:.5cqw 3cqw .5cqw 1.4cqw; font-weight:900; font-size:2.8cqw; color:#5a3a05; } .sp-lg-nhan i{ width:3.8cqw; height:3.8cqw; display:flex; }
.sp-lg .st-giai{ display:block; font-size:3.3cqw; }
.sp-bdan{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.2cqw; }
.sp-bdan-o{ display:flex; border:.3cqw solid #d7a94a; border-radius:1.2cqw; overflow:hidden; font-weight:900; font-size:3cqw; } .sp-bdan-o b{ background:#0c1c3f; color:#f6e8c4; padding:.7cqw 1.6cqw; min-width:5cqw; text-align:center; } .sp-bdan-o span{ flex:1; text-align:center; background:#fff8dc; color:#9e1224; padding:.7cqw 0; }
/* bìa */
.sp-bia{ background:radial-gradient(circle at 50% 36%,#2b4f96 0,#16305f 38%,#0a1736 82%); color:#fff3d0; }
.sp-bia::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle,rgba(255,255,255,.07) .5cqw,transparent .6cqw) 0 0/3.2cqw 3.2cqw; pointer-events:none; }
.sp-bia::after{ content:''; position:absolute; left:-20cqw; right:-20cqw; top:46%; height:30cqw; background:linear-gradient(100deg,#6d0c18,#a8162a 55%,#6d0c18); transform:rotate(-8deg); box-shadow:0 0 0 .8cqw #d7a94a, 0 2cqw 4cqw rgba(0,0,0,.45); }
.sp-bia-vien{ position:absolute; inset:2.4cqw; border:.7cqw solid #d7a94a; border-radius:3cqw; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:4cqw 4cqw 3.6cqw; }
.sp-bia-tren{ display:flex; flex-direction:column; align-items:center; gap:1cqw; } .sp-bia-tren b{ background:#7d0f1d; color:#f7e7c0; font-size:2.6cqw; font-weight:800; letter-spacing:.45cqw; padding:1cqw 6cqw; border-radius:1.2cqw; border:.3cqw solid #d7a94a; } .sp-bia-sao{ color:#f3b82a; letter-spacing:1.4cqw; font-size:3.4cqw; }
.sp-bia-giua{ display:flex; flex-direction:column; align-items:center; gap:3.4cqw; width:100%; }
.sp-bia-logo{ width:34cqw; height:34cqw; border-radius:50%; background:#fffaf0; border:1cqw solid #d9a441; box-shadow:0 0 0 .6cqw #7a5410, 0 0 5cqw 1.4cqw rgba(255,150,60,.55); display:flex; align-items:center; justify-content:center; overflow:hidden; } .sp-bia-logo img{ width:100%; height:100%; object-fit:contain; } .sp-bia-logo.khong{ display:none; }
.sp-bia-ten{ margin:0; text-align:center; font-size:11cqw; line-height:1.05; font-weight:900; text-transform:uppercase; background:linear-gradient(180deg,#fff0b8,#e0a93a 70%,#b9801f); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 .5cqw .3cqw rgba(0,0,0,.6)); overflow-wrap:anywhere; } .sp-bia-ten.c2{ font-size:8cqw; } .sp-bia-ten.c3{ font-size:6cqw; }
.sp-bia-phu{ background:#0f244f; color:#7fd0ff; border:.3cqw solid #d7a94a; border-radius:1.2cqw; padding:.8cqw 8cqw; font-size:2.6cqw; font-weight:800; letter-spacing:.9cqw; }
.sp-bia-chan{ display:flex; align-items:center; gap:4cqw; width:100%; } .sp-bia-chan > div{ flex:1; text-align:center; display:flex; flex-direction:column; gap:.8cqw; } .sp-bia-chan b{ font-size:3.1cqw; letter-spacing:.3cqw; color:#f3b82a; } .sp-bia-chan small{ font-size:2cqw; color:#d9c9b0; line-height:1.4; }
.sp-bia-orb{ position:relative !important; right:auto !important; top:auto !important; transform:none !important; flex:none; } .sp-bia-orb.b{ --st-glow:rgba(60,170,255,.85); background:radial-gradient(circle at 40% 38%,#eaffff 0 12%,#58d0ff 30%,#1472d8 62%,#07235f) !important; } .sp-bia-orb.a{ --st-glow:rgba(255,92,40,.85); background:radial-gradient(circle at 40% 38%,#fff6d8 0 12%,#ff9a3c 30%,#e12a14 62%,#6e0b05) !important; }
/* trang mở chương */
.sp-ch-giua{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4cqw; text-align:center; padding:0 4cqw; }
.sp-ch-hex{ width:30cqw; height:33cqw; background:linear-gradient(160deg,#a8162a,#6d0c18); clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff3d0; filter:drop-shadow(0 1cqw .8cqw rgba(0,0,0,.45)); } .sp-ch-hex small{ font-size:3cqw; font-weight:800; letter-spacing:.6cqw; color:#f3b82a; } .sp-ch-hex b{ font-size:15cqw; line-height:1; font-weight:900; }
.sp-ch-giua h2{ margin:0; font-size:8cqw; line-height:1.1; font-weight:900; text-transform:uppercase; color:#6d0c18; overflow-wrap:anywhere; }
.sp-ch-phu{ position:static !important; transform:none !important; }
.sp-ch-ds{ list-style:none; margin:2cqw 0 0; padding:0; width:100%; display:flex; flex-direction:column; gap:1.4cqw; text-align:left; font-size:3.4cqw; font-weight:700; } .sp-ch-ds li{ display:flex; align-items:center; gap:2cqw; padding:.8cqw 2cqw .8cqw 1cqw; background:#fffdf6; border:.3cqw solid #d7a94a; border-radius:0 2cqw 2cqw 0; } .sp-ch-ds .st-so{ margin-right:0; }
/* mục lục */
.sp-muc{ display:flex; flex-direction:column; gap:1.5cqw; }
.sp-mc-ch{ display:flex; align-items:center; gap:2cqw; background:linear-gradient(100deg,#132a57,#0c1c3f); color:#f6e8c4; padding:1.1cqw 3cqw 1.1cqw 1cqw; border-radius:0 2cqw 0 0; border-bottom:.3cqw solid #d7a94a; font-size:3.6cqw; margin-top:1.2cqw; } .sp-mc-ch b{ text-transform:uppercase; letter-spacing:.15cqw; } .sp-mc-ch .sp-cham{ border-bottom-color:rgba(246,232,196,.5); } .sp-mc-ch .st-so{ margin-right:0; }
.sp-mc-b{ display:flex; align-items:baseline; gap:1.4cqw; padding:0 3cqw 0 5cqw; font-size:3.5cqw; }
.sp-cham{ flex:1; border-bottom:.3cqw dotted #b49a6a; align-self:flex-end; margin-bottom:1cqw; }
.sp-mc-t{ flex:none; min-width:7cqw; text-align:center; background:#9e1224; color:#fff3d0; font-weight:900; font-size:3cqw; border-radius:1cqw; border:.25cqw solid #d7a94a; padding:.1cqw 1.4cqw; }
.sp-mc-cach{ height:2cqw; }
@media print{
  body.st-in .sp-luoi{ display:block; width:auto; }
  body.st-in .sp-luoi .st-trang{ border-radius:0; box-shadow:none !important; }
}
.sp-ch-sao{ width:16cqw; height:16cqw; display:block; }
.sp-bia-chan b{ white-space:nowrap; }
/* tab "Sổ tay": thanh chọn + khung xem nhúng trong trang */
.stt-hang{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 12px; margin:6px 0 8px; } .stt-hang label{ margin:0; font-size:12.5px; font-weight:700; color:#5d4d45; display:grid; gap:2px; min-width:180px; }
.stt-nut{ border:2px solid #15110f; background:#fff; border-radius:6px; padding:5px 12px; font-weight:800; font-size:13px; cursor:pointer; color:#15110f; box-shadow:2px 2px 0 #15110f; } .stt-nut:hover{ background:#fff7de; }
.stt-msg{ margin:4px 0; font-size:13px; font-weight:700; } .stt-msg:empty{ display:none; } .stt-msg.ok{ color:#14693a; } .stt-msg.loi{ color:#a30f20; }
.stt-trong{ padding:16px; color:#6f635b; }
.stt-xem .st-lop.st-nhung{ position:relative; inset:auto; z-index:auto; padding:0; background:none; overflow:visible; display:block; }
.stt-xem .st-nhung .st-thanh{ position:static; margin:0 auto 10px; box-shadow:0 2px 8px rgba(0,0,0,.18); border:1px solid #e0c98a; }
.stt-xem .st-nhung .st-sach{ margin:0 auto; } .stt-xem .st-nhung .st-ghi-chu{ margin:8px auto 0; color:#6f635b; }
.stt-xem .st-nhung .st-trai{ box-shadow:0 8px 22px rgba(0,0,0,.35); }
/* khổ sách giáo khoa 19 × 26,5 cm: trang cao hơn A5 một chút; thân bị thu (zoom) để chữ ~11–12 pt như SGK, đầu trang gọn hơn */
.st-trang.sgk{ aspect-ratio:190/265; }
.sgk .st-than{ zoom:.62; }
.sgk .st-dau{ zoom:.8; }
.sgk .st-hang-nho{ margin-top:-3.2cqw; }
.sgk .st-chan{ padding:1cqw 0 1.2cqw; }
.sgk .st-than img{ max-height:60cqw; }
/* băng "PHẦN I · TỰ LUẬN" + dòng dặn như mẫu hiện có */
.sp-phan header{ display:flex; align-items:center; position:relative; z-index:1; }
.sp-phan h3{ margin:0; flex:1; background:linear-gradient(100deg,#6d0c18,#a8162a); color:#fff3d0; font-size:3.6cqw; font-weight:900; text-transform:uppercase; letter-spacing:.25cqw; padding:1.3cqw 3cqw; border-radius:0 1.6cqw 1.6cqw 0; border:.3cqw solid #d7a94a; border-left:0; }
.sp-phan .st-so{ background:#0c1c3f; border:.3cqw solid #d7a94a; }
.sp-phan-bieu{ position:absolute; right:2.4cqw; top:50%; transform:translateY(-50%); width:6cqw; height:6cqw; padding:.8cqw; border-radius:50%; background:#fff3d0; border:.35cqw solid #d7a94a; display:flex; }
.sp-phan p{ margin:.8cqw 0 0 9cqw; font-style:italic; font-size:3cqw; color:#6d0c18; }
/* chữ tiêu đề dùng nền chuyển màu cắt theo chữ (background-clip:text) chỉ tô trong khung dòng → dấu tiếng Việt ở trên/dưới (Í, Ẫ, Ụ, Ậ…) bị KHUYẾT. Nới khung dòng bằng padding rồi bù lại bằng margin âm để bố cục không đổi */
.st-dau h2, .sp-bia-ten{ line-height:1.25; padding:.2em .06em .3em; margin-top:-.2em; margin-bottom:-.3em; }
.sp-bia-ten{ margin-top:0; margin-bottom:0; }
/* nhãn nhỏ dưới tiêu đề (BÀI 2 · VÀO TRẬN): không cắt (overflow) để dấu tiếng Việt không bị khuyết; khung cao hơn một chút */
.sp-trang .st-phu{ overflow:visible; text-overflow:clip; max-width:none; line-height:1.9; padding-top:.2cqw; padding-bottom:.2cqw; }
/* phông chữ câu hỏi: Palatino Linotype (máy không có thì Book Antiqua / Palatino / TeX Gyre Pagella); ký hiệu A B C D, ô Đ/S, nhãn giữ phông của trang */
.sp-cau .st-de, .sp-cau .sp-lc li > span:not(.sp-ky), .sp-cau .sp-ds-hang > span, .sp-cau .st-giai, .sp-cau .st-giai p{ font-family:'Palatino Linotype','Book Antiqua',Palatino,'TeX Gyre Pagella','URW Palladio L',Georgia,serif; }
.sp-cau .st-de{ font-size:4cqw; } .sp-cau .sp-lc li{ font-size:3.8cqw; } .sp-cau .sp-ds-hang{ font-size:3.8cqw; } .sp-cau .sp-lg .st-giai{ font-size:3.6cqw; }
/* trang nối tiếp (không lặp băng tiêu đề / nhãn "tiếp"): chỉ còn dải thương hiệu nhỏ ở trên, nội dung bắt đầu ngay */
.sp-trang.tiep .st-than{ padding-top:3.4cqw; }
/* khổ SGK: cỡ chữ in thật = cqw × 3,34 pt (trang rộng 19 cm, thân zoom .62). Đề + phương án 12 pt, lời giải 11 pt, lý thuyết 12 pt — cỡ thường gặp ở sách giáo khoa Toán */
.sgk .sp-cau .st-de, .sgk .sp-cau .sp-lc li, .sgk .sp-cau .sp-ds-hang{ font-size:3.6cqw; }
.sgk .sp-cau .sp-lg .st-giai{ font-size:3.3cqw; }
.sgk .st-gach li, .sgk .st-chu{ font-size:3.6cqw; } .sgk .st-cth{ font-size:4cqw; }
/* logo vòng tròn Toán Thầy Hạnh in mờ giữa trang (dưới chữ) */
.st-trong{ isolation:isolate; }
.sp-chim{ position:absolute; left:50%; top:52%; width:58%; height:auto; transform:translate(-50%,-50%); opacity:.1; z-index:-1; pointer-events:none; user-select:none; }
/* ===== MÀU TRANG "TRẮNG": CHỈ nền trang đổi sang trắng (bỏ nền kem), mọi dải màu / thẻ / tiêu đề giữ nguyên ===== */
.mau-trang .st-trang:not(.sp-bia):not(.sp-chuong){ background:#fff !important; }
.mau-trang .st-trang:not(.sp-bia):not(.sp-chuong) .st-trong{ background:transparent; }
/* ===== LỜI NÓI ĐẦU (js/sach-in-pdf.js) — trang đầu sách, không in số trang; số trang ở chân trang lời nói đầu + mục lục để trống ===== */
.st-so-trang.an{ visibility:hidden; }
.sp-lnd .st-trong{ display:flex; flex-direction:column; }
.sp-lnd-dau{ display:flex; align-items:center; justify-content:center; gap:3cqw; margin:1.8cqw 0 1.2cqw; } .sp-lnd-dau > div{ display:flex; flex-direction:column; } .sp-lnd-dau b{ font-size:5.6cqw; font-weight:900; color:#0c1c3f; letter-spacing:.3cqw; line-height:1.1; } .sp-lnd-dau small{ font-size:2.1cqw; font-weight:800; color:#9e1224; letter-spacing:.4cqw; }
.sp-lnd-logo{ width:11cqw; height:11cqw; flex:none; } .sp-lnd-logo img{ width:100%; height:100%; object-fit:contain; }
.sp-lnd-bang-ten{ margin:.4cqw 0 2cqw; padding:1.2cqw 8cqw; text-align:center; background:linear-gradient(100deg,#6d0c18,#a8162a 55%,#6d0c18); border:.5cqw solid #d7a94a; border-radius:1.6cqw; clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%); }
.sp-lnd-ten{ margin:0; font-size:9.6cqw; line-height:1.3; padding:.2em .1em .3em; font-weight:900; text-transform:uppercase; letter-spacing:.3cqw; color:transparent; background:linear-gradient(180deg,#fff0b8,#e0a93a 70%,#b9801f); -webkit-background-clip:text; background-clip:text; display:inline-block; }
.sp-lnd-the{ flex:1; min-height:0; overflow:hidden; border:.5cqw solid #d7a94a; border-radius:3cqw; background:#fff; padding:2.4cqw 3.4cqw; display:flex; flex-direction:column; gap:2cqw; font-family:'Palatino Linotype','Book Antiqua',Palatino,'TeX Gyre Pagella',Georgia,serif; font-size:calc(2.9cqw * var(--k,1)); line-height:1.5; color:#3a1d12; }
.sgk .sp-lnd-the{ font-size:calc(2.15cqw * var(--k,1)); gap:1.5cqw; }
.sp-lnd-bang{ display:flex; align-items:center; background:linear-gradient(100deg,#6d0c18,#a8162a); border:.3cqw solid #d7a94a; border-radius:7cqw 2cqw 2cqw 7cqw; color:#fff3d0; margin:-.4cqw 0 .4cqw; } .sp-lnd-bang h3{ margin:0; flex:1; font-size:3.1cqw; font-weight:900; text-transform:uppercase; padding:1.5cqw 3cqw 1.5cqw 1.4cqw; line-height:1.25; font-family:'Be Vietnam Pro',system-ui,sans-serif; }
.sgk .sp-lnd-bang h3{ font-size:2.5cqw; }
.sp-lnd-bieu{ flex:none; width:7.4cqw; height:7.4cqw; border-radius:50%; background:#fff3d0; border:.35cqw solid #d7a94a; padding:1cqw; margin-left:.8cqw; display:flex; }
.sp-lnd-chao{ margin:0; display:flex; align-items:center; gap:2cqw; color:#9e1224; font-style:italic; font-weight:700; font-size:1.18em; } .sp-lnd-chao i, .sp-lnd-ket i{ flex:none; width:6.5cqw; height:6.5cqw; display:flex; }
.sp-lnd-doan{ margin:0; display:flex; gap:2.2cqw; align-items:flex-start; text-align:justify; } .sp-lnd-doan i{ flex:none; width:4.8cqw; height:4.8cqw; margin-top:.5cqw; display:flex; } .sp-lnd-doan strong, .sp-lnd-ket strong{ color:#9e1224; }
.sp-lnd-ket{ margin:auto 0 0; display:flex; align-items:center; gap:2cqw; color:#9e1224; font-style:italic; font-weight:700; font-size:1.18em; }
.sp-lnd-gts{ display:flex; justify-content:space-around; align-items:center; gap:1cqw; margin:2cqw 0 .6cqw; padding:1.6cqw 1cqw; border-top:.3cqw solid #d7a94a; }
.sp-lnd-gt{ display:flex; align-items:center; gap:1.4cqw; } .sp-lnd-gt span{ width:6.6cqw; height:6.6cqw; flex:none; display:flex; } .sp-lnd-gt b{ font-size:2.3cqw; font-weight:900; text-transform:uppercase; color:#6d0c18; line-height:1.15; max-width:15cqw; }
.sgk .sp-lnd-gt b{ font-size:1.9cqw; }
/* hộp sửa lời nói đầu */
.sp-sua{ position:fixed; inset:0; z-index:3100; background:rgba(10,4,6,.72); display:flex; align-items:center; justify-content:center; padding:12px; }
.sp-sua-than{ width:min(640px,100%); max-height:94vh; overflow:auto; background:#fff7e8; color:#3a1d12; border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; box-shadow:0 10px 40px rgba(0,0,0,.6); }
.sp-sua-than h3{ margin:0; font-size:18px; color:#7a1020; } .sp-sua-than label{ display:flex; flex-direction:column; gap:4px; font-weight:700; font-size:13.5px; }
.sp-sua-than input, .sp-sua-than textarea{ border:1px solid #c9a24a; border-radius:8px; padding:6px 8px; font:inherit; font-weight:400; background:#fff; color:#3a1d12; } .sp-sua-than textarea{ resize:vertical; line-height:1.45; }
.sp-sua-than fieldset{ border:1px solid #c9a24a; border-radius:8px; padding:8px 10px; display:grid; grid-template-columns:1fr 1fr; gap:6px 8px; } .sp-sua-than legend{ font-size:13px; font-weight:700; padding:0 6px; width:auto; margin:0; float:none; }
.sp-sua-tin{ margin:0; min-height:1.3em; font-size:13px; color:#7a1020; } .sp-sua-hang{ display:flex; gap:8px; flex-wrap:wrap; }
/* gọn đầu trang lời nói đầu để thẻ chữ rộng hơn */
.sp-lnd-dau{ margin:1cqw 0 .6cqw; gap:2.4cqw; } .sp-lnd-logo{ width:8.4cqw; height:8.4cqw; } .sp-lnd-dau b{ font-size:4.4cqw; } .sp-lnd-dau small{ font-size:1.8cqw; }
.sp-lnd-bang-ten{ margin:.2cqw 0 1.4cqw; padding:.4cqw 8cqw; } .sp-lnd-ten{ font-size:7.4cqw; }
.sp-lnd-gts{ margin:1.2cqw 0 .2cqw; padding:1cqw .6cqw; }
.sp-lnd .st-chan{ padding-top:.8cqw; }
/* lời nói đầu: bỏ cụm logo + tên tập đoàn; băng tiêu đề nhỏ gọn */
.sp-lnd-bang-ten{ margin:1.2cqw auto 1.6cqw; width:62%; padding:.2cqw 4cqw; border-width:.35cqw; }
.sp-lnd-ten{ font-size:5.2cqw; letter-spacing:.2cqw; padding:.15em .1em .22em; }
/* biểu tượng siêu anh hùng bên TRÁI băng tiêu đề (đối xứng với viên ngọc bên phải) */
.sp-dau-bieu{ position:absolute; left:3cqw; top:50%; transform:translateY(-50%); width:13cqw; height:13cqw; padding:2.2cqw; border-radius:50%; border:.9cqw solid #d9a441; box-shadow:0 0 0 .5cqw #7a5410, 0 0 3cqw .6cqw var(--st-glow,rgba(255,120,60,.7)); display:flex; }
.st-trang.trai .sp-dau-bieu{ --st-glow:rgba(70,150,255,.75); background:radial-gradient(circle at 40% 35%,#2f5fb0,#0c1c3f 70%); }
.st-trang.phai .sp-dau-bieu{ --st-glow:rgba(255,90,60,.75); background:radial-gradient(circle at 40% 35%,#d02a3c,#5a0a14 70%); }
.sp-dau-bieu svg{ filter:drop-shadow(0 .3cqw .2cqw rgba(0,0,0,.5)); }
/* chữ HOA có dấu (Ậ, Ể, Ỉ, Ặ…) cao hơn dòng thường: nới khung các dải tiêu đề nhỏ để dấu không lem ra ngoài viền */
.sp-trang .st-the h3, .sp-trang .st-dai h3, .sp-trang .sp-phan h3, .sp-trang .st-can h3, .sp-trang .st-nho h3{ line-height:1.45; padding-top:1.7cqw; padding-bottom:1.7cqw; overflow-wrap:anywhere; }
.sp-trang .st-can header{ padding-top:1.1cqw; padding-bottom:1.1cqw; } .sp-trang .st-nho header{ padding-top:.9cqw; padding-bottom:.9cqw; }
.sp-trang .sp-phan h3{ padding-top:1.5cqw; padding-bottom:1.5cqw; }
/* liên hệ ở chân trang lời nói đầu */
.sp-lnd-lh{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4cqw 3cqw; margin:.4cqw 0 .6cqw; font-size:1.9cqw; font-weight:700; color:#6d0c18; } .sp-lnd-lh span{ white-space:nowrap; }
.sgk .sp-lnd-lh{ font-size:1.6cqw; }
.sp-sua-hang select{ border:1px solid #c9a24a; border-radius:9px; padding:5px 8px; background:#fff; color:#7a1020; font-weight:700; }
/* đúng sai ý ngắn: 2 cột (a b / c d), mỗi ý có ô Đ/S riêng */
.sp-ds.hai{ display:grid; grid-template-columns:1fr 1fr; gap:1.1cqw 4cqw; }
.sp-ds.hai .sp-ds-hang{ gap:1.2cqw; }
/* số chương La Mã (I, II, III, IV…): chữ dài hơn nên thu nhỏ trong lục giác */
.sp-ch-hex b.dai{ font-size:10cqw; letter-spacing:-.2cqw; }
.sp-mc-ch .st-so.dai{ font-size:2.6cqw; letter-spacing:-.1cqw; }
/* ===== TRANG MỞ CHƯƠNG kiểu truyện tranh siêu anh hùng: nền đỏ rực + chấm bi + tia vàng, lục giác số chương phát sáng, băng tên chương nghiêng, thẻ bài có bóng cứng ===== */
.sp-chuong{ background:linear-gradient(165deg,#4a0810 0%,#a8162a 36%,#6d0c18 68%,#25040d 100%) !important; color:#fff3d0; }
.sp-chuong::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle,rgba(255,255,255,.09) .5cqw,transparent .6cqw) 0 0/3.2cqw 3.2cqw; pointer-events:none; }
.sp-chuong::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(115deg,transparent 0 9cqw,rgba(245,184,46,.07) 9cqw 10.2cqw); pointer-events:none; }
.sp-chuong .st-trong{ background:transparent; border-color:#d7a94a; z-index:1; }
.sp-chuong .sp-chim{ opacity:.07; }
.sp-chuong .st-khau{ color:#e8d5b0; }
.sp-ch-giua{ gap:3cqw; padding:0 6cqw; }
.sp-ch-sao3{ color:#f3b82a; letter-spacing:1.6cqw; font-size:3.4cqw; text-shadow:0 .3cqw .3cqw rgba(0,0,0,.5); }
.sp-ch-hexw{ position:relative; width:58cqw; height:50cqw; display:flex; align-items:center; justify-content:center; margin:-3cqw 0; }
.sp-ch-tia{ position:absolute; inset:-6cqw; border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(245,184,46,.6) 0 3.5deg,transparent 3.5deg 11deg); -webkit-mask:radial-gradient(circle,#000 22%,transparent 68%); mask:radial-gradient(circle,#000 22%,transparent 68%); }
.sp-ch-hexc{ position:relative; filter:drop-shadow(0 1.2cqw .8cqw rgba(0,0,0,.55)) drop-shadow(0 0 2.2cqw rgba(245,184,46,.65)); }
.sp-ch-hex{ position:relative; width:34cqw; height:37cqw; background:linear-gradient(160deg,#ffe58a,#d9a441 55%,#8a5d0c); clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); display:flex; flex-direction:column; align-items:center; justify-content:center; filter:none; color:#fff3d0; }
.sp-ch-hex::before{ content:''; position:absolute; inset:1.4cqw; background:linear-gradient(160deg,#1d3d78,#0a1736 70%); clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
.sp-ch-hex > *{ position:relative; }
.sp-ch-hex small{ font-size:3cqw; letter-spacing:.7cqw; color:#f3b82a; font-weight:900; }
.sp-ch-hex b{ font-size:15cqw; line-height:1.05; font-weight:900; background:linear-gradient(180deg,#fff,#ffe58a 70%,#e0a93a); -webkit-background-clip:text; background-clip:text; color:transparent; padding:0 .05em; } .sp-ch-hex b.dai{ font-size:10cqw; }
.sp-ch-sao{ width:16cqw; height:16cqw; }
.sp-ch-bang{ position:relative; width:calc(100% + 12cqw); margin:1cqw -6cqw 0; transform:rotate(-3deg); background:linear-gradient(100deg,#07122c,#16305f 50%,#07122c); border-top:.7cqw solid #d7a94a; border-bottom:.7cqw solid #d7a94a; padding:2.2cqw 9cqw; box-shadow:0 1.1cqw 0 rgba(0,0,0,.4); text-align:center; }
.sp-ch-giua .sp-ch-bang h2{ margin:0; font-size:7.4cqw; line-height:1.3; padding:.15em .06em .25em; font-weight:900; text-transform:uppercase; letter-spacing:.2cqw; background:linear-gradient(180deg,#fff0b8,#e0a93a 70%,#b9801f); -webkit-background-clip:text; background-clip:text; color:transparent; overflow-wrap:anywhere; } .sp-ch-giua .sp-ch-bang h2.c2{ font-size:5.6cqw; } .sp-ch-giua .sp-ch-bang h2.c3{ font-size:4.4cqw; }
.sp-ch-ds{ gap:2.2cqw; margin-top:4cqw; } .sp-ch-ds li{ background:#fffdf6; color:#15110f; border:.4cqw solid #15110f; border-radius:1.4cqw; box-shadow:.8cqw .8cqw 0 #15110f; padding:1cqw 3cqw 1cqw 1.2cqw; }
/* hình trong đề: gần vuông / cao → nổi bên PHẢI cạnh chữ (đề + phương án chảy quanh), cỡ vừa phải; hình dài ngang → dưới đề, canh giữa. Nền trắng của ảnh hoà vào nền trang (multiply) */
.sp-cau{ display:flow-root; }
.sp-hinh-ben{ float:right; margin:.4cqw 0 1.2cqw 3cqw; width:34%; max-width:34%; }
.sp-hinh-ben img, .sp-hinh-duoi img{ display:block; width:auto; height:auto; max-width:100%; mix-blend-mode:multiply; image-rendering:auto; margin:0; border-radius:0; }
.sp-hinh-ben img{ width:100%; max-height:30cqw; object-fit:contain; }
/* Phương án dùng toàn bề ngang dưới hình; giữ công thức nguyên khối trước khi hạ cột. */
.sp-cau.co-hinh .sp-lc{ clear:right; }
.sp-lc.c1{ grid-template-columns:minmax(0,1fr); }
.sp-lc.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.sp-lc.c4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.sp-lc li > [data-st-chu]{ min-width:0; flex:1; }
/* sao độ khó: viên thuốc nằm vắt trên đỉnh khung câu hỏi, góc phải (bản in trắng đen vẫn rõ: sao vàng đậm trên nền kem, viền nâu) */
.sp-cau{ position:relative; } .sp-cau > .sp-sao{ position:absolute; top:-2.5cqw; right:3.4cqw; margin:0; align-items:center; gap:.5cqw; padding:.5cqw 1.8cqw; background:#fffdf6; border:.3cqw solid #b8862a; border-radius:2.4cqw; box-shadow:0 .3cqw 0 rgba(0,0,0,.1); z-index:2; line-height:0; }
.sp-cau > .sp-sao i{ width:3.4cqw; height:3.4cqw; }
/* viên sao nằm TRONG câu (hàng riêng phía trên chữ) — không vắt ra ngoài, không đè lên dòng kẻ / đường ngăn của câu trước */
.sp-cau > .sp-sao{ top:.9cqw; right:1.6cqw; } .sp-cau{ padding-top:4.6cqw; } .sp-cau.vd{ padding-top:4.8cqw; } .sp-cau.vd > .sp-sao{ right:2.4cqw; }
.sp-cau.khong-sao{ padding-top:1.2cqw; } .sp-cau.vd.khong-sao{ padding-top:1.8cqw; }
.sp-trang .st-than{ padding-top:0; } .sp-trang.tiep .st-than{ padding-top:3.4cqw; }
.sp-trang .st-than{ padding-top:2.6cqw; }
.sp-cau.co-hinh .st-cau-dau{ display:block; } .sp-cau.co-hinh .st-cau-dau > .st-sttt{ float:left; margin:.3cqw 2.6cqw .6cqw 0; }
.sp-hinh-duoi{ margin:1.2cqw auto 0; max-width:66%; text-align:center; } .sp-hinh-duoi img{ margin:0 auto; max-height:26cqw; }
.sp-cau .sp-lg, .sp-cau .sp-dapan{ clear:both; }
.sgk .sp-hinh-ben img{ max-height:34cqw; } .sgk .sp-hinh-ben{ max-width:36%; }

/* ── An toàn khi cắt xén: khung + chữ lùi vào ≥ ~8,5 mm (SGK 190 mm) cách mép giấy; trang chương nền sáng, tiết kiệm mực, in trắng đen vẫn đẹp ── */
.sp-luoi .st-trang .st-trong, .st-do .st-trang .st-trong{ inset:4.6cqw; }   /* cả trang đo (.st-do) phải cùng lề, nếu không đo chiều cao sai → chữ tràn đáy trang */
.sp-chuong{ background:linear-gradient(180deg,#fffefa,#faf3df) !important; color:#1d1a2b; }
.sp-chuong::before{ background:radial-gradient(circle,rgba(184,134,42,.16) .35cqw,transparent .45cqw) 0 0/3.2cqw 3.2cqw; }
.sp-chuong::after{ display:none; }
.sp-chuong .st-trong{ background:transparent; border-color:#b8862a; }
.sp-chuong .st-khau{ color:#7a6a58; }
.sp-chuong .sp-ch-sao3{ color:#b8862a; text-shadow:none; }
.sp-chuong .sp-ch-hexw{ width:50cqw; height:42cqw; margin:-2cqw 0; }
.sp-chuong .sp-ch-tia{ inset:-5cqw; background:repeating-conic-gradient(from 0deg,rgba(184,134,42,.30) 0 3.5deg,transparent 3.5deg 11deg); }
.sp-chuong .sp-ch-hexc{ filter:drop-shadow(0 .6cqw .4cqw rgba(0,0,0,.18)); }
.sp-chuong .sp-ch-hex{ width:29cqw; height:31.5cqw; background:linear-gradient(160deg,#ffe58a,#d9a441 55%,#b8862a); }
.sp-chuong .sp-ch-hex::before{ background:linear-gradient(160deg,#fffdf4,#fbefc9); }
.sp-chuong .sp-ch-hex small{ color:#9e1224; font-size:2.7cqw; }
.sp-chuong .sp-ch-hex b{ background:none; -webkit-text-fill-color:#0c1c3f; color:#0c1c3f; font-size:13cqw; }
.sp-chuong .sp-ch-hex b.dai{ font-size:8.6cqw; }
.sp-chuong .sp-ch-sao{ color:#b8862a; }
.sp-chuong .sp-ch-bang{ background:#fffdf6; border-top:.6cqw solid #0c1c3f; border-bottom:.6cqw solid #0c1c3f; box-shadow:0 .7cqw 0 rgba(12,28,63,.12); padding:1.8cqw 8cqw; }
.sp-chuong .sp-ch-giua .sp-ch-bang h2{ background:none; -webkit-text-fill-color:#0c1c3f; color:#0c1c3f; }
.sp-chuong .sp-ch-ds{ gap:1.5cqw; margin-top:2.4cqw; font-size:3.2cqw; }
.sp-chuong .sp-ch-ds li{ background:#fff; border:.3cqw solid #0c1c3f; box-shadow:.5cqw .5cqw 0 rgba(12,28,63,.25); padding:.6cqw 2.4cqw .6cqw 1cqw; }
.sp-chuong .sp-ch-ds.nhieu{ display:grid; grid-template-columns:1fr 1fr; gap:1.4cqw 2cqw; font-size:2.9cqw; } .sp-chuong .sp-ch-ds.nhieu li{ padding:.5cqw 1.6cqw .5cqw .8cqw; gap:1.4cqw; }
.sp-chuong .sp-ch-giua{ gap:2.2cqw; }

/* ── Tiết kiệm giấy: khoảng cách, ô Đ/S, ô đáp số, dòng kẻ, hình đều gọn lại ── */
.sp-trang .st-than{ gap:1.2cqw; } .sp-cau{ padding-bottom:1cqw; } .sp-cau-ke{ padding-bottom:1cqw; }
.st-ke.sp-ke{ margin-top:1.4cqw; } .st-ke.sp-ke i{ height:5.2cqw; } .sp-ke-nhan{ font-size:2.3cqw; padding:.2cqw 1.8cqw .2cqw .8cqw; } .sp-ke-nhan b{ width:3cqw; height:3cqw; }
.sp-lc{ margin-top:.8cqw; gap:.4cqw 2.4cqw; } .sp-lc li{ padding:.2cqw .8cqw; }
.sp-ds{ margin-top:.8cqw; gap:.5cqw; } .sp-o{ width:5cqw; height:4.2cqw; font-size:2.3cqw; border-width:.3cqw; border-radius:1cqw; }
.sp-so-hang{ margin-top:.9cqw; gap:1.2cqw; } .sp-so-hang i{ width:5cqw; height:5cqw; box-shadow:.3cqw .3cqw 0 #0c1c3f; border-width:.3cqw; } .sp-so-nhan{ font-size:2.1cqw; padding:.9cqw 2cqw; }
.sp-dapan{ margin-top:.8cqw; padding:.4cqw 2cqw .4cqw 1cqw; font-size:3cqw; }
.sp-lg{ margin-top:1cqw; }
.sp-hinh-ben{ max-width:30%; margin:.2cqw 0 .8cqw 2.4cqw; } .sp-hinh-ben img{ max-height:24cqw; } .sgk .sp-hinh-ben{ max-width:30%; } .sgk .sp-hinh-ben img{ max-height:26cqw; }
.sp-hinh-duoi{ max-width:56%; margin-top:.8cqw; } .sp-hinh-duoi img{ max-height:20cqw; } .sgk .sp-hinh-duoi img{ max-height:22cqw; }

/* ═══════ A4 IN TIẾT KIỆM (kho = A4T, class .tk): trắng đen, bỏ trang trí, lề A4 có gáy, chữ ~11,5 pt, dàn liên tục ═══════ */
.st-trang.tk{ aspect-ratio:210/297; background:#fff !important; color:#000; border-radius:0; }
.tk::before, .tk::after{ display:none !important; }
.tk .sp-chim{ display:none !important; }
.tk .st-trong{ top:5.8cqw !important; bottom:5.2cqw !important; left:6.4cqw !important; right:9.2cqw !important; padding:0 !important; border:0 !important; border-radius:0; background:none !important; }
.tk.le .st-trong{ left:9.2cqw !important; right:6.4cqw !important; }   /* trang lẻ (bên phải): gáy ở trái ~19 mm; trang chẵn: gáy ở phải */
.st-trang.tk .st-than{ zoom:.54; padding:0; gap:1.1cqw; }
.tk *{ box-shadow:none !important; text-shadow:none !important; }
.tk svg{ filter:grayscale(1); }
/* đầu trang nhỏ + chân trang gọn */
.tk .st-hang-nho{ margin:0 0 1.6cqw; padding:0 0 .6cqw; background:none !important; border:0; border-bottom:.2cqw solid #888; text-align:left; font-size:1.7cqw; letter-spacing:.3cqw; color:#444 !important; display:block; }
.tk .st-hang-nho span{ background:none !important; color:#444 !important; padding:0; border:0; font-size:1.7cqw; letter-spacing:.3cqw; }
.tk .st-dau{ display:none !important; }
.tk .st-chan{ margin-top:1cqw; padding:.8cqw 0 0; border-top:.2cqw solid #888; flex-direction:row !important; } .tk.le .st-chan{ flex-direction:row-reverse !important; }
.tk .st-so-trang{ width:auto; height:auto; background:none; border:0; border-radius:0; color:#000; font-weight:800; font-size:2.3cqw; padding:0 1cqw; }
.tk .st-khau{ font-size:1.6cqw; letter-spacing:.2cqw; color:#555; text-align:left; } .tk.le .st-khau{ text-align:right; }
/* tiêu đề trong dòng chảy */
.tk .tk-tde{ font-weight:900; color:#000; line-height:1.25; break-after:avoid; }
.tk .tk-tde.khong{ display:none; }
.tk .tk-tde.c1{ font-size:6.4cqw; text-transform:uppercase; letter-spacing:.2cqw; border-top:.7cqw solid #000; border-bottom:.3cqw solid #000; padding:1.2cqw 0 1cqw; margin-top:2.4cqw; }
.tk .tk-tde.c2{ font-size:5.6cqw; border-bottom:.4cqw solid #000; padding:.8cqw 0 .6cqw; margin-top:2cqw; }
.tk .tk-tde.c3{ font-size:4.2cqw; color:#000; padding:.4cqw 0 .2cqw; margin-top:1cqw; border-left:1.2cqw solid #000; padding-left:1.8cqw; text-transform:uppercase; letter-spacing:.15cqw; }
/* thẻ lý thuyết, dải dạng, dải phần: khung mảnh, không nền, không màu */
.tk .st-than *{ background-image:none !important; }
.tk .st-the, .tk .st-can, .tk .st-nho, .tk .st-van{ background:#fff !important; border:.3cqw solid #000 !important; border-radius:.8cqw !important; }
.tk .st-the header, .tk .st-can header, .tk .st-nho header, .tk .st-dai, .tk .sp-phan header{ background:none !important; color:#000 !important; border-radius:0 !important; border:0 !important; }
.tk .st-the h3, .tk .st-can h3, .tk .st-nho h3, .tk .st-dai h3, .tk .sp-phan h3, .tk .st-the b, .tk .st-van b{ color:#000 !important; -webkit-text-fill-color:#000 !important; background:none !important; }
.tk .st-dai{ border-bottom:.3cqw solid #000 !important; padding:.4cqw 0; margin-top:.6cqw; } .tk .st-dai-bieu, .tk .sp-phan-bieu{ display:none !important; }
.tk .sp-phan header{ border-bottom:.3cqw solid #000 !important; }
.tk .st-so, .tk .st-sttt{ background:#fff !important; color:#000 !important; border:.3cqw solid #000 !important; -webkit-text-fill-color:#000; }
.tk .sp-cau{ border-bottom:.15cqw solid #bbb; background:none; }
.tk .sp-cau.vd{ background:#fff !important; border:.3cqw solid #000 !important; border-radius:.8cqw; }
.tk .sp-lc li.dung{ background:none !important; outline:.3cqw solid #000; box-shadow:none; } .tk .sp-lc li.dung .sp-ky{ background:#000 !important; color:#fff !important; border-color:#000 !important; }
.tk .sp-ky{ background:#fff !important; color:#000 !important; border:.3cqw solid #000 !important; }
.tk .sp-o{ background:#fff !important; color:#000 !important; border-color:#000 !important; } .tk .sp-o.dung, .tk .sp-o.sai{ background:#000 !important; color:#fff !important; }
.tk .sp-so-nhan{ background:#fff !important; color:#000 !important; border:.3cqw solid #000 !important; } .tk .sp-so-hang i{ background:#fff !important; border-color:#000 !important; }
.tk .sp-lg-nhan, .tk .sp-ke-nhan, .tk .sp-dapan{ background:none !important; color:#000 !important; border:.25cqw solid #000 !important; border-radius:.6cqw; }
.tk .sp-lg .st-giai{ color:#000; }
.tk .sp-sao{ display:none !important; }
.tk .sp-hinh-ben img, .tk .sp-hinh-duoi img{ mix-blend-mode:normal; }
.tk .sp-bdan-o{ border-color:#000 !important; background:#fff !important; } .tk .sp-bdan-o b{ background:#000 !important; color:#fff !important; }
.tk .st-ke.sp-ke i{ border-bottom-color:#000 !important; } .tk .st-ke.sp-ke i:nth-child(even){ border-bottom-color:#000 !important; }
/* bìa, lời nói đầu, mục lục: trắng đen gọn */
.tk.sp-bia{ background:#fff !important; } .tk .sp-bia-vien{ background:#fff !important; border:.5cqw solid #000 !important; color:#000 !important; inset:8cqw; } .tk .sp-bia-vien *{ color:#000 !important; background:none !important; -webkit-text-fill-color:#000 !important; border-color:#000 !important; }
.tk .sp-bia-vien .st-orb, .tk .sp-bia-sao{ display:none !important; }
.tk.sp-lnd .st-trong, .tk.sp-mucluc .st-trong{ background:none !important; }
.tk .sp-lnd-ten, .tk .sp-lnd-bang, .tk .sp-lnd-bang h3, .tk .sp-lnd-the p, .tk .sp-lnd-gt b, .tk .sp-lnd-lh span{ background:none !important; color:#000 !important; -webkit-text-fill-color:#000 !important; border-color:#000 !important; }
.tk .sp-lnd-bang-ten{ background:none !important; filter:none !important; } .tk .sp-lnd-bang-ten::before{ display:none !important; } .tk .sp-lnd-the{ background:none !important; border:.3cqw solid #000 !important; }
.tk .sp-mc-ch{ background:none !important; color:#000 !important; border-bottom:.3cqw solid #000 !important; border-radius:0 !important; } .tk .sp-mc-ch .st-so{ background:#fff !important; color:#000 !important; }
.tk .sp-mc-t{ background:none !important; color:#000 !important; border:0 !important; font-weight:800; }
.tk.sp-mucluc .st-dau{ display:block !important; } .tk.sp-mucluc .st-dau h2{ font-size:6cqw; color:#000 !important; -webkit-text-fill-color:#000 !important; background:none !important; padding:0; margin:0 0 2cqw; }
.tk.sp-mucluc .st-dau .st-orb, .tk.sp-mucluc .st-dau .st-phu{ display:none !important; }
.st-trang.tk, .st-trang.tk.trai, .st-trang.tk.phai{ box-shadow:none !important; }
.tk .st-trong::before, .tk .st-trong::after{ display:none !important; }
.tk .sp-bia-logo img{ filter:grayscale(1); }
.tk.sp-mucluc .st-dau{ border:0 !important; background:none !important; }

/* ── Nhãn nhỏ "Món quà tại lớp" / "Bí mật về nhà" (bản màu): băng đỏ gọn, cùng cỡ, nằm trong dòng chảy dưới băng "Bài n. Tên bài" ── */
.sp-trang .tk-tde.c3{ display:flex; align-items:center; gap:1.8cqw; margin-top:.6cqw; padding:.5cqw 3.4cqw .5cqw .8cqw; width:max-content; max-width:100%; background:linear-gradient(100deg,#7d0f1d,#b01428); color:#ffe9a8; border:.25cqw solid #d7a94a; border-radius:0 1.6cqw 1.6cqw 0; font-weight:900; font-size:3.4cqw; line-height:1.3; letter-spacing:.3cqw; text-transform:uppercase; break-after:avoid; }
.sp-trang .tk-tde.c3 i{ flex:none; display:flex; width:4.4cqw; height:4.4cqw; padding:.4cqw; background:#fff6dc; border-radius:50%; }
.tk .tk-tde i{ display:none; }

/* ── Danh sách bài ở trang mở chương: lục giác số luôn vuông vức (không bị bóp), thẻ đều nhau, chữ gọn ── */
.sp-chuong .sp-ch-ds li .st-so{ flex:none; width:8cqw; height:8.8cqw; margin:0; font-size:3.4cqw; letter-spacing:.1cqw; background:linear-gradient(160deg,#c8102e,#8a0f1d); box-shadow:none; }
.sp-chuong .sp-ch-ds li > span:last-child{ flex:1; min-width:0; line-height:1.22; overflow-wrap:anywhere; }
.sp-chuong .sp-ch-ds li{ gap:2.2cqw; min-height:11.5cqw; padding:.8cqw 2.2cqw .8cqw 1.2cqw; border-radius:1.8cqw; }
.sp-chuong .sp-ch-ds.nhieu{ grid-auto-rows:1fr; gap:2cqw 2.2cqw; font-size:3cqw; }
.sp-chuong .sp-ch-ds.nhieu li{ gap:1.6cqw; min-height:13cqw; padding:.8cqw 1.6cqw .8cqw 1cqw; }
.sp-chuong .sp-ch-ds.nhieu li .st-so{ width:7.4cqw; height:8.2cqw; font-size:3.1cqw; }

/* số trang khổ SGK: ô nhỏ gọn (~10 × 6 mm, chữ ~11 pt) cho hợp chữ thân ~12 pt */
.sgk:not(.tk) .st-so-trang{ width:5.6cqw; height:3.4cqw; font-size:2.1cqw; border-radius:.7cqw; border-width:.2cqw; }
.sgk:not(.tk) .st-khau{ font-size:1.5cqw; letter-spacing:.5cqw; }
.sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-hexw{ width:44cqw; height:34cqw; margin:-1cqw 0; } .sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-hex{ width:25cqw; height:27cqw; } .sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-hex b{ font-size:11cqw; }
.sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-giua{ gap:1.4cqw; } .sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-ds{ margin-top:1.6cqw; }
.sp-chuong .sp-ch-ds.nhieu li{ min-height:11cqw; }

/* bảng đáp án cuối bài: 20 câu = 2 dòng × 10 cột (khổ SGK / A4 tiết kiệm); khổ khác giữ 5 cột */
.sgk .sp-bdan{ grid-template-columns:repeat(10,minmax(0,1fr)); gap:.9cqw; }
.sgk .sp-bdan-o{ font-size:2.6cqw; border-width:.25cqw; border-radius:.9cqw; } .sgk .sp-bdan-o b{ padding:.5cqw .8cqw; min-width:3.6cqw; } .sgk .sp-bdan-o span{ padding:.5cqw 0; white-space:nowrap; min-width:0; overflow:hidden; }
.sgk .sp-bdan-o span.dai{ font-size:1.9cqw; letter-spacing:-.05cqw; }
.sgk .sp-bdan-o b{ min-width:3cqw; padding:.5cqw .6cqw; }

/* hộp "Hình minh họa đã bỏ" */
.sp-hb-luoi{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; max-height:55vh; overflow:auto; margin:8px 0; }
.sp-hb-o{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; border:1px solid #e4d4c5; border-radius:8px; padding:6px; background:#fff; } .sp-hb-o img{ width:100%; height:90px; object-fit:cover; border-radius:6px; } .sp-hb-o input{ margin-right:4px; }

/* nhãn nhỏ trong bản in tiết kiệm: chữ đen, gạch đứng bên trái (không dùng băng đỏ) */
.sp-trang.tk .tk-tde.c3{ background:none !important; color:#000 !important; border:0 !important; border-left:1.2cqw solid #000 !important; border-radius:0 !important; padding:.4cqw 0 .2cqw 1.8cqw; width:auto; letter-spacing:.15cqw; font-size:4.2cqw; margin-top:1cqw; }
.sp-sua .st-ghi-chu{ color:#5d4d45; }

/* phương án nhiều dòng (hệ phương trình) 2 cột: khoảng cách đều, thoáng giữa hai hàng, hai cột cách nhau vừa phải */
.sp-lc.tu-ha.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4cqw 5cqw; align-items:center; }
.sp-lc.tu-ha li{ align-items:center; padding-top:.6cqw; padding-bottom:.6cqw; }

/* câu có hình bên phải: số câu cố định ở lề trái, mọi dòng chữ (kể cả dòng dưới hình / đoạn sau) thẳng hàng với dòng 1, 2 */
.sp-cau.co-hinh .st-cau-dau{ position:relative; display:block; padding-left:9cqw; }
.sp-cau.co-hinh .st-cau-dau > .st-sttt{ position:absolute; left:0; top:.3cqw; float:none; margin:0; }
.sp-hinh-ben{ margin-bottom:0; }

.sc-them-anh{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 2px; } .sc-them-anh .sc-ghi{ margin:0; font-size:12px; }

.sc-dlg-rong{ width:min(760px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); } .sc-xem-nh{ max-height:62vh; overflow:auto; padding-right:4px; } .sc-dx-xem{ margin-left:6px; }

.sc-dlg-rong{ width:min(760px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); } .sc-xem-nh{ max-height:62vh; overflow:auto; padding-right:4px; } .sc-dx-xem{ margin-left:6px; }

/* các ý a) b) c) d) của đề: lưới gọn, nhãn a) màu đỏ, hàng thoáng */
.sp-y{ display:grid; gap:.9cqw 4cqw; margin-top:.9cqw; } .sp-y.c1{ grid-template-columns:1fr; } .sp-y.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .sp-y.c4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .sp-y.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.sp-y-o{ display:flex; gap:1.2cqw; align-items:baseline; min-width:0; } .sp-y-o > b{ flex:none; color:#9e1224; font-weight:900; } .sp-y-o > span{ min-width:0; }
.tk .sp-y-o > b{ color:#000 !important; }
/* trang mở chương có 4–5 bài: thu biểu tượng + khoảng cách để thẻ cuối không sát khung / số trang */
.sp-chuong:has(.sp-ch-ds.bon) .sp-ch-hexw{ width:46cqw; height:36cqw; margin:-1cqw 0; } .sp-chuong:has(.sp-ch-ds.bon) .sp-ch-hex{ width:26cqw; height:28cqw; } .sp-chuong:has(.sp-ch-ds.bon) .sp-ch-hex b{ font-size:11.5cqw; }
.sp-chuong:has(.sp-ch-ds.bon) .sp-ch-giua{ gap:1.8cqw; } .sp-chuong:has(.sp-ch-ds.bon) .sp-ch-ds{ margin-top:1.8cqw; gap:1.4cqw; } .sp-chuong .sp-ch-ds.bon li{ min-height:10.5cqw; }
.sp-chuong:has(.sp-ch-ds.bon) .sp-ch-bang{ margin-top:0; }
/* chương 4–5 bài: chừa thêm khoảng trống phía trên số trang để in/cắt xén không mất thẻ cuối */
.sp-chuong:has(.sp-ch-ds.bon) .sp-ch-hexw{ height:33cqw; } .sp-chuong:has(.sp-ch-ds.bon) .sp-ch-ds{ margin-top:1.4cqw; gap:1.2cqw; margin-bottom:3cqw; } .sp-chuong .sp-ch-ds.bon li{ min-height:10cqw; }
.sp-chuong:has(.sp-ch-ds.nam) .sp-ch-hexw{ height:29cqw; width:40cqw; } .sp-chuong:has(.sp-ch-ds.nam) .sp-ch-hex{ width:22.5cqw; height:24.5cqw; } .sp-chuong:has(.sp-ch-ds.nam) .sp-ch-hex b{ font-size:10cqw; } .sp-chuong .sp-ch-ds.nam{ gap:1cqw; } .sp-chuong .sp-ch-ds.nam li{ min-height:9cqw; }
.sp-chuong:has(.sp-ch-ds.nam) .sp-ch-hexw{ height:25cqw; width:36cqw; margin:-2cqw 0; } .sp-chuong:has(.sp-ch-ds.nam) .sp-ch-hex{ width:19.5cqw; height:21.2cqw; } .sp-chuong:has(.sp-ch-ds.nam) .sp-ch-hex b{ font-size:8.6cqw; } .sp-chuong:has(.sp-ch-ds.nam) .sp-ch-hex small{ font-size:2.2cqw; } .sp-chuong:has(.sp-ch-ds.nam) .sp-ch-bang{ padding:1.2cqw 8cqw; } .sp-chuong:has(.sp-ch-ds.nam) .sp-ch-sao3{ display:none; }

/* ── Trang mở chương: phần đầu (lục giác "CHƯƠNG IV" + băng tên chương) gọn vừa phải, không to quá (thầy 30/10) ── */
.sp-chuong .sp-ch-giua{ gap:2.4cqw !important; }
.sp-chuong .sp-ch-hexw{ width:38cqw !important; height:29cqw !important; margin:-1.5cqw 0 !important; }
.sp-chuong .sp-ch-tia{ inset:-3.5cqw !important; }
.sp-chuong .sp-ch-hex{ width:21.5cqw !important; height:23.4cqw !important; }
.sp-chuong .sp-ch-hex small{ font-size:2.3cqw !important; } .sp-chuong .sp-ch-hex b{ font-size:9.4cqw !important; } .sp-chuong .sp-ch-hex b.dai{ font-size:6.4cqw !important; }
.sp-chuong .sp-ch-sao3{ font-size:2.6cqw !important; letter-spacing:1.2cqw !important; }
.sp-chuong .sp-ch-bang{ padding:1.3cqw 8cqw !important; }
.sp-chuong .sp-ch-giua .sp-ch-bang h2{ font-size:5.4cqw !important; line-height:1.25 !important; } .sp-chuong .sp-ch-giua .sp-ch-bang h2.c2{ font-size:4.6cqw !important; } .sp-chuong .sp-ch-giua .sp-ch-bang h2.c3{ font-size:3.8cqw !important; }
.sp-chuong .sp-ch-ds{ margin-top:1.8cqw !important; margin-bottom:3cqw !important; }
.sp-chuong .sp-ch-ds li{ min-height:10cqw !important; }
.sp-chuong .sp-ch-ds.nhieu li{ min-height:10cqw !important; }

/* ── Trang đầu sách kiểu HỒ SƠ (học sinh ghi họ tên, mã số, lớp, tên "nyc", mục tiêu) — Marvel Toán thầy Hạnh ── */
.sp-hoso .st-trong{ display:flex; flex-direction:column; }
.sp-hs-dau{ display:flex; align-items:center; gap:3cqw; margin:1.2cqw 1cqw 2.4cqw; }
.sp-hs-logo{ flex:none; width:21cqw; height:21cqw; border-radius:50%; border:.8cqw solid #d9a441; background:#fffaf0; display:flex; align-items:center; justify-content:center; overflow:hidden; } .sp-hs-logo img{ width:100%; height:100%; object-fit:contain; } .sp-hs-logo.khong{ display:none; }
.sp-hs-ten{ min-width:0; } .sp-hs-ten small{ display:block; font-size:2.2cqw; font-weight:800; letter-spacing:.5cqw; color:#9e1224; }
.sp-hs-h1{ margin:.4cqw 0 0; font-size:8.2cqw; line-height:1.15; font-weight:900; color:#0c1c3f; text-transform:uppercase; overflow-wrap:anywhere; } .sp-hs-h1.c2{ font-size:6.6cqw; } .sp-hs-h1.c3{ font-size:5cqw; }
.sp-hs-bang{ display:flex; align-items:center; justify-content:center; gap:2.4cqw; margin:0 1cqw; padding:1.4cqw 4cqw; background:linear-gradient(100deg,#07122c,#16305f 50%,#07122c); border-top:.5cqw solid #d7a94a; border-bottom:.5cqw solid #d7a94a; border-radius:1cqw; } .sp-hs-bang span{ width:5.4cqw; height:5.4cqw; display:flex; } .sp-hs-bang b{ font-size:3.6cqw; font-weight:900; letter-spacing:.4cqw; color:#f6dc8a; }
.sp-hs-khung{ display:flex; flex-direction:column; gap:3.4cqw; margin:3.6cqw 2cqw 0; }
.sp-hs-truong{ display:flex; align-items:flex-end; gap:2cqw; min-height:8cqw; } .sp-hs-bieu{ flex:none; width:5cqw; height:5cqw; display:flex; margin-bottom:.6cqw; }
.sp-hs-truong b{ flex:none; font-size:3.6cqw; font-weight:900; color:#0c1c3f; white-space:nowrap; margin-bottom:.4cqw; } .sp-hs-truong b::after{ content:':'; }
.sp-hs-dong{ flex:1; min-width:0; height:6cqw; border-bottom:.35cqw solid #1b2540; }
.sp-hs-hai{ display:grid; grid-template-columns:1.3fr 1fr; gap:4cqw; }
.sp-hs-mt{ flex:1; min-height:0; margin:4.2cqw 2cqw 1cqw; padding:2cqw 3cqw 2cqw; border:.45cqw solid #d7a94a; border-radius:2.4cqw; background:#fffdf6; display:flex; flex-direction:column; }
.sp-hs-mt-dau{ display:flex; align-items:center; gap:2cqw; } .sp-hs-mt-dau span{ width:6cqw; height:6cqw; display:flex; } .sp-hs-mt-dau b{ font-size:4cqw; font-weight:900; letter-spacing:.3cqw; color:#9e1224; }
.sp-hs-mt p{ margin:.8cqw 0 0; font-size:3cqw; font-style:italic; font-weight:700; color:#5d4d45; }
.sp-hs-ke{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:space-evenly; margin-top:1cqw; } .sp-hs-ke i{ display:block; height:0; border-bottom:.3cqw solid #1b2540; } .sp-hs-ke i:nth-child(even){ border-bottom-color:#b0182a; }
.tk .sp-hs-bang{ background:none !important; border:.3cqw solid #000 !important; } .tk .sp-hs-bang b, .tk .sp-hs-h1, .tk .sp-hs-truong b, .tk .sp-hs-mt-dau b, .tk .sp-hs-ten small{ color:#000 !important; } .tk .sp-hs-logo{ border-color:#000; } .tk .sp-hs-logo img{ filter:grayscale(1); } .tk .sp-hs-mt{ background:none !important; border-color:#000 !important; } .tk .sp-hs-ke i, .tk .sp-hs-dong{ border-bottom-color:#000 !important; }
.sp-hs-dau{ margin:.4cqw 1cqw 1.8cqw; gap:2.6cqw; } .sp-hs-logo{ width:16cqw; height:16cqw; border-width:.6cqw; }
.sp-hs-h1{ font-size:6.2cqw; } .sp-hs-h1.c2{ font-size:5.2cqw; } .sp-hs-h1.c3{ font-size:4.2cqw; } .sp-hs-ten small{ font-size:2cqw; }
.sp-hs-bang{ padding:1cqw 4cqw; } .sp-hs-bang b{ font-size:3.2cqw; } .sp-hs-bang span{ width:4.6cqw; height:4.6cqw; }
.sp-hs-khung{ gap:2.2cqw; margin:2.4cqw 2cqw 0; } .sp-hs-truong{ min-height:6.6cqw; } .sp-hs-dong{ height:5cqw; }
.sp-hs-mt{ margin:3cqw 2cqw .6cqw; padding:1.6cqw 3cqw 1.6cqw; } .sp-hs-mt-dau b{ font-size:3.6cqw; } .sp-hs-mt p{ font-size:2.7cqw; }
.sp-hs-ke i:nth-child(n+8){ display:none; }
.sp-hs-dau{ margin-top:2.4cqw; }

/* phương án: ký hiệu A B C D thẳng hàng với DÒNG ĐẦU của phương án (không canh giữa theo chiều cao khi phương án cao / có hình) */
.sp-lc li{ align-items:flex-start; } .sp-lc li > .sp-ky{ margin-top:.1cqw; }

/* ══ Trang HỒ SƠ — đầu đề lại theo mẫu thầy gửi (30/10): logo vòng vàng trái, chữ nhỏ có đường gạch hai bên, tên sách chữ hẹp đậm, nhãn VOL. vàng, băng xanh navy có khiên ══ */
.sp-hoso .st-trong::after{ background:
   linear-gradient(#d7a94a,#d7a94a) left top/7cqw .6cqw no-repeat, linear-gradient(#d7a94a,#d7a94a) left top/.6cqw 7cqw no-repeat,
   linear-gradient(#d7a94a,#d7a94a) right top/7cqw .6cqw no-repeat, linear-gradient(#d7a94a,#d7a94a) right top/.6cqw 7cqw no-repeat,
   linear-gradient(#d7a94a,#d7a94a) left bottom/7cqw .6cqw no-repeat, linear-gradient(#d7a94a,#d7a94a) left bottom/.6cqw 7cqw no-repeat,
   linear-gradient(#d7a94a,#d7a94a) right bottom/7cqw .6cqw no-repeat, linear-gradient(#d7a94a,#d7a94a) right bottom/.6cqw 7cqw no-repeat; }
.sp-hoso .st-hang-nho{ display:none; }
.sp-hs-dau{ display:flex; align-items:center; gap:3.2cqw; margin:1.6cqw .6cqw 2.2cqw; }
.sp-hs-logo{ width:24cqw; height:24cqw; flex:none; border:.9cqw solid #c79a3a; background:#0c1530; box-shadow:0 0 0 .5cqw #fffaf0, 0 0 0 1cqw #d7a94a; }
.sp-hs-ten{ flex:1; min-width:0; text-align:center; }
.sp-hs-cap{ display:flex; align-items:center; gap:1.6cqw; } .sp-hs-cap i{ flex:1; border-top:.3cqw solid #b9801f; } .sp-hs-cap small{ display:block; font-size:2.4cqw; font-weight:800; letter-spacing:.5cqw; color:#c0182f; white-space:nowrap; }
.sp-hs-h1, .sp-hs-vol b{ font-family:'Barlow Condensed','Oswald','Be Vietnam Pro',system-ui,sans-serif; }
.sp-hs-h1{ margin:.8cqw 0 0; font-size:12.4cqw; line-height:1; font-weight:900; letter-spacing:-.005em; color:#0c1c3f; text-transform:uppercase; white-space:nowrap; text-shadow:.2cqw .3cqw 0 rgba(215,169,74,.35); } .sp-hs-h1.c2{ font-size:10.2cqw; } .sp-hs-h1.c3{ font-size:8.4cqw; }
.sp-hs-vol{ display:flex; align-items:center; gap:2cqw; margin-top:1.4cqw; } .sp-hs-vol i{ flex:1; border-top:.3cqw solid #d7a94a; }
.sp-hs-vol b{ display:flex; align-items:center; gap:2.2cqw; padding:.4cqw 4.6cqw; font-size:6.6cqw; line-height:1.15; font-weight:900; color:#3a2a08; background:linear-gradient(180deg,#fff2b8,#ecc35e 55%,#c99c3c); border:.4cqw solid #b9801f; border-radius:2.6cqw; box-shadow:inset 0 0 0 .3cqw #fff6d0; }
.sp-hs-vol em{ width:1.4cqw; height:1.4cqw; background:#7a5410; transform:rotate(45deg); }
.sp-hs-bang{ gap:2.4cqw; margin:0; padding:1.5cqw 3cqw; border:.5cqw solid #d7a94a; border-radius:1.8cqw; background:linear-gradient(100deg,#0a1634,#17336a 50%,#0a1634); }
.sp-hs-bang i{ flex:1; border-top:.35cqw solid #d7a94a; } .sp-hs-bang span{ width:7cqw; height:7cqw; } .sp-hs-bang b{ font-size:4.6cqw; letter-spacing:.5cqw; }
.sp-hs-khung{ gap:3.4cqw; margin:3.4cqw 1cqw 0; }
.sp-hs-truong{ min-height:8cqw; gap:2.4cqw; } .sp-hs-bieu{ width:7cqw; height:7cqw; margin-bottom:0; }
.sp-hs-truong b{ font-size:4.4cqw; margin-bottom:.5cqw; } .sp-hs-dong{ height:6.4cqw; border-bottom:.3cqw solid #1b3b78; }
.sp-hs-mt{ position:relative; margin:3.6cqw .2cqw .4cqw; padding:2.4cqw 3.6cqw 2cqw; border:.45cqw solid #d7a94a; border-radius:2.6cqw; background:#fffdf7; outline:.2cqw solid #ead9a3; outline-offset:-1.2cqw; }
.sp-hs-goc{ position:absolute; width:2.2cqw; height:2.2cqw; background:#d7a94a; transform:rotate(45deg); } .sp-hs-goc.a{ top:-1.1cqw; left:-1.1cqw; } .sp-hs-goc.b{ top:-1.1cqw; right:-1.1cqw; } .sp-hs-goc.c{ bottom:-1.1cqw; left:-1.1cqw; } .sp-hs-goc.d{ bottom:-1.1cqw; right:-1.1cqw; }
.sp-hs-mt-dau{ gap:2.4cqw; } .sp-hs-mt-dau span{ width:9cqw; height:9cqw; } .sp-hs-mt-dau b{ font-family:'Barlow Condensed','Be Vietnam Pro',system-ui,sans-serif; font-size:9cqw; line-height:1; letter-spacing:0; color:#c0182f; } .sp-hs-mt-dau i{ flex:1; border-top:.3cqw solid #d7a94a; }
.sp-hs-mt p{ margin:1cqw 0 0; font-size:3.4cqw; font-weight:600; font-style:italic; color:#21160f; font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif; }
.sp-hs-ke{ margin-top:1.4cqw; } .sp-hs-ke i, .sp-hs-ke i:nth-child(even){ border-bottom:.25cqw solid #5b79b3; }
.sp-hoso .st-chan{ justify-content:center; border:0; } .sp-hoso .st-so-trang{ display:none; }
.sp-hoso .st-khau{ flex:1; display:flex; align-items:center; gap:2.4cqw; font-size:2.3cqw; letter-spacing:.6cqw; color:#0c1c3f; font-weight:700; text-align:center; justify-content:center; }
.sp-hoso .st-khau::before, .sp-hoso .st-khau::after{ content:''; flex:1; border-top:.3cqw solid #d7a94a; }
.tk .sp-hs-vol b{ background:none !important; color:#000 !important; border-color:#000 !important; box-shadow:none !important; } .tk .sp-hs-cap small{ color:#000 !important; } .tk .sp-hs-logo{ background:#fff; box-shadow:none; }
.sp-hs-logo{ width:21cqw; height:21cqw; } .sp-hs-dau{ gap:2.8cqw; }
.sp-hs-bang{ padding:1.3cqw 2.4cqw; gap:2cqw; } .sp-hs-bang b{ font-size:3.7cqw; letter-spacing:.3cqw; white-space:nowrap; } .sp-hs-bang span{ width:6cqw; height:6cqw; flex:none; }
.sp-hs-khung{ gap:3cqw; margin-top:3cqw; } .sp-hs-mt{ margin-top:3cqw; padding:2cqw 3.4cqw 1.6cqw; } .sp-hs-mt-dau b{ font-size:8.4cqw; }
/* thu gọn phần trên để khung MỤC TIÊU có nhiều chỗ viết (≈ 40% trang) */
.sp-hs-dau{ margin:.8cqw .4cqw 1.6cqw; } .sp-hs-logo{ width:19cqw; height:19cqw; }
.sp-hs-bang{ padding:1cqw 2.4cqw; } .sp-hs-bang b{ font-size:3.5cqw; } .sp-hs-bang span{ width:5.2cqw; height:5.2cqw; }
.sp-hs-khung{ gap:1.8cqw; margin-top:2.2cqw; } .sp-hs-truong{ min-height:6.2cqw; gap:2cqw; } .sp-hs-bieu{ width:5.8cqw; height:5.8cqw; } .sp-hs-truong b{ font-size:3.9cqw; } .sp-hs-dong{ height:4.6cqw; }
.sp-hs-mt{ margin-top:2.4cqw; margin-bottom:.2cqw; padding:1.6cqw 3.2cqw 1.2cqw; } .sp-hs-mt-dau span{ width:7.6cqw; height:7.6cqw; } .sp-hs-mt-dau b{ font-size:7.4cqw; } .sp-hs-mt p{ font-size:3cqw; margin-top:.4cqw; }
.sp-hoso .st-chan{ padding:.4cqw 0 .6cqw; margin-top:.4cqw; }

/* chương nhiều bài (6+) trong khung có lề đối xứng: gọn hơn nữa */
.sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-hexw{ height:23cqw !important; width:32cqw !important; margin:-2cqw 0 !important; } .sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-hex{ width:17.5cqw !important; height:19cqw !important; } .sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-hex b{ font-size:7.6cqw !important; } .sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-hex small{ font-size:2cqw !important; } .sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-sao3{ display:none; }
.sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-giua{ gap:1.6cqw !important; } .sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-giua .sp-ch-bang h2{ font-size:4.6cqw !important; } .sp-chuong:has(.sp-ch-ds.nhieu) .sp-ch-bang{ padding:1cqw 7cqw !important; }
.sp-chuong .sp-ch-ds.nhieu{ gap:1cqw 2cqw !important; margin-top:1.2cqw !important; margin-bottom:1cqw !important; font-size:2.7cqw !important; } .sp-chuong .sp-ch-ds.nhieu li{ min-height:8.2cqw !important; padding:.3cqw 1.2cqw .3cqw .8cqw !important; } .sp-chuong .sp-ch-ds.nhieu li .st-so{ width:6.2cqw !important; height:6.8cqw !important; font-size:2.6cqw !important; }
.sp-chuong .sp-ch-ds.rat li{ min-height:6.6cqw !important; font-size:2.4cqw !important; }

/* ══ LỜI NÓI ĐẦU — làm lại theo mẫu thầy gửi (30/10): dòng tên sách đầu trang, tiêu đề lớn chữ hẹp, băng đỏ có sao, đoạn có sao vòng vàng, liên hệ cuối trang ══ */
.sp-lnd .st-hang-nho{ display:none; }
.sp-lnd .st-trong::after{ background:
   linear-gradient(#d7a94a,#d7a94a) left top/7cqw .6cqw no-repeat, linear-gradient(#d7a94a,#d7a94a) left top/.6cqw 7cqw no-repeat,
   linear-gradient(#d7a94a,#d7a94a) right top/7cqw .6cqw no-repeat, linear-gradient(#d7a94a,#d7a94a) right top/.6cqw 7cqw no-repeat,
   linear-gradient(#d7a94a,#d7a94a) left bottom/7cqw .6cqw no-repeat, linear-gradient(#d7a94a,#d7a94a) left bottom/.6cqw 7cqw no-repeat,
   linear-gradient(#d7a94a,#d7a94a) right bottom/7cqw .6cqw no-repeat, linear-gradient(#d7a94a,#d7a94a) right bottom/.6cqw 7cqw no-repeat; }
.sp-ln-dau{ display:flex; align-items:center; gap:2cqw; margin:1.4cqw 0 .6cqw; } .sp-ln-dau i{ flex:1; border-top:.3cqw solid #d7a94a; }
.sp-ln-dau span{ display:flex; align-items:center; gap:1.6cqw; font-size:2.4cqw; font-weight:800; letter-spacing:.6cqw; color:#0c1c3f; white-space:nowrap; } .sp-ln-dau em{ width:1.1cqw; height:1.1cqw; background:#d7a94a; border-radius:50%; }
.sp-lnd-bang-ten{ margin:.4cqw 0 2.2cqw; padding:0 0 1.4cqw; background:none !important; border:0 !important; border-radius:0 !important; clip-path:none !important; position:relative; width:auto !important; text-align:center; }
.sp-lnd-bang-ten::before{ display:none !important; }
.sp-lnd-bang-ten::after{ content:''; display:block; width:46%; margin:.6cqw auto 0; border-top:.3cqw solid #d7a94a; position:relative; } 
.sp-lnd-ten{ font-family:'Barlow Condensed','Be Vietnam Pro',system-ui,sans-serif !important; font-size:13.5cqw !important; line-height:1.05 !important; padding:0 !important; letter-spacing:0 !important; font-weight:900; text-transform:uppercase; color:#0c1c3f !important; background:none !important; -webkit-text-fill-color:#0c1c3f !important; text-shadow:.2cqw .3cqw 0 rgba(215,169,74,.35); }
.sp-lnd-the{ flex:1; min-height:0; overflow:hidden; border:0 !important; background:none !important; padding:0 !important; border-radius:0 !important; gap:2.4cqw !important; }
.sp-lnd-bang{ position:relative; display:flex; align-items:center; margin:0 0 .6cqw !important; padding:0; background:linear-gradient(100deg,#6d0c18,#9e1224 50%,#6d0c18) !important; border:.5cqw solid #d7a94a !important; border-radius:2.2cqw !important; box-shadow:inset 0 0 0 .3cqw rgba(255,226,150,.5); }
.sp-lnd-bang::before, .sp-lnd-bang::after{ content:''; position:absolute; top:50%; width:2.2cqw; height:2.2cqw; background:#d7a94a; transform:translateY(-50%) rotate(45deg); } .sp-lnd-bang::before{ left:-1.6cqw; } .sp-lnd-bang::after{ right:-1.6cqw; }
.sp-lnd-bieu{ flex:none; width:11cqw !important; height:11cqw !important; margin:1cqw 1.6cqw 1cqw 2cqw !important; padding:.9cqw !important; background:#fff3d0 !important; border:.5cqw solid #d7a94a !important; box-shadow:0 0 0 .5cqw #8a1020, 0 0 0 .9cqw #d7a94a; }
.sp-lnd-bang h3{ margin:0; flex:1; padding:1.2cqw 3cqw 1.2cqw 1cqw !important; font-family:'Barlow Condensed','Be Vietnam Pro',system-ui,sans-serif !important; font-size:6.4cqw !important; line-height:1.12 !important; font-weight:800 !important; letter-spacing:.1cqw; text-transform:uppercase; color:#ffe9a8 !important; }
.sp-lnd-chao{ margin:.4cqw 0 0 !important; font-size:1.3em !important; color:#c0182f !important; font-style:italic; font-weight:700; } .sp-lnd-chao i{ width:8cqw !important; height:8cqw !important; }
.sp-lnd-doan{ align-items:flex-start; text-align:justify; } .sp-lnd-doan i{ flex:none; width:7.4cqw !important; height:7.4cqw !important; margin-top:.3cqw !important; padding:.5cqw; border:.45cqw solid #d7a94a; border-radius:50%; background:#fffdf6; box-sizing:border-box; }
.sp-lnd-doan strong{ color:#b5121f !important; }
.sp-lnd-ket span{ color:#9e1224; font-weight:700; }
.sp-lnd-gts{ border-top:.3cqw solid #d7a94a; margin:1.6cqw 0 .4cqw; }
.sp-lnd-lh{ flex-wrap:wrap; justify-content:center; gap:.4cqw 2.4cqw; margin:.8cqw 0 .6cqw; padding-top:1cqw; border-top:.3cqw solid #d7a94a; font-size:2.5cqw !important; font-weight:700; color:#0c1c3f !important; text-align:center; } .sp-lnd-lh span:first-child{ flex-basis:100%; text-align:center; } .sp-lnd-lh span:nth-child(n+3)::before{ content:'•'; margin-right:2.4cqw; color:#d7a94a; }
.sp-lnd .st-chan{ justify-content:center; border:0; padding:.4cqw 0 .6cqw; } .sp-lnd .st-so-trang{ display:none; }
.sp-lnd .st-khau{ flex:1; display:flex; align-items:center; gap:2.4cqw; font-size:2cqw; letter-spacing:.5cqw; color:#0c1c3f; font-weight:700; justify-content:center; } .sp-lnd .st-khau::before, .sp-lnd .st-khau::after{ content:''; flex:1; border-top:.3cqw solid #d7a94a; }
.tk .sp-lnd-bang{ background:none !important; border-color:#000 !important; box-shadow:none !important; } .tk .sp-lnd-bang h3{ color:#000 !important; } .tk .sp-lnd-bang::before, .tk .sp-lnd-bang::after{ background:#000; }
/* gọn hơn để chữ lời nói đầu vẫn đọc được (không phải thu quá nhỏ) */
.sp-ln-dau{ margin:.6cqw 0 .2cqw; } .sp-ln-dau span{ font-size:2.1cqw; }
.sp-lnd-bang-ten{ margin:.2cqw 0 1.4cqw; padding-bottom:.8cqw; } .sp-lnd-ten{ font-size:9.4cqw !important; }   /* tiêu đề LỜI NÓI ĐẦU vừa phải để phần chữ phía dưới đủ chỗ */
.sp-lnd-bieu{ width:8cqw !important; height:8cqw !important; margin:.8cqw 1.2cqw .8cqw 1.8cqw !important; padding:.6cqw !important; box-shadow:0 0 0 .4cqw #8a1020, 0 0 0 .7cqw #d7a94a; }
.sp-lnd-bang h3{ font-size:4.8cqw !important; padding:.8cqw 2.4cqw .8cqw .6cqw !important; }
.sp-lnd-the{ gap:1.6cqw !important; } .sp-lnd-chao{ font-size:1.18em !important; } .sp-lnd-chao i{ width:6cqw !important; height:6cqw !important; }
.sp-lnd-doan{ gap:1.6cqw !important; } .sp-lnd-doan i{ width:5.4cqw !important; height:5.4cqw !important; margin-top:.2cqw !important; padding:.4cqw; border-width:.35cqw; }
.sp-lnd-lh{ font-size:2.1cqw !important; margin:.4cqw 0 .2cqw; padding-top:.6cqw; } .sp-lnd .st-khau{ font-size:1.7cqw; } .sp-lnd .st-chan{ padding:.2cqw 0 .2cqw; margin-top:.2cqw; }
.sp-lnd-bang h3{ font-size:4.1cqw !important; letter-spacing:0 !important; } .sp-lnd-bieu{ width:7cqw !important; height:7cqw !important; }

@media print{ body.st-in .sp-luoi .st-trang:last-child{ break-after:auto !important; page-break-after:auto !important; } }
@media print{ html:has(body.st-in), body.st-in{ margin:0 !important; padding:0 !important; height:auto !important; min-height:0 !important; } }

/* ── Cắt câu dài qua trang: phần trên bị cắt đúng chiều cao (inline style), phần dưới dịch đề lên (margin-top âm) và che phần đã in ở trang trước ── */
.sp-cau.cat-1{ box-sizing:border-box; overflow:hidden; border-bottom:0; padding-bottom:0 !important; }   /* không chừa đệm đáy: overflow:hidden cắt ở mép đệm nên đệm sẽ để lộ nửa dòng kế */
.sp-cau.cat-2 .st-cau-dau{ overflow:hidden; }
.sp-cau.cat-2 .st-sttt, .sp-cau.cat-2 > .sp-sao{ visibility:hidden; }

/* Cuộn mượt: sau khi dàn xong, trang ngoài tầm nhìn không bị vẽ (content-visibility); khi in / đo thì JS gỡ lớp sp-xong để dựng đủ mọi trang */
#spLuoi.sp-xong .st-trang{ content-visibility:auto; contain-intrinsic-size:auto 560px 794px; }

/* ── chỉnh sửa trực tiếp trên bản xem trước In PDF ── */
.sp-thanh2{ flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding-top:8px; border-top:1px dashed #d9c08a; }
.sp-goi-y{ font-size:12.5px; font-weight:700; color:#7a1020; margin-right:auto; }
.sp-thanh2 input[type=range]{ width:96px; accent-color:#b10e25; } .sp-thanh2 output{ min-width:38px; font-weight:700; }
.sp-thanh2 input[type=text]{ width:auto; }
#spLuoi:not(.dang) [data-sua]{ cursor:text; } #spLuoi [data-sua]:hover{ outline:1px dashed rgba(177,14,37,.55); outline-offset:1px; background:rgba(255,222,120,.18); }
.sp-bar-cau{ position:fixed; z-index:3050; display:flex; align-items:center; gap:3px; padding:3px; border:2px solid #251511; border-radius:10px; background:#fffdf7; box-shadow:0 4px 14px rgba(0,0,0,.45); }
.sp-bar-cau[hidden]{ display:none; } .sp-bar-cau i{ width:1px; align-self:stretch; background:#d9c08a; margin:0 2px; } .sp-bar-cau span{ min-width:22px; text-align:center; font-size:12px; font-weight:800; color:#7a1020; }
.sp-bar-cau button{ padding:3px 7px; border:1px solid #e4d4c5; border-radius:7px; background:#fff; color:#21160f; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; } .sp-bar-cau button:hover{ background:#fff3e0; border-color:#b10e25; } .sp-bar-cau button.chon{ background:#b10e25; border-color:#b10e25; color:#fff; }
.sp-cau.ngat-trang{ box-shadow:inset 0 .6cqw 0 #b10e25; } .sp-cau.ngat-trang::before{ content:'⤓ sang trang mới'; position:absolute; left:1.4cqw; top:-.2cqw; font-size:1.9cqw; font-weight:800; color:#b10e25; z-index:3; }
@media print{ .sp-cau.ngat-trang{ box-shadow:none !important; } .sp-cau.ngat-trang::before{ display:none !important; } .sp-bar-cau, .sp-sua{ display:none !important; } }
.sp-gian{ display:block; } .sp-sua-xem{ min-height:2.6em; padding:8px 10px; border:1px dashed #c9a24a; border-radius:8px; background:#fff; font-size:15px; line-height:1.6; overflow-wrap:anywhere; } .sp-sua-ghi{ margin:0; font-size:12.5px; color:#6b5646; } .sp-sua-ghi code{ background:#f3e6c4; padding:0 4px; border-radius:4px; }
/* cỡ chữ + giãn dòng toàn sách (biến --sp-co / --sp-gian đặt trên #stLop; trang đo và trang xem cùng đọc) */
#stLop.sp-tuy .sp-cau .st-de{ font-size:calc(4cqw*var(--sp-co,1)); } #stLop.sp-tuy .sp-cau .sp-lc li, #stLop.sp-tuy .sp-cau .sp-ds-hang{ font-size:calc(3.8cqw*var(--sp-co,1)); } #stLop.sp-tuy .sp-cau .sp-lg .st-giai{ font-size:calc(3.6cqw*var(--sp-co,1)); }
#stLop.sp-tuy .sgk .sp-cau .st-de, #stLop.sp-tuy .sgk .sp-cau .sp-lc li, #stLop.sp-tuy .sgk .sp-cau .sp-ds-hang{ font-size:calc(3.6cqw*var(--sp-co,1)); } #stLop.sp-tuy .sgk .sp-cau .sp-lg .st-giai{ font-size:calc(3.3cqw*var(--sp-co,1)); }
#stLop.sp-tuy .sp-cau .st-de, #stLop.sp-tuy .sp-cau .st-giai, #stLop.sp-tuy .sp-cau .sp-lc li, #stLop.sp-tuy .sp-cau .sp-ds-hang{ line-height:var(--sp-gian,1.55); }

.sp-bar-cau .sp-dong-o{ width:56px; padding:2px 4px; border:1px solid #e4d4c5; border-radius:6px; font-size:12px; font-weight:700; text-align:center; color:#21160f; background:#fff; }

/* đề xuất rà soát: 3 nhãn xoá / thay / điền khoá là NÚT LỌC — bấm nhãn nào chỉ hiện các câu loại đó */
button.sc-dx-chip{ border:2px solid transparent; cursor:pointer; font-family:inherit; line-height:1.4; transition:transform .08s, box-shadow .12s; } button.sc-dx-chip:hover{ transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.28); }
button.sc-dx-chip.chon{ border-color:#251511; box-shadow:0 0 0 3px #ffe58a; }
.sc-noi-dung.dx-loai-xoa .sc-khoi:not(.dx-xoa), .sc-noi-dung.dx-loai-thay .sc-khoi:not(.dx-thay), .sc-noi-dung.dx-loai-khoa .sc-khoi:not(.dx-khoa), .sc-noi-dung.dx-loai-trung .sc-khoi:not(.dx-trung){ display:none; }
.sc-nut-trung{ width:100%; justify-content:center; margin:2px 0 8px; } .sc-nut-trung[hidden]{ display:none; }
.sdt-loc{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:end; }
.sdt-loc label{ min-width:170px; }
.sdt-hanh{ display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; padding:8px 10px; border:1.5px solid #251511; border-radius:12px; background:#fff7dc; }
.sdt-dem{ font-size:13px; font-weight:800; color:#5b3a00; }
.sdt-ds{ display:grid; gap:10px; max-height:58dvh; overflow:auto; padding-right:4px; }
.sdt-dong{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:8px; padding:10px 12px; border:1.5px solid #251511; border-left:6px solid #7a3fb5; border-radius:12px; background:#fff; }
.sdt-dong.da-doi{ border-left-color:#2e8b57; background:#f3fbf6; }
.sdt-dong.da-chon{ box-shadow:0 0 0 3px #ffe58a; }
.sdt-dong > input{ width:18px; height:18px; margin-top:2px; accent-color:#7a3fb5; }
.sdt-dau{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin-bottom:6px; font-size:13px; }
.sdt-dau b{ color:#b10e25; font-size:14px; }
.sdt-tag{ padding:1px 8px; border-radius:999px; background:#f1e8fa; color:#3c1f5c; font-size:12px; font-weight:800; } .sdt-tag.xong{ background:#dff3e6; color:#17613a; }
.sdt-hai{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; font-size:13.5px; line-height:1.5; }
.sdt-o{ min-width:0; padding:6px 8px; border-radius:8px; background:#fbf8f2; overflow-wrap:anywhere; } .sdt-o small{ display:block; font-weight:800; color:#7a6a60; margin-bottom:2px; }
.sdt-o img{ max-width:100%; height:auto; }
@media (max-width:640px){ .sdt-hai{ grid-template-columns:minmax(0,1fr); } .sdt-ds{ max-height:none; } }

/* đổi câu: chế độ TỰ CHỌN (cây thư mục duyệt bằng tay, mọi kiểu câu) */
.sdc-che{ display:flex; gap:6px; flex-wrap:wrap; } .sdc-che button{ padding:5px 12px; border:2px solid #e4d4c5; border-radius:999px; background:#fff; color:#21160f; font-weight:800; font-size:13px; cursor:pointer; } .sdc-che button.chon{ background:#b10e25; border-color:#b10e25; color:#fff; }
.sdc-tu[hidden]{ display:none; } .sdc-tu{ display:grid; gap:6px; } .sdc-loai{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; } .sdc-loai select{ padding:3px 8px; border:1px solid #c9a24a; border-radius:8px; background:#fff; color:#21160f; }
.sdc-cay-tc{ max-height:210px; overflow:auto; padding:6px 8px; border:1px solid #e4d4c5; border-radius:10px; background:#fffdf7; font-size:13px; } .sdc-cay-tc ul{ list-style:none; margin:0; padding:0; }
.sdc-nut{ display:flex; align-items:center; gap:2px; border-radius:7px; } .sdc-nut.chon{ background:#fde9c8; box-shadow:inset 0 0 0 2px #e08600; }
.sdc-mo{ width:22px; height:24px; flex:none; border:0; background:none; color:#7a6a60; cursor:pointer; padding:0; } .sdc-ten{ flex:1; text-align:left; border:0; background:none; padding:3px 6px; font-weight:700; color:#21160f; cursor:pointer; border-radius:6px; } .sdc-ten:hover{ background:#fff3e0; } .sdc-ten small{ color:#8a6a68; font-weight:600; margin-left:4px; }
.sdc-khac-kieu{ padding:1px 8px; border-radius:999px; background:#e8f2fb; color:#133e66; font-size:11.5px; font-weight:800; }

/* Lời nói đầu: phần tiêu đề (LỜI NÓI ĐẦU + băng "Gửi những Avengers…") gọn lại để chữ nội dung phía dưới giữ cỡ bình thường và đủ chỗ cho cả bài */
#spLuoi .sp-lnd-bang-ten, #stLop .sp-lnd-bang-ten{ margin:.2cqw 0 .8cqw; padding-bottom:.4cqw; } #stLop .sp-lnd-ten{ font-size:7.4cqw !important; }
#stLop .sp-lnd-bang{ margin-bottom:.2cqw !important; } #stLop .sp-lnd-bang h3{ font-size:3.3cqw !important; padding:.5cqw 2.4cqw .5cqw .6cqw !important; line-height:1.1 !important; }
#stLop .sp-lnd-bieu{ width:5.2cqw !important; height:5.2cqw !important; margin:.5cqw .8cqw .5cqw 1.4cqw !important; padding:.4cqw !important; }
#stLop .sp-lnd .sp-ln-dau{ margin:.2cqw 0 0; }

/* câu ĐÚNG/SAI tách theo ý ở 2 trang: phần trên = đề + hình + k ý đầu (cat-y1), phần dưới = các ý còn lại (cat-y2) */
.sp-ds-hang.y-an{ display:none !important; }
.sp-cau.cat-y1{ border-bottom:0 !important; } .sp-cau.cat-y1 > .sp-dapan, .sp-cau.cat-y1 > .sp-lg, .sp-cau.cat-y1 > .sp-gian, .sp-cau.cat-y1 > .st-ke{ display:none; }
.sp-cau.cat-y2 > .st-cau-dau, .sp-cau.cat-y2 > .sp-hinh-ben, .sp-cau.cat-y2 > .sp-sao{ display:none; } .sp-cau.cat-y2{ padding-top:1.2cqw !important; }
/* thanh nút nổi của từng câu: mờ đi, không che chữ; rê chuột vào mới rõ (không bao giờ vào bản in) */
.sp-bar-cau{ opacity:.22; transition:opacity .15s; } .sp-bar-cau:hover, .sp-bar-cau:focus-within{ opacity:1; }
/* "Dàn gọn": dồn khoảng cách dọc để mỗi trang chứa được nhiều câu hơn */
#stLop.sp-gon .st-than{ gap:.9cqw !important; } #stLop.sp-gon .sp-cau:not(.cat-1){ padding-bottom:.7cqw !important; }
#stLop.sp-gon .sp-ds{ margin-top:.5cqw !important; gap:.3cqw !important; } #stLop.sp-gon .sp-ds.hai{ gap:.3cqw 4cqw !important; } #stLop.sp-gon .sp-ds-hang{ line-height:1.32; }
#stLop.sp-gon .sp-o{ width:4.4cqw; height:3.8cqw; font-size:2.1cqw; }
/* câu dài có HÌNH nổi phải bị cắt qua trang: phần dưới dịch cả khung (hình ẩn nhưng vẫn chiếm chỗ + đề) lên cùng nhau */
.sp-cat-clip{ overflow:hidden; } .sp-cau.cat-2 .sp-hinh-ben{ visibility:hidden; }
/* trang còn tràn đáy sau khi dàn: khung đỏ + nhãn ngay trên trang (chỉ ở bản xem, không vào bản in) và nút nhảy tới trang */
#spLuoi .st-trang.sp-tran{ outline:5px dashed #e11d2e; outline-offset:-5px; }
#spLuoi .st-trang.sp-tran::after{ content:'⚠ TRÀN ĐÁY — chữ cuối bị cắt khi in'; position:absolute; left:50%; bottom:2.2cqw; transform:translateX(-50%); z-index:60; padding:.8cqw 2.4cqw; border-radius:99px; background:#e11d2e; color:#fff; font:800 2.6cqw/1.2 system-ui,sans-serif; white-space:nowrap; box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.35); }
#spLuoi .st-trang.sp-tran-nhay{ animation:spTranNhay 1.1s ease-out 2; }
@keyframes spTranNhay{ 0%,100%{ box-shadow:0 0 0 0 rgba(225,29,46,0); } 50%{ box-shadow:0 0 0 14px rgba(225,29,46,.55); } }
.sp-nut-tran{ margin:0 0 0 8px; padding:3px 10px; border:2px solid #e11d2e; border-radius:99px; background:#fff; color:#b3121f; font-size:12px; font-weight:800; cursor:pointer; }

/* Chỉ thu phần rỗng của khung nổi: ảnh giữ tỉ lệ và giới hạn chiều cao cũ. */
.sp-trang .sp-hinh-ben{ width:fit-content; }
.sp-trang .sp-hinh-ben img{ width:auto; }
/* Khoảng an toàn tính tới mép trên phần chân trang nhìn thấy (kể cả ô số):
   đệm thân 5,8cqw + đệm trên chân trang 1cqw ≈ 8,3 mm sau căn in SGK.
   Không dịch khung, đầu hoặc chân trang. Trang tiếp nối dùng cùng đệm đầu thân. */
.sp-trang.sgk:not(.tk) .st-than{ padding-bottom:5.8cqw; }
.sp-trang.sgk.tiep:not(.tk) .st-than{ padding-top:2.6cqw; }
.sp-trang .st-than > *{ flex-shrink:0; }
#spLuoi.sp-kiem-in{ grid-template-columns:var(--sp-in-rong); }
#spLuoi.sp-kiem-in > .st-trang{ width:var(--sp-in-rong); height:var(--sp-in-cao); aspect-ratio:auto; }
.sp-nut-tran:hover{ background:#e11d2e; color:#fff; }
@media print{ #spLuoi .st-trang.sp-tran{ outline:none !important; } #spLuoi .st-trang.sp-tran::after{ display:none !important; } }
body.st-in #spLuoi .st-trang.sp-tran{ outline:none !important; } body.st-in #spLuoi .st-trang.sp-tran::after{ display:none !important; }
.sp-cau.cat-2 .sp-cat-trong .st-cau-dau{ overflow:visible; }   /* khung dịch lên đã cắt (sp-cat-clip); dau mà overflow:hidden sẽ thành BFC và bị đẩy hẹp lại bởi hình nổi → chữ ngắt dòng khác phần trên */

/* ===== Nút biểu tượng kiểu Marvel (05/11/2026): vuông nhỏ, khiên/sao/tia chớp đỏ + vàng, rê chuột hiện chữ như Hnote ===== */
.sc-hang-ic{ gap:6px; align-items:center; }
.sc-vach{ flex:none; width:1px; height:22px; margin:0 3px; background:linear-gradient(#0000,#d9b98f,#0000); }
.sc-ic{ --ic-k:#9c1024; --ic-a:#f7c544; position:relative; flex:none; width:36px; height:36px; display:inline-grid; place-items:center; padding:0; border:1px solid #e6c9b6; border-radius:11px; background:linear-gradient(150deg,#fffaf2,#ffe9d8); box-shadow:0 2px 5px #7d081414, inset 0 1px 0 #fff; color:var(--ic-k); cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.sc-ic .sc-svg{ width:21px; height:21px; overflow:visible; pointer-events:none; filter:drop-shadow(0 1px 0 #fff8); }
.sc-ic .k{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.sc-ic .a{ fill:var(--ic-a); }
.sc-ic .f{ fill:currentColor; stroke:none; }
.sc-ic:hover, .sc-ic:focus-visible{ --ic-k:#6d0714; --ic-a:#fff6d8; transform:translateY(-2px); border-color:#e0a82a; background:linear-gradient(150deg,#ffe9a3,#f7c544); box-shadow:0 7px 14px #c9962e55, 0 0 0 2px #fff3c4aa; outline:none; }
.sc-ic:active{ transform:translateY(0) scale(.96); }
.sc-ic.pri{ --ic-k:#ffe9a3; --ic-a:#ffd75e; border-color:#7d0814; background:linear-gradient(145deg,#e0243d,#8f0b1a); box-shadow:0 4px 10px #7d081455, inset 0 1px 0 #ff8a96aa; }
.sc-ic.pri:hover, .sc-ic.pri:focus-visible{ --ic-k:#fff3c4; --ic-a:#f7c544; border-color:#7d0814; background:linear-gradient(145deg,#f23a52,#a30f20); box-shadow:0 8px 16px #7d081466, 0 0 0 2px #ffd75e88; }
.sc-ic.vang{ --ic-k:#6d0714; --ic-a:#fff6d8; border-color:#e0a82a; background:linear-gradient(145deg,#ffe9a3,#f7c544); box-shadow:0 4px 10px #c9962e44, inset 0 1px 0 #fff; }
.sc-ic.vang:hover, .sc-ic.vang:focus-visible{ background:linear-gradient(145deg,#fff0bd,#ffd75e); }
.sc-ic.nguy:hover, .sc-ic.nguy:focus-visible{ --ic-k:#fff3c4; --ic-a:#ffffff30; border-color:#7d0814; background:linear-gradient(145deg,#d81a32,#7d0814); box-shadow:0 7px 14px #7d081466; }
.sc-ic:disabled{ opacity:.55; cursor:wait; }
/* hộp chữ nổi (1 hộp dùng chung, gắn ở body) */
.sc-tip{ position:fixed; z-index:100000; left:0; top:0; max-width:280px; padding:6px 11px 7px; border:1px solid #f7c544; border-radius:9px; background:linear-gradient(135deg,#a30f20,#5e0813); color:#fff3c4; font-size:12.5px; line-height:1.35; box-shadow:0 8px 20px #3a05098c; pointer-events:none; opacity:0; transform:translateY(-3px); transition:opacity .12s ease, transform .12s ease; }
.sc-tip.hien{ opacity:1; transform:none; }
.sc-tip b{ display:block; font-weight:800; letter-spacing:.1px; }
.sc-tip span{ display:block; margin-top:2px; font-size:11.5px; font-weight:500; color:#ffe2b0; opacity:.92; }
@media (prefers-reduced-motion:reduce){ .sc-ic, .sc-tip{ transition:none; } .sc-ic:hover{ transform:none; } }
/* ===== Sách (05/11/2026): cột trái + cây thư mục + khung câu hỏi kiểu Marvel gọn — cùng ngôn ngữ với cây Ngân hàng ===== */
#sachKhung .sc-trai{ position:sticky; overflow:hidden; padding-top:20px; border-color:#ecd2b8; background:radial-gradient(circle at 1px 1px,#d9a77a26 1px,transparent 1.6px) 0 0/10px 10px, linear-gradient(170deg,#fffaf2,#fff2e2); box-shadow:0 8px 22px #7d08141c; }
#sachKhung .sc-trai::before{ content:''; position:absolute; left:0; right:0; top:0; height:6px; background:repeating-linear-gradient(115deg,#b10e25 0 14px,#f7c544 14px 22px); }
/* 05/11/2026 (thầy yêu cầu): màn rộng — cây thư mục và khung câu hỏi MỖI BÊN MỘT THANH CUỘN RIÊNG (như Ngân hàng câu hỏi, css/de-thi-nhom.css .ch2-luoi).
   Hai cột dính dưới thanh đầu trang (--head) và cao vừa phần màn hình còn lại (trừ lề dưới trang ≈ 130px); thanh chọn (.sc-thanh-chon) vẫn dính đầu cột phải.
   Tab .mv phóng zoom 1.12 (css/marvel-tab.css) mà 100vh và --head là px thật → chia cho --mv-zoom. Chỉ áp cho mục Sách (#sachKhung), không đụng Giao bài tập. */
@media (min-width:901px){
  #sachKhung > .sc{ --sc-dinh:calc((var(--head, 0px) + 12px) / var(--mv-zoom, 1)); --sc-cao:calc((100vh - var(--head, 0px) - 146px) / var(--mv-zoom, 1)); }
  #sachKhung > .sc > .sc-trai{ top:var(--sc-dinh); max-height:var(--sc-cao); }
  #sachKhung > .sc > .sc-phai{ position:sticky; top:var(--sc-dinh); max-height:var(--sc-cao); overflow-y:auto; overflow-x:hidden; padding-top:0; scrollbar-width:thin; scrollbar-color:#e6c27a transparent; }
  #sachKhung > .sc > .sc-phai::-webkit-scrollbar{ width:8px; } #sachKhung > .sc > .sc-phai::-webkit-scrollbar-thumb{ background:#e6c27a; border-radius:8px; }
  #sachKhung > .sc > .sc-phai > .sc-tieu-de{ padding-top:16px; }
  #sachKhung > .sc > .sc-phai > .sc-tieu-de:empty + .sc-msg, #sachKhung > .sc > .sc-phai > .sc-tieu-de:empty ~ .sc-noi-dung > .sc-trong:first-child{ margin-top:16px; }
}
/* Điện thoại (≤ 900px, xếp dọc): cây KHÔNG dính — quy tắc #sachKhung .sc-trai ở trên có độ ưu tiên cao hơn .sc-trai trong @media đầu file nên phải nêu lại ở đây, kẻo cây dính đè lên nội dung bên dưới. */
@media (max-width:900px){ #sachKhung .sc-trai{ position:static; max-height:none; } }
#sachKhung .sc-hang-ic{ gap:6px 6px; }
.sc-cay-dau{ display:flex; align-items:center; gap:10px; padding-bottom:9px; border-bottom:3px solid transparent; border-image:linear-gradient(90deg,#b10e25,#f7c544 65%,transparent) 1; }
.sc-cay-dau > b{ font-size:17px; font-weight:900; font-style:italic; letter-spacing:.05em; text-transform:uppercase; color:#8e0a17; text-shadow:2px 2px 0 #f7c54499; }
.sc-emblem{ flex:none; width:32px; height:32px; display:grid; place-items:center; filter:drop-shadow(0 3px 4px #7d081466); }
.sc-emblem .sc-svg{ width:32px; height:32px; overflow:visible; }
.sc-emblem .k{ fill:none; stroke:#7d0814; stroke-width:1.6; stroke-linejoin:round; } .sc-emblem .a{ fill:#d81a32; } .sc-emblem .f{ fill:#ffd75e; }
#sachKhung .sc-cay{ padding:4px 2px 6px; border-top:0; }
#sachKhung .sc-ds .sc-ds{ margin-left:13px; padding-left:6px; border-left:2px dashed #e6c1a8; }
#sachKhung .sc-nut{ gap:4px; margin:2px 0; padding:3px 6px 3px 2px; border:1px solid transparent; border-radius:11px; transition:background .15s, transform .15s, box-shadow .15s; }
#sachKhung .sc-nut:hover{ background:#fff0d9; transform:translateX(2px); }
#sachKhung .sc-nut.chon{ background:linear-gradient(95deg,#ffe9a3,#fff3cf 78%); border-color:#e9b93f; box-shadow:inset 4px 0 0 #b10e25, 0 3px 8px #c9962e33; }
#sachKhung .sc-mo{ width:18px; color:#b10e25; }
#sachKhung .sc-ten{ padding:4px 4px; font-size:13.5px; line-height:1.35; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
#sachKhung .sc-nut.chon .sc-ten{ color:#5a0a14; }
#sachKhung .sc-dem{ padding:1px 8px; border-radius:999px; background:linear-gradient(#3b2a22,#241812); color:#ffd75e; font-size:11px; font-weight:800; white-space:nowrap; }
#sachKhung .sc-nut.chon .sc-dem{ background:linear-gradient(#d81a32,#8f0b1a); color:#fff3c4; }
.sc-ic-cay{ flex:none; width:26px; height:26px; display:grid; place-items:center; border:1px solid #efd0bb; border-radius:9px; background:linear-gradient(145deg,#fff,#ffe9d8); color:#9c1024; box-shadow:0 1px 3px #7d08141a; }
.sc-ic-cay .sc-svg{ width:16px; height:16px; overflow:visible; }
.sc-ic-cay .k{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .sc-ic-cay .a{ fill:#f7c544; } .sc-ic-cay .f{ fill:currentColor; }
.sc-nut.chon .sc-ic-cay{ color:#ffe9a3; border-color:#7d0814; background:linear-gradient(145deg,#e0243d,#8f0b1a); box-shadow:0 3px 7px #7d081455; } .sc-nut.chon .sc-ic-cay .a{ fill:#ffffff30; }
/* chương (cấp 0): biển đỏ chữ vàng */
#sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut{ margin-top:9px; padding:7px 8px 7px 5px; border-color:#6d0714; background:linear-gradient(135deg,#8f0b1a,#c4122b 60%,#a50f22); box-shadow:0 4px 10px #7d081444, inset 0 1px 0 #ff8a9666; }
#sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut:hover{ background:linear-gradient(135deg,#a30f20,#d8182f 60%,#b8111f); transform:none; }
#sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut .sc-ten{ color:#fff3c4; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:12.5px; text-shadow:0 1px 0 #5e0813; }
#sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut .sc-mo{ color:#ffd75e; }
#sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut .sc-ic-cay{ color:#fff3c4; background:#ffffff1c; border-color:#ffffff40; box-shadow:none; } #sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut .sc-ic-cay .a{ fill:#d81a32; } #sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut .sc-ic-cay .f{ fill:#ffd75e; } #sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut .sc-ic-cay .k{ stroke:#ffd75e; }
#sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut .sc-dem{ background:linear-gradient(#ffe9a3,#f7c544); color:#5a0a14; }
#sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut.chon{ background:linear-gradient(135deg,#ffe9a3,#f7c544); border-color:#d49a1c; box-shadow:inset 5px 0 0 #7d0814, 0 4px 10px #c9962e44; }
#sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut.chon .sc-ten{ color:#5a0a14; text-shadow:none; } #sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut.chon .sc-mo{ color:#5a0a14; }
#sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut.chon .sc-ic-cay{ color:#ffe9a3; background:linear-gradient(145deg,#e0243d,#8f0b1a); border-color:#7d0814; } #sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut.chon .sc-ic-cay .k{ stroke:#ffe9a3; }
#sachKhung .sc-cay > .sc-ds > .sc-c0 > .sc-nut.chon .sc-dem{ background:linear-gradient(#d81a32,#8f0b1a); color:#fff3c4; }
#sachKhung .sc-c2 > .sc-nut .sc-ten{ font-size:13px; }

/* --- Khung câu hỏi gọn: thẻ trắng viền kem, vạch đỏ bên trái, đáy vàng như trang truyện --- */
#scNoiDung .sc-khoi.cau{ padding:12px 14px 12px 40px; border:1px solid #ecd2b8; border-radius:14px; background:#fff; box-shadow:0 3px 0 #f7c54466, 0 9px 18px #7d08140d; transition:border-color .15s, box-shadow .15s, transform .15s; }
#scNoiDung .sc-khoi.cau::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:14px 0 0 14px; background:linear-gradient(180deg,#e0243d,#8f0b1a); }
#scNoiDung .sc-khoi.cau:hover{ border-color:#e3b25a; box-shadow:0 3px 0 #f7c544, 0 12px 22px #7d081418; transform:translateY(-1px); }
#scNoiDung .sc-khoi.cau.da-chon{ outline:2px solid #f7a531; outline-offset:-1px; background:#fff8e6; }
#scNoiDung .sc-khoi.cau .sc-so-cau{ display:inline-block; padding:1px 12px 1px 11px; border-radius:6px; background:linear-gradient(135deg,#d81a32,#8f0b1a); color:#fff3c4; font-size:13.5px; font-weight:900; letter-spacing:.02em; transform:skewX(-8deg); box-shadow:2px 2px 0 #f7c544; }
#scNoiDung .sc-khoi.cau .sc-chip{ border:0; border-radius:999px; background:#fff0c2; color:#8a4a00; box-shadow:inset 0 0 0 1px #efc766; padding:2px 10px; }
#scNoiDung .sc-khoi.cau .sc-chip.phu{ background:#f4efe9; color:#6f635b; box-shadow:inset 0 0 0 1px #e0d6cb; }
#scNoiDung .sc-khoi.cau .sc-sao{ border:0; border-radius:999px; background:#2a1d17; color:#ffd75e; padding:1px 10px; }
#scNoiDung .sc-khoi.cau .sc-da{ border:0; border-left:4px solid #f7c544; border-radius:8px; background:#fff8e3; }
#scNoiDung .sc-khoi.cau .sc-lg{ border-left:4px solid #f7c544; border-radius:8px; background:#fffaf0; }
#scNoiDung .sc-khoi.cau.dx-xoa{ border-color:#eba9a5; background:linear-gradient(100deg,#fff1f0,#fff); } #scNoiDung .sc-khoi.cau.dx-xoa::before{ background:#c9302c; }
#scNoiDung .sc-khoi.cau.dx-thay{ border-color:#ecc58a; background:linear-gradient(100deg,#fff6e8,#fff); } #scNoiDung .sc-khoi.cau.dx-thay::before{ background:#e08600; }
#scNoiDung .sc-khoi.cau.dx-khoa{ border-color:#a8c6e6; } #scNoiDung .sc-khoi.cau.dx-khoa::before{ background:#1f6fb5; }

/* Hình trong câu hỏi (chDungHtml_ → <img class="ch-hinh">): ở các màn của thầy / trợ giảng co nhỏ gọn như file Word tải về.
   Word: hình vuông / cao (canh) tối đa 5 × 3,8 cm, hình dài ngang tối đa 10 × 5 cm; trên màn hình lấy ≈ 1,5 lần cho dễ nhìn.
   Màn xem chi tiết câu (#chXemModal) và trang học sinh không nằm trong danh sách dưới đây nên vẫn hiện hình lớn.
   Ảnh thầy đã chỉnh cỡ (js/hinh-chinh.js, cột hinh_cai) có style inline !important nên không bị các giới hạn này chặn. */
.ch-hinh{ max-width:100%; height:auto; border-radius:8px; }
:is(#pane-cauhoi, #pane-sach, #pane-matran, #pane-lotrinhgop, #pane-lotrinhchuyen10, dialog.sc-dlg, .mt-modal) .ch-hinh{
  width:auto; max-width:min(100%, 560px); max-height:280px; object-fit:contain; background:#fff; }
:is(#pane-cauhoi, #pane-sach, #pane-matran, #pane-lotrinhgop, #pane-lotrinhchuyen10, dialog.sc-dlg, .mt-modal) .ch-hinh.canh{
  max-width:min(100%, 280px); max-height:220px; }
/* Hình vuông / cao trong ĐỀ của câu: nổi bên phải cạnh chữ + phương án như file Word (lớp ch-hinh-ben do app.js gắn khi hình tải xong) */
.ch-the-than, .sc-khoi.cau, .sdc-the, .mt-the-cau{ display:flow-root; }
:is(#pane-cauhoi, #pane-sach, #pane-matran, #pane-lotrinhgop, #pane-lotrinhchuyen10, dialog.sc-dlg, .mt-modal) .ch-hinh-ben{
  float:right; max-width:min(42%, 280px); margin:2px 0 8px 14px !important; }
:is(#pane-cauhoi, #pane-sach, #pane-matran, #pane-lotrinhgop, #pane-lotrinhchuyen10, dialog.sc-dlg, .mt-modal) .ch-hinh-ben .ch-hinh{ max-width:100%; }
/* Khung Đáp án + Lời giải của câu trong Sách nằm DƯỚI hình, không bị hình đè lên */
#pane-sach .sc-khoi.cau .sc-da, #pane-sach .sc-khoi.cau .sc-lg{ clear:both; }
#pane-sach .sc-chu .ch-hinh-ben{ margin-right:-104px !important; }   /* .sc-chu chừa 112px bên phải cho thanh nút — hình sát mép khung như Word */
/* Ảnh thầy chọn "Dưới đề": ở giữa như file Word */
:is(#pane-cauhoi, #pane-sach, #pane-matran, #pane-lotrinhgop, #pane-lotrinhchuyen10, dialog.sc-dlg, .mt-modal, #chXemModal) .my-2[data-vt="duoi"]{ text-align:center; }
@media (max-width:520px){
  :is(#pane-cauhoi, #pane-sach, #pane-matran, #pane-lotrinhgop, #pane-lotrinhchuyen10, dialog.sc-dlg, .mt-modal) .ch-hinh-ben{ float:none; max-width:100%; margin:6px 0 !important; } }
/* Ảnh banner đầu bài / chương trong Sách: giữ rộng hết khung */
#pane-sach .sc-khoi.banner .ch-hinh{ max-width:100%; max-height:none; width:100%; }

/* ── Thanh chỉnh ảnh (js/hinh-chinh.js): hiện khi rê chuột vào ảnh, chỉ Admin ── */
.hc-bang{ position:fixed; z-index:3000; display:flex; align-items:center; gap:4px; padding:4px; border:2px solid #251511; border-radius:10px; background:#fffdf7; box-shadow:3px 3px 0 #f7c544; font-size:12px; font-weight:800; color:#21160f; }
.hc-bang[hidden], .hc-tay[hidden], .hc-goi-y[hidden]{ display:none; }
.hc-bang button{ padding:3px 8px; border:1px solid #e4d4c5; border-radius:7px; background:#fff; color:#21160f; font-size:12px; font-weight:700; cursor:pointer; }
.hc-bang button:hover{ background:#fff3e0; border-color:#b10e25; } .hc-bang button.chon{ background:#b10e25; border-color:#b10e25; color:#fff; }
.hc-bang .hc-cm{ padding:0 6px; color:#7a6a60; white-space:nowrap; }
.hc-tay{ position:fixed; z-index:3000; width:24px; height:24px; display:grid; place-items:center; border:2px solid #251511; border-radius:7px; background:#f7c544; color:#251511; font-size:11px; cursor:nwse-resize; touch-action:none; box-shadow:2px 2px 0 #25151155; }
.hc-goi-y{ position:fixed; z-index:3001; padding:4px 10px; border-radius:8px; background:#251511; color:#fff; font-size:12px; font-weight:800; pointer-events:none; }
:is(#pane-sach, #pane-cauhoi, #chXemModal) img.ch-hinh{ cursor:grab; }
@media (hover:none){ .hc-bang, .hc-tay{ display:none !important; } :is(#pane-sach, #pane-cauhoi, #chXemModal) img.ch-hinh{ cursor:auto; } }

/* TAB LỘ TRÌNH 30/4 (js/lo-trinh-304.js) và LỘ TRÌNH CHUYÊN 10 (js/lo-trinh-chuyen10.js) — Admin, nhóm Đề thi, dùng chung giao diện. Bảng 4 cột phân môn × 5 giai đoạn; màu theo phân môn, khung kem + mực + đỏ như các tab nhân viên. */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) { --c-ds:#2e6f5e; --c-sh:#3b6ea5; --c-hh:#b8792e; --c-th:#8a5a9e; --mực:#15110f; --viền:#e4d9cc; --nền2:#f6efe6; --chữ-nhạt:#6b5d52; }

:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-gioi-thieu > p { margin:0 0 10px; color:var(--chữ-nhạt); font-size:14px; max-width:72ch; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-chip-hang { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin-bottom:14px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-chip { display:inline-flex; gap:6px; align-items:center; padding:6px 13px; font-size:13px; color:var(--chữ-nhạt); background:#fffdf6; border:1px solid var(--viền); border-radius:999px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-chip b { color:var(--mực); font-weight:800; font-variant-numeric:tabular-nums; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-nut { padding:7px 14px; font:700 13px/1 inherit; color:var(--mực); background:#fffdf6; border:2px solid var(--mực); border-radius:9px; box-shadow:0 3px 0 #3c0c08; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-nut:hover { transform:translateY(-1px); box-shadow:0 4px 0 #3c0c08; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-nut:active { transform:translateY(2px); box-shadow:none; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-nut:focus-visible { outline:3px solid #ffd24d; outline-offset:2px; }

:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-cuon { overflow-x:auto; background:#fff; border:1px solid var(--viền); border-radius:14px; box-shadow:0 6px 18px -12px #3c0c0840; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-bang { display:grid; grid-template-columns:repeat(4, minmax(250px, 1fr)); min-width:1040px; }

:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-dau-cot { display:flex; flex-direction:column; gap:7px; padding:14px 16px 12px; background:#fff; border-top:4px solid var(--c); border-bottom:1px solid #cdbfae; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-dau-cot + .lt-dau-cot { border-left:1px solid var(--viền); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-dau-ten { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-dau-ten h3 { margin:0; font-size:18px; font-weight:800; color:var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-diem { font-size:12.5px; font-weight:800; color:var(--c); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-dau-meta { font-size:12.5px; color:#8c7d70; font-variant-numeric:tabular-nums; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-thanh { height:5px; background:var(--nền2); border-radius:99px; overflow:hidden; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-thanh > i { display:block; height:100%; width:0; background:var(--c); border-radius:99px; transition:width .25s ease; }

:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-giai-doan { grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; padding:9px 16px; background:var(--nền2); border-block:1px solid var(--viền); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-gd-ten { font-weight:800; font-size:14.5px; color:#8e0a17; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-gd-ngay { font-size:12px; font-weight:600; color:var(--chữ-nhạt); }

:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-o { display:flex; flex-direction:column; gap:10px; padding:12px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-o + .lt-o { border-left:1px solid var(--viền); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-bai { display:flex; flex-direction:column; gap:5px; padding:10px 12px; background:#fff; border:1px solid var(--viền); border-left:3px solid var(--c); border-radius:10px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-bai.on-tap { border-left-style:dashed; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-tuan { font-size:11.5px; font-weight:800; color:var(--c); font-variant-numeric:tabular-nums; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-bai h4 { margin:0; font-size:14px; font-weight:700; line-height:1.3; color:var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-bai p { margin:0; font-size:12.5px; line-height:1.45; color:var(--chữ-nhạt); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-bai.xong h4 { color:#9b8f85; text-decoration:line-through; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-bai.xong p { opacity:.65; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-tick { display:inline-flex; align-items:center; gap:6px; margin:2px 0 0; font-size:12px; color:#8c7d70; cursor:pointer; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-tick input { width:15px; height:15px; margin:0; accent-color:var(--c); cursor:pointer; }

:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) details.lt-de { margin-top:4px; padding-top:6px; border-top:1px dashed var(--viền); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) details.lt-de summary { display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none; font-size:12px; font-weight:800; color:var(--c); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) details.lt-de summary::-webkit-details-marker { display:none; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) details.lt-de summary::before { content:"▸"; font-size:11px; transition:transform .15s ease; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) details.lt-de[open] summary::before { transform:rotate(90deg); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) details.lt-de summary:focus-visible { outline:2px solid var(--c); outline-offset:2px; border-radius:4px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-de ul { display:flex; flex-direction:column; gap:9px; margin:8px 0 2px; padding:0; list-style:none; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-de li { padding-left:10px; border-left:2px solid #cdbfae; font-size:12.5px; line-height:1.45; color:var(--chữ-nhạt); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-nam { display:block; font-size:11.5px; font-weight:800; color:var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-nguon { font-size:11px; color:#9b8f85; }

:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-ghi-chu { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-top:16px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-ghi-chu > div { padding:14px 16px; font-size:13.5px; line-height:1.55; color:var(--chữ-nhạt); background:#fffdf6; border:1px solid var(--viền); border-radius:12px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-ghi-chu b { display:block; margin-bottom:4px; color:var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-chan { margin:12px 0 0; font-size:12.5px; color:#9b8f85; }

@media (prefers-reduced-motion: reduce) {
  :is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-thanh > i, :is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-nut, :is(#pane-lotrinhgop, #pane-lotrinhchuyen10) details.lt-de summary::before { transition:none; }
}

/* ---- Riêng tab Lộ trình chuyên 10: thẻ tuần hiện tại viền vàng, ghi chú, giáo án Word, mốc kiểm tra, dải luyện đề cuối ---- */
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-bai.tuan-nay { border-color:#e3a700; box-shadow:0 0 0 2px #fff4cc; }
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-ngay { margin-left:4px; font-weight:600; color:#8c7d70; }
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-nhan-nay { margin-left:6px; padding:1px 6px; font-size:11px; font-weight:800; color:#1a1400; background:#e3a700; border-radius:4px; }
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-luu-y { font-size:12.5px; font-weight:700; color:#a84e0e; }
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-giao-an { font-size:12.5px; color:#1f6b4b; }
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-giao-an b { font-weight:800; }
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-trong { padding:6px 4px; font-size:13px; font-style:italic; color:var(--chữ-nhạt); }
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-moc { display:inline-block; margin-left:6px; padding:2px 9px; font-size:12px; font-weight:600; color:var(--mực); background:#fffdf6; border:1px solid var(--viền); border-radius:999px; }
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-chip-nay { color:#5c4300; background:#fff4cc; border-color:#e3a700; }
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-chip-nay b { color:#5c4300; }
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-cuoi { grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px; padding:16px; }
:is(#pane-lotrinhchuyen10, #pane-lotrinhgop) .lt-cuoi .lt-bai { border-left-width:1px; border-style:dashed; }
/* ---- SOẠN BÀI trong 2 tab Lộ trình (js/lo-trinh-soan.js): nút trên thẻ bài + hộp chọn câu từ Ngân hàng (hộp nằm ngoài tab nên dùng tiền tố .lts-) ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-soan-nut { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:4px; padding:5px 11px; font:700 12px/1.2 inherit; color:#fff; background:var(--c); border:0; border-radius:8px; cursor:pointer; transition:filter .2s ease, transform .2s ease; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-soan-nut:hover { filter:brightness(1.1); transform:translateY(-1px); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-soan-nut:focus-visible { outline:3px solid #ffd24d; outline-offset:2px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-soan-dem { padding:1px 7px; font-size:11px; color:var(--c); background:#fff; border-radius:99px; }

.lts-modal { --mực:#15110f; --viền:#e4d9cc; --nền2:#f6efe6; --nhạt:#6b5d52; --đỏ:#a60f1f; --vàng:#e3a700; }
.lts-modal .lts { background:#fffdf8; color:var(--mực); border:2px solid var(--mực); border-radius:14px; }
.lts-modal .modal-header { background:var(--nền2); border-bottom:1px solid var(--viền); }
.lts-modal .modal-title { font-size:17px; font-weight:800; }
.lts-modal .modal-footer { flex-wrap:wrap; justify-content:flex-start; gap:8px; background:var(--nền2); border-top:1px solid var(--viền); }
.lts-bai-tom { margin:0 0 10px; font-size:13.5px; line-height:1.5; color:var(--nhạt); }
.lts-bai-tom b { color:var(--mực); }
.lts-hang { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.lts-nhan { font-size:12.5px; font-weight:800; color:var(--nhạt); }
.lts-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lts-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 10px; font-size:13px; font-weight:600; background:#fff; border:1px solid var(--mực); border-radius:99px; }
.lts-chip b { padding:0 7px; font-size:11.5px; color:#fff; background:var(--mực); border-radius:99px; }
.lts-chip-cap { font-size:10.5px; font-weight:800; color:var(--đỏ); text-transform:uppercase; }
.lts-chip-x { width:20px; height:20px; padding:0; line-height:1; font-size:15px; color:var(--nhạt); background:transparent; border:0; border-radius:50%; cursor:pointer; }
.lts-chip-x:hover { color:#fff; background:var(--đỏ); }
.lts-mo { font-size:13px; font-style:italic; color:var(--nhạt); }
.lts-ghi { margin:8px 0; font-size:12.5px; color:var(--nhạt); }
.lts-bao { margin:8px 0; padding:8px 12px; font-size:13px; border-radius:9px; }
.lts-bao.canh { color:#6b4200; background:#fff4cc; border:1px solid var(--vàng); }
.lts-bao.loi { color:#8e0a17; background:#fde8e8; border:1px solid #e9a3a3; }
.lts-nut { padding:7px 13px; font:700 13px/1.2 inherit; color:var(--mực); background:#fffdf6; border:2px solid var(--mực); border-radius:9px; box-shadow:0 3px 0 #3c0c08; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.lts-nut:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 4px 0 #3c0c08; }
.lts-nut:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
.lts-nut:focus-visible { outline:3px solid #ffd24d; outline-offset:2px; }
.lts-nut:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.lts-nut.nho { padding:5px 10px; font-size:12px; box-shadow:0 2px 0 #3c0c08; }
.lts-nut.do { color:#fff; background:var(--đỏ); }
.lts-loc { display:flex; flex-direction:column; gap:8px; margin:10px 0 12px; padding:10px 12px; background:var(--nền2); border:1px solid var(--viền); border-radius:11px; }
.lts-pills { display:flex; flex-wrap:wrap; gap:6px; }
.lts-pill { padding:4px 11px; font-size:12.5px; font-weight:700; color:var(--mực); background:#fff; border:1px solid var(--viền); border-radius:99px; cursor:pointer; }
.lts-pill i { margin-left:3px; font-style:normal; font-weight:800; color:var(--nhạt); font-variant-numeric:tabular-nums; }
.lts-pill.dang-chon { color:#fff; background:var(--mực); border-color:var(--mực); }
.lts-pill.dang-chon i { color:#ffd24d; }
.lts-pill:focus-visible { outline:2px solid var(--đỏ); outline-offset:2px; }
.lts-chon-hang { padding-top:6px; border-top:1px dashed var(--viền); }
.lts-dem { margin-right:auto; font-size:13px; color:var(--nhạt); }
.lts-dem b { color:var(--mực); font-size:15px; }
.lts-tick { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--nhạt); cursor:pointer; }
.lts-cau { display:flex; gap:10px; margin:0 0 10px; padding:10px 12px; background:#fff; border:1px solid var(--viền); border-left:4px solid var(--viền); border-radius:10px; cursor:pointer; }
.lts-cau.dang-chon { background:#fffbea; border-color:var(--vàng); border-left-color:var(--đỏ); }
.lts-cau > input { flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--đỏ); cursor:pointer; }
.lts-cau-than { flex:1; min-width:0; font-size:14px; line-height:1.55; }
.lts-cau-dau { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-bottom:5px; font-size:12px; }
.lts-ma { font-weight:800; color:var(--nhạt); font-variant-numeric:tabular-nums; }
.lts-the { padding:1px 8px; font-weight:700; color:var(--mực); background:var(--nền2); border-radius:99px; }
.lts-the.m1 { background:#dff3e6; } .lts-the.m2 { background:#e1ecfb; } .lts-the.m3 { background:#fdebc8; } .lts-the.m4 { background:#f7d7d7; }
.lts-duong { margin-left:auto; max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9b8f85; }
.lts-lc { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:3px 14px; margin-top:6px; }
.lts-trang { display:flex; align-items:center; justify-content:center; gap:12px; margin:12px 0 4px; font-size:13px; font-weight:700; }
.lts-rong { padding:26px 12px; text-align:center; font-size:14px; color:var(--nhạt); }
.lts-da-chon { margin-right:auto; font-size:13.5px; font-weight:700; }
.lts-da-chon b { font-size:16px; color:var(--đỏ); }
.lts-tim { width:100%; margin:6px 0 10px; padding:8px 12px; font-size:14px; background:#fff; border:2px solid var(--mực); border-radius:9px; }
.lts-cay-nut { display:flex; align-items:center; gap:7px; padding:6px 8px; font-size:13.5px; border-radius:8px; cursor:pointer; }
.lts-cay-nut:hover { background:var(--nền2); }
.lts-cay-nut.dang-chon { font-weight:800; background:#fffbea; box-shadow:inset 3px 0 0 var(--đỏ); }
.lts-cay-nut.bi-bao { opacity:.55; }
.lts-cay-nut input { flex:none; width:16px; height:16px; margin:0; accent-color:var(--đỏ); pointer-events:none; }
.lts-caret { flex:none; width:16px; text-align:center; font-size:12px; color:var(--nhạt); }
.lts-cay-ten { flex:1; min-width:0; }
.lts-cay-dem { flex:none; padding:0 8px; font-size:11.5px; font-weight:800; color:#fff; background:var(--mực); border-radius:99px; font-variant-numeric:tabular-nums; }
.lts-cay-dem.khong { color:var(--nhạt); background:var(--nền2); }
.lts-cay-con { margin-left:18px; padding-left:8px; border-left:1px dashed var(--viền); }
@media (max-width:600px) { .lts-duong { display:none; } }
@media (prefers-reduced-motion: reduce) { .lts-nut, :is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-soan-nut { transition:none; } }

/* ---- Bài soạn trước ở thẻ (js/bai-soan.js): thả Word Phiếu + Lời giải → tải lại đúng mẫu "Nguyên lý cực hạn" ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-khu { display:flex; flex-direction:column; gap:5px; margin-top:4px; padding-top:6px; border-top:1px dashed var(--viền); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-hang { display:flex; flex-wrap:wrap; align-items:center; gap:5px 6px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-nut { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; font:700 12px/1.2 inherit; color:#15110f; background:#fffdf6; border:1.5px solid #15110f; border-radius:8px; box-shadow:0 2px 0 #3c0c08; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-nut.vang { background:linear-gradient(#ffe582,#ffc42e); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-nut.nhat { font-weight:600; box-shadow:none; border-style:dashed; color:#6b5d52; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-nut:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 3px 0 #3c0c08; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-nut:active:not(:disabled) { transform:translateY(1px); box-shadow:none; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-nut:disabled { opacity:.55; cursor:wait; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-nut:focus-visible { outline:3px solid #ffd24d; outline-offset:2px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-nhan { font-size:12px; font-weight:700; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-nhan.co { color:#1f6b4b; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-nhan.trong { font-weight:500; font-style:italic; color:#9b8f85; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-msg { min-height:0; font-size:12px; line-height:1.4; color:#6b5d52; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-msg:empty { display:none; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-msg.ok { color:#1f6b4b; font-weight:600; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-msg.loi { color:#b5091c; font-weight:600; }
@media (prefers-reduced-motion: reduce) { :is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .bs-nut { transition:none; } }

/* ---- Hộp Soạn bài: màn hình "Phiếu + Lời giải (theo mẫu)" — mỗi câu chọn Ví dụ / Bài tập + Mức 1–3 (js/lo-trinh-soan.js) ---- */
.lts-pf-luoi { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:8px 12px; margin:10px 0 6px; }
.lts-pf { display:flex; flex-direction:column; gap:3px; margin:0; font-size:12px; font-weight:700; color:var(--nhạt); }
.lts-pf.rong { margin:4px 0 10px; }
.lts-pf input, .lts-pf textarea { padding:7px 10px; font:500 14px/1.4 inherit; color:var(--mực); background:#fff; border:2px solid var(--mực); border-radius:9px; }
.lts-pf input:focus-visible, .lts-pf textarea:focus-visible, .lts-pr-in:focus-visible { outline:3px solid #ffd24d; outline-offset:1px; }
.lts-pr { margin:0 0 10px; padding:10px 12px; background:#fff; border:1px solid var(--viền); border-left:4px solid var(--viền); border-radius:10px; }
.lts-pr.la-vd { background:#fffbea; border-left-color:var(--đỏ); }
.lts-pr-dau { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:6px; font-size:12px; }
.lts-seg { display:inline-flex; border:2px solid var(--mực); border-radius:9px; overflow:hidden; }
.lts-seg button { padding:4px 10px; font:700 12px/1.2 inherit; color:var(--mực); background:#fffdf6; border:0; border-right:1px solid var(--viền); cursor:pointer; }
.lts-seg button:last-child { border-right:0; }
.lts-seg button.on { color:#fff; background:var(--đỏ); }
.lts-seg button:focus-visible { outline:3px solid #ffd24d; outline-offset:-3px; }
.lts-pr-in { flex:1 1 240px; min-width:0; padding:5px 9px; font:500 13px/1.4 inherit; color:var(--mực); background:#fff; border:1.5px solid var(--viền); border-radius:8px; }
.lts-pr-nd { max-height:6.4em; overflow:hidden; font-size:13.5px; line-height:1.55; mask-image:linear-gradient(#000 70%, transparent); -webkit-mask-image:linear-gradient(#000 70%, transparent); }
.lts-bao.ok { color:#1f6b4b; border-color:#1f6b4b; }

/* ---- Lộ trình VMO (js/lo-trinh-vmo.js): bảng thống kê đề, chú giải mức, 2 khung cuối trang ---- */
#pane-lotrinhgop { --do-vmo:#a4161a; --nen-vmo:#fdecec; }
#pane-lotrinhgop .lv-chip-vmo { color:var(--do-vmo); background:var(--nen-vmo); border-color:var(--do-vmo); }
#pane-lotrinhgop .lv-chip-vmo b { color:var(--do-vmo); }
#pane-lotrinhgop .lv-tong { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#6b5d52; }
#pane-lotrinhgop .lv-tong .lt-thanh { width:150px; }
#pane-lotrinhgop .lv-khung { padding:18px 20px; margin:0 0 16px; background:#fffdf6; border:1px solid var(--viền); border-radius:14px; }
#pane-lotrinhgop .lv-khung h3 { margin:0 0 6px; font-size:19px; font-weight:800; color:var(--mực); }
#pane-lotrinhgop .lv-phu { margin:0 0 12px; font-size:13.5px; color:#6b5d52; max-width:80ch; }
#pane-lotrinhgop .lv-chia { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; margin-bottom:14px; }
#pane-lotrinhgop .lv-chia > div { display:grid; gap:4px; padding:10px 12px; background:#fff; border:1px solid var(--viền); border-radius:10px; }
#pane-lotrinhgop .lv-so { font-size:22px; font-weight:800; color:var(--c); font-variant-numeric:tabular-nums; }
#pane-lotrinhgop .lv-ten { font-size:13px; font-weight:700; }
#pane-lotrinhgop .lv-chia .lt-thanh > i { background:var(--c); }
#pane-lotrinhgop .lv-chia small { font-size:12px; color:#6b5d52; }
#pane-lotrinhgop .lv-bang-cuon { overflow-x:auto; border:1px solid var(--viền); border-radius:10px; background:#fff; }
#pane-lotrinhgop .lv-bang { width:100%; min-width:760px; border-collapse:collapse; }
#pane-lotrinhgop .lv-bang th, #pane-lotrinhgop .lv-bang td { padding:9px 12px; text-align:left; vertical-align:top; font-size:13px; border-bottom:1px solid var(--viền); }
#pane-lotrinhgop .lv-bang th { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#6b5d52; background:var(--nền2); }
#pane-lotrinhgop .lv-bang tr:last-child td { border-bottom:0; }
#pane-lotrinhgop .lv-nam { font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; }
#pane-lotrinhgop .lv-ngay { white-space:nowrap; color:#6b5d52; font-size:12.5px; }
#pane-lotrinhgop .lv-cacCau { display:flex; flex-wrap:wrap; gap:5px; }
#pane-lotrinhgop .lv-cau { display:inline-flex; align-items:center; gap:5px; padding:1px 8px; font-size:12.5px; background:#fff; border:1px solid var(--viền); border-radius:6px; }
#pane-lotrinhgop .lv-cau i { flex:none; width:8px; height:8px; border-radius:2px; background:var(--c); }
#pane-lotrinhgop .lv-cau b { font-size:11.5px; color:#8c7d70; }
#pane-lotrinhgop .lv-nguon { margin:10px 0 0; font-size:12.5px; color:#8c7d70; max-width:100ch; }
#pane-lotrinhgop .lv-chu-giai { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 12px; font-size:13px; color:#6b5d52; }
#pane-lotrinhgop .lv-muc { display:inline-block; padding:0 6px; font-size:11px; font-weight:800; color:#6b5d52; background:var(--nền2); border:1px solid var(--viền); border-radius:4px; white-space:nowrap; }
#pane-lotrinhgop .lv-muc.l10 { color:#1f6b4b; border-color:#1f6b4b; }
#pane-lotrinhgop .lv-muc.k11 { color:#6a3891; border-color:#6a3891; }
#pane-lotrinhgop .lv-muc.star { color:var(--do-vmo); border-color:var(--do-vmo); }
#pane-lotrinhgop .lv-gd { display:grid; gap:3px; }
#pane-lotrinhgop .lv-gd .lt-gd-ngay { justify-self:start; }
#pane-lotrinhgop .lv-muc-tieu { margin:2px 0 0; font-size:13px; font-weight:500; color:#6b5d52; max-width:110ch; }
#pane-lotrinhgop .lt-moc.lv-do { color:var(--do-vmo); background:var(--nen-vmo); border-color:var(--do-vmo); font-weight:800; }
#pane-lotrinhgop .lv-pool { padding-left:9px; font-size:12.5px; color:#6b5d52; border-left:2px solid var(--viền); }
#pane-lotrinhgop .lv-pool b { color:var(--mực); }
#pane-lotrinhgop .lt-nam .lv-muc { margin-left:6px; }
#pane-lotrinhgop .lv-hai-cot { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
#pane-lotrinhgop .lv-dong { display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:13.5px; border-bottom:1px dashed var(--viền); }
#pane-lotrinhgop .lv-dong:last-child { border-bottom:0; }
#pane-lotrinhgop .lv-dong span { color:#6b5d52; text-align:right; }
#pane-lotrinhgop .lv-gach { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
#pane-lotrinhgop .lv-gach li { position:relative; padding-left:18px; font-size:13.5px; line-height:1.5; }
#pane-lotrinhgop .lv-gach li::before { content:"—"; position:absolute; left:0; font-weight:800; color:var(--do-vmo); }
@media (max-width:899px) { #pane-lotrinhgop .lv-hai-cot { grid-template-columns:1fr; } }

/* ---- Cập nhật 19/10/2026: số Buổi của kho thư mục, phiếu đã soạn, mốc thi thử (30/4), đối chiếu chương trình (VMO) ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-dau-the { display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-buoi { display:inline-block; padding:1px 7px; font-size:11px; font-weight:800; letter-spacing:.02em; color:var(--mực); background:var(--nền2); border:1px solid var(--viền); border-radius:5px; white-space:nowrap; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10) .lt-da-soan { display:inline-block; padding:1px 7px; font-size:11px; font-weight:800; color:#fff; background:#1f6b4b; border-radius:5px; white-space:nowrap; }
#pane-lotrinhgop .lv-phieu { display:grid; gap:2px; padding:7px 10px; font-size:12.5px; line-height:1.45; color:var(--mực); background:#f2fbf5; border:1px solid #1f6b4b; border-radius:8px; overflow-wrap:anywhere; }
#pane-lotrinhgop .lv-phieu b { color:#1f6b4b; }
#pane-lotrinhgop .lv-phieu span { color:#4b4339; }
#pane-lotrinhgop .lv-syl { display:grid; gap:12px; }
#pane-lotrinhgop .lv-syl-nhom { overflow:hidden; background:#fff; border:1px solid var(--viền); border-top:3px solid var(--c); border-radius:10px; }
#pane-lotrinhgop .lv-syl-nhom h4 { margin:0; padding:8px 12px; font-size:14.5px; font-weight:800; color:var(--c); background:var(--nền2); }
#pane-lotrinhgop .lv-syl-dong { display:grid; grid-template-columns:minmax(180px, 1fr) minmax(180px, 2fr); gap:4px 14px; padding:8px 12px; font-size:13px; border-top:1px solid var(--viền); }
#pane-lotrinhgop .lv-syl-dong > b { font-weight:700; }
#pane-lotrinhgop .lv-syl-dong > span { font-size:12.5px; color:#6b5d52; }
#pane-lotrinhgop .lv-syl-ma { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:5px; }
#pane-lotrinhgop .lv-ma { padding:0 7px; font-size:11.5px; font-weight:700; color:var(--c); white-space:nowrap; background:#fff; border:1px solid var(--c); border-radius:6px; }
#pane-lotrinhgop .lv-phat { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
#pane-lotrinhgop .lv-phat li { display:grid; grid-template-columns:auto 1fr; gap:3px 12px; align-items:baseline; padding:9px 13px; background:#fff; border:1px solid var(--viền); border-radius:10px; }
#pane-lotrinhgop .lv-phat .lv-phat-tuan { font-size:12px; font-weight:800; color:var(--do-vmo); white-space:nowrap; }
#pane-lotrinhgop .lv-phat .lv-phat-ten { font-weight:700; overflow-wrap:anywhere; }
#pane-lotrinhgop .lv-phat .lv-phat-them { grid-column:2; font-size:12.5px; color:#6b5d52; overflow-wrap:anywhere; }
#pane-lotrinhgop .lt-moc-hang { grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px; padding:4px 12px 14px; }
#pane-lotrinhgop .lt-moc-the { display:grid; gap:3px; padding:9px 12px; font-size:12.5px; line-height:1.45; color:#4b4339; background:#fff8e6; border:1px dashed #c58a00; border-radius:10px; }
#pane-lotrinhgop .lt-moc-the b { color:#8e0a17; }
#pane-lotrinhgop .lt-moc-the.nghi { background:#f1f4f8; border-color:#8c9aab; }
#pane-lotrinhgop .lt-moc-the.nghi b { color:#3b4a5c; }
@media (max-width:899px) { #pane-lotrinhgop .lv-syl-dong { grid-template-columns:1fr; } }

/* ---- Lộ trình gộp VMO + 30/4 (21/10/2026): đối tượng, trạng thái phiếu, ★ trước VMO, bộ lọc, khung bài cần dạy trước VMO ---- */
#pane-lotrinhgop .lg-ai, #pane-lotrinhgop .lg-tt, #pane-lotrinhgop .lg-truoc { display:inline-block; padding:1px 8px; font-size:11px; font-weight:800; line-height:1.5; border-radius:5px; white-space:nowrap; }
#pane-lotrinhgop .lg-ai.a { color:#fff; background:#1f6b4b; }
#pane-lotrinhgop .lg-ai.v { color:#fff; background:#c25a0a; }
#pane-lotrinhgop .lg-ai.av { color:#fff; background:linear-gradient(100deg, #1f6b4b 0 50%, #c25a0a 50% 100%); }
#pane-lotrinhgop .lg-tt { color:#5b5046; background:#fff; border:1px solid var(--viền); }
#pane-lotrinhgop .lg-tt.giu { color:#1f6b4b; border-color:#1f6b4b; }
#pane-lotrinhgop .lg-tt.moi { color:#a4161a; border-color:#a4161a; }
#pane-lotrinhgop .lg-tt.tongon, #pane-lotrinhgop .lg-tt.ghepde { color:#6a3891; border-color:#6a3891; }
#pane-lotrinhgop .lg-tt.sausau, #pane-lotrinhgop .lg-tt.chode { color:#8c7d70; border-style:dashed; }
#pane-lotrinhgop .lg-truoc { color:#fff; background:#a4161a; }
#pane-lotrinhgop .lt-bai.truoc-vmo { border-color:#a4161a; box-shadow:0 0 0 2px #fdecec; }
#pane-lotrinhgop .lg-gv { font-size:11.5px; color:#8c7d70; }
#pane-lotrinhgop .lg-the.lg-nhay { animation:lg-nhay 1.1s ease-in-out 2; }
@keyframes lg-nhay { 0%, 100% { box-shadow:0 0 0 0 #ffd24d00; } 50% { box-shadow:0 0 0 8px #ffd24dcc; } }
#pane-lotrinhgop .lg-loc { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; }
#pane-lotrinhgop .lg-loc-nut { padding:6px 13px; font:inherit; font-size:13px; font-weight:700; color:var(--mực); cursor:pointer; background:#fffdf6; border:1px solid var(--viền); border-radius:999px; }
#pane-lotrinhgop .lg-loc-nut.dang { color:#fff; background:#a4161a; border-color:#a4161a; }
#pane-lotrinhgop .lg-loc-dem { font-size:12.5px; font-weight:700; color:#a4161a; }
#pane-lotrinhgop .lg-truoc-luoi { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
#pane-lotrinhgop .lg-truoc-tuan { display:flex; flex-direction:column; gap:5px; padding:9px 11px; background:#fff; border:1px solid var(--viền); border-top:3px solid #a4161a; border-radius:10px; }
#pane-lotrinhgop .lg-truoc-tuan > b { font-size:14px; color:#a4161a; }
#pane-lotrinhgop .lg-truoc-tuan > small { margin-top:-5px; font-size:11.5px; color:#8c7d70; }
#pane-lotrinhgop .lg-truoc-buoi { display:block; padding:4px 8px; font-size:12.5px; font-weight:600; line-height:1.35; color:var(--mực); text-decoration:none; background:var(--nền2); border-left:4px solid #8c7d70; border-radius:6px; }
#pane-lotrinhgop .lg-truoc-buoi:hover { background:#fff4cc; }
#pane-lotrinhgop .lg-truoc-buoi.giu { border-left-color:#1f6b4b; }
#pane-lotrinhgop .lg-truoc-buoi.moi { border-left-color:#a4161a; }
#pane-lotrinhgop .lg-truoc-buoi i { font-style:normal; font-size:11px; font-weight:800; color:#8c7d70; }
#pane-lotrinhgop .lg-duytri { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 14px; }
#pane-lotrinhgop .lg-duytri-tieu { flex:1 1 100%; font-size:13px; color:#6b5d52; }
#pane-lotrinhgop .lg-duytri-chip { padding:1px 8px; font-size:12px; font-weight:700; color:#6b5d52; background:#fff; border:1px dashed var(--viền); border-radius:6px; }
#pane-lotrinhgop .lg-duytri-chip i { font-style:normal; font-size:10.5px; color:#8c7d70; }
#pane-lotrinhgop .lg-gap > summary { cursor:pointer; list-style:none; }
#pane-lotrinhgop .lg-gap > summary::-webkit-details-marker { display:none; }
#pane-lotrinhgop .lg-gap > summary h3 { display:inline; }
#pane-lotrinhgop .lg-gap > summary::before { content:"▸ "; color:#a4161a; font-weight:800; }
#pane-lotrinhgop .lg-gap[open] > summary::before { content:"▾ "; }
#pane-lotrinhgop .lg-gap[open] > summary { margin-bottom:10px; }
#pane-lotrinhgop .lg-quy-uoc { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
#pane-lotrinhgop .lg-quy-uoc li { padding-left:16px; font-size:13.5px; line-height:1.5; position:relative; }
#pane-lotrinhgop .lg-quy-uoc li::before { content:"—"; position:absolute; left:0; font-weight:800; color:#a4161a; }
#pane-lotrinhgop .lg-quy-uoc b { margin-right:4px; }
#pane-lotrinhgop .lg-gop { width:100%; border-collapse:collapse; font-size:13px; }
#pane-lotrinhgop .lg-gop th, #pane-lotrinhgop .lg-gop td { padding:6px 10px; text-align:left; vertical-align:top; border-bottom:1px solid var(--viền); }
#pane-lotrinhgop .lg-gop th { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#6b5d52; background:var(--nền2); }

/* =====================================================================================
 * 3 TAB LỘ TRÌNH (30/4 · Chuyên 10 · VMO) — GIAO DIỆN "TRUYỆN TRANH SIÊU ANH HÙNG" (thầy yêu cầu 18/10/2026).
 * Cùng phong cách trang học sinh / Đăng ký xếp lớp: giấy kem chấm bi (đã có từ class .mv), viền mực dày, bóng đổ cứng lệch (màu theo phân môn),
 * tem nghiêng, chữ Bangers, đỏ – vàng. Chỉ là lớp màu phủ lên css/lo-trinh-304.css (cấu trúc giữ nguyên); nạp SAU file đó.
 * Chỉ phong cách — không dùng logo / nhân vật có bản quyền.
 * ===================================================================================== */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv { --mực:#15110f; --viền:#15110f55; --đỏ:#b5091c; --đỏ-đậm:#6d0a12; --vàng:#ffc42e; --kem:#fff6df; --giấy:#fffdf6; --nhạt:#5d554b;
  --chữ-nhạt:#5d554b; --nền2:#fff0c9; }
@keyframes lt-mv-len { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes lt-mv-dap { 0% { transform:scale(.6) rotate(-6deg); opacity:0; } 70% { transform:scale(1.08) rotate(2deg); } 100% { transform:scale(1) rotate(-2deg); opacity:1; } }

/* ---- Lời dẫn + các ô số liệu (tem nghiêng) ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-gioi-thieu > p { max-width:76ch; padding:10px 14px; font-size:13.5px; font-weight:600; line-height:1.5; color:#574020; background:#fff0c9; border:2px dashed #c9a24a; border-radius:10px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-chip { gap:6px; padding:6px 13px; font-size:12.5px; font-weight:700; color:var(--mực); background:linear-gradient(var(--giấy), #ffe9b0); border:2px solid var(--mực); border-radius:9px; box-shadow:3px 3px 0 var(--đỏ); transform:skew(-4deg); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-chip b { white-space:nowrap; font:400 19px/1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.04em; color:var(--đỏ); text-shadow:1px 1px 0 #fff3b0; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-chip-nay, :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-chip-vmo { background:linear-gradient(#ffe582, var(--vàng)); box-shadow:3px 3px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-chip-vmo { color:#fff; background:linear-gradient(#e23636, var(--đỏ)); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-chip-vmo b { color:#ffe582; text-shadow:1px 1px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-nut { padding:8px 15px; font:800 13px/1 'Be Vietnam Pro',system-ui,sans-serif; color:#19130c; background:linear-gradient(#ffe582, var(--vàng)); border:2.5px solid var(--mực); border-radius:10px; box-shadow:0 4px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-nut:hover { transform:translateY(-2px) rotate(-1deg); box-shadow:0 6px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-nut:active { transform:translateY(3px); box-shadow:0 1px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-tong { font-weight:700; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-thanh { height:9px; background:#fff; border:2px solid var(--mực); border-radius:99px; box-shadow:1px 1px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-thanh > i { background:repeating-linear-gradient(135deg, var(--c, var(--đỏ)) 0 8px, color-mix(in srgb, var(--c, var(--đỏ)) 70%, #fff) 8px 16px); border-radius:0; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-tong .lt-thanh > i { --c:var(--đỏ); }

/* ---- Khung bảng + đầu cột ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-cuon { background:var(--giấy); border:3px solid var(--mực); border-radius:14px; box-shadow:6px 6px 0 var(--đỏ); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-dau-cot { gap:8px; padding:16px 16px 14px; background:linear-gradient(#fff, var(--giấy)); border-top:7px solid var(--c); border-bottom:3px solid var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-dau-cot + .lt-dau-cot { border-left:2px solid var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-dau-ten h3 { font:400 28px/1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.04em; text-transform:uppercase; color:var(--c); text-shadow:2px 2px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-diem { padding:3px 9px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--c); border:2px solid var(--mực); border-radius:6px; box-shadow:2px 2px 0 var(--mực); transform:skew(-5deg); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-dau-meta { font-size:12.5px; font-weight:700; color:var(--nhạt); }

/* ---- Băng giai đoạn: nền mực đỏ sẫm, chữ Bangers vàng ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-giai-doan { position:relative; padding:12px 16px; background:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.4px) 0 0/9px 9px, linear-gradient(115deg, var(--mực), #5a040b 55%, var(--đỏ-đậm)); border-block:3px solid var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-gd-ten { font:400 22px/1.1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.05em; color:#ffd24d; text-shadow:2px 2px 0 #7a0610, 3px 3px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-gd-ngay { font-size:12px; font-weight:700; color:#ffeccf; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-moc { margin-left:6px; padding:2px 10px; font-size:11.5px; font-weight:800; color:var(--mực); background:linear-gradient(#ffe582, var(--vàng)); border:2px solid var(--mực); border-radius:6px; box-shadow:2px 2px 0 var(--mực); transform:skew(-5deg); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-moc.lv-do { color:#fff; background:linear-gradient(#e23636, var(--đỏ)); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-muc-tieu { color:#ffeccf; font-weight:500; }

/* ---- Thẻ bài: viền mực, bóng cứng màu phân môn, vạch màu bên trái ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-o { gap:14px; padding:14px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-o + .lt-o { border-left:2px dashed var(--viền); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai { position:relative; gap:6px; padding:12px 13px 11px; background:linear-gradient(var(--giấy), var(--kem)); border:3px solid var(--mực); border-left:9px solid var(--c, var(--mực)); border-radius:12px; box-shadow:4px 4px 0 var(--c, var(--đỏ)); animation:lt-mv-len .45s cubic-bezier(.16,1,.3,1) backwards; transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai:hover { transform:translateY(-3px); box-shadow:4px 7px 0 var(--c, var(--đỏ)); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai.on-tap { border-style:dashed; border-left-style:solid; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai.tuan-nay { background:linear-gradient(#fffbe0, #ffefb0); box-shadow:4px 4px 0 var(--mực), 0 0 0 4px #ffd24d99; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai.tuan-nay:hover { box-shadow:4px 7px 0 var(--mực), 0 0 0 4px #ffd24d99; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai.xong { filter:saturate(.55); opacity:.8; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai.xong::after { content:'✓ ĐÃ XONG'; position:absolute; top:8px; right:8px; padding:2px 8px; font:400 15px/1.1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.06em; color:#1b7f46; background:#fff; border:2px solid #1b7f46; border-radius:5px; transform:rotate(-4deg); animation:lt-mv-dap .5s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai.xong h4 { text-decoration:none; color:#6b625b; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-tuan { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:2px 10px; font:400 16px/1.15 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.05em; color:#fff; background:var(--c, var(--mực)); border:2px solid var(--mực); border-radius:6px; box-shadow:2px 2px 0 var(--mực); transform:skew(-5deg); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-ngay { margin:0; font:700 11.5px/1 'Be Vietnam Pro',sans-serif; color:#fff; opacity:.92; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-nhan-nay { margin:0; padding:1px 7px; font:400 14px/1.2 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.05em; color:var(--mực); background:linear-gradient(#ffe582, var(--vàng)); border:2px solid var(--mực); border-radius:5px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai h4 { font-size:15.5px; font-weight:800; line-height:1.28; color:var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai p { font-size:13px; line-height:1.5; color:#4b4339; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-luu-y { padding:5px 9px; font-size:12.5px; font-weight:700; color:#8a3a00; background:#ffe9c4; border:1.5px dashed #c9812a; border-radius:7px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-giao-an { padding:5px 9px; font-size:12.5px; color:#17603f; background:#e8f7ee; border:1.5px solid #1b7f46; border-radius:7px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-pool { padding:5px 9px; font-size:12.5px; color:var(--nhạt); background:#fff; border:1.5px dashed var(--viền); border-left:4px solid var(--c, var(--mực)); border-radius:6px; }

/* ---- Đề thật xổ xuống ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv details.lt-de { margin-top:3px; padding-top:7px; border-top:2px dashed var(--viền); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv details.lt-de summary { align-self:flex-start; display:inline-flex; padding:2px 10px; font-size:12px; font-weight:800; letter-spacing:.03em; color:var(--mực); background:#fff; border:2px solid var(--mực); border-radius:6px; box-shadow:2px 2px 0 var(--c, var(--đỏ)); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv details.lt-de[open] summary { background:linear-gradient(#ffe582, var(--vàng)); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-de li { padding:6px 9px; font-size:12.5px; line-height:1.5; color:#3f372f; background:#fff; border:1.5px solid var(--viền); border-left:4px solid var(--c, var(--mực)); border-radius:7px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-nam { font:400 15px/1.2 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.04em; color:var(--đỏ); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-nguon { font-size:11px; font-weight:600; color:#8c7d70; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-tick { padding:3px 9px 3px 7px; font-size:12.5px; font-weight:800; color:var(--mực); background:#fff; border:2px solid var(--mực); border-radius:7px; align-self:flex-start; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-tick input { accent-color:var(--đỏ); }

/* ---- Nút bài soạn trước + Soạn bài ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .bs-khu { padding-top:7px; border-top:2px dashed var(--viền); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .bs-nut { padding:5px 10px; font:800 12px/1.2 'Be Vietnam Pro',system-ui,sans-serif; border:2px solid var(--mực); border-radius:8px; box-shadow:0 3px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .bs-nut.vang { background:linear-gradient(#ffe582, var(--vàng)); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .bs-nut:hover:not(:disabled) { transform:translateY(-2px) rotate(-1deg); box-shadow:0 5px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .bs-nhan.co { color:#17603f; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-soan-nut { padding:6px 12px; font:800 12.5px/1.2 'Be Vietnam Pro',system-ui,sans-serif; color:#fff; background:linear-gradient(#e23636, var(--đỏ)); border:2.5px solid var(--mực); border-radius:9px; box-shadow:0 4px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-soan-nut:hover { filter:none; transform:translateY(-2px) rotate(-1deg); box-shadow:0 6px 0 var(--mực); }

/* ---- Thẻ luyện đề cuối + chỗ trống + ghi chú ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-cuoi { gap:16px; padding:18px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-cuoi .lt-bai { border-left-width:3px; border-style:dashed; box-shadow:4px 4px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-trong { padding:10px 12px; font-size:13px; font-weight:600; font-style:italic; color:var(--nhạt); background:#fff; border:2px dashed var(--viền); border-radius:9px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-ghi-chu { gap:16px; margin-top:20px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-ghi-chu > div { padding:12px 15px; font-size:13px; font-weight:500; line-height:1.55; color:#4b4339; background:linear-gradient(var(--giấy), var(--kem)); border:2.5px solid var(--mực); border-radius:11px; box-shadow:4px 4px 0 #e0a100; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-ghi-chu b { margin-bottom:4px; font:400 18px/1.1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.05em; color:var(--đỏ); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-chan { font-weight:600; }

/* ---- Riêng VMO: thống kê đề, chú giải mức, 2 khung cuối ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-khung { padding:18px 20px; background:linear-gradient(var(--giấy), var(--kem)); border:3px solid var(--mực); border-radius:14px; box-shadow:6px 6px 0 var(--đỏ); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-khung h3 { font:400 26px/1.1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.05em; color:var(--đỏ); text-shadow:2px 2px 0 #fff3b0; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-phu { font-weight:500; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-chia > div { position:relative; padding:11px 13px; background:#fff; border:2.5px solid var(--mực); border-radius:11px; box-shadow:3px 3px 0 var(--c); transform:skew(-2deg); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-so { font:400 32px/1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.03em; color:var(--c); text-shadow:2px 2px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-ten { font-weight:800; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-bang-cuon { background:#fff; border:2.5px solid var(--mực); border-radius:11px; box-shadow:3px 3px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-bang th { font-size:12px; font-weight:800; letter-spacing:.05em; color:#ffd24d; background:var(--mực); border-bottom:3px solid var(--đỏ); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-bang td { border-bottom:1.5px dashed var(--viền); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-nam { font:400 19px/1.1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.04em; color:var(--đỏ); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-cau { padding:1px 9px; font-weight:600; border:1.5px solid var(--mực); border-radius:6px; box-shadow:1.5px 1.5px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-muc { padding:0 7px; font-weight:800; background:#fff; border:2px solid; border-radius:5px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-gach li::before { color:var(--đỏ); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-dong { border-bottom:2px dashed var(--viền); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-nguon { font-weight:500; }
/* Cập nhật 19/10/2026: nhãn Buổi, phiếu đã soạn, đối chiếu chương trình, mốc thi thử */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-buoi { padding:1px 8px; font-size:11px; color:var(--mực); background:#fff; border:2px solid var(--mực); border-radius:5px; box-shadow:1.5px 1.5px 0 var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-da-soan { padding:1px 8px; font:400 14px/1.2 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.05em; color:#fff; background:linear-gradient(#2a9a5f, #1b7f46); border:2px solid var(--mực); border-radius:5px; box-shadow:1.5px 1.5px 0 var(--mực); transform:rotate(-2deg); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-phieu { background:#e8f7ee; border:1.5px solid #1b7f46; border-radius:8px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-syl-nhom { border:2.5px solid var(--mực); border-top:6px solid var(--c); border-radius:11px; box-shadow:3px 3px 0 var(--c); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-syl-nhom h4 { font:400 20px/1.1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.05em; background:linear-gradient(var(--giấy), var(--kem)); border-bottom:2px solid var(--mực); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-syl-dong { border-top:1.5px dashed var(--viền); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-syl-nhom h4 + .lv-syl-dong { border-top:0; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-ma { border-width:1.5px; box-shadow:1.5px 1.5px 0 var(--c); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-phat li { border:2.5px solid var(--mực); border-left:8px solid #1b7f46; border-radius:11px; box-shadow:3px 3px 0 #1b7f46; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lv-phat .lv-phat-tuan { font:400 17px/1.1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.04em; color:var(--đỏ); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-moc-hang { gap:14px; padding:6px 14px 16px; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-moc-the { font-weight:500; background:linear-gradient(#fffbe0, #ffefb0); border:2.5px dashed var(--mực); border-radius:11px; box-shadow:3px 3px 0 var(--đỏ); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-moc-the b { font:400 18px/1.1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.04em; color:var(--đỏ); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-moc-the.nghi { background:linear-gradient(#f6f8fb, #e4e9f0); box-shadow:3px 3px 0 #5b6b80; }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-moc-the.nghi b { color:#3b4a5c; }

@media (max-width:899px) {
  :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-dau-ten h3 { font-size:24px; }
  :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai { border-left-width:7px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai, :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai.xong::after { animation:none; }
  :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai, :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai:hover, :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-nut, :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-nut:hover, :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .bs-nut, :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .bs-nut:hover:not(:disabled), :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-soan-nut, :is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-soan-nut:hover { transition:none; transform:none; }
}

/* ---- Kéo file Word thả vào thẻ (js/bai-soan.js) ---- */
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai.bs-keo { background:linear-gradient(#fffbe0, #ffe9a3); outline:3px dashed var(--đỏ); outline-offset:3px; transform:translateY(-3px) rotate(-.6deg); }
:is(#pane-lotrinhgop, #pane-lotrinhchuyen10).mv .lt-bai.bs-keo::before { content:'⬇ THẢ FILE WORD VÀO ĐÂY'; position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:12px; text-align:center; font:400 24px/1.15 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.06em; color:var(--đỏ); text-shadow:1px 1px 0 #fff3b0; background:#fffbe0e6; border-radius:9px; pointer-events:none; }

/* Lộ trình gộp (21/10/2026): nhãn đối tượng / trạng thái, bài ★ trước VMO, bộ lọc, khung bài cần dạy trước VMO */
:is(#pane-lotrinhgop).mv .lg-ai, :is(#pane-lotrinhgop).mv .lg-tt, :is(#pane-lotrinhgop).mv .lg-truoc { border:2px solid var(--mực); border-radius:5px; box-shadow:1.5px 1.5px 0 var(--mực); }
:is(#pane-lotrinhgop).mv .lg-truoc { font:400 14px/1.3 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.05em; color:#ffe582; background:linear-gradient(#e23636, var(--đỏ)); transform:rotate(-1.5deg); }
:is(#pane-lotrinhgop).mv .lt-bai.truoc-vmo { border-color:var(--mực); border-left-color:var(--đỏ); box-shadow:4px 4px 0 var(--đỏ), 0 0 0 3px #fdecec; }
:is(#pane-lotrinhgop).mv .lg-loc-nut { color:var(--mực); font-weight:800; background:linear-gradient(var(--giấy), var(--kem)); border:2.5px solid var(--mực); box-shadow:2px 2px 0 var(--mực); }
:is(#pane-lotrinhgop).mv .lg-loc-nut.dang { color:#ffe582; background:linear-gradient(#e23636, var(--đỏ)); box-shadow:2px 2px 0 var(--mực); }
:is(#pane-lotrinhgop).mv .lg-truoc-tuan { border:2.5px solid var(--mực); border-top:6px solid var(--đỏ); border-radius:11px; box-shadow:3px 3px 0 var(--đỏ); }
:is(#pane-lotrinhgop).mv .lg-truoc-tuan > b { font:400 20px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.05em; }
:is(#pane-lotrinhgop).mv .lg-truoc-buoi { border:1.5px solid var(--mực); border-left:5px solid #8c7d70; border-radius:6px; }
:is(#pane-lotrinhgop).mv .lg-truoc-buoi.giu { border-left-color:#1b7f46; }
:is(#pane-lotrinhgop).mv .lg-truoc-buoi.moi { border-left-color:var(--đỏ); }
:is(#pane-lotrinhgop).mv .lg-duytri-chip { border:1.5px dashed var(--mực); }
:is(#pane-lotrinhgop).mv .lg-gap > summary h3 { font:400 26px/1.1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.04em; color:var(--đỏ); }

/* TAB "TRÌNH CHIẾU" (Admin + trợ giảng) — thư viện bài giảng theo kiểu truyện tranh đỏ–vàng như các tab Lộ trình, + trình phát toàn màn hình nền tối (js/trinh-chieu.js) */
#pane-trinhchieu.mv { --mực:#15110f; --đỏ:#b5091c; --vàng:#ffc42e; --kem:#fff6df; --giấy:#fffdf6; --nhạt:#5d554b; }
#pane-trinhchieu .tc-loc { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 10px; }
#pane-trinhchieu .tc-chip-hang { display:flex; flex-wrap:wrap; gap:8px; }
#pane-trinhchieu .tc-chip { padding:6px 14px; font:700 13px/1 'Be Vietnam Pro',system-ui,sans-serif; color:var(--mực); background:var(--giấy); border:2px solid var(--mực); border-radius:9px; box-shadow:3px 3px 0 var(--mực); cursor:pointer; transition:transform .15s; }
#pane-trinhchieu .tc-chip:hover { transform:translateY(-2px); }
#pane-trinhchieu .tc-chip.dang { color:#fff; background:linear-gradient(#e23636, var(--đỏ)); box-shadow:3px 3px 0 var(--vàng); }
#pane-trinhchieu .tc-tim { flex:1 1 220px; max-width:340px; margin-left:auto; padding:7px 12px; font-size:14px; color:var(--mực); background:#fff; border:2px solid var(--mực); border-radius:9px; }
#pane-trinhchieu .tc-tim:focus, #pane-trinhchieu .tc-inp:focus { outline:3px solid #ffc42e99; outline-offset:0; }

#pane-trinhchieu .tc-note { margin:8px 0; font-size:13.5px; font-weight:600; }
#pane-trinhchieu .tc-note:empty { display:none; }
#pane-trinhchieu .tc-ok { color:#17603f; }
#pane-trinhchieu .tc-loi { color:#9b1220; }

#pane-trinhchieu .tc-luoi { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:16px; margin:12px 0 22px; }
#pane-trinhchieu .tc-trong { grid-column:1 / -1; padding:26px; text-align:center; font-weight:600; color:var(--nhạt); background:var(--giấy); border:2px dashed #c9a24a; border-radius:12px; }
#pane-trinhchieu .tc-the { display:flex; flex-direction:column; gap:10px; padding:14px 15px 13px; background:linear-gradient(var(--giấy), var(--kem)); border:3px solid var(--mực); border-left:9px solid var(--đỏ); border-radius:12px; box-shadow:4px 4px 0 var(--đỏ); transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
#pane-trinhchieu .tc-the:hover { transform:translateY(-3px); box-shadow:4px 7px 0 var(--đỏ); }
#pane-trinhchieu .tc-the-an { opacity:.65; border-style:dashed; border-left-style:solid; }
#pane-trinhchieu .tc-the-dau { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#pane-trinhchieu .tc-khoi { padding:2px 9px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--đỏ); border:2px solid var(--mực); border-radius:6px; box-shadow:2px 2px 0 var(--mực); }
#pane-trinhchieu .tc-cd { font-size:12px; font-weight:700; color:#8a3a00; }
#pane-trinhchieu .tc-nhan-an { margin-left:auto; padding:1px 7px; font-size:11px; font-weight:800; color:var(--mực); background:#e9e2d2; border:1.5px solid var(--mực); border-radius:5px; }
#pane-trinhchieu .tc-the h4 { margin:0; font-size:16.5px; font-weight:800; line-height:1.3; color:var(--mực); }
#pane-trinhchieu .tc-the-chan { display:flex; align-items:center; gap:10px; margin-top:auto; }
#pane-trinhchieu .tc-so { font-size:12.5px; font-weight:700; color:var(--nhạt); }
#pane-trinhchieu .tc-nut { margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:8px 15px; font:800 13px/1 'Be Vietnam Pro',system-ui,sans-serif; color:#19130c; background:linear-gradient(#ffe582, var(--vàng)); border:2.5px solid var(--mực); border-radius:10px; box-shadow:0 4px 0 var(--mực); cursor:pointer; transition:transform .12s, box-shadow .12s; }
#pane-trinhchieu .tc-nut:hover:not(:disabled) { transform:translateY(-2px) rotate(-1deg); box-shadow:0 6px 0 var(--mực); }
#pane-trinhchieu .tc-nut:active:not(:disabled) { transform:translateY(3px); box-shadow:0 1px 0 var(--mực); }
#pane-trinhchieu .tc-nut:disabled, #pane-trinhchieu .tc-nut-phu:disabled { opacity:.5; cursor:not-allowed; }
#pane-trinhchieu .tc-nut-phu { padding:7px 13px; font:700 13px/1 'Be Vietnam Pro',system-ui,sans-serif; color:var(--mực); background:#fff; border:2px solid var(--mực); border-radius:9px; cursor:pointer; }
#pane-trinhchieu .tc-nut-phu:hover:not(:disabled) { background:#fff0c9; }

/* Khung quản lý (chỉ Admin) */
#pane-trinhchieu .tc-quan-ly { display:flex; flex-direction:column; gap:12px; }
#pane-trinhchieu .tc-ql { background:var(--giấy); border:3px solid var(--mực); border-radius:12px; box-shadow:4px 4px 0 var(--mực); }
#pane-trinhchieu .tc-ql > summary { padding:11px 15px; font-size:15px; font-weight:800; color:var(--mực); cursor:pointer; list-style:none; }
#pane-trinhchieu .tc-ql > summary::-webkit-details-marker { display:none; }
#pane-trinhchieu .tc-ql > summary i { margin-right:6px; color:var(--đỏ); }
#pane-trinhchieu .tc-ql > summary small { margin-left:8px; font-size:12px; font-weight:600; color:var(--nhạt); }
#pane-trinhchieu .tc-ql[open] > summary { border-bottom:2px dashed #c9a24a; }
#pane-trinhchieu .tc-ql-than { display:flex; flex-direction:column; gap:12px; padding:14px 15px 16px; }
#pane-trinhchieu .tc-luoi-form { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; }
#pane-trinhchieu .tc-o { display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--nhạt); }
#pane-trinhchieu .tc-rong { grid-column:1 / -1; }
#pane-trinhchieu .tc-inp { width:100%; padding:7px 10px; font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--mực); background:#fff; border:2px solid var(--mực); border-radius:8px; }
#pane-trinhchieu .tc-hang-them { display:flex; flex-wrap:wrap; gap:8px; }
#pane-trinhchieu .tc-hang-them .tc-inp { flex:1 1 260px; width:auto; }
#pane-trinhchieu .tc-hang-nut { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
#pane-trinhchieu .tc-hang-nut[hidden] { display:none; }
#pane-trinhchieu .tc-hang-nut .tc-nut { margin-left:0; }
#pane-trinhchieu .tc-tick { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
#pane-trinhchieu .tc-thu-tu { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
#pane-trinhchieu .tc-thu-tu li { display:flex; align-items:center; gap:8px; padding:7px 10px; background:#fff; border:2px solid var(--mực); border-radius:9px; }
#pane-trinhchieu .tc-stt { flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; font-size:12px; font-weight:800; color:#fff; background:var(--đỏ); border:2px solid var(--mực); border-radius:50%; }
#pane-trinhchieu .tc-ten-slide { flex:1; min-width:0; font-size:14px; font-weight:700; }
#pane-trinhchieu .tc-ten-slide small, #pane-trinhchieu .tc-dong-ten small { display:block; font-size:11.5px; font-weight:500; color:var(--nhạt); }
#pane-trinhchieu .tc-thu-tu button { width:28px; height:28px; padding:0; color:var(--mực); background:#fff0c9; border:2px solid var(--mực); border-radius:7px; cursor:pointer; }
#pane-trinhchieu .tc-thu-tu button:disabled { opacity:.35; cursor:default; }
#pane-trinhchieu .tc-trong-nho { padding:9px 4px; font-size:13px; color:var(--nhạt); }
#pane-trinhchieu .tc-ds { display:flex; flex-direction:column; gap:7px; }
#pane-trinhchieu .tc-dong { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; background:#fff; border:2px solid var(--mực); border-radius:9px; }
#pane-trinhchieu .tc-dong-ten { flex:1 1 200px; min-width:0; font-size:14px; font-weight:700; }
#pane-trinhchieu .tc-nut-nho { padding:5px 11px; font:700 12px/1 'Be Vietnam Pro',system-ui,sans-serif; color:var(--mực); background:#fff0c9; border:2px solid var(--mực); border-radius:7px; cursor:pointer; }
#pane-trinhchieu .tc-nut-nho:hover { background:var(--vàng); }
#pane-trinhchieu .tc-nut-nho.tc-xoa { color:#fff; background:var(--đỏ); }
#pane-trinhchieu .tc-tha { display:block; padding:18px; text-align:center; font-size:14px; font-weight:600; color:var(--nhạt); background:#fff; border:2.5px dashed #c9a24a; border-radius:12px; cursor:pointer; }
#pane-trinhchieu .tc-tha i { margin-right:6px; font-size:18px; color:var(--đỏ); }
#pane-trinhchieu .tc-tha.keo, #pane-trinhchieu .tc-tha:focus-visible { background:#fff0c9; border-color:var(--đỏ); outline:none; }
#pane-trinhchieu .tc-hang { display:flex; flex-direction:column; gap:8px; }
#pane-trinhchieu .tc-hang-dong { display:grid; grid-template-columns:minmax(150px, 1fr) minmax(180px, 2fr) minmax(130px, 1fr) auto; align-items:center; gap:8px; padding:8px 10px; background:#fff; border:2px solid var(--mực); border-radius:9px; }
#pane-trinhchieu .tc-hang-dong .tc-note { grid-column:1 / -1; margin:0; }
#pane-trinhchieu .tc-tep { font-size:13px; font-weight:700; overflow-wrap:anywhere; }
#pane-trinhchieu .tc-tep small { color:var(--nhạt); font-weight:500; }
#pane-trinhchieu .tc-luu-y { margin:0; padding:7px 10px; font-size:12.5px; line-height:1.5; color:#574020; background:#fff0c9; border:1.5px dashed #c9a24a; border-radius:8px; }
@media (max-width:720px) { #pane-trinhchieu .tc-hang-dong { grid-template-columns:1fr auto; } #pane-trinhchieu .tc-hang-dong .tc-tep { grid-column:1 / -1; } #pane-trinhchieu .tc-tim { max-width:none; margin-left:0; } }

/* ============ Trình phát toàn màn hình (nền tối, gắn vào <body>) ============ */
body.tc-dang-chieu { overflow:hidden; }
.tc-player { position:fixed; inset:0; z-index:5000; background:#0B0F19; color:#E5E7EB; font-family:'Be Vietnam Pro','Segoe UI',Tahoma,Arial,sans-serif; }
.tc-player[hidden] { display:none; }
.tc-player #tcFrame { position:absolute; inset:0; width:100%; height:100%; border:0; background:#0B0F19; }
.tc-player #tcLaser { position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; }
.tc-player.tc-laser #tcLaser { pointer-events:auto; cursor:none; }
.tc-player .tc-bar { position:absolute; z-index:10; display:flex; align-items:center; gap:4px; padding:4px 8px; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); border-radius:12px; transition:opacity .25s, transform .25s; }
.tc-player .tc-bar button { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; font:700 13px/1 inherit; color:#E5E7EB; background:transparent; border:0; border-radius:9px; cursor:pointer; white-space:nowrap; }
.tc-player .tc-bar button:hover { background:rgba(255,255,255,.16); }
.tc-player .tc-bar button.on { color:#fff; background:#EF4444; }
.tc-player .tc-tren { top:8px; left:8px; right:8px; }
.tc-player .tc-ten { max-width:34vw; padding:0 8px; font-size:14px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tc-player .tc-gap { flex:1; }
.tc-player .tc-dong-ho { padding:0 8px; font:700 13px/1 ui-monospace,Consolas,monospace; color:#FCD34D; }
.tc-player .tc-dong-ho[hidden] { display:none; }
.tc-player .tc-duoi { bottom:10px; left:50%; transform:translateX(-50%); border-radius:999px; padding:4px 10px; }
.tc-player .tc-cham { display:flex; align-items:center; gap:7px; max-width:50vw; overflow:hidden; padding:0 6px; }
.tc-player .tc-dot { width:9px; height:9px; flex:none; border-radius:50%; background:#334155; cursor:pointer; transition:transform .2s, background .2s; }
.tc-player .tc-dot.on { background:#EF4444; transform:scale(1.45); }
.tc-player .tc-so-trang { font-size:12px; font-weight:800; padding:0 4px; }
.tc-player .tc-mini { right:10px; bottom:10px; opacity:.28; padding:3px 8px; border-radius:999px; display:none; }
.tc-player .tc-mini:hover, .tc-player .tc-mini:focus-within { opacity:1; }
.tc-player .tc-mini span { font-size:12px; font-weight:800; padding:0 4px; }
.tc-player.tc-chieu .tc-tren, .tc-player.tc-chieu .tc-duoi { opacity:0; pointer-events:none; }
.tc-player.tc-chieu .tc-tren { transform:translateY(-110%); }
.tc-player.tc-chieu .tc-mini { display:flex; }
.tc-player .tc-mucluc { position:absolute; z-index:20; top:0; bottom:0; left:0; width:min(340px, 88vw); padding:14px; overflow-y:auto; background:#0d1422; border-right:1px solid #2A364F; }
.tc-player .tc-mucluc[hidden] { display:none; }
.tc-player .tc-mucluc-dau { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#67E8F9; }
.tc-player .tc-mucluc-dau button { padding:5px 9px; color:#E5E7EB; background:transparent; border:0; border-radius:8px; cursor:pointer; }
.tc-player .tc-mucluc-dau button:hover { background:rgba(255,255,255,.16); }
.tc-player .tc-mucluc-muc { display:block; width:100%; margin-bottom:8px; padding:9px 12px; text-align:left; color:#E5E7EB; background:#151D2A; border:1px solid #2A364F; border-radius:11px; cursor:pointer; }
.tc-player .tc-mucluc-muc:hover { border-color:#22D3EE; }
.tc-player .tc-mucluc-muc.on { border-color:#EF4444; }
.tc-player .tc-mucluc-muc small { display:block; font-size:11px; color:#94A3B8; }
.tc-player .tc-mucluc-muc b { font-size:14px; }
.tc-player .tc-bao { position:absolute; z-index:15; top:62px; left:50%; transform:translateX(-50%); padding:7px 14px; font-size:13px; font-weight:700; color:#111; background:#FCD34D; border-radius:9px; }
.tc-player .tc-bao[hidden] { display:none; }
@media (max-width:640px) { .tc-player .tc-chu { display:none; } .tc-player .tc-bar button { padding:8px 10px; } .tc-player .tc-ten { display:none; } }

/* ============ Chế độ giáo viên (kiểu PowerPoint Presenter View): bản xem trước + slide kế + ghi chú; slide học sinh ở cửa sổ riêng ============ */
.tc-player .tc-gv-nut,.tc-player #tcNutKhan{display:none}
.tc-player.tc-gvmode .tc-gv-nut,.tc-player.tc-gvmode #tcNutKhan{display:inline-flex}
.tc-player.tc-gvmode #tcNutChieu{display:none}
.tc-gv{position:absolute;inset:0;z-index:2;display:flex;justify-content:center;align-items:flex-start;gap:18px;padding:64px 18px 70px;background:radial-gradient(900px 500px at 20% 0,#16224a,#070a14 70%)}
.tc-gv[hidden]{display:none}
.tc-gv-trai{display:flex;flex-direction:column;gap:10px}
.tc-gv-cur,.tc-gv-nx{position:relative;overflow:hidden;background:#0B0F19;border:3px solid #ffc72c;box-shadow:0 0 0 3px #000,0 10px 30px rgba(0,0,0,.6)}
.tc-gv-nx{border-color:#38e1ff}
.tc-player.tc-gvmode #tcFrame,.tc-player #tcFrame2{position:absolute;inset:auto;left:0;top:0;width:1280px;height:720px;border:0;transform-origin:0 0;pointer-events:none;background:#0B0F19}
.tc-gv-cap{position:absolute;inset:0;z-index:3;cursor:pointer}
.tc-player.tc-gv-laser .tc-gv-cap{cursor:crosshair;box-shadow:inset 0 0 0 3px #e62429}
.tc-gv-tt{font-size:15px;color:#cfd8ee;min-height:22px}.tc-gv-tt b{color:#ffc72c}
.tc-gv-man{display:inline-block;padding:1px 9px;font-weight:800;color:#fff;background:#e62429;border-radius:4px}
.tc-gv-phai{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 134px);min-width:0}
.tc-gv-hop{padding:10px 12px;background:rgba(255,255,255,.05);border:1px solid #2A364F;border-radius:10px}
.tc-gv-nhan{margin-bottom:7px;font:800 12px/1 inherit;letter-spacing:.08em;text-transform:uppercase;color:#67E8F9}.tc-gv-nhan small{font-weight:600;letter-spacing:0;text-transform:none;color:#94A3B8}
.tc-gv-gio{display:flex;justify-content:space-around;text-align:center}.tc-gv-gio small{display:block;font-size:11px;color:#94A3B8;text-transform:uppercase;letter-spacing:.06em}.tc-gv-gio b{font:400 36px/1.1 'Anton','Oswald',sans-serif;letter-spacing:.04em;color:#FCD34D}
.tc-gv-ghi{flex:1;min-height:120px;display:flex;flex-direction:column}
.tc-gv-ghi-nd{flex:1;overflow-y:auto;font-size:16px;line-height:1.55;color:#f1f5f9}.tc-gv-trong{color:#94A3B8;font-size:13px}
.tc-man{position:absolute;inset:0;z-index:12}.tc-man[hidden]{display:none}
@media (max-width:900px){.tc-gv{flex-direction:column;align-items:center;overflow-y:auto}.tc-gv-phai{height:auto;width:100%!important}}

#pane-trinhchieu .tc-nut-hnote{margin-left:auto}#pane-trinhchieu .tc-nut-hnote + .tc-nut{margin-left:0}

/* ============ Hộp "Sửa slide" (Admin): ghi chú · chữ nhanh · HTML + xem trước (js/trinh-chieu.js moSua_) ============ */
.tc-sua{position:fixed;inset:0;z-index:4500;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(10,8,5,.74);font-family:'Be Vietnam Pro',system-ui,sans-serif}
.tc-sua[hidden]{display:none}
.tc-sua-hop{width:min(1320px,100%);height:min(880px,100%);display:flex;flex-direction:column;overflow:hidden;color:#15110f;background:#fffdf6;border:3px solid #15110f;border-radius:12px;box-shadow:8px 8px 0 #b5091c}
.tc-sua-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;background:linear-gradient(#fff6df,#ffe9b0);border-bottom:3px solid #15110f}
.tc-sua-dau b{font-size:16px;font-weight:800}.tc-sua-gap{flex:1}
.tc-sua-tt{font-size:13px;font-weight:700}.tc-sua-chua{color:#8a3a00}
.tc-sua-than{flex:1;display:flex;gap:16px;padding:14px 16px;min-height:0}
.tc-sua-trai{flex:0 0 46%;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.tc-sua-phai{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.tc-sua-tab{display:flex;gap:6px}
.tc-sua-tab button{flex:1;padding:8px 6px;font:800 13px/1.2 inherit;color:#15110f;background:#fff;border:2px solid #15110f;border-radius:8px;cursor:pointer}
.tc-sua-tab button.on{color:#fff;background:linear-gradient(#e23636,#b5091c)}
.tc-sua-pane{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0}.tc-sua-pane[hidden]{display:none}
.tc-sua-pane > textarea{flex:1;min-height:160px;resize:none;line-height:1.5}
.tc-mono{font-family:Consolas,'Courier New',monospace;font-size:12.5px;line-height:1.45}
.tc-sua-loc{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.tc-sua-loc .tc-inp{flex:1;min-width:160px;width:auto}
.tc-sua-ds{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.tc-sua-doan{display:grid;grid-template-columns:28px 1fr;gap:4px 8px;align-items:start}.tc-sua-doan[hidden]{display:none}
.tc-sua-doan small{grid-column:2;font-size:11.5px;color:#8a3a00}
.tc-sua-so{display:flex;align-items:center;justify-content:center;height:26px;font-size:12px;font-weight:800;color:#fff;background:#b5091c;border-radius:50%}
.tc-sua-doan textarea{resize:vertical;min-height:38px}
.tc-sua-chan{display:flex;justify-content:flex-end}
.tc-sua-xem{position:relative;overflow:hidden;width:100%;background:#0B0F19;border:3px solid #15110f;box-shadow:5px 5px 0 #ffc42e}
.tc-sua-xem iframe{position:absolute;left:0;top:0;width:1280px;height:720px;border:0;transform-origin:0 0;background:#0B0F19}
@media (max-width:900px){.tc-sua-than{flex-direction:column;overflow-y:auto}.tc-sua-trai{flex:none}}
.tc-sua .tc-o{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#5d554b}
.tc-sua .tc-inp{width:100%;padding:7px 10px;font:500 14px/1.45 'Be Vietnam Pro',system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#15110f;background:#fff;border:2px solid #15110f;border-radius:8px}
.tc-sua .tc-inp:focus{outline:3px solid #ffc42e99;outline-offset:0}
.tc-sua .tc-mono{font-family:Consolas,'Courier New',monospace;font-size:12.5px;line-height:1.45}
.tc-sua .tc-nut{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;font:800 13px/1 'Be Vietnam Pro',system-ui,sans-serif;color:#19130c;background:linear-gradient(#ffe582,#ffc42e);border:2.5px solid #15110f;border-radius:10px;box-shadow:0 4px 0 #15110f;cursor:pointer}
.tc-sua .tc-nut:disabled,.tc-sua .tc-nut-phu:disabled{opacity:.5;cursor:not-allowed}
.tc-sua .tc-nut-phu{padding:7px 13px;font:700 13px/1 'Be Vietnam Pro',system-ui,sans-serif;color:#15110f;background:#fff;border:2px solid #15110f;border-radius:9px;cursor:pointer}.tc-sua .tc-nut-phu:hover{background:#fff0c9}
.tc-sua .tc-note{font-size:13.5px;font-weight:600}.tc-sua .tc-note:empty{display:none}
.tc-sua .tc-luu-y{margin:0;padding:7px 10px;font-size:12.5px;line-height:1.5;color:#574020;background:#fff0c9;border:1.5px dashed #c9a24a;border-radius:8px}
.tc-sua .tc-tick{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.tc-sua .tc-ok{color:#17603f}.tc-sua .tc-loi{color:#9b1220}
.tc-sua .tc-trong-nho{padding:9px 4px;font-size:13px;color:#5d554b}
.tc-sua *{box-sizing:border-box}.tc-sua-doan > *{min-width:0}.tc-sua-ds{overflow-x:hidden}.tc-sua-doan textarea{width:100%}

/* GIAO BÀI TẬP TỪ SÁCH (js/giao-bai-tap.js) — dùng lại khung .sc / .sc-btn / .sc-msg của mục Sách (css/sach.css), chỉ thêm biến màu + phần riêng */
#gbtKhung{ --sc-do1:var(--nv-do-1,#7d0814); --sc-do2:var(--nv-do-2,#b10e25); --sc-do3:var(--nv-do-3,#d81a32); --sc-vien:#ecddd0; --sc-phu:#7a6a60; --sc-chu:#21160f; color:var(--sc-chu); }
/* Công tắc của Admin: cho trợ giảng giao bài */
.gbt-cong-tac{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:12px; padding:10px 14px; border:1px dashed #e0a82e; border-radius:12px; background:#fff8e6; }
.gbt-cong-tac[hidden]{ display:none; }
.gbt-cong-tac.bat{ border-style:solid; border-color:#9bd3ae; background:#eaf8ef; }
.gbt-cong-tac-nut{ display:inline-flex; align-items:center; gap:10px; margin:0; cursor:pointer; font-size:14px; }
#gbtKhung .gbt-cong-tac-nut input[type=checkbox]{ position:absolute; opacity:0; width:1px; height:1px; border:0; }
.gbt-cong-tac-vien{ position:relative; width:42px; height:24px; border-radius:99px; background:#cdbfb2; transition:background .2s ease; flex:none; }
.gbt-cong-tac-vien::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:transform .2s ease; }
.gbt-cong-tac-nut input:checked + .gbt-cong-tac-vien{ background:#1f9d55; }
.gbt-cong-tac-nut input:checked + .gbt-cong-tac-vien::after{ transform:translateX(18px); }
.gbt-cong-tac-nut input:focus-visible + .gbt-cong-tac-vien{ outline:2px solid var(--sc-do3); outline-offset:2px; }
.gbt-cong-tac-nut input:disabled + .gbt-cong-tac-vien{ opacity:.5; }
.gbt-bat{ color:#14693a; } .gbt-tat{ color:#a30f20; }
.gbt-tab{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.gbt-tab-nut{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--sc-vien); border-radius:12px; background:#fff8ee; font:inherit; font-size:14px; font-weight:800; color:var(--sc-do2); cursor:pointer; transition:background .2s ease, color .2s ease; }
.gbt-tab-nut:hover{ background:#ffe9a3; }
.gbt-tab-nut.on{ color:#fff7d6; background:linear-gradient(135deg,var(--sc-do3),var(--sc-do1)); border-color:transparent; }
.gbt-dem{ min-width:20px; padding:0 6px; border-radius:99px; font-size:12px; line-height:20px; text-align:center; color:#5a0a14; background:#ffe9a3; }
.gbt-luoi{ align-items:start; }
.gbt-nhan{ display:grid; gap:4px; font-size:13px; font-weight:700; color:#5d4d45; }
.gbt-nhan small{ font-weight:600; color:var(--sc-phu); }
#gbtKhung .form-control, #gbtKhung .form-select{ background:#fff; color:#21160f; border:1px solid #e4d4c5; border-radius:10px; }
.gbt-cay{ overflow:auto; max-height:calc(100vh - 290px); min-height:140px; }
.gbt-nut{ display:flex; align-items:center; gap:2px; border-radius:9px; }
.gbt-nut.chon{ background:linear-gradient(90deg,#ffe9a3,#fff3cf); box-shadow:inset 3px 0 0 var(--sc-do2); }
.gbt-nut.khop .gbt-ten{ background:#fff0b3; border-radius:5px; padding:0 4px; box-shadow:0 0 0 1px #f3c64a; }   /* mục khớp ô tìm */
/* chọn từng câu */
.gbt-hien-da-giao{ display:flex; align-items:center; gap:8px; margin:0; font-size:13px; font-weight:700; color:#5d4d45; cursor:pointer; }
.gbt-xem-cau{ flex:none; width:26px; height:26px; border:0; border-radius:7px; background:transparent; color:var(--sc-phu); font-size:12px; cursor:pointer; }
.gbt-xem-cau:hover, .gbt-xem-cau.on{ background:#ffe9a3; color:var(--sc-do2); }
.gbt-cau-ds{ margin:2px 0 6px 26px; padding:4px; display:grid; gap:2px; background:#fffdf7; border:1px solid #f0e2c6; border-radius:9px; }
.gbt-cau{ display:flex; align-items:center; gap:6px; padding:3px 4px; border-radius:7px; cursor:pointer; font-size:12.5px; font-weight:600; min-width:0; }
.gbt-cau:hover{ background:#fff3dc; }
.gbt-cau.chon{ background:#fde9b8; }
.gbt-cau.khong{ opacity:.55; cursor:default; }
.gbt-cau.da .gbt-cau-nd{ text-decoration:line-through; text-decoration-color:#c9b8a8; }
.gbt-cau-so{ flex:none; font-weight:800; color:var(--sc-do2); }
.gbt-cau-loai{ flex:none; padding:0 5px; border-radius:5px; font-size:10.5px; font-weight:800; color:#6d4b00; background:#f3e3b5; }
.gbt-cau-nd{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; color:#4a3b34; }
.gbt-da-giao{ flex:none; padding:0 6px; border-radius:99px; font-size:10.5px; font-weight:800; color:#14693a; background:#dff5e6; white-space:nowrap; }
.gbt-khong-giao{ flex:none; font-size:10.5px; font-weight:700; color:#a30f20; white-space:nowrap; }
.gbt-an{ margin:2px 4px; }
.gbt-canh-bao{ color:#a30f20; font-weight:700; }
#gbtKhung .gbt-cau input[type=checkbox]{ width:16px; height:16px; }
.gbt-tick{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:5px 6px; cursor:pointer; font-size:13.5px; font-weight:600; }
.gbt-tick.rong{ opacity:.5; cursor:default; }
.gbt-ten{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ô tích: viền xám + nền trắng khi chưa chọn, đỏ có dấu ✓ khi chọn (theme Marvel tô đen ô chưa chọn → dễ nhầm với đã chọn) */
#gbtKhung input[type=checkbox]{ appearance:none; -webkit-appearance:none; width:19px; height:19px; flex:none; margin:0; border:2px solid #b8a496; border-radius:6px; background:#fff; cursor:pointer; }
#gbtKhung input[type=checkbox]:checked{ border-color:#c8102e; background:#c8102e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 10.5 3.5 3.5L15 6.5'/%3E%3C/svg%3E") center/13px no-repeat; }
#gbtKhung input[type=checkbox]:indeterminate{ border-color:#c8102e; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23c8102e' stroke-width='3.5' stroke-linecap='round' d='M5 10h10'/%3E%3C/svg%3E") center/13px no-repeat; }
#gbtKhung input[type=checkbox]:disabled{ opacity:.4; cursor:default; }
.gbt-tieu{ margin:0 0 10px; font-size:17px; font-weight:900; color:var(--sc-do2); display:flex; align-items:center; gap:8px; }
.gbt-form{ display:grid; gap:12px; }
.gbt-tom-tat{ padding:10px 14px; border:1px dashed #e0a82e; border-radius:12px; background:#fff8e6; font-size:14px; line-height:1.55; }
.gbt-nho{ font-size:12.5px; font-weight:600; color:var(--sc-phu); line-height:1.5; }
.gbt-bo{ margin-top:6px; font-size:13px; } .gbt-bo summary{ cursor:pointer; font-weight:800; color:#a30f20; } .gbt-bo ul{ margin:6px 0 0; padding-left:20px; color:#5d4d45; }
.gbt-lop{ display:flex; flex-wrap:wrap; gap:6px 10px; max-height:150px; overflow:auto; padding:8px 10px; background:#fff; border:1px solid #ecd9a8; border-radius:10px; }
.gbt-lop-o{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13.5px; cursor:pointer; }
/* Giao cho: cả lớp | chọn từng em */
.gbt-che-do{ display:flex; gap:8px; flex-wrap:wrap; }
.gbt-che-do label{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid var(--sc-vien); border-radius:99px; background:#fff; font-size:13.5px; font-weight:800; color:var(--sc-do2); cursor:pointer; }
.gbt-che-do label:has(input:checked){ color:#5a0a14; border-color:#e0a82e; background:linear-gradient(135deg,#ffe9a3,#f7c544); }
#gbtKhung input[type=radio]{ appearance:none; -webkit-appearance:none; width:17px; height:17px; flex:none; margin:0; border:2px solid #b8a496; border-radius:50%; background:#fff; cursor:pointer; }
#gbtKhung input[type=radio]:checked{ border-color:#c8102e; background:radial-gradient(#c8102e 0 45%, #fff 50%); }
.gbt-em{ display:grid; gap:8px; }
.gbt-em[hidden], .gbt-lop[hidden]{ display:none; }
.gbt-em-loc{ display:grid; grid-template-columns:150px minmax(0, 1fr); gap:8px; }
.gbt-em-nut{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.gbt-em-ds{ display:grid; gap:2px; max-height:240px; overflow:auto; padding:6px; background:#fff; border:1px solid #ecd9a8; border-radius:10px; scrollbar-width:thin; }
.gbt-em-o{ display:flex; align-items:center; gap:9px; padding:5px 6px; border-radius:8px; cursor:pointer; font-weight:600; font-size:13.5px; }
.gbt-em-o:hover{ background:#fff3dc; }
.gbt-em-o:has(input:checked){ background:#fde9b8; }
.gbt-em-ten{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gbt-em-o small{ color:var(--sc-phu); font-weight:600; white-space:nowrap; }
.gbt-hai{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.gbt-btvn{ display:grid; gap:8px; padding:10px 14px; border:1px solid #ecd9c6; border-radius:12px; background:#fffaf2; }
.gbt-btvn .gbt-tick{ padding:0; }
/* Bài đã giao */
.gbt-ds{ display:grid; gap:12px; }
.gbt-the{ display:grid; gap:10px; padding:14px 16px; border:1px solid var(--sc-vien); border-left:5px solid #f7a531; border-radius:14px; background:linear-gradient(100deg,#fff8ee,#fff); }
.gbt-the-dau{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.gbt-the-dau b{ font-size:15px; }
.gbt-so{ flex:none; display:grid; text-align:right; line-height:1.25; } .gbt-so b{ font-size:20px; color:var(--sc-do2); } .gbt-so span{ font-size:12px; color:var(--sc-phu); font-weight:700; }
.gbt-tb{ color:#14693a !important; }
.gbt-cho{ color:#a30f20 !important; }
.gbt-vo{ width:78px; padding:2px 6px; text-align:center; }
.gbt-bang tr.gbt-luu td{ background:#e4f6ea; transition:background .4s ease; }
.gbt-pt{ white-space:nowrap; font-weight:800; }
.gbt-chip{ display:inline-block; padding:1px 9px; border-radius:99px; font-size:12px; font-weight:800; vertical-align:middle; }
.gbt-chip.xanh{ background:#dff5e6; color:#14693a; } .gbt-chip.xam{ background:#eee7df; color:#6d5e55; }
.gbt-bang{ width:100%; border-collapse:collapse; font-size:13px; }
.gbt-bang th{ padding:7px 9px; text-align:left; font-size:12px; font-weight:800; color:#fff; background:#8e0a17; white-space:nowrap; }
.gbt-bang td{ padding:6px 9px; border-bottom:1px solid #eadfd3; }
.gbt-bang tr.chua td{ background:#fff3f1; }
.gbt-chi-tiet{ overflow:auto; max-height:420px; border-radius:10px; }
@media (max-width:760px){ .gbt-hai{ grid-template-columns:minmax(0, 1fr); } .gbt-the-dau{ flex-direction:column; } .gbt-so{ text-align:left; } }

/* Hai cột BTVN trắc nghiệm / tự luận ở bảng Điểm danh (chỉ hiển thị; app.js datBtvnPtHang_) */
#attList td.att-td-btvn-pt{ text-align:center; font-weight:800; white-space:nowrap; }
@media (max-width:767.98px){
  #attList tr.att-row > td.att-td-btvn-pt{ order:6; grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  #attList tr.att-row > td.att-td-btvn-pt::before{ content:attr(data-nhan); color:#AEB8D6; font-size:14px; font-weight:600; }
}

/* Buổi ghi điểm + hạn nộp TỰ ĐỘNG theo ca học (17/10/2026) */
.gbt-lich{ display:grid; gap:6px; padding:10px 12px; border:1px solid #f0d49a; border-radius:12px; background:#fffaf0; }
.gbt-lich[hidden]{ display:none; }
.gbt-lich-dong{ display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; padding:6px 0; border-bottom:1px dashed #ead9cc; font-size:13.5px; }
.gbt-lich-dong:last-of-type{ border-bottom:0; }
.gbt-lich-ai{ min-width:120px; padding:2px 11px; border-radius:999px; background:#7d08141a; color:#7d0814; font-weight:800; }
.gbt-lich .gbt-nho{ margin:0; }

/* Kết quả làm bài + câu "em chưa làm được" (27/10/2026) */
.gbt-chip.do{ background:#fde2e0; color:#9b1c1c; } .gbt-chip.vang{ background:#fff0c2; color:#7a5200; }
.gbt-tom{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 8px; }
.gbt-cs-chip{ display:inline-block; padding:1px 10px; border:0; border-radius:99px; background:#fff0c2; color:#7a5200; font:inherit; font-size:12px; font-weight:800; cursor:pointer; vertical-align:middle; }
span.gbt-cs-chip{ cursor:default; }
.gbt-cs{ margin-top:12px; padding:10px 12px; border:1px solid #ecd9a6; border-radius:12px; background:#fffaf0; }
.gbt-cs-dau{ margin-bottom:6px; }
.gbt-cs-hs{ display:inline-block; margin:2px 6px 2px 0; padding:1px 8px; border-radius:99px; background:#fff; border:1px solid #eadfd3; font-size:12.5px; }
.gbt-cs-bang td{ vertical-align:top; }
.gbt-cs-o{ white-space:normal; }

/* Lọc Bài đã giao theo khối / ngày (27/10/2026) */
.gbt-loc{ display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
.gbt-loc-hang{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.gbt-loc-hang .form-select, .gbt-loc-hang .form-control{ width:auto; max-width:190px; }
.gbt-loc-chip{ padding:6px 14px; border:1px solid rgba(125,35,20,.2); border-radius:12px; background:#fff; color:#2a1810; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.gbt-loc-chip.on{ background:linear-gradient(180deg, #b3101f, #8e0a17); border-color:#8e0a17; color:#fff; }
.gbt-ngay{ margin:0 0 14px; }
.gbt-ngay-ten{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 8px; font-size:15px; font-weight:800; color:#8e0a17; }

/* Bài giao bị chia phần (40 TN / 8 ĐS / 6 TLN) hiện GỘP 1 thẻ, các phần xếp bên trong (06/11/2026) */
.gbt-nhom{ border-left:5px solid #7d2314; }
.gbt-nop-phan{ color:#5a2014; }
.gbt-nhom-phan{ margin:10px 0 0; padding:8px 0 0 12px; border-left:2px dashed #e0c9b8; display:grid; gap:10px; }
.gbt-nhom-phan[hidden]{ display:none; }
.gbt-phan{ background:#fffaf5; }

/* Ma trận → Sách đề (js/ma-tran-sach.js) — dùng lại khung .sc-dlg của mục Sách, chỉ thêm bề rộng + danh sách ma trận + bảng xem thử */
.sc-dlg.mts-dlg{ --sc-do1:#7d0814; --sc-do2:#b10e25; --sc-do3:#d81a32; --sc-chu:#21160f; width:min(760px, calc(100vw - 24px)); max-height:calc(100vh - 24px); }   /* biến màu của #sachKhung không phủ tới hộp gắn ở body */
.mts-than{ max-height:calc(100vh - 28px); overflow:auto; }
.mts-luoi{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.mts-luoi label[hidden]{ display:none; }
.mts-than input.form-control{ background:#fff; color:#21160f; border:1px solid #e4d4c5; border-radius:10px; }
/* ô tích: viền xám + nền trắng khi chưa chọn, đỏ có dấu ✓ khi chọn (theme Marvel tô đen ô chưa chọn → dễ nhầm với đã chọn) */
#appShell .mts-dlg input.form-check-input[type=checkbox], .mts-dlg input.form-check-input[type=checkbox]{ appearance:none; -webkit-appearance:none; width:19px; height:19px; flex:none; margin:0; border:2px solid #b8a496; border-radius:6px; background:#fff; cursor:pointer; }
.mts-dlg input.form-check-input[type=checkbox]:checked{ border-color:#c8102e; background:#c8102e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 10.5 3.5 3.5L15 6.5'/%3E%3C/svg%3E") center/13px no-repeat; }
.mts-ds{ display:grid; gap:6px; max-height:230px; overflow:auto; padding:2px; scrollbar-width:thin; }
.mts-dong{ display:flex !important; align-items:center; gap:10px; padding:8px 10px; border:1px solid #ecd9c6; border-radius:11px; background:#fffaf2; cursor:pointer; font-weight:600 !important; color:#21160f !important; transition:background .2s ease, border-color .2s ease; }
.mts-dong:hover{ background:#fff3dc; }
.mts-dong.on{ background:#fde9b8; border-color:#e0a82e; }
.mts-dong input{ width:18px; height:18px; accent-color:#b10e25; flex:none; }
.mts-so{ min-width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center; flex:none; font-size:13px; font-weight:900; color:#fff; background:transparent; }
.mts-dong.on .mts-so{ background:#c8102e; }
.mts-ten{ display:flex; flex-direction:column; min-width:0; font-size:14px; }
.mts-ten small{ font-size:11.5px; font-weight:600; color:#7a6a60; }
.mts-bang{ width:100%; border-collapse:collapse; font-size:13px; color:#21160f; }
.mts-bang th{ padding:7px 9px; text-align:left; font-size:12px; font-weight:800; color:#fff; background:#8e0a17; white-space:nowrap; }
.mts-bang td{ padding:7px 9px; border-bottom:1px solid #eadfd3; vertical-align:top; }
.mts-bang tr.thieu td{ background:#fff3f1; }
.mts-bai{ display:grid; gap:8px; padding:10px 12px; border:1px dashed #e0a82e; border-radius:12px; background:#fff8e6; }
.mts-bai label.sc-tick{ line-height:1.45; align-items:flex-start; }
.mts-bai label.sc-tick input{ margin-top:2px; }
.mts-bai .mts-thoi-gian{ display:flex !important; align-items:center; gap:10px; font-size:13px; font-weight:700; color:#5d4d45; }
.mts-bai .mts-thoi-gian input{ width:90px; }
.mts-lop{ font-size:13px; color:#5d4d45; display:grid; gap:6px; }
.mts-lop-ds{ display:flex; flex-wrap:wrap; gap:4px 12px; max-height:120px; overflow:auto; padding:6px 8px; background:#fff; border:1px solid #ecd9a8; border-radius:8px; }
.mts-lop-o{ display:inline-flex; align-items:center; gap:5px; font-weight:700; cursor:pointer; }
.mts-lop-hang{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.mts-lop-hang small{ color:#8a6d3b; }
#mtsMsg{ white-space:pre-line; }
#mtsXemThu{ max-height:260px; overflow:auto; border-radius:10px; }
.mt2-sach-nut{ grid-column:1 / -1; }
@media (max-width:640px){ .mts-luoi{ grid-template-columns:minmax(0, 1fr); } }

/* Học sinh tự quét phiếu tô (js/hs-quet-phieu.js + js/lam-bai-tn.js) — bài luyện tập của sách đề */
.hs-bkt-in-phieu { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid #dccab0; border-radius:9px; background:#fff; font-size:11.5px; font-weight:700; color:#5d4636; white-space:nowrap; }
.hs-bkt-in-phieu:hover { background:#fbf1e6; }
.hs-bkt-hanh { flex-wrap:wrap; }
.tg .hs-phieu-doc { margin:12px 0; padding:11px 13px; border-radius:12px; background:#fff8e1; border:1px solid #f0d27a; color:#4a3a14; font-size:14px; line-height:1.55; }
.tg .hs-phieu-doc .hs-phieu-vang { display:inline-block; padding:0 6px; border-radius:6px; border:2px solid #f2b705; background:#fff; font-weight:700; }
/* ô máy đọc chưa chắc → viền vàng, em nhìn lại */
.tg .hs-phieu-nghi { outline:3px solid #f2b705; outline-offset:2px; border-radius:10px; background:rgba(242,183,5,.12); }
.tg .hs-cam .hs-cam-tep { position:relative; cursor:pointer; margin:0; display:inline-flex; align-items:center; justify-content:center; }
.tg .hs-cam .ctn-cam-tren #hsCamTb { padding:6px 4px; line-height:1.4; }

/* Tự luận chụp ảnh gửi trợ giảng chấm (bài luyện tập) */
.tg .ltn-tuluan { margin-top:10px; padding:11px 13px; border-radius:12px; background:#f6f1ff; border:1px solid #d9cdf5; }
.tg .ltn-tl-tieu { margin:0 0 8px; font-size:16px; font-weight:800; color:#4b2a9a; }
.tg .ltn-tl-nx { margin-top:6px; padding:8px 10px; border-radius:9px; background:#fff; font-size:14px; line-height:1.5; }
.tg .ltn-tl-anh { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-bottom:8px; }
.tg .ltn-tl-the { position:relative; aspect-ratio:3 / 4; border-radius:9px; overflow:hidden; background:#fff; border:1px solid #d9cdf5; }
.tg .ltn-tl-the img { width:100%; height:100%; object-fit:cover; display:block; }
.tg .ltn-tl-the button { position:absolute; top:4px; right:4px; width:26px; height:26px; border:0; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; font-size:13px; line-height:1; }
.tg .ltn-tl-chon { cursor:pointer; display:flex; align-items:center; justify-content:center; margin:0; }

/* Trợ giảng chấm tự luận học sinh chụp ảnh (js/cham-tu-luan.js) */
.ctb-xem-tl { margin-top:12px; padding:12px; border-radius:12px; background:#fff; border:1px solid #d9cdf5; }
.ctb-tl-anh { display:block; width:100%; max-width:720px; margin:8px auto; border-radius:8px; border:1px solid #e4dcc8; }
.ctb-tl-cham { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:10px; }
.ctb-tl-cham label { display:grid; gap:4px; font-size:12px; font-weight:700; color:#5d4636; margin:0; }
.ctb-tl-cham label:first-child { width:130px; } .ctb-tl-cham label.gian { flex:1 1 220px; }

/* Admin: câu học sinh đánh dấu "cần thầy sửa" — bài luyện tập (js/can-sua-tn.js, 20/10/2026) */
.ctb-cs-bang td { vertical-align:top; color:#2a1d17; }
.ctb-cs-cau { white-space:nowrap; }
.ctb-cs-so { white-space:nowrap; min-width:110px; }
.ctb-cs-so b { font-size:17px; color:#a10e24; }
.ctb-cs-thanh { display:block; height:6px; margin-top:5px; border-radius:999px; background:#f1e6d8; overflow:hidden; }
.ctb-cs-thanh i { display:block; height:100%; background:#d0142f; border-radius:999px; }
.ctb-cs-hs { display:flex; flex-wrap:wrap; gap:5px; }
.ctb-cs-hs span { padding:2px 9px; border-radius:999px; background:#fff0f1; border:1px solid #f3c4ca; font-size:12.5px; font-weight:600; color:#5a1a22; }
.ctb-cs-hs small { color:#8a7b70; font-weight:500; }
.ctb-cs-de { margin-top:8px; }
.ctb-cs-de summary { cursor:pointer; font-size:12.5px; font-weight:700; color:#2d6cdf; }
.ctb-cs-de > div { margin-top:6px; padding:10px 12px; border-radius:10px; background:#fff; border:1px solid #e4dcc8; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.ctb-cs-de img { max-width:100%; height:auto; }
.ctb-cs-pa { margin:6px 0 0; padding-left:0; list-style:none; }
.ctb-cs-lg { margin-top:8px; padding-top:8px; border-top:1px dashed #e4dcc8; }

/* ═════════ CHẤM BÀI — màn chấm 1 bài kiểm tra (js/cham-tn.js htmlKt_), theo ảnh mẫu thầy 04/10/2026 ═════════
   Tiêu đề trang đổi thành "Chấm bài" + tên bài, hàng chip cấu trúc đề, lưới 2×2 thẻ đánh số (băng tiêu đề đỏ),
   Bảng điểm dưới cùng. Dùng chung nút .tg2-nut (css/tro-giang-nhom.css). */
#pane-chamtn.ctb-dang-cham{ position:relative; }
#pane-chamtn.ctb-dang-cham > .mv-bang .mv-phu{ text-transform:uppercase; font-weight:900 !important; color:#2a1810 !important; font-size:19px !important; letter-spacing:.01em; }
.ctb-cong-cu{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-bottom:12px; }
@media (min-width:1200px){ .ctb-cong-cu{ position:absolute; top:26px; right:24px; z-index:2; margin:0; } }
.ctb-cong-cu .tg2-nut{ min-height:44px; padding:0 18px; font-size:15px; border-width:1.5px !important; border-color:#b3101f !important; }

.ctb-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.ctb-chip{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:12px; background:#fff; border:1px solid rgba(125,35,20,.14);
  box-shadow:0 6px 14px -12px rgba(90,25,10,.6); font-size:14.5px; font-weight:600; color:#2a1810; }
.ctb-chip > i{ color:#8e0a17; font-size:16px; }
.ctb-chip > i.vang{ color:#e5a019; } .ctb-chip > i.xanh{ color:#1e9a55; }

.ctb-ghi{ display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:12px; font-size:14px; line-height:1.45; margin-bottom:10px; }
.ctb-ghi > i{ margin-top:2px; font-size:17px; flex:none; }
.ctb-ghi small{ display:block; font-size:12.5px; opacity:.85; }
.ctb-ghi.lam{ background:#eef4ff; border:1px solid #d3e2fb; color:#1d3f7a; } .ctb-ghi.lam > i{ color:#1d63d8; }
.ctb-ghi.vang{ background:#fff8e6; border:1px solid #f3dfae; color:#8a1a00; } .ctb-ghi.vang > i{ color:#e08a00; }
.ctb-ghi.do{ background:#fff1f1; border:1px solid #f6c9cd; color:#7a0f1c; } .ctb-ghi.do > i{ color:#d81a32; }
.ctb-ghi.xanh{ background:#ecf9f1; border:1px solid #c5ead3; color:#17633a; } .ctb-ghi.xanh > i{ color:#1e9a55; }
.ctb-ghi a{ color:inherit; font-weight:700; text-decoration:underline; }

.ctb-luoi{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:stretch; margin-bottom:16px; }
.ctb-the{ display:flex; flex-direction:column; background:#fff; border:1px solid rgba(125,35,20,.12); border-radius:18px; padding:14px 16px 16px;
  box-shadow:0 16px 30px -26px rgba(90,25,10,.8); min-width:0; }
.ctb-dau{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.ctb-so{ width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:18px; font-weight:900; color:#8e0a17;
  background:radial-gradient(circle at 35% 30%, #fff6d0, #ffe28a 60%, #f0b429); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #e9b84c; }
.ctb-dau > b{ flex:1; min-width:0; padding:7px 16px; border-radius:10px; color:#fff; font-size:18px; font-weight:900;
  background:linear-gradient(180deg, #b3101f, #8e0a17); box-shadow:0 8px 14px -12px rgba(140,10,20,.9); }
.ctb-dau > .ctb-tt{ margin-left:-4px; }
.ctb-tt{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:10px; font-size:13px; font-weight:700; background:#f3efeb; color:#6f625a; border:1px solid #e3dbd3; white-space:nowrap; }
.ctb-tt.lam{ background:#e6f0ff; color:#1d4fa8; border-color:#c8dbf6; } .ctb-tt.xanh{ background:#e3f6ea; color:#1e7a46; border-color:#bfe6cd; }
.ctb-than{ display:flex; flex-direction:column; gap:10px; flex:1; }
.ctb-phu{ font-size:13.5px; color:#7a6a60; }
.ctb-the .tg-phu{ font-size:12.5px; color:#7a6a60; line-height:1.45; }

/* ① In phiếu */
.ctb-ca{ display:flex; gap:8px; flex-wrap:wrap; }
.ctb-ca-o{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:10px; background:#fff; border:1px solid rgba(125,35,20,.2);
  font:inherit; font-size:13.5px; color:#2a1810; cursor:pointer; transition:transform .2s, border-color .2s; }
.ctb-ca-o:hover{ transform:translateY(-1px); border-color:#e9b84c; }
.ctb-ca-o > i{ color:#7a6a60; }
.ctb-ca-o.on{ background:linear-gradient(#ffe48a, #f6c33f 60%, #eaa923); border-color:#c98a12; font-weight:800; color:#2a1606; box-shadow:0 8px 14px -12px rgba(150,90,0,.9); }
.ctb-ca-o.on > i{ color:#3d1a02; }
.ctb-ca-o.them{ border-color:#e9b84c; color:#8a5200; font-weight:700; }
.ctb-nut-to{ width:100%; min-height:48px; font-size:17px !important; font-weight:900 !important; justify-content:center; }
.ctb-hang-o{ display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:12px; margin:0; font-size:14px; color:#2a1810; }
.ctb-tu-dien{ background:#fff8ea; border:1px solid #efd9a8; border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; gap:6px; }
.ctb-tu-dien-ten{ color:#8e0a17; font-weight:900; font-size:15.5px; }
.ctb-tu-dien-nut{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.ctb-tu-dien-nut .tg2-nut{ min-height:40px; padding:0 14px; font-size:14px; }
/* ô tick cũ (.ctn-chon) trong thẻ: gọn kiểu checkbox + chữ */
.ctb-the .ctn-chon{ display:flex; align-items:flex-start; gap:10px; padding:4px 0; border:0 !important; background:none !important; box-shadow:none !important; font-size:14px; color:#2a1810; cursor:pointer; }
.ctb-the .ctn-chon > input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:#b3101f; }
.ctb-the .ctn-chon b{ font-weight:600; }

/* ② Chấm phiếu */
.ctb-tha{ display:flex; align-items:center; justify-content:center; gap:18px; padding:22px 18px; border:2px dashed #ebb54a; border-radius:14px;
  background:#fffdf7; cursor:pointer; text-align:left; transition:background .2s, border-color .2s; margin:0; }
.ctb-tha:hover, .ctb-tha.keo{ background:#fff6df; border-color:#d98b0b; }
.ctb-tha.khoa{ cursor:not-allowed; opacity:.7; }
.ctb-tha-ic{ width:62px; height:72px; flex:none; display:grid; place-items:center; border-radius:10px; background:#fff; border:1px solid #e3dbd3;
  box-shadow:6px 6px 0 -1px #f1e8de; color:#c8102e; font-size:34px; }
.ctb-tha-chu{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ctb-tha-chu b{ color:#8e0a17; font-size:16.5px; font-weight:800; }
.ctb-tha-chu span{ color:#5b4a41; font-size:14px; }
.ctb-tha-chu small{ color:#8a7b70; font-size:12px; }
.ctb-cam{ display:flex; flex-direction:column; gap:6px; }
.ctb-cam-chinh{ min-height:48px; justify-content:center; font-size:16px; font-weight:800; width:100%; }
.ctb-cam-phu{ align-self:center; margin:0; font-size:13px; color:#5b4a41; cursor:pointer; text-align:center; }
.ctb-cam-phu u{ color:#8e0a17; font-weight:700; text-underline-offset:2px; }
.ctb-cam-phu:hover u{ color:#c8102e; }
.ctb-cam-phu.khoa{ opacity:.55; pointer-events:none; }
/* menu "Phiếu trả lời ▾" */
.ctb-menu{ position:relative; }
.ctb-menu > summary{ list-style:none; cursor:pointer; min-height:40px; padding:0 14px; font-size:14px; display:inline-flex; align-items:center; gap:8px; user-select:none; }
.ctb-menu > summary::-webkit-details-marker{ display:none; }
.ctb-menu[open] .ctb-menu-mui{ transform:rotate(180deg); }
.ctb-menu-ds{ position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:280px; max-width:min(340px, 86vw); background:#fff; border:1px solid #e3dbd3; border-radius:12px;
  box-shadow:0 10px 28px rgba(60,20,10,.18); padding:6px; display:flex; flex-direction:column; gap:2px; }
.ctb-menu-ds button{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:0; background:none; border-radius:8px; text-align:left; font:inherit; color:#2a1810; cursor:pointer; }
.ctb-menu-ds button:hover:not(:disabled){ background:#fff6df; }
.ctb-menu-ds button:disabled{ opacity:.5; cursor:not-allowed; }
.ctb-menu-ds button > i{ width:22px; text-align:center; color:#c8102e; font-size:18px; flex:none; }
.ctb-menu-ds button > span{ display:flex; flex-direction:column; min-width:0; }
.ctb-menu-ds b{ font-weight:800; font-size:14.5px; } .ctb-menu-ds small{ font-size:12px; color:#7a6a60; }
.tg2-nut.khoa{ opacity:.55; pointer-events:none; }
.ctb-tien-do:empty{ display:none; }
.ctb-tien-do{ font-size:13.5px; color:#1d3f7a; font-weight:600; }
.ctb-trong{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0 2px; margin-top:auto; color:#8a7b70; font-size:13.5px; text-align:center; }
.ctb-trong > i{ font-size:26px; color:#9aa0a6; }
.ctb-trong.co{ flex-direction:row; justify-content:center; color:#17633a; font-weight:600; } .ctb-trong.co > i{ font-size:18px; color:#1e9a55; }

/* ③ Online */
.ctb-cong-tac{ display:flex; align-items:center; gap:12px; margin:0; cursor:pointer; }
.ctb-cong-tac > input{ position:absolute; opacity:0; width:1px; height:1px; }
.ctb-cong-tac-nut{ width:46px; height:26px; flex:none; border-radius:999px; background:#ddd5ce; position:relative; transition:background .2s; }
.ctb-cong-tac-nut::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.25); transition:transform .2s; }
.ctb-cong-tac > input:checked + .ctb-cong-tac-nut{ background:linear-gradient(90deg, #d81a32, #b3101f); }
.ctb-cong-tac > input:checked + .ctb-cong-tac-nut::after{ transform:translateX(20px); }
.ctb-cong-tac > input:focus-visible + .ctb-cong-tac-nut{ outline:2px solid #d81a32; outline-offset:2px; }
.ctb-cong-tac > span:last-child{ display:flex; flex-direction:column; }
.ctb-cong-tac b{ font-size:15px; color:#2a1810; } .ctb-cong-tac small{ font-size:12.5px; color:#7a6a60; }
.ctb-ba-o{ display:grid; grid-template-columns:repeat(auto-fit, minmax(175px, 1fr)); gap:10px; }
.ctb-ba-o label{ display:flex; flex-direction:column; gap:5px; margin:0; font-size:13.5px; font-weight:600; color:#3b2a20; }
.ctb-nut-phai{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.ctb-nut-phai .tg2-nut, .ctb-hang-cuoi .tg2-nut{ min-height:42px; padding:0 16px; font-size:14.5px; }
.ctb-chan{ font-size:13.5px; color:#5b4a41; } .ctb-chan > i{ color:#8a7b70; }

/* ④ Đáp án & lỗi sai */
.ctb-chon-ds{ display:flex; flex-direction:column; gap:8px; }
.ctb-chon{ display:flex; align-items:center; gap:14px; padding:10px 14px; margin:0; border-radius:12px; background:#fff; border:1px solid rgba(125,35,20,.16); cursor:pointer; transition:border-color .2s, background .2s; }
.ctb-chon:hover{ border-color:#e9b84c; }
.ctb-chon > input{ width:22px; height:22px; flex:none; accent-color:#d81a32; }
.ctb-chon > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ctb-chon b{ font-size:14.5px; color:#2a1810; } .ctb-chon small{ font-size:12.5px; color:#7a6a60; line-height:1.4; }
.ctb-chon.on{ background:#fff3d6; border-color:#e9a923; box-shadow:0 0 0 1px #e9a923 inset; }
.ctb-cb-gio{ padding-left:36px; }
.ctb-hang-cuoi{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; margin-top:auto; }
.ctb-hang-cuoi > .ctb-ghi{ flex:1 1 260px; margin:0; align-items:center; }

/* Bảng điểm + phiếu vừa đọc + thống kê */
.ctb-bd{ background:#fff; border:1px solid rgba(125,35,20,.12); border-radius:18px; padding:14px 16px; margin-bottom:16px; box-shadow:0 16px 30px -26px rgba(90,25,10,.8); }
.ctb-bd-dau{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ctb-bd-dau > b, .ctb-bd-ten{ font-size:19px; font-weight:900; color:#8e0a17; }
.ctb-bd-dau > b small{ font-size:14px; color:#7a6a60; font-weight:600; }
.ctb-bd-ic{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; color:#fff; background:linear-gradient(180deg, #b3101f, #8e0a17); font-size:16px; }
.ctb-bd-tk{ font-size:13.5px; color:#5b4a41; } .ctb-bd-tk b{ color:#2a1810; }
.ctb-bd-phai{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13.5px; color:#7a6a60; }
.ctb-bd-phai .tg2-nut{ min-height:38px; padding:0 14px; font-size:14px; }
.tg2-nut.ctb-cam{ border-color:#e08a00 !important; color:#a35f00 !important; }
.ctb-bang{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.ctb-bang > thead > tr > th{ background:#f6f1ea; color:#3b2a20; font-weight:800; padding:10px 12px; border-bottom:1px solid #eadfd3; text-align:left; white-space:nowrap; }
.ctb-bang > thead > tr > th:first-child{ border-top-left-radius:10px; } .ctb-bang > thead > tr > th:last-child{ border-top-right-radius:10px; }
.ctb-bang > tbody > tr > td{ padding:9px 12px; border-bottom:1px solid #f1e8de; vertical-align:middle; color:#21160f; }
.ctb-bang > tbody > tr:hover > td{ background:#fffaf2; }
.ctb-bang .so{ text-align:center; }
.ctb-bang-trong{ text-align:center !important; color:#8a7b70 !important; padding:22px 12px !important; }
.ctb-bang-trong > i{ color:#9aa0a6; margin-right:6px; }

@media (max-width:1199.98px){ .ctb-luoi{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:575.98px){
  .ctb-ba-o{ grid-template-columns:minmax(0, 1fr); }
  .ctb-hang-o{ grid-template-columns:minmax(0, 1fr); gap:4px; }
  .ctb-tha{ flex-direction:column; text-align:center; }
  .ctb-dau > b{ font-size:16px; }
  .ctb-cong-cu .tg2-nut{ flex:1 1 auto; }
}

/* Lời giải (thầy chốt 04/10/2026): mục ③ trong màn Chấm bài + nút "📖 Lời giải" từng câu ở trang học sinh (js/lam-bai-tn.js) */
.ctb-loi-giai{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; border-radius:12px; background:#f7f3ff; border:1px solid #e1d7fb; font-size:13.5px; color:#3b2a5e; }
.ctb-loi-giai > span{ flex:1 1 220px; } .ctb-loi-giai i{ color:#6a46d6; } .ctb-loi-giai a{ color:inherit; font-weight:700; text-decoration:underline; }
.ctb-loi-giai .tg2-nut{ min-height:38px; padding:0 14px; font-size:14px; }
.ctb-cat{ margin-top:8px; }
.ltn-lg{ display:inline-flex; align-items:center; gap:4px; margin:0 8px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:#f0eaff; color:#5b3cc4; border:1px solid #dcd0fb; text-decoration:none; white-space:nowrap; }
.ltn-lg:hover{ background:#e4d9ff; color:#4527a0; }

/* Tạo đề tương tự từ file (js/tach-word.js htmlDTT_, thầy yêu cầu 04/10/2026) */
.tw-dtt{ margin:8px 0 12px; padding:12px 14px; border-radius:14px; background:#f7f3ff; border:1px solid #e1d7fb; color:#2a1810; }
.tw-dtt-dau{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.tw-dtt-dau > b{ color:#5b3cc4; font-size:16px; }
.tw-dtt-ds{ display:flex; flex-direction:column; gap:8px; max-height:560px; overflow:auto; }
.tw-dtt-dong{ display:grid; grid-template-columns:28px minmax(0, 1fr) 170px minmax(0, 1fr) auto; gap:10px; align-items:start; padding:8px; border-radius:10px; background:#fff; border:1px solid #ece4f7; }
.tw-dtt-so{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#5b3cc4; color:#fff; font-weight:800; font-size:13px; }
.tw-dtt-o small, .tw-dtt-giua small{ display:block; color:#7a6a60; font-size:11.5px; }
.tw-dtt-o.trong{ align-self:center; }
.tw-dtt-nd{ font-size:13.5px; max-height:7.2em; overflow:hidden; line-height:1.45; }
.tw-dtt-nd img{ max-height:90px; width:auto; }
.tw-dtt-giua{ display:flex; flex-direction:column; gap:2px; font-size:13px; }
.tw-dtt-giua b{ color:#8e0a17; font-size:13px; }
@media (max-width: 991.98px){ .tw-dtt-dong{ grid-template-columns:28px minmax(0, 1fr); } .tw-dtt-dong > :nth-child(n+3){ grid-column:2; } }

/* ═════════ Cùng phong cách Marvel với Sách / Ngân hàng (thầy 05/11/2026): dải sọc đỏ–vàng đầu mỗi thẻ, tiêu đề nghiêng, nền chấm ═════════ */
html.gd-sieu-anh-hung #appShell#appShell #pane-chamtn .ctb-the{ position:relative; padding-top:20px; border:1px solid #ecd2b8; border-radius:18px;
  background:radial-gradient(circle at 1px 1px,#d9a77a26 1px,transparent 1.6px) 0 0/10px 10px, linear-gradient(170deg,#fffaf2,#fff2e2); box-shadow:0 8px 22px #7d08141c; }
html.gd-sieu-anh-hung #pane-chamtn .ctb-the::before{ content:''; position:absolute; left:0; right:0; top:0; height:6px; border-radius:18px 18px 0 0; background:repeating-linear-gradient(115deg,#b10e25 0 14px,#f7c544 14px 22px); pointer-events:none; }
html.gd-sieu-anh-hung #pane-chamtn .ctb-dau > b{ font-style:italic; letter-spacing:.05em; text-transform:uppercase; text-shadow:2px 2px 0 #5e0813; }
html.gd-sieu-anh-hung #pane-chamtn .ctb-chip{ border-left:4px solid #b10e25; border-radius:0 12px 12px 0; }
html.gd-sieu-anh-hung #pane-chamtn .ctb-ca-o, html.gd-sieu-anh-hung #pane-chamtn .ctn2-nguon-o{ border-radius:11px; }
html.gd-sieu-anh-hung #pane-chamtn .ctb-tu-dien{ border-left:5px solid #b10e25; }

/* ═════════ Form "Sửa / Bài kiểm tra mới" — cùng phong cách Sách / Ngân hàng, rút gọn (thầy 06/11/2026) ═════════
   4 thẻ đánh số: ① Nạp đề & đáp án · ② Thông tin bài · ③ Mẫu phiếu & điểm (Nâng cao gấp lại) · ④ Đáp án. */
.ctn2-sua-dau{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:2px 0 14px; }
.ctn2-sua-dau h3{ margin:0; font-size:24px; font-weight:900; font-style:italic; letter-spacing:.04em; text-transform:uppercase; color:#8e0a17; text-shadow:2px 2px 0 #f7c54499; }
.ctn2-sua-dau .tg2-nut{ min-height:40px; padding:0 16px; font-size:14px; }
.ctn2-sua-nap, .ctb-luoi + .ctb-the{ margin-bottom:16px; }
#pane-chamtn .ctn2-sua-nap{ margin-bottom:16px; }
.ctn2-sua-nap .ctn-tha{ flex-direction:row; justify-content:flex-start; gap:16px; padding:14px 18px; border:2px dashed #ebb54a; border-radius:14px; background:#fffdf7; cursor:pointer; margin:0; }
.ctn2-sua-nap .ctn-tha:hover{ background:#fff6df; border-color:#d98b0b; }
.ctn-tha-ic{ width:52px; height:60px; flex:none; display:grid; place-items:center; border-radius:10px; background:#fff; border:1px solid #e3dbd3; box-shadow:5px 5px 0 -1px #f1e8de; color:#c8102e; font-size:28px; }
.ctn-tha-chu{ display:flex; flex-direction:column; gap:3px; min-width:0; text-align:left; }
.ctn-tha-chu b{ color:#8e0a17; font-size:16px; font-weight:800; }
.ctn-dan-bang{ margin-top:10px; }
.ctn-dan-bang > summary{ cursor:pointer; font-size:14px; font-weight:700; color:#8e0a17; padding:4px 0; }
/* ô chọn (mẫu phiếu / cách tính / số báo danh): thẻ nhỏ, đang chọn = vàng */
.ctb-the .ctn-opts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; margin-top:4px; }
.ctb-the .ctn-opts .ctn-chon{ border:1px solid #e3d3bd !important; background:#fff !important; border-radius:12px !important; padding:9px 11px; align-items:flex-start; }
.ctb-the .ctn-opts .ctn-chon.on{ border-color:#e0a82a !important; background:linear-gradient(145deg,#fff3c4,#ffe9a3) !important; box-shadow:inset 4px 0 0 #b10e25; }
.ctb-the .ctn-opts .ctn-chon b{ font-weight:800; font-size:13.5px; }
.ctb-the .ctn-opts .ctn-chon .tg-phu{ font-size:11.5px; }
.ctb-the .ctn-chon[title]{ align-items:center; }
.ctb-the .tg-luoi2, .ctb-the .tg-luoi3{ gap:10px; }
.ctb-the .tg-nhan, .ctb-the label.tg-nhan{ color:#5b4a41; font-weight:700; font-size:13px; }
.ctb-the .tg-nhan .tg-phu{ font-weight:500; }
.ctb-the .tg-o{ border-color:#e3d3bd; background:#fff; }
.ctb-the .tg-o:focus{ border-color:#e0a82a; outline:2px solid #f7c54466; }
.ctb-the section.tg-the.nhe{ background:#fff; border:1px solid #ecd2b8; border-radius:12px; padding:12px; }
/* nút Nâng cao (gấp / mở) */
.ctn-nang-cao{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:1px dashed #d9a77a; border-radius:10px; background:#fff8ea; font:inherit; font-size:13.5px; font-weight:800; color:#8e0a17; cursor:pointer; text-align:left; flex-wrap:wrap; }
.ctn-nang-cao > i{ transition:transform .2s; color:#b10e25; }
.ctn-nang-cao.mo > i{ transform:rotate(90deg); }
.ctn-nang-cao .tg-phu{ font-weight:500; }
.ctn-nang-cao-than{ display:flex; flex-direction:column; gap:12px; padding:10px 2px 2px; }
.ctn2-sua-chan{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 10px; }
.ctn2-sua-chan .gian{ flex:1; }
@media (max-width:991.98px){ .ctb-luoi{ grid-template-columns:minmax(0, 1fr); } }

/* =====================================================================================
 * NHÓM HỌC PHÍ (nhân viên) — Kế toán (.kt2-*) + Giao dịch SePay (.sp2-*), theo 2 ảnh mẫu thầy 03/10/2026.
 * (Thu học phí: css/thu-hoc-phi.css.) Bố cục cho mọi giao diện; màu cho giao diện Siêu anh hùng.
 * Thẻ số dùng chung .nvs-the của hoc-sinh-nv.css. Đè luật chung của noi-dung-nhan-vien.css phải dùng #appShell#appShell.
 * JS: app.js (renderKtUnpaid / renderKtDoanhThuThang / renderKeToanChart / renderKtDay, renderSePay / veXuLySePay_),
 *     thong-bao-hoc-phi.js (renderBaoThangDau).
 * ===================================================================================== */

/* Tiêu đề trang IN HOA như ảnh mẫu (Kế toán, Giao dịch SePay) */
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-ketoan, #pane-sepay) > .mv-bang .mv-tieu-de{ text-transform:uppercase !important; font-weight:900 !important; letter-spacing:0 !important; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-ketoan, #pane-sepay) > .mv-bang .mv-phu{ color:#8a1a24; font-weight:600; }

/* ═════════════════════════ KẾ TOÁN ═════════════════════════ */
#pane-ketoan{ position:relative; }
.kt2-loc{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; justify-content:flex-end; margin-bottom:16px; }
@media (min-width:1680px){ .kt2-loc{ position:absolute; top:22px; right:24px; z-index:2; margin:0; } }
.kt2-o{ display:flex; flex-direction:column; width:210px; }
.kt2-o .form-label{ font-size:13.5px; margin-bottom:5px; }
.kt2-o-icon{ position:relative; }
.kt2-o-icon > i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:15px; pointer-events:none; z-index:3; }
#appShell#appShell .kt2-o-icon > :is(.form-control, .form-select){ padding-left:40px !important; }
.kt2-xem{ display:inline-flex; align-items:center; min-height:44px; padding:0 20px !important; font-weight:800 !important; border-radius:12px !important; white-space:nowrap; }

.kt2-the .nvs-the{ padding:16px 18px; gap:14px; }
.kt2-the .nvs-the-huy{ width:56px; height:56px; font-size:23px; }
.kt2-the .nvs-the-chu{ flex:1; }
.kt2-the .nvs-the-chu b{ font-size:clamp(19px, 1.45vw, 30px); white-space:nowrap; }
.kt2-the .nvs-the-chu > span{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1679.98px){ .kt2-the .nvs-the-huy{ width:48px; height:48px; font-size:20px; } .kt2-the .nvs-the{ padding:14px; gap:12px; } }

.kt2-hang-3{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1.45fr); gap:16px; margin-bottom:16px; align-items:stretch; }
.kt2-hang-2{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:16px; align-items:start; }
.kt2-rong{ margin-bottom:16px; }
.kt2-hop{ border-radius:16px; overflow:hidden; display:flex; flex-direction:column; min-width:0; animation:kt2Vao .45s cubic-bezier(.22,1,.36,1) both; }
.kt2-hang-3 > .kt2-hop:nth-child(2){ animation-delay:.05s; } .kt2-hang-3 > .kt2-hop:nth-child(3){ animation-delay:.1s; }
@keyframes kt2Vao{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.kt2-dau{ display:flex; align-items:center; gap:10px; padding:12px 16px; min-height:50px; flex-wrap:wrap; }
.kt2-dau > i{ font-size:17px; }
.kt2-dau b{ font-size:16px; font-weight:800; min-width:0; }
.kt2-dau small{ font-size:13px; font-weight:500; }
.kt2-dem{ margin-left:auto; min-width:26px; height:26px; padding:0 9px; border-radius:999px; display:inline-grid; place-items:center; font-size:13px; font-weight:800; }
.kt2-dem:empty{ display:none; }
.kt2-tai{ width:32px; height:32px; border-radius:9px; border:0; display:grid; place-items:center; cursor:pointer; font-size:13px; }
.kt2-than{ padding:14px 16px; flex:1; min-width:0; }
.kt2-than-bang{ padding:10px 12px 12px; position:relative; }
.kt2-than-bang > .kt2-tai{ position:absolute; top:9px; right:12px; }

.kt2-chu-giai{ display:flex; justify-content:flex-end; gap:18px; font-size:13px; font-weight:600; margin-bottom:4px; }
.kt2-chu-giai span{ display:inline-flex; align-items:center; gap:7px; }
.kt2-cham{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.kt2-bieu-do{ position:relative; height:260px; }

.kt2-ngay-hang{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px; margin-bottom:12px; }
.kt2-ngay-hang .btn{ min-width:84px; font-weight:800 !important; border-radius:10px !important; }
#appShell#appShell #ktDayPick{ min-width:0; font-weight:600; }
.kt2-ngay-bang{ width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; border-radius:12px; overflow:hidden; }
.kt2-ngay-bang th{ padding:10px 12px; font-size:13.5px; font-weight:700; }
.kt2-ngay-bang td{ padding:12px; font-weight:600; white-space:nowrap; }
.kt2-ngay-bang tr.kt2-tong td{ font-size:17px; font-weight:900; padding:13px 12px; }
.kt2-ic{ width:22px; text-align:center; margin-right:10px; }

.kt2-bang-cuon{ overflow:auto; max-height:460px; border-radius:0 0 16px 16px; }
.kt2-rong .kt2-bang-cuon{ max-height:520px; }
.kt2-bang{ font-size:14.5px; margin:0; }
.kt2-ma{ font-weight:600; white-space:nowrap; }
.kt2-lop{ white-space:nowrap; font-weight:600; }
.kt2-hs{ display:flex; align-items:center; gap:10px; min-width:170px; }
.kt2-hs .hs2-av{ width:34px; height:34px; font-size:12.5px; }
.kt2-hs > span:not(.hs2-av){ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.kt2-hs b{ font-weight:600; }
.kt2-hs small{ font-size:12px; font-weight:600; }
.kt2-phu{ display:block; font-size:12px; font-weight:500; white-space:nowrap; }
.kt2-tien-no{ font-weight:800; white-space:nowrap; }
.kt2-chua-tien{ font-size:13px; font-weight:600; font-style:italic; }
.kt2-noi-dung{ font-size:13.5px; max-width:280px; }
.kt2-ht{ display:inline-flex; align-items:center; white-space:nowrap; font-weight:600; }
.kt2-gio{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.kt2-nut{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:nowrap; }
.kt2-thu{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; white-space:nowrap;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.kt2-thu:hover{ transform:translateY(-1px); }
.kt2-ic-nut{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:14px; cursor:pointer; text-decoration:none; flex:none; transition:transform .25s, box-shadow .25s; }
.kt2-ic-nut:hover{ transform:translateY(-1px); }
.kt2-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:800; white-space:nowrap; }
.kt2-trong{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 16px; text-align:center; font-size:14px; font-weight:500; }
.kt2-trong i{ font-size:24px; }

/* Bảng học phí tháng đầu (khung thứ 3) */
.kt2-td-loc{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.kt2-td-n{ border-radius:999px; padding:4px 12px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.kt2-td-cuon{ max-height:300px; border-radius:12px; }
.kt2-td-bang{ font-size:13.5px; margin:0; }
.kt2-td-hs{ display:flex; align-items:center; gap:9px; min-width:150px; }
.kt2-td-hs .hs2-av{ width:34px; height:34px; font-size:12px; }
.kt2-td-hs > span:not(.hs2-av){ display:flex; flex-direction:column; gap:3px; min-width:0; }
.kt2-td-hs small{ font-size:12px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.kt2-td-hs .kt2-chip{ padding:1px 8px; font-size:11px; }
.kt2-td-tong{ font-weight:800; }
.kt2-td-kem{ max-width:190px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block !important; }
.kt2-td-bang .kt2-thu{ padding:7px 10px; font-size:12.5px; gap:6px; }
.kt2-td-so{ white-space:nowrap; }
.kt2-td-gui{ width:24px; height:24px; border-radius:7px; display:inline-grid; place-items:center; font-size:11px; cursor:pointer; text-decoration:none; padding:0; }

@media (max-width:1679.98px){ .kt2-hang-3{ grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); } .kt2-hang-3 > .kt2-hop:nth-child(3){ grid-column:1 / -1; } }
@media (max-width:1679.98px){
  html.gd-sieu-anh-hung #appShell#appShell #pane-ketoan .kt2-hang-2 .kt2-bang > :is(thead, tbody) > tr > :is(th, td){ padding-left:9px !important; padding-right:9px !important; }
  .kt2-hang-2 .kt2-nut{ gap:5px; }
  .kt2-hang-2 .kt2-ic-nut{ width:32px; height:32px; font-size:13px; }
  .kt2-hang-2 .kt2-thu{ padding:7px 11px; }
}
@media (max-width:991.98px){ .kt2-hang-2{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:767.98px){
  .kt2-hang-3{ grid-template-columns:minmax(0, 1fr); }
  .kt2-loc{ justify-content:stretch; }
  .kt2-o{ flex:1 1 140px; min-width:0; }
  .kt2-xem{ flex:1 1 100%; justify-content:center; }
  .kt2-the .nvs-the-chu b{ font-size:22px; }
  .kt2-the .nvs-the-chu > span{ font-size:14px; }
  .kt2-the .nvs-the-chu small{ display:block; }
}
@media (max-width:575.98px){
  .kt2-the.nvs-the-luoi{ grid-template-columns:minmax(0, 1fr); gap:8px; }
  .kt2-bieu-do{ height:230px; }
  .kt2-thu span, .kt2-noi-dung{ font-size:12.5px; }
}

/* ───────── Màu Kế toán — giao diện Siêu anh hùng ───────── */
html.gd-sieu-anh-hung .kt2-o .form-label{ color:#3b2a20 !important; font-weight:700 !important; }
html.gd-sieu-anh-hung .kt2-o-icon > i{ color:#7a6a60; }
html.gd-sieu-anh-hung .kt2-xem{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019) !important; border:1px solid #c98a12 !important; color:#2a1606 !important; box-shadow:0 10px 20px -14px rgba(150,90,0,.9); }
html.gd-sieu-anh-hung .kt2-hop{ background:#fff; border:1px solid rgba(125,35,20,.12); box-shadow:0 16px 30px -26px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .kt2-dau{ background:linear-gradient(180deg, #b3101f 0%, #8e0a17 100%); color:#fff; border-bottom:2px solid #f2c14e; }
html.gd-sieu-anh-hung .kt2-dau small{ color:#ffe3b5; }
html.gd-sieu-anh-hung .kt2-dem{ background:#fff; color:#b3101f; }
html.gd-sieu-anh-hung .kt2-tai{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#5b4a41; transition:transform .4s; }
html.gd-sieu-anh-hung .kt2-tai:hover{ color:#b3101f; border-color:#e9b84c; transform:rotate(90deg); }
html.gd-sieu-anh-hung .kt2-chu-giai{ color:#3b2a20; }
html.gd-sieu-anh-hung .kt2-cham.vang{ background:#f6b52a; } html.gd-sieu-anh-hung .kt2-cham.do{ background:#a50d1f; }
html.gd-sieu-anh-hung .kt2-ngay-hang .btn{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019) !important; border:1px solid #c98a12 !important; color:#2a1606 !important; }
html.gd-sieu-anh-hung .kt2-ngay-bang{ border:1px solid rgba(125,35,20,.12); }
html.gd-sieu-anh-hung #appShell#appShell .kt2-ngay-bang th{ background:#f6f1ea !important; color:#4a372d !important; border:0 !important; border-bottom:1px solid rgba(125,35,20,.12) !important; }
html.gd-sieu-anh-hung .kt2-ngay-bang td{ color:#21160f; border-bottom:1px solid rgba(125,35,20,.08); }
html.gd-sieu-anh-hung .kt2-ngay-bang tr.kt2-tong td{ border-bottom:0; background:#fffaf2; color:#2a1810; }
html.gd-sieu-anh-hung .kt2-ngay-bang tr.kt2-tong td:last-child{ color:#c8102e; }
html.gd-sieu-anh-hung .kt2-ic.vang{ color:#e39b16; } html.gd-sieu-anh-hung .kt2-ic.lam{ color:#1d4fbf; }

/* Bảng trong khung: tiêu đề cột nền kem chữ nâu (thanh đỏ là đầu khung) */
html.gd-sieu-anh-hung #appShell#appShell #pane-ketoan :is(.kt2-bang, .kt2-td-bang) > thead > tr > th{
  background:#f6f1ea !important; color:#3b2a20 !important; font-size:13.5px !important; font-weight:800 !important; padding:11px 14px !important;
  border:0 !important; border-bottom:1px solid rgba(125,35,20,.14) !important; white-space:nowrap; position:sticky; top:0; z-index:1; }
html.gd-sieu-anh-hung #appShell#appShell #pane-ketoan :is(.kt2-bang, .kt2-td-bang) > tbody > tr > td{ padding:10px 14px; vertical-align:middle; border-color:rgba(125,35,20,.08) !important; color:#21160f; }
html.gd-sieu-anh-hung #appShell#appShell #pane-ketoan .kt2-td-bang > :is(thead, tbody) > tr > :is(th, td){ padding:9px 8px !important; }
html.gd-sieu-anh-hung #pane-ketoan :is(.kt2-bang, .kt2-td-bang) > tbody > tr{ transition:background-color .2s; }
html.gd-sieu-anh-hung #pane-ketoan :is(.kt2-bang, .kt2-td-bang) > tbody > tr:hover > td{ background:#fffaf2 !important; }
html.gd-sieu-anh-hung .kt2-ma{ color:#2a1810; }
html.gd-sieu-anh-hung .kt2-lop{ color:#3b2a20; }
html.gd-sieu-anh-hung .kt2-phu{ color:#8a7b70; }
html.gd-sieu-anh-hung .kt2-phu.kt2-no{ color:#c2410c; }
html.gd-sieu-anh-hung .kt2-tien-no{ color:#c8102e; }
html.gd-sieu-anh-hung .kt2-chua-tien{ color:#a3958c; }
html.gd-sieu-anh-hung .kt2-noi-dung{ color:#4a372d; }
html.gd-sieu-anh-hung .kt2-thu{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019); border:1px solid #c98a12; color:#2a1606; box-shadow:0 8px 14px -10px rgba(150,90,0,.9); }
html.gd-sieu-anh-hung .kt2-thu:hover{ box-shadow:0 12px 18px -10px rgba(150,90,0,.9); }
html.gd-sieu-anh-hung .kt2-thu i{ color:#9a4b00; }
html.gd-sieu-anh-hung .kt2-ic-nut{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#5b4a41; }
html.gd-sieu-anh-hung .kt2-ic-nut:hover{ color:#b3101f; border-color:#e9b84c; box-shadow:0 8px 14px -10px rgba(90,25,10,.7); }
html.gd-sieu-anh-hung .kt2-chip.xanh{ background:#e3f6ea; color:#1e7a46; border:1px solid #bfe6cd; }
html.gd-sieu-anh-hung .kt2-chip.do{ background:#ffe9ea; color:#c8102e; border:1px solid #f6c9cd; }
html.gd-sieu-anh-hung .kt2-chip.vang{ background:#fff3d6; color:#a35f00; border:1px solid #f3dfae; }
html.gd-sieu-anh-hung .kt2-chip.lam{ background:#e6f0ff; color:#1d4fa8; border:1px solid #c8dbf6; }
html.gd-sieu-anh-hung .kt2-td-tong{ color:#c8102e; }
html.gd-sieu-anh-hung .kt2-td-kem{ color:#8a7b70; }
html.gd-sieu-anh-hung .kt2-td-gui{ background:#fff; border:1px solid rgba(125,35,20,.18); color:#5b4a41; }
html.gd-sieu-anh-hung .kt2-td-gui:hover{ color:#b3101f; border-color:#e9b84c; }
html.gd-sieu-anh-hung .kt2-td-n{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#4a372d; }
html.gd-sieu-anh-hung .kt2-td-n.on{ background:#fff3cf; border-color:#e9b84c; color:#8a4f00; }
html.gd-sieu-anh-hung .kt2-td-cuon{ border:1px solid rgba(125,35,20,.1); }
html.gd-sieu-anh-hung .kt2-trong{ color:#7a6a60; }
html.gd-sieu-anh-hung .kt2-trong i{ color:#d0a24a; }

/* ═════════════════════════ GIAO DỊCH SEPAY ═════════════════════════ */
.sp2-loc{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; margin-bottom:14px; }
.sp2-loai{ display:flex; flex-wrap:wrap; gap:12px; }
.sp2-n{ display:inline-flex; align-items:center; gap:10px; padding:10px 18px; min-height:50px; border-radius:12px; font:inherit; font-size:15.5px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, background-color .25s; }
.sp2-n:hover{ transform:translateY(-1px); }
.sp2-n i{ font-size:17px; }
.sp2-so:empty{ display:none; }
.sp2-ngay{ display:flex; align-items:center; gap:8px; padding:0 10px 0 14px; border-radius:12px; min-height:50px; margin:0; cursor:pointer; }
.sp2-ngay > span{ font-weight:700; font-size:15px; }
#appShell#appShell .sp2-ngay .form-control{ border:0 !important; box-shadow:none !important; background:transparent !important; padding:6px 4px !important; min-width:140px; font-weight:700; font-size:15px; }
.sp2-tai{ margin-left:auto; }
.sp2-bao{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:12px; font-size:14.5px; margin-bottom:16px; }
.sp2-bao > i{ font-size:20px; flex:none; }
.sp2-luoi{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(360px, 1fr); gap:18px; align-items:start; }
.sp2-trai{ min-width:0; }
.sp2-tom-tat{ font-size:13.5px; margin:0 2px 10px; }
.sp2-tom-tat:empty{ display:none; }
.sp2-xong{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; font-size:14px; font-weight:600; margin-bottom:10px; transition:opacity .4s, transform .4s; animation:kt2Vao .35s both; }
.sp2-xong.tat{ opacity:0; transform:translateY(-6px); }

.sp2-gd{ display:grid; grid-template-columns:56px minmax(0, 1fr) minmax(150px, auto); gap:10px 16px; align-items:start; padding:16px 18px; border-radius:16px; margin-bottom:14px; cursor:pointer;
  transition:border-color .25s, box-shadow .25s, background-color .25s, transform .25s cubic-bezier(.22,1,.36,1); animation:kt2Vao .4s cubic-bezier(.22,1,.36,1) both; }
.sp2-gd:hover{ transform:translateY(-1px); }
.sp2-gd:focus-visible{ outline:3px solid #f2b632; outline-offset:2px; }
.sp2-gd-ic{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:21px; color:#fff; margin-top:2px; }
.sp2-gd-ma{ display:flex; flex-wrap:wrap; gap:4px 8px; font-size:13.5px; align-items:baseline; }
.sp2-gd-ma b{ font-size:14.5px; font-weight:800; }
.sp2-gd-so{ font-size:30px; font-weight:900; letter-spacing:-.02em; line-height:1.15; margin-top:4px; white-space:nowrap; }
.sp2-gd-tt{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:5px 12px; margin:0; font-size:14px; min-width:0; }
.sp2-gd-tt dt{ font-weight:500; white-space:nowrap; }
.sp2-gd-tt dd{ margin:0; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.sp2-nd{ font-weight:800 !important; text-transform:none; }
.sp2-mo{ font-style:italic; font-weight:500; }
.sp2-gd-chip{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.sp2-chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700; max-width:100%; }
.sp2-chi-tiet{ font-size:12px; font-weight:500; }
.sp2-gd-tt{ grid-column:2 / -1; grid-row:2; }
.sp2-gd-chip{ grid-column:3; grid-row:1; align-items:flex-end; }
.sp2-gd-nut{ grid-column:2 / -1; display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; margin-top:2px; }
/* Màn rất rộng: 4 cột như ảnh mẫu (tiền | nội dung | nhãn) */
@media (min-width:1800px){
  .sp2-gd{ grid-template-columns:56px minmax(170px, .8fr) minmax(0, 1.35fr) minmax(150px, auto); }
  .sp2-gd-tt{ grid-column:3; grid-row:1; }
  .sp2-gd-chip{ grid-column:4; grid-row:1; align-items:flex-start; }
  .sp2-gd-nut{ grid-column:3 / -1; }
}
.sp2-nut-ghi, .sp2-nut-bo{ display:inline-flex; align-items:center; gap:10px; padding:9px 20px; min-height:44px; border-radius:10px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.sp2-nut-ghi:hover, .sp2-nut-bo:hover{ transform:translateY(-1px); }
.sp2-trong{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 16px; border-radius:16px; text-align:center; font-weight:600; }
.sp2-trong i{ font-size:30px; }
.sp2-chan{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:13.5px; padding:4px 2px; }
.sp2-link{ border:0; background:none; font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:4px 0; }

.sp2-phai{ position:sticky; top:calc(var(--head, 88px) + 14px); display:flex; flex-direction:column; gap:14px; max-height:calc(100vh - var(--head, 88px) - 28px); overflow:auto; border-radius:16px; }
.sp2-xl{ border-radius:16px; padding:0 0 16px; }
.sp2-xl-dau{ padding:14px 18px; font-size:21px; font-weight:800; border-radius:16px 16px 0 0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.sp2-xl-dau small{ font-size:13px; font-weight:500; margin-left:auto; }
.sp2-xl-luoi{ display:grid; grid-template-columns:128px minmax(0, 1fr); gap:12px 14px; align-items:center; padding:14px 18px 4px; }
.sp2-nhan{ font-size:14px; font-weight:600; margin:0; align-self:center; }
.sp2-goc{ font-size:24px; font-weight:900; padding:6px 12px; border-radius:10px; }
.sp2-o{ position:relative; }
.sp2-o > i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:14px; pointer-events:none; z-index:3; }
#appShell#appShell .sp2-o > :is(.form-control, .form-select){ padding-left:38px !important; }
.sp2-hs-msg{ font-size:12.5px; margin-top:4px; }
.sp2-hs-msg:empty{ display:none; }
.sp2-goi-y{ font-size:13px; font-style:italic; }
.sp2-khoan{ min-width:0; grid-column:1 / -1; margin-top:-6px; }
.sp2-nhan-rong{ grid-column:1 / -1; }
.sp2-khoan .kt-luu-muc, .sp2-khoan .kt-luu-msg{ display:none !important; }
.sp2-khoan .thp-k-bang{ font-size:13px; }
.sp2-khoan .thp-k-bang th{ padding:6px 8px; font-size:12px; }
.sp2-khoan .thp-k-bang td{ padding:6px 8px; }
.sp2-khoan .thp-k-cot-cb{ width:34px; }
.sp2-khoan .thp-k-tien-o .kt-tien{ width:112px; }
.sp2-khoan .thp-tong{ display:none; }
.sp2-khoan .thp-da-dong{ font-size:12px; margin:6px 0 2px; }
.sp2-khoan > .thp-k-bang, .sp2-khoan .thp-k-bang{ border-radius:10px; }
.sp2-khoan:has(.thp-k-bang){ max-height:330px; overflow:auto; border-radius:12px; }
#spGC{ resize:vertical; min-height:52px; }
.sp2-xl-tong{ display:flex; justify-content:space-between; align-items:center; margin:12px 18px 0; padding:10px 14px; border-radius:12px; }
.sp2-xl-tong span{ font-size:16px; font-weight:800; }
.sp2-xl-tong b{ font-size:24px; font-weight:900; }
.sp2-lech{ margin:8px 18px 0; font-size:13px; font-weight:600; }
.sp2-lech:empty{ display:none; }
/* Chốt sổ thu theo tháng — tab Kế toán (06/11/2026) */
.kt-chot-so{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px; border-radius:12px; font-size:13.5px; border:1px solid #f2d394; background:#fff7e6; color:#5a3b00; }
.kt-chot-so[hidden]{ display:none; }
.kt-chot-so.da{ background:#eaf6ee; border-color:#a8d5b5; color:#1c4a2c; }
.kt-chot-so > span{ flex:1 1 260px; }
.kt-chot-so > i{ font-size:16px; }
/* Phần tiền dư khi ghi phiếu SePay (06/11/2026) */
.sp2-du{ margin:8px 18px 0; padding:10px 12px; border-radius:10px; background:#fff7e6; border:1px solid #f2d394; }
.sp2-du[hidden]{ display:none; }
.sp2-du .sp2-nhan{ display:block; margin-bottom:6px; }
.sp2-ghi-btn{ display:flex; align-items:center; justify-content:center; width:calc(100% - 36px); margin:12px 18px 0; min-height:50px; font-size:17px; font-weight:800 !important; border-radius:12px !important; }
#spMsg{ margin:8px 18px 0; }
#spMsg:empty{ display:none; }
.sp2-ket{ display:flex; gap:10px; align-items:flex-start; margin:12px 18px 0; padding:12px 14px; border-radius:12px; font-size:14px; font-weight:500; }
.sp2-ket > i{ margin-top:3px; }
.sp2-xl-trong{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px 20px !important; text-align:center; }
.sp2-xl-trong i{ font-size:30px; }
.sp2-xl-trong span{ font-size:14px; }

.sp2-bo-hop{ border-radius:16px; padding:0 0 14px; transition:box-shadow .3s; }
.sp2-bo-hop.nhan{ animation:sp2Nhan .9s ease; }
@keyframes sp2Nhan{ 30%{ box-shadow:0 0 0 4px rgba(216,26,50,.35); } }
.sp2-bo-dau{ display:flex; align-items:center; gap:10px; padding:12px 18px; font-size:18px; font-weight:800; border-radius:16px 16px 0 0; }
.sp2-bo-hang{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px 12px; align-items:center; padding:12px 18px 0; }
.sp2-bo-hang > .sp2-nhan{ grid-column:1 / -1; }
.sp2-bo-hang textarea{ resize:vertical; min-height:48px; }
.sp2-bo-btn{ min-height:48px; padding:0 16px !important; font-weight:700 !important; border-radius:10px !important; white-space:nowrap; }
#spBoMsg{ padding:0 18px; }
#spBoMsg:empty{ display:none; }

@media (max-width:1679.98px){
  .sp2-n{ padding:8px 14px; font-size:14.5px; min-height:46px; gap:8px; }
  .sp2-ngay{ min-height:46px; }
  #appShell#appShell .sp2-ngay .form-control{ min-width:122px; font-size:14.5px; }
}
@media (max-width:1199.98px){
  .sp2-luoi{ grid-template-columns:minmax(0, 1fr); }
  .sp2-phai{ position:static; max-height:none; overflow:visible; scroll-margin-top:calc(var(--head, 88px) + 10px); }
}
@media (max-width:767.98px){
  .sp2-loc, .sp2-loai{ gap:8px; }
  .sp2-loai{ width:100%; }
  .sp2-n{ font-size:14px; padding:8px 12px; min-height:44px; flex:1 1 auto; justify-content:center; }
  .sp2-ngay{ flex:1 1 140px; min-height:44px; }
  #appShell#appShell .sp2-ngay .form-control{ min-width:0; font-size:14px; }
  .sp2-tai{ flex:1 1 100%; }
  .sp2-gd{ grid-template-columns:44px minmax(0, 1fr); padding:14px; gap:8px 12px; }
  .sp2-gd-ic{ width:44px; height:44px; font-size:18px; }
  .sp2-gd-so{ font-size:24px; }
  .sp2-gd-tt, .sp2-gd-chip, .sp2-gd-nut{ grid-column:1 / -1; grid-row:auto; }
  .sp2-gd-chip{ flex-direction:row; flex-wrap:wrap; }
  .sp2-gd-nut{ justify-content:stretch; }
  .sp2-nut-ghi, .sp2-nut-bo{ flex:1 1 auto; justify-content:center; padding:8px 12px; font-size:14px; }
  .sp2-xl-luoi{ grid-template-columns:minmax(0, 1fr); gap:6px; padding:12px 14px 4px; }
  .sp2-nhan{ margin-top:6px; }
  .sp2-xl-dau{ font-size:18px; padding:12px 14px; }
  .sp2-bo-hang{ grid-template-columns:minmax(0, 1fr); padding:10px 14px 0; }
  .sp2-xl-tong, .sp2-lech, .sp2-ket, #spMsg{ margin-left:14px; margin-right:14px; }
  .sp2-ghi-btn{ width:calc(100% - 28px); margin:12px 14px 0; }
}

/* ───────── Màu SePay — giao diện Siêu anh hùng ───────── */
html.gd-sieu-anh-hung .sp2-n{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; box-shadow:0 10px 20px -18px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .sp2-n:hover{ border-color:rgba(125,35,20,.3); box-shadow:0 12px 22px -16px rgba(90,25,10,.75); }
html.gd-sieu-anh-hung .sp2-n i{ color:#4a372d; }
html.gd-sieu-anh-hung .sp2-n.active{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019); border-color:#c98a12; color:#2a1606; }
html.gd-sieu-anh-hung .sp2-n.active i{ color:#2a1606; }
html.gd-sieu-anh-hung .sp2-ngay{ background:#fff; border:1px solid rgba(125,35,20,.16); color:#2a1810; box-shadow:0 10px 20px -18px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .sp2-ngay > i{ color:#4a372d; font-size:17px; }
html.gd-sieu-anh-hung #appShell#appShell .sp2-ngay .form-control{ color:#2a1810 !important; }
html.gd-sieu-anh-hung .sp2-bao{ background:#eef5ff; border:1px solid #c8dbf6; color:#17469a; }
html.gd-sieu-anh-hung .sp2-bao > i{ color:#1d63d8; }
html.gd-sieu-anh-hung .sp2-tom-tat{ color:#6b5a50; }
html.gd-sieu-anh-hung .sp2-tom-tat b{ color:#2a1810; }
html.gd-sieu-anh-hung .sp2-xong{ background:#e3f6ea; border:1px solid #bfe6cd; color:#145c33; }
html.gd-sieu-anh-hung .sp2-xong i{ color:#1e8a4c; }

html.gd-sieu-anh-hung .sp2-gd{ background:#fff; border:1.5px solid rgba(125,35,20,.12); box-shadow:0 14px 28px -26px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .sp2-gd:hover{ border-color:rgba(214,160,40,.55); }
html.gd-sieu-anh-hung .sp2-gd.chon{ border:2px solid #f2b632; background:linear-gradient(135deg, #fffaf0, #fff 55%); box-shadow:0 0 0 3px rgba(242,182,50,.2), 0 16px 30px -24px rgba(150,90,0,.8); }
html.gd-sieu-anh-hung .sp2-gd-ic{ border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(0,0,0,.06), 0 8px 14px -8px rgba(0,0,0,.45); }
html.gd-sieu-anh-hung .sp2-gd-ic.cam{ background:radial-gradient(circle at 35% 30%, #ffad5c, #ec6a0c 70%); }
html.gd-sieu-anh-hung .sp2-gd-ic.lam{ background:radial-gradient(circle at 35% 30%, #6fa8ff, #1d63d8 70%); }
html.gd-sieu-anh-hung .sp2-gd-ic.xanh, html.gd-sieu-anh-hung .sp2-gd-ic.ok{ background:radial-gradient(circle at 35% 30%, #5fd896, #179253 70%); }
html.gd-sieu-anh-hung .sp2-gd-ic.xam{ background:radial-gradient(circle at 35% 30%, #c3c8cf, #7d848d 70%); }
html.gd-sieu-anh-hung .sp2-gd-ma{ color:#6b5a50; }
html.gd-sieu-anh-hung .sp2-gd-ma b{ color:#21160f; }
html.gd-sieu-anh-hung .sp2-gd-so{ color:#178a45; }
html.gd-sieu-anh-hung .sp2-gd.xam .sp2-gd-so{ color:#6b6f75; }
html.gd-sieu-anh-hung .sp2-gd-tt dt{ color:#6b5a50; }
html.gd-sieu-anh-hung .sp2-gd-tt dd{ color:#21160f; }
html.gd-sieu-anh-hung .sp2-mo{ color:#a3958c; }
html.gd-sieu-anh-hung .sp2-chip.canh{ background:#ffe6df; color:#d1400a; border:1px solid #fbc9b9; }
html.gd-sieu-anh-hung .sp2-chip.tot{ background:#e3f6ea; color:#1e7a46; border:1px solid #bfe6cd; }
html.gd-sieu-anh-hung .sp2-chip.xam{ background:#f2efec; color:#5b4f47; border:1px solid #e2dcd6; }
html.gd-sieu-anh-hung .sp2-chi-tiet{ color:#8a5a3c; }
html.gd-sieu-anh-hung .sp2-nut-ghi{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019); border:1px solid #c98a12; color:#2a1606; box-shadow:0 10px 18px -12px rgba(150,90,0,.9); }
html.gd-sieu-anh-hung .sp2-nut-bo{ background:#fff; border:1px solid rgba(125,35,20,.18); color:#2a1810; }
html.gd-sieu-anh-hung .sp2-nut-bo i{ color:#d81a32; }
html.gd-sieu-anh-hung .sp2-nut-bo:hover{ border-color:#f4c8cd; background:#fff7f7; }
html.gd-sieu-anh-hung .sp2-trong{ background:#fff; border:1px dashed rgba(125,35,20,.2); color:#6b5a50; }
html.gd-sieu-anh-hung .sp2-trong i{ color:#1e8a4c; }
html.gd-sieu-anh-hung .sp2-chan{ color:#7a6a60; }
html.gd-sieu-anh-hung .sp2-link{ color:#1d4fbf; }

html.gd-sieu-anh-hung .sp2-xl{ background:#fff; border:1px solid rgba(214,160,40,.45); box-shadow:0 18px 34px -28px rgba(120,60,0,.8); }
html.gd-sieu-anh-hung .sp2-xl-dau{ background:linear-gradient(180deg, #fff6e0, #fffaf0); border-bottom:1px solid rgba(214,160,40,.35); color:#1b120c; }
html.gd-sieu-anh-hung .sp2-xl-dau small{ color:#7a6a60; }
html.gd-sieu-anh-hung .sp2-nhan{ color:#3b2a20; }
html.gd-sieu-anh-hung .sp2-goc{ background:#f5f3f0; color:#178a45; }
html.gd-sieu-anh-hung .sp2-o > i{ color:#7a6a60; }
html.gd-sieu-anh-hung .sp2-hs-msg.ok{ color:#1e7a46; } html.gd-sieu-anh-hung .sp2-hs-msg.loi{ color:#c2410c; }
html.gd-sieu-anh-hung .sp2-goi-y{ color:#a3958c; }
html.gd-sieu-anh-hung .sp2-khoan:has(.thp-k-bang){ border:1px solid rgba(125,35,20,.12); }
html.gd-sieu-anh-hung .sp2-khoan .thp-da-dong{ color:#1e7a46; padding:0 8px 6px; }
html.gd-sieu-anh-hung .sp2-xl-tong{ background:#fffaf0; border:1px solid #f1e2b8; }
html.gd-sieu-anh-hung .sp2-xl-tong span{ color:#2a1810; }
html.gd-sieu-anh-hung .sp2-xl-tong b{ color:#c8102e; }
html.gd-sieu-anh-hung .sp2-xl-tong b.khop{ color:#178a45; }
html.gd-sieu-anh-hung .sp2-lech.khop{ color:#1e7a46; } html.gd-sieu-anh-hung .sp2-lech.lech{ color:#c2410c; }
html.gd-sieu-anh-hung .sp2-ghi-btn{ background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019) !important; border:1px solid #c98a12 !important; color:#2a1606 !important; box-shadow:0 12px 22px -14px rgba(150,90,0,.9); }
html.gd-sieu-anh-hung .sp2-ket.ok, html.gd-sieu-anh-hung .sp2-ket.xanh{ background:#e3f6ea; color:#145c33; }
html.gd-sieu-anh-hung .sp2-ket.xam{ background:#f2efec; color:#4a3f38; }
html.gd-sieu-anh-hung .sp2-ket.cam, html.gd-sieu-anh-hung .sp2-ket.lam{ background:#fff1e8; color:#9a3a08; }
html.gd-sieu-anh-hung .sp2-xl-trong{ color:#6b5a50; }
html.gd-sieu-anh-hung .sp2-xl-trong i{ color:#d0a24a; }
html.gd-sieu-anh-hung .sp2-xl-trong b{ color:#2a1810; font-size:17px; }
html.gd-sieu-anh-hung .sp2-bo-hop{ background:#fff; border:1px solid rgba(125,35,20,.14); box-shadow:0 14px 28px -26px rgba(90,25,10,.8); }
html.gd-sieu-anh-hung .sp2-bo-dau{ background:#fbf6f2; border-bottom:1px solid rgba(125,35,20,.1); color:#b3101f; }
html.gd-sieu-anh-hung .sp2-bo-btn{ background:#fff !important; border:1px solid rgba(125,35,20,.25) !important; color:#2a1810 !important; }
html.gd-sieu-anh-hung .sp2-bo-btn:hover{ background:#fff5f5 !important; border-color:#d81a32 !important; color:#b3101f !important; }

/* ===== Khoản thanh toán kiểu Ô THÁNG như trang học sinh (thầy chốt 04/10/2026) — js/app.js taoBoChonKhoanThu kieu:'o'
   (Thu học phí, popup Thu học phí ở Kế toán / Học sinh, Giao dịch SePay). Ô tháng / dòng Sách dùng chung .hs-hp-* (css/hoc-phi-hs.css). */
.kt-o{ --hs-em:cubic-bezier(.16,1,.3,1); --hs-nay:cubic-bezier(.34,1.56,.64,1); padding:12px; color:#2d211a; }
.kt-o .hs-hp-thang{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.kt-o .hs-hp-o-thang b{ font-size:14px; }
.kt-o .hs-hp-o-thang strong{ font-size:15px; }
.kt-o .hs-hp-o-thang small{ font-size:11.5px; }
.kt-o .hs-hp-o-thang .hs-hp-chip{ margin:5px 0 0; font-size:11.5px; }
.kt-o .hs-hp-o-thang.da{ cursor:default; }
.kt-o .hs-hp-dau{ width:24px; height:24px; font-size:12px; }
.kt-o .hs-hp-o-thang.da .hs-hp-dau{ width:30px; height:30px; font-size:13px; }
.kt-o .hs-hp-chip.kt-o-no{ display:flex; width:max-content; background:#ffe5e5; color:#9b0d22; border-color:#f5c0c0; }
.kt-o .kt-o-chua{ font-size:12px; font-weight:600; color:#9a8572; }
.kt-o .hs-hp-nho{ font-size:15px; }
.kt-o .hs-hp-dong-sach b, .kt-o .hs-hp-dong-sach strong{ font-size:14px; }
.kt-o .hs-hp-dong-sach.da{ background:#f3fbf5; border-color:#cfe9d6; opacity:1; }
.kt-o .hs-hp-dong-sach.da strong{ color:#1b6b3e; }
.kt-o-ds{ margin-top:12px; border:1px solid #ecdfca; border-radius:12px; background:#fffdf8; padding:2px 12px; }
.kt-o-dong{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; font-size:14px; border-bottom:1px dashed #e2cfb0; }
.kt-o-ds > .kt-o-dong:last-of-type, .kt-o-ds > .kt-luu-msg:last-child{ border-bottom:0; }
.kt-o-ten{ min-width:0; font-weight:600; }
.kt-o-ten small{ font-weight:400; color:#8a6f58; }
.kt-o-tien{ flex:none; display:flex; align-items:center; gap:6px; }
.kt-o-tien .kt-tien{ width:130px; }
.kt-o-ds .kt-luu-msg:empty{ display:none; }
/* Mỗi khoản đã chọn = 1 khối (dòng số tiền + khối "Đóng một phần") */
.kt-o-muc{ padding:2px 0 8px; border-bottom:1px dashed #e2cfb0; }
.kt-o-muc:last-child{ border-bottom:0; padding-bottom:4px; }
.kt-o-muc > .kt-o-dong{ border-bottom:0; padding-bottom:3px; }
/* Đóng MỘT PHẦN — phụ huynh xin chia nhỏ: tick → số đóng đợt này + lý do, Admin duyệt */
.kt-mp{ display:flex; flex-direction:column; gap:6px; margin:0 0 2px; font-size:13px; }
.kt-mp-tick{ display:inline-flex; align-items:center; gap:8px; width:max-content; max-width:100%; margin:0; cursor:pointer; font-weight:700; color:#7a4a05; }
.kt-mp-tick small{ font-weight:500; color:#8a6f58; }
.kt-mp-tick input:disabled + span{ opacity:.55; }
.kt-mp.on{ padding:8px 10px; border:1px solid #f2d67c; border-radius:10px; background:#fff7e0; }
.kt-mp-ct{ display:flex; flex-direction:column; gap:6px; }
.kt-mp-so{ color:#5c3b1a; }
.kt-mp-so b{ color:#a50d1f; }
.kt-mp-lydo{ border-color:#e5c26a; }
.kt-mp-luu-y, .kt-mp-goiy{ display:block; font-size:12px; line-height:1.4; color:#7a5636; }
.kt-mp-goiy{ padding:6px 9px; border:1px solid #f5c0c0; border-radius:8px; background:#fff1f1; color:#9b0d22; }
.kt-mp-goiy[hidden]{ display:none; }
.kt-mp-luu-y i, .kt-mp-goiy i{ margin-right:4px; }
.kt-mp-tt{ display:block; font-size:12px; font-weight:600; color:#7a5636; }
.kt-mp-tt.cho_duyet{ color:#9a5a00; } .kt-mp-tt.da_duyet{ color:#1b6b3e; } .kt-mp-tt.tu_choi{ color:#9b0d22; }
.kt2-phu.kt2-mot-phan{ color:#8a5a00; font-weight:600; }
.kt-o .hs-hp-chip.kt-o-mp{ display:flex; width:max-content; background:#fff1d0; color:#8a5a00; border-color:#f2d67c; }
.hs-hp-dong-sach .kt-coc-chip.kt-o-mp{ background:#fff1d0; color:#8a5a00; border-color:#f2d67c; }
.kt-o-trong{ display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 12px; border:1px solid #f0d9a8; border-radius:10px; background:#fff8e6; font-size:13px; color:#7a5636; }
.kt-o-trong i{ color:#d99a1a; }
.kt-o .hs-hp-tong span{ font-size:15px; }
.kt-o .hs-hp-tong small{ font-weight:500; opacity:.85; }
/* Giao dịch SePay: khung phải hẹp — tổng tiền + nút lưu mức đã có ở khung ngoài */
.sp2-khoan .kt-o{ padding:0; }
.sp2-khoan .kt-o .hs-hp-tong{ display:none; }
.sp2-khoan .kt-o .hs-hp-thang{ grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); }
.sp2-khoan .kt-o-tien .kt-tien{ width:112px; }
#payKhoanBox .kt-o{ padding:2px; }

@media (prefers-reduced-motion:reduce){
  .kt2-hop, .sp2-gd, .sp2-xong, .sp2-bo-hop.nhan{ animation:none !important; }
  .kt2-thu, .kt2-ic-nut, .sp2-n, .sp2-gd, .sp2-nut-ghi, .sp2-nut-bo{ transition:none !important; }
}

/* =====================================================================================
 * LÀM ĐẸP KHUNG NHÂN VIÊN NHƯ TRANG HỌC SINH — thầy duyệt 6 ý ngày 04/10/2026:
 *  ① "Sở chỉ huy" đầu trang Tổng quan (banner ảnh thầy + lời chào + vòng % học phí + thẻ số đè mép), Việc cần xử lý ngay, Lịch 7 ngày
 *  ② tông đỏ–vàng–kem (nền chấm bi nhẹ, chỉ đỏ–vàng đầu thẻ)   ③ ô biểu tượng → huy hiệu siêu anh hùng viền mực (như hs-sieu-anh-hung.css)
 *  ④ băng tiêu đề mọi tab: chữ nghiêng đậm hoa + vân chấm bi + huy hiệu mờ của nhóm   ⑤ chuyển động (js/nv-dep.js đếm số)
 *  ⑥ bảng: đầu đỏ rượu chữ vàng, trạng thái thành viên màu (.mv-tt — app.js lamVienTrangThai_)
 * Nạp SAU mọi file css nhân viên. Chỉ áp ở giao diện siêu anh hùng (html.gd-sieu-anh-hung) trong #appShell.
 * ===================================================================================== */
@property --nv-pt { syntax:'<percentage>'; inherits:false; initial-value:0%; }
html.gd-sieu-anh-hung #appShell{
  --huy-giap:linear-gradient(135deg,#e23636 0 50%,#f0b429 50% 100%);
  --huy-gang:linear-gradient(135deg,#ffe58a,#f0b429 42%,#a86d00);
  --huy-khien:radial-gradient(circle,#1f5fbf 0 34%,#c8102e 35% 50%,#f3f3f3 51% 66%,#c8102e 67%);
  --huy-sam:radial-gradient(circle at 30% 25%,#c9ecff,#2b6ce0 45%,#102a6b);
  --huy-gamma:radial-gradient(circle at 30% 25%,#a6f08f,#2e8b3e 55%,#1d4a24);
  --huy-vibranium:radial-gradient(circle at 30% 25%,#b7a8e8,#3b2f63 50%,#0e0a14);
  --huy-phep:repeating-conic-gradient(#ffb02e 0 10deg,#e2640f 10deg 20deg);
  --huy-bua:linear-gradient(135deg,#f4f6f8 0%,#aeb6bf 38%,#6d7782 62%,#c9d0d6 100%);
  --nv-muc:#15110f;
}

/* ═════════════ ② NỀN KEM CHẤM BI + CHỈ ĐỎ–VÀNG ĐẦU THẺ ═════════════ */
html.gd-sieu-anh-hung body.nv-khung{
  background-image:
    radial-gradient(circle, rgba(161,13,28,.055) 1px, transparent 1.6px),
    radial-gradient(900px 520px at 100% 0%, rgba(216,26,50,.08), transparent 60%),
    radial-gradient(700px 480px at 0% 100%, rgba(247,197,68,.12), transparent 60%);
  background-size:14px 14px, auto, auto;
}
/* Thẻ trong các tab nhóm Tổng quan: chỉ đỏ–vàng mảnh ở mép trên (không chạm góc bo) */
html.gd-sieu-anh-hung #appShell .mv :is(.tq2-khung, .db2-khung, .hn2-khung, .kh3-the)::before{
  content:''; position:absolute; left:22px; right:22px; top:-1px; height:3px; border-radius:0 0 4px 4px; pointer-events:none;
  background:linear-gradient(90deg, #a50d1f, #e8452c 45%, #f6b52a);
}
html.gd-sieu-anh-hung #appShell .mv :is(.tq2-khung, .db2-khung, .hn2-khung, .kh3-the){ position:relative; }

/* ═════════════ ③ HUY HIỆU SIÊU ANH HÙNG (viền mực + bóng lệch như trang học sinh) ═════════════ */
html.gd-sieu-anh-hung #appShell :is(.tq2-the-huy, .nvs-the-huy, .db2-the-huy, .hn2-the-huy, .kq3-o-huy, .tq-viec-icon, .tq2-huy, .hn2-huy, .kh3-huy, .kh3-vai-huy, .bd2-huy, .hs2-thieu-huy, .mv .stat-card > .stat-icon){
  border:2px solid #fff !important; border-radius:50% !important; color:#fff !important;
  box-shadow:0 0 0 2px var(--nv-muc), 2px 3px 0 2px var(--nv-muc) !important;
  text-shadow:0 1px 0 var(--nv-muc), 0 0 5px rgba(0,0,0,.6);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
/* đỏ → giáp đỏ–vàng */
html.gd-sieu-anh-hung #appShell :is(.nvs-the.do .nvs-the-huy, .tq2-the-do .tq2-the-huy, .db2-the-do .db2-the-huy, .hn2-the.do .hn2-the-huy, .kq3-o.do .kq3-o-huy,
  .mv .tone-do .stat-icon, .tq-viec-icon.do, .tq2-huy.huy-do, .hn2-huy.do, .kh3-huy.do, .kh3-vai-huy, .bd2-huy, .hs2-thieu-huy){ background:var(--huy-giap) !important; }
/* vàng → găng vàng */
html.gd-sieu-anh-hung #appShell :is(.nvs-the.vang .nvs-the-huy, .tq2-the-vang .tq2-the-huy, .db2-the-vang .db2-the-huy, .hn2-the.vang .hn2-the-huy, .kq3-o.vang .kq3-o-huy,
  .mv .tone-vang .stat-icon, .tq-viec-icon.vang, .tq2-huy.huy-vang, .hn2-huy.vang){ background:var(--huy-gang) !important; color:#7a0610 !important; text-shadow:0 0 5px #fff, 0 0 2px #fff; }
/* xanh lá → gamma */
html.gd-sieu-anh-hung #appShell :is(.nvs-the.xanh .nvs-the-huy, .db2-the-xanh .db2-the-huy, .db2-the-xanh2 .db2-the-huy, .kq3-o.xanh .kq3-o-huy, .mv .tone-la .stat-icon, .tq-viec-icon.xanh){ background:var(--huy-gamma) !important; }
/* xanh dương → khiên tròn */
html.gd-sieu-anh-hung #appShell :is(.nvs-the.lam .nvs-the-huy, .tq2-the-lam .tq2-the-huy, .db2-the-lam .db2-the-huy, .hn2-the.lam .hn2-the-huy, .mv .tone-xanh .stat-icon, .tq-viec-icon.lam, .kh3-huy.xanh-dam){ background:var(--huy-khien) !important; }
/* tím → vibranium; hồng / kiểm tra → phép thuật cam */
html.gd-sieu-anh-hung #appShell :is(.nvs-the.tim .nvs-the-huy, .db2-the-tim .db2-the-huy, .tq-viec-icon.tim){ background:var(--huy-vibranium) !important; color:#e9dcff !important; }
html.gd-sieu-anh-hung #appShell :is(.tq2-the-hong .tq2-the-huy, .kh3-vai-huy.kiem_tra, .tq-viec-icon.cam){ background:var(--huy-phep) !important; }
/* rê chuột vào thẻ: huy hiệu nghiêng nảy */
@media (hover:hover){
  html.gd-sieu-anh-hung #appShell :is(.tq2-the, button.nvs-the, .db2-the, .hn2-the, .kq3-o, .tq-viec, .stat-card):hover :is(.tq2-the-huy, .nvs-the-huy, .db2-the-huy, .hn2-the-huy, .kq3-o-huy, .tq-viec-icon, .stat-icon){
    transform:rotate(-12deg) scale(1.1) !important;
  }
}
/* huy hiệu ở menu con + băng tiêu đề: viền mực như trang học sinh */
html.gd-sieu-anh-hung #appShell .mv-bang .mv-logo{ box-shadow:0 0 0 2.5px var(--nv-muc), 3px 4px 0 2.5px var(--nv-muc), 0 0 0 7px rgba(247,197,68,.35) !important; }
html.gd-sieu-anh-hung .menu-con-nut .tab-huy{ box-shadow:0 0 0 1.5px var(--nv-muc), 2px 2px 0 1.5px var(--nv-muc) !important; }
html.gd-sieu-anh-hung .menu-con-nut.active .tab-huy{ transform:rotate(-10deg) scale(1.1); box-shadow:0 0 0 1.5px var(--nv-muc), 2px 2px 0 1.5px var(--nv-muc), 0 0 12px #ffd24d !important; }

/* ═════════════ ④ BĂNG TIÊU ĐỀ MỌI TAB ═════════════ */
html.gd-sieu-anh-hung #appShell#appShell#appShell .mv.tab-pane > .mv-bang{
  isolation:isolate;
  background:
    linear-gradient(100deg, #fff 0%, #fff 42%, rgba(255,250,242,.72) 70%, rgba(255,246,234,.35) 100%),
    radial-gradient(circle, rgba(200,16,46,.20) 1.3px, transparent 1.8px) 0 0 / 11px 11px,
    repeating-linear-gradient(118deg, transparent 0 26px, rgba(247,197,68,.16) 26px 29px),
    linear-gradient(180deg, #fff, #fff4e6) !important;
}
/* huy hiệu mờ cỡ lớn của nhóm ở góc phải băng (nằm dưới chữ / nút nhờ isolation) */
html.gd-sieu-anh-hung #appShell .mv.tab-pane[data-nhom] > .mv-bang::before{
  content:'\f005'; position:absolute; z-index:-1; right:clamp(20px, 6%, 90px); top:50%; transform:translateY(-50%) rotate(-12deg);
  font:900 86px/1 'Font Awesome 6 Free'; color:rgba(200,16,46,.075); pointer-events:none;
  animation:nvHuyMo 1s cubic-bezier(.22,1,.36,1) both;
}
html.gd-sieu-anh-hung #appShell .mv.tab-pane[data-nhom="hocsinh"] > .mv-bang::before{ content:'\f717'; }
html.gd-sieu-anh-hung #appShell .mv.tab-pane[data-nhom="diemdanh"] > .mv-bang::before{ content:'\f0e7'; }
html.gd-sieu-anh-hung #appShell .mv.tab-pane[data-nhom="hocphi"] > .mv-bang::before{ content:'\f3a5'; }
html.gd-sieu-anh-hung #appShell .mv.tab-pane[data-nhom="trogiang"] > .mv-bang::before{ content:'\f505'; }
html.gd-sieu-anh-hung #appShell .mv.tab-pane[data-nhom="dethi"] > .mv-bang::before{ content:'\f6de'; }
html.gd-sieu-anh-hung #appShell .mv.tab-pane[data-nhom="caidat"] > .mv-bang::before{ content:'\f013'; }
@keyframes nvHuyMo{ from{ opacity:0; transform:translateY(-50%) rotate(-40deg) scale(.6); } }
/* tiêu đề: chữ hoa nghiêng đậm đỏ rượu (cùng kiểu chữ "TẬP ĐOÀN TOÁN THẦY HẠNH" trên thanh đầu) */
html.gd-sieu-anh-hung #appShell#appShell#appShell .mv-bang .mv-tieu-de{
  font-family:'Montserrat','Be Vietnam Pro', system-ui, sans-serif !important; font-style:italic !important; font-weight:900 !important;
  text-transform:uppercase !important; letter-spacing:-.01em !important;
  /* chữ tô gradient chỉ hiện trong khung chữ → chừa chỗ trên/dưới cho dấu (Ể, Ỏ ở trên; Ọ, Ợ ở dưới) khỏi bị cắt, margin âm giữ nguyên bố cục */
  padding:.24em .12em .2em 0 !important; margin:-.24em 0 -.2em !important;
  background:linear-gradient(180deg, #c8102e 0%, #8e0a17 70%, #5a060e 100%); -webkit-background-clip:text; background-clip:text;
  color:transparent !important; -webkit-text-fill-color:transparent;
  filter:drop-shadow(1.5px 1.5px 0 rgba(247,197,68,.55));
}
html.gd-sieu-anh-hung #appShell#appShell .mv.tab-pane > .mv-bang::after{ width:120px; height:4px; background:linear-gradient(90deg, #8e0a17, #e8452c 50%, #f6b52a); }
html.gd-sieu-anh-hung #appShell .mv.tab-pane.nv-vao > .mv-bang::after{ animation:nvKeVach .8s cubic-bezier(.22,1,.36,1) .15s both; transform-origin:left; }
@keyframes nvKeVach{ from{ transform:scaleX(0); } }

/* ═════════════ ① SỞ CHỈ HUY (trang Tổng quan) ═════════════ */
html.gd-sieu-anh-hung #appShell #pane-dashboard.mv > .mv-bang{ display:none; }   /* banner thay tiêu đề trơn */
.tq-hero{ display:none; }
html.gd-sieu-anh-hung #appShell .tq-hero{
  position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(220px, 34%);
  align-items:center; gap:18px 24px; min-height:262px; margin:0 -22px; padding:30px 32px 76px; border-radius:24px 24px 0 0; color:#fff;
  background:
    radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.6px) 0 0 / 10px 10px,
    radial-gradient(ellipse 60% 90% at 12% 0%, rgba(255,128,64,.35), transparent 60%),
    linear-gradient(115deg, #3d0207 0%, #7a0812 42%, #a10d1c 68%, #5a060e 100%);
  box-shadow:inset 0 -1px 0 rgba(255,210,77,.4);
}
html.gd-sieu-anh-hung #appShell .tq-hero::before{   /* vệt tốc độ vàng */
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(118deg, transparent 0 34px, rgba(255,210,77,.07) 34px 37px);
}
html.gd-sieu-anh-hung #appShell .tq-hero::after{   /* ánh kim lướt qua */
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,246,208,.14) 48%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform:translate3d(-100%,0,0); animation:nvQuet 9s cubic-bezier(.16,1,.3,1) 1.5s infinite;
}
@keyframes nvQuet{ 0%{ transform:translate3d(-100%,0,0); } 28%,100%{ transform:translate3d(100%,0,0); } }
.tq-hero-anh{
  /* chỉ lấy phần ảnh thầy + biểu tượng toán (bên phải banner trang chủ HS), chữ của banner nằm ngoài khung */
  position:absolute; z-index:-1; right:0; top:0; bottom:0; width:42%;
  background:url('../anh/banner-trang-chu.webp') 100% 30% / auto 112% no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 42%); mask-image:linear-gradient(90deg, transparent 0%, #000 42%);
  animation:nvAnhVao 1.2s cubic-bezier(.16,1,.3,1) .1s both;
}
@keyframes nvAnhVao{ from{ opacity:0; transform:translateX(40px) scale(1.04); } }
.tq-hero-chu{ min-width:0; animation:nvHienTrai .7s cubic-bezier(.22,1,.36,1) .05s both; }
.tq-hero-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#ffd24d; }
html.gd-sieu-anh-hung #appShell .tq-hero-chao{
  margin:8px 0 6px; font:italic 900 clamp(26px, 2.5vw, 36px)/1.08 'Be Vietnam Pro', system-ui, sans-serif; letter-spacing:-.01em; color:#fff;
  text-shadow:0 2px 0 rgba(60,0,8,.55), 0 8px 18px rgba(40,0,5,.45);
}
.tq-hero-chao > small{ display:block; margin-bottom:4px; font-size:.6em; font-weight:800; color:#ffe7c4; }   /* "Chào buổi …, thầy" */
.tq-hero-chao > span{
  /* chữ tô gradient (background-clip:text) chỉ hiện trong khung → chừa .25em phía trên cho dấu chồng (Ễ, Ỗ, Ẫ…) khỏi bị cắt */
  display:inline-block; font-size:.8em; text-transform:uppercase; padding:.25em .1em .2em 0; margin:-.25em 0 -.2em;
  background:linear-gradient(180deg, #fff6c8 0%, #ffd24d 55%, #f29a1a 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tq-hero-phu{ margin:0; font-size:14px; font-weight:500; color:#ffe7c4; }
.tq-hero-chip{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tq-hero-chip > span{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,225,160,.35); color:#fff3dc; backdrop-filter:blur(4px); }
.tq-hero-chip > span b{ font-weight:700; }
.tq-hero-chip > span i{ color:#ffd24d; }
.tq-hero-chip > span.can{ background:linear-gradient(115deg, #ffd24d, #f29a1a); border-color:#fff3b0; color:#5a060e; font-weight:800; animation:nvNhip 2.2s ease-out infinite; }
.tq-hero-chip > span.can i{ color:#a50d1f; }
.tq-hero-chip > span.xong{ background:rgba(47,166,90,.25); border-color:rgba(160,240,190,.5); }
.tq-hero-chip > span.xong i{ color:#9ff0b9; }
.tq-hero-chip > #tqHeroViec.can{ cursor:pointer; transition:transform .15s ease, filter .15s ease; }
.tq-hero-chip > #tqHeroViec.can:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.tq-hero-chip > #tqHeroViec:focus-visible{ outline:3px solid #fff3b0; outline-offset:2px; }
/* khung "Việc cần xử lý ngay" nháy viền sau khi bấm chip ở đầu trang */
.tq-viec-khung{ scroll-margin-top:84px; }
.tq-viec-khung.tq-nhay{ animation:tqNhayKhung 2.2s ease-out 1; }
@keyframes tqNhayKhung{ 0%,35%{ box-shadow:0 0 0 4px rgba(242,154,26,.75), 0 10px 30px rgba(165,13,31,.25); } 100%{ box-shadow:0 0 0 0 rgba(242,154,26,0); } }
@media (prefers-reduced-motion: reduce){ .tq-viec-khung.tq-nhay{ animation:none; outline:3px solid #f29a1a; } }
/* 05/11/2026: nhảy từ Tổng quan / chuông tới khung Góp ý học sinh hoặc Giao việc trong tuần ở Chỉ huy trợ giảng → khung đó nháy viền */
.tq-nhay-khung{ scroll-margin-top:84px; animation:tqNhayKhung 2.2s ease-out 1; border-radius:16px; }
@media (prefers-reduced-motion: reduce){ .tq-nhay-khung{ animation:none; outline:3px solid #f29a1a; } }
/* nút "Giao việc" ở đầu khung Việc cần xử lý ngay (chỉ Admin, khi đã bật Giao việc trong tuần) */
#appShell .tq2-giao-viec{ margin-left:auto; }
#appShell .tq2-giao-viec[hidden]{ display:none; }
@keyframes nvNhip{ 0%{ box-shadow:0 0 0 0 rgba(255,210,77,.65); } 80%,100%{ box-shadow:0 0 0 10px rgba(255,210,77,0); } }
/* Vòng % học phí */
.tq-hero-vong{ display:flex; align-items:center; gap:14px; padding:12px 18px 12px 12px; border-radius:22px; text-align:left; font:inherit; color:#fff; cursor:pointer;
  background:rgba(25,0,4,.38); border:1px solid rgba(255,220,150,.35); backdrop-filter:blur(6px);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.7); animation:nvDap .7s cubic-bezier(.34,1.56,.64,1) .25s both; transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.tq-hero-vong[hidden]{ display:none; }
.tq-hero-vong:hover{ transform:translateY(-3px) rotate(-1deg); }
@keyframes nvDap{ from{ opacity:0; transform:scale(.6) rotate(-8deg); } }
.tq-vong{ display:grid; place-items:center; flex:none; width:96px; height:96px; padding:8px; border-radius:50%;
  background:conic-gradient(#ffd24d 0, #f29a1a var(--nv-pt), rgba(255,255,255,.14) 0); animation:nvVong 1.8s cubic-bezier(.16,1,.3,1) .4s backwards; }
@keyframes nvVong{ from{ --nv-pt:0%; } }
.tq-vong > span{ display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:radial-gradient(circle at 35% 30%, #7a0812, #3d0207); box-shadow:inset 0 0 0 2px rgba(255,210,77,.25); }
html.gd-sieu-anh-hung #appShell .tq-vong b{ font:italic 900 28px/1 'Be Vietnam Pro', sans-serif; color:#ffd24d; letter-spacing:-.04em; }
.tq-vong b small{ font-size:13px; margin-left:1px; }
.tq-vong-chu{ display:flex; flex-direction:column; }
.tq-vong-chu small{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#ffd24d; }
.tq-vong-chu b{ font:italic 900 26px/1.15 'Be Vietnam Pro', sans-serif; color:#fff; }
.tq-vong-chu em{ font-size:12px; font-style:normal; color:#ffe7c4; }
/* 4 thẻ số đè lên mép dưới banner — kiểu ô số truyện tranh */
html.gd-sieu-anh-hung #appShell #tongQuan > .tq2-the-luoi{ position:relative; z-index:3; margin:-52px 10px 18px; }
html.gd-sieu-anh-hung #appShell #tongQuan .tq2-the{
  background:linear-gradient(165deg, #fffefb, #fff6e6) !important; border:2px solid var(--nv-muc) !important;
  box-shadow:5px 5px 0 #c0121f, 0 18px 30px -18px rgba(60,0,8,.55) !important;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s !important;
}
html.gd-sieu-anh-hung #appShell #tongQuan .tq2-the:nth-child(2){ box-shadow:5px 5px 0 #f29a1a, 0 18px 30px -18px rgba(60,0,8,.55) !important; }
html.gd-sieu-anh-hung #appShell #tongQuan .tq2-the:nth-child(3){ box-shadow:5px 5px 0 #8e0a17, 0 18px 30px -18px rgba(60,0,8,.55) !important; }
html.gd-sieu-anh-hung #appShell #tongQuan .tq2-the:nth-child(4){ box-shadow:5px 5px 0 #f6b52a, 0 18px 30px -18px rgba(60,0,8,.55) !important; }
html.gd-sieu-anh-hung #appShell #tongQuan .tq2-the:hover{ transform:translate(-2px,-4px) !important; }
html.gd-sieu-anh-hung #appShell #tongQuan .tq2-the-so{ font-style:italic; font-weight:900 !important; color:#8e0a17 !important; }
html.gd-sieu-anh-hung #appShell #tongQuan .tq2-the-so.canh-bao{ color:#d81a32 !important; }

/* Việc cần xử lý ngay */
.tq-viec-luoi{ display:grid; grid-template-columns:repeat(auto-fill, minmax(255px, 1fr)); gap:12px; }
.tq-viec{ position:relative; display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; text-align:left; font:inherit; color:#2b1d16; cursor:pointer;
  border:1px solid #ecdcc4; border-radius:16px; background:#fff; box-shadow:0 2px 6px rgba(78,48,20,.07);
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .3s;
  animation:nvLen .55s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i, 0) * 45ms); }
.tq-viec.can{ border-color:#f2c4c4; background:linear-gradient(165deg, #fff, #fff3f1); }
.tq-viec.xong{ background:#fffdf9; }
.tq-viec.xong .tq-viec-chu b{ color:#6b5a50; }
@media (hover:hover){ .tq-viec:hover{ transform:translateY(-4px); border-color:#e8c27a; box-shadow:0 16px 28px -14px rgba(108,61,25,.35); } }
.tq-viec:active{ transform:scale(.98); transition-duration:.1s; }
.tq-viec-icon{ position:relative; flex:none; display:grid; place-items:center; width:42px; height:42px; font-size:16px; }
.tq-cham{ position:absolute; top:-5px; right:-5px; width:12px; height:12px; border-radius:50%; background:#e3242b; border:2px solid #fff; animation:nvChamDo 1.6s ease-out infinite; }
@keyframes nvChamDo{ 0%{ box-shadow:0 0 0 0 rgba(227,36,43,.65); } 80%,100%{ box-shadow:0 0 0 8px rgba(227,36,43,0); } }
.tq-viec-chu{ flex:1; min-width:0; }
.tq-viec-chu b{ display:block; font-size:14px; font-weight:800; line-height:1.3; }
.tq-viec.can .tq-viec-chu b{ color:#a50d1f; }
.tq-viec-chu em{ display:block; margin-top:2px; font-size:12px; font-style:normal; color:#7a6350; line-height:1.35; }
.tq-viec-so{ flex:none; min-width:40px; padding:4px 10px; border-radius:999px; text-align:center; font:italic 900 18px/1.2 'Be Vietnam Pro', sans-serif; }
.tq-viec-so.do{ background:#ffe1e3; color:#c8102e; } .tq-viec-so.vang{ background:#ffefc4; color:#9a5a00; } .tq-viec-so.lam{ background:#e1ecff; color:#1d4fa8; }
.tq-viec.xong .tq-viec-so{ background:#e3f6e8; color:#1f9a4d; font-size:13px; }
.tq-viec-khung .tq-loi-dd{ margin-top:12px; }
/* Khoản thu kế toán đã xoá (app.js veXoaThuTq_) */
#appShell .tq-loi-dd.tq-xt{ margin-left:0 !important; padding:12px 14px; border-radius:14px; background:#fff8f6; border:1px solid #f5d0d3; max-height:420px; overflow-y:auto; scrollbar-width:thin; }
.tq-xt-dau{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.tq-xt-dau b{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:#b3101f; }
.tq-xt-dong{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid #f1c9cd; border-left:4px solid #c8102e; }
.tq-xt-dong.da-xem{ border-color:rgba(125,35,20,.12); border-left-color:#d9cfc6; background:#fbf8f4; }
.tq-xt-chu{ display:flex; flex-direction:column; gap:3px; min-width:0; font-size:13px; color:#2a1810; }
.tq-xt-chu small{ font-size:12px; color:#7a6a60; }
.tq-xt-chu small i{ font-size:10.5px; margin-right:3px; }
.tq-xt-tien{ color:#c8102e; }
.tq-xt-ly-do{ display:inline-flex; align-items:baseline; gap:6px; font-weight:700; color:#8e0a17; overflow-wrap:anywhere; }
.tq-xt-ly-do i{ font-size:11px; color:#e39b16; }
.tq-xt-dong.da-xem .tq-xt-ly-do{ color:#6f625a; }
#appShell .tq-xt-nut{ flex:none; padding:6px 12px; border-radius:10px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; white-space:nowrap;
  background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019); border:1px solid #c98a12; color:#2a1606; }
#appShell .tq-xt-nut:disabled{ opacity:.6; cursor:wait; }
.tq-xt-xong{ flex:none; font-size:12px; font-weight:700; color:#1f9a4d; white-space:nowrap; }
@media (max-width:575.98px){ .tq-xt-dong{ flex-direction:column; } }
/* Học phí đóng một phần chờ Admin duyệt (app.js veTraDanTq_) */
#appShell .tq-loi-dd.tq-xt.tq-td{ background:#fffbf1; border-color:#f0dca6; }
.tq-td .tq-xt-dau b{ color:#8a5a00; }
.tq-td-dong{ border-left-color:#e3a21a; }
.tq-td-dong.da-xem{ border-left-color:#d9cfc6; }
.tq-td-nut{ flex:none; display:flex; flex-direction:column; gap:6px; }
#appShell .tq-xt-nut.tq-td-khong{ background:#fff; border:1px solid #d9a0a6; color:#9b0d22; }
.tq-td-tu-choi{ flex:none; font-size:12px; font-weight:700; color:#9b0d22; white-space:nowrap; }
.tq-td-du{ color:#1b6b3e; font-weight:700; }
@media (max-width:575.98px){ .tq-td-nut{ flex-direction:row; } }

/* Lịch 7 ngày tới */
.tq-lich-luoi{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; }
.tq-ngay{ display:flex; flex-direction:column; gap:6px; min-width:0; min-height:170px; padding:8px; border:1px solid #ecdfca; border-radius:14px; background:#fffdf9;
  animation:nvLen .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i, 0) * 40ms); }
.tq-ngay.hom-nay{ border-color:#e3a5ad; background:linear-gradient(180deg, #fff1f1, #fffdf9 60%); box-shadow:0 0 0 2px rgba(200,16,46,.12); }
.tq-ngay.trong{ background:repeating-linear-gradient(135deg, #fffdf9 0 8px, #fbf3e8 8px 16px); }
.tq-ngay-dau{ display:flex; flex-direction:column; gap:1px; padding:0 2px 5px; border-bottom:1px dashed #ecdcc4; }
@media (min-width:1200px){ html.gd-sieu-anh-hung #appShell #tongQuan .tq2-hang-2{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.6fr); } }
.tq-ngay-dau b{ font-size:12.5px; font-weight:900; font-style:italic; text-transform:uppercase; color:#8e0a17; white-space:nowrap; }
.tq-ngay-dau small{ font-size:11px; font-weight:600; color:#9a8576; }
.tq-ngay-ca{ display:block; width:100%; min-width:0; padding:6px 8px; text-align:left; font:inherit; color:#2b1d16; border:1px solid #f3dfae; border-radius:10px; background:#fff7e3; }
button.tq-ngay-ca{ cursor:pointer; color:#fff; border-color:transparent; background:linear-gradient(120deg, #8e0a17, #d0222b); box-shadow:0 3px 0 #5a060e;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
button.tq-ngay-ca:hover{ transform:translateY(-2px); box-shadow:0 5px 0 #5a060e; }
.tq-ngay-ca > *{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tq-ngay-ca > b{ white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
.tq-ngay-gio{ font-size:11px; font-weight:800; color:#a50d1f; }
button.tq-ngay-ca .tq-ngay-gio{ color:#ffd24d; }
.tq-ngay-ca b{ font-size:12.5px; font-weight:800; }
.tq-ngay-ca small{ font-size:10.5px; color:#7a6a60; }
button.tq-ngay-ca small{ color:#ffe1d0; }
.tq-ngay-nghi{ margin:auto; font-size:11px; font-weight:600; color:#b8a594; }

/* ═════════════ ⑤ CHUYỂN ĐỘNG ═════════════ */
/* Bộ chuyển động chung js/chuyen-dong.js (trang học sinh + nhân viên):
   số vừa đổi nhún nhẹ (.cd-dem), khung hiện dần khi cuộn tới (.cd-hien-dan → .cd-da-hien, trễ --cd-tre) */
.cd-dem{ animation:nvSoNhun .6s cubic-bezier(.34,1.56,.64,1); }
.cd-hien-dan{ opacity:0; transform:translate3d(0,26px,0) scale(.985);
  transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--cd-tre,0ms), transform 1s cubic-bezier(.16,1,.3,1) var(--cd-tre,0ms) !important; }
.cd-hien-dan.cd-da-hien{ opacity:1; transform:none; }
/* Sở chỉ huy nghiêng theo chuột (--px / --py do ChuyenDong.nghieng đặt trên .tq-hero) */
.tq-hero-anh{ translate:calc(var(--px, 0) * -18px) calc(var(--py, 0) * -12px); transition:translate 1s cubic-bezier(.16,1,.3,1); }
.tq-hero-chu{ translate:calc(var(--px, 0) * 8px) calc(var(--py, 0) * 5px); transition:translate 1s cubic-bezier(.16,1,.3,1); }
@keyframes nvSoNhun{ 0%{ transform:scale(.85); opacity:.5; } 60%{ transform:scale(1.06); } 100%{ transform:none; opacity:1; } }
/* thẻ số / thẻ khung nổi nhẹ khi rê chuột */
@media (hover:hover){
  html.gd-sieu-anh-hung #appShell :is(.db2-the, .hn2-the, .kq3-o, div.nvs-the){ transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; }
  html.gd-sieu-anh-hung #appShell :is(.db2-the, .hn2-the, .kq3-o, div.nvs-the):hover{ transform:translateY(-3px); box-shadow:0 18px 30px -22px rgba(90,25,10,.75); }
}

/* ═════════════ ⑥ BẢNG: ĐẦU ĐỎ RƯỢU CHỮ VÀNG + VIÊN TRẠNG THÁI ═════════════ */
html.gd-sieu-anh-hung #appShell#appShell .mv:not(#pane-matran) table > thead > tr > th:not(#kqExportArea *){
  background:linear-gradient(180deg, #8e0a17, #640610) !important; color:#ffe3a3 !important; font-weight:800 !important;
  border-color:rgba(255,255,255,.06) !important; border-bottom:2px solid #f6b52a !important; text-shadow:0 1px 0 rgba(40,0,5,.5) !important;
}
html.gd-sieu-anh-hung #appShell#appShell .mv:not(#pane-matran) table > thead > tr > th:not(#kqExportArea *) :is(i, a, .sap-xep, small){ color:inherit !important; }
html.gd-sieu-anh-hung #appShell .mv table > tbody > tr:nth-child(even) > td:not(#kqExportArea *){ background-color:#fffaf1; }
html.gd-sieu-anh-hung #appShell .mv table > tbody > tr > td:not(#kqExportArea *){ transition:background-color .25s, box-shadow .25s; }
/* viên trạng thái */
.mv-tt{ display:inline-flex; align-items:center; gap:6px; padding:3px 11px 3px 9px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap; border:1px solid; }
.mv-tt::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 2px rgba(255,255,255,.8); }
.mv-tt-xanh{ background:#e6f7ec; border-color:#bfe6cb; color:#1b7a43; }
.mv-tt-do{ background:#ffe8ea; border-color:#f6c3c8; color:#c8102e; }
.mv-tt-vang{ background:#fff3d4; border-color:#f3dca0; color:#9a5a00; }
.mv-tt-lam{ background:#e6efff; border-color:#c6d8f6; color:#1d4fa8; }

/* ═════════════ ĐIỆN THOẠI / MÀN HẸP ═════════════ */
@media (max-width:1199.98px){
  html.gd-sieu-anh-hung #appShell .tq-hero{ grid-template-columns:minmax(0, 1fr) auto; }
  .tq-hero-anh{ width:58%; opacity:.55; }
  .tq-lich-luoi{ grid-template-columns:repeat(7, minmax(112px, 1fr)); overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity; }
  .tq-ngay{ scroll-snap-align:start; }
}
@media (max-width:640px){
  html.gd-sieu-anh-hung #appShell .tq-hero{ grid-template-columns:minmax(0, 1fr); margin:0 -12px; padding:22px 16px 64px; border-radius:18px 18px 0 0; min-height:0; }
  .tq-hero-anh{ width:100%; opacity:.28; -webkit-mask-image:linear-gradient(180deg, #000 30%, transparent); mask-image:linear-gradient(180deg, #000 30%, transparent); }
  .tq-hero-vong{ justify-self:start; }
  .tq-vong{ width:78px; height:78px; } html.gd-sieu-anh-hung #appShell .tq-vong b{ font-size:22px; }
  html.gd-sieu-anh-hung #appShell #tongQuan > .tq2-the-luoi{ margin:-44px 4px 14px; }
  html.gd-sieu-anh-hung #appShell #tongQuan .tq2-the{ box-shadow:3px 3px 0 #c0121f !important; }
  .tq-viec-luoi{ grid-template-columns:minmax(0, 1fr); gap:8px; }
  html.gd-sieu-anh-hung #appShell .mv.tab-pane[data-nhom] > .mv-bang::before{ font-size:60px; right:12px; }
  .tq-viec-chu em{ font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce){
  #appShell .tq-hero::after, .tq-hero-chip > span.can, .tq-cham{ animation:none !important; }
  .tq-hero-anh, .tq-hero-chu, .tq-hero-vong, .tq-vong, .tq-viec, .tq-ngay, .cd-dem, #appShell .mv-bang::before, #appShell .mv-bang::after{ animation:none !important; }
  .cd-hien-dan{ opacity:1; transform:none; }
}
@media print{ .cd-hien-dan{ opacity:1 !important; transform:none !important; } }

/* =====================================================================================
 * TAB BỔ TRỢ — làm lại theo 4 ảnh mẫu thầy gửi 04/10/2026 (Nhập buổi · Lịch trực & đăng ký · Tra cứu · Thiết lập).
 * Nạp SAU nv-dep.css. Luật chung của khung nhân viên rất mạnh (#appShell … :is(...)) nên đè bằng #appShell#appShell.
 *   .bt4-*  mục Nhập buổi (index.html section[data-btmuc-pane="nhap"], app.js btRowHtml / veTomTatBuoiBoTro_)
 *   .lbt4-* khung "Chọn từ lịch hẹn" (js/lich-bo-tro.js veNgay_)
 *   .anh-cho ảnh chụp lưu trên máy chờ tải lên (app.js veAnhCho_, js/anh-cho.js) — dùng cả ở Chấm công
 * ===================================================================================== */
#pane-botro{ --bt-do:#b3101f; --bt-do-sang:#c8102e; --bt-vien:rgba(125,35,20,.13); --bt-chu:#2a1810; --bt-phu:#7a6a60; --bt-kem:#fffaf3; --bt-vang:#f6c33f; }

/* ── thanh mục con nằm TRÊN tiêu đề trang (app.js chonMucBoTro_ chuyển .bt2-thanh lên đầu pane) ── */
#appShell#appShell #pane-botro > .bt2-thanh{ margin-bottom:12px; }
#appShell#appShell #pane-botro > .mv-bang .mv-huy-chi{ display:inline-flex; align-items:center; gap:5px; margin-left:10px; padding:3px 10px; border-radius:999px; vertical-align:middle;
  font:700 12.5px/1.3 'Be Vietnam Pro', system-ui, sans-serif; letter-spacing:0; text-transform:none; color:#c8102e; background:#ffe9ea; border:1px solid #f6c9cd; -webkit-text-fill-color:#c8102e; }

/* ── thẻ trắng dùng chung ── */
.bt4-the{ display:flex; flex-direction:column; gap:12px; min-width:0; padding:16px 18px; border-radius:16px; background:#fff; border:1px solid var(--bt-vien);
  box-shadow:0 14px 30px -26px rgba(90,25,10,.75); }
.bt4-the-dau{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.bt4-the-dau > b{ font-size:17px; font-weight:900; letter-spacing:.01em; text-transform:uppercase; color:var(--bt-do); }
.bt4-the-dau > b > span{ color:var(--bt-do); }
.bt4-the-ic{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:15px; color:#fff;
  background:linear-gradient(135deg, #e0192f, #8e0a17); box-shadow:0 6px 12px -8px rgba(140,10,20,.85); }
.bt4-the-ic.do{ background:linear-gradient(135deg, #f04438, #b3101f); }
.bt4-the-nut{ margin-left:auto; display:flex; flex-wrap:wrap; gap:8px; }
.bt4-the-nut .tg2-nut{ min-height:40px; padding:0 14px; font-size:14px; }
.bt4-dem{ min-width:22px; height:22px; padding:0 6px; border-radius:999px; display:inline-grid; place-items:center; font-size:12px; font-weight:800; background:#c8102e; color:#fff; }
#btMoLichHen.dang-mo{ border-color:#e9b84c !important; background:#fff8e6 !important; color:#8a4f00 !important; }
.bt4-ghi{ display:flex; gap:8px; align-items:flex-start; margin:0; font-size:12.5px; line-height:1.5; color:var(--bt-phu); }
.bt4-ghi i{ margin-top:3px; color:#e39b16; }

/* ── thanh chọn buổi ── */
.bt4-buoi{ display:grid; grid-template-columns:minmax(220px, 1fr) minmax(220px, 1fr) minmax(0, 1.2fr) auto; gap:12px 16px; align-items:center; margin-bottom:16px; padding:12px 16px;
  border-radius:16px; background:#fff; border:1px solid var(--bt-vien); box-shadow:0 14px 30px -26px rgba(90,25,10,.75); }
.bt4-o{ display:flex; align-items:center; gap:10px; min-width:0; }
.bt4-o > label{ flex:none; margin:0; font-size:14px; font-weight:600; color:var(--bt-phu); }
.bt4-o > .tg2-o-icon{ flex:1; min-width:0; }
#appShell#appShell .bt4-o :is(.form-control, .form-select){ min-height:42px; }
.bt4-tim{ min-height:42px !important; }

/* ── lưới 2 cột ── */
.bt4-luoi{ display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:16px; align-items:start; margin-bottom:14px; }
.bt4-phai{ display:flex; flex-direction:column; gap:16px; min-width:0; }

/* ── khung lịch hẹn (gập) ── */
.bt4-lich{ display:flex; flex-direction:column; gap:10px; padding:12px 14px; border-radius:14px; background:var(--bt-kem); border:1px dashed #e9c98a; animation:bt4Mo .3s cubic-bezier(.22,1,.36,1); }
@keyframes bt4Mo{ from{ opacity:0; transform:translateY(-6px); } }
.bt4-lich-dau{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; }
.bt4-lich-dau b{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:800; color:var(--bt-chu); }
.bt4-lich-dau b i{ color:#e39b16; }
.bt4-lich-dau small{ font-size:12.5px; color:var(--bt-phu); }
.bt4-lich-dau .tg2-tai{ margin-left:auto; }
.bt4-lich #lbtDuaVaoBtn{ align-self:flex-end; }
.lbt4-ds{ display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto; padding-right:4px; scrollbar-width:thin; }
.lbt4-het{ display:inline-flex; align-items:center; gap:8px; margin:0 0 2px 10px; font-size:12.5px; font-weight:700; color:var(--bt-phu); }
.lbt4-dong{ display:grid; grid-template-columns:22px minmax(150px, 1.3fr) minmax(90px, .7fr) minmax(0, 1fr) auto auto 34px; gap:10px; align-items:center;
  padding:8px 10px; border-radius:11px; background:#fff; border:1px solid var(--bt-vien); }
.lbt4-dong.da-di{ opacity:.6; }
.lbt4-ca, .lbt4-bai{ display:flex; flex-direction:column; min-width:0; font-size:13px; color:var(--bt-chu); }
.lbt4-ca b{ font-size:13px; font-weight:800; white-space:nowrap; }
.lbt4-ca small, .lbt4-bai small{ font-size:11.5px; color:var(--bt-phu); }
.lbt4-bai{ overflow-wrap:anywhere; }
.lbt4-tt{ font-size:12px; white-space:nowrap; }
.lbt4-dong .tg2-hs .hs2-av{ width:32px; height:32px; font-size:12px; }

/* ── bảng học sinh của buổi (div, mỗi em 1 dòng) ── */
.bt4-bang{ display:flex; flex-direction:column; min-width:0; border-radius:14px; border:1px solid var(--bt-vien); overflow:hidden; }
.bt4-hang-dau, .bt4-dong{ display:grid; grid-template-columns:28px minmax(130px, 1.4fr) minmax(90px, 1fr) minmax(96px, .75fr) 138px minmax(104px, .8fr) 32px; gap:8px; align-items:center; }
.bt4-hang-dau{ padding:10px 12px; background:#f6f1ea; border-bottom:1px solid var(--bt-vien); font-size:13.5px; font-weight:800; color:#3b2a20; }
.bt4-ds{ display:flex; flex-direction:column; }
.bt4-dong{ position:relative; padding:9px 12px; background:#fff; border-bottom:1px solid rgba(125,35,20,.08); transition:background .2s; }
.bt4-dong:last-child{ border-bottom:0; }
.bt4-dong:hover{ background:#fffaf2; }
.bt4-dong::before{ content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:transparent; transition:background .2s; }
.bt4-dong.di::before{ background:#1e9a55; } .bt4-dong.vang::before{ background:#d81a32; }
.bt4-dong.bo-chon > :not(.bt4-c-chon, .bt4-ct){ opacity:.45; }
.bt4-dong > span{ min-width:0; }
.bt4-dong .tg2-hs .hs2-av{ width:34px; height:34px; font-size:12.5px; }
.bt4-dong .tg2-hs b{ font-size:14px; }
#appShell#appShell .bt4-dong :is(.form-control, .form-select){ min-height:36px; font-size:13.5px; border-radius:10px; }
.bt4-c-phong .form-select{ min-width:0 !important; width:100%; }
.bt4-nhom{ padding:7px 12px; font-size:13px; color:#8a4f00; background:#fff8e6; border-bottom:1px solid #f1dfb3; }
.bt4-trong{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:30px 16px; text-align:center; font-size:13.5px; color:var(--bt-phu); background:#fff; }
.bt4-trong > i{ font-size:28px; color:#e6c27a; }
.bt4-trong > b{ font-size:15px; color:var(--bt-chu); }

/* nút Đi / Vắng gọn như ô chọn */
#appShell#appShell .bt4-dong .bt-dd{ display:flex; gap:4px; padding:3px; border-radius:11px; background:#f6f1ea; border:1px solid var(--bt-vien); }
#appShell#appShell .bt4-dong .bt-dd.chua{ border-color:#f1c27a; background:#fff6e2; }
#appShell#appShell .bt4-dong .bt-dd-nut{ flex:1; min-height:30px; padding:0 8px; border-radius:8px; border:0 !important; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
  background:transparent !important; color:#7a6a60 !important; box-shadow:none !important; display:inline-flex; align-items:center; justify-content:center; gap:5px; transition:background .2s, color .2s; }
#appShell#appShell .bt4-dong .bt-dd-nut:hover{ background:#fff !important; color:var(--bt-chu) !important; }
#appShell#appShell .bt4-dong .bt-dd-nut.on-di{ background:#1e9a55 !important; color:#fff !important; }
#appShell#appShell .bt4-dong .bt-dd-nut.on-vang{ background:#d81a32 !important; color:#fff !important; }

/* ⋯ và dòng phụ */
#appShell#appShell .bt4-ba-cham{ width:32px; height:32px; padding:0; border-radius:9px; display:grid; place-items:center; cursor:pointer; font-size:14px;
  background:#fff; border:1px solid var(--bt-vien); color:#7a6a60; box-shadow:none; transition:background .2s, color .2s, transform .25s; }
#appShell#appShell .bt4-ba-cham:hover{ background:#fff8e6; color:#8a4f00; border-color:#e9b84c; }
#appShell#appShell .bt4-dong.mo .bt4-ba-cham{ background:#ffe9a3; color:#5a3a06; border-color:#e9b84c; }
.bt4-ct{ grid-column:1 / -1; display:none; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; margin:4px 0 2px 40px; padding:10px 12px; border-radius:11px;
  background:var(--bt-kem); border:1px dashed #ecd7ae; }
.bt4-dong.mo .bt4-ct{ display:flex; animation:bt4Mo .25s cubic-bezier(.22,1,.36,1); }
.bt4-ct > label{ display:flex; flex-direction:column; gap:4px; margin:0; font-size:12px; font-weight:700; color:var(--bt-phu); }
.bt4-ct > label .form-control{ width:90px; }
.bt4-ct > label.bt-tiendo .form-select{ min-width:170px; }
.bt4-ct .bt-xoa{ margin-left:auto; color:#c8102e !important; }

/* tóm tắt dưới bảng */
.bt4-tom{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:14px; color:var(--bt-chu); }
.bt4-tom-so{ display:inline-flex; align-items:center; gap:7px; font-weight:700; }
.bt4-tom-so b{ font-size:17px; font-weight:900; }
.bt4-tom-so.di, .bt4-tom-so.di i{ color:#1e7a46; } .bt4-tom-so.vang, .bt4-tom-so.vang i{ color:#c8102e; } .bt4-tom-so.chua, .bt4-tom-so.chua i{ color:#b45309; }
.bt4-tom-so i{ font-size:18px; }
.bt4-tom-phong{ font-size:13px; color:var(--bt-phu); }
.bt4-tom-tong{ margin-left:auto; color:var(--bt-phu); }
.bt4-tom-tong b{ color:var(--bt-chu); }
.bt4-canh{ margin-top:8px; padding:8px 12px; border-radius:10px; font-size:13px; background:#fff6e2; color:#8a4f00; }

/* ── ảnh buổi học ── */
#appShell#appShell .bt4-anh{ width:100%; height:200px; margin:0; padding:16px; gap:8px; text-align:center; background:#f6f3f0 !important; border:1.5px dashed #c9c2bc !important; border-radius:14px; color:#6f655e; }
#appShell#appShell .bt4-anh:hover{ background:#fbf4ec !important; border-color:#d81a32 !important; }
#appShell#appShell .bt4-anh > i.o-anh-chu{ font-size:44px; color:#9a928b; }
.bt4-anh span.o-anh-chu{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.bt4-anh span.o-anh-chu b{ font-size:15.5px; font-weight:700; color:#4a403a; }
.bt4-anh span.o-anh-chu small{ font-size:12.5px; font-weight:500; color:#8a7d74; }
.bt4-anh-nut{ margin-top:6px; display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:11px; font-style:normal; font-size:14px; font-weight:800;
  background:linear-gradient(#ffe48a, #f6c33f 55%, #e5a019); border:1px solid #c98a12; color:#2a1606; box-shadow:0 8px 14px -12px rgba(150,90,0,.9); }
#appShell#appShell .bt4-anh.co-anh{ height:220px; background:#1d1512 !important; border:2px solid #f2c14e !important; }
#appShell#appShell .bt4-anh.co-anh img{ object-fit:contain; }
.bt4-anh .o-anh-doi{ left:auto !important; right:10px !important; bottom:10px !important; padding:4px 12px !important; border-radius:999px !important; font-size:12px !important; }
#appShell#appShell #btAnhTT{ margin-left:auto; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; background:#f3efeb; color:#7a6a60; }
#appShell#appShell #btAnhTT.co{ background:#e3f6ea; color:#1e7a46; }

/* ── tài liệu ── */
.bt4-tai{ margin-left:auto; cursor:pointer; }
.bt4-tl{ display:flex; flex-direction:column; gap:6px; color:var(--bt-phu); }
.bt4-tl a{ color:#c8102e !important; font-weight:700; }
.bt4-tl-tai{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#appShell#appShell .bt4-tl-tai .form-control{ flex:1 1 160px; min-width:0; min-height:36px; }

/* ── mục gập ── */
.bt4-gap{ margin-bottom:10px; border-radius:14px; background:#fff; border:1px solid var(--bt-vien); box-shadow:0 10px 24px -22px rgba(90,25,10,.7); }
.bt4-gap > summary{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; padding:13px 16px; cursor:pointer; list-style:none; border-radius:14px; transition:background .2s; }
.bt4-gap > summary::-webkit-details-marker{ display:none; }
.bt4-gap > summary:hover{ background:#fffaf2; }
.bt4-gap > summary:focus-visible{ outline:2px solid #d81a32; outline-offset:-2px; }
.bt4-gap > summary b{ font-size:15px; font-weight:800; color:var(--bt-chu); }
.bt4-gap > summary small{ font-size:12.5px; color:var(--bt-phu); }
.bt4-gap-ic{ width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; font-size:14px; color:#c8102e; background:#ffe9ea; }
.bt4-gap-mui{ margin-left:auto; color:#c8102e; transition:transform .3s cubic-bezier(.22,1,.36,1); }
.bt4-gap[open] .bt4-gap-mui{ transform:rotate(180deg); }
.bt4-gap-than{ display:flex; flex-direction:column; gap:10px; padding:2px 16px 16px; }
.bt4-hd{ margin:0; padding:2px 18px 16px 40px; font-size:13.5px; line-height:1.65; color:#4a372d; }
.bt4-hd li + li{ margin-top:4px; }

/* ── chân dính đáy ── */
.bt4-chan{ position:sticky; bottom:10px; z-index:5; display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:6px; padding:10px 14px 10px 16px;
  border-radius:16px; background:linear-gradient(180deg, #fffdf8, #fff6e2); border:1px solid #f0d49a; box-shadow:0 16px 30px -18px rgba(90,25,10,.55); }
.bt4-chan-ic{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:15px; background:#fde4c4; color:#b45309; }
.bt4-chan-tom{ font-size:14.5px; color:var(--bt-chu); }
.bt4-chan-tom b{ font-size:17px; font-weight:900; }
.bt4-chan-tom b.xanh{ color:#1e7a46; }
.bt4-chan-tom small{ color:var(--bt-phu); }
#appShell#appShell .bt4-chan #btMsg{ flex:1 1 220px; min-width:0; margin:0; font-size:13px; }
.bt4-chan-tt{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:#c8102e; }
.bt4-chan-tt.thieu{ color:#b45309; }
.bt4-chan .tg2-nut.lon{ min-width:220px; }
.bt4-chan .tg2-nut:disabled{ opacity:.55; filter:saturate(.5); }

/* ── ảnh chờ tải lên (Chấm công + Bổ trợ) ── */
.anh-cho{ display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-radius:12px; background:#eef6ff; border:1px solid #cfe2f8; }
.anh-cho[hidden]{ display:none !important; }
.anh-cho-dau{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; font-size:13px; color:#1d4fa8; }
.anh-cho-dau b{ font-weight:800; }
.anh-cho-dau small{ width:100%; font-size:12px; color:#4b6a92; }
.anh-cho-ds{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }
.anh-cho-muc{ display:flex; align-items:center; gap:10px; padding:6px; border-radius:10px; background:#fff; border:1px solid #d9e7f7; }
.anh-cho-muc.dang-dung{ border-color:#1e9a55; box-shadow:0 0 0 2px rgba(30,154,85,.18); }
.anh-cho-muc img{ width:56px; height:42px; flex:none; object-fit:cover; border-radius:7px; background:#111; }
.anh-cho-muc > span:nth-child(2){ flex:1; min-width:0; display:flex; flex-direction:column; font-size:12.5px; color:#2a1810; }
.anh-cho-muc em{ font-style:normal; font-size:11.5px; font-weight:700; color:#1e7a46; }
.anh-cho-muc em.do{ color:#c2410c; }
.anh-cho-nut{ display:flex; align-items:center; gap:6px; }
#appShell#appShell .anh-cho-xoa{ width:30px; height:30px; padding:0; border-radius:8px; display:grid; place-items:center; cursor:pointer; background:#fff3f3; border:1px solid #f5d0d3; color:#c8102e; box-shadow:none; }
#appShell#appShell .anh-cho-xoa:hover{ background:#c8102e; color:#fff; }

/* ── màn hình hẹp ── */
@media (max-width:1499.98px){
  .bt4-luoi{ grid-template-columns:minmax(0, 1fr); }
  .bt4-phai{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width:991.98px){
  .bt4-buoi{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .bt4-o-tg{ grid-column:1 / -1; }
  .bt4-tim{ grid-column:1 / -1; }
  .bt4-o{ flex-direction:column; align-items:stretch; gap:4px; }
  .bt4-o > label{ font-size:12.5px; }
  .bt4-phai{ grid-template-columns:minmax(0, 1fr); }
  /* bảng → thẻ */
  .bt4-hang-dau{ display:flex; gap:10px; }
  .bt4-hang-dau > span:not(:first-child){ display:none; }
  .bt4-hang-dau > span:first-child::after{ content:' Chọn tất cả'; font-size:12.5px; font-weight:700; color:var(--bt-phu); }
  .bt4-dong{ grid-template-columns:30px minmax(0, 1fr) minmax(0, 1fr) 34px; grid-template-areas:'c hs hs them' '. bai bai bai' '. loai phong phong' '. dd dd dd' 'ct ct ct ct'; gap:8px; padding:12px; }
  .bt4-c-chon{ grid-area:c; } .bt4-c-hs{ grid-area:hs; } .bt4-c-bai{ grid-area:bai; } .bt4-c-loai{ grid-area:loai; } .bt4-c-dd{ grid-area:dd; } .bt4-c-phong{ grid-area:phong; } .bt4-c-them{ grid-area:them; }
  .bt4-ct{ grid-area:ct; margin-left:0; }
  #appShell#appShell .bt4-dong .bt-dd-nut{ min-height:38px; font-size:14px; }
  .lbt4-dong{ grid-template-columns:22px minmax(0, 1fr) auto 34px; }
  .lbt4-dong > .lbt4-ca{ grid-column:2; } .lbt4-dong > .lbt4-bai{ grid-column:2 / 4; } .lbt4-dong > .lbt4-tt{ display:none; }
  .bt4-chan{ bottom:6px; }
  .bt4-chan-tt{ margin-left:0; }
  .bt4-chan .tg2-nut.lon{ width:100%; min-width:0; }
  .bt4-the-nut{ margin-left:0; width:100%; } .bt4-the-nut .tg2-nut{ flex:1; }
}
.lbt4-bai small.lbt4-khac{ color:#b45309; font-weight:800; }
/* điện thoại: chân dính đáy gọn lại (số học sinh + nhắc việc cùng 1 hàng, chữ nhỏ), đỡ che danh sách */
@media (max-width:575.98px){
  .bt4-chan{ bottom:4px; gap:4px 8px; padding:7px 10px; border-radius:13px; }
  .bt4-chan-ic{ width:24px; height:24px; font-size:11px; }
  .bt4-chan-tom{ font-size:12px; }
  .bt4-chan-tom b{ font-size:14px; }
  .bt4-chan-tt{ margin-left:auto; gap:4px; font-size:11.5px; font-weight:700; }
  #appShell#appShell .bt4-chan #btMsg{ flex:1 1 100%; font-size:11.5px; order:5; }
  #appShell#appShell .bt4-chan #btMsg:empty{ display:none; }
  .bt4-chan .tg2-nut.lon{ order:6; }
  #appShell#appShell .bt4-chan .tg2-nut.lon{ min-height:38px; padding:6px 12px; font-size:13.5px; }
}
@media (prefers-reduced-motion:reduce){ .bt4-lich, .bt4-dong.mo .bt4-ct, .bt4-gap-mui{ animation:none !important; transition:none !important; } }

/* ═════════════ MỤC LỊCH TRỰC & ĐĂNG KÝ (.lt5-*, js/dang-ky-bo-tro.js veTruc_ / veHsKhung_) ═════════════ */
.lt5-thanh{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
#appShell#appShell .lt5-mui{ width:42px; height:42px; padding:0; border-radius:12px; display:grid; place-items:center; cursor:pointer; background:#fff; border:1px solid var(--bt-vien); color:#8a1a24; box-shadow:none; }
#appShell#appShell .lt5-mui:hover{ border-color:#e9b84c; background:#fff8e6; }
.lt5-tuan{ min-width:230px; padding:9px 18px; border-radius:12px; text-align:center; font-size:16px; font-weight:800; color:var(--bt-chu); background:#fff; border:1px solid var(--bt-vien); }
.lt5-nay{ min-height:42px !important; }
.lt5-thanh-phai{ margin-left:auto; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.lt5-loc{ min-width:210px; }
#appShell#appShell .lt5-loc .form-select{ min-height:42px; }
.lt5-thanh-phai .tg2-nut{ min-height:42px; }
#appShell#appShell .lt5-tai{ width:42px; height:42px; border-radius:12px; background:#fff; border:1px solid var(--bt-vien); color:#8a1a24; }
.lt5-ngay-ds{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; margin-bottom:14px; }
#appShell#appShell .lt5-ngay{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; padding:9px 4px; border-radius:12px; cursor:pointer; font:inherit;
  background:#fff; border:1px solid var(--bt-vien); color:var(--bt-chu); box-shadow:0 8px 16px -16px rgba(90,25,10,.7); transition:background .2s, border-color .2s, transform .2s; }
#appShell#appShell .lt5-ngay:hover{ border-color:#e9b84c; transform:translateY(-1px); }
.lt5-ngay b{ font-size:16px; font-weight:900; }
.lt5-ngay small{ font-size:12.5px; font-weight:600; color:var(--bt-phu); }
.lt5-ngay em{ margin-top:3px; padding:1px 8px; border-radius:999px; font-style:normal; font-size:11px; font-weight:800; background:#fff1f1; color:#c8102e; }
#appShell#appShell .lt5-ngay.qua{ opacity:.6; }
#appShell#appShell .lt5-ngay.nay::after{ content:''; position:absolute; top:6px; right:8px; width:7px; height:7px; border-radius:50%; background:#c8102e; }
#appShell#appShell .lt5-ngay.chon{ background:linear-gradient(180deg, #ffe48a, #f6c33f 60%, #e5a019); border-color:#c98a12; color:#2a1606; opacity:1; box-shadow:0 10px 18px -12px rgba(150,90,0,.9); }
.lt5-ngay.chon small{ color:#5a3a06; }
.lt5-ngay.chon em{ background:#fff; }

.lt5-luoi{ display:grid; grid-template-columns:minmax(300px, .82fr) minmax(0, 1.18fr); gap:16px; align-items:start; margin-bottom:12px; }
.lt5-chip{ margin-left:auto; padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:700; background:#f3efeb; color:#6f625a; }
.lt5-ca-ds{ display:flex; flex-direction:column; gap:10px; }
#appShell#appShell .lt5-ca{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto 18px; grid-template-areas:'gio so mui' 'tg so mui'; gap:6px 12px; align-items:center;
  padding:12px 14px; border-radius:14px; text-align:left; cursor:pointer; font:inherit; background:#fff; border:1px solid var(--bt-vien); color:var(--bt-chu); box-shadow:none;
  transition:background .2s, border-color .2s, transform .2s; }
#appShell#appShell .lt5-ca:hover{ border-color:#e9b84c; transform:translateY(-1px); }
#appShell#appShell .lt5-ca.chon{ background:#fffaf0; border:2px solid #f2c14e; box-shadow:0 10px 20px -16px rgba(150,90,0,.9); }
#appShell#appShell .lt5-ca.dong{ opacity:.6; }
.lt5-ca-gio{ grid-area:gio; display:flex; align-items:center; gap:8px; font-size:16px; }
.lt5-ca-gio i{ color:#c8102e; }
.lt5-ca-gio b{ font-weight:900; }
.lt5-ca-gio em{ font-style:normal; font-size:11px; font-weight:800; padding:1px 7px; border-radius:6px; background:#efe9e3; color:#8a7d74; }
.lt5-ca-tg{ grid-area:tg; display:flex; align-items:center; gap:10px; min-width:0; }
.lt5-ca-tg .hs2-av{ width:34px; height:34px; font-size:12.5px; }
.lt5-ca-tg > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.lt5-ca-tg b{ font-size:14px; font-weight:700; }
.lt5-ca-tg small{ font-size:12px; color:var(--bt-phu); }
.lt5-ca-so{ grid-area:so; display:flex; flex-direction:column; align-items:flex-end; gap:6px; font-size:14px; color:var(--bt-chu); }
.lt5-ca-so b{ font-size:18px; font-weight:900; color:#1e7a46; } .lt5-ca-so b.day{ color:#c8102e; } .lt5-ca-so b:not(.co):not(.day){ color:#8a7d74; }
.lt5-thanh-so{ width:120px; height:6px; border-radius:6px; background:#efe9e3; overflow:hidden; }
.lt5-thanh-so > span{ display:block; height:100%; border-radius:6px; background:#1e9a55; } .lt5-thanh-so > span.nua{ background:#f29a1a; } .lt5-thanh-so > span.day{ background:#d81a32; }
.lt5-ca-mui{ grid-area:mui; color:#c8102e; }

.lt5-hs-khung{ gap:14px; }
.lt5-ca-ten{ text-transform:none; }
.lt5-ca-phu{ margin-top:-6px; font-size:13px; color:var(--bt-phu); }
.lt5-bang{ display:flex; flex-direction:column; border-radius:12px; border:1px solid var(--bt-vien); overflow:hidden; }
.lt5-hang{ display:grid; grid-template-columns:minmax(120px, 1.3fr) 64px minmax(90px, 1fr) 72px 120px 34px; gap:10px; align-items:center; padding:9px 12px; font-size:13.5px;
  background:#fff; border-bottom:1px solid rgba(125,35,20,.08); color:var(--bt-chu); }
.lt5-hang:last-child{ border-bottom:0; }
.lt5-hang.dau{ background:#f6f1ea; font-size:13px; font-weight:800; color:#3b2a20; }
.lt5-hang > span{ min-width:0; display:flex; flex-direction:column; }
.lt5-hang small{ font-size:11.5px; color:var(--bt-phu); }
.lt5-bai{ overflow-wrap:anywhere; }
.lt5-lop{ align-self:flex-start; padding:2px 9px; border-radius:7px; font-size:12px; font-weight:800; background:#e6f0ff; color:#1d4fa8; }
.lt5-tt{ display:inline-flex !important; flex-direction:row !important; align-items:center; gap:5px; font-size:12.5px; font-weight:700; }
.lt5-tt.co{ color:#1e7a46; } .lt5-tt.cho{ color:#b45309; }
#appShell#appShell .lt5-ba-cham{ width:30px; height:30px; padding:0; border-radius:8px; display:grid; place-items:center; cursor:pointer; background:#fff; border:1px solid var(--bt-vien); color:#8a7d74; box-shadow:none; }
#appShell#appShell .lt5-ba-cham:hover{ background:#c8102e; border-color:#c8102e; color:#fff; }
.lt5-hs-chan{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.lt5-cho-so{ font-size:15px; color:var(--bt-chu); }
.lt5-cho-so b{ font-size:17px; font-weight:900; }
.lt5-cho-so .xanh{ font-weight:800; color:#1e7a46; } .lt5-cho-so .do{ font-weight:800; color:#c8102e; }
.lt5-hs-chan .tg2-nut{ margin-left:auto; }
.lt5-cho{ display:flex; flex-direction:column; gap:10px; padding:12px 14px; border-radius:14px; background:#fffaf0; border:1px solid #f0d49a; }
.lt5-cho[hidden]{ display:none; }
.lt5-cho-dau{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; }
.lt5-cho-dau i{ color:#c98a12; font-size:16px; }
.lt5-cho-dau b{ font-size:15px; font-weight:900; text-transform:uppercase; color:var(--bt-do); }
.lt5-cho-dau small{ width:100%; font-size:12px; color:var(--bt-phu); }
.lt5-cho-ds{ max-height:280px; overflow-y:auto; }
.lt5-bang-cho .lt5-hang{ grid-template-columns:minmax(100px, 1fr) 56px minmax(96px, 1fr) minmax(70px, .8fr) auto; }
.lt5-cho-nut{ flex-direction:row !important; gap:6px; }
.lt5-cho-nut .tg2-nut-nho{ padding:5px 10px; font-size:12.5px; }
.lt5-lt-tom{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:13px; color:var(--bt-chu); }
.lt5-lt-tom i{ font-style:normal; color:#d9cfc6; }
.lt5-lt-tom .nhat{ color:var(--bt-phu); }
.lt5-chinh{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; color:#c8102e; }
.lt5-chinh + .bt4-gap-mui{ margin-left:8px; }
#dkbtLtCho #dkbtLtWrap{ margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; }
#appShell#appShell #dkbtLtCho #dkbtLtWrap > #dkbtLtTieuDe{ display:none !important; }
.lt5-sang-tl{ align-self:flex-start; }

@media (max-width:1199.98px){ .lt5-luoi{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:767.98px){
  .lt5-tuan{ min-width:0; flex:1; font-size:14px; padding:9px 10px; }
  .lt5-thanh-phai{ margin-left:0; width:100%; } .lt5-loc{ flex:1; min-width:0; }
  .lt5-ngay-ds{ grid-template-columns:repeat(7, minmax(46px, 1fr)); gap:5px; overflow-x:auto; }
  .lt5-ngay b{ font-size:14px; } .lt5-ngay em{ display:none; }
  .lt5-hang{ grid-template-columns:minmax(0, 1fr) auto; }
  .lt5-hang.dau{ display:none; }
  .lt5-hang > span:nth-child(3), .lt5-hang > span:nth-child(4){ grid-column:1 / -1; }
  .lt5-bang-cho .lt5-hang{ grid-template-columns:minmax(0, 1fr) auto; }
  .lt5-cho-nut{ grid-column:1 / -1; }
  .lt5-thanh-so{ width:80px; }
  .lt5-chinh{ margin-left:0; }
}

/* nhãn thứ của lịch hằng tuần: cho xuống dòng (VD 'Hôm nay · Chưa có ca') */
.lt3-ngay-dau small{ white-space:normal !important; line-height:1.3; }

/* ═════════════ MỤC TRA CỨU (.tc5-*, app.js renderBtViewTable) ═════════════ */
.tc5-loc{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)) auto; gap:12px 14px; align-items:end; margin-bottom:12px; padding:14px 16px;
  border-radius:16px; background:#fff; border:1px solid var(--bt-vien); box-shadow:0 14px 30px -26px rgba(90,25,10,.75); }
.tc5-o{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.tc5-o > label{ margin:0; font-size:13px; font-weight:600; color:var(--bt-phu); }
#appShell#appShell .tc5-o :is(.form-control, .form-select){ min-height:42px; }
.tc5-xem{ min-height:44px !important; min-width:130px; }
.tc5-thanh{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-bottom:10px; }
#appShell#appShell .tc5-pill{ display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 16px; border-radius:11px; font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  background:#fff; border:1px solid var(--bt-vien); color:var(--bt-chu); box-shadow:none; }
#appShell#appShell .tc5-pill.di::before, #appShell#appShell .tc5-pill.vang::before{ content:''; width:9px; height:9px; border-radius:50%; background:#1e9a55; }
#appShell#appShell .tc5-pill.vang::before{ background:#d81a32; }
#appShell#appShell .tc5-pill.active{ background:linear-gradient(180deg, #ffe48a, #f6c33f 60%, #e5a019); border-color:#c98a12; color:#2a1606; }
#appShell#appShell .tc5-thanh #btViewTinhTrangFilter{ width:auto; min-width:180px; min-height:40px; }
.tc5-tim{ flex:1 1 220px; min-width:0; }
#appShell#appShell .tc5-tim .form-control{ min-height:40px; }
#appShell#appShell .tc5-thanh #btViewPrintBtn{ min-height:40px; }
.tc5-tom{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:2px 0 10px; font-size:14px; color:var(--bt-chu); }
.tc5-tom b{ font-size:17px; font-weight:900; }
.tc5-tom i{ font-style:normal; color:#c9bdb2; }
.tc5-tom .xanh{ color:#1e7a46; } .tc5-tom .do{ color:#c8102e; }
.tc5-bang{ border-radius:16px; background:#fff; border:1px solid var(--bt-vien); box-shadow:0 14px 30px -26px rgba(90,25,10,.75); overflow:hidden; }
.tc5-hang{ display:grid; grid-template-columns:36px 104px 64px minmax(150px, 1.3fr) minmax(120px, 1fr) minmax(100px, 1fr) 110px 104px 52px 40px; gap:8px; align-items:center; padding:9px 14px; }
.tc5-hang.dau{ background:#f6f1ea; border-bottom:1px solid var(--bt-vien); font-size:13.5px; font-weight:800; color:#3b2a20; }
.tc5-hang > span{ min-width:0; }
.tc5-dong{ border-bottom:1px solid rgba(125,35,20,.08); transition:background .2s; }
.tc5-dong:hover{ background:#fffaf2; }
.tc5-dong.mo{ background:#fffaf0; }
.tc5-ngay{ font-size:14px; font-weight:700; color:var(--bt-chu); }
.tc5-ca{ display:inline-grid; place-items:center; justify-self:start; min-width:52px; padding:3px 8px; border-radius:999px; font-size:12.5px; font-weight:800; background:#fff1f1; color:#c8102e; }
.tc5-dong .tg2-hs .hs2-av{ width:32px; height:32px; font-size:12px; }
.tc5-dong .tg2-hs b{ font-size:13.5px; }
.tc5-tg b{ font-weight:600 !important; }
.tc5-bai{ font-size:13.5px; color:var(--bt-chu); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tc5-loai{ display:inline-block; padding:3px 10px; border-radius:8px; font-size:12px; font-weight:800; white-space:nowrap; }
.tc5-loai.bo{ background:#e6f0ff; color:#1d4fa8; } .tc5-loai.bu{ background:#f0eaff; color:#5b3cc4; }
.tc5-dd{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:8px; font-size:12.5px; font-weight:800; white-space:nowrap; }
.tc5-dd.di{ background:#e3f6ea; color:#1e7a46; } .tc5-dd.vang{ background:#ffe9ea; color:#c8102e; }
.tc5-anh{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px; font-size:15px; color:#1d4fa8 !important; text-decoration:none; }
a.tc5-anh:hover{ background:#e6f0ff; }
.tc5-anh.chua{ color:#c2410c !important; } .tc5-anh.trong{ color:#c9bdb2 !important; }
#appShell#appShell .tc5-mo, #appShell#appShell .tc5-ba-cham{ width:30px; height:30px; padding:0; border-radius:8px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid transparent; color:#8a1a24; box-shadow:none; transition:background .2s, transform .25s; }
#appShell#appShell .tc5-mo:hover, #appShell#appShell .tc5-ba-cham:hover{ background:#fff3d6; border-color:#f0d49a; }
.tc5-mo i{ transition:transform .25s cubic-bezier(.22,1,.36,1); }
.tc5-dong.mo .tc5-mo i{ transform:rotate(90deg); }
.tc5-menu{ position:relative; display:inline-block; }
.tc5-menu-ds{ position:absolute; right:0; top:34px; z-index:20; display:flex; flex-direction:column; min-width:150px; padding:6px; border-radius:12px; background:#fff; border:1px solid var(--bt-vien); box-shadow:0 16px 30px -12px rgba(60,20,10,.45); }
.tc5-menu-ds[hidden]{ display:none; }
#appShell#appShell .tc5-menu-ds button{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; border:0; background:transparent; font:inherit; font-size:13.5px; font-weight:600; color:var(--bt-chu); cursor:pointer; text-align:left; box-shadow:none; }
#appShell#appShell .tc5-menu-ds button:hover{ background:#fff8e6; }
#appShell#appShell .tc5-menu-ds .bt-view-xoa{ color:#c8102e; }
.tc5-ct{ display:none; flex-wrap:wrap; align-items:center; gap:10px 26px; margin:0 14px 10px 58px; padding:10px 14px; border-radius:12px; background:#fff; border:1px dashed #ecd7ae; }
.tc5-dong.mo .tc5-ct{ display:flex; animation:bt4Mo .25s cubic-bezier(.22,1,.36,1); }
.tc5-ct > span{ display:flex; flex-direction:column; gap:1px; font-size:13.5px; color:var(--bt-chu); }
.tc5-ct small{ font-size:11.5px; font-weight:600; color:var(--bt-phu); }
.tc5-ct b{ font-weight:700; }
.tc5-ct-nut{ margin-left:auto; flex-direction:row !important; gap:8px !important; }
.tc5-chan{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px 16px; font-size:13.5px; color:var(--bt-phu); }
.tc5-chan b{ color:var(--bt-chu); }
.tc5-trang{ margin-left:auto; display:flex; align-items:center; gap:6px; }
#appShell#appShell .tc5-trang button{ min-width:36px; height:36px; padding:0 8px; border-radius:9px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; background:#fff; border:1px solid var(--bt-vien); color:var(--bt-chu); box-shadow:none; }
#appShell#appShell .tc5-trang button.chon{ background:linear-gradient(180deg, #ffe48a, #f6c33f); border-color:#c98a12; color:#2a1606; }
#appShell#appShell .tc5-trang button:disabled{ opacity:.45; cursor:default; }
.tc5-tk{ display:flex; flex-direction:column; border-radius:12px; border:1px solid var(--bt-vien); overflow:hidden; }
.tc5-tk-hang{ display:grid; grid-template-columns:minmax(120px, 1.5fr) repeat(5, minmax(60px, 1fr)); gap:8px; padding:9px 14px; font-size:13.5px; background:#fff; border-bottom:1px solid rgba(125,35,20,.08); }
.tc5-tk-hang:last-child{ border-bottom:0; }
.tc5-tk-hang.dau{ background:#f6f1ea; font-weight:800; color:#3b2a20; }
.tc5-tk-hang .xanh{ color:#1e7a46; font-weight:800; } .tc5-tk-hang .do{ color:#c8102e; font-weight:800; }

@media (max-width:1399.98px){
  .tc5-hang{ grid-template-columns:32px 96px 58px minmax(140px, 1.3fr) minmax(100px, .9fr) minmax(90px, 1fr) 100px 96px 44px 36px; gap:6px; padding:9px 10px; }
}
@media (max-width:1199.98px){
  .tc5-hang > span:nth-child(5), .tc5-hang > span:nth-child(6){ display:none; }
  .tc5-hang{ grid-template-columns:32px 96px 58px minmax(140px, 1fr) 100px 96px 44px 36px; }
  .tc5-loc{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .tc5-xem{ grid-column:1 / -1; }
}
@media (max-width:767.98px){
  .tc5-hang.dau{ display:none; }
  .tc5-hang{ grid-template-columns:30px minmax(0, 1fr) auto auto; grid-template-areas:'mo hs dd menu' 'mo ngay ca anh' 'mo loai loai loai'; gap:6px 8px; }
  .tc5-hang > span:nth-child(1){ grid-area:mo; } .tc5-hang > span:nth-child(2){ grid-area:ngay; font-size:13px; } .tc5-hang > span:nth-child(3){ grid-area:ca; }
  .tc5-hang > span:nth-child(4){ grid-area:hs; } .tc5-hang > span:nth-child(7){ grid-area:loai; } .tc5-hang > span:nth-child(8){ grid-area:dd; }
  .tc5-hang > span:nth-child(9){ grid-area:anh; } .tc5-hang > span:nth-child(10){ grid-area:menu; }
  .tc5-ct{ margin-left:10px; margin-right:10px; }
  .tc5-trang{ margin-left:0; flex-wrap:wrap; }
  .tc5-tk-hang{ grid-template-columns:minmax(90px, 1.3fr) repeat(5, minmax(36px, 1fr)); font-size:12.5px; padding:8px 10px; }
  #appShell#appShell .tc5-thanh #btViewTinhTrangFilter{ flex:1; }
}

/* ═════════════ MỤC THIẾT LẬP (Admin — .tl5-*, js/dang-ky-bo-tro.js veBangLichTruc_) ═════════════ */
.tl5-luoi{ display:grid; grid-template-columns:minmax(0, 1fr) 430px; gap:16px; align-items:start; margin-bottom:14px; }
.tl5-luoi > .card{ margin-bottom:0 !important; }
#appShell#appShell #pane-botro .card.p-3.tl5-lt{ padding:16px 18px !important; background:#fff !important; border:1px solid var(--bt-vien) !important; border-radius:16px !important; box-shadow:0 14px 30px -26px rgba(90,25,10,.75) !important; }
.tl5-lt-dau{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:12px; }
.tl5-lt-dau[hidden]{ display:none; }
.tl5-lt-dau > b{ font-size:17px; font-weight:900; color:var(--bt-do); }
.tl5-lt-loc{ margin-left:auto; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.tl5-lt-loc .tg2-o-icon{ min-width:200px; }
#appShell#appShell .tl5-lt-loc .form-select{ min-height:40px; }
.tl5-lt-loc .tg2-nut{ min-height:40px; }
.tl5-bang{ display:flex; flex-direction:column; border-radius:12px; border:1px solid var(--bt-vien); overflow:hidden; }
.tl5-hang{ display:grid; grid-template-columns:minmax(118px, 1.2fr) minmax(100px, 1fr) minmax(70px, .7fr) 54px minmax(86px, .8fr) 54px 64px 32px; gap:8px; align-items:center;
  padding:10px 12px; font-size:13.5px; background:#fff; border-bottom:1px solid rgba(125,35,20,.08); color:var(--bt-chu); }
.tl5-hang:last-child{ border-bottom:0; }
.tl5-hang.dau{ background:#f6f1ea; font-size:13.5px; font-weight:800; color:#3b2a20; }
.tl5-hang > span{ min-width:0; display:flex; flex-direction:column; }
.tl5-hang small{ font-size:12px; color:var(--bt-phu); }
.tl5-hang .tg2-hs{ flex-direction:row; }
.tl5-hang .tg2-hs .hs2-av{ width:34px; height:34px; font-size:12.5px; }
.tl5-thu-ca b{ font-size:14px; font-weight:800; }
.tl5-hang.ngung > :not(:nth-child(6)):not(:nth-child(7)):not(:nth-child(8)){ opacity:.5; }
.tl5-phong.tren{ color:#c8102e; font-weight:700; } .tl5-phong.duoi{ color:#1d6fa8; font-weight:700; }
/* công tắc bật / tắt */
.tl5-bat{ position:relative; display:inline-block; width:46px; height:26px; margin:0; cursor:pointer; }
.tl5-bat input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.tl5-bat > span{ position:absolute; inset:0; border-radius:999px; background:#d9d2cb; transition:background .25s; }
.tl5-bat > span::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.25); transition:transform .25s cubic-bezier(.22,1,.36,1); }
.tl5-bat input:checked + span{ background:linear-gradient(90deg, #f6c33f, #e39b16); }
.tl5-bat input:checked + span::after{ transform:translateX(20px); }
.tl5-bat input:focus-visible + span{ outline:2px solid #d81a32; outline-offset:2px; }
.tl5-bat input:disabled + span{ opacity:.6; }
/* form bên phải */
.tl5-form-cho{ position:sticky; top:96px; }
.tl5-form-cho:empty{ display:none; }
.tl5-form-cho .lt3-form{ background:#fff; border:1px solid var(--bt-vien); box-shadow:0 14px 30px -26px rgba(90,25,10,.75); }
.tl5-form-cho .lt3-buoc{ grid-template-columns:minmax(0, 1fr); gap:6px; }
.tl5-form-cho .lt3-nhan{ min-height:0; }
.tl5-form-cho .lt3-luoi{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tl5-form-cho .lt3-o-khoi{ grid-column:1 / -1; }
.tl5-form-cho #appShell .lt3-chon, #appShell#appShell .tl5-form-cho .lt3-chon{ min-width:44px; padding:0 10px; font-size:13.5px; }
.tl5-form-cho .lt3-chot-nut{ width:100%; } .tl5-form-cho .lt3-chot-nut .tg2-nut{ flex:1; }
.tl5-gap-tom{ font-size:13px; color:var(--bt-phu); }
.tl5-mo-tay{ margin-left:auto; }
.tl5-mo-tay + .bt4-gap-mui{ margin-left:8px; }
.tl5-khung-ds{ max-height:420px; overflow-y:auto; padding-right:4px; }
.tl5-mo-tay-khung{ padding:12px 14px; border-radius:12px; border:1px dashed #e9c98a; background:var(--bt-kem); }
.tl5-mo-tay-khung > summary{ cursor:pointer; color:#8a4f00; }

@media (max-width:1399.98px){ .tl5-luoi{ grid-template-columns:minmax(0, 1fr); } .tl5-form-cho{ position:static; } }
@media (max-width:991.98px){
  .tl5-hang.dau{ display:none; }
  .tl5-hang{ grid-template-columns:minmax(0, 1fr) auto auto 36px; grid-template-areas:'tg bat sua ba' 'tc tc tc tc' 'khoi cho phong phong'; }
  .tl5-hang > span:nth-child(1){ grid-area:tg; } .tl5-hang > span:nth-child(2){ grid-area:tc; } .tl5-hang > span:nth-child(3){ grid-area:khoi; }
  .tl5-hang > span:nth-child(4){ grid-area:cho; } .tl5-hang > span:nth-child(5){ grid-area:phong; } .tl5-hang > span:nth-child(6){ grid-area:bat; }
  .tl5-hang > span:nth-child(7){ grid-area:sua; } .tl5-hang > span:nth-child(8){ grid-area:ba; }
  .tl5-lt-loc{ margin-left:0; width:100%; } .tl5-lt-loc .tg2-o-icon{ flex:1; min-width:0; }
  .tl5-mo-tay{ margin-left:0; }
}

@media (max-width:767.98px){ .lt5-loc{ flex:1 1 100% !important; } .lt5-tuan{ font-size:13px !important; } }

/* Buổi bổ trợ THỨ 2 trong tuần — chờ Admin duyệt (17/10/2026, js/dang-ky-bo-tro.js veDuyet_) */
.lt5-duyet{ background:#fff4f2; border-color:#f0b9ae; }
.lt5-bang-duyet .lt5-hang{ grid-template-columns:minmax(110px, 1fr) minmax(110px, 1fr) minmax(150px, 1.3fr) auto; }
.lt5-bang-duyet .lt5-bai{ font-size:12.5px; line-height:1.45; }
.dkbt-duyet-gan-khung{ margin-top:8px; font-size:12.5px; } .dkbt-duyet-gan-khung summary{ cursor:pointer; font-weight:700; color:var(--bt-phu); }
.dkbt-duyet-gan{ padding:4px 2px; border-bottom:1px dashed #ead9cc; }
@media (max-width:760px){ .lt5-bang-duyet .lt5-hang{ grid-template-columns:minmax(0, 1fr) auto; } .lt5-bang-duyet .lt5-hang > span:nth-child(3){ grid-column:1 / -1; } }
.lt5-bang-duyet .lt5-cho-nut{ flex-direction:column; align-items:stretch; gap:6px; }
.lt5-bang-duyet .lt5-hang{ grid-template-columns:minmax(100px, 1fr) minmax(100px, 1fr) minmax(130px, 1.2fr) minmax(86px, auto); }

.dkbt-duyet-het{ display:flex; align-items:center; gap:10px; margin:0 0 10px; flex-wrap:wrap; } .dkbt-duyet-het .dc-kq{ font-size:12.5px; font-weight:700; color:var(--bt-phu); }

/* Cảnh báo dòng ghi "Bù bài" nhưng lịch hẹn không phải Bù bài / em không vắng buổi chính khoá (app.js btVeCanhBu_, 01/11/2026) — chỉ nhắc, không chặn lưu */
.bt-lech-bu{ grid-column:1 / -1; display:flex; gap:8px; align-items:flex-start; margin-top:4px; padding:7px 10px; border-radius:10px; background:#fde7e5; border:1px solid #e9a6a0; color:#8a1a14; font-size:12.5px; font-weight:600; line-height:1.35; }
.bt-lech-bu i{ margin-top:2px; }

/* =====================================================================================
 * THẺ PHẠT CA BỔ TRỢ ("3 khiên", thay đặt cọc) — giao diện NHÂN VIÊN (thầy chốt 05/10/2026). Nạp SAU bo-tro-moi.css.
 *   .bt4-coc / .coc-*   khối "Khiên n/3" + nút ghi nhận (vắng có / không phép, trễ, không hợp tác) ở cuối dòng em trong Nhập buổi bổ trợ (js/dat-coc-nv.js htmlDong)
 *   .dc-*               mục con "Thẻ phạt" của tab Bổ trợ (js/dat-coc-nv.js khungHtml)
 * Kiểu đỏ rượu – vàng như phần Bổ trợ; luật chung của khung nhân viên rất mạnh nên chỗ cần đè dùng #appShell#appShell.
 * ===================================================================================== */

/* ── A) Khối cọc trên dòng bổ trợ ── */
.bt4-coc{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:2px 0 0 40px; padding:8px 12px; border-radius:11px;
  background:#fff7ee; border:1px dashed #efc59a; animation:dcMo .25s cubic-bezier(.22,1,.36,1); }
@keyframes dcMo{ from{ opacity:0; transform:translateY(-4px); } }
.bt4-coc.khoa{ background:#fff0f0; border:1px solid #f1b8bd; }
.bt4-coc.nhay{ animation:dcNhay .6s ease 3; }
@keyframes dcNhay{ 50%{ box-shadow:0 0 0 4px rgba(200,16,46,.28); background:#ffe5e8; } }
.coc-nhan{ display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-size:12.5px; font-weight:800; white-space:nowrap;
  background:#8e1b24; color:#f6c33f; }
.coc-nhan.khoa{ background:#c8102e; color:#fff; }
.bt4-coc.chua{ background:#fff3d6; border:1px solid #f1c27a; }
.coc-nhan.chua{ background:#d97706; color:#fff; }
/* Lịch hẹn (ô ③, js/lich-bo-tro.js): em chưa đồng ý nội quy — nhãn "Chờ đồng ý nội quy" + dòng nhắc, hàng mờ nhẹ, ô tích bị khoá */
.lbt4-dong.chua-coc{ background:#fffaf0; border-color:#f1c27a; }
.lbt4-coc-nhac{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:2px 0 0 32px; font-size:12.5px; color:#8a4b08; }
.lbt4-coc-nhan{ display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; background:#d97706; color:#fff; }
.lbt4-coc-nhan.khoa{ background:#c8102e; }
.coc-ghi{ font-size:12.5px; color:#8a1a24; }
.coc-nhom{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; padding:3px 6px 3px 10px; border-radius:16px; border:1px solid transparent; }
.coc-nhom > b{ font-size:12.5px; font-weight:800; color:#3b2a20; }
.coc-nhom.thieu{ background:#fff3d6; border-color:#f1c27a; }
#appShell#appShell .coc-chip{ min-height:30px; padding:0 12px; border-radius:999px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
  background:#fff !important; color:#6b5448 !important; border:1px solid rgba(125,35,20,.2) !important; box-shadow:none !important; transition:background .2s, color .2s, border-color .2s; }
#appShell#appShell .coc-chip:hover{ border-color:#e9b84c !important; background:#fff8e6 !important; }
#appShell#appShell .coc-chip.on.ok{ background:#1e9a55 !important; color:#fff !important; border-color:#1e9a55 !important; }
#appShell#appShell .coc-chip.on.tru{ background:#d81a32 !important; color:#fff !important; border-color:#d81a32 !important; }
.coc-kl{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; }
.coc-kl.tru{ color:#b3101f; } .coc-kl.khong{ color:#1e7a46; } .coc-kl.chua{ color:#b45309; }
@media (max-width:991.98px){
  .bt4-dong.co-coc{ grid-template-areas:'c hs hs them' '. bai bai bai' '. loai phong phong' '. dd dd dd' 'coc coc coc coc' 'ct ct ct ct'; }
  .bt4-coc{ grid-area:coc; margin-left:0; }
  #appShell#appShell .coc-chip{ min-height:38px; font-size:13.5px; }
}

/* Nhãn khiên theo số khiên còn lại: đủ = xanh, mất 1 = vàng, còn ≤ 1 = đỏ */
.coc-nhan.khien.xanh{ background:#17703f; color:#fff; }
.coc-nhan.khien.vang{ background:#f6c33f; color:#4a2f00; }
.coc-nhan.khien.do{ background:#c8102e; color:#fff; }
.coc-ghi.nhac{ display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; background:#fff3d6; color:#8a4b08; font-weight:700; }
.coc-kl-o:empty{ display:none; }
.coc-goiy{ display:inline-flex; align-items:center; gap:6px; flex:1 1 100%; padding:4px 10px; border-radius:10px; background:#fff3c4; border:1px solid #f1d27a; color:#7a5200; font-size:12.5px; font-weight:700; }
#appShell#appShell .bt4-coc .bt-thaido{ flex:1 1 240px; min-width:0; max-width:100%; min-height:32px; border-radius:10px; font-size:13px; }
#appShell#appShell .bt4-coc .bt-thaido.thieu{ border-color:#e0a03a !important; background:#fffaf0 !important; }
@media (max-width:991.98px){ #appShell#appShell .bt4-coc .bt-thaido{ flex-basis:100%; min-height:40px; font-size:14px; } }

/* ── B) Mục Thẻ phạt ── */
.dc{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.dc .dc-gt{ margin:0; padding:10px 14px; border-radius:12px; background:#fff8e6; border:1px solid #f1dfb3; color:#6b4a12; font-size:13.5px; }
.dcnv-loi{ display:flex; gap:8px; align-items:center; padding:10px 14px; border-radius:12px; background:#fff0f0; border:1px solid #f1b8bd; color:#8a1a24; font-weight:700; font-size:14px; }
.dcnv-loi[hidden]{ display:none; }
.dc-the{ gap:12px; }

/* thẻ số */
.dc-so{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.dc-so-the{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; background:#fff; border:1px solid var(--bt-vien); box-shadow:0 14px 30px -26px rgba(90,25,10,.75); position:relative; overflow:hidden; }
.dc-so-the::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:#cfc3b8; }
.dc-so-the.vang::before{ background:#f6c33f; } .dc-so-the.xanh::before{ background:#1e9a55; } .dc-so-the.do::before{ background:#c8102e; }
.dc-so-huy{ width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:17px; color:#fff; background:#a99c92; }
.dc-so-the.vang .dc-so-huy{ background:linear-gradient(135deg, #f6c33f, #d9930d); color:#4a2f00; }
.dc-so-the.xanh .dc-so-huy{ background:linear-gradient(135deg, #2bb673, #12804a); }
.dc-so-the.do .dc-so-huy{ background:linear-gradient(135deg, #e0192f, #8e0a17); }
.dc-so-noi{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.dc-so-noi small{ font-size:12.5px; font-weight:700; color:var(--bt-phu); }
.dc-so-noi b{ font-size:22px; font-weight:900; color:var(--bt-chu); letter-spacing:.01em; }
.dc-so-noi em{ font-style:normal; font-size:12px; color:var(--bt-phu); }

/* mời bổ trợ */
.dc-moi{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:14px 18px; align-items:start; }
.dc-cot{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.dc-o{ display:flex; flex-direction:column; gap:4px; margin:0; min-width:0; }
.dc-o > span:first-child{ font-size:13px; font-weight:700; color:var(--bt-chu); }
.dc-o > span:first-child small{ font-weight:500; color:var(--bt-phu); }
.dc-ghep{ display:flex; gap:8px; min-width:0; }
.dc-ghep .form-control{ flex:1; min-width:0; }
#appShell#appShell .dc :is(.form-control, .form-select){ min-height:40px; border-radius:10px; font-size:14px; }
#appShell#appShell .dc textarea.form-control{ min-height:96px; resize:vertical; }
.dc-goiy{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.dc-chips{ display:flex; flex-wrap:wrap; gap:6px; }
#appShell#appShell .dc-chip-nut{ padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700; cursor:pointer; background:#fff8e6 !important; color:#7a4a00 !important;
  border:1px solid #ecd7ae !important; box-shadow:none !important; }
#appShell#appShell .dc-chip-nut:hover{ background:#ffe9a3 !important; }
.dc-chip-nut small{ color:#a07a3a; margin-left:4px; }
.dc-nho{ font-size:12.5px; color:var(--bt-phu); }
.dcnv-loi-chu{ color:#b3101f; font-size:13px; font-weight:700; }
.dc-xem-ds{ display:flex; flex-direction:column; border:1px solid var(--bt-vien); border-radius:12px; overflow:hidden; max-height:340px; overflow-y:auto; }
.dc-xem-dong{ display:grid; grid-template-columns:minmax(0, 1fr) auto 30px; gap:10px; align-items:center; padding:7px 12px; background:#fff; border-bottom:1px solid rgba(125,35,20,.08); }
.dc-xem-dong:last-child{ border-bottom:0; }
.dc-xem-dong.bo{ background:#faf6f3; }
.dc-xem-dong.bo .dc-xem-ten{ opacity:.65; }
.dc-xem-ten{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.dc-xem-ten b{ font-size:14px; color:var(--bt-chu); }
.dc-xem-ten small{ font-size:12px; color:var(--bt-phu); }
#appShell#appShell .dc-xoa-ma{ width:28px; height:28px; padding:0; border-radius:8px; display:grid; place-items:center; cursor:pointer; background:#fff !important; color:#8a7a70 !important; border:1px solid var(--bt-vien) !important; box-shadow:none !important; }
#appShell#appShell .dc-xoa-ma:hover{ color:#c8102e !important; border-color:#f1b8bd !important; }
.dc-chan{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; }
.dc-kq{ font-size:13.5px; font-weight:700; color:var(--bt-phu); }
.dc-kq.ok{ color:#1e7a46; } .dc-kq.loi{ color:#b3101f; }

/* chip trạng thái */
.dc-chip{ display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; background:#eee8e2; color:#6b5448; }
.dc-chip.xanh, .dc-chip.ok{ background:#dff3e6; color:#17703f; } .dc-chip.vang{ background:#fff0c2; color:#8a5a00; } .dc-chip.do{ background:#ffe0e3; color:#b3101f; }

/* bảng đỏ rượu chữ vàng */
.dc-cuon{ overflow-x:auto; border-radius:12px; border:1px solid var(--bt-vien); }
#appShell#appShell .dc-bang{ width:100%; border-collapse:collapse; font-size:14px; background:#fff; }
#appShell#appShell .dc-bang th{ padding:9px 12px; text-align:left; white-space:nowrap; font-size:13px; font-weight:800; background:#8e1b24; color:#f6c33f; border:0; }
#appShell#appShell .dc-bang td{ padding:9px 12px; vertical-align:middle; border-bottom:1px solid rgba(125,35,20,.09); color:var(--bt-chu); background:transparent; }
#appShell#appShell .dc-bang tbody tr:last-child td{ border-bottom:0; }
#appShell#appShell .dc-bang tbody tr:hover td{ background:#fffaf2; }
.dc-bang td b{ display:block; font-size:14px; }
.dc-bang td small{ display:block; font-size:12px; color:var(--bt-phu); }
.dc-nut-o{ white-space:nowrap; text-align:right; }
.bt4-the-dau > b > .dc-dem, .dc-dem{ display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px; margin-left:6px; border-radius:999px; font-size:13px; font-weight:800; background:#c8102e; color:#fff; vertical-align:middle; letter-spacing:0; }
.bt4-the-dau > b > .dc-dem{ color:#fff; }
.bt4-the-dau > b > .dc-dem.khong, .dc-dem.khong{ background:#cfc3b8; color:#fff; }
.dc-trong{ display:flex; align-items:center; gap:8px; padding:16px; border-radius:12px; background:#faf6f3; color:var(--bt-phu); font-size:14px; }
.dc-trong i{ color:#1e9a55; font-size:18px; }

/* lọc các đợt */
.dc-locs{ display:flex; flex-wrap:wrap; gap:8px; }
#appShell#appShell .dc-loc{ padding:5px 14px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; background:#fff !important; color:#6b5448 !important; border:1px solid var(--bt-vien) !important; box-shadow:none !important; }
#appShell#appShell .dc-loc b{ margin-left:4px; color:#b3101f; }
#appShell#appShell .dc-loc.on{ background:#8e1b24 !important; color:#f6c33f !important; border-color:#8e1b24 !important; }
#appShell#appShell .dc-loc.on b{ color:#fff; }
.dc-tim{ min-width:220px; }
.dc-them{ align-self:center; }

/* khiên + các thẻ phạt trong bảng các em */
.dcnv-khien{ display:inline-flex; gap:4px; font-size:17px; white-space:nowrap; }
.dcnv-khien .con{ color:#17703f; } .dcnv-khien.vang .con{ color:#d9930d; } .dcnv-khien.do .con{ color:#c8102e; }
.dcnv-khien .mat{ color:#d9cfc6; }
.dcnv-cac-the{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.dcnv-the-phat{ display:inline-block; max-width:100%; padding:2px 9px; border-radius:9px; font-size:12.5px; font-weight:700; line-height:1.35; background:#ffe0e3; color:#8a1a24; overflow-wrap:anywhere; }
.dcnv-the-phat.mo{ background:#f1ece7; color:#9a8d83; font-weight:600; text-decoration:line-through; }
.dc-bang td small.dcnv-chi-tiet{ color:#6b5448; font-style:italic; overflow-wrap:anywhere; }
@media (min-width:992px){ #appShell#appShell .dc-bang td[data-nhan="Lý do"], #appShell#appShell .dc-bang td[data-nhan="Thẻ phạt"]{ min-width:180px; max-width:360px; white-space:normal; } }
@media (max-width:991.98px){ .dcnv-cac-the{ align-items:flex-end; } .dcnv-the-phat{ text-align:right; } }

/* hộp tin Zalo sau khi duyệt thẻ */
.dcnv-tin{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:14px; background:#f0faf3; border:1px solid #9fd3b1; animation:dcMo .25s cubic-bezier(.22,1,.36,1); }
.dcnv-tin.khoa{ background:#fff0f0; border-color:#f1b8bd; }
.dcnv-tin-dau{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14.5px; color:#17703f; }
.dcnv-tin.khoa .dcnv-tin-dau{ color:#b3101f; }
#appShell#appShell .dcnv-tin-dong{ width:32px; height:32px; flex:none; padding:0; border-radius:9px; display:grid; place-items:center; cursor:pointer; background:#fff !important; color:#8a7a70 !important; border:1px solid rgba(125,35,20,.15) !important; box-shadow:none !important; }
#appShell#appShell .dc textarea.dcnv-tin-nd{ min-height:110px; font-size:13.5px; line-height:1.5; background:#fff !important; color:#2a1810 !important; -webkit-text-fill-color:#2a1810; opacity:1; }
.dcnv-tin-nut{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.dcnv-tin-nhac{ margin:0; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; }
.dcnv-tin-nhac.vang{ color:#8a5a00; } .dcnv-tin-nhac.do{ color:#b3101f; }

/* tiền cọc cũ & cấn trừ: gập sẵn */
.dcnv-tien-cu{ border:1px dashed #d9c7b8; border-radius:14px; background:#fbf8f5; }
.dcnv-tien-cu > summary{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 16px; cursor:pointer; font-size:14px; font-weight:800; color:#6b5448; list-style:none; }
.dcnv-tien-cu > summary::-webkit-details-marker{ display:none; }
.dcnv-tien-cu > summary::after{ content:'▾'; margin-left:auto; transition:transform .2s; }
.dcnv-tien-cu[open] > summary::after{ transform:rotate(180deg); }
.dcnv-tien-cu > summary small{ font-weight:700; color:#b3101f; }
.dcnv-tien-cu-than{ display:flex; flex-direction:column; gap:16px; padding:0 12px 14px; min-width:0; }
.dcnv-tien-cu-than > p{ margin:0; }

/* phản hồi + chờ hoàn */
.dc-hai-cot{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:start; }
.dc-ds{ display:flex; flex-direction:column; gap:8px; max-height:360px; overflow-y:auto; }
.dc-ph{ padding:10px 12px; border-radius:12px; background:#fff8e6; border:1px solid #f1dfb3; font-size:14px; }
.dc-ph-nut{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.dc-ph-nut .tg2-nut-nho{ white-space:normal; text-align:left; }
.dc-ph-nd{ margin:4px 0 2px; color:#4a3a2a; overflow-wrap:anywhere; }
.dc-hoan{ display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:10px; align-items:center; padding:9px 12px; border-radius:12px; background:#fff; border:1px solid var(--bt-vien); }
.dc-hoan small{ color:var(--bt-phu); }
.dc-tien{ font-size:15px; color:#b3101f; }

/* cấn trừ bổ trợ đã đóng */
.dc-ct-form{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap:10px 14px; align-items:end; }
.dc-o-rong{ grid-column:1 / 4; }
.dc-ct-goiy{ display:flex; flex-direction:column; gap:8px; }
.dc-gy{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:10px 12px; border-radius:12px; background:#fff8e6; border:1px dashed #e9c98a; font-size:13.5px; color:#4a3a2a; }
.dc-gy > span{ flex:1; min-width:240px; }
.dc-h6{ margin:6px 0 0; font-size:14px; font-weight:800; color:var(--bt-do); text-transform:uppercase; letter-spacing:.01em; }

/* hộp thoại nhỏ */
.dc-hop-nen{ position:fixed; inset:0; z-index:2400; display:grid; place-items:center; padding:16px; background:rgba(40,12,8,.55); animation:dcMo .2s ease; }
.dc-hop{ width:min(480px, 100%); max-height:90vh; overflow:auto; border-radius:18px; background:#fff; color:#2a1810; box-shadow:0 30px 60px -20px rgba(60,10,5,.7); border-top:5px solid #f6c33f; }
.dc-hop-dau{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 8px; font-size:17px; color:#8e1b24; }
.dc-hop-dong{ width:32px; height:32px; border-radius:9px; border:1px solid rgba(125,35,20,.15); background:#fff; color:#8a7a70; cursor:pointer; }
.dc-hop-than{ display:flex; flex-direction:column; gap:10px; padding:4px 18px 8px; font-size:14px; }
.dc-hop-than p{ margin:0; }
.dc-hop-than .dc-o > span:first-child{ font-size:13px; font-weight:700; }
.dc-hop-than textarea, .dc-hop-than select{ width:100%; padding:8px 10px; border-radius:10px; border:1px solid rgba(125,35,20,.25); font:inherit; }
.dc-radio{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; font-size:14px; }
.dc-radio .form-select{ width:auto; min-width:150px; }
.dc-hop-loi{ min-height:20px; padding:0 18px; color:#b3101f; font-size:13px; font-weight:700; }
.dc-hop-chan{ display:flex; justify-content:flex-end; gap:10px; padding:8px 18px 16px; }

/* ── màn hình hẹp ── */
@media (max-width:991.98px){
  .dc-moi, .dc-hai-cot{ grid-template-columns:minmax(0, 1fr); }
  .dc-ct-form{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .dc-o-rong{ grid-column:1 / -1; }
  .dc-tim{ min-width:0; width:100%; }
  /* bảng → thẻ */
  #appShell#appShell .dc-bang thead{ display:none; }
  #appShell#appShell .dc-bang, #appShell#appShell .dc-bang tbody, #appShell#appShell .dc-bang tr, #appShell#appShell .dc-bang td{ display:block; width:100%; }
  #appShell#appShell .dc-bang tr{ padding:10px 12px; border-bottom:1px solid rgba(125,35,20,.12); }
  #appShell#appShell .dc-bang td{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 0; border:0; text-align:right; }
  #appShell#appShell .dc-bang td::before{ content:attr(data-nhan); flex:none; font-size:12px; font-weight:700; color:var(--bt-phu); text-align:left; }
  #appShell#appShell .dc-bang td.dc-nut-o{ justify-content:flex-end; flex-wrap:wrap; padding-top:8px; }
  #appShell#appShell .dc-bang td.dc-nut-o::before{ content:none; }
  #appShell#appShell .dc-bang td b, #appShell#appShell .dc-bang td small{ text-align:right; }
}
@media (max-width:575.98px){
  .dc-ct-form{ grid-template-columns:minmax(0, 1fr); }
  .dc-hoan{ grid-template-columns:minmax(0, 1fr) auto; } .dc-hoan .tg2-nut-nho{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){ .bt4-coc, .bt4-coc.nhay, .dc-hop-nen, .dcnv-tin{ animation:none !important; } .dcnv-tien-cu > summary::after{ transition:none; } }

/* ô nhiều phần trong bảng → gom 1 khối để bản thẻ (điện thoại) không bị tách 2 đầu */
.dcnv-ly-do{ display:flex; flex-direction:column; min-width:0; }
.dcnv-se-la{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:0; }
@media (max-width:991.98px){ .dcnv-ly-do{ align-items:flex-end; text-align:right; } .dcnv-se-la{ justify-content:flex-end; } }

/* =====================================================================================
 * ĐỢT BỔ TRỢ — giao diện NHÂN VIÊN (thầy chốt 05/10/2026). Nạp SAU dat-coc-nv.css (dùng lại .dc-*, .dc-bang, .dc-chip, .dc-hop-*).
 *   .dbt-*  chỉ phần riêng của mục con "Đợt bổ trợ" (js/dot-bo-tro-nv.js). Kiểu đỏ rượu – vàng như phần Bổ trợ.
 * ===================================================================================== */

.dbt-than{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.dbt-kq:empty{ display:none; }
.dbt-kq{ padding:9px 14px; border-radius:12px; background:#fff; border:1px solid var(--bt-vien); }

/* chọn đợt + thông tin đợt */
.dbt-chon-hang{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 16px; }
.dbt-chon{ flex:1 1 320px; min-width:0; }
.dbt-nut-hang{ display:flex; flex-wrap:wrap; gap:8px; }
#appShell#appShell .dbt-nut-hang .tg2-nut.do{ background:#8e1b24 !important; color:#f6c33f !important; border:1px solid #8e1b24 !important; }
.dbt-tt-luoi{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.dbt-tt{ display:flex; flex-direction:column; gap:2px; padding:9px 12px; border-radius:12px; background:#faf6f3; border:1px solid rgba(125,35,20,.1); line-height:1.3; }
.dbt-tt small{ font-size:12px; font-weight:700; color:var(--bt-phu); }
.dbt-tt b{ font-size:14.5px; color:var(--bt-chu); }
.dbt-ghi-chu{ margin:0; }

/* nhắc KTBT */
.dc .dbt-nhac{ margin:0; padding:10px 14px; border-radius:12px; background:#fff8e6; border:1px solid #f1dfb3; color:#6b4a12; font-size:13.5px; }

/* một ca */
.dbt-ca-dau{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding-bottom:4px; }
.dbt-ca-ten{ font-size:16px; color:#8e1b24; }
.dbt-ca-tg{ font-size:13.5px; color:var(--bt-chu); font-weight:700; }
.dbt-ca-tg i{ color:#c8102e; margin-right:4px; }
.dbt-si-so{ margin-left:auto; padding:2px 12px; border-radius:999px; font-size:13px; font-weight:700; background:#dff3e6; color:#17703f; }
.dbt-si-so.day{ background:#ffe0e3; color:#b3101f; }
.dbt-ca-chan{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }

/* bảng em */
.dbt-chips{ display:flex; flex-wrap:wrap; gap:4px; }
.dbt-buoi{ display:inline-flex; gap:5px; vertical-align:middle; }
.dbt-so-buoi{ display:inline !important; margin-left:7px; font-weight:800; color:var(--bt-chu) !important; }
.dbt-cham{ width:14px; height:14px; border-radius:50%; background:#e3dbd4; border:2px solid #cfc3b8; box-sizing:border-box; display:inline-block; }
.dbt-cham.di{ background:#1e9a55; border-color:#1e9a55; }
.dbt-cham.vang{ background:#d81a32; border-color:#d81a32; }
.dbt-cham.sap{ background:#fff; border-color:#e9b84c; }
.dbt-cham.chua{ background:#f6c33f; border-color:#d9930d; }
.dbt-diem-tuan{ display:inline-flex; flex-wrap:wrap; gap:4px; }
.dbt-diem{ min-width:26px; padding:1px 6px; border-radius:8px; text-align:center; font-size:13px; font-weight:800; background:#fff0c2; color:#6b4a12; }
.dbt-diem.trong{ background:#f1ece7; color:#a99c92; font-weight:600; }
.dc-bang td .dc-chip b{ display:inline; font-size:inherit; margin-left:3px; }
#appShell#appShell .dbt-bang .dbt-mt{ width:78px; text-align:center; min-height:34px; }

/* đánh giá trợ giảng */
#appShell#appShell .dbt-dg th.dbt-cot-chinh{ background:#c8102e; color:#fff; }
#appShell#appShell .dbt-dg td.dbt-cot-chinh{ background:#fff4d6; }
#appShell#appShell .dbt-dg td.dbt-cot-chinh b{ display:inline; font-size:18px; color:#8e1b24; }
.dbt-hang{ display:inline-flex; align-items:center; gap:4px; font-weight:900; font-size:15px; color:#8e1b24; }
.dbt-hang i{ color:#d9930d; }
.dbt-hang1 td b{ color:#8e1b24; }
.dbt-it-dl{ display:block; color:#b45309 !important; font-weight:700; }
.dbt-da-co{ color:#17703f !important; font-weight:700; }
.dbt-th-thang{ display:inline-flex; align-items:center; gap:8px; margin:0; font-size:13px; font-weight:700; }
#appShell#appShell .dbt-th-tien{ width:130px; }
#appShell#appShell .dbt-th-lydo{ min-width:220px; }

/* xác nhận kết thúc đợt */
.dbt-xac-nhan{ padding:10px 12px; border-radius:12px; background:#fff0f0; border:1px solid #f1b8bd; color:#8a1a24; }
.dbt-xac-nhan i{ margin-right:4px; }

/* form tạo / sửa đợt */
.dbt-form-luoi{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px 14px; }
.dbt-rong{ grid-column:1 / -1; }
.dbt-ca-tieu{ margin-top:6px; }
.dbt-ds-ca{ display:flex; flex-direction:column; gap:12px; }
.dbt-ca-dong{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px 12px; align-items:end; padding:12px; border-radius:14px; background:#faf6f3; border:1px solid rgba(125,35,20,.12); }
.dbt-ca-dong .dbt-nd{ grid-column:span 2; }
.dbt-khoi-chon{ display:flex; flex-wrap:wrap; gap:6px; min-height:40px; align-items:center; }
.dbt-tich{ display:inline-flex; align-items:center; gap:5px; margin:0; padding:4px 10px; border-radius:999px; background:#fff; border:1px solid var(--bt-vien); font-size:13.5px; font-weight:700; cursor:pointer; }
.dbt-xoa-ca{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; grid-column:1 / -1; }
.dbt-form-chan{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 14px; }

@media (max-width:991.98px){
  .dbt-si-so{ margin-left:0; }
  .dbt-ca-dong .dbt-nd{ grid-column:1 / -1; }
  #appShell#appShell .dbt-bang .dbt-mt{ width:96px; min-height:40px; }
  #appShell#appShell .dbt-th-tien{ width:140px; }
  #appShell#appShell .dbt-th-lydo{ min-width:0; width:100%; }
}
@media (max-width:575.98px){
  .dbt-form-luoi, .dbt-ca-dong{ grid-template-columns:minmax(0, 1fr); }
  .dbt-chon{ flex-basis:100%; }
  .dbt-nut-hang .tg2-nut{ flex:1 1 auto; }
}

/* =====================================================================================
 * THƯỞNG CHO TRỢ GIẢNG CÓ NHIỀU HỌC SINH TIẾN BỘ NHẤT (js/thuong-tien-bo.js, 05/10/2026) — khung thông báo kiểu .tg2-ghi.vang có cúp,
 * dòng "Em tiến bộ" ở bảng lương (.lg2-tb) và hàng "Chia đều cho top" ở mục Đợt bổ trợ (.dbt-chia-hang).
 * Nạp SAU tro-giang-nhom.css và dot-bo-tro-nv.css.
 * ===================================================================================== */
.ttb-khung{ align-items:flex-start; gap:14px; margin:0 0 14px; padding:14px 16px; border-left:5px solid #d98b0b; box-shadow:0 2px 10px rgba(142,27,36,.08); }
.ttb-khung > i{ font-size:28px; margin-top:2px; color:#d98b0b; }
.ttb-tieu-de{ display:block; font-size:14.5px; letter-spacing:.03em; color:#8e1b24; margin-bottom:6px; }
.ttb-ds{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:3px; font-size:13.5px; line-height:1.5; }
.ttb-ds li::marker{ color:#d98b0b; }
@media (max-width:575px){ .ttb-khung{ padding:12px; gap:10px; } .ttb-khung > i{ font-size:22px; } .ttb-tieu-de{ font-size:13.5px; } }

/* bảng lương: dòng em tiến bộ dưới ô Bổ trợ */
.lg2-tb{ margin-top:6px; padding:5px 8px; border-radius:8px; background:#fff3d6; border:1px solid #f1dfb3; color:#6b4a12; font-size:12.5px; line-height:1.4; }
.lg2-tb b{ color:#8e1b24; }

/* mục Đợt bổ trợ: ô tổng thưởng + nút chia đều */
.dbt-chia-hang{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 14px; margin:0 0 10px; }
.dbt-chia-hang .dc-o{ min-width:220px; flex:0 1 260px; }
.dbt-chia-hang small{ flex:1 1 100%; }

/* Cảnh báo trợ giảng up video bài giảng đúng tiến độ (12/10/2026) — thẻ trên đầu tab Bài giảng (app.js veTienDoVideo_) */
.tdv{ margin:0 0 18px; padding:16px 18px; background:#fff; border:2px solid #1c1c1c; border-radius:14px; box-shadow:4px 4px 0 rgba(0,0,0,.18); }
.tdv[hidden]{ display:none; }
.tdv-dau{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.tdv-dau > div{ flex:1 1 260px; min-width:0; }
.tdv-dau b{ display:block; font-size:18px; font-weight:800; }
.tdv-dau small{ display:block; color:#5c5c5c; font-size:13px; line-height:1.4; }
.tdv-bieu{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#e7f6ea; color:#1f7a35; font-size:18px; flex:none; }
.tdv-bieu.co{ background:#fde8e8; color:#b3151f; }
.tdv-luoi{ display:grid; gap:10px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.tdv-hang{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px 10px; align-items:center; padding:12px 14px; border-radius:12px; border:1.5px solid #e1d9c8; background:#fffdf7; }
.tdv-hang.tdv-vang{ border-color:#e0a800; background:#fff8e1; }
.tdv-hang.tdv-do{ border-color:#b3151f; background:#fdecec; }
.tdv-ten b{ display:block; font-size:16px; font-weight:800; }
.tdv-ten span{ color:#5c5c5c; font-size:13px; }
.tdv-giua{ grid-column:1 / -1; }
.tdv-giua small{ display:block; margin-top:4px; color:#4a4a4a; font-size:13px; }
.tdv-thanh{ height:9px; border-radius:99px; background:#eadfc8; overflow:hidden; }
.tdv-thanh i{ display:block; height:100%; border-radius:99px; background:#2e9e4a; }
.tdv-vang .tdv-thanh i{ background:#e0a800; }
.tdv-do .tdv-thanh i{ background:#b3151f; }
.tdv-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px; font-size:13px; font-weight:700; white-space:nowrap; }
.tdv-chip-ok{ background:#e0f3e4; color:#17602a; }
.tdv-chip-vang{ background:#ffefb8; color:#7a5200; }
.tdv-chip-do{ background:#b3151f; color:#fff; }
.tdv-tuan-ds{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:5px; }
.tdv-tuan{ padding:2px 8px; border-radius:6px; background:#f1ead9; font-size:12.5px; color:#4a4a4a; }
.tdv-tuan b{ color:#1c1c1c; }
.tdv-tuan.nghi{ background:#e2e8f5; }
.tdv-nghi{ margin-top:12px; border-top:1px dashed #cfc5ad; padding-top:10px; }
.tdv-nghi summary{ cursor:pointer; font-weight:700; }
.tdv-form{ display:grid; grid-template-columns:170px 140px minmax(0, 1fr) auto; gap:8px 10px; align-items:end; margin:10px 0 6px; }
.tdv-form label{ font-size:13px; font-weight:700; display:flex; flex-direction:column; gap:3px; }
.tdv-them{ background:#b3151f; color:#fff; font-weight:700; border:0; }
.tdv-them:hover{ background:#8f1019; color:#fff; }
.tdv-msg{ min-height:18px; font-size:13px; color:#1f7a35; }
.tdv-msg.loi{ color:#b3151f; }
.tdv-ds{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px; }
.tdv-ds li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 10px; border-radius:8px; background:#f6f1e4; font-size:14px; }
.tdv-xoa{ border:0; background:transparent; color:#b3151f; padding:2px 8px; }
.tdv-trong{ margin:6px 0 0; color:#6a6a6a; font-size:13.5px; }
.tdv-nghi-ngay{ margin-top:12px; padding-top:10px; border-top:1px dashed #cfc5ad; }
.tdv-nghi-ngay b{ display:block; }
.tdv-nghi-ngay small{ display:block; color:#6a6a6a; font-size:13px; }
.tdv-tuan i{ font-style:normal; color:#b3151f; }
/* Chip lọc lớp của danh sách "học sinh cần bổ trợ gấp" (Tổng quan + Hôm nay, 12/10/2026) */
.cbtg-chips{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.cbtg-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px; border:1.5px solid #d8c88f; background:#fffdf7; font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:transform .15s; }
.cbtg-chip:hover{ transform:translateY(-1px); }
.cbtg-chip b{ padding:0 8px; border-radius:999px; background:#f1e6c8; font-size:12.5px; }
.cbtg-chip.on{ background:#b3151f; border-color:#b3151f; color:#fff; }
.cbtg-chip.on b{ background:rgba(255,255,255,.25); color:#fff; }
/* ô lọc lớp ở Tra cứu bổ trợ */
#btViewLopFilter{ width:auto; min-width:150px; }
/* ô "Cả khối nghỉ ngày này" trong thẻ Chọn buổi của tab Điểm danh */
.dd-nghi-video{ display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin-top:10px; padding:8px 12px; border-radius:12px; background:#fff6dc; border:1.5px dashed #e0a800; }
.dd-nghi-video[hidden]{ display:none; }
.dd-nghi-video-chu{ font-weight:800; font-size:14.5px; }
.dd-nghi-video-chu small{ font-weight:500; color:#6a5a2a; }
.dd-nghi-video-o{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; background:#fff; border:1.5px solid #d8c88f; font-weight:700; font-size:14px; cursor:pointer; }
.dd-nghi-video-o.on{ background:#b3151f; border-color:#b3151f; color:#fff; }
.dd-nghi-video-o input{ width:17px; height:17px; margin:0; accent-color:#8f1019; cursor:pointer; }
.dd-nghi-video-msg{ font-size:13px; }
.dd-nghi-video-msg.ok{ color:#1f7a35; } .dd-nghi-video-msg.loi{ color:#b3151f; }
@media (max-width:1199.98px){ .tdv-luoi{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:767.98px){ .tdv{ padding:14px; } .tdv-form{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .tdv-form .tdv-rong{ grid-column:1 / -1; } .tdv-them{ grid-column:1 / -1; } }

/* Shared comic-book masthead. Loaded after the staff and student themes. */
html.gd-sieu-anh-hung { --head:112px; }
html.gd-sieu-anh-hung #appShell .navbar,
#studentResultScreen .hs-thanh-dau,
.mh-preview-header,
.mh-phieu-dau {
  background:
    radial-gradient(ellipse at 28% 120%, #f2383555, transparent 56%),
    repeating-linear-gradient(125deg, transparent 0 85px, #ffdf9912 86px 88px, transparent 89px 150px),
    linear-gradient(110deg, #34040b, #ad1024 48%, #76091a 76%, #28050c);
  border-bottom:3px solid #f8c951 !important;
  box-shadow:0 4px 0 #26050a, 0 10px 24px #28050c33;
}

/* Đầu phiếu dùng chung cho bản xem trước, in và ảnh gửi phụ huynh. */
.mh-phieu-dau {
  color:#fff7e9;
  print-color-adjust:exact;
}
.mh-phieu-nhan {
  display:inline-block; padding:4px 12px; background:#f8c951; color:#430710;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.mh-phieu-tieu-de {
  color:#fff7e9; font-weight:900; font-style:italic; line-height:1.2;
  text-shadow:2px 3px 0 #420711;
}
.mh-kq-phieu {
  box-sizing:border-box; width:520px; background:#fff8ec; color:#32131a;
  border:3px solid #430710; font-family:'Be Vietnam Pro',system-ui,sans-serif;
  line-height:1.45;
}
.mh-kq-phieu .mh-phieu-dau { display:flex; align-items:center; gap:16px; padding:20px; }
.mh-kq-phieu .mh-phieu-dau img { display:block; width:68px; flex:none; }
.mh-kq-phieu .mh-phieu-dau > div { flex:1; min-width:0; text-align:center; }   /* thương hiệu · tiêu đề · tháng · khẩu hiệu căn giữa (logo bên trái) */
.mh-kq-phieu .mh-phieu-tieu-de { font-size:27px; margin:5px 0 3px; }
.mh-kq-thuong-hieu { color:#ffe1a2; font-size:12px; font-weight:800; text-transform:uppercase; }
.mh-kq-khau-hieu { margin-top:5px; font-size:11px; color:#ffe1a2; }
.mh-kq-than { padding:16px; border-bottom:6px solid #f8c951; }
.mh-kq-hoc-sinh, .mh-kq-nhan-xet {
  background:#fff; border:1px solid #e6caa9; border-left:4px solid #a80f24;
  margin-bottom:8px; padding:8px 11px; font-size:13px;
}
.mh-kq-hoc-sinh { margin-bottom:12px; font-size:12px; color:#6d4146; }
.mh-kq-hoc-sinh strong { display:block; color:#430710; font-size:19px; overflow-wrap:anywhere; }
.mh-kq-nhan-xet b { color:#850f24; }
.mh-kq-hoc-phi {
  margin:12px 0; padding:12px; text-align:center; color:#fff7e9;
  background:linear-gradient(125deg,#430710,#850f24); border:2px solid #e9b847;
}
.mh-kq-hoc-phi strong { display:block; font-size:24px; color:#ffe1a2; }
.mh-kq-hoc-phi img { display:block; width:250px; height:auto; margin:10px auto 0; }
.mh-kq-hoc-phi small { display:block; margin-top:5px; font-size:11px; }
.mh-kq-da-dong { margin:12px 0; padding:8px 11px; background:#e6f2e8; color:#215431; font-size:13px; }
.mh-kq-buoi {
  width:100%; border-collapse:collapse; font-size:11px; color:#32131a; background:#fff;
}
.mh-kq-buoi caption {
  caption-side:top; padding:7px 8px; background:#f8c951; color:#430710;
  text-align:left; font-size:12px; font-weight:800;
}
.mh-kq-buoi th, .mh-kq-buoi td { padding:6px 5px; vertical-align:middle; }
.mh-kq-buoi th { background:#620e1e; color:#fff7e9; text-align:left; }
.mh-kq-buoi td { border-bottom:1px solid #ecd6bc; }
.mh-kq-buoi tr:nth-child(even) td { background:#fff3e3; }
.mh-kq-buoi td:first-child { white-space:nowrap; }
.mh-kq-buoi td:nth-child(3) { overflow-wrap:anywhere; }
.mh-kq-buoi .mh-kq-so { text-align:center; }
.mh-kq-buoi .mh-kq-ghi-chu { white-space:normal; padding-left:12px; color:#6d4146; }
html.gd-sieu-anh-hung #appShell .navbar::after { animation:none; background:radial-gradient(#fff3 1px, transparent 1.4px) 0 0 / 7px 7px; opacity:.22; }
/* Vệt sáng vàng chạy dọc viền vàng dưới thanh đầu: chỉ dùng transform (card đồ họa vẽ, không bắt trình duyệt vẽ lại) */
html.gd-sieu-anh-hung #appShell .navbar::before,
#studentResultScreen .hs-thanh-dau::before {
  content:''; position:absolute; left:0; bottom:-3px; width:18%; height:3px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, transparent, #ffd24d 30%, #fff6c8 50%, #ffd24d 70%, transparent);
  box-shadow:0 0 8px 1px #ffd24dcc, 0 0 18px 2px #f7c54480;
  transform:translateX(-110%); will-change:transform;
  animation:mhTiaVang 5s cubic-bezier(.45,.05,.35,1) 1s infinite;
}
/* Vệt rộng 18% → dịch tối đa 450% (mép phải vệt = 99% thanh đầu), KHÔNG vượt mép phải kẻo sinh thanh kéo ngang */
@keyframes mhTiaVang { 0% { transform:translateX(-110%); opacity:1; } 55% { opacity:1; } 65%, 100% { transform:translateX(450%); opacity:0; } }
@media (prefers-reduced-motion:reduce) { html.gd-sieu-anh-hung #appShell .navbar::before, #studentResultScreen .hs-thanh-dau::before { animation:none; opacity:0; } }
html.gd-sieu-anh-hung #appShell .navbar-brand.mh-brand {
  flex:0 1 auto; min-width:0; margin-right:18px; gap:2px 18px;
  font-family:'Be Vietnam Pro',system-ui,sans-serif; font-style:normal;
  overflow:visible; animation:none; text-align:left;
}
html.gd-sieu-anh-hung #appShell .navbar-brand.mh-brand::before {
  width:72px; height:72px; grid-row:1 / 3; border:2px solid #fff1bc;
  box-shadow:0 0 0 3px #e9b847, 4px 5px 0 4px #31050e, 0 0 24px #ffc94222;
}
html.gd-sieu-anh-hung #appShell .navbar-brand .mh-title,
#studentResultScreen .hs-thuong-hieu .mh-title,
.mh-title {
  display:flex; flex-direction:column; align-items:center; text-align:center; margin:0; padding:0;
  font-family:'Montserrat','Be Vietnam Pro',system-ui,sans-serif; font-style:normal;
  line-height:1.35; color:#fff; background:none; filter:none; letter-spacing:0;
  text-transform:uppercase; text-shadow:2px 3px 0 #420711;
}
.mh-title .mh-eyebrow {
  display:block; font-size:10px; font-weight:800; letter-spacing:.42em;
  color:#ffe1a2; line-height:1.8; white-space:nowrap; margin-right:-.42em;   /* bù khoảng giãn chữ cuối để căn giữa đúng */
}
.mh-title .mh-name {
  display:block; font-size:clamp(20px,2.15vw,32px); font-weight:900;
  font-style:italic; letter-spacing:-.025em; white-space:nowrap; padding-right:.12em;
}
html.gd-sieu-anh-hung #appShell .navbar-brand .mh-slogan,
#studentResultScreen .hs-thuong-hieu .mh-slogan,
.mh-slogan {
  display:inline-flex; align-items:center; justify-content:center; justify-self:center;
  width:fit-content; margin:4px 0 0; padding:3px 18px; transform:none;
  font-family:'Montserrat','Be Vietnam Pro',system-ui,sans-serif; font-size:11px; font-weight:700;
  font-style:normal; line-height:1.5; letter-spacing:.01em; text-transform:capitalize;
  color:#430710; background:linear-gradient(180deg,#ffeaa6,#f8c444);
  border:1px solid #ffecaf; border-radius:999px; text-shadow:none; box-shadow:0 3px 0 #420711, inset 0 1px 0 #fff8;
}
.mh-slogan > span { display:block; transform:none; }
#studentResultScreen .hs-thuong-hieu .mh-slogan::before,
#studentResultScreen .hs-thuong-hieu .mh-slogan::after { display:none; }
#studentResultScreen .hs-thuong-hieu.mh-brand { text-align:center; }
#studentResultScreen .hs-thanh-dau { padding-top:14px; padding-bottom:14px; }
#studentResultScreen .hs-thuong-hieu .mh-name { font-size:clamp(18px,1.65vw,26px); }
@media (max-width:991.98px) {
  html.gd-sieu-anh-hung { --head:100px; }
  html.gd-sieu-anh-hung #appShell .navbar-brand.mh-brand::before { width:58px; height:58px; }
  html.gd-sieu-anh-hung #appShell .navbar-brand .mh-slogan { font-size:10px; }
}
@media (max-width:640px) {
  html.gd-sieu-anh-hung { --head:100px; }
  html.gd-sieu-anh-hung #appShell .navbar > .container-fluid { padding-left:12px !important; padding-right:12px !important; flex-wrap:nowrap; }
  html.gd-sieu-anh-hung #appShell .navbar-brand.mh-brand { gap:2px 10px; margin-right:8px; }
  html.gd-sieu-anh-hung #appShell .navbar-brand.mh-brand::before { width:40px; height:40px; }
  .mh-title .mh-eyebrow { font-size:8px; letter-spacing:.25em; }
  .mh-title .mh-name { font-size:clamp(13px,3.7vw,22px); }
  html.gd-sieu-anh-hung #appShell .navbar-brand .mh-slogan,
  #studentResultScreen .hs-thuong-hieu .mh-slogan { font-size:8px; padding:3px 8px; letter-spacing:0; }
  #studentResultScreen .hs-thuong-hieu .mh-name { font-size:clamp(15px,4vw,22px); }
}
@media (max-width:380px) {
  html.gd-sieu-anh-hung #appShell .navbar-brand.mh-brand { column-gap:8px; margin-right:6px; }
  html.gd-sieu-anh-hung #appShell .navbar-brand.mh-brand::before { width:32px; height:32px; }
  html.gd-sieu-anh-hung #appShell .mh-name { font-size:11px; letter-spacing:-.04em; }
  html.gd-sieu-anh-hung #appShell .navbar-brand .mh-slogan { font-size:7px; padding:3px 6px; }
}

/* Chỉ bố cục, khoảng cách và cỡ chữ. Màu, theme, huy hiệu và kiểu nút dùng nguyên bộ CSS hiện có. */
html.gd-sieu-anh-hung #appShell .menu-con{ gap:8px; margin:8px 0 14px; }
html.gd-sieu-anh-hung #appShell .mv.tab-pane{ padding-bottom:18px; }
html.gd-sieu-anh-hung #appShell .mv.tab-pane > .mv-bang{ gap:12px; padding-top:16px; padding-bottom:16px; margin-bottom:16px; }
html.gd-sieu-anh-hung #appShell#appShell .mv.tab-pane > .mv-bang .mv-tieu-de{ font-size:clamp(23px,1.8vw,29px); line-height:1.25; }
html.gd-sieu-anh-hung #appShell#appShell :is(#pane-cauhoi,#pane-matran,#pane-chamtn,#pane-chuyenppt) > .mv-bang .mv-tieu-de{ font-size:clamp(23px,1.8vw,29px); line-height:1.25; }
html.gd-sieu-anh-hung #appShell .mv.tab-pane > .mv-bang .mv-phu{ font-size:14px; line-height:1.5; }
#appShell #pane-cauhoi .ch2-phai{ gap:12px; }
#appShell #pane-cauhoi .ch2-cong-cu{ gap:12px; }
#appShell #pane-cauhoi .bcg-hanh-dong{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
#appShell #pane-cauhoi .bcg-hanh-dong-chinh{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
#appShell #pane-cauhoi .ch2-hang{ gap:8px; }
#appShell #pane-cauhoi .ch2-tim{ flex:1 1 280px; min-width:0; }
#appShell #pane-cauhoi .bcg-cay-thu-gon{ grid-template-columns:minmax(0,1fr); }
#appShell #pane-cauhoi .bcg-cay-thu-gon > .ch2-cay{ display:none; }
#appShell #pane-cauhoi .bcg-nhom-chon{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-top:10px; }
#appShell #pane-cauhoi .bcg-nhom-chon:not(:has(> button:not([hidden]):not([style*="display:none"]):not([style*="display: none"]),> select:not([hidden]):not([style*="display:none"]):not([style*="display: none"]))){ display:none; }
#appShell #pane-cauhoi .bcg-nhan-nhom{ flex:0 0 108px; font-size:12px; font-weight:600; }
#appShell #pane-cauhoi #chChonBar > .d-flex > .d-inline-flex{ flex:1 1 260px; min-width:0; max-width:100%; flex-wrap:wrap; }
#appShell #pane-cauhoi #chChonBar > .d-flex > .d-inline-flex > input{ flex:1 1 180px; min-width:0; max-width:100%; }
#appShell #pane-cauhoi .bcg-nhom-chon > span{ overflow-wrap:anywhere; }
#appShell #pane-cauhoi #chThongKe{ margin:0; }
@media(max-width:767.98px){
  html.gd-sieu-anh-hung #appShell .mv.tab-pane > .mv-bang{ padding-top:13px; padding-bottom:13px; }
  html.gd-sieu-anh-hung #appShell#appShell .mv.tab-pane > .mv-bang .mv-tieu-de{ font-size:23px; }
  #appShell #pane-cauhoi .bcg-hanh-dong-chinh{ flex:1 1 100%; justify-content:flex-start; }
  #appShell #pane-cauhoi .bcg-hanh-dong-chinh > button{ flex:1 1 auto; }
  #appShell #pane-cauhoi .bcg-nhan-nhom{ flex-basis:100%; }
  #appShell #pane-cauhoi .bcg-nhom-chon > select{ max-width:100% !important; }
}

/* 26/10/2026: nhóm dài (Học sinh · Học liệu · Trợ giảng) — hàng chip "mục nhỏ" trên thanh mục con (app.js nhomMucCon_ / capNhatMenuChinh_) */
html.gd-sieu-anh-hung #appShell .menu-con-muc-hang{ flex:0 0 100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 2px; padding-bottom:8px; border-bottom:1.5px dashed rgba(142,10,23,.25); }
html.gd-sieu-anh-hung #appShell .menu-con-muc-nut{ display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:5px 15px; border:1.5px solid rgba(142,10,23,.3); border-radius:999px; background:rgba(255,250,240,.7); font:inherit; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8e0a17; cursor:pointer; transition:background .2s ease, color .2s ease, transform .25s ease; }
html.gd-sieu-anh-hung #appShell .menu-con-muc-nut b{ min-width:20px; padding:0 6px; border-radius:999px; background:rgba(142,10,23,.12); font-size:11.5px; text-align:center; }
html.gd-sieu-anh-hung #appShell .menu-con-muc-nut:hover{ background:#fff; transform:translateY(-1px); }
html.gd-sieu-anh-hung #appShell .menu-con-muc-nut.on{ color:#ffe3a3; border-color:#6c0610; background:linear-gradient(180deg,#b8101f,#6c0610); box-shadow:0 4px 10px rgba(108,6,16,.3); }
html.gd-sieu-anh-hung #appShell .menu-con-muc-nut.on b{ background:#ffd24d; color:#5a060e; }
html.gd-sieu-anh-hung #appShell .menu-con-muc-nut:focus-visible{ outline:2px solid #d81a32; outline-offset:2px; }
/* 27/10/2026: Duyệt ảnh + Bảng điểm đã tự tải khi đổi bộ lọc (duyet-anh.js, app.js bdLop/bdThang change) → ẩn nút "Xem" thừa (nút vẫn còn trong trang để mã gọi .click()) */
#appShell #pane-duyetanh .tg2-o:has(> #daXemBtn), #appShell #pane-bangdiem #bdXemBtn{ display:none !important; }
/* 27/10/2026: Bảng số liệu — mục "không có việc" gom vào 1 dòng thu gọn (app.js veViecTq_) */
.tq-viec-xong-gop{ margin-top:12px; }
.tq-viec-xong-gop > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700; color:#6b5a50; background:rgba(255,253,249,.8); border:1px dashed rgba(142,10,23,.25); }
.tq-viec-xong-gop > summary::-webkit-details-marker{ display:none; }
.tq-viec-xong-gop[open] > summary{ margin-bottom:12px; }
/* 27/10/2026: hàng chip "cách xem" đầu trang của tab gộp (app.js veThanhGop_) — dùng lại kiểu chip mục nhỏ, chỉ chỉnh khoảng cách */
html.gd-sieu-anh-hung #appShell .tab-pane > .gop-xem{ flex:none; margin:0 0 14px; padding-bottom:10px; }
@media (max-width:640px){
  html.gd-sieu-anh-hung #appShell .menu-con-muc-hang{ flex:none; flex-wrap:nowrap; padding-bottom:0; border-bottom:0; margin-right:6px; }
  html.gd-sieu-anh-hung #appShell .menu-con-muc-nut{ flex:none; white-space:nowrap; }
}

/* TRUNG TÂM CHỈ HUY TRỢ GIẢNG — bản thiết kế lại 19/10/2026 (js/chi-huy-tro-giang.js). Đỏ rượu · vàng · kem như khung nhân viên.
   Toàn bộ kiểu của tab nằm trong file này (chi-huy-tro-giang-marvel.css chỉ còn là ghi chú). */
#tgChiHuyKhung{--c-do1:var(--nv-do-1,#7d0814);--c-do2:var(--nv-do-2,#b10e25);--c-do3:var(--nv-do-3,#d81a32);--c-vang1:var(--nv-vang-1,#ffe9a3);--c-vang2:var(--nv-vang-2,#f7c544);--c-vang3:var(--nv-vang-3,#e39b16);
  --c-the:var(--nv-the,#fffdf9);--c-chu:var(--nv-chu,#21160f);--c-phu:var(--nv-phu,#7a6a60);--c-vien:#ecddd0;--c-xanh:#1f8a4c;--c-lam:#2563c9;--c-cam:#d97706;--c-tim:#6d3fc0;--em:var(--nv-em,cubic-bezier(.22,1,.36,1));
  display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:6px 0 24px;color:var(--c-chu)}
.tgc-the{position:relative;background:var(--c-the);border:1px solid var(--c-vien);border-radius:20px;padding:22px 24px;box-shadow:0 6px 20px #5b191410}
.tgc-the h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:18px;font-weight:800;color:var(--c-do2)}
.tgc-the h3 > i{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;font-size:15px;color:var(--c-vang1);background:linear-gradient(140deg,var(--c-do2),var(--c-do1))}
.tgc-the h3 small{margin-left:auto;padding:2px 11px;border-radius:999px;background:#7d08140f;color:var(--c-do2);font-size:12.5px;font-weight:800}
.tgc-the h4{margin:16px 0 8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-phu)}
.tgc-phu{font-size:12.5px;color:var(--c-phu);line-height:1.55}
.tgc-trong{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 10px;text-align:center;font-size:14px;color:var(--c-phu)}
.tgc-trong > i{font-size:28px;color:var(--c-vang3)}
.tgc-canh{margin:0 0 12px;padding:9px 13px;border-radius:12px;background:#fff1e0;color:#9a4a00;font-size:13px;font-weight:600}

/* ───── Nút ───── */
#tgChiHuyKhung .btn{border-radius:11px;font-weight:700;font-size:13.5px;transition:transform .2s var(--em),box-shadow .2s ease,background .2s ease}
#tgChiHuyKhung .btn:hover{transform:translateY(-1px)}
#tgChiHuyKhung .btn:focus-visible,#tgChiHuyKhung .form-select:focus-visible{outline:2px solid var(--c-do3);outline-offset:2px}
.tgc-nut-chinh{border:0 !important;color:#fff7d6 !important;background:linear-gradient(135deg,var(--c-do3),var(--c-do1)) !important;box-shadow:0 5px 14px #7d081433}
.tgc-nut-chinh:hover{box-shadow:0 8px 20px #7d081447}
.tgc-nut-phu{color:var(--c-do2) !important;background:#fff6ee !important;border:1px solid #efc7c9 !important}
.tgc-nut-phu:hover{background:var(--c-do2) !important;color:#fff !important;border-color:var(--c-do2) !important}
.tgc-nut-vien{color:var(--c-do2) !important;background:transparent !important;border:1px dashed #d9a9ac !important;margin-top:12px}
.tgc-nut-vien:hover{background:#fff1ee !important}

/* ───── Banner "Trung tâm chỉ huy" = ĐÚNG khung Sở chỉ huy của Admin (index.html #tqHero, css/nv-dep.css .tq-hero): cùng lớp tq-hero-*, ảnh thầy,
   vòng tròn bên phải (ở đây là Khiên xanh), chip. Bảng Khiên nằm đè lên mép dưới banner như 4 thẻ số của Admin. ───── */
.tgc-khien{position:relative;display:block;min-width:0}
.tgc-tq-hero .tq-hero-chip > span[data-tgc-nhay]{cursor:pointer;transition:transform .15s ease,filter .15s ease}
.tgc-tq-hero .tq-hero-chip > span[data-tgc-nhay]:hover{transform:translateY(-1px);filter:brightness(1.06)}
.tgc-tq-hero .tq-hero-chip > span[data-tgc-nhay]:focus-visible{outline:3px solid #fff3b0;outline-offset:2px}
html.gd-sieu-anh-hung #appShell #pane-chihuytg > .mv-bang{display:none}   /* banner thay tiêu đề trơn, giống Tổng quan Admin */
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-tq-hero{padding-bottom:84px}

/* Bảng Khiên: nền đỏ rượu đặc, viền vàng, 4 góc ngắm — đè lên mép dưới banner */
/* Bảng Khiên: kính mờ đè lên ảnh, viền vàng, 4 góc ngắm */
.tgc-bang{position:relative;z-index:3;margin:-56px 10px 0;padding:18px 22px 14px;border:1px solid rgba(255,220,150,.5);border-radius:20px;color:#fff;background:radial-gradient(ellipse 60% 90% at 12% 0%,rgba(255,128,64,.28),transparent 60%),linear-gradient(115deg,#3d0207 0%,#7a0812 45%,#a10d1c 70%,#5a060e 100%);box-shadow:0 18px 34px -16px rgba(60,0,8,.7),inset 0 0 30px #ffce420d;animation:tgc-dap-vao .7s cubic-bezier(.34,1.56,.64,1) .25s both}
@keyframes tgc-dap-vao{from{opacity:0;transform:translateY(18px) scale(.97)}}
.tgc-bang::before,.tgc-bang::after{content:'';position:absolute;width:16px;height:16px;border:2px solid #ffce42;pointer-events:none;opacity:.85}
.tgc-bang::before{top:7px;left:7px;border-right:0;border-bottom:0;border-radius:6px 0 0}.tgc-bang::after{bottom:7px;right:7px;border-left:0;border-top:0;border-radius:0 0 6px}
.tgc-khien-noi{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tgc-sinh-menh{display:flex;align-items:center;gap:22px;min-width:0}
.tgc-khien-ds{display:flex;gap:12px;flex:none}
.tgc-kh{display:block;width:58px;height:68px;overflow:visible}
.tgc-kh-nen{stroke-width:2.5;stroke-linejoin:round;fill:#ffc636;stroke:#fff3b8}   /* chỉ dùng cho viên "vàng đề xuất" ở thẻ học sinh */
.tgc-hp > div{display:flex;align-items:baseline;gap:4px;line-height:1}
.tgc-hp b{font:54px/1 'Bangers','Be Vietnam Pro',sans-serif;color:#ffd247;text-shadow:0 0 16px #ffce4240}
.tgc-hp span{font:30px/1 'Bangers','Be Vietnam Pro',sans-serif;color:#dac4a2}
.tgc-hp small{margin-left:8px;letter-spacing:.1em;font-size:11px;font-weight:800;color:#e0c8a2}
.tgc-hp h3{display:block !important;margin:8px 0 3px !important;color:#fff3e6 !important;font-size:17px !important}
.tgc-hp p{margin:0;color:#e6cbbd;font-size:13px}
.tgc-thanh-tich{display:grid;grid-template-columns:48px 1fr;column-gap:13px;align-items:center;padding:14px 20px 14px 16px;border:1px solid #ffdc5855;border-radius:16px;background:linear-gradient(120deg,#ffcd4230,#ffcd4210)}
.tgc-gold-icon{grid-row:1/3}.tgc-gold-icon .tgc-kh{width:44px;height:52px}
.tgc-thanh-tich .tgc-vang{font-size:16px;font-weight:900;color:#ffda69}
.tgc-thanh-tich small{margin-top:4px;font-size:9.5px;letter-spacing:.1em;color:#dbc699}
.tgc-nang-luong{display:flex;gap:7px;margin:18px 0 12px}
.tgc-nang-luong i{flex:1;height:5px;border-radius:5px;background:#ffffff18;transform:skewX(-18deg)}
.tgc-nang-luong i.co{background:linear-gradient(90deg,#2f7bea,#9cc8ff);box-shadow:0 0 10px #4a97f580}
.tgc-khien-chan{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:12.5px;color:#dec3b1}
.tgc-khien-chan strong{color:#ffe095}
.tgc-trang-thai{padding:5px 11px;border:1px solid #ffffff1a;border-radius:999px;background:#ffffff0c;font-size:11.5px}

/* ───── Thanh điều khiển ───── */
.tgc-dieu-khien{display:flex;gap:12px 16px;flex-wrap:wrap;align-items:end;padding:14px 20px !important}
.tgc-dieu-khien label{display:grid;gap:4px;margin:0;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--c-phu)}
.tgc-dieu-khien .form-select{min-width:200px;border:1px solid #e4d4c5;border-radius:11px;background-color:#fffaf2;color:#4b2d2a;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0}
.tgc-dk-nut{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.tgc-dieu-khien p{width:100%;margin:0}.tgc-dieu-khien p:empty{display:none}

/* ───── 4 ô số ───── */
.tgc-so{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tgc-o{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--c-vien);border-radius:18px;background:var(--c-the);box-shadow:0 5px 16px #5b191409;transition:transform .25s var(--em),box-shadow .25s ease}
.tgc-o:hover{transform:translateY(-3px);box-shadow:0 12px 26px #5b191418}
.tgc-o-icon{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:14px;font-size:20px;color:#fff;box-shadow:inset 0 -3px 0 #00000026}
.tgc-o-do .tgc-o-icon{background:linear-gradient(140deg,#e8394c,#9b0f20)}.tgc-o-cam .tgc-o-icon{background:linear-gradient(140deg,#f7a531,#cf6f06)}
.tgc-o-tim .tgc-o-icon{background:linear-gradient(140deg,#9362e0,#5a2fa8)}.tgc-o-xanh .tgc-o-icon{background:linear-gradient(140deg,#3b8cf0,#1b4fa8)}
.tgc-o div{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.tgc-o b{font:400 34px/1.05 'Bangers','Be Vietnam Pro',sans-serif;letter-spacing:.02em;color:var(--c-do2);font-variant-numeric:tabular-nums}
.tgc-o span{font-size:13.5px;font-weight:700}.tgc-o small{font-size:11.5px;color:var(--c-phu)}

/* ───── Lưới 2 cột: Hôm nay · Việc cần xử lý ───── */
.tgc-luoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}
.tgc-luoi.mot-cot{grid-template-columns:minmax(0,1fr)}
.tgc-ca{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:center;margin-bottom:10px;padding:14px 16px;border:1px solid var(--c-vien);border-left:5px solid var(--c-cam);border-radius:15px;background:linear-gradient(100deg,#fff8ee,var(--c-the))}
.tgc-ca.xong{border-left-color:var(--c-xanh);background:linear-gradient(100deg,#effaf2,var(--c-the))}
.tgc-ca-bt{border-left-color:var(--c-tim);background:linear-gradient(100deg,#f6f1fd,var(--c-the))}
.tgc-ca-gio{display:flex;flex-direction:column;min-width:96px;line-height:1.25}
.tgc-ca-gio b{font-size:16px;font-weight:800;color:var(--c-do2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tgc-ca-gio small{font-size:11.5px;font-weight:700;color:var(--c-phu)}
.tgc-ca-noi{display:flex;flex-direction:column;gap:7px;min-width:0}
.tgc-ca-lop{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tgc-lop{padding:2px 10px;border-radius:999px;background:#7d08141a;color:var(--c-do2);font-size:12px;font-weight:800}
.tgc-chips{display:flex;gap:6px;flex-wrap:wrap}
.tgc-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.tgc-chip.ok{background:#dff5e6;color:#14693a}.tgc-chip.chua{background:#ffeccf;color:#9a4a00}
.tgc-ca-nut{display:flex;flex-direction:column;gap:6px}
.tgc-hs-chips{display:flex;gap:6px;flex-wrap:wrap}
.tgc-hs{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;background:#fff;border:1px solid var(--c-vien);font-size:12.5px;font-weight:600}
.tgc-hs i{width:8px;height:8px;border-radius:50%;background:#aaa}
.tgc-hs-xanh i{background:var(--c-xanh)}.tgc-hs-do i{background:var(--c-do3)}.tgc-hs-cam i{background:var(--c-cam)}.tgc-hs-vang i{background:var(--c-vang3)}
.tgc-hs em{font-style:normal;font-size:10.5px;color:var(--c-phu)}

/* ───── Việc cần xử lý ───── */
.tgc-nhom + .tgc-nhom{margin-top:6px}
.tgc-nhom h4 span{margin-left:4px;padding:1px 8px;border-radius:999px;font-size:11px}
.tgc-nhom-gap{color:var(--c-do3) !important}.tgc-nhom-gap span{background:#fde5e3}
.tgc-nhom-lam{color:var(--c-cam) !important}.tgc-nhom-lam span{background:#fff0d6}
.tgc-nhom-doi{color:var(--c-lam) !important}.tgc-nhom-doi span{background:#e4eefc}
.tgc-viec{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin-bottom:9px;padding:12px 14px;border:1px solid var(--c-vien);border-radius:14px;background:var(--c-the);transition:transform .2s var(--em),box-shadow .2s ease}
.tgc-viec:hover{transform:translateX(3px);box-shadow:0 6px 16px #5b19140f}
.tgc-viec-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-size:16px;color:#fff}
.tgc-viec-gap{border-left:5px solid var(--c-do3);background:linear-gradient(100deg,#fff1ef,var(--c-the))}.tgc-viec-gap .tgc-viec-icon{background:linear-gradient(140deg,#e8394c,#9b0f20)}
.tgc-viec-lam{border-left:5px solid var(--c-cam)}.tgc-viec-lam .tgc-viec-icon{background:linear-gradient(140deg,#f7a531,#cf6f06)}
.tgc-viec-doi{border-left:5px solid var(--c-lam)}.tgc-viec-doi .tgc-viec-icon{background:linear-gradient(140deg,#3b8cf0,#1b4fa8)}
.tgc-viec-noi{min-width:0}
.tgc-viec-ten{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tgc-viec-ten b{font-size:14px;color:#5f0e1a}
.tgc-viec-noi p{margin:2px 0;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.tgc-viec-noi small{font-size:11.5px;color:var(--c-phu)}
.tgc-muc{padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.tgc-muc-gap{background:#fde5e3;color:#a30f20}.tgc-muc-lam{background:#fff0d6;color:#9a4a00}.tgc-muc-doi{background:#e4eefc;color:#1b4fa8}

/* ───── Tiến bộ học sinh ───── */
.tgc-tien-bo > p{margin:0 0 6px;font-size:13.5px}
.tgc-hs-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;margin-top:16px}
.tgc-hs-the{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--c-vien);border-radius:16px;background:linear-gradient(160deg,#fffaf2,var(--c-the))}
.tgc-hs-dau{display:flex;align-items:center;gap:12px}
.tgc-hs-dau > div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.tgc-hs-dau b{font-size:15px;color:#5f0e1a}.tgc-hs-dau small{font-size:12px;color:var(--c-phu)}
.tgc-av{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:17px;font-weight:800;color:#fff;box-shadow:inset 0 -3px 0 #00000026}
.tgc-av.mau-0{background:linear-gradient(140deg,#3b8cf0,#1b4fa8)}.tgc-av.mau-1{background:linear-gradient(140deg,#9362e0,#5a2fa8)}.tgc-av.mau-2{background:linear-gradient(140deg,#f7a531,#cf6f06)}.tgc-av.mau-3{background:linear-gradient(140deg,#e8607a,#a3162f)}.tgc-av.mau-4{background:linear-gradient(140deg,#34b37a,#14693a)}
.tgc-vang-cuc{display:inline-flex;align-items:center;gap:5px;padding:4px 11px 4px 8px;border-radius:999px;background:#f1ece6;color:#9a8e86;font-size:13.5px;font-weight:800;white-space:nowrap}
.tgc-vang-cuc .tgc-kh{width:16px;height:19px}.tgc-vang-cuc .tgc-kh-nen{fill:#d8d0c8;stroke:#c3b9af;stroke-width:3}
.tgc-vang-cuc.co{background:linear-gradient(120deg,#ffe9a3,#ffd56a);color:#7a4c00}.tgc-vang-cuc.co .tgc-kh-nen{fill:#f7c544;stroke:#b97a00}
.tgc-ng{display:flex;flex-direction:column;gap:5px}
.tgc-ng-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:700}
.tgc-ng-dau > span{color:var(--c-do2)}
.tgc-delta{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;font-size:12px}
.tgc-delta.tang{background:#dff5e6;color:#14693a}.tgc-delta.giam{background:#fde5e3;color:#a30f20}.tgc-delta.dung{background:#eee8e2;color:#6f635b}
.tgc-bar{position:relative;height:10px;border-radius:999px;background:#eadfd4;overflow:visible}
.tgc-bar.trong{opacity:.5;background:repeating-linear-gradient(135deg,#eadfd4 0 6px,#f3ebe2 6px 12px)}
.tgc-bar i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#f7c544,#e39b16);box-shadow:0 0 8px #f7c54455}
.tgc-bar u{position:absolute;top:-3px;width:3px;height:16px;border-radius:2px;background:var(--c-do1);text-decoration:none;transform:translateX(-1px)}
.tgc-ng-chan{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--c-phu)}
.tgc-ng-chan b{color:var(--c-chu)}.tgc-vang-nho{font-weight:800;color:#8a5a00}

/* ───── Lỗi + khung chờ ───── */
.tgc-loi{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tgc-loi > i{font-size:26px;color:var(--c-cam)}.tgc-loi > div{flex:1;min-width:200px}.tgc-loi p{margin:3px 0 0;font-size:13px;color:var(--c-phu)}
.tgc-xuong{display:grid;gap:14px}
.tgc-xuong i{display:block;border-radius:18px;background:linear-gradient(100deg,#f1e7dc 30%,#fbf5ee 50%,#f1e7dc 70%) 0 0/200% 100%;animation:tgc-chay 1.4s linear infinite}
.tgc-xuong .to{height:190px}.tgc-xuong > div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.tgc-xuong > div i{height:82px}
.tgc-xuong .hai{grid-template-columns:repeat(2,minmax(0,1fr))}.tgc-xuong .cao{height:250px}

@keyframes tgc-chay{to{background-position:-200% 0}}
@keyframes tgc-noi{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes tgc-nhap{0%,100%{opacity:1}50%{opacity:.45}}

@media (max-width:1100px){.tgc-so{grid-template-columns:repeat(2,minmax(0,1fr))}.tgc-luoi{grid-template-columns:1fr}.tgc-xuong > div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.tgc-thanh-tich{width:100%}}
@media (max-width:640px){
  #tgChiHuyKhung{gap:14px}.tgc-the{padding:16px;border-radius:16px}
  .tgc .tgc-khien,#tgChiHuyKhung .tgc-khien{padding:22px 14px 14px;gap:18px}
  .tgc-bang{padding:16px 13px 12px}.tgc-gold-icon .tgc-kh{width:36px;height:43px}
  .tgc-sinh-menh{gap:12px;flex-wrap:wrap}.tgc-khien-ds{gap:7px}.tgc-kh{width:44px;height:52px}
  .tgc-hp b{font-size:42px}.tgc-hp span{font-size:25px}
  .tgc-so{gap:10px}.tgc-o{flex-direction:column;align-items:flex-start;gap:8px;padding:14px}.tgc-o b{font-size:30px}
  .tgc-ca{grid-template-columns:1fr;gap:8px}.tgc-ca-nut{flex-direction:row;flex-wrap:wrap}
  .tgc-viec{grid-template-columns:auto minmax(0,1fr)}.tgc-viec > .btn{grid-column:1/-1}
  .tgc-hs-luoi{grid-template-columns:1fr}
  .tgc-dieu-khien label,.tgc-dieu-khien .form-select{width:100%}.tgc-dk-nut{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.tgc-xuong i,.tgc-bang{animation:none}.tgc-o,.tgc-viec,#tgChiHuyKhung .btn{transition:none}.tgc-o:hover,.tgc-viec:hover,#tgChiHuyKhung .btn:hover{transform:none}}

/* Ô số bấm được → nhảy tới mục tương ứng */
.tgc-o[data-tgc-nhay]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.tgc-o[data-tgc-nhay]:active{transform:translateY(-1px) scale(.99)}
.tgc-o[data-tgc-nhay]:focus-visible{outline:2px solid var(--c-do3);outline-offset:3px}
.tgc-o[data-tgc-nhay]::after{content:'\f078';font:900 11px/1 'Font Awesome 6 Free','Font Awesome 5 Free';margin-left:auto;align-self:flex-start;color:#b9a79b;opacity:.0;transition:opacity .2s ease}
.tgc-o[data-tgc-nhay]:hover::after,.tgc-o[data-tgc-nhay]:focus-visible::after{opacity:1}
.tgc-nhom,.tgc-hom-nay,.tgc-viec-khung,.tgc-tien-bo{scroll-margin-top:calc(var(--head,88px) + 16px)}
.tgc-chop{animation:tgc-chop 1.6s ease-out 1}
@keyframes tgc-chop{0%{box-shadow:0 0 0 0 #d81a3299}30%{box-shadow:0 0 0 6px #d81a3255}100%{box-shadow:0 0 0 0 #d81a3200}}
@media (prefers-reduced-motion:reduce){.tgc-chop{animation:none;outline:2px solid #d81a32;outline-offset:3px}}
@media (max-width:640px){.tgc-o[data-tgc-nhay]::after{display:none}}

/* Tỷ lệ em tiến bộ → vàng đề xuất (Khiên vàng trợ giảng theo tỷ lệ, migration 20261006000700) */
.tgc-ty-le{ margin:0 0 10px; padding:10px 14px; border-radius:12px; background:#fff6dc; border:1px solid #f0d58a; font-size:14px; }
.tgc-ty-le b{ font-variant-numeric:tabular-nums; }

/* Mục 'Học sinh cần bổ trợ gấp' (13/10/2026): dùng lại dòng .tq2-bt của Tổng quan */
.tgc-cbtg{ margin-top:18px; }
.tgc-cbtg h3 small{ margin-left:8px; }
.tgc-cbtg .cbtg-chips{ margin:10px 0 12px; }
.tgc-cbtg-ds{ display:block; }
.tgc-cbtg .tq2-bt{ background:#fff; border:1px solid rgba(125,35,20,.10); color:#1b120c; }
.tgc-cbtg .tq2-hs-ten small, .tgc-cbtg .tq2-bt-ly small{ color:#8a7b70; }


/* ═════ Sắp xếp lại cho gọn (15/10/2026) ═════
   Thứ tự mới (dùng `order`, không đổi DOM nên khien-tro-giang.js / khien-tg-quan-ly.js vẫn chèn đúng chỗ):
   Banner + Khiên → bộ lọc → 4 ô số → [Admin: duyệt lỗi Khiên] → Hôm nay | Việc cần xử lý → Em cần bổ trợ gấp → Tiến bộ HS → Nhật ký Khiên xanh → Góp ý HS */
#tgChiHuyKhung{gap:16px}
#tgChiHuyKhung > .ktg-khung,#tgChiHuyKhung > .ktq-khung{display:contents}   /* thắng khien-tro-giang.css / khien-tg-quan-ly.css nạp sau */
.tgc-khien{order:1}.tgc-dieu-khien{order:2}.tgc-so{order:3}
#tgChiHuyKhung .ktg-khung > .ktg-admin{order:4}
.tgc-luoi{order:5}.tgc-loidd{order:5}.tgc-cbtg{order:6}.tgc-hsyeu{order:7}.tgc-tbtg{order:7}.tgc-tien-bo{order:8}
#tgChiHuyKhung .ktg-khung > .ktg-the:not(.ktg-admin){order:9}
#tgChiHuyKhung .ktq-khung > .ktq-the{order:10}

/* Bảng Khiên: gọn lại (bỏ thanh năng lượng, khiên + số nhỏ hơn) */
.tgc-bang{padding:14px 20px 12px}
.tgc-sinh-menh{gap:18px}.tgc-khien-ds{gap:9px}
.tgc-kh{width:48px;height:57px}.tgc-gold-icon .tgc-kh{width:38px;height:45px}
.tgc-hp b{font-size:46px}.tgc-hp span{font-size:26px}.tgc-hp h3{margin:6px 0 2px !important}
.tgc-thanh-tich{padding:10px 16px 10px 13px}
.tgc-khien-chan{margin-top:10px;padding-top:9px;border-top:1px solid #ffffff1c}

/* Thanh lọc: một dải mỏng, nhãn nằm cạnh ô chọn */
.tgc-dieu-khien{padding:9px 16px !important;border-radius:16px;gap:8px 20px;align-items:center;background:#fff8ee;box-shadow:none}
.tgc-dieu-khien label{display:flex;align-items:center;gap:9px;white-space:nowrap}
.tgc-dieu-khien .form-select{min-width:190px;padding-top:5px;padding-bottom:5px}
.tgc-dk-nut .btn{padding:5px 14px}.tgc-dk-nut .tgc-nut-vien{margin-top:0}

/* 4 ô số: thấp hơn */
.tgc-so{gap:12px}
.tgc-o{padding:12px 16px;gap:12px;border-radius:16px}
.tgc-o-icon{width:42px;height:42px;font-size:18px;border-radius:12px}
.tgc-o b{font-size:30px}.tgc-o span{font-size:13px}.tgc-o small{font-size:11px}

/* Hôm nay | Việc cần xử lý: hai cột đều nhau, hàng gọn */
.tgc-luoi{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.tgc-the{padding:18px 20px}
.tgc-the h3{margin-bottom:10px;font-size:17px}
.tgc-the h4{margin:12px 0 7px}
.tgc-ca{margin-bottom:8px;padding:11px 14px;gap:6px 14px}
.tgc-ca-gio{min-width:88px}.tgc-ca-gio b{font-size:15px}
.tgc-ca{grid-template-columns:auto minmax(0,1fr)}   /* nút xuống hàng dưới để cột nội dung không bị bóp */
.tgc-ca-nut{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;padding-top:2px}
.tgc-ca-nut:empty{display:none}
.tgc-nhom + .tgc-nhom{margin-top:2px}
.tgc-viec{gap:10px;margin-bottom:7px;padding:9px 12px}
.tgc-viec-icon{width:34px;height:34px;border-radius:10px;font-size:14px}
.tgc-viec-ten b{font-size:13.5px}.tgc-viec-noi p{margin:1px 0;font-size:12.5px}.tgc-viec-noi small{font-size:11px}
.tgc-viec > .btn{padding:4px 11px;font-size:12.5px}
.tgc-the .tgc-nut-vien{margin-top:8px;padding:4px 12px}

/* Em cần bổ trợ gấp: sát lưới trên, bỏ khoảng trống thừa */
.tgc-cbtg{margin-top:0}
.tgc-cbtg-ghi{margin:-2px 0 6px}

/* Tiến bộ học sinh: phần giải thích gập lại */
.tgc-cach-tinh{margin:0 0 6px;border:1px dashed #d9a9ac;border-radius:12px;background:#fffaf2}
.tgc-cach-tinh summary{display:flex;align-items:center;gap:8px;padding:8px 13px;cursor:pointer;font-size:13px;font-weight:700;color:var(--c-do2);list-style:none}
.tgc-cach-tinh summary::-webkit-details-marker{display:none}
.tgc-cach-tinh summary::after{content:'\f078';margin-left:auto;font:900 10px/1 'Font Awesome 6 Free';color:#b9a79b;transition:transform .2s ease}
.tgc-cach-tinh[open] summary::after{transform:rotate(180deg)}
.tgc-cach-tinh > p{margin:0;padding:0 13px 10px;font-size:13px;line-height:1.55}
.tgc-hs-luoi{margin-top:12px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.tgc-hs-the{padding:14px;gap:10px}

@media (max-width:1100px){.tgc-luoi{grid-template-columns:1fr}}
@media (max-width:640px){
  #tgChiHuyKhung{gap:12px}.tgc-the{padding:14px}
  .tgc-dieu-khien label{display:grid;white-space:normal}.tgc-o{padding:11px 13px}.tgc-ca{grid-template-columns:1fr}
}

/* ═════ Danh sách dài → hộp có thanh cuộn (15/10/2026): em cần bổ trợ gấp · lỗi trợ giảng chờ duyệt ═════ */
.tgc-cbtg-ds,#tgChiHuyKhung .ktg-cuon{max-height:min(620px,72vh);overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 2px 2px;scrollbar-width:thin;scrollbar-color:#d9a9ac #f6ece2}
.tgc-cbtg-ds{border-top:1px solid #f0e2d6;padding-top:10px}
.tgc-cbtg-ds::-webkit-scrollbar,#tgChiHuyKhung .ktg-cuon::-webkit-scrollbar{width:8px}
.tgc-cbtg-ds::-webkit-scrollbar-track,#tgChiHuyKhung .ktg-cuon::-webkit-scrollbar-track{background:#f6ece2;border-radius:8px}
.tgc-cbtg-ds::-webkit-scrollbar-thumb,#tgChiHuyKhung .ktg-cuon::-webkit-scrollbar-thumb{background:#d9a9ac;border-radius:8px}
.tgc-cbtg-ds::-webkit-scrollbar-thumb:hover,#tgChiHuyKhung .ktg-cuon::-webkit-scrollbar-thumb:hover{background:#b10e25}
#tgChiHuyKhung .ktg-cuon{margin-top:4px}
#tgChiHuyKhung .ktg-cuon > h4:first-child{margin-top:4px}

/* ═════ Trợ giảng XEM "AI phát hiện học lực yếu" (15/10/2026) — chỉ đọc, không có nút quét ═════ */
.tgc-hsyeu-ghi{margin:-2px 0 10px}
.tgc-hsyeu-locs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.tgc-hsyeu-loc{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border:1px solid #e4d4c5;border-radius:999px;background:#fffaf2;font:inherit;font-size:13px;font-weight:700;color:#5f0e1a;cursor:pointer;transition:background .2s ease,transform .2s ease}
.tgc-hsyeu-loc b{padding:0 8px;border-radius:999px;background:#7d08141a;font-size:12px}
.tgc-hsyeu-loc:hover{background:#fff1ee;transform:translateY(-1px)}
.tgc-hsyeu-loc.on{border-color:var(--c-do2);background:linear-gradient(135deg,var(--c-do3),var(--c-do1));color:#fff7d6}
.tgc-hsyeu-loc.on b{background:#ffffff2e;color:#fff}
.tgc-hsyeu-ds{max-height:min(620px,72vh);overflow-y:auto;overscroll-behavior:contain;padding:10px 8px 2px 2px;border-top:1px solid #f0e2d6;scrollbar-width:thin;scrollbar-color:#d9a9ac #f6ece2}
.tgc-hsyeu-ds::-webkit-scrollbar{width:8px}.tgc-hsyeu-ds::-webkit-scrollbar-track{background:#f6ece2;border-radius:8px}.tgc-hsyeu-ds::-webkit-scrollbar-thumb{background:#d9a9ac;border-radius:8px}
.tgc-yeu{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;margin-bottom:9px;padding:12px 14px;border:1px solid var(--c-vien);border-left:5px solid #cdbfb3;border-radius:14px;background:var(--c-the)}
.tgc-yeu-cao{border-left-color:var(--c-do3);background:linear-gradient(100deg,#fff1ef,var(--c-the))}
.tgc-yeu-vua{border-left-color:var(--c-cam)}.tgc-yeu-doi{border-left-color:var(--c-lam)}
.tgc-yeu-muc{padding:2px 11px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.tgc-yeu-muc-cao{background:#fde5e3;color:#a30f20}.tgc-yeu-muc-vua{background:#fff0d6;color:#9a4a00}.tgc-yeu-muc-doi{background:#e4eefc;color:#1b4fa8}
.tgc-yeu-noi{min-width:0}
.tgc-yeu-ten{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}.tgc-yeu-ten b{font-size:14.5px;color:#5f0e1a}
.tgc-yeu-so{margin:2px 0 4px;font-size:12.5px;color:var(--c-phu)}.tgc-yeu-so b{color:var(--c-chu)}
.tgc-yeu-noi p{margin:2px 0;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.tgc-yeu-de{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.tgc-yeu-de span{padding:2px 10px;border-radius:999px;background:#f4eefc;color:#3d2a73;font-size:12px;font-weight:600}
@media (max-width:640px){.tgc-yeu{grid-template-columns:1fr;gap:6px}}
/* ═════ ADMIN: "Học sinh tiến bộ — nhờ trợ giảng nào" (15/10/2026) ═════ */
.tgc-tbtg-dk{display:flex;gap:10px 20px;flex-wrap:wrap;align-items:end;margin:0 0 12px}
.tgc-tbtg-dk label{display:flex;align-items:center;gap:9px;margin:0;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--c-phu);white-space:nowrap}
.tgc-tbtg-dk .form-select{min-width:200px;padding-top:5px;padding-bottom:5px;border:1px solid #e4d4c5;border-radius:11px;background-color:#fffaf2;color:#4b2d2a;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0}
.tgc-tbtg-dk .tgc-tbtg-chi{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:700;color:#5f0e1a;cursor:pointer}
.tgc-tbtg-dk .tgc-tbtg-chi input{width:17px;height:17px;accent-color:var(--c-do2)}
.tgc-tbtg-ds{display:grid;gap:12px;max-height:min(720px,78vh);overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 2px 2px;scrollbar-width:thin;scrollbar-color:#d9a9ac #f6ece2}
.tgc-tbtg-nhom{border:1px solid var(--c-vien);border-radius:16px;background:linear-gradient(160deg,#fffaf2,var(--c-the))}
.tgc-tbtg-nhom > summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;cursor:pointer;list-style:none}
.tgc-tbtg-nhom > summary::-webkit-details-marker{display:none}
.tgc-tbtg-nhom > summary::before{content:'\f078';font:900 11px/1 'Font Awesome 6 Free';color:#b9a79b;transition:transform .2s ease}
.tgc-tbtg-nhom:not([open]) > summary::before{transform:rotate(-90deg)}
.tgc-tbtg-nhom > summary > b{font-size:15.5px;color:#5f0e1a}
.tgc-tbtg-so{padding:2px 12px;border-radius:999px;background:linear-gradient(120deg,#ffe9a3,#ffd56a);color:#7a4c00;font-size:13px;font-weight:700}
.tgc-tbtg-so b{font-size:15px}
.tgc-tbtg-cuon{overflow-x:auto;padding:0 12px 12px}
.tgc-tbtg-bang{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;white-space:nowrap}
.tgc-tbtg-bang th{padding:7px 10px;border-bottom:2px solid #efd9cc;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--c-phu);text-align:left}
.tgc-tbtg-bang td{padding:8px 10px;border-bottom:1px solid #f3e7dc;vertical-align:middle}
.tgc-tbtg-bang tr:last-child td{border-bottom:0}
.tgc-tbtg-bang td b{color:#5f0e1a}.tgc-tbtg-bang td small{display:block;font-size:11px;color:var(--c-phu)}
.tgc-trong-nho{padding:10px 8px 16px;font-size:13px}
.tgc-kq{padding:2px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.tgc-kq.tien{background:#dff5e6;color:#14693a}.tgc-kq.dung{background:#eee8e2;color:#6f635b}.tgc-kq.chua{background:#fff0d6;color:#9a4a00}
/* ═════ TRỢ GIẢNG: lỗi điểm danh của mình (17/10/2026) ═════ */
.tgc-ldd-khung{display:grid;gap:10px;max-height:min(560px,70vh);overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 2px 2px;border-top:1px solid #f0e2d6;padding-top:10px;scrollbar-width:thin;scrollbar-color:#d9a9ac #f6ece2}
.tgc-ldd{padding:12px 14px;border:1px solid var(--c-vien);border-left:5px solid var(--c-do3);border-radius:14px;background:linear-gradient(100deg,#fff1ef,var(--c-the))}
.tgc-ldd-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tgc-ldd-dau b{font-size:14px;color:#5f0e1a}.tgc-ldd-dau .btn{margin-left:auto;padding:4px 12px}
.tgc-ldd-ds{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.55}.tgc-ldd-ds li{margin:2px 0}

/* 19/10: giao diện chỉ huy — mọi thay đổi giới hạn trong tab trợ giảng. */
#tgChiHuyKhung{--c-the:#fffefa;--c-vien:#eae2d8;--c-chu:#302622;--c-phu:#786c65;gap:22px;padding-top:12px;font-family:'Be Vietnam Pro',sans-serif;line-height:1.6}
#tgChiHuyKhung .tgc-the{border-radius:22px;padding:24px;box-shadow:0 4px 24px #35201605}
#tgChiHuyKhung .tgc-the h3{font-size:17px;line-height:1.5;letter-spacing:-.35px;color:#4c292b}
#tgChiHuyKhung .tgc-the h3>i{background:#f5e9e6;color:#963746;box-shadow:none;border-radius:12px;width:38px;height:38px}
#tgChiHuyKhung .tgc-the h3 small{background:#f4eee7;color:#79624f}
#tgChiHuyKhung .tgc-khien{padding:0;min-width:0}
#tgChiHuyKhung .tgc-bang{margin:20px 0 0;padding:20px 24px 16px;border:1px solid #e6d9c6;border-radius:18px;background:#fffaf0;color:#4b3029;box-shadow:0 10px 26px #32121b0b;animation:none}
#tgChiHuyKhung .tgc-bang::before,#tgChiHuyKhung .tgc-bang::after{display:none}
#tgChiHuyKhung .tgc-kh{width:40px;height:48px}
#tgChiHuyKhung .tgc-khien-ds{gap:5px}
#tgChiHuyKhung .tgc-sinh-menh{gap:20px}
#tgChiHuyKhung .tgc-hp b{font:800 30px/1.2 'Be Vietnam Pro',sans-serif;color:#683140;text-shadow:none}
#tgChiHuyKhung .tgc-hp span{font:600 18px/1.2 'Be Vietnam Pro',sans-serif;color:#b29c8b}
#tgChiHuyKhung .tgc-hp small{font-size:9px;color:#8a735b}
#tgChiHuyKhung .tgc-hp h3{font-size:14px!important;color:#4c302b!important;margin:5px 0 2px!important}
#tgChiHuyKhung .tgc-hp p{font-size:11px;color:#897567}
#tgChiHuyKhung .tgc-thanh-tich{grid-template-columns:36px 1fr;padding:12px 16px;background:#f5e8c7;border:1px solid #ecdbb4;border-radius:12px}
#tgChiHuyKhung .tgc-gold-icon .tgc-kh{width:30px;height:36px}
#tgChiHuyKhung .tgc-thanh-tich .tgc-vang{font-size:14px;color:#765320}
#tgChiHuyKhung .tgc-thanh-tich small{font-size:8px;color:#907242}
#tgChiHuyKhung .tgc-khien-chan{margin-top:16px;padding-top:12px;border-top:1px solid #ecdfcd;color:#897567;font-size:11px}
#tgChiHuyKhung .tgc-khien-chan strong{color:#926422}
#tgChiHuyKhung .tgc-trang-thai{background:#eee5d5;border:0;color:#74634f;font-size:10px}
#tgChiHuyKhung .tgc-dieu-khien{background:#f7f3ed;box-shadow:none;padding:16px 20px!important;border-radius:16px}
#tgChiHuyKhung .tgc-dieu-khien label{font-size:10px;gap:7px;letter-spacing:.08em}
#tgChiHuyKhung .tgc-dieu-khien .form-select{background-color:#fffefa;min-height:42px;font-size:13px;border-color:#e1d6c9}
#tgChiHuyKhung .tgc-dieu-khien .tgc-nut-vien{margin-top:0;border-style:solid;background:#fffefa!important;border-color:#e1d6c9!important;min-height:42px}
#tgChiHuyKhung .tgc-luoi{gap:22px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
#tgChiHuyKhung .tgc-ca{padding:16px 14px;border-left-width:3px;border-radius:12px;gap:12px;background:#fffcf7}
#tgChiHuyKhung .tgc-ca.xong{background:#f7fbf7}#tgChiHuyKhung .tgc-ca-bt{background:#faf8fd}
#tgChiHuyKhung .tgc-ca-gio b{font-size:14px;color:#553c39}
#tgChiHuyKhung .tgc-viec{border-left-width:3px;border-radius:12px;padding:14px 12px}
#tgChiHuyKhung .tgc-viec-icon{width:32px;height:32px;font-size:13px;border-radius:10px}
#tgChiHuyKhung .tgc-viec-noi p{font-size:12px;line-height:1.7}
#tgChiHuyKhung .tgc-nut-chinh{background:#823246!important;box-shadow:0 3px 8px #63203016;color:#fffaf3!important}
#tgChiHuyKhung .tgc-nut-phu{background:#faf4f0!important;border-color:#e8d5d2!important;color:#823246!important}
#tgChiHuyKhung .tgc-hs-the{background:#fffefa;border-radius:16px;padding:20px;gap:16px;box-shadow:0 3px 14px #38201504}
#tgChiHuyKhung .tgc-hs-luoi{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
#tgChiHuyKhung .tgc-bar{height:6px;background:#f0eae0}#tgChiHuyKhung .tgc-bar i{background:linear-gradient(90deg,#e4c98b,#b88c3f);box-shadow:none}
#tgChiHuyKhung .tgc-bar u{height:12px;background:#86515b}
#tgChiHuyKhung .tgc-trong{padding:30px 16px;background:#faf7f2;border-radius:14px;font-size:13px}
#tgChiHuyKhung button:focus-visible,#tgChiHuyKhung summary:focus-visible{outline:3px solid #b88949;outline-offset:3px}
@media(max-width:1100px){#tgChiHuyKhung .tgc-luoi{grid-template-columns:minmax(0,1fr)}#tgChiHuyKhung .tgc-thanh-tich{width:auto}}
@media(max-width:640px){
 #tgChiHuyKhung{gap:16px}
 #tgChiHuyKhung .tgc-bang{margin:14px 0 0;padding:18px 16px}
 #tgChiHuyKhung .tgc-khien-noi{gap:16px}#tgChiHuyKhung .tgc-sinh-menh{gap:12px;flex-wrap:wrap}
 #tgChiHuyKhung .tgc-thanh-tich{width:100%}#tgChiHuyKhung .tgc-khien-chan{gap:10px}
 #tgChiHuyKhung .tgc-the{padding:18px;border-radius:18px}#tgChiHuyKhung .tgc-the h3{font-size:15px;flex-wrap:wrap}
 #tgChiHuyKhung .tgc-dk-nut>.btn{flex:1}#tgChiHuyKhung .tgc-ca{gap:10px}
}
#tgChiHuyKhung .tgc-luoi.mot-cot{grid-template-columns:minmax(0,1fr)}

/* ═════ 26/10/2026: banner + 4 ô số trợ giảng = ĐÚNG kiểu Sở chỉ huy của Admin (css/nv-dep.css .tq-hero, tq2-the) ═════
   Banner dùng thẳng .tq-hero của nv-dep.css (ảnh thầy, chữ vàng nghiêng, ánh kim lướt, vòng Khiên); 4 ô số đè mép dưới banner,
   viền mực + bóng lệch + huy hiệu tròn như 4 thẻ của Admin; bảng Khiên nằm ngay dưới. */
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-so{position:relative;z-index:3;margin:-52px 10px 0;gap:16px}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o{position:relative;display:flex;align-items:center;gap:14px;padding:18px 30px 18px 16px;border:2px solid var(--nv-muc,#15110f);border-radius:18px;overflow:visible;
  background:linear-gradient(165deg,#fffefb,#fff6e6);box-shadow:5px 5px 0 #c0121f,0 18px 30px -18px rgba(60,0,8,.55);transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o::before{display:none}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o:nth-child(2){box-shadow:5px 5px 0 #f29a1a,0 18px 30px -18px rgba(60,0,8,.55)}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o:nth-child(3){box-shadow:5px 5px 0 #8e0a17,0 18px 30px -18px rgba(60,0,8,.55)}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o:nth-child(4){box-shadow:5px 5px 0 #f6b52a,0 18px 30px -18px rgba(60,0,8,.55)}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o:hover{transform:translate(-2px,-4px)}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o-icon{width:62px;height:62px;flex:none;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;font-size:24px;color:#fff;
  box-shadow:0 0 0 2px var(--nv-muc,#15110f),2px 3px 0 2px var(--nv-muc,#15110f);text-shadow:0 1px 0 var(--nv-muc,#15110f),0 0 5px rgba(0,0,0,.6);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o:hover .tgc-o-icon{transform:rotate(-12deg) scale(1.1)}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o-do .tgc-o-icon{background:var(--huy-giap,radial-gradient(circle at 35% 30%,#ff6b5b,#b10e25 72%))}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o-cam .tgc-o-icon{background:var(--huy-phep,repeating-conic-gradient(#ffb02e 0 10deg,#e2640f 10deg 20deg))}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o-tim .tgc-o-icon{background:var(--huy-khien,radial-gradient(circle,#1f5fbf 0 34%,#c8102e 35% 50%,#f3f3f3 51% 66%,#c8102e 67%))}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o-xanh .tgc-o-icon{background:var(--huy-gang,radial-gradient(circle at 35% 30%,#ffe48a,#e39b16 72%));color:#7a0610;text-shadow:0 0 5px #fff,0 0 2px #fff}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o b{margin:2px 0;font:italic 900 36px/1.1 'Be Vietnam Pro',sans-serif;letter-spacing:-.02em;color:#8e0a17;white-space:nowrap}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o div > span{font-size:15px;font-weight:700;line-height:1.25;color:#2a1810}
html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o small{margin:0;font-size:13px;font-weight:600;line-height:1.3;color:#5b4a41}
@media (max-width:1499.98px){html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o b{font-size:31px}html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o-icon{width:54px;height:54px;font-size:21px}html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o div > span{font-size:14px}}
@media (max-width:640px){
  html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-so{margin:-44px 4px 0;gap:10px}
  html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px;box-shadow:3px 3px 0 #c0121f}
  html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o-icon{width:44px;height:44px;font-size:18px}
  html.gd-sieu-anh-hung #appShell #tgChiHuyKhung .tgc-o b{font-size:26px}
}
/* ═════ 26/10/2026: gom trang thành 3 tab Hôm nay | Việc | Học sinh (js/chi-huy-tro-giang.js htmlTabs, datMuc) ═════
   Một lần nạp, chỉ ẩn / hiện: #tgChiHuyKhung[data-muc] quyết định tab đang mở. Khối do module khác chèn (ktg-*, ktq-*) cũng được xếp vào tab. */
#tgChiHuyKhung .tgc-tabs{order:2;display:flex;align-items:stretch;gap:6px;padding:6px;border:2px solid var(--nv-muc,#15110f);border-radius:18px;
  background:linear-gradient(165deg,#fffefb,#fff3df);box-shadow:4px 4px 0 #c0121f,0 14px 24px -16px rgba(60,0,8,.5)}
#tgChiHuyKhung .tgc-tab,#tgChiHuyKhung .tgc-tab-tai{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;border:0;border-radius:13px;background:transparent;font:inherit;font-size:14.5px;font-weight:800;color:#5f0e1a;cursor:pointer;transition:background .2s ease,color .2s ease,transform .25s var(--em)}
#tgChiHuyKhung .tgc-tab{flex:1 1 0;min-width:0}
#tgChiHuyKhung .tgc-tab:hover{background:#fff0d8}
#tgChiHuyKhung .tgc-tab b{min-width:24px;padding:1px 8px;border-radius:999px;background:#7d08141a;font-size:12.5px;font-weight:800;color:#8e0a17;text-align:center}
#tgChiHuyKhung .tgc-tab.on{color:#fff3c4;background:linear-gradient(135deg,#d81a32,#7d0814);box-shadow:0 5px 12px #7d081440}
#tgChiHuyKhung .tgc-tab.on b{background:#ffd24d;color:#5a060e}
#tgChiHuyKhung .tgc-tab-tai{flex:none;padding:8px 14px;font-size:13px;font-weight:700;color:#7a6a60;border:1px dashed #d9a9ac}
#tgChiHuyKhung .tgc-tab-tai:hover{background:#fff1ee;color:#8e0a17}
#tgChiHuyKhung .tgc-tab:focus-visible,#tgChiHuyKhung .tgc-tab-tai:focus-visible{outline:3px solid #b88949;outline-offset:2px}

/* thứ tự: banner → tab → bộ lọc → khung việc thầy giao → còn lại; ô Hôm nay / Việc cùng hàng rộng (không chia 2 cột nữa) */
#tgChiHuyKhung .tgc-dieu-khien{order:3}
#tgChiHuyKhung > #viecGiaoTg,#tgChiHuyKhung > #viecTuan{order:3}
#tgChiHuyKhung .tgc-luoi{display:contents}
#tgChiHuyKhung .tgc-hom-nay,#tgChiHuyKhung .tgc-viec-khung{order:5}

/* tab nào hiện khối nào */
#tgChiHuyKhung:not([data-muc="hom"]) .tgc-hom-nay{display:none}
#tgChiHuyKhung:not([data-muc="viec"]) :is(.tgc-viec-khung,.tgc-loidd,#viecGiaoTg,#viecTuan,.ktg-admin){display:none}
#tgChiHuyKhung:not([data-muc="hs"]) :is(.tgc-cbtg,.tgc-hsyeu,.tgc-tbtg,.tgc-tien-bo,.ktg-the:not(.ktg-admin),.ktq-the,.tgc-dieu-khien:not(.tgc-dk-admin)){display:none}

@media (min-width:1101px){#tgChiHuyKhung .tgc-tabs{position:sticky;top:calc(var(--head,88px) + 6px);z-index:20}}   /* dính dưới đầu trang chỉ ở màn rộng (điện thoại đầu trang cao hơn) */
@media (max-width:640px){
  #tgChiHuyKhung .tgc-tabs{gap:4px;padding:5px;border-radius:16px;box-shadow:3px 3px 0 #c0121f}
  #tgChiHuyKhung .tgc-tab{flex-direction:column;gap:2px;min-height:52px;padding:6px 4px;font-size:12.5px}
  #tgChiHuyKhung .tgc-tab b{font-size:11.5px;padding:0 7px}
  #tgChiHuyKhung .tgc-tab-tai{padding:6px 10px}#tgChiHuyKhung .tgc-tab-tai span{display:none}
}
@media (prefers-reduced-motion:reduce){#tgChiHuyKhung .tgc-tab,#tgChiHuyKhung .tgc-tab-tai{transition:none}}

/* Đã gộp vào css/chi-huy-tro-giang.css (thiết kế lại trung tâm chỉ huy trợ giảng 06/10/2026). Giữ file để index.html không đổi. */

/* KHIÊN XANH TRỢ GIẢNG (js/khien-tro-giang.js) — thẻ chèn vào tab "Chỉ huy trợ giảng". Cùng màu đỏ rượu · vàng · kem với khung nhân viên. */
.ktg-khung{display:grid;gap:18px}
.ktg-the{position:relative;padding:20px 22px;border:1px solid #ecddd0;border-radius:20px;background:#fffdf9;color:#21160f;box-shadow:0 6px 20px #5b191410}
.ktg-the.ktg-admin{border-color:#e3b4b8;background:linear-gradient(160deg,#fff4f2,#fffdf9)}
.ktg-dau{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ktg-dau h3{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;font-weight:800;color:#b10e25}
.ktg-dau h3 > i{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;font-size:15px;color:#ffe9a3;background:linear-gradient(140deg,#b10e25,#7d0814)}
.ktg-dau h3 small{padding:2px 11px;border-radius:999px;background:#7d08140f;font-size:12.5px;font-weight:800}
.ktg-so{padding:4px 14px;border-radius:999px;background:linear-gradient(120deg,#e6f0ff,#cfe2ff);color:#1b4fa8;font-size:13px;font-weight:700}.ktg-so b{font-size:22px;line-height:1}
.ktg-ghi{margin:0 0 12px;padding:9px 13px;border-radius:12px;background:#fff6e0;font-size:13px;line-height:1.5;color:#7a4a00}
.ktg-ghi i{margin-right:4px}
.ktg-trong{display:flex;align-items:center;gap:8px;margin:6px 0;padding:14px;border-radius:12px;background:#eefaf1;font-size:13.5px;color:#14693a}
.ktg-the h4{display:flex;align-items:center;gap:8px;margin:16px 0 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7a6a60}
.ktg-the h4 span{padding:1px 8px;border-radius:999px;background:#fde5e3;color:#a30f20;font-size:11px}
.ktg-ds{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ktg-dong{padding:11px 14px;border:1px solid #ecddd0;border-left:5px solid #cdbfb3;border-radius:13px;background:#fff}
.ktg-dong.do{border-left-color:#d81a32;background:linear-gradient(100deg,#fff1ef,#fff)}.ktg-dong.vang{border-left-color:#f7a531;background:linear-gradient(100deg,#fff8ee,#fff)}
.ktg-ds .ktg-dong:not(.do):not(.vang):not(.xam){border-left-color:#e3b4b8}
.ktg-dong-dau{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.ktg-ngay{font-size:12px;font-weight:800;color:#7a6a60;font-variant-numeric:tabular-nums}.ktg-dong-dau b{font-size:14px;color:#5f0e1a}
.ktg-dong p{margin:4px 0 0;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.ktg-tem{margin-left:auto;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap}
.ktg-tem.do{background:#fde5e3;color:#a30f20}.ktg-tem.vang{background:#fff0d6;color:#9a4a00}.ktg-tem.xam{background:#eee8e2;color:#6f635b}
.ktg-ph{margin-top:8px;padding:8px 12px;border-radius:10px;background:#f4eefc;font-size:13px;color:#3d2a73}.ktg-ph small{display:block;margin-bottom:2px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#6b55a8}
.ktg-ph.tl{background:#e7f6ec;color:#14693a}.ktg-ph.tl small{color:#2c8a55}
.ktg-nut-hang{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.ktg-dau .ktg-nut-hang{margin-top:0}
.ktg-nut{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border:0;border-radius:11px;font:inherit;font-size:13px;font-weight:800;color:#fff7d6;background:linear-gradient(135deg,#d81a32,#7d0814);box-shadow:0 4px 12px #7d081433;cursor:pointer;transition:transform .2s ease}
.ktg-nut:hover{transform:translateY(-1px)}.ktg-nut:disabled{opacity:.6;cursor:wait}
.ktg-nut-nho{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:6px 13px;border:1px solid #e3c4c6;border-radius:10px;background:#fff6ee;font:inherit;font-size:12.5px;font-weight:700;color:#b10e25;cursor:pointer}
.ktg-nut-hang .ktg-nut-nho,.ktg-dau .ktg-nut-nho{margin-top:0}
.ktg-nut-nho:hover{background:#b10e25;color:#fff;border-color:#b10e25}
.ktg-nut:focus-visible,.ktg-nut-nho:focus-visible{outline:2px solid #d81a32;outline-offset:2px}
.ktg-form{display:grid;gap:8px;margin-top:9px;padding:10px;border-radius:12px;background:#fff1e4}.ktg-form[hidden]{display:none}
.ktg-form textarea{width:100%;padding:8px 11px;border:1px solid #e4d4c5;border-radius:10px;background:#fff;font:inherit;font-size:13.5px;resize:vertical}
.ktg-form > div{display:flex;gap:8px;flex-wrap:wrap}.ktg-form .ktg-nut-nho{margin-top:0}
.ktg-mo{margin-top:12px;border-top:1px solid #ecddd0;padding-top:10px}.ktg-mo summary{cursor:pointer;font-size:13px;font-weight:700;color:#b10e25}
.ktg-quy{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.6;color:#5d4d45}
@media (max-width:640px){.ktg-the{padding:16px;border-radius:16px}.ktg-tem{margin-left:0}}
@media (prefers-reduced-motion:reduce){.ktg-nut{transition:none}.ktg-nut:hover{transform:none}}

/* GÓP Ý VỀ TRỢ GIẢNG — trang học sinh / phụ huynh (js/hs-gop-y.js). Nền sáng trong khung Học vụ, nhấn đỏ rượu + vàng như các mục khác. */
.gy-muc{ display:flex; flex-direction:column; gap:14px; }
.gy-khung{ padding:16px; border:1px solid #7d081426; border-radius:18px; background:#fffdf8; }
.gy-khung h3{ margin:0 0 6px; font-size:17px; font-weight:800; color:#7d0814; }
.gy-khung h3 i{ color:#e39b16; margin-right:6px; }
.gy-khung h3 small{ font-weight:600; font-size:12.5px; color:#8a6a5a; margin-left:6px; }
.gy-ghi{ margin:0 0 12px; font-size:13.5px; color:#6a5348; max-width:70ch; }
.gy-loi, .gy-msg.loi{ color:#b3261e; font-weight:600; }
.gy-msg{ min-height:0; font-size:13.5px; font-weight:600; margin:0; }
.gy-msg:empty{ display:none; } .gy-msg.ok{ color:#1b7a3d; }
.gy-trong{ text-align:center; color:#8a6a5a; padding:14px; }

.gy-dong{ padding:12px 0; border-top:1px dashed #7d08141f; display:grid; gap:8px; }
.gy-dong:first-of-type{ border-top:0; }
.gy-ten{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gy-tem{ padding:1px 9px; border-radius:999px; background:#e3f5e8; color:#1b7a3d; font-size:11.5px; font-weight:700; }
.gy-sao{ display:flex; gap:4px; }
.gy-sao-o{ position:relative; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; cursor:pointer; font-size:22px; color:#c9b9a6; transition:transform .15s ease, color .15s ease; }
.gy-sao-o.co{ color:#f2a516; }
.gy-sao-o:hover{ transform:scale(1.12); }
.gy-sao-o input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.gy-sao-o:has(input:focus-visible){ outline:2px solid #b10e25; outline-offset:2px; }
.gy-an{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.gy-dong textarea, .gy-thu textarea{ width:100%; padding:9px 12px; border:1px solid #7d08142e; border-radius:12px; font:inherit; font-size:14px; background:#fff; resize:vertical; }
.gy-thu{ display:grid; gap:10px; }
.gy-thu label{ display:flex; flex-direction:column; gap:3px; font-size:12.5px; font-weight:700; color:#6a5348; max-width:320px; }
.gy-thu select{ padding:8px 10px; border:1px solid #7d08142e; border-radius:10px; font:inherit; background:#fff; }
.gy-nut{ display:flex; justify-content:flex-end; }
.gy-btn{ padding:9px 20px; border:0; border-radius:12px; font:inherit; font-weight:800; color:#ffe9a3; background:linear-gradient(135deg, #b10e25, #7d0814); cursor:pointer; box-shadow:0 4px 12px #7d081433; }
.gy-btn:disabled{ opacity:.55; cursor:default; }
@media (max-width:520px){ .gy-sao-o{ width:44px; height:44px; font-size:25px; } .gy-nut .gy-btn{ width:100%; } }

/* NHÓM HỌC (js/nhom-hoc.js, migration 20261101000100) — thẻ lời mời + mục Nhóm của học sinh / phụ huynh, khung quản lý của Admin ở tab Lớp live.
   Học sinh: đỏ rượu – vàng như các thẻ khác của trang HS (hs-dat-coc.css, hs-gop-y.css); cỡ chữ tính theo px "gốc" (vùng nội dung có CSS zoom).
   Admin: dùng chung huy hiệu / nút của tab Lớp live (.lv2-*) và viên chọn lớp (.live-chip). */

/* ================= HỌC SINH / PHỤ HUYNH ================= */
.nh-trang-chu:empty{ display:none; }
.nh-moi{ position:relative; margin:14px 0 0; padding:16px 18px; border:2px solid #ffce42; border-radius:16px; color:#fff; overflow:hidden;
  background:radial-gradient(circle at 92% 12%,#ffce4233,transparent 45%),linear-gradient(160deg,#a5121e,#5a050c); box-shadow:0 10px 26px #5a050c40; }
.nh-moi + .nh-moi{ margin-top:10px; }
.nh-nhan{ display:inline-block; margin-bottom:4px; font-size:11px; font-weight:800; letter-spacing:.1em; color:#ffce42; }
.nh-moi > b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.01em; }
.nh-moi > p{ margin:4px 0 12px; font-size:13px; color:#ffe9d6; max-width:70ch; }
.nh-moi > p.nh-msg{ margin:8px 0 0; }
.nh-nut{ display:flex; flex-wrap:wrap; gap:8px; }
.nh-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 16px; border:0; border-radius:999px; font-size:14px; font-weight:800; line-height:1.2; text-decoration:none; cursor:pointer; }
.nh-btn:disabled{ opacity:.6; cursor:wait; }
.nh-btn-vang{ background:#ffce42; color:#5a050c; }
.nh-btn-vang:hover:not(:disabled){ background:#ffd96b; }
.nh-btn-vien{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px #ffffffb3; }
.nh-btn-nho{ min-height:34px; padding:6px 12px; font-size:13px; }
.nh-msg{ min-height:0; margin:8px 0 0; font-size:13.5px; font-weight:600; }
.nh-msg:empty{ display:none; }
.nh-msg.ok{ color:#1b7a3d; } .nh-msg.loi{ color:#b3261e; }
.nh-moi .nh-msg.ok{ color:#c9f5d6; } .nh-moi .nh-msg.loi{ color:#ffd0cc; }

.nh-muc{ display:flex; flex-direction:column; gap:14px; }
.nh-the{ padding:16px; border:1px solid #7d081426; border-radius:18px; background:#fffdf8; }
.nh-the-mo{ background:#f7f3ee; }
.nh-the-dau{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.nh-the-dau > div:not(.nh-nut){ flex:1 1 220px; min-width:0; }
.nh-the h3{ margin:0 0 4px; font-size:18px; font-weight:800; color:#7d0814; }
.nh-the p{ margin:0 0 6px; font-size:13.5px; color:#6a5348; }
.nh-the small{ color:#8a6a5a; }
.nh-huy{ flex:none; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:linear-gradient(160deg,#c3101f,#7d0814); color:#ffce42; font-size:19px; box-shadow:0 0 0 3px #ffce4255; }
.nh-huy-xam{ background:#b9aea6; color:#fff; box-shadow:none; }
.nh-tem{ display:inline-block; margin-left:6px; padding:2px 9px; border-radius:999px; background:#e2f5e8; color:#1b7a3d; font-size:12px; font-weight:800; vertical-align:middle; }
.nh-cot{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:12px; }
.nh-khoi{ padding:12px 14px; border-radius:14px; background:#fff; border:1px solid #7d08141a; }
.nh-khoi h4{ margin:0 0 8px; font-size:14.5px; font-weight:800; color:#7d0814; }
.nh-khoi h4 i{ color:#e39b16; margin-right:6px; }
.nh-trong{ margin:0; padding:6px 0; font-size:13.5px; color:#8a6a5a; }
.nh-lich, .nh-tl, .nh-a-tl, .nh-a-lich{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.nh-lich li, .nh-a-lich li{ display:flex; align-items:flex-start; gap:10px; }
.nh-lich li > i, .nh-a-lich li > i{ margin-top:3px; color:#b5091c; }
.nh-lich li span, .nh-a-lich li span{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.nh-lich b, .nh-a-lich b{ font-size:14px; color:#211b18; }
.nh-lich small, .nh-a-lich small{ font-size:12.5px; }
.nh-tl li, .nh-a-tl li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px dashed #7d08141f; }
.nh-tl li:first-child, .nh-a-tl li:first-child{ border-top:0; }
.nh-tl-ic{ flex:none; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#fff1d6; color:#b5091c; font-size:17px; }
.nh-tl-ten{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.nh-tl-ten b{ font-size:14px; color:#211b18; overflow-wrap:anywhere; }
.nh-tl-ten small{ font-size:12.5px; }

/* ================= ADMIN ================= */
.nh-box{ margin-bottom:16px; }
.nh-khung{ padding-bottom:6px; }
.nh-khung .lv2-khung-dau .lv2-them{ margin-left:auto; }
.nh-nhom-form, .nh-moi-form{ display:grid; gap:12px; margin:12px 0; padding:14px; border:1px dashed #7d081433; border-radius:14px; background:#fffaf0; }
.nh-o{ display:grid; gap:6px; }
.nh-nhan-o{ font-size:13.5px; font-weight:700; color:#5a3a2e; }
.nh-nhan-o small{ font-weight:500; color:#8a6a5a; }
.nh-ghi{ display:block; margin-top:6px; font-size:12.5px; color:#8a6a5a; }
.nh-chip-hang{ display:flex; flex-wrap:wrap; gap:6px; }
.nh-hang{ display:flex; flex-wrap:wrap; gap:8px; }
.nh-msg-a{ min-height:0; font-size:13.5px; font-weight:600; }
.nh-msg-a:empty{ display:none; }
.nh-msg-a.ok{ color:#1b7a3d; } .nh-msg-a.loi{ color:#b3261e; }

.nh-a{ margin:12px 0; padding:14px; border:1px solid #7d08141f; border-radius:16px; background:#fff; }
.nh-a.an{ opacity:.7; background:#f7f3ee; }
.nh-a-dau{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:8px; }
.nh-a-dau > div:first-child{ flex:1 1 220px; min-width:0; }
.nh-a-dau h3{ margin:0; font-size:18px; font-weight:800; color:#7d0814; }
.nh-a-dau p{ margin:2px 0 0; font-size:13px; color:#6a5348; }
.nh-so{ display:flex; gap:8px; }
.nh-so-o{ display:flex; flex-direction:column; align-items:center; min-width:74px; padding:6px 10px; border-radius:12px; background:#f4efe9; }
.nh-so-o b{ font-size:20px; line-height:1.1; }
.nh-so-o small{ font-size:11.5px; color:#6a5348; }
.nh-so-o.xanh{ background:#e2f5e8; } .nh-so-o.xanh b{ color:#1b7a3d; }
.nh-so-o.cam{ background:#fff0d6; } .nh-so-o.cam b{ color:#b86a00; }
.nh-a-nut{ display:flex; gap:6px; flex-wrap:wrap; }
.nh-muc-a{ border-top:1px solid #7d08141a; }
.nh-muc-a > summary{ display:flex; align-items:center; gap:8px; padding:10px 2px; cursor:pointer; font-size:14.5px; font-weight:800; color:#5a3a2e; list-style:none; }
.nh-muc-a > summary::-webkit-details-marker{ display:none; }
.nh-muc-a > summary::after{ content:'\25BE'; margin-left:auto; color:#b5091c; transition:transform .15s; }
.nh-muc-a[open] > summary::after{ transform:rotate(180deg); }
.nh-muc-a > summary i{ color:#b5091c; width:18px; text-align:center; }
.nh-muc-a > summary b{ padding:1px 9px; border-radius:999px; background:#fff0d6; color:#8a4b00; font-size:12.5px; }
.nh-muc-than{ padding:2px 2px 14px; }
.nh-a-lich li.tat{ opacity:.6; }
.nh-a-tl li .lv2-n + .lv2-n{ margin-left:2px; }
.nh-them-tl{ display:grid; gap:10px; margin-top:12px; }
.nh-tha{ display:flex; align-items:center; gap:12px; padding:14px; border:2px dashed #b5091c66; border-radius:14px; background:#fff8ee; cursor:pointer; }
.nh-tha:hover{ background:#fff1d6; }
.nh-tha > i{ font-size:26px; color:#b5091c; }
.nh-tha span{ display:flex; flex-direction:column; }
.nh-tha small{ color:#8a6a5a; }
.nh-link-form{ display:grid; grid-template-columns:minmax(120px,1fr) minmax(180px,2fr) auto; gap:8px; align-items:center; }
@media (max-width:700px){ .nh-link-form{ grid-template-columns:1fr; } .nh-so{ width:100%; } .nh-so-o{ flex:1; } }
.nh-loc{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.nh-loc-nut{ padding:5px 12px; border:1px solid #7d081433; border-radius:999px; background:#fff; font-size:13px; font-weight:700; color:#5a3a2e; cursor:pointer; }
.nh-loc-nut.on{ background:#7d0814; border-color:#7d0814; color:#fff; }
.nh-loc-nut b{ margin-left:2px; }
.nh-tv-luoi{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; max-height:420px; overflow:auto; }
.nh-tv{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #7d08141a; border-radius:12px; background:#fffdf8; }
.nh-tv-ten{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.nh-tv-ten b{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nh-tv-ten small{ font-size:12px; color:#8a6a5a; }
.nh-tt{ flex:none; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:800; background:#eee; color:#555; }
.nh-tt.xanh{ background:#e2f5e8; color:#1b7a3d; } .nh-tt.cam{ background:#fff0d6; color:#b86a00; } .nh-tt.xam{ background:#ece7e2; color:#6a5d55; }
.nh-go{ flex:none; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:#b3261e; cursor:pointer; }
.nh-go:hover{ background:#fde7e5; }

/* KHIÊN TRỢ GIẢNG ĐỢT B + C (js/khien-tg-quan-ly.js): Trợ giảng của kỳ · Góp ý của học sinh · Ghi nhận đặc biệt — chèn vào tab "Chỉ huy trợ giảng".
   Cùng màu đỏ rượu · vàng · kem với css/khien-tro-giang.css. */
.ktq-khung{display:grid;gap:18px}
.ktq-the{position:relative;padding:20px 22px;border:1px solid #ecddd0;border-radius:20px;background:#fffdf9;color:#21160f;box-shadow:0 6px 20px #5b191410}
.ktq-dau{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ktq-dau h3{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;font-weight:800;color:#b10e25}
.ktq-dau h3 > i{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;font-size:15px;color:#ffe9a3;background:linear-gradient(140deg,#b10e25,#7d0814)}
.ktq-dau h3 small{padding:2px 11px;border-radius:999px;background:#7d08140f;font-size:12.5px;font-weight:800;color:#5f0e1a}
.ktq-ghi{margin:0 0 12px;padding:9px 13px;border-radius:12px;background:#fff6e0;font-size:13px;line-height:1.5;color:#7a4a00}
.ktq-trong{display:flex;align-items:center;gap:8px;margin:6px 0;padding:14px;border-radius:12px;background:#f6f1ec;font-size:13.5px;color:#6f635b}
.ktq-the h4{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 8px;font-size:13px;font-weight:800;color:#5f0e1a}
.ktq-vd{padding:2px 11px;border-radius:999px;background:#fff0d6;color:#9a4a00;font-size:12px}
.ktq-phu{color:#7a6a60;font-size:12.5px}
.ktq-loc-hang{display:flex;gap:10px;flex-wrap:wrap}
.ktq-loc{display:flex;flex-direction:column;gap:2px;font-size:11.5px;font-weight:700;color:#7a6a60}
.ktq-loc select,.ktq-form select,.ktq-form input{padding:6px 10px;border:1px solid #e4d4c5;border-radius:10px;background:#fff;font:inherit;font-size:13px;color:#21160f}
.ktq-cuon{overflow-x:auto}
.ktq-bang th{font-size:12px;white-space:nowrap}.ktq-bang td{vertical-align:middle;font-variant-numeric:tabular-nums}
.ktq-bang small{color:#7a6a60}
.ktq-bang tr.ktq-chon td{background:#fff6dc}
.ktq-nut-o{text-align:right;white-space:nowrap}
.ktq-tem{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:#eee8e2;color:#6f635b;font-size:11.5px;font-weight:800;white-space:nowrap}
.ktq-tem.ok{background:#e3f5e8;color:#1b7a3d}.ktq-tem.cho{background:#fff0d6;color:#9a4a00;white-space:normal;text-align:left}
.ktq-tem.do{background:#fde5e3;color:#a30f20}.ktq-tem.vang{background:#fff0d6;color:#9a4a00}
.ktq-tem.thu{background:#ece8fb;color:#4b3aa8}.ktq-tem.ks{background:#fff3d6;color:#8a5a00}
.ktq-sao{color:#f2a516;letter-spacing:1px;font-size:14px;white-space:nowrap}
.ktq-tq{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:12px}
.ktq-tq-o{display:flex;flex-direction:column;gap:2px;padding:10px 13px;border:1px solid #ecddd0;border-radius:14px;background:#fff}
.ktq-tq-o small{color:#7a6a60;font-size:12px}
.ktq-ds{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ktq-ds.nho li{padding:7px 12px;border:1px solid #ecddd0;border-radius:11px;background:#fff;font-size:13px}
.ktq-gy{padding:11px 14px;border:1px solid #ecddd0;border-left:5px solid #cdbfb3;border-radius:13px;background:#fff}
.ktq-gy.do{border-left-color:#d81a32;background:linear-gradient(100deg,#fff1ef,#fff)}.ktq-gy.vang{border-left-color:#f7a531}.ktq-gy.ok{border-left-color:#2c8a55}
.ktq-gy-dau{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}.ktq-gy-dau b{font-size:14px;color:#5f0e1a}
.ktq-ngay{font-size:12px;font-weight:700;color:#7a6a60;font-variant-numeric:tabular-nums;margin-left:auto}
.ktq-gy p{margin:5px 0 0;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.ktq-nut-hang{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:9px}
.ktq-nut{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:0;border-radius:11px;font:inherit;font-size:13px;font-weight:800;color:#fff7d6;background:linear-gradient(135deg,#d81a32,#7d0814);box-shadow:0 4px 12px #7d081433;cursor:pointer}
.ktq-nut:disabled{opacity:.6;cursor:wait}
.ktq-nut-nho{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid #e3c4c6;border-radius:10px;background:#fff6ee;font:inherit;font-size:12.5px;font-weight:700;color:#b10e25;cursor:pointer}
.ktq-nut-nho:hover{background:#b10e25;color:#fff;border-color:#b10e25}
.ktq-nut-nho.chinh{background:linear-gradient(135deg,#d81a32,#7d0814);color:#fff7d6;border-color:transparent}
.ktq-danh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:8px;padding:8px 12px;border:1px solid #f0d27a;border-radius:11px;background:#fff8dc;font-size:13px;color:#5f0e1a}
.ktq-danh b{font-size:14px}.ktq-danh em{font-style:normal;font-weight:700;color:#b10e25}.ktq-danh small{flex-basis:100%;color:#7a6a60}
.ktq-nut-nho.tinh{border-style:dashed;color:#6f635b;border-color:#cdbfb3;background:#fff}
.ktq-nut:focus-visible,.ktq-nut-nho:focus-visible{outline:2px solid #d81a32;outline-offset:2px}
.ktq-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ktq-form label{display:flex;flex-direction:column;gap:2px;font-size:11.5px;font-weight:700;color:#7a6a60}
.ktq-form .ktq-rong{flex:1 1 240px}.ktq-form .ktq-rong input{width:100%}
@media (max-width:640px){.ktq-the{padding:16px;border-radius:16px}.ktq-ngay{margin-left:0}}

/* THƯỞNG KHIÊN TRỢ GIẢNG — khung gom 3 mục cho Admin ở đầu tab Lương (js/thuong-khien-hub.js). Cùng màu kem · đỏ rượu · vàng với khung thưởng tiền (css/thuong-khien.css). */
#khienHub:empty{ display:none; }
#khienHub{ margin:0 0 16px; --kh-do1:var(--nv-do-1,#7d0814); --kh-do2:var(--nv-do-2,#b10e25); --kh-vien:#ecddd0; --kh-phu:#7a6a60; }
.kh-hub{ border:1px solid var(--kh-vien); border-radius:20px; background:#fffdf9; box-shadow:0 6px 20px #5b191410; overflow:hidden; }
.kh-dau{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; padding:14px 18px; background:linear-gradient(160deg,#fff4ea,#fffaf2); border-bottom:1px solid var(--kh-vien); }
.kh-dau h3{ display:flex; align-items:center; gap:10px; margin:0; font-size:17px; font-weight:800; color:var(--kh-do2); }
.kh-dau h3 > i{ width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:10px; font-size:14px; color:#ffe9a3; background:linear-gradient(140deg,var(--kh-do2),var(--kh-do1)); }
.kh-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.kh-tab{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid #e1d6c9; border-radius:999px; background:#fffefa; color:#5a423c; font-size:13px; font-weight:700; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.kh-tab:hover{ border-color:#c9a78f; }
.kh-tab.on{ background:linear-gradient(140deg,var(--kh-do2),var(--kh-do1)); border-color:var(--kh-do1); color:#fff8ee; }
.kh-tab:focus-visible,.kh-gap:focus-visible{ outline:3px solid #b88949; outline-offset:2px; }
.kh-so{ min-width:22px; padding:1px 7px; border-radius:999px; background:#f7c544; color:#54202a; font-size:12px; font-weight:800; text-align:center; }
.kh-tab.on .kh-so{ background:#ffe9a3; }
.kh-gap{ padding:7px 12px; border:1px solid #e1d6c9; border-radius:10px; background:#fffefa; color:var(--kh-phu); font-size:12px; font-weight:700; cursor:pointer; }
.kh-than{ padding:16px 18px 18px; }
.kh-than[hidden],.kh-bang[hidden]{ display:none; }
.kh-bang{ display:grid; gap:16px; }
/* các khối dùng lại (css/khien-tro-giang.css, khien-tg-quan-ly.css, thuong-khien.css) đứng sát nhau trong khung này */
.kh-hub #thuongKhienKhung{ margin:0; }
.kh-hub .ktq-khung{ display:grid; gap:16px; }
.kh-trong{ margin:0; padding:26px 16px; border-radius:14px; background:#faf7f2; color:var(--kh-phu); font-size:13px; text-align:center; }
@media (max-width:760px){
  .kh-dau{ padding:12px 14px; }
  .kh-tabs{ margin-left:0; width:100%; }
  .kh-tab{ flex:1 1 auto; justify-content:center; }
  .kh-than{ padding:12px 12px 14px; }
}
@media (prefers-reduced-motion:reduce){ .kh-tab{ transition:none; } }
/* lối tắt ở tab Chỉ huy trợ giảng (Admin) — js/khien-tg-quan-ly.js htmlLoiTatThuong */
.ktq-loi-tat .ktq-dau{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.kh-bang > *,.kh-bang .ktq-the,.kh-bang .ktg-the{ min-width:0; max-width:100%; }
.kh-bang .ktq-dau{ flex-wrap:wrap; }

/* PHÂN CÔNG TRỢ GIẢNG theo lớp × ca chính (js/phan-cong-tro-giang.js) — tab Admin, theo token --nv-* của css/khung-nhan-vien.css */
#pcKhung{ display:flex; flex-direction:column; gap:14px; }
.pc-dau{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pc-dau .tg2-ghi{ flex:1 1 360px; margin:0; }

.pc-so-hang{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.pc-so{ display:flex; flex-direction:column; padding:12px 16px; border:1px solid var(--nv-vien, #0000001a); border-radius:16px; background:var(--nv-the, #fff); line-height:1.25; }
.pc-so b{ font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.pc-so span{ font-size:13px; font-weight:700; color:var(--nv-phu, #7a6a60); }
.pc-so.xanh b{ color:#1b7a3d; } .pc-so.do b{ color:#c62828; }

.pc-bo-loc{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding:12px 14px; border:1px solid var(--nv-vien, #0000001a); border-radius:16px; background:var(--nv-the, #fff); }
.pc-bo-loc label{ display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:700; color:var(--nv-phu, #7a6a60); }
.pc-bo-loc .form-select, .pc-bo-loc .form-control{ min-width:150px; }
.pc-luu{ margin-left:auto; font-weight:800; white-space:nowrap; }

.pc-ca b{ font-weight:800; }
.pc-ca span{ color:var(--nv-phu, #7a6a60); font-size:12.5px; white-space:nowrap; }

.pc-chip{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; background:#00000010; font-size:12px; font-weight:700; white-space:nowrap; }
.pc-chip.xanh{ background:#e3f5e8; color:#1b7a3d; }
.pc-chip.vang{ background:#fff3d6; color:#8a5a00; }
.pc-chip.do{ background:#fde5e3; color:#c62828; }
.pc-cho, .pc-nhac{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; }
.pc-cho{ color:#1f6fd0; }
.pc-nhac{ color:#a85b00; }

@media (max-width:640px){
  .pc-so-hang{ grid-template-columns:1fr; }
  .pc-luu{ margin-left:0; width:100%; }
  .pc-bo-loc label, .pc-bo-loc .form-select, .pc-bo-loc .form-control{ width:100%; }
}

/* Xếp nhanh theo khối 9–12: ô tích trợ giảng, áp dụng cho mọi lớp + cả 2 ca của khối */
.pc-tieu{ margin:6px 0 0; font-size:16px; font-weight:800; color:#7d0814; }
.pc-tieu small{ margin-left:8px; font-size:12.5px; font-weight:600; color:var(--nv-phu, #7a6a60); }
.pc-khoi-luoi{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:12px; }
.pc-khoi{ padding:14px 16px; border:1px solid var(--nv-vien, #0000001a); border-radius:16px; background:var(--nv-the, #fff); }
.pc-khoi.pc-sua{ background:#fff8e6; border-color:#f0d58a; }
.pc-khoi header{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.pc-khoi h3{ margin:0; font-size:20px; font-weight:900; color:#7d0814; }
.pc-khoi header small{ font-size:12px; color:var(--nv-phu, #7a6a60); }
.pc-tich{ display:flex; flex-wrap:wrap; gap:8px; }
.pc-tich-o{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border:1.5px solid #e4d4c5; border-radius:999px; background:#fff; font-size:14px; font-weight:700; cursor:pointer; user-select:none; transition:background .15s ease, border-color .15s ease; }
.pc-tich-o input{ width:17px; height:17px; margin:0; accent-color:#b10e25; cursor:pointer; }
.pc-tich-o.co{ background:linear-gradient(135deg, #b10e25, #7d0814); border-color:#7d0814; color:#ffe9a3; }
.pc-tich-o:has(input:focus-visible){ outline:2px solid #b10e25; outline-offset:2px; }
.pc-khoi-ghi{ margin:10px 0 0; font-size:13px; line-height:1.6; }
.pc-chi-tiet{ margin-top:4px; }
.pc-chi-tiet > summary{ cursor:pointer; padding:8px 2px; font-size:14px; font-weight:800; color:#b10e25; }
.pc-chi-tiet[open] > summary{ margin-bottom:8px; }
.pc-chi-tiet .pc-the{ margin-bottom:12px; }

/* Ca hôm nay + nút điều động đi thay (migration 20261007000400) */
.pc-hn{ display:flex; flex-direction:column; gap:10px; }
.pc-hn-luoi{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.pc-hn-ca{ padding:12px 14px; border:1px solid var(--nv-vien, #0000001a); border-radius:16px; background:var(--nv-the, #fff); }
.pc-hn-ca header{ margin-bottom:6px; font-size:15px; }
.pc-hn-ca ul{ list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:8px; }
.pc-hn-ca li{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.pc-hn-ca li > span:not(.pc-chip){ color:var(--nv-phu, #7a6a60); font-size:12.5px; }
.pc-hn-ca li small{ flex-basis:100%; color:var(--nv-phu, #7a6a60); font-size:12px; }
.pc-hn-ca li button{ margin-left:auto; }
.pc-hn-nghi b{ text-decoration:line-through; text-decoration-color:#c6282880; }
.pc-hn-ngay .pc-hn-thu{ align-self:center; font-size:14px; }
.pc-hn-ngay .pc-hn-sap{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto; font-size:12.5px; font-weight:700; color:var(--nv-phu, #7a6a60); }
.pc-hn-ngay button.pc-chip{ border:0; cursor:pointer; }

/* ───── "Chỉnh riêng từng lớp / từng ca": thanh lọc mảnh + thẻ lớp xếp lưới, mỗi ca 1 hàng ───── */
.pc-chi-tiet > summary{ display:flex; align-items:baseline; gap:10px; list-style:none; }
.pc-chi-tiet > summary::-webkit-details-marker{ display:none; }
.pc-chi-tiet > summary::before{ content:'▸'; font-size:13px; transition:transform .15s ease; }
.pc-chi-tiet[open] > summary::before{ transform:rotate(90deg); }
.pc-chi-tiet > summary small{ font-size:12px; font-weight:600; color:var(--nv-phu, #7a6a60); }
.pc-loc{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:8px 12px; border:1px solid var(--nv-vien, #0000001a); border-radius:14px; background:var(--nv-the, #fff); }
.pc-loc label{ display:inline-flex; align-items:center; gap:7px; margin:0; font-size:12.5px; font-weight:700; color:var(--nv-phu, #7a6a60); }
.pc-loc label i{ color:#b10e25; }
.pc-loc .form-select{ min-width:130px; width:auto; font-weight:700; }
.pc-loc-xoa{ border:0; background:#fde5e3; color:#c62828; border-radius:999px; padding:4px 11px; font-size:12px; font-weight:800; cursor:pointer; }
.pc-loc-dem{ margin-left:auto; font-size:12px; font-weight:700; color:var(--nv-phu, #7a6a60); font-variant-numeric:tabular-nums; }

.pc-luoi-lop{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 470px), 1fr)); gap:12px; align-items:start; }
.pc-the{ padding:12px 14px; border:1px solid var(--nv-vien, #0000001a); border-radius:16px; background:var(--nv-the, #fff); }
.pc-the-dau{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; padding-bottom:8px; border-bottom:2px solid #b10e25; }
.pc-the-dau h3{ margin:0; font-size:18px; font-weight:900; color:#7d0814; }
.pc-the-dau small{ color:var(--nv-phu, #7a6a60); font-size:12px; font-weight:600; }
.pc-dong{ display:grid; grid-template-columns:minmax(150px, .95fr) minmax(0, 1fr) 34px minmax(0, 1fr); gap:6px 8px; align-items:center; padding:7px 4px; border-bottom:1px dashed #0000001a; }
.pc-the .pc-dong:last-child{ border-bottom:0; }
.pc-dong-dau{ padding:2px 4px 4px; border-bottom:0; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--nv-phu, #7a6a60); }
.pc-dong.pc-sua{ margin:0 -6px; padding-left:10px; padding-right:10px; border-radius:10px; background:#fff8e6; }
.pc-dong.pc-trong .form-select{ border-style:dashed; }
.pc-dong .pc-ca{ display:flex; align-items:center; flex-wrap:wrap; gap:2px 8px; line-height:1.25; }
.pc-dong .pc-ca span{ color:var(--nv-phu, #7a6a60); font-size:12.5px; white-space:nowrap; }
.pc-dong .pc-si{ font-style:normal; font-size:11.5px; font-weight:800; color:#7d0814; background:#7d081412; border-radius:999px; padding:1px 8px; white-space:nowrap; }
.pc-dong .form-select{ width:100%; min-width:0; }
.pc-dong .pc-tt{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 8px; }
@media (max-width:640px){
  .pc-dong{ grid-template-columns:1fr 34px 1fr; }
  .pc-dong .pc-ca{ grid-column:1 / -1; }
  .pc-dong-dau{ display:none; }
  .pc-loc label, .pc-loc .form-select{ width:100%; }
}

/* Trợ giảng đang làm / đã nghỉ + ô tích giao duyệt Khiên (27/10/2026) */
.pc-ns{ margin:0 0 14px; }
.pc-ns-ds{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:8px; }
.pc-ns-dong{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; padding:8px 12px; border:1px solid #00000018; border-radius:12px; background:#fff; }
.pc-ns-dong b{ margin-right:auto; }
.pc-ns-dong small{ flex-basis:100%; color:var(--nv-phu, #7a6a60); }
.pc-ns-nghi{ background:#fbf3f2; border-style:dashed; }
.pc-ns-nghi b{ text-decoration:line-through; text-decoration-color:#c6282855; }
.pc-giao-duyet{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:13px; }

.pc-dong .pc-lop-ca{ font-weight:700; color:#7d0814; }

/* Nút đổi chỗ trợ giảng 1 ↔ 2 */
.pc-dong .pc-doi{ width:34px; height:31px; padding:0; border:1px solid #00000022; border-radius:8px; background:#fff; color:#7d0814; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.pc-dong .pc-doi:hover:not(:disabled){ background:#7d081412; border-color:#7d081455; }
.pc-dong .pc-doi:disabled{ opacity:.35; cursor:not-allowed; }
.pc-doi-khoi{ margin-left:6px; }

/* ĐĂNG KÝ XẾP LỚP (tab Admin + trợ giảng, js/xep-lop.js) — kiểu truyện tranh như trang học sinh/phụ huynh:
   banner nền đêm + huy hiệu + ô số bấm lọc (như .hs-hv-banner), thẻ viền mực bóng cứng, tem trạng thái nghiêng, nút vàng gradient.
   Bảng màu: đỏ #b5091c · vàng #ffce42 · mực #15110f · viền nâu đỏ #3c0c08. Keyframes dùng chung từ hoc-sinh.css (hs-quet, hs-len, hs-tem-vao, hs-chu-vao, hs-dap, hs-noi). */

/* ---- Banner ---- */
#pane-xeplop .xl-banner { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-bottom:16px; padding:22px 24px; color:#fff;
  border:3px solid #15110f; border-radius:18px; box-shadow:6px 6px 0 #c0121f, 0 16px 32px #5a0a1030;
  background:radial-gradient(circle,#ffffff12 1px,transparent 1.5px) 0 0/9px 9px,radial-gradient(ellipse at 12% 60%,#ff9d2a55,transparent 42%),repeating-linear-gradient(145deg,transparent 0 60px,#ffb93212 61px 63px,transparent 64px 120px),linear-gradient(115deg,#15110f,#5a040b 45%,#a10a17 75%,#3a0207); }
#pane-xeplop .xl-banner::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg,transparent 38%,#fff6d026 48%,#ffffff33 50%,transparent 62%); transform:translate3d(-100%,0,0); animation:hs-quet 8s cubic-bezier(.16,1,.3,1) 1.5s infinite; }
#pane-xeplop .xl-huy { flex:none; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; font-size:26px; color:#fff; border:3px solid #fff;
  box-shadow:0 0 0 3px #15110f, 4px 4px 0 3px #15110f, 0 0 22px #ffb21f88; text-shadow:0 2px 0 #15110f; animation:hs-noi 5s ease-in-out infinite; }
#pane-xeplop .xl-banner-chu { flex:1 1 250px; min-width:0; }
#pane-xeplop .xl-banner-chu small { display:block; font:400 16px/1.1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.05em; text-transform:uppercase; color:#ffd24d; animation:hs-len .7s cubic-bezier(.16,1,.3,1) .1s backwards; }
#pane-xeplop .xl-banner-chu h2 { margin:4px 0 0; font:400 clamp(26px,2.8vw,38px)/1.05 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.03em; text-transform:uppercase; color:#ffd24d; text-shadow:3px 3px 0 #7a0610, 4px 4px 0 #15110f; animation:hs-chu-vao .8s cubic-bezier(.16,1,.3,1) backwards; }
#pane-xeplop .xl-banner-chu p { margin:8px 0 0; font-size:13px; line-height:1.45; color:#ffeccf; max-width:46ch; }

/* Ô số = nút lọc theo trạng thái */
#pane-xeplop .xl-banner-so { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; flex:1 1 440px; }
#pane-xeplop .xl-so { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 6px 8px; cursor:pointer; text-align:center; font-family:inherit;
  border:2px solid #15110f; border-radius:11px; background:linear-gradient(#fffdf6,#ffe9b0); box-shadow:3px 3px 0 #c0121f; transform:skew(-4deg);
  animation:hs-dap .55s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:calc(var(--i, 0) * 70ms); transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease; }
#pane-xeplop .xl-so:hover { transform:skew(-4deg) translateY(-2px); box-shadow:3px 5px 0 #c0121f; }
#pane-xeplop .xl-so:focus-visible { outline:3px solid #ffd24d; outline-offset:2px; }
#pane-xeplop .xl-so i { font-size:13px; color:#c0121f; }
#pane-xeplop .xl-so b { font:400 28px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.03em; color:#b20b18; text-shadow:1px 1px 0 #fff3b0; font-variant-numeric:tabular-nums; }
#pane-xeplop .xl-so small { font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#5a0a10; line-height:1.2; }
#pane-xeplop .xl-so.dang-loc { background:linear-gradient(#ffe582,#ffc42e); box-shadow:3px 3px 0 #15110f, 0 0 0 3px #ffd24d66; transform:skew(-4deg) scale(1.06); }

/* ---- Thanh tìm ---- */
#pane-xeplop .xl-loc { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:4px; }
#pane-xeplop .xl-tim { flex:1 1 260px; display:flex; align-items:center; gap:9px; margin:0; padding:0 14px; background:#fffdf6; border:2px solid #15110f; border-radius:10px; box-shadow:0 3px 0 #3c0c08; }
#pane-xeplop .xl-tim i { color:#b5091c; }
#pane-xeplop .xl-tim input { flex:1; min-width:0; padding:10px 0; border:0; outline:0; background:transparent; font-size:14px; font-weight:600; color:#211b18; }
#pane-xeplop .xl-tim:focus-within { box-shadow:0 3px 0 #3c0c08, 0 0 0 3px #ffd24d99; }
#pane-xeplop .xl-tai-lai { padding:10px 16px; font:800 13px/1 inherit; color:#3c2a14; background:#fffdf6; border:2px solid #15110f; border-radius:10px; box-shadow:0 3px 0 #3c0c08; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; }
#pane-xeplop .xl-tai-lai:hover { transform:translateY(-1px); box-shadow:0 4px 0 #3c0c08; }
#pane-xeplop .xl-tai-lai:active { transform:translateY(2px); box-shadow:none; }

/* ---- Thẻ đăng ký ---- */
#pane-xeplop .xl-luoi { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:20px 18px; margin-top:12px; padding-bottom:8px; }
#pane-xeplop .xl-the { position:relative; display:flex; flex-direction:column; gap:11px; padding:20px 16px 14px; color:#211b18;
  background:linear-gradient(#fffdf6,#fff6df); border:3px solid #15110f; border-radius:14px; box-shadow:5px 5px 0 #c0121f;
  animation:hs-len .5s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(var(--i, 0) * 60ms); transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
#pane-xeplop .xl-the:hover { transform:translateY(-3px); box-shadow:5px 8px 0 #c0121f; }
#pane-xeplop .xl-the.xl-da_lien_he { box-shadow:5px 5px 0 #e0a100; }  #pane-xeplop .xl-the.xl-da_lien_he:hover { box-shadow:5px 8px 0 #e0a100; }
#pane-xeplop .xl-the.xl-da_xep_lop { box-shadow:5px 5px 0 #1b7f46; background:linear-gradient(#fbfffc,#eaf8ef); }  #pane-xeplop .xl-the.xl-da_xep_lop:hover { box-shadow:5px 8px 0 #1b7f46; }
#pane-xeplop .xl-the.xl-huy { box-shadow:5px 5px 0 #8a817a; background:#f4f0ea; opacity:.88; }  #pane-xeplop .xl-the.xl-huy:hover { box-shadow:5px 8px 0 #8a817a; }

/* Tem trạng thái nghiêng, đè lên mép trên-phải của thẻ */
#pane-xeplop .xl-tem { position:absolute; top:-13px; right:14px; z-index:1; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff6df;
  background:#8b030e; border:2px solid #15110f; border-radius:6px; box-shadow:3px 3px 0 #15110f; transform:skew(-5deg); animation:hs-tem-vao .6s cubic-bezier(.34,1.56,.64,1) .15s backwards; }
#pane-xeplop .xl-the.xl-moi .xl-tem { color:#15110f; background:linear-gradient(#ffe582,#ffc42e); }
#pane-xeplop .xl-the.xl-da_lien_he .xl-tem { color:#15110f; background:#ffe9b0; }
#pane-xeplop .xl-the.xl-da_xep_lop .xl-tem { background:#1b7f46; }
#pane-xeplop .xl-the.xl-huy .xl-tem { background:#6b625b; }

#pane-xeplop .xl-dau { display:flex; align-items:center; gap:12px; }
#pane-xeplop .xl-khoi { flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; font:400 24px/1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; color:#fff; background:#6b625b;
  border:2px solid #15110f; box-shadow:2px 2px 0 #15110f; text-shadow:1px 1px 0 #15110f; }
#pane-xeplop .xl-khoi.k9 { background:#6d28d9; } #pane-xeplop .xl-khoi.k10 { background:#1d4ed8; } #pane-xeplop .xl-khoi.k11 { background:#db2777; } #pane-xeplop .xl-khoi.k12 { background:#ea580c; }
#pane-xeplop .xl-ten-khung { min-width:0; }
#pane-xeplop .xl-ten { display:block; font-size:17px; line-height:1.2; color:#211b18; overflow-wrap:anywhere; }
#pane-xeplop .xl-ten-khung small { display:block; margin-top:2px; font-size:12.5px; font-weight:700; color:#5a0a10; }
#pane-xeplop .xl-ten-khung small.xl-moc { font-weight:600; color:#6b5a45; font-size:12px; }

#pane-xeplop .xl-lienhe { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#pane-xeplop .xl-sdt { margin-right:2px; font:400 27px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.04em; color:#b20b18; text-shadow:1px 1px 0 #fff3b0; text-decoration:none; transition:transform .25s ease; }
#pane-xeplop .xl-sdt i { font-size:17px; margin-right:3px; }
#pane-xeplop .xl-sdt:hover { transform:rotate(-2deg) scale(1.04); }
#pane-xeplop .xl-ghi-chu { margin:0; padding:9px 12px; font-size:13.5px; line-height:1.45; color:#574020; background:#fff0c9; border:1px dashed #c9a24a; border-radius:9px; }
#pane-xeplop .xl-xu-ly { margin:0; font-size:12.5px; font-weight:800; color:#1b7f46; }
#pane-xeplop .xl-noi-bo { width:100%; padding:8px 11px; font-size:13px; font-weight:600; color:#211b18; background:#fff; border:2px solid #15110f55; border-radius:9px; outline:0; transition:border-color .2s ease, box-shadow .2s ease; }
#pane-xeplop .xl-noi-bo:focus { border-color:#15110f; box-shadow:0 0 0 3px #ffd24d99; }
#pane-xeplop .xl-nut { display:flex; flex-wrap:wrap; gap:8px; }

/* Nút kiểu truyện tranh: viền mực, bóng đổ cứng, nhấn xuống như nút thật */
#pane-xeplop .xl-b { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; font:800 13px/1 'Be Vietnam Pro',system-ui,sans-serif; text-decoration:none; cursor:pointer; color:#19130c;
  border:2px solid #15110f; border-radius:9px; box-shadow:0 3px 0 #3c0c08; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease; }
#pane-xeplop .xl-b:hover { transform:translateY(-2px); box-shadow:0 5px 0 #3c0c08; filter:brightness(1.04); }
#pane-xeplop .xl-b:active { transform:translateY(2px); box-shadow:0 0 0 #3c0c08; }
#pane-xeplop .xl-b:focus-visible { outline:3px solid #ffd24d; outline-offset:2px; }
#pane-xeplop .xl-b:disabled { opacity:.55; cursor:wait; transform:none; }
#pane-xeplop .xl-b.vang { background:linear-gradient(#ffe582,#ffc42e); }
#pane-xeplop .xl-b.luc { color:#fff; text-shadow:0 1px 0 #0b3d20; background:linear-gradient(#5fe08f,#22a85a); }
#pane-xeplop .xl-b.kem { background:#fffdf6; color:#3c2a14; }
#pane-xeplop .xl-b.zalo { color:#fff; background:#0068ff; }

#pane-xeplop .xl-trong { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; padding:28px 20px; text-align:center; font-weight:800; color:#5a0a10; background:#fff6df; border:2px dashed #b5091c66; border-radius:14px; }
#pane-xeplop .xl-trong.do { color:#8b030e; border-style:solid; }

@media (max-width: 720px) {
  #pane-xeplop .xl-banner { padding:18px 14px; gap:12px; }
  #pane-xeplop .xl-huy { width:50px; height:50px; font-size:20px; }
  #pane-xeplop .xl-banner-so { flex-basis:100%; grid-template-columns:repeat(3, minmax(0,1fr)); gap:7px; }
  #pane-xeplop .xl-so b { font-size:23px; } #pane-xeplop .xl-so small { font-size:9px; }
  #pane-xeplop .xl-luoi { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #pane-xeplop .xl-banner::after { display:none; }
  #pane-xeplop .xl-huy, #pane-xeplop .xl-so, #pane-xeplop .xl-the, #pane-xeplop .xl-tem, #pane-xeplop .xl-banner-chu small, #pane-xeplop .xl-banner-chu h2 { animation:none; }
}

/* CẤP KEY HNOTE (tab chỉ Admin, js/hnote-key.js) — cùng kiểu truyện tranh như tab Đăng ký xếp lớp: banner nền đêm + ô số bấm lọc,
   thẻ viền mực bóng cứng, tem nghiêng. Bảng màu: đỏ #b5091c · vàng #ffce42 · mực #15110f · viền nâu đỏ #3c0c08. Keyframes dùng chung từ hoc-sinh.css. */

#pane-hnotekey .hk-banner { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-bottom:16px; padding:22px 24px; color:#fff;
  border:3px solid #15110f; border-radius:18px; box-shadow:6px 6px 0 #c0121f, 0 16px 32px #5a0a1030;
  background:radial-gradient(circle,#ffffff12 1px,transparent 1.5px) 0 0/9px 9px,radial-gradient(ellipse at 12% 60%,#ff9d2a55,transparent 42%),linear-gradient(115deg,#15110f,#5a040b 45%,#a10a17 75%,#3a0207); }
#pane-hnotekey .hk-huy { flex:none; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; font-size:26px; color:#fff; border:3px solid #fff;
  box-shadow:0 0 0 3px #15110f, 4px 4px 0 3px #15110f, 0 0 22px #ffb21f88; text-shadow:0 2px 0 #15110f; }
#pane-hnotekey .hk-banner-chu { flex:1 1 250px; min-width:0; }
#pane-hnotekey .hk-banner-chu small { display:block; font:400 16px/1.1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.05em; text-transform:uppercase; color:#ffd24d; }
#pane-hnotekey .hk-banner-chu h2 { margin:4px 0 0; font:400 clamp(26px,2.8vw,38px)/1.05 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.03em; text-transform:uppercase; color:#ffd24d; text-shadow:3px 3px 0 #7a0610, 4px 4px 0 #15110f; }
#pane-hnotekey .hk-banner-chu p { margin:8px 0 0; font-size:13px; line-height:1.45; color:#ffeccf; max-width:52ch; }

#pane-hnotekey .hk-banner-so { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; flex:1 1 460px; }
#pane-hnotekey .hk-so { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 6px 8px; text-align:center; font-family:inherit;
  border:2px solid #15110f; border-radius:11px; background:linear-gradient(#fffdf6,#ffe9b0); box-shadow:3px 3px 0 #c0121f; transform:skew(-4deg);
  animation:hs-dap .55s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:calc(var(--i, 0) * 70ms); transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
#pane-hnotekey button.hk-so { cursor:pointer; }
#pane-hnotekey button.hk-so:hover { transform:skew(-4deg) translateY(-2px); box-shadow:3px 5px 0 #c0121f; }
#pane-hnotekey .hk-so:focus-visible { outline:3px solid #ffd24d; outline-offset:2px; }
#pane-hnotekey .hk-so i { font-size:13px; color:#c0121f; }
#pane-hnotekey .hk-so b { font:400 26px/1 'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.03em; color:#b20b18; text-shadow:1px 1px 0 #fff3b0; font-variant-numeric:tabular-nums; }
#pane-hnotekey .hk-so-tien b { font-size:20px; }
#pane-hnotekey .hk-so small { font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#5a0a10; line-height:1.2; }
#pane-hnotekey .hk-so.dang-loc { background:linear-gradient(#ffe582,#ffc42e); box-shadow:3px 3px 0 #15110f, 0 0 0 3px #ffd24d66; transform:skew(-4deg) scale(1.06); }

/* Khung cấp key */
#pane-hnotekey .hk-form { margin:0 0 18px; padding:18px 18px 14px; color:#211b18; background:linear-gradient(#fffdf6,#fff6df); border:3px solid #15110f; border-radius:14px; box-shadow:5px 5px 0 #c0121f; }
#pane-hnotekey .hk-form h3 { margin:0 0 12px; font:400 22px/1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.04em; text-transform:uppercase; color:#b20b18; }
#pane-hnotekey .hk-luoi-form { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px 14px; }
#pane-hnotekey .hk-form label { display:block; margin:0 0 3px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#5a0a10; }
#pane-hnotekey .hk-form input, #pane-hnotekey .hk-form select { width:100%; padding:9px 11px; font-size:14px; font-weight:600; color:#211b18; background:#fff; border:2px solid #15110f; border-radius:9px; box-shadow:0 2px 0 #3c0c08; }
#pane-hnotekey .hk-form input:focus, #pane-hnotekey .hk-form select:focus { outline:0; box-shadow:0 2px 0 #3c0c08, 0 0 0 3px #ffd24d99; }
#pane-hnotekey .hk-form input.hk-in-ma { font:700 16px/1.2 Consolas,'Courier New',monospace; letter-spacing:.08em; text-transform:uppercase; }
#pane-hnotekey .hk-rong { grid-column:1 / -1; }
#pane-hnotekey .hk-kq { margin-top:14px; padding:12px 14px; background:#eaf8ef; border:2px solid #1b7f46; border-radius:10px; }
#pane-hnotekey .hk-kq-dau { margin-bottom:8px; font-weight:800; color:#1b7f46; }
#pane-hnotekey .hk-kq textarea { width:100%; padding:9px 11px; font:12.5px/1.4 Consolas,'Courier New',monospace; word-break:break-all; color:#211b18; background:#fff; border:2px solid #15110f; border-radius:9px; resize:vertical; }

#pane-hnotekey .hk-muc { margin:18px 0 6px; font:400 22px/1 'Bangers','Be Vietnam Pro',sans-serif; font-style:italic; letter-spacing:.04em; text-transform:uppercase; color:#b20b18; }
#pane-hnotekey .hk-loc { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:4px; }
#pane-hnotekey .hk-tim { flex:1 1 260px; display:flex; align-items:center; gap:9px; margin:0; padding:0 14px; background:#fffdf6; border:2px solid #15110f; border-radius:10px; box-shadow:0 3px 0 #3c0c08; }
#pane-hnotekey .hk-tim i { color:#b5091c; }
#pane-hnotekey .hk-tim input { flex:1; min-width:0; padding:10px 0; border:0; outline:0; background:transparent; font-size:14px; font-weight:600; color:#211b18; }
#pane-hnotekey .hk-tim:focus-within { box-shadow:0 3px 0 #3c0c08, 0 0 0 3px #ffd24d99; }

/* Thẻ */
#pane-hnotekey .hk-luoi { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:20px 18px; margin-top:12px; padding-bottom:8px; }
#pane-hnotekey .hk-the { position:relative; display:flex; flex-direction:column; gap:10px; padding:20px 16px 14px; color:#211b18;
  background:linear-gradient(#fffdf6,#fff6df); border:3px solid #15110f; border-radius:14px; box-shadow:5px 5px 0 #c0121f;
  animation:hs-len .5s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(var(--i, 0) * 60ms); }
#pane-hnotekey .hk-the.hk-cho { box-shadow:5px 5px 0 #e0a100; }
#pane-hnotekey .hk-the.hk-dung { box-shadow:5px 5px 0 #1b7f46; background:linear-gradient(#fbfffc,#eaf8ef); }
#pane-hnotekey .hk-the.hk-het { box-shadow:5px 5px 0 #e0a100; }
#pane-hnotekey .hk-the.hk-huy { box-shadow:5px 5px 0 #8a817a; background:#f4f0ea; opacity:.9; }
#pane-hnotekey .hk-tem { position:absolute; top:-13px; right:14px; z-index:1; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff6df;
  background:#1b7f46; border:2px solid #15110f; border-radius:6px; box-shadow:3px 3px 0 #15110f; transform:skew(-5deg); }
#pane-hnotekey .hk-cho .hk-tem, #pane-hnotekey .hk-het .hk-tem { color:#15110f; background:linear-gradient(#ffe582,#ffc42e); }
#pane-hnotekey .hk-huy .hk-tem { background:#6b625b; }
#pane-hnotekey .hk-ten { display:block; font-size:17px; line-height:1.2; overflow-wrap:anywhere; }
#pane-hnotekey .hk-dau small { display:block; margin-top:2px; font-size:12.5px; font-weight:700; color:#5a0a10; }
#pane-hnotekey .hk-dau small a { color:inherit; }
#pane-hnotekey .hk-ma { display:block; padding:8px 10px; font:700 17px/1.1 Consolas,'Courier New',monospace; letter-spacing:.08em; text-align:center; color:#15110f; background:#fff; border:2px dashed #15110f; border-radius:9px; user-select:all; }
#pane-hnotekey .hk-phu { font-size:12px; font-weight:600; color:#6b5a45; line-height:1.4; }
#pane-hnotekey .hk-ghi-chu { margin:0; padding:8px 11px; font-size:13px; line-height:1.4; color:#574020; background:#fff0c9; border:1px dashed #c9a24a; border-radius:9px; }
#pane-hnotekey .hk-ghi-chu.do { color:#8b030e; background:#fde7e9; border-color:#d98a92; }
#pane-hnotekey .hk-nut { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
#pane-hnotekey .hk-b { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; font:800 12.5px/1 inherit; color:#15110f; border:2px solid #15110f; border-radius:9px; box-shadow:2px 2px 0 #15110f; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
#pane-hnotekey .hk-b:hover { transform:translateY(-1px); box-shadow:2px 3px 0 #15110f; }
#pane-hnotekey .hk-b:active { transform:translate(2px,2px); box-shadow:none; }
#pane-hnotekey .hk-b[disabled] { opacity:.45; cursor:not-allowed; transform:none; }
#pane-hnotekey .hk-b.vang { background:linear-gradient(#ffe582,#ffc42e); }
#pane-hnotekey .hk-b.kem { background:#fffdf6; }
#pane-hnotekey .hk-b.do { color:#fff; background:#b5091c; }
#pane-hnotekey .hk-trong { margin-top:12px; padding:18px; text-align:center; font-weight:700; color:#574020; background:#fff6df; border:2px dashed #c9a24a; border-radius:12px; }
#pane-hnotekey .hk-trong.do { color:#8b030e; border-color:#d98a92; background:#fde7e9; }
@media (max-width:640px) { #pane-hnotekey .hk-banner-so { grid-template-columns:repeat(2, minmax(0,1fr)); } #pane-hnotekey .hk-luoi { grid-template-columns:1fr; } }