/* ─────────────────────────────────────────────────────────────────────────
   HSK 5 · Web học tập — FEYNMAN-WEB V10
   Minimalism: nền var(--bg), chữ var(--ink), nhiều khoảng trắng, không hiệu ứng thừa.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* Bảng màu do theme.css khai báo (nạp sau tệp này). Ở đây chỉ giữ phần
     chữ, bóng và bo góc — không tự tham chiếu để tránh vòng lặp biến. */
  --f-zh:"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --f-ui:"Be Vietnam Pro","Inter","Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --sh:0 1px 2px rgba(43,42,38,.04),0 8px 24px -16px rgba(43,42,38,.18);
  --sh2:0 2px 6px rgba(43,42,38,.06),0 16px 40px -24px rgba(43,42,38,.22);
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.65 var(--f-ui);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--blue);text-decoration:none}
button{font:inherit;cursor:pointer}
.zh{font-family:var(--f-zh)}

/* ── layout ───────────────────────────────────────────────────────────── */
#app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
aside{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--card);
  border-right:1px solid var(--line);padding:20px 0 32px;display:flex;flex-direction:column}
main{min-width:0;padding:0 0 80px}
.wrap{max-width:940px;margin:0 auto;padding:0 32px}

/* ── sidebar ──────────────────────────────────────────────────────────── */
.brand{padding:0 20px 18px;border-bottom:1px solid var(--line2)}
.brand .kick{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.brand h1{font-family:var(--f-zh);font-size:20px;margin:6px 0 2px;letter-spacing:.02em}
.brand p{margin:0;font-size:11.5px;color:var(--ink3)}
.userbox{margin:14px 20px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper2);display:flex;align-items:center;gap:9px;font-size:12px}
.userbox .av{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:11px;flex:0 0 auto}
.userbox .nm{font-weight:700;line-height:1.2}
.userbox .st{color:var(--ink3);font-size:10.5px}

.lesson-nav{list-style:none;margin:14px 0 0;padding:0 10px}
.lesson-nav .grp{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
  font-weight:700;padding:14px 10px 6px}
.lesson-nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
  color:var(--ink2);font-size:13px;margin-bottom:1px;border:1px solid transparent}
.lesson-nav a:hover{background:var(--bg2);color:var(--ink)}
.lesson-nav a.on{background:var(--ink);color:#fff;font-weight:600}
.lesson-nav a.on .n{color:#fff}
.lesson-nav .n{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink3);font-weight:700;min-width:20px}
.lesson-nav .tt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.lesson-nav .dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:0 0 auto}
.lesson-nav .dot.done{background:var(--green)}
.lesson-nav .dot.part{background:var(--amber)}

.side-foot{margin-top:auto;padding:16px 20px 0;border-top:1px solid var(--line2)}
.side-foot button{width:100%;justify-content:center}

/* ── thành phần chung ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);padding:8px 14px;border-radius:9px;font-size:13px;
  font-weight:600;transition:.14s;box-shadow:0 1px 1px rgba(43,42,38,.03)}
.btn:hover{border-color:var(--line3);background:var(--paper2)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink2)}
.btn.ghost:hover{background:var(--line2);color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}

.kick{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 9px;
  border-radius:999px;background:var(--bg2);border:1px solid var(--line);color:var(--ink2);
  font-weight:600;white-space:nowrap}
.chip.g{background:var(--green-l);border-color:var(--green-l2);color:var(--green)}
.chip.r{background:var(--red-l);border-color:var(--red-l2);color:var(--red)}
.chip.b{background:var(--blue-l);border-color:var(--blue-l2);color:var(--blue)}
.chip.a{background:var(--amber-l);border-color:var(--amber-l2);color:var(--amber)}
.chip.v{background:var(--purple-l);border-color:var(--purple-l2);color:var(--purple)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:20px 22px}
.card + .card{margin-top:16px}
.muted{color:var(--ink3);font-size:12.5px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
h2.sec{font-size:23px;margin:0 0 6px;letter-spacing:-.01em}
h3.ch3{font-size:16px;margin:0 0 10px}
h4.ch4{font-size:13.5px;margin:0 0 8px;letter-spacing:.01em}
hr.sep{border:0;border-top:1px solid var(--line2);margin:18px 0}

/* ── header bài ───────────────────────────────────────────────────────── */
.lhead{padding:34px 0 0}
.lhead h2{font-family:var(--f-zh);font-size:30px;margin:8px 0 4px;letter-spacing:.01em;line-height:1.3}
.lhead .sub{color:var(--ink2);margin:0 0 4px;font-size:14px}

/* ── sub-nav trong bài ────────────────────────────────────────────────── */
.subnav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:22px 0 24px;
  overflow-x:auto;scrollbar-width:none;position:sticky;top:0;background:var(--bg);z-index:20;
  padding-top:6px}
.subnav::-webkit-scrollbar{display:none}
.subnav button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;
  color:var(--ink3);font-size:13px;font-weight:600;white-space:nowrap;margin-bottom:-1px}
.subnav button:hover{color:var(--ink)}
.subnav button.on{color:var(--ink);border-bottom-color:var(--ink)}
.subnav .cnt{font-size:10.5px;color:var(--ink3);font-weight:700;margin-left:4px}

/* ── hero tổng quan ───────────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:20px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)}
.stat .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.stat .v{font-size:24px;font-weight:700;margin-top:4px;letter-spacing:-.02em}

.gate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0}
.gate{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  box-shadow:var(--sh);cursor:pointer;transition:.15s;text-align:left}
.gate:hover{border-color:var(--line3);transform:translateY(-1px);box-shadow:var(--sh2)}
.gate .ic{font-size:18px}
.gate h4{margin:8px 0 3px;font-size:14px}
.gate p{margin:0;font-size:12px;color:var(--ink3);line-height:1.5}

/* ── bài khóa ─────────────────────────────────────────────────────────── */
.para{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--sh);margin-bottom:16px}
.para .zhtext{font-family:var(--f-zh);font-size:21px;line-height:1.95;letter-spacing:.02em}
.para .zhtext w{text-decoration:none;border-bottom:1.5px dotted var(--line3);cursor:help;position:relative;
  padding-bottom:1px;transition:background .12s}
.para .zhtext w:hover{background:var(--amber-l2);border-bottom-color:var(--amber)}
.para .pnote{font-size:12px;color:var(--ink3);margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2)}

/* tooltip */
#tip{position:fixed;z-index:200;background:var(--ink-strong);color:#fff;border-radius:9px;padding:9px 12px;
  font-size:12px;line-height:1.55;max-width:300px;box-shadow:0 12px 32px -8px rgba(0,0,0,.4);
  pointer-events:none;opacity:0;transform:translateY(4px);transition:.12s}
#tip.on{opacity:1;transform:translateY(0)}
#tip .py{color:var(--blue-l2);font-weight:600;letter-spacing:.02em}
#tip .vi{color:var(--ink2);margin-top:2px}
#tip .st{color:#FCD34D;font-size:10px;margin-top:3px}

/* ── player ───────────────────────────────────────────────────────────── */
.ap{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}
.ap .pp{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;font-size:11px;flex:0 0 auto;color:var(--ink)}
.ap .pp:hover{border-color:var(--ink)}
.ap.playing .pp{background:var(--red);border-color:var(--red);color:#fff}
.ap .sk{-webkit-appearance:none;appearance:none;flex:1 1 90px;min-width:70px;height:4px;border-radius:99px;
  background:var(--line);outline:none}
.ap .sk::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--red);cursor:pointer}
.ap .tm{font-size:10.5px;color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:66px}
.ap select{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:2px 4px;
  background:var(--card);color:var(--ink2)}

/* ── từ vựng ──────────────────────────────────────────────────────────── */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.vc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);display:flex;flex-direction:column}
.vc img{width:100%;height:132px;object-fit:cover;display:block;background:var(--line2)}
.vc .bd{padding:13px 15px 14px;flex:1;display:flex;flex-direction:column;gap:2px}
.vc .n{font-size:10px;color:var(--ink3);font-weight:700}
.vc .zh{font-family:var(--f-zh);font-size:22px;letter-spacing:.02em}
.vc .py{color:var(--blue);font-size:12px;font-weight:600;letter-spacing:.02em}
.vc .vi{font-size:13px;color:var(--ink2);margin-top:2px}
.vc .pos{font-size:10.5px;color:var(--ink3);margin-top:3px}
.vc .ex{font-size:11.5px;color:var(--ink2);margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--line2);font-family:var(--f-zh)}

.co{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--purple);
  border-radius:10px;padding:12px 15px;margin-bottom:10px}
.co .t{font-family:var(--f-zh);font-size:15px;font-weight:600}
.co .m{font-size:12px;color:var(--ink2);margin-top:3px}

/* ── ngữ pháp ─────────────────────────────────────────────────────────── */
.gp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  box-shadow:var(--sh);margin-bottom:16px}
.gp .head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.gp .head .zh{font-family:var(--f-zh);font-size:27px;color:var(--red);letter-spacing:.02em}
.gp .body{white-space:pre-wrap;font-size:13.5px;color:var(--ink2);line-height:1.75}

/* ── quiz / đề thi ────────────────────────────────────────────────────── */
.exam-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;box-shadow:var(--sh);
  position:sticky;top:44px;z-index:15;margin-bottom:18px}
.exam-bar .prog{flex:1;min-width:120px;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.exam-bar .prog i{display:block;height:100%;background:var(--ink);border-radius:99px;transition:.3s}
.clock{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
.clock.warn{color:var(--red)}

.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  box-shadow:var(--sh);margin-bottom:14px}
.q .qh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.q .qn{font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.08em}
.q .stem{font-family:var(--f-zh);font-size:17px;line-height:1.8;margin-bottom:12px}
.q .stem u{text-decoration:none;border-bottom:2px solid var(--ink);padding:0 14px;margin:0 2px}
.opts{display:flex;flex-direction:column;gap:7px}
.opt{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);
  background:var(--card);border-radius:9px;padding:9px 13px;font-size:14px;color:var(--ink);
  transition:.12s;font-family:var(--f-zh)}
.opt .lb{width:19px;height:19px;border-radius:5px;border:1px solid var(--line);display:grid;
  place-items:center;font-size:10.5px;font-weight:700;color:var(--ink3);flex:0 0 auto;font-family:var(--f-ui)}
.opt:hover:not(.locked){border-color:var(--ink);background:var(--paper2)}
.opt.ok{border-color:var(--green);background:var(--green-l)}
.opt.ok .lb{background:var(--green);border-color:var(--green);color:#fff}
.opt.no{border-color:var(--red);background:var(--red-l)}
.opt.no .lb{background:var(--red);border-color:var(--red);color:#fff}
.opt.dim{opacity:1;color:var(--ink3);background:var(--bg2);border-color:var(--line2)}
.opt.locked{cursor:default}

.fb{margin-top:11px;border-radius:9px;padding:11px 14px;font-size:13px;line-height:1.65}
.fb.ok{background:var(--green-l);border:1px solid var(--green-l2);color:#14532D}
.fb.no{background:var(--red-l);border:1px solid var(--red-l2);color:#7F1D1D}
.fb .lbl{font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.fb .why{margin-top:6px;font-size:12.5px}
.ai-exp{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(0,0,0,.12);font-size:12.5px}

/* ── bài viết / tự luận ───────────────────────────────────────────────── */
textarea{width:100%;min-height:140px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-family:var(--f-zh);font-size:15px;line-height:1.8;background:var(--card);color:var(--ink);resize:vertical}
textarea:focus{outline:2px solid #DBEAFE;border-color:var(--blue-l2)}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  padding:7px 9px;border-bottom:1px solid var(--line);font-weight:700}
.tbl td{padding:8px 9px;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl .zh{font-family:var(--f-zh);font-size:13.5px}

/* ── kết quả ──────────────────────────────────────────────────────────── */
.score-hero{text-align:center;padding:28px 20px}
.score-hero .big{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1}
.score-hero .of{font-size:15px;color:var(--ink3);font-weight:600}

/* ── toast ────────────────────────────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:300;
  background:var(--ink-strong);color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;font-weight:600;
  opacity:0;transition:.2s;pointer-events:none;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.ok{background:var(--green)}
#toast.no{background:var(--red)}

/* ── modal ────────────────────────────────────────────────────────────── */
#mask{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:250;display:none;
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
#mask.on{display:flex}
.modal{background:var(--card);border-radius:16px;box-shadow:0 30px 70px -20px rgba(15,23,42,.5);
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;padding:24px 26px}
.modal h3{margin:0 0 4px;font-size:19px}
.modal .lab{font-size:11.5px;font-weight:700;color:var(--ink2);margin:16px 0 5px;display:block}
.modal input,.modal select,#login input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;
  font-size:13.5px;background:var(--card);color:var(--ink)}
.modal .hint{font-size:11.5px;color:var(--ink3);margin-top:5px;line-height:1.55}

/* ── empty / loading ──────────────────────────────────────────────────── */
.empty{text-align:center;padding:56px 20px;color:var(--ink3)}
.empty .ic{font-size:34px;margin-bottom:10px}
.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--line);
  border-top-color:var(--ink);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  #app{grid-template-columns:1fr}
  aside{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);
    padding-bottom:14px;max-height:none}
  .lesson-nav{display:flex;overflow-x:auto;gap:6px;padding:10px 12px;scrollbar-width:none}
  .lesson-nav::-webkit-scrollbar{display:none}
  .lesson-nav .grp{display:none}
  .lesson-nav a{flex:0 0 auto;border:1px solid var(--line);margin:0;padding:7px 12px;border-radius:99px}
  .lesson-nav .n{display:none}
  .lesson-nav .tt{display:inline;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
  .lesson-nav a.on{padding-left:12px}
  /* điện thoại: 2 nút Cài đặt / Chia sẻ thu về 1 hàng ngắn, vẫn bấm được */
  .side-foot{display:flex;gap:8px;padding:10px 12px 0;margin:0;border-top:0}
  .side-foot button{margin:0 !important;font-size:13px;padding:8px 10px;width:auto;flex:1 1 0}
  .wrap{padding:0 16px}
  .lhead h2{font-size:24px}
  .para .zhtext{font-size:19px}
  .vgrid{grid-template-columns:1fr}
  main{padding-bottom:48px}
}

/* nút dừng cạnh nút phát */
.ap .st{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:#9CA3AF;font-size:8px;line-height:1;cursor:pointer;flex:none;display:grid;place-items:center;
  transition:border-color .15s,color .15s}
.ap .st:hover{border-color:var(--ink);color:var(--ink)}

/* ── điện thoại: gọn bảng, đủ chỗ cho nội dung ─────────────────────────── */
@media (max-width: 620px){
  .tbl th, .tbl td{padding:8px 6px;font-size:13px}
  .tbl th:nth-child(4), .tbl td:nth-child(4){display:none}   /* cột "Từ" */
  .tbl th:nth-child(3), .tbl td:nth-child(3){display:none}   /* cột "Nghĩa" */
  .stat .v{font-size:22px}
  .subnav button{padding:7px 10px;font-size:13px}
  .exam-bar{gap:8px}
  .exam-bar .clock{font-size:13px}
}

/* ── màn đăng nhập ─────────────────────────────────────────────────────── */
body.locked{overflow:hidden}
#login{position:fixed;inset:0;display:grid;place-items:center;padding:20px;
  background:linear-gradient(160deg,var(--bg) 0%,var(--bg2) 60%,var(--line2) 100%);z-index:80}
.lg-card{width:100%;max-width:392px;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 20px;box-shadow:0 18px 50px rgba(43,42,38,.10)}
.lg-brand{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.lg-mark{width:38px;height:38px;border-radius:11px;background:var(--ink);color:var(--bg);
  display:grid;place-items:center;font-size:19px;font-weight:600}
.lg-card h2{font-size:21px;margin:0 0 4px}
.lg-sub{font-size:13px;margin:0 0 18px;line-height:1.5}
.lg-card .lab{margin:12px 0 5px;display:block;font-size:11.5px;font-weight:700;color:var(--ink2)}
#login input{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  font-size:14.5px;background:#fff;color:var(--ink)}
#login input:focus{outline:2px solid #CBD5E1;outline-offset:1px}
.lg-btn{width:100%;justify-content:center;margin-top:18px;padding:11px}
.lg-err{color:var(--red);font-size:13px;min-height:18px;margin-top:8px}
.lg-alt{text-align:center;font-size:13px;margin-top:14px;color:var(--ink2)}
.lg-alt a{color:var(--blue);text-decoration:none;font-weight:600}
.lg-foot{font-size:11.5px;line-height:1.5;margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}

/* ── bài thi HSK ───────────────────────────────────────────────────────── */
.sect{margin-bottom:16px}
.sect .ch3{margin:0 0 6px;font-size:16px}
.passage{background:#FBFAF7;border-left:3px solid var(--line);padding:10px 12px;border-radius:6px;
  font-size:16px;line-height:1.9;margin:6px 0 10px}
.listen{display:flex;align-items:center;gap:10px;margin:6px 0 10px;flex-wrap:wrap}
.listen .ln{font-size:13px;line-height:1.5}
.listen .play.playing{background:var(--ink);color:#fff;border-color:var(--ink)}
.q.wr .hint{font-size:13px;color:var(--ink2);margin:2px 0 8px}
.q.wr .ta{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px;font-family:inherit;
  font-size:16px;line-height:1.7;background:#fff;resize:vertical}
.q.wr .ta:focus{outline:2px solid #CBD5E1;outline-offset:1px}
.q.wr .cnt{font-size:12px}
#hsRate{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px}

@media (max-width:620px){
  .lg-card{padding:22px 18px 16px}
  .listen .ln{font-size:12.5px}
}

.ksub{font-size:11px;color:var(--ink3);margin-top:3px;line-height:1.4}
.stat .v+.ksub{margin-top:2px}
.acct{display:flex;align-items:center;gap:6px;font-size:15px;padding:9px 12px;background:#FBFAF7;border:1px solid var(--line);border-radius:9px}
.acct .hint{margin:0}

/* thanh tua audio từng câu nghe */
.seekrow{display:flex;align-items:center;gap:9px;margin:-2px 0 10px;padding-left:1px}
.seekrow .seek{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:99px;
  background:var(--line);outline:none;cursor:pointer}
.seekrow .seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:2px solid #fff;box-shadow:0 1px 3px rgba(15,23,42,.25);cursor:pointer}
.seekrow .seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--ink);
  border:2px solid #fff;cursor:pointer}
.seekrow .tm{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
.btn.stop[disabled]{opacity:.4;cursor:default}
.fb .okzh{color:var(--green)}

/* ═══════════════════════════════════════════════════════════════════════
   Tuân thủ Web Interface Guidelines (Vercel) — xem skills/web-design-guidelines
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Bỏ độ trễ 300 ms khi bấm đúp trên điện thoại */
.btn, button, a, .opt, summary, [role="button"] { touch-action: manipulation; }

/* 2. Không cho nền trang cuộn theo khi đã cuộn hết modal */
#mask .modal { overscroll-behavior: contain; }

/* 3. Tiêu đề không để chữ mồ côi ở dòng cuối */
h1, h2, .lhead h2, .lg-card h2, .ch3, .ch4 { text-wrap: balance; }
.lead, .sub { text-wrap: pretty; }

/* 4. Số, đồng hồ, điểm — chữ số thẳng cột */
.tm, #hsClock, .clock, .stat .v, .score-hero .big, .tbl td, .q .qn { font-variant-numeric: tabular-nums; }

/* 5. Chữ dài không làm vỡ khung */
.q .stem, .q .zh, .lhead h2, .fb, .ai-exp, .opt .zh, .passage {
  overflow-wrap: anywhere; word-break: normal;
}
.row > *, .spread > *, .listen > * { min-width: 0; }

/* 6. Tôn trọng người dùng nhạy cảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .spin { animation: none !important; border-top-color: var(--ink); }
}

/* 7. Vùng an toàn cho tai thỏ / thanh dưới iPhone */
@supports (padding: env(safe-area-inset-bottom)) {
  #login { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .modal { padding-bottom: max(24px, calc(16px + env(safe-area-inset-bottom))); }
}

/* ── thanh phát audio toàn cục ─────────────────────────────────────────── */
.aubar{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border:1px solid var(--line);
  border-radius:14px;padding:8px 12px;box-shadow:0 10px 30px rgba(15,23,42,.14)}
.aubar[hidden]{display:none}
.aubar .ab-pp{width:38px;height:38px;border-radius:50%;border:none;background:var(--ink);color:#fff;
  font-size:13px;cursor:pointer;flex:none}
.aubar .ab-st{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--ink2);font-size:11px;cursor:pointer;flex:none}
.aubar .ab-meta{display:flex;flex-direction:column;min-width:0;max-width:190px}
.aubar .ab-meta b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aubar .ab-meta span{font-size:11px;color:var(--ink3)}
.aubar .ab-sk{flex:1;min-width:80px;-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;
  background:var(--line);cursor:pointer}
.aubar .ab-sk::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:2px solid #fff;box-shadow:0 1px 3px rgba(15,23,42,.25)}
.aubar .ab-tm{font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums;min-width:78px;text-align:right}
.aubar select{padding:5px 6px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:12.5px}
.aubar .ab-x{border:none;background:none;color:var(--ink3);font-size:14px;cursor:pointer;padding:4px}
@media (max-width:620px){
  .aubar{left:8px;right:8px;bottom:8px;gap:8px;padding:7px 9px}
  .aubar .ab-meta{max-width:110px}
  .aubar .ab-tm{display:none}
}

/* ══ ÔN TẬP BÀI TRƯỚC ══════════════════════════════════════════════════ */
.rtabs{display:flex;gap:8px;margin:14px 0 10px;flex-wrap:wrap}
.rtab{font:inherit;font-size:13px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--ink2);text-decoration:none;white-space:nowrap;cursor:pointer}
.rtab:hover{border-color:var(--ink3);color:var(--ink)}
.rtab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.rbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;
  background:#fff;padding:10px 0;margin:6px 0 12px;border-bottom:1px solid var(--line)}
.rbar .prog{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.rbar .prog i{display:block;height:100%;background:var(--ink);transition:width .25s}
.rbar .clock{font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink2);min-width:38px;text-align:right}
.rbanner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;
  border-left:3px solid var(--amber,#c98a00);background:#fffdf5}
.rsec{margin:26px 0 10px;padding-top:6px}
.rsec:first-child{margin-top:8px}
.rsec h3{font-size:16px;margin:0 0 3px}
.rsec .muted{font-size:12.5px;margin:0}
.qstem{font-size:17px;line-height:1.75;margin:6px 0 2px;letter-spacing:.2px}
.qpy{font-size:13px;color:var(--ink2);margin-bottom:6px}
.q .fb{margin-top:8px;font-size:13.5px;line-height:1.65}
.q .fb .lbl{font-weight:600}
.q .fb.ok .lbl{color:var(--green,#0a7d4f)}
.q .fb.no .lbl{color:var(--red,#c62828)}
.q .fb .why{margin-top:4px;color:var(--ink2)}
.okzh{color:var(--green,#0a7d4f)}
.opt.ok{border-color:var(--green,#0a7d4f);background:#f1fbf6}
.opt.no{border-color:var(--red,#c62828);background:#fdf2f2}
.opt.dim{opacity:1;color:var(--ink3);background:var(--bg2);border-color:var(--line2)}
.opt.locked{cursor:default}
@media (max-width:640px){.rbar{position:static}.qstem{font-size:16px}}

/* ══ DASHBOARD + CHUỖI HỌC (STREAK) ═════════════════════════════════════ */
.hero2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 14px}
@media (max-width:820px){.hero2{grid-template-columns:1fr}}
.scard{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(135deg,#fffdf7,#fff);border-color:#F0E7D4}
.snum{font-size:44px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.snum .sunit{font-size:14px;font-weight:500;letter-spacing:0;margin-left:6px;color:var(--ink2)}
.slbl{font-size:12.5px;color:var(--ink2);margin-top:6px}
.sbest{font-size:11.5px;color:var(--ink3);margin-top:3px}
.sweek{display:flex;gap:6px}
.sd{display:flex;flex-direction:column;align-items:center;gap:5px}
.sd i{width:20px;height:32px;border-radius:7px;background:#EFEDE6;display:block;
  border:1px solid #E5E2D8;transition:.2s}
.sd.on i{background:linear-gradient(180deg,#F6C86A,#E9A63B);border-color:#E0A03A;
  box-shadow:inset 0 -6px 0 rgba(255,255,255,.35)}
.sd span{font-size:9.5px;color:var(--ink3);letter-spacing:.02em}
.cta-card{display:flex;flex-direction:column;justify-content:center}
.cta-card h3{font-size:20px;margin:6px 0 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.plan{margin:0;padding-left:18px;font-size:13.5px;line-height:2;color:var(--ink2)}
.plan b{color:var(--ink)}
.wgrid{display:flex;flex-wrap:wrap;gap:8px}
.wchip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:#fff;cursor:pointer;font:inherit;transition:.15s}
.wchip:hover{border-color:var(--ink3);transform:translateY(-1px)}
.wchip .zh{font-size:16px;color:var(--ink)}
.wchip .sc{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.sb-streak{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);
  padding:6px 10px;border-radius:9px;background:#FBF6EA;border:1px solid #F0E7D4;margin-top:8px}
.sb-streak b{color:var(--ink)}

/* ══ TRANG QUẢN TRỊ ═════════════════════════════════════════════════════ */
.tbl.adm td{vertical-align:middle}
.tbl.adm .ua{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.btn.xs{font-size:11.5px;padding:4px 8px;border-radius:7px}
.btn.red.sm,.btn.red.xs{background:#fff;color:#B42318;border-color:#F2C9C4}
.btn.red.sm:hover,.btn.red.xs:hover{background:#FDF3F2}
.dot-on{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22A06B;
  box-shadow:0 0 0 3px #E6F6EE;margin-left:6px;vertical-align:middle}
.minlist{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.9}
.minlist li{padding:5px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.minlist li:last-child{border-bottom:0}
.minlist code{font-size:13px;background:#F6F5F1;padding:2px 7px;border-radius:6px;letter-spacing:.08em}
.minlist .btn.xs{margin-left:auto}
.lg-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--ink3);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase}
.lg-or::before,.lg-or::after{content:'';flex:1;height:1px;background:var(--line)}
.lgo{justify-content:center;gap:8px;margin-bottom:8px;font-weight:500}
.lg-note{font-size:11.5px;line-height:1.6;margin:6px 0 0}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN v2 — "sổ bài tập 汉语" · kế hoạch: giấy ấm + mực đen + 靛青 cho
   cấu trúc + 朱砂 CHỈ cho lỗi. Chữ Hán dùng bộ serif (kiểu sách giáo trình),
   chữ Latin dùng grotesque hệ thống. Không bóng đổ mềm, không eyebrow IN HOA.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#FBFAF6;            /* giấy */
  --card:var(--paper)EFB;
  --ink:#1B1C1A;           /* mực */
  --ink2:#55564F;
  --ink3:#8C8D85;
  --line:#E4E1D6;
  --line2:#EFEDE4;
  --red:#B23A2C;           /* 朱砂 — chỉ lỗi */
  --red-l:#FBF0EE;
  --green:#3F6B4F;         /* rêu */
  --green-l:#EFF5F0;
  --blue:#26456B;          /* 靛青 — cấu trúc, liên kết, nút chính */
  --blue-l:#EAF0F6;
  --amber:#8A6416;
  --amber-l:#FBF4E4;
  --purple:#4B3F6B;
  --purple-l:#F2EFF7;
  --f-zh:"Songti SC","Noto Serif CJK SC","Noto Serif SC","Source Han Serif SC","SimSun",Georgia,serif;
  --f-ui:"Be Vietnam Pro","Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --f-num:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sh:none;
  --sh2:0 1px 0 rgba(27,28,26,.05);
  --r:10px;
}
body{background:var(--bg);color:var(--ink);font:15px/1.62 var(--f-ui)}
.zh{font-family:var(--f-zh);letter-spacing:.01em}
a{color:var(--blue);text-underline-offset:3px}
a:hover{text-decoration:underline}

/* nhãn nhỏ: bỏ IN HOA + giãn chữ */
.kick,.brand .kick,.stat .k,.tbl th,.fb .lbl,.qn{
  text-transform:none;letter-spacing:.01em;font-weight:600;color:var(--ink3)
}
.qn{font-size:12px}

/* thẻ: viền mảnh, không bóng, không bo tròn lớn */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:none;padding:20px 22px}
.card + .card{margin-top:14px}
.lhead{padding:26px 0 16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.lhead h2{font-size:26px;line-height:1.25;margin:4px 0 4px;letter-spacing:-.01em}
.lhead .sub{color:var(--ink2);font-size:13.5px;margin:2px 0 0}
.lhead .kick{font-size:12px;color:var(--ink3)}

/* số liệu: bỏ khung, dùng đường kẻ dọc mảnh */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.stat{padding:14px 18px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .k{font-size:11.5px;color:var(--ink3);font-weight:500}
.stat .v{font-size:26px;font-weight:650;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.stat .ksub{font-size:11px;color:var(--ink3);margin-top:2px}

/* bảng */
.tbl{border-collapse:collapse;width:100%;font-size:13.5px}
.tbl th{font-size:11.5px;color:var(--ink3);font-weight:500;text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line2)}
.tbl tbody tr:hover{background:#FAF8F2}

/* nút */
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;
  padding:8px 14px;font-size:13.5px;font-weight:500;transition:background .12s,border-color .12s}
.btn:hover{background:#F6F3EA;border-color:#D6D2C4}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:hover{background:#1D3757;border-color:#1D3757}
.btn.red{background:var(--card);color:var(--red);border-color:#E3C3BD}
.btn.red:hover{background:var(--red-l)}
.btn.sm{padding:6px 11px;font-size:12.5px}

/* chip */
.chip{background:#F3F1E9;border:1px solid var(--line);color:var(--ink2);border-radius:999px;
  padding:2px 9px;font-size:11.5px;font-weight:500}
.chip.g{background:var(--green-l);border-color:#CBDED1;color:var(--green)}
.chip.b{background:var(--blue-l);border-color:#D3DEEA;color:var(--blue)}
.chip.r{background:var(--red-l);border-color:#E7C9C3;color:var(--red)}

/* ── THANH PHÁT: thu gọn thành "viên" nổi, không phủ ngang nội dung ────── */
.aubar{position:fixed;right:20px;bottom:20px;left:auto;width:min(520px,calc(100vw - 32px));
  z-index:80;display:flex;align-items:center;gap:9px;padding:9px 12px;
  background:rgba(255,254,251,.97);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 10px 30px -18px rgba(27,28,26,.45);backdrop-filter:blur(6px)}
.aubar .ab-pp{width:34px;height:34px;border-radius:50%;border:none;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:13px;flex:0 0 auto}
.aubar .ab-st{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:var(--ink2);font-size:10px;flex:0 0 auto}
.aubar .ab-meta{max-width:150px}
.aubar .ab-meta b{font-size:12.5px;font-weight:600}
.aubar .ab-meta span{font-size:10.5px;color:var(--ink3)}
.aubar .ab-sk{height:3px}
.aubar .ab-tm{font-size:11px;min-width:70px;color:var(--ink3);font-family:var(--f-num)}
.aubar select{border-radius:7px;font-size:11.5px;padding:4px 5px}
.aubar .ab-x{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:var(--ink2);font-size:12px;display:grid;place-items:center;flex:0 0 auto}
.aubar .ab-x:hover{background:var(--red-l);color:var(--red);border-color:#E7C9C3}
body.has-bar main{padding-bottom:96px}
@media (max-width:860px){
  .aubar{right:10px;bottom:10px;left:10px;width:auto;padding:8px 10px}
  .aubar .ab-meta{max-width:96px}
  .aubar .ab-tm{display:none}
  body.has-bar main{padding-bottom:86px}
}
/* Keep the floating chat launcher above the player; the chat panel owns the
   right-hand 430 px, so move the player into the free column while it is open. */
body.has-bar .aic-fab{bottom:92px}
@media (min-width:1080px){
  body.chat-on .aubar{left:auto;right:440px;width:min(520px,calc(100vw - 470px))}
}
@media (min-width:761px) and (max-width:1079px){
  body.chat-on .aubar{left:10px;right:440px;width:auto;gap:6px;padding:7px 8px}
  body.chat-on .aubar .ab-st,
  body.chat-on .aubar .ab-tm,
  body.chat-on .aubar select{display:none}
  body.chat-on .aubar .ab-meta{max-width:72px}
  body.chat-on .aubar .ab-sk{min-width:54px}
}
@media (max-width:760px){
  body.has-bar .aic-fab{bottom:calc(74px + env(safe-area-inset-bottom))}
  body.chat-on .aubar{display:none}
}

/* ── BÀI THI: giấy thi ────────────────────────────────────────────────── */
.exam-head{padding:30px 0 18px;border-bottom:2px solid var(--ink);margin-bottom:0}
.exam-kicker{margin:0 0 6px;font-size:12px;color:var(--ink3)}
.exam-head h1{font-size:28px;line-height:1.3;margin:0;letter-spacing:.01em}
.exam-sub{margin:4px 0 14px;color:var(--ink2);font-size:14px}
.exam-meta{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0}
.exam-meta > div{display:flex;align-items:baseline;gap:6px;padding:0 16px;border-left:1px solid var(--line)}
.exam-meta > div:first-child{padding-left:0;border-left:0}
.exam-meta dt{font-size:11.5px;color:var(--ink3)}
.exam-meta dd{margin:0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.exam-last{margin:12px 0 0;font-size:12.5px;color:var(--ink2)}

.exam-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:10px 0;margin:0 0 6px;background:var(--bg);border-bottom:1px solid var(--line)}
.exam-count{font-family:var(--f-num);font-size:12.5px;color:var(--ink2)}
.exam-count b{color:var(--ink);font-size:14px}
.exam-bar .prog{flex:1;height:3px;background:var(--line);border-radius:99px;overflow:hidden}
.exam-bar .prog i{display:block;height:100%;background:var(--blue);transition:width .25s}
.exam-bar .clock{font-family:var(--f-num);font-size:12.5px;color:var(--ink2)}
.exam-bar .rate{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink3)}
.exam-bar select{font:inherit;font-size:12px;padding:3px 5px;border:1px solid var(--line);
  border-radius:6px;background:var(--card);color:var(--ink)}

.paper{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:6px}
.paper-head{display:flex;align-items:center;gap:12px;padding:22px 0 6px}
.paper-no{width:30px;height:30px;border:1px solid var(--ink);border-radius:3px;display:grid;place-items:center;
  font-family:var(--f-zh);font-size:15px;flex:0 0 auto}
.paper-head h2{font-size:18px;margin:0;letter-spacing:0}
.paper-head p{margin:1px 0 0;font-size:12px;color:var(--ink3)}
.part-h{font-size:12.5px;font-weight:600;color:var(--ink2);margin:20px 0 6px;padding-top:14px;
  border-top:1px solid var(--line2)}

/* băng nghe */
.tape{display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  background:var(--blue-l);border:1px solid #D3DEEA;border-radius:var(--r);padding:14px 16px;margin:10px 0 4px}
.tape-text b{font-size:13.5px}
.tape-text p{margin:3px 0 0;font-size:12.5px;color:var(--ink2);max-width:52ch}
.tape-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tape-state{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}

/* câu hỏi: lưới [số câu] [nội dung], đường kẻ mảnh giữa các câu */
.q.q2{display:grid;grid-template-columns:38px minmax(0,1fr);gap:0;padding:16px 0;
  border-bottom:1px solid var(--line2)}
.q:last-child{border-bottom:0}
.qno{font-family:var(--f-num);font-size:12.5px;color:var(--ink3);padding-top:3px;
  border-right:1px solid var(--line2);margin-right:14px;padding-right:10px;text-align:right}
.qmain{min-width:0;max-width:68ch}
.qask{margin:0 0 8px;font-size:13px;color:var(--ink2)}
.qstem{font-size:21px;line-height:1.6;margin:2px 0 4px}
.qpy{font-size:12.5px;color:var(--dian);margin:0 0 10px;font-family:var(--f-ui)}
.passage{margin:0 0 10px;padding:12px 16px;border-left:2px solid var(--blue);background:#F7F6F0;
  font-size:15.5px;line-height:1.85;color:var(--ink)}
.qhint{margin:0 0 8px;font-size:12.5px;color:var(--ink3)}

/* lựa chọn: hàng phẳng, chữ cái trong ô vuông, không bóng */
.opts{display:grid;gap:6px;margin-top:6px}
.opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 12px;
  font-size:14.5px;color:var(--ink);transition:border-color .12s,background .12s}
.opt:hover{border-color:#CFCABA;background:#FAF8F1}
.opt .lb{width:22px;height:22px;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center;
  font-family:var(--f-num);font-size:11.5px;color:var(--ink3);flex:0 0 auto;background:#FBFAF5}
.opt .zh{font-size:16px}
.opt.ok{border-color:#BFD6C7;background:var(--green-l)}
.opt.ok .lb{border-color:#BFD6C7;color:var(--green);background:#fff}
.opt.no{border-color:#E3C3BD;background:var(--red-l)}
.opt.no .lb{border-color:#E3C3BD;color:var(--red);background:#fff}
.opt.dim{opacity:1;color:var(--ink3);background:var(--bg2);border-color:var(--line2)}
.opt.locked{cursor:default}
.opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* phản hồi */
.fb{margin-top:10px;padding:10px 12px;border-left:2px solid var(--line);font-size:13.5px;line-height:1.6}
.fb.ok{border-color:var(--green);background:var(--green-l)}
.fb.no{border-color:var(--red);background:var(--red-l)}
.fb .lbl{font-size:12px;font-weight:600;color:var(--green)}
.fb.no .lbl{color:var(--red)}
.fb .why,.fb .trans{margin-top:5px;color:var(--ink2);font-size:12.5px}
.fb .trans{font-family:var(--f-zh);font-size:14px;color:var(--ink)}
.okzh{color:var(--green)}
textarea.ta{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-family:var(--f-zh);font-size:16px;line-height:1.8;background:var(--card);resize:vertical}
textarea.ta:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.exam-foot{margin:22px 0 0;padding:16px 0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* ôn tập: thanh tiến độ + tab */
.rtabs{display:flex;gap:0;margin:18px 0 6px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rtab{font:inherit;font-size:13px;padding:9px 2px;margin-right:22px;border:0;background:none;
  color:var(--ink3);border-bottom:2px solid transparent;border-radius:0;cursor:pointer}
.rtab:hover{color:var(--ink)}
.rtab.on{background:transparent;color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.rbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;
  background:var(--bg);padding:10px 0;margin:0 0 8px;border-bottom:1px solid var(--line)}
.rbar .prog{flex:1;height:3px;background:var(--line);border-radius:99px;overflow:hidden}
.rbar .prog i{display:block;height:100%;background:var(--ink);transition:width .25s}
.rbar .clock{font-family:var(--f-num);font-size:12px;color:var(--ink2)}
.rsec{margin:26px 0 6px;padding-top:10px;border-top:1px solid var(--line)}
.rsec h3{font-size:15px;margin:0 0 2px}
.rsec .muted{font-size:12.5px;margin:0}
.rbanner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;
  border:1px solid #E2D6B6;background:var(--amber-l);border-radius:8px;padding:10px 14px;font-size:13px}

@media (max-width:640px){
  .wrap{padding:0 16px}
  .q.q2{grid-template-columns:26px minmax(0,1fr)}
  .qno{margin-right:10px;padding-right:6px}
  .qstem{font-size:18px}
  .exam-head h1{font-size:22px}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
}

/* ══════════════════════════════════════════════════════════════════════════
   PHÂN TÍCH + 跟读  (v2.1)
   Cùng hệ token với DESIGN v2: giấy ấm, mực, 靛青 cho cấu trúc,
   朱砂 CHỈ dùng cho lỗi, rêu CHỈ dùng cho đúng.
   ══════════════════════════════════════════════════════════════════════════ */
.tbl.ana{width:100%;border-collapse:collapse;font-size:14px}
.tbl.ana th{text-align:left;font-weight:600;color:var(--ink2);font-size:12.5px;
  padding:0 10px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:bottom}
.tbl.ana th:nth-child(2),.tbl.ana th:nth-child(3){width:1%}
.tbl.ana th:nth-child(4){width:120px}
.tbl.ana td{padding:11px 0;border-bottom:1px solid var(--line2)}
.tbl.ana tr:last-child td{border-bottom:0}
.tbl.ana a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.tbl.ana a:hover{border-bottom-color:var(--blue);color:var(--blue)}
.tbl.ana .num{font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap;width:1%}
.mini{height:6px;width:96px;background:var(--line2);border-radius:99px;overflow:hidden}
.mini i{display:block;height:100%;background:var(--blue);border-radius:99px;transition:width .4s ease}

/* một dòng lỗi: số thứ tự | nội dung */
.wrow{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:14px 0;
  border-bottom:1px solid var(--line2)}
.wrow:last-child{border-bottom:0;padding-bottom:2px}
.wno{font-size:12px;color:var(--ink2);text-align:right;line-height:1.6;
  font-variant-numeric:tabular-nums}
.wstem{margin:0;font-size:15.5px;line-height:1.75}
.wmeta{margin:5px 0 0;font-size:13px;color:var(--ink2);display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}
.wwhy{margin:6px 0 0;font-size:13px;line-height:1.65}
b.wrong{color:var(--red);font-weight:600}
b.right{color:var(--green);font-weight:600}

.ana-load{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--ink2);
  padding:12px 0}
.ana-out{margin-top:12px;padding:14px 16px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;font-size:14px;line-height:1.75}
.ana-out h2{font-size:14px;margin:14px 0 6px;letter-spacing:0}
.ana-out h2:first-child{margin-top:0}

/* 跟读 — mỗi câu một hàng, số ở cột trái */
.splist{list-style:none;margin:0;padding:0;counter-reset:none}
.sp{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:16px 0;
  border-bottom:1px solid var(--line2)}
.sp:last-child{border-bottom:0}
.sp-no{font-size:12.5px;color:var(--ink2);text-align:right;line-height:1.9;
  font-variant-numeric:tabular-nums}
.sp-zh{margin:0;font-size:17px;line-height:1.85}
.sp-act{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.sp-stat{font-size:12.5px}
.sp-fb{margin-top:10px}
.sp-fb:empty{display:none}
.sp-fb .fb{font-size:13px}
.rec-on{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}

@media(max-width:640px){
  .wrow,.sp{grid-template-columns:22px 1fr;gap:8px}
  .mini{width:64px}
}

/* ══════════════════════════════════════════════════════════════════════════
   NGỮ PHÁP — ba khối tách bạch: khái niệm · ví dụ · luyện tập (v2.2)
   ══════════════════════════════════════════════════════════════════════════ */
.gram-note{margin-bottom:18px}
.gp{border:1px solid var(--line);border-radius:12px;background:var(--card);
  margin:0 0 20px;overflow:hidden}
.gp-head{display:flex;align-items:center;gap:12px;padding:15px 20px;
  border-bottom:1px solid var(--line);background:var(--paper2)}
.gp-no{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;
  background:var(--blue);color:var(--paper2);font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;flex:none}
.gp-head h3{margin:0;font-size:21px;line-height:1.3}
.gp-tag{margin-left:auto;font-size:11.5px;color:var(--blue);background:var(--blue-l);
  border-radius:99px;padding:3px 10px;white-space:nowrap;flex:none}
.gp-body{padding:6px 20px 18px}
.blk{padding:14px 0 4px}
.blk + .blk{border-top:1px dashed var(--line)}
.blk h4{margin:0 0 8px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ink2);display:flex;align-items:center;gap:7px}
.blk h4 .dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot.d1{background:var(--blue)}
.dot.d2{background:var(--ink3)}
.dot.d3{background:var(--amber)}
.blk-c{background:var(--blue-l);border-left:3px solid var(--blue);
  border-radius:0 12px 12px 0;padding:14px 16px;margin:14px 0 4px}
.defl{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.defl li{position:relative;padding-left:15px;font-size:14.5px;line-height:1.8}
.defl li:before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--blue);opacity:.55}
.blk-e{background:var(--paper2);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin:14px 0 4px}
.blk-c h4{color:var(--blue)}
.blk-c p{margin:0;font-size:14.5px;line-height:1.75}
.exl{margin:0;padding-left:0;list-style:none;counter-reset:ex}
.exl li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;
  padding:9px 0;border-bottom:1px solid var(--line2)}
.exl li:last-child{border-bottom:0}
.exl .zh{font-size:15.5px;line-height:1.8}
.drills{display:grid;gap:6px}
.dlg{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:start;padding:4px 0}
.dlg .who{font-size:11.5px;font-weight:700;color:var(--blue);border:1px solid var(--blue-l);
  background:var(--blue-l);border-radius:6px;text-align:center;line-height:18px;height:20px}
.drill-line{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;padding:4px 0}
.dlg .zh,.drill-line .zh{font-size:15px;line-height:1.7}
.blk-p{background:var(--amber-l);border:1px dashed var(--amber);
  border-radius:12px;padding:14px 16px;margin:14px 0 0}
.blk-p h4{color:#7A5A17}
.blk-p .dot.d3{background:var(--amber)}

/* 词语辨析 */
.bx{margin-top:6px}
.bx-head{display:flex;align-items:baseline;gap:12px;margin:4px 0 14px}
.bx-head .zh{font-size:22px}
.bx-vs{font-size:12px;color:var(--ink3)}
.bx-tbl{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bx-row{display:grid;grid-template-columns:130px 1fr 1fr;gap:0;
  border-bottom:1px solid var(--line2)}
.bx-row.one{grid-template-columns:130px 1fr}
.bx-row:last-child{border-bottom:0}
.bx-k{font-size:12.5px;color:var(--ink2);padding:11px 12px;background:var(--bg);
  border-right:1px solid var(--line2)}
.bx-v{padding:11px 14px;font-size:14px;line-height:1.7;border-right:1px solid var(--line2)}
.bx-v:last-child{border-right:0}
.bx-drill{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.bx-drill h4{margin:0 0 8px;font-size:12.5px;color:var(--ink2);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.bx-drill ol{margin:0 0 12px;padding-left:0;list-style:none;display:grid;gap:8px}
.bx-drill li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:15px;line-height:1.75}
.bx-drill .dq{font-size:12px;color:var(--ink3);text-align:right;line-height:1.9}
.bx-drill u{text-decoration:none;border-bottom:1.5px solid var(--blue);color:var(--blue)}

/* ══════════════════════════════════════════════════════════════════════════
   CỬA SỔ CHAT AI 学伴  +  TỪ ĐIỂN KHI TÔ CHỮ (v2.2)
   ══════════════════════════════════════════════════════════════════════════ */
.ch{position:fixed;z-index:60;inset:auto 0 0 auto}
.ch-fab{position:fixed;right:18px;bottom:22px;display:flex;align-items:center;gap:8px;
  border:1px solid var(--blue);background:var(--blue);color:#fff;border-radius:99px;
  padding:10px 16px 10px 12px;font:inherit;font-size:13.5px;cursor:pointer;
  box-shadow:0 6px 20px rgba(38,69,107,.22)}
.ch-fab-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.18);font-family:var(--f-zh);font-size:13px}
.ch.on .ch-fab{display:none}
.ch-panel{position:fixed;top:0;right:0;height:100dvh;width:min(430px,100vw);
  background:var(--bg);border-left:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .26s cubic-bezier(.22,.61,.36,1);
  box-shadow:-10px 0 40px rgba(20,20,15,.08)}
.ch.on .ch-panel{transform:none}
.ch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line);background:var(--card)}
.ch-head b{font-family:var(--f-zh);font-size:17px;letter-spacing:.02em}
.ch-sub{display:block;font-size:11.5px;color:var(--ink3);margin-top:1px}
.ch-hbtn{display:flex;gap:6px;align-items:center}
.ch-x{border:1px solid var(--line);background:var(--card);border-radius:8px;width:30px;height:30px;
  cursor:pointer;font:inherit;color:var(--ink2)}
.ch-x:hover{background:var(--line2)}
.ch-meta{display:flex;align-items:center;gap:7px;padding:7px 16px;font-size:11.5px;
  color:var(--ink3);border-bottom:1px solid var(--line2)}
.ch-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.ch-meter{display:inline-block;width:64px;height:4px;border-radius:99px;background:var(--line2);overflow:hidden}
.ch-meter i{display:block;height:100%;background:var(--blue)}
.ch-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;
  scroll-behavior:smooth}
.cm{max-width:92%;font-size:14px;line-height:1.72;border-radius:12px;padding:11px 14px}
.cm.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.cm.ai{align-self:flex-start;background:var(--card);border:1px solid var(--line);
  border-bottom-left-radius:4px}
.cm.ai p{margin:0 0 8px}
.cm.ai p:last-child{margin:0}
.cm.ai ul,.cm.ai ol{margin:6px 0;padding-left:20px}
.cm.ai code{background:var(--line2);padding:1px 5px;border-radius:4px;font-size:.92em}
.cm.thinking{display:flex;gap:8px;align-items:center;color:var(--ink2)}
.ch-quick{display:flex;gap:6px;padding:8px 14px;overflow-x:auto;border-top:1px solid var(--line2)}
.ch-q{white-space:nowrap;font:inherit;font-size:12px;color:var(--ink2);background:var(--card);
  border:1px solid var(--line);border-radius:99px;padding:5px 10px;cursor:pointer}
.ch-q:hover{border-color:var(--blue);color:var(--blue)}
.ch-compose{display:flex;gap:8px;padding:10px 14px 14px;border-top:1px solid var(--line);background:var(--card)}
.ch-compose textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;font:inherit;font-size:14px;line-height:1.5;max-height:160px;background:var(--bg)}
.ch-compose textarea:focus{outline:2px solid var(--blue-l);border-color:var(--blue)}
.ch-send{align-self:flex-end;height:38px}
@media(max-width:640px){.ch-panel{width:100vw}.ch-fab{bottom:16px;right:14px}}

/* từ điển khi tô chữ */
.dsel{position:fixed;z-index:70;width:34px;height:34px;border-radius:50%;border:1px solid var(--blue);
  background:var(--card);color:var(--blue);font-size:15px;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(20,20,15,.16);animation:dpIn .16s ease}
.dsel:hover{background:var(--blue-l)}
.dpop{position:fixed;z-index:71;width:316px;max-width:calc(100vw - 24px);background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(20,20,15,.18);
  padding:14px 16px;animation:dpIn .18s ease}
@keyframes dpIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.dp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dp-head b{font-size:22px;line-height:1.3}
.dp-py{margin-left:8px;font-size:12.5px;color:var(--blue)}
.dp-x{border:0;background:transparent;color:var(--ink3);cursor:pointer;font:inherit}
.dp-pos{margin:2px 0 6px;font-size:11.5px;color:var(--ink3)}
.dp-vi{margin:0;font-size:14px;line-height:1.7}
.dp-ex{margin:10px 0 0;padding-left:0;list-style:none;display:grid;gap:7px;border-top:1px solid var(--line2);padding-top:10px}
.dp-ex .zh{display:block;font-size:14px}
.dp-ex .dvi{display:block;font-size:12px;color:var(--ink3)}
.dp-act{display:flex;gap:6px;align-items:center;margin-top:12px}
.dp-src{margin-left:auto;font-size:11px;color:var(--ink3)}
.dp-load{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink2)}
.defl{margin:0;padding-left:18px}
.defl li{font-size:14.5px;line-height:1.75;margin:2px 0}
.defl li::marker{color:var(--blue)}

/* chat mở thì đẩy nội dung sang trái, không che bài học */
@media (min-width:1080px){
  #app{transition:padding-right .26s cubic-bezier(.22,.61,.36,1)}
  body.chat-on #app{padding-right:430px}
}

/* chú giải màu 4 khối ngữ pháp */
.gpleg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12px;color:var(--ink3)}
.gpleg .dot{width:9px;height:9px;border-radius:99px;display:inline-block;margin-right:4px;vertical-align:-1px}
.gpleg .d1{background:var(--blue-l2);box-shadow:inset 0 0 0 2px var(--dian)}
.gpleg .d2{background:var(--amber-l2);box-shadow:inset 0 0 0 2px var(--jin)}
.gpleg .d3{background:var(--paper2);box-shadow:inset 0 0 0 2px var(--line)}
.gpleg .d4{background:transparent;box-shadow:inset 0 0 0 2px var(--ink3)}

/* ══════════════════════════════════════════════════════════════════════
   ĐIỆN THOẠI (≤760 px) — thanh bên thu thành đầu trang gọn,
   tab cuộn ngang, nút chat nổi trên thanh đáy
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* thanh bên thành đầu trang: không để lưới kéo cao nó cho đủ 100vh */
  #app{align-content:start}
  aside{align-self:start;height:auto}
}
@media (max-width:760px){
  /* điện thoại vẫn phải với tới được: danh sách bài (dải cuộn) + 3 nút cài đặt */
  nav[aria-label="Điều hướng chính"]{display:flex !important;overflow-x:auto;padding:6px 12px 2px;
    margin-top:6px;scrollbar-width:none}
  nav[aria-label="Điều hướng chính"]::-webkit-scrollbar{display:none}
  .lesson-nav .grp,.lesson-nav .grp-btn{display:none}
  .lesson-nav .lesson-list,.lesson-nav .lesson-list[hidden]{display:contents !important}
  .lesson-nav .lesson-list>ul{display:contents}
  .lesson-nav li{flex:0 0 auto}
  .lesson-nav a{padding:5px 9px;font-size:12px}
  .side-foot{display:flex !important;gap:6px;padding:6px 12px 2px;margin:0;border-top:0;
    overflow-x:auto;scrollbar-width:none}
  .side-foot::-webkit-scrollbar{display:none}
  .side-foot button{width:auto;flex:0 0 auto;font-size:11px;padding:5px 9px;white-space:nowrap}
  aside{padding:10px 0 6px}
  .brand{padding:0 14px 8px;display:flex;align-items:center;gap:10px;border-bottom:0}
  .brand .kick{display:none}
  .brand h1{font-size:17px;margin:0}
  .brand p{font-size:10.5px;margin:0}
  .brand>div{min-width:0}
  .userbox{margin:6px 12px 0;padding:7px 10px;font-size:11.5px;gap:8px}
  .userbox .av{width:24px;height:24px}
  .userbox .st{font-size:10px}
  .lesson-nav{padding:8px 12px 4px;margin-top:8px}
  .lesson-nav a{padding:6px 10px;font-size:12.5px}
  .side-foot{padding:6px 12px 0}
  .side-foot button{font-size:12px;padding:6px 8px}
  .subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .subnav::-webkit-scrollbar{display:none}
  .subnav button{flex:0 0 auto}
  .crumbs{font-size:11.5px}
  main{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .aic-fab{bottom:calc(20px + env(safe-area-inset-bottom))}
  .aic-panel{height:100dvh}
}
@media (max-width:620px){
  .gpleg{font-size:11px;gap:4px 9px}
  .gpleg .dot{width:8px;height:8px}
  .wrap{padding:0 14px}
  .ph h1,.ph-t{font-size:23px;line-height:1.28}
  .pcard{padding:14px 14px}
  .pstat .v{font-size:20px}
}

/* ── 4.9 · điện thoại: chữ & nút không bị cắt ─────────────────────────── */
@media (max-width:760px){
  /* lưới 1 cột nhưng KHÔNG để nội dung rộng đẩy cột (grid blowout):
     trước đây danh sách 18 bài làm aside rộng 2141px, đẩy main ra ngoài màn hình */
  #app{grid-template-columns:minmax(0,1fr) !important;display:block}
  aside{width:auto;max-width:100vw;min-width:0;overflow:hidden;position:static;height:auto}
  aside .lesson-nav,aside .lesson-nav .lesson-list,aside .lesson-nav .lesson-list>ul{min-width:0;max-width:100%}

  /* hàng tab bài: xuống 2 dòng cho đủ 7 mục, không cắt chữ */
  .subnav{flex-wrap:wrap !important;overflow:visible !important;row-gap:2px;
    padding-left:10px;padding-right:10px}
  .subnav>*{flex:0 0 auto}
  .subnav button,.subnav .subnav-x{font-size:12.5px;padding:7px 8px}

  /* danh sách bài: xuống dòng, không tràn, không tự cuộn */
  .lesson-nav .lesson-list,.lesson-nav .lesson-list[hidden]{display:block !important}
  .lesson-nav .lesson-list>ul{display:flex !important;flex-wrap:wrap !important;overflow:visible !important;
    gap:6px;scroll-behavior:auto;padding:0 10px 4px}
  .lesson-nav .lesson-list>ul>li{flex:0 0 auto}
  .lesson-nav .lesson-list .pill,.lesson-nav .lesson-list a{padding:5px 9px;font-size:12px}

  /* chân thanh bên: vẫn mở được Cài đặt trên điện thoại */
  .side-foot{display:flex !important;flex-wrap:wrap;gap:6px;padding:0 10px 10px}
  .side-foot .btn,.side-foot button{font-size:11px;padding:6px 7px;flex:1 1 40%;white-space:nowrap}

  /* hàng chứa nút “Đã học xong…” không để nút tràn ra ngoài */
  .card .row{flex-wrap:wrap}
  .card .row .btn{margin-left:0 !important;max-width:100%}
  /* chú giải màu: chảy như chữ, không chia cột */
  .gpleg{display:block !important;line-height:2;width:100%;margin-top:4px}
  .gpleg .dot{display:inline-block;margin:0 5px 0 10px;vertical-align:middle}

  /* chừa chỗ cho nút chat nổi, không đè lên nút cuối trang */
  #main{padding-bottom:26px}
  .scard .stop{flex-wrap:wrap}
  .scard .splay{width:100%}
}

/* ── 4.9 · điện thoại: thanh bên thu gọn, bấm ☰ mới mở ─────────────────── */
.m-menu{display:none}
@media (max-width:760px){
  .brand{justify-content:space-between;gap:8px}
  .brand-a{flex:1 1 auto;min-width:0}
  .m-menu{display:inline-flex;align-items:center;justify-content:center;width:38px;height:34px;
    border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink2);
    font-size:16px;line-height:1;margin-right:10px;cursor:pointer}
  .m-menu:focus-visible{outline:2px solid var(--jusha);outline-offset:2px}
  /* mặc định giấu mục lục; mở bằng ☰ */
  aside nav[aria-label="Điều hướng chính"],.side-foot{display:none !important}
  body.mopen aside nav[aria-label="Điều hướng chính"]{display:flex !important}
  body.mopen .side-foot{display:flex !important}
  body.mopen aside nav{max-height:60vh;overflow-y:auto;overscroll-behavior:contain}
  body.mopen #lessonNav{display:block !important;flex-direction:column !important;padding:0 12px}
  body.mopen #lessonNav>li{display:block;width:auto}
  body.mopen #lessonNav>li>a{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:9px}
  body.mopen #lessonNav .grp{margin:9px 0 2px;font-size:11.5px;letter-spacing:.04em;color:var(--ink3)}
  body.mopen #lessonNav .lesson-list ul{display:grid !important;grid-template-columns:1fr 1fr;gap:6px}
  body.mopen #lessonNav .lesson-list ul a{padding:7px 8px;font-size:12.5px;border:1px solid var(--line);
    border-radius:9px;background:var(--paper)}
  body.mopen #lessonNav .lesson-list ul a .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gpleg .dot:first-of-type{margin-left:0}
}

/* Thẻ tra từ (tooltip) — đọc được, bấm ghim được, có nút đóng rõ ràng */
#tip{pointer-events:none;min-width:180px}
#tip.on{pointer-events:auto}
#tip.pin{box-shadow:0 0 0 2px rgba(155,70,54,.55),0 12px 32px -8px rgba(0,0,0,.4)}
#tip .tip-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#tip .tip-x{background:transparent;border:0;color:#F6EFE0;font-size:15px;line-height:1;
  cursor:pointer;padding:0;margin:-12px -12px 0 0;border-radius:8px;
  width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center}
#tip .tip-x:hover{background:rgba(255,255,255,.14)}
#tip .tip-x:focus-visible{outline:2px solid #F6EFE0;outline-offset:2px}
#tip .tip-hint{margin-top:6px;font-size:10.5px;color:#C9C3B4}