/* =====================================================================
   main.css — toàn bộ giao diện.

   Bảng màu do khách chọn: đất nung, cát, xanh đá, xanh trời, xám giấy.
   Nền SÁNG, chữ tối — khác hẳn bản đầu (nền vũ trụ tím than, chữ trắng).

   Mọi màu đều đi qua token ở khối :root ngay dưới. Đừng viết màu thẳng
   vào thành phần: mỗi sắc độ trong đó đã được đo tương phản đạt WCAG AA,
   viết cứng một màu mới là phá mất chỗ đó mà không ai biết.
   ===================================================================== */

:root{
  /* Trang này chỉ có MỘT giao diện sáng và tự lo hết màu của mình.
     Khai rõ để Chrome trên Android (tính năng "Auto dark theme") không tự
     đảo màu trang. Chưa gặp lỗi thật, nhưng nền sáng không khai thì có
     nguy cơ, mà khai thì không mất gì. */
  color-scheme: light;

  /* Bảng màu MỚI — đổi hẳn từ bộ đất nung/cát/xanh đá trầm sang bộ màu
     tươi rực của mockup đã duyệt (cam san hô, xanh dương, vàng nắng),
     cho khác hẳn giao diện cũ. Mỗi màu MANG CHỮ TRẮNG bên dưới đã đo lại
     tương phản đạt WCAG AA với tông màu mới — đổi tiếp thì đo lại. */
  --terracotta:#FF7A50;
  --sand:#FBCB6B;
  --slate:#1D7DA6;
  --sky:#4FB8E8;
  --paper:#FFF6E6;

  /* Sắc độ phái sinh, mỗi cái đều đã đo tương phản đạt chuẩn WCAG AA.
     Đừng đổi bừa — đổi là chữ khó đọc. Con số ghi kèm là tỉ lệ trên nền trắng. */
  --ink:#37464F;          /* chữ chính            9.76:1 */
  --ink-2:#546C79;        /* chữ phụ              5.53:1 */
  --ink-3:#586B75;        /* chữ mờ               5.72:1 */
  --accent:#FF7A50;       /* mảng màu, viền, chữ to */
  --accent-fill:#CC3E1A;  /* nền nút, chữ trắng   4.92:1 */
  --accent-ink:#B23A1A;   /* chữ màu cam          5.98:1 */
  --accent-soft:#FFE8DE;  /* nền cam rất nhạt */

  --ok:#1F7A2E;   --ok-ink:#175E23;   --ok-soft:#E1F3E3;
  --no:#B5544A;   --no-ink:#8C3A32;   --no-soft:#F7E6E3;

  /* Màu trang trí mới — chỉ dùng cho mascot / sao / hiệu ứng ăn mừng,
     không mang chữ trắng nên không nằm trong nhóm cần giữ AA ở trên. */
  --sun:#FFC93C; --sun-dark:#E8A916;

  --surface:#FFFFFF;         /* mặt thẻ */
  --surface-2:#FFF8EC;       /* mặt thẻ chìm hơn */
  --line:rgba(84,108,121,.22);
  --line-strong:rgba(84,108,121,.4);
  --shadow-sm:0 2px 6px rgba(55,70,79,.1);
  --shadow:0 6px 18px rgba(55,70,79,.14);
  --shadow-lg:0 14px 34px rgba(55,70,79,.18);

  --brand:#CC3E1A;
  --gold-1:#FBCB6B; --gold-2:#FF7A50;

  /* Easing nảy nhẹ cho nút/thẻ — thay cho ease phẳng, tạo cảm giác đồ
     chơi bo tròn hơn là giao diện văn phòng. */
  --bounce:cubic-bezier(.34,1.56,.64,1);

  --font-round:'Baloo 2', 'Nunito', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
img{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* [hidden] phải thắng mọi display: flex/grid đặt sau nó */
[hidden]{display:none!important}

/* Viền khi đi bằng phím Tab — để dùng được bàn phím, không chỉ chuột */
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:9px}

/* Người đã tắt hiệu ứng chuyển động trong cài đặt máy thì tôn trọng */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Nền trang: bầu trời nhạt chuyển xuống cát ----------------- */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 108%, var(--sand) 0%, transparent 58%),
    radial-gradient(70% 55% at 12% 8%,  #FFFFFF 0%, transparent 62%),
    linear-gradient(180deg, var(--sky) 0%, #DDE6EB 42%, var(--paper) 100%);
}
.sky canvas{position:absolute;inset:0;width:100%;height:100%}
.sky::after{            /* dải sáng mềm vắt ngang, thay cho dải ngân hà */
  content:'';position:absolute;left:-10%;right:-10%;top:48%;height:42%;
  background:radial-gradient(60% 100% at 50% 50%, rgba(255,255,255,.7), transparent 72%);
  filter:blur(30px);transform:rotate(-4deg);
}

/* ---------- Banner dùng thử trên cùng --------------------------------- */
.trial{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:var(--sand);color:var(--ink);
  font-size:13px;line-height:1.45;box-shadow:0 2px 10px rgba(55,70,79,.18);
}
.trial b{color:var(--ink)}
.trial .grow{flex:1;min-width:0}
.trial .pill{
  padding:7px 16px;border-radius:11px;font-weight:800;font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;color:var(--ink);white-space:nowrap;
}
.trial .pill.login{background:var(--slate);color:#FFFFFF}
.trial .pill.signup{background:var(--accent-fill);color:#FFFFFF}
.trial .x{font-size:18px;opacity:.6;padding:0 4px}
.trial[hidden]{display:none}
body.has-trial{padding-top:var(--trial-h,56px)}

/* ---------- Nút tròn nổi khối (thanh trên) ---------------------------- */
.orb{
  position:relative;width:72px;height:66px;border-radius:19px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:6px;transition:transform .12s var(--bounce), box-shadow .12s ease;
}
.orb::before{content:none}
.orb:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)}
.orb:active{transform:translateY(1px)}
.orb .glyph{
  width:36px;height:36px;margin-bottom:2px;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 2px 5px rgba(55,70,79,.25);
}
.orb .glyph svg{width:20px;height:20px;fill:#FFFFFF}
.orb .cap{
  font-family:var(--font-round);font-weight:800;font-size:8.5px;letter-spacing:.3px;
  text-transform:uppercase;color:var(--ink-2);line-height:1;text-align:center;
  max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.orb .badge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:12px;background:var(--no);border:2px solid var(--ink);
  font-size:9px;font-weight:800;display:grid;place-items:center;
}

/* ---------- Ví xu / kim cương ---------------------------------------- */
.wallet{
  display:flex;align-items:center;gap:8px;height:56px;padding:0 16px 0 40px;
  border-radius:34px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);position:relative;
  font-family:var(--font-round);font-weight:800;
}
.wallet .coin{
  position:absolute;left:-4px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  box-shadow:inset 0 -4px 0 rgba(55,70,79,0.14),0 3px 6px rgba(55,70,79,0.22);
  display:grid;place-items:center;font-size:18px;
}
.wallet .coin.gold{background:radial-gradient(circle at 35% 30%,var(--accent-ink),var(--accent) 60%,var(--accent-ink))}
.wallet .coin.gem{background:var(--slate);color:#FFFFFF}
.wallet .val{font-size:17px;color:var(--ink);display:block;line-height:1}
.wallet .lbl{display:block;line-height:1;margin-bottom:3px;font-size:9px;text-transform:uppercase;color:var(--ink-3);letter-spacing:.5px}

/* ---------- Logo ------------------------------------------------------ */
.logo{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--font-round);font-weight:800;text-align:center;line-height:1;
}
.logo img{
  width:66px;height:66px;object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(55,70,79,.22));
  transition:transform .15s var(--bounce);
}
.logo:hover img{transform:scale(1.06)}
.logo.big img{width:84px;height:84px}
.logo .small{
  font-size:9.5px;letter-spacing:2.6px;color:var(--ink-2);
  text-transform:uppercase;
}

/* ---------- Bố cục trang chủ ------------------------------------------ */
.stage{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
body.has-trial .stage{min-height:calc(100vh - var(--trial-h,56px))}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:1420px;width:100%;margin:0 auto;padding:14px 24px 0;
}
.topbar .navstrip{display:contents}
.topbar .logo{order:0}
.topbar .side{display:flex;align-items:center;gap:8px}
.topbar .side.left{order:-1}
.topbar .side.right{order:1}
.topbar .orbs{display:flex;gap:8px}

/* ---------- Bản đồ luyện thi: thẻ phẳng xếp thành đường lượn ----------- */
.pathmap{flex:1;position:relative;padding:20px 0 80px}
.path-nodes{
  position:relative;max-width:560px;margin:0 auto;padding:10px 0;
  display:flex;flex-direction:column;align-items:center;gap:30px;
}
.path-nodes::before{      /* đường chấm dọc xuyên tâm, các thẻ lệch quanh nó */
  content:'';position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;z-index:0;
  background:repeating-linear-gradient(var(--line-strong) 0 10px, transparent 10px 22px);
  border-radius:6px;
}
.pnode{
  position:relative;z-index:1;display:block;width:172px;
  transition:transform .18s var(--bounce);cursor:pointer;text-align:center;
  transform:translateX(var(--tx,0));
}
.pnode:hover{transform:translateX(var(--tx,0)) translateY(-4px)}
.pnode:active{transform:translateX(var(--tx,0)) translateY(1px)}
.pcardbox{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:16px 12px 14px;border-radius:22px;box-shadow:var(--shadow);
}
.picon{
  width:56px;height:56px;border-radius:50%;margin-bottom:9px;
  display:grid;place-items:center;font-size:26px;color:#FFFFFF;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.12);
}
.pfree{
  position:absolute;top:-8px;right:8px;z-index:2;background:linear-gradient(180deg,var(--ok),var(--ok-ink));
  color:#FFFFFF;font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:10px;
  box-shadow:0 3px 0 rgba(55,70,79,0.17);text-transform:uppercase;letter-spacing:.4px;
}
.pmark{
  position:absolute;top:-8px;left:8px;z-index:2;background:var(--surface);
  border:2px solid var(--line);font-size:10.5px;font-weight:800;color:var(--accent-ink);
  padding:2px 7px;border-radius:10px;box-shadow:var(--shadow-sm);
}
.pcap{
  font-family:var(--font-round);font-weight:800;
  text-transform:uppercase;font-size:14px;letter-spacing:.6px;color:var(--ink);
}
.psub{font-size:11px;color:var(--ink-2);margin-top:3px;line-height:1.4}
.plvls{display:flex;gap:4px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.plvls i{
  font-style:normal;font-size:9px;font-weight:800;padding:2px 7px;border-radius:9px;
  box-shadow:0 2px 0 rgba(55,70,79,.14);
}
.pnode.has-progress .pcardbox{box-shadow:var(--shadow), 0 0 0 4px var(--sun)}

.pflag{
  position:absolute;top:-38px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:2;
  background:var(--accent-fill);color:#FFFFFF;font-family:var(--font-round);font-weight:800;
  font-size:12px;padding:6px 14px;border-radius:11px;box-shadow:0 4px 0 var(--accent-ink);
  animation:pflag-bob 1.6s ease-in-out infinite;
}
.pflag::after{
  content:'';position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--accent-ink);
}
@keyframes pflag-bob{50%{transform:translateX(-50%) translateY(-4px)}}
.pnode.is-cur .pcardbox{
  animation:pnode-pulse 1.8s ease-in-out infinite;
}
@keyframes pnode-pulse{50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.pflag,.pnode.is-cur .pcardbox{animation:none}}

@media (max-width:560px){
  .pnode{width:132px}
  .picon{width:46px;height:46px;font-size:21px}
  .pcap{font-size:12px}
  .psub{display:none}
}

/* ---------- Thanh dưới cùng ------------------------------------------- */
.bottombar{
  position:relative;z-index:10;width:min(1112px,94vw);margin:0 auto 12px;
  background:var(--slate);border-radius:24px 24px 0 0;
  box-shadow:0 -6px 22px rgba(55,70,79,.25);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;min-height:66px;
}
.bottombar .grp{display:flex;align-items:center;gap:14px;flex:1}
.bottombar .grp.right{justify-content:flex-end}
.bottombar .mid{position:relative;display:flex;flex-direction:column;align-items:center}
.bottombar .mid .logo{margin-top:-40px}
.bottombar .round{
  position:absolute;top:-58px;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;font-size:22px;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.bottombar .round.chat{left:-78px;background:var(--surface);color:var(--slate)}
.bottombar .round.call{right:-78px;background:var(--surface);color:var(--slate)}
.bottombar .round:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.bottombar .hotline{
  position:absolute;top:-88px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-family:var(--font-round);font-weight:800;font-size:12px;
  letter-spacing:.6px;color:var(--ink);
  background:var(--surface);padding:6px 14px;border-radius:999px;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}

.chip{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 14px 0 34px;border-radius:9px;
  font-family:var(--font-round);font-weight:800;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.4px;color:#FFFFFF;white-space:nowrap;
  transition:transform .12s var(--bounce), box-shadow .12s ease;
}
.chip::before{content:none}
.chip .ic{
  position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  box-shadow:0 2px 5px rgba(55,70,79,.3);
}
.chip.red{background:var(--accent-fill);box-shadow:0 3px 0 var(--accent-ink)}
.chip.blue{background:#FFFFFF;color:var(--ink);box-shadow:0 3px 0 rgba(55,70,79,.3)}
.chip:hover{transform:translateY(-2px)}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(55,70,79,.35)}
.chip span{position:relative}

/* nút phụ dọc mép phải */
.sidetab{
  position:fixed;right:0;bottom:16vh;z-index:40;writing-mode:vertical-rl;
  background:var(--accent-fill);color:#FFFFFF;
  font-family:var(--font-round);font-weight:800;font-size:11px;letter-spacing:1px;
  padding:14px 7px;border-radius:11px 0 0 11px;box-shadow:-3px 3px 10px rgba(55,70,79,0.22);
}

/* ---------- Thông báo nhỏ nổi lên (thay alert()) ----------------------- */
.kidtoast{
  position:fixed;left:50%;top:18px;z-index:500;max-width:min(92vw,420px);
  transform:translate(-50%,-140%);transition:transform .3s var(--bounce);
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:2px solid var(--line);border-radius:19px;
  padding:12px 18px;box-shadow:var(--shadow-lg);font-size:14px;line-height:1.5;color:var(--ink);
  white-space:pre-line;
}
.kidtoast.show{transform:translate(-50%,0)}
.kidtoast .mascot{font-size:24px;flex:0 0 auto}

/* ---------- Trang bộ đề (bản đồ thử thách) ---------------------------- */
.lvhead{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:12px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.lvhead .back{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;
  border-radius:11px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);font-weight:800;font-size:12px;text-transform:uppercase;
}
.lvhead .back:hover{border-color:var(--accent);color:var(--accent-ink)}
.lvhead h1{
  flex:1;margin:0;text-align:center;font-family:var(--font-round);
  font-size:22px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);
}
.lvhead .tool{
  height:34px;padding:0 14px;border-radius:11px;font-weight:800;font-size:11.5px;
  text-transform:uppercase;background:var(--slate);color:#FFFFFF;
  box-shadow:0 2px 0 var(--ink);
}
.lvhead .desc{font-size:12px;color:var(--ink-2)}
.lvhead select{
  height:34px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);padding:0 10px;font-weight:700;font-size:12px;
}
.lvhead select option{color:var(--ink)}

.map{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:40px 20px 120px}
.map .path{position:absolute;inset:0;z-index:-1}
.node{
  position:relative;width:120px;margin:0 0 26px;
  display:flex;flex-direction:column;align-items:center;
  transition:transform .18s var(--bounce);
}
.node:hover{transform:translateY(-4px)}
.node:active{transform:translateY(1px)}
.node .dome{
  width:86px;height:86px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-round);font-weight:800;font-size:30px;color:var(--surface);
  box-shadow:inset 0 -8px 0 rgba(55,70,79,0.12), 0 7px 0 rgba(55,70,79,0.17);
}
.node .plate{
  margin-top:-10px;padding:6px 14px;border-radius:17px;
  font-weight:800;font-size:12px;color:#FFFFFF;white-space:nowrap;
  box-shadow:0 4px 0 rgba(55,70,79,0.15);
}
.node .feet{display:none}
.node.open .dome{background:var(--ok);color:#FFFFFF;box-shadow:inset 0 -8px 0 rgba(55,70,79,0.12), 0 7px 0 rgba(55,70,79,0.17), 0 0 0 5px var(--sun)}
.node.open .plate{background:var(--ok-ink)}
.node.lock .dome{background:var(--paper);color:var(--ink-3)}
.node.lock .plate{background:var(--ink-3);color:#FFFFFF}
.node.done .dome{background:var(--sand);color:var(--accent-ink)}
.node.done .plate{background:var(--accent-fill)}
.node .star{position:absolute;top:-10px;right:0;font-size:16px}

/* ---------- Trang đăng nhập / đăng ký --------------------------------- */
.authwrap{
  position:relative;z-index:1;min-height:100vh;
  display:grid;place-items:center;padding:80px 20px 40px;
}
.authcard{
  width:min(420px,100%);text-align:center;
}
.authcard h1{
  font-family:var(--font-round);font-size:40px;margin:0 0 26px;
  text-transform:uppercase;letter-spacing:3px;color:var(--ink);
}
.field{margin-bottom:16px;text-align:left}
.field label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:6px;font-weight:700}
.field input,.field select{
  width:100%;height:46px;border-radius:15px;padding:0 14px;
  border:2px solid var(--line);background:var(--surface-2);
  color:var(--ink);font-size:15px;font-family:inherit;
}
.field input::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus{outline:0;border-color:var(--accent-ink);background:var(--surface-2)}
.authcard .row{display:flex;justify-content:flex-end;margin-bottom:14px}
.authcard .row a{font-size:12px;font-weight:800;color:var(--accent-ink)}
.btn-main{
  width:100%;height:48px;border-radius:17px;
  background:var(--accent-fill);
  box-shadow:0 4px 0 var(--accent-ink);
  font-family:var(--font-round);font-weight:800;font-size:16px;
  text-transform:uppercase;letter-spacing:1.5px;color:#FFFFFF;
  transition:transform .12s var(--bounce);
}
.btn-main:hover{transform:translateY(-2px)}
.btn-main:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-ink)}
.authcard .foot{margin-top:18px;font-size:13px;color:var(--ink-2)}
.authcard .foot a{color:var(--accent-ink);font-weight:800}
.authcard .note{
  margin-top:14px;font-size:12px;color:var(--ink-3);background:var(--surface-2);
  border-radius:15px;padding:10px 14px;line-height:1.5;
}

/* ---------- Trang thư viện / thử thách nhỏ ---------------------------- */
.tabs{
  position:relative;z-index:2;display:flex;gap:6px;
  padding:10px 20px 0;max-width:1320px;margin:0 auto;
  border-bottom:2px solid var(--line);
}
.tabs button{
  padding:12px 22px;font-family:var(--font-round);font-weight:800;font-size:14px;
  color:var(--ink-3);border-bottom:3px solid transparent;margin-bottom:-2px;
}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent-ink)}
.tabs a{
  padding:12px 22px;font-family:var(--font-round);font-weight:800;font-size:14px;
  color:var(--accent-ink);border-bottom:3px solid transparent;margin-bottom:-2px;
  margin-left:auto;
}
.tabs a:hover{border-bottom-color:var(--accent-ink)}

.libwrap{
  position:relative;z-index:1;display:grid;grid-template-columns:250px 1fr;gap:22px;
  max-width:1320px;margin:0 auto;padding:20px;
}
.filters{
  background:var(--surface);border:2px solid var(--line);
  border-radius:19px;padding:14px;height:max-content;position:sticky;top:16px;
}
.filters .cefr{display:flex;gap:5px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.filters .cefr i{
  font-style:normal;width:34px;height:42px;border-radius:11px;display:grid;place-items:center;
  font-size:11px;font-weight:800;box-shadow:0 2px 0 rgba(55,70,79,.18);cursor:pointer;
}
.filters .cefr i.off{filter:grayscale(1) brightness(.7)}
.fgroup{
  margin-bottom:8px;border-radius:15px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));border:2px solid var(--line);
}
.fgroup summary{
  list-style:none;cursor:pointer;padding:9px 12px;display:flex;flex-direction:column;
}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup .t{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.5px}
.fgroup .v{font-size:12.5px;font-weight:800}
.fgroup .body{padding:4px 12px 12px;display:flex;flex-wrap:wrap;gap:6px}
.fgroup .body button{
  padding:5px 10px;border-radius:10px;background:var(--surface-2);
  font-size:11.5px;font-weight:700;
}
.fgroup .body button.on{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:var(--ink)}

.libmain h2{font-family:var(--font-round);font-size:26px;margin:0 0 6px}
.libmain .search{
  float:right;height:38px;width:280px;border-radius:15px;padding:0 14px;
  border:2px solid var(--line);background:var(--surface-2);color:var(--ink);
}
.secthead{display:flex;align-items:center;justify-content:space-between;margin:22px 0 10px}
.secthead h3{
  margin:0;font-family:var(--font-round);font-size:19px;color:var(--ink);
  display:flex;align-items:center;gap:9px;
}
.secthead h3::before{
  content:'';width:14px;height:14px;border-radius:7px;
  background:var(--dot,var(--sky));box-shadow:0 1px 0 rgba(55,70,79,.2);
}
.secthead a{
  font-size:11px;font-weight:800;padding:7px 14px;border-radius:11px;
  background:linear-gradient(180deg,var(--slate),var(--ink));box-shadow:0 3px 0 var(--ink);
}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{
  position:relative;background:var(--surface-2);border:2px solid var(--line);
  border-radius:19px;padding:14px;min-height:118px;display:flex;flex-direction:column;
  justify-content:space-between;transition:transform .12s var(--bounce),border-color .12s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--accent-ink)}
.card .ttl{font-weight:800;font-size:13.5px;line-height:1.4}
.card .meta{font-size:11.5px;color:var(--ink-3);margin-top:8px}
.card .free{
  position:absolute;top:-8px;right:10px;background:linear-gradient(180deg,var(--ok),var(--ok-ink));
  font-size:10px;font-weight:800;padding:3px 9px;border-radius:11px;
  box-shadow:0 3px 0 rgba(55,70,79,0.17);text-transform:uppercase;
}

/* ---------- Trang chung (sổ tay, thách đấu) --------------------------- */
.page{position:relative;z-index:1;flex:1;width:100%;max-width:1000px;margin:0 auto;padding:60px 20px 40px}
.page h1{font-family:var(--font-round);font-size:32px;margin:0 0 8px;color:var(--ink)}
.page .lead{color:var(--ink-2);margin:0 0 26px;font-size:14.5px}
.panel{
  background:var(--surface);border:2px solid var(--line);
  border-radius:21px;padding:22px;margin-bottom:18px;
}
.panel h2{font-family:var(--font-round);font-size:19px;margin:0 0 14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}

/* ---------- Điện thoại ------------------------------------------------ */
@media (max-width:900px){
  .topbar{padding:10px 12px 0}
  .topbar .side .orbs{gap:5px}
  .orb{width:56px;height:54px}
  .orb .glyph{width:28px;height:28px}
  .orb .glyph svg{width:16px;height:16px}
  .orb .cap{font-size:7px;max-width:52px}
  .wallet{height:44px;padding:0 12px 0 32px}
  .wallet .coin{width:36px;height:36px;font-size:15px}
  .logo img{width:52px;height:52px}
  .bottombar .round{display:none}
  .libwrap{grid-template-columns:1fr}
  .filters{position:static}
  .libmain .search{float:none;width:100%;margin-bottom:12px}
}
@media (max-width:700px){
  /* Banner dùng thử: xuống dòng thay vì ép chữ thành cột hẹp */
  .trial{flex-wrap:wrap;padding:8px 12px;gap:8px;font-size:12px;line-height:1.4}
  .trial .grow{flex:1 1 100%;order:1}
  .trial > span:first-child{order:0}
  .trial .pill{flex:1 1 0;text-align:center;order:2;padding:7px 8px}
  .trial .x{order:2}

  /* Logo lên một dòng riêng, hai nhóm nút gộp thành dải cuộn ngang */
  .topbar{flex-wrap:wrap;justify-content:center;gap:6px;padding:8px 0 0}
  .topbar .logo{order:-1;flex:0 0 100%}
  .topbar .logo{flex-direction:row;gap:8px}
  .topbar .logo img{width:40px;height:40px}
  .topbar .logo .small{font-size:8px;letter-spacing:2px}
  .topbar .navstrip{
    display:flex;order:0;width:100%;gap:6px;
    overflow-x:auto;scrollbar-width:none;
    padding:2px 12px 6px;scroll-snap-type:x proximity;
  }
  .topbar .navstrip::-webkit-scrollbar{display:none}
  .topbar .side{flex:0 0 auto}
  .topbar .wallet{display:none}

  /* Thanh dưới */
  .bottombar{flex-wrap:wrap;justify-content:center;border-radius:21px;padding:12px 22px}
  .bottombar .grp{flex:0 0 auto;justify-content:center;flex-wrap:wrap;gap:12px}
  .bottombar .mid .logo{margin-top:0}
  .chip{font-size:10px;height:30px;padding:0 12px 0 30px}
  .chip .ic{width:32px;height:32px;font-size:14px}
  .chip .ic svg{width:15px;height:15px}

  .slide:not(.is-active) .cap{display:none}
  .authcard h1{font-size:30px}
  .lvhead{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .lvhead h1{flex:1 1 100%;order:-1;font-size:18px}
  .lvhead .desc{display:none}
  .sidetab{display:none}
}

/* =====================================================================
   Bộ chạy bài thi
   ===================================================================== */
.examwrap{
  position:fixed;inset:0;z-index:300;overflow-y:auto;
  background:linear-gradient(180deg,var(--sky) 0%,#EDF1F3 30%,var(--surface) 100%);
}
.exam{max-width:660px;margin:0 auto;padding:0 20px 60px;min-height:100%}

.exam-top{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;
  padding:16px 0 14px;background:linear-gradient(180deg,var(--sky) 60%,transparent);
}
.exam-top .quit{
  width:36px;height:36px;border-radius:15px;flex:0 0 auto;
  background:var(--surface-2);font-size:16px;
}
.exam-top .quit:hover{background:var(--paper)}
.exam-top .bar{flex:1;height:10px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.exam-top .bar span{
  display:block;height:100%;width:0;border-radius:9px;
  background:linear-gradient(90deg,var(--gold-1),var(--gold-2));
  transition:width .35s ease;
}
.exam-top .count{
  font-family:var(--font-round);font-weight:800;font-size:13px;color:var(--ink-2);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

.exam-body .skill{
  display:inline-block;padding:4px 12px;border-radius:11px;margin-bottom:16px;
  background:var(--surface-2);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:1px;color:var(--ink-2);
}
.exam-body .hear{
  display:block;width:100%;padding:18px;border-radius:19px;margin-bottom:10px;
  background:linear-gradient(180deg,var(--slate),var(--ink));box-shadow:0 5px 0 var(--ink);
  font-family:var(--font-round);font-weight:800;font-size:16px;
}
.exam-body .hear.playing{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.02);filter:brightness(1.15)}}
.exam-body .script-toggle{
  display:block;margin:0 auto 14px;font-size:12px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;
}
.exam-body .script{
  margin:0 0 16px;padding:12px 16px;border-radius:17px;
  background:var(--surface-2);color:var(--ink-2);font-size:14px;line-height:1.6;font-style:italic;
}
.exam-body .ask{
  font-family:var(--font-round);font-size:23px;line-height:1.45;margin:0 0 22px;
  text-wrap:balance;
}

.opts{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.opt{
  display:flex;align-items:center;gap:14px;text-align:left;
  padding:15px 18px;border-radius:19px;
  background:var(--surface);border:2px solid var(--line);color:var(--ink);
  font-size:15.5px;line-height:1.45;transition:transform .1s var(--bounce),border-color .1s ease,background .1s ease;
}
.opt b{
  flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);color:var(--ink);font-size:13px;font-weight:800;
}
.opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.opt.picked{
  border-color:var(--brand);background:var(--accent-soft);
}
.opt.picked b{background:var(--brand);color:var(--ink)}

.btn-main.ghost{
  background:var(--surface);color:var(--ink);
  border:2px solid var(--line-strong);box-shadow:0 4px 0 var(--line-strong);
}
.btn-main:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* --- màn hình kết quả --- */
.result{text-align:center;padding-top:10px}
.result .score{
  font-family:var(--font-round);font-size:64px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.result .score.pass{color:var(--ok)}
.result .score.fail{color:var(--no)}
.result .stars{font-size:34px;letter-spacing:8px;margin:10px 0 6px;color:var(--ink-3)}
.result .stars .on{color:var(--accent)}
.result .verdict-txt{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0 0 22px}
.result .skills{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px;
}
.result .sk{
  display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:15px;
  background:var(--surface-2);font-size:13px;
}
.result .sk b{color:var(--accent-ink);font-variant-numeric:tabular-nums}
.result .acts{display:flex;gap:12px;margin-bottom:34px}
.result .acts .btn-main{flex:1}

.rev-title{
  font-family:var(--font-round);font-size:18px;text-align:left;
  margin:0 0 12px;padding-top:8px;border-top:2px solid var(--line);
}
.review{display:flex;flex-direction:column;gap:10px;text-align:left}
.rev{
  padding:14px 16px;border-radius:17px;background:var(--surface-2);
  border-left:4px solid;font-size:14px;line-height:1.55;
}
.rev.ok{border-left-color:var(--ok)}
.rev.no{border-left-color:var(--no)}
.rev-q{margin-bottom:6px}
.rev-you{color:var(--no);font-size:13px}
.rev-ans{color:var(--ok);font-size:13px}
.rev-why{color:var(--ink-3);font-size:13px;margin-top:6px;font-style:italic}

/* điểm hiện trên nút thử thách ngoài bản đồ */
.node .mark{
  position:absolute;bottom:-6px;right:2px;padding:1px 7px;border-radius:11px;
  background:var(--surface-2);font-size:10px;font-weight:800;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.node .star{font-size:13px;letter-spacing:-1px}

@media (max-width:700px){
  .exam{padding:0 14px 50px}
  .exam-body .ask{font-size:19px}
  .opt{font-size:14.5px;padding:13px 15px}
  .result .score{font-size:52px}
  .result .acts{flex-direction:column}
}

/* =====================================================================
   Đăng nhập
   ===================================================================== */
.authcard .lead-auth{
  color:var(--ink-2);font-size:14px;line-height:1.65;margin:0 0 20px;text-wrap:pretty;
}
.authcard .lead-auth a{color:var(--accent-ink);font-weight:700;text-decoration:underline;
  text-underline-offset:3px}
.gbtn{display:flex;justify-content:center;min-height:44px;margin-bottom:16px}
.authcard .note.err{color:var(--no-ink);background:var(--no-soft)}
.authcard a.btn-main{display:grid;place-items:center;text-decoration:none}

/* Thẻ tên người dùng trên thanh trên / đầu trang bộ đề */
.me{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  height:52px;padding:0 12px 0 6px;border-radius:32px;
  background:var(--surface);border:2px solid var(--line);
}
.me img,.me .ini{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  display:grid;place-items:center;color:var(--ink);
  font-family:var(--font-round);font-weight:800;font-size:16px;
}
.me .nm{
  font-family:var(--font-round);font-weight:800;font-size:12.5px;color:var(--ink);
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.me .nm b{
  font-size:9px;padding:1px 5px;border-radius:8px;margin-left:4px;
  background:var(--accent-fill);color:#FFFFFF;
  vertical-align:middle;
}
.me .out{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  padding:5px 9px;border-radius:10px;background:var(--surface-2);color:var(--ink-2);
}
.me .out:hover{background:var(--no-soft);color:var(--ink)}
.me .teacher{
  font-size:10.5px;font-weight:800;letter-spacing:.2px;white-space:nowrap;
  padding:5px 9px;border-radius:10px;background:var(--accent-fill);color:#FFFFFF;
  text-decoration:none;
}
.me .teacher:hover{filter:brightness(1.08)}

.lvhead .me{height:38px;padding:0 8px 0 4px}
.lvhead .me img,.lvhead .me .ini{width:28px;height:28px;font-size:13px}
.lvhead .me .nm{font-size:11.5px;max-width:110px}

@media (max-width:700px){
  .me{height:44px}
  .me .nm{max-width:90px;font-size:11.5px}
  .lvhead .me .nm{display:none}
}

/* Lối vòng khi Google chưa cho phép origin này */
.fallback{display:flex;flex-direction:column;gap:12px;width:100%}
.fallback p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6}
.fallback p.small{font-size:12.5px;color:var(--ink-3)}
.fallback .btn-main{display:grid;place-items:center;text-decoration:none;font-size:14px}

/* =====================================================================
   Bài thi — các kiểu câu hỏi mới và phản hồi ngay
   ===================================================================== */
.exam-top .mute{
  width:36px;height:36px;border-radius:15px;flex:0 0 auto;font-size:15px;
  background:var(--surface-2);
}
.exam-top .mute:hover{background:var(--paper)}

/* --- đúng / sai trên chính phương án --- */
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right b{background:var(--ok);color:#FFFFFF}
.opt.wrong{border-color:var(--no);background:var(--no-soft)}
.opt.wrong b{background:var(--no);color:#FFFFFF}
.opt:disabled{cursor:default}
.opt:disabled:hover{transform:none;border-color:var(--ink-3);background:var(--surface-2)}
.opt.picked:disabled:hover,.opt.right:disabled:hover,.opt.wrong:disabled:hover{background:inherit;border-color:inherit}

/* --- câu sắp xếp từ --- */
.tray{
  min-height:64px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:12px;border-radius:19px;margin-bottom:14px;
  background:var(--surface-2);border:2px dashed var(--line);
}
.tray.right{border-style:solid;border-color:var(--ok);background:var(--ok-soft)}
.tray.wrong{border-style:solid;border-color:var(--no);background:var(--no-soft)}
.tray .empty{color:var(--ink-3);font-size:13.5px;font-style:italic}
.bank{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.word{
  padding:11px 16px;border-radius:16px;font-size:16px;font-weight:700;
  background:var(--surface);color:var(--ink);border:2px solid var(--line-strong);
  transition:transform .1s var(--bounce),background .1s ease;
}
.word:hover:not(:disabled){background:var(--surface-2);border-color:var(--accent);transform:translateY(-2px)}
.word.in{background:var(--slate);color:#FFFFFF;border-color:transparent}
.word[hidden]{display:none}
.word:disabled{cursor:default}

/* --- câu tự gõ --- */
.typebox{margin-bottom:22px}
.typein{
  width:100%;height:56px;border-radius:19px;padding:0 18px;font-size:20px;
  font-family:var(--font-round);font-weight:700;letter-spacing:.5px;
  background:var(--surface);border:2px solid var(--line-strong);color:var(--ink);
}
.typein::placeholder{color:var(--ink-3);font-weight:400;letter-spacing:0;font-size:16px}
.typein:focus{outline:0;border-color:var(--brand);background:var(--surface-2)}
.typein.right{border-color:var(--ok);background:var(--ok-soft)}
.typein.wrong{border-color:var(--no);background:var(--no-soft)}
.hint{margin-top:10px;font-size:13px;color:var(--ink-3);letter-spacing:2px}
.hint b{color:var(--accent-ink);font-family:var(--font-round);letter-spacing:4px}

/* --- hộp phản hồi ngay sau khi kiểm tra --- */
.verdict{
  display:flex;flex-direction:column;gap:5px;
  padding:14px 18px;border-radius:19px;margin-bottom:18px;border-left:5px solid;
  animation:pop .25s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
@media (prefers-reduced-motion:reduce){.verdict{animation:none}}
.verdict b{font-family:var(--font-round);font-size:17px}
.verdict span{font-size:14px;line-height:1.6;color:var(--ink-2)}
.verdict.ok{background:var(--ok-soft);border-left-color:var(--ok)}
.verdict.ok b{color:var(--ok-ink)}
.verdict.no{background:var(--no-soft);border-left-color:var(--no)}
.verdict.no b{color:var(--no-ink)}

/* --- kết quả --- */
.result{position:relative}
.result .sk.full b{color:var(--ok)}
.result .acts .btn-main.next{
  background:linear-gradient(180deg,var(--ok),var(--ok-ink));box-shadow:0 5px 0 var(--ok-ink);
}
.confetti{
  position:absolute;inset:-20px 0 auto 0;height:240px;pointer-events:none;overflow:hidden;
}
.confetti i{
  position:absolute;top:-24px;width:9px;height:15px;border-radius:3px;
  animation-name:fall;animation-timing-function:ease-in;animation-fill-mode:forwards;
}
.confetti i:nth-child(3n){border-radius:50%}
@keyframes fall{
  from{transform:translateY(-20px) rotate(0);opacity:1}
  to{transform:translateY(260px) rotate(340deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}

@media (max-width:700px){
  .word{font-size:15px;padding:10px 14px}
  .typein{font-size:18px;height:52px}
  .verdict b{font-size:15.5px}
  .verdict span{font-size:13.5px}
}

/* =====================================================================
   Trang thư viện (duyệt câu hỏi thật)
   ===================================================================== */
.filters .fsect{margin-bottom:16px}
.filters .fsect h4{
  margin:0 0 8px;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
  color:var(--ink-3);font-weight:800;
}
.filters .cefr{display:flex;flex-wrap:wrap;gap:6px}
.lvchip{
  min-width:44px;padding:7px 9px;border-radius:12px;
  font-size:11.5px;font-weight:800;color:var(--ink);
  box-shadow:0 3px 0 rgba(55,70,79,0.19);transition:opacity .12s ease,transform .12s ease;
}
.lvchip:hover{transform:translateY(-2px)}
.lvchip.off{filter:grayscale(1) brightness(.6);opacity:.55}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{
  padding:7px 12px;border-radius:12px;font-size:12px;font-weight:700;
  background:var(--surface-2);border:2px solid transparent;color:var(--ink-2);
}
.fchip:hover{background:var(--surface-2)}
.fchip.on{
  background:var(--accent-fill);color:#FFFFFF;
  border-color:var(--ink-3);
}
.fchip i{font-style:normal;opacity:.65;font-size:10.5px;margin-left:3px}

.libcount{margin:0 0 8px;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.secthead .cnt{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.qcard{
  text-align:left;display:flex;flex-direction:column;gap:6px;cursor:pointer;
  font:inherit;color:inherit;
}
.qcard .tag{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--ink-3);
}
.qcard .ttl{
  font-weight:700;font-size:13.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.qcard .meta{font-size:11.5px;color:var(--ink-3);margin-top:auto}
.empty-note{color:var(--ink-3);font-size:14px;padding:30px 0;text-align:center}

/* =====================================================================
   Góc ôn tập — thẻ ghi nhớ
   ===================================================================== */
.wordbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.wordbar .grow{flex:1}
.btn-main.mini{width:auto;height:36px;padding:0 16px;font-size:12.5px;border-radius:12px}

.flash{
  display:grid;place-items:center;min-height:210px;padding:26px;border-radius:24px;
  cursor:pointer;user-select:none;text-align:center;
  background:var(--sand);color:var(--ink);
  border:2px solid var(--line);
  transition:transform .12s var(--bounce);
}
.flash:hover{transform:translateY(-2px)}
.flash.quiz{cursor:default}
.flash.quiz:hover{transform:none}
.fw{font-family:var(--font-round);font-size:40px;line-height:1.2;text-wrap:balance}
.fm{color:var(--ink);margin-top:10px;font-size:16px}
.ftip{color:var(--ink);margin-top:16px;font-size:12px}
.wopts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.wopt{
  padding:11px 16px;border-radius:16px;font-size:15px;font-weight:700;
  background:var(--surface-2);border:2px solid var(--line);
}
.wopt:hover:not(:disabled){background:var(--paper)}
.wopt.right{background:var(--ok-soft);border-color:var(--ok)}
.wopt.wrong{background:var(--no-soft);border-color:var(--no)}

.wordnav{display:flex;align-items:center;gap:12px;margin-top:14px}
.wordnav .btn-main{flex:1}
.wordnav .pos{
  font-family:var(--font-round);font-size:13px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.wordlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.wrow{
  display:flex;justify-content:space-between;gap:10px;padding:9px 13px;border-radius:12px;
  background:var(--surface-2);font-size:13.5px;
}
.wrow b{color:var(--ink)}
.wrow span{color:var(--ink-2);text-align:right}

/* =====================================================================
   Thách đấu — ô đường dẫn
   ===================================================================== */
.linkbox{display:flex;gap:8px}
.linkbox input{
  flex:1;height:44px;border-radius:16px;padding:0 14px;font-size:13px;
  background:var(--surface-2);border:2px solid var(--line);color:var(--accent-ink);
}
.linkbox .btn-main{height:44px;flex:0 0 auto}
.page .acts{display:flex;gap:10px}
.page .acts .btn-main{display:grid;place-items:center;text-decoration:none;flex:1}

@media (max-width:700px){
  .fw{font-size:30px}
  .linkbox{flex-direction:column}
  .linkbox .btn-main{width:100%}
  .wordnav{flex-wrap:wrap}
}

/* Dải tiến độ trên trang chủ (chỉ hiện khi đã đăng nhập) */
.progstrip{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  padding:9px 18px;border-radius:999px;max-width:94vw;
  background:var(--surface);border:2px solid var(--line);
  backdrop-filter:blur(6px);font-size:13px;
}
.progstrip .mascot{font-size:22px;line-height:1}
.progstrip .hi{font-family:var(--font-round);font-weight:800;color:var(--accent-ink)}
.progstrip .stat{color:var(--ink-2);font-variant-numeric:tabular-nums}
.progstrip .stat b{color:var(--ink);font-family:var(--font-round);font-size:15px}
.progstrip .cont{
  padding:6px 14px;border-radius:999px;font-weight:800;font-size:12px;
  background:var(--accent-fill);color:#FFFFFF;
}
.progstrip .cont:hover{filter:brightness(1.08)}
@media (max-width:700px){
  .progstrip{position:static;transform:none;margin:0 auto 10px;font-size:12px}
}

/* Dải tiến độ đầu trang bộ đề */
.lvprog{
  position:relative;z-index:2;max-width:820px;margin:0 auto;padding:16px 20px 0;
}
.lvprog .pline{
  height:10px;border-radius:9px;background:var(--surface-2);overflow:hidden;
  border:1px solid var(--line);
}
.lvprog .pline span{
  display:block;height:100%;border-radius:9px;
  background:linear-gradient(90deg,var(--ok),var(--gold-1));
  transition:width .5s ease;
}
.lvprog .pinfo{
  margin-top:8px;font-size:12.5px;color:var(--ink-2);text-align:center;
  font-variant-numeric:tabular-nums;
}
.lvprog .pinfo b{color:var(--ink);font-family:var(--font-round);font-size:14px}
.lvprog .pinfo span{opacity:.4;margin:0 3px}

/* =====================================================================
   Luyện Nói
   ===================================================================== */
.speakcard{
  display:flex;flex-direction:column;gap:12px;margin:18px 0 6px;
  padding:24px;border-radius:24px;text-align:center;
  background:var(--sky);color:var(--ink);
  border:2px solid var(--line);
}
.sp-target{
  font-family:var(--font-round);font-size:27px;line-height:1.35;text-wrap:balance;
}
.sp-vi{color:var(--ink);font-size:14px;margin-top:-4px}
#sp-mic{
  background:var(--accent-fill);
  box-shadow:0 4px 0 var(--accent-ink);
}
#sp-mic.rec{
  background:var(--no-ink);box-shadow:0 4px 0 var(--no-ink);
  animation:micpulse 1.1s ease-in-out infinite;
}
@keyframes micpulse{50%{filter:brightness(1.25)}}
@media (prefers-reduced-motion:reduce){#sp-mic.rec{animation:none}}
.sp-count{
  text-align:center;color:var(--ink-2);font-size:13px;margin:10px 0 0;
  font-variant-numeric:tabular-nums;
}
.speakcard .verdict{margin-bottom:0;text-align:left}

/* =====================================================================
   Luyện Viết
   ===================================================================== */
.writecard{display:flex;flex-direction:column;gap:12px;margin:18px 0 6px}
.wr-q{
  font-family:var(--font-round);font-size:20px;line-height:1.45;text-wrap:balance;
}
.wr-need{
  font-size:12.5px;color:var(--ink-2);padding:8px 14px;border-radius:15px;
  background:var(--surface-2);
}
.wr-need b{color:var(--accent-ink)}
#wr-in{
  width:100%;border-radius:19px;padding:14px 16px;font:inherit;font-size:16px;
  line-height:1.6;resize:vertical;min-height:88px;
  background:var(--surface-2);border:2px solid var(--line);color:var(--ink);
}
#wr-in::placeholder{color:var(--ink-3)}
#wr-in:focus{outline:0;border-color:var(--brand);background:var(--surface-2)}
.wr-bar{display:flex;align-items:center;gap:12px}
.wr-bar #wr-count{
  flex:1;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.wr-model{
  padding:14px 16px;border-radius:17px;font-size:14.5px;line-height:1.6;
  background:var(--sand);border-left:5px solid var(--gold-2);
}
.wr-model b{color:var(--accent-ink)}
.wr-model .small{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.writecard .verdict{margin-bottom:0}

.note-panel p{font-size:13.5px;line-height:1.7;color:var(--ink-2);margin:0 0 10px}
.note-panel p:last-child{margin-bottom:0}
.note-panel b{color:var(--ink)}

@media (max-width:700px){
  .sp-target{font-size:21px}
  .wr-q{font-size:17px}
}

/* =====================================================================
   tasks.js — 9 dạng bài Nghe / Đọc-Viết
   ===================================================================== */
.tk-hint{font-size:12.5px;color:var(--ink-2);margin-bottom:14px}
.tk-q{font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.45}

/* --- Part 1 Nghe: nối tên với tranh ----------------------------------- */
.tk-matchwrap{display:flex;flex-direction:column;gap:16px}
.tk-matchimg{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:19px;overflow:hidden;
  background:var(--surface-2) center/cover no-repeat;border:1px solid var(--line);
}
.tk-hotspot{
  position:absolute;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  border:3px dashed var(--accent);background:rgba(255,255,255,.35);
  display:grid;place-items:center;cursor:pointer;
}
.tk-hotspot.filled{border-style:solid;background:var(--ok-soft);border-color:var(--ok)}
.tk-hotspot-label{
  font-family:var(--font-round);font-weight:800;font-size:12px;color:var(--ink);
  background:var(--surface);padding:3px 8px;border-radius:11px;box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
.tk-namebank{display:flex;flex-wrap:wrap;gap:8px}
.tk-namechip{
  padding:10px 16px;border-radius:16px;font-weight:700;cursor:grab;
  background:var(--surface);border:2px solid var(--line-strong);color:var(--ink);
}
.tk-namechip:hover{border-color:var(--accent)}
.tk-namechip.picking{border-color:var(--accent);background:var(--accent-soft)}
.tk-namechip[hidden]{display:none}

/* --- Part 2 Nghe / Part 5 Đọc-Viết: trả lời ngắn ----------------------- */
.tk-shortlist{display:flex;flex-direction:column;gap:14px}
.tk-shortitem{padding:14px;border-radius:19px;background:var(--surface-2);border:1px solid var(--line)}
.tk-shortin{
  width:100%;height:44px;border-radius:15px;padding:0 14px;font-size:15px;
  background:var(--surface);border:2px solid var(--line-strong);color:var(--ink);margin-top:6px;
}
.tk-shortin:focus{outline:0;border-color:var(--accent)}
.tk-hear{
  height:34px;padding:0 14px;border-radius:12px;margin-bottom:8px;font-weight:700;font-size:12.5px;
  background:var(--slate);color:#FFFFFF;
}

/* --- Part 3 Nghe: trắc nghiệm 3 hình ----------------------------------- */
.tk-mcqitem{padding:14px 0;border-bottom:1px solid var(--line)}
.tk-mcqrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.tk-mcqcard{
  border-radius:17px;overflow:hidden;background:var(--surface-2);
  border:3px solid var(--line-strong);position:relative;padding:0;
}
.tk-mcqcard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tk-mcqcard span{
  position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;
  background:var(--surface);color:var(--ink);font-weight:800;font-size:12px;
  display:grid;place-items:center;box-shadow:var(--shadow-sm);
}
.tk-mcqcard.picked{border-color:var(--accent)}
.tk-mcqcard.picked span{background:var(--accent-fill);color:#FFFFFF}

/* --- Part 4 Nghe: nghe và tô màu --------------------------------------- */
.tk-colourwrap{display:flex;gap:18px;flex-wrap:wrap}
.tk-svgbox{
  flex:1 1 260px;min-width:220px;border-radius:19px;background:var(--surface-2);
  border:1px solid var(--line);padding:10px;
}
.tk-svgbox svg{width:100%;height:auto}
.tk-side{flex:1 1 200px;display:flex;flex-direction:column;gap:14px}
.tk-palette{display:flex;gap:8px}
.tk-swatch{
  width:36px;height:36px;border-radius:50%;border:3px solid transparent;box-shadow:var(--shadow-sm);
}
.tk-swatch.on{border-color:var(--ink)}
.tk-colourtasks{display:flex;flex-direction:column;gap:8px}
.tk-ctask{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:15px;
  background:var(--surface-2);font-size:13px;
}
.tk-ctask code{background:var(--paper);padding:1px 5px;border-radius:8px;font-size:11px}

/* --- Part 1 Đọc-Viết: tranh + câu, Đúng/Sai ----------------------------- */
.tk-tcitem{
  display:flex;align-items:center;gap:14px;padding:12px;border-radius:19px;
  background:var(--surface-2);border:1px solid var(--line);margin-bottom:10px;
}
.tk-tcitem img{width:64px;height:64px;border-radius:15px;object-fit:cover;flex:0 0 auto}
.tk-tcsentence{flex:1;font-weight:600;color:var(--ink)}
.tk-tcbtns{display:flex;gap:8px}
.tk-tcbtn{
  width:44px;height:44px;border-radius:15px;font-size:18px;font-weight:800;
  background:var(--surface);border:2px solid var(--line-strong);color:var(--ink);
}
.tk-tcbtn.picked.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok-ink)}
.tk-tcbtn.picked.no{background:var(--no-soft);border-color:var(--no);color:var(--no-ink)}

/* --- Part 2 Đọc-Viết: tranh lớn + yes/no -------------------------------- */
.tk-yncol{display:flex;gap:18px;flex-wrap:wrap}
.tk-ynimg{flex:1 1 260px;min-width:220px;border-radius:19px;object-fit:cover;max-height:320px}
.tk-ynlist{flex:1 1 260px;display:flex;flex-direction:column;gap:10px}
.tk-ynitem{padding:10px 12px;border-radius:17px;background:var(--surface-2);border:1px solid var(--line)}

/* --- Part 3 Đọc-Viết: sắp xếp chữ cái ----------------------------------- */
.tk-anitem{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;
  border-radius:19px;background:var(--surface-2);border:1px solid var(--line);margin-bottom:14px}
.tk-anitem img{width:96px;height:96px;border-radius:17px;object-fit:cover}
.tk-anboxes{display:flex;gap:6px;cursor:pointer}
.tk-anbox{
  width:34px;height:38px;border-radius:11px;border:2px solid var(--line-strong);
  background:var(--surface);display:grid;place-items:center;font-weight:800;font-size:17px;
  text-transform:uppercase;color:var(--ink);
}
.tk-anletters{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tk-anletter{
  width:38px;height:38px;border-radius:12px;font-weight:800;text-transform:uppercase;
  background:var(--accent-fill);color:#FFFFFF;font-size:15px;
}
.tk-anletter:disabled{opacity:.25}

/* --- Part 4 Đọc-Viết: điền từ vào đoạn văn ------------------------------ */
.tk-passage{
  font-size:17px;line-height:2.1;padding:16px;border-radius:19px;
  background:var(--surface-2);border:1px solid var(--line);margin-bottom:16px;
}
.tk-blank{
  display:inline-block;min-width:64px;padding:2px 10px;margin:0 2px;border-radius:11px;
  background:var(--paper);border:2px dashed var(--line-strong);text-align:center;
  font-weight:700;color:var(--ink-3);cursor:pointer;
}
.tk-blank.filled{border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.tk-wordbank{display:flex;flex-wrap:wrap;gap:8px}
.tk-wordchip{
  display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:16px;
  background:var(--surface);border:2px solid var(--line-strong);font-weight:700;color:var(--ink);
}
.tk-wordchip img{width:32px;height:32px;border-radius:10px;object-fit:cover}
.tk-wordchip.picking{border-color:var(--accent);background:var(--accent-soft)}
.tk-wordchip:disabled{opacity:.3}

/* --- Part 5 Đọc-Viết: chuyện kể bằng tranh ------------------------------ */
.tk-storyimgs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.tk-storyimgs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:17px}

@media (max-width:700px){
  .tk-mcqrow{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .tk-storyimgs{grid-template-columns:1fr}
  .tk-tcitem{flex-wrap:wrap}
}

/* =====================================================================
   author.html — công cụ nhập liệu cho giáo viên
   ===================================================================== */
.a-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start}
.a-skilltabs{display:flex;gap:8px;margin-bottom:16px}
.a-skilltab{
  flex:1;padding:12px;border-radius:17px;font-weight:800;font-size:13.5px;
  background:var(--surface);border:2px solid var(--line-strong);color:var(--ink-2);
}
.a-skilltab.on{background:var(--accent-fill);border-color:var(--accent-fill);color:#FFFFFF}

.a-parts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.a-partcard{
  text-align:left;padding:12px 14px;border-radius:17px;
  background:var(--surface);border:2px solid var(--line);
}
.a-partcard b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:3px}
.a-partcard span{display:block;font-size:11.5px;color:var(--ink-2);line-height:1.5}
.a-partcard:hover{border-color:var(--accent)}
.a-partcard.on{border-color:var(--accent-fill);background:var(--accent-soft)}

.a-toprow{display:flex;align-items:end;gap:14px;margin-bottom:6px}
.a-toprow .field{flex:0 0 160px;margin-bottom:0}
.a-toprow .btn-main{margin-bottom:2px}

.a-section{
  background:var(--surface);border:1px solid var(--line);border-radius:21px;
  padding:18px;margin-bottom:18px;
}
.a-itemshead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.a-itemshead h3{margin:0;font-family:var(--font-round);font-size:15.5px;color:var(--ink)}
.a-item{
  border:1px solid var(--line);border-radius:17px;padding:14px;margin-bottom:12px;
  background:var(--surface-2);
}
.a-itemhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.a-itemhead b{font-size:12.5px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.4px}
.a-itembtns{display:flex;gap:6px}
.a-mini{
  width:26px;height:26px;border-radius:10px;background:var(--surface);
  border:1px solid var(--line-strong);font-size:12px;color:var(--ink);
}
.a-mini.a-del{color:var(--no-ink);border-color:var(--no)}
.a-itembody{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.a-itembody .field{margin-bottom:0}

.a-imgfield{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.a-imgfield .a-in,.a-imgurl2{flex:1;min-width:160px}
.a-filebtn{
  flex:0 0 auto;padding:0 12px;height:46px;display:grid;place-items:center;
  border-radius:15px;background:var(--surface-2);border:2px solid var(--line);
  font-size:12px;font-weight:700;color:var(--ink-2);cursor:pointer;
}
.a-filepick,.a-filepick2{display:none}
.a-thumb{width:46px;height:46px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.a-thumb-empty{
  display:grid;place-items:center;font-size:9px;color:var(--ink-3);
  background:var(--paper);text-align:center;
}
.a-imglist{display:flex;flex-direction:column;gap:8px}

.a-bool{display:flex;gap:8px}
.a-boolbtn{
  flex:1;height:46px;border-radius:15px;font-weight:800;font-size:13px;
  background:var(--surface-2);border:2px solid var(--line-strong);color:var(--ink);
}
.a-boolbtn.on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok-ink)}

.a-preview{
  position:sticky;top:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:21px;padding:20px;min-height:200px;
}
.a-preview h3{margin:0 0 4px;font-family:var(--font-round);font-size:17px;color:var(--ink)}
.a-instr{font-size:13px;color:var(--ink-2);margin:0 0 16px}
.a-exportbox{margin-top:18px}
.a-exportbox textarea{
  width:100%;min-height:220px;border-radius:17px;padding:14px;font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.6;
  background:var(--ink);color:#E8EEF0;border:none;resize:vertical;
}
.a-exportbox .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.a-exportbox h3{margin:0}

@media (max-width:960px){
  .a-wrap{grid-template-columns:1fr}
  .a-preview{position:static}
  .a-parts{grid-template-columns:1fr}
  .a-itembody{grid-template-columns:1fr}
}

/* --- author.html: trạng thái đăng nhập, lưu lên máy chủ, danh sách đã lưu */
.a-loginstate{
  font-size:12.5px;color:var(--ink-2);margin:-4px 0 14px;
}
.a-loginstate a{color:var(--accent-ink);font-weight:700;text-decoration:underline}
.a-loginstate.ok{color:var(--ok-ink)}
.a-loginstate.ok b{color:var(--ink)}

.a-savebox{margin-top:16px}
.a-savebox .btn-main{background:var(--ok);box-shadow:0 4px 0 var(--ok-ink)}
.a-savemsg{margin:8px 0 0;font-size:12.5px;min-height:16px}
.a-savemsg.ok{color:var(--ok-ink);font-weight:700}
.a-savemsg.err{color:var(--no-ink);font-weight:700}

.a-savedbox{
  margin-top:18px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:19px;padding:14px 16px;
}
.a-savedbox h3{margin:0 0 10px;font-family:var(--font-round);font-size:13.5px;color:var(--ink-2)}
.a-savedrow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.a-savedload{
  flex:1;text-align:left;padding:8px 12px;border-radius:12px;font-size:13px;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);
}
.a-savedload:hover{border-color:var(--accent)}

.a-exportbox summary{cursor:pointer;font-size:12.5px;color:var(--ink-2);margin-top:16px;font-weight:700}
.a-exportbox[open] summary{margin-bottom:10px}

/* --- parts.html: danh sách bài Cambridge theo Part, học sinh bấm vào làm */
.ptcard{text-align:left;font:inherit;color:inherit}

/* =====================================================================
   edit-questions.html — công cụ sửa câu hỏi cho giáo viên
   ===================================================================== */
.qimg{display:block;max-width:100%;max-height:260px;margin:0 auto 14px;border-radius:19px;object-fit:contain;background:var(--surface-2)}
.qedit{
  display:inline-block;margin:0 0 12px 8px;font-size:11.5px;font-weight:800;color:var(--accent-ink);
  padding:4px 10px;border-radius:12px;background:var(--accent-soft);
}
.qe-wrap{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
.qe-list{display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow-y:auto;padding-right:4px}
.qe-item{
  display:block;width:100%;text-align:left;padding:9px 12px;border-radius:14px;
  background:var(--surface);border:2px solid var(--line);font-size:13px;line-height:1.4;
}
.qe-item:hover{border-color:var(--accent)}
.qe-item.on{border-color:var(--accent-fill);background:var(--accent-soft)}
.qe-item.hid{opacity:.5}
.qe-item .no{font-weight:800;color:var(--ink-3);margin-right:6px}
.qe-item .tag{display:inline-block;font-size:9.5px;font-weight:800;padding:1px 7px;border-radius:9px;margin-left:5px;background:var(--surface-2);color:var(--ink-2)}
.qe-item .tag.ed{background:var(--sun);color:var(--ink)}
.qe-item .tag.nw{background:var(--ok);color:#FFFFFF}
.qe-form .field{margin-bottom:14px}
.qe-form textarea,.qe-form select{
  width:100%;border-radius:15px;padding:10px 14px;border:2px solid var(--line);
  background:var(--surface-2);color:var(--ink);font:inherit;font-size:15px;
}
.qe-form textarea{min-height:64px;resize:vertical}
.qe-opt{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.qe-opt input[type=text]{flex:1;height:44px;border-radius:15px;padding:0 14px;border:2px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:15px}
.qe-opt input[type=radio]{width:20px;height:20px;accent-color:var(--ok)}
.qe-img{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qe-img img{max-width:140px;max-height:100px;border-radius:12px}
.qe-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.qe-actions .btn-main{width:auto;padding:0 20px}
.qe-msg{font-size:13px;margin-top:10px;min-height:18px;font-weight:700}
.qe-msg.ok{color:var(--ok-ink)} .qe-msg.err{color:var(--no-ink)}
@media (max-width:860px){.qe-wrap{grid-template-columns:1fr}.qe-list{max-height:260px}}

.qe-drop{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px;border-radius:19px;
  border:2px dashed var(--line-strong);background:var(--surface-2);font-size:13px;color:var(--ink-2);
}
.qe-drop.over{border-color:var(--accent-fill);background:var(--accent-soft)}
.qe-drop img{max-width:140px;max-height:100px;border-radius:12px}
.qe-drop p{margin:0;flex:1;min-width:200px;line-height:1.6}
.qe-drop .a-filebtn{display:inline-grid;height:30px;padding:0 10px;vertical-align:middle}

.sp-replay{display:flex;gap:10px;flex-wrap:wrap}
.sp-replay .btn-main{flex:1;min-width:180px;font-size:13px}

/* --- Kết quả chấm phát âm chi tiết (Luyện Nói) --- */
.pr-words{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.pr-w{display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:14px;background:var(--surface);border:2px solid var(--line)}
.pr-w b{font-family:var(--font-round);font-size:17px;color:var(--ink)}
.pr-w small{display:flex;gap:2px;font-size:12px;font-family:ui-monospace,Menlo,monospace}
.pr-w.good{border-color:var(--ok)} .pr-w.mid{border-color:var(--sun-dark)} .pr-w.bad{border-color:var(--no);background:var(--no-soft)}
.pr-w i,.pr-key i{font-style:normal;padding:0 3px;border-radius:5px}
i.good{color:var(--ok-ink)} i.mid{color:#8A5A00;background:#FFF1CC} i.bad{color:#FFFFFF;background:var(--no)}
.pr-tips{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.pr-key{font-size:11.5px;color:var(--ink-3)}
.pr-key i{margin:0 2px 0 8px}

/* --- vocab-quiz.html: chọn Unit --- */
.vq-units{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.vq-unit{
  position:relative;text-align:left;padding:12px 14px;border-radius:19px;
  background:var(--surface);border:2px solid var(--line);display:flex;flex-direction:column;gap:2px;
  transition:transform .12s var(--bounce),border-color .12s ease;
}
.vq-unit:hover{transform:translateY(-2px);border-color:var(--accent)}
.vq-unit.on{border-color:var(--accent-fill);background:var(--accent-soft)}
.vq-unit.all{background:var(--sand)}
.vq-unit b{font-family:var(--font-round);font-size:14px;line-height:1.3;color:var(--ink)}
.vq-unit span{font-size:11.5px;color:var(--ink-2)}
.vq-unit em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--accent-ink)}