/* ═══════════════════════════════════════════════════════════════════
   pénny — ระบบดีไซน์
   โทนเดิมของแบรนด์ (กรมท่า ครีม คอรัล) ยกขึ้นเป็นโหมดมืดแบบหรู
   สีระบายไวยากรณ์ใช้ชุดเดียวกับคลิป TikTok ทุกตอน
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink-950:#020E1B; --ink-900:#03182D; --ink-850:#061F3A; --ink-800:#082847;
  --ink-750:#0A2E52; --ink-700:#0D3660; --ink-600:#17466E; --ink-500:#2D5C85;
  --mist-400:#6A86A3; --mist-300:#8CA2B7; --mist-200:#B7C6D3; --mist-100:#D9E2EA;
  --cream-50:#FEFCF8; --cream-100:#FBF8F1; --cream-200:#F4F0E5; --cream-300:#E8E2D4; --cream-400:#D6CEBB;
  --coral-300:#F6A7A1; --coral-500:#EF6D65; --coral-600:#D4544C; --coral-700:#B8433C;
  --champagne:#E4CF9E; --champagne-2:#C9AE73; --champagne-soft:rgba(228,207,158,.14);
  --ok:#5AD39A; --ok-soft:rgba(90,211,154,.14); --bad:#FF7A7A; --bad-soft:rgba(255,122,122,.13);

  /* สีระบายตามคลิป (ห้ามเปลี่ยนให้ต่างจากคลิป) */
  --g-s:#74BBFF;  --g-v:#FF6F6F;  --g-r:#A3B4C6;  --g-adj:#63D69F; --g-adv:#BBA2FF;
  --g-aux:#FFB25E; --g-cj:#FFE37D; --g-p:#FF93CD;

  --tone-blue:#4F9BEA; --tone-orange:#F29A45; --tone-green:#4CC38A; --tone-purple:#9F86F0; --tone-champagne:#D8BE84;

  --bg:var(--ink-900); --bg-deep:var(--ink-950);
  --surface:var(--ink-850); --surface-2:var(--ink-800); --surface-3:var(--ink-750);
  --line:rgba(183,198,211,.13); --line-2:rgba(183,198,211,.24); --line-3:rgba(183,198,211,.4);
  --text:var(--cream-100); --text-2:var(--mist-200); --text-3:var(--mist-300); --text-4:#8199B2;
  --accent:var(--coral-500); --reward:var(--champagne);
  --glass:rgba(4,22,42,.72);

  --f-thai:"Anuphan","Noto Sans Thai","Sukhumvit Set","Leelawadee UI",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-serif:"Source Serif 4","Anuphan","Source Serif Pro",Georgia,"Times New Roman",serif;
  --f-poster:"Anton","Anuphan",Impact,"Arial Narrow",sans-serif;

  --r-s:10px; --r-m:16px; --r-l:24px; --r-pill:999px;
  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.28);
  --shadow-2:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,.68,.28,1); --ease-io:cubic-bezier(.6,.02,.3,1);
  --gutter:16px; --max:1180px; --read:680px;
  --header-h:64px; --tabs-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
@media (min-width:720px){ :root{ --gutter:28px; } }
@media (min-width:1100px){ :root{ --gutter:40px; } }

/* ───────────── พื้นฐาน ───────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;background:var(--bg-deep)}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font-family:var(--f-thai);font-size:16px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;overflow-x:hidden;
}
body::before{ /* แสงจาง ๆ ด้านบน ให้พื้นไม่แบนเป็นสีเดียว */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(45,92,133,.30), transparent 62%),
    radial-gradient(700px 420px at -8% 18%, rgba(239,109,101,.06), transparent 60%);
}
body::after{ /* เกรนบาง ๆ แบบฟิล์ม */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#root,.shell{position:relative;z-index:2}
#root:focus{outline:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.35;letter-spacing:-.005em}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
svg.i{width:20px;height:20px;flex:0 0 auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
::selection{background:rgba(228,207,158,.32);color:var(--cream-50)}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;border-radius:6px}
main:focus{outline:none}
.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:12px;background:var(--cream-100);color:var(--ink-900);
  font-weight:600;transition:top .15s}
.skip:focus{top:calc(10px + var(--safe-t))}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hidden{display:none!important}
.muted{color:var(--text-2)} .faint{color:var(--text-3)} .dim{color:var(--text-4)}
.small{font-size:14px} .xsmall{font-size:12.5px}
.serif{font-family:var(--f-serif)}
.poster-type{font-family:var(--f-poster);font-weight:400;letter-spacing:.01em;line-height:.92}
.nowrap{white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.read{max-width:var(--read)}
.stack>*+*{margin-top:12px} .stack-lg>*+*{margin-top:22px}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}
.grow{flex:1 1 auto;min-width:0}
.center{text-align:center}

/* ───────────── หัวเว็บ ───────────── */
.top{
  position:sticky;top:0;z-index:40;height:calc(var(--header-h) + var(--safe-t));padding-top:var(--safe-t);
  background:linear-gradient(to bottom, rgba(3,24,45,.92), rgba(3,24,45,.78));
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.top-in{height:var(--header-h);display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--cream-100);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.35)}
.wordmark{font-family:var(--f-serif);font-weight:700;font-size:23px;letter-spacing:-.02em;line-height:1;white-space:nowrap}
/* เครื่องหมาย é สีคอรัลแบบในโลโก้ */
.wordmark .e{position:relative;display:inline-block}
.wordmark .e::after{content:"";position:absolute;left:54%;top:-.2em;width:.095em;height:.34em;border-radius:.05em;
  background:var(--coral-500);transform:translateX(-50%) rotate(40deg);transform-origin:50% 100%}
.nav{display:none;gap:4px;margin-left:10px}
.nav a{padding:8px 14px;border-radius:var(--r-pill);font-weight:500;font-size:15px;color:var(--text-2);
  transition:color .15s,background-color .15s}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--text);background:rgba(183,198,211,.09)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;border:1px solid transparent;
  background:transparent;color:var(--text-2);transition:background-color .15s,color .15s}
.icon-btn:hover{background:rgba(183,198,211,.08);color:var(--text)}
.icon-btn svg{width:21px;height:21px}
.stat-pill{display:flex;align-items:center;gap:7px;height:36px;padding:0 12px 0 6px;border-radius:var(--r-pill);
  background:rgba(183,198,211,.07);border:1px solid var(--line);font-weight:600;font-size:14px;white-space:nowrap}
.stat-pill .ring{width:26px;height:26px}
.stat-pill .ring text{font-size:30px}
.stat-pill .flame{width:18px;height:18px;margin-left:4px}
.stat-pill.cold .flame{opacity:.45;filter:grayscale(1)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-serif);
  font-weight:700;font-size:17px;color:var(--ink-900);background:var(--champagne);flex:0 0 auto;
  box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--avatar-ring,var(--champagne-2))}
.avatar.lg{width:72px;height:72px;font-size:32px}
.avatar.has-av{overflow:hidden;background:color-mix(in srgb,var(--c) 22%,var(--ink-950))}
.avatar.has-av .mascot{display:block;width:90%;height:90%;margin-top:6%}
.me-bio{margin:6px 0 0;color:var(--text-2);font-size:15px;overflow-wrap:anywhere}
.me-tags{margin:8px 0 6px}
.me-tags .chip{white-space:normal;height:auto;min-height:30px;padding-top:5px;padding-bottom:5px;border-radius:12px;line-height:1.45}
.profile-head:has(.me-tags,.me-bio){align-items:flex-start}
@media (min-width:880px){ .nav{display:flex} }

/* แถบล่างบนมือถือ */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(var(--tabs-h) + var(--safe-b));
  padding-bottom:var(--safe-b);display:flex;
  background:rgba(2,14,27,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11.5px;font-weight:500;color:var(--text-3)}
.tabs a svg{width:23px;height:23px}
.tabs a[aria-current="page"]{color:var(--cream-100)}
.tabs a[aria-current="page"] svg{color:var(--champagne)}
@media (min-width:880px){ .tabs{display:none} }
main{min-height:calc(100vh - var(--header-h));padding-bottom:calc(var(--tabs-h) + var(--safe-b) + 32px)}
@media (min-width:880px){ main{padding-bottom:64px} }

/* ───────────── ปุ่ม ───────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;
  border-radius:var(--r-pill);border:1px solid transparent;font-weight:600;font-size:16px;line-height:1.1;
  white-space:nowrap;transition:transform .12s var(--ease),background-color .15s,border-color .15s,color .15s,box-shadow .2s;
  user-select:none;-webkit-user-select:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn svg{width:19px;height:19px;flex:0 0 auto}
.btn-primary{background:var(--cream-100);color:var(--ink-900);box-shadow:0 10px 28px rgba(251,248,241,.12)}
.btn-primary:hover{background:#fff}
.btn-accent{background:var(--coral-500);color:#fff;box-shadow:0 10px 28px rgba(239,109,101,.28)}
.btn-accent:hover{background:#f37b73}
.btn-gold{background:linear-gradient(180deg,#EAD8AE,#CFB57D);color:var(--ink-900);box-shadow:0 10px 28px rgba(228,207,158,.22)}
.btn-ghost{background:rgba(183,198,211,.08);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(183,198,211,.14)}
.btn-quiet{background:transparent;color:var(--text-2);min-height:40px;padding:0 12px}
.btn-quiet:hover{color:var(--text)}
.btn-lg{min-height:56px;padding:0 28px;font-size:17px}
.btn-sm{min-height:38px;padding:0 15px;font-size:14px}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn.is-busy{opacity:.55;pointer-events:none}
.link{color:var(--champagne);border-bottom:1px solid rgba(228,207,158,.4);padding-bottom:1px}
.link:hover{border-bottom-color:var(--champagne)}

/* ป้ายเล็ก */
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);font-size:13.5px;font-weight:500;color:var(--text-2);background:rgba(183,198,211,.05);white-space:nowrap}
.chip svg{width:15px;height:15px}
.chip-gold{color:var(--champagne);border-color:rgba(228,207,158,.35);background:var(--champagne-soft)}
.chip-coral{color:#fff;border-color:transparent;background:var(--coral-600)}
.chip-ok{color:var(--ok);border-color:rgba(90,211,154,.35);background:var(--ok-soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
a.chip-link{text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
a.chip-link::after{content:"›";margin-left:2px;opacity:.6;font-size:15px;line-height:1}
a.chip-link:hover,a.chip-link:focus-visible{border-color:var(--champagne);color:var(--cream-100)}
a.chip-link:active{transform:translateY(1px)}

/* ───────────── ฟอร์ม ───────────── */
.field{display:block;margin-bottom:16px}
.field label,.label{display:block;font-size:14px;font-weight:600;color:var(--text-2);margin-bottom:7px}
.field .hint{font-weight:400;color:var(--text-3)}
.input{width:100%;min-height:50px;padding:0 16px;border-radius:12px;background:rgba(2,14,27,.6);
  border:1px solid var(--line-2);color:var(--text);font-size:16px;transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--text-4)}
.input:focus{outline:none;border-color:var(--champagne);box-shadow:0 0 0 3px rgba(228,207,158,.16)}
textarea.input{padding:12px 16px;min-height:88px;resize:vertical;line-height:1.6}
.msg{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:14.5px;background:var(--bad-soft);color:#ffd0d0;
  border:1px solid rgba(255,122,122,.25)}
.msg.ok{background:var(--ok-soft);color:#c8f5de;border-color:rgba(90,211,154,.3)}
.msg.note{background:rgba(183,198,211,.07);color:var(--text-2);border-color:var(--line)}
.checkline{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text-2);margin:18px 0}
.checkline input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--champagne);flex:0 0 auto}
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:12px;
  border:1px solid var(--line-2);background:rgba(2,14,27,.4);font-size:14.5px;cursor:pointer}
.opt input{accent-color:var(--champagne);width:18px;height:18px;margin:0;flex:0 0 auto}
.opt.is-on{border-color:var(--champagne);background:var(--champagne-soft)}

/* ───────────── การ์ดพื้นฐาน ───────────── */
.card{background:linear-gradient(180deg,rgba(13,54,96,.38),rgba(6,31,58,.55));border:1px solid var(--line);
  border-radius:var(--r-l);padding:22px;box-shadow:var(--shadow-1)}
.card-flat{background:rgba(2,14,27,.45);border:1px solid var(--line);border-radius:var(--r-m);padding:18px}
.card h3{font-size:19px}
.section{padding-top:56px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.section-head h2{font-size:clamp(22px,2.6vw,28px)}
.section-head p{color:var(--text-3);font-size:14.5px;margin-top:4px}
.section-head .more{font-size:14.5px;font-weight:600;color:var(--champagne);white-space:nowrap}
.divider{height:1px;background:var(--line);margin:28px 0}

/* ───────────── โปสเตอร์ตอน (หัวใจของหน้าตา) ───────────── */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
  padding:6px var(--gutter) 22px;margin:0 calc(var(--gutter) * -1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 auto}
.poster{--tone:var(--tone-blue);position:relative;display:flex;flex-direction:column;width:168px;aspect-ratio:2/3;
  border-radius:14px;overflow:hidden;padding:14px 14px 13px;isolation:isolate;
  background:linear-gradient(180deg,#0B2C4E 0%,#061D36 100%);
  background:
    radial-gradient(120% 70% at 85% 0%, color-mix(in srgb, var(--tone) 34%, transparent), transparent 62%),
    linear-gradient(180deg,#0B2C4E 0%,#061D36 100%);
  border:1px solid rgba(255,255,255,.07);box-shadow:var(--shadow-1);transition:transform .2s var(--ease),border-color .2s,box-shadow .25s}
.poster::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(2,10,20,.55));z-index:-1}
.poster:hover{transform:translateY(-3px);border-color:rgba(228,207,158,.45);box-shadow:var(--shadow-2)}
.poster .p-ep{display:flex;align-items:flex-start;justify-content:space-between}
.poster .p-num{font-family:var(--f-poster);font-size:44px;line-height:.86;color:var(--cream-50);letter-spacing:.01em}
.poster .p-num small{display:block;font-size:12px;font-family:var(--f-thai);font-weight:600;letter-spacing:.06em;
  color:var(--tone);color:color-mix(in srgb, var(--tone) 70%, white);margin-bottom:4px}
.poster .p-hook{margin-top:auto;font-family:var(--f-serif);font-weight:600;font-size:17px;line-height:1.28;color:var(--cream-50);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.poster .p-hook.thai{font-family:var(--f-thai);font-weight:700;font-size:18px;line-height:1.4}
.poster .p-title{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;font-weight:600;
  line-height:1.45;color:var(--mist-100);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.poster .p-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--text-3)}
.poster.is-locked{filter:saturate(.5)}
.poster.is-locked .p-hook{opacity:.55}
.poster .lock{width:20px;height:20px;color:var(--text-3)}
@media (min-width:720px){ .poster{width:200px;padding:16px} .poster .p-num{font-size:52px} .poster .p-hook{font-size:19px} }

.stars{display:inline-flex;gap:2px;color:var(--champagne)}
.stars svg{width:14px;height:14px}
.stars .off{color:rgba(183,198,211,.28)}
.stars.lg svg{width:30px;height:30px}

/* ───────────── สีระบายไวยากรณ์ ───────────── */
.g{border-radius:4px}
.g-s{color:var(--g-s)} .g-v{color:var(--g-v)} .g-r{color:var(--g-r)} .g-adj{color:var(--g-adj)}
.g-adv{color:var(--g-adv)} .g-aux{color:var(--g-aux)} .g-p{color:var(--g-p)}
.g-cj{background:var(--g-cj);color:#1b1607;padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.g-ref{color:var(--g-s);text-decoration:underline dashed;text-decoration-thickness:1.5px;text-underline-offset:.22em}
.g-u1,.g-u2,.g-u3{text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:.24em}
.g-u1{text-decoration-color:var(--g-aux)} .g-u2{text-decoration-color:var(--g-s)} .g-u3{text-decoration-color:var(--g-adj)}
.g-x{display:inline-block;color:transparent;background:rgba(183,198,211,.32);border-radius:5px;filter:blur(.6px);
  padding:0 .1em;user-select:none}
.g-x::before{content:"???";color:rgba(255,255,255,.75);filter:blur(0);letter-spacing:.06em}
.g-x>span{display:none}
.g-b{font-weight:700}
.g-del{text-decoration:line-through;text-decoration-color:var(--g-v);text-decoration-thickness:2.5px;opacity:.75}
.legend{display:flex;flex-wrap:wrap;gap:8px}
.legend span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(2,14,27,.5);border:1px solid var(--line);font-size:13.5px}
.legend i{width:10px;height:10px;border-radius:3px;background:currentColor;display:inline-block}

/* ───────────── ฮีโร่หน้าแรก ───────────── */
.hero{position:relative;padding:26px 0 40px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body" "art";row-gap:20px}
.hero-head{grid-area:head}
.hero-body{grid-area:body}
.kicker{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--champagne)}
.kicker b{font-family:var(--f-poster);font-weight:400;font-size:18px;letter-spacing:.06em;color:var(--cream-50)}
.hero h1{font-size:clamp(34px,5.2vw,62px);line-height:1.22;margin-top:12px;max-width:15ch;text-wrap:balance}
.hero .lede{max-width:52ch;color:var(--text-2);font-size:clamp(16px,1.6vw,18px)}
.hero .chips{margin-top:20px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media (min-width:960px){
  .hero{padding:68px 0 64px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(380px,470px);grid-template-areas:"head art" "body art";column-gap:56px;row-gap:0}
  .hero-body{margin-top:18px}
  .anat{align-self:center}
}

/* ประโยคตัวอย่างแยกชิ้นแบบในคลิป — จังหวะเดียวของหน้า: กริยาแท้ติดสีก่อน ตามด้วยประธาน แล้วส่วนที่เหลือ */
.anat{grid-area:art;margin:0;padding:20px 22px 18px;border-radius:var(--r-l);position:relative;
  background:linear-gradient(165deg,rgba(13,54,96,.6),rgba(2,14,27,.8));border:1px solid var(--line-2);box-shadow:var(--shadow-2)}
.anat-cap{display:flex;align-items:baseline;gap:10px;font-size:13.5px;color:var(--text-3)}
.anat-cap b{font-family:var(--f-poster);font-weight:400;font-size:17px;letter-spacing:.06em;color:var(--champagne)}
.anat-line{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:.3em;row-gap:16px;
  font-family:var(--f-serif);font-weight:600;font-size:clamp(28px,4.2vw,44px);line-height:1.12;letter-spacing:-.01em}
.ch{display:inline-flex;flex-direction:column;--c:var(--g-s);--d:calc(.35s + var(--n,1) * .55s)}
.ch-v{--c:var(--g-v)} .ch-r{--c:var(--g-r)}
.ch .w{color:var(--c);animation:chPaint .5s var(--ease) var(--d) backwards}
.ch .bar{height:4px;border-radius:3px;margin-top:9px;background:var(--c);transform-origin:left center;animation:chBar .45s var(--ease) var(--d) backwards}
.ch .cl{margin-top:6px;font-family:var(--f-thai);font-size:13.5px;font-weight:600;letter-spacing:0;line-height:1.3;color:var(--c);
  animation:chLb .4s var(--ease) calc(var(--d) + .12s) backwards}
@keyframes chPaint{from{color:var(--cream-50)}}
@keyframes chBar{from{transform:scaleX(0)}}
@keyframes chLb{from{opacity:0;transform:translateY(-4px)}}
.anat-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:14.5px;font-weight:600;color:var(--champagne)}
.anat-link svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){ .ch .w,.ch .bar,.ch .cl{animation:none} }

/* ───────────── หน้าแรก: หัวเรื่องหลัก + การ์ดลองเล่น + ใช้ยังไง (เฟส 2 ของการจัดหน้าแรกใหม่) ───────────── */
.nw{white-space:nowrap}
.gold-text{background:linear-gradient(100deg,#F6EBCF 0%,#D8BE84 30%,#FFF6DC 48%,#C9AE73 66%,#EAD8AE 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:goldMove 6s ease-in-out infinite alternate}
@keyframes goldMove{to{background-position:100% 0}}
.btn-shine{position:relative;overflow:hidden;isolation:isolate}
.btn-shine::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(228,207,158,.55) 50%,transparent 65%);
  transform:translateX(-120%);animation:sheen 4.5s var(--ease) 1.2s infinite}
@keyframes sheen{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.eyebrow{font-family:var(--f-poster);font-size:13px;letter-spacing:.14em;color:var(--champagne);margin-bottom:4px}
.live{width:8px;height:8px;border-radius:50%;background:var(--coral-500);box-shadow:0 0 0 0 rgba(239,109,101,.6);animation:livePulse 1.8s infinite;flex:0 0 auto}
@keyframes livePulse{70%{box-shadow:0 0 0 8px rgba(239,109,101,0)}100%{box-shadow:0 0 0 0 rgba(239,109,101,0)}}

.hero2{position:relative;padding:28px 0 40px;border-bottom:1px solid var(--line);overflow:hidden}
.hero2::before{content:"";position:absolute;width:620px;height:620px;right:-260px;top:-300px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(228,207,158,.16),transparent 70%)}
.hero2-grid{position:relative;display:grid;gap:28px}
@media (min-width:960px){.hero2{padding:60px 0 64px}.hero2-grid{grid-template-columns:minmax(0,1fr) minmax(380px,460px);gap:56px;align-items:center}}
.hero2 .cd{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 11px;border-radius:var(--r-pill);
  border:1px solid rgba(228,207,158,.35);background:rgba(2,14,27,.5);font-size:13px;font-weight:600;color:var(--mist-100)}
.hero2 .cd b{font-family:var(--f-poster);font-weight:400;font-size:17px;letter-spacing:.03em;color:var(--champagne)}
.hero2 h1{font-size:clamp(30px,9.6vw,60px);line-height:1.2;margin-top:16px;text-wrap:balance}
.hero2 .cd+h1{margin-top:16px}
.hero2 h1:first-child{margin-top:0}
.hero2 .lede{margin-top:14px;max-width:44ch;color:var(--text-2);font-size:clamp(16px,1.6vw,18px)}
.subj{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.subj span{font-size:13px;font-weight:600;color:var(--mist-100);padding:3px 9px;border-radius:7px;background:rgba(183,198,211,.08)}
.hero2 .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:24px}
.hero2 .today{margin-top:22px}

/* การ์ดลองเล่น: แตะหากริยาแท้ · ผิด = สั่นเบา ๆ + คำใบ้ (ไม่ลงโทษ) · ถูก = แยกประโยค 3 ชิ้นแบบในคลิป */
.try{position:relative;padding:20px 20px 18px;border-radius:var(--r-l);
  background:radial-gradient(120% 80% at 100% 0%,rgba(79,155,234,.18),transparent 60%),linear-gradient(165deg,rgba(13,54,96,.65),rgba(2,14,27,.85));
  border:1px solid rgba(228,207,158,.45);box-shadow:inset 0 0 0 5px rgba(3,24,45,.9),inset 0 0 0 6px rgba(228,207,158,.18),var(--shadow-2)}
.try-k{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--champagne)}
.try-k b{font-family:var(--f-poster);font-weight:400;font-size:16px;letter-spacing:.06em;margin-right:6px;color:var(--cream-50)}
.try-q{margin-top:8px;font-size:15.5px;font-weight:600;line-height:1.5;padding-right:88px;min-height:47px}
.try-q em{font-style:normal;color:var(--g-v)}
.try-m{position:absolute;right:10px;top:34px;width:92px;height:92px}
.try-m svg{width:100%;height:100%}
.try-m .p-cheer{display:none}
.try.won .try-m .p-read{display:none}
.try.won .try-m .p-cheer{display:block;animation:tryHop .6s var(--ease)}
@keyframes tryHop{30%{transform:translateY(-12px)}}
.try-words{display:flex;flex-wrap:wrap;gap:8px 6px;margin-top:16px;font-family:var(--f-serif);font-weight:600;font-size:clamp(24px,3.6vw,32px);line-height:1.15}
.try-words button{font:inherit;color:var(--cream-50);background:rgba(183,198,211,.06);border:1px solid var(--line-2);border-radius:12px;padding:4px 10px 6px;cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s}
.try-words button:hover{border-color:rgba(228,207,158,.55);background:rgba(228,207,158,.08)}
.try-words button:active{transform:scale(.96)}
.try-words button.no{animation:tryNope .4s;border-color:rgba(183,198,211,.5)}
@keyframes tryNope{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.try .anat-line{display:none;margin-top:16px;font-size:clamp(26px,3.8vw,34px)}
.try.won .try-words{display:none}
.try.won .anat-line{display:flex}
.try-hint{margin-top:12px;font-size:13px;color:var(--text-3);min-height:20px}
.try-done{display:none;margin-top:14px;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.try.won .try-done{display:flex}
.try.won .try-hint{display:none}
.try-done span{font-size:13.5px;color:var(--mist-100)}
.try-done a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--champagne)}
.try-done a svg{width:15px;height:15px}
.try-again{background:none;border:0;color:var(--text-3);font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.try-spark{position:absolute;pointer-events:none;width:14px;height:14px;color:var(--champagne);animation:trySpark .9s var(--ease) forwards}
@keyframes trySpark{from{opacity:1;transform:translate(0,0) scale(.4)}to{opacity:0;transform:translate(var(--x),var(--y)) scale(1.1) rotate(70deg)}}

/* ใช้ยังไง 3 ขั้น (เห็นเฉพาะคนที่ยังไม่ได้ล็อกอิน) ภาพเล็กของแต่ละขั้นวนเอง */
#how{scroll-margin-top:calc(var(--header-h) + var(--safe-t) + 8px)}
.how{display:grid;gap:10px;grid-template-columns:1fr;margin:0;padding:0}
@media (min-width:720px){.how{grid-template-columns:repeat(3,1fr);gap:14px}}
.how li{list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-m);
  border:1px solid var(--line);background:linear-gradient(160deg,rgba(13,54,96,.35),rgba(2,14,27,.4))}
.how .n{font-family:var(--f-poster);font-size:36px;line-height:1;width:26px;text-align:center}
.how b{display:block;font-size:15.5px;line-height:1.4}
.how small{display:block;font-size:13px;color:var(--text-3);line-height:1.5;margin-top:2px}
.how .vis{width:58px;height:46px;display:grid;place-items:center}
.how-note{margin-top:12px;font-size:13px;color:var(--text-3)}
.how-note a{color:var(--champagne);font-weight:600}
.v-phone{width:30px;height:44px;border-radius:7px;border:1.5px solid var(--mist-300);position:relative;display:grid;place-items:center;color:var(--champagne)}
.v-phone svg{width:14px;height:14px}
.v-phone i{position:absolute;left:4px;right:4px;bottom:5px;height:2px;border-radius:2px;background:rgba(183,198,211,.25);overflow:hidden}
.v-phone i::after{content:"";position:absolute;inset:0;background:var(--champagne);transform-origin:left;animation:vClip 3s linear infinite}
@keyframes vClip{from{transform:scaleX(0)}}
.v-quiz{display:grid;gap:4px;width:52px}
.v-quiz i{height:9px;border-radius:5px;border:1px solid var(--line-2)}
.v-quiz i:nth-child(2){animation:vPick 3s infinite}
@keyframes vPick{0%,40%{background:transparent;border-color:var(--line-2)}55%,100%{background:var(--ok-soft);border-color:var(--ok)}}
.v-stars{display:flex;gap:2px;color:rgba(183,198,211,.25)}
.v-stars svg{width:17px;height:17px;animation:vStar 3s infinite}
.v-stars svg:nth-child(2){animation-delay:.25s}.v-stars svg:nth-child(3){animation-delay:.5s}
@keyframes vStar{0%,30%{color:rgba(183,198,211,.25);transform:scale(1)}40%{color:var(--champagne);transform:scale(1.25)}50%,100%{color:var(--champagne);transform:scale(1)}}
.hs>:only-child{grid-column:1/-1}

/* แถวบนหน้าแรก (เฟส 3): โปสเตอร์ตอนที่แนะนำ · การ์ดคอร์สสีประจำวิชา · ตัวช่วยฟรีที่ขยับได้ · กำลังจะมา */
.section-head h2 .bd{white-space:nowrap}
.home-eps .poster::before{content:"";position:absolute;inset:-40% -60%;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,246,220,.16) 50%,transparent 58%);transform:translateX(-60%);transition:transform .8s var(--ease)}
.home-eps .poster:hover::before{transform:translateX(60%)}
.poster .p-start{height:22px;font-size:11.5px;padding:0 8px;border-radius:var(--r-pill);background:var(--coral-600);color:#fff;font-weight:700;display:inline-flex;align-items:center;white-space:nowrap}
.poster.is-start{border-color:rgba(228,207,158,.55);animation:posterRing 2.6s infinite}
@keyframes posterRing{0%{box-shadow:0 0 0 0 rgba(228,207,158,.4),var(--shadow-1)}70%,100%{box-shadow:0 0 0 7px rgba(228,207,158,0),var(--shadow-1)}}

.cc{--tone:var(--tone-blue);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;width:256px;min-height:230px;padding:18px;border-radius:var(--r-l);
  background:radial-gradient(110% 70% at 100% 0%,color-mix(in srgb,var(--tone) 30%,transparent),transparent 62%),linear-gradient(165deg,rgba(13,54,96,.55),rgba(2,14,27,.8));
  border:1px solid var(--line);transition:border-color .2s,transform .2s var(--ease)}
.cc:hover{border-color:rgba(228,207,158,.5);transform:translateY(-3px)}
.cc .wm{position:absolute;right:-6px;top:-22px;font-family:var(--f-poster);font-size:150px;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--tone) 55%,transparent);opacity:.55;pointer-events:none}
.cc>*:not(.wm){position:relative}
.cc-group{font-size:12px;font-weight:700;letter-spacing:.05em;color:color-mix(in srgb,var(--tone) 65%,white)}
.cc .t-big{font-family:var(--f-poster);font-size:40px;line-height:.9;color:var(--cream-50);letter-spacing:.01em}
.cc .t-big small{font-size:15px;color:var(--text-3);margin-left:6px;font-family:var(--f-thai);font-weight:600;letter-spacing:0}
.cc h3{font-size:17px;line-height:1.35}
.cc p{font-size:13.5px;color:var(--text-2);line-height:1.55}
.cc .pr{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}

.tool{position:relative;display:flex;flex-direction:column;gap:6px;width:184px;min-height:226px;padding:16px;border-radius:var(--r-m);
  border:1px solid var(--line);background:linear-gradient(165deg,rgba(13,54,96,.4),rgba(2,14,27,.55));transition:border-color .2s}
.tool:hover{border-color:rgba(228,207,158,.45)}
.tool-a{font-size:15.5px;font-weight:700;line-height:1.35;color:var(--cream-50)}
.tool-a::after{content:"";position:absolute;inset:0;border-radius:inherit}   /* ทั้งการ์ดกดได้ ปุ่มในการ์ดยกขึ้นเหนือชั้นนี้ */
.tool small{font-size:12.5px;color:var(--text-3);line-height:1.5}
.tool .bd{margin-top:auto;align-self:flex-start}
.tool .art{height:72px;display:grid;place-items:center;margin-bottom:6px;border-radius:12px;background:rgba(2,14,27,.45);border:1px solid var(--line)}
.t-dots{display:flex;gap:7px}
.t-dots i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--mist-400)}
.t-dots i.ok{background:var(--ok);border-color:var(--ok)}
.t-dots i.bad{background:var(--coral-500);border-color:var(--coral-500)}
.t-tick{font-family:var(--f-poster);font-size:15px;letter-spacing:.05em;color:var(--champagne);margin-top:6px}
.t-col{display:grid;justify-items:center;gap:3px}
.flip{position:relative;z-index:2;perspective:600px;width:118px;height:52px;background:none;border:0;padding:0;cursor:pointer}
.flip .in{display:block;position:relative;width:100%;height:100%;transition:transform .6s var(--ease);transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;display:grid;place-items:center;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .f{background:var(--cream-100);color:var(--ink-900);font-family:var(--f-serif);font-weight:600;font-size:19px}
.flip .b{background:linear-gradient(180deg,#EAD8AE,#CFB57D);color:var(--ink-900);font-weight:700;font-size:17px;transform:rotateY(180deg)}
.flip-hint{font-size:11px;color:var(--text-4)}
.t-timer{font-family:var(--f-poster);font-size:30px;letter-spacing:.03em;color:var(--cream-50);line-height:1}
.t-reading{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mist-200)}
.t-reading .live{width:6px;height:6px}
.t-pod{display:flex;align-items:flex-end;gap:6px;height:56px}
.t-pod i{width:22px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#EAD8AE,#9C845A);display:grid;place-items:start center;
  font-style:normal;font-family:var(--f-poster);font-size:12px;color:var(--ink-900);padding-top:2px;transform-origin:bottom;animation:podGrow 1.2s var(--ease) both}
.t-pod i:nth-child(1){height:34px;opacity:.75}.t-pod i:nth-child(2){height:52px;animation-delay:.15s}.t-pod i:nth-child(3){height:24px;opacity:.6;animation-delay:.3s}
@keyframes podGrow{from{transform:scaleY(.1)}}
.t-notes{position:relative;width:70px;height:54px}
.t-notes i{position:absolute;inset:0;border-radius:6px;background:var(--cream-200);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.t-notes i:nth-child(1){transform:rotate(-8deg) translate(-6px,2px);opacity:.55}
.t-notes i:nth-child(2){transform:rotate(5deg) translate(4px,0);opacity:.75}
.t-notes i:nth-child(3){display:grid;place-items:center;color:var(--coral-600);font-style:normal;font-weight:700;font-size:13px}

.soonbar{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--r-m);border:1px dashed var(--line-2);font-size:13.5px;color:var(--text-3)}
.soonbar b{color:var(--mist-100);font-weight:600}
@media (prefers-reduced-motion:reduce){ .poster.is-start,.t-pod i{animation:none} .flip .in{transition:none} }

/* หน้าแรก (เฟส 4): อะไรฟรี อะไรจ่าย 5 แถบ · ตัวเลขทั้งเว็บ · คนสอน · LINE (ลีกใช้โพเดียมเดียวกับหน้าลีก)
   ตาราง: มือถือ/แท็บเล็ต ป้ายแถวด้านซ้ายติดอยู่ แถบเลื่อนไปทางขวาทีละแถบ · จอ 1100px ขึ้นไปเห็นครบ 5 แถบ (แคบกว่านี้แถบจะเบียดเกิน) */
.cmp-scroll{--lab:84px;--col:168px;overflow-x:auto;margin:0 calc(var(--gutter) * -1);padding:16px var(--gutter) 6px 0;scroll-snap-type:x mandatory;
  scrollbar-width:none;scroll-padding-left:calc(var(--gutter) + var(--lab) + 10px)}
.cmp-scroll::-webkit-scrollbar{display:none}
@media (min-width:900px){.cmp-scroll{--lab:140px}}
.cmp4{display:grid;grid-template-columns:calc(var(--gutter) + var(--lab)) repeat(5,var(--col));column-gap:10px;width:max-content}
@media (min-width:1100px){.cmp4{width:100%;grid-template-columns:calc(var(--gutter) + var(--lab)) repeat(5,minmax(0,1fr));column-gap:14px}}
.cmp4>div{padding:11px 12px;font-size:13px;line-height:1.45;border-top:1px solid var(--line)}
.cmp4 .lab{position:sticky;left:0;z-index:3;padding-left:var(--gutter);background:var(--bg);color:var(--text-3);font-size:12.5px;font-weight:600;
  display:flex;align-items:center;box-shadow:8px 0 10px -6px var(--bg)}
.cmp4 .c{scroll-snap-align:start;--tone:var(--mist-300);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 9%,rgba(2,14,27,.6)),color-mix(in srgb,var(--tone) 5%,rgba(2,14,27,.6)));
  border-left:1px solid color-mix(in srgb,var(--tone) 28%,transparent);border-right:1px solid color-mix(in srgb,var(--tone) 28%,transparent);color:var(--mist-100)}
.cmp4 .c b{color:var(--cream-50);font-weight:700;font-size:14px}
.cmp4 .c small{display:block;font-size:11.5px;color:var(--text-3);margin-top:1px}
.cmp4 .c svg{width:18px;height:18px;color:color-mix(in srgb,var(--tone) 75%,white)}
.cmp4 .c .no{color:var(--text-4);font-size:16px}
.cmp4 .k1{--tone:var(--tone-blue)} .cmp4 .k2{--tone:var(--tone-orange)} .cmp4 .k3{--tone:var(--tone-purple)} .cmp4 .k4{--tone:var(--tone-green)}
.cmp4 .hd{border-top:2px solid var(--tone);border-radius:18px 18px 0 0;padding:16px 12px 14px;justify-content:flex-start;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--tone) 26%,transparent),transparent 70%),rgba(2,14,27,.6)}
.cmp4 .ft{border-radius:0 0 18px 18px;border-bottom:1px solid color-mix(in srgb,var(--tone) 28%,transparent);padding:14px 12px 16px;gap:8px}
.cmp4 .lab.hd,.cmp4 .lab.ft{border:0;border-radius:0;background:var(--bg)}
.cmp4>.r0{border-top:0}
.cmp4 .nm{font-family:var(--f-poster);font-size:26px;line-height:1;letter-spacing:.01em;color:var(--cream-50)}
.cmp4 .tg{font-size:11.5px;color:color-mix(in srgb,var(--tone) 60%,white);font-weight:600;margin-top:4px}
.cmp4 .pz{margin-top:10px;font-family:var(--f-poster);font-size:24px;line-height:1;color:var(--champagne)}
.cmp4 .pz s{font-family:var(--f-thai);font-size:12px;color:var(--text-4);margin-left:4px}
.cmp4 .pz2{margin-top:10px;display:grid;gap:3px;font-size:12.5px;color:var(--mist-100)}
.cmp4 .pz2 b{font-family:var(--f-poster);font-weight:400;font-size:18px;color:var(--champagne)}
.cmp4 .hd .bd{margin-top:8px}
.cmp4 .ft .btn{width:100%;min-height:38px;font-size:13.5px;padding:0 10px}
.bd-ok{color:var(--ok);border-color:rgba(90,211,154,.4);background:var(--ok-soft)}
.swipe{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:12px;color:var(--text-3);margin-top:-4px}
.swipe svg{width:15px;height:15px;animation:swipeNudge 1.6s var(--ease) infinite}
@keyframes swipeNudge{50%{transform:translateX(5px)}}
@media (min-width:1100px){.swipe{display:none}}

.worth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
@media (min-width:720px){.worth{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.worth>div{position:relative;overflow:hidden;padding:16px 14px 15px;border-radius:var(--r-m);border:1px solid rgba(228,207,158,.28);
  background:radial-gradient(100% 80% at 0% 0%,rgba(228,207,158,.14),transparent 65%),linear-gradient(165deg,rgba(13,54,96,.45),rgba(2,14,27,.6))}
.worth .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--champagne-soft);color:var(--champagne)}
.worth .ic svg{width:16px;height:16px}
.worth .v{display:flex;align-items:baseline;gap:5px;margin-top:10px;font-family:var(--f-poster);font-weight:400;font-size:clamp(30px,7vw,40px);line-height:1;letter-spacing:.01em}
.worth .v small{font-family:var(--f-thai);font-size:14px;font-weight:700;color:var(--champagne)}
.worth .t{display:block;margin-top:6px;font-size:13.5px;font-weight:700;color:var(--cream-50);line-height:1.4}
.worth .d{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:var(--text-3)}
.worth .free{border-color:rgba(228,207,158,.55);background:radial-gradient(100% 80% at 0% 0%,rgba(228,207,158,.24),transparent 65%),linear-gradient(165deg,rgba(13,54,96,.5),rgba(2,14,27,.6))}

.teach{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:22px;border-radius:var(--r-l);border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(13,54,96,.38),rgba(2,14,27,.5))}
.teach .teach-m{width:76px;height:76px}
.teach .teach-m svg{width:100%;height:100%}
.teach q{display:block;font-family:var(--f-serif);font-weight:600;font-size:clamp(17px,2vw,21px);line-height:1.5;quotes:"“" "”"}
.teach small{display:block;margin-top:8px;font-size:12.5px;color:var(--text-3)}
.line2{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px;border-radius:var(--r-l);border:1px solid rgba(6,199,85,.3);
  background:linear-gradient(165deg,rgba(6,199,85,.08),rgba(2,14,27,.4))}
.line2 h3{font-size:17px}
.line2 p{font-size:13.5px;color:var(--text-3);margin-top:2px}
@media (prefers-reduced-motion:reduce){ .swipe svg{animation:none} }

/* โผล่ขึ้นมาตอนเลื่อนถึง (site.js ใส่ .in ให้) */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .gold-text,.btn-shine::after,.live,.v-phone i::after,.v-quiz i,.v-stars svg,.try-words button.no,.try.won .try-m .p-cheer,.try-spark{animation:none}
}

/* แถบความคืบหน้าวันนี้ (ล็อกอินแล้ว) */
.today{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:26px;padding:16px 18px;
  border-radius:var(--r-l);background:rgba(2,14,27,.55);border:1px solid var(--line);max-width:560px}
.today .ring{width:64px;height:64px}
.today b{font-size:18px}
.ring circle{fill:none;stroke-width:4}
.ring .track{stroke:rgba(183,198,211,.16)}
.ring .fill{stroke:var(--champagne);stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.ring text{fill:var(--cream-50);font-family:var(--f-poster);font-size:13px;text-anchor:middle;dominant-baseline:central}

/* ───────────── การ์ดสินค้า / คอร์ส ───────────── */
.tiles{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:720px){ .tiles{grid-template-columns:repeat(3,1fr)} .tile{min-height:210px} }
/* บนมือถือ การ์ด "กำลังจะมา" เลื่อนข้างแทนเรียงยาว */
@media (max-width:719px){
  .tiles-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 6px;scrollbar-width:none}
  .tiles-rail::-webkit-scrollbar{display:none}
  .tiles-rail>.tile{flex:0 0 78%;scroll-snap-align:start}
}
.tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(160deg,rgba(23,70,110,.5),rgba(6,31,58,.7));border:1px solid var(--line);min-height:190px;
  transition:border-color .2s,transform .2s var(--ease)}
.tile:hover{border-color:rgba(228,207,158,.4)}
.tile .t-big{font-family:var(--f-poster);font-size:46px;line-height:.9;color:var(--cream-50)}
.tile .t-big small{font-size:18px;color:var(--text-3);margin-left:6px;font-family:var(--f-thai);font-weight:600}
.tile h3{font-size:20px}
.tile p{color:var(--text-2);font-size:14.5px}
.tile .t-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px}
.tile.soon{background:repeating-linear-gradient(135deg,rgba(183,198,211,.04) 0 10px,transparent 10px 20px),rgba(2,14,27,.4)}
.owned{color:var(--ok);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
/* ป้ายราคา 4 แบบ ใช้ชุดเดียวกันทุกการ์ด: ฟรี / ลองฟรี (+ราคา) / มีแล้ว / เร็ว ๆ นี้ — ไม่ใช่ปุ่ม จึงไม่มี hover */
.bd{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap;border:1px solid transparent;vertical-align:middle}
.bd svg{width:13px;height:13px}
.bd-free{background:linear-gradient(180deg,#EAD8AE,#CFB57D);color:var(--ink-900)}
.bd-try{color:var(--champagne);border-color:rgba(228,207,158,.45);background:var(--champagne-soft)}
.bd-own{color:var(--ok);border-color:rgba(90,211,154,.4);background:var(--ok-soft)}
.bd-soon{color:var(--text-3);border:1px dashed var(--line-3);background:transparent}
.pr{display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pr .price{font-weight:700;font-size:15px;color:var(--cream-50)}
.pr .price s{font-weight:500;font-size:12.5px;color:var(--text-4);margin-left:5px}
.pr .price-later{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-3)}
.pr .price-later svg{width:14px;height:14px}
.section-head h2 .bd{margin-left:8px;position:relative;top:-2px}

/* ───────────── หน้าคอร์ส: หัว ───────────── */
.course-hero{padding:34px 0 8px}
.course-hero .big{font-family:var(--f-poster);font-size:clamp(72px,14vw,150px);line-height:.84;color:var(--cream-50);letter-spacing:.005em}
.course-hero h1{font-size:clamp(22px,3vw,30px);margin-top:10px}
.countdown{display:inline-flex;align-items:baseline;gap:8px;margin-top:16px;padding:10px 16px;border-radius:14px;
  background:rgba(2,14,27,.55);border:1px solid var(--line)}
.countdown b{font-family:var(--f-poster);font-size:30px;font-weight:400;color:var(--champagne);line-height:1}
.seg{display:inline-flex;padding:4px;gap:4px;border-radius:var(--r-pill);background:rgba(2,14,27,.6);border:1px solid var(--line);
  max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button,.seg a{border:0;background:transparent;color:var(--text-2);padding:9px 16px;border-radius:var(--r-pill);
  font-weight:600;font-size:14.5px;white-space:nowrap}
.seg [aria-selected="true"],.seg [aria-current="page"]{background:var(--cream-100);color:var(--ink-900)}
.progress{height:8px;border-radius:99px;background:rgba(183,198,211,.14);overflow:hidden}
.progress>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--champagne-2),var(--champagne))}

/* ───────────── แผนที่ด่าน ───────────── */
.map{position:relative;max-width:560px;margin:0 auto;padding:6px 0 30px}
.map svg.path{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.map svg.path path{fill:none;stroke:rgba(183,198,211,.2);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round}
.zone{position:relative;margin:34px 0 10px;text-align:center}
.zone:first-child{margin-top:8px}
.zone-name{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:10px 18px;border-radius:16px;
  background:rgba(2,14,27,.75);border:1px solid var(--line);position:relative;z-index:2}
.zone-name b{font-size:16px}
.zone-name span{font-size:12.5px;color:var(--text-3)}
.node-row{position:relative;height:134px;z-index:2}
.node{--tone:var(--tone-blue);position:absolute;top:10px;left:calc(50% + var(--x,0px));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:0}
.node .disc{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:var(--tone);
  background:radial-gradient(circle at 35% 30%, var(--tone), color-mix(in srgb, var(--tone) 55%, #021428));
  box-shadow:0 7px 0 rgba(1,7,14,.65), 0 14px 26px rgba(0,0,0,.4);
  box-shadow:0 7px 0 color-mix(in srgb, var(--tone) 45%, #01070e), 0 14px 26px rgba(0,0,0,.4);
  transition:transform .15s var(--ease)}
.node:active .disc{transform:translateY(4px);box-shadow:0 3px 0 rgba(1,7,14,.65)}
.node .disc b{font-family:var(--f-poster);font-weight:400;font-size:30px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.node.is-fresh .disc{background:rgba(2,14,27,.8);box-shadow:inset 0 0 0 3px var(--tone), 0 10px 22px rgba(0,0,0,.35)}
.node.is-fresh .disc b{color:var(--cream-100);text-shadow:none}
.node.is-soon .disc{background:rgba(2,14,27,.7);box-shadow:inset 0 0 0 2px rgba(183,198,211,.25)}
.node.is-soon .disc b{color:var(--text-4);text-shadow:none}
.node.is-next .disc::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--champagne);
  animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.92);opacity:.95}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}
.node .n-title{font-size:12.5px;font-weight:600;color:var(--text-2);max-width:170px;text-align:center;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.node .stars svg{width:15px;height:15px}
.next-flag{position:absolute;top:-30px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:700;
  color:var(--ink-900);background:var(--champagne);padding:3px 10px;border-radius:99px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.next-flag::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-top-color:var(--champagne);border-bottom:0}
.pop{position:absolute;z-index:6;width:min(320px,calc(100vw - 32px));left:50%;transform:translateX(-50%);top:104px;
  padding:16px;border-radius:18px;background:var(--ink-800);border:1px solid var(--line-2);box-shadow:var(--shadow-2)}
.pop h4{font-size:17px}
.pop .pop-cover{font-family:var(--f-serif);font-style:italic;color:var(--text-2);margin-top:6px;font-size:15px}
.pop .pop-actions{display:flex;gap:8px;margin-top:14px}

/* ───────────── หน้าตอน ───────────── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--text-3);padding-top:22px}
.crumbs a:hover{color:var(--text)}
.crumbs svg{width:14px;height:14px}
.ep-hero{display:grid;gap:22px;padding:18px 0 8px;align-items:start}
.ep-hero .poster{width:min(230px,58vw)}
@media (min-width:760px){ .ep-hero{grid-template-columns:260px 1fr;gap:40px} .ep-hero .poster{width:260px} }
/* มือถือ: โปสเตอร์ย่อเป็นแถบแนวนอน ปุ่มเริ่มแบบฝึกจะได้อยู่ในจอแรก */
@media (max-width:759px){
  .ep-hero{gap:16px;padding-top:12px}
  .ep-hero .poster{width:100%;aspect-ratio:auto;flex-direction:row;align-items:center;gap:16px;padding:14px 16px}
  .ep-hero .poster .p-ep{flex-direction:column;align-items:flex-start;gap:6px;flex:0 0 auto}
  .ep-hero .poster .p-num{font-size:40px}
  .ep-hero .poster .p-hook{margin-top:0;font-size:18px;-webkit-line-clamp:3}
  .ep-hero .poster .p-title,.ep-hero .poster .p-meta{display:none}
  .ep-hero .ep-no{display:none}
  .ep-title{margin-top:0}
}
/* ตอนที่มีคลิป: หัวเรื่อง + การ์ดสรุปซ้าย คลิปขวา (ตามจอลงมา) · มือถือเรียง หัวเรื่อง → คลิป → การ์ดสรุป */
.ep-hero-clip{grid-template-areas:"head" "clip" "body";row-gap:28px}
.ep-hero-clip .ep-head{grid-area:head} .ep-hero-clip #clip{grid-area:clip} .ep-hero-clip .ep-body{grid-area:body}
.ep-hero-clip .ep-body:empty{display:none}
@media (max-width:759px){
  .ep-hero-clip .ep-no{display:block}
  .ep-hero-clip .clip{margin-inline:auto;width:min(100%,320px)}
  .ep-hero-clip #clip>p{text-align:center}
}
@media (min-width:760px){
  .ep-hero-clip{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"head clip" "body clip";column-gap:40px;row-gap:34px}
  .ep-hero-clip #clip{align-self:start;position:sticky;top:calc(var(--header-h) + var(--safe-t) + 18px)}
}
@media (min-width:1100px){ .ep-hero-clip{grid-template-columns:minmax(0,1fr) 340px;column-gap:56px} }
.ep-no{font-family:var(--f-poster);font-size:22px;letter-spacing:.06em;color:var(--champagne)}
.ep-title{font-size:clamp(28px,4vw,44px);line-height:1.25;margin-top:6px;text-wrap:balance}
.cover-q{font-family:var(--f-serif);font-style:italic;font-size:clamp(19px,2.2vw,23px);color:var(--text-2);margin-top:14px;
  padding-left:16px;border-left:3px solid var(--coral-500);line-height:1.5}
.cover-q.thai,.pop .pop-cover.thai{font-style:normal;font-family:var(--f-thai);font-weight:500}
.goal{margin-top:16px;color:var(--text-2);max-width:60ch}
.ep-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ep-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.best-line{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14.5px;color:var(--text-2)}
.clip{position:relative;border-radius:var(--r-l);overflow:hidden;background:#000;border:1px solid var(--line);aspect-ratio:9/16;
  max-width:340px;max-height:620px;margin-top:4px}
.clip iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.clip-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;width:100%;
  background:radial-gradient(80% 60% at 50% 40%,rgba(45,92,133,.5),#020E1B);border:0;color:var(--cream-50);text-align:center;padding:24px}
.play-big{width:74px;height:74px;border-radius:50%;background:var(--cream-100);color:var(--ink-900);display:grid;place-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.45)}
.play-big svg{width:30px;height:30px;margin-left:4px}
.recap{position:relative;padding:26px 24px;border-radius:var(--r-l);background:var(--cream-100);color:var(--ink-900);
  box-shadow:var(--shadow-2)}
.recap h3{font-family:var(--f-serif);font-size:24px;font-weight:700;letter-spacing:-.01em}
.recap ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:r}
.recap li{position:relative;padding:10px 0 10px 40px;border-top:1px solid rgba(5,37,68,.12);font-weight:500;line-height:1.55;counter-increment:r}
.recap li::before{content:counter(r);position:absolute;left:0;top:9px;width:26px;height:26px;border-radius:50%;
  background:var(--ink-900);color:var(--cream-100);font-family:var(--f-poster);font-size:14px;display:grid;place-items:center}
.recap .stamp{position:absolute;right:18px;top:18px;width:46px;height:46px;opacity:.9}
.ep-tip{margin-top:16px;padding:14px 16px;border-radius:var(--r-m);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.ep-tip b{font-size:13px;color:var(--champagne)}
.ep-tip p{margin-top:4px;font-size:14px;line-height:1.6;color:var(--text-2)}
/* EP.30 TGAT1: 20 กับดักทั้งชุด (ชื่อคลาสแยกจาก .traps ของแผงกับดักในสมุดข้อผิด) */
.card.ep-traps{padding:22px 20px}
.ep-traps ol{margin:14px 0 0;padding:0;list-style:none}
.ep-traps li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.ep-traps .et-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--champagne);color:var(--ink-900)}
.ep-traps li p{margin:4px 0 8px;font-size:14px;color:var(--text-2);line-height:1.55}
.ep-traps li .chip{height:24px;font-size:12px}
.two-col{display:grid;gap:22px}
@media (min-width:900px){ .two-col{grid-template-columns:minmax(0,1fr) 360px;gap:36px} }
.epnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.epnav a{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:var(--r-m);border:1px solid var(--line);
  background:rgba(2,14,27,.4)}
.epnav a:hover{border-color:var(--line-3)}
.epnav span{font-size:12.5px;color:var(--text-3)}
.epnav b{font-size:15px;line-height:1.4}
.epnav .next{text-align:right}

/* ───────────── โหมดแบบฝึก (เต็มจอ) ───────────── */
.qz{position:fixed;inset:0;z-index:80;background:var(--bg-deep);display:flex;flex-direction:column;
  animation:qzIn .28s var(--ease) both}
@keyframes qzIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.qz::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 500px at 50% -10%, rgba(45,92,133,.28), transparent 60%)}
.qz-top{position:relative;display:flex;align-items:center;gap:12px;padding:calc(10px + var(--safe-t)) var(--gutter) 10px;max-width:860px;width:100%;margin:0 auto}
.qz-bars{flex:1;min-width:0;display:flex;gap:5px}
.qz-bars.many{gap:1.5px}
.qz-bars.many i{height:6px;border-radius:2px}
.qz-bars i{flex:1;height:8px;border-radius:99px;background:rgba(183,198,211,.15);transition:background-color .3s}
.qz-bars i.ok{background:var(--ok)} .qz-bars i.bad{background:var(--bad)} .qz-bars i.cur{background:var(--cream-200)}
.qz-bars i.done{background:var(--mist-300)}
.qz-xp{font-family:var(--f-poster);font-size:18px;color:var(--champagne);min-width:58px;text-align:right}
.qz-timer{font-family:var(--f-poster);font-size:18px;color:var(--text);min-width:64px;text-align:right}
.qz-timer.low{color:var(--bad)}
.qz-body{position:relative;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.qz-in{max-width:760px;margin:0 auto;padding:18px var(--gutter) 150px}
.qz-count{font-size:13.5px;color:var(--text-3);font-weight:600}
.qz-prompt{font-size:clamp(18px,2.4vw,21px);font-weight:600;color:var(--text-2);margin-top:6px;line-height:1.5}
.qz-text{font-family:var(--f-serif);font-weight:600;font-size:clamp(23px,4vw,32px);line-height:1.35;margin-top:14px;color:var(--cream-50);
  text-wrap:balance}
.qz-text .blank{display:inline-block;min-width:3.2em;border-bottom:3px solid var(--champagne);margin:0 .1em;height:.9em;vertical-align:-.05em}
.passage{margin-top:16px;padding:16px 18px;border-radius:var(--r-m);background:var(--cream-100);color:var(--ink-900);
  font-family:var(--f-serif);font-size:17px;line-height:1.6;white-space:pre-line;box-shadow:var(--shadow-1)}
.passage .p-title{font-family:var(--f-thai);font-size:12.5px;font-weight:600;color:#5A7794;margin-bottom:6px;white-space:normal}
.passage .g-x::before{color:#03182D}
.choices{display:grid;gap:10px;margin-top:22px}
.choice{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:12px 16px;border-radius:16px;text-align:left;
  background:rgba(8,40,71,.75);border:1.5px solid var(--line-2);color:var(--text);font-size:17px;line-height:1.45;
  box-shadow:0 4px 0 rgba(1,7,14,.55);transition:transform .1s var(--ease),border-color .15s,background-color .15s}
.choice:hover{border-color:var(--line-3)}
.choice:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(1,7,14,.55)}
.choice .key{flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-poster);
  font-size:16px;background:rgba(183,198,211,.1);color:var(--text-2)}
.choice .ct{flex:1;min-width:0}
.choice .ct.en{font-family:var(--f-serif);font-size:18px}
.choice.is-pick{border-color:var(--cream-200)}
.choice.is-right{border-color:var(--ok);background:rgba(25,96,66,.55)}
.choice.is-right .key{background:var(--ok);color:#03251a}
.choice.is-wrong{border-color:var(--bad);background:rgba(120,30,36,.5);animation:shake .38s}
.choice.is-wrong .key{background:var(--bad);color:#2a0606}
.choice.is-dim{opacity:.45}
.choice[disabled]{cursor:default}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.fillbox{margin-top:22px;display:flex;gap:10px}
.fillbox .input{min-height:58px;font-family:var(--f-serif);font-size:20px}
.fillbox .input.is-right{border-color:var(--ok)} .fillbox .input.is-wrong{border-color:var(--bad)}
.qz-dock{position:absolute;left:0;right:0;bottom:0;padding:14px var(--gutter) calc(14px + var(--safe-b));
  background:linear-gradient(to top,var(--bg-deep) 70%,transparent)}
.qz-dock .in{max-width:760px;margin:0 auto}
.fb{max-width:760px;margin:0 auto 12px;padding:16px 18px;border-radius:18px;border:1px solid var(--line-2);background:var(--ink-800);
  box-shadow:var(--shadow-2);animation:fbIn .26s var(--ease) both;max-height:46vh;overflow-y:auto}
@keyframes fbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fb.ok{border-color:rgba(90,211,154,.45)} .fb.bad{border-color:rgba(255,122,122,.45)}
.fb-head{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700}
.fb.ok .fb-head{color:var(--ok)} .fb.bad .fb-head{color:var(--bad)}
.fb-head svg{width:26px;height:26px}
.fb-head .plus{margin-left:auto;font-family:var(--f-poster);font-weight:400;color:var(--champagne);font-size:20px}
.fb-ans{margin-top:8px;font-size:15.5px;color:var(--text-2)}
.fb-ans b{color:var(--cream-50);font-family:var(--f-serif);font-size:17px}
.fb-why{margin-top:10px;font-size:16px;line-height:1.75;color:var(--cream-100)}
.fb-why .g{font-weight:600}
.xp-pop{position:fixed;z-index:95;pointer-events:none;font-family:var(--f-poster);font-size:26px;color:var(--champagne);
  text-shadow:0 4px 18px rgba(0,0,0,.5);animation:xpUp 1s var(--ease) forwards}
@keyframes xpUp{from{opacity:0;transform:translate(-50%,10px) scale(.8)}20%{opacity:1;transform:translate(-50%,0) scale(1.08)}
  to{opacity:0;transform:translate(-50%,-46px) scale(1)}}

/* ผลลัพธ์ */
.result{text-align:center;padding-top:10px}
.result .r-stars{display:flex;justify-content:center;gap:10px;margin-top:6px}
.result .r-stars svg{width:62px;height:62px;color:rgba(183,198,211,.18)}
.result .r-stars .on{color:var(--champagne);animation:starIn .55s cubic-bezier(.3,1.6,.5,1) both;filter:drop-shadow(0 8px 22px rgba(228,207,158,.4))}
.result .r-stars .on:nth-child(2){animation-delay:.28s} .result .r-stars .on:nth-child(3){animation-delay:.56s}
.result .r-stars span:nth-child(2) svg{width:76px;height:76px;margin-top:-10px}
@keyframes starIn{from{opacity:0;transform:scale(.2) rotate(-40deg)}to{opacity:1;transform:none}}
.result h2{font-size:clamp(26px,4vw,34px);margin-top:12px}
.result .score{font-family:var(--f-poster);font-size:64px;line-height:1;margin-top:8px;color:var(--cream-50)}
.result .score small{font-size:28px;color:var(--text-3)}
.r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;text-align:center}
.r-grid div{padding:14px 8px;border-radius:16px;background:rgba(8,40,71,.6);border:1px solid var(--line)}
.r-grid b{display:block;font-family:var(--f-poster);font-weight:400;font-size:28px;line-height:1.1;color:var(--champagne)}
.r-grid span{font-size:12.5px;color:var(--text-3)}
.levelbar{margin-top:20px;text-align:left;padding:16px 18px;border-radius:16px;background:rgba(8,40,71,.6);border:1px solid var(--line)}
.levelbar .row{font-size:14px}
.levelbar .progress{margin-top:8px}
.banner-up{margin-top:16px;padding:14px 16px;border-radius:16px;background:linear-gradient(90deg,rgba(228,207,158,.25),rgba(228,207,158,.06));
  border:1px solid rgba(228,207,158,.45);color:var(--cream-50);font-weight:700;display:flex;align-items:center;gap:12px;text-align:left}
.banner-up svg{width:30px;height:30px;color:var(--champagne)}
.review{margin-top:26px;text-align:left}
.review details{border-top:1px solid var(--line);padding:4px 0}
.review summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 0;font-size:15px}
.review summary::-webkit-details-marker{display:none}
.review summary .en{font-family:var(--f-serif);font-weight:600;color:var(--cream-50)}
.review summary .mark{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-weight:700;font-size:14px}
.review .m-ok{background:var(--ok-soft);color:var(--ok)} .review .m-bad{background:var(--bad-soft);color:var(--bad)}
.review .r-body{padding:0 0 14px 38px;font-size:15px;color:var(--text-2);line-height:1.7}
.review .r-body .en{font-family:var(--f-serif);color:var(--cream-50)}
canvas.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:99}

/* ───────────── เหรียญ ───────────── */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.badge{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:18px;text-align:center;
  background:rgba(8,40,71,.5);border:1px solid var(--line)}
.badge .medal{width:58px;height:58px}
.badge b{font-size:13.5px;line-height:1.35}
.badge span{font-size:11.5px;color:var(--text-3);line-height:1.4}
.badge.off .medal{filter:grayscale(1) brightness(.55)}
.badge.off b{color:var(--text-3)}
.badge.new{border-color:rgba(228,207,158,.55);box-shadow:0 0 0 3px rgba(228,207,158,.12)}

/* ───────────── ลีก ───────────── */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px;margin-top:22px}
.podium .pd{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.podium .step{width:100%;border-radius:18px 18px 8px 8px;display:grid;place-items:center;font-family:var(--f-poster);
  font-size:42px;color:var(--ink-900);box-shadow:var(--shadow-1)}
.podium .p1 .step{height:120px;background:linear-gradient(180deg,#F1DEB2,#C9AE73)}
.podium .p2 .step{height:92px;background:linear-gradient(180deg,#DDE5EC,#9FB1C2)}
.podium .p3 .step{height:72px;background:linear-gradient(180deg,#E9B79A,#B97D5E)}
.podium .nm{font-weight:700;font-size:14.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium .xp{font-size:12.5px;color:var(--text-3)}
.lb{margin-top:22px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line)}
.lb-row{display:grid;grid-template-columns:44px 40px 1fr auto;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);
  background:rgba(2,14,27,.35)}
.lb-row:first-child{border-top:0}
.lb-row .rk{font-family:var(--f-poster);font-size:20px;color:var(--text-3);text-align:center}
.lb-row .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .lv{font-size:12.5px;color:var(--text-3)}
.lb-row .xp{font-family:var(--f-poster);font-size:19px;color:var(--champagne)}
.lb-row.me{background:rgba(228,207,158,.1);box-shadow:inset 3px 0 0 var(--champagne)}
.lb-row .avatar{width:34px;height:34px;font-size:15px}
.lb-row.rep{grid-template-columns:44px 40px 1fr auto 40px}
.lb-rep{color:var(--text-3)}
.pd .lb-rep{width:32px;height:32px;margin:2px auto 0}
/* น้องคู่หูบนกระดานอันดับ (ไอเดียอันดับ 1) วงสีกรอบตามตัวละครที่เลือก */
.lb-row .sr-av{width:40px;height:40px}
.sr-av{overflow:hidden;background:radial-gradient(70% 70% at 50% 60%,color-mix(in srgb,var(--c) 34%,transparent),rgba(2,14,27,.6));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 70%,transparent)}
.sr-av svg{width:118%;height:auto;max-width:none;margin-top:8%}
.podium .sr-av.lg{width:76px;height:76px}
.podium .p1 .sr-av.lg{width:92px;height:92px;box-shadow:inset 0 0 0 2px #F1DEB2,0 0 0 4px rgba(241,222,178,.16)}

/* ───────────── โปรไฟล์ ───────────── */
.profile-head{display:flex;align-items:center;gap:18px;padding-top:30px}
.profile-head h1{font-size:clamp(24px,3.4vw,32px)}
.lv-title{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--champagne);font-size:14.5px;margin-top:2px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:720px){ .stat-grid{grid-template-columns:repeat(4,1fr)} }
.stat{padding:16px;border-radius:18px;background:rgba(8,40,71,.5);border:1px solid var(--line)}
.stat b{display:block;font-family:var(--f-poster);font-weight:400;font-size:34px;line-height:1.05;color:var(--cream-50)}
.stat span{font-size:13px;color:var(--text-3)}
.list-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.list-row:first-child{border-top:0}
.order-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px}
.order-act{grid-column:1 / -1;display:flex;justify-content:flex-end;margin-top:10px}
@media (min-width:720px){.order-row.has-act{grid-template-columns:minmax(0,1fr) auto auto}.order-act{grid-column:auto;margin-top:0}}

/* ───────────── สมุดข้อผิด ───────────── */
.err{padding:18px;border-radius:var(--r-l);border:1px solid var(--line);background:rgba(2,14,27,.45)}
.err+.err{margin-top:12px}
.err .e-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--text-3)}
.err .e-q{margin-top:8px;font-weight:600}
.err .e-text{font-family:var(--f-serif);font-size:19px;color:var(--cream-50);margin-top:6px}
.err .e-ans{display:grid;gap:6px;margin-top:12px;font-size:15px}
.err .e-ans .bad{color:var(--bad)} .err .e-ans .ok{color:var(--ok)}
.err .e-why{margin-top:10px;color:var(--text-2);font-size:15px;line-height:1.7}
.err.resolved{opacity:.6}
.err .note{margin-top:12px}
.err .note>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--champagne)}
.err .note>summary::-webkit-details-marker{display:none}
.err .note>summary svg{width:16px;height:16px}
.err .note form{margin-top:10px}
.err .e-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}

/* ───────────── ชำระเงิน ───────────── */
.steps{display:flex;gap:6px;margin:22px 0 22px}
.steps .st{flex:1;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-3);font-weight:600}
.steps .st i{height:4px;border-radius:99px;background:rgba(183,198,211,.18)}
.steps .st.on{color:var(--text)} .steps .st.on i,.steps .st.done i{background:var(--champagne)}
.packs{display:grid;gap:12px}
.pack{position:relative;display:flex;align-items:center;gap:14px;padding:18px;border-radius:20px;border:1.5px solid var(--line-2);
  background:rgba(2,14,27,.45);cursor:pointer;text-align:left;width:100%;color:var(--text)}
.pack.is-on{border-color:var(--champagne);background:var(--champagne-soft)}
.pack .pk-name{font-weight:700;font-size:16.5px}
.pack .pk-sub{font-size:13.5px;color:var(--text-3);margin-top:2px}
.pack .pk-price{margin-left:auto;text-align:right;white-space:nowrap}
.pack .pk-price b{font-family:var(--f-poster);font-weight:400;font-size:30px;line-height:1}
.pack .pk-price s{display:block;font-size:13px;color:var(--text-4)}
.pack .flag{position:absolute;top:-11px;left:16px;font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px;
  background:var(--coral-500);color:var(--ink-900)}
.pack .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-3);flex:0 0 auto;display:grid;place-items:center}
.pack.is-on .radio{border-color:var(--champagne)}
.pack.is-on .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--champagne)}
.rows dl{margin:0}
.kv{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.kv:first-child{border-top:0}
.kv dt{color:var(--text-3)} .kv dd{margin:0;font-weight:600;text-align:right}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:30px 18px;border-radius:20px;
  border:1.5px dashed var(--line-3);background:rgba(2,14,27,.4);text-align:center;cursor:pointer}
.drop.has{border-style:solid;border-color:var(--ok);background:var(--ok-soft)}
.drop img{max-height:240px;border-radius:12px;margin-top:10px}
.reftag{font-family:var(--f-poster);font-size:24px;letter-spacing:.04em;color:var(--champagne)}
.reftag.is-ref{font-size:clamp(16px,4.4vw,24px);letter-spacing:.02em;overflow-wrap:anywhere;user-select:all}

/* ───────────── หน้าฝรั่งเศส ───────────── */
.fr-hero{position:relative;padding:42px 0 30px;overflow:hidden}
.fr-word{font-family:var(--f-poster);font-size:clamp(78px,17vw,190px);line-height:.82;color:var(--cream-50);letter-spacing:.005em;padding-bottom:.16em}
.fr-word em{font-style:normal;color:var(--coral-500)}
.creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;margin-top:22px}
@media (min-width:720px){ .creds{display:flex;flex-wrap:wrap;gap:22px 34px} }
.creds div b{display:block;font-family:var(--f-poster);font-weight:700;font-synthesis:none;font-size:34px;line-height:1;color:var(--champagne)}
.creds div span{font-size:13px;color:var(--text-3)}
.demo{border-radius:var(--r-l);border:1px solid var(--line);background:rgba(2,14,27,.5);padding:16px;box-shadow:var(--shadow-1)}
.flash{position:relative;height:250px;perspective:1200px;margin-top:14px;cursor:pointer;user-select:none}
.flash-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s var(--ease-io)}
.flash.flip .flash-in{transform:rotateY(180deg)}
.flash-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;padding:22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.flash-front{background:var(--cream-100);color:var(--ink-900)}
.flash-back{background:linear-gradient(160deg,#0D3660,#061F3A);border:1px solid var(--line-2);transform:rotateY(180deg)}
.flash .fw{font-family:var(--f-serif);font-weight:700;font-size:clamp(28px,4.4vw,40px);line-height:1.15}
.flash .fth{font-size:22px;font-weight:700}
.flash .fex{font-family:var(--f-serif);font-size:16px;color:var(--text-2);max-width:46ch}
.flash .tag{position:absolute;top:14px;left:16px;font-size:12px;font-weight:600;color:#5A7794}
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cat{display:inline-flex;align-items:baseline;gap:7px;padding:8px 13px;border-radius:12px;border:1px solid var(--line-2);
  background:rgba(2,14,27,.4);color:var(--text-2);font-size:14px;text-align:left}
.cat i{font-style:normal;font-family:var(--f-poster);font-size:14px;color:var(--text-4)}
.cat[aria-pressed="true"]{border-color:var(--champagne);color:var(--cream-50);background:var(--champagne-soft)}
.wordlist{margin-top:14px;border-radius:18px;border:1px solid var(--line);overflow:hidden}
.wordlist div{display:flex;justify-content:space-between;gap:16px;padding:11px 16px;border-top:1px solid var(--line);background:rgba(2,14,27,.35)}
.wordlist div:first-child{border-top:0}
.wordlist .fw{font-family:var(--f-serif);font-weight:600;font-size:17px}
.wordlist .th{color:var(--text-3);font-size:14px;text-align:right}
.peek{border:1px solid var(--line);border-radius:18px;background:rgba(2,14,27,.4);margin-top:10px;overflow:hidden}
.peek>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;font-weight:600}
.peek>summary::-webkit-details-marker{display:none}
.peek>summary::after{content:"+";font-family:var(--f-poster);font-size:22px;color:var(--champagne)}
.peek[open]>summary::after{content:"–"}
.peek-body{padding:0 18px 18px;font-size:14.5px;color:var(--text-2)}
.peek-body table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13.5px}
.peek-body th,.peek-body td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.peek-body th{color:var(--text);font-weight:600}
.peek-body .fr{font-family:var(--f-serif);color:var(--cream-50)}
.peek-body h4{margin:16px 0 6px;font-size:13.5px;color:var(--champagne)}
.peek-body p{margin:8px 0}
.peek-body ul{margin:8px 0;padding-left:20px}
.peek-body .mock-q{background:rgba(2,14,27,.5);border-radius:12px;padding:14px;margin:10px 0}
.peek-body .stem{font-family:var(--f-serif);color:var(--cream-50)}
.peek-body .stem u{text-decoration:none;border-bottom:2px solid var(--champagne);padding:0 16px}
.peek-body ol{margin:8px 0;padding-left:22px;font-family:var(--f-serif)}
.peek-body .key{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.peek-body .key b{color:var(--ok)}
.peek-body .cut{text-align:center;color:var(--text-4);font-size:12.5px;padding-top:12px;border-top:1px dashed var(--line-2);margin-top:12px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:600;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--champagne);font-family:var(--f-poster);font-size:20px}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 16px;color:var(--text-2);font-size:15px}
.line-card{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:20px;border-radius:var(--r-l);border:1px solid var(--line);
  background:rgba(2,14,27,.45)}
.line-card img{width:108px;height:108px;border-radius:14px;background:#fff;padding:6px}
.btn-line{background:#06C755;color:#fff}

/* ───────────── หน้าต่างลอย ───────────── */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(1,8,16,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .2s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{position:relative;width:100%;max-width:460px;max-height:92vh;overflow-y:auto;padding:24px 22px calc(24px + var(--safe-b));
  border-radius:26px 26px 0 0;background:var(--ink-850);border:1px solid var(--line-2);box-shadow:var(--shadow-2);
  animation:up .28s var(--ease) both}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:600px){ .modal{align-items:center} .modal-card{border-radius:26px;padding-bottom:26px} }
.modal-x{position:absolute;right:12px;top:12px}
.modal h2{font-size:24px}
.toast{position:fixed;left:50%;bottom:calc(var(--tabs-h) + var(--safe-b) + 18px);transform:translate(-50%,20px);z-index:100;
  max-width:min(92vw,460px);padding:12px 18px;border-radius:14px;background:var(--cream-100);color:var(--ink-900);font-weight:600;
  font-size:14.5px;box-shadow:var(--shadow-2);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:880px){ .toast{bottom:32px} }
.search{position:fixed;inset:0;z-index:85;background:rgba(1,8,16,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;animation:fade .2s both}
.search-bar{display:flex;align-items:center;gap:10px;padding:calc(12px + var(--safe-t)) var(--gutter) 12px;max-width:820px;width:100%;margin:0 auto}
.search-bar .input{min-height:54px;font-size:18px;border-radius:16px}
.search-bar .input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search-res{flex:1;overflow-y:auto;max-width:820px;width:100%;margin:0 auto;padding:6px var(--gutter) 40px}
.s-item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px}
.s-item:hover,.s-item.is-on{background:rgba(183,198,211,.08)}
.s-item .s-num{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-family:var(--f-poster);font-size:24px;
  background:rgba(8,40,71,.8);border:1px solid var(--line);flex:0 0 auto}
.s-item b{display:block;font-size:15.5px;line-height:1.4}
.s-item span{font-size:13px;color:var(--text-3)}

/* หน้าว่าง / โหลด */
.loading{display:grid;place-items:center;min-height:50vh}
.loader{width:42px;height:42px;border-radius:50%;border:3px solid rgba(183,198,211,.15);border-top-color:var(--champagne);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:40px 20px;text-align:center;color:var(--text-3)}
.empty svg{width:48px;height:48px;margin:0 auto 12px;color:var(--text-4)}

/* ส่วนท้าย */
.foot{margin-top:72px;padding:34px 0 20px;border-top:1px solid var(--line);color:var(--text-3);font-size:13.5px}
.foot .wordmark{font-size:20px;color:var(--text)}
.foot-grid{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-start}
.foot-grid .stack{display:flex;flex-direction:column;gap:8px}
.foot-grid .stack>*+*{margin-top:0}
.foot a:hover{color:var(--text)}

/* ไอคอนที่อยู่ในบรรทัดข้อความ */
.epnav span svg,.err .e-ans svg{display:inline-block;width:15px;height:15px;vertical-align:-3px}
.lv-title svg,.owned svg{width:16px;height:16px}
.list-row>svg{width:22px;height:22px;color:var(--champagne)}
.drop svg{width:34px;height:34px;color:var(--text-3)}
.review summary svg{width:18px;height:18px;color:var(--text-3)}
.stat-pill .flame{color:#FF9A4D}

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

/* ───────────── ศัพท์ 1,000 คำ (ชุดฟรี EP.11) ───────────── */
.wd-pos{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;
  color:var(--c);background:rgba(183,198,211,.08);background:color-mix(in srgb,var(--c) 14%,transparent);
  border:1px solid rgba(183,198,211,.25);border-color:color-mix(in srgb,var(--c) 42%,transparent)}
.wd-promo{position:relative;display:grid;gap:12px;padding:20px;border-radius:var(--r-l);border:1px solid rgba(228,207,158,.38);overflow:hidden;
  background:radial-gradient(420px 200px at 100% 0%,rgba(228,207,158,.18),transparent 70%),linear-gradient(180deg,rgba(13,54,96,.5),rgba(6,31,58,.62));
  transition:border-color .15s,transform .15s var(--ease)}
.wd-promo:hover{border-color:rgba(228,207,158,.7);transform:translateY(-2px)}
.wd-promo .big{font-family:var(--f-poster);font-size:58px;line-height:.85;color:var(--champagne);letter-spacing:.01em}
.wd-promo .big small{font-family:var(--f-thai);font-size:15px;font-weight:600;color:var(--text-2);margin-left:8px;letter-spacing:0}
.wd-promo h3{font-size:19px}
.wd-promo .sample{margin-top:8px;font-family:var(--f-serif);font-size:15px;color:var(--text-3)}
.wd-promo .btn{justify-self:start}
@media (min-width:760px){
  .wd-promo.wide{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:30px;padding:24px 30px}
  .wd-promo.wide .big{font-size:92px}
  .wd-promo.wide .btn{justify-self:end}
}

.wd-hero{display:grid;gap:24px;padding:18px 0 4px}
@media (min-width:900px){ .wd-hero{grid-template-columns:minmax(0,1fr) 340px;align-items:center;gap:44px} }
.wd-hero h1{font-size:clamp(30px,4.8vw,50px);line-height:1.18;margin-top:10px;text-wrap:balance}
.wd-hero .lede{color:var(--text-2);margin-top:12px;max-width:58ch}
.wd-meter{padding:22px 22px 18px;border-radius:var(--r-l);background:var(--cream-100);color:var(--ink-900);box-shadow:var(--shadow-2)}
.wd-meter .lab{font-size:13.5px;font-weight:600;color:#5A7794}
.wd-meter .n{font-family:var(--f-poster);font-size:76px;line-height:.9;margin-top:4px;color:var(--ink-900)}
.wd-meter .n small{font-size:22px;color:#5A7794;font-family:var(--f-thai);font-weight:600}
.wd-meter .progress{background:rgba(5,37,68,.12)}
.wd-meter .progress>i{background:linear-gradient(90deg,var(--coral-600),var(--coral-500))}
.wd-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(5,37,68,.12)}
.wd-mini b{display:block;font-family:var(--f-poster);font-weight:400;font-size:26px;line-height:1.05}
.wd-mini span{font-size:12px;color:#5A7794;line-height:1.3;display:block}
.wd-today{display:grid;gap:14px;margin-top:26px;padding:18px 20px;border-radius:var(--r-l);border:1px solid var(--line);background:rgba(8,40,71,.5)}
.wd-gate{border-color:rgba(228,207,158,.4);background:linear-gradient(90deg,rgba(228,207,158,.12),rgba(8,40,71,.5))}
@media (min-width:760px){ .wd-today.wd-gate{grid-template-columns:minmax(0,1fr) auto;align-items:center} }
.chip-due{color:var(--coral-300);border-color:rgba(239,109,101,.45);background:rgba(239,109,101,.12)}
.wd-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));counter-reset:s}
@media (min-width:900px){ .wd-steps{grid-template-columns:repeat(4,minmax(0,1fr))} }
.wd-steps li{padding:16px;border-radius:18px;background:rgba(2,14,27,.45);border:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--text-3);counter-increment:s}
.wd-steps li::before{content:counter(s);display:block;font-family:var(--f-poster);font-size:28px;line-height:1;color:var(--champagne)}
.wd-steps b{display:block;color:var(--text);font-size:15.5px;margin:6px 0 4px;line-height:1.4}
.wd-block{margin-top:34px}
.wd-block h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:17px}
.wd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
@media (min-width:640px){ .wd-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1000px){ .wd-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
.wd-day{position:relative;display:flex;flex-direction:column;gap:4px;min-height:150px;padding:14px 14px 12px;border-radius:18px;
  background:linear-gradient(180deg,rgba(13,54,96,.42),rgba(6,31,58,.62));border:1px solid var(--line);transition:transform .15s var(--ease),border-color .15s}
.wd-day:hover{transform:translateY(-2px);border-color:var(--line-3)}
.wd-day .wd-num{font-family:var(--f-poster);font-size:34px;line-height:.9;color:var(--cream-50)}
.wd-day .wd-theme{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--text);margin-top:4px}
.wd-day .wd-prev{font-family:var(--f-serif);font-size:13px;line-height:1.4;color:var(--text-3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wd-day .wd-st{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text-3)}
.wd-day .wd-st svg{width:15px;height:15px}
.wd-dots{display:inline-flex;gap:3px;margin-left:auto}
.wd-dots i{width:7px;height:7px;border-radius:50%;background:rgba(183,198,211,.22)}
.wd-dots i.on{background:var(--champagne)}
.wd-day.is-due{border-color:rgba(239,109,101,.6);box-shadow:0 0 0 3px rgba(239,109,101,.12)}
.wd-day.is-due .wd-st{color:var(--coral-300)}
.wd-day.is-learning .wd-st{color:var(--text-2)}
.wd-day.is-mastered{background:linear-gradient(180deg,rgba(228,207,158,.17),rgba(6,31,58,.62));border-color:rgba(228,207,158,.42)}
.wd-day.is-mastered .wd-st{color:var(--champagne)}
.wd-day.is-next{border-color:rgba(251,248,241,.6);box-shadow:0 0 0 3px rgba(251,248,241,.08)}
.wd-day.is-lock{opacity:.6}
.wd-day.is-lock .wd-num{color:var(--text-3)}

.wd-head{padding:18px 0 4px}
.wd-head h1{font-size:clamp(28px,4.6vw,44px);line-height:1.2;margin-top:8px;text-wrap:balance}
.wd-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.wd-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.wd-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:16px 16px 16px 10px;border-radius:18px;
  border:1px solid var(--line);background:rgba(8,40,71,.45)}
.wd-list.covered .wd-row{cursor:pointer}
.wd-row .wd-n{font-family:var(--f-poster);font-size:17px;color:var(--text-4);text-align:center;padding-top:5px}
.wd-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.wd-w{font-family:var(--f-serif);font-weight:700;font-size:23px;line-height:1.2;color:var(--cream-50)}
.wd-say{width:36px;height:36px;margin-left:auto;color:var(--text-2)}
.wd-row .wd-th{display:block;margin-top:6px;padding:0;border:0;background:none;text-align:left;font-size:18px;font-weight:700;color:var(--champagne);
  cursor:inherit;transition:filter .25s}
.wd-ex{margin-top:8px;font-family:var(--f-serif);font-size:16.5px;line-height:1.55;color:var(--text)}
.wd-exth{margin-top:2px;font-size:14.5px;color:var(--text-3);transition:filter .25s}
.wd-note{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:8px 10px;border-radius:10px;background:rgba(228,207,158,.08);
  font-size:13.5px;line-height:1.5;color:var(--text-2);transition:filter .25s}
.wd-note svg{width:16px;height:16px;margin-top:2px;color:var(--champagne)}
.wd-list.covered .wd-row:not(.open) .wd-th,.wd-list.covered .wd-row:not(.open) .wd-exth,.wd-list.covered .wd-row:not(.open) .wd-note{
  filter:blur(7px);user-select:none;-webkit-user-select:none}

.wd-study .qz-bars{gap:3px}
.wd-study .qz-xp{min-width:64px}
.wd-card{margin-top:16px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-2);cursor:pointer}
.wd-card.open{cursor:default}
.wd-front{padding:20px 22px 24px;background:var(--cream-100);color:var(--ink-900);text-align:center}
.wd-front .wd-pos{color:var(--ink-900);background:var(--c);border-color:transparent}
.wd-front .faint{color:#5A7794}
.wd-word{font-family:var(--f-serif);font-weight:700;font-size:clamp(40px,9vw,64px);line-height:1.1;margin:26px 0 16px;overflow-wrap:anywhere}
.wd-front .btn-ghost{color:var(--ink-900);border-color:rgba(5,37,68,.2);background:rgba(5,37,68,.05)}
.wd-back{padding:20px 22px 24px;background:linear-gradient(160deg,#0D3660,#061F3A);animation:wdIn .3s var(--ease) both}
.wd-back .wd-th{font-size:clamp(22px,4vw,28px);font-weight:700;color:var(--champagne);line-height:1.35}
.wd-back .wd-ex{margin-top:12px;font-size:18px}
.wd-back .wd-exth{font-size:15px}
@keyframes wdIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.kbd{display:none;font-size:11px;font-weight:600;padding:0 6px;border-radius:6px;border:1px solid currentColor;opacity:.55;line-height:1.6}
@media (hover:hover) and (pointer:fine){ .kbd{display:inline-block} }
.wd-plan{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:16px;font-size:15px;color:var(--text-2)}
.wd-plan b{color:var(--cream-50);margin-left:4px}
.wd-plan svg{color:var(--champagne)}

/* ───────────── หน้านโยบาย ───────────── */
.policy{padding:30px 0 10px}
.policy h1{font-size:clamp(28px,4.4vw,40px)}
.policy h2{font-size:20px;margin-top:30px}
.policy p,.policy ul{margin-top:10px;color:var(--text-2)}
.policy ul{padding-left:20px}
.policy li{margin-top:6px}
.policy b{color:var(--text)}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-legal a{text-decoration:underline;text-underline-offset:3px}

/* ───────────── ข้อสอบเสมือน A-Level ฝรั่งเศส ───────────── */
.g-fr{font-family:var(--f-serif);font-style:italic;font-weight:600}
.qz-text.sm{font-size:clamp(19px,2.7vw,23px);line-height:1.5;text-wrap:pretty}
.qz-text.ml,.review .r-body .ml{white-space:pre-line}
.review .r-pass{border:0;padding:0;margin:2px 0 10px}
.review .r-pass summary{padding:4px 0;font-size:13.5px;color:var(--text-3)}
.review .r-pass .passage{margin-top:6px;font-size:15.5px}
.sec-card{margin-top:20px;text-align:left}
.sec-row{margin-top:14px}
.sec-row .row span{font-family:var(--f-poster);color:var(--cream-50)}
.sec-row .progress{margin-top:6px}
.sec-row.weak .progress i{background:var(--bad)}
.sec-row .link{display:inline-block;margin-top:6px}
.fm-tiles{margin-top:22px}
@media (min-width:720px){ .fm-tiles{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .fm-tiles{grid-template-columns:repeat(3,1fr)} }
.fm-tile .t-big{display:flex;align-items:baseline;gap:10px}
.fm-tile .lvl{font-family:var(--f-thai);font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:99px;border:1px solid var(--line-2);color:var(--text-2)}
.fm-tile .lvl.real{color:#1b1607;background:var(--champagne);border-color:transparent}
.fm-tile .lvl.mid{color:var(--champagne);border-color:var(--champagne)}
.fm-tile .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--text-3)}
.fm-tile .best{font-family:var(--f-poster);font-size:22px;color:var(--champagne)}
.fm-tile .best small{font-size:13px;color:var(--text-3);font-family:var(--f-thai)}
.fm-tile.is-focus{border-color:var(--champagne);box-shadow:0 0 0 3px rgba(228,207,158,.18)}
.fm-hist{margin-top:10px}
.fm-hist .list-row{gap:14px;font-size:14.5px}
.fm-hist .list-row b{font-family:var(--f-poster);font-weight:400;font-size:18px;color:var(--cream-50);min-width:64px;text-align:right}
.fm-spark{display:flex;align-items:flex-end;gap:4px;height:46px;margin-top:12px}
.fm-spark i{flex:1;max-width:22px;border-radius:5px 5px 2px 2px;background:var(--champagne);opacity:.85}
.review .blank{display:inline-block;min-width:2.4em;border-bottom:2px solid var(--champagne);margin:0 .12em;height:.9em;vertical-align:-.05em}
.fm-tile .meta span{display:inline-flex;align-items:center;gap:6px}
.fm-tile .meta svg{width:16px;height:16px;flex:none}

/* ───────────── ทางเข้าโหมดจับเวลา (หน้าแรก) ───────────── */
.study-band{padding-top:6px}
.study-promo{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--r-l);
  border:1px solid rgba(228,207,158,.24);
  background:radial-gradient(420px 160px at 12% 50%, rgba(228,207,158,.13), transparent 70%), rgba(2,14,27,.45)}
.study-promo b{display:block;font-size:16.5px;line-height:1.4}
.study-promo [data-study-live]{display:block;font-size:13.5px;color:var(--text-3);margin-top:2px}
.study-promo .sp-clock{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--champagne-soft);color:var(--champagne)}
.study-promo .sp-clock svg{width:24px;height:24px}
@media (max-width:480px){ .study-promo .btn{display:none} }


/* ───────────── TGAT1 Season 1: บทสนทนา/บทความ ช่องที่เติม เหตุผลตัวลวง ───────────── */
.gapmark{display:inline-flex;align-items:center;justify-content:center;min-width:2.6em;height:1.45em;padding:0 .5em;margin:0 .15em;border-radius:99px;
  border:1.5px dashed currentColor;font-family:var(--f-thai);font-size:.7em;font-weight:700;letter-spacing:.02em;vertical-align:.12em;opacity:.55;font-style:normal}
.gapmark i{font-style:normal}
.gapmark.on{opacity:1;color:#8A5A12;background:rgba(214,175,102,.28);border-style:solid;border-color:#B98B3E}
.qz-prompt .gapmark{color:var(--champagne);background:rgba(214,175,102,.14);border-color:var(--champagne);font-size:.75em}
.passage.rich{white-space:normal}
.passage.rich p{margin:0}
.passage.rich p+p{margin-top:.8em}
.passage.rich .p-head{font-family:var(--f-thai);font-weight:700;font-size:15px;letter-spacing:.02em;margin-bottom:.6em;color:#223B53}
.passage.rich .p-list{margin:.6em 0 .8em 1.1em;padding:0}
.passage.rich .p-list li{margin:.25em 0}
.passage.dlg .turn{display:flex;gap:12px;align-items:baseline}
.passage.dlg .turn+.turn{margin-top:.55em}
.passage.dlg .spk{flex:none;width:1.7em;height:1.7em;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#0B2A47;color:var(--cream-50);font-family:var(--f-thai);font-size:.72em;font-weight:700}
.fb .lab{display:inline-block;font-family:var(--f-thai);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--champagne);margin-right:6px}
.fb-wrong{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.28);font-size:15.5px;line-height:1.65;color:var(--cream-100)}
.fb-wrong .lab{display:block;margin:0 0 4px}
.errcat{display:inline-block;margin-right:8px;padding:1px 10px;border-radius:99px;font-family:var(--f-thai);font-size:12.5px;font-weight:700;
  color:var(--champagne);border:1px solid rgba(214,175,102,.55);background:rgba(214,175,102,.1);white-space:nowrap}
.fb-all{margin-top:10px;font-size:14.5px;line-height:1.65;color:var(--text-2)}
.fb-all>summary{cursor:pointer;font-weight:600;color:var(--champagne);list-style:none}
.fb-all .dl{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin-top:8px}
.fb-all .dl b{width:1.6em;height:1.6em;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(183,198,211,.14);font-size:.85em}
.fb-all.open{margin-top:8px}
.err .e-cat{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--text-2)}

/* Season 1: ป้ายฟรี / ล็อกบนแผนที่ด่าน */
.node .n-free{position:absolute;top:-6px;left:calc(50% + 22px);font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:99px;background:var(--champagne);color:#1a1206}
.node .n-lock{display:inline-grid;place-items:center;margin-top:4px;color:var(--text-4)}
.node .n-lock svg{width:15px;height:15px}

/* A-Level อังกฤษ: ป้ายคอร์สในสมุดข้อผิด */
.course-tag{white-space:nowrap;flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;margin-right:8px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--champagne);background:rgba(228,207,158,.1);box-shadow:inset 0 0 0 1px rgba(228,207,158,.38);vertical-align:middle}
.course-seg{max-width:340px}

/* A-Level: ชื่อผู้พูดยาว (Ms. Devi) และรายการประโยค A–D ไม่ต้องมีจุดนำหน้า */
.passage.dlg .spk.long{width:auto;min-width:1.7em;padding:0 .7em;border-radius:99px;white-space:nowrap}
.passage.rich .p-list.ord{list-style:none;margin-left:0}
.passage.dlg .p-head{margin-bottom:.3em}
.passage.dlg p{margin:0 0 .7em;color:#4A5F74;font-size:.94em}

/* A-Level S1: รูปข้อมูล (SVG), การ์ดตาราง EP.22, ป้ายโครงของข้อเรียงประโยค */
.passage.rich .p-fig{margin:.4em 0 0;padding:0}
.passage.rich .p-fig img{display:block;width:100%;height:auto;border-radius:8px}
.passage.rich .p-head+.p-tbl,.passage.rich .p-tbl+.p-head{margin-top:.5em}
.passage.rich .p-tbl{overflow-x:auto;margin:.2em 0 1.1em;-webkit-overflow-scrolling:touch}
.passage.rich .p-tbl table{border-collapse:collapse;width:100%;min-width:500px;font-family:var(--f-thai);font-size:13.5px;line-height:1.45}
.passage.rich .p-tbl th{text-align:left;font-weight:700;background:rgba(184,145,90,.18);border-bottom:1.5px solid #B8915A;padding:7px 9px;white-space:nowrap}
.passage.rich .p-tbl td{padding:7px 9px;border-bottom:1px solid rgba(3,24,45,.14);vertical-align:top}
.passage.rich .p-tbl tr.sub td{color:rgba(3,24,45,.7);font-size:13px}
.q-hint{margin-top:10px}
.q-tag{display:inline-block;padding:3px 10px;border-radius:999px;font-family:var(--f-thai);font-size:12px;font-weight:600;letter-spacing:.02em;color:#8A6A38;border:1px solid rgba(184,145,90,.55);background:rgba(184,145,90,.1)}

/* TGAT1 S1 แบบฝึกท้ายคลิป + Mock: คำที่ควรล้อมกรอบ, ป้ายกับดัก / ตอนที่ควรทวน, การ์ดแบบฝึกในหน้าตอน */
.qz-text .kw{outline:1.5px solid var(--champagne);outline-offset:3px;border-radius:5px;padding:0 3px;margin:0 1px}
.fb-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fb-tags .tg{display:inline-flex;align-items:center;min-height:26px;padding:2px 11px;border-radius:99px;font-family:var(--f-thai);font-size:12.5px;font-weight:600;line-height:1.35;
  color:var(--text-2);border:1px solid var(--line-2);background:rgba(183,198,211,.08);text-decoration:none}
.fb-tags a.tg:hover{border-color:var(--champagne);color:var(--champagne)}
.fb-tags .tg.trap{color:var(--champagne);border-color:rgba(228,207,158,.5);background:var(--champagne-soft)}
.xpractice{border-color:rgba(228,207,158,.32)}
.xpractice .best-line{margin-top:0}

/* ═══════════════════════════════════════════════════════════════════
   ชุด "โตเอง" — เข้าสู่ระบบด้วย LINE/Google, บัญชี, ทวนข้อผิด, กับดัก, แตะดูศัพท์
   ═══════════════════════════════════════════════════════════════════ */

/* ───── เข้าสู่ระบบ ───── */
.social-login{display:grid;gap:10px;margin-top:18px}
.social-login .btn .i{width:22px;height:22px}
.btn-google{background:#FBF8F1;color:#1B2540;border-color:rgba(255,255,255,.4)}
.btn-google:hover{background:#fff}
.btn-line:hover{background:#05B44C}
.social-login .or{display:flex;align-items:center;gap:12px;margin-top:6px;color:var(--text-4);font-size:12.5px}
.social-login .or::before,.social-login .or::after{content:"";flex:1;height:1px;background:var(--line-2)}
.btn-danger{background:rgba(255,122,122,.12);color:#FFB3B3;border-color:rgba(255,122,122,.45)}
.btn-danger:hover{background:rgba(255,122,122,.2);color:#fff}

/* ───── บัญชี ───── */
.verify-bar,.due-bar{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 16px;border-radius:16px;font-size:14.5px}
.verify-bar{border:1px solid rgba(228,207,158,.35);background:var(--champagne-soft);color:var(--cream-100)}
.verify-bar>svg{color:var(--champagne);width:20px;height:20px;flex:0 0 auto}
.due-bar{border:1px solid rgba(90,211,154,.32);background:linear-gradient(100deg,rgba(90,211,154,.13),rgba(90,211,154,.03));color:var(--text);text-decoration:none}
.due-bar>svg{width:22px;height:22px;color:var(--ok);flex:0 0 auto}
.due-bar>svg:last-child{color:var(--text-3)}
.due-bar:hover{border-color:rgba(90,211,154,.6)}
.acc-row{display:flex;align-items:center;gap:14px}
.acc-row>svg{width:24px;height:24px;flex:0 0 auto;color:var(--text-2)}
.acc-row .small{line-height:1.5}
.chip-ok{color:var(--ok);border-color:rgba(90,211,154,.4);background:var(--ok-soft)}
.chip-ok svg{width:14px;height:14px}
.danger-zone{margin-top:44px;padding:20px;border-radius:var(--r-l);border:1px dashed rgba(255,122,122,.35)}
.danger-zone h3{font-size:16px;color:#FFB3B3}
.saved-words{display:flex;flex-wrap:wrap;gap:8px}
.saved-words .sw{display:inline-flex;align-items:baseline;gap:8px;padding:6px 12px;border-radius:12px;border:1px solid var(--line-2);background:rgba(2,14,27,.35);font-size:13.5px}
.saved-words .sw b{font-family:var(--f-serif);font-size:15.5px;color:var(--cream-50)}
.saved-words .sw span{color:var(--text-3)}
.loader.sm{width:22px;height:22px;border-width:2px;display:inline-block;vertical-align:middle}

/* ───── สมุดข้อผิด: รอบทวน ───── */
.rv-panel{display:flex;gap:22px;align-items:flex-start;margin-top:26px;padding:22px;border-radius:var(--r-l);
  border:1px solid rgba(228,207,158,.28);background:radial-gradient(600px 220px at 0% 0%,rgba(228,207,158,.12),transparent 70%),rgba(2,14,27,.5);box-shadow:var(--shadow-1)}
.rv-panel h2{font-size:22px}
.rv-count{flex:0 0 auto;width:96px;text-align:center}
.rv-count b{display:block;font-family:var(--f-poster);font-weight:400;font-size:64px;line-height:1;color:var(--champagne)}
.rv-count span{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--text-3)}
.rv-steps{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:var(--text-3);flex-wrap:wrap}
.rv-steps span{padding:2px 9px;border-radius:99px;border:1px solid var(--line-2)}
.rv-steps span.win{color:var(--ok);border-color:rgba(90,211,154,.4)}
.rv-steps i{width:14px;height:1px;background:var(--line-3)}
@media (max-width:560px){ .rv-panel{flex-direction:column;gap:10px} .rv-count{width:auto;display:flex;align-items:baseline;gap:10px;text-align:left} .rv-count span br{display:none} }

/* ───── สมุดข้อผิด: กับดักที่โดนบ่อยสุด ───── */
.trap-panel{margin-top:18px;padding:22px;border-radius:var(--r-l);border:1px solid var(--line);background:rgba(2,14,27,.45)}
.trap-panel h2{font-size:20px}
.traps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.traps li{display:flex;gap:14px;align-items:flex-start}
.t-rank{flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-poster);font-size:16px;
  color:var(--ink-900);background:linear-gradient(180deg,#EAD8AE,#CFB57D)}
.traps li:nth-child(n+2) .t-rank{background:var(--surface-3);color:var(--champagne)}
.t-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.t-head b{font-size:15.5px;line-height:1.45}
.t-n{flex:0 0 auto;font-weight:700;color:var(--coral-300);font-size:14px}
.t-bar{height:6px;border-radius:99px;background:rgba(183,198,211,.12);margin-top:6px;overflow:hidden}
.t-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--coral-500),var(--champagne))}
.t-foot{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:13px}
.link-btn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--champagne);cursor:pointer;border-bottom:1px solid rgba(228,207,158,.5)}
.link-btn:hover{color:var(--cream-50)}

/* ───── การ์ดข้อผิด: รอบถัดไป ───── */
.err .e-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.err .e-tags .tg{display:inline-flex;align-items:center;min-height:24px;padding:1px 10px;border-radius:99px;font-size:12.5px;font-weight:600;border:1px solid var(--line-2)}
.err .e-tags .tg.trap{color:var(--champagne);border-color:rgba(228,207,158,.5);background:var(--champagne-soft)}
.srs-chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:1px 10px;border-radius:99px;font-size:12.5px;font-weight:600;
  color:var(--text-3);border:1px solid var(--line-2)}
.srs-chip svg{width:14px;height:14px}
.srs-chip.due{color:var(--ok);border-color:rgba(90,211,154,.45);background:var(--ok-soft)}

/* ───── โหมดทวนข้อผิด (.qz.rv) ───── */
.rv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.rv-meta .chip svg{width:14px;height:14px}
.rv-dots{display:inline-flex;gap:4px}
.rv-dots i{width:22px;height:5px;border-radius:99px;background:rgba(183,198,211,.18)}
.rv-dots i.on{background:var(--ok)}
.rv-srs{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(183,198,211,.07);font-size:14px;color:var(--text-2)}
.rv-srs svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.rv-srs.ok{background:var(--ok-soft);color:#c8f5de}
.rv-srs.win{background:linear-gradient(100deg,rgba(228,207,158,.2),rgba(90,211,154,.14));color:var(--cream-50)}
.rv-srs.win svg{color:var(--champagne)}
.rv-note{display:flex;gap:8px;margin-top:10px;font-size:14px;color:var(--text-2)}
.rv-note svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--champagne)}
.rv-big{font-family:var(--f-poster);font-size:96px;line-height:1;color:var(--champagne);margin-top:10px}
.rv-big small{font-size:40px;color:var(--text-3)}

/* ───── หน้าผลสอบ: ศัพท์ในข้อที่ผิด ───── */
.vchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vchip{display:inline-flex;align-items:baseline;gap:8px;padding:7px 12px;border-radius:12px;border:1px solid var(--line-2);background:rgba(2,14,27,.4);
  color:var(--text);cursor:pointer;text-align:left;font:inherit;font-size:13.5px}
.vchip b{font-family:var(--f-serif);font-size:15.5px}
.vchip span{color:var(--text-3)}
.vchip:hover{border-color:var(--champagne)}
.vchip.on{border-color:rgba(90,211,154,.55);background:var(--ok-soft)}
.vchip.on::after{content:"✓";color:var(--ok);font-weight:700}

/* ───── แตะคำดูความหมาย ───── */
.lk-scope .passage,.lk-scope .qz-text,.lk-scope .e-text,.lk-scope .r-body .en{cursor:pointer}
.lk-pop{position:fixed;z-index:120;max-height:min(70vh,520px);overflow-y:auto;border-radius:18px;border:1px solid rgba(228,207,158,.35);
  background:linear-gradient(180deg,#0B2C4E,#071F3A);box-shadow:0 24px 60px rgba(0,0,0,.55);color:var(--text);animation:lkIn .16s var(--ease)}
.lk-pop.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;border-radius:22px 22px 0 0;padding-bottom:var(--safe-b);max-height:62vh}
@keyframes lkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lk-in{position:relative;padding:16px 18px 18px}
.lk-x{position:absolute;right:6px;top:6px}
.lk-loading{display:flex;align-items:center;gap:10px;font-family:var(--f-serif);font-size:18px}
.lk-item+.lk-item{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.lk-head{display:flex;align-items:center;gap:10px;padding-right:34px}
.lk-head b{font-family:var(--f-serif);font-size:24px;line-height:1.2;color:var(--cream-50)}
.lk-pos{font-size:12px;font-weight:700;color:var(--champagne);border:1px solid rgba(228,207,158,.4);border-radius:99px;padding:0 8px}
.lk-say{width:34px;height:34px;min-height:34px}
.lk-th{margin-top:4px;font-size:16px;font-weight:600;color:var(--cream-100)}
.lk-ex{margin-top:10px;font-family:var(--f-serif);font-size:15.5px;line-height:1.5;color:var(--text-2)}
.lk-exth{font-size:13.5px;color:var(--text-3);margin-top:2px}
.lk-note{margin-top:8px;font-size:13px;color:var(--text-3);border-left:2px solid var(--champagne);padding-left:10px}
.lk-save{margin-top:12px}
.lk-foot{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.lk-foot .link{margin:0 4px}

/* ───── เนื้อหาที่เซิร์ฟเวอร์วางไว้ให้ Google (เห็นแป๊บเดียวก่อนหน้าเว็บวาดเต็ม) ───── */
.ssr{padding-top:28px;padding-bottom:60px}
.ssr h1{font-size:clamp(28px,5vw,44px);line-height:1.2}
.ssr .crumbs{margin-bottom:14px}
.ssr-eps{margin:22px 0 0;padding-left:22px;display:grid;gap:12px}
.ssr-eps a{color:var(--text);text-decoration:none}
.ssr-eps b{color:var(--champagne);margin-right:6px}
.ssr-eps p{margin:2px 0 0;font-size:14px;color:var(--text-3)}
.ssr-links{margin-top:18px;display:grid;gap:8px}
.ssr-links a{color:var(--champagne)}
.ssr-words{columns:2 220px;margin-top:18px}
.ssr .epnav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}

/* ชิปเวลาลอย: เซสชันจับเวลายังเดินอยู่ขณะดูคลิป/ทำแบบฝึก (study-bg.js) */
.bg-chip{position:fixed;left:12px;bottom:calc(var(--tabs-h) + var(--safe-b) + 12px);z-index:44;display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 11px;border-radius:999px;text-decoration:none;color:var(--cream-100);font-size:13px;font-weight:600;
  background:linear-gradient(180deg,rgba(8,40,71,.94),rgba(3,24,45,.94));border:1px solid rgba(214,190,140,.45);
  box-shadow:0 6px 22px rgba(2,10,20,.45),inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(8px)}
.bg-chip[hidden]{display:none}
.bg-chip .bg-t{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--champagne)}
.bg-chip .bg-l{color:var(--text-3);font-weight:500;font-size:12px}
.bg-dot{width:8px;height:8px;border-radius:50%;background:var(--champagne);box-shadow:0 0 0 0 rgba(214,190,140,.55);animation:bgPulse 2.4s infinite}
@keyframes bgPulse{0%{box-shadow:0 0 0 0 rgba(214,190,140,.5)}70%{box-shadow:0 0 0 9px rgba(214,190,140,0)}100%{box-shadow:0 0 0 0 rgba(214,190,140,0)}}
@media (prefers-reduced-motion:reduce){.bg-dot{animation:none}}
@media (min-width:880px){.bg-chip{bottom:24px}}
body.study-focus .bg-chip{display:none}

.clip video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:contain}

/* ───── "ดูตอนที่สอนเรื่องนี้" ใต้เฉลย (แบบฝึก Mock โจทย์ประจำวัน สมุดข้อผิด) รอบ 7 ต.ค. 2569 ───── */
.ls-btn{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:10px 12px;border-radius:14px;text-align:left;cursor:pointer;font:inherit;color:var(--text);
  border:1px solid rgba(228,207,158,.45);background:linear-gradient(90deg,rgba(228,207,158,.16),rgba(228,207,158,.04));transition:border-color .2s var(--ease),transform .15s var(--ease)}
.ls-btn:hover{border-color:var(--champagne)}
.ls-btn:active{transform:scale(.99)}
.ls-ic{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--ink-900);background:radial-gradient(circle at 35% 30%,#FFF6DC,#E4C063 60%,#9C7A32)}
.ls-ic .i{width:15px;height:15px;margin-left:2px}
.ls-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.ls-t small{font-size:11.5px;font-weight:700;color:var(--champagne);letter-spacing:.03em}
.ls-t b{font-size:14px;font-weight:600;color:var(--cream-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-btn>.i:last-child{width:16px;height:16px;color:var(--champagne);flex:0 0 auto}
.ls-btn.sm{padding:8px 10px;margin-top:10px}
.ls-btn.sm .ls-ic{width:28px;height:28px}
.ls-head h2{font-size:22px;margin-top:4px}
.ls-kick{font-family:var(--f-serif);font-style:italic;font-size:13.5px;letter-spacing:.02em;color:var(--champagne)}
.ls-goal{margin:8px 0 0;font-size:14px;color:var(--text-2);line-height:1.6}
.ls-video{margin-top:14px;border-radius:16px;overflow:hidden;background:#000;max-height:60vh;display:flex;justify-content:center}
.ls-video video{width:100%;max-height:60vh;display:block}
.ls-recap{margin-top:14px;padding:14px 16px;border-radius:16px;border:1px solid rgba(228,207,158,.3);background:var(--champagne-soft)}
.ls-recap h3{font-size:14px;color:var(--champagne)}
.ls-recap ol{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14.5px;line-height:1.55}
.ls-clips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ls-open{margin-top:10px}
.ls-lock{display:flex;gap:12px;align-items:flex-start;margin:14px 0;padding:14px;border-radius:16px;border:1px solid var(--line-2);background:rgba(2,14,27,.45)}
.ls-lock-ic{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(228,207,158,.5);color:var(--champagne)}
.ls-lock-ic .i{width:17px;height:17px}
.ls-lock p{margin:4px 0 0}
.invite-note{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;padding:12px 14px;border-radius:14px;font-size:13.5px;line-height:1.55;color:var(--text-2);
  border:1px solid rgba(228,207,158,.4);background:var(--champagne-soft)}
.invite-note .i{width:20px;height:20px;flex:0 0 auto;color:var(--champagne);margin-top:1px}
.invite-note b{color:var(--cream-50);display:block}

/* ───────────── ระบบเกม เฟส 3: การ์ดทางเข้าบอสประจำสัปดาห์ (สมุดข้อผิด · หน้าน้องคู่หู · หน้า "ฉัน") ───────────── */
.bs-entry{display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:8px 14px 8px 8px;border-radius:20px;color:var(--text);
  border:1px solid rgba(156,134,242,.45);background:linear-gradient(135deg,rgba(91,63,184,.28),rgba(6,31,58,.6) 60%)}
.bs-entry-art{flex:0 0 auto;display:grid;place-items:center;width:72px;height:72px}
.bs-entry .grow{display:grid;gap:2px;min-width:0}
.bs-entry b{font-size:15px}
.bs-entry small{font-size:12.5px;color:var(--text-3)}
.bs-entry>.i{width:16px;height:16px;opacity:.6;flex:0 0 auto}
/* ระบบเกม เฟส 5: ทางเข้าแผนที่ด่าน (โครงเดียวกับ .bs-entry สีทองครีม) */
.bs-entry.mp-entry{border-color:rgba(228,207,158,.45);background:linear-gradient(135deg,rgba(228,207,158,.16),rgba(6,31,58,.6) 60%)}
/* ระบบเกม เฟส 6: ทางเข้าตีบอสกับเพื่อน (ราชาก้อนกระดาษ สีแดง) */
.bs-entry.rd-entry{border-color:rgba(240,122,94,.45);background:linear-gradient(135deg,rgba(200,50,42,.22),rgba(6,31,58,.6) 60%)}
/* TGAT2 Mock: คำชี้แจงเหนือโจทย์ บทของกลุ่มข้อ รูปโจทย์/ตัวเลือก นาฬิกาต่อข้อ และสรุปเวลาเทียบเป้า 45 วินาที */
.q-type{margin-left:8px;font-size:12.5px;font-weight:600;color:var(--text-3)}
.q-clock{float:right;font-family:var(--f-poster);font-size:14px;letter-spacing:.02em;color:var(--text-2);font-variant-numeric:tabular-nums}
.q-clock.over{color:var(--champagne)}
.qz-instr{margin-top:12px;padding:10px 14px;border-left:3px solid var(--champagne);border-radius:0 var(--r-s) var(--r-s) 0;
  background:var(--champagne-soft);color:var(--text-2);font-size:14.5px;line-height:1.65}
.p-group{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:600;color:var(--champagne)}
.p-group .i{width:16px;height:16px}
.t2p .passage{font-family:var(--f-thai);font-size:16px;line-height:1.8}
.qz-text.t2{font-family:var(--f-thai)}
.choice .kw,.qz-instr .kw,.r-body .kw,.fb .kw,.dl .kw{outline:1.5px solid var(--champagne);outline-offset:2px;border-radius:4px;padding:0 2px;margin:0 1px}
.passage .kw{outline:1.5px solid #9C7A33;outline-offset:2px;border-radius:4px;padding:0 2px;margin:0 1px}
.q-fig{margin:16px 0 0;padding:12px;border-radius:var(--r-m);background:var(--cream-50);box-shadow:var(--shadow-1)}
.q-fig img{display:block;width:100%;height:auto;max-height:min(340px,30vh);object-fit:contain}
.choices.figs{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:540px){.choices.figs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.choice.fig{flex-direction:column;align-items:stretch;gap:8px;min-height:0;padding:8px}
.choice.fig .key{width:26px;height:26px;font-size:14px;border-radius:8px}
.choice.fig img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:6px;border-radius:10px;background:var(--cream-50)}
.choice.fig.is-pick{border-color:var(--champagne);box-shadow:0 0 0 2px var(--champagne),0 4px 0 rgba(1,7,14,.55)}
.choice.fig.is-pick .key{background:var(--champagne);color:var(--ink-900)}
.t-card .t-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:8px}
.t-card .t-big b{font-family:var(--f-poster);font-size:44px;line-height:1;color:var(--champagne)}
.t-card .t-big span{font-size:13.5px;color:var(--text-3)}
.t-gauge{position:relative;height:8px;margin-top:8px;border-radius:99px;background:rgba(183,198,211,.15)}
.t-gauge i{display:block;height:100%;border-radius:99px;background:var(--ok)}
.t-gauge i.over{background:var(--champagne)}
.t-gauge em{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;border-radius:2px;background:var(--cream-200)}
.t-slow{margin-top:16px}
.t-slow .chips{margin-top:8px}
.t-badge{flex:0 0 auto;padding:1px 9px;border-radius:var(--r-pill);font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-3);background:rgba(183,198,211,.1)}
.t-badge.over{color:var(--champagne);background:var(--champagne-soft)}
.review .q-fig{max-width:460px;margin-top:10px}
.r-figs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0;max-width:460px}
.r-figs figure{margin:0;text-align:center;font-size:12px;color:var(--text-3)}
.r-figs img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:3px;border-radius:8px;background:var(--cream-50)}
.r-figs .is-right img{outline:2.5px solid var(--ok);outline-offset:1px}
.r-figs .is-wrong img{outline:2.5px solid var(--bad);outline-offset:1px}
/* TGAT2 Error Log: สาเหตุ "ใช้เวลาเกิน 45 วินาที" กับดักที่จดจากคลิป และหน้าต่างจดกับดัก */
.errcat.t2-time{color:var(--champagne);border-color:rgba(228,207,158,.4);background:var(--champagne-soft)}
.e-cat .errcat+.errcat{margin-left:-2px}
.tn-list{margin-top:22px}
.tn-list h2{font-size:20px}
.tn-card .e-foot{gap:8px}
.tn-causes{border:0;margin:0;padding:0;display:grid;gap:8px}
.tn-causes legend{margin-bottom:8px}
.tn-cause{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-m);border:1.5px solid var(--line-2);cursor:pointer;background:rgba(8,40,71,.55)}
.tn-cause input{margin-top:4px;accent-color:var(--champagne)}
.tn-cause span{display:grid;gap:2px}
.tn-cause b{font-size:15px;color:var(--cream-100)}
.tn-cause small{font-size:12.5px;line-height:1.5;color:var(--text-3)}
.tn-cause:has(input:checked){border-color:var(--champagne);background:var(--champagne-soft)}
.err .q-fig{max-width:460px}
/* TGAT2: แจ้งโจทย์ผิด (ปุ่มเล็กใต้ตัวเลือกและในเฉลย) */
.q-report{margin-top:16px;display:flex;justify-content:flex-end}
.q-report .link-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3)}
.q-report .link-btn:hover{color:var(--champagne)}
.q-report .i{width:15px;height:15px}
/* ═══ TGAT2 หน้าคอร์ส (งาน O11): กรมท่า กรอบทองครีม ตัวละครเพนนี คั่นคั่น หมึก ═══ */
.t2-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.t2-hero .big{background:linear-gradient(180deg,var(--cream-50) 55%,var(--champagne) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.t2-trio{position:relative;display:flex;align-items:flex-end;margin:0 0 -6px auto;padding:0 8px}
.t2-trio::before{content:"";position:absolute;inset:18% -6% -8%;border-radius:50%;background:radial-gradient(closest-side,rgba(228,207,158,.22),transparent);pointer-events:none}
.t2-mascot{position:relative;display:block;line-height:0}
.t2-mascot.m0{margin-right:-22px;transform:rotate(-6deg)}
.t2-mascot.m2{margin-left:-22px;transform:rotate(6deg)}
.t2-mascot.m1{z-index:1}
@media (max-width:640px){.t2-trio{margin:6px auto 0}.t2-mascot .mascot{width:86px;height:86px}.t2-mascot.m1 .mascot{width:108px;height:108px}}
.t2-pace{display:flex;align-items:center;gap:16px;margin-top:22px;padding:14px 18px;border-radius:var(--r-l);
  border:1px solid rgba(228,207,158,.38);background:linear-gradient(120deg,rgba(228,207,158,.13),rgba(6,31,58,.55) 55%)}
.t2-pace b{display:block;font-family:var(--f-poster);font-weight:400;font-size:22px;letter-spacing:.02em;color:var(--cream-50)}
.t2-pace span{display:block;font-size:13.5px;color:var(--text-2);line-height:1.55;margin-top:2px}
.t2-dial{position:relative;flex:0 0 auto;width:58px;height:58px}
.t2-dial svg{width:100%;height:100%;fill:none;stroke:rgba(228,207,158,.35);stroke-width:2.5;stroke-linecap:round}
.t2-dial svg .arc{stroke:var(--champagne);stroke-width:4}
.t2-dial svg path:not(.arc){stroke:var(--cream-100)}
.t2-dial b{position:absolute;right:-6px;bottom:-4px;font-family:var(--f-poster);font-weight:400;font-size:15px;padding:1px 6px;border-radius:99px;
  background:var(--champagne);color:var(--ink-900)}
.t2-secs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
@media (max-width:880px){.t2-secs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.t2-mitti{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 18px;border-radius:var(--r-l);color:var(--text);
  border:1px solid rgba(228,207,158,.4);background:radial-gradient(120% 140% at 0% 0%,rgba(228,192,99,.16),transparent 60%),var(--ink-850);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.t2-mitti:hover{border-color:rgba(228,207,158,.7);transform:translateY(-1px)}
.t2-mitti .mitti-cube{width:46px;height:46px;flex:0 0 auto;filter:drop-shadow(0 6px 12px rgba(228,192,99,.25))}
.t2-mitti b{display:block;font-size:15.5px}
.t2-mitti small{display:block;font-size:12.5px;color:var(--text-3);line-height:1.5}
.t2-mitti>.i{width:18px;height:18px;color:var(--text-4);flex:0 0 auto}
.tool .art .mitti-cube{width:40px;height:40px}
.t2-sec{position:relative;padding:16px;border-radius:var(--r-m);border:1px solid var(--line-2);background:rgba(2,14,27,.45);overflow:hidden}
.t2-sec::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(228,207,158,.18)}
.t2-no{font-family:var(--f-poster);font-size:26px;line-height:1;color:var(--champagne)}
.t2-glyph{width:34px;height:34px;color:var(--champagne);opacity:.9}
.t2-sec h3{margin-top:10px;font-size:19px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.t2-sec h3 small{font-family:var(--f-poster);font-weight:400;font-size:11.5px;letter-spacing:.12em;color:var(--text-3)}
.t2-types{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.t2-types span{font-size:11.5px;padding:2px 8px;border-radius:99px;border:1px solid var(--line-2);color:var(--text-2)}
.t2-buy .t2-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:12px}
.t2-buy .t2-price b{font-family:var(--f-poster);font-weight:400;font-size:40px;line-height:1;color:var(--champagne)}
.t2-buy .t2-price s{font-size:16px;color:var(--text-3)}
.t2-buy .t2-price span{flex-basis:100%;font-size:12.5px;color:var(--text-3)}
.t2-incl{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.t2-incl li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--text-2)}
.t2-incl .i{flex:0 0 auto;width:18px;height:18px;margin-top:2px;color:var(--champagne)}
.t2-incl b{color:var(--cream-100)}
.t2-block{margin-top:22px}
.t2-eps{display:grid;gap:8px;margin-top:12px}
.t2-ep{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-m);border:1px solid var(--line-2);background:rgba(8,40,71,.5);
  color:inherit;text-decoration:none;transition:border-color .15s}
a.t2-ep:hover{border-color:rgba(228,207,158,.5)}
.t2-ep.soon{opacity:.62}
.t2-epn{flex:0 0 auto;min-width:52px;font-family:var(--f-poster);font-size:15px;letter-spacing:.03em;color:var(--champagne)}
.t2-ep b{display:block;font-size:15px;font-weight:600;color:var(--cream-100)}
.t2-ep small{display:block;font-size:12.5px;color:var(--text-3);margin-top:1px}
.t2-lock .i{width:16px;height:16px;color:var(--text-3)}
.t2-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
@media (max-width:540px){.t2-parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.t2-parts div{padding:10px 12px;border-radius:12px;border:1px solid rgba(228,207,158,.28);background:rgba(228,207,158,.06)}
.t2-parts span{display:block;font-family:var(--f-poster);font-size:13px;color:var(--champagne)}
.t2-parts b{display:block;font-size:15px;margin-top:2px}
.t2-parts small{font-size:12px;color:var(--text-3)}
.t2-runs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.mins{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.mins button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;border-radius:var(--r-m);border:1px solid var(--line);
  background:rgba(2,14,27,.45);color:var(--text);font-weight:700;font-size:18px;cursor:pointer}
.mins button small{font-size:11px;font-weight:500;color:var(--text-3)}
.mins [aria-checked="true"]{background:var(--cream-100);color:var(--ink-900);border-color:var(--cream-100)}
.mins [aria-checked="true"] small{color:var(--ink-900)}
.t2-rules{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.t2-rules li{display:flex;gap:12px;font-size:14px;line-height:1.55;color:var(--text-2)}
.t2-rules .i{flex:0 0 auto;width:20px;height:20px;margin-top:1px;color:var(--champagne)}
.t2-rules b{color:var(--cream-100)}
/* TGAT2 หน้าตอน: คลิปล้วน + จดกับดักลง Error Log */
.t2-ep-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:18px}
@media (max-width:880px){.t2-ep-hero{grid-template-columns:1fr}}
.t2-ep-head .ep-no small{font-size:.42em;color:var(--text-3);margin-left:4px}
.t2-ep-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.t2-diff{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--r-pill);font-size:13px;font-weight:700;
  border:1px solid var(--line-2);color:var(--text-2)}
.t2-diff.d1{color:var(--ok);border-color:rgba(90,211,154,.4)}
.t2-diff.d2{color:var(--champagne);border-color:rgba(228,207,158,.45)}
.t2-diff.d3{color:#F4A38C;border-color:rgba(244,163,140,.45)}
.t2-ep-lock{text-align:center;padding:28px 22px}
.t2-ep-lock>.i{width:30px;height:30px;color:var(--champagne)}
.t2-ep-lock h3{margin-top:10px}
.t2-after{margin-top:34px;padding:22px;border-radius:var(--r-l);border:1px solid rgba(228,207,158,.3);
  background:linear-gradient(140deg,rgba(228,207,158,.1),rgba(2,14,27,.5) 60%)}
.t2-after h2{font-size:clamp(20px,2.6vw,24px)}
.t2-steps{list-style:none;counter-reset:t2s;margin:14px 0 0;padding:0;display:grid;gap:12px}
.t2-steps li{counter-increment:t2s;display:grid;grid-template-columns:34px 1fr;column-gap:12px}
.t2-steps li::before{content:counter(t2s);grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-poster);font-size:17px;background:var(--champagne);color:var(--ink-900)}
.t2-steps b{font-size:16px;color:var(--cream-100)}
.t2-steps span{font-size:14px;line-height:1.6;color:var(--text-2)}
.t2-mynotes{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.t2-note{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:14px;color:var(--text-2)}
.t2-note.done{opacity:.55}

/* โคมไฟ (ไอเดียอันดับ 2) lamp-art.js · ยอดรวมบนกระดาน + โคมรายคนในอันดับเพื่อนสองฝ่าย */
.lamp{display:inline-block;vertical-align:-4px;flex:none}
.lamp.on{filter:drop-shadow(0 0 6px rgba(255,227,166,.55))}
.sr-lamps,.fr-lamp-sum{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.fr-lamp{display:inline-flex;margin-left:6px;vertical-align:middle}

/* แถบสลับกระดาน 4 ปุ่ม (เวลาอ่าน · ห้องสอบ · สามบ้าน · ลีก) ให้พอดีจอมือถือ */
@media (max-width:400px){nav.seg[aria-label="ประเภทอันดับ"] a{padding-left:10px;padding-right:10px;font-size:13px}}

/* ───── TGAT3: ป้ายรูปแบบคะแนน · หลายคำตอบ · ข้อคู่ · บันไดคะแนน ───── */
.t3-badge{display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.01em;
  border:1px solid var(--line-2);color:var(--cream-100);background:rgba(183,198,211,.08)}
.t3-badge.t3b-multi{border-color:rgba(116,187,255,.5);color:#BFE0FF}
.t3-badge.t3b-pair{border-color:rgba(228,207,158,.55);color:var(--champagne)}
.t3-badge.t3b-partial{border-color:rgba(99,214,159,.5);color:#BDF1D6}
.choice.multi .box{flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line-3);display:grid;place-items:center;color:transparent}
.choice.multi .box svg{width:16px;height:16px}
.choice.multi.is-pick{border-color:var(--cream-200);background:rgba(228,207,158,.08)}
.choice.multi.is-pick .box{background:var(--champagne);border-color:var(--champagne);color:#0b1f3a}
.choice.multi.is-right .box{background:var(--ok);border-color:var(--ok);color:#03251a}
.choice.multi.is-wrong .box{background:var(--bad);border-color:var(--bad);color:#2a0606}
.choice.is-miss{border-color:var(--ok);border-style:dashed;opacity:.9}
.choice.is-miss .key{color:var(--ok)}
.t3-hint{margin-top:10px}
.choice .t3-sc,.t3-why .t3-sc{flex:0 0 auto;margin-left:auto;padding:1px 8px;border-radius:8px;font-family:var(--f-poster);font-size:14px;
  background:rgba(183,198,211,.12);color:var(--cream-100)}
.choice.is-right .t3-sc{background:var(--ok);color:#03251a}
.t3-why .t3-sc{margin-left:0;font-family:inherit;font-size:12px;font-weight:700}
.t3-why .t3-sc.yes{background:rgba(90,211,154,.2);color:var(--ok)}
.t3-why{display:grid;gap:8px;margin-top:8px}
.t3-why .dl{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;padding:8px 10px;border-radius:12px;background:rgba(1,7,14,.25);font-size:15px;line-height:1.6}
.t3-why .dl > b{flex:0 0 auto;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(183,198,211,.12);font-size:13px}
.t3-why .dl.is-ok{border:1px solid rgba(90,211,154,.4)}
.t3-why .dl.is-ok > b{background:var(--ok);color:#03251a}
.t3-why .dl > span:last-child{flex:1 1 220px}
.t3-pair{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:10px 12px;border-radius:12px;border:1px dashed rgba(228,207,158,.45);
  color:var(--champagne);font-size:14.5px;line-height:1.55}
.t3-pair svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px}
.t3-prev{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(1,7,14,.3);border-left:3px solid var(--champagne-2);font-size:15px;line-height:1.6}
.fb.mid{border-color:rgba(255,178,94,.5)} .fb.mid .fb-head{color:#FFC98A}
.qz-bars i.mid{background:#FFB25E}

/* ───── TGAT3 หน้า /tgat3 ───── */
.t3-rules{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.t3-rules li{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:1.5;color:var(--text-2)}
.t3-rules .t3-badge{margin-left:0;flex:0 0 auto}
.t3-test-row{border-style:dashed}
.t3-test-row .t2-epn svg{width:18px;height:18px}
.t3-set h3{font-size:clamp(18px,2.2vw,22px)}

/* ───────────── หน้าแรก: ฉากเปิดสมุด (คนที่ยังไม่ล็อกอิน · docs/scroll-intro-plan.md ขั้น 3) ─────────────
   ไม่มี .pin = เรียงลงมาเฉย ๆ (ลดการเคลื่อนไหว / จอเตี้ย / home-intro.js โหลดไม่ได้)
   มี .pin = ปักฉากไว้ระหว่างเลื่อน home-intro.js ขยับปก การ์ดคลิป หมึก และตัวเลขตาม % ที่เลื่อน (แตะแค่ transform/opacity) */
.hi{position:relative;--hi-cw:min(42vw,200px);
  --hi-vh:calc(100vh - var(--header-h) - var(--safe-t) - var(--tabs-h) - var(--safe-b))}
@supports (height:100svh){.hi{--hi-vh:calc(100svh - var(--header-h) - var(--safe-t) - var(--tabs-h) - var(--safe-b))}}
@media (min-width:880px){
  .hi{--hi-cw:220px;--hi-vh:calc(100vh - var(--header-h) - var(--safe-t))}
  @supports (height:100svh){.hi{--hi-vh:calc(100svh - var(--header-h) - var(--safe-t))}}
}
.hi-stage{position:relative;padding:76px var(--gutter) 0}
.hi-book{position:relative;max-width:440px;margin:0 auto;display:flex;flex-direction:column}
.hi-pages,.hi-dropper,.hi-drop,.hi-sparks,.hi-hint{display:none}
.hi .eyebrow .th{font-family:var(--f-thai);font-weight:700;letter-spacing:0;font-size:13.5px}

/* ปกสมุด: กรมท่า กรอบทองสองชั้น */
.hi-cover{order:-1;position:relative;z-index:3;border-radius:6px 18px 18px 6px;padding:34px 24px 30px 36px;display:flex;flex-direction:column;
  background:radial-gradient(90% 60% at 80% 0%,rgba(228,207,158,.12),transparent 60%),linear-gradient(160deg,var(--ink-800),var(--ink-850) 55%,var(--ink-950));
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 80px rgba(0,0,0,.5)}
.hi-cover::before{content:"";position:absolute;inset:10px 10px 10px 20px;border:1px solid rgba(228,207,158,.6);border-radius:10px;pointer-events:none}
.hi-cover::after{content:"";position:absolute;inset:15px 15px 15px 25px;border:1px solid rgba(228,207,158,.22);border-radius:7px;pointer-events:none}
.hi-spine{position:absolute;left:0;top:0;bottom:0;width:12px;border-radius:6px 0 0 6px;background:linear-gradient(90deg,var(--ink-950),var(--ink-750));box-shadow:1px 0 0 rgba(228,207,158,.45)}
.hi-corner{position:absolute;width:12px;height:12px;background:var(--champagne);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.hi-corner.c1{top:4px;left:14px}.hi-corner.c2{top:4px;right:4px}.hi-corner.c3{bottom:4px;left:14px}.hi-corner.c4{bottom:4px;right:4px}
.hi-cover>*{position:relative}
.hi-cover .cd{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 11px;border-radius:var(--r-pill);
  border:1px solid rgba(228,207,158,.35);background:rgba(2,14,27,.5);font-size:13px;font-weight:600;color:var(--mist-100)}
.hi-cover .cd b{font-family:var(--f-poster);font-weight:400;font-size:17px;letter-spacing:.03em;color:var(--champagne)}
.hi-cover h1{font-size:clamp(30px,8.4vw,44px);line-height:1.18;margin:14px 0 0;text-wrap:balance}
.hi-cover .lede{margin-top:12px;color:var(--text-2);font-size:15.5px}
.hi-cover .subj{margin-top:14px}
.hi-cover .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:20px}
.hi-hint{margin-top:auto;padding-top:14px;align-items:center;gap:8px;color:var(--champagne);font-size:13px;font-weight:600}
.hi-hint svg{width:16px;height:16px;animation:hiNudge 1.6s ease-in-out infinite}
@keyframes hiNudge{50%{transform:translateY(4px)}}
.hi-peek{position:absolute;right:26px;bottom:calc(100% - 22px);width:92px;z-index:4;pointer-events:none}
[data-hi-char] svg{width:100%;height:auto;display:block}

/* การ์ดคลิปทรงที่คั่นหนังสือ */
.hi-fan{display:flex;justify-content:center;gap:10px;margin:28px auto 0;width:100%;max-width:520px}
.hi-fan .hi-bm{flex:1;min-width:0}
.hi-frame{position:relative;aspect-ratio:9/16;border-radius:18px;padding:5px;
  background:linear-gradient(150deg,#F6EBCF,#C9AE73 40%,#EAD8AE 70%,#B8975C);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.hi-frame video{display:block;width:100%;height:100%;object-fit:cover;border-radius:13px;background:var(--cream-200)}
.hi-who{position:absolute;left:12px;top:12px;z-index:1;font-size:10px;font-weight:800;line-height:1.5;color:var(--cream-100);padding:0 7px;border-radius:6px;
  background:rgba(2,14,27,.6);border:1px solid rgba(228,207,158,.4)}
.hi-prog{position:absolute;left:14px;right:14px;bottom:12px;height:3px;border-radius:2px;background:rgba(3,24,45,.18);overflow:hidden}
.hi-prog::after{content:"";position:absolute;inset:0;background:var(--ink-700);transform-origin:0 50%;transform:scaleX(var(--t,0))}
.hi-tail{display:block;width:62%;margin:-2px auto 0;height:40px;padding-top:7px;text-align:center;font-size:13px;font-weight:700;line-height:1.5;color:var(--ink-900);
  background:linear-gradient(180deg,#EAD8AE,#C9AE73);clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%)}
.hi-tail b{font-family:var(--f-poster);font-weight:400;font-size:16px;letter-spacing:.02em;margin-right:3px}
.hi-fan .hi-tail{font-size:11px}.hi-fan .hi-tail b{font-size:13px}

/* หมึกซึมเต็มจอ + ตัวเลขจริง */
.hi-ink{position:relative;margin:36px calc(var(--gutter) * -1) 0;padding:56px var(--gutter) 120px;display:grid;place-items:center;text-align:center;overflow:hidden;
  background:radial-gradient(70% 55% at 50% 45%,rgba(76,154,214,.22),transparent 70%),radial-gradient(40% 30% at 50% 50%,rgba(228,207,158,.08),transparent 70%),var(--ink-950)}
.hi-stat{position:relative;z-index:1}
.hi-num{display:block;font-family:var(--f-poster);font-weight:400;font-size:clamp(96px,30vw,200px);line-height:.95;letter-spacing:.01em;font-variant-numeric:tabular-nums;margin-top:10px}
.hi-what{margin-top:10px;font-size:clamp(17px,4.6vw,22px);font-weight:700}
.hi-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.hi-pills span{font-size:13px;font-weight:600;color:var(--mist-100);padding:6px 12px;border-radius:var(--r-pill);border:1px solid rgba(228,207,158,.3);background:rgba(3,24,45,.6)}
.hi-pills b{font-family:var(--f-poster);font-weight:400;color:var(--champagne);letter-spacing:.03em;margin-right:4px}
.hi-src{margin-top:14px;font-size:11.5px;color:var(--text-3)}
.hi-cheer{position:absolute;bottom:-4px;width:min(22vw,110px);z-index:0;pointer-events:none}
.hi-cheer.l{left:2vw}.hi-cheer.r{right:2vw}
.hi-try{padding-top:36px}
.hi-try .try{max-width:460px;margin:0 auto}

/* ── ปักฉากไว้ระหว่างเลื่อน ── */
.hi.pin{height:calc(var(--hi-vh) * 3.4)}
.hi.pin .hi-stage{position:sticky;top:calc(var(--header-h) + var(--safe-t));height:var(--hi-vh);overflow:hidden;display:grid;place-items:center;padding:0;
  background:radial-gradient(60% 45% at 50% 38%,rgba(228,207,158,.10),transparent 70%),radial-gradient(80% 60% at 50% 110%,rgba(76,154,214,.10),transparent 70%),var(--bg)}
.hi.pin .hi-sparks{display:block;position:absolute;inset:0;pointer-events:none}
.hi-sparks i{position:absolute;width:10px;height:10px;background:var(--champagne);opacity:.35;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:hiTwinkle 3.6s ease-in-out infinite}
@keyframes hiTwinkle{50%{opacity:.08;transform:scale(.6)}}
/* มุมมอง 3 มิติอยู่ที่ตัวสมุดเท่านั้น (ไม่ใช้ preserve-3d) Safari บน iPhone จึงเรียงชั้นตาม z-index ปกติ ไม่สลับการ์ดกับหน้ากระดาษจนกะพริบ */
.hi.pin .hi-book{display:block;width:min(calc(100vw - 32px),440px);max-width:none;height:min(calc(var(--hi-vh) - 120px),580px);margin:44px 0 0;perspective:1400px}
.hi.pin .hi-pages{display:block;position:absolute;inset:0;border-radius:6px 18px 18px 6px;overflow:hidden;
  background:repeating-linear-gradient(to bottom,transparent 0 33px,rgba(13,54,96,.09) 33px 34px),linear-gradient(90deg,#E9E0C8,#FBF8F1 9%,#FEFCF8);
  box-shadow:5px 5px 0 -1px #E8E2D4,10px 10px 0 -2px #D6CEBB,0 34px 90px rgba(0,0,0,.55)}
.hi-pages::before{content:"";position:absolute;top:0;bottom:0;left:52px;width:1px;background:rgba(239,109,101,.35)}
.hi-ch{position:absolute;left:68px;top:26px;margin:0;font-family:var(--f-serif);font-weight:700;color:var(--ink-700);font-size:15px;line-height:1.4}
.hi-ch small{display:block;font-family:var(--f-thai);font-weight:600;color:var(--ink-600);font-size:13px;opacity:.75}
.hi-reader{position:absolute;left:4px;bottom:-6px;width:110px}
.hi.pin .hi-cover{position:absolute;inset:0;transform-origin:0 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;overflow:hidden}
.hi.pin .hi-hint{display:flex}
.hi.pin .hi-fan{position:absolute;inset:0;z-index:2;display:block;margin:0;max-width:none;pointer-events:none}
.hi.pin .hi-fan .hi-bm{position:absolute;left:50%;top:50%;width:var(--hi-cw);transform:translate(-50%,-50%);will-change:transform}
.hi.pin .hi-fan .hi-bm:nth-child(2){z-index:2}
.hi.pin .hi-fan .hi-tail{font-size:13px}.hi.pin .hi-fan .hi-tail b{font-size:16px}
.hi.pin .hi-dropper{display:block;position:absolute;left:50%;top:10px;width:96px;z-index:6;transform:translate(-50%,-150%);pointer-events:none}
.hi.pin .hi-drop{display:block;position:absolute;left:50%;top:96px;width:18px;height:24px;margin-left:-9px;z-index:6;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 35% 60%,#8CC4F0,#2D6FB0 55%,var(--ink-700));clip-path:polygon(50% 0,100% 62%,92% 88%,50% 100%,8% 88%,0 62%)}
.hi.pin .hi-ink{position:absolute;inset:0;z-index:5;margin:0;padding:110px 20px 40px;visibility:hidden;background:none}
/* หมึกซึม = วงกลมที่ขยายด้วย transform (ไม่วาดใหม่ทั้งจอทุกเฟรมเหมือน clip-path) ขนาด/ตำแหน่งตั้งจาก home-intro.js */
.hi-blot{display:none}
.hi.pin .hi-blot{display:block;position:absolute;left:50%;top:var(--hi-dy,40%);width:var(--hi-d,200vmax);height:var(--hi-d,200vmax);
  margin:calc(var(--hi-d,200vmax) / -2) 0 0 calc(var(--hi-d,200vmax) / -2);border-radius:50%;transform:scale(0);will-change:transform;
  background:radial-gradient(closest-side,rgba(76,154,214,.16),transparent 55%),var(--ink-950)}
.hi.pin .hi-cheer{z-index:1}
/* ทองวิ่งบนตัวหนังสือใหญ่ต้องวาดใหม่ตลอด ในฉากที่ขยับตามการเลื่อนจึงหยุดไว้ */
.hi .gold-text{animation:none;background-position:30% 0}
/* ชิ้นที่ขยับทุกเฟรมแยกเป็นเลเยอร์ไว้ล่วงหน้า (iPhone ไม่ต้องวาดใหม่ระหว่างเลื่อน) */
.hi.pin .hi-pages,.hi.pin .hi-peek,.hi.pin .hi-dropper,.hi.pin .hi-drop,.hi.pin .hi-stat,.hi.pin .hi-cheer{will-change:transform,opacity}
.hi.pin .hi-cheer{width:min(26vw,130px)}
/* จอไม่สูงมาก: ซ่อนป้ายวิชาบนปก ให้หัวข้อกับปุ่มพอดีปก */
@media (max-height:760px){.hi.pin .hi-cover .subj{display:none}.hi.pin .hi-cover h1{font-size:clamp(28px,7.6vw,40px)}}

/* ───────────── หน้าแรก: แถบคลิปยอดฮิต (คนที่ยังไม่ล็อกอิน · docs/scroll-intro-plan.md ขั้น 4) ─────────────
   กรอบคลิปใช้ .hi-frame/.hi-tail ชุดเดียวกับการ์ดในฉากเปิด · มือถือปัดซ้ายขวา จอคอมเรียงแถว · การเล่นอยู่ใน home-intro.js bindRail */
.hv{scroll-margin-top:calc(var(--header-h) + var(--safe-t))}
.hv-rail{display:flex;gap:14px;margin:6px calc(var(--gutter) * -1) 0;padding:6px var(--gutter) 10px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-left:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.hv-rail::-webkit-scrollbar{display:none}
.hv-card{flex:0 0 min(56vw,230px);scroll-snap-align:center;display:flex;flex-direction:column;margin:0}
@media (min-width:900px){
  .hv-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;overflow:visible;margin:6px 0 0;padding:6px 0 10px}
  .hv-card{flex:auto}
}
@media (min-width:1100px){
  .hv-rail{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  .hv-act{gap:6px;flex-wrap:nowrap}.hv-act .btn{padding:0 10px;font-size:13px}.hv-act .pl{display:none}.hv-act .btn-ghost{width:38px;padding:0}
}
.hv-card .hi-frame{cursor:pointer;transition:box-shadow .3s}
.hv-card .hi-frame:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
.hv-card.sound .hi-frame{box-shadow:0 0 0 3px rgba(228,207,158,.35),0 18px 44px rgba(0,0,0,.5)}
.hv-snd{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:1;display:flex;align-items:center;gap:6px;white-space:nowrap;pointer-events:none;
  font-size:12px;font-weight:700;line-height:1.5;padding:5px 11px;border-radius:var(--r-pill);background:rgba(2,14,27,.72);color:var(--cream-100);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hv-snd svg{width:15px;height:15px}
.hv-snd .off,.hv-card.sound .hv-snd .on{display:inline-flex;align-items:center;gap:6px}
.hv-snd .on,.hv-card.sound .hv-snd .off{display:none}
.hv-plat{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:12px;color:var(--text-3)}
.hv-pf{font-size:10.5px;font-weight:800;line-height:1.5;padding:0 6px;border-radius:5px;color:var(--champagne);background:var(--champagne-soft);border:1px solid rgba(228,207,158,.35)}
.hv-card h3{font-size:15.5px;line-height:1.4;margin:4px 0 0;text-wrap:balance}
.hv-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.hv-act .btn{flex:1}.hv-act .btn-ghost{flex:0 0 auto}
.hv-out svg{transform:rotate(-45deg)}
.hv-note{margin:12px 0 0;font-size:12px;color:var(--text-3)}