/* features.css — Chế độ học, khách, nhập đề, câu chọn nhiều, thi ngẫu nhiên, trợ lý AI, thi nghiêm túc, bài giao, sổ lỗi, công cụ giáo viên
   (tách từ index.html; thứ tự nạp các file CSS phải giữ như trong index.html) */
/* ================= Trang chủ: hai chế độ (Practice by skill / Mock exam) ================= */
.tests .s-listening{--sc:#2aa5bd;--sb:#cfe8ed;--sg:linear-gradient(180deg,#3bb8cf,#1e8ba1)}
.modesw,.sktabs,.ppanel,.mockinfo,.mcard{font-family:Montserrat,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--navy)}
.modesw{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 18px}
.msw{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 20px;border:2px solid #d5dde6;border-radius:18px;background:#fff;color:var(--navy);cursor:pointer;font:inherit;transition:box-shadow .15s,border-color .15s,background .15s}
.msw svg{width:34px;height:34px;flex:none;stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.msw b{display:block;font-size:19px;font-weight:800}
.msw small{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:#66778a}
.msw:hover{border-color:#8aa0b8}
.msw[aria-pressed=true]{background:#2a4365;border-color:#2a4365;color:#fff;box-shadow:0 8px 22px rgba(31,58,95,.22)}
.msw[aria-pressed=true] svg{stroke:#fff}.msw[aria-pressed=true] small{color:#cfdcec}
.msw:focus-visible,.sktab:focus-visible{outline:3px solid #7aa7ff;outline-offset:2px}
.sktabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.sktab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px;border:2px solid var(--sb);border-radius:16px;background:#fff;color:var(--navy);cursor:pointer;font:inherit;transition:background .15s,border-color .15s}
.sktab svg{width:30px;height:30px;stroke:var(--sc);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sktab b{font-size:16px;font-weight:800}.sktab small{font-size:12px;font-weight:600;color:#66778a}
.sktab:hover{border-color:var(--sc)}
.sktab[aria-pressed=true]{background:var(--sc);border-color:var(--sc);color:#fff}
.sktab[aria-pressed=true] svg{stroke:#fff}.sktab[aria-pressed=true] small{color:rgba(255,255,255,.9)}
.ppanel{background:#fff;border-radius:22px;padding:22px 24px 24px;margin:0 0 22px;box-shadow:0 8px 28px rgba(31,58,95,.10)}
.ppanel h2{margin:0 0 4px;font-size:24px;font-weight:800;color:var(--sc)}
.pdesc{margin:0 0 16px;font-size:14px;color:#5a6b7e}
.plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--sb);border-radius:16px;background:#fff}
.prow.done{background:color-mix(in srgb,var(--sc) 5%,#fff)}
.pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ptitle{font-size:18px;font-weight:800}
.pstat{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;font-size:13px;color:#66778a}
.pstat .sband{font-size:20px}
.prow .take{width:auto;max-width:none;padding:10px 22px;font-size:15px}
.mockinfo{display:flex;gap:14px;align-items:flex-start;margin:0 0 16px;padding:16px 20px;border-radius:16px;background:#eaf1f8;border:1px solid #cfdcea}
.mockinfo svg{width:30px;height:30px;flex:none;stroke:var(--navy);fill:none;stroke-width:1.7}
.mockinfo p{margin:4px 0 0;font-size:14px;line-height:1.5;color:#44566b}
.mcard{background:#fff;border-radius:22px;padding:20px 24px 22px;margin:0 0 16px;box-shadow:0 8px 28px rgba(31,58,95,.10)}
.mtop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mtop h2{margin:0;font-size:22px;font-weight:800}
.mstate{font-size:13px;font-weight:700;color:#66778a;padding:3px 12px;border-radius:999px;background:#eef2f6}
.mstate.on{color:#1e6a3a;background:#dff1e6}
.mchips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.chip{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--sb);border-radius:12px;background:#fff;font-size:13px}
.chip svg{width:22px;height:22px;flex:none;stroke:var(--sc);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chip b{font-weight:700}.chip em{margin-left:auto;font-style:normal;font-weight:800;color:#8a97a6}
.chip.done{background:color-mix(in srgb,var(--sc) 9%,#fff);border-color:var(--sc)}.chip.done em{color:var(--sc)}
.mbar{display:flex;align-items:center;gap:20px}
@media (max-width:860px){.sktabs,.mchips{grid-template-columns:repeat(2,minmax(0,1fr))}.plist{grid-template-columns:1fr}}
@media (max-width:560px){
  .modesw{grid-template-columns:1fr}.msw{padding:14px 16px}
  .ppanel,.mcard{padding:16px 14px 18px;border-radius:18px}
  .mbar{flex-wrap:wrap;gap:12px}.mbar .fprog{max-width:none;flex-basis:100%}.mbar .startfull{margin-left:0;width:100%;justify-content:center}
  .prow .take{padding:10px 16px;font-size:14px}
}

/* ================= Kết quả cho học viên: thống kê theo phần ================= */
table.partstat{width:100%;border-collapse:collapse;margin:8px 0 14px}
.partstat th,.partstat td{padding:9px 12px;border-bottom:1px solid #e3e8ee;text-align:left;font-size:15px}
.partstat td.ok{color:#1e7a3c;font-weight:800}.partstat td.no{color:#b3261e;font-weight:800}
.pbar{position:relative;height:24px;min-width:120px;border-radius:999px;background:#eef2f6;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#1f3a5f}
.pbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#a9d6e2,#6fb5c9)}
.pbar span{position:relative}

/* ================= Chế độ khách ================= */
.guestnote{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:12px 16px;border-radius:14px;background:#fff6e5;border:1px solid #f0d9a8;color:#5c4510;font-size:14px;line-height:1.5}
.guestnote svg{width:22px;height:22px;flex:none;margin-top:1px;stroke:#8a6512;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.guestnote .linkbtn{font-size:14px;color:#8a4b00}
.prow.locked{background:#f5f6f8;border-color:#dde2e8}
.prow.locked .ptitle{color:#7b8797}
.take.lockbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#8b98a8;box-shadow:none}
.take.lockbtn svg,.startfull.locked svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.startfull.locked{background:#8b98a8}.startfull.locked:hover{background:#7a8798}
.mcard.locked{background:#fafbfc}
.guestbox{margin-top:18px;text-align:center}
.guestbox .gor{display:flex;align-items:center;gap:10px;color:#8b98a8;font-size:13px;margin-bottom:12px}
.guestbox .gor:before,.guestbox .gor:after{content:"";flex:1;height:1px;background:#d9dfe6}
.guestbox .btn{width:100%}
.guestbox .fine{margin:10px 0 0}

/* ================= Nhập đề từ file JSON ================= */
.eimp{background:#fff;border:1px solid #cfd8e3;border-radius:14px;padding:16px 18px;margin:0 0 20px}
.eimp h3{margin:0 0 6px}
.eimp code{background:#eef2f6;padding:1px 5px;border-radius:4px;font-size:12.5px}
.impbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:10px 0}
.impbar input[type=file]{max-width:100%}
.imptbl{width:100%;border-collapse:collapse;margin:10px 0}
.imptbl th,.imptbl td{padding:8px 10px;border-bottom:1px solid #e3e8ee;text-align:left;vertical-align:top;font-size:14px}
.imptbl .okc{color:#1e7a3c}.imptbl .noc{color:#b3261e}
.imperr,.impwarn{margin:4px 0 0;padding-left:18px;font-size:13px;line-height:1.45}
.imperr{color:#b3261e}.impwarn{color:#8a6512}

/* ================= Câu hỏi chọn nhiều chữ cái (Choose TWO letters) ================= */
.q.multi .qhead{gap:6px}
.q.multi .qanchor{display:block;height:0;overflow:hidden}
.q.multi .mopts label{padding:6px 8px;border-radius:8px}
.q.multi .mopts label:hover{background:#eef4f8}
.q.multi .mopts input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex:none;accent-color:#1f6fa8}
.q.multi .mopts input[type=checkbox]:disabled + span{color:#8a97a5}
.exam .q.multi .opts{margin-left:0}

/* ================= Thi ngay: bộ đề trộn ngẫu nhiên ================= */
.modesw{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.modesw{grid-template-columns:1fr}}
.mixcard{background:#fff;border-radius:22px;padding:20px 24px 22px;margin:0 0 16px;box-shadow:0 8px 28px rgba(31,58,95,.10);font-family:Montserrat,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--navy)}
.mixcard .pdesc{margin:10px 0 14px}
.mixskills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.mixsk{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:2px solid var(--sb);border-radius:999px;background:#fff;cursor:pointer;font-weight:700;font-size:14px;user-select:none}
.mixsk input{position:absolute;opacity:0;pointer-events:none}
.mixsk svg{width:20px;height:20px;fill:none;stroke:var(--sc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mixsk.on{background:var(--sc);border-color:var(--sc);color:#fff}
.mixsk.on svg{stroke:#fff}
.mixsk:focus-within{outline:3px solid #7aa7ff;outline-offset:2px}
.mixplan{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 16px}
.mixpick{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--sb);border-radius:14px;background:color-mix(in srgb,var(--sc) 7%,#fff)}
.mixpick>svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--sc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mixpick small{display:block;font-size:12px;font-weight:700;color:#66778a;text-transform:uppercase;letter-spacing:.04em}
.mixpick b{display:block;font-size:20px;font-weight:800}
.mixpick .mixtag{margin-left:auto;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:#eef2f6;color:#5a6b7e;white-space:nowrap}
.mixpick .mixtag.new{background:#dff1e6;color:#1e6a3a}
.mixpick.locked{background:#f5f6f8}.mixpick.locked b{color:#7b8797}
.mixcard .mbar .btn svg{width:17px;height:17px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ================= Trợ lý AI ================= */
.aibox{margin:22px 0;padding:16px 18px;border:1px solid #cdd9e6;border-radius:14px;background:#f7fafd}
.aibox h2{margin:0 0 8px;font-size:20px}
.aiprogbtn{margin:14px 0}.aiprogbtn .btn{margin-right:8px}
.aiout{margin-top:10px}.aierrmsg{color:#a12b22}
.aifb .aihead{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin:6px 0 12px}
.aiover{min-width:140px;padding:10px 16px;border-radius:12px;background:#fff;border:1px solid #cdd9e6;text-align:center}
.aiover span{display:block;font-size:12px;color:#66778a;font-weight:700}.aiover b{font-size:34px;color:#1f4e79}
.aisum{flex:1;min-width:220px;margin:0;line-height:1.55}
.aiprio{background:#fff8e6;border:1px solid #f0d9a8;border-radius:10px;padding:10px 14px;margin:0 0 12px}.aiprio ol{margin:6px 0 0 18px;padding:0}
.aisec{margin:14px 0;padding:12px 14px;background:#fff;border:1px solid #dde5ee;border-radius:12px}
.aisec h3{margin:0 0 8px;font-size:18px}.aiband{margin-left:8px;font-size:14px;padding:2px 10px;border-radius:999px;background:#dff1e6;color:#1e6a3a}
.aisec h4,.aifb>h4{margin:12px 0 4px;font-size:15px}
table.aicrit{width:auto;min-width:280px;border-collapse:collapse;margin:0 0 6px}.aicrit td{padding:4px 12px 4px 0;border:0;font-size:14px}
.aierr{margin:8px 0;padding:8px 12px;border-left:4px solid #e0a94a;background:#fffaf0;border-radius:0 8px 8px 0}
.aitype{display:inline-block;font-size:12px;font-weight:800;color:#8a5a00;background:#ffeecb;border-radius:999px;padding:2px 10px}
.aierr p{margin:5px 0 0}.aierr del{color:#a12b22;background:#fde8e6;text-decoration:line-through}.aierr ins{color:#1e6a3a;background:#e2f4e8;text-decoration:none}
.aiplan{margin:8px 0}.aiplan ul{margin:4px 0 0 18px}
.aiwrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin:8px 0 18px}
.airadar{flex:none;background:#fff;border:1px solid var(--sb,#cdd9e6);border-radius:14px;padding:4px 10px}
.aiwrap .aistats{flex:1;min-width:220px;margin:0}
.aistats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:12px 0 18px}
.aipiewrap{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:10px 0 14px}
.aipielegendbox{display:flex;flex-direction:column;gap:6px}
.aipielegend{display:flex;align-items:center;gap:8px;font-size:14px}
.aipielegend i{width:13px;height:13px;border-radius:3px;flex:none}
.aipielegend small{color:#8a97a5}
table.aierrtable{width:100%;border-collapse:collapse;margin:6px 0 18px;min-width:520px}
table.aierrtable th,table.aierrtable td{padding:7px 10px;border-bottom:1px solid #e6ebf0;text-align:left;font-size:14px;vertical-align:top}
table.aierrtable del{color:#a12b22;text-decoration:line-through}table.aierrtable ins{color:#1e6a3a;text-decoration:none}
@media (max-width:560px){.airadar{margin:0 auto}}
.aistat{padding:12px 14px;border:1px solid var(--sb,#cdd9e6);border-radius:14px;background:#fff}
.aistat b{display:block;font-size:17px}.aistat small{display:block;margin-top:4px;color:#66778a}
.aitrend{display:inline-block;margin-top:4px;font-weight:800;font-size:14px}
.aitrend.up{color:#1e7a3c}.aitrend.down{color:#b3261e}.aitrend.flat{color:#8a6512}.aitrend.na{color:#8a97a6;font-weight:600}
.aibar{display:grid;grid-template-columns:minmax(150px,1.2fr) 2fr 48px auto;gap:10px;align-items:center;margin:5px 0;font-size:14px}
.aibar>div{height:14px;border-radius:999px;background:#eef2f6;overflow:hidden}.aibar i{display:block;height:100%;background:linear-gradient(90deg,#a9d6e2,#3f9bb5)}
.aibar small{color:#66778a}
.aipanel{margin:14px 0;padding:12px 14px;border:1px solid #cdd9e6;border-radius:12px;background:#f7fafd}
.aipanel h4{margin:0 0 6px}
@media (max-width:560px){.aibar{grid-template-columns:1fr 60px}.aibar>div{grid-column:1/3}}

/* ================= Thi nghiêm túc ================= */
.integbar{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:9999;max-width:min(720px,92vw);padding:10px 18px;border-radius:12px;font-size:15px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);background:#1f3a5f;color:#fff}
.integbar.warn{background:#a15c00}.integbar.bad{background:#a12b22}.integbar.info{background:#3c5a7a}
#integOverlay{position:fixed;inset:0;z-index:10000;background:rgba(15,25,40,.94);display:flex;align-items:center;justify-content:center}
#integOverlay .integbox{background:#fff;border-radius:16px;padding:26px 30px;max-width:460px;text-align:center}
#integOverlay h2{margin:0 0 10px;font-size:22px}#integOverlay p{margin:0 0 18px;color:#44566b}
.tag.warnleave{background:#fde8e6;color:#a12b22;border-color:#f3b8b2}
.integdetail{margin:8px 0;padding:8px 12px;border-radius:10px;font-size:14px}.integdetail.warn{background:#fff4e0;border:1px solid #f0d9a8}.integdetail.ok{background:#e6f5ea;border:1px solid #bfe0c8}.integdetail ul{margin:6px 0 0 18px}
/* ================= Bài giao ================= */
.asgbox{margin:0 0 18px;padding:16px 18px;background:#fff;border-radius:18px;box-shadow:0 8px 28px rgba(31,58,95,.10)}
.asgbox h2{margin:0 0 10px;font-size:22px;color:var(--navy)}
.asg{padding:12px 14px;margin:0 0 10px;border:1px solid #dde5ee;border-left:6px solid #3f9bb5;border-radius:12px}
.asg.bad{border-left-color:#c0392b;background:#fff7f6}.asg.ok{border-left-color:#2e7d32;background:#f6fbf7}.asg.late{border-left-color:#d9822b}
.asghead{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.asgtag{font-size:12px;font-weight:800;padding:2px 10px;border-radius:999px;background:#e3f0f7;color:#1f4e79}.asgtag.bad{background:#fde8e6;color:#a12b22}.asgtag.ok{background:#dff1e6;color:#1e6a3a}.asgtag.late{background:#ffeecb;color:#8a5a00}
.asgnote{margin:6px 0;font-size:14px}.asgitems{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.asgit{display:grid;grid-template-columns:130px 1fr auto auto;gap:10px;align-items:center;padding:6px 10px;background:#f7fafd;border-radius:10px;font-size:14px}
.asgit.done,.asgit.late{background:#eef8f1}.asgsk{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px}.asgsk svg{width:18px;height:18px;fill:none;stroke:var(--sc,#3f9bb5);stroke-width:1.6}
.asgti{font-weight:800}.asgst{color:#66778a}.asgit .btn{padding:5px 14px;font-size:14px}
@media (max-width:640px){.asgit{grid-template-columns:1fr auto}.asgsk{grid-column:1/3}}
/* ================= Sổ lỗi ================= */
.nbtools{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:12px 0}.nbtools select,.nbtools input[type=text]{padding:7px 10px}
.nbcard{margin:10px 0;padding:12px 14px;border:1px solid #dde5ee;border-left:6px solid #e0a94a;border-radius:12px;background:#fff}
.nbcard.st-practising{border-left-color:#3f9bb5}.nbcard.st-mastered{border-left-color:#2e7d32;background:#f6fbf7}
.nbtop{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.aifix{margin:8px 0 4px}.nbfix{color:#1e6a3a}
.nbbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:8px 0}
.nbseg button{padding:5px 12px;border:1px solid #b5c3ce;background:#fff;font-size:13px;cursor:pointer}.nbseg button:first-child{border-radius:8px 0 0 8px}.nbseg button:last-child{border-radius:0 8px 8px 0}.nbseg button[aria-pressed=true]{background:#1f4e79;color:#fff;border-color:#1f4e79}
.nbnote{display:block;margin:6px 0 0;font-size:13px}.nbnote span{display:block;color:#66778a;font-weight:700;margin-bottom:2px}.nbnote input{width:100%;padding:6px 10px;box-sizing:border-box}
.nbteach{margin:6px 0 0;padding:6px 10px;background:#eef4fb;border-radius:8px;font-size:14px}
.nbadd{display:grid;gap:8px;margin:0 0 14px;padding:12px 14px;border:1px dashed #b5c3ce;border-radius:12px}.nbadd label{display:grid;gap:3px;font-size:13px;font-weight:700}.nbadd input,.nbadd select{padding:7px 10px;font-weight:400}
.nbtry{width:100%;padding:10px 12px;font-size:16px;box-sizing:border-box;margin:6px 0 10px}
.nbwrap{padding:4px 0}
/* ================= Công cụ giáo viên ================= */
.twrap{max-width:1180px;margin:0 auto;padding:18px 20px 60px}
.tltabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px;border-bottom:2px solid #dde5ee}
.tltabs button{padding:9px 18px;border:0;background:none;font-weight:700;font-size:15px;color:#5a6b7e;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}.tltabs button[aria-selected=true]{color:#1f4e79;border-bottom-color:#1f4e79}
.tlbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 14px}.tlbar select,.tlbar input[type=text]{padding:7px 10px}
table.tltable{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:14px}.tltable th,.tltable td{padding:8px 10px;border-bottom:1px solid #e3e8ee;text-align:left;vertical-align:top}.tltable th{background:#f4f7fa;position:sticky;top:0}
.thsort{border:0;background:none;font:inherit;font-weight:800;cursor:pointer;color:inherit;padding:0}
.tltable td.ok,.tltable b.ok{color:#1e7a3c}.tltable td.no,.tltable b.no{color:#b3261e}.tltable td.late{color:#8a5a00}
.tr.up{color:#1e7a3c}.tr.down{color:#b3261e}.tr.flat{color:#8a6512}
.flag{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:#eef2f6;color:#5a6b7e;margin:1px 2px 1px 0}
.flag.ok{background:#dff1e6;color:#1e6a3a}.flag.warn{background:#ffeecb;color:#8a5a00}.flag.no{background:#fde8e6;color:#a12b22}.flag.info{background:#e3f0f7;color:#1f4e79}
.tlinsight{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}
.iaflag td{background:#fffaf0}
.asgform{padding:14px 16px;border:1px solid #cdd9e6;border-radius:14px;background:#f7fafd;margin:0 0 16px;display:grid;gap:10px}.asgform label{display:grid;gap:3px;font-weight:700;font-size:13px}.asgform input[type=text],.asgform input[type=datetime-local],.asgform select{padding:7px 10px;font-weight:400}
.asgform fieldset{border:1px solid #dde5ee;border-radius:10px;padding:8px 12px}.asgform .chk{display:inline-flex;gap:6px;margin-right:14px;font-weight:400}.asrow{display:flex;gap:8px;margin:0 0 6px}
.asgcard{padding:12px 14px;margin:0 0 12px;border:1px solid #dde5ee;border-radius:14px;background:#fff}.asgcounts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.hcard{padding:12px 16px;border-radius:12px;margin:0 0 14px;border:1px solid #bfe0c8;background:#e6f5ea}.hcard.warn{background:#fff4e0;border-color:#f0d9a8}.hcard.no{background:#fde8e6;border-color:#f3b8b2}.hcard ul{margin:6px 0 0 18px}
@media (max-width:640px){.hidesm{display:none}}

/* ================= Trang Student IDs (toàn màn hình) ================= */
.sx .etop{margin-bottom:12px}
.sx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 12px}
.sx-stat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:10px 14px;border:1px solid #dde5ee;border-left:4px solid #9fb3c8;border-radius:10px;background:#fff;cursor:pointer;font:inherit;color:inherit}
.sx-stat span{font-size:13px;color:#5a6b7e}.sx-stat b{font-size:24px;line-height:1}
.sx-stat.ok{border-left-color:#1e7a3c}.sx-stat.wait{border-left-color:#d19a00}.sx-stat.warn{border-left-color:#e07b00}.sx-stat.no{border-left-color:#b3261e}
.sx-stat:hover{background:#f7fafd}.sx-stat[aria-pressed=true]{outline:2px solid #1f4e79;outline-offset:-1px;background:#eef4fa}
.sx-guest{background:#fff;border:1px solid #dde5ee;border-radius:10px;padding:8px 12px;margin:0 0 12px;line-height:1.5}
.sx-add{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin:0 0 4px}.sx-add .epanel{margin:0 0 12px}.sx-add h4,.sx-drawer h4{margin:0 0 10px;font-size:16px}
.sx-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}.sx-form.one{grid-template-columns:1fr}
.sx-form label{display:grid;gap:4px;font-size:13px;font-weight:700}.sx-form input,.sx-form select,.sx-form textarea{padding:7px 10px;font:15px Arial,sans-serif;font-weight:400;border:1px solid #8a949e;border-radius:3px;width:100%;min-width:0}
.sx-form input[readonly]{background:#f1f3f5;color:#5b6570}.sx-form .exp{font-weight:400}
.sx-inl{display:flex;gap:6px;align-items:center}.sx-inl input{flex:1;min-width:0;padding:7px 10px}.sx-inl2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.sx-fresh .sx-codes{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}.sx-fresh code{background:#fff;border:1px solid #bfe0c8;border-radius:6px;padding:2px 8px;font-size:15px;font-weight:700;letter-spacing:.5px}
.sx-bar label{display:inline-flex;gap:6px;align-items:center;font-size:14px;font-weight:700}.sx-bar input[type=search]{padding:7px 10px;min-width:0}
.sx-bulk{position:sticky;top:62px;z-index:15;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:#1f4e79;color:#fff;border-radius:10px;padding:8px 12px;margin:0 0 10px}
.sx-bulk .mini{border-color:#fff}.sx-bulk .linkbtn{color:#fff}.sx-grp{display:inline-flex;gap:4px}.sx-grp select,.sx-grp input{padding:3px 6px;font-size:13px;border-radius:3px;border:0;max-width:150px}
.sx-tablewrap{overflow:auto;max-height:calc(100vh - 170px);background:#fff;border:1px solid #dde5ee;border-radius:10px}
.sx-table{margin:0}.sx-table th{z-index:2}.sx-table td{vertical-align:middle}.sx-table tr.sel td{background:#eef4fa}.sx-table tr.open td{background:#fff8e1}.sx-table tr.off td{color:#8a949e}
.sx-table tbody tr:hover td{background:#f7fafd}.sx-cb{width:34px}.sx-cb input{width:17px;height:17px;cursor:pointer}
.sx-code{border:0;background:none;padding:0;font:inherit;font-weight:800;font-family:Consolas,monospace;font-size:15px;color:#0b57d0;cursor:pointer;letter-spacing:.3px}.sx-code:hover{text-decoration:underline}
.sx-cp{border:0;background:none;cursor:pointer;color:#8a949e;font-size:14px;padding:0 2px}.sx-cp:hover{color:#1f4e79}
.sx-pager{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:12px 0}
.sx-scrim{position:fixed;inset:0;background:rgba(15,25,40,.28);z-index:60}
.sx-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);background:#fff;z-index:61;overflow:auto;padding:16px 20px 40px;box-shadow:-8px 0 30px rgba(0,0,0,.18)}
.sx-dh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-bottom:1px solid #e3e8ee;padding:0 0 12px;margin:0 0 12px}.sx-big{font-size:24px;font-family:Consolas,monospace;letter-spacing:.5px}
.sx-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 14px;font-size:14px}.sx-facts dt{color:#5a6b7e}.sx-facts dd{margin:0}
.sx-danger{color:#b3261e !important;border-color:#e3a9a3 !important}
#sxToast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;background:#1b1f24;color:#fff;padding:10px 18px;border-radius:8px;font-size:15px;max-width:min(92vw,640px);box-shadow:0 6px 20px rgba(0,0,0,.25)}#sxToast.bad{background:#a12b22}
@media (max-width:640px){.sx-form,.sx-inl2{grid-template-columns:1fr}.sx-bulk{top:0}.sx-tablewrap{max-height:none}}

/* ================= KPI học viên (biểu đồ) ================= */
#students,#tools{--kv-surface:#fcfcfb;--kv-ink:#0b0b0b;--kv-ink2:#52514e;--kv-muted:#898781;--kv-grid:#e1e0d9;--kv-axis:#c3c2b7;
  --kv-s1:#2a78d6;--kv-s2:#eb6834;--kv-s3:#1baf7a;--kv-s4:#eda100;--kv-s5:#e87ba4;--kv-s6:#008300;--kv-s7:#4a3aa7;
  --kv-good:#0ca30c;--kv-warn:#fab219;--kv-serious:#ec835a;--kv-crit:#d03b3b}
.kv-bar .kv-seg-ctl{display:inline-flex;border:1px solid #8a949e;border-radius:6px;overflow:hidden}
.kv-seg-ctl button{border:0;background:#fff;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer;border-right:1px solid #d5dbe1}.kv-seg-ctl button:last-child{border-right:0}
.kv-seg-ctl button[aria-pressed=true]{background:#1f4e79;color:#fff;font-weight:700}
.tlbar input[type=search]{padding:7px 10px;border:1px solid #8a949e;border-radius:3px;font:15px Arial,sans-serif}
.kv-bar label{display:inline-flex;gap:6px;align-items:center;font-size:14px;font-weight:700}.kv-bar select{padding:7px 10px}
.kv-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin:0 0 14px}
.kv-tile{background:var(--kv-surface);border:1px solid #dde5ee;border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;gap:3px}
.kv-tile span{font-size:13px;color:var(--kv-ink2)}.kv-tile b{font-size:26px;line-height:1.1;color:var(--kv-ink)}.kv-tile b small{font-size:14px;color:var(--kv-muted);font-weight:400}.kv-tile>small{font-size:12px;color:var(--kv-muted)}
.kv-tiles.sm{grid-template-columns:repeat(4,1fr)}.kv-tiles.sm b{font-size:20px}
.kv-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:12px;margin:0 0 14px}
.kv-card{background:var(--kv-surface);border:1px solid #dde5ee;border-radius:10px;padding:12px 14px;margin:0 0 12px;min-width:0}.kv-grid2 .kv-card{margin:0}
.kv-card h4{margin:0;font-size:15px;color:var(--kv-ink)}.kv-sub{margin:2px 0 8px;font-size:12px;color:var(--kv-muted)}
.kv-svg{width:100%;height:auto;display:block;overflow:visible}
.kv-grid{stroke:var(--kv-grid);stroke-width:1}.kv-axis{stroke:var(--kv-axis);stroke-width:1}.kv-goal{stroke:var(--kv-ink2);stroke-width:1;stroke-dasharray:4 3}
.kv-tick{font-size:11px;fill:var(--kv-muted);font-variant-numeric:tabular-nums}.kv-dl{font-size:12px;fill:var(--kv-ink2);font-weight:700}
.kv-hit{cursor:default}rect.kv-hit:hover{fill:rgba(31,78,121,.06)}rect.kv-hit[rx]:hover{stroke:#0b0b0b;stroke-width:1.5}
.kv-seqlegend{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--kv-muted);margin:4px 0 0 38px}.kv-seqlegend i{width:16px;height:10px;border-radius:2px}.kv-seqlegend span{margin:0 4px}
.kv-hbars{display:grid;gap:8px;margin:4px 0}.kv-hrow{display:grid;grid-template-columns:96px 1fr 84px;gap:8px;align-items:center;font-size:13px}
.kv-hl{display:flex;align-items:center;gap:6px;color:var(--kv-ink2)}.kv-hl i,.kv-lgi i,.kv-dot{width:10px;height:10px;border-radius:2px;display:inline-block}.kv-dot{margin-right:6px}
.kv-htrack{height:12px}.kv-htrack b{display:block;height:100%;border-radius:0 4px 4px 0}.kv-hv{color:var(--kv-ink);font-variant-numeric:tabular-nums;text-align:right}
.kv-stack{display:flex;gap:2px;height:26px;margin:6px 0 8px;border-radius:6px;overflow:hidden}
.kv-seg{border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;font:700 13px Arial,sans-serif;color:#0b0b0b}
.kv-seg.good{background:var(--kv-good);color:#fff}.kv-seg.warn{background:var(--kv-warn)}.kv-seg.serious{background:var(--kv-serious)}.kv-seg.crit{background:var(--kv-crit);color:#fff}
.kv-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:4px 0 6px;font-size:13px;color:var(--kv-ink2)}.kv-lgi{display:inline-flex;align-items:center;gap:6px}
.kv-lg{border:1px solid transparent;background:none;border-radius:6px;padding:2px 6px;cursor:pointer;font:inherit}.kv-lg[aria-pressed=true]{border-color:#1f4e79;background:#eef4fa}
.kv-rate{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--kv-ink);white-space:nowrap}
.kv-rate i{font-style:normal;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
.kv-rate.good i{background:var(--kv-good)}.kv-rate.warn i{background:var(--kv-warn);color:#0b0b0b}.kv-rate.serious i{background:var(--kv-serious);color:#0b0b0b}.kv-rate.crit i{background:var(--kv-crit)}
.kv-meter{display:inline-block;width:70px;height:6px;background:#eceae4;border-radius:3px;overflow:hidden;vertical-align:middle;margin:0 8px}
.kv-meter b{display:block;height:100%;background:var(--kv-s1);border-radius:3px}.kv-meter b.good{background:var(--kv-good)}.kv-meter b.warn{background:var(--kv-warn)}.kv-meter b.serious{background:var(--kv-serious)}.kv-meter b.crit{background:var(--kv-crit)}
.kv-tablewrap{overflow:auto;max-height:calc(100vh - 160px);background:#fff;border:1px solid #dde5ee;border-radius:10px;margin:0 0 10px}
.kv-table{margin:0}.kv-table td{vertical-align:middle}.kv-table td.num,.kv-card td.num,.kv-card th.num{text-align:right;font-variant-numeric:tabular-nums}
.kv-row{cursor:pointer}.kv-row:hover td{background:#f7fafd}.kv-row.open td{background:#fff8e1}.kv-row:focus-visible{outline:3px solid #7aa7ff}
.kv-score{white-space:nowrap}.kv-score>b{display:inline-block;min-width:26px;text-align:right;font-size:16px;font-variant-numeric:tabular-nums}
.kv-spark{width:90px;height:24px;display:block}
.kv-empty{color:var(--kv-muted);font-size:13px;margin:8px 0}
.kv-drawer{width:min(640px,100vw);background:var(--soft)}.kv-drawer .sx-dh{background:var(--soft)}
.kv-name{font-size:22px}.kv-hero{display:flex;gap:16px;align-items:center;margin:0 0 12px}.kv-big{font-size:48px;font-weight:800;line-height:1}.kv-big small{font-size:16px;color:var(--kv-muted);font-weight:400}
.kv-parts{display:grid;gap:8px;background:var(--kv-surface);border:1px solid #dde5ee;border-radius:10px;padding:12px 14px;margin:0 0 12px}
.kv-part{display:grid;grid-template-columns:130px 110px 44px 1fr;align-items:center;gap:6px;font-size:13px}.kv-part>span small{color:var(--kv-muted)}.kv-part .kv-meter{width:100px;margin:0}.kv-part>b{text-align:right;font-variant-numeric:tabular-nums}
.kv-mini{background:#fff;border:1px solid #dde5ee;border-radius:8px;padding:8px 10px;margin:0 0 8px;font-size:14px}.kv-mini>b{font-size:20px}.kv-mini>span{color:var(--kv-muted)}
.kv-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.kv-form.four{grid-template-columns:repeat(4,1fr)}.kv-form .field{margin:0}.kv-form input{width:100%}
#kvTip{position:fixed;z-index:300;pointer-events:none;background:#1b1f24;color:#fff;font-size:13px;padding:6px 10px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.25);max-width:280px}
@media (max-width:640px){.kv-tiles{grid-template-columns:1fr 1fr}.kv-tile b{font-size:22px}.kv-grid2{grid-template-columns:1fr}.kv-tiles.sm{grid-template-columns:1fr 1fr}.kv-part{grid-template-columns:1fr 1fr;row-gap:2px}.kv-part>small{grid-column:1/-1}.kv-form,.kv-form.four{grid-template-columns:1fr 1fr}.kv-hrow{grid-template-columns:80px 1fr 70px}}

/* ===== Class & tools bản 2: tổng quan, biểu đồ, hồ sơ học viên, hàng đợi chấm, thông báo ===== */
.tlhead{flex-wrap:wrap;gap:10px}
.tltabs{position:sticky;top:0;z-index:5;background:#f6f8fb;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
.tltabs button{white-space:nowrap}
.tlcount{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:#b3261e;color:#fff;font-size:12px;line-height:20px;text-align:center}
@media (min-width:1180px){.tlgrid{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:24px;max-width:1400px}.tlgrid .tlhead{grid-column:1/-1}
  .tlgrid .tltabs{flex-direction:column;border-bottom:0;border-right:2px solid #dde5ee;margin:0;align-self:start;top:10px;background:none}
  .tlgrid .tltabs button{text-align:left;border-bottom:0;border-right:3px solid transparent;margin:0 -2px 0 0;padding:10px 14px}
  .tlgrid .tltabs button[aria-selected=true]{border-bottom:0;border-right-color:#1f4e79;background:#eaf1f8}}
.tlpanel{min-width:0;background:#fff;border:1px solid #dde5ee;border-radius:14px;padding:14px 16px;margin:0 0 16px}
.tlpanel h3{margin:0 0 8px;font-size:17px}.tlpanel h3 .fine{font-weight:400;margin-left:6px}
.tl2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:16px}.tl2col .tlpanel{margin:0 0 16px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:8px 0 16px}
.stat.kpi{border-radius:12px;display:flex;flex-direction:column;gap:2px}.stat.kpi b{font-size:28px;line-height:1.15}.stat.kpi b small{font-size:15px;color:var(--muted);font-weight:400}
.stat.kpi small{color:var(--muted);font-size:13px}.kd{font-size:12.5px;color:#5a6b7e}.kd.up{color:#006300}.kd.down{color:#b3261e}
.tlseg{display:inline-flex;flex:none;flex-wrap:nowrap;border:1px solid #c9d4df;border-radius:10px;overflow:hidden;max-width:100%;overflow-x:auto}.tlseg button{border:0;background:#fff;padding:7px 12px;font:inherit;font-size:14px;cursor:pointer;color:#3b4b5c}
.tlseg button+button{border-left:1px solid #c9d4df}.tlseg button[aria-pressed=true]{background:#1f4e79;color:#fff;font-weight:700}.tlseg.sm button{padding:4px 10px;font-size:13px}
.dcsvg{width:100%;height:auto;display:block;margin:4px 0;max-width:980px}
.dcleg{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;color:#3b4b5c;margin:4px 0}.dcleg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.dcdot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.dctip{position:fixed;z-index:9999;pointer-events:none;background:#1d2733;color:#fff;font-size:13px;line-height:1.4;padding:7px 10px;border-radius:8px;white-space:pre-line;max-width:260px;box-shadow:0 6px 18px rgba(0,0,0,.2);display:none}
.dcmini{display:inline-block;flex:none;width:70px;height:8px;border-radius:999px;background:#eef2f6;overflow:hidden;vertical-align:middle}.dcmini i{display:block;height:100%;border-radius:999px}
.dcst{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}.dcst .dci{margin-right:2px}
.tlck{width:28px}.tlck input{width:17px;height:17px}.tlselrow td{background:#f1f6fc}
.tlname{font-weight:700;text-align:left}
.tlbulk{position:sticky;top:48px;z-index:4;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;margin:0 0 12px;border-radius:12px;background:#1f4e79;color:#fff;box-shadow:0 6px 18px rgba(31,78,121,.25)}
.tlbulk .btn{padding:6px 12px;font-size:14px}.tlbulk b{margin-right:6px}
.tlhint{margin:-4px 0 10px}
.profhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-start;margin:4px 0 8px}.profhead h2{margin:0 0 4px;font-size:24px}
.notefm{display:grid;grid-template-columns:140px 1fr auto;gap:8px;align-items:start;margin:0 0 10px}.notefm textarea,.notefm select{padding:7px 10px;font:inherit;font-size:14px}
@media (max-width:640px){.notefm{grid-template-columns:1fr}}
ul.notes{list-style:none;padding:0;margin:0}ul.notes li{border-top:1px solid #e3e8ee;padding:8px 0}ul.notes p{margin:4px 0 0;white-space:pre-wrap}
.asgcard.urgent{border-color:#f3b8b2;background:#fffafa}.annbody{white-space:pre-wrap;margin:6px 0}
.asgform .g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
@media (max-width:700px){.tlbulk{top:0}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.stat.kpi b{font-size:22px}.tl2col{grid-template-columns:1fr}}
@media print{#tools .tltabs,#tools .tlbar,#tools .tlbulk{display:none}}

/* Thông báo của giáo viên trên trang chủ học viên */
.annbox{margin:0 0 14px}.ann{padding:12px 14px;margin:0 0 10px;border-radius:12px;border:1px solid #cfe0ef;border-left:6px solid #2a78d6;background:#f5f9fd;position:relative}
.ann.urgent{border-color:#f3b8b2;border-left-color:#b3261e;background:#fff6f5}.ann h3{margin:0 0 4px;font-size:17px;padding-right:28px}.ann p{margin:0;white-space:pre-wrap}
.ann .annx{position:absolute;top:8px;right:8px;border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:#5a6b7e;padding:4px}

.dcmw{white-space:nowrap}
.tltable td.tlgrp{min-width:110px}

/* ===== Class & tools: menu chia nhóm, mục Student IDs + Student KPI, Hồ sơ HV 3 phần (27/09/2026) ===== */
.tltabs button[aria-current=page]{color:#1f4e79;border-bottom-color:#1f4e79}
.tlnavh{align-self:center;flex:0 0 auto;width:1px;height:22px;background:#cfd8e3;margin:0 6px;overflow:hidden;color:transparent;font-size:0}
.tlnavh.first{display:none}
@media (min-width:1180px){
  .tlgrid .tltabs button[aria-current=page]{border-bottom:0;border-right-color:#1f4e79;background:#eaf1f8}
  .tlgrid .tlnavh,.tlgrid .tlnavh.first{display:block;width:auto;height:auto;background:none;margin:0;padding:14px 14px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7a8796}
  .tlgrid .tlnavh.first{padding-top:4px}}
.tlsechead{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.tlsechead h2{margin:0;font-size:22px}.tlsechead p{margin:2px 0 0}
#sxRoot .sx-bulk{top:44px}
.pfsec{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 14px;border-bottom:2px solid #dde5ee}
.pfsec button{padding:8px 14px;border:0;background:none;font:700 14px Arial,sans-serif;color:#5a6b7e;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.pfsec button[aria-selected=true]{color:#1f4e79;border-bottom-color:#1f4e79}
.pf-acct{max-width:640px}.pf-acct h4{margin:14px 0 8px;font-size:16px}
#pfKpi .kv-parts,#pfKpi .kv-card{max-width:900px}
@media (min-width:1180px){#sxRoot .sx-bulk{top:0}}
@media print{#tools .pfsec{display:none}}

/* ---- Phân quyền: owner (admin key) / admin / teacher (staff.js) ---- */
.flag.role-admin{background:#fdecd8;color:#8a4200}.flag.role-teacher{background:#e0f2f1;color:#0b5c55}.flag.role-owner{background:#e4e9fb;color:#23409a}
.adm-who{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:0 0 10px;font-size:14px;color:#44505c}
.adm-who[hidden]{display:none}