/* ═══════════════════════════════════════════════════════════════════
   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:var(--mist-400);
  --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}
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}
@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}

/* ───────────── ฟอร์ม ───────────── */
.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} }

/* แถบความคืบหน้าวันนี้ (ล็อกอินแล้ว) */
.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}

/* ───────────── หน้าคอร์ส: หัว ───────────── */
.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-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}
.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;display:flex;gap:5px}
.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}

/* ───────────── โปรไฟล์ ───────────── */
.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:#fff}
.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}