/* Khu lớp học 8020 — CSS dùng chung cho /gv (giáo viên), /vao-lop, /lop-cua-toi */

/* ===== Khu làm việc của giáo viên — bố cục RIÊNG (không dùng nav 4 tab của học viên).
   Lý do: đây là màn quản lý dày dữ liệu, kiểu EasyEdu/iLeader/ClassIn — thanh tab học
   viên chỉ làm chật chỗ. Chỉ mượn biến màu + .btn của style.css. ===== */
:root { --gv-side:232px; }
body.gv { background:var(--bg); }
.gv-top { background:var(--navy); color:#fff; height:56px; display:flex; align-items:center;
  gap:14px; padding:0 18px; position:sticky; top:0; z-index:50; }
/* (23/8/2026) .lg (logo + chữ "IELTS 8020") đã gỡ khỏi cả 3 trang — khu này mở ra từ
   web chính nên không cần dán lại thương hiệu. Góc trái nay là lối VỀ TRANG CHỦ, in
   đậm hơn các link khác vì đó là lối ra duy nhất của khu này. */
.gv-top a.tlink.nha { font-weight:800; opacity:1; }
.gv-side a .ngan { display:none; }   /* mặc định dùng nhãn dài, chỉ điện thoại mới đổi */
.gv-top .sub { font-weight:600; opacity:.75; font-size:13px; border-left:1px solid rgba(255,255,255,.25); padding-left:14px; }
.gv-top .sp { margin-left:auto; }
.gv-top a.tlink { color:#fff; opacity:.85; text-decoration:none; font-size:13.5px; font-weight:600; }
.gv-top a.tlink:hover { opacity:1; text-decoration:underline; }

.gv-demo { background:#FEF3E2; color:#8A5200; border-bottom:1px solid #F3D9A8;
  padding:8px 18px; font-size:13px; font-weight:600; }
.gv-demo b { color:#B45309; }
/* Dải xanh = đang chạy dữ liệu thật (đã đăng nhập), khác hẳn dải vàng "xem thử". */
.gv-demo.that { background:#ECFDF5; color:#065F46; border-bottom-color:#A7F3D0; }
.gv-demo.that b { color:#065F46; }
.gv-demo select { font-size:13px; padding:2px 6px; border:1px solid var(--line-2); border-radius:6px; }

.gv-body { display:flex; align-items:flex-start; min-height:calc(100vh - 56px); }
.gv-side { width:var(--gv-side); flex:none; background:#fff; border-right:1px solid var(--line);
  padding:14px 10px; position:sticky; top:56px; height:calc(100vh - 56px); overflow:auto; }
.gv-side a { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:8px;
  text-decoration:none; color:#374151; font-weight:700; font-size:14px; margin-bottom:3px; }
.gv-side a:hover { background:#F3F6FB; color:var(--navy); }
.gv-side a.on { background:var(--navy); color:#fff; }
.gv-side .grp { font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  color:#9AA5B1; padding:14px 12px 6px; }
.gv-main { flex:1; min-width:0; padding:22px 26px 70px; }

.gv-h1 { font-size:22px; font-weight:800; color:var(--navy); margin:0 0 4px; }
.gv-lead { color:var(--muted); font-size:14px; margin:0 0 18px; }
.gv-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.gv-row.end { justify-content:space-between; }

.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px;
  box-shadow:var(--shadow); }
.cards { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); }
.kpis { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin-bottom:18px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:10px; padding:13px 15px; }
.kpi .lb { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
.kpi .vl { font-size:24px; font-weight:800; color:var(--navy); margin-top:3px; font-variant-numeric:tabular-nums; }
.kpi .nt { font-size:12px; color:var(--muted); margin-top:2px; }
.kpi.pink .vl { color:var(--pink); }

.lop-card { background:#fff; border:1px solid var(--line); border-left:4px solid var(--navy);
  border-radius:10px; padding:15px 16px; cursor:pointer; }
.lop-card:hover { border-color:var(--pink); border-left-color:var(--pink); }
.lop-card h3 { margin:0 0 3px; font-size:17px; color:var(--navy); }
.lop-card .meta { font-size:13px; color:var(--muted); line-height:1.7; }

table.gv-tb { width:100%; border-collapse:collapse; background:#fff; font-size:13.5px; }
table.gv-tb th { text-align:left; font-size:11.5px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--muted); padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.gv-tb td { padding:9px 10px; border-bottom:1px solid #F1F3F7; vertical-align:middle; }
table.gv-tb tr:hover td { background:#FAFBFD; }
.tb-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:#fff; }
.num { font-variant-numeric:tabular-nums; text-align:right; }

.chip { display:inline-block; font-size:11.5px; font-weight:800; padding:2px 9px; border-radius:999px; }
.chip.cho { background:#FEF3E2; color:#B45309; }
.chip.hoc { background:#D1FAE5; color:#065F46; }
.chip.nghi { background:#F1F5F9; color:#64748B; }
.chip.no { background:#FEE2E2; color:#991B1B; }
.chip.du { background:#D1FAE5; color:#065F46; }

.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin:16px 0 18px; flex-wrap:wrap; }
.tabs button { background:none; border:0; border-bottom:3px solid transparent; padding:10px 14px;
  font-size:14px; font-weight:700; color:#6B7280; cursor:pointer; }
.tabs button:hover { color:var(--navy); }
.tabs button.on { color:var(--navy); border-bottom-color:var(--pink); }

input.f, select.f, textarea.f { width:100%; padding:9px 11px; border:1px solid var(--line-2);
  border-radius:6px; font-size:14px; font-family:inherit; background:#fff; }
input.f:focus, select.f:focus, textarea.f:focus { outline:2px solid var(--navy); outline-offset:-1px; }
label.fl { display:block; font-size:12.5px; font-weight:700; color:var(--navy); margin:0 0 4px; }
.fg { margin-bottom:12px; }
.fgs { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.btn-sm { padding:6px 12px; font-size:12.5px; border-radius:6px; }

.ovl { position:fixed; inset:0; background:rgba(16,24,40,.5); display:flex; align-items:center;
  justify-content:center; padding:20px; z-index:300; }
.modal { background:#fff; border-radius:12px; padding:22px; width:100%; max-width:520px;
  max-height:88vh; overflow:auto; }
.modal h3 { margin:0 0 14px; color:var(--navy); font-size:19px; }

.mtd { font-size:12px; color:var(--muted); }
.empty { text-align:center; padding:40px 20px; color:var(--muted); background:#fff;
  border:1px dashed var(--line-2); border-radius:10px; }
.link { color:var(--pink); font-weight:700; cursor:pointer; text-decoration:none; }
.link:hover { text-decoration:underline; }
.invite { background:#F3F6FB; border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  font-size:13px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.invite code { background:#fff; border:1px solid var(--line); border-radius:5px; padding:4px 8px;
  font-size:12.5px; word-break:break-all; }
.dd { display:flex; gap:4px; }
.dd button { border:1px solid var(--line-2); background:#fff; border-radius:6px; padding:4px 9px;
  font-size:12px; font-weight:700; cursor:pointer; color:#6B7280; }
.dd button.on.co { background:#D1FAE5; border-color:#6EE7B7; color:#065F46; }
.dd button.on.muon { background:#FEF3E2; border-color:#FCD34D; color:#B45309; }
.dd button.on.vang { background:#FEE2E2; border-color:#FCA5A5; color:#991B1B; }
.bar { background:#EEF2F8; border-radius:999px; height:7px; overflow:hidden; min-width:70px; }
.bar i { display:block; height:100%; background:var(--navy); }
.pipe { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-bottom:18px; }
.pipe .st { background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.pipe .st .n { font-size:22px; font-weight:800; color:var(--navy); }
.pipe .st .l { font-size:12.5px; font-weight:700; color:var(--muted); }
.pipe .st .m { font-size:12px; color:var(--pink); font-weight:700; margin-top:2px; }
@media (max-width:820px) {
  /* Thanh trên: bỏ dòng mô tả, cho phép xuống hàng — để nguyên chiều cao 56px thì
     3 mục chữ chồng lên nhau trên màn 375px. */
  /* Một hàng, cuộn ngang nếu chật — cho xuống hàng thì hàng thứ hai đè lên dải cảnh báo. */
  .gv-top { height:52px; padding:0 12px; flex-wrap:nowrap; gap:12px; overflow-x:auto; white-space:nowrap; }
  .gv-top > * { flex:none; }        /* không cho co lại → chữ không đè lên link kế bên */
  /* .sub vẫn GIẤU trên điện thoại. Thử hiện lại sau khi gỡ logo thì hoá ra không đủ chỗ:
     "Khu giáo viên · Quản lý lớp học" đẩy "Lớp học của tôi" và "Đăng nhập" ra khỏi màn,
     phải vuốt ngang mới thấy. Trên điện thoại thanh này để BẤM, còn "đang ở đâu" thì
     tiêu đề trang và thanh 3 mục dưới đáy đã nói rồi. */
  .gv-top .sub { display:none; }
  /* Thanh 3 mục dưới đáy: nhãn dài ("Doanh thu & Quản lý học viên") tràn khỏi màn 375px
     → dùng bản ngắn. Bản dài vẫn nằm trong DOM cho máy đọc màn hình. */
  .gv-side a .dai { display:none; }
  .gv-side a .ngan { display:inline; }
  .gv-top a.tlink { font-size:12.5px; }
  .gv-demo { font-size:12.5px; padding:8px 12px; }
  .invite code { font-size:11.5px; }
  .dh { top:0; }
  .gv-side { position:fixed; left:0; bottom:0; top:auto; height:auto; width:100%; display:flex;
    gap:4px; padding:6px; border-top:1px solid var(--line); border-right:0; z-index:60; overflow-x:auto; }
  .gv-side .grp { display:none; }
  .gv-side a { flex-direction:column; gap:2px; font-size:11px; padding:6px 10px; white-space:nowrap; }
  .gv-main { padding:16px 14px 90px; }
}

/* ===== Phía HỌC VIÊN (/vao-lop, /lop-cua-toi) ===== */
.hv-wrap { max-width:860px; margin:0 auto; padding:26px 18px 70px; }
.toast { position:fixed; top:70px; right:18px; background:#065F46; color:#fff; padding:12px 16px;
  border-radius:10px; font-weight:700; font-size:14px; z-index:400; box-shadow:0 6px 20px rgba(0,0,0,.18);
  display:flex; gap:12px; align-items:center; }
.toast button { background:rgba(255,255,255,.18); border:0; color:#fff; border-radius:6px;
  padding:4px 10px; font-weight:700; cursor:pointer; }
.bai-row { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  margin-bottom:10px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.bai-row .gr { flex:1; min-width:200px; }
.bai-row h4 { margin:0 0 3px; font-size:15.5px; color:var(--navy); }
.hn { font-size:12px; font-weight:800; padding:2px 9px; border-radius:999px; background:#FEF3E2; color:#B45309; }
.hn.gap { background:#FEE2E2; color:#991B1B; }
.hn.xong { background:#D1FAE5; color:#065F46; }
.rank { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-weight:800; font-size:12.5px; background:#EEF2F8; color:var(--navy); }
.rank.top { background:var(--pink); color:#fff; }
tr.me td { background:#FFF5F8 !important; }
.q { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:10px; }
.q .qt { font-weight:700; color:var(--navy); margin-bottom:8px; font-size:14.5px; }
.q label { display:flex; gap:8px; align-items:flex-start; padding:6px 8px; border-radius:6px;
  cursor:pointer; font-size:14px; }
.q label:hover { background:#F3F6FB; }
.q input { width:auto; margin-top:3px; }
.dh { position:sticky; top:56px; z-index:20; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:10px 14px; margin-bottom:14px; display:flex; gap:14px;
  align-items:center; justify-content:space-between; font-weight:700; color:var(--navy); }
.dh .t { font-variant-numeric:tabular-nums; font-size:19px; }
.nx { background:#fff; border:1px solid var(--line); border-left:4px solid var(--pink);
  border-radius:10px; padding:13px 15px; margin-bottom:10px; }