/* ══════════════════════════════════════════════════════════════════════════════════════════════
   BẢNG THEO DÕI + QUẢN TRỊ TÀI KHOẢN (gv.html) — §41
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Nạp SAU trang.css. Token màu / nút / ô nhập đều lấy từ trang.css — file này CHỈ thêm phần
   riêng: thanh tiêu đề, hàng tab, dải thẻ tóm tắt, bảng, popup quản trị.

   Bảng theo tinh thần §3/§7 của app (header sticky, cột cuối co giãn, kẻ ô đầy đủ ở header)
   vì GV đã quen — khác trang học viên vốn thiết kế tự do cho điện thoại (§41.7).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠ body là flex column: topbar + tabbar cao cố định, vùng nội dung ăn phần còn lại.
   KHÔNG để .man-full min-height:100dvh nữa — cộng với 2 thanh trên là tràn quá màn hình. */
body.gv { min-height: 100dvh; display: flex; flex-direction: column; }
.man-full { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Màn đăng nhập hiện khi 2 thanh trên đang ẩn ⇒ vẫn căn giữa cả màn hình */
body.gv > .man { flex: 1 1 auto; }

/* ── Thanh tiêu đề ────────────────────────────────────────────────────────────────────────── */
.topbar {
  flex: 0 0 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: var(--white); border-bottom: 1px solid var(--border);
}
.brand { font-size: 15px; font-weight: 700; color: var(--blue); }
.sep { width: 1px; height: 18px; background: var(--border); }
.org { font-size: 12px; color: var(--t3); }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
  border: 1px solid #CFD8E6; color: var(--t2);
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF2F9 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(26, 51, 80, .10);
}
.badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 3px;
}
.badge.gv { background: var(--blue-light); color: var(--blue); }
.badge.cb { background: #FEF3C7; color: #92400E; }

/* ── Hàng tab pill ────────────────────────────────────────────────────────────────────────── */
.tabbar {
  flex: 0 0 40px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: var(--white); border-bottom: 1px solid var(--border);
}
.pill {
  height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 14px;
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--t2); cursor: pointer;
  border: 1px solid #CFD8E6; background: var(--grad-soft);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(26, 51, 80, .10); white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s, transform .12s;
}
.pill:hover { background: var(--grad-soft-h); border-color: #AAB4C4; color: var(--blue); transform: translateY(-1px); }
/* Tab đang chọn — cùng bề mặt với .bt-chinh */
.pill.dang {
  color: #fff; border-color: #1560A6; background: var(--grad-btn);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 1px 2px rgba(26, 51, 80, .18);
}

/* ── Thanh công cụ trong từng màn ─────────────────────────────────────────────────────────── */
.tb {
  flex: 0 0 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--white); border-bottom: 1px solid var(--border);
}
.tb b { font-size: 14px; }
.tb .giua { flex: 1; }
.tb .bt { flex: 0 0 auto; }
.o-nho { height: 28px; width: auto; min-width: 110px; font-size: 13px; }

/* Nhịp cập nhật */
.nhip { color: #cfd6dd; font-size: 16px; transition: color .3s; }
.nhip.dap { color: var(--luc); }

/* ── Dải thẻ tóm tắt ──────────────────────────────────────────────────────────────────────── */
.dai { display: flex; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.the {
  background: var(--white); border: 1px solid var(--vien); border-radius: 8px;
  padding: 8px 12px; min-width: 130px;
}
.the-rong { flex: 1; min-width: 300px; }
.the-nhan { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #8a939c; }
.the-ma { font-size: 30px; font-weight: 700; letter-spacing: 6px; color: var(--blue-dark); }
.the-so { font-size: 24px; font-weight: 700; color: #222; }

/* Biểu đồ cột — div/CSS thuần, không thư viện (offline §1, đồng bộ §32.30) */
.cot { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin-top: 4px; }
.cot i, .cot-1 { flex: 1; min-width: 5px; background: var(--luc); border-radius: 2px 2px 0 0; display: block; }
.cot i.vua, .cot-1.vua { background: var(--cam); }
.cot i.kem, .cot-1.kem { background: var(--do); }

/* ── Bảng ─────────────────────────────────────────────────────────────────────────────────── */
.vung { flex: 1 1 auto; overflow: auto; padding: 0 12px 12px; scrollbar-gutter: stable; }
.vung::-webkit-scrollbar { width: 4px; height: 4px; }
.vung::-webkit-scrollbar-thumb { background: #c3ccd5; border-radius: 2px; }

.bang { width: 100%; border-collapse: collapse; background: var(--white); table-layout: fixed; font-size: 13px; }
.bang thead th {
  position: sticky; top: 0; z-index: 2;               /* §3: header cố định khi cuộn */
  background: #eef2f6; border: 1px solid var(--vien);
  padding: 6px 8px; text-align: center; font-weight: 600;
}
.bang tbody td { border-bottom: 1px solid #e8ecf0; padding: 5px 8px; vertical-align: middle; }
.bang tbody tr:nth-child(even) { background: #f6f9fc; }
.bang tbody tr:hover { background: var(--blue-light); }
.co-tro { cursor: pointer; }
.giua { text-align: center; }
.ma { font-family: Consolas, 'Courier New', monospace; }
.mo-nhat { color: #9aa4ae; }
.trong { text-align: center; color: #8a939c; padding: 24px; font-size: 14px; }
.chuthich { font-size: 12px; color: var(--t3); margin-top: 8px; }

.dang-lam { color: var(--cam); font-weight: 600; }
.xong { color: var(--luc); font-weight: 600; }
.diem-o { font-weight: 700; }
.thao-tac { display: flex; gap: 4px; justify-content: center; }
.cham-mo {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--luc); margin-right: 5px; vertical-align: middle;
}
.nhan-khach {
  font-style: normal; font-size: 10px; background: #fff3e0; color: var(--cam);
  border: 1px solid #ffcc80; border-radius: 3px; padding: 0 4px; margin-left: 4px;
}

/* Ô "Từng câu" — cột FLEX (§3), ô vuông xanh/đỏ */
.o-qs { display: flex; gap: 2px; flex-wrap: wrap; }
.o-qs i { width: 12px; height: 12px; border-radius: 2px; display: block; background: #cfd6dd; }
.o-qs i.d { background: var(--luc); }
.o-qs i.s { background: var(--do); }

/* ── Popup quản trị tài khoản ─────────────────────────────────────────────────────────────── */
.hop-rong { max-width: 420px; text-align: left; }
.hop-rong h1 { text-align: center; }
.lop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 9600;
  display: flex; align-items: center; justify-content: center; padding: 10px;
}
.hang-nut { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }

/* ── Popup mã QR ───────────────────────────────────────────────────────────────────────────── */
/* Chiếu lên bảng cho cả lớp quét ⇒ mã phải TO. 304px = 37 ô (phiên bản 4) × 8px, cỡ thật của
   <svg> nên không bị nội suy mờ; mã ngắn hơn ra lưới nhỏ hơn thì để nguyên, KHÔNG kéo giãn. */
.hop-qr { max-width: 380px; text-align: center; }
.hop-qr h1 { font-size: 17px; }
.qr-hinh { display: flex; justify-content: center; margin: 4px 0; }
.qr-hinh svg { display: block; max-width: 100%; height: auto; border: 1px solid var(--vien); }
.qr-ma {
  font-size: 26px; font-weight: 700; letter-spacing: 6px;
  color: var(--blue-dark); margin-top: 6px;
}
/* Địa chỉ đầy đủ để đọc to cho máy không quét được — ngắt được giữa chuỗi, không tràn hộp */
.qr-diachi {
  font-size: 11px; color: var(--t3); word-break: break-all; line-height: 1.35; margin-top: 4px;
}


/* ── Màn chữa bài (§41) ────────────────────────────────────────────────────────────────────── */
/* Chiếu lên bảng cho cả lớp đọc ⇒ cỡ chữ lớn hơn hẳn các bảng khác của trang này. */
.cb-so { font-size: 15px; color: var(--blue-dark); min-width: 92px; text-align: right; }

/* Dải ô từng câu — bấm để nhảy, màu theo % lớp đúng (cùng thang màu với biểu đồ cột) */
.cb-dai {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px;
  background: var(--white); border-bottom: 1px solid var(--border);
}
.cb-o {
  width: 28px; height: 26px; border: 1px solid var(--vien); border-radius: 4px;
  background: #E8F5E9; color: var(--t1); font: inherit; font-size: 12px; cursor: pointer;
}
.cb-o.vua { background: #FFF3E0; }
.cb-o.kem { background: #FDE7E6; }
.cb-o.chua { background: #F1F3F6; color: var(--t3); }
.cb-o:hover { border-color: var(--blue); }
.cb-o.dang { border: 2px solid var(--blue); font-weight: 700; }

/* Giới hạn bề ngang: trên máy chiếu 1920px mà để dàn hết thì chữ ở mép trái, thanh tỉ lệ ở
   mép phải — không dóng hàng nổi bằng mắt từ cuối lớp. */
.cb-than { padding: 4px 0 10px; max-width: 1040px; }
.cb-dau { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cb-nhan { font-size: 12px; color: var(--t3); }
.cb-tk { font-size: 13px; font-weight: 600; color: var(--luc); }
.cb-tk.kem { color: var(--do); }
.cb-hoi { font-size: 19px; line-height: 1.4; color: var(--t1); margin-bottom: 6px; }
/* Ngữ cảnh: câu văn quanh chỗ trống, hoặc gợi ý của ô chữ — chữ nhỏ hơn câu hỏi */
.cb-ctx { font-size: 14px; line-height: 1.5; color: var(--t2); margin-bottom: 10px; }

/* Một phương án: dấu tích · chữ · thanh tỉ lệ · đếm · phần trăm */
.cb-dong {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--vien); border-radius: 6px; margin-bottom: 6px;
  background: var(--white); font-size: 16px;
}
.cb-dong.dung { border-color: #7CB342; background: #F1F8E9; font-weight: 600; }
/* Câu trả lời KHÔNG nằm trong danh sách phương án của đề (đề đã sửa sau khi học viên làm) */
.cb-dong.la { border-style: dashed; }
.cb-dau-tich { width: 16px; color: var(--luc); font-weight: 700; }
.cb-chu { flex: 1; min-width: 0; }
.cb-bar { flex: 0 0 180px; height: 10px; background: #EDF1F5; border-radius: 5px; overflow: hidden; }
.cb-bar i { display: block; height: 100%; background: var(--blue); }
.cb-dong.dung .cb-bar i { background: var(--luc); }
.cb-dem { flex: 0 0 56px; text-align: right; font-size: 13px; color: var(--t2); }
.cb-pc { flex: 0 0 44px; text-align: right; font-size: 13px; color: var(--t3); }

/* Dạng bài không có phương án — chỉ một thanh % lớp đúng */
.cb-thanh { height: 14px; background: #EDF1F5; border-radius: 7px; overflow: hidden; max-width: 420px; }
.cb-thanh i { display: block; height: 100%; background: var(--luc); }
.cb-phu { font-size: 12px; color: var(--t3); margin-top: 8px; }

/* ── Điện thoại ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .topbar, .tabbar, .tb { flex-wrap: wrap; height: auto; flex-basis: auto; padding: 6px 10px; gap: 6px; }
  /* Ẩn cả vạch ngăn, không thì còn trơ dấu "|" sau tên trang */
  .org, .sep { display: none; }
  .the-ma { font-size: 24px; letter-spacing: 4px; }
  .vung { padding: 0 8px 12px; }
  /* Bảng nhiều cột: cho cuộn ngang TRONG vùng bảng, không để tràn cả trang */
  .bang { font-size: 12px; min-width: 640px; }
  .bang thead th, .bang tbody td { padding: 5px 6px; }
  .cb-hoi { font-size: 16px; }
  .cb-dong { font-size: 14px; flex-wrap: wrap; }
  .cb-bar { flex: 1 1 100px; }
  .cb-so { min-width: 0; }
}

/* ══ TAB "THEO DÕI LỚP" — ma trận Học viên × Phiên (§41.22) ═══════════════════════════════════
   3 cột đầu ghim trái, khối cột phiên cuộn ngang trong .vung.
   ⚠ Ô ghim PHẢI tự khai nền, nếu không nội dung cuộn bên dưới lộ xuyên qua. Và phải khai riêng
     cho hàng chẵn/lẻ vì bảng có kẻ sọc (nth-child) — quên là hàng chẵn hở nền trắng. */
.tom { flex: 0 0 auto; padding: 8px 12px 0; font-size: 13px; color: var(--t2); }
.tom b { color: #222; }
.tom b.canh, .td-canh { color: var(--do); }
.td-canh { margin-right: 3px; }

.td-bang { table-layout: auto; min-width: max-content; }
.td-bang th, .td-bang td { white-space: nowrap; }

.td-s { position: sticky; z-index: 1; }
.td-c1 { left: 0; min-width: 150px; }
.td-c2 { left: var(--td-l2, 150px); width: 74px; }
.td-c3 { left: var(--td-l3, 224px); width: 56px; box-shadow: 1px 0 0 var(--vien); }
.td-bang thead th.td-s { z-index: 3; }             /* góc trên-trái đè cả 2 chiều */

.td-bang tbody td.td-s { background: var(--white); }
.td-bang tbody tr:nth-child(even) td.td-s { background: #f6f9fc; }
.td-bang tbody tr:hover td.td-s { background: var(--blue-light); }
.td-bang tbody tr.td-nhac td.td-s { background: #fff6f6; }

/* Tiêu đề cột phiên: tên bài (rút gọn) + ngày · kiểu */
/* Cột rỗng cuối HÚT hết chỗ thừa — thiếu nó thì cột "Mã học viên" phình ra chiếm cả bảng. */
/* ⚠ Vùng cuộn KHÔNG được có padding ngang: nội dung cuộn đi qua vùng padding mà cột ghim
   (sticky left:0) chỉ phủ tới mép trong ⇒ chữ của cột đang trôi LÒI RA ở dải 12px bên trái. */
#manTD .vung, #manHV .vung { padding-left: 0; padding-right: 0; }
.td-hut { width: 100%; }
.td-p { width: 108px; max-width: 108px; }
.td-pt { display: block; font-weight: 600; }
.td-pd { display: block; font-weight: 400; font-size: 11px; color: #8a939c; }
.td-p:hover .td-pt { color: var(--blue); text-decoration: underline; }

/* Ô điểm — tô theo mức để liếc là thấy mảng kém nằm đâu */
.o-diem { font-weight: 700; }
.o-diem.tot { color: #14632f; background: #eaf7ef; }
.o-diem.vua { color: #8a4b00; background: #fff5e6; }
.o-diem.kem { color: #8a1c1c; background: #fdeced; }

.td-nhac td { background: #fff6f6; }
.td-nhom td {
  background: #eef2f6 !important; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--t3); text-transform: uppercase; padding: 4px 8px;
}

@media (max-width: 820px) {
  /* ⚠ §41.20: ô nhập < 16px làm iOS TỰ PHÓNG cả trang và không thu lại ⇒ mọi phần tử
     position:fixed trôi khỏi màn hình. Đừng hạ xuống cho "gọn". */
  .o, .o-nho, .o-ngay { font-size: 16px; }
  .td-bang { min-width: max-content; font-size: 12px; }
  .td-c1 { min-width: 120px; }
}

/* ══ TAB "DUNG LƯỢNG" (§41.23) — chỉ CB ═══════════════════════════════════════════════════════
   Thanh dung lượng: xanh < 70% · cam 70–90% · đỏ ≥ 90%. Chấm đỏ trên nút tab khi ≥ 80%. */
.pill.co-canh { position: relative; }
.pill.co-canh::after {
  content: ''; position: absolute; top: 3px; right: 4px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--do); box-shadow: 0 0 0 2px var(--white);
}
.dl-vung { padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.dl-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.dl-khoi { background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 10px; }
.dl-khoi h2 { font-size: 14px; margin: 0 0 8px; }
.dl-khoi .bang thead th { position: static; }
.dl-dong { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.dl-nhan { font-weight: 600; }
.dl-phu { display: block; font-weight: 400; font-size: 11px; color: #8a939c; }
.dl-thanh { height: 10px; border-radius: 5px; background: #e8ecf0; overflow: hidden; }
.dl-thanh i { display: block; height: 100%; min-width: 2px; border-radius: 5px; background: var(--luc); }
.dl-thanh i.vua { background: var(--cam); }
.dl-thanh i.kem { background: var(--do); }
.dl-thanh-nho { height: 8px; }
.dl-so { white-space: nowrap; }
.dl-chu { font-size: 12px; color: var(--t2); }
.dl-khac td { color: #8a939c; font-style: italic; }
.dl-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-don-moc { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dl-don-moc .nhan { margin: 0; }
.dl-don { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid #e8ecf0; font-size: 13px; }
.dl-don .bt { flex: 0 0 auto; }
.dl-canh { font-size: 13px; line-height: 1.5; text-align: left; color: var(--t2); }
.loi-nho { color: var(--do); font-size: 13px; margin: 0; }

@media (max-width: 820px) {
  .dl-luoi { grid-template-columns: 1fr; }
  .dl-dong { grid-template-columns: 1fr auto; }
  .dl-dong .dl-thanh { grid-column: 1 / -1; grid-row: 2; }
  .dl-khoi { overflow-x: auto; }
}
.dl-khoa td { color: #9aa4ae; }
.dl-khoi h2 .mo-nhat { font-weight: 400; font-size: 12px; margin-left: 6px; }
.dl-khoi td .badge { font-size: 10px; padding: 0 5px; }

/* ══ CHẾ ĐỘ CHIẾU (§41.32) — gv.html?chieu=<mã phiên>, mở trong cửa sổ "Tiến độ lớp" của app ══
   Cả lớp cùng xem ⇒ chỉ giữ 4 thẻ + bảng học viên; bỏ thanh trên, hàng tab, thanh nút của phiên. */
body.chieu #thanhTren, body.chieu #thanhTab, body.chieu #manCT > header.tb { display: none !important; }

/* ── Chế độ chiếu: dải mã QR các phiên của bài giảng (§41.32) ───────────────────────────── */
.ct-ds { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px 0; flex-shrink: 0; }
.ct-ds::-webkit-scrollbar { height: 4px; }
.ct-ds::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.ct-qr { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 6px 10px 6px 6px;
  background: #fff; border: 2px solid #e2e8f0; border-radius: 8px; cursor: pointer; font: inherit; text-align: left; }
.ct-qr:hover { border-color: #93c5fd; }
.ct-qr.dang { border-color: #1A6FBF; background: #eff6ff; }
.ct-qr.dong { opacity: .55; }
.ct-qr { padding: 6px 6px 6px 10px; }
.ct-qr-nut { align-self: stretch; min-width: 44px; padding: 0 10px; border: 1px solid #1A6FBF; border-radius: 6px;
  background: #fff; color: #1A6FBF; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ct-qr-nut:hover { background: #1A6FBF; color: #fff; }
.ct-qr-nut:disabled { border-color: #cbd5e1; color: #94a3b8; background: #fff; cursor: not-allowed; }
.ct-qr-chu { display: flex; flex-direction: column; gap: 2px; }
.ct-qr-chu b { font-size: 18px; letter-spacing: 2px; color: #1A6FBF; }
.ct-qr-chu small { font-size: 12px; color: #64748b; white-space: nowrap; }