/* ══════════════════════════════════════════════════════════════════════════
   pages.css — giao diện các trang cấp ứng dụng + điều hướng mới (v4.8)

   Cùng hệ token với theme.css (giấy ấm, 朱砂/靛青/苔绿/金). Nguyên tắc:
   · một cột nội dung 980 px, tiêu đề mục bằng đường kẻ mảnh thay vì thẻ lồng thẻ
   · bảng cho danh sách dài, thẻ chỉ cho khối cần tách biệt
   · mọi nút ≥ 34 px chiều cao để bấm trên điện thoại
   ══════════════════════════════════════════════════════════════════════════ */

/* Modal chung: giữ cuộn trong hộp thoại thay vì cuộn nền phía sau. */
#mask .modal{overscroll-behavior:contain}

/* ── khung trang ─────────────────────────────────────────────────────────── */
.pwrap{max-width:980px;padding-bottom:40px}
.ph{padding:26px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.ph-k{font-size:12.5px;color:var(--jusha);margin:0 0 5px;font-weight:600}
.ph h2{font-size:28px;line-height:1.25;margin:0 0 6px;letter-spacing:-.01em;text-wrap:balance}
.ph-s{margin:0;color:var(--ink2);font-size:14.5px;max-width:70ch}
.pgrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px}
.pgrid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 18px}
.pcard-h select.mini{font:inherit;font-size:12.5px;padding:5px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--paper2);color:var(--ink2);max-width:190px}
.pstat{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.pstat .pk{font-size:11px;color:var(--ink3);font-weight:600;letter-spacing:.02em}
.pstat .pv{font-size:24px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pstat .pv small{font-size:11.5px;color:var(--ink3);font-weight:600;letter-spacing:0}
.pstat .ps{font-size:11.5px;color:var(--ink3);margin-top:2px}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:0 0 16px}
.pcard.small{padding:14px 16px}
.pcard-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.pcard-h h3{margin:0;font-size:16.5px}
.pmuted{color:var(--ink3);font-size:12.5px}
.pcard-h .pmuted{margin-left:auto;text-align:right}
.pcard-h select{margin-left:auto}
.plead{margin:0 0 12px;color:var(--ink2);font-size:14px}

/* ── điều hướng: nhóm, nút thu gọn, thanh đáy ─────────────────────────────── */
#lessonNav .gi{width:20px;display:grid;place-items:center;color:var(--ink3);flex:none}
#lessonNav a.on .gi{color:var(--ink)}
#lessonNav .grp-btn button{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;
  padding:12px 20px 6px;font:inherit;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);font-weight:700;cursor:pointer}
#lessonNav .grp-btn .cnt2{margin-left:auto;font-size:10.5px;color:var(--ink3);letter-spacing:0}
#lessonNav .chev{width:6px;height:6px;border-right:1.4px solid var(--ink3);border-bottom:1.4px solid var(--ink3);
  transform:rotate(45deg);margin-left:4px;transition:transform .16s}
#lessonNav .chev.up{transform:rotate(-135deg)}
#lessonNav .lesson-list{padding:0;margin:0}
#lessonNav .lesson-list ul{list-style:none;margin:0;padding:0}
#lessonNav .lv-cnt{margin-left:auto;background:var(--bg2);color:var(--ink2);border-radius:99px;
  font-size:10.5px;padding:1px 6px;font-variant-numeric:tabular-nums}
#lessonNav a{display:flex;align-items:center;gap:9px}
#lessonNav a .gem{display:none}

@media (max-width:760px){
  aside{padding-bottom:8px}
  nav[aria-label="Điều hướng chính"],.side-foot,#sbStreak{display:none}
  main{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .has-bar main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ── breadcrumb + phân trang bài ─────────────────────────────────────────── */
.crumbs{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink3);padding:18px 0 6px}
.crumbs a{color:var(--ink3);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs i{font-style:normal;opacity:.5}
.crumbs span{color:var(--ink2)}
.lpager{display:flex;justify-content:space-between;margin:26px 0 8px;padding-top:14px;border-top:1px solid var(--line2)}
.lpg{font-size:13.5px;color:var(--ink2);text-decoration:none;padding:6px 10px;border-radius:8px}
.lpg:hover{background:var(--paper2);color:var(--ink)}

/* ── tab bài học gọn: 6 tab + link phụ ───────────────────────────────────── */
.subnav{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line);
  margin:0 0 20px;overflow-x:auto;scrollbar-width:none;padding-bottom:0}
.subnav::-webkit-scrollbar{display:none}
.subnav button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;
  font:inherit;font-size:13.5px;color:var(--ink2);cursor:pointer;white-space:nowrap;border-radius:0}
.subnav button:hover{color:var(--ink)}
.subnav button.on{color:var(--ink);border-bottom-color:var(--jusha);font-weight:600}
.subnav .cnt{margin-left:5px;font-size:10.5px;color:var(--ink3);background:var(--bg2);border-radius:99px;padding:1px 5px}
.subnav-x{margin-left:auto;font-size:12px;color:var(--ink3);padding:0 4px 0 12px;white-space:nowrap}
.subnav-x:hover{color:var(--ink)}

/* ── tổng quan bài: các bước ─────────────────────────────────────────────── */
.obanner{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-left:3px solid var(--dian);margin:0 0 16px}
.obanner.done{border-left-color:var(--tai)}
.ostep{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.ostep-h{margin-bottom:8px}
.ostep-next{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;
  text-decoration:none;background:var(--red-l);border:1px solid var(--red-l2);border-radius:12px;
  padding:12px 14px;margin-bottom:14px}
.ostep-next .on-t{font-weight:700;color:var(--ink);font-size:15px}
.ostep-next .on-d{grid-column:1;color:var(--ink2);font-size:12.5px}
.ostep-next .on-go{grid-row:1/3;grid-column:2;color:var(--jusha);font-weight:600;font-size:13.5px}
.olist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.olist a{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;
  padding:9px 4px;text-decoration:none;color:var(--ink);border-radius:8px}
.olist a:hover{background:var(--paper2)}
.olist .on{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:var(--bg2);color:var(--ink3);font-size:11px;font-weight:700}
.olist li.done .on{background:var(--green-l);color:var(--tai)}
.olist .ot{font-size:14px}
.olist .od{font-size:12px;color:var(--ink3)}
.olist li.done .ot{color:var(--ink2)}

/* ── ôn nhanh ────────────────────────────────────────────────────────────── */
.qhead{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3);margin-bottom:10px}
.qzh{font-size:30px;letter-spacing:.06em;margin:4px 0 14px}
.qzh .btn{margin-left:8px}
.qopts{display:grid;gap:7px}
.qopt{display:flex;align-items:center;gap:10px;text-align:left;background:var(--paper2);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;font-size:14px;
  color:var(--ink);cursor:pointer;min-height:44px}
.qopt:hover{border-color:var(--line3)}
.qopt .lb{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;
  background:var(--bg2);font-size:11px;font-weight:700;color:var(--ink2);flex:none}
.qopt.ok{background:var(--green-l);border-color:var(--green-l2)}
.qopt.no{background:var(--red-l);border-color:var(--red-l2)}
.qopt.dim{opacity:1;color:var(--ink3);background:var(--bg2)}
.qopt.sel{border-color:var(--dian);background:var(--blue-l)}
.qfb{margin-top:12px;font-size:13.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qfb.ok{color:var(--green)}
.qfb.no{color:var(--jusha)}
.qdone{text-align:left}
.qdone b{font-size:17px}
.qdone p{margin:6px 0 12px;color:var(--ink2)}

/* ── thi thử ─────────────────────────────────────────────────────────────── */
.cfg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cfg label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink3)}
.cfg select{font:inherit;font-size:14px;padding:9px 10px;border-radius:9px;border:1px solid var(--line);
  background:var(--paper2);color:var(--ink)}
.mockbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mockbar .prog{flex:1;height:6px;background:var(--bg2);border-radius:99px;overflow:hidden}
.mockbar .prog i{display:block;height:100%;background:var(--dian);border-radius:99px;transition:width .2s}
.mockbar .clock{font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;color:var(--ink2)}
.mockbar .clock.urgent{color:var(--jusha)}
.mockq{font-size:19px;line-height:1.75;margin:6px 0 16px}
.mockq .blank{color:var(--jusha);letter-spacing:.02em}
.mocknav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.mockres{display:flex;align-items:center;gap:22px}
.mockres .big{font-size:56px;font-weight:700;line-height:1;color:var(--jusha);font-variant-numeric:tabular-nums}
.mockres .big small{font-size:20px;color:var(--ink3)}
.wronglist{display:grid;gap:12px}
.wrongrow{border-left:2px solid var(--red-l2);padding:2px 0 2px 12px}
.wrongrow .zh{font-size:15px;margin-bottom:4px}
.wrongrow .no{color:var(--jusha)}
.wrongrow .ok{color:var(--green)}
.wrongrow .why{font-size:12.5px;color:var(--ink2);margin:3px 0 6px}

/* ── nói & chấm điểm ─────────────────────────────────────────────────────── */
.splist{display:grid;gap:6px;max-height:420px;overflow:auto}
.spitem{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;
  background:var(--paper2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.spitem:hover{border-color:var(--line3)}
.spitem.on{border-color:var(--jusha);background:var(--red-l)}
.spitem .zh{font-size:15px}
.spTarget{font-size:22px;line-height:1.7;min-height:56px;padding:8px 0;border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);margin:6px 0 8px}
.recrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.recrow .btn{white-space:nowrap}
.recrow .pmuted{flex:1 1 140px;min-width:0}
.recrow .rec.on{background:var(--jusha)}
.scard{margin-top:14px}
.stop{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.sbig{font-size:52px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.sbig small{font-size:16px;color:var(--ink3);font-weight:600}
.sbig.ok{color:var(--green)}
.sbig.no{color:var(--jusha)}
.splay{margin-top:8px;height:34px;max-width:260px}
.sgauge{display:grid;gap:7px;margin:10px 0 16px}
.pm{display:grid;grid-template-columns:96px 1fr 96px;gap:10px;align-items:center}
.pml{font-size:12.5px;color:var(--ink2)}
.pmb{height:10px;background:#E7E1D2;border-radius:99px;overflow:hidden;box-shadow:inset 0 0 0 1px #D8D2C2}
.pmb i{display:block;height:100%;background:var(--dian);border-radius:99px}
.pm:nth-child(2) .pmb i{background:var(--jin)}
.pm:nth-child(3) .pmb i{background:var(--tai)}
.pm:nth-child(4) .pmb i{background:var(--jusha)}
.pm:nth-child(5) .pmb i{background:var(--purple)}
.pmv{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.pmv span{color:var(--ink3);margin-left:5px;font-size:11px}
.cwrap{margin:8px 0 14px}
.contour{width:100%;height:92px;background:var(--paper2);border:1px solid var(--line);border-radius:10px}
.contour .ref{fill:none;stroke:var(--dian);stroke-width:1.6;stroke-dasharray:4 3;opacity:.85}
.contour .usr{fill:none;stroke:var(--jusha);stroke-width:2.2}
.clegend{display:flex;gap:16px;font-size:11.5px;color:var(--ink3);margin-top:5px}
.clegend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.clegend .l-ref{background:var(--dian)}
.clegend .l-usr{background:var(--jusha)}
.sylrow{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.syl{display:flex;flex-direction:column;align-items:center;min-width:38px;padding:6px 7px;
  border-radius:8px;background:var(--paper2);border:1px solid var(--line);font-size:17px}
.syl i{font-style:normal;font-size:10px;color:var(--ink3);margin-top:2px}
.syl.ok{background:var(--green-l);border-color:var(--green-l2)}
.syl.sub{background:var(--red-l);border-color:var(--red-l2)}
.syl.del{background:var(--amber-l);border-color:var(--amber-l2);text-decoration:line-through;opacity:.75}
.syl.ins{background:var(--blue-l);border-color:var(--blue-l2)}
.sayraw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;margin:10px 0}
.tips{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}
.tips li{background:var(--paper2);border-left:2px solid var(--jin);border-radius:0 8px 8px 0;padding:9px 12px;font-size:13.5px}
.tips li b{display:block;margin-bottom:2px}
.tips li span{color:var(--ink2)}
.hchart{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:8px}
.hbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.hbar i{width:100%;background:var(--dian);border-radius:5px 5px 2px 2px;min-height:5px;opacity:.85}
.hbar span{font-size:10px;color:var(--ink3);margin-top:4px;font-variant-numeric:tabular-nums}
.pload{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2);padding:14px 0}
.pnote{font-size:12px;color:var(--ink2);background:#F4F0E5;border-left:3px solid var(--line3);border-radius:6px;padding:7px 10px;margin:6px 0}
.pnote.warn{background:var(--amber-l);color:#6B4E14}

/* ── tiến độ ─────────────────────────────────────────────────────────────── */
.wchart{display:flex;align-items:flex-end;gap:10px;height:150px}
.wcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.wbar{width:100%;display:flex;align-items:flex-end;justify-content:center;height:100%}
.wbar i{width:70%;max-width:38px;background:linear-gradient(180deg,var(--jusha),#B9715E);border-radius:6px 6px 3px 3px;min-height:4px}
.wcol span{font-size:10.5px;color:var(--ink2);margin-top:4px;font-variant-numeric:tabular-nums;min-height:14px}
.wcol em{font-style:normal;font-size:10px;color:var(--ink3)}
.ptable{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.pthead,.ptrow{display:grid;grid-template-columns:44px 1fr 110px 74px;gap:10px;align-items:center;padding:9px 12px}
.pthead{background:var(--bg);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.ptrow{border-top:1px solid var(--line2);text-decoration:none;color:var(--ink);font-size:14px}
.ptrow:hover{background:var(--paper2)}
.ptrow .pn{font-variant-numeric:tabular-nums;color:var(--ink3)}
.ptrow em{display:block;font-style:normal;font-size:11.5px;color:var(--ink3)}
.pbar{height:6px;background:var(--bg2);border-radius:99px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--tai);border-radius:99px}
.ptag{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:99px;background:var(--bg2);color:var(--ink2)}
.ptag.ok{background:var(--green-l);color:var(--green)}
.ptag.warn{background:var(--amber-l);color:var(--amber)}
.errGroup{margin-bottom:16px}
.errG-h{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;margin-bottom:6px}
.errG-h .btn{margin-left:auto}
.errRow{padding:8px 0;border-bottom:1px solid var(--line2);font-size:14px}
.errRow .zh{margin-bottom:2px}

/* ── danh sách / từ điển ─────────────────────────────────────────────────── */
.plist{display:grid;gap:2px}
.prow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 2px;
  border-bottom:1px solid var(--line2)}
.prow:last-child{border-bottom:0}
.prow-m b{display:block;font-size:14px}
.prow-m .pmuted{display:block;font-size:12px}
.prow-r{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.psearch{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.psearch input{flex:1;font:inherit;font-size:16px;padding:12px 14px;border-radius:11px;
  border:1px solid var(--line3);background:var(--paper);color:var(--ink)}
.psearch input:focus{outline:2px solid var(--dian);outline-offset:1px}
.dlist{display:grid;gap:4px}
.ditem{display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:baseline;
  text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.ditem:hover{border-color:var(--line3);background:var(--paper2)}
.ditem b{font-size:17px}
.dpy{font-size:12px;color:var(--dian)}
.dvi{font-size:13.5px;color:var(--ink2)}
.dout .pcard{margin-top:4px}
.dex{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px}
.dex li{display:flex;align-items:center;gap:10px;font-size:15px;background:var(--paper2);
  border:1px solid var(--line);border-radius:8px;padding:8px 11px}
.pempty{text-align:center;padding:34px 20px;border:1px dashed var(--line3);border-radius:14px;background:var(--paper)}
.pempty .pei{font-size:22px;margin-bottom:6px;color:var(--ink3)}
.pempty b{display:block;margin-bottom:4px}
.pempty p{color:var(--ink2);font-size:13.5px;margin:0 0 12px}

/* ── hướng dẫn ───────────────────────────────────────────────────────────── */
.steps{counter-reset:st;list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li{counter-increment:st;position:relative;padding:10px 0 10px 42px;font-size:14.5px;color:var(--ink2)}
.steps li b{color:var(--ink)}
.steps li:before{content:counter(st);position:absolute;left:0;top:9px;width:26px;height:26px;
  border-radius:9px;background:var(--jusha);color:#FBF4E7;display:grid;place-items:center;font-size:12.5px;font-weight:700}
.kbd{list-style:none;padding:0;margin:0;display:grid;gap:7px;font-size:13.5px;color:var(--ink2)}
.kbd kbd{background:var(--bg2);border:1px solid var(--line3);border-bottom-width:2px;border-radius:5px;
  padding:1px 6px;font:inherit;font-size:12px}

/* ── ngữ pháp: công thức, mẹo nhớ, bẫy, tự kiểm tra ──────────────────────── */
.gp-key{text-decoration:none;border-bottom:2px solid var(--jin);background:var(--amber-l);
  padding:0 2px;border-radius:2px}
.ex-btns{display:flex;gap:4px;flex:none}
.gp-hook{margin:10px 0 0;font-size:14px;background:var(--paper2);border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;color:var(--ink2)}
.gp-hook b{color:var(--jusha);margin-right:6px;font-size:12px;letter-spacing:.02em}
.blk-f{background:var(--amber-l);border:1px solid var(--amber-l2);border-radius:12px;padding:13px 16px;margin:12px 0 4px}
.blk-f h4{color:#7A5A17}
.blk-f .dot.d4{background:var(--jin)}
.fml{font-size:19px;line-height:1.7;letter-spacing:.01em;color:#5C4413;margin:2px 0 6px}
.gp-trap{margin:6px 0 0;font-size:13.5px;color:#6B4E14}
.gp-trap b{color:var(--jusha);margin-right:6px;font-size:12px}
.clz-lead{font-size:13px;color:var(--ink2);margin:0 0 10px}
.clz{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px}
.clz-q{font-size:16px;line-height:1.7;margin-bottom:8px}
.clz-b{display:inline-block;min-width:34px;text-align:center;border-bottom:2px solid var(--ink3);
  color:var(--jusha);font-weight:700}
.clz-b.ok{border-bottom-color:var(--tai);color:var(--green)}
.clz-b.no{border-bottom-color:var(--jusha)}
.clz-o{display:flex;gap:7px;flex-wrap:wrap}
.clz-o .btn.ok{background:var(--green-l);border-color:var(--green-l2);color:var(--green)}
.clz-o .btn.no{background:var(--red-l);border-color:var(--red-l2);color:var(--jusha)}
.clz-f{margin-top:8px;font-size:13px;color:var(--ink2)}
.clz-f .ok{color:var(--green);font-weight:600}
.clz-f .no{color:var(--jusha);font-weight:600}
.gp-more{margin:14px 0 0;border-top:1px dashed var(--line);padding-top:10px}
.gp-more summary{cursor:pointer;font-size:13px;color:var(--ink2);font-weight:600}
.gp-more[open] summary{margin-bottom:8px}

/* ── màn hẹp ─────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .pgrid4{grid-template-columns:repeat(2,1fr)}
  .pgrid2{grid-template-columns:1fr}
  .cfg{grid-template-columns:1fr}
  .pthead,.ptrow{grid-template-columns:34px 1fr 70px}
  .pthead span:nth-child(3),.ptrow .pbar{display:none}
  .stop{gap:14px}
  .sbig{font-size:44px}
}
@media (max-width:620px){
  .ph h2{font-size:23px}
  .pstat .pv{font-size:20px}
  .pm{grid-template-columns:86px 1fr 62px}
  .subnav button{padding:9px 10px;font-size:13px}
  /* Điện thoại: HAI tab phân tích (🔍 Lỗ hổng · Phân tích) trước đây bị ẩn hẳn
     → người học không có đường vào phần cá nhân hóa. Nay cho xuống dòng riêng. */
  .subnav-x{display:flex;margin-left:0;padding:0;gap:4px;font-size:12.5px;white-space:normal}
  .subnav-x a{padding:8px 10px;min-height:38px;display:inline-flex;align-items:center}
  .mockq{font-size:17px}
  .stop{flex-direction:row;align-items:flex-start}
  .splay{width:100%;max-width:100%}
  .prow{flex-direction:column;align-items:flex-start;gap:8px}
  .prow-r{width:100%;justify-content:flex-start}
  .ditem{grid-template-columns:auto 1fr auto;gap:8px}
  .ditem .dvi{grid-column:2/4}
}

/* tôn trọng người dùng nhạy cảm với chuyển động */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  .hbar i,.wbar i{transition:none !important}
}

/* ══════════════════════════════════════════════════════════════════════
   BẢN 4.9 — bài khóa 2 lớp (pinyin/dịch), ô điền, cụm cố định,
   sổ thẻ SRS, phòng trò chuyện
   ══════════════════════════════════════════════════════════════════════ */
.para{position:relative;padding:0 0 4px}
.para-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.para-no{font-size:11px;font-weight:700;color:var(--jusha);background:var(--red-l);
  border-radius:6px;padding:1px 7px;font-variant-numeric:tabular-nums}
.para-cnt{font-size:11.5px;color:var(--ink3)}
.pyline{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--dian);background:var(--blue-l);
  border-radius:0 8px 8px 0;color:var(--dian);font-size:13.5px;line-height:1.9;letter-spacing:.01em}
.viline{margin:8px 0 0;padding:9px 12px;border-left:3px solid var(--tai);background:var(--green-l);
  border-radius:0 8px 8px 0;color:var(--ink2);font-size:14px;line-height:1.75}
.para-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 2px}
.para-tools .ap{flex:1 1 320px;min-width:220px}
.btn.tgl{padding:5px 10px;font-size:12px;border-radius:99px}
.btn.tgl.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pnote-inline{font-size:11.5px;color:var(--ink3)}
.tb-tools{display:inline-flex;gap:6px;flex-wrap:wrap}
.read-note{background:var(--paper2)}
.read-note ol{margin:8px 0 0;padding-left:20px;font-size:13.5px;color:var(--ink2)}
.read-note li{margin:3px 0}

/* ô điền từ + chấm */
.fq{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--paper2);margin:10px 0}
.fq-q{font-size:16px;line-height:1.9}
.fq-blank{color:var(--jusha);letter-spacing:2px;font-weight:700}
.fq-hint{font-size:12px;color:var(--ink3);margin-top:4px}
.fq-row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.fq-in{flex:0 1 auto;width:12em;max-width:260px;min-width:110px;font-size:16px;line-height:1.5;
  padding:6px 10px;border-radius:9px;height:38px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}
/* ô trả lời dài (viết đoạn) vẫn rộng như cũ — không áp kích thước ô ngắn cho textarea */
.fq-in.wide,textarea.fq-in{width:100%;max-width:none;height:auto;min-height:110px;font-size:16px;
  padding:10px 12px;line-height:1.8}
.fq-in:focus{outline:2px solid var(--dian);outline-offset:1px}
.fq-fb{margin-top:9px;font-size:13.5px;line-height:1.6;border-radius:9px;padding:8px 11px}
.fq-fb[hidden]{display:none}
.fq-fb.ok{background:var(--green-l);color:#2F5138}
.fq-fb.no{background:var(--red-l);color:#8A3327}
.fq-li{list-style:none;margin:0 0 4px;padding:0}

/* cụm cố định */
.colloc-sec .sec-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.cc{border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin:10px 0;background:var(--paper)}
.cc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cc-chain{font-size:16.5px;font-weight:600;color:var(--ink)}
.cc-nature{font-size:11.5px;color:var(--tai);background:var(--green-l);border-radius:99px;padding:2px 10px}
.cc-why{margin:9px 0;font-size:13.5px;line-height:1.72;color:var(--ink2)}
.cc-why b{color:var(--ink)}
.cc-exs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.cc-ex{background:var(--paper2);border-radius:10px;padding:9px 11px;position:relative}
.cc-ex .zh{font-size:15px;line-height:1.6;padding-right:44px}
.cc-py{font-size:12px;color:var(--dian);margin-top:2px}
.cc-vi{font-size:12.5px;color:var(--ink3);margin-top:2px}
.cc-ex .wa{position:absolute;top:8px;right:8px;padding:2px 5px}
.cc-ex .wa+.wa{right:34px}
.cc-trap{margin-top:9px;font-size:12.5px;color:#7A5820;background:var(--amber-l);border-radius:9px;padding:7px 10px}
.cc-plain .cc-out{margin-top:8px}

/* sổ thẻ SRS */
.c-in{width:100%;font-size:14px;line-height:1.7;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper2);font-family:var(--f-zh)}
.c-search{width:100%;margin:2px 0 10px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper2)}
.crow{display:flex;gap:12px;align-items:flex-start;padding:10px 2px;border-bottom:1px solid var(--line2)}
.crow-zh{font-size:19px;min-width:64px;font-weight:600}
.crow-m{flex:1;min-width:0}
.crow-py{font-size:12px;color:var(--dian)}
.crow-vi{font-size:13px;color:var(--ink2)}
.crow-ex{font-size:12.5px;color:var(--ink3);margin-top:2px}
.crow-r{display:flex;align-items:center;gap:6px}
.rv{border:1px dashed var(--line);border-radius:14px;padding:18px;text-align:center}
.rv-zh{font-size:40px;letter-spacing:.05em;margin-bottom:8px}
.rv-back{text-align:left;margin:12px auto 0;max-width:520px}
.rv-py{color:var(--dian);font-size:14px}
.rv-vi{font-size:15px;margin-top:2px}
.rv-ex{margin-top:10px;background:var(--paper2);border-radius:10px;padding:9px 11px}
.rv-act{margin-top:14px;display:flex;flex-direction:column;gap:10px;align-items:center}
.rv-grades{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* phòng trò chuyện */
.talk-pers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.talk-p{text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:12px;
  padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.talk-p b{font-size:14px}
.talk-p span{font-size:12px;color:var(--ink3)}
.talk-p.on{border-color:var(--jusha);background:var(--red-l)}
.talk-box{display:flex;flex-direction:column;gap:10px}
.talk-log{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:6px 2px}
.tb{max-width:85%;border-radius:14px;padding:9px 12px;background:var(--paper2)}
.tb.me{align-self:flex-end;background:var(--blue-l)}
.tb-who{font-size:11px;color:var(--ink3);margin-bottom:3px}
.tb-tx{font-size:16px;line-height:1.7}
.tb-vi{font-size:12.5px;color:var(--ink3);margin-top:4px}
.tb-act{display:flex;gap:6px;margin-top:6px}
.talk-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.talk-bar input{flex:1 1 220px;min-width:160px;padding:9px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper2);font-size:15px}
.talk-mic{display:inline-flex;align-items:center;gap:8px}
.talk-mic.rec{background:var(--jusha);border-color:var(--jusha);color:#fff}
.dotr{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.8}
.talk-mic.rec .dotr{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.talk-tips{margin:8px 0 0;padding-left:20px;font-size:13.5px;color:var(--ink2)}
.talk-tips li{margin:4px 0}
.hsk-restore{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--amber-l);
  color:#6B4E14;border-radius:10px;padding:8px 12px;font-size:12.5px;margin:0 0 10px}
.hsk-restore[hidden]{display:none}
.ana-save .minlist{font-size:12.5px}

@media (max-width:760px){
  .cc-exs{grid-template-columns:1fr}
  .talk-pers{grid-template-columns:1fr}
  .rv-zh{font-size:32px}
}

/* bìa sách + tiêu đề bài */
.lhead-book{display:flex;gap:18px;align-items:flex-start}
.lhead-book .lhead-main{min-width:0}
.bcover{flex:0 0 auto;border-radius:8px;box-shadow:0 6px 18px -10px rgba(60,40,25,.55)}
@media (max-width:620px){.lhead-book{gap:12px}.bcover{width:64px;height:auto}}

/* câu điền từ trong đề: ô gõ đáp án */
.qtype{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:2px 0 12px;
  background:var(--paper2,#FCFAF4);border:1px solid var(--line2,#E5DFCF);border-radius:10px;padding:10px 12px}
.qtype-l{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink3);flex:1 1 220px}
.qtype-in{font:inherit;font-size:16px;padding:8px 11px;border:1px solid var(--line,#DDD6C4);border-radius:9px;
  background:#fff;color:var(--ink);min-height:40px}
.qtype-in:focus{outline:2px solid var(--jusha,#9B4636);outline-offset:1px}
.qtype-fb{font-size:12.8px;line-height:1.5}
.qtype-fb.ok{color:var(--green,#476A50)}
.qtype-fb.no{color:var(--red,#9B3B2E)}
@media (max-width:760px){.qtype{flex-direction:column;align-items:stretch}.qtype .btn{width:100%}}

/* ══ 4.9 · trang API (sửa/thử khoá, chẩn đoán) ═══════════════════════════ */
.apic-test{margin:8px 0 4px;border-radius:9px;padding:8px 10px;font-size:12.5px;line-height:1.55;
  border:1px solid var(--line2);background:var(--paper2)}
.apic-test.ok{border-color:#BFD3C2;background:var(--green-l)}
.apic-test.no{border-color:#E0C3BC;background:var(--red-l)}
.apic-test.blocked{border-color:var(--amber-l2);background:var(--amber-l);color:var(--ink)}
.apic-test .t1{display:flex;align-items:center;gap:8px;font-weight:600;flex-wrap:wrap}
.apic-test .t1 .ms{margin-left:auto;font-weight:400;color:var(--ink3);font-size:11.5px}
.apic-test .t1 code{font-size:11px;font-weight:400;background:#fff;padding:1px 5px;border-radius:5px;border:1px solid var(--line2)}
.apic-test .t2{margin-top:4px;word-break:break-word;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ink2)}
.apic-test .t3{margin-top:4px;color:var(--ink2)}
.apic-kind{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:5px;
  background:#fff;border:1px solid var(--line2);color:var(--ink2);font-weight:600}
.apic-kind.k-overload{background:#FBE9C8;border-color:#E4C68B;color:#7A5312}
.apic-kind.k-auth{background:#F6DCD6;border-color:#DFB4A9;color:#8A3327}
.apic-kind.k-quota{background:#FBE9C8;border-color:#E4C68B;color:#7A5312}
.apic-kind.k-nomodel{background:#EDE7DA;border-color:#D8CFB9;color:#5B5344}
.apic-kind.k-free_only{background:var(--amber-l);border-color:var(--amber-l2);color:var(--ink)}
.apic-editrow td{background:var(--bg2)}
.apic-edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;padding:6px 2px 10px}
.apic-outrow td{padding:0 8px 10px}
.apic-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.capbox{border:1px solid var(--line2);border-radius:11px;padding:11px 13px;background:var(--paper)}
.capchips{display:flex;flex-wrap:wrap;gap:6px}
.apic-testline{padding:3px 0}
.apic-hint{color:var(--ink3);font-size:12px;margin:0 0 6px 16px}
@media (max-width:760px){
  .apic-test .t2{font-size:11px}
  .apic-edit{grid-template-columns:1fr}
}


/* ══ 4.10 · thẻ màu từ vựng ═══════════════════════════════════════════════ */
.crow{position:relative;overflow:hidden}
.crow-img{float:right;width:76px;height:56px;object-fit:cover;border-radius:7px;margin:0 0 6px 10px;
  border:1px solid rgba(0,0,0,.07)}
.crow-zh{color:var(--ink)}
.rv-img{max-width:100%;max-height:190px;border-radius:10px;margin:0 auto 10px;display:block;object-fit:cover}
.rv{border-left:4px solid hsl(var(--ch,30) 62% 45%);background:hsl(var(--ch,30) 48% 98%)}
.pnote-color{background:linear-gradient(90deg,#FBF3EF,#F3F5F0);border-left:3px solid var(--jusha,#9B4636)}
.lnk{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}

/* ══ 4.10 · talk: trạng thái AI + bong bóng hệ thống ═════════════════════ */
.talk-state{font-size:12.5px;padding:7px 11px;border-radius:8px;margin:0 0 10px;border:1px solid var(--line2);
  background:var(--paper);color:var(--ink2);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.talk-state.ok{border-color:#BFD3C2;background:var(--green-l);color:#2F5138}
.talk-state.warn{border-color:#E4C68B;background:#FBF3E2;color:#6E4F13}
.tb.sys{background:transparent;border:none;padding:2px 4px}
.tb.sys .tb-tx{font-size:12px;color:var(--ink3);background:var(--bg2);border-radius:8px;padding:6px 10px;
  font-family:inherit;line-height:1.55}


/* ══ 4.10 · thi thử kiểu thi máy (CBT) ════════════════════════════════════ */
.cbt-intro .cbt-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:16px 0}
.cbt-rule{border:1px solid var(--line2);border-left:3px solid var(--dian,#3A5673);border-radius:10px;
  padding:11px 13px;background:var(--paper);font-size:13px;line-height:1.55}
.cbt-rule b{display:block;margin-bottom:3px}
.cbt-rule span{color:var(--ink2)}
.cbt-start .cbt-f{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink2);min-width:230px}
.cbt-f select{padding:7px 9px;border:1px solid var(--line2);border-radius:8px;background:#fff;font-size:13.5px}
.cbt-hrow{display:flex;gap:12px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line2);font-size:13px;flex-wrap:wrap}
.cbt-hscore{margin-left:auto;color:var(--ink)}

.cbt{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column}
.cbt-top{display:flex;align-items:center;gap:16px;padding:9px 16px;background:#fff;border-bottom:1px solid var(--line2)}
.cbt-who{display:flex;flex-direction:column;line-height:1.25}
.cbt-who b{font-size:14px;letter-spacing:.02em}
.cbt-who span{font-size:11.5px;color:var(--ink3)}
.cbt-tabs{display:flex;gap:6px;margin-left:8px}
.cbt-tabs button{display:flex;flex-direction:column;align-items:center;padding:5px 14px;border-radius:8px;
  border:1px solid var(--line2);background:var(--paper);font-size:13px;color:var(--ink2);cursor:pointer}
.cbt-tabs button i{font-size:10.5px;font-style:normal;color:var(--ink3)}
.cbt-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cbt-tabs button.on i{color:#DCD6C8}
.cbt-clock{margin-left:auto;text-align:right;line-height:1.2}
.cbt-clock span{font-size:20px;font-variant-numeric:tabular-nums;font-weight:600}
.cbt-clock span.low{color:#9B2F22}
.cbt-clock i{display:block;font-size:10.5px;font-style:normal;color:var(--ink3)}
.cbt-body{flex:1;display:flex;min-height:0}
.cbt-palette{position:relative;width:210px;flex:none;border-right:1px solid var(--line2);background:#fff;padding:12px;
  overflow:auto;max-height:100%;
  display:flex;flex-direction:column;gap:10px}
.cp-h{font-size:12.5px;color:var(--ink2)}
.cp-h b{color:var(--ink);font-size:15px}
.cp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.cp-n{aspect-ratio:1;border-radius:6px;border:1px solid var(--line2);background:#fff;font-size:11.5px;
  color:var(--ink2);cursor:pointer;padding:0}
.cp-n.done{background:#DDE8DE;border-color:#B7CCB8;color:#2F5138}
.cp-n.mark{box-shadow:inset 0 0 0 2px #C9A34A}
.cp-n.cur{background:var(--ink);color:#fff;border-color:var(--ink)}
.cp-legend{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--ink3)}
.cp-legend span{display:flex;align-items:center;gap:4px}
.cp-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;border:1px solid var(--line2)}
.lg-a{background:#DDE8DE}.lg-m{box-shadow:inset 0 0 0 2px #C9A34A}.lg-c{background:var(--ink)}
.cp-submit{margin-top:auto}
.cbt-main{flex:1;min-width:0;overflow:auto;padding:18px 22px 90px;background:var(--paper)}
.cbt-qhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cq-no{font-size:13px;font-weight:600}
.cq-tip{font-size:12px;color:var(--ink3)}
.cq-mark{margin-left:auto;border:1px solid var(--line2);background:#fff;border-radius:7px;width:30px;height:28px;
  cursor:pointer;color:var(--ink3)}
.cq-mark.on{color:#8A672C;border-color:#D9BE7E;background:#FBF3E2}
.cbt-audio{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line2);border-radius:10px;
  background:#fff;margin-bottom:14px}
.cbt-audio b{display:block;font-size:13.5px}
.cbt-audio span{font-size:12px;color:var(--ink3)}
.cbt-play{width:42px;height:42px;border-radius:50%;border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-size:15px;cursor:pointer}
.cbt-passage{border-left:3px solid var(--line2);padding-left:12px;margin-bottom:14px;line-height:2;font-size:16px}
.cbt-stem{font-size:16px;line-height:1.9;margin-bottom:12px}
.cbt-hint{font-size:12.5px;color:var(--ink3);margin-bottom:10px}
.cbt-opts{display:flex;flex-direction:column;gap:8px;max-width:760px}
.cbt-opt{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:11px 13px;border:1px solid var(--line2);
  border-radius:10px;background:#fff;font-size:15px;line-height:1.7;cursor:pointer;color:var(--ink)}
.cbt-opt .lb{width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--line2);font-size:12px;
  display:grid;place-items:center;color:var(--ink2)}
.cbt-opt.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.cbt-opt.on .lb{background:var(--ink);color:#fff;border-color:var(--ink)}
.cbt-write{width:100%;max-width:820px;border:1px solid var(--line2);border-radius:10px;padding:12px;font-size:16px;
  line-height:2;background:#fff;resize:vertical}
.cbt-count{font-size:12px;color:var(--ink3);margin-top:6px}
.cbt-foot{position:fixed;left:210px;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:10px 22px;
  background:#fff;border-top:1px solid var(--line2)}
.cbt-foot .btn.pri{margin-left:auto}
.cbt-flag{font-size:11.5px;color:var(--ink3)}
.cbt-scoring{padding:60px 20px;text-align:center}
.cbt-result{max-width:820px}
.cr-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.cr-big{font-size:46px;font-weight:600;line-height:1}
.cr-big small{font-size:15px;color:var(--ink3);font-weight:400}
.cr-big.g{color:#2F6A44}.cr-big.r{color:#9B2F22}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.cr-cell{border:1px solid var(--line2);border-radius:10px;padding:11px 13px;background:#fff}
.cr-cell .k{font-size:12px;color:var(--ink3)}
.cr-cell .v{font-size:22px;font-weight:600}
.cr-cell .v small{font-size:13px;color:var(--ink3);font-weight:400}
.cr-cell .bar{height:5px;border-radius:3px;background:var(--bg2);margin-top:8px;overflow:hidden}
.cr-cell .bar i{display:block;height:100%;background:var(--dian,#3A5673)}
.cr-fb1{border:1px solid var(--line2);border-radius:10px;padding:11px 13px;background:#fff;margin-bottom:10px;font-size:13.5px}
.cr-ai{margin-top:7px;line-height:1.7}
.cr-wrong{margin-top:12px;border:1px solid var(--line2);border-radius:10px;padding:10px 13px;background:#fff}
.cr-wrong summary{cursor:pointer;font-size:13.5px}
.cr-w1{padding:8px 0;border-top:1px dashed var(--line2);font-size:13.5px}
.cr-why{color:var(--ink2);font-size:12.5px;margin-top:3px}
@media (max-width:760px){
  .cbt-palette{width:132px}
  .cp-grid{grid-template-columns:repeat(5,1fr)}
  .cbt-foot{left:132px}
  .cbt-tabs button i{display:none}
}
.cp-mix{font-size:11.5px;color:var(--ink3);margin:-4px 0 2px}
/* trang thi: đẩy thanh phát audio lên trên hàng nút điều hướng */
body.cbt-on .aubar{bottom:64px}
@media (max-width:620px){body.cbt-on .aubar{bottom:64px}}
.cbt-qzh{font-size:15px;line-height:1.8;margin:0 0 10px;padding:9px 12px;background:#fff;
  border:1px dashed var(--line3);border-radius:9px}
.cr-sub{font-size:11.5px;color:var(--ink3);margin-top:5px}
.crow-ph{float:right;width:52px;height:52px;border-radius:9px;border:none;margin:0 0 6px 10px;
  font-size:22px;font-weight:600;cursor:pointer;line-height:1;font-family:inherit}

/* ══ 4.10 · toast ═════════════════════════════════════════════════════════ */
.hsk-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:90;
  background:var(--ink);color:#FBF8F0;font-size:13.5px;padding:9px 16px;border-radius:10px;
  box-shadow:0 10px 26px rgba(20,18,14,.28);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease,background-color .22s ease;max-width:min(92vw,520px)}
.hsk-toast.show{opacity:1;transform:translate(-50%,0)}
.hsk-toast.err{background:var(--jusha)}
@media (max-width:760px){.hsk-toast{bottom:calc(18px + env(safe-area-inset-bottom))}}
/* 4.10 · sửa lỗi vặt trang Nói */
.pcard-h select{min-width:210px;max-width:100%}
.sp-sent .n, .sp-sent .cnt, .sent-cnt{white-space:nowrap}

/* ══ 4.10 · dọn giao diện: nav trong menu mở + chú giải + nút ngôn ngữ ═══ */
body.mopen #lessonNav{display:block!important;overflow:visible!important;max-height:none!important}
body.mopen #lessonNav>li{display:block!important}
body.mopen #lessonNav .lesson-list>ul{display:grid!important;grid-template-columns:1fr 1fr;gap:4px}
.gpleg{flex-wrap:wrap;row-gap:5px;column-gap:12px}
.gpleg span{display:inline-flex;align-items:center;gap:5px}
/* nhãn ngôn ngữ (中/拼/越) đang bật: nền đậm để thấy rõ trạng thái */
[data-tgl-py].on,[data-tgl-vi].on,[data-tgl-py][aria-pressed="true"],[data-tgl-vi][aria-pressed="true"]{
  background:var(--ink);color:#FBF8F0;border-color:var(--ink)}
/* ══ 4.10 · khối nghiên cứu (thẻ màu) ════════════════════════════════════ */
.sci{margin:8px 0 2px;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--paper2)}
.sci h4{margin:0 0 8px;font-size:14px}
.sci ol{margin:0;padding-left:20px;font-size:13px;line-height:1.7;color:var(--ink2)}
.sci li{margin:0 0 8px}
.sci i{font-style:italic}
.sci-note{margin:6px 0 0;font-size:12.5px;line-height:1.65;color:var(--ink3)}
.lnk{background:none;border:none;padding:0;font:inherit;cursor:pointer;color:var(--dian);
  text-decoration:underline;text-underline-offset:2px}
/* ══ 4.9 · chú giải màu: khớp đúng màu của 4 khối ═════════════════════════ */
.blk h4 .dot,.gpleg .dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.dot.d1{background:var(--dian)}     /* nghĩa & cách dùng */
.dot.d2{background:var(--tai)}      /* ví dụ SGK */
.dot.d3{background:var(--purple)}   /* tự kiểm tra */
.dot.d4{background:var(--jin)}      /* công thức & bẫy */
.gpleg{gap:6px 14px}
.gpleg .dot{margin-right:2px}
.cc-trap{margin:10px 0 0;padding:8px 12px;border-left:3px solid var(--jin);border-radius:0 8px 8px 0}
.cc-ex .wa{top:6px}
/* khung nói: phản hồi tại máy + gợi ý ẩn (không phơi đáp án mẫu) */
.tb-fb{font-size:12.5px;line-height:1.6;color:var(--tai);background:var(--green-l);
  border-radius:8px;padding:6px 9px;margin-top:6px}
.tb.me .tb-fb{background:var(--paper2);color:var(--ink2);border:1px solid var(--line)}
.tb-hint{margin-top:6px;font-size:13px;line-height:1.65;color:var(--ink2);
  background:var(--amber-l);border-left:3px solid var(--jin);border-radius:0 8px 8px 0;padding:7px 11px}
.tb.me .tb-who{color:var(--dian)}
/* thẻ chưa có nghĩa: nói thẳng, không bịa */
.crow .cv.empty{color:var(--ink3);font-style:italic}
@media (max-width:760px){
  .side-foot{overflow-x:auto;flex-wrap:nowrap!important}
  .side-foot>.btn,.side-foot>button{flex:0 0 auto}
}
/* thi máy: ẩn trợ lý nổi + thanh phát để không che nút nộp bài */
body.cbt-on .aic,body.cbt-on .aic-fab{display:none!important}

/* ─────────────────────────────────────────────────────────────────────
   4.9 · CỤM GHÉP (collocation) — thẻ "bản chất từ chính"
   Mỗi cụm phải trả lời được: từ chính là loại từ gì, vì sao chỉ ghép
   được với nhóm từ kia. Nền giấy nhạt, không viền đậm (minimalism).
   ──────────────────────────────────────────────────────────────────── */
.cl-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fffdf9;margin:0 0 10px}
.cl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.cl-head b{font-size:16px;letter-spacing:.2px;color:var(--ink)}
.cl-tag{font-size:11px;padding:2px 8px;border-radius:999px;background:#efeae0;color:#6d6459}
.cl-colloc{font-size:14.5px;line-height:1.75;color:#2f2b26;background:#fff;border-left:3px solid var(--jusha);border-radius:0 10px 10px 0;padding:8px 12px;margin:8px 0}
.cl-why{font-size:13.5px;line-height:1.75;color:#514a42}
.cl-why em{font-style:normal;background:#fdf3d8;padding:0 3px;border-radius:4px}
.cl-ex{margin:8px 0 0;padding-left:18px;font-size:13.5px;line-height:1.8;color:#3b362f}
.cl-ex li{margin-bottom:3px}
.cl-ex .py{color:#6f675c;font-size:12px}
.cl-ex .vi{color:#6b6357;font-size:12.5px}
.cl-trap{margin-top:8px;font-size:12.5px;color:#8a4a34;background:#fdf0ea;border-radius:8px;padding:6px 10px}
.cl-kit{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.cl-kit .q{font-size:13.5px;margin:0 0 8px;color:#2f2b26}
.cl-kit .opt{display:flex;flex-wrap:wrap;gap:8px}
.cl-kit .opt button{font:inherit;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid #d9d2c5;background:#fff;cursor:pointer}
.cl-kit .opt button.ok{background:#e6f4ea;border-color:#9ccfae;color:#1c6b3c}
.cl-kit .opt button.no{background:#fdecea;border-color:#e7b3ab;color:#8a2f22}
.cl-kit .fb{font-size:12.5px;margin-top:8px;color:#514a42;min-height:1px}

/* 4.9 · thẻ màu từ vựng */
.vc{--a:#7b6d5a}
.vc .vc-strip{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--a),transparent)}
.vc .zh{font-weight:650}

/* 4.10 · trang API: kết quả từng model + khung "Dò model" */
.apic-test .tres{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.apic-test .tres-l{font-size:12px;line-height:1.5;word-break:break-word}
.apic-test .tres-l.no code{color:#8a2f22}
.apic-test .tres-l.ok code{color:#1c6b3c}
.apic-test .tres-l code{font-size:11px;background:#fff;padding:0 4px;border-radius:4px;border:1px solid var(--line2)}
.apic-found{grid-column:1/-1;font-size:12px;line-height:1.6}
.apic-found .capchips{margin-top:2px}
.apic-found .capchips .chip{cursor:pointer;font-family:ui-monospace,Menlo,monospace;font-size:11px}
.apic-found .capchips .chip.g{border-color:#9ccfae;background:var(--green-l,#e9f5ee);color:#1c6b3c}

/* 4.9.1 · khung sửa khoá: ô Model rộng hết hàng, nút Dò model nằm cùng hàng */
.apic-edit .apic-f:first-child{grid-column:1/-1}
.apic-edit .apic-f:first-child input{width:100%}
.apic-edit .apic-f-go{display:flex;align-items:flex-end}
.apic-edit .apic-f-go .btn{width:100%}
.apic-found .capchips{max-height:190px;overflow:auto;padding:2px 0}

/* 4.11 · Ngữ pháp: cách dùng theo công thức + nhãn nguồn ví dụ
   Vì sao: Nam đòi mỗi điểm ngữ pháp phải thấy rõ CÔNG THỨC → NGHĨA → VÍ DỤ,
   và phải phân biệt được ví dụ nguyên văn SGK với ví dụ ngoài. Chip “ngoài SGK”
   in xám để mắt không nhầm là câu trong bài khóa. */
.gp-py{font-family:var(--f-ui);font-size:12.5px;color:var(--dian)}
.gp-mean{font-size:14px;line-height:1.75;color:#2f2b26;margin:0 0 8px}
.blk-u .dot{background:var(--jusha)}
.gu-list{display:flex;flex-direction:column;gap:10px}
.gu{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff}
.gu-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gu-f .zh{font-size:14.5px;font-weight:600;color:#2f2b26}
.gu-n{width:19px;height:19px;border-radius:50%;background:#efeae0;color:#6d6459;
  font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.gu-src{font-size:10.5px;padding:1px 7px;border-radius:999px;background:#e6f4ea;color:#1c6b3c}
.gu-src.ngoai{background:#f1eee8;color:#6f675c}
.gu-note{font-size:13px;line-height:1.7;color:#6b6357;margin:6px 0 0}
.gu-ex{position:relative;background:var(--paper);border-radius:10px;padding:9px 11px;margin-top:8px}
.gu-ex .zh{font-size:15px;line-height:1.65;padding-right:62px}
.gu-ex .py{font-family:var(--f-ui);font-size:12.5px;color:var(--dian);margin-top:2px}
.gu-ex .vi{font-size:13px;color:#6b6357;margin-top:3px;line-height:1.6}
.gu-btns{position:absolute;top:8px;right:8px;display:flex;gap:3px}
.gu-btns .wa{padding:2px 5px}
.gu-tagline{font-size:11.5px;color:#6f675c;margin-top:7px}

/* 4.11 · 辨析: bẫy đề + KẾT LUẬN (bắt buộc có, Nam yêu cầu) */
.bx-trap{margin-top:12px;font-size:13px;line-height:1.75;color:#8a4a34;
  background:#fdf0ea;border-radius:10px;padding:9px 12px}
.bx-concl{margin-top:12px;font-size:13.5px;line-height:1.85;color:#2f2b26;
  background:#f6f3ec;border-left:4px solid var(--jusha);border-radius:0 12px 12px 0;padding:11px 14px}
.bx-concl-h{display:block;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;
  color:#6f675c;margin-bottom:5px}
.bx-v br{content:"";display:block;margin-top:3px}

/* 4.11 · thẻ từ vựng: câu ví dụ ngay trên thẻ */
.vc-ex{margin-top:7px;border-top:1px dashed var(--line);padding-top:6px}
.vc-ex .zh{font-size:12.5px;line-height:1.6;color:#3b362f;font-weight:400}
.vc-ex .vi{font-size:11.5px;line-height:1.55;color:#6f675c;margin-top:2px}

/* 4.12 · TRÒ CHƠI KIỂM TRA SAU MỖI MỤC (đợt 14)
   Nguyên tắc: khung lặng, không màu mè — chỉ đáp án đúng/sai mới có màu, để mắt
   không bị tranh chấp giữa nội dung bài và trò chơi. Nền trắng ngà, viền 1px,
   nhịp thở 14px, chữ 13–14px. */
.mg{margin:22px 0;border:1px solid var(--line);border-radius:16px;background:var(--paper);
  padding:16px 18px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.mg-h .mg-kick{display:inline-block;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  color:#6f675c;background:#efeae0;border-radius:999px;padding:2px 9px}
.mg-h h4{margin:8px 0 3px;font-size:15.5px;color:#2f2b26;display:flex;align-items:baseline;gap:8px}
.mg-h .mg-cnt{font-size:11.5px;color:#6f675c;font-weight:400}
.mg-h p{margin:0 0 12px;font-size:13px;line-height:1.7;color:#6b6357}
.mg-dots{display:flex;gap:5px;margin:0 0 12px}
.mg-dots i{width:16px;height:3px;border-radius:2px;background:#e3ddd1;transition:background .2s}
.mg-dots i.cur{background:var(--jusha)}
.mg-dots i.ok{background:#7fbf98}
.mg-dots i.no{background:#dda596}
.mg-start{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mg-start .muted{font-size:12px}
.mg-prev{font-size:12.5px;color:#6b6357;margin:0 0 10px}
.mg-q .mg-qt{font-size:15.5px;line-height:1.8;color:#2f2b26;margin:0 0 4px;font-weight:500}
.mg-q .mg-sub{font-size:12px;color:#6f675c;margin:0 0 12px}
.mg-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:640px){.mg-opts{grid-template-columns:1fr}}
.mg-opt{display:flex;align-items:center;gap:9px;text-align:left;font:inherit;font-size:13.5px;
  line-height:1.5;padding:9px 11px;border-radius:11px;border:1px solid #ddd6c9;background:#fff;
  color:#2f2b26;cursor:pointer;transition:border-color .15s,background .15s}
.mg-opt:hover:not(:disabled){border-color:#c9bfae;background:#fdfcf9}
.mg-opt .mg-k{width:19px;height:19px;flex:none;border-radius:6px;background:#f1eee8;color:#6f675c;
  font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.mg-opt.ok{border-color:#9ccfae;background:#eef7f1}
.mg-opt.ok .mg-k{background:#cfe8d9;color:#1c6b3c}
.mg-opt.no{border-color:#e7b3ab;background:#fdf1ee}
.mg-opt.no .mg-k{background:#f6d8d2;color:#8a2f22}
.mg-opt:disabled{cursor:default}
.mg-fb{margin-top:11px;font-size:13px;line-height:1.7;min-height:1px}
.mg-fb.ok{color:#1c6b3c}
.mg-fb.no{color:#8a2f22}
.mg-fb .mg-why{display:block;color:#6b6357;font-size:12.5px;margin-top:3px}
.mg-nav{margin-top:10px}
.mg-done{text-align:center;padding:6px 0 2px}
.mg-done .mg-score{font-size:34px;font-weight:600;letter-spacing:-.5px}
.mg-done p{font-size:13.5px;color:#6b6357;margin:2px 0 12px}

/* 4.13 · tự kiểm tra hệ thống API: mỗi bước một dòng, chỉ ✓/✕ mới có màu */
#apicTestOut .st-head{font-size:13.5px;font-weight:600;margin:2px 0 8px}
#apicTestOut .st-head.ok{color:#1c6b3c}
#apicTestOut .st-head.no{color:#8a2f22}
#apicTestOut .st-line{display:flex;gap:8px;align-items:baseline;font-size:12.5px;
  padding:5px 0;border-top:1px dashed var(--line);color:#3b362f}
#apicTestOut .st-ic{width:14px;flex:none;font-weight:700}
#apicTestOut .st-line.ok .st-ic{color:#1c6b3c}
#apicTestOut .st-line.no .st-ic{color:#8a2f22}
#apicTestOut .st-t{flex:none;min-width:190px;font-weight:500}
#apicTestOut .st-m{color:#6b6357;word-break:break-word}
#apicTestOut .st-ms{margin-left:auto;flex:none}
@media(max-width:640px){#apicTestOut .st-t{min-width:0}}

/* 4.14 · sửa lỗi bố cục bài tập 选词填空 trong khối 辨析
   app.css đặt `.bx-drill li{display:grid;grid-template-columns:22px 1fr}` cho kiểu
   “số thứ tự + câu”. Khối điền từ dùng chính thẻ li đó nên bị nhốt vào cột 22px:
   câu chữ Hán xuống dòng từng ký tự. Cho li chứa .fq về display:block. */
.bx-drill li.fq-li{display:block;grid-template-columns:none}
.bx-drill li.fq-li .fq{margin:6px 0}
.fq-q{font-size:15px;line-height:1.85;word-break:normal;overflow-wrap:anywhere}
.fq-blank{color:var(--jusha);letter-spacing:.5px}
.fq-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.fq-row .fq-in{flex:0 1 auto;width:12em;max-width:260px;min-width:110px;font-size:16px;padding:6px 10px;border-radius:9px;height:38px;
  border:1px solid var(--line);background:#fff}

/* 4.15 · khung chat: nút chọn độ dài câu trả lời + số ký tự ngữ cảnh */
.aic-meta .aic-ctx{white-space:nowrap;font-variant-numeric:tabular-nums}
.aic-len{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.aic-len button{font:inherit;font-size:11.5px;padding:3px 9px;border:0;background:transparent;
  color:#6b6357;cursor:pointer;line-height:1.6}
.aic-len button+button{border-left:1px solid var(--line)}
.aic-len button.on{background:var(--jusha);color:#fff}
.aic-len button:hover:not(.on){background:#f4f1ea}
.aic-style{white-space:nowrap}
@media(max-width:760px){
  .aic-meta{flex-wrap:wrap;gap:6px}
  .aic-len button{padding:4px 8px}
}

/* 4.16 · kho API miễn phí */
.apic-freetopped{font-size:12.5px;color:#2f2b26;margin:2px 0}
#apicFreeOut .capchips{max-height:150px;overflow:auto}
#apicFreeOut .capchips .chip{cursor:pointer;font-family:ui-monospace,Menlo,monospace;font-size:11px}
#apicFreeOut .tbl td.mono{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#6b6357}

/* 4.17 · nhãn "trả lời bởi" trong khung chat */
.aic-mmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;
  font-size:11px;color:#6f675c;letter-spacing:.2px}
.aic-mmeta b{font-weight:600;color:#6b6357}
.aic-fb{background:#fdf3e3;border:1px solid #f0dcb8;color:#8a6a2f;border-radius:999px;
  padding:1px 7px;font-size:10.5px;white-space:nowrap}

/* 4.18 · nguồn tổng hợp API miễn phí */
.apic-src{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px}
.apic-srct{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#6f675c;margin:0 0 8px}
.apic-srcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.apic-srcl{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;text-decoration:none;background:#fff;transition:border-color .15s,background .15s}
.apic-srcl:hover{border-color:#c9bda8;background:#fbf9f4}
.apic-srcl b{font-size:12.5px;color:#2f2b26}
.apic-srcl span{font-size:11.5px;color:#6b6357;line-height:1.5}
.apic-srcl.no{background:#fbf9f4}

/* 4.19 · khởi động (热身) + tab Mở rộng & Vận dụng */
.warm{padding:16px 18px 14px;background:#fbf8f1;border:1px solid #efe6d6}
.warm-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.warm-k{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#a8503f;font-weight:700}
.warm-l{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px dashed #e7dcc8}
.warm-l:first-of-type{border-top:0}
.warm-n{flex:none;width:20px;height:20px;border-radius:50%;background:#a8503f;color:#fff;
  font-size:11px;display:grid;place-items:center;margin-top:2px}
.warm-l .zh{flex:1;font-size:15px;line-height:1.85}
.warm-l .btn{flex:none;white-space:nowrap}

.ex-list,.disc-list{list-style:none;margin:0;padding:0}
.ex-li,.disc-li{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;
  padding:9px 0;border-top:1px dashed var(--line)}
.ex-li:first-child,.disc-li:first-child{border-top:0}
.ex-li .zh,.disc-li .zh{flex:1;min-width:200px;font-size:14.5px;line-height:1.9}
.hblank{display:inline-block;min-width:44px;text-align:center;border-bottom:2px solid #d9b36a;
  color:#a8503f;font-weight:700}
.hans{font-family:inherit;font-weight:700;color:#2f7a4f;background:#eef7f0;border:1px solid #cfe7d6;
  border-radius:6px;padding:1px 8px;font-size:13.5px}
#extTxt{width:100%;min-height:150px;font-family:inherit;font-size:15px;line-height:1.9;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;resize:vertical}
#extTxt:focus{outline:2px solid #d9b36a55;border-color:#d9b36a}
@media(max-width:620px){
  .warm-l{flex-wrap:wrap}
  .warm-l .zh{min-width:100%}
  .ex-li .zh,.disc-li .zh{min-width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   4.20 CHUYỂN ĐỘNG + NHẬN DIỆN GIỌNG NÓI (đợt 17)
   Một nhịp vào trang duy nhất; tương tác thì phản hồi ngay và ngắn.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes viewIn{ from{opacity:0; transform:translate3d(0,8px,0)} to{opacity:1; transform:none} }
@keyframes riseIn{ from{opacity:0; transform:translate3d(0,6px,0)} to{opacity:1; transform:none} }
@keyframes softPulse{ 0%,100%{transform:scale(1); opacity:.55} 50%{transform:scale(1.35); opacity:.15} }
@keyframes ringOut{ 0%{transform:scale(.55); opacity:.5} 70%{opacity:.12} 100%{transform:scale(2.1); opacity:0} }

.wrap.view-in{ animation:viewIn .30s cubic-bezier(.22,.68,.24,1) both; will-change:opacity,transform }
.wrap.view-in .lhead{ animation:riseIn .42s .04s cubic-bezier(.22,.68,.24,1) both }

/* tab: gạch chân trượt + gợn nhẹ khi đổi */
.subnav button{ transition:color .18s ease, border-color .18s ease, background-color .18s ease }
.subnav button:active{ transform:translateY(.5px) }

/* nút: phản hồi chạm */
.btn.is-press, .pp.is-press, .st.is-press{ transform:scale(.975) }
.btn, .pp, .st, .wbt{ transition:transform .12s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease }

/* thẻ có thể bấm: nhấc rất nhẹ, không đổ bóng giả */
.vc:hover, .wbcard:hover{ box-shadow:0 1px 0 var(--line) }
.vc, .wbcard{ transition:box-shadow .22s ease }

/* đáp án hiện ra: bung nhẹ, không nhảy bố cục */
.hans, .ex-li .hans{ transition:opacity .2s ease, max-height .28s cubic-bezier(.22,.68,.24,1) }

/* đang phát audio: nhịp ở nút phát */
.ap.playing .pp{ animation:softPulse 1.6s ease-in-out infinite }

/* ── 听力 bài tập ───────────────────────────────────────────────────── */
.wbcard{margin-bottom:18px}
.wbt + .wbt{margin-top:16px; padding-top:14px; border-top:1px solid var(--line2)}
.wbt-h{ display:flex; align-items:baseline; gap:10px; margin-bottom:2px }
.wbt-h b{ font-size:14px }
.wbt-tr{ margin-top:8px }
.wbt-tr summary{ cursor:pointer; font-size:12.5px; color:var(--ink3); padding:4px 0 }
.wbt-tr summary:hover{ color:var(--ink) }
.wbl{ margin:8px 0 0; padding-left:0; list-style:none; max-height:280px; overflow:auto;
  font-size:13.5px; line-height:1.85; color:var(--ink2) }
.wbl li{ padding:2px 0 2px 0; border-bottom:1px dashed var(--line2) }
.wbl li:last-child{ border-bottom:0 }
.wbt-t{ display:inline-block; min-width:44px; font-variant-numeric:tabular-nums;
  font-size:11.5px; color:var(--ink3); font-weight:600 }

/* ── kéo thả thứ tự model ───────────────────────────────────────────── */
.grip{ cursor:grab; color:var(--ink3); font-size:15px; line-height:1; padding:2px 6px 2px 0;
  user-select:none; display:inline-block; touch-action:none }
tr.apic-dragging{ opacity:.45 }
tr.apic-dropzone td{ border-top:2px solid var(--red) !important }
tr[draggable="true"]:active .grip{ cursor:grabbing }
.apic-dragcol{ width:22px }

/* ── nhận diện giọng nói (kiểu Google) ──────────────────────────────── */
.miclive{
  position:fixed; left:50%; bottom:86px; transform:translate(-50%,14px);
  display:flex; align-items:center; gap:12px; z-index:90;
  padding:11px 18px 11px 14px; border-radius:999px;
  background:rgba(255,253,250,.94); border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(60,40,20,.14), 0 1px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(10px);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .32s cubic-bezier(.22,.68,.24,1);
}
.miclive.on{ opacity:1; transform:translate(-50%,0) }
.miclive-ring{
  position:absolute; left:22px; top:50%; width:26px; height:26px; margin-top:-13px;
  border-radius:50%; border:2px solid var(--red); animation:ringOut 1.9s ease-out infinite;
  pointer-events:none;
}
.miclive-ring.r2{ animation-delay:.95s }
.miclive-dot{
  width:11px; height:11px; border-radius:50%; background:var(--red); flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(190,60,40,.12);
  animation:softPulse 1.15s ease-in-out infinite;
}
.miclive-bars{ display:flex; align-items:center; gap:3px; height:26px }
.miclive-bars i{
  display:block; width:3px; height:26px; border-radius:99px; background:var(--red);
  transform:scaleY(.18); transform-origin:center; opacity:.6;
  transition:transform .07s linear, opacity .12s linear;
}
.miclive-tx{ display:flex; flex-direction:column; line-height:1.2 }
.miclive-tx b{ font-size:12.5px; font-weight:600; letter-spacing:.1px }
.miclive-t{ font-size:11px; color:var(--ink3); font-variant-numeric:tabular-nums }

/* đang ghi âm: viền màn hình gợn nhẹ để biết máy vẫn đang nghe */
html.is-recording body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:80;
  box-shadow:inset 0 0 0 2px rgba(190,60,40,.22);
  animation:softPulse 2.4s ease-in-out infinite;
}

@media (max-width:620px){
  .miclive{ bottom:78px; padding:9px 14px 9px 12px; gap:9px }
  .miclive-bars i{ width:2.5px; height:22px }
  .wbl{ font-size:13px }
}

/* Tôn trọng người nhạy cảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .wrap.view-in, .wrap.view-in .lhead,
  .miclive-ring, .miclive-dot, .ap.playing .pp, html.is-recording body::after{
    animation:none !important;
  }
  .miclive, .btn, .pp, .st{ transition:none !important }
}

/* 4.21 — kho API miễn phí tự tổng hợp (trang Quản trị → API) */
.apic-srcfind{ width:190px; padding:7px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--card); font:inherit; font-size:13px; color:var(--ink) }
.apic-srcfind:focus{ outline:none; border-color:var(--ink) }
.apic-base{ font-size:11.5px; color:var(--ink2); word-break:break-all; display:inline-block; max-width:280px }
#apicSrc .btn{ white-space:nowrap }
.apic-list{ display:flex; flex-direction:column; margin-top:6px }
.apic-row{ display:grid; grid-template-columns:1fr auto; gap:3px 14px; padding:11px 2px;
  border-bottom:1px solid var(--line); align-items:center }
.apic-row .n{ font-weight:600; font-size:14px; letter-spacing:-.01em }
.apic-row .m{ font-size:12px; color:var(--ink2) }
.apic-row .b{ grid-column:1; font-size:11.5px; color:var(--ink2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:min(56ch,100%); display:block }
.apic-row .a{ grid-column:2; grid-row:1/4; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end }
.apic-empty{ padding:16px 2px; color:var(--ink2); font-size:13px }
@media (max-width:620px){
  .apic-row{ grid-template-columns:1fr }
  .apic-row .a{ grid-column:1; grid-row:auto; justify-content:flex-start; margin-top:4px }
  .apic-row .b{ max-width:100% }
}
@media (max-width:620px){ .apic-srcfind{ width:100% } .apic-base{ max-width:180px } }

/* ═══ 4.22 — Phòng nói chuyện 4 không gian (talk-spaces) ═══════════════════ */
.t2-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0 8px }
@media (max-width:980px){ .t2-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .t2-grid{ grid-template-columns:1fr } }
.t2-card{ display:flex; gap:12px; align-items:flex-start; text-align:left; padding:16px 14px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.t2-card:hover{ transform:translateY(-2px); border-color:var(--ink2); box-shadow:0 8px 22px rgba(0,0,0,.06) }
.t2-card:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
.t2-av{ width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center;
  background:#f2efe8; font-size:14px; font-weight:600; color:var(--ink) }
.t2-cn{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.t2-cn b{ font-size:14.5px; font-weight:600; letter-spacing:-.01em }
.t2-cn i{ font-style:normal; font-size:12.5px; color:var(--ink2) }
.t2-cn em{ font-style:normal; font-size:11.5px; color:var(--ink2); opacity:.75 }

.t2-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 10px }
.t2-ttl{ display:flex; flex-direction:column; line-height:1.25 }
.t2-ttl b{ font-size:16px }
.t2-hact{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap }

.t2-cfg{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px }
.t2-cfggrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px 14px }
@media (max-width:820px){ .t2-cfggrid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .t2-cfggrid{ grid-template-columns:1fr } }
.t2-f{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink2) }
.t2-f.wide{ grid-column:span 2 }
.t2-f input,.t2-f select{ font:inherit; font-size:13.5px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:9px; padding:8px 10px }
.t2-f input:focus,.t2-f select:focus{ outline:none; border-color:var(--ink) }
.t2-sw{ grid-column:span 3; display:flex; align-items:center; gap:8px; font-size:13px }
@media (max-width:820px){ .t2-sw{ grid-column:span 2 } .t2-f.wide{ grid-column:span 2 } }

.t2-call{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 10px 10px }
.t2-mic{ position:relative; width:84px; height:84px; border-radius:50%; border:none; cursor:pointer;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  transition:transform .16s ease, background .2s ease, box-shadow .2s ease }
.t2-mic:hover{ transform:scale(1.03) }
.t2-mic:active{ transform:scale(.98) }
.t2-mic.on{ background:#c0392b; box-shadow:0 0 0 12px rgba(192,57,43,.10) }
.t2-ring{ position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(0,0,0,.10); opacity:0 }
.t2-mic.on .t2-ring{ animation:micPulse 1.8s ease-out infinite }
.t2-mic.on .t2-ring.d2{ animation-delay:.6s }
@keyframes micPulse{ 0%{ transform:scale(.92); opacity:.55 } 100%{ transform:scale(1.5); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .t2-mic.on .t2-ring{ animation:none } }
.t2-st{ font-size:12.5px; color:var(--ink2); min-height:18px; text-align:center }
.t2-st.rec{ color:#c0392b }
.t2-st.warn{ color:#a15c00 }
.t2-live{ font-size:15px; min-height:22px; text-align:center; color:var(--ink2) }

.t2-thread{ max-height:min(52vh,460px); overflow-y:auto; display:flex; flex-direction:column; gap:10px;
  padding:10px 4px 4px; scroll-behavior:smooth }
.t2-b{ max-width:86%; padding:10px 13px; border-radius:14px; background:var(--card); border:1px solid var(--line) }
.t2-b.me{ align-self:flex-end; background:#f3f1ea }
.t2-who{ font-size:11.5px; color:var(--ink2); margin-bottom:3px }
.t2-tx{ font-size:15.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word }
.t2-m{ font-size:11.5px; color:var(--ink2); margin-top:6px }
.t2-fb{ margin-top:8px; border-top:1px dashed var(--line); padding-top:7px; display:flex; flex-direction:column; gap:3px }
.t2-fl{ font-size:13px; display:flex; gap:7px; align-items:baseline }
.t2-fl i{ font-style:normal; flex:0 0 auto; font-size:11px; color:#7a5b00; background:#fdf6e3;
  border-radius:5px; padding:1px 6px }
.t2-act{ display:flex; align-items:center; gap:8px; margin-top:6px }
.t2-prov{ font-size:10.5px; color:var(--ink2); opacity:.7 }
.t2-sys{ align-self:center; max-width:92%; text-align:center; font-size:12.5px; color:var(--ink2);
  background:#f7f5ef; border-radius:10px; padding:8px 12px; line-height:1.5 }
.t2-empty{ text-align:center; color:var(--ink2); padding:26px 10px }
.t2-bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px }
.t2-bar #t2In{ flex:1 1 220px; min-width:0 }

.t2-scorecard{ text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; width:min(560px,92vw) }
.t2-sct{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px }
.t2-ov{ display:flex; align-items:baseline; gap:6px; margin-bottom:12px }
.t2-ov b{ font-size:30px; letter-spacing:-.02em }
.t2-ov span{ font-size:12.5px; color:var(--ink2) }
.t2-sc{ margin-bottom:10px }
.t2-sch{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px }
.t2-barw{ height:6px; border-radius:99px; background:#eee9df; overflow:hidden }
.t2-barw i{ display:block; height:100%; background:var(--ink); border-radius:99px; transition:width .5s ease }
.t2-sc p{ margin:5px 0 0; font-size:12.5px; color:var(--ink2); line-height:1.45 }
.t2-sc p.t2-ev{ font-style:italic; opacity:.9 }
.t2-fixes,.t2-next{ margin-top:10px; font-size:13px }
.t2-next ul{ margin:6px 0 0 18px; padding:0 }
@media (max-width:560px){ .t2-b{ max-width:96% } .t2-call{ padding-top:8px } }
.t2-syswide{ max-width:100%; width:100%; padding:0; background:none; text-align:left }

/* ═══ 4.28 — 跟读 trong khung chat (nền tô bằng rgba để đúng cả nền sáng/tối) ══ */
.t2-sh{ margin-top:10px; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px 11px; animation:shIn .18s ease-out }
@keyframes shIn{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .t2-sh{ animation:none } }
.ts-h{ display:flex; align-items:baseline; gap:8px; font-size:12px; color:var(--ink2) }
.ts-h b{ font-size:13px; color:var(--ink); letter-spacing:.02em }
.ts-x{ margin-left:auto }
.ts-q{ font-size:17px; line-height:1.55; margin:6px 0 8px }
.ts-st{ font-size:12.5px; color:var(--ink2); display:flex; align-items:center; gap:6px; min-height:18px }
.ts-st.rec{ color:rgba(176,58,46,.95) }
.ts-st.warn{ color:rgba(161,92,0,.95) }
.ts-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-top:9px }
.ts-body{ display:flex; flex-direction:column; gap:4px }
.ts-res{ display:flex; flex-direction:column; gap:10px }
.ts-top{ display:flex; gap:16px; align-items:center; flex-wrap:wrap }
.ts-score{ display:flex; align-items:baseline; gap:3px }
.ts-score b{ font-size:30px; line-height:1; letter-spacing:-.02em }
.ts-score span{ font-size:12px; color:var(--ink2) }
.ts-meters{ flex:1 1 220px; min-width:180px; display:flex; flex-direction:column; gap:4px }
.ts-mrow{ display:grid; grid-template-columns:78px 1fr 26px; gap:8px; align-items:center;
  font-size:12px; color:var(--ink2) }
.ts-mrow b{ font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums }
.ts-barw{ height:5px; border-radius:99px; background:rgba(140,130,110,.18); overflow:hidden }
.ts-barw i{ display:block; height:100%; background:var(--ink); border-radius:99px; transition:width .45s ease }
.ts-syls{ display:flex; flex-wrap:wrap; gap:5px }
.ts-chip{ display:inline-flex; flex-direction:column; align-items:center; gap:1px; padding:4px 6px 3px;
  border-radius:9px; background:rgba(140,130,110,.10); border:1px solid var(--line);
  font-size:15px; line-height:1.15; min-width:32px; color:var(--ink) }
.ts-chip i{ font-style:normal; font-size:10.5px; color:var(--ink2) }
.ts-chip i sup{ font-size:8px; margin-left:1px; opacity:.85 }
.ts-chip.ok{ background:rgba(120,150,110,.20) }
.ts-chip.tn{ background:rgba(200,150,40,.20) }
.ts-chip.tn i{ color:rgba(150,95,0,.95) }
.ts-chip.off{ background:rgba(150,140,120,.10); border-style:dashed; opacity:.7 }
.ts-tone{ font-size:12.5px; line-height:1.55; color:var(--ink2); background:rgba(200,150,40,.10);
  border-radius:9px; padding:8px 10px }
.ts-tone b{ color:var(--ink); font-weight:600 }
.ts-tone.ok{ background:rgba(120,150,110,.13) }
.ts-note,.ts-heard{ font-size:12px; color:var(--ink2); line-height:1.5 }
.ts-ct{ width:100%; height:80px; display:block }
.ts-ct .ref{ fill:none; stroke:rgba(150,160,145,.95); stroke-width:1.6; stroke-dasharray:4 3 }
.ts-ct .usr{ fill:none; stroke:var(--ink); stroke-width:2 }
.ts-lg{ display:flex; gap:12px; font-size:11px; color:var(--ink2) }
.ts-lg i{ display:inline-block; width:14px; height:2px; vertical-align:middle; margin-right:4px }
.ts-lg .l-ref{ background:rgba(150,160,145,.95) }
.ts-lg .l-usr{ background:var(--ink) }
.ts-audio{ width:100%; height:34px }
@media (max-width:560px){ .ts-mrow{ grid-template-columns:66px 1fr 22px } .ts-q{ font-size:16px } }

/* ═══ 4.23 — khung chat 学伴: kéo to/nhỏ · chảy từng chữ · dòng nguồn ══════ */
.aic-grip{ position:absolute; left:0; top:0; bottom:0; width:10px; cursor:col-resize;
  touch-action:none; z-index:3 }
.aic-grip::after{ content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:4px; height:46px; border-radius:99px; background:var(--line); transition:background .15s ease }
.aic-grip:hover::after,.aic-panel.resizing .aic-grip::after{ background:var(--ink2) }
.aic-grip-corner{ position:absolute; left:0; bottom:0; width:18px; height:18px; cursor:nesw-resize;
  touch-action:none; z-index:3 }
.aic-grip-corner::after{ content:''; position:absolute; left:4px; bottom:4px; width:9px; height:9px;
  border-left:2px solid var(--line); border-bottom:2px solid var(--line); border-radius:0 0 0 3px }
.aic-grip-corner:hover::after{ border-color:var(--ink2) }
.aic-panel.resizing{ transition:none !important; box-shadow:0 0 0 2px rgba(0,0,0,.06) }
@media (max-width:700px){ .aic-grip,.aic-grip-corner{ display:none } }

.aic-caret{ display:inline-block; width:7px; height:15px; margin-left:2px; vertical-align:-3px;
  background:var(--ink2); opacity:.55; animation:aicCaret .9s steps(1) infinite; border-radius:1px }
@keyframes aicCaret{ 50%{ opacity:0 } }
@media (prefers-reduced-motion:reduce){ .aic-caret{ animation:none } }

.aic-kbline{ margin:6px 2px 2px; font-size:11.5px; color:var(--ink2); background:#f7f5ef;
  border:1px solid var(--line); border-radius:8px; padding:4px 9px; line-height:1.4;
  align-self:flex-start; max-width:100% }
.aic-kbline a{ color:inherit; text-decoration:underline; text-underline-offset:2px }
.aic-next{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 2px 10px }
.aic-next .aic-chip{ font-size:12px }
/* ═══ 4.24 — bóc câu (析) trong khung chat ═════════════════════════════════ */
.an-wrap{ margin:8px 0 2px; padding:9px 10px; background:#fbfaf6; border:1px solid var(--line);
  border-radius:10px; font-size:13.5px; line-height:2.1 }
.an-line{ padding:4px 0; border-bottom:1px dashed var(--line) }
.an-line:last-child{ border-bottom:0 }
.an-w{ display:inline-flex; flex-direction:column; align-items:center; margin:0 2px; vertical-align:middle }
.an-w i{ font-style:normal; font-size:10px; color:var(--ink2); line-height:1.1; letter-spacing:.01em }
.an-w b{ font-weight:500; color:var(--ink); line-height:1.35 }
.an-w[data-anw]{ cursor:pointer; border-radius:5px; padding:0 3px; transition:background .12s ease }
.an-w[data-anw]:hover{ background:#eef0e6 }
.an-x b,.an-x{ color:var(--ink2) }
.an-say{ text-decoration:none; font-size:12px; margin-left:6px; opacity:.55 }
.an-say:hover{ opacity:1 }
.an-meta{ float:right; font-size:11px; color:var(--ink2); opacity:.8 }
.an-load,.an-empty{ font-size:12.5px; color:var(--ink2) }
.aic-mini.on{ background:#eef0e6; border-color:#d9dccd }

/* ═══ 4.25 — MỤC CÁ NHÂN HÓA (#/me) ════════════════════════════════════════ */
.pf-wrap{ max-width:1080px }
.pf-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:6px 0 16px }
.pf-h1{ font-size:22px; font-weight:600; letter-spacing:-.01em }
.pf-sub{ font-size:12.5px; color:var(--ink2); line-height:1.5 }
.pf-actions{ display:flex; gap:8px; flex-wrap:wrap }
.pf-hero{ border-left:3px solid #8a9a7d }
.pf-hero b{ font-size:15px }
.pf-hero p{ margin:6px 0 0; color:var(--ink2); font-size:13.5px }
.pf-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:900px){ .pf-grid2{ grid-template-columns:1fr } }
.pf-kpi{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:8px 0 14px }
.pf-kpi div{ background:#fbfaf6; border:1px solid var(--line); border-radius:10px; padding:8px 10px }
.pf-kpi b{ display:block; font-size:19px; font-weight:600; line-height:1.1 }
.pf-kpi span{ font-size:11px; color:var(--ink2) }
.pf-skills{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
@media (max-width:640px){ .pf-skills{ grid-template-columns:repeat(2,1fr) } .pf-kpi{ grid-template-columns:repeat(2,1fr) } }
.pf-sk{ font-size:12px }
.pf-sk-h{ color:var(--ink2); display:flex; justify-content:space-between }
.pf-sk-h .zh{ opacity:.7 }
.pf-sk-v{ font-size:16px; font-weight:600; margin:2px 0 4px }
.pf-na{ font-size:11px; font-weight:400; color:var(--ink2); opacity:.75 }
.pf-bar{ display:block; height:5px; border-radius:99px; background:#eeece5; overflow:hidden; margin:4px 0 2px }
.pf-bar i{ display:block; height:100%; background:#3d4a3a; border-radius:99px; transition:width .3s ease }
.pf-bar.warn i{ background:#c2a15a }
.pf-bar.bad i{ background:#b4694f }
.pf-bar.ok i{ background:#5d7a52 }
.pf-tbl{ width:100%; border-collapse:collapse; font-size:13px; margin-top:8px }
.pf-tbl th{ text-align:left; font-weight:500; font-size:11.5px; color:var(--ink2); padding:6px 8px; border-bottom:1px solid var(--line) }
.pf-tbl td{ padding:9px 8px; border-bottom:1px solid #f0eee7; vertical-align:top }
.pf-tbls td{ padding:7px 8px }
.pf-pri{ font-weight:600; color:var(--ink2); width:26px }
.pf-num{ white-space:nowrap; font-variant-numeric:tabular-nums }
.pf-do{ font-size:12.5px; color:var(--ink2); line-height:1.55 }
.pf-go{ margin-left:6px; font-size:12px; text-decoration:underline; text-underline-offset:2px; white-space:nowrap }
.pf-list{ margin:6px 0 0; padding-left:18px; font-size:13.5px; line-height:1.9 }
.pf-list li b{ font-weight:500 }
.pf-wk{ display:grid; grid-template-columns:86px 1fr; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13px }
.pf-wk:last-child{ border-bottom:0 }
.pf-wkd{ font-size:11.5px; color:var(--ink2); padding-top:2px }
.pf-plan{ display:grid; grid-template-columns:26px 1fr; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line) }
.pf-plan:last-child{ border-bottom:0 }
.pf-pn{ width:22px; height:22px; border-radius:50%; background:#f1efe7; color:var(--ink2);
  display:grid; place-items:center; font-size:11.5px }
.pf-h4{ font-size:13px; color:var(--ink2); font-weight:500; margin:14px 0 4px }
.pf-refs{ font-size:13px; line-height:1.75; padding-left:20px }
.pf-refs li{ margin-bottom:8px }
.pf-refs a{ text-decoration:underline; text-underline-offset:2px }
.pf-refs i{ color:var(--ink2) }
.pf-code{ background:#fbfaf6; border:1px solid var(--line); border-radius:8px; padding:10px; font-size:12px; overflow:auto }
.pf-empty h2{ font-size:17px; margin:0 0 6px }
.pf-foot p{ font-size:13px; line-height:1.7 }

/* ═══ 4.26 — GỌI ĐIỆN VỚI AI (.lc) ════════════════════════════════════════ */
.lc{ position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(38,36,30,.34); backdrop-filter:blur(6px); padding:16px }
.lc-card{ width:min(390px,100%); max-height:calc(100dvh - 32px); overflow:auto; background:#fffefb;
  border:1px solid #e6e3da; border-radius:22px; padding:20px 18px 16px; text-align:center;
  box-shadow:0 24px 60px rgba(30,30,20,.22); animation:lcIn .22s ease both }
@keyframes lcIn{ from{ opacity:0; transform:translateY(10px) scale(.98) } }
.lc-head{ display:grid; justify-items:center; gap:6px }
.lc-av{ position:relative; width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  background:#f1efe7; color:#3d4a3a; font-size:30px }
.lc-av span{ font-family:var(--zh,inherit) }
.lc-ring{ position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(61,74,58,.25); opacity:0 }
.lc[data-st="listen"] .lc-ring{ opacity:1; animation:lcPulse 1.8s ease-out infinite }
.lc[data-st="speak"] .lc-ring{ opacity:1; border-color:rgba(194,161,90,.5); animation:lcPulse 1.2s ease-out infinite }
@keyframes lcPulse{ 0%{ transform:scale(.92); opacity:.9 } 100%{ transform:scale(1.18); opacity:0 } }
.lc-name{ font-size:15px; font-weight:600; margin-top:4px }
.lc-name .zh{ color:var(--ink2); font-weight:400 }
.lc-st{ font-size:12.5px; color:var(--ink2); min-height:18px }
.lc[data-st="listen"] .lc-st{ color:#4d6b45 }
.lc[data-st="think"] .lc-st{ color:#8a7a3a }
.lc[data-st="speak"] .lc-st{ color:#8a6a2a }
.lc[data-st="err"] .lc-st{ color:#b4694f }
.lc-wave{ display:flex; align-items:center; justify-content:center; gap:3px; height:46px; margin:10px 0 4px }
.lc-wave i{ width:3px; height:30px; border-radius:99px; background:#d9d6cb; transform:scaleY(.15);
  transform-origin:center; transition:transform .08s linear }
.lc[data-st="listen"] .lc-wave i{ background:#8a9a7d }
.lc[data-st="speak"] .lc-wave i{ background:#d8b877 }
.lc-cap{ font-size:13px; color:var(--ink); min-height:20px; line-height:1.5; margin:2px 0 6px; word-break:break-word }
.lc-cap .lc-who{ font-size:11px; color:var(--ink2); margin-right:6px }
.lc-log{ max-height:30vh; overflow:auto; text-align:left; border-top:1px solid #f0eee7; margin-top:6px; padding-top:8px }
.lc-l{ font-size:12.5px; line-height:1.55; margin-bottom:7px; padding:6px 9px; border-radius:9px; max-width:92% }
.lc-l b{ display:block; font-size:10.5px; color:var(--ink2); font-weight:500; margin-bottom:1px }
.lc-l.me{ background:#f4f3ec; margin-left:auto }
.lc-l.ai{ background:#fbfaf6; border:1px solid #eeece5 }
.lc-err{ text-align:left; font-size:12.5px; background:#fdf6f3; border:1px solid #f0d9d0; color:#7d4a37;
  border-radius:10px; padding:9px 11px; margin:8px 0; line-height:1.6 }
.lc-err .lc-ops{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap }
.lc-bar{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:12px }
.lc-btn{ border:1px solid #e6e3da; background:#fff; border-radius:999px; padding:9px 14px; font-size:13px;
  cursor:pointer; color:var(--ink); transition:background .15s ease, transform .1s ease }
.lc-btn:hover{ background:#f7f5ef }
.lc-btn:active{ transform:scale(.97) }
.lc-btn.off{ background:#f4dfd6; border-color:#e3c3b6 }
.lc-hang{ background:#3d4a3a; color:#fff; border-color:#3d4a3a; padding:9px 22px }
.lc-hang:hover{ background:#2f3a2d }
.lc-type{ display:flex; gap:6px; margin-top:10px }
.lc-type input{ flex:1; border:1px solid #e6e3da; border-radius:999px; padding:9px 14px; font-size:13px;
  background:#fffefb; color:var(--ink) }
.lc-type input:focus{ outline:2px solid rgba(61,74,58,.25); outline-offset:1px }
.lc-hint{ font-size:11px; color:var(--ink2); line-height:1.5; margin-top:10px }
@media (prefers-reduced-motion:reduce){ .lc-card{ animation:none } .lc-ring{ animation:none !important } }

.nav-new{ font-style:normal; font-size:9.5px; background:#eef0e6; color:#4d6b45; border-radius:99px;
  padding:1px 6px; margin-left:6px; vertical-align:1px }

/* ═══ 4.27 — bản đồ nhiệt bài × kỹ năng ═══════════════════════════════════ */
.hm{ margin:8px 0 4px; overflow-x:auto }
.hm-h,.hm-r{ display:grid; grid-template-columns:56px repeat(6,minmax(38px,1fr)); gap:4px; align-items:center }
.hm-h i{ font-style:normal; font-size:10.5px; color:var(--ink2); text-align:center }
.hm-r{ margin-bottom:4px }
.hm-r b{ font-size:11.5px; font-weight:500; color:var(--ink2) }
.hm-c{ display:grid; place-items:center; height:26px; border-radius:6px; font-size:11px; color:#fff;
  background:#efede5; transition:transform .12s ease }
.hm-c:hover{ transform:scale(1.06) }
.hm-0{ background:#f4f2ec; color:#c9c4b8 }
.hm-1{ background:#d9c9b4; color:#5b5040 }
.hm-2{ background:#c2a15a }
.hm-3{ background:#8a9a7d }
.hm-4{ background:#4b5a45 }

/* ═══ 4.29 — Hồ sơ: lỗ hổng đã sửa · giờ học · tốc độ ═════════════════════ */
.pf-fixes{ display:flex; flex-direction:column; gap:7px }
.pf-fix{ display:grid; grid-template-columns:minmax(70px,120px) 1fr auto; gap:9px; align-items:center; font-size:13px }
.pf-fix b{ font-weight:600; color:var(--ink) }
.pf-fixbar{ height:6px; border-radius:99px; background:rgba(120,150,110,.16); overflow:hidden }
.pf-fixbar i{ display:block; height:100%; border-radius:99px; background:#6f8a63; transition:width .5s ease }
.pf-meta{ font-size:11.5px; color:var(--ink2); white-space:nowrap }
.pf-hours{ display:flex; flex-direction:column; gap:7px; margin-bottom:6px }
.pf-hour{ display:grid; grid-template-columns:58px 1fr 40px 52px; gap:8px; align-items:center; font-size:12.5px }
.pf-hbar{ height:6px; border-radius:99px; background:rgba(140,130,110,.16); overflow:hidden }
.pf-hbar i{ display:block; height:100%; border-radius:99px; background:var(--ink); transition:width .5s ease }
.pf-hour b{ text-align:right; font-variant-numeric:tabular-nums }
.pf-hour em{ font-style:normal; font-size:11px; color:var(--ink2); text-align:right }
@media (max-width:560px){
  .pf-fix{ grid-template-columns:1fr auto }
  .pf-fixbar{ grid-column:1 / -1; order:3 }
  .pf-hour{ grid-template-columns:52px 1fr 38px }
  .pf-hour em{ display:none }
}