/* KISS English · App chấm phát âm
   Màu lấy từ bộ thương hiệu: KISS Gold #FEBC11, Midnight Ink #0F1A32, Focus Blue #006EF3.
   Luật cứng của brand: chữ trên nền vàng luôn là #0F1A32; vàng giữ dưới 10% diện tích;
   mỗi màn hình chỉ một nút vàng. */

:root{
  --ink:#0F1A32;
  --bg-1:#0B152C;
  --bg-2:#101E3D;
  --surface:#16233F;
  --surface-2:#1D2C4C;
  --line:#28385A;
  --text:#EDF2FB;
  --text-2:#A9B8D4;
  --muted:#7C8CAB;
  --gold:#FEBC11;
  --gold-dim:#F5D98A;
  --blue:#4E9BFF;
  --good:#33CC96;
  --warn:#F5B045;
  --crit:#FF7B6B;
  --radius:16px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* Nhiều khối ở đây đặt display:flex nên phải ép [hidden] thắng, nếu không
   form xin số và nút nghe mẫu sẽ hiện sai lúc. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(120% 70% at 50% 0%, #17274A 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
button,input{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:8px}

.app{
  max-width:520px; margin:0 auto; min-height:100%;
  padding:max(20px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
}
.screen{display:none; flex-direction:column; gap:18px; flex:1; animation:rise .32s ease}
.screen.active{display:flex}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .screen{animation:none} }

/* ───────────────── mở đầu ───────────────── */
.brand{display:flex; justify-content:center; padding-top:6px}
.logo{font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--gold)}
.logo span{color:var(--text); font-weight:600; margin-left:5px}

h1{
  font-size:clamp(27px,7.6vw,34px); font-weight:800; line-height:1.22;
  letter-spacing:-.025em; text-align:center; margin:12px 0 0; text-wrap:balance;
}
.lede{color:var(--text-2); text-align:center; margin:0; font-size:15.5px; text-wrap:pretty}

.levels{display:flex; flex-direction:column; gap:9px; margin-top:4px}
.level{
  text-align:left; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--radius); padding:13px 15px; cursor:pointer; transition:border-color .18s, background .18s;
}
.level b{display:block; font-size:15.5px; font-weight:700}
.level span{display:block; font-size:13.5px; color:var(--muted); line-height:1.45}
.level.selected{border-color:var(--gold); background:var(--surface-2)}
.level.selected b{color:var(--gold-dim)}

.consent{display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--text-2); line-height:1.5}
.consent input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--gold); flex:none}

.btn-gold{
  background:var(--gold); color:var(--ink); border:none; border-radius:14px;
  font-weight:700; font-size:16.5px; padding:16px; width:100%; cursor:pointer;
  transition:transform .12s, opacity .2s;
}
.btn-gold:active{transform:scale(.985)}
.btn-gold:disabled{opacity:.4; cursor:not-allowed}
.btn-text{
  background:none; border:none; color:var(--muted); font-size:14px; padding:10px;
  cursor:pointer; width:100%; text-decoration:underline; text-underline-offset:3px;
}
.btn-ghost{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-2);
  border-radius:11px; padding:9px 15px; font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
}
.btn-ghost svg{width:17px; height:17px; fill:var(--gold)}
.btn-ghost.playing{border-color:var(--gold); color:var(--gold-dim)}
.fineprint{text-align:center; font-size:12.5px; color:var(--muted); margin:0}

/* ───────────────── làm bài ───────────────── */
.progress{display:flex; gap:5px; padding-top:4px}
.progress i{
  flex:1; height:4px; border-radius:2px; background:var(--line); transition:background .3s;
}
.progress i.done{background:var(--good)}
.progress i.weak{background:var(--warn)}
.progress i.now{background:var(--gold)}

.task{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:9px;
}
.task-type{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.task-text{
  font-size:clamp(25px,7.4vw,33px); font-weight:700; letter-spacing:-.02em;
  margin:0; line-height:1.25; text-wrap:balance;
}
.task-ipa{font-family:'IBM Plex Mono',monospace; color:var(--gold-dim); font-size:15px; margin:0}
.task-text.sentence{font-size:clamp(20px,5.6vw,25px); line-height:1.4}

.mic-zone{display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; padding:8px 0}
.mic-halo{
  position:absolute; top:0; width:92px; height:92px; border-radius:50%;
  background:var(--gold); opacity:0; transform:scale(1); pointer-events:none;
}
.mic-halo.on{opacity:.16}
.mic{
  width:92px; height:92px; border-radius:50%; border:none; background:var(--gold);
  display:grid; place-items:center; cursor:pointer; position:relative; z-index:1;
  transition:transform .14s, background .2s;
}
.mic:active{transform:scale(.95)}
.mic svg{width:34px; height:34px; fill:var(--ink)}
.mic .ico-stop{display:none; width:26px; height:26px}
.mic.recording{background:var(--crit)}
.mic.recording .ico-mic{display:none}
.mic.recording .ico-stop{display:block}
.mic:disabled{opacity:.45; cursor:wait}
.mic-label{font-size:14.5px; font-weight:600; margin:0; color:var(--text-2)}
.hint{font-size:13px; color:var(--muted); text-align:center; margin:0; max-width:38ch; line-height:1.5}

.feedback{
  border-radius:13px; padding:12px 15px; font-size:14px; line-height:1.5;
  background:var(--surface); border:1px solid var(--line);
}
.feedback.good{border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.feedback.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.feedback b{font-family:'IBM Plex Mono',monospace}
.feedback .fscore{float:right; font-weight:700; font-family:'IBM Plex Mono',monospace}
.feedback .fscore.g{color:var(--good)} .feedback .fscore.w{color:var(--warn)} .feedback .fscore.c{color:var(--crit)}
.word-marks{margin-top:7px; display:flex; flex-wrap:wrap; gap:6px}
.word-marks span{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:2px 7px; border-radius:6px;
  background:var(--surface-2); color:var(--text-2);
}
.word-marks span.bad{background:color-mix(in srgb,var(--crit) 22%,var(--surface-2)); color:#FFD9D4}

.test-actions{margin-top:auto; display:flex; flex-direction:column; gap:2px}

/* ───────────────── kết quả ───────────────── */
.score-head{display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:8px}
.ring{position:relative; width:150px; height:150px}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:9; stroke-linecap:round}
.ring-bg{stroke:var(--line)}
.ring-fg{stroke:var(--gold); stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.3,1)}
.ring-val{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2px;
  font-family:'IBM Plex Mono',monospace; font-size:38px; font-weight:600; font-variant-numeric:tabular-nums;
}
.ring-val small{font-size:14px; color:var(--muted); align-self:center; margin-top:15px; margin-left:1px}
.level-label{font-size:19px; font-weight:700; margin:0; color:var(--gold-dim)}
.level-note{font-size:14px; color:var(--text-2); margin:0; text-align:center; max-width:34ch}

.bars{display:flex; flex-direction:column; gap:10px}
.bar-row{display:grid; grid-template-columns:96px 1fr 38px; gap:10px; align-items:center; font-size:13.5px}
.bar-row .track{height:7px; border-radius:4px; background:var(--line); overflow:hidden}
.bar-row .fill{height:100%; border-radius:4px; background:var(--good); width:0; transition:width .9s ease .2s}
.bar-row .fill.w{background:var(--warn)} .bar-row .fill.c{background:var(--crit)}
.bar-row .val{font-family:'IBM Plex Mono',monospace; text-align:right; color:var(--text-2); font-variant-numeric:tabular-nums}

.ai-block{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.ai-head{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.ai-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--gold); color:var(--ink);
  display:grid; place-items:center; font-weight:800; font-size:13px; flex:none;
}
.ai-head b{display:block; font-size:15px} .ai-head span{font-size:12.5px; color:var(--muted)}
.skeleton{display:flex; flex-direction:column; gap:9px; padding:2px 0 10px}
.skeleton i{height:11px; border-radius:6px; background:var(--surface-2); animation:shimmer 1.5s ease-in-out infinite}
.skeleton i:nth-child(1){width:92%} .skeleton i:nth-child(2){width:78%; animation-delay:.15s}
.skeleton i:nth-child(3){width:85%; animation-delay:.3s}
@keyframes shimmer{0%,100%{opacity:.45} 50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){ .skeleton i{animation:none} }
.strength{margin:0 0 12px; font-size:15px; color:var(--text)}
.fixes{display:flex; flex-direction:column; gap:10px}
.fix{background:var(--surface-2); border-radius:12px; padding:12px 14px; border-left:3px solid var(--gold)}
.fix b{display:block; font-size:14.5px; margin-bottom:3px}
.fix p{margin:0; font-size:13.5px; color:var(--text-2); line-height:1.55}
.fix .how{margin-top:6px; color:var(--gold-dim)}

.detail-toggle{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:2px 15px}
.detail-toggle summary{padding:12px 0; cursor:pointer; font-size:14px; color:var(--text-2); font-weight:600}
.item-scores{padding-bottom:12px; display:flex; flex-direction:column; gap:7px}
.item-scores .row{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:6px 0; border-top:1px solid var(--line)}
.item-scores .row span:first-child{font-family:'IBM Plex Mono',monospace; color:var(--text-2)}
.item-scores .row b{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums}

/* ───────────────── chat ───────────────── */
.chat-head{display:flex; align-items:center; gap:11px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.chat-head b{display:block; font-size:15px} .chat-head span{font-size:12.5px; color:var(--muted)}
.chat-head .back{width:auto; margin-left:auto; padding:6px 2px}
.chat-log{flex:1; display:flex; flex-direction:column; gap:10px; padding:4px 0; overflow-y:auto; min-height:220px}
.msg{max-width:86%; padding:11px 14px; border-radius:15px; font-size:14.5px; line-height:1.55; white-space:pre-wrap}
.msg.bot{background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start}
.msg.me{background:var(--gold); color:var(--ink); border-bottom-right-radius:5px; align-self:flex-end; font-weight:500}
.msg.typing{display:flex; gap:5px; align-items:center; padding:14px}
.msg.typing i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite}
.msg.typing i:nth-child(2){animation-delay:.2s} .msg.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25} 30%{opacity:1}}

.chat-input{display:flex; gap:9px; padding-top:10px}
.chat-input input{
  flex:1; background:var(--surface); border:1px solid var(--line); border-radius:13px;
  padding:13px 15px; font-size:16px;
}
.chat-input input::placeholder{color:var(--muted)}
.chat-input button{
  width:50px; border:none; border-radius:13px; background:var(--surface-2); cursor:pointer;
  display:grid; place-items:center; flex:none;
}
.chat-input button svg{width:20px; height:20px; fill:var(--gold)}

.lead-card{
  background:var(--surface); border:1.5px solid var(--gold); border-radius:var(--radius);
  padding:17px; margin-top:12px; display:flex; flex-direction:column; gap:9px;
}
.lead-card b{font-size:16px; line-height:1.35}
.lead-card p{margin:0; font-size:13.5px; color:var(--text-2); line-height:1.5}
.lead-card form{display:flex; flex-direction:column; gap:9px; margin-top:3px}
.lead-card input{
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; font-size:16px;
}
.lead-card input::placeholder{color:var(--muted)}
.lead-note{font-size:12px !important; color:var(--muted) !important}
.lead-card.done{border-color:var(--good)}

/* ───────────────── toast ───────────────── */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  padding:12px 18px; border-radius:12px; font-size:14px; max-width:88vw; text-align:center;
  z-index:99; box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
}

/* ── mục nói tự do: bộ câu hỏi gợi ý ── */
.questions{
  list-style:none; counter-reset:q; margin:6px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px; text-align:left; width:100%;
}
.questions li{
  counter-increment:q; display:grid; grid-template-columns:22px 1fr; gap:9px; align-items:baseline;
}
.questions li::before{
  content:counter(q); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  color:var(--gold); background:var(--surface-2); border-radius:6px; padding:2px 0; text-align:center;
}
.questions .en{font-size:15px; font-weight:600; display:block; line-height:1.4}
.questions .vi{font-size:12.5px; color:var(--muted); display:block; line-height:1.4}
.privacy-note{
  font-size:12.5px; color:var(--muted); line-height:1.5; margin:4px 0 0;
  border-top:1px solid var(--line); padding-top:11px; text-align:left; width:100%;
}

/* ── khối phần nói tự do ở màn kết quả ── */
.free-block{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:14px 16px}
.free-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);
}
.free-text{margin:8px 0 0; font-size:14.5px; color:var(--text-2); line-height:1.55; font-style:italic}
.free-meta{margin:7px 0 0; font-size:12.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace}