@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@400;700&display=swap");
/* ══════════════════════════════════════════════════════════════════════════
   theme.css — hệ thống thiết kế "giấy ấm" (v4.7)

   Mục tiêu: dịu mắt cho người cận thị, vẫn hiện đại và sạch.

   Nền tảng khoa học (xem docs/THIET-KE-DIU-MAT.md để có trích dẫn đầy đủ):
     · Không dùng trắng tuyệt đối #FFF / đen tuyệt đối #000 — giảm chói và
       giảm độ tương phản gắt, trong khi vẫn giữ tương phản chữ ≥ 7:1 (WCAG AAA).
     · Nền ấm (thêm sắc vàng nhẹ) giảm tỉ lệ ánh sáng xanh lam ở vùng
       bước sóng ngắn — phần gây mỏi mắt khi nhìn lâu (xem tài liệu).
     · Cỡ chữ gốc 16,5 px, giãn dòng 1,7 cho chữ Latin; 1,95 cho chữ Hán —
       chữ Hán nhiều nét nên cần khoảng thở lớn hơn chữ Latin.
     · Bề rộng dòng ≤ 72 ký tự (thói quen đọc tối ưu 45–75 ký tự).
   ══════════════════════════════════════════════════════════════════════════ */

/* thuộc tính hidden phải thắng mọi class đặt display (banner, ô phản hồi, thẻ lật) */
[hidden]{display:none!important}

:root{
  /* nền & chữ */
  --bg:#F1EEE5; --bg2:#EAE6DC; --paper:#F8F5EE; --paper2:#FCFAF4;
  --ink:#2E2C27; --ink2:#55524A; --ink3:#6B665A; --ink-strong:#201F1B;

  /* đường kẻ */
  --line:#DFD9C9; --line2:#E9E4D6; --line3:#CFC8B5;

  /* màu nhấn — mỗi màu một vai, không dùng lẫn */
  --jusha:#9B4636;      /* 朱砂 — việc chính, điểm nhấn */
  --dian:#3A5673;       /* 靛青 — liên kết, thông tin */
  --tai:#476A50;        /* 苔绿 — đúng, hoàn thành */
  --jin:#8A672C;        /* 金 — cảnh báo nhẹ, đang làm */

  --red:#9B4636; --red-l:#F6E7E2; --red-l2:#E8C9C0;
  --green:#476A50; --green-l:#E9F0E8; --green-l2:#C9DCC9;
  --blue:#3A5673; --blue-l:#E7EDF4; --blue-l2:#C6D5E4;
  --amber:#8A672C; --amber-l:#F7EEDC; --amber-l2:#E7D5B0;
  --purple:#5A4A78; --purple-l:#EDE9F4; --purple-l2:#D6CDE6;

  /* chữ */
  --f-ui:"Be Vietnam Pro","Inter","Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --f-zh:"Noto Serif SC","Songti SC","SimSun","STSong","Source Han Serif SC","Source Han Serif CN","Noto Serif CJK SC","Noto Sans CJK SC","Microsoft YaHei",serif;
  --f-zh-sans:"Noto Sans SC","Source Han Sans SC","Source Han Sans CN","Noto Sans CJK SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  --f-num:"Inter",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* hình khối */
  --r:14px; --r-s:10px; --r-l:20px;
  --sh:0 1px 2px rgba(60,54,40,.05),0 10px 26px -18px rgba(60,54,40,.28);
  --sh2:0 2px 8px rgba(60,54,40,.07),0 22px 48px -28px rgba(60,54,40,.34);

  --card:var(--paper);
  --maxw:1000px;
}

/* chữ thân */
html{background:var(--bg)}
body{
  background:var(--bg); color:var(--ink);
  font:16.5px/1.7 var(--f-ui);
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:#E6D9BE;color:var(--ink)}
a{color:var(--dian);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--jusha)}
.zh{font-family:var(--f-zh)}
h1,h2,h3,h4{letter-spacing:-.008em}
.muted{color:var(--ink3)}

/* vòng focus rõ ràng cho bàn phím */
:focus-visible{outline:2.5px solid var(--dian);outline-offset:2px;border-radius:6px}
button:focus:not(:focus-visible){outline:none}

/* ── khung ứng dụng ─────────────────────────────────────────────────── */
#app{grid-template-columns:272px minmax(0,1fr)}
aside{background:var(--paper);border-right:1px solid var(--line);padding:18px 0 26px}
main{padding:0 0 96px}
.wrap{max-width:var(--maxw);padding:0 34px}

/* logo + tên web */
.brand{padding:2px 18px 16px;border-bottom:1px solid var(--line2)}
.brand-a{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;border-radius:12px;padding:6px;margin:-6px}
.brand-a:hover{background:var(--bg2)}
.logo-svg{flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(140,70,50,.18))}
.brand-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-t b{font-family:var(--f-zh);font-size:20px;letter-spacing:.06em}
.brand-t em{font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:3px}
.brand .kick{font-size:10.5px;letter-spacing:.15em;color:var(--ink3)}

.userbox{background:var(--paper2);border-color:var(--line2)}
.userbox .av{background:var(--jusha);color:#FBF4E7}
.sb-streak{margin:8px 20px 0;display:flex;gap:14px;font-size:11.5px;color:var(--ink2)}
.sb-streak b{color:var(--ink)}

.lesson-nav a{font-size:13px;padding:7px 10px;border-radius:9px}
.lesson-nav a:hover{background:var(--bg2)}
.lesson-nav a.on{background:var(--ink);color:#F8F5EE}
.lesson-nav a.on .n{color:#E4C98F}
.lesson-nav .grp{color:var(--ink3);padding:15px 10px 5px}
.lesson-nav .lv-cnt{font-size:10px;background:var(--bg2);border:1px solid var(--line2);border-radius:99px;padding:0 6px;margin-left:5px}
.lesson-nav a.on .lv-cnt{background:rgba(255,255,255,.14);border-color:transparent;color:#F1E4C9}

/* nút */
.btn{border-radius:var(--r-s);border-color:var(--line);background:var(--paper);box-shadow:none}
.btn:hover{border-color:var(--line3);background:var(--paper2)}
.btn.pri{background:var(--jusha);border-color:var(--jusha);color:#FDF6EA}
.btn.pri:hover{background:#8A3B2C;border-color:#8A3B2C}
.btn.sm{font-size:12.5px}
.btn.red{background:var(--red);border-color:var(--red);color:#FDF6EA}

/* thẻ */
.card{background:var(--paper);border-color:var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.chip{background:var(--bg2);border-color:var(--line2);color:var(--ink2)}
h2.sec{font-size:25px}

/* form */
input,select,textarea{background:var(--paper2);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font:inherit;font-size:14.5px}
input:focus,select:focus,textarea:focus{border-color:var(--dian);outline:2px solid var(--blue-l2);outline-offset:0}
::placeholder{color:var(--ink3)}

/* bảng */
.tbl th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line)}
.tbl td{border-bottom:1px solid var(--line2)}
.tbl tr:hover td{background:var(--paper2)}

/* thanh audio */
.aubar{background:var(--ink-strong);color:#F3ECDC;border-radius:14px}
#tip{background:var(--ink-strong);color:#F6EFE0}
#tip .py{color:#D9C08A}
#mask{background:rgba(46,44,39,.42)}
.modal{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l)}

/* bài khóa */
.para{background:var(--paper);border-color:var(--line);border-radius:var(--r-l);padding:24px 26px}
.para .zhtext{font-family:var(--f-zh);font-size:21px;line-height:2.02;letter-spacing:.03em;color:#26241F}
.para .zhtext w{border-bottom-color:var(--line3)}
.para .zhtext w:hover{background:#EFE4C6}
.subnav{background:var(--bg);border-bottom-color:var(--line)}
.subnav button.on{border-bottom-color:var(--jusha);color:var(--ink)}

/* đăng nhập */
#login{background:var(--bg)}
.lg-card{background:var(--paper);border-color:var(--line);border-radius:var(--r-l)}
.lg-mark{background:var(--jusha);color:#FBF4E7}

/* ══════════════════════════════════════════════════════════════════════
   TRANG CHỦ
   ══════════════════════════════════════════════════════════════════════ */
.hm{padding-top:26px}
.hm-hero{display:flex;justify-content:space-between;align-items:center;gap:28px;
  padding:22px 26px 24px;background:linear-gradient(160deg,var(--paper2),var(--paper));
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh)}
.hm-hero h1{font-size:clamp(23px,3vw,30px);margin:6px 0 6px;letter-spacing:-.02em;text-wrap:balance}
.hm-sub{margin:0 0 16px;color:var(--ink2);font-size:14.5px;max-width:52ch}
.hm-sub b{color:var(--ink)}
.hm-cta{display:flex;gap:9px;flex-wrap:wrap}
.hm-hero-r{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.hm-ring svg{display:block}
.hm-ring-t{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink3)}
.hm-ring-t b{font-size:15px;color:var(--ink)}
.hm-goal{margin-top:5px;padding-top:6px;border-top:1px dashed var(--line)}
.hm-goal b{color:var(--jusha)}

/* dải ảnh động lực */
.hm-car{position:relative;margin:20px 0 6px;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line);background:var(--bg2);box-shadow:var(--sh)}
.hm-track{position:relative;aspect-ratio:16/6.2;min-height:190px}
.hm-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease}
.hm-slide.on{opacity:1}
.hm-slide img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(.98)}
.hm-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(28,26,22,.72) 0%,rgba(28,26,22,.42) 42%,rgba(28,26,22,.05) 78%)}
.hm-cap{position:absolute;left:30px;bottom:26px;right:38%;z-index:2;color:#F7F1E2}
.hm-q{font-family:var(--f-zh);font-size:26px;line-height:1.5;letter-spacing:.05em;
  text-shadow:0 2px 14px rgba(0,0,0,.4)}
.hm-vi{font-size:13px;color:#EADFC8;margin-top:6px;line-height:1.55}
.hm-src{font-size:11px;letter-spacing:.08em;color:#CBBD9E;margin-top:8px;text-transform:uppercase}
.hm-nav{position:absolute;top:14px;z-index:3;width:32px;height:32px;
  border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(28,26,22,.32);
  color:#F7F1E2;font-size:17px;line-height:1;display:grid;place-items:center;backdrop-filter:blur(4px)}
.hm-nav:hover{background:rgba(28,26,22,.55)}
.hm-nav.prev{right:58px}.hm-nav.next{right:16px}
.hm-dots{bottom:16px}
.hm-dots{position:absolute;right:16px;bottom:14px;display:flex;gap:6px;z-index:3}
.hm-dot{width:7px;height:7px;border-radius:50%;border:0;background:rgba(255,255,255,.42);padding:0}
.hm-dot.on{background:#F3E4C2;width:18px;border-radius:99px}

/* chỉ số */
.hm-kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin:18px 0}
.hm-k{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.hm-k .k{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:700;line-height:1.35;min-height:2.7em}
.hm-k .v{font-size:23px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hm-k .v span{font-size:12px;color:var(--ink3);font-weight:600;margin-left:1px}

.hm-two{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}
.hm-card{min-width:0}
.hm-spark{display:flex;align-items:flex-end;gap:8px;height:92px;margin:4px 0 12px}
.hm-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:5px}
.hm-bar i{display:block;width:100%;max-width:26px;border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,#C08A5E,#9B4636);opacity:.85}
.hm-bar span{font-size:10px;color:var(--ink3)}
.hm-badges{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px;border-top:1px solid var(--line2)}
.hm-badge{font-size:11.5px;background:var(--amber-l);border:1px solid var(--amber-l2);
  color:#7A5820;border-radius:99px;padding:3px 9px;font-weight:600}
.hm-plan{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--ink2)}
.hm-plan li{padding:7px 0;border-bottom:1px dashed var(--line2);line-height:1.55}
.hm-plan li:last-child{border:0}
.hm-plan b{color:var(--ink)}
.hm-words{display:flex;flex-wrap:wrap;gap:7px}
.hm-word{background:var(--paper2);border:1px solid var(--line);border-radius:9px;padding:6px 11px;
  font-size:15px;color:var(--ink);font-family:var(--f-zh)}
.hm-word:hover{border-color:var(--jusha);color:var(--jusha)}

/* lưới cấp độ */
.lv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lv-card{display:block;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:15px 16px 14px;transition:.16s;position:relative}
.lv-card:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--line3)}
.lv-card.cur{border-color:#D9BE8E;background:linear-gradient(165deg,#FBF6EA,var(--paper))}
.lv-card.cur::before{content:"";position:absolute;left:16px;top:-1px;width:44px;height:3px;background:var(--jusha);border-radius:0 0 3px 3px}
.lv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.lv-code{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--jusha)}
.lv-badge{font-size:10px;padding:2px 7px;border-radius:99px;background:var(--jusha);color:#FBF4E7;font-weight:700}
.lv-badge.dim{background:var(--bg2);color:var(--ink3);font-weight:600}
.lv-zh{font-size:22px;letter-spacing:.08em;line-height:1.2}
.lv-vi{font-size:12.5px;color:var(--ink2);margin-top:2px}
.lv-meta{font-size:11px;color:var(--ink3);margin-top:7px;line-height:1.5;min-height:30px}
.lv-prog{height:5px;border-radius:99px;background:var(--bg2);overflow:hidden;margin-top:8px}
.lv-prog i{display:block;height:100%;background:var(--tai)}
.lv-pct{font-size:10.5px;color:var(--ink3);margin-top:4px}

/* trang cấp độ */
.crumb{display:inline-block;margin:26px 0 10px;font-size:12.5px;color:var(--ink3)}
.crumb:hover{color:var(--jusha)}
.lv-head h2{font-size:28px;margin:4px 0 4px}
.lv-head .sub{color:var(--ink2);margin:0 0 12px;font-size:14px}
.lv-sum{display:flex;align-items:center;gap:12px;max-width:420px;font-size:12px;color:var(--ink3)}
.lv-sum-bar{flex:1;height:6px;border-radius:99px;background:var(--bg2);overflow:hidden}
.lv-sum-bar i{display:block;height:100%;background:var(--tai)}
.les-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:20px}
.les-card{display:block;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:15px 16px 0;overflow:hidden;transition:.16s}
.les-card:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--line3)}
.les-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.les-n{font-size:11px;font-weight:800;color:var(--ink3);letter-spacing:.08em}
.les-zh{font-family:var(--f-zh);font-size:16.5px;line-height:1.45;letter-spacing:.02em;min-height:48px}
.les-vi{font-size:11.5px;color:var(--ink3);margin-top:3px;min-height:32px}
.les-foot{display:flex;gap:10px;font-size:10.5px;color:var(--ink3);margin:9px 0 10px}
.les-audio{color:var(--tai)}
.les-prog{height:4px;background:var(--bg2);margin:0 -16px;border-radius:0}
.les-prog i{display:block;height:100%;background:var(--jin)}

/* ══════════════════════════════════════════════════════════════════════
   CHAT 学伴  (aic-*)
   ══════════════════════════════════════════════════════════════════════ */
.aic-fab{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:9px;
  padding:11px 17px 11px 12px;border-radius:99px;border:1px solid #8A3B2C;background:var(--jusha);
  color:#FDF6EA;font-weight:700;font-size:13.5px;box-shadow:0 12px 30px -12px rgba(120,50,35,.65)}
.aic-fab:hover{background:#8A3B2C}
.aic-fab-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.16);font-family:var(--f-zh);font-size:14px}
.aic.on .aic-fab{display:none}

.aic-panel{position:fixed;top:0;right:0;height:100dvh;width:430px;max-width:100vw;z-index:70;
  background:var(--paper);border-left:1px solid var(--line);box-shadow:-18px 0 48px -30px rgba(50,44,32,.5);
  display:flex;flex-direction:column;transform:translateX(102%);transition:transform .26s ease}
.aic.on .aic-panel{transform:none}
.aic-panel.drop{outline:2px dashed var(--jusha);outline-offset:-8px}
.aic-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:13px 14px;border-bottom:1px solid var(--line2);background:var(--paper)}
.aic-title{display:flex;align-items:center;gap:9px;min-width:0}
.aic-av{width:32px;height:32px;border-radius:10px;background:var(--jusha);color:#FBF4E7;
  display:grid;place-items:center;font-family:var(--f-zh);font-size:16px;flex:0 0 auto}
.aic-title b{display:block;font-size:14px;line-height:1.2}
.aic-sub{display:block;font-size:10.5px;color:var(--ink3);margin-top:2px}
.aic-hbtn{display:flex;gap:5px}
.aic-icon{border:1px solid var(--line);background:var(--paper2);color:var(--ink2);border-radius:9px;
  min-width:30px;height:30px;padding:0 8px;font-size:12px;display:grid;place-items:center}
.aic-icon:hover{border-color:var(--line3);color:var(--ink)}
.aic-icon.rec{background:var(--jusha);border-color:var(--jusha);color:#FDF6EA;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.6}}

.aic-meta{display:flex;align-items:center;gap:7px;padding:8px 14px;font-size:11.5px;color:var(--ink3);
  border-bottom:1px solid var(--line2);background:var(--paper2)}
.aic-dot{width:6px;height:6px;border-radius:50%;background:var(--tai)}
.aic-dot.busy{background:var(--jin);animation:pulse 1s infinite}
.aic-meter{flex:1;height:4px;border-radius:99px;background:var(--line2);overflow:hidden;max-width:120px}
.aic-meter i{display:block;height:100%;background:var(--dian)}
.aic-style{margin-left:auto;border:1px solid var(--line);border-radius:99px;padding:2px 10px;
  background:var(--paper);color:var(--ink2);font:inherit;font-size:11.5px;cursor:pointer;
  transition:border-color .16s,color .16s}
.aic-style:hover{border-color:var(--line3);color:var(--ink)}

.aic-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.aic-m{max-width:100%}
.aic-who{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.aic-m.me{align-self:flex-end;max-width:88%}
.aic-m.me .aic-who{text-align:right}
.aic-b{background:var(--paper2);border:1px solid var(--line2);border-radius:4px 14px 14px 14px;
  padding:10px 13px;font-size:14px;line-height:1.72;color:var(--ink);overflow-wrap:anywhere}
.aic-m.me .aic-b{background:#E7E0CE;border-color:#DCD2B8;border-radius:14px 4px 14px 14px}
.aic-b p{margin:0 0 8px}
.aic-b p:last-child{margin-bottom:0}
.aic-b b{color:var(--ink)}
.aic-b .aic-h1,.aic-b .aic-h2{font-size:15px;margin:12px 0 6px}
.aic-b .aic-h3,.aic-b .aic-h4{font-size:14px;margin:11px 0 5px;color:var(--jusha)}
.aic-b ul,.aic-b ol{margin:6px 0 8px;padding-left:20px}
.aic-b li{margin:3px 0}
.aic-b code{background:var(--bg2);border:1px solid var(--line2);border-radius:5px;padding:1px 5px;font-size:13px}
.aic-b blockquote{margin:8px 0;padding:6px 12px;border-left:3px solid var(--jin);background:var(--amber-l);border-radius:0 8px 8px 0;color:var(--ink2)}
.aic-b hr{border:0;border-top:1px solid var(--line2);margin:12px 0}
.aic-pre{background:#2B2925;color:#EDE6D6;border-radius:10px;padding:10px 12px;overflow-x:auto;font-size:12.5px;margin:8px 0}
.aic-tbl{overflow-x:auto;margin:10px 0;border:1px solid var(--line);border-radius:10px}
.aic-tbl table{border-collapse:collapse;width:100%;font-size:12.8px}
.aic-tbl th{background:var(--bg2);text-align:left;padding:7px 10px;font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap;min-width:64px}
.aic-tbl td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:top;min-width:64px;word-break:break-word}
.aic-tbl tr:last-child td{border:0}
.aic-mmeta{font-size:10px;color:var(--ink3);margin-top:6px}
.aic-mtools{display:flex;gap:8px;margin-top:6px;opacity:0;transition:.15s}
.aic-m:hover .aic-mtools{opacity:1}
.aic-mini{border:0;background:none;color:var(--ink3);font-size:11px;padding:0;text-decoration:underline;text-underline-offset:2px}
.aic-mini:hover{color:var(--jusha)}
.aic-mfiles{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.aic-mfile{font-size:11px;background:var(--bg2);border:1px solid var(--line2);border-radius:6px;padding:2px 7px;color:var(--ink2)}
.aic-hello{padding:6px 2px}
.aic-hi{font-size:16px;font-weight:700;margin-bottom:6px}
.aic-hello p{margin:0 0 10px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.aic-sug{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.aic-chip{border:1px solid var(--line);background:var(--paper2);border-radius:99px;
  padding:6px 11px;font-size:12px;color:var(--ink2)}
.aic-chip:hover{border-color:var(--jusha);color:var(--jusha)}
.aic-m.thinking .aic-b{display:flex;align-items:center;gap:8px;color:var(--ink3);font-size:13px}

.aic-files{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px}
.aic-files:not(:empty){padding:10px 14px 0;border-top:1px solid var(--line2)}
.aic-fchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;background:var(--bg2);
  border:1px solid var(--line);border-radius:8px;padding:4px 6px 4px 8px;max-width:100%}
.aic-fchip button{border:0;background:none;color:var(--ink3);font-size:11px;padding:0 2px}
.aic-fchip button:hover{color:var(--jusha)}

.aic-compose{border-top:1px solid var(--line2);padding:8px 12px 12px;background:var(--paper)}
.aic-tools{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.aic-hint{font-size:10px;color:var(--ink3);margin-left:auto}
.aic-inrow{display:flex;gap:8px;align-items:flex-end}
.aic-inrow textarea{flex:1;resize:none;max-height:150px;border-radius:12px;font-size:14px;line-height:1.5;
  padding:9px 12px;background:var(--paper2)}
.aic-send{width:38px;height:38px;border-radius:12px;border:1px solid var(--jusha);background:var(--jusha);
  color:#FDF6EA;font-size:15px;flex:0 0 auto}
.aic-send:hover{background:#8A3B2C}

/* khi chat mở: đẩy nội dung sang trái (màn rộng) */
@media (min-width:1080px){
  body.chat-on #app{padding-right:430px;transition:padding .26s ease}
}
@media (max-width:720px){
  .aic-panel{width:100vw;border-left:0}
  .aic-fab{right:14px;bottom:calc(20px + env(safe-area-inset-bottom));padding:10px 14px}
  body.has-bar .aic-fab{bottom:calc(82px + env(safe-area-inset-bottom))}
  .aic-fab-tx{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   TỪ ĐIỂN (kính lúp)
   ══════════════════════════════════════════════════════════════════════ */
.dsel{position:fixed;z-index:210;width:36px;height:36px;border-radius:50%;border:1px solid #8A3B2C;
  background:var(--jusha);color:#FDF6EA;font-size:15px;display:grid;place-items:center;
  box-shadow:0 8px 22px -8px rgba(120,50,35,.7);animation:pop .16s ease-out}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.dsel:hover{background:#8A3B2C}

.dpop{position:fixed;z-index:220;width:328px;max-width:calc(100vw - 20px);
  background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh2);
  padding:14px 15px;animation:pop .16s ease-out}
.dp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px}
.dp-hl{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.dp-hl b{font-family:var(--f-zh);font-size:22px;letter-spacing:.04em}
.dp-py{font-size:13px;color:var(--dian);font-weight:600}
.dp-x{border:0;background:none;color:var(--ink3);font-size:14px;line-height:1;padding:2px 4px}
.dp-x:hover{color:var(--jusha)}
.dp-pos{display:inline-block;font-size:10.5px;background:var(--bg2);border:1px solid var(--line2);
  color:var(--ink2);border-radius:99px;padding:1px 8px;margin:2px 0 7px}
.dp-vi{margin:2px 0 8px;font-size:14px;line-height:1.6}
.dp-ex{list-style:none;margin:0 0 10px;padding:0;border-top:1px dashed var(--line2);padding-top:8px}
.dp-ex li{margin:0 0 7px;font-size:12.8px;line-height:1.55}
.dp-ex .zh{display:block;font-family:var(--f-zh);font-size:14px}
.dp-ex .dvi{display:block;color:var(--ink3);font-size:12px;margin-top:1px}
.dp-act{display:flex;align-items:center;gap:7px;border-top:1px solid var(--line2);padding-top:9px}
.dp-src{margin-left:auto;font-size:10px;color:var(--ink3)}
.dp-load{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3);padding:6px 2px}

/* ══════════════════════════════════════════════════════════════════════
   QUẢN TRỊ API  (apic-*)
   ══════════════════════════════════════════════════════════════════════ */
.apic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:11px}
.apic-active{background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.apic-a1{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.apic-a1 b{font-size:13.5px}
.apic-models{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px}
.apic-models code{font-size:10.5px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:5px;padding:1px 6px;color:var(--ink2)}
.apic-a2{display:flex;gap:6px}
.apic-form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.apic-f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink2)}
.apic-f span{font-weight:600;font-size:11.5px;letter-spacing:.02em;color:var(--ink2)}
.apic-f input,.apic-f select{font-size:13.5px}
.apic-f-go{justify-content:flex-end}
.apic-warn{margin:0 0 16px;padding:11px 14px;border-radius:12px;background:var(--amber-l);
  border:1px solid var(--amber-l2);color:#6B4F1E;font-size:13px;line-height:1.6}
.apic-warn code{background:rgba(255,255,255,.55);border-radius:5px;padding:1px 5px;font-size:12px}
.apic-catbox{margin-top:12px;padding:11px 13px;border:1px dashed var(--line);border-radius:12px;font-size:12.5px;background:var(--paper2)}
.apic-catbox code{font-size:11px;background:var(--bg2);border-radius:4px;padding:1px 5px}
.apic-key{font-size:11px;color:var(--ink3);letter-spacing:.1em}
.apic-rowact{display:flex;gap:5px;white-space:nowrap}
.tbl .num{font-variant-numeric:tabular-nums;text-align:center}

/* ══════════════════════════════════════════════════════════════════════
   CHẾ ĐỘ DỊU MẮT / BAN ĐÊM
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="calm"]{
  --bg:#EEE7D3; --bg2:#E6DDC6; --paper:#F6EFDC; --paper2:#FBF5E5;
  --ink:#332F26; --ink2:#5A5346; --ink3:#8A8170;
  --line:#DBD2BB; --line2:#E6DEC9; --line3:#C9BEA3;
  --jusha:#95452F; --dian:#3C5364; --tai:#4A6749; --jin:#84602A;
}
[data-theme="night"]{
  --bg:#1B1A17; --bg2:#211F1B; --paper:#24221E; --paper2:#2A2723;
  --ink:#E9E3D4; --ink2:#BCB5A4; --ink3:#8B8474; --ink-strong:#12110F;
  --line:#37342C; --line2:#2E2B25; --line3:#443F35;
  --jusha:#C97A62; --dian:#8FAFC9; --tai:#8FB795; --jin:#CBA96F;
  --red:#C97A62; --red-l:#3A2A26; --red-l2:#513831;
  --green:#8FB795; --green-l:#26302A; --green-l2:#354438;
  --blue:#8FAFC9; --blue-l:#232C33; --blue-l2:#33424E;
  --amber:#CBA96F; --amber-l:#2E281E; --amber-l2:#453A28;
  --purple:#A99BC7; --purple-l:#282333; --purple-l2:#3A3348;
}
[data-theme="night"] body{background:var(--bg)}
[data-theme="night"] .hm-slide::after{background:linear-gradient(90deg,rgba(12,11,9,.82),rgba(12,11,9,.5) 45%,rgba(12,11,9,.15))}
[data-theme="night"] .aic-m.me .aic-b{background:#2E2A22;border-color:#3A352B}
[data-theme="night"] .aic-pre{background:#121110}
[data-theme="night"] .btn.pri{color:#1B1A17}
[data-theme="night"] .lesson-nav a.on{background:#EDE6D6;color:#22201C}
[data-theme="night"] .lesson-nav a.on .n{color:#8A3B2C}
[data-theme="night"] .hm-slide img{filter:saturate(.9) brightness(.86)}

/* nút đổi chế độ */
.theme-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  border:1px solid var(--line);background:var(--paper2);color:var(--ink2);
  border-radius:10px;padding:7px 10px;font-size:12px;margin-bottom:8px}
.theme-btn:hover{border-color:var(--line3);color:var(--ink)}

/* ══════════════════════════════════════════════════════════════════════
   MÀN HẸP
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .hm-kpi{grid-template-columns:repeat(3,1fr)}
  .lv-grid,.les-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .hm-hero{flex-direction:column;align-items:flex-start}
  .hm-hero-r{width:100%;justify-content:flex-start}
  .hm-two{grid-template-columns:1fr}
  .hm-track{aspect-ratio:16/8}
  .hm-cap{right:20px}
  .hm-q{font-size:22px}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .hm-kpi{grid-template-columns:repeat(2,1fr)}
  .lv-grid,.les-grid{grid-template-columns:1fr}
  .apic-form{grid-template-columns:1fr}
  .hm-hero h1{font-size:24px}
  .hm-q{font-size:19px}
  .hm-vi{font-size:12px}
  .para .zhtext{font-size:18.5px;line-height:1.95}
}
@media (max-width:900px){
  /* chặn tràn ngang: lưới 1 cột + thanh điều hướng cuộn được */
  #app{grid-template-columns:minmax(0,1fr);min-width:0}
  aside,main{min-width:0;max-width:100%}
  aside{overflow-x:hidden}
  .lesson-nav{min-width:0;max-width:100%;overscroll-behavior-x:contain}
  body{overflow-x:hidden}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto}
}

/* phần tử cũ dùng màu chữ cứng → đưa về bảng màu */
#login input:focus{outline:2px solid var(--blue-l2)}
.lg-card{background:var(--paper) !important}

/* ═══ 6.2 — TINH CHỈNH TOÀN CỤC (đo bằng Playwright, có căn cứ) ═══════════
   · Nền bớt ngả vàng, chữ phụ đủ tương phản ≥ 4,5:1 (WCAG 2.1 AA cho chữ nhỏ)
   · Vùng chạm ≥ 44 px trên thiết bị cảm ứng (Apple HIG 44 pt · Material 48 dp)
   · Vòng tiêu điểm rõ khi dùng bàn phím (WCAG 2.4.7)
   · Tôn trọng prefers-reduced-motion                                    */

:root{
  --bg:#F3F1EA; --bg2:#EAE7DE; --paper:#FAF8F2; --paper2:#FFFFFF;
  --ink3:#5F5A50;            /* 6,1:1 trên --paper — trước là 5,25:1 */
}

:focus-visible{ outline:2px solid #4b5a45; outline-offset:2px; border-radius:6px }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #4b5a45; outline-offset:2px }

/* điều hướng: nói rõ mục đang mở cho trình đọc màn hình */
[aria-current="page"]{ font-weight:600 }

@media (pointer:coarse){
  button,.btn,.aic-chip,.chip,[role="button"],.subnav button,.t2-card,.aic-mini,.pf-go{
    min-height:44px; min-width:44px }
  .aic-mini,.chip,.pf-go{ min-width:0; padding-left:10px; padding-right:10px }
  input,textarea,select{ font-size:16px }   /* iOS không tự phóng to trang */
}

/* chiều dài dòng đọc: 34–38 chữ Hán mỗi dòng là dễ đọc nhất */
.prose,.read,.txt p,.gp-mean{ max-width:38em }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
}

/* ═══ 6.3 — khối ngữ pháp gấp/mở + thanh điều khiển ═════════════════════ */
.gp-tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px; padding:8px 12px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px; position:sticky; top:8px; z-index:5 }
.gp-tools-l{ font-size:12px; color:var(--ink3); margin-right:auto }
.gp-tg{ margin-left:auto; font-size:12px; color:var(--ink2); background:var(--paper2); border:1px solid var(--line);
  border-radius:999px; padding:4px 11px; cursor:pointer }
.gp-tg:hover{ background:var(--bg2) }
section.gp.min .gp-body{ display:none }
section.gp.min .gp-head{ border-bottom:0 }
.gp-head{ align-items:center; gap:8px }

/* ═══ 6.4 — TRÍ NHỚ 学伴 (giống bảng Memory của ChatGPT) ═════════════════ */
.aic-memn{ font-style:normal; font-size:9.5px; line-height:1; min-width:13px; height:13px; padding:0 3px;
  border-radius:7px; background:var(--ink); color:#fff; display:inline-flex; align-items:center;
  justify-content:center; position:absolute; top:2px; right:2px; font-variant-numeric:tabular-nums }
.aic-icon#aicMem{ position:relative }
.aic-badge{ font-size:10.5px; padding:1px 6px; border-radius:6px; background:rgba(140,130,110,.14);
  color:var(--ink2); white-space:nowrap }
.aic-badge.t{ background:rgba(200,150,40,.18); color:rgba(150,95,0,.95) }
.aic-sep{ display:flex; align-items:center; gap:8px; margin:12px 2px 2px; color:var(--ink2); font-size:11.5px }
.aic-sep::after{ content:''; flex:1; height:1px; background:var(--line) }
.aic-memline{ color:var(--ink2) }

.mm{ position:absolute; inset:0; z-index:6; background:var(--paper); overflow-y:auto;
  border-radius:inherit; opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease }
.mm.on{ opacity:1; transform:none; pointer-events:auto }
@media (prefers-reduced-motion:reduce){ .mm{ transition:none } }
.mm-wrap{ display:flex; flex-direction:column; min-height:100%; padding:12px 14px 14px }
.mm-h{ display:flex; align-items:center; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--line) }
.mm-h b{ font-size:14px }
.mm-up{ font-size:11.5px; color:var(--ink2) }
.mm-x{ margin-left:auto; border:none; background:none; font-size:15px; cursor:pointer; color:var(--ink2); padding:4px 6px; border-radius:8px }
.mm-x:hover{ background:rgba(140,130,110,.12); color:var(--ink) }
.mm-sw{ display:flex; flex-direction:column; gap:6px; padding:10px 0; border-bottom:1px solid var(--line) }
.mm-sw label{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink2); cursor:pointer }
.mm-sw input{ width:16px; height:16px; accent-color:var(--ink) }
.mm-body{ flex:1; padding-top:10px; display:flex; flex-direction:column; gap:14px }
.mm-sh{ display:flex; align-items:center; gap:8px; margin-bottom:5px }
.mm-sh b{ font-size:12.5px; letter-spacing:.01em }
.mm-sh .mm-b{ margin-left:auto }
.mm-b{ border:1px solid var(--line); background:var(--card); color:var(--ink2); font:inherit; font-size:11.5px;
  padding:2px 7px; border-radius:7px; cursor:pointer; line-height:1.5 }
.mm-b:hover{ color:var(--ink); border-color:var(--ink3) }
.mm-sec{ padding:8px 10px; border-radius:10px; background:rgba(140,130,110,.07); margin-bottom:7px }
.mm-st{ margin:0; font-size:12px; line-height:1.55; color:var(--ink2); white-space:pre-wrap }
.mm-st i{ opacity:.75 }
.mm-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px }
.mm-f{ display:flex; gap:7px; align-items:flex-start; padding:7px 9px; border:1px solid var(--line);
  border-radius:10px; background:var(--card) }
.mm-tag{ flex:0 0 auto; font-size:10px; padding:1px 6px; border-radius:6px; color:var(--ink2); white-space:nowrap; margin-top:1px }
.mm-tx{ flex:1; font-size:12.5px; line-height:1.5; word-break:break-word }
.mm-a{ display:flex; gap:2px; flex:0 0 auto }
.mm-empty{ font-size:12.5px; color:var(--ink2); line-height:1.55; padding:8px 2px }
.mm-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:12px; margin-top:10px;
  border-top:1px solid var(--line) }
.mm-note{ font-size:11px; color:var(--ink2); opacity:.85 }
@media (max-width:560px){
  .mm-wrap{ padding:10px 11px 12px }
  .mm-tx{ font-size:13px }
  .mm-b{ min-height:30px }
}

/* ═══ 6.5 — 「AI Phân tích lỗ hổng」 của một bài (theo bản PDF của Nam) ═════ */
.lg{ max-width:960px }
.lg-eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); margin:6px 0 4px }
.lg-h1{ font-size:clamp(22px,3vw,30px); letter-spacing:-.02em; margin:0 0 6px }
.lg-sub{ font-size:13.5px; color:var(--ink2); margin:0 0 16px; line-height:1.6 }
.lg-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px }
@media (max-width:760px){ .lg-kpis{ grid-template-columns:repeat(2,1fr) } }
.lg-k{ background:var(--card); border:1px solid var(--line); border-radius:13px; padding:12px 14px;
  display:flex; flex-direction:column; gap:2px }
.lg-kl{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2) }
.lg-kv{ font-size:24px; line-height:1.15; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.lg-ks{ font-size:11.5px; color:var(--ink2) }
.lg-2col{ display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:14px; margin-bottom:14px }
@media (max-width:860px){ .lg-2col{ grid-template-columns:1fr } }
.lg-card{ background:var(--card); border:1px solid var(--line); border-radius:15px; padding:16px 16px 14px }
.lg-card h2{ font-size:14px; margin:0 0 10px; letter-spacing:-.01em }
.lg-note{ font-size:11.5px; color:var(--ink2); line-height:1.55; margin:8px 0 0 }
.lg-radar{ width:100%; max-width:340px; display:block; margin:0 auto }
.lg-g{ fill:none; stroke:var(--line); stroke-width:1 }
.lg-s{ stroke:var(--line); stroke-width:1 }
.lg-area{ fill:rgba(75,90,69,.16); stroke:rgba(75,90,69,.85); stroke-width:2 }
.lg-dot{ fill:var(--ink) }
.lg-lb{ font-size:11.5px; fill:var(--ink2); font-family:inherit }
.lg-lv{ font-size:10.5px; fill:var(--ink); font-weight:600 }
.lg-diag{ border-left:3px solid var(--line); border-radius:0 10px 10px 0; padding:10px 12px; margin-bottom:9px }
.lg-diag b{ font-size:13px; display:block; margin-bottom:3px }
.lg-diag p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--ink2) }
.lg-diag.red{ background:rgba(192,57,43,.07); border-color:#c0392b }
.lg-diag.amber{ background:rgba(200,150,40,.10); border-color:#a15c00 }
.lg-diag.green{ background:rgba(90,130,90,.10); border-color:#4b7a4b }
.lg-py{ font-size:11.5px; color:var(--ink2); font-style:italic }
.lg-ai{ margin-top:4px; width:100% }
.lg-aiout{ margin-top:10px; font-size:13px; line-height:1.6 }
.lg-aiout h3,.lg-aiout h4{ font-size:13.5px; margin:10px 0 4px }
.lg-aiout ul,.lg-aiout ol{ margin:4px 0 4px 18px; padding:0 }
.lg-taskcard{ margin-bottom:14px }
.lg-th{ display:flex; align-items:center; gap:8px; margin-bottom:8px }
.lg-th h2{ margin:0 }
.lg-cnt{ font-size:11px; color:var(--ink2); background:rgba(140,130,110,.12); padding:2px 8px; border-radius:7px }
.lg-tasks{ margin:0; padding:0; list-style:none; counter-reset:lg }
.lg-tasks li{ counter-increment:lg; margin-bottom:6px }
.lg-tasks label{ display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.6; cursor:pointer }
.lg-tasks label::before{ content:counter(lg) '.'; color:var(--ink2); font-variant-numeric:tabular-nums; flex:0 0 16px }
.lg-tasks input{ width:16px; height:16px; margin-top:3px; accent-color:var(--ink); flex:0 0 auto }
.lg-tasks input:checked + span{ color:var(--ink2); text-decoration:line-through }
.lg-acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line) }
.lg-priv{ font-size:11.5px; color:var(--ink2); line-height:1.6; background:rgba(120,110,160,.08);
  border:1px solid var(--line); border-radius:11px; padding:10px 12px }
.lg-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px }
.lg-btns .lg-ai{ flex:1 1 200px; width:auto }
.lg-ask{ flex:0 0 auto }

/* ═══════════════════════════════════════════════════════════════════════
   BỔ SUNG 6.5.0 · đợt 27 — CSS cho lớp mới (skip-link, wfull, khối 听力
   bài 19, nút cỡ xs) + thanh bên ẩn/hiện được và drawer điện thoại.
   Đặt ở cuối tệp để thắng các khai báo trước đó mà không cần !important.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · a11y: liên kết nhảy tới nội dung (chỉ hiện khi focus bàn phím) ── */
.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:10px;
  background:var(--ink);color:#fff;font-size:13px;font-weight:600;text-decoration:none;
  box-shadow:var(--sh2);transition:top .16s ease}
.skip:focus{top:12px;outline:2px solid var(--jusha);outline-offset:2px}
.wfull{width:100%}
.btn.xs{padding:4px 9px;font-size:11.5px;border-radius:7px;gap:5px;min-height:28px}

/* ── 2 · khối 听力 bài 19 (đề nghe gốc, 5 phần) ─────────────────────── */
.listen-block{margin:16px 0;padding:16px 18px;border-left:3px solid var(--jin, var(--amber))}
.listen-block .lh-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:10px;flex-wrap:wrap}
.listen-block .lh-row h4{margin:0 0 2px}
.listen-block .lh-row p{margin:0;font-size:12px;line-height:1.5;max-width:56ch}
.listen-part{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line2)}
.listen-part:first-of-type{border-top:0}
.lp-no{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--paper2);
  color:var(--ink2);border:1px solid var(--line)}
.listen-part>div{flex:1;min-width:0}
.tts-fallback{opacity:.86;border-style:dashed}
.tts-fallback:hover{opacity:1}
.pnote-inline{font-size:11.5px;color:var(--ink3);margin-right:2px}

/* ── 3 · thanh bên: nút thu gọn « (máy tính) ─────────────────────────── */
.brand{display:flex;align-items:center;gap:10px}
.brand-a{flex:1 1 auto}
.sb-toggle{display:none;flex:0 0 auto;width:26px;height:26px;margin-left:auto;border-radius:8px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink3);font-size:13px;line-height:1;
  align-items:center;justify-content:center;cursor:pointer;transition:color .15s,border-color .15s}
.sb-toggle:hover{color:var(--ink);border-color:var(--line3)}
.sb-toggle:focus-visible{outline:2px solid var(--jusha);outline-offset:2px}
.sb-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

@media (min-width:761px){
  .sb-toggle{display:inline-flex}
  #app{transition:grid-template-columns .26s cubic-bezier(.22,.61,.36,1)}
  body.sb-off #app{grid-template-columns:0 minmax(0,1fr)}
  body.sb-off aside{opacity:0;transform:translateX(-14px);overflow:hidden;pointer-events:none;
    transition:opacity .18s ease,transform .26s ease}
  aside{transition:opacity .18s ease,transform .26s ease}
  /* nút mở lại khi đã thu gọn */
  .sb-open{display:inline-flex;align-items:center;justify-content:center;position:fixed;
    top:14px;left:14px;z-index:60;width:38px;height:34px;border-radius:10px;border:1px solid var(--line);
    background:var(--card);color:var(--ink2);font-size:16px;line-height:1;box-shadow:var(--sh);
    cursor:pointer;transition:background .15s,color .15s}
  .sb-open:hover{background:var(--paper2);color:var(--ink)}
  .sb-open:focus-visible{outline:2px solid var(--jusha);outline-offset:2px}
  body.sb-off main .wrap > :first-child{margin-top:52px}
}
.sb-open[hidden],.sb-ov[hidden]{display:none !important}
.sb-ov{position:fixed;inset:0;z-index:70;background:rgba(28,27,24,.34);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .2s ease;display:none}

/* ── 4 · điện thoại: ☰ mở drawer 340px (không phủ kín màn hình) ──────── */
@media (max-width:760px){
  .sb-toggle{display:none !important}
  .sb-open{display:none !important}
  .sb-ov{display:block}
  body.mopen{overflow:hidden}
  body.mopen aside{position:fixed;inset:0 auto 0 0;z-index:80;display:flex;flex-direction:column;
    width:min(340px,86vw);max-width:86vw;min-width:0;height:100dvh;overflow-y:auto;
    overscroll-behavior:contain;padding:14px 0 calc(20px + env(safe-area-inset-bottom));
    background:var(--card);box-shadow:0 10px 40px -12px rgba(28,27,24,.45);
    -webkit-overflow-scrolling:touch;animation:sbIn .22s cubic-bezier(.22,.61,.36,1) both}
  @keyframes sbIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
  body.mopen .brand{border-bottom:1px solid var(--line2);padding-bottom:12px}
  body.mopen .userbox{margin:12px 16px 0}
  body.mopen aside nav[aria-label="Điều hướng chính"]{display:flex !important;flex-direction:column;
    overflow:visible;max-height:none;padding:0 8px;margin:10px 0 0}
  body.mopen #lessonNav{display:block !important;padding:0}
  body.mopen #lessonNav>li{display:block;width:auto}
  body.mopen #lessonNav>li>a{display:flex;align-items:center;gap:9px;min-height:40px;padding:9px 10px;
    border-radius:9px;font-size:13px}
  body.mopen #lessonNav .grp{display:block;margin:10px 0 2px;font-size:11px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink3);font-weight:700;padding:0 10px}
  body.mopen aside{-webkit-overflow-scrolling:touch;overflow-x:hidden}
  body.mopen #sbBody,body.mopen aside nav,body.mopen #lessonNav,
  body.mopen #lessonNav .lesson-list,body.mopen #lessonNav .lesson-list>ul{min-width:0;max-width:100%}
  body.mopen #lessonNav .lesson-list ul{display:grid !important;gap:6px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body.mopen #lessonNav .lesson-list ul li{min-width:0}
  body.mopen #lessonNav .lesson-list ul a{min-width:0;min-height:38px;padding:7px 9px;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}
  body.mopen #lessonNav .lesson-list ul a .n{flex:0 0 auto}
  body.mopen .side-foot{display:flex !important;flex-direction:column;gap:8px;width:auto;
    margin:14px 16px 0;padding:14px 0 0;border-top:1px solid var(--line2);overflow:visible}
  body.mopen .side-foot button{width:100%;flex:0 0 auto;min-height:42px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  #app,aside,body.mopen aside{transition:none !important;animation:none !important}
}

/* ── 5 · thanh tab bài học: KHÔNG cắt mất tab khi khung chat mở ─────────
   Trước đây 7 tab + 2 link phụ dài 772 px trong cột rộng 510 px → tab
   "Phân tích" bị đẩy ra ngoài, người học không biết còn tab nữa. */
@media (min-width:761px){
  .subnav{flex-wrap:wrap;row-gap:1px;align-items:center}
  .subnav button{white-space:nowrap}
  .subnav-x{margin-left:auto}
}
/* điện thoại: vẫn cuộn ngang nhưng chừa mép để tab cuối đọc được trọn */
@media (max-width:760px){
  .subnav{scroll-padding-inline:14px;padding-right:14px}
}

/* ── 6 · khối 热身: bảng markdown + chỗ SGK in hình ───────────────────── */
.warm-l.is-tbl{align-items:flex-start}
.warm-md{flex:1;min-width:0}
.md-tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin:2px 0 2px}
.md-tbl th,.md-tbl td{border:1px solid var(--line);padding:6px 9px;text-align:left;
  vertical-align:top;line-height:1.55}
.md-tbl th{background:var(--paper2);font-weight:700;color:var(--ink2);white-space:nowrap}
.md-tbl td:first-child{white-space:nowrap}
.imgph{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:99px;
  background:var(--paper2);border:1px dashed var(--line3);color:var(--ink3);font-size:12px}
@media (max-width:620px){
  .md-tbl{font-size:12.5px}
  .md-tbl th,.md-tbl td{padding:5px 6px}
  .md-tbl th{white-space:normal}
  .md-tbl td:first-child{white-space:normal}
}
/* ở khổ hẹp/mở khung chat thanh tab phải xuống 2 dòng → không dính đầu trang
   nữa, tránh chiếm 96 px suốt lúc cuộn bài */
@media (min-width:761px) and (max-width:1199px){
  .subnav{position:static}
}
@media (max-width:1399px){ body.chat-on .subnav{position:static} }

/* ── 7 · trang “Lỗ hổng & kế hoạch” (gap-board.js) ─────────────────────── */
.gb-skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px}
.gb-skill{border:1px solid var(--line);border-radius:11px;padding:11px 13px;background:var(--paper)}
.gb-skill-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.gb-tag{font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;color:var(--ink2)}
.gb-bar{height:6px;border-radius:99px;background:var(--line2);overflow:hidden;margin:8px 0 6px}
.gb-bar i{display:block;height:100%;border-radius:99px;background:var(--tai,var(--green));
  transition:width .4s cubic-bezier(.22,.61,.36,1)}
.gb-sub{font-size:11.5px;margin:0}
.gb-gap,.gb-plan,.gb-ctl,.gb-prof{margin-top:14px}
.gb-gap-h{display:flex;gap:11px;align-items:flex-start}
.gb-no{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;background:var(--paper2);border:1px solid var(--line);color:var(--ink2)}
.gb-t{min-width:0;flex:1}
.gb-t .zh{font-family:var(--f-zh);font-size:17px}
.gb-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.gb-meta .chip{font-size:10.5px;padding:2px 8px}
.gb-why{font-size:13.5px;line-height:1.65;margin:9px 0 6px;color:var(--ink2)}
.gb-ev{margin:4px 0 8px;font-size:12.5px}
.gb-ev summary{cursor:pointer;color:var(--ink3);padding:3px 0}
.gb-ev summary:focus-visible{outline:2px solid var(--jusha);outline-offset:2px}
.gb-ev ul{margin:6px 0 0;padding-left:18px;color:var(--ink2)}
.gb-ev li{margin:3px 0;line-height:1.5}
.gb-ev code{font-size:11.5px;background:var(--paper2);padding:1px 5px;border-radius:5px}
.gb-acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.gb-tasks{list-style:none;margin:12px 0 0;padding:0}
.gb-task{border-top:1px dashed var(--line);padding:11px 0}
.gb-task:first-child{border-top:0;padding-top:2px}
.gb-task-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px}
.gb-task p{margin:4px 0 0;font-size:12.5px}
.gb-switch{display:flex;align-items:center;gap:9px;font-size:13px;margin:9px 0;cursor:pointer}
.gb-switch input{width:16px;height:16px;accent-color:var(--ink)}
.ph-t2{font-size:17px;margin:22px 0 4px;display:flex;align-items:center;gap:8px}

/* lối vào “Lỗ hổng & kế hoạch” từ trang Tiến độ + chừa chỗ cho nút chat nổi */
.gb-link{display:block;text-decoration:none;color:inherit;margin:0 0 14px;padding:14px 16px}
.gb-link:hover{border-color:var(--ink3)}
.gb-link b{display:block;font-size:14.5px;margin-bottom:3px}
.gb-link span{display:block;font-size:12.5px;line-height:1.5}
#gbBody{padding-bottom:8px}
@media(max-width:760px){#gbBody{padding-bottom:76px}}

/* ── 7 · drawer điện thoại: mục menu là DÒNG (bỏ viền "nút" của kiểu cuộn ngang) ── */
@media (max-width:760px){
  body.mopen #lessonNav>li>a{border:0;margin:0;background:transparent;border-radius:9px;
    padding:10px;min-height:44px;font-size:13.5px}
  body.mopen #lessonNav>li>a:hover{background:var(--bg2)}
  body.mopen #lessonNav>li>a.on{background:var(--ink);color:#F8F5EE}
  body.mopen #lessonNav>li+li{margin-top:2px}
  body.mopen #lessonNav .lesson-list ul a{background:var(--bg2);border-color:var(--line2);min-height:40px}
  body.mopen #lessonNav .lesson-list ul a.on{background:var(--ink);border-color:var(--ink)}
}

/* ═══ 8 · TAB CÁ NHÂN HÓA + ÔN TẬP ĐẦU BUỔI (6.7.0) ═══════════════════════ */
/* thanh mục trong trang: dính trên, cuộn ngang trên điện thoại */
.pf-anchors{position:sticky;top:0;z-index:20;display:flex;gap:6px;overflow-x:auto;
  padding:8px 2px;margin:-6px 0 12px;background:var(--bg);border-bottom:1px solid var(--line);
  scrollbar-width:none}
.pf-anchors::-webkit-scrollbar{display:none}
.pf-anchors a{flex:0 0 auto;font-size:12.5px;padding:6px 11px;border-radius:99px;
  border:1px solid var(--line);color:var(--ink2);text-decoration:none;white-space:nowrap}
.pf-anchors a:hover{background:var(--bg2);color:var(--ink)}

/* phần hồ sơ tính tại máy nhúng trong tab: thu nhỏ khoảng đệm, không lặp tiêu đề trang */
.pf-embed .wrap,.pf-embed .pf-wrap{max-width:none;padding:0;margin:0}
.pf-embed .pf-hero,.pf-embed .pf-actions{display:none}
.pf-embed > div > .card:first-child{margin-top:0}

/* ── thẻ ôn tập đầu buổi ── */
.dr-card{margin-top:14px}
.dr-h{display:flex;gap:12px;align-items:flex-start}
.dr-ic{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);background:var(--paper2);font-size:15px;color:var(--ink2)}
.dr-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dr-sub{font-size:12.5px;line-height:1.65;margin:10px 0 12px;max-width:70ch}
.dr-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ── trang làm bài ── */
.dr-wrap{max-width:820px}
.dr-top{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.dr-back{font-size:12.5px;color:var(--ink3);text-decoration:none;margin-right:auto}
.dr-back:hover{color:var(--ink)}
.dr-bar{height:5px;border-radius:99px;background:var(--line2);overflow:hidden;margin:0 0 16px}
.dr-bar i{display:block;height:100%;background:var(--ink);transition:width .25s ease}
.dr-q{padding:22px 22px 16px}
.dr-qn{font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.dr-prompt{font-size:20px;line-height:1.75;margin:12px 0 18px}
.dr-prompt.zh{font-family:var(--f-zh);font-size:23px}
.dr-opts{display:grid;gap:9px}
.dr-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:12px 14px;min-height:48px;border-radius:11px;border:1px solid var(--line);
  background:var(--paper);font:inherit;font-size:15px;color:var(--ink);transition:background .15s,border-color .15s}
.dr-opt:hover{background:var(--bg2)}
.dr-opt.on{border-color:var(--ink);background:var(--bg2);box-shadow:inset 0 0 0 1px var(--ink)}
.dr-key{flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--paper2);border:1px solid var(--line2);color:var(--ink2)}
.dr-opt.on .dr-key{background:var(--ink);color:#fff;border-color:var(--ink)}
.dr-txt.zh{font-family:var(--f-zh);font-size:17px}
.dr-nav{display:flex;gap:10px;justify-content:space-between;margin-top:18px}
.dr-hint{font-size:12px;margin:12px 0 0}

/* ── báo cáo ── */
.dr-sum{padding:18px 20px}
.dr-score{display:flex;align-items:baseline;gap:8px}
.dr-score b{font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.dr-score span{font-size:13px;color:var(--ink3)}
.dr-bygroup{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px;font-size:13px}
.dr-res{border:1px solid var(--line);border-left-width:3px;border-radius:10px;padding:12px 14px;margin-top:10px;background:var(--paper)}
.dr-res.ok{border-left-color:var(--green)}
.dr-res.bad{border-left-color:var(--ochre, #8A672C)}
.dr-res-h{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:13.5px}
.dr-res p{margin:6px 0 0;font-size:13.5px;line-height:1.65}
.dr-src{font-size:11.5px}
.dr-next{margin-top:16px}

@media (max-width:760px){
  .dr-q{padding:16px 14px 12px}
  .dr-prompt{font-size:18px}
  .dr-prompt.zh{font-size:20px}
  .dr-nav{flex-direction:column-reverse}
  .dr-nav .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .dr-bar i{transition:none}
}

/* ═══ 9 · TIỆN ÍCH TRUY CẬP DÙNG CHUNG ══════════════════════════════════════ */
/* Chỉ dành cho trình đọc màn hình: vẫn có trong cây truy cập, không chiếm chỗ. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sr-only:focus,.sr-only:focus-within{position:static!important;width:auto;height:auto;
  margin:0;clip:auto;clip-path:none;white-space:normal}

/* ═══ 10 · CHẠM ≥44 px TRÊN ĐIỆN THOẠI (yêu cầu đợt 28) ════════════════════ */
@media (max-width:760px){
  .btn,.btn.sm,.btn.xs,.pf-anchors a,.gb-acts .btn{min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}
  .m-menu{width:44px;height:44px;min-width:44px}
  .skip{min-height:44px}
  .pf-anchors{gap:8px}
  .side-foot .btn,.side-foot button{min-height:44px}
  .aic-icon,.aic-style,.aic-chip{min-width:44px;min-height:44px}
}

/* ═══ 11 · NHÃN NGUỒN / AI + TRẠNG THÁI NỘI DUNG (đợt 29) ═══════════════════ */
/* Phân biệt rõ: nguyên văn sách (viền liền) vs phần AI bổ sung (viền đứt, nhãn). */
.ai-tag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;font-size:10px;
  letter-spacing:.02em;background:#EFE7D6;color:#7A5B23;border:1px dashed #C9A75E;
  vertical-align:2px;white-space:nowrap}
.vc-src{font-size:11px;color:var(--ink3);margin-top:2px}
.vc-flag{margin-top:4px;font-size:11.5px;line-height:1.5;color:#8A4B23;background:#FBF1E4;
  border-left:2px solid #C2803C;padding:3px 6px;border-radius:0 6px 6px 0}
.vc-ex.none{color:var(--ink3);font-size:12px;font-style:italic;border-left:2px dashed var(--line2);
  padding-left:7px}
.vc-noimg{display:inline-block;border-radius:6px;border:1px dashed var(--line2);width:auto;
  font-size:10.5px;color:var(--ink3);margin:0 0 6px;padding:1px 6px;line-height:1.6}
.co .m.none{color:var(--ink3);font-size:12px;font-style:italic}
.text-note-warn{margin:14px 0;border-left:3px solid #C2803C;background:#FBF6EC}
.text-note-warn ul{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.7}
.text-note-warn .chip{font-size:10px}

/* ═══ 12 · ẢNH THẬT CHO TỪ VỰNG (đợt 30) ════════════════════════════════════
   Ảnh chụp thật (Wikimedia Commons). Khung tỉ lệ cố định 3:2 để không nhảy
   layout khi ảnh tải xong (CLS = 0), luôn có nhãn nguồn/nhãn “ẩn dụ”. */
.vc-fig{display:block;position:relative;aspect-ratio:3/2;max-height:168px;margin:0 0 8px;
  border-radius:9px;overflow:hidden;background:#E9E3D4;line-height:0}
.vc-fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease}
.vc-fig:hover img{transform:scale(1.03)}
.vc-fig:focus-visible{outline:2px solid var(--dian);outline-offset:2px}
.vc-fig-tag{position:absolute;left:6px;bottom:6px;background:rgba(38,36,31,.78);color:#F6EFE0;
  font-size:10.5px;line-height:1.5;padding:1px 7px;border-radius:999px;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.vc-fig img{transition:none}.vc-fig:hover img{transform:none}}

.vc-credit{margin:14px 0 0;font-size:12.5px}
.vc-credit a{color:var(--dian)}
.vc-credit .muted{margin-left:6px}