/* ============================================================
   English Air — giao diện dựng theo bản ghi màn hình AirLearn
   Tím thương hiệu MON.L, nền đậm mặc định, bo tròn nhiều.
   ============================================================ */

/* ---------- 1. TOKEN ---------- */
:root {
  /* --brand dung cho CHU va vien; --brand-fill dung cho NEN dac mang chu trang. */
  --brand:       #7E22CE;
  --brand-ink:   #6B21A8;
  --brand-fill:  #7C3AED;
  --brand-soft:  #F3E8FF;
  --ink-deep:    #3B0764;
  --on-brand:    #FFFFFF;

  --ok:          #15803D;
  --ok-soft:     #E6F8EC;
  --ok-ink:      #14532D;
  --bad:         #B91C1C;
  --bad-soft:    #FDECEC;
  --bad-ink:     #8B1A1E;
  --amber:       #A65209;
  --amber-soft:  #FDF1DC;
  --flame:       #C2410C;
  --heart:       #DB2777;
  --xp:          #15803D;

  --bg:          #F7F3FD;
  --fg:          #1E1030;
  --card:        #FFFFFF;
  --muted:       #F1EAFA;
  --muted-fg:    #5C4B72;
  --line:        #E7DDF5;
  --line-hi:     #C9B6E4;
  --sky-1:       #DFCCFA;
  --sky-2:       #F6EFFE;

  --sh-1: 0 1px 2px rgba(30,16,48,.06);
  --sh-2: 0 4px 14px rgba(30,16,48,.10);
  --sh-3: 0 12px 30px rgba(30,16,48,.16);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r1: 10px; --r2: 14px; --r3: 20px; --r4: 26px; --rf: 999px;
  --e: cubic-bezier(.22,.8,.32,1);
  --t1: 140ms; --t2: 220ms; --t3: 340ms;

  --gut: 16px;
  --shell: 620px;
  --ic: 24px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --brand:       #C084FC;
  --brand-ink:   #D8B4FE;
  --brand-fill:  #7C3AED;
  --brand-soft:  #2E1A4E;
  --ink-deep:    #E9D5FF;

  --ok:          #22C55E;
  --ok-soft:     #10321F;
  --ok-ink:      #86EFAC;
  --bad:         #F0555A;
  --bad-soft:    #3D161C;
  --bad-ink:     #FCA5A5;
  --amber:       #FBBF24;
  --amber-soft:  #3A2A10;
  --flame:       #FF9A4D;
  --heart:       #FB7185;
  --xp:          #4ADE80;

  --bg:          #150A26;
  --fg:          #F3EAFE;
  --card:        #20123A;
  --muted:       #2B1A4A;
  --muted-fg:    #BCA8DC;
  --line:        #35204F;
  --line-hi:     #4C2E6E;
  --sky-1:       #341561;
  --sky-2:       #20123A;

  --sh-1: 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 4px 14px rgba(0,0,0,.55);
  --sh-3: 0 12px 30px rgba(0,0,0,.65);
  color-scheme: dark;
}

/* ---------- 2. NỀN ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--fg);
  font-family: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5; font-weight: 600;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -.015em; line-height: 1.22; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; touch-action: manipulation; }
button[disabled] { cursor: not-allowed; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--r1); }
svg[viewBox="0 0 24 24"] { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic { width: var(--ic); height: var(--ic); display: block; flex: none; }
.ic-sm { width: 20px; height: 20px; }
.sub { color: var(--muted-fg); font-size: .92rem; font-weight: 600; }
.mb { margin-bottom: var(--s5); }
.mt { margin-top: var(--s3); }
.fine { margin-top: var(--s4); font-size: .76rem; color: var(--muted-fg); text-align: center; font-weight: 600; }
.sec { font-size: 1.05rem; margin: var(--s6) 0 var(--s3); }
.row-between { display: flex; justify-content: space-between; align-items: center; font-size: .94rem; }

/* ---------- 3. KHUNG ---------- */
.app { display: flex; justify-content: center; min-height: 100dvh; }
.main { flex: 1; min-width: 0; max-width: var(--shell); display: flex; flex-direction: column; }
.content { flex: 1; outline: none; padding: 0 var(--gut) calc(88px + env(safe-area-inset-bottom)); }
.view { animation: in var(--t2) var(--e) both; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } }
.view-title { font-size: 1.6rem; margin-top: var(--s4); }

/* ---------- 4. THANH TRÊN ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s2);
  padding: calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s3);
  background: linear-gradient(180deg, var(--sky-1), var(--sky-2));
}
.flagchip { position: relative; width: 52px; height: 44px; flex: none; }
.flagchip-face {
  display: grid; place-items: center; width: 52px; height: 44px;
  border-radius: var(--r1); background: linear-gradient(150deg, #9333EA, #5B21B6);
  color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: .5px;
  box-shadow: var(--sh-1);
}
.flagchip-lv {
  position: absolute; right: -4px; bottom: -5px;
  min-width: 24px; padding: 0 5px; height: 20px;
  display: grid; place-items: center; border-radius: var(--rf);
  background: var(--brand-fill); color: #fff; font-size: .64rem; font-weight: 900;
  border: 2px solid var(--sky-2);
}
.pills { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; min-width: 44px; padding: 0 var(--s3); justify-content: center;
  border-radius: var(--rf); background: var(--card); box-shadow: var(--sh-1);
  font-size: .92rem; font-weight: 800;
  transition: transform var(--t1) var(--e);
}
.pill:active { transform: scale(.94); }
.pill b { font-weight: 900; }
.p-flame { color: var(--flame); } .p-flame .ic-sm { fill: color-mix(in srgb, var(--flame) 22%, transparent); }
.p-xp    { color: var(--xp); }
.p-heart { color: var(--heart); } .p-heart .ic-sm { fill: var(--heart); stroke: none; }
.p-heart.empty { color: var(--muted-fg); } .p-heart.empty .ic-sm { fill: none; stroke: currentColor; }
.p-theme { color: var(--muted-fg); padding: 0 var(--s2); }
.ic-sun { display: none; }
:root[data-theme="dark"] .ic-moon { display: none; }
:root[data-theme="dark"] .ic-sun { display: block; }

/* ---------- 5. NÚT ---------- */
.card { background: var(--card); border-radius: var(--r3); box-shadow: var(--sh-1); padding: var(--s4); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 54px; padding: 0 var(--s5); border-radius: var(--rf);
  font-size: 1.02rem; font-weight: 900; letter-spacing: -.01em;
  transition: transform var(--t1) var(--e), filter var(--t1) var(--e);
}
.btn:active:not([disabled]) { transform: scale(.975); filter: brightness(.96); }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 44px; font-size: .9rem; padding: 0 var(--s4); }
.btn-primary { background: var(--brand-fill); color: var(--on-brand); }
.btn-ok      { background: var(--ok); color: #fff; }
.btn-danger  { background: var(--bad); color: #fff; }
.btn-soft    { background: var(--card); color: var(--brand-ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn-text    { background: none; color: var(--muted-fg); font-weight: 700; }
.btn[disabled] { background: var(--muted); color: var(--muted-fg); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.two .btn { width: 100%; }

.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--rf); color: var(--fg); flex: none; }
.icon-btn:active { opacity: .55; }
.round-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--rf); background: var(--muted); color: var(--muted-fg); flex: none; }
.round-btn.sm { width: 36px; height: 36px; }
.ghost-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r2); background: var(--card); color: var(--brand-ink); box-shadow: inset 0 0 0 2px var(--brand); flex: none; }
.ghost-btn:active { opacity: .6; }

.bar { height: 10px; border-radius: var(--rf); background: var(--muted); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--rf); background: var(--ok); transition: width var(--t3) var(--e); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  min-height: 44px; padding: 0 var(--s4); border-radius: var(--rf);
  background: var(--card); color: var(--muted-fg); box-shadow: inset 0 0 0 2px var(--line);
  font-size: .86rem; font-weight: 800; transition: all var(--t1) var(--e);
}
.chip.on { background: var(--card); color: var(--brand-ink); box-shadow: inset 0 0 0 2px var(--brand); }

/* ---------- 5b. LINH VẬT ----------
   Ảnh huy hiệu tròn của thương hiệu, để nguyên cho cả ô lớn lẫn ô nhỏ. */
.mascot-img { display: block; width: 100%; height: 100%; }
.mascot-full { object-fit: contain; }
/* Ảnh thương hiệu vốn đã là huy hiệu tròn nên để nguyên, không cắt. */
.mascot-head { object-fit: contain; }
.brand-mark, .hello-mascot, .avatar, .empty-mascot { border-radius: var(--rf); }
.has-mascot-img .avatar { background: none; }


/* ---------- 6. MÀN HỌC ---------- */
/* Hero: MON.L đứng giữa vầng sáng tím, có bong bóng lời chào. */
.hero {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: var(--s5) 0 var(--s4); margin: 0 calc(var(--gut) * -1);
  overflow: hidden;
}
.hero-glow {
  position: absolute; top: -18%; left: 50%; transform: translateX(-50%);
  width: 128%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--brand) 42%, transparent) 0%,
    color-mix(in srgb, var(--brand) 14%, transparent) 42%,
    transparent 66%);
  pointer-events: none;
}
.hero-mascot {
  position: relative; width: 190px; height: 190px;
  animation: bob 4.5s ease-in-out infinite;
}
.hero-mascot svg, .hero-mascot img { width: 100%; height: 100%; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.spark {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 12px 3px var(--brand);
  opacity: .75; animation: twinkle 3.2s ease-in-out infinite;
}
.spark.s1 { top: 18%; left: 14%; }
.spark.s2 { top: 30%; right: 12%; width: 6px; height: 6px; animation-delay: .7s; }
.spark.s3 { bottom: 34%; left: 8%; width: 6px; height: 6px; animation-delay: 1.4s; }
.spark.s4 { bottom: 26%; right: 16%; animation-delay: 2.1s; }
@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: .9; transform: scale(1); } }

.hero-bubble {
  position: relative; max-width: 340px; margin: var(--s3) var(--gut) 0;
  padding: var(--s3) var(--s4); border-radius: var(--r3);
  background: var(--card); box-shadow: var(--sh-2); text-align: center;
}
.hero-bubble::before {
  content: ""; position: absolute; top: -9px; left: 50%; margin-left: -9px;
  border: 9px solid transparent; border-bottom-color: var(--card); border-top: 0;
}
.hero-name { display: block; font-size: .72rem; font-weight: 900; letter-spacing: .1em; color: var(--brand-ink); }
.hero-bubble p { margin-top: 3px; font-size: 1rem; font-weight: 700; line-height: 1.45; }

.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s4); }
.hs {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: var(--s3) var(--s2); border-radius: var(--r3);
  background: var(--card); box-shadow: var(--sh-1);
}
.hs b { font-size: 1.25rem; font-weight: 900; }
.hs small { font-size: .7rem; color: var(--muted-fg); font-weight: 700; text-align: center; }

.cont {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
  width: 100%; text-align: left; margin-top: var(--s4);
  padding: var(--s5); border-radius: var(--r4);
  background-color: var(--brand-fill);
  background-image: linear-gradient(150deg, var(--brand-fill), #C026D3);
  color: #fff; box-shadow: var(--sh-2);
  transition: transform var(--t1) var(--e), box-shadow var(--t2) var(--e);
}
.cont:hover { box-shadow: var(--sh-3); }
.cont:active { transform: scale(.99); }
.cont-kick { font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.cont-title { font-size: 1.4rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; }
.cont-goal { font-size: .9rem; opacity: .9; font-weight: 600; }
.cont-bar { display: block; width: 100%; height: 7px; margin-top: var(--s1); border-radius: var(--rf); background: rgba(255,255,255,.3); overflow: hidden; }
.cont-bar > i { display: block; height: 100%; background: #fff; border-radius: var(--rf); transition: width var(--t3) var(--e); }
.cont-row { display: flex; align-items: center; width: 100%; font-size: .86rem; font-weight: 800; }
.cont-go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }

.unit { margin-top: var(--s5); text-align: center; }
.unit h2 { font-size: 1.3rem; }
.unit-meta { color: var(--muted-fg); font-size: .88rem; font-weight: 700; margin-top: 2px; }
.nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s2); margin-top: var(--s5); }
.node { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.node-btn {
  position: relative; width: 76px; height: 76px; border-radius: var(--rf);
  display: grid; place-items: center;
  background: var(--muted); color: var(--muted-fg);
  transition: transform var(--t1) var(--e);
}
.node-btn .ic { width: 34px; height: 34px; }
.node-btn:active:not([disabled]) { transform: scale(.94); }
.node.done .node-btn { background: var(--ok-soft); color: var(--ok); }
.node.current .node-btn { background: var(--brand-fill); color: #fff; box-shadow: 0 0 0 5px var(--brand-soft); }
.node.check .node-btn { background: var(--amber-soft); color: var(--amber); }
.node-ring { position: absolute; inset: -7px; }
.node-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.node-ring .bgc { stroke: var(--brand-soft); }
.node-ring .fgc { stroke: var(--brand); transform: rotate(-90deg); transform-origin: 50% 50%; }
.node-label { font-size: .82rem; font-weight: 800; color: var(--muted-fg); line-height: 1.3; }
.node.current .node-label { color: var(--brand-ink); }
.node.done .node-label { color: var(--fg); }

/* ---------- 7. TỪ VỰNG ---------- */
.words-head { display: flex; align-items: flex-start; gap: var(--s3); padding-top: var(--s4); }
.big-count { font-size: 1.8rem; }
.words-head .round-btn { margin-left: auto; }
.filters { display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s4) 0 var(--s2); scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters .chip { flex: none; min-height: 42px; }
.promo {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--amber-soft); border-radius: var(--r3);
  padding: var(--s3) var(--s4); margin: var(--s3) 0 var(--s4);
}
.promo b { display: block; font-size: .96rem; }
.promo small { color: var(--amber); font-size: .82rem; font-weight: 700; }
.promo .btn { margin-left: auto; flex: none; }
.sort-pill {
  min-height: 44px; padding: 0 var(--s4); border-radius: var(--rf);
  background: var(--muted); color: var(--muted-fg);
  font-size: .84rem; font-weight: 800; flex: none;
}
.round-btn[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-ink); }

.search-wrap {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding: 0 var(--s4);
  background: var(--card); border-radius: var(--rf); box-shadow: inset 0 0 0 2px var(--line);
}
.search-wrap[hidden] { display: none; }
.search-wrap > .ic-sm { color: var(--muted-fg); flex: none; }
.search-wrap input {
  flex: 1; min-width: 0; min-height: 50px; border: 0; background: none;
  font-size: .98rem; font-weight: 700; outline: none;
}
.search-wrap input::placeholder { color: var(--muted-fg); font-weight: 600; }

/* kho từ dạng lưới */
.wlist.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.wlist.grid li {
  flex-direction: column; align-items: flex-start; gap: var(--s1);
  padding: var(--s4); border-bottom: 0;
  background: var(--card); border-radius: var(--r3); box-shadow: var(--sh-1);
}
.wlist.grid .w-say { position: absolute; opacity: 0; pointer-events: none; }
.wlist.grid .w-pips { margin-left: 0; margin-top: var(--s2); }
.w-pos {
  display: inline-block; margin-top: 3px; padding: 1px 8px;
  border-radius: var(--rf); background: var(--brand-soft); color: var(--brand-ink);
  font-size: .7rem; font-weight: 800;
}

/* màn khoá tính năng */
.locked { text-align: center; padding: var(--s4) 0 var(--s6); }
.locked[hidden] { display: none; }
.locked-art { position: relative; height: 190px; display: grid; place-items: center; }
.locked-mascot { width: 132px; height: 132px; }
.locked-mascot svg, .locked-mascot img { width: 100%; height: 100%; }
.chip-float {
  position: absolute; padding: 6px 14px; border-radius: var(--rf);
  background: var(--card); box-shadow: inset 0 0 0 2px var(--line), var(--sh-1);
  color: var(--brand-ink); font-size: .8rem; font-weight: 800;
  animation: float 3.4s ease-in-out infinite;
}
.chip-float.f1 { top: 14px; left: 6%; }
.chip-float.f2 { top: 30px; right: 8%; animation-delay: .5s; }
.chip-float.f3 { bottom: 34px; left: 2%; animation-delay: 1s; }
.chip-float.f4 { bottom: 18px; right: 4%; animation-delay: 1.6s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.locked-tag {
  display: inline-block; padding: 4px 14px; border-radius: var(--rf);
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: .72rem; font-weight: 900; letter-spacing: .06em;
}
.locked-h { font-size: 1.45rem; margin: var(--s3) 0 var(--s2); }
.locked-left { margin: var(--s5) 0 var(--s2); font-size: .92rem; font-weight: 800; }

.wlist li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); }
.wlist li:last-child { border-bottom: 0; }
.w-say { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rf); background: var(--brand-soft); color: var(--brand-ink); flex: none; }
.w-say .ic-sm { width: 18px; height: 18px; }
.w-en { font-weight: 900; }
.w-vi { font-size: .86rem; color: var(--muted-fg); font-weight: 600; }
.w-pips { margin-left: auto; display: flex; gap: 3px; flex: none; }
.pip { width: 7px; height: 7px; border-radius: 50%; background: var(--line-hi); }
.pip.on { background: var(--ok); }
.empty { text-align: center; padding: var(--s7) var(--s4); }
.empty-mascot { width: 96px; height: 96px; margin: 0 auto var(--s3); }
.empty-mascot svg { width: 100%; height: 100%; }
.empty b { display: block; font-size: 1.1rem; font-weight: 900; }

/* ---------- 8. ÔN TẬP ---------- */
.rcard {
  display: flex; align-items: center; gap: var(--s4); width: 100%; text-align: left;
  background: var(--card); border-radius: var(--r3); box-shadow: var(--sh-1);
  padding: var(--s4); margin-bottom: var(--s3);
  transition: transform var(--t1) var(--e), box-shadow var(--t2) var(--e);
}
.rcard:active:not([disabled]) { transform: scale(.99); }
.rcard[disabled] { opacity: .5; }
.rc-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r2); flex: none; }
.rc-ic svg { width: 22px; height: 22px; }
.ic-brand { background: var(--brand-soft); color: var(--brand-ink); }
.ic-warn { background: var(--amber-soft); color: var(--amber); }
.ic-bad  { background: var(--bad-soft); color: var(--bad-ink); }
.rc-b { display: flex; flex-direction: column; min-width: 0; }
.rc-b strong { font-size: 1rem; font-weight: 900; }
.rc-b small { color: var(--muted-fg); font-size: .84rem; font-weight: 600; }
.rc-a { margin-left: auto; color: var(--muted-fg); flex: none; }

/* ---------- 9. GIẢI ĐẤU ---------- */
.lg-head { text-align: center; padding: var(--s5) 0 var(--s6); }
.lg-badge { width: 84px; height: 84px; margin: 0 auto var(--s3); display: grid; place-items: center; border-radius: var(--rf); }
.lg-badge svg { width: 40px; height: 40px; }
.lg-head h2 { font-size: 1.5rem; }
.lg-timer { margin-top: var(--s3); font-size: .86rem; font-weight: 800; color: var(--flame); }
.rank li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r2); }
.rank li.me { background: var(--brand-soft); }
.r-pos { width: 26px; text-align: center; font-weight: 900; color: var(--muted-fg); }
.rank li.me .r-pos { color: var(--brand-ink); }
.r-av { width: 38px; height: 38px; border-radius: var(--rf); flex: none; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: .9rem; }
.r-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.rank li.me .r-name { font-weight: 900; }
.r-xp { margin-left: auto; font-size: .86rem; font-weight: 800; color: var(--muted-fg); flex: none; }
.zone { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) var(--s2); font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.zone::before, .zone::after { content: ""; flex: 1; height: 2px; border-radius: 2px; }
.z-up { color: var(--ok); } .z-up::before, .z-up::after { background: var(--ok); }
.z-down { color: var(--bad); } .z-down::before, .z-down::after { background: var(--bad); }

/* ---------- 10. HỒ SƠ ---------- */
.prof-head { display: flex; align-items: center; gap: var(--s4); padding: var(--s5) 0 var(--s6); }
.avatar { width: 72px; height: 72px; border-radius: var(--rf); background: var(--brand-soft); display: grid; place-items: center; flex: none; }
.avatar svg { width: 52px; height: 52px; }
.prof-name { font-size: 1.3rem; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.tile { background: var(--card); border-radius: var(--r3); box-shadow: var(--sh-1); padding: var(--s4); display: flex; flex-direction: column; }
.tile b { font-size: 1.5rem; font-weight: 900; }
.tile small { font-size: .78rem; color: var(--muted-fg); font-weight: 700; }
.tile .ic-sm { margin-bottom: var(--s2); }
.t-flame { color: var(--flame); } .t-xp { color: var(--xp); } .t-blue { color: var(--brand-ink); }
.t-ok { color: var(--ok); } .t-gold { color: var(--amber); }
.set { margin-bottom: var(--s2); padding: var(--s1) var(--s4); }
.switch { display: flex; align-items: center; gap: var(--s3); min-height: 52px; cursor: pointer; font-size: .95rem; font-weight: 700; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.track { width: 50px; height: 30px; border-radius: var(--rf); flex: none; background: var(--line-hi); position: relative; transition: background var(--t2) var(--e); }
.track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--t2) var(--e); }
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 3px solid var(--brand); outline-offset: 2px; }
.install { margin: var(--s4) 0; }
.install h3 { font-size: 1.02rem; margin-bottom: var(--s2); }

/* ---------- 11. ĐIỀU HƯỚNG ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-around;
  padding: var(--s1) var(--s1) calc(var(--s1) + env(safe-area-inset-bottom));
  background: var(--card); box-shadow: 0 -1px 0 var(--line);
}
.tab {
  flex: 1; min-width: 0; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--r2); color: var(--muted-fg); font-size: .66rem; font-weight: 800;
  transition: color var(--t1) var(--e);
}
.tab .ic { width: 22px; height: 22px; }
.tab.is-active { color: var(--brand-ink); }
.tab:active { opacity: .55; }
.sidenav, .rail { display: none; }

/* ---------- 12. TRÌNH CHIẾU ---------- */
.player { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--card); }
.player[hidden] { display: none; }
.sky { position: absolute; inset: 0 0 auto; height: 230px; background: linear-gradient(180deg, var(--sky-1), var(--card)); pointer-events: none; }
.sky-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.player.flat .sky { display: none; }

.p-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; max-width: calc(var(--shell) + var(--s5)); margin-inline: auto;
  padding: calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s2);
}
.hearts { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--heart); font-weight: 900; }
.hearts .ic-sm { fill: var(--heart); stroke: none; }
.hearts.hit { animation: shake 380ms var(--e); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
.flash-left { margin-left: auto; font-weight: 900; color: var(--muted-fg); }

.p-body { position: relative; z-index: 2; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--s4) var(--s5); }
.p-body.center { display: grid; place-items: center; }
.mascot-top { width: 116px; height: 116px; margin: 0 auto; }
.mascot-top svg { width: 100%; height: 100%; }
.mascot-top.hide { display: none; }
.kicker { text-align: center; color: var(--brand-ink); font-size: .96rem; font-weight: 900; margin-bottom: var(--s3); }
.stage { width: 100%; max-width: var(--shell); margin: 0 auto; display: flex; flex-direction: column; gap: var(--s4); }
.ask { text-align: center; font-size: 1.24rem; font-weight: 900; line-height: 1.35; }
.ask em { font-style: normal; color: var(--brand-ink); }

.p-foot {
  position: relative; z-index: 2;
  padding: var(--s2) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background: var(--card);
}
.p-foot > * { width: 100%; max-width: var(--shell); margin-inline: auto; }
.p-progress { height: 8px; border-radius: var(--rf); background: var(--muted); overflow: hidden; margin-bottom: var(--s3); }
.p-progress > i { display: block; height: 100%; border-radius: var(--rf); background: var(--brand-fill); transition: width var(--t3) var(--e); }
.p-actions { display: flex; align-items: center; gap: var(--s3); }
.p-next { flex: 1; }
.p-foot.ok  { background: var(--ok-soft); }
.p-foot.bad { background: var(--bad-soft); }
.fb { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); animation: in var(--t2) var(--e) both; }
.fb[hidden] { display: none; }
.fb-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; }
.fb-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fb-t { display: flex; flex-direction: column; min-width: 0; }
.fb-t strong { font-size: 1.06rem; font-weight: 900; }
.fb-t span { font-size: .88rem; font-weight: 600; }
.p-foot.ok .fb  { color: var(--ok-ink); }  .p-foot.ok .fb-ic  { background: var(--ok); color: #fff; }
.p-foot.bad .fb { color: var(--bad-ink); } .p-foot.bad .fb-ic { background: var(--bad); color: #fff; }

/* ---------- 13. BIỂN BÁO DẠY ---------- */
.sign { position: relative; padding-bottom: 86px; }
.sign-card {
  position: relative; z-index: 2;
  background: var(--card); border: 4px solid var(--ink-deep); border-radius: var(--r4);
  padding: var(--s5) var(--s4); text-align: center;
}
.sign-badge { width: 52px; height: 52px; margin: 0 auto var(--s3); border-radius: var(--rf); background: var(--brand-fill); color: #fff; display: grid; place-items: center; }
.sign-badge svg { width: 26px; height: 26px; }
.sign-word { color: var(--brand-ink); font-size: 1.5rem; font-weight: 900; margin-bottom: var(--s3); }
.sign-body { font-size: 1.02rem; font-weight: 700; line-height: 1.62; }
.sign-body em { font-style: normal; color: var(--brand-ink); font-weight: 900; }
.sign-legs { position: absolute; left: 0; right: 0; top: calc(100% - 86px); height: 86px; z-index: 1; }
.sign-legs i { position: absolute; top: -6px; width: 12px; height: 74px; background: var(--ink-deep); border-radius: 3px; }
.sign-legs i:first-child { left: 26%; } .sign-legs i:last-child { right: 26%; }
.hill { display: block; width: calc(100% + var(--s5)); margin: -34px calc(var(--s3) * -1) 0; fill: var(--brand-soft); }

/* ---------- 14. DẠNG BÀI ---------- */
.opts { display: flex; flex-direction: column; gap: var(--s3); }
.opt {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; min-height: 58px; padding: var(--s3) var(--s4); text-align: left;
  background: var(--card); border-radius: var(--r2); box-shadow: inset 0 0 0 2px var(--line);
  font-size: 1rem; font-weight: 800;
  transition: transform var(--t1) var(--e), box-shadow var(--t1) var(--e), background var(--t1) var(--e);
}
.opt:active:not([disabled]) { transform: scale(.99); }
.opt-key { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--line); font-size: .74rem; font-weight: 900; color: var(--muted-fg); }
.opt.sel { box-shadow: inset 0 0 0 3px var(--brand); background: var(--brand-soft); }
.opt.ok  { box-shadow: inset 0 0 0 3px var(--ok); background: var(--ok-soft); color: var(--ok-ink); }
.opt.bad { box-shadow: inset 0 0 0 3px var(--bad); background: var(--bad-soft); color: var(--bad-ink); }
.opt.done { opacity: .28; pointer-events: none; }

/* đúng / sai */
.tf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.tf button {
  min-height: 92px; border-radius: var(--r3); background: var(--muted);
  display: grid; place-items: center; color: var(--muted-fg);
  box-shadow: inset 0 0 0 2px transparent; transition: all var(--t1) var(--e);
}
.tf button svg { width: 40px; height: 40px; stroke-width: 3; }
.tf button:active { transform: scale(.98); }
.tf .yes.sel { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 3px var(--ok); }
.tf .no.sel  { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 3px var(--bad); }
.tf button.ok  { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 3px var(--ok); }
.tf button.bad { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 3px var(--bad); }

/* ô trống gạch đứt + kho từ */
.blanks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2) 6px; font-size: 1.16rem; font-weight: 800; }
.blanks .fixed { padding: 0 2px; }
.slot {
  min-width: 88px; min-height: 46px; padding: 0 var(--s3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px dashed var(--line-hi); border-radius: var(--r2);
  color: var(--fg); background: none;
}
.slot.filled { border-style: solid; border-color: var(--brand); background: var(--brand-soft); }
.slot.ok  { border-style: solid; border-color: var(--ok); background: var(--ok-soft); color: var(--ok-ink); }
.slot.bad { border-style: solid; border-color: var(--bad); background: var(--bad-soft); color: var(--bad-ink); }
.bank-line { height: 1px; background: var(--line); margin: var(--s4) 0; }
.bank { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.tile-w {
  min-height: 48px; padding: 0 var(--s4); display: inline-flex; align-items: center;
  background: var(--card); border-radius: var(--r2); box-shadow: inset 0 0 0 2px var(--line), 0 2px 0 var(--line);
  font-weight: 800; font-size: 1.02rem;
  transition: opacity var(--t1) var(--e), transform var(--t1) var(--e);
}
.tile-w:active { transform: scale(.96); }
.tile-w.used { opacity: 0; visibility: hidden; }

/* chọn hình */
.pics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.pic {
  padding: var(--s4) var(--s3); border-radius: var(--r3); background: var(--card);
  box-shadow: inset 0 0 0 2px var(--line), var(--sh-1);
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  font-weight: 800; font-size: .95rem; transition: all var(--t1) var(--e);
}
.pic svg { width: 72px; height: 72px; color: var(--brand-ink); }
.pic:active:not([disabled]) { transform: scale(.98); }
.pic.sel { box-shadow: inset 0 0 0 3px var(--brand), var(--sh-1); background: var(--brand-soft); }
.pic.ok  { box-shadow: inset 0 0 0 3px var(--ok), var(--sh-1); background: var(--ok-soft); }
.pic.bad { box-shadow: inset 0 0 0 3px var(--bad), var(--sh-1); background: var(--bad-soft); }

/* nghe */
.say-row { display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.say-btn { display: grid; place-items: center; width: 84px; height: 84px; border-radius: var(--r3); background: var(--brand-fill); color: #fff; flex: none; }
.say-btn svg { width: 34px; height: 34px; }
.say-btn:active { transform: scale(.95); }
.say-btn.sm { width: 56px; height: 56px; background: var(--brand-soft); color: var(--brand-ink); }
.say-btn.sm svg { width: 24px; height: 24px; }

/* nối cặp */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.match .opt { min-height: 54px; font-size: .95rem; justify-content: center; text-align: center; }

/* gõ đáp án */
.type-in { width: 100%; min-height: 96px; padding: var(--s4); background: var(--card); border: 0; box-shadow: inset 0 0 0 2px var(--line); border-radius: var(--r2); font-size: 1.06rem; font-weight: 700; resize: none; }
.type-in:focus { outline: none; box-shadow: inset 0 0 0 3px var(--brand); }

/* thẻ từ mới */
.vcard { text-align: center; }
.vcard-pic { width: 92px; height: 92px; margin: 0 auto var(--s3); color: var(--brand-ink); }
.vcard-pic svg { width: 100%; height: 100%; }
.vcard-en { font-size: 2rem; font-weight: 900; letter-spacing: -.03em; }
.vcard-ipa { color: var(--muted-fg); font-size: .98rem; font-weight: 600; }
.vcard-say { margin: var(--s3) auto 0; display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--rf); background: var(--brand-fill); color: #fff; }
.vcard-say svg { width: 26px; height: 26px; }
.vcard-vi { margin-top: var(--s4); font-size: 1.3rem; font-weight: 900; }
.note { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--brand-soft); font-size: .92rem; font-weight: 700; line-height: 1.55; text-align: left; }
.note .ic-sm { color: var(--brand-ink); flex: none; margin-top: 2px; }
.example { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r2); box-shadow: inset 0 0 0 2px var(--line); text-align: left; }
.example .say { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rf); background: var(--brand-soft); color: var(--brand-ink); }
.example .say svg { width: 20px; height: 20px; }
.example b { display: block; font-size: .98rem; font-weight: 800; }
.example small { color: var(--muted-fg); font-size: .86rem; font-weight: 600; }

/* bảng ngữ pháp */
.gtable { border-radius: var(--r3); overflow: hidden; box-shadow: inset 0 0 0 2px var(--line); }
.grow { display: grid; grid-template-columns: minmax(96px,.8fr) 1.4fr; border-bottom: 1px solid var(--line); }
.grow:last-child { border-bottom: 0; }
.gform { padding: var(--s3); background: var(--muted); font-weight: 900; font-size: .86rem; }
.gex { padding: var(--s3); min-width: 0; text-align: left; }
.gex b { display: block; font-weight: 800; font-size: .94rem; }
.gex small { color: var(--muted-fg); font-size: .84rem; font-weight: 600; }
.tip { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--amber-soft); color: var(--amber); font-size: .89rem; font-weight: 800; line-height: 1.5; text-align: left; }
.tip .ic-sm { flex: none; margin-top: 2px; }

/* hội thoại */
.dialog { display: flex; flex-direction: column; gap: var(--s3); }
.dline { display: flex; gap: var(--s2); max-width: 90%; }
.dline.b { align-self: flex-end; flex-direction: row-reverse; }
.dwho { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--rf); flex: none; font-size: .76rem; font-weight: 900; background: var(--muted); color: var(--muted-fg); }
.dline.b .dwho { background: var(--brand-soft); color: var(--brand-ink); }
.dbubble { padding: var(--s3) var(--s4); border-radius: var(--r3); background: var(--muted); text-align: left; }
.dline.b .dbubble { background: var(--brand-fill); color: #fff; }
.dbubble b { display: block; font-weight: 800; font-size: .97rem; }
.dbubble small { display: block; margin-top: 2px; font-size: .84rem; font-weight: 600; opacity: .78; }

.bullets { display: flex; flex-direction: column; gap: var(--s2); text-align: left; }
.bullets li { display: flex; gap: var(--s3); align-items: flex-start; font-size: .98rem; font-weight: 700; }
.bullets .ic-sm { color: var(--ok); flex: none; margin-top: 3px; }

/* ---------- 15. THẺ GHI NHỚ ---------- */
.fcard {
  width: 100%; max-width: 440px; min-height: 300px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s6) var(--s5); text-align: center;
  background: var(--card); border-radius: var(--r4); box-shadow: var(--sh-2), inset 0 0 0 2px var(--line);
}
.fcard:active { transform: scale(.99); }
.fc-hint { font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg); }
.fc-front { font-size: 2.1rem; font-weight: 900; letter-spacing: -.03em; }
.fc-ipa { color: var(--muted-fg); font-size: .95rem; font-weight: 600; }
.fc-back { margin-top: var(--s4); font-size: 1.35rem; font-weight: 900; color: var(--brand-ink); }
.fc-ex { font-size: .9rem; color: var(--muted-fg); font-weight: 600; }

/* ---------- 15b. GỌI VIDEO LUYỆN NÓI ---------- */
.call-hero { text-align: center; padding: var(--s5) 0 var(--s4); }
.call-preview { position: relative; display: block; width: 186px; aspect-ratio: 3 / 4;
  margin: 0 auto var(--s4); padding: 0; border: 0; border-radius: 20px; overflow: hidden;
  background: var(--muted); box-shadow: var(--sh-2); cursor: pointer; }
.cp-room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Đặt MON.L đúng chỗ cũ trong tấm ảnh 3:4, rồi cho cử động y như trong cuộc gọi. */
.cp-mon { position: absolute; left: 23.481%; top: 8.564%; width: 56.906%; height: 84.185%;
  transform-origin: 50% 100%; animation: monBreathe 4.2s ease-in-out infinite; }
.cp-mon .mon-beat { display: block; position: relative; width: 100%; height: 100%; transform-origin: 50% 100%; }
.cp-mon.talking { animation: monTalk 1.25s ease-in-out infinite; }
.cp-mon.talking .mon-mouth { animation: monMouth 240ms ease-in-out infinite; }
.cp-mon.pulse .mon-beat { animation: monBeat 200ms var(--e); }
.cp-tap { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--rf);
  background: rgba(20,8,38,.72); color: #fff; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.call-preview:active { transform: scale(.98); }
.call-hero h1 { font-size: 1.6rem; margin-bottom: var(--s2); }
.call-info { display: flex; flex-direction: column; gap: var(--s4); }
.ci-row { display: flex; gap: var(--s3); align-items: flex-start; }
.ci-row .ic-sm { color: var(--brand-ink); flex: none; margin-top: 3px; }
.ci-row span { display: flex; flex-direction: column; min-width: 0; }
.ci-row b { font-size: .96rem; }
.ci-row small { color: var(--muted-fg); font-size: .86rem; font-weight: 600; }

.call { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column;
  background: #150925; overflow: hidden; --callink: #1B0F31;
  --scene-h: max(100dvh, 210.3vw); --scene-t: 0px; }
.call[hidden] { display: none; }
/* Màn rộng hơn khung phòng thì hai bên lấp bằng chính căn phòng, làm mờ và tối lại. */
.call::before {
  content: ""; position: absolute; inset: -6%;
  background: url("assets/call-card.jpg") center / cover no-repeat;
  filter: blur(34px) saturate(.7) brightness(.42);
}

/* ----- Căn phòng: MON.L đứng đúng chỗ cũ, ảnh giữ nguyên độ nét ----- */
.call-scene { position: absolute; inset: 0; overflow: hidden; }
.scene-fit {
  position: absolute; left: 50%; top: var(--scene-t); transform: translateX(-50%);
  height: var(--scene-h); width: calc(var(--scene-h) * .47551);
}
.scene-room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(18,7,34,.70) 0, rgba(18,7,34,0) 17%,
    rgba(18,7,34,0) 40%, rgba(18,7,34,.62) 82%, rgba(18,7,34,.90) 100%);
}

/* ----- Nhân vật: một lớp riêng nên cử động được ----- */
.call-mon {
  position: absolute; left: 23.481%; top: 12.561%; width: 56.906%; height: 53.361%;
  transform-origin: 50% 100%; will-change: transform;
  animation: monIn 700ms var(--e) both, monBreathe 4.6s ease-in-out 700ms infinite;
}
.call-mon .mon-beat { display: block; position: relative; width: 100%; height: 100%; transform-origin: 50% 100%; }
.mon-base, .mon-mouth { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Lớp miệng bóp lại quanh mép trên của cái miệng, nên trông đúng như đang ngậm. */
.mon-mouth { transform-origin: 50% 23.14%; transform: scaleY(.16); will-change: transform; }

@keyframes monIn {
  0%   { opacity: 0; transform: translateY(5%) scale(.92); }
  60%  { opacity: 1; transform: translateY(-1.2%) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Đứng yên: thở, và thỉnh thoảng đảo người — đứng im như tượng thì trông như ảnh chụp. */
@keyframes monBreathe {
  0%, 100% { transform: translateY(0) rotate(-.8deg) scale(1, 1); }
  25%      { transform: translateY(-2.2%) rotate(0deg) scale(.992, 1.016); }
  50%      { transform: translateY(-.4%) rotate(.9deg) scale(1.006, .996); }
  75%      { transform: translateY(-1.8%) rotate(0deg) scale(.994, 1.012); }
}
/* Đang nói: đung đưa, dồn trọng tâm qua lại như người thật đang kể chuyện. */
.call-mon.talking { animation: monTalk 1.25s ease-in-out infinite; }
@keyframes monTalk {
  0%   { transform: translate(-1.4%, 0)     rotate(-2.4deg) scale(1, 1); }
  25%  { transform: translate(-.4%, -3.2%)  rotate(-.4deg)  scale(.978, 1.03); }
  50%  { transform: translate(1.4%, -.6%)   rotate(2.4deg)  scale(1.02, .976); }
  75%  { transform: translate(.4%, -3%)     rotate(.4deg)   scale(.982, 1.026); }
  100% { transform: translate(-1.4%, 0)     rotate(-2.4deg) scale(1, 1); }
}
/* Miệng mấp máy liên tục suốt lúc nói — đây mới là cái làm nó ra chất hoạt hình. */
.call-mon.talking .mon-mouth { animation: monMouth 240ms ease-in-out infinite; }
@keyframes monMouth {
  0%   { transform: scaleY(.16); }
  45%  { transform: scaleY(1); }
  100% { transform: scaleY(.16); }
}
/* Mỗi tiếng phát ra thì nhấn thêm một nhịp, cho khớp trọng âm. */
.call-mon.pulse .mon-beat { animation: monBeat 200ms var(--e); }
@keyframes monBeat {
  0%   { transform: scale(1, 1); }
  40%  { transform: scale(1.04, .955); }
  100% { transform: scale(1, 1); }
}
/* Đang nghe: nhoài người tới, gật nhẹ như đang chăm chú nghe. */
.call-mon.listening { animation: monLean 1.9s ease-in-out infinite; }
@keyframes monLean {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1.02); }
  50%      { transform: translateY(-1.6%) rotate(1deg) scale(1.035); }
}

/* ----- Thanh trên: chữ trắng nổi trên cảnh ----- */
.call-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding: calc(var(--s3) + env(safe-area-inset-top)) var(--gut) var(--s3);
}
.call-who { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.call-av { width: 42px; height: 42px; border-radius: var(--rf); overflow: hidden; flex: none;
  background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.call-av svg, .call-av img { width: 100%; height: 100%; }
.call-who span { display: flex; flex-direction: column; min-width: 0; }
.call-who b { font-size: 1rem; font-weight: 900; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.call-who small { color: #86EFAC; font-size: .8rem; font-weight: 800;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.call-step { margin-left: auto; font-size: .84rem; font-weight: 800; color: #E9D5FF; flex: none; }
.call-state { margin-left: auto; font-size: .82rem; font-weight: 800; color: #E9D5FF; flex: none;
  text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.call-state.listen { color: #FCA5A5; }
.call-state.think  { color: #FDE68A; }
.call-icon {
  width: 44px; height: 44px; flex: none; border-radius: var(--rf); display: grid; place-items: center;
  background: rgba(20,8,38,.52); color: #fff; backdrop-filter: blur(8px);
}
.call-icon[aria-pressed="true"] { background: #fff; color: var(--callink); }

/* ----- Sân khấu: nội dung dồn xuống đáy để không che mặt nhân vật ----- */
.call-stage {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s3);
  width: 100%; max-width: min(var(--shell), 560px); margin-inline: auto;
  padding: 0 var(--gut) var(--s2);
}

/* Bóng nói kiểu truyện tranh, luôn sáng để đọc được trên nền ảnh. */
.call-bubble {
  position: relative; width: 100%; padding: var(--s4); border-radius: 22px;
  background: rgba(255,255,255,.95); color: var(--callink);
  box-shadow: 0 14px 34px rgba(0,0,0,.32); text-align: center;
}
.call-bubble::before {
  content: ""; position: absolute; top: -8px; left: 50%; width: 20px; height: 20px;
  transform: translateX(-50%) rotate(45deg); border-radius: 5px;
  background: rgba(255,255,255,.95);
}
.call-bubble b { display: block; font-size: 1.18rem; font-weight: 800; line-height: 1.42; color: var(--callink); }
.call-bubble small { display: block; margin-top: var(--s1); color: #5B4A73; font-size: .88rem; font-weight: 600; }
.call-lab { display: block; font-size: .7rem; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: #6D28D9; margin-bottom: var(--s1); }
.call-task { width: 100%; padding: var(--s3) var(--s4); border-radius: 18px;
  background: #F3E8FF; color: var(--callink); text-align: center; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.call-task[hidden] { display: none; }
.call-task b { display: block; font-size: 1.06rem; font-weight: 900; line-height: 1.4; color: var(--callink); }
.call-task small { display: block; margin-top: 2px; color: #5B4A73; font-size: .86rem; font-weight: 600; }

/* Đang nghe người học nói. */
.call-you { display: flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s2) var(--s4); border-radius: var(--rf); align-self: center;
  background: rgba(190,18,60,.94); color: #fff; font-size: .86rem; font-weight: 800; }
.call-you[hidden] { display: none; }
.cy-bars { display: flex; align-items: center; gap: 3px; height: 16px; }
.cy-bars i { width: 3px; height: 100%; border-radius: 2px; background: #fff;
  animation: cyBar 900ms ease-in-out infinite; }
.cy-bars i:nth-child(2) { animation-delay: .12s; }
.cy-bars i:nth-child(3) { animation-delay: .24s; }
.cy-bars i:nth-child(4) { animation-delay: .36s; }
.cy-bars i:nth-child(5) { animation-delay: .48s; }
@keyframes cyBar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* Nhật ký hội thoại — mở bằng nút ở thanh trên, mặc định ẩn để thấy căn phòng. */
.call-log { display: none; }
.call.show-log .call-log {
  display: flex; flex-direction: column; gap: var(--s2);
  max-height: 42dvh; overflow-y: auto; padding: var(--s3); border-radius: 20px;
  background: rgba(16,6,32,.76); backdrop-filter: blur(10px);
}
.call-log li { max-width: 86%; padding: var(--s2) var(--s3); border-radius: var(--r2); font-size: .9rem; font-weight: 700; }
.call-log li.mon { align-self: flex-start; background: rgba(255,255,255,.20); color: #fff; }
.call-log li.you { align-self: flex-end; background: #7C3AED; color: #fff; }

/* ----- Bảng điều khiển ----- */
.call-foot {
  position: relative; z-index: 2;
  width: 100%; max-width: min(var(--shell), 560px); margin-inline: auto;
  padding: var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom));
}
.call-heard { margin-bottom: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--r2);
  font-size: .9rem; font-weight: 700; text-align: center; }
.call-heard[hidden] { display: none; }
.call-heard.ok  { background: #DCFCE7; color: #14532D; }
.call-heard.bad { background: #FEE2E2; color: #7F1D1D; }

.call-type { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.call-type[hidden] { display: none; }
.call-type input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--s4);
  border: 0; border-radius: var(--rf); background: #fff; color: var(--callink);
  box-shadow: inset 0 0 0 2px rgba(124,58,237,.35); font-size: 1rem; font-weight: 700; outline: none;
}
.call-type input:focus { box-shadow: inset 0 0 0 3px #7C3AED; }

.call-actions { display: flex; align-items: center; justify-content: center; gap: var(--s5); margin: var(--s3) 0 var(--s2); }
.round-btn.lg { width: 56px; height: 56px; }
.call-foot .round-btn { background: rgba(255,255,255,.20); color: #fff; backdrop-filter: blur(8px); }
.round-btn.danger, .call-foot .round-btn.danger { background: #BE123C; color: #fff; }
.mic-btn {
  width: 86px; height: 86px; border-radius: var(--rf); flex: none;
  display: grid; place-items: center;
  background: #7C3AED; color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform var(--t1) var(--e), background var(--t1) var(--e);
}
.mic-btn .ic { width: 34px; height: 34px; }
.mic-btn:active { transform: scale(.94); }
.mic-btn.listening { background: #BE123C; animation: pulseMic 1.1s var(--e) infinite; }
@keyframes pulseMic { 0%, 100% { box-shadow: 0 0 0 0 rgba(190,18,60,.5); } 70% { box-shadow: 0 0 0 20px transparent; } }
.mic-btn[disabled] { background: rgba(255,255,255,.24); color: rgba(255,255,255,.62); }
.call-choices { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s2); }
.call-choices[hidden] { display: none; }
.call-foot .btn-text { color: #E9D5FF; }

/* ---------- 16. KẾT THÚC ---------- */
.result { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--s5) var(--s4); background: var(--card); overflow-y: auto; }
.result[hidden] { display: none; }
.res-in { width: 100%; max-width: 430px; text-align: center; animation: in var(--t3) var(--e) both; }
.res-mascot { width: 148px; height: 148px; margin: 0 auto var(--s4); animation: pop 460ms var(--e) both; }
.res-mascot svg { width: 100%; height: 100%; }
@keyframes pop { 0%{transform:scale(.55);opacity:0} 65%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
.result h2 { font-size: 1.55rem; margin-bottom: var(--s5); }
.res-lab { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.res-lab .ic-sm { width: 15px; height: 15px; }
.res-wide { background: var(--brand-soft); border-radius: var(--r3); padding: var(--s3); color: var(--brand-ink); margin-bottom: var(--s3); }
.res-wide b { display: block; font-size: 1.5rem; font-weight: 900; margin-top: 2px; }
.res-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s5); }
.res-acc { background: var(--amber-soft); color: var(--amber); border-radius: var(--r3); padding: var(--s3); }
.res-xp { background: var(--ok-soft); color: var(--ok); border-radius: var(--r3); padding: var(--s3); }
.res-two b { display: block; font-size: 1.4rem; font-weight: 900; margin-top: 2px; }
.res-note { color: var(--muted-fg); font-size: .92rem; font-weight: 600; margin-bottom: var(--s5); }

/* ---------- 17. CHUỖI NGÀY ---------- */
.streak { position: fixed; inset: 0; z-index: 70; background: linear-gradient(180deg, #FFF3E6, var(--card) 45%); display: flex; flex-direction: column; overflow-y: auto; }
:root[data-theme="dark"] .streak { background: linear-gradient(180deg, #2A1C10, var(--card) 45%); }
.streak[hidden] { display: none; }
.streak-body { width: 100%; max-width: 460px; margin: 0 auto; padding: 0 var(--s4) calc(var(--s6) + env(safe-area-inset-bottom)); text-align: center; }
.flame { width: 120px; height: 145px; margin: var(--s3) auto var(--s4); }
.flame svg { width: 100%; height: 100%; }
.streak h2 { font-size: 1.9rem; }
.streak .sub { margin-top: var(--s2); }
.cal { margin-top: var(--s5); text-align: left; }
.cal-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.cal-head b { display: block; font-size: 1.06rem; font-weight: 900; }
.cal-head small { color: var(--muted-fg); font-size: .82rem; font-weight: 700; }
.cal-nav { margin-left: auto; display: flex; gap: var(--s2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid .dow { text-align: center; font-size: .74rem; font-weight: 900; color: var(--muted-fg); padding-bottom: var(--s2); }
.cal-grid .dow.today { color: var(--flame); }
.cal-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r1); font-size: .88rem; font-weight: 800; color: var(--muted-fg); }
.cal-cell.on { background: color-mix(in srgb, var(--flame) 16%, transparent); color: var(--flame); }
.cal-cell.on svg { width: 22px; height: 26px; }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--flame); }

/* ---------- 18. SHEET & TOAST ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; }
.sheet-wrap[hidden] { display: none; }
.scrim { position: absolute; inset: 0; background: rgba(11,18,32,.6); animation: fade var(--t2) var(--e) both; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: relative; width: 100%; max-width: 460px; margin: 0 auto; background: var(--card); border-radius: var(--r4) var(--r4) 0 0; padding: var(--s6) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom)); text-align: center; animation: up var(--t3) var(--e) both; }
@keyframes up { from { transform: translateY(100%); } }
.sheet h2 { font-size: 1.25rem; margin-bottom: var(--s2); }
.lv-opt { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); margin-bottom: var(--s2); border-radius: var(--r2); box-shadow: inset 0 0 0 2px var(--line); text-align: left; }
.lv-opt.on { box-shadow: inset 0 0 0 3px var(--brand); background: var(--brand-soft); }
.lv-opt b { display: grid; place-items: center; width: 36px; height: 30px; border-radius: 8px; background: var(--brand-fill); color: #fff; font-size: .76rem; font-weight: 900; flex: none; }
.lv-opt span { min-width: 0; display: flex; flex-direction: column; }
.lv-opt strong { font-size: .96rem; font-weight: 900; }
.lv-opt small { font-size: .82rem; color: var(--muted-fg); font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; max-width: 88vw; padding: var(--s3) var(--s5); border-radius: var(--rf); background: var(--fg); color: var(--bg); font-size: .88rem; font-weight: 800; text-align: center; box-shadow: var(--sh-3); animation: in var(--t2) var(--e) both; }
.toast[hidden] { display: none; }

/* ---------- 19. MÀN HẸP ---------- */
@media (max-width: 379px) {
  :root { --gut: 12px; }
  .content, .p-bar, .p-body, .p-foot, .topbar { padding-inline: var(--gut); }
  .tab { font-size: .6rem; } .tab .ic { width: 20px; height: 20px; }
  .pills { gap: 4px; }
  .pill { padding-inline: var(--s2); gap: 3px; font-size: .84rem; }
  .p-theme { padding-inline: var(--s1); }
  .node-btn { width: 66px; height: 66px; }
  .node-label { font-size: .74rem; }
  .vcard-en { font-size: 1.7rem; }
  .big-count { font-size: 1.5rem; }
  .nodes { gap: var(--s4) var(--s1); }
}

/* ---------- 20. MÁY TÍNH BẢNG & MÀN RỘNG ---------- */
@media (min-width: 768px) {
  :root { --shell: 640px; }
  body { font-size: 17px; }
  .app { gap: var(--s5); padding-inline: var(--s4); align-items: flex-start; }
  .tabbar { display: none; }
  .content { padding-bottom: var(--s8); }
  .sidenav {
    display: flex; flex-direction: column; gap: var(--s5);
    position: sticky; top: 0; align-self: flex-start; height: 100dvh;
    width: 96px; flex: none; padding: calc(var(--s5) + env(safe-area-inset-top)) var(--s2) var(--s5);
    box-shadow: 1px 0 0 var(--line);
  }
  .brand { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
  .brand-mark { width: 48px; height: 48px; } .brand-mark svg { width: 100%; height: 100%; }
  .brand-name { display: none; }
  .sidenav-list { display: flex; flex-direction: column; gap: var(--s2); }
  .navlink { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 60px; padding: var(--s2); border-radius: var(--r2); color: var(--muted-fg); font-size: .68rem; font-weight: 800; }
  .navlink .ic { width: 22px; height: 22px; }
  .navlink.is-active { background: var(--brand-soft); color: var(--brand-ink); }
  .banner { margin-inline: 0; border-radius: var(--r3); overflow: hidden; }
  .banner-wave { display: none; }
  .nodes { gap: var(--s6) var(--s3); }
  .node-btn { width: 84px; height: 84px; }
  .pics { gap: var(--s4); }
  .mascot-top { width: 130px; height: 130px; }
}

@media (min-width: 1024px) {
  .app { gap: var(--s6); padding-inline: var(--s5); }
  .sidenav { width: 232px; padding-inline: var(--s3); }
  .brand { flex-direction: row; padding-inline: var(--s2); }
  .brand-name { display: block; font-size: 1.1rem; font-weight: 900; }
  .navlink { flex-direction: row; justify-content: flex-start; gap: var(--s3); min-height: 50px; padding-inline: var(--s3); font-size: .94rem; }
  .rail { display: flex; flex-direction: column; gap: var(--s3); width: 292px; flex: none; padding: var(--s5) 0; }
  .rail-h { display: flex; align-items: center; gap: var(--s2); font-size: .95rem; margin-bottom: var(--s2); }
  .rail-big { font-size: 2rem; font-weight: 900; color: var(--flame); }
  .week { display: flex; gap: 5px; margin-top: var(--s3); }
  .week i { flex: 1; height: 26px; border-radius: 6px; background: var(--muted); }
  .week i.on { background: var(--flame); }
}
@media (min-width: 1440px) { :root { --shell: 700px; } .app { gap: var(--s8); } }

/* điện thoại nằm ngang */
@media (orientation: landscape) and (max-height: 500px) {
  .mascot-top { width: 70px; height: 70px; }
  .p-body { padding-bottom: var(--s3); }
  .stage { gap: var(--s3); }
  .fcard { min-height: 180px; padding: var(--s4); }
  .btn { min-height: 46px; }
  .sky { height: 130px; }
  .flame { width: 76px; height: 92px; margin-block: var(--s2); }
}

/* ---------- 21. GIẢM CHUYỂN ĐỘNG ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
}