/* PU English — thiết kế theo reference LingoFlow:
   sidebar trái + dashboard, nền xanh nhạt, thẻ trắng bo lớn,
   xanh dương chủ đạo + amber phụ, vòng tiến độ, mục tiêu ngày, tip navy.
   Fonts: Plus Jakarta Sans (toàn bộ UI) · JetBrains Mono (nhãn nhỏ). */

:root {
  --paper:       #0b0c12;   /* nền đen — đồng bộ landing, chốt 22/7 */
  --card:        #141726;
  --ink:         #eef0f8;
  --ink-dim:     #9ba1ba;
  --ink-mid:     #c7ccdf;   /* sáng hơn ink-dim — cho chữ mô tả dễ đọc trên nền đen */
  --accent:      #e8b04b;   /* vàng gold — user chốt 22/7 */
  --accent-deep: #d9a94a;
  --accent-soft: rgba(232,176,75,.14);
  --amber:       #f5a623;   /* CTA phụ kiểu "Take Quiz" */
  --amber-deep:  #f0b13d;   /* trên nền đen "deep" phải SÁNG hơn để chữ đọc được */
  --navy:        #182448;   /* thẻ tip */
  --ok:          #34d399;
  --ok-soft:     rgba(52,211,153,.12);
  --err:         #f87171;
  --line:        rgba(255, 255, 255, 0.1);
  --line-soft:   rgba(255, 255, 255, 0.05);
  /* thang elevation KHÓA — nền đen: shadow đen sâu, accent shadow nhuộm gold */
  --shadow-sm:        0 1px 2px rgba(0,0,0,.35);
  --shadow:           0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:        0 10px 28px rgba(0,0,0,.55);
  --shadow-accent:    0 6px 16px rgba(217,169,74,.22);
  --shadow-accent-lg: 0 10px 26px rgba(217,169,74,.28);
  --radius: 16px;
  --font-display: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-serif: 'Be Vietnam Pro', system-ui, sans-serif; /* font thiết kế riêng cho tiếng Việt, dấu hiển thị chuẩn */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* chặn cuộn ngang toàn cục — DÙNG clip chứ KHÔNG hidden (hidden phá position:sticky của hàng nút chấm) */
html, body { max-width: 100%; overflow-x: clip; }
.layout, .mainwrap, #view, .side, .side-nav { min-width: 0; max-width: 100%; }
/* chữ dài (phiên âm, cụm từ, IPA) tự xuống dòng thay vì đẩy rộng trang */
.phonetic, .pair-word, .cloze-sent, .ws-vi, .bz-big, .vs-passage, .q-prompt, .cv-text, .msg-b { overflow-wrap: anywhere; }
/* grain tinh tế phá độ phẳng số — de-AI pass 23/7 */
body::after { content: ""; position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .025;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1, h2, h3, .sec-head h2 { text-wrap: balance; }
p, .meaning-vi, .q-explain { text-wrap: pretty; }

/* ─── nền tảng tương tác (a11y pass 22/7) ─── */
button:not(:disabled), [role="button"], a { cursor: pointer; }
button, .btn, a.snav { touch-action: manipulation; }           /* bỏ delay 300ms trên mobile */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.q-opt:focus-visible, .btn:focus-visible { outline-offset: 1px; }
@media (pointer: coarse) {                                     /* sàn 44px cho ngón tay */
  .btn, .q-opt, .snav, .spot-w, .speed-pill, .cf-chip { min-height: 44px; }
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-variant-numeric: tabular-nums; /* số cùng bề rộng — BXH/điểm không nhảy layout */
}
.app-shell { width: 100%; }
.boot { color: var(--ink-dim); font-family: var(--font-mono); font-size: .85rem; padding: 48px 0; text-align: center; }

/* ═══════════ keyframes ═══════════ */
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ring-in { from { stroke-dashoffset: var(--rc); } to { stroke-dashoffset: var(--ro); } }
@keyframes bar-in { from { width: 0; } }
@keyframes flame-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes logo-in { 0% { transform: scale(.5) translateY(8px); opacity: 0; } 60% { transform: scale(1.08) translateY(-2px); opacity: 1; } 100% { transform: scale(1) translateY(0); } }

/* ═══════════ layout: sidebar + main ═══════════ */
.layout { display: flex; min-height: 100dvh; }
.side {
  width: 224px; flex: 0 0 224px;
  background: var(--card); border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  padding: 20px 14px; gap: 22px;
  position: sticky; top: 0; height: 100dvh;
}
.side-brand { display: flex; justify-content: flex-start; padding: 2px 8px; cursor: pointer; }
.logo { width: 52px; height: 52px; display: block; filter: drop-shadow(0 3px 8px rgba(217,169,74,.35)); }

.side-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.snav {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 12px;
  color: var(--ink-dim); text-decoration: none; font-weight: 700; font-size: .9rem;
  transition: background .12s ease, color .12s ease;
}
.snav svg { width: 19px; height: 19px; flex: 0 0 19px; }
.snav:hover { background: var(--paper); color: var(--ink); }
.snav.on { background: var(--accent); color: #1c1503; box-shadow: var(--shadow-accent); }

.side-foot { display: flex; flex-direction: column; gap: 8px; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; cursor: pointer; transition: background .12s ease; }
.side-user:hover { background: var(--paper); }
.side-ava {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
  background: linear-gradient(135deg, #f2c063, #d9a94a); color: #1c1503;
  display: grid; place-items: center; font-weight: 700; font-size: .8rem;
}
.side-uinfo { display: flex; flex-direction: column; min-width: 0; }
.side-uinfo b { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-uinfo i { font-style: normal; font-size: .72rem; color: var(--ink-dim); }
.side-logout {
  display: flex; align-items: center; gap: 10px; border: none; background: transparent;
  color: var(--ink-dim); font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background .12s ease, color .12s ease;
}
.side-logout svg { width: 17px; height: 17px; }
.side-logout:hover { background: rgba(248,113,113,.12); color: var(--err); }
/* chọn việc học: ôn thẻ đến hạn / học từ mới / trộn */
.study-modes { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.sm-btn { font-family: var(--font-display); font-size: .84rem; font-weight: 700; cursor: pointer;
  color: var(--ink-mid); background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 15px; min-height: 40px; transition: border-color .12s, color .12s, background .12s; }
.sm-btn b { font-family: var(--font-mono); font-size: .78rem; color: var(--accent); margin-left: 4px; }
.sm-btn:hover { border-color: rgba(232, 176, 75, .5); color: var(--ink); }
.sm-btn.on { background: var(--accent); border-color: transparent; color: #1c1503; }
.sm-btn.on b { color: #1c1503; opacity: .75; }
/* trần từ mới mỗi ngày trong Hồ sơ */
.npd-row { display: flex; gap: 8px; flex-wrap: wrap; }
.npd-btn { font-family: var(--font-display); font-size: .84rem; font-weight: 700; cursor: pointer;
  color: var(--ink-mid); background: transparent; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; min-height: 40px; transition: border-color .12s, color .12s, background .12s; }
.npd-btn:hover { border-color: rgba(232, 176, 75, .5); color: var(--ink); }
.npd-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* hướng dẫn cài extension trong trang Hồ sơ */
.ext-steps { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: .86rem; color: var(--ink-mid); line-height: 1.55; }
.ext-steps code { font-family: var(--font-mono); font-size: .78rem; color: var(--accent); background: var(--accent-soft);
  border-radius: 5px; padding: 1px 5px; }
.pcard-h + .pform a.btn { text-decoration: none; }

.mainwrap { flex: 1; min-width: 0; }
#view { max-width: 1180px; margin: 0 auto; padding: 30px clamp(16px, 3vw, 40px) 72px; }

/* ═══════════ nút ═══════════ */
.btn {
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 20px; cursor: pointer;
  transition: all .13s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn.small svg { width: 15px; height: 15px; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: scale(.985); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #1c1503; box-shadow: var(--shadow-accent); }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #1c1503; }
.btn.amber { background: var(--amber); border-color: var(--amber); color: #3d2c05; box-shadow: 0 6px 16px rgba(245,166,35,.25); }
.btn.amber:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: #3d2c05; }
.btn.big { padding: 14px 28px; font-size: 1rem; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-dim); box-shadow: none; }
.btn.ghost:hover { color: var(--accent); background: var(--accent-soft); }
.btn.small { padding: 7px 14px; font-size: .8rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ═══════════ auth ═══════════ */
.auth-wrap {
  width: min(400px, calc(100% - 32px)); margin: 8vh auto 0;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow); padding: 36px 32px;
  animation: fade-up .4s ease both; position: relative;
}
.auth-wrap::before { content: ""; position: absolute; inset: -70px -90px auto; height: 220px; z-index: -1;
  background: radial-gradient(320px 200px at 50% 30%, rgba(217,169,74,.14), transparent 70%); pointer-events: none; }
.auth-brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; margin-bottom: 4px; }
.auth-logo { margin-bottom: 14px; }
.auth-logo .logo { width: 66px; height: 66px; border-radius: 16px; }
.auth-wrap .lead { color: var(--ink-dim); font-size: .95rem; margin: 0 0 24px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .8rem; font-weight: 700; color: var(--ink-dim); margin-bottom: 6px; }
.field input {
  width: 100%; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; color: var(--ink); padding: 12px 14px;
  font-family: var(--font-display); font-size: .95rem;
}
.field input:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-err { color: var(--err); font-size: .85rem; min-height: 1.2em; margin: 6px 0 10px; }
.auth-switch { margin-top: 18px; font-size: .85rem; color: var(--ink-dim); }
.auth-switch a { color: var(--accent); cursor: pointer; text-decoration: none; font-weight: 700; }
.auth-wrap .btn { border-radius: 12px; }

/* ═══════════ dashboard head ═══════════ */
.dash-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 26px; flex-wrap: wrap;
}
.dash-head h1 { margin: 0 0 4px; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; }
.dash-head p { margin: 0; color: var(--ink-dim); font-size: .95rem; }
.dash-head p b { color: var(--accent); }
.streak-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 10px 18px; box-shadow: var(--shadow-sm);
  font-size: .88rem; color: var(--ink); white-space: nowrap;
}
.streak-pill svg { width: 18px; height: 18px; color: var(--amber); }
.streak-pill b { color: var(--accent); }

/* ═══════════ dashboard grid ═══════════ */
.dash-grid { display: grid; grid-template-columns: 1fr 324px; gap: 24px; align-items: start; }
.dash-mainc { min-width: 0; }
.dash-right { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }


/* ═══════════ thẻ "Hôm nay" + vòng tiến độ ═══════════ */
.course-card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: var(--shadow); padding: 28px; margin-bottom: 30px;
}
.pill-label {
  display: inline-block; background: var(--accent-soft); color: var(--accent-deep);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  border-radius: 999px; padding: 5px 13px; margin-bottom: 14px;
}
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cc-left { flex: 1; min-width: 0; }
.cc-left h2 { margin: 0 0 6px; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.01em; }
.cc-sub { color: var(--ink-dim); font-size: .9rem; margin-bottom: 18px; }
.ring-wrap { position: relative; width: 128px; height: 128px; flex: 0 0 128px; }
.ring { width: 100%; height: 100%; }
.ring-fg { stroke-dasharray: var(--rc); stroke-dashoffset: var(--ro); animation: ring-in .6s ease-out both; }
.ring-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 1.5rem; color: var(--accent);
}
.cc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.ccs {
  background: var(--paper); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.ccs-l { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; }
.ccs b { font-size: 1.45rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.ccs i { font-style: normal; font-size: .74rem; color: var(--ink-dim); }

/* ═══════════ section head ═══════════ */
.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.sec-head h2 { margin: 0; font-size: 1.2rem; font-weight: 800; }

/* ═══════════ danh sách lộ trình ═══════════ */
.lesson-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.lesson {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: var(--shadow-sm); padding: 18px 20px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lesson:hover { border-color: var(--line); box-shadow: var(--shadow); }
.licon {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  transition: transform .15s ease;
}
.licon svg { width: 24px; height: 24px; }
.licon[data-slug="maritime"] { background: rgba(56,189,248,.14); color: #38bdf8; }
.licon[data-slug="it"]       { background: rgba(34,211,238,.14); color: #22d3ee; }
.licon[data-slug="contract"] { background: rgba(251,146,60,.15); color: #fb923c; }
.licon[data-slug="verbal"]   { background: rgba(244,114,182,.15); color: #f472b6; }
.lbody { flex: 1; min-width: 0; }
.leyebrow { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 3px; }
.leyebrow em { font-style: normal; color: var(--accent); font-weight: 600; }
.lbody h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 700; }
.lsub { font-size: .82rem; color: var(--ink-dim); line-height: 1.4; }
.hub-list .lbody h3 { margin: 0 0 3px; }
.lgo { flex: 0 0 auto; color: var(--ink-dim); display: grid; place-items: center; opacity: .5; transition: color .15s ease, opacity .15s ease, transform .15s ease; }
.lgo svg { width: 20px; height: 20px; }
.lesson:hover .lgo { color: var(--accent); opacity: 1; transform: translateX(2px); }
.lprog { display: flex; align-items: center; gap: 10px; }
.lprog .pbar { flex: 1; }
.lprog span { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-dim); }
.pbar { height: 7px; background: var(--paper); border-radius: 6px; overflow: hidden; }
.pbar-fill { height: 100%; background: var(--accent); border-radius: 6px; }
.lesson[data-slug="maritime"] .pbar-fill { background: #38bdf8; }
.lesson[data-slug="it"] .pbar-fill { background: #22d3ee; }
.lesson[data-slug="contract"] .pbar-fill { background: #fb923c; }
.lesson[data-slug="verbal"] .pbar-fill { background: #f472b6; }
.lact { display: flex; flex-direction: column; gap: 6px; }
.lact .btn { white-space: nowrap; }

/* ═══════════ mục tiêu ngày (trong thẻ Hôm nay) ═══════════ */
.goal { margin-bottom: 14px; }
.goal-top { display: flex; justify-content: space-between; font-size: .84rem; margin-bottom: 6px; }
.goal-top b { color: var(--accent); }
.gbar { height: 8px; background: var(--paper); border-radius: 6px; overflow: hidden; }
.gbar-fill { height: 100%; background: var(--accent); border-radius: 6px; }
.gbar-fill.green { background: var(--ok); }
.goal-cheer { font-size: .82rem; color: var(--ink-dim); margin-top: 12px; }

/* tip navy đậm */
.tip-card {
  background: linear-gradient(140deg, #1c2b57, var(--navy));
  border-radius: 16px; box-shadow: var(--shadow); padding: 20px; color: #fff;
}
.tip-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #7fe3c3; }
.tip-h svg { width: 16px; height: 16px; }
.tip-card p { margin: 0; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.92); }

/* ═══════════ bảng xếp hạng ═══════════ */
.lb { background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 18px; }
.lb-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.lb-tab { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 7px 16px;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--ink-dim); cursor: pointer;
  transition: all .12s ease; }
.lb-tab:hover { border-color: var(--accent); color: var(--accent); }
.lb-tab.active { background: var(--accent); color: #1c1503; border-color: var(--accent); }
.lb-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lb-table th { text-align: left; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-dim); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.lb-table td { padding: 10px; border-bottom: 1px solid var(--line-soft); }
.lb-table tr:last-child td { border-bottom: none; }
.lb-rank { font-family: var(--font-mono); width: 2.6em; }
.lb-pts { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
tr.lb-me td { background: var(--accent-soft); }
.lb-you { background: var(--accent); color: #1c1503; font-size: .72rem; border-radius: 999px; padding: 2px 8px; font-weight: 700; margin-left: 6px; }
.lb-note { margin-top: 12px; font-size: .8rem; color: var(--ink-dim); }
.lb-note b { color: var(--accent); }
.lb-empty { padding: 20px 8px; color: var(--ink-dim); font-size: .9rem; }

/* ═══════════ study / quiz / listen: cột đọc ═══════════ */
.study-head, .card, .study-actions, .rate-row, .done-panel,
.quiz-head, .q-type, .q-passage, .q-prompt, .q-options, #qAfter, .quiz-result, .listen-stage {
  max-width: 800px; margin-left: auto; margin-right: auto;
}
/* nút quay lại: LUÔN góc trên-trái, thẳng mép nội dung */
.back-row { max-width: none; margin: 0 0 16px; }
.study-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 10px; flex-wrap: wrap; }
.study-head .prog { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-dim); }
.voice-row { display: flex; align-items: center; gap: 8px; }
.voice-row select {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; font-size: .78rem; max-width: 220px;
  font-family: var(--font-display);
}

.card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 16px; box-shadow: var(--shadow);
  padding: 52px 32px; text-align: center;
  min-height: 320px; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  animation: card-in .18s ease-out both;
}
@keyframes card-in { from { opacity: 0; transform: translateX(16px); } }
.card .term { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
.card .phonetic { font-family: var(--font-mono); color: var(--accent); font-size: 1rem; }
.card .pos { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .1em; }
.card .meaning-vi { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; }
.card .meaning-en { color: var(--ink-dim); font-size: .98rem; }
.card .example { color: var(--ink-dim); font-style: italic; font-size: .95rem; margin-top: 14px;
  border-top: 1px solid var(--line-soft); padding-top: 16px; }
.card .src { font-family: var(--font-mono); font-size: .72rem; color: var(--accent); opacity: .7; margin-top: 4px; }
.term-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.speak-btn {
  background: var(--accent-soft); border: none; border-radius: 50%;
  width: 40px; height: 40px; flex: 0 0 auto; color: var(--accent); cursor: pointer; margin: 0;
  display: grid; place-items: center; transition: transform .12s ease, background .12s ease;
}
.speak-btn:hover { background: rgba(232,176,75,.2); transform: scale(1.08); }
.speak-btn svg { width: 19px; height: 19px; }
.shadow-btn { margin: 12px auto 0; display: inline-block; }

/* tốc độ đọc */
.speed-pill {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-dim);
  border-radius: 999px; padding: 6px 12px; font-family: var(--font-display);
  font-weight: 700; font-size: .74rem; cursor: pointer; transition: all .12s ease;
}
.speed-pill.on { background: var(--accent); border-color: var(--accent); color: #1c1503; }

/* luyện phát âm có chấm điểm */
.pron { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pron-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 10px 20px; font-family: var(--font-display);
  font-weight: 700; font-size: .88rem; cursor: pointer; transition: all .13s ease;
}
.pron-btn svg { width: 17px; height: 17px; color: var(--err); }
.pron-btn:hover { border-color: var(--err); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
@keyframes rec-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,.45); } 50% { box-shadow: 0 0 0 10px rgba(248,113,113,0); } }
.pron-btn.listening { border-color: var(--err); color: var(--err); animation: rec-pulse 1.2s ease-out infinite; }
.pron-out { font-size: .88rem; min-height: 1.3em; }
.pron-good { color: var(--ok); font-weight: 700; }
.pron-mid { color: var(--amber-deep); }
.pron-bad { color: var(--err); }
.pron-wait { color: var(--ink-dim); }

.study-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
/* hàng chấm DÍNH ĐÁY màn hình mọi cỡ — thẻ dài mấy cũng bấm được, không phải lướt (23/7) */
.rate-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px;
  position: sticky; bottom: 0; z-index: 6; padding: 10px 0 12px;
  background: linear-gradient(180deg, transparent, var(--paper) 30%); }
.rate-btn {
  border: 1px solid var(--line); background: var(--card); border-radius: 12px;
  padding: 14px 6px; cursor: pointer; color: var(--ink); font-family: var(--font-display);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  transition: all .13s ease;
}
.rate-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.rate-btn .r-lbl { font-weight: 700; font-size: .95rem; }
.rate-btn .r-ivl { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-dim); }
.rate-btn.r-again .r-lbl { color: var(--err); }
.rate-btn.r-easy .r-lbl { color: var(--ok); }

.done-panel { text-align: center; padding: 72px 20px; animation: fade-up .4s ease both; }
.done-panel .big { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.done-panel p { color: var(--ink-dim); margin-bottom: 20px; }
.done-panel .btn { margin: 4px; }

/* quiz */
.quiz-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.quiz-head .qprog { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-dim); }
.timer { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: var(--accent); }
.timer.low { color: var(--err); }
.q-passage {
  background: var(--card); border-left: 3px solid var(--accent);
  border-radius: 0 16px 16px 0; box-shadow: var(--shadow-sm);
  padding: 16px 20px; font-size: .94rem; color: var(--ink-dim); margin-bottom: 18px;
}
.q-prompt { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; margin-bottom: 22px; line-height: 1.4; }
.q-type { font-family: var(--font-mono); font-size: .72rem; color: var(--accent);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.q-options { display: grid; gap: 10px; }
.q-opt {
  text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 15px 18px; cursor: pointer;
  color: var(--ink); font-family: var(--font-display); font-size: .96rem;
  transition: all .1s ease;
}
.q-opt:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.q-opt.sel-correct { border-color: var(--ok); background: var(--ok-soft); }
.q-opt.sel-wrong { border-color: var(--err); background: rgba(248,113,113,.13); }
.q-opt.reveal { border-color: var(--ok); }
.q-opt:disabled { cursor: default; }
.q-explain {
  margin-top: 18px; background: var(--accent-soft); border: none;
  border-radius: 12px; padding: 15px 18px; font-size: .92rem; color: var(--ink);
  animation: fade-up .3s ease both;
}
.q-explain b { color: var(--accent-deep); }
.quiz-foot { display: flex; justify-content: flex-end; margin-top: 18px; }
.quiz-result { text-align: center; padding: 64px 20px; animation: fade-up .4s ease both; }
.quiz-result .score { font-family: var(--font-mono); font-size: 3rem; font-weight: 600; color: var(--accent); }
.quiz-result p { color: var(--ink-dim); margin-bottom: 20px; }
.quiz-result .btn { margin: 4px; }

/* listen */
.listen-stage { text-align: center; margin-bottom: 22px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: var(--shadow); padding: 42px 20px; }
.listen-play { width: 78px; height: 78px; border-radius: 50%; border: none;
  background: var(--accent); color: #1c1503; cursor: pointer; display: grid; place-items: center;
  margin: 0 auto 12px; box-shadow: var(--shadow-accent-lg);
  transition: transform .12s ease, background .12s ease; }
.listen-play:hover { transform: scale(1.08); background: var(--accent-deep); }
.listen-play svg { width: 30px; height: 30px; }
.listen-hint { color: var(--ink-dim); font-size: .9rem; }

/* ═══════════ hồ sơ ═══════════ */
.pcard { background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 22px; }
.pcol { display: flex; flex-direction: column; gap: 20px; }
.avatar { width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, #f2c063, #d9a94a);
  color: #1c1503; display: grid; place-items: center; font-weight: 800; font-size: 1.55rem; margin-bottom: 12px;
  box-shadow: var(--shadow-accent-lg); }
.pcard-h { margin: 0 0 12px; font-size: 1rem; font-weight: 800; }
.activity { display: flex; gap: 5px; align-items: flex-end; height: 90px; }
.abar { flex: 1; background: var(--paper); border-radius: 6px; height: 100%; display: flex; align-items: flex-end; overflow: hidden; }
.abar-fill { width: 100%; background: var(--accent); border-radius: 6px; min-height: 2px; transition: height .6s ease; }
.pform { display: flex; gap: 8px; }
.pform input { flex: 1; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; font-family: var(--font-display); font-size: .9rem; color: var(--ink); }
.pform input:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); }
.pform-col { flex-direction: column; }
.pform-col .btn { align-self: flex-start; }

/* ═══════════ responsive ═══════════ */
@media (max-width: 1080px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-right { position: static; }
}
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .side { width: 100%; flex: none; height: auto; position: sticky; top: 0; z-index: 40;
    flex-direction: row; align-items: center; padding: 8px 10px; gap: 6px;
    border-right: none; border-bottom: 1px solid var(--line-soft); }
  .side-brand { padding: 0 4px; flex: none; }
  .side-nav { flex-direction: row; flex: 1; justify-content: space-around; gap: 2px; min-width: 0; }
  .snav span { display: none; }
  .snav { padding: 9px; flex: none; }        /* icon-only, đều nhau */
  .snav svg { width: 20px; height: 20px; }
  .snav-group { display: none; }               /* nhãn nhóm chỉ dành cho sidebar dọc */
  .side-foot { flex-direction: row; align-items: center; gap: 2px; flex: none; }
  .side-uinfo { display: none; }
  .side-logout span { display: none; }
  .side-ava { width: 30px; height: 30px; font-size: .8rem; }
  .logo { width: 34px; height: 34px; }
}
@media (max-width: 700px) {
  .cc-row { flex-direction: column-reverse; text-align: center; }
  .cc-left h2 { font-size: 1.25rem; }
  .cc-stats { grid-template-columns: 1fr; }
  .lesson { flex-wrap: wrap; }
  .lact { flex-direction: row; width: 100%; }
  .lact .btn { flex: 1; }
  /* 4 nút chấm DÍNH ĐÁY màn hình — không phải lướt xuống (fix 24/7: overflow-x clip để sticky sống lại) */
  .rate-row { grid-template-columns: repeat(2, 1fr); gap: 8px; position: sticky; bottom: 0; z-index: 8;
    background: var(--paper); padding: 12px 0 14px; margin-top: 12px;
    border-top: 1px solid var(--line-soft); box-shadow: 0 -8px 20px -8px rgba(0,0,0,.5); }
  .card { padding: 36px 20px; min-height: 260px; }
  .card .term { font-size: 2rem; }
  .dash-head h1 { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
/* ═══════════ HỆ CHUYỂN ĐỘNG THỐNG NHẤT ═══════════ */
:root {
  --ease: cubic-bezier(.22, 1, .36, 1);       /* ease-out mượt */
  --spring: cubic-bezier(.34, 1.56, .64, 1);  /* nảy nhẹ */
}

/* chuyển trang: xem #view + @keyframes view-in ở khối boot-splash phía dưới */

/* skeleton shimmer khi chờ dữ liệu */
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel-wrap { display: flex; flex-direction: column; gap: 16px; }
.skel {
  border-radius: 16px;
  background: linear-gradient(90deg, #191d30 25%, #222741 50%, #191d30 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}

/* flashcard: đáp án mở ra + thẻ nhún nhẹ */
@keyframes unfold { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
#answer.show { animation: unfold .35s var(--ease) both; }
@keyframes tick { 0% { transform: scale(1); } 45% { transform: scale(1.015); } 100% { transform: scale(1); } }
.card.tick { animation: tick .3s var(--ease); }

/* chấm thẻ: nút được chọn pop, thẻ trượt ra trái */
@keyframes pick-pop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1.04); } }
.rate-btn.picked { animation: pick-pop .22s var(--spring) both; border-color: var(--accent); box-shadow: var(--shadow-sm); }
@keyframes card-out { to { opacity: 0; transform: translateX(-26px) scale(.985); } }
.card.card-exit { animation: card-out .19s ease-in both; }

/* quiz: đúng nảy, sai rung */
@keyframes opt-pop { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes opt-shake { 0%,100% { transform: translateX(0); } 22% { transform: translateX(-6px); } 44% { transform: translateX(5px); } 66% { transform: translateX(-3px); } 88% { transform: translateX(2px); } }
.q-opt.sel-correct { animation: opt-pop .28s var(--spring); }
.q-opt.sel-wrong { animation: opt-shake .34s ease; }

/* luyện nghe: vòng sóng lan khi đang phát */
@keyframes play-ring { from { box-shadow: 0 0 0 0 rgba(232,176,75,.45); } to { box-shadow: 0 0 0 22px rgba(232,176,75,0); } }
.listen-play.playing { animation: play-ring 1.4s ease-out; }

/* nút: cảm giác bấm vật lý */
.btn:active, .rate-btn:active, .q-opt:active { transform: scale(.97) !important; }

/* hover icon sidebar nhích nhẹ */
.snav:hover svg { transform: translateX(1px); }
.snav svg { transition: transform .15s var(--ease); }

/* badge giọng người thật */
.human-badge {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  background: var(--ok-soft); color: var(--ok);
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  border-radius: 999px; padding: 2px 9px; letter-spacing: .02em;
}

/* kết quả chấm phát âm Azure (phoneme-level) */
.pron-azure { text-align: center; background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 14px 16px; max-width: 420px; }
.ph-good { color: var(--ok); }
.ph-mid { color: var(--amber-deep); }
.ph-bad { color: var(--err); }
.pa-hint { font-size: .74rem; color: var(--ink-dim); margin-top: 10px; }

/* ═══════════ hồ sơ chuyên nghiệp ═══════════ */
.pf-cover {
  background: linear-gradient(120deg, #23294a 0%, #171b30 55%, #10121b 100%);
  border-radius: 16px; padding: 30px 30px 26px; margin-bottom: 20px;
  box-shadow: var(--shadow-accent-lg);
}
.pf-id { display: flex; align-items: center; gap: 20px; }
.pf-cover .avatar {
  width: 84px; height: 84px; margin: 0; font-size: 1.8rem;
  background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.55);
  box-shadow: none; backdrop-filter: blur(4px);
}
.pf-who h1 { margin: 0 0 3px; color: #fff; font-size: 1.55rem; font-weight: 800; }
.pf-meta { color: rgba(255,255,255,.75); font-size: .85rem; margin-bottom: 10px; }
.pf-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-tag {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25);
  font-size: .72rem; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.pf-tag.admin { background: var(--amber); border-color: var(--amber); color: #3d2c05; }
.pf-tag.rank { background: var(--accent); color: #1c1503; border-color: transparent; }

.pf-stats { margin-bottom: 20px; grid-template-columns: repeat(4, 1fr); }
.pf-stats .ccs { background: var(--card); border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }

.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

.pf-track { margin-bottom: 14px; }
.pf-track:last-child { margin-bottom: 0; }
.pf-track-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .86rem; font-weight: 700; margin-bottom: 6px; }
.pf-track-top b { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--ink-dim); }
.pf-track[data-slug="maritime"] .pbar-fill { background: #38bdf8; }
.pf-track[data-slug="it"] .pbar-fill { background: #22d3ee; }
.pf-track[data-slug="contract"] .pbar-fill { background: #fb923c; }
.pf-track[data-slug="verbal"] .pbar-fill { background: #f472b6; }

.activity { display: flex; gap: 6px; align-items: flex-end; height: 110px; }
.acol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.acol .abar { width: 100%; flex: 1; }
.alabel { font-family: var(--font-mono); font-size: .58rem; color: var(--ink-dim); }

.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.badge {
  text-align: center; padding: 14px 8px; border-radius: 12px;
  border: 1px solid var(--line-soft); background: var(--paper);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: .45; filter: grayscale(1); transition: transform .15s var(--ease);
}
.badge.got { opacity: 1; filter: none; background: var(--card); border-color: var(--line); box-shadow: var(--shadow-sm); }

.badge-ic {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.badge.got .badge-ic { background: var(--accent); color: #1c1503; box-shadow: var(--shadow-accent); }
.badge-ic svg { width: 19px; height: 19px; }
.badge b { font-size: .78rem; }
.badge span { font-size: .72rem; color: var(--ink-dim); line-height: 1.3; }
.pf-lbl { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-dim); margin-bottom: 7px; }

@media (max-width: 800px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
  .pf-id { flex-direction: column; text-align: center; }
  .pf-tags { justify-content: center; }
  .badges { grid-template-columns: repeat(3, 1fr); }
}

/* nhãn câu từng sai + phân tích điểm yếu */
.relearn-tag { background: rgba(245,166,35,.14); color: var(--amber-deep); font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; text-transform: none; }
.ins-sec { margin-bottom: 14px; }
.ins-sec:last-child { margin-bottom: 0; }
.ins-sec > b { display: block; font-size: .82rem; margin-bottom: 6px; }
.ins-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line-soft); font-size: .84rem; }
.ins-row i { font-style: normal; color: var(--ink-dim); font-size: .72rem; }
.ins-row em { font-style: normal; font-family: var(--font-mono); font-size: .72rem; color: var(--err); white-space: nowrap; }
.ins-empty { color: var(--ink-dim); font-size: .86rem; }

/* ═══════════ onboarding mục đích ═══════════ */
.onb-wrap { width: min(720px, calc(100% - 32px)); margin: 6vh auto 40px; text-align: center; animation: fade-up .4s var(--ease) both; }
.onb-wrap .auth-logo { display: flex; justify-content: center; }
.onb-wrap h1 { font-size: 1.7rem; font-weight: 800; margin: 14px 0 6px; }
.onb-lead { color: var(--ink-dim); font-size: .95rem; margin: 0 0 26px; }
.onb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.onb-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 14px; cursor: pointer; font-family: var(--font-display);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: all .15s var(--ease); color: var(--ink);
}
.onb-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.onb-card:active { transform: scale(.97); }
.onb-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.onb-ic svg { width: 22px; height: 22px; }
.onb-card b { font-size: .92rem; }
.onb-card span { font-size: .74rem; color: var(--ink-dim); line-height: 1.35; }
@media (max-width: 640px) { .onb-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════ SIẾT CHẶT MOBILE — bớt cuộn, cân đối, nút gần nhau (feedback 24/7) ═══════════ */
@media (max-width: 640px) {
  #view { padding: 14px 14px 28px; }
  .course-card { padding: 16px; margin-bottom: 16px; }
  .pill-label { margin-bottom: 10px; }
  .cc-stats { margin-top: 14px; gap: 8px; }
  .sec-head { margin: 0 0 10px; }
  .dash-grid { gap: 14px; }
  .dash-right { gap: 12px; }
  .tip-card, .pcard { padding: 14px 16px; }
  .pcard-h { margin-bottom: 10px; }
  /* hub thẻ: gọn lại, đỡ trải rộng */
  .onb-grid { gap: 10px; margin-bottom: 14px; }
  .onb-card { padding: 14px 10px; gap: 4px; }
  .onb-ic { width: 40px; height: 40px; margin-bottom: 2px; }
  .onb-ic svg { width: 20px; height: 20px; }
  /* danh sách lộ trình + nhóm */
  .lesson { padding: 14px; gap: 12px; margin-bottom: 8px; }
  .lgroup { margin-bottom: 14px; }
  /* thẻ học: bỏ min-height ép cao, padding vừa phải → nút chấm gần hơn */
  .card { padding: 22px 16px; min-height: 0; }
  /* lộ trình IPA + chặng gọn */
  .ipa-stage { padding: 12px 14px; gap: 12px; }
  .ipa-learn-card { padding: 10px 12px; gap: 12px; }
}

/* màu 3 track mới */
.licon[data-slug="work"]  { background: rgba(45,212,191,.14); color: #2dd4bf; }
.licon[data-slug="ielts"] { background: rgba(248,113,113,.14); color: #f87171; }
.licon[data-slug="toeic"] { background: rgba(52,211,153,.14); color: #34d399; }
.lesson[data-slug="work"] .pbar-fill  { background: #2dd4bf; }
.lesson[data-slug="ielts"] .pbar-fill { background: #f87171; }
.lesson[data-slug="toeic"] .pbar-fill { background: #34d399; }
.pf-track[data-slug="work"] .pbar-fill  { background: #2dd4bf; }
.pf-track[data-slug="ielts"] .pbar-fill { background: #f87171; }
.pf-track[data-slug="toeic"] .pbar-fill { background: #34d399; }

/* nhóm lộ trình */
.lgroup { margin-bottom: 26px; }
.lgroup-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; padding-left: 2px; }
.lgroup-h b { font-size: .95rem; font-weight: 800; }
.lgroup-h span { font-size: .74rem; color: var(--ink-dim); }

/* điểm nổi bật ở màn đăng ký + thẻ phương pháp có icon */
.auth-feats { display: flex; flex-direction: column; gap: 9px; margin: 0 0 20px; }
.af { display: flex; align-items: flex-start; gap: 10px; font-size: .8rem; color: var(--ink-dim); text-align: left; }
.af svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--accent); margin-top: 2px; }
.af b { color: var(--ink); font-weight: 700; }
.mcard .method { flex-direction: row; align-items: flex-start; gap: 11px; }
.mcard .method > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.m-ic { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-top: 2px; }
.m-ic svg { width: 15px; height: 15px; }

/* ═══════════ kết quả chấm phát âm — bản trực quan ═══════════ */
.pron-azure { animation: fade-up .3s var(--ease) both; width: min(440px, 100%); }
.pa-top { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.pa-ringwrap { position: relative; width: 88px; height: 88px; flex: 0 0 88px; }
.pa-ringwrap svg { width: 100%; height: 100%; }
.pa-ringnum { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; }
.pa-right { flex: 1; min-width: 0; text-align: left; }
.pa-verdict { font-weight: 800; font-size: .95rem; margin-bottom: 8px; }
.pab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pab span { flex: 0 0 84px; font-size: .72rem; color: var(--ink-dim); text-align: left; }
.pab-bar { flex: 1; height: 7px; background: var(--line-soft); border-radius: 6px; overflow: hidden; }
.pab-fill { height: 100%; border-radius: 6px; }
.pab-fill.ph-good { background: var(--ok); }
.pab-fill.ph-mid { background: var(--amber); }
.pab-fill.ph-bad { background: var(--err); }
.pab b { flex: 0 0 26px; font-family: var(--font-mono); font-size: .74rem; font-weight: 600; text-align: right; }
.pa-heard { font-size: .82rem; color: var(--ink-dim); margin-bottom: 10px; }
.pa-heard b { color: var(--err); }
.pa-word { margin-bottom: 8px; }
.pa-word-t { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: .95rem; margin-bottom: 7px; }
.pa-word-t em { font-style: normal; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--ink-dim); }
.ph-strip { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.ph {
  font-family: var(--font-mono); font-size: .95rem; font-weight: 600;
  padding: 8px 12px; border-radius: 8px; min-width: 38px; text-align: center;
}
.ph.ph-good { background: var(--ok-soft); color: var(--ok); }
.ph.ph-mid { background: rgba(245,166,35,.14); color: var(--amber-deep); }
.ph.ph-bad { background: rgba(248,113,113,.13); color: var(--err); }
.pa-legend { display: flex; justify-content: center; gap: 16px; margin-top: 12px; font-size: .72rem; color: var(--ink-dim); }
.pa-legend span { display: flex; align-items: center; gap: 5px; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lg-dot.ph-good { background: var(--ok); }
.lg-dot.ph-mid { background: var(--amber); }
.lg-dot.ph-bad { background: var(--err); }

/* ═══════════ luyện âm (minimal pairs) + nghe lại giọng ═══════════ */
.pron-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pa-play { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.pair-opts { grid-template-columns: 1fr 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
.pair-opts .q-opt { text-align: center; font-size: 1.15rem; font-weight: 700; padding: 18px; }
.pair-say { color: var(--ink-dim); font-size: .9rem; margin-bottom: 8px; }
.pair-say b { color: var(--err); }
.pair-word { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.015em; margin: 4px 0 6px; }
.pair-tip { font-family: var(--font-mono); font-size: .78rem; color: var(--accent); margin-bottom: 16px; }

/* ═══════════ luyện giao tiếp với AI ═══════════ */
.talk-grid { max-width: 720px; margin: 0; }
.chat-box {
  max-width: 800px; margin: 0 auto 14px; background: var(--card);
  border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow-sm);
  padding: 18px; height: min(52vh, 480px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.ai { align-self: flex-start; align-items: flex-start; }
.msg-b {
  padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.45;
  animation: fade-up .25s var(--ease) both;
}
.msg.me .msg-b { background: var(--accent); color: #1c1503; border-bottom-right-radius: 4px; }
.msg.ai .msg-b { background: var(--paper); color: var(--ink); border-bottom-left-radius: 4px; }
.msg-b.typing { color: var(--ink-dim); letter-spacing: 3px; }
.msg-fix { font-size: .76rem; color: var(--amber-deep); background: rgba(245,166,35,.14); border-radius: 8px; padding: 5px 10px; margin-top: 4px; }
.chat-input {
  max-width: 800px; margin: 0 auto; display: flex; gap: 8px; align-items: center;
}
.chat-input input {
  flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 18px; font-family: var(--font-display); font-size: .95rem; color: var(--ink);
}
.chat-input input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-mic {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--err); cursor: pointer; display: grid; place-items: center;
  transition: all .13s ease; flex: 0 0 46px;
}
.chat-mic:hover { border-color: var(--err); transform: scale(1.06); }
.chat-mic.listening { animation: rec-pulse 1.2s ease-out infinite; border-color: var(--err); }
.chat-mic svg { width: 19px; height: 19px; }

/* ═══════════ dạng thẻ điền câu / gõ từ ═══════════ */
.cloze-sent { font-size: 1.35rem; font-weight: 600; line-height: 1.6; max-width: 90%; margin: 0 auto; }
.cloze-sent .blank { color: var(--accent); font-weight: 800; letter-spacing: 2px; }
.cloze-hint { color: var(--ink-dim); font-size: .9rem; margin-top: 10px; }
.term.type-q { font-size: 1.7rem; }
.type-in {
  flex: 1; max-width: 340px; background: var(--card); border: 2px solid var(--line);
  border-radius: 999px; padding: 12px 20px; font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; color: var(--ink); text-align: center;
}
.type-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.type-fb { font-weight: 800; font-size: 1rem; animation: fade-up .25s var(--ease) both; }
.type-fb.ok { color: var(--ok); }
.type-fb.bad { color: var(--err); }
.type-fb.bad b { color: var(--ink); }

/* ═══════════ công cụ AI trên thẻ ═══════════ */
.ai-tools { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.ai-out { margin-top: 10px; }
.write-box { display: flex; gap: 8px; align-items: stretch; max-width: 460px; margin: 0 auto; }
.write-box textarea {
  flex: 1; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; font-family: var(--font-display); font-size: .9rem; color: var(--ink); resize: none;
}
.write-box textarea:focus { outline: none; border-color: var(--accent); }
.wr-good { background: var(--ok-soft); color: var(--ink); border-radius: 12px; padding: 11px 14px;
  font-size: .88rem; max-width: 460px; margin: 0 auto; }
.wr-good b { color: var(--ok); }
.wr-fix { background: rgba(245,166,35,.14); color: var(--ink); border-radius: 12px; padding: 11px 14px;
  font-size: .88rem; max-width: 460px; margin: 0 auto; text-align: left; }
.wr-fix b { color: var(--amber-deep); }
.wr-fix span { color: var(--ink-dim); font-size: .82rem; }

/* ═══════════ đọc hiểu ═══════════ */
.read-card { max-width: 800px; margin: 0 auto; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 16px; box-shadow: var(--shadow); padding: 28px 30px; }
.read-body { font-size: 1.05rem; line-height: 1.9; }
mark.rd-w { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700;
  border-radius: 6px; padding: 1px 5px; cursor: pointer; transition: background .12s ease; }
mark.rd-w:hover { background: rgba(232,176,75,.2); }
.rd-pop { display: inline-block; background: #262b40; color: #eef0f8; font-size: .76rem;
  border-radius: 8px; padding: 3px 9px; margin-left: 5px; animation: fade-up .2s var(--ease) both; }
.read-tools { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.read-hint { font-size: .78rem; color: var(--ink-dim); }

/* track mới + bài tập đọc hiểu + báo tiếng Anh */
.licon[data-slug="numerical"] { background: rgba(129,140,248,.16); color: #818cf8; }
.licon[data-slug="sjt"] { background: rgba(148,163,184,.16); color: #94a3b8; }
.lesson[data-slug="numerical"] .pbar-fill, .pf-track[data-slug="numerical"] .pbar-fill { background: #818cf8; }
.lesson[data-slug="sjt"] .pbar-fill, .pf-track[data-slug="sjt"] .pbar-fill { background: #94a3b8; }
.rdq { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.rdq:last-of-type { border-bottom: none; }
.rdq-q { font-weight: 700; font-size: .95rem; margin-bottom: 10px; }
.rdq .q-options { gap: 8px; }
.rdq .q-opt { padding: 11px 14px; font-size: .88rem; }
.rdq-ex { margin-top: 10px; }
.rdq-done { background: var(--ok-soft); color: var(--ink); border-radius: 12px; padding: 12px 16px; font-size: .9rem; }
.rdq-done b { color: var(--ok); }
.news-item { background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px;
  box-shadow: var(--shadow-sm); padding: 14px 18px; margin-bottom: 10px; }
.news-t { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .92rem; }
.news-t svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--accent); margin-top: 2px; }
.news-t:hover b { color: var(--accent); }
.news-d { margin-top: 10px; color: var(--ink-dim); font-size: .88rem; line-height: 1.6; }
.news-a { display: flex; gap: 8px; margin-top: 10px; }

/* bản tin AI */
.bulletin-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.bulletin-script {
  background: linear-gradient(140deg, #1c2b57, var(--navy)); color: rgba(255,255,255,.92);
  border-radius: 16px; padding: 18px 22px; font-size: .95rem; line-height: 1.8;
  margin-bottom: 14px; box-shadow: var(--shadow); animation: fade-up .35s var(--ease) both;
}

/* lộ trình mục tiêu nổi bật + khám phá gập gọn */
.featured-wrap { margin-bottom: 18px; }
.featured-wrap .lesson { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); }
/* ─── chia lộ trình thành module ngay trên Tổng quan (bấm vào học riêng phần đó) ─── */
.mod-strip { margin: -6px 0 30px; }
.mod-strip-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mod-strip-h b { font-size: .92rem; }
.mod-strip-sub { font-size: .78rem; color: var(--ink-dim); flex: 1 1 auto; }
.mod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mod-cell { display: flex; align-items: flex-start; gap: 10px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
  font-family: inherit; color: var(--ink); transition: border-color .12s, transform .12s; }
.mod-cell:hover { border-color: rgba(232, 176, 75, .55); transform: translateY(-1px); }
.mod-cell.hot { border-color: rgba(232, 176, 75, .4); background: linear-gradient(180deg, var(--accent-soft), transparent 60%), var(--card); }
.mod-cell.done .mod-n { background: var(--ok-soft); color: var(--ok); border-color: rgba(52, 211, 153, .35); }
.mod-n { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-soft); }
.mod-b { display: block; flex: 1 1 auto; min-width: 0; }
.mod-b b { display: block; font-size: .86rem; line-height: 1.3; }
.mod-meta { display: block; font-size: .74rem; color: var(--ink-dim); margin-top: 2px; }
.mod-meta em { color: var(--accent); font-style: normal; font-weight: 600; }
.mod-cell .pbar { display: block; height: 4px; margin-top: 7px; }
.mod-cell .pbar-fill { display: block; }
@media (max-width: 640px) { .mod-grid { grid-template-columns: 1fr; } }
details.explore { margin-bottom: 30px; }
details.explore summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .9rem; color: var(--accent);
  padding: 12px 16px; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 12px; box-shadow: var(--shadow-sm); transition: all .13s ease;
}
details.explore summary::-webkit-details-marker { display: none; }
details.explore summary:hover { border-color: var(--accent); }
details.explore .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s var(--ease); margin-left: auto; }
details.explore[open] .chev { transform: rotate(-135deg); }
.licon[data-slug="medical"] { background: rgba(248,113,113,.14); color: #f87171; }
.lesson[data-slug="medical"] .pbar-fill, .pf-track[data-slug="medical"] .pbar-fill { background: #f87171; }
/* ─── minh họa trong bài học: sơ đồ SVG / ảnh thật ─── */
.illu { margin: 14px auto 4px; max-width: 580px; padding: 10px 12px; background: rgba(255,255,255,.03);
  border: 1px solid var(--line-soft); border-radius: 12px; }
.illu svg { display: block; width: 100%; height: auto; }
.illu img { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: 8px; }

.licon[data-slug="transport"] { background: rgba(251,191,36,.15); color: #fbbf24; }
.lesson[data-slug="transport"] .pbar-fill, .pf-track[data-slug="transport"] .pbar-fill { background: #fbbf24; }

/* bảng IPA */
.ipa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-width: 900px; margin: 0 auto 22px; }
.ipa-cell {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px;
  box-shadow: var(--shadow-sm); padding: 12px 10px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display);
  transition: all .13s ease;
}
.ipa-cell:hover { border-color: var(--accent); }
.ipa-cell b { font-family: var(--font-mono); font-size: 1.3rem; color: var(--accent); }
.ipa-cell span { font-size: .8rem; font-weight: 700; color: var(--ink); }
.ipa-cell i { font-style: normal; font-size: .72rem; color: var(--ink-dim); line-height: 1.3; }

/* điểm bài từ hay nhầm */
.cf-best { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; margin-top: 4px;
  background: var(--accent-soft); color: var(--accent-deep); }
.cf-best.perfect { background: var(--ok-soft); color: var(--ok); }
.cf-best.new { background: var(--paper); color: var(--ink-dim); }

/* kết quả Từ hay nhầm — trực quan */
.cf-result { max-width: 640px; margin: 14px auto 0; text-align: center; }
.cf-verdict { font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; }
.cf-verdict.ok { color: var(--ok); } .cf-verdict.bad { color: var(--err); }
.cf-sentence { background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px;
  box-shadow: var(--shadow-sm); padding: 14px 18px; font-size: 1.02rem; margin-bottom: 12px; }
mark.cf-ans { background: var(--ok-soft); color: var(--ok); font-weight: 800; border-radius: 6px; padding: 1px 7px; }
.cf-chips { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.cf-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; padding: 8px 16px; cursor: pointer; font-family: var(--font-display); }
.cf-chip svg { width: 15px; height: 15px; color: var(--accent); }
.cf-chip span { font-weight: 800; font-size: .92rem; }
.cf-chip i { font-style: normal; font-size: .72rem; color: var(--ink-dim); }
.cf-chip.good { border-color: var(--ok); background: var(--ok-soft); }
.cf-chip.good svg { color: var(--ok); }
.cf-result .q-explain { text-align: left; }
.quiz-foot { gap: 10px; display: flex; justify-content: flex-end; }

/* giải thích Từ hay nhầm — tách khối rõ ràng */
.cf-chip { text-align: left; }
.cf-chip > div { display: flex; flex-direction: column; }
.cf-chip i { max-width: 220px; white-space: normal; line-height: 1.35; }
.cf-why, .cf-tip {
  text-align: left; border-radius: 12px; padding: 12px 15px; font-size: .88rem;
  line-height: 1.6; margin-bottom: 8px;
}
.cf-why { background: var(--accent-soft); color: var(--ink); }
.cf-why b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-deep); margin-bottom: 3px; }
.cf-tip { background: rgba(245,166,35,.09); color: var(--ink); }
.cf-tip b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--amber-deep); margin-bottom: 3px; }

/* quy tắc chọn: mỗi từ 1 dòng */
.cf-rule { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; }
.cf-rule .w { flex: 0 0 auto; min-width: 86px; font-weight: 800; font-size: .9rem; }
.cf-rule.good .w { color: var(--ok); }
.cf-rule:not(.good) .w { color: var(--ink-dim); }
.cf-rule span:last-child { font-size: .86rem; line-height: 1.5; }

/* dạng bài + câu AI + soi lỗi */
.mode-tag { font-style: normal; color: var(--accent); font-weight: 700; }
.ai-tag { font-style: normal; background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 700; }
/* dạng SOI LỖI: câu tách thành từng từ bấm được, không lộ trước từ sai */
.cloze-sent.cf-spot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 2px; }
.spot-w { border: 1px solid transparent; background: none; font: inherit; color: inherit; padding: 2px 7px; border-radius: 8px; cursor: pointer; min-height: 36px; }
.spot-w:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.spot-w:disabled { cursor: default; }
.spot-w.found { background: rgba(248,113,113,.13); border-color: var(--err); color: var(--err); text-decoration: line-through; animation: opt-pop .28s var(--spring); }
.spot-w.miss { border-color: var(--line); background: var(--paper); opacity: .7; animation: opt-shake .34s ease; }
/* huy hiệu hạng 1-2-3 thay emoji medal */
.rk { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: .72rem; vertical-align: middle; }
.rk1 { background: rgba(245,166,35,.2); color: #fbc65d; }
.rk2 { background: rgba(148,163,184,.18); color: #b8c2d0; }
.rk3 { background: rgba(217,122,16,.18); color: #e09a5e; }
.speed-pill svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.cv-ava svg { width: 15px; height: 15px; }
.listen-stage .listen-play { margin-bottom: 14px; }

/* ═══════════ Writing Lab ═══════════ */
.write-task { max-width: 800px; margin: 0 auto 14px; background: var(--accent-soft); border-radius: 12px; padding: 14px 18px; }
.write-task b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-deep); margin-bottom: 4px; }
.write-task p { margin: 0; font-size: .93rem; line-height: 1.6; }
.write-editor { max-width: 800px; margin: 0 auto; }
.write-editor textarea {
  width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; font-family: var(--font-display); font-size: .95rem; color: var(--ink);
  line-height: 1.7; resize: vertical;
}
.write-editor textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.write-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.wc { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-dim); }
.wr-card { max-width: 800px; margin: 18px auto 0; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 16px; box-shadow: var(--shadow); padding: 22px; }
.wr-card .pa-ringnum small { font-size: .8rem; color: var(--ink-dim); }
.wr-notes { margin-top: 14px; background: rgba(245,166,35,.09); border-radius: 12px; padding: 12px 15px; }
.wr-notes b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--amber-deep); margin-bottom: 5px; }
.wr-note { font-size: .88rem; line-height: 1.6; }
.wr-fixed { margin-top: 12px; background: var(--ok-soft); border-radius: 12px; padding: 12px 15px; }
.wr-fixed b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ok); margin-bottom: 5px; }
.wr-fixed p { margin: 0 0 10px; font-size: .92rem; line-height: 1.7; white-space: pre-wrap; }

/* ═══════════ chép chính tả ═══════════ */
.dict-input { max-width: 800px; margin: 0 auto; display: flex; gap: 10px; align-items: stretch; }
.dict-input textarea {
  flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 15px; font-family: var(--font-display); font-size: 1rem; color: var(--ink); resize: none;
}
.dict-input textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dict-diff { line-height: 2; }
.dw-ok { color: var(--ok); font-weight: 600; }
.dw-miss { color: var(--err); font-weight: 800; background: rgba(248,113,113,.13); border-radius: 6px; padding: 1px 6px; }

/* ═══════════ bài tập viết định kỳ + BXH ═══════════ */
.asg-card { max-width: 800px; margin: 0 auto 26px; background: var(--card); border: 2px solid var(--accent);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 22px; }
.asg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.asg-done { background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: .74rem; border-radius: 999px; padding: 4px 12px; }
.asg-todo { background: rgba(245,166,35,.14); color: var(--amber-deep); font-weight: 700; font-size: .74rem; border-radius: 999px; padding: 4px 12px; }
.asg-card h2 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 800; }
.asg-card > p { margin: 0 0 14px; color: var(--ink-dim); font-size: .92rem; line-height: 1.6; }
.asg-foot { display: flex; align-items: center; gap: 14px; }
.asg-count { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-dim); }
.asg-grade { font-size: .82rem; font-weight: 600; color: var(--accent); margin: 8px 0 4px; line-height: 1.45; }
.asg-board { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.asg-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: .86rem; }
.asg-row.me { background: var(--accent-soft); border-radius: 8px; padding: 5px 8px; }
.asg-row b { font-family: var(--font-mono); color: var(--accent); }
.asg-rank { background: var(--accent-soft); color: var(--ink); border-radius: 12px; padding: 11px 15px;
  font-size: .9rem; margin-bottom: 14px; }
.asg-rank b { color: var(--accent-deep); }

/* ═══════════ hội thoại 2 giọng ═══════════ */
.convo-box { max-width: 800px; margin: 0 auto; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 16px; box-shadow: var(--shadow-sm); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.cv-line { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; max-width: 85%; }
.cv-line.w { align-self: flex-start; background: var(--paper); }
.cv-line.m { align-self: flex-end; background: var(--accent-soft); flex-direction: row-reverse; }
.cv-line.on { outline: 2px solid var(--accent); }
.cv-ava { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 26px;
  font-weight: 800; font-size: .8rem; color: #fff; }
.cv-line.w .cv-ava { background: #d63d72; }
.cv-line.m .cv-ava { background: var(--accent); color: #1c1503; }
.cv-text { font-size: .93rem; line-height: 1.5; }
.convo-qs { max-width: 800px; margin: 0 auto; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 16px; box-shadow: var(--shadow-sm); padding: 18px; }

/* gợi ý dàn ý */
.write-hints-bar { max-width: 800px; margin: 0 auto 10px; display: flex; align-items: center; gap: 12px; }
.hints-card { max-width: 800px; margin: 0 auto 12px; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 12px; box-shadow: var(--shadow-sm); padding: 16px 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hints-col b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-deep); margin-bottom: 6px; }
.hint-row { font-size: .88rem; padding: 3px 0; line-height: 1.5; }
.hint-row.phrase { font-family: var(--font-mono); font-size: .8rem; color: var(--ink); }
@media (max-width: 640px) { .hints-card { grid-template-columns: 1fr; } }
.type-fb-wrap { max-width: 800px; margin: 10px auto 0; text-align: center; min-height: 1.4em; }
.type-fb-wrap .type-fb { font-size: .88rem; font-weight: 700; }

/* reduced-motion: tắt smooth scroll (grain là tĩnh, không ảnh hưởng) */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ═══════════ Blitz: luyện phản xạ ═══════════ */
.bz-top { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.bz-stat { margin-left: auto; color: var(--ink-dim); font-size: .85rem; }
.bz-stat + .bz-stat { margin-left: 0; }
.bz-stat b { color: var(--accent); font-family: var(--font-mono); }
.bz-timer { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-bottom: 22px; }
/* thanh thời gian: co bằng transform (GPU) thay vì width → chạy mượt, không nhảy bậc */
.bz-timer i { display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform-origin: left center; will-change: transform; }
.bz-ready { display: grid; place-items: center; gap: 6px; min-height: 260px; }
.bz-ready span { font-size: clamp(3rem, 12vw, 5rem); font-weight: 800; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums; }
.bz-ready em { font-style: normal; color: var(--ink-dim); font-size: .9rem; }
/* chọn nguồn báo (BBC / VnExpress / trộn) + nhãn nguồn trên từng tin */
.news-src { flex-wrap: wrap; margin-bottom: 12px; }
/* bài đọc hộ qua server (bbc.com bị nhà mạng chặn thì vẫn đọc được trong app) */
.news-full-box:empty { display: none; }
.art { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); max-width: 68ch; }
.art h4 { font-size: 1.02rem; line-height: 1.35; margin: 0 0 4px; text-wrap: balance; }
.art-src { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-dim); margin-bottom: 10px; }
.art p { font-size: .92rem; line-height: 1.75; color: var(--ink-mid); margin: 0 0 11px; text-wrap: pretty; }
.news-out { opacity: .75; }
.news-src-tag { margin-left: auto; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 7px; white-space: nowrap; flex: 0 0 auto; }
.bz-q { text-align: center; margin-bottom: 20px; min-height: 96px; }
.bz-big { font-size: clamp(1.3rem, 3.5vw, 1.9rem); font-weight: 800; text-wrap: balance; }
.bz-ask { color: var(--ink-dim); font-size: .85rem; margin-top: 8px; }
.bz-img { max-width: min(520px, 100%); max-height: 300px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.bz-au { margin: 0 auto; }
.bz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; margin: 0 auto; }
.bz-opt { min-height: 56px; font-size: .95rem; }
.bz-sum { display: flex; gap: 26px; justify-content: center; margin: 14px 0 6px; color: var(--ink-dim); font-size: .9rem; }
.bz-sum b { color: var(--accent); font-family: var(--font-mono); }
@media (max-width: 600px) { .bz-opts { grid-template-columns: 1fr; } .bz-opt { min-height: 48px; } }

/* ═══════════ dịch câu ghép từ (Luyện viết) ═══════════ */
.ws-entry { display: flex; align-items: center; gap: 18px; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; padding: 18px 20px; }
.ws-entry p { margin: 4px 0 0; color: var(--ink-dim); font-size: .88rem; }
.ws-vi { font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; text-wrap: balance; }
.ws-line { min-height: 52px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.ws-hint { color: var(--ink-dim); font-size: .85rem; }
.ws-bank { display: flex; flex-wrap: wrap; gap: 8px; }
/* ô gõ thẳng câu: bỏ trần 340px của .type-in (câu tiếng Anh dài cần cả bề ngang), chữ căn trái */
.ws-type { width: 100%; max-width: none; margin-top: 12px; text-align: left; padding-left: 18px; }
.ws-chip { font-family: var(--font-display); font-size: .92rem; font-weight: 600; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px;
  min-height: 40px; cursor: pointer; transition: border-color .13s, background .13s; }
.ws-chip:hover { border-color: var(--accent); }
.ws-chip.on { background: var(--accent-soft); border-color: var(--accent); }
.ws-chip:disabled { opacity: .55; cursor: default; }

/* ═══════════ luyện đọc to (Đọc hiểu) ═══════════ */
.ra-list { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.ra-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.ra-mic { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; }
.ra-sent { font-size: .95rem; line-height: 1.55; padding-top: 8px; }
.ra-out { margin: 0 0 6px 52px; }

/* ═══════════ thêm lộ trình + forecast ═══════════ */
.add-track-row { margin: 14px 0 4px; }
.add-track-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.forecast { margin-top: 8px; font-size: .82rem; color: var(--ink-dim); }
.forecast b { color: var(--accent); font-family: var(--font-mono); }
.bz-mean { text-align: center; margin: 14px auto 0; max-width: 640px; font-size: .95rem;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 14px;
  animation: fade-up .18s ease both; }
.bz-mean b { color: var(--accent); }
.bz-ipa { color: var(--ink-dim); font-family: var(--font-mono); font-size: .85rem; }

/* kết quả chấm CÂU gọn: từ = chip 1 dòng, chạm mới xổ âm vị (23/7) */
.pa-flow { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.pa-w { font-family: var(--font-display); font-size: .9rem; font-weight: 600; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; min-height: 36px;
  display: inline-flex; align-items: center; gap: 6px; transition: border-color .13s; }
.pa-w i { font-style: normal; font-family: var(--font-mono); font-size: .72rem; opacity: .8; }
.pa-w.ph-good { border-color: rgba(52,211,153,.4); }
.pa-w.ph-mid { border-color: rgba(245,166,35,.45); }
.pa-w.ph-bad { border-color: rgba(248,113,113,.45); }
.pa-w.sel { background: var(--accent-soft); border-color: var(--accent); }
.pa-detail { margin: 8px 0 2px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 12px; font-size: .9rem; }
.ph .ph-h { font-style: normal; font-size: .82em; opacity: .9; margin-left: 2px; }

/* ═══════════ trải nghiệm tải & chuyển trang (23/7) ═══════════ */
.boot-splash { min-height: 80dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: boot-fade .35s ease both; }
.boot-splash svg { width: 58px; height: 58px; filter: drop-shadow(0 6px 20px rgba(217,169,74,.28)); animation: boot-breathe 2.4s ease-in-out infinite; }
.boot-splash b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.boot-splash span { width: 128px; height: 3px; border-radius: 999px; background: var(--line-soft); overflow: hidden; position: relative; }
.boot-splash span::after { content: ""; position: absolute; inset: 0; width: 42%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: boot-slide 1.15s ease-in-out infinite; }
@keyframes boot-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-breathe { 0%,100% { opacity: .82; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes boot-slide { 0% { left: -42%; } 100% { left: 100%; } }
@keyframes spin { to { transform: rotate(1turn); } }
/* mọi "Đang tải/Đang lấy…" rải rác: kèm vòng xoay gold nhỏ thay chữ trần */
.boot { display: flex; align-items: center; justify-content: center; gap: 10px; }
.boot::before { content: ""; width: 17px; height: 17px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .7s linear infinite; }
/* chuyển trang mượt: #view mới sinh ra là lướt vào nhẹ (1 container, không stagger) */
#view { animation: view-in .18s ease-out both; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .boot-splash svg, .boot-splash span::after, .boot::before, #view { animation: none !important; } }
.bz-imean { font-size: 1.05rem; font-weight: 700; margin-top: 10px; text-wrap: balance; }
.ex-vi { color: var(--ink-dim); font-size: .85rem; font-style: italic; opacity: .95; }

/* ═══════════ VSTEP exam mode ═══════════ */
.vstep-bands { font-size: .85rem; color: var(--ink-dim); background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 14px; }
.vstep-bands b { color: var(--accent); font-family: var(--font-mono); }
.vs-bar { display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 6; background: var(--paper); padding: 10px 0; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.vs-title { font-weight: 700; font-size: .95rem; }
.vs-timer { margin-left: auto; font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 14px; }
.vs-timer.low { color: var(--err); background: rgba(248,113,113,.14); animation: splash-pulse 1s ease-in-out infinite; }
@keyframes splash-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.vs-block { margin-bottom: 26px; }
.vs-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vs-block-head b { font-size: 1rem; color: var(--accent); }
.vs-passage { background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 18px; line-height: 1.75; font-size: .96rem; white-space: pre-wrap; margin-bottom: 16px; }
.vs-q { margin-bottom: 16px; }
.vs-q-t { font-weight: 600; margin-bottom: 8px; font-size: .94rem; }
.vs-opts { display: grid; gap: 7px; }
.vs-opt { text-align: left; font-family: var(--font-display); font-size: .9rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; min-height: 42px; cursor: pointer; transition: border-color .12s, background .12s; }
.vs-opt:hover { border-color: var(--accent); }
.vs-opt.sel { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.vs-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.vs-submit-row b { color: var(--accent); font-family: var(--font-mono); }
.vs-rev-block { margin-bottom: 20px; } .vs-rev-block h4 { color: var(--accent); font-size: .9rem; margin: 0 0 10px; }
.vs-rev-q { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; margin-bottom: 14px; font-size: .9rem; }
.vs-rev-q.ok { border-left-color: var(--ok); } .vs-rev-q.bad { border-left-color: var(--err); }
.vs-rev-o { padding: 3px 8px; border-radius: 6px; margin: 3px 0; color: var(--ink-dim); }
.vs-rev-o.right { color: var(--ok); background: var(--ok-soft); font-weight: 600; }
.vs-rev-o.wrong { color: var(--err); background: rgba(248,113,113,.12); text-decoration: line-through; }
.vs-rev-ex { font-size: .84rem; color: var(--ink-dim); font-style: italic; margin-top: 5px; }
.new-word-tag { display: inline-block; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .7rem; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }
/* thẻ hub đang bảo trì: mờ, không bấm được, nhãn vàng cảnh báo */
.lesson.off { opacity: .55; cursor: default; }
.lesson.off:hover { border-color: var(--line-soft); box-shadow: var(--shadow-sm); transform: none; }
.lesson.off .leyebrow { color: var(--amber-deep); }
/* từ hay quên (leech): quên ≥2 lần → ưu tiên đầu hàng đợi + chèn thêm ngoài lịch hẹn */
.leech-tag { display: inline-block; background: rgba(248,113,113,.13); color: var(--err); font-weight: 700; font-size: .7rem; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }

/* thẻ học: ảnh minh họa nhỏ gọn hơn để nút chấm gần tầm tay */
#cardBox .illu { max-width: 480px; margin: 12px auto 2px; }
#cardBox .illu img { max-height: 300px; }
#cardBox .illu svg { max-height: 320px; }
/* từ mới: giấu nghĩa tiếng Anh phụ + nguồn cho gọn (đã có nghĩa VN + ví dụ) */
#cardBox #answer .meaning-en:empty, #cardBox #answer .src { display: none; }
.ipa-say { background: var(--accent-soft); color: var(--accent); border: none; border-radius: 8px; width: 30px; height: 30px; padding: 0; cursor: pointer; vertical-align: middle; display: inline-grid; place-items: center; }
.ipa-say svg { width: 16px; height: 16px; }
.ipa-say:hover { background: var(--accent); color: #1c1503; }
/* nhóm tiêu đề nhỏ trong sidebar (gom 4 kỹ năng...) */
.snav-group { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim); opacity: .7; padding: 14px 12px 5px; }
.snav-group:first-of-type { padding-top: 6px; }

/* ═══════════ Lộ trình IPA ═══════════ */
.ipa-path { display: grid; gap: 10px; }
.ipa-stage { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; transition: border-color .13s;
  color: var(--ink); font-family: var(--font-display); }
.ipa-stage:hover:not(.locked) { border-color: var(--accent); }
.ipa-stage.done { border-color: rgba(52,211,153,.4); }
.ipa-stage.locked { opacity: .5; cursor: not-allowed; }
.ipa-stage-no { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-family: var(--font-mono); background: var(--accent-soft); color: var(--accent); }
.ipa-stage.done .ipa-stage-no { background: var(--ok-soft); color: var(--ok); }
.ipa-stage-body { display: flex; flex-direction: column; gap: 2px; }
.ipa-stage-body b { font-size: 1rem; }
.ipa-stage-syms { font-family: var(--font-mono); font-weight: 500; color: var(--accent); font-size: .88rem; }
.ipa-stage-body span { color: var(--ink-mid); font-size: .85rem; line-height: 1.4; }
.ipa-stage-score { color: var(--ink-dim); font-size: .78rem; font-style: normal; margin-top: 2px; }
.ipa-stage.done .ipa-stage-score { color: var(--ok); }
.ipa-learn { display: grid; gap: 8px; margin-bottom: 8px; }
.ipa-learn-card { display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .13s; }
.ipa-learn-card:hover { border-color: var(--accent); }
.ipa-learn-card > b { flex: none; font-family: var(--font-mono); font-size: 1.6rem; color: var(--accent); width: 56px; text-align: center; }
.ipa-learn-w { font-weight: 700; }
.ipa-learn-card i { color: var(--ink-dim); font-size: .85rem; font-style: normal; }
.ipa-learn-more { color: var(--ink-dim); font-size: .8rem; margin-top: 3px; }
.ipa-learn-say { margin-left: auto; color: var(--accent); }
.ipa-learn-say svg { width: 20px; height: 20px; }
.chunk-tag { display: inline-block; background: rgba(56,189,248,.16); color: #38bdf8; font-weight: 700; font-size: .68rem; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.fc-inline { color: var(--ink-dim); }
.fc-inline b { color: var(--accent); font-family: var(--font-mono); }

/* ═══════════ Chương trình Hàng hải chuyên sâu ═══════════ */
.program-banner { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: linear-gradient(135deg, rgba(232,176,75,.14), rgba(232,176,75,.04)); border: 1px solid rgba(232,176,75,.35);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; transition: border-color .13s; color: var(--ink); }
.program-banner:hover { border-color: var(--accent); }
.program-banner .onb-ic { flex: none; margin: 0; }
.program-banner b { font-size: 1.02rem; display: block; }
.program-banner span { font-size: .84rem; color: var(--ink-dim); }
.program-arr { margin-left: auto; color: var(--accent); font-size: 1.4rem; flex: none; }
.mprog-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mprog-meta { font-style: normal; font-size: .76rem; color: var(--ink-mid); white-space: nowrap; }
.dict-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.dict-hint { margin-top: 10px; background: var(--accent-soft); border: 1px solid rgba(232,176,75,.3); border-radius: 10px; padding: 10px 14px; font-size: .9rem; }
.dict-hint-words { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dict-chip { display: inline-block; background: var(--card); border: 1px solid rgba(232,176,75,.35);
  color: var(--ink); font-weight: 600; font-size: .9rem; padding: 6px 13px; border-radius: 999px;
  font-family: var(--font-display); cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease; }
.dict-chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dict-chip:active { transform: scale(.94); }
.dict-chip.used { opacity: .45; }

/* ─── Thêm từ của bạn (viewAddWord) ─── */
.aw-wrap { max-width: 600px; margin: 0 auto; }
.aw-empty { background: transparent; box-shadow: none; border-style: dashed; border-color: var(--line); }
.aw-steps { display: flex; flex-direction: column; gap: 12px; }
.aw-step { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--ink-mid); line-height: 1.4; }
.aw-step-n { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: .82rem; font-weight: 600; }
.aw-box { background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 14px; }
.aw-box:last-child { margin-bottom: 0; }
.aw-label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-dim); margin-bottom: 8px; }
.aw-hint { font-size: .8rem; color: var(--ink-dim); margin: 10px 0 0; }
.aw-box textarea, .aw-prev textarea { width: 100%; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; color: var(--ink); font-family: var(--font-display); font-size: .95rem; resize: vertical; }
.aw-box textarea:focus, .aw-prev textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.aw-prev-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.aw-img { flex: 0 0 120px; width: 120px; height: 120px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.aw-img-none { display: grid; place-items: center; background: var(--paper); color: var(--ink-dim); }
.aw-img-none svg { width: 40px; height: 40px; }
.aw-word { font-size: 1.7rem; font-weight: 800; line-height: 1.12; overflow-wrap: anywhere; }
.aw-ipa { font-family: var(--font-mono); color: var(--accent); margin-top: 2px; }
.aw-auto { display: inline-block; font-family: var(--font-mono); font-size: .62rem; color: var(--ok); text-transform: uppercase;
  letter-spacing: .1em; border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.1); border-radius: 999px; padding: 2px 8px; margin-top: 8px; }
.aw-ex { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; margin-top: 6px; font-size: .92rem; }
.aw-ex-vi { color: var(--ink-mid); font-size: .85rem; margin-top: 3px; }
.aw-actions { display: flex; gap: 10px; margin-top: 16px; }
.aw-blk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.aw-blk-head b { font-size: 1.02rem; }
.aw-blk-n { font-family: var(--font-mono); font-size: .78rem; color: var(--accent); }
.aw-blk-row { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
/* >10 từ: chia 2 cột trên desktop cho đỡ dài; điện thoại vẫn 1 cột */
@media (min-width: 560px) { .aw-blk-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; } }
.aw-blk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.aw-blk-top b { font-size: .95rem; overflow-wrap: anywhere; }
.aw-blk-ipa { font-family: var(--font-mono); font-size: .72rem; color: var(--accent); }
.aw-blk-m { display: block; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 12px; color: var(--ink); font-family: var(--font-display); font-size: .9rem; }
.aw-blk-m:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.aw-blk-x { margin-left: auto; background: transparent; border: 0; color: var(--ink-dim); cursor: pointer; font-size: 1rem; padding: 4px 9px; border-radius: 8px; }
.aw-blk-x:hover { color: var(--err); background: rgba(248,113,113,.1); }
.done-check { width: 56px; height: 56px; border-radius: 50%; background: rgba(52,211,153,.12); color: var(--ok); display: grid; place-items: center; margin: 0 auto; }
.done-check svg { width: 30px; height: 30px; }
@media (max-width: 640px) { .aw-img { flex-basis: 96px; width: 96px; height: 96px; } }
.aw-warn { display: inline-block; font-family: var(--font-mono); font-size: .62rem; color: var(--amber); text-transform: uppercase;
  letter-spacing: .08em; border: 1px solid rgba(245,166,35,.35); background: rgba(245,166,35,.1); border-radius: 999px; padding: 2px 8px; margin-top: 8px; }
.aw-blk-row.dup { opacity: .55; }
.dup-tag { display: inline-block; font-family: var(--font-mono); font-size: .62rem; color: var(--amber); font-style: normal;
  border: 1px solid rgba(245,166,35,.35); border-radius: 999px; padding: 1px 7px; }

/* ─── Trang quản trị ─── */
.adm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.adm-row:last-child { border-bottom: 0; }
.adm-row b { font-size: .92rem; }
.adm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
.adm-route { font-family: var(--font-mono); font-size: .72rem; color: var(--accent); margin-left: auto; }
.adm-num { margin-left: auto; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-dim); white-space: nowrap; }
.adm-list { display: flex; flex-direction: column; }
.adm-learner { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.adm-learner:last-child { border-bottom: 0; }
.adm-l-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.adm-l-email { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-dim); margin-top: 1px; word-break: break-all; }
.adm-l-meta { font-size: .8rem; color: var(--ink-mid); margin-top: 3px; line-height: 1.45; }
.adm-on { color: var(--ok); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.adm-off { color: var(--ink-dim); font-size: .76rem; white-space: nowrap; }
.adm-tag { font-family: var(--font-mono); font-size: .58rem; color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft); border-radius: 999px; padding: 1px 6px; text-transform: uppercase; }
/* ─── chi tiết học viên: bấm vào hàng để mở hoạt động + từ tự thêm ─── */
.adm-l-hit { cursor: pointer; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; transition: background .12s; }
.adm-l-hit:hover { background: rgba(255, 255, 255, .035); }
.adm-caret { width: 14px; height: 14px; flex: 0 0 auto; position: relative; }
.adm-caret::before { content: ""; position: absolute; left: 3px; top: 4px; width: 6px; height: 6px;
  border-right: 1.6px solid var(--ink-dim); border-bottom: 1.6px solid var(--ink-dim);
  transform: rotate(45deg); transition: transform .15s; }
.adm-learner.open .adm-caret::before { transform: rotate(225deg); border-color: var(--accent); }
.adm-detail { margin-top: 10px; padding: 12px; background: rgba(255, 255, 255, .028); border: 1px solid var(--line-soft); border-radius: 12px; }
.adm-sub { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-dim); margin: 14px 0 7px; }
.adm-sub:first-child { margin-top: 0; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { font-size: .76rem; color: var(--ink-mid); background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 10px; }
.adm-chip b { color: var(--ink); }
.adm-bars { display: flex; align-items: flex-end; gap: 4px; height: 58px; }
.adm-bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.adm-bar i { display: block; width: 100%; min-height: 2px; background: var(--accent-soft);
  border-top: 2px solid var(--accent); border-radius: 3px 3px 0 0; }
.adm-bar em { font-family: var(--font-mono); font-size: .56rem; color: var(--ink-dim); font-style: normal; }
.adm-feed { display: flex; flex-direction: column; }
.adm-feed-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--line-soft); font-size: .8rem; }
.adm-feed-row:last-child { border-bottom: 0; }
.adm-kind { flex: 0 0 auto; font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; }
.adm-kind.k-add, .adm-kind.k-pron { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
.adm-feed-lb { flex: 1 1 40%; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.adm-feed-x { flex: 1 1 30%; min-width: 0; color: var(--ink-mid); font-size: .76rem; overflow-wrap: anywhere; }
.adm-feed-t { flex: 0 0 auto; margin-left: auto; font-family: var(--font-mono); font-size: .66rem; color: var(--ink-dim); text-align: right; }
.adm-ipa { font-family: var(--font-mono); font-size: .7rem; color: var(--accent); }
@media (max-width: 640px) {
  .adm-feed-row { flex-wrap: wrap; gap: 4px 8px; }
  .adm-feed-lb, .adm-feed-x { flex-basis: 100%; }
  .adm-feed-t { margin-left: 0; }
}
.pte-skill { font-size: .68rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; margin-top: 4px; }
.reorder-line, .reorder-bank { display: flex; flex-direction: column; gap: 8px; }
.reorder-bank { margin-top: 10px; }
.reorder-item { text-align: left; font-family: var(--font-display); font-size: .9rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; cursor: pointer; line-height: 1.5; transition: border-color .12s; }
.reorder-item:hover { border-color: var(--accent); }
.reorder-item.on { background: var(--accent-soft); border-color: var(--accent); }
.wr-result { text-align: center; } .wr-result .pa-bars { max-width: 420px; margin: 12px auto; }
.wc-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.wc-row span { color: var(--ink-dim); font-size: .82rem; font-family: var(--font-mono); }

/* ── Từ của em (#/mywords) — danh sách từ tự thêm ── */
.mw-row { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 12px; box-shadow: var(--shadow-sm); padding: 12px; margin-bottom: 10px; }
.mw-img { flex: 0 0 56px; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.mw-img-none { display: grid; place-items: center; background: var(--paper); color: var(--ink-dim); }
.mw-img-none svg { width: 22px; height: 22px; }
.mw-body { flex: 1; min-width: 0; }
.mw-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mw-top b { font-size: 1rem; overflow-wrap: anywhere; }
.mw-ipa { font-family: var(--font-mono); font-size: .78rem; color: var(--accent); }
.mw-tag { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--line-soft); color: var(--ink-dim); }
.mw-tag.due { background: var(--accent-soft); color: var(--accent); }
.mw-tag.ok { background: var(--ok-soft); color: var(--ok); }
.mw-tag.new { border: 1px dashed var(--line); background: transparent; }
.mw-mean { font-size: .9rem; color: var(--ink-mid); margin-top: 3px; overflow-wrap: anywhere; }
.mw-ex { font-size: .82rem; color: var(--ink-dim); margin-top: 5px; line-height: 1.45; }
.mw-ex-vi { display: block; opacity: .85; }
.mw-x { flex: 0 0 44px; width: 44px; min-height: 44px; align-self: center; border-radius: 8px; border: 0;
  background: transparent; color: var(--ink-dim); font-size: 1rem; cursor: pointer; display: grid; place-items: center; }
.mw-x:hover { color: var(--err); background: rgba(248,113,113,.1); }

/* ── Hub Học từ vựng — 3 nhóm theo hành trình học (demo A, 27/7) ── */
.lh-grp { font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.lh-grp::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.lh-hero { width: 100%; flex-direction: row; align-items: flex-start; text-align: left; gap: 14px;
  padding: 20px 16px; margin-bottom: 26px; }
.lh-hero .onb-ic { flex: 0 0 52px; width: 52px; height: 52px; margin-bottom: 0; }
.lh-hero b { font-size: 1.05rem; }
.lh-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lh-duo { grid-template-columns: 1fr 1fr; margin-bottom: 26px; }
.lh-duo .onb-card { align-items: flex-start; text-align: left; }
.lh-badge { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; padding: 2px 9px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent); margin-left: 4px; vertical-align: 2px; }
.lh-badge.n { background: var(--line-soft); color: var(--ink-dim); }
.lh-plus { border-style: dashed; background: transparent; }
.lh-plus .onb-ic { background: transparent; border: 1.5px dashed var(--line); color: var(--ink-dim);
  font-size: 1.4rem; font-weight: 600; }
.lh-plus:hover .onb-ic { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) { .lh-hero { padding: 16px 12px; } .lh-duo { margin-bottom: 20px; } }

/* ── Tổng quan sắp lại (27/7): mục tiêu ngày vào thẻ Hôm nay, BXH sang cột phải, module gập ── */
.cc-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--line-soft); }
.ccg-h { grid-column: 1 / -1; font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.cc-goals .goal { margin-bottom: 6px; }
.cc-goals .goal-cheer { grid-column: 1 / -1; margin-top: 2px; }
.goal-cheer.done { color: var(--ok); }
.lb-title { margin: 0 0 14px; font-size: 1.02rem; font-weight: 800; }
.lb-side .lb-table td { padding: 8px 6px; }
.lb-side .lb-table th { padding: 0 6px 8px; }
.lb-side .lb-tab { padding: 6px 13px; }
@media (max-width: 640px) { .cc-goals { grid-template-columns: 1fr; gap: 4px 0; } }

/* ── siết mobile cho khối mới 27/7 (BXH cột phải, mục tiêu trong Hôm nay, hub 3 nhóm) ── */
@media (max-width: 640px) {
  .lb-side { padding: 14px 16px; }
  .lb-side .lb-tabs { margin-bottom: 10px; }
  .cc-goals { margin-top: 14px; padding-top: 12px; }
  .lh-grp { margin-bottom: 8px; }
  .lh-hero { gap: 10px; margin-bottom: 18px; }
  .lh-hero .onb-ic { flex-basis: 44px; width: 44px; height: 44px; }
  .lh-hero b { font-size: .98rem; }
  .lh-duo { margin-bottom: 18px; }
  .mw-row { padding: 10px; gap: 10px; }
  .mw-img { flex-basis: 48px; width: 48px; height: 48px; }
}

/* ── Báo ảnh sai (28/7): nút trên thẻ học + mục duyệt trong Quản trị ── */
.illu { position: relative; }
.img-report { position: absolute; right: 8px; bottom: 8px; min-height: 32px; padding: 4px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(11,12,18,.72); color: var(--ink-dim);
  font-size: .74rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(3px); }
.img-report:hover { color: var(--err); border-color: var(--err); }
.img-report:disabled { color: var(--ok); border-color: var(--ok); cursor: default; }
.imgrep-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.imgrep-row:last-child { border-bottom: none; }
.imgrep-thumb { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.imgrep-body { flex: 1; min-width: 0; }
.imgrep-body b { display: block; font-size: .92rem; }
.imgrep-body span { display: block; font-size: .8rem; color: var(--ink-mid); overflow-wrap: anywhere; }
.imgrep-body em { font-style: normal; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-dim); }
.imgrep-act { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 640px) { .imgrep-act { flex-direction: row; } .imgrep-row { flex-wrap: wrap; } }