/* hv-lop.css — kiểu dùng chung của khu HỌC VIÊN (15/9/2026): /lo-trinh-ca-nhan + tab Lộ trình ở /lop-cua-toi.
   Tách từ /lop-noi-bo cũ. Mọi màu có fallback vì hai trang nạp bộ biến khác nhau
   (style.css: --pink hồng thương hiệu · sat.css + gv.css: --pink = --acc xanh SAT). */
.nb-h2{font-size:19px;font-weight:800;color:var(--navy,#1C355F);margin:30px 0 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nb-h2::before{content:"";display:inline-block;width:6px;height:18px;border-radius:3px;background:var(--pink,#ED0E57);align-self:center}
.nb-h2 small{font-weight:600;color:var(--muted,#6B7280);font-size:13px}
.nb-h2:first-child{margin-top:4px}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
.kpi{background:#fff;border:1px solid var(--line,#E5E7EB);border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(28,53,95,.08)}
.kpi .lb{font-size:11.5px;font-weight:800;color:var(--muted,#6B7280);text-transform:uppercase;letter-spacing:.7px}
.kpi .vl{font-size:28px;font-weight:800;color:var(--navy,#1C355F);margin-top:4px;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .nt{font-size:12.5px;color:var(--muted,#6B7280);margin-top:4px}
.kpi.pink .vl{color:var(--pink,#ED0E57)}
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.nb-lop{display:flex;flex-direction:column;gap:12px;transition:box-shadow .15s,transform .15s}
.nb-lop:hover{box-shadow:0 10px 26px rgba(28,53,95,.10);transform:translateY(-1px)}
.nb-lop h3{margin:0;font-size:17px;color:var(--navy,#1C355F);line-height:1.3}
.nb-lop .gv{font-size:13px;color:var(--muted,#6B7280);line-height:1.5}
.chip{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:.3px}
.chip.noibo{background:#EAF0FA;color:var(--navy,#1C355F)}
.chip.lv{background:#F3F4F6;color:#374151}
.chip.cho{background:var(--warn-bg,#FEF3C7);color:var(--warn,#B45309)}
.nb-so{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nb-so>div{background:#F6F8FC;border-radius:10px;padding:10px 12px}
.nb-so .lb{font-size:10.5px;font-weight:800;color:var(--muted,#6B7280);text-transform:uppercase;letter-spacing:.5px}
.nb-so .vl{font-size:20px;font-weight:800;color:var(--navy,#1C355F);font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px}
.nb-so .vl.thieu{color:var(--pink,#ED0E57)}
.nb-tiendo{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted,#6B7280)}
.nb-tiendo b{color:var(--navy,#1C355F)}
.bar{background:#EEF2F8;border-radius:999px;height:7px;overflow:hidden;flex:1;min-width:70px}
.bar i{display:block;height:100%;background:var(--navy,#1C355F);border-radius:999px}
.nb-viec{display:flex;gap:6px;flex-wrap:wrap}
.nb-viec .viec{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--warn-bg,#FEF3C7);color:var(--warn,#B45309)}
.nb-viec .viec.thieu{background:var(--bad-bg,#FEF2F2);color:var(--bad,#DC2626)}
.nb-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.nb-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:10px;font-weight:800;font-size:13.5px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2;white-space:nowrap}
.nb-btn.pri{background:var(--pink,#ED0E57);color:#fff}
.nb-btn.pri:hover{filter:brightness(.94);color:#fff}
.nb-btn.sec{background:#fff;color:var(--navy,#1C355F);border-color:var(--navy,#1C355F)}
.nb-btn.sec:hover{background:#F3F6FB}
.tb-wrap{overflow-x:auto;border:1px solid var(--line,#E5E7EB);border-radius:14px;background:#fff}
table.gv-tb{width:100%;border-collapse:collapse;background:#fff;font-size:13.5px}
table.gv-tb th{text-align:left;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted,#6B7280);font-weight:800;padding:11px 14px;border-bottom:1px solid var(--line,#E5E7EB);background:#FAFBFD;white-space:nowrap}
table.gv-tb td{padding:11px 14px;border-bottom:1px solid #F1F3F7;vertical-align:middle}
table.gv-tb tr:last-child td{border-bottom:0}
table.gv-tb tr:hover td{background:#FAFBFD}
.hn{font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px;background:var(--warn-bg,#FEF3C7);color:var(--warn,#B45309);white-space:nowrap}
.hn.gap{background:var(--bad-bg,#FEF2F2);color:var(--bad,#DC2626)}
.hn.ok,.hn.xong{background:var(--ok-bg,#DCFCE7);color:var(--ok,#16A34A)}
.cho-cham{background:var(--warn-bg,#FEF3C7);color:var(--warn,#B45309);border-radius:99px;padding:1px 8px;font-size:12px;font-weight:800}
.nb-nx{font-size:12.5px;color:#374151;max-width:340px;white-space:normal;line-height:1.45}
.nb-diem{font-weight:800;color:var(--navy,#1C355F);font-size:15px;font-variant-numeric:tabular-nums}
/* Đánh giá giáo viên (vote sao, mỗi tuần một lần mỗi lớp) */
.nb-dg{border-top:1px dashed var(--line,#E5E7EB);padding-top:10px;margin-top:2px}
.nb-dg .tieu{font-size:12px;font-weight:800;color:var(--navy,#1C355F)}
.nb-dg .tieu span{font-weight:600;color:var(--muted,#6B7280)}
.nb-dg .saos{display:flex;gap:2px;margin:4px 0 6px}
.nb-dg .sao{background:none;border:0;padding:0 2px;font-size:26px;line-height:1;color:#D5DBE6;cursor:pointer;font-family:inherit;transition:transform .1s}
.nb-dg .sao.on{color:var(--pink,#ED0E57)}
.nb-dg .sao:hover{transform:scale(1.15)}
.nb-dg .hang{display:flex;gap:8px;align-items:center}
.nb-dg .hang input{flex:1;min-width:0;margin:0;padding:8px 10px;font-size:13.5px;border:1px solid var(--line,#E5E7EB);border-radius:10px;font-family:inherit}
.nb-dg.xong{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.nb-dg .sao-hien{color:var(--pink,#ED0E57);font-size:16px;letter-spacing:1px;line-height:1}
.nb-dg .sao-hien i{color:#D5DBE6;font-style:normal}
.nb-dg .nx{color:#374151;font-size:12.5px}
/* Buổi học gần đây — HV tự xác nhận (chấm công), admin duyệt sau */
.nb-buoi{border-top:1px dashed var(--line,#E5E7EB);padding-top:10px}
.nb-buoi .tieu{font-size:12px;font-weight:800;color:var(--navy,#1C355F);margin-bottom:4px}
.nb-buoi .tieu span{font-weight:600;color:var(--muted,#6B7280)}
.nb-buoi .dong{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:5px 0;border-top:1px solid #F1F3F7;font-size:12.5px}
.nb-buoi .dong:first-of-type{border-top:0}
.nb-buoi .nd{flex:1;min-width:160px;color:#374151}
.nb-buoi .nd b{color:var(--navy,#1C355F)}
.nb-buoi .lk a{color:var(--pink-d,#C2185B);font-weight:700;text-decoration:none;margin-right:6px;font-size:12px}
.nb-buoi .xn button{background:#fff;border:1.5px solid var(--line,#E5E7EB);border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;font-weight:800;color:var(--navy,#1C355F);cursor:pointer}
.nb-buoi .xn button.dung{border-color:var(--ok,#16A34A);color:var(--ok,#16A34A)}
.nb-buoi .xn button.sai{border-color:var(--bad,#DC2626);color:var(--bad,#DC2626)}
.nb-buoi .xn button:hover{background:#F3F6FB}
.nb-buoi .da{font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px;white-space:nowrap}
.nb-buoi .da.ok{background:var(--ok-bg,#DCFCE7);color:var(--ok,#16A34A)}.nb-buoi .da.no{background:var(--bad-bg,#FEF2F2);color:var(--bad,#DC2626)}
/* Bài về nhà theo ngày — dải 7 ô T2…CN của tuần này */
.nb-btvn{border-top:1px dashed var(--line,#E5E7EB);padding-top:10px}
.nb-btvn .tieu{font-size:12px;font-weight:800;color:var(--navy,#1C355F);margin-bottom:6px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.nb-btvn .tieu span{font-weight:600;color:var(--muted,#6B7280)}
.nb-btvn .tuan{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.nb-btvn .o{border:1px solid var(--line,#E5E7EB);border-radius:8px;padding:5px 2px;text-align:center;font-size:11px;font-weight:800;color:var(--muted,#6B7280);background:#fff;text-decoration:none;line-height:1.25}
.nb-btvn .o i{display:block;font-style:normal;font-size:13px;margin-top:2px}
.nb-btvn .o.trong{opacity:.45}
.nb-btvn .o.dat{background:var(--ok-bg,#DCFCE7);border-color:var(--ok,#16A34A);color:var(--ok,#16A34A)}
.nb-btvn .o.nop{background:var(--warn-bg,#FEF3C7);border-color:var(--warn,#B45309);color:var(--warn,#B45309)}
.nb-btvn .o.chua{background:var(--bad-bg,#FEF2F2);border-color:var(--bad,#DC2626);color:var(--bad,#DC2626)}
.nb-btvn .o.hom{outline:2px solid var(--navy,#1C355F);outline-offset:-1px;color:var(--navy,#1C355F)}
.nb-btvn .nd{font-size:12.5px;color:#374151;margin-top:6px;line-height:1.45}
.nb-btvn .nd b{color:var(--navy,#1C355F)}
/* Tiến bộ theo thời gian — cột điểm từng bài đã chấm, mới nhất bên phải */
.nb-tb{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.nb-tbcard{display:flex;flex-direction:column;gap:8px}
.nb-tbcard h3{margin:0;font-size:15px;color:var(--navy,#1C355F)}
.nb-tbcard .tom{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted,#6B7280)}
.nb-tbcard .tom b{color:var(--navy,#1C355F);font-size:15px;font-variant-numeric:tabular-nums}
.nb-tbcard .tom .len{color:var(--ok,#16A34A)}.nb-tbcard .tom .xuong{color:var(--bad,#DC2626)}
.nb-tbcard .cot{display:flex;align-items:flex-end;gap:4px;height:84px;padding-top:14px;border-bottom:1px solid var(--line,#E5E7EB)}
.nb-tbcard .cot a{flex:1;min-width:6px;max-width:34px;background:#C9D3E6;border-radius:4px 4px 0 0;position:relative;text-decoration:none;display:block}
.nb-tbcard .cot a.thi{background:var(--navy,#1C355F)}
.nb-tbcard .cot a.moi{background:var(--pink,#ED0E57)}
.nb-tbcard .cot a span{position:absolute;left:50%;transform:translateX(-50%);top:-15px;font-size:10.5px;font-weight:800;color:var(--navy,#1C355F);white-space:nowrap}
.nb-tbcard .ky{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted,#6B7280)}
.nb-tbcard .ky span{background:#F6F8FC;border-radius:999px;padding:3px 10px}
.nb-tbcard .ky b{color:var(--navy,#1C355F)}
.nb-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy,#1C355F);color:#fff;padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:700;z-index:99;box-shadow:0 8px 24px rgba(28,53,95,.25)}
/* ===== Tab LỘ TRÌNH của một lớp (/lop-cua-toi#/lt) ===== */
.lt-khoi{border:1px solid var(--line,#E5E7EB);border-radius:12px;margin:8px 0;background:#fff}
.lt-khoi>summary{list-style:none;cursor:pointer;padding:11px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.lt-khoi>summary::-webkit-details-marker{display:none}
.lt-khoi .so{width:28px;height:28px;border-radius:50%;background:#F3F4F6;color:var(--muted,#6B7280);font-weight:800;font-size:13px;display:grid;place-items:center}
.lt-khoi.dang .so{background:var(--navy,#1C355F);color:#fff}
.lt-khoi.xong .so{background:var(--ok-bg,#DCFCE7);color:var(--ok,#16A34A)}
.lt-khoi .ten b{display:block;font-size:15px;color:var(--navy,#1C355F)}
.lt-khoi .ten span{font-size:12.5px;color:var(--muted,#6B7280)}
.lt-khoi .pt{font-size:13px;font-weight:800;color:var(--muted,#6B7280);min-width:52px;text-align:right}
.lt-khoi .thanh{height:5px;background:#EEF0F3;border-radius:99px;margin:0 14px;overflow:hidden}
.lt-khoi .thanh i{display:block;height:100%;background:var(--navy,#1C355F);border-radius:99px}
.lt-buoc{list-style:none;margin:0;padding:8px 14px 12px}
.lt-buoc li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px dashed var(--line,#E5E7EB);font-size:14px}
.lt-buoc li:first-child{border-top:0}
.lt-buoc .o{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2,#D1D5DB);display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:#fff}
.lt-buoc li.xong .o{background:var(--ok,#16A34A);border-color:var(--ok,#16A34A)}
.lt-buoc li.cho .o{background:var(--warn,#B45309);border-color:var(--warn,#B45309)}
.lt-buoc li.tre .o{border-color:var(--bad,#DC2626)}
.lt-buoc li.xong .t{color:var(--muted,#6B7280)}
.lt-buoc .t small{display:block;color:var(--muted,#6B7280);font-size:12.5px}
.lt-buoc .kq{font-weight:800;color:var(--navy,#1C355F);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px;text-align:right}
.lt-buoc .kq .hn{font-weight:800}
.lt-buoc a.lam{font-size:13px;font-weight:800;color:var(--pink,#ED0E57);text-decoration:none;white-space:nowrap}
.lt-loai{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;padding:1px 6px;border-radius:6px;background:#F3F4F6;color:var(--muted,#6B7280);margin-right:6px;vertical-align:1px}
.lt-tomtat{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,#EEF3FB,#fff);border:1px solid var(--line,#E5E7EB);margin-bottom:10px}
.lt-tomtat h3{margin:0 0 4px;font-size:16px;color:var(--navy,#1C355F)}
.lt-tomtat .m{font-size:13px;color:var(--muted,#6B7280)}
.lt-tomtat .m b{color:var(--navy,#1C355F)}
.lt-canlam{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.lt-canlam .d{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 14px;border:1px solid var(--line,#E5E7EB);border-left:4px solid var(--pink,#ED0E57);border-radius:10px;background:#fff}
.lt-canlam .d.tre{border-left-color:var(--bad,#DC2626)}
.lt-canlam .d b{color:var(--navy,#1C355F)}
.lt-syl{border:1px solid var(--line,#E5E7EB);border-radius:12px;background:#fff;padding:0 14px}
.lt-syl>summary{cursor:pointer;padding:11px 0;font-weight:800;color:var(--navy,#1C355F);font-size:14.5px;list-style:none}
.lt-syl>summary::-webkit-details-marker{display:none}
.lt-syl>summary span{font-weight:600;color:var(--muted,#6B7280);font-size:12.5px}
.lt-syl .phan{padding:6px 0 10px;border-top:1px dashed var(--line,#E5E7EB)}
.lt-syl .phan b{display:block;font-size:13.5px;color:var(--navy,#1C355F);margin-bottom:3px}
.lt-syl .phan ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.55;color:#374151}
@media(max-width:760px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .lt-tomtat{grid-template-columns:1fr}
}

/* (16/9/2026) Thương hiệu theo lớp: 8020 × logo trung tâm của giáo viên ngoài; lớp nội bộ không có dải này. */
.nb-th{display:inline-flex;align-items:center;gap:7px;margin:0 0 8px;padding:4px 10px 4px 6px;border:1px solid var(--line,#E5E7EB);border-radius:999px;background:#fff;font-size:12.5px;color:var(--navy,#1C355F);max-width:100%}
.nb-th img{height:20px;width:auto;max-width:90px;object-fit:contain;display:block}
.nb-th i{font-style:normal;color:var(--muted,#6B7280);font-weight:700}
.nb-th b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.nb-th.lon{padding:6px 14px 6px 8px}.nb-th.lon img{height:28px;max-width:130px}.nb-th.lon b{font-size:14px}
.gv-top .nb-th{background:rgba(255,255,255,.96);border-color:transparent;margin:0}