:root{
  --bg:#0b1020; --bg2:#121a33; --panel:#161f3d; --line:#25335c;
  --txt:#e6ecff; --muted:#8fa0c8; --brand:#4da3ff; --brand2:#7c5cff;
  --ok:#3ddc97; --warn:#ffc857; --err:#ff6b6b; --gold:#f5c542;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f4f7fc; --bg2:#ffffff; --panel:#ffffff; --line:#dfe6f3;
    --txt:#16203a; --muted:#5b6b8c; --brand:#1667d1; --brand2:#5b3ee8;
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.hidden{display:none!important}
.screen{display:none;min-height:100vh}
.screen.active{display:block}
#console.active{display:grid;grid-template-columns:240px 1fr}

/* đăng nhập */
#login{display:none;place-items:center;min-height:100vh;padding:24px}
#login.active{display:grid}
.login-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.brand .logo{font-size:34px;background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.brand h1{margin:0;font-size:19px}
.brand small{color:var(--muted)}
.brand.small .logo{font-size:24px}

label{display:block;margin:10px 0;font-size:12px;color:var(--muted)}
label small{opacity:.8}
input,select,textarea{width:100%;margin-top:4px;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
label.check{display:flex;gap:8px;align-items:center;color:var(--txt)}
label.check input{width:auto;margin:0}
button{padding:9px 15px;border-radius:9px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);font:inherit;font-weight:600;cursor:pointer}
button:hover{border-color:var(--brand)}
button.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));border:none;color:#fff}
button.danger{border-color:var(--err);color:var(--err)}
button.danger:hover{background:var(--err);color:#fff}
button.ghost{background:transparent}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
.row label{flex:1;min-width:120px}
.spacer{flex:1}
.hint{color:var(--muted);font-size:12px;margin-bottom:10px}
.warn{color:var(--warn);font-size:12px}
.err{color:var(--err);font-size:12px;margin-top:10px;white-space:pre-wrap}
pre{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:12px;overflow:auto;font-size:11px;max-height:280px;white-space:pre-wrap;word-break:break-all}
details summary{cursor:pointer;color:var(--muted);font-size:12px;margin:8px 0}
.layer-strip{display:flex;gap:3px;flex-wrap:wrap;margin-top:14px}
.layer-strip span{font-size:9px;padding:2px 5px;border-radius:4px;background:var(--bg2);border:1px solid var(--line);color:var(--muted)}
.layer-strip span.pass{background:rgba(61,220,151,.15);border-color:var(--ok);color:var(--ok)}

/* khung chính */
.side{background:var(--bg2);border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:14px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{padding:9px 11px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:600;font-size:13px}
.side nav a:hover{background:var(--panel);color:var(--txt)}
.side nav a.on{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.main{padding:18px 22px;overflow:auto;max-height:100vh}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.top h2{margin:0;font-size:20px}
.top-right{display:flex;gap:8px;align-items:center}
.pill{display:inline-block;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700;background:var(--panel);border:1px solid var(--line)}
.pill.ok{border-color:var(--ok);color:var(--ok)}
.pill.warn{border-color:var(--warn);color:var(--warn)}
.pill.err{border-color:var(--err);color:var(--err)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.card .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.card .v{font-size:26px;font-weight:800;margin-top:4px}
.card .s{font-size:11px;color:var(--muted)}
.card.ok .v{color:var(--ok)} .card.warn .v{color:var(--warn)} .card.err .v{color:var(--err)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.panel h3{margin:0 0 12px;font-size:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar input,.toolbar select{width:auto;margin:0}
.muted{color:var(--muted);font-size:12px}

table{width:100%;border-collapse:collapse;font-size:12px}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.4px}
tbody tr:hover{background:var(--bg2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:99px;background:var(--bg);overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.bar.ok>i{background:var(--ok)} .bar.warn>i{background:var(--warn)} .bar.err>i{background:var(--err)}
.tag{font-size:10px;padding:1px 6px;border-radius:5px;background:var(--bg2);border:1px solid var(--line);color:var(--muted)}
.tag.ok{border-color:var(--ok);color:var(--ok)}
.tag.err{border-color:var(--err);color:var(--err)}

.toast{position:fixed;right:18px;top:18px;z-index:50;display:flex;flex-direction:column;gap:8px}
.toast>div{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:9px;padding:10px 14px;font-size:12px;max-width:340px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast>div.ok{border-left-color:var(--ok)}
.toast>div.err{border-left-color:var(--err)}

.axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.axis{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:10px}
.axis .n{font-size:11px;color:var(--muted)}
.axis .p{font-size:18px;font-weight:800}

@media (max-width:900px){
  #console.active{grid-template-columns:1fr}
  .side{flex-direction:row;flex-wrap:wrap;align-items:center;position:sticky;top:0;z-index:20}
  .side nav{flex-direction:row;flex-wrap:wrap}
  .side-foot{margin:0;flex-direction:row}
  .grid2{grid-template-columns:1fr}
  .main{max-height:none}
}

/* ── Công thức toán ──────────────────────────────────────────────────────── */
.tex{font-family:"Cambria Math","Latin Modern Math","Times New Roman",Georgia,serif;line-height:1.6;white-space:nowrap}
.tex-display{display:block;text-align:center;margin:10px 0;font-size:1.12em}
.tex-inline{display:inline-block;vertical-align:middle}
.tex-var{font-style:italic;padding:0 .5px}
.tex-fn{font-style:normal;padding-right:2px}
.tex-op{padding:0 4px}
.tex-text{font-family:inherit;font-style:normal}
.tex-bb{font-weight:600;font-style:normal}
.tex-delim{padding:0 1px}
.tex-unknown{color:var(--err);font-family:monospace;font-size:.85em}

.tex-frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 3px;font-size:.96em}
.tex-frac>.tex-num{border-bottom:1.3px solid currentColor;padding:0 4px 1px}
.tex-frac>.tex-den{padding:1px 4px 0}

.tex-root{display:inline-flex;align-items:flex-start;vertical-align:middle;margin:0 1px;position:relative}
.tex-root>.tex-radical{font-size:1.05em;line-height:1}
.tex-root>.tex-radicand{border-top:1.3px solid currentColor;padding:1px 3px 0;margin-left:-1px}
.tex-root>.tex-rootidx{font-size:.62em;align-self:flex-start;margin-right:-5px;margin-top:-1px}

sup.tex-script,sub.tex-script{font-size:.72em;line-height:0}
sup.tex-script{vertical-align:super}
/* Ký hiệu nằm trong chỉ số trên không được giãn hai bên: "36°" phải dính liền,
   không thành "36 °". */
sup.tex-script .tex-op,sub.tex-script .tex-op{padding:0}
sub.tex-script{vertical-align:sub}

.tex-acc{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;margin:0 1px}
.tex-acc>.tex-acc-mark{font-size:.78em;height:.46em;line-height:.46;font-style:normal}
.tex-acc>.tex-acc-body{line-height:1.05}
.tex-cases{display:inline-flex;align-items:center;vertical-align:middle}
.tex-cases>.tex-brace{font-size:2.1em;line-height:.85;font-weight:300;margin-right:3px}
.tex-rows{display:inline-flex;flex-direction:column;gap:3px}
.tex-row{display:flex;gap:10px;white-space:nowrap}

/* Thẻ bài tập trong giao diện học viên / giáo viên */
.item-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
.item-card .stem{font-size:15px;margin-bottom:10px;white-space:normal}
.item-card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.item-card ol,.item-card ul{margin:6px 0;padding-left:20px}
.item-card li{margin:4px 0;white-space:normal}
.stars{color:var(--gold);letter-spacing:1px}

/* ── Giọng nói giảng viên ───────────────────────────────────────────────── */
.voice-btn { padding: 4px 10px; font-size: 13px; }
.voice-btn.playing { background: var(--brand); color: #fff; border-color: var(--brand); }
.ai-tag {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 10px;
  font-size: 11px; letter-spacing: .02em; border: 1px solid currentColor;
  opacity: .62; vertical-align: middle;
}
.voice-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.voice-row select { max-width: 380px; }
.voice-pick { display:block; font-size:12px; opacity:.85; margin-bottom:8px }
.voice-pick select { width:100%; margin-top:4px; font-size:12px }
#fKichBan{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.6;margin-top:10px}

/* ── Căn cứ của từng bước giải ────────────────────────────────────────────
   Thao tác nói LÀM GÌ, căn cứ nói VÌ SAO ĐƯỢC PHÉP LÀM THẾ. Căn cứ lùi vào,
   chữ nhỏ hơn và có vạch dọc, để mắt đọc thao tác trước rồi mới đọc căn cứ. */
.can-cu{display:block;margin-top:5px;padding-left:11px;font-size:13px;line-height:1.55;
  color:#5c6773;border-left:2px solid #c5d3e8}
.can-cu::before{content:"Căn cứ: ";font-weight:700;color:#1668c9}

/* ── BẢNG BÁO LỖI ─────────────────────────────────────────────────────────
   Hiện khi một phần nội dung không dựng được. Trước khi có bảng này, lỗi ấy
   chỉ nằm trong bảng điều khiển trình duyệt — nơi người dùng không bao giờ
   mở ra xem — nên trang trông như bình thường mà thiếu nội dung.            */
.bang-bao-loi {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(12px);
  max-width: min(680px, calc(100vw - 32px));
  padding: 11px 16px;
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  background: #7f1d1d;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}
.bang-bao-loi.hien {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.bang-bao-loi[data-kieu="nhac"] { background: #78350f; }

/* ── NÚT ĐĂNG NHẬP BẰNG KHUÔN MẶT ─────────────────────────────────────────
   Nút PHỤ, không phải nút chính: mật khẩu vẫn là lối vào luôn dùng được,
   khuôn mặt là lối nhanh khi máy có cảm biến. Đặt nhỏ hơn có chủ ý.        */
.phu-khuon-mat {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: none;
  color: var(--txt);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.phu-khuon-mat:hover { border-color: var(--brand); color: var(--brand); }
.ghi-khuon-mat {
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}