/* ============================================================
   WANNA TRADE TCG — Design System v2 "Inkwell Premium"
   บทเรียนที่นำมาใช้:
   - TAG Grading  → ใบรับรองเกรดพรีเมียม (score 1000, sub-grades, gauge)
   - inkable.shop → สภาพการ์ด NM/LP/MP/HP + โทนคลีน น่าเชื่อถือ
   - Companion    → การ์ด Foil มีประกายเลื่อนไหว (shimmer)
   ============================================================ */

:root {
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --radius-card: 16px;   /* ขอบการ์ด/รูป (อิง cas-pace ~ มนนุ่ม) */
  --maxw: 1560px;
  --trans: .25s cubic-bezier(.4,0,.2,1);
  /* เคยลองใส่ฟอนต์สำรอง SarabunFallback ที่ปรับ metric ให้ตรง Sarabun (size-adjust/ascent-override)
     วัดแล้ว CLS ไม่ลดเลยสักทศนิยม (0.0948/0.0216 เท่าเดิมเป๊ะทั้ง 3 รอบ) แถมทำให้ข้อความละติน
     กว้างคลาด 5-12% ถอนออก — ตัวการจริงคือรูปที่ไม่ได้บอกขนาด ไม่ใช่ฟอนต์ */
  --font: "Sarabun", Tahoma, "Segoe UI", system-ui, sans-serif;
  --display: "Cinzel", "Sarabun", serif;

  /* foil gradient (ใช้กับ text ทอง + การ์ด foil) */
  --foil: linear-gradient(110deg,#f7e4a3 0%,#caa14a 28%,#fff3c9 50%,#caa14a 72%,#f7e4a3 100%);

  --brand:#3aa9f0;   /* สีฟ้าแบรนด์ WANNA TRADE TCG */
  --accent:#3aa9f0;  /* ใช้กับ BETA badge / toast */

  /* สีหมึก 6 — คงที่ทุกธีม */
  --ink-amber:#e7a92b; --ink-amethyst:#9b5fe0; --ink-emerald:#23ab6c;
  --ink-ruby:#e0463f; --ink-sapphire:#2f86e0; --ink-steel:#8b97a7;
}

/* ---------- ธีม Mystic Dark (ค่าเริ่มต้น) ---------- */
[data-theme="dark"]{
  --bg:#0a0a0f; --bg-soft:#111118;
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.16);
  --text:#f4f1fb; --text-dim:#a89fc2; --text-mute:#8f87ab;
  --gold:#e8c15a; --teal:#37d3c6; --primary:#e8c15a; --primary-ink:#171122;
  --glow-a:rgba(120,90,200,.12); --glow-b:rgba(55,160,180,.07);
  --shadow:0 24px 60px -18px rgba(0,0,0,.7); --shadow-sm:0 10px 30px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}
/* ---------- ธีม Inkwell Light ---------- */
[data-theme="light"]{
  --bg:#f3f0fb; --bg-soft:#ffffff;
  --glass:rgba(255,255,255,.7); --glass-2:rgba(255,255,255,.9);
  --border:rgba(40,25,80,.10); --border-2:rgba(40,25,80,.18);
  --text:#1c1430; --text-dim:#5d5478; --text-mute:#6a6280;
  --gold:#b78a1e; --teal:#119e92; --primary:#6f3fd6; --primary-ink:#ffffff;
  --glow-a:rgba(155,95,224,.22); --glow-b:rgba(55,211,198,.16);
  --shadow:0 24px 55px -22px rgba(60,30,120,.35); --shadow-sm:0 12px 28px -14px rgba(60,30,120,.25);
  color-scheme:light;
}

/* ============================================================
   ชุดสี 15 แบบ (เลือกได้ที่ admin.html → ธีมเว็บ)
   ทุกธีมผ่านการตรวจ contrast WCAG: text/bg ≥7, dim ≥4.5, mute ≥3, ปุ่ม ≥4.5, gold ≥3
   token รูปทรง/เอฟเฟกต์ (--radius-*, --sheen-o, --lift, --icon-w) เผื่อไว้สำหรับชั้นถัดไป
   ============================================================ */
/* ขาว-เทา cas-pace (โทนต้นแบบแท้ น้ำเงิน #0761b2) */
[data-theme="caspace-gray"]{
  --bg:#ffffff; --bg-soft:#f2f3f5;
  --glass:rgba(255,255,255,.85); --glass-2:rgba(30,35,45,.05);
  --border:rgba(30,35,45,.12); --border-2:rgba(30,35,45,.20);
  --text:#1a1e24; --text-dim:#4c545e; --text-mute:#767e89;
  --gold:#8a6a2f; --teal:#4a7d8c; --primary:#0761b2; --primary-ink:#ffffff;
  --glow-a:rgba(0,0,0,0); --glow-b:rgba(0,0,0,0);
  --shadow:0 2px 10px rgba(25,30,40,.07); --shadow-sm:0 1px 2px rgba(25,30,40,.05);
  --radius-card:12px; --radius-btn:8px; --radius-chip:8px; --radius-pack:14px;
  --sheen-o:0; --holo-o:.5; --lift:-2px; --icon-w:1.6;
  color-scheme:light;
}
/* แกลเลอรีสว่าง */
[data-theme="gallery-light"]{
  --bg:#ffffff; --bg-soft:#f4f6f8;
  --glass:rgba(255,255,255,.82); --glass-2:rgba(16,38,64,.05);
  --border:rgba(18,32,54,.10); --border-2:rgba(18,32,54,.16);
  --text:#16202c; --text-dim:#4a5568; --text-mute:#75808f;
  --gold:#a3701c; --teal:#0f7a8a; --primary:#0a64b4; --primary-ink:#ffffff;
  --glow-a:rgba(10,100,180,.04); --glow-b:rgba(15,122,138,.02);
  --shadow:0 2px 12px rgba(20,30,55,.08),0 1px 3px rgba(20,30,55,.05); --shadow-sm:0 1px 2px rgba(20,30,55,.06);
  --radius-card:12px; --radius-btn:8px; --radius-chip:8px; --radius-pack:14px;
  --sheen-o:0; --holo-o:.5; --lift:-2px; --icon-w:1.6;
  color-scheme:light;
}
/* ฟ้าใส */
[data-theme="sky-breeze"]{
  --bg:#f6fafd; --bg-soft:#e9f2f9;
  --glass:rgba(255,255,255,.8); --glass-2:rgba(18,80,130,.06);
  --border:rgba(18,60,100,.12); --border-2:rgba(18,60,100,.20);
  --text:#142330; --text-dim:#44586a; --text-mute:#6d8093;
  --gold:#a3701c; --teal:#0f7a8a; --primary:#1273c2; --primary-ink:#ffffff;
  --glow-a:rgba(58,169,240,.08); --glow-b:rgba(18,115,194,.04);
  --shadow:0 4px 16px rgba(20,60,100,.10); --shadow-sm:0 1px 3px rgba(20,60,100,.07);
  --radius-card:12px; --radius-btn:8px; --radius-chip:8px; --radius-pack:14px;
  --sheen-o:0; --holo-o:.5; --lift:-2px; --icon-w:1.6;
  color-scheme:light;
}
/* มินต์สด */
[data-theme="mint-fresh"]{
  --bg:#f7faf8; --bg-soft:#ebf2ec;
  --glass:rgba(255,255,255,.8); --glass-2:rgba(20,80,50,.05);
  --border:rgba(20,60,40,.12); --border-2:rgba(20,60,40,.20);
  --text:#17231b; --text-dim:#47584c; --text-mute:#6f7f74;
  --gold:#8f6b14; --teal:#23ab6c; --primary:#1e7a4f; --primary-ink:#ffffff;
  --glow-a:rgba(35,171,108,.06); --glow-b:rgba(30,122,79,.03);
  --shadow:0 4px 16px rgba(20,60,40,.10); --shadow-sm:0 1px 3px rgba(20,60,40,.07);
  --radius-card:12px; --radius-btn:8px; --radius-chip:8px; --radius-pack:14px;
  --sheen-o:0; --holo-o:.5; --lift:-2px; --icon-w:1.6;
  color-scheme:light;
}
/* ซากุระ */
[data-theme="sakura"]{
  --bg:#fbf6f7; --bg-soft:#f6ebee;
  --glass:rgba(255,252,253,.8); --glass-2:rgba(140,60,80,.05);
  --border:rgba(120,50,70,.12); --border-2:rgba(120,50,70,.20);
  --text:#241a1e; --text-dim:#59484e; --text-mute:#7d6d73;
  --gold:#a3701c; --teal:#2a8f83; --primary:#b23a55; --primary-ink:#ffffff;
  --glow-a:rgba(178,58,85,.05); --glow-b:rgba(230,150,170,.05);
  --shadow:0 6px 18px rgba(120,50,70,.10); --shadow-sm:0 1px 3px rgba(120,50,70,.07);
  --radius-card:18px; --radius-btn:12px; --radius-chip:999px; --radius-pack:20px;
  --sheen-o:.45; --holo-o:.65; --lift:-3px; --icon-w:1.8;
  color-scheme:light;
}
/* หอศิลป์งาช้าง */
[data-theme="ivory-premium"]{
  --bg:#f7f2e8; --bg-soft:#efe7d6;
  --glass:rgba(255,252,245,.72); --glass-2:rgba(31,42,66,.05);
  --border:rgba(31,42,66,.12); --border-2:rgba(156,107,23,.28);
  --text:#1f2637; --text-dim:#4d5568; --text-mute:#7b7466;
  --gold:#9c6b17; --teal:#1877b8; --primary:#24406b; --primary-ink:#fdf9ef;
  --glow-a:rgba(156,107,23,.07); --glow-b:rgba(36,64,107,.05);
  --shadow:0 18px 40px -18px rgba(60,42,10,.18),0 2px 6px rgba(60,42,10,.06); --shadow-sm:0 2px 10px -2px rgba(60,42,10,.10);
  --radius-card:18px; --radius-btn:12px; --radius-chip:999px; --radius-pack:20px;
  --sheen-o:.45; --holo-o:.65; --lift:-3px; --icon-w:1.8;
  color-scheme:light;
}
/* โมโนเทา */
[data-theme="slate-mono"]{
  --bg:#f4f4f5; --bg-soft:#ffffff;
  --glass:rgba(255,255,255,.85); --glass-2:rgba(25,28,32,.05);
  --border:rgba(25,28,32,.12); --border-2:rgba(25,28,32,.22);
  --text:#1b1d20; --text-dim:#4b4f55; --text-mute:#73777d;
  --gold:#8a6a2f; --teal:#55606b; --primary:#26292e; --primary-ink:#ffffff;
  --glow-a:rgba(0,0,0,0); --glow-b:rgba(0,0,0,0);
  --shadow:0 2px 10px rgba(20,22,26,.08); --shadow-sm:0 1px 2px rgba(20,22,26,.06);
  --radius-card:12px; --radius-btn:8px; --radius-chip:8px; --radius-pack:14px;
  --sheen-o:0; --holo-o:.5; --lift:-2px; --icon-w:1.6;
  color-scheme:light;
}
/* มิดไนต์แกลเลอรี */
[data-theme="midnight-gallery"]{
  --bg:#0c1118; --bg-soft:#121824;
  --glass:rgba(255,255,255,.03); --glass-2:rgba(255,255,255,.055);
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.17);
  --text:#e9eef4; --text-dim:#a8b3c0; --text-mute:#7c8794;
  --gold:#d9b562; --teal:#4fb3c4; --primary:#3aa9f0; --primary-ink:#06263f;
  --glow-a:rgba(58,169,240,.04); --glow-b:rgba(58,169,240,.02);
  --shadow:0 10px 28px rgba(3,6,12,.45); --shadow-sm:0 2px 8px rgba(3,6,12,.32);
  --radius-card:16px; --radius-btn:12px; --radius-chip:999px; --radius-pack:18px;
  --sheen-o:1; --holo-o:1; --lift:-5px; --icon-w:2;
  color-scheme:dark;
}
/* ทะเลลึก */
[data-theme="deep-ocean"]{
  --bg:#081420; --bg-soft:#0d1c2c;
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.18);
  --text:#e8f0f6; --text-dim:#a5b8c8; --text-mute:#7d95a8;
  --gold:#d9b562; --teal:#37d3c6; --primary:#2f9de0; --primary-ink:#042038;
  --glow-a:rgba(55,211,198,.05); --glow-b:rgba(47,157,224,.04);
  --shadow:0 12px 30px rgba(2,8,16,.5); --shadow-sm:0 2px 8px rgba(2,8,16,.35);
  --radius-card:16px; --radius-btn:12px; --radius-chip:999px; --radius-pack:18px;
  --sheen-o:1; --holo-o:1; --lift:-5px; --icon-w:2;
  color-scheme:dark;
}
/* มรกตราตรี */
[data-theme="emerald-night"]{
  --bg:#0a1410; --bg-soft:#10241a;
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.18);
  --text:#e9f4ee; --text-dim:#a7c2b3; --text-mute:#7a9a89;
  --gold:#dcbf6b; --teal:#37d3a6; --primary:#35c184; --primary-ink:#04261a;
  --glow-a:rgba(53,193,132,.05); --glow-b:rgba(220,191,107,.03);
  --shadow:0 12px 30px rgba(2,10,6,.5); --shadow-sm:0 2px 8px rgba(2,10,6,.35);
  --radius-card:16px; --radius-btn:12px; --radius-chip:999px; --radius-pack:18px;
  --sheen-o:1; --holo-o:1; --lift:-5px; --icon-w:2;
  color-scheme:dark;
}
/* แดงนัวร์ */
[data-theme="crimson-noir"]{
  --bg:#120d0f; --bg-soft:#1c1417;
  --glass:rgba(255,255,255,.04); --glass-2:rgba(255,255,255,.065);
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.18);
  --text:#f4edef; --text-dim:#c0aab1; --text-mute:#927f86;
  --gold:#d9b562; --teal:#4fb3c4; --primary:#c93a4e; --primary-ink:#ffffff;
  --glow-a:rgba(201,58,78,.06); --glow-b:rgba(120,30,45,.05);
  --shadow:0 12px 30px rgba(10,4,6,.5); --shadow-sm:0 2px 8px rgba(10,4,6,.35);
  --radius-card:16px; --radius-btn:12px; --radius-chip:999px; --radius-pack:18px;
  --sheen-o:1; --holo-o:1; --lift:-5px; --icon-w:2;
  color-scheme:dark;
}
/* อเมทิสต์หลวง */
[data-theme="royal-amethyst"]{
  --bg:#120b1e; --bg-soft:#1b1230;
  --glass:rgba(255,255,255,.04); --glass-2:rgba(255,255,255,.065);
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.18);
  --text:#f1ecfa; --text-dim:#b7a8d6; --text-mute:#8b7cab;
  --gold:#e8c15a; --teal:#37d3c6; --primary:#a678f0; --primary-ink:#1d0a38;
  --glow-a:rgba(155,95,224,.10); --glow-b:rgba(232,193,90,.04);
  --shadow:0 14px 34px rgba(8,3,18,.55); --shadow-sm:0 2px 8px rgba(8,3,18,.4);
  --radius-card:16px; --radius-btn:12px; --radius-chip:999px; --radius-pack:18px;
  --sheen-o:1; --holo-o:1; --lift:-5px; --icon-w:2;
  color-scheme:dark;
}
/* ถ่านโมโน */
[data-theme="charcoal-mono"]{
  --bg:#131416; --bg-soft:#1b1d20;
  --glass:rgba(255,255,255,.04); --glass-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.11); --border-2:rgba(255,255,255,.19);
  --text:#ececee; --text-dim:#a9adb3; --text-mute:#7e838a;
  --gold:#c9b47a; --teal:#9aa3ad; --primary:#e6e8ea; --primary-ink:#17181a;
  --glow-a:rgba(0,0,0,0); --glow-b:rgba(0,0,0,0);
  --shadow:0 10px 26px rgba(0,0,0,.5); --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --radius-card:12px; --radius-btn:8px; --radius-chip:8px; --radius-pack:14px;
  --sheen-o:0; --holo-o:.5; --lift:-2px; --icon-w:1.6;
  color-scheme:dark;
}
/* ออโรรา */
[data-theme="aurora"]{
  --bg:#0a1518; --bg-soft:#102026;
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.18);
  --text:#e7f3f5; --text-dim:#a3c0c6; --text-mute:#74959d;
  --gold:#d9b562; --teal:#3fd0c9; --primary:#2fc4b2; --primary-ink:#04302a;
  --glow-a:rgba(63,208,201,.07); --glow-b:rgba(47,196,178,.04);
  --shadow:0 12px 30px rgba(2,10,12,.5); --shadow-sm:0 2px 8px rgba(2,10,12,.35);
  --radius-card:18px; --radius-btn:12px; --radius-chip:999px; --radius-pack:20px;
  --sheen-o:.45; --holo-o:.65; --lift:-3px; --icon-w:1.8;
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:clip}
body{
  font-family:var(--font); color:var(--text); line-height:1.6; min-height:100vh;
  background:
    radial-gradient(1100px 600px at 12% -8%, var(--glow-a), transparent 60%),
    radial-gradient(900px 500px at 95% 6%, var(--glow-b), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  transition:background .35s ease,color .25s ease;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- พื้นหลัง + ลูกเล่นที่แอดมินตั้งได้ (ธีมเทศกาล) ---------- */
.wt-bg-image{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; background-attachment:fixed;
}
/* 🔴 กฎนี้เคยทับ .modal-bg{position:fixed} (specificity 0,2,1 ชนะ 0,1,0)
   ทำให้กล่องตะกร้าไปโผล่ที่ก้นเอกสาร top ~43,800px = กดไอคอนตะกร้าแล้วไม่มีอะไรขึ้น
   ลูกค้าซื้อของไม่ได้เลยทุกอุปกรณ์ ทั้งที่ระบบตะกร้าข้างในทำงานถูกหมด
   → ยกเว้น element ที่ตั้ง position เองเป็น fixed ไว้แล้ว (โมดัล/ตะกร้า/toast) */
body > *:not(.wt-bg-image):not(.wt-fx):not(.modal-bg):not(.toast-wrap):not(.open-overlay){position:relative;z-index:1}
/* กันพลาดซ้ำ: บังคับ fixed ให้ชั้นซ้อนทับที่ต้องลอยเหนือทุกอย่างเสมอ */
body > .modal-bg{position:fixed;z-index:100}
body > .toast-wrap{position:fixed}
.wt-fx{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.wt-fx span{
  position:absolute; top:-8vh; line-height:1; opacity:.75;
  animation-name:wt-fall; animation-timing-function:linear; animation-iteration-count:infinite;
  will-change:transform;
}
@keyframes wt-fall{
  0%  {transform:translate3d(0,-10vh,0) rotate(0deg);   opacity:0}
  10% {opacity:.8}
  90% {opacity:.8}
  100%{transform:translate3d(var(--drift,0),110vh,0) rotate(360deg); opacity:0}
}
.wt-fx-sparkle span{animation-name:wt-twinkle;top:auto;bottom:auto}
@keyframes wt-twinkle{
  0%  {transform:translate3d(0,-10vh,0) scale(.7); opacity:0}
  50% {opacity:1; transform:translate3d(var(--drift,0),45vh,0) scale(1.15)}
  100%{transform:translate3d(var(--drift,0),105vh,0) scale(.7); opacity:0}
}
@media (prefers-reduced-motion:reduce){ .wt-fx{display:none} }

/* ---------- Scrollbar กลืนกับธีม ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-mute);border-width:2px}
::-webkit-scrollbar-corner{background:transparent}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.muted{color:var(--text-dim)}
.gold-text{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}

/* focus ring ให้คนใช้คีย์บอร์ดเห็นตำแหน่ง (ใช้ทุกหน้า) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* .searchbox — ใช้ในหน้า market (.mk-toolbar .searchbox) */
.searchbox{margin-left:auto;position:relative}
.searchbox input{width:200px;padding:11px 16px 11px 40px;border-radius:999px;border:1px solid var(--border);
  background:var(--glass);color:var(--text);font-family:var(--font);font-size:.92rem;transition:var(--trans)}
.searchbox input:focus:not(:focus-visible){outline:none;border-color:var(--gold);width:240px;background:var(--glass-2)}
.searchbox::before{content:"";position:absolute;left:15px;top:12px;width:16px;height:16px;opacity:.5;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M21 21l-4.3-4.3M11 19a8 8 0 100-16 8 8 0 000 16z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M21 21l-4.3-4.3M11 19a8 8 0 100-16 8 8 0 000 16z'/%3E%3C/svg%3E") center/contain no-repeat}

.icon-btn{width:44px;height:44px;border-radius:13px;border:1px solid var(--border);background:var(--glass);
  color:var(--text);cursor:pointer;font-size:1.1rem;display:grid;place-items:center;position:relative;transition:var(--trans)}
.icon-btn:hover{border-color:var(--gold);background:var(--glass-2);transform:translateY(-1px)}
.rank-badge{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--border-2);
  background:var(--glass);font-size:.85rem;font-weight:700}
.rank-dot{width:11px;height:11px;border-radius:50%;box-shadow:0 0 10px currentColor}

.btn{border:none;cursor:pointer;font-family:var(--font);font-weight:700;padding:11px 18px;border-radius:12px;
  font-size:.93rem;transition:var(--trans);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:0 10px 24px -10px rgba(242,104,27,.5)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-2px)}
.btn-ghost{background:var(--glass);color:var(--text);border:1px solid var(--border-2)}
.btn-ghost:hover{border-color:var(--primary);background:var(--glass-2)}

/* hero เก่า (.hero/.hero-copy/.hero-visual/.float-card/.eyebrow) ลบแล้ว — แทนด้วย .wt-hero */

/* ===================== SECTIONS ===================== */
section.block{margin:58px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:16px}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:1.7rem;letter-spacing:.4px;line-height:1.2}
.sec-head .sub{font-size:.9rem;font-weight:400;color:var(--text-dim);margin-top:4px;font-family:var(--font)}
.sec-head a{color:var(--gold);font-weight:700;font-size:.92rem;white-space:nowrap}

/* ===================== CARD GRID ===================== */
.grid{display:grid;gap:22px}
.grid.cols{grid-template-columns:repeat(auto-fill,minmax(225px,1fr))}
.grid.cozy{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:16px}

.card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;
  transition:var(--trans);cursor:pointer;display:flex;flex-direction:column;position:relative}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--border-2)}
.card .art{aspect-ratio:5/7;position:relative;overflow:hidden}
.art img,.float-card img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.card .art img{transition:transform .4s ease}
.card:hover .art img{transform:scale(1.05)}
.card .tags{position:absolute;top:10px;left:10px;display:flex;gap:5px;flex-wrap:wrap;z-index:3}
.card .corner{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:5px;align-items:flex-end;z-index:3}
.flag{font-size:.64rem;font-weight:800;padding:4px 9px;border-radius:999px;letter-spacing:.3px;-webkit-backdrop-filter:blur(4px)}
.flag.new{background:var(--ink-ruby);backdrop-filter:blur(4px)}
.flag.new{background:var(--ink-ruby);color:#fff}
.flag.graded{background:rgba(0,0,0,.55);color:var(--gold);border:1px solid var(--gold)}
.flag.badge-admin{background:var(--gold);color:#1a1408}   /* ป้ายที่แอดมินติดเอง (ขายดี/แนะนำ) */
.card .body{padding:13px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .name{font-weight:700;font-size:.86rem;line-height:1.3}
.card .name .nm-sub{display:block;font-weight:500;font-size:.78rem;color:var(--text-mute);margin-top:1px}
.card .set-line{font-size:.76rem;color:var(--text-mute)}
.card .meta-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.card .foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;padding-top:8px;gap:8px}
.card .price{font-weight:800;font-size:1.12rem;color:var(--text)}
.card .price small{font-size:.72rem;color:var(--text-mute);font-weight:500}
.card .stock{font-size:.72rem;color:var(--text-mute)}
.card .add{padding:8px 12px;font-size:.8rem;border-radius:10px;min-height:44px}   /* สูง 32px กดพลาดง่าย */

/* ---------- FOIL SHIMMER (จาก Companion app) ---------- */
.art.foil::after,.art.holo::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.4) 48%,transparent 64%);
  background-size:250% 250%;animation:shimmer 5s ease-in-out infinite}
.art.holo::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.28;
  background:linear-gradient(115deg,rgba(255,44,223,.7),rgba(54,208,255,.7),rgba(77,255,136,.7),rgba(255,229,61,.7),rgba(255,44,223,.7));
  background-size:300% 300%;animation:shimmer 7s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.art.foil::after,.art.holo::after,.art.holo::before,.pouch::after,.gpack-art::before{animation:none}}
@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* badges */
.chip{font-size:.66rem;font-weight:800;padding:4px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.2px}
/* ขาวบนพื้น Amber เหลืองได้แค่ 2.08 — ชิพสีหมึกมีทั้งเหลือง/เขียว/ฟ้าอ่อน ใช้ตัวเข้มปลอดภัยกว่า */
.chip.ink{color:#1a1208;font-weight:700;box-shadow:0 2px 8px -2px rgba(0,0,0,.5)}
.chip.rar{background:var(--glass-2);color:var(--text);border:1px solid var(--border-2)}
.chip.finish{background:transparent;border:1px dashed var(--border-2);color:var(--text-dim)}
/* condition badge (NM/LP/MP/HP จาก inkable) */
.cond{font-size:.66rem;font-weight:800;padding:4px 8px;border-radius:7px;letter-spacing:.4px}
.cond.NM{background:rgba(35,171,108,.18);color:#3fd089;border:1px solid rgba(35,171,108,.5)}
.cond.LP{background:rgba(231,169,43,.18);color:#f0c04a;border:1px solid rgba(231,169,43,.5)}
.cond.MP{background:rgba(224,110,63,.18);color:#f0995a;border:1px solid rgba(224,110,63,.5)}
.cond.HP{background:rgba(224,70,63,.18);color:#f06a63;border:1px solid rgba(224,70,63,.5)}
.subgrade{display:grid;grid-template-columns:96px 1fr 46px;align-items:center;gap:12px;font-size:.86rem}
.subgrade .track{height:9px;border-radius:6px;background:var(--border);overflow:hidden}
.subgrade .fill{height:100%;border-radius:6px;background:var(--foil)}
.subgrade .val{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}

/* ===================== CONDITION EXPLAINER (จาก inkable) ===================== */

/* ===================== SEARCH PAGE ===================== */
.shop{display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:start;margin:30px 0}
.filters{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:22px;position:sticky;top:92px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  max-height:calc(100vh - 108px);overflow-y:auto}
.filters::-webkit-scrollbar{width:8px}
.filters::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:8px}
.filters h3{font-family:var(--display);font-size:1.1rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.fgroup{border-top:1px solid var(--border);padding:15px 0}
.fgroup:first-of-type{border-top:none}
.fgroup>label.head{font-weight:700;font-size:.9rem;display:block;margin-bottom:10px}
.opt{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:.88rem;cursor:pointer;color:var(--text-dim);transition:color .15s}
.opt:hover{color:var(--text)}
.opt input{accent-color:var(--gold);width:16px;height:16px}
.swatch{width:15px;height:15px;border-radius:50%;display:inline-block;box-shadow:0 0 0 2px var(--bg-soft),0 0 8px currentColor}
.count{margin-left:auto;font-size:.74rem;color:var(--text-mute)}

.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.toolbar .result-count{font-weight:700;font-size:.95rem;min-width:150px}
.toolbar select{padding:10px 14px;border-radius:11px;border:1px solid var(--border-2);background:var(--glass);color:var(--text);font-family:var(--font);cursor:pointer}
.layout-toggle{margin-left:auto;display:flex;gap:7px}
.active-filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.active-filters .pill{background:var(--glass-2);border:1px solid var(--border-2);padding:6px 12px;border-radius:999px;font-size:.78rem;cursor:pointer;transition:var(--trans)}
.active-filters .pill:hover{border-color:var(--ink-ruby);color:var(--ink-ruby)}
.empty{text-align:center;padding:70px 20px;color:var(--text-dim)}

/* ===================== RANK TIERS ===================== */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tier{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 26px;text-align:center;position:relative;overflow:hidden;transition:var(--trans)}
.tier:hover{transform:translateY(-5px);border-color:var(--border-2);box-shadow:var(--shadow-sm)}
.tier.feat{border-color:var(--gold)}
.tier.feat::after{content:"แนะนำ";position:absolute;top:16px;right:-30px;background:var(--foil);color:#2a1d05;font-size:.7rem;font-weight:800;padding:4px 36px;transform:rotate(45deg)}
.tier .ring{width:72px;height:72px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:1.9rem;border:1px solid var(--border-2)}
.tier h3{font-family:var(--display);font-size:1.3rem}
.tier .cb{font-family:var(--display);font-size:2.4rem;font-weight:900;color:var(--gold);margin:10px 0 2px}

/* footer เก่า (.foot-grid/.contact/footer.site) ลบแล้ว — ใช้ .wt-foot แทน */

/* ===================== MODAL / CERTIFICATE ===================== */
.modal-bg{position:fixed;inset:0;background:rgba(5,3,12,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;place-items:center;z-index:100;padding:24px;overflow-y:auto}
.modal-bg.open{display:grid}
.modal{background:var(--bg-soft);border:1px solid var(--border-2);border-radius:var(--radius-lg);max-width:880px;width:100%;box-shadow:var(--shadow);overflow:hidden;position:relative;animation:pop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.modal-inner{display:grid;grid-template-columns:340px 1fr}
.modal .art{aspect-ratio:5/7;position:relative;overflow:hidden;border-radius:var(--radius-card)}
.modal .info{padding:30px;overflow-y:auto;max-height:88vh}
.modal .info h2{font-family:var(--display);font-size:1.5rem;line-height:1.25;margin-bottom:4px}
.modal .row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;align-items:center}
.modal .price-big{font-family:var(--display);font-size:2.1rem;font-weight:900;color:var(--gold);margin:18px 0 4px}
.modal .close{position:absolute;top:18px;right:18px;z-index:5}
.modal .desc{color:var(--text-dim);font-size:.92rem;margin:14px 0}
.spec{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.9rem;margin:16px 0}
.spec dt{color:var(--text-mute)}.spec dd{font-weight:600}

/* certificate block */
.cert{border:1px solid var(--gold);border-radius:var(--radius);padding:20px;margin:18px 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 8%,transparent),transparent)}
.qr{width:64px;height:64px;border-radius:10px;background:#fff;padding:5px}
.pop-row{display:flex;gap:18px;margin-top:14px;font-size:.82rem}
.pop-row b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--text)}

/* ===================== SCAN PAGE (มือถือ → กล้อง → ราคาตลาด) ===================== */
.scan-wrap{max-width:560px;margin:24px auto 0}
.scan-hero{text-align:center;margin-bottom:22px}
.scan-hero h1{font-family:var(--display);font-size:1.7rem}
.scan-hero p{color:var(--text-dim);font-size:.94rem;margin-top:6px}

.scan-stage{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm)}
.dropzone{border:2px dashed var(--border-2);border-radius:var(--radius);padding:40px 22px;text-align:center;transition:var(--trans);cursor:pointer}
.dropzone.drag{border-color:var(--gold);background:var(--glass)}
.dropzone .big{font-size:2.6rem;margin-bottom:10px}
.dropzone h2{font-family:var(--display);font-size:1.15rem;margin-bottom:6px}
.scan-actions{display:flex;gap:12px;margin-top:18px}
.scan-actions .btn{flex:1;justify-content:center;padding:14px}

/* viewport กล้อง / รูปที่กำลังสแกน */
.scan-view{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;background:#000;display:none}
.scan-view.on{display:block}
.scan-view video,.scan-view img{width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;inset:14px;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 2000px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.5)}
.scan-frame::before,.scan-frame::after{content:"";position:absolute;width:26px;height:26px;border:3px solid var(--gold)}
.scan-frame::before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:10px 0 0 0}
.scan-frame::after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 10px 0}
.scan-line{position:absolute;left:14px;right:14px;height:3px;background:linear-gradient(90deg,transparent,var(--teal),transparent);
  box-shadow:0 0 14px 2px var(--teal);animation:scanmove 1.8s ease-in-out infinite;display:none}
.scanning .scan-line{display:block}
@keyframes scanmove{0%{top:16px}50%{top:calc(100% - 18px)}100%{top:16px}}
.scan-status{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-weight:700;font-size:.9rem;
  text-shadow:0 2px 8px rgba(0,0,0,.8)}
.cam-shot{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;
  background:#fff;border:4px solid rgba(255,255,255,.5);cursor:pointer}

/* ผลลัพธ์ + ราคาตลาด */
.scan-result{display:none;margin-top:18px;animation:pop .35s ease}
.scan-result.on{display:block}
.match{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
.match .thumb{aspect-ratio:5/7;border-radius:12px;overflow:hidden;border:1px solid var(--border-2)}
.match h3{font-size:1.15rem;line-height:1.3}
.confidence{margin-top:8px;font-size:.82rem;color:var(--text-dim)}
.confidence .track{height:7px;border-radius:5px;background:var(--border);overflow:hidden;margin-top:5px}
.confidence .fill{height:100%;background:linear-gradient(90deg,var(--teal),#3fd089)}

.market{margin-top:18px;border:1px solid var(--gold);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 7%,transparent),transparent)}
.market .mhead{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border)}
.market .mhead b{font-family:var(--display)}
.market .trend{font-size:.82rem;font-weight:800;padding:3px 9px;border-radius:999px}
.market .trend.up{color:#3fd089;background:rgba(35,171,108,.15)}
.market .trend.down{color:#f06a63;background:rgba(224,70,63,.15)}
.price-band{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:16px}
.price-band div{position:relative}
.price-band div+div{border-left:1px solid var(--border)}
.price-band .lbl{font-size:.74rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:.5px}
.price-band .val{font-family:var(--display);font-weight:800;font-size:1.35rem;margin-top:3px}
.price-band .val.avg{color:var(--gold)}
.spark{height:42px;width:100%;padding:0 16px 14px}
.compare{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-top:1px solid var(--border);font-size:.9rem}
.compare .ours{font-weight:800;color:var(--gold)}
.alts{margin-top:18px}
.alts h4{font-size:.92rem;margin-bottom:10px;color:var(--text-dim)}
.alts .row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.alt{background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:8px;text-align:center;cursor:pointer;transition:var(--trans);font-size:.78rem}
.alt:hover{border-color:var(--gold)}
.alt .thumb{aspect-ratio:5/7;border-radius:8px;overflow:hidden;margin-bottom:6px}

/* ===================== PACK PAGE — หน้าสุ่มแพ็กเล่นฟรี ===================== */
.wallet{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--gold);background:var(--glass);font-weight:700}
/* shell: sidebar | main */
.gshell{display:grid;grid-template-columns:214px 1fr;gap:24px;margin-top:16px}
.gshell.nosidebar{display:block}
.gside{position:sticky;top:90px;align-self:start}
.gmain{min-width:0}
/* เมนู sidebar */
/* เมนูแบบไอคอนวงกลม + ป้ายสั้น (แนว cas:pace) */
.gside .gi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 6px;
  background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 10px;margin-bottom:16px}
.gi{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;min-width:0}
.gi-ic{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-size:1.45rem;background:var(--glass-2);border:2px solid var(--border-2);
  transition:var(--trans);box-shadow:var(--shadow-sm)}
.gi:hover .gi-ic{border-color:var(--brand);transform:translateY(-2px)}
.gi.on .gi-ic{border-color:var(--gold);background:rgba(232,193,90,.12);box-shadow:0 0 0 3px rgba(232,193,90,.18)}
.gi.soon .gi-ic{border-style:dashed;opacity:.75}
.gi-lb{font-size:.72rem;font-weight:700;color:var(--text-dim);text-align:center;line-height:1.25;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gi:hover .gi-lb{color:var(--text)}
.gi.on .gi-lb{color:var(--gold)}
.gi-tag{position:absolute;top:-4px;right:-8px;font-size:.5rem;font-weight:800;background:var(--accent);
  color:#fff;padding:2px 6px;border-radius:6px;letter-spacing:.5px;border:none}
.gside .cats-h{font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-mute);margin:0 0 10px 6px}
/* แท็บ */
.gtabs{display:flex;gap:10px;margin-bottom:18px}
.gtab{padding:11px 26px;border-radius:11px;background:var(--glass);border:1px solid var(--border);
  font-weight:700;cursor:pointer;color:var(--text-dim);transition:var(--trans)}
.gtab:hover{color:var(--text)}
.gtab.active{color:var(--primary-ink);background:var(--primary);border-color:var(--primary);box-shadow:none}

/* top: live-pulls + pull of the day */
.gtop{display:grid;grid-template-columns:1fr 186px 236px;gap:16px;margin-bottom:24px}

/* QR เข้ากลุ่มซื้อขาย */
.qr-join{background:var(--glass);border:1px solid var(--brand);border-radius:var(--radius);padding:14px 12px;
  text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.qr-join img{width:104px;height:104px;border-radius:9px;background:#fff;padding:6px;display:block}
.qr-join .t{font-weight:800;font-size:.84rem;color:var(--brand);line-height:1.3}
.qr-join .s{font-size:.71rem;color:var(--text-mute);line-height:1.4}

/* คำเตือนการเปิดกล่อง */
.disclaimer{margin-top:18px;background:rgba(224,70,63,.07);border:1px solid rgba(224,70,63,.32);
  border-radius:12px;padding:13px 16px;font-size:.82rem;color:var(--text-dim);line-height:1.65}
.disclaimer b{color:#f06a63}

/* Timeline (หน้าประวัติ) */
.livepulls{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;min-width:0}
.lp-h{display:flex;align-items:center;gap:8px;font-size:.74rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px}
.lp-h::before{content:"";width:9px;height:9px;border-radius:50%;background:#3fd089;box-shadow:0 0 8px #3fd089;animation:pulse 1.4s infinite}
.lp-row{display:flex;overflow:hidden}
.lp-track{display:flex;gap:12px;width:max-content;flex:0 0 auto;animation:lpslide 28s linear infinite;will-change:transform}
.livepulls:hover .lp-track{animation-play-state:paused}
@keyframes lpslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lp{flex:0 0 auto;width:96px;text-align:center}
.lp .lp-card{aspect-ratio:5/7;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.22);margin-bottom:6px;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.lp .lp-name{font-size:.68rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp .lp-meta{font-size:.62rem;color:var(--text-mute)}
.potd{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 12%,transparent),var(--glass));
  border:1px solid var(--gold);border-radius:var(--radius);padding:14px;text-align:center}
.potd .ph{font-family:var(--display);font-size:.78rem;letter-spacing:1px;color:var(--gold);margin-bottom:10px}
.potd .pc{width:90px;aspect-ratio:5/7;border-radius:12px;overflow:hidden;margin:0 auto 8px;border:1px solid var(--border-2)}
.potd .pu{font-size:.74rem;color:var(--text-dim)}
.potd .pv{font-family:var(--display);font-weight:900;font-size:1.15rem;color:var(--gold);margin-top:2px}

/* หัวข้อแพ็ก */
.gpacks-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.gpacks-head h2{font-family:var(--display);font-size:1.25rem;letter-spacing:1px}

/* แพ็กใบใหญ่ (ซองฟอยล์ + slab การ์ดหน้า + พื้นหลังดราม่า) */
.gpacks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px}

/* overlay เปิดแพ็ก */
.open-overlay{position:fixed;inset:0;z-index:120;background:radial-gradient(circle at 50% 40%,#241640,#06040c 70%);
  display:none;padding:24px;overflow-y:auto;min-height:100vh}
.open-overlay.on{display:grid}
.open-overlay .ox{position:fixed;top:20px;right:24px;z-index:5}
/* โหมด "ไปหน้าเปิดซอง": ระหว่าง overlay เปิด ซ่อนหน้าหลักทั้งหมด — ผู้ใช้เห็นแค่หน้าเปิดซองเต็มจอ
   เหมือนเปลี่ยนหน้า (กันเคสเบราว์เซอร์ที่ fixed ไม่ทำงาน หน้าเดิมจะไม่โผล่มาปนอีก) */
body.ov-open #header,body.ov-open main,body.ov-open #footer{display:none}
body.ov-open{overflow:hidden}
/* margin:auto = กลางจอเมื่อเนื้อหาสั้น แต่เริ่มจากขอบบน(เลื่อนดูได้ครบ)เมื่อเนื้อหาสูงกว่าจอ
   — ห้ามใช้ place-items:center: เนื้อหาที่สูงกว่าจอจะล้นขึ้นบนแบบเลื่อนกลับไม่ได้ */
.open-stage{text-align:center;width:100%;max-width:760px;margin:auto}

@keyframes packIdle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes packShake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-8px) rotate(-3deg)}75%{transform:translateX(8px) rotate(3deg)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.burst{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 60%);
  opacity:0}
.burst.go{animation:burst .6s ease-out forwards}
@keyframes burst{0%{opacity:0;transform:scale(.2)}40%{opacity:1}100%{opacity:0;transform:scale(2.4)}}

/* การ์ดที่เผย */
.reveal-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:8px}
@keyframes srFlash{0%{opacity:0}18%{opacity:1}100%{opacity:.5}}
@keyframes epicSpark{0%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1.4)}100%{opacity:.85;transform:scale(1)}}
.open-summary{font-size:1.05rem;margin-bottom:14px;color:#fff}
.open-summary b{color:var(--gold);font-family:var(--display);font-size:1.3rem}
.open-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* (ticker เก่าถูกลบแล้ว) */

/* odds drawer */
.odds-table{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:.84rem;margin-top:8px}
.odds-table .r{color:var(--text-dim)}.odds-table .p{font-weight:700;text-align:right}

/* confirm step */
/* color:#fff ตายตัว — ในธีมส้ม-ขาว --glass เป็น rgba(255,255,255,.85) = ขาวบนขาว อ่านไม่ออก
   ใช้ var(--text) ให้เปลี่ยนตามธีมเหมือนที่อื่นทั้งเว็บ */
.confirm{max-width:380px;margin:0 auto;background:var(--glass);border:1px solid var(--border-2);border-radius:var(--radius);padding:22px;color:var(--text)}
.confirm .pk-thumb{width:120px;aspect-ratio:3/5;border-radius:10px;margin:0 auto 14px;overflow:hidden}
.confirm .line{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--border);font-size:.9rem}
.confirm .line:first-of-type{border-top:none}
@keyframes starFloat{from{opacity:.55;transform:translateY(0)}to{opacity:1;transform:translateY(-7px)}}
@keyframes holoPulse{from{opacity:.65}to{opacity:1}}
@keyframes sheenSweep{to{transform:translateX(130%)}}
@keyframes labelPop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:130}
.flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:0}30%{opacity:.85}100%{opacity:0}}

/* ===================== TOP CHASE CARDS ===================== */
.chase{margin-top:40px;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;background:var(--glass)}
.chase-h{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:1.05rem;letter-spacing:1px;color:var(--gold);margin-bottom:18px}
.chase-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:16px}
.chase-card{cursor:pointer;transition:var(--trans);min-width:0}
.chase-card:hover{transform:translateY(-5px)}
.cc-slab{aspect-ratio:5/7;background:linear-gradient(#fbfbfb,#e7e7ee);border-radius:14px;padding:5px 5px 7px;
  box-shadow:0 14px 28px rgba(0,0,0,.5);margin-bottom:9px;position:relative}
.cc-slab .lbl{font-size:.44rem;font-weight:800;color:#1a1a1a;display:flex;justify-content:space-between;padding:0 2px;margin-bottom:2px}
.cc-slab .lbl .g{color:#b8860b}
.cc-slab img{width:100%;height:calc(100% - 9px);object-fit:cover;border-radius:9px}
.cc-name{font-size:.76rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:3px}
.cc-price{font-weight:800;font-size:.88rem;color:var(--gold)}
.cc-grade{font-size:.58rem;color:var(--text-mute);letter-spacing:.3px}

/* ===================== MARKETPLACE ===================== */
.beta-banner{background:color-mix(in srgb,var(--gold) 8%,var(--glass));border:1px solid var(--gold);
  border-radius:12px;padding:12px 16px;font-size:.84rem;color:var(--text-dim);margin-bottom:18px;line-height:1.55}
.beta-banner b{color:var(--gold)}
.mk-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.mk-toolbar .searchbox{flex:1;min-width:200px;margin:0}
.mk-toolbar .searchbox input{width:100%}
.mk-toolbar select{padding:10px 14px;border-radius:11px;border:1px solid var(--border-2);background:var(--glass);color:var(--text);font-family:var(--font);cursor:pointer}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--text-dim);user-select:none}
.toggle .sw{width:40px;height:23px;border-radius:999px;background:var(--border-2);position:relative;transition:var(--trans)}
.toggle .sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:var(--trans)}
.toggle.on{color:var(--text)}
.toggle.on .sw{background:var(--gold)}
.toggle.on .sw::after{left:19px}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:18px}
.mk-card{cursor:pointer;transition:var(--trans)}
.mk-card:hover{transform:translateY(-5px)}
.mk-name{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mk-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:4px;gap:6px}
.mk-listing{font-size:.66rem;color:var(--text-mute);line-height:1.25}
.mk-listing b{display:block;color:var(--text);font-size:.94rem;font-weight:800}
.fmv{font-size:.6rem;font-weight:800;padding:3px 7px;border-radius:6px;white-space:nowrap}
.fmv.up{color:#3fd089;background:rgba(35,171,108,.16)}
.fmv.gold{color:var(--gold);background:rgba(232,193,90,.16)}

/* ===================== CART ===================== */
.cart-list{display:flex;flex-direction:column;gap:14px;max-height:52vh;overflow-y:auto;margin-bottom:18px}
.cart-row{display:flex;align-items:center;gap:13px}
.cart-thumb{width:44px;aspect-ratio:5/7;border-radius:11px;overflow:hidden;flex:0 0 auto;border:1px solid var(--border-2)}
.cart-total{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-top:1px solid var(--border);margin-bottom:14px;font-size:1.05rem;font-weight:600}
.cart-total b{font-family:var(--display);color:var(--gold);font-size:1.45rem}
@media(max-width:980px){.hero-logo{max-height:150px}}


/* ===================== เปิดแพ็ก: เลือกโหมด/สรุป/สะสม ===================== */
.open-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.open-mode{padding:13px 10px;border:1px solid var(--border-2);border-radius:12px;background:var(--glass);
  cursor:pointer;text-align:center;font-weight:800;font-size:.92rem;color:#fff;transition:var(--trans)}
.open-mode:hover{border-color:var(--gold);background:var(--glass-2);transform:translateY(-2px)}
.open-mode small{display:block;font-weight:500;font-size:.72rem;color:rgba(255,255,255,.6);margin-top:3px}
.fast-check{display:flex;gap:8px;align-items:center;color:#fff;font-size:.85rem;margin-top:6px;justify-content:center;cursor:pointer}
.open-progress{color:#fff;font-family:var(--display);font-size:1.1rem;margin-bottom:14px;text-align:center}
.open-progress .bar{height:5px;border-radius:3px;background:rgba(255,255,255,.15);margin-top:8px;overflow:hidden;max-width:400px;margin-left:auto;margin-right:auto}
.open-progress .bar i{display:block;height:100%;background:var(--foil);transition:width .3s}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:16px auto;max-width:720px}
.res-grid .rc{background:var(--glass-2);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center;color:#fff}
.res-grid .rc span.lbl{font-size:.76rem;color:rgba(255,255,255,.6)}
.res-grid .rc b{display:block;font-family:var(--display);font-size:1.4rem;color:var(--gold);margin-top:3px}
.res-grid .rc small{display:block;font-size:.72rem;color:rgba(255,255,255,.55);margin-top:2px}
.res-grid .rc b.loss{color:#f06a63}.res-grid .rc b.gain{color:#3fd089}
.sess-bar{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;background:rgba(0,0,0,.4);
  border:1px solid var(--border-2);border-radius:12px;padding:11px 18px;margin:14px auto 0;max-width:720px;font-size:.84rem;color:#fff}
.sess-bar b{color:var(--gold)}.sess-bar b.loss{color:#f06a63}.sess-bar b.gain{color:#3fd089}
.open-actions2{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ===================== TOAST ===================== */
.toast-wrap{position:fixed;top:84px;right:20px;z-index:200;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{background:var(--bg-soft);border:1px solid var(--border-2);border-left:4px solid var(--accent);
  border-radius:12px;padding:13px 18px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow);
  transform:translateX(125%);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s;max-width:330px}
.toast.show{transform:none;opacity:1}
.toast.ok{border-left-color:#3fd089}
.toast.info{border-left-color:var(--teal)}

/* ===================== RESPONSIVE ===================== */
@media(max-width:980px){
  .hero{grid-template-columns:1fr}.hero-visual{display:none}.hero-copy{padding:40px 30px}
  /* ⚠️ บนมือถือ ตัวกรองย้ายมาอยู่ "เหนือ" กริดการ์ด ถ้าปล่อยสูงอิสระมันพองจาก 46px เป็น 1,830px
     ตอน JS เติมตัวเลือก → ดันเนื้อหาทั้งหน้าลง (CLS 0.593 เกินเกณฑ์ 6 เท่า) และผู้ใช้ต้องเลื่อนผ่าน
     กำแพงตัวกรองก่อนจะเห็นการ์ด · จำกัดความสูงแล้วให้เลื่อนในตัวเอง = ทั้งนิ่งและใช้ง่ายขึ้น */
  .shop{grid-template-columns:1fr}
  .filters{position:static;min-height:320px;max-height:320px;overflow-y:auto;
    -webkit-overflow-scrolling:touch;border-radius:12px}
  .cond-grid{grid-template-columns:repeat(2,1fr)}
  .modal-inner{grid-template-columns:1fr}.modal .art{aspect-ratio:16/10}
  .tiers{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr}
  .nav-toggle{display:grid}
  nav.main{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:4px;
    background:var(--bg-soft);border-bottom:1px solid var(--border);padding:12px;z-index:59;
    box-shadow:var(--shadow);margin-left:0}
  nav.main.open{display:flex}
  nav.main a{padding:12px 14px;font-size:.95rem}
  .searchbox input{width:150px}.searchbox input:focus{width:180px}
  .hero h1{font-size:2rem}
  .gshell{grid-template-columns:1fr}.gside{position:static}.gtop{grid-template-columns:1fr}
  /* มือถือ: เมนูไอคอนเป็นแถวเลื่อนแนวนอน (แนว cas:pace) */
  .gside .gi-grid{display:flex;overflow-x:auto;gap:14px;padding:12px 14px;scrollbar-width:none}
  .gside .gi-grid::-webkit-scrollbar{display:none}
  .gside .gi{flex:0 0 auto;width:64px}
  .gside .cats-h{margin-top:2px}
  .chase-grid{grid-template-columns:repeat(4,1fr)}
  .brand .logo-img{height:42px}.brand .wm{font-size:.9rem}
}
@media(max-width:1150px) and (min-width:981px){
  nav.main a{padding:9px 9px;font-size:.86rem}
  .searchbox input{width:160px}.searchbox input:focus{width:190px}
}
@media(max-width:560px){.cond-grid{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr}.chase-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   BX3D / PK3D — กล่อง Booster 3D + ซองฟอยล์ 3 ลาย (CSS ล้วน)
   แปะ "ท้าย styles.css" · อนิเมชันใช้ transform/opacity เท่านั้น
   ============================================================ */

/* ---------- ซองฟอยล์ (pk3d) — ปรับขนาดผ่าน width + font-size ของ .pk3d ---------- */
.pk3d{position:relative;width:100%;aspect-ratio:3/4.6;font-size:10px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.45))}
@keyframes pk3dSweep{0%,55%{transform:translateX(-120%) rotate(8deg)}85%,100%{transform:translateX(320%) rotate(8deg)}}

/* ---------- กล่อง Booster 3D (bx3d) ---------- */
.bx3d{position:relative;cursor:pointer;transition:var(--trans)}
@keyframes oxpIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes oxpIdle{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes oxpBreath{0%,100%{opacity:.45;transform:scale(.97)}50%{opacity:.9;transform:scale(1.05)}}
@keyframes oxpSpin360{0%{opacity:.85;transform:rotate(0)}50%{opacity:.95}100%{opacity:.85;transform:rotate(360deg)}}
@keyframes oxpTremble{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-1.5px) rotate(-.4deg)}75%{transform:translateX(1.5px) rotate(.4deg)}}
@keyframes oxpPop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes oxpMiniIn{from{transform:translateY(-18px) scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ===================== วงแหวนหมุนเลือก (oxr) ===================== */
.oxr-scene{padding-top:4px}
.oxr-wrap{display:flex;align-items:center;justify-content:center}
/* พื้นที่วง: กันข้อความด้านบนด้วย margin-top ของ stage — รูปไม่ทับข้อความ */
.oxr-stage{width:min(88vw,540px);height:296px;margin-top:14px;perspective:1050px;position:relative;
  touch-action:pan-y;cursor:grab}
.oxr-stage:active{cursor:grabbing}
.oxr-halo{position:absolute;left:50%;bottom:8px;width:270px;height:34px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(closest-side,rgba(232,193,90,.28),transparent 70%);pointer-events:none}
.oxr-ring{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.oxr-ring.drag{transition:none}
/* backface ซ่อน = ด้านหลังวงไม่โชว์ภาพกลับด้าน · ตัวไม่ใช่หน้าสุดหรี่ลงให้มีมิติ
   ขนาด native ใหญ่ + วงถูกถอยด้วย translateZ(-R) → ตัวหน้าสุดคมชัดขนาดจริง */
.oxr-item{position:absolute;left:50%;top:50%;transform-style:preserve-3d;cursor:pointer;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.oxr-pk{width:148px;margin:-114px 0 0 -74px;font-size:11px;
  opacity:.5;filter:brightness(.6) saturate(.85);transition:filter .35s,opacity .35s,transform .35s}
.oxr-pk .pk3d{width:100%}
.oxr-bx{position:relative;width:250px;height:216px;margin:-108px 0 0 -125px;
  opacity:.5;filter:brightness(.6) saturate(.85);transition:filter .35s,opacity .35s,transform .35s}
.oxr-item.front .oxr-pk,.oxr-item.front .oxr-bx{opacity:1;transform:scale(1.05);
  filter:brightness(1) saturate(1) drop-shadow(0 16px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(232,193,90,.55))}
/* แถวป้าย+ลูกศร อยู่ใต้วงคนละโซนกับรูป — ไม่ชนกัน กดง่าย */
.oxr-label-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.oxr-label{font-size:.9rem;color:var(--gold);font-weight:800;min-width:110px}
.fs-name{font-size:.78rem;font-weight:800;color:#fff;text-align:center;line-height:1.25}
.fs-r{font-size:.66rem;color:rgba(255,255,255,.6)}

/* กันเบราว์เซอร์ลากรูปติดเมาส์ (ghost image) ตอนหมุนวง/ลากการ์ด */
.oxr-item img,.pk3d img,.bx3d-scene img,.oxp-big img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

/* ════════════════════════════════════════════════════════════════════
   โครงเว็บใหม่ v2 — โทนส้ม-ขาว แบบ cas-pace (15 ก.ค. 2026)
   ใช้ร่วม: header/footer ทุกหน้า · ฟอร์มสินค้า · หน้า home/products/news
   ════════════════════════════════════════════════════════════════════ */
:root{
  --wt-green:#00a651; --wt-green-d:#008c44;
  --wt-yellow:#ffd94a; --wt-pink:#fde3cd;
  --primary-d:var(--primary); --primary-dd:var(--gold);  /* fallback สำหรับธีมที่ไม่ได้นิยาม */
}
/* ธีมหลักใหม่: ส้ม-ขาว (กลางวัน) — ส้มแท้ ไม่ออกเหลือง */
[data-theme="wanna-orange"]{
  --bg:#f3f3f5; --bg-soft:#e9e9ec;
  --glass:rgba(255,255,255,.85); --glass-2:rgba(42,32,22,.05);
  --border:rgba(42,32,22,.12); --border-2:rgba(42,32,22,.20);
  --text:#2a2016; --text-dim:#5a5244; --text-mute:#6e6759;   /* เดิม #8b8474 = 3.56 ตกเกณฑ์ · ตอนนี้ 5.37 */
  --gold:#a3701c; --teal:#0f7a8a; --primary:#f2681b; --primary-ink:#ffffff;
  --primary-d:#dd560f; --primary-dd:#b8470a;
  --glow-a:rgba(242,104,27,.05); --glow-b:rgba(0,0,0,0);
  --shadow:0 8px 26px -12px rgba(60,42,10,.28); --shadow-sm:0 2px 8px -3px rgba(60,42,10,.18);
  --radius-card:12px; --radius-btn:10px; --radius-chip:999px; --radius-pack:14px;
  --sheen-o:.35; --holo-o:.8; --lift:-3px; --icon-w:1.7;
  color-scheme:light;
}
/* ธีมมืด (กลางคืน) — คู่แบรนด์ ส้มบนพื้นเข้ม */
[data-theme="wanna-dark"]{
  --bg:#15100d; --bg-soft:#1e1712;
  --glass:rgba(255,255,255,.04); --glass-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.18);
  --text:#f4ece4; --text-dim:#c6b8aa; --text-mute:#8f8477;
  --gold:#e6b25a; --teal:#3fb6c4; --primary:#f5822a; --primary-ink:#241206;
  --primary-d:#e06f18; --primary-dd:#7a3a10;
  --glow-a:rgba(245,130,42,.07); --glow-b:rgba(0,0,0,0);
  --shadow:0 12px 30px rgba(0,0,0,.5); --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --radius-card:12px; --radius-btn:10px; --radius-chip:999px; --radius-pack:14px;
  --sheen-o:.5; --holo-o:.9; --lift:-3px; --icon-w:1.7;
  color-scheme:dark;
}

/* ปุ่มสลับกลางวัน/กลางคืนใน header */
.wt-nav .daynight{position:relative}
.wt-nav .daynight .ic-sun,.wt-nav .daynight .ic-moon{transition:opacity .2s,transform .3s}
.wt-nav .daynight .ic-moon{position:absolute;inset:0;margin:auto;width:1em;height:1em}
[data-theme="wanna-dark"] .wt-nav .daynight .ic-sun{opacity:0;transform:rotate(-40deg) scale(.5)}
[data-theme="wanna-dark"] .wt-nav .daynight .ic-moon{opacity:1;transform:none}
.wt-nav .daynight .ic-sun{opacity:1}
.wt-nav .daynight .ic-moon{opacity:0;transform:rotate(40deg) scale(.5)}

/* หน้า products: วงกลมหมวดที่กำลังเลือก (ตัวกรอง active) */
.wt-cat.act .cir{box-shadow:0 0 0 3px var(--primary),0 8px 18px -6px rgba(181,103,10,.5),inset 0 0 0 3px rgba(255,255,255,.5)}
.wt-cat.act small{color:var(--primary-dd)!important}

.wt-ic{width:1em;height:1em;fill:currentColor;vertical-align:-.13em;flex-shrink:0}
.wt-ic.st{fill:none;stroke:currentColor;stroke-width:var(--icon-w,1.8);stroke-linecap:round;stroke-linejoin:round}
.wt-in{max-width:1240px;margin:0 auto;padding:0 16px}

/* ───────── HEADER (ทุกหน้า) ───────── */
.wt-top{background:var(--wt-green);color:#fff;font-size:.78rem;font-weight:600}
.wt-top .wt-in{display:flex;align-items:center;gap:12px;padding-top:6px;padding-bottom:6px}
.wt-top .soc{display:flex;gap:10px}
.wt-top .soc a{color:#fff;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;transition:.15s}
.wt-top .soc a:hover{background:rgba(255,255,255,.22)}
.wt-top .mid{margin:0 auto;display:flex;align-items:center;gap:16px;font-weight:700;letter-spacing:1px;text-align:center}
.wt-top .mid .ar{opacity:.8}
.wt-top .lang{white-space:nowrap}
@media(max-width:640px){.wt-top .lang{display:none}}

.wt-nav{background:var(--primary);color:#fff;position:relative;z-index:200}
.wt-nav .wt-in{display:flex;align-items:center;padding-top:6px;padding-bottom:6px}
.wt-nav .lg{flex:1;display:flex;align-items:center}
.wt-nav .lg img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
.wt-nav .menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.wt-nav .menu>a,.wt-nav .menu>.mega-wrap>a{color:#fff;text-decoration:none;font-weight:600;font-size:.94rem;
  padding:8px 2px;margin:0 18px;white-space:nowrap;opacity:.95;cursor:pointer;border-radius:0;background:none}
.wt-nav .menu a:hover{opacity:1;text-underline-offset:7px;text-decoration:underline rgba(255,255,255,.55) 2px}
.wt-nav .menu a.active{font-weight:700;opacity:1;text-underline-offset:7px;text-decoration:underline #fff 2px}
.wt-nav .icons{flex:1;display:flex;gap:14px;justify-content:flex-end;align-items:center}
.wt-nav .icons a,.wt-nav .icons button{color:#fff;background:none;border:none;cursor:pointer;width:44px;height:44px;  /* 38x38 เล็กกว่าเกณฑ์นิ้วโป้ง 44x44 — ปุ่มตะกร้าอยู่ในนี้ด้วย กดพลาดบ่อยบนมือถือ */
  display:grid;place-items:center;position:relative;font-size:1.05rem;padding:0}
.wt-nav .icons .bubble{position:absolute;top:0;right:0;background:var(--wt-yellow);color:#1c2a12;font-size:.58rem;
  font-weight:800;min-width:16px;height:16px;padding:0 3px;border-radius:9px;display:grid;place-items:center}
.wt-nav .navtoggle{display:none}
@media(max-width:900px){
  .wt-nav .wt-in{flex-wrap:wrap;gap:6px}
  .wt-nav .lg,.wt-nav .icons{flex:unset}.wt-nav .icons{margin-left:auto}
  .wt-nav .menu{order:5;width:100%;justify-content:flex-start;gap:2px;display:none}
  .wt-nav .menu.open{display:flex}
  .wt-nav .menu>a,.wt-nav .menu>.mega-wrap>a{margin:0 8px}
  .wt-nav .navtoggle{display:grid}
}
/* mega menu (ชี้ Products) — วางตำแหน่งด้วย CSS ล้วน ไม่พึ่ง JS (กันบั๊ก "ชี้แล้วไม่ขึ้น")
   .mega-wrap = static → panel ยึดตำแหน่งกับ .wt-nav (มี position:relative) จึงเต็มจอ ใต้แถบเมนูพอดี */
/* ⭐ #header ต้องอยู่เหนือ .wt-home — ไม่งั้น body>*{z-index:1} ทำให้เนื้อหาหน้า (มาทีหลังใน DOM)
   ทับ mega panel ที่อยู่ใน header → เมนู Products ชี้แล้วไม่ขึ้น (โดนบัง) */
/* header เคย z-index 300 ทับโมดัล (100) → ตอนตะกร้าเปิดยังกดปุ่ม header ทะลุได้
   โมดัลย้ายไป 400 ไม่ได้เพราะ toast ต้องอยู่บนสุด → ลด header ลงมาต่ำกว่าโมดัล */
#header{position:relative;z-index:90}
.mega-wrap{position:static}
.wt-mega{display:none;position:absolute;top:100%;left:0;right:0;z-index:9999;background:var(--bg);color:var(--text);
  box-shadow:0 30px 60px -20px rgba(10,20,40,.4);border-top:1px solid rgba(20,30,40,.08)}
.mega-wrap:hover .wt-mega,.mega-wrap:focus-within .wt-mega,.mega-wrap.open .wt-mega{display:block}
.mega-wrap.open>a,.mega-wrap:focus-within>a{opacity:1;text-decoration:underline #fff 2px;text-underline-offset:7px}
.wt-mega .mg{max-width:1240px;margin:0 auto;padding:30px 16px 34px}
.wt-mega .r1{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.wt-mega .r2{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:28px}
.wt-mega h5{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:11px}
.wt-mega .col a{display:block;color:var(--text-dim);font-size:.8rem;font-weight:500;padding:4px 0;text-decoration:none}
.wt-mega .col a:hover{color:var(--primary-dd)}
.wt-mega .lone{font-size:.95rem;font-weight:700;color:var(--text);cursor:pointer}
.wt-mega .lone:hover{color:var(--primary-dd)}
.wt-mega .lock{color:var(--text-mute);font-size:.7rem;font-weight:500}
@media(max-width:760px){.wt-mega .r1,.wt-mega .r2{grid-template-columns:repeat(2,1fr)}}

/* ───────── FOOTER (ทุกหน้า) ───────── */
/* พื้นส้ม --primary อ่อนเกินไป ตัวหนังสือครีมได้แค่ 2.1-2.6 (ขาวเต็มก็ยัง 3.1)
   ใช้ส้มเข้ม #a63c05 แทน → ขาวได้ 6.42 ผ่าน AA สบาย และยังเป็นโทนแบรนด์เดิม */
.wt-foot{background:var(--foot-bg,#a63c05);color:#fff;margin-top:40px}
.wt-foot .wt-in{display:grid;grid-template-columns:minmax(230px,300px) auto auto auto;justify-content:space-between;gap:26px 40px;padding-top:34px;padding-bottom:26px}
@media(max-width:980px){.wt-foot .wt-in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.wt-foot .wt-in{grid-template-columns:1fr}}
.wt-foot img.lg{width:78px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));margin-bottom:8px}
.wt-foot p{font-size:.82rem;color:#ffeadb;max-width:320px;line-height:1.7;text-wrap:balance}
.wt-foot h4,.wt-foot .ft-h{font-size:1rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;color:#fff}
.wt-foot a{display:block;color:#fff;text-decoration:none;font-size:.82rem;padding:3px 0}
.wt-foot a:hover{color:#fff}
.wt-foot .copy{border-top:1px solid rgba(255,255,255,.15);text-align:center;font-size:.72rem;color:#ffe6d3;padding:14px 16px}

/* ───────── ฟอร์มสินค้า มาตรฐานเดียว (ทุกที่ที่โชว์สินค้า) ───────── */
.wt-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.wt-pgrid{grid-template-columns:repeat(2,1fr)}}
.wt-prod{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--text);cursor:pointer}
.wt-prod .im{aspect-ratio:1/1;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(42,32,22,.1);
  padding:22px;display:grid;place-items:center;transition:.18s;flex:none;position:relative;overflow:hidden}
.wt-prod .im>img{max-width:82%;max-height:86%;object-fit:contain}
.wt-prod .im .emj{font-size:3.2rem}
.wt-prod:hover .im{transform:translateY(-3px);box-shadow:0 12px 26px -12px rgba(42,32,22,.3)}
.wt-prod .setlab{position:absolute;top:9px;left:9px;background:var(--wt-yellow);color:#332600;font-size:.6rem;
  font-weight:800;border-radius:5px;padding:2px 8px}
.wt-prod .bd{padding:10px 2px 0;display:flex;flex-direction:column;flex:1}
/* ⚠️ 2 บรรทัด × line-height 1.55 = 3.1em — เดิมตั้งกรอบไว้ 2.3em ตัวหนังสือบรรทัดที่ 2 เลยถูกเฉือนครึ่ง
   เกิดกับกล่องสินค้า 27 จาก 29 รายการบนมือถือ */
.wt-prod .nm{font-size:.74rem;color:var(--text-dim);line-height:1.55;min-height:3.1em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wt-prod .pr{font-size:.86rem;font-weight:800;margin-top:8px;font-variant-numeric:tabular-nums}
.wt-prod .pr.free{color:var(--wt-green-d)}
.wt-prod .pr.sold{color:var(--text-mute)}
.wt-soldout{position:absolute;top:9px;right:9px;z-index:3;background:#c0392b;color:#fff;font-size:.62rem;font-weight:800;
  letter-spacing:.03em;border-radius:999px;padding:3px 10px;box-shadow:0 4px 12px -3px rgba(192,57,43,.55)}
.wt-prod.is-sold{pointer-events:none}
.wt-prod.is-sold .im>img{filter:grayscale(.55);opacity:.55}
@media(max-width:640px){.pd-wrap{grid-template-columns:1fr !important;gap:20px !important}}

/* ───────── หน้า HOME ───────── */
.wt-home{background:var(--bg-soft)}
/* วงกลมหมวด + dock magnification */
.wt-cats{background:var(--bg);border-bottom:1px solid rgba(42,32,22,.08);overflow:visible}
.wt-cats .wt-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:10px;
  padding-top:26px;padding-bottom:16px;text-align:center;overflow:visible}
.wt-cat{position:relative;text-decoration:none;color:var(--text);font-size:.8rem;font-weight:700;
  display:flex;flex-direction:column;align-items:center;gap:7px;-webkit-tap-highlight-color:transparent;min-width:0}
.wt-cat .ct{max-width:100%;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:break-word}
.wt-cat .cir{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  transform-origin:bottom center;will-change:transform;
  background:radial-gradient(circle at 32% 28%,#ffe6ef,var(--wt-pink) 70%);
  box-shadow:0 5px 14px -5px rgba(181,103,10,.4),inset 0 0 0 3px rgba(255,255,255,.5);transition:box-shadow .25s ease}
.wt-cat .cir.bl{background:radial-gradient(circle at 32% 28%,#ffbe66,var(--primary) 62%,var(--primary-dd))}
.wt-cat.is-hover .cir{box-shadow:0 14px 30px -10px rgba(181,103,10,.4),0 4px 10px -4px rgba(181,103,10,.3),inset 0 0 0 3px rgba(255,255,255,.5)}
.wt-cat .cir::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:linear-gradient(160deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 38%,transparent 60%)}
.wt-cat.is-hover .cir::after{opacity:1}
.wt-cat .cir img{width:64%;height:76%;object-fit:cover;border-radius:8px;box-shadow:0 3px 8px rgba(0,0,0,.35);
  transition:transform .25s cubic-bezier(.25,.6,.3,1)}
.wt-cat .cir img.logo-im{width:78%;height:auto;box-shadow:none;border-radius:0}
.wt-cat.is-hover .cir img{transform:scale(1.08)}
.wt-cat .cir .em{font-size:1.27rem}
.wt-cat small{display:block;color:var(--text-mute);font-weight:500;font-size:.66rem;margin-top:1px}
.wt-cat .badge-new{position:absolute;top:-4px;left:50%;transform:translateX(-14px) rotate(-8deg);z-index:5;
  background:#e0463f;color:#fff;font-size:.56rem;font-weight:800;padding:2px 7px;border-radius:5px}
.dock-tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px) scale(.85);
  transform-origin:bottom center;padding:5px 12px;border-radius:8px;background:var(--primary-dd);color:#fff;
  font-size:12px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;z-index:30;
  box-shadow:0 6px 14px -4px rgba(181,103,10,.45);transition:transform .18s cubic-bezier(.25,.6,.3,1) .08s,opacity .12s ease .08s}
.dock-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--primary-dd)}
.wt-cat.is-hover .dock-tip{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.dock-dot{position:absolute;left:50%;top:62px;width:4px;height:4px;border-radius:50%;background:var(--primary);
  transform:translateX(-50%) scale(0);transition:transform .15s ease;pointer-events:none}
.wt-cat.is-down .dock-dot{transform:translateX(-50%) scale(1)}
@media (hover:none),(prefers-reduced-motion:reduce){
  .wt-cats .wt-in{padding-top:20px}
  .wt-cat .cir{transition:transform .15s ease,box-shadow .25s ease}
  .wt-cat:active .cir{transform:scale(.94)}
  .dock-tip{display:none}
}
/* ฮีโร่ GIF เต็มแถบ (ฉากอวกาศเจนโค้ด + การ์ดลอย + ticker) */
.wt-hero{position:relative;min-height:293px;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(900px 520px at 30% 45%,#3b2a6e 0%,#241a4e 34%,#151033 60%,#0c0a22 100%)}
.wt-hero::before{content:"";position:absolute;inset:-20%;pointer-events:none;filter:blur(6px);
  background:radial-gradient(420px 300px at 34% 42%,rgba(232,193,90,.5),transparent 60%),
    radial-gradient(500px 380px at 55% 30%,rgba(155,95,224,.4),transparent 65%),
    radial-gradient(460px 340px at 66% 66%,rgba(90,160,240,.32),transparent 60%),
    radial-gradient(380px 300px at 22% 72%,rgba(240,120,170,.26),transparent 60%);
  animation:wtNebula 16s ease-in-out infinite alternate}
@keyframes wtNebula{from{transform:translate(0,0) scale(1)}to{transform:translate(3%,-2%) scale(1.08)}}
.wt-hero .stars{position:absolute;inset:0;pointer-events:none;animation:wtTwinkle 4.5s ease-in-out infinite alternate;
  background-image:radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent),radial-gradient(1.2px 1.2px at 28% 64%,#ffe9b0,transparent),
    radial-gradient(2px 2px at 44% 18%,#fff,transparent),radial-gradient(1.3px 1.3px at 58% 50%,#cfe0ff,transparent),
    radial-gradient(1.7px 1.7px at 71% 28%,#fff,transparent),radial-gradient(1.2px 1.2px at 83% 60%,#ffd9f0,transparent),
    radial-gradient(1.5px 1.5px at 91% 34%,#fff,transparent),radial-gradient(1.2px 1.2px at 8% 82%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 66% 84%,#ffe9b0,transparent),radial-gradient(1.2px 1.2px at 37% 88%,#cfe0ff,transparent)}
@keyframes wtTwinkle{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.wt-hero::before,.wt-hero .stars{animation:none}}
.wt-hero .gif-note{position:absolute;top:14px;right:16px;z-index:3;background:rgba(0,0,0,.45);color:#fff;
  font-size:.72rem;font-weight:600;padding:6px 14px;border-radius:99px;-webkit-backdrop-filter:blur(4px)}
.wt-hero .wt-in{position:relative;backdrop-filter:blur(4px)}
.wt-hero .wt-in{position:relative;z-index:2;padding-top:35px;padding-bottom:43px;width:100%;
  display:flex;flex-direction:column;align-items:center;text-align:center}
@keyframes wtBob1{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}
@keyframes wtBob2{0%,100%{transform:translateY(-8px) rotate(-8deg)}50%{transform:translateY(12px) rotate(-3deg)}}
@keyframes wtBob3{0%,100%{transform:translateY(8px) rotate(8deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.wt-fly img{animation:none}}
@media(max-width:640px){.wt-fly{height:140px}.wt-fly img{width:79px}.wt-fly .c2,.wt-fly .c3{width:65px}}
.wt-hero .btnw{display:inline-block;margin-top:12px;background:#fff;color:var(--primary-dd);font-weight:800;
  text-decoration:none;padding:12px 32px;border-radius:999px;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
  align-self:flex-start;margin-left:clamp(16px,6vw,90px)}   /* ปุ่มชิดซ้าย */

/* ── ฮีโร่อันแรก (ต้นแบบ) ย่อความสูงรวมเหลือ 2/3 อีกรอบ ── */
.wt-hero1{min-height:195px}
.wt-hero1 .wt-in{padding-top:23px;padding-bottom:29px}
.wt-hero1 .btnw{margin-top:8px}
@media(max-width:640px){.wt-hero1 .wt-fly{height:93px}.wt-hero1 .wt-fly img{width:53px}.wt-hero1 .wt-fly .c2,.wt-hero1 .wt-fly .c3{width:43px}}
.wt-tick{position:absolute;left:0;right:0;bottom:0;z-index:3;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow:hidden;padding:7px 0}
.wt-tick .tk{display:flex;gap:44px;white-space:nowrap;animation:wtMarq 20s linear infinite;color:#fff;font-size:.78rem;font-weight:600}
.wt-tick b{color:var(--wt-yellow)}
@keyframes wtMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){.wt-ser{flex:0 0 calc((100% - 14px)/2)}}

/* FREE OPEN strip */
.wt-free{background:var(--bg-soft);padding:36px 0 44px}
.wt-free .strip{display:grid;grid-template-columns:280px 1fr auto;gap:26px;align-items:center;cursor:pointer;text-decoration:none;
  background:linear-gradient(115deg,#fff,#fff3e2 62%,#ffe3bd);border:2px solid var(--primary);border-radius:20px;
  padding:26px 30px;color:#2a2016;transition:.2s;position:relative;overflow:hidden;box-shadow:0 14px 36px -18px rgba(181,103,10,.35)}
.wt-free .strip:hover{transform:translateY(-3px);box-shadow:0 24px 54px -18px rgba(181,103,10,.5)}
.wt-free .strip::after{content:"";position:absolute;inset:0;pointer-events:none;background-size:250% 250%;animation:wtSheen 4.5s ease-in-out infinite;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%)}
@keyframes wtSheen{0%{background-position:130% 0}60%{background-position:-130% 0}100%{background-position:-130% 0}}
@media (prefers-reduced-motion:reduce){.wt-free .strip::after{animation:none}}
@media(max-width:860px){.wt-free .strip{grid-template-columns:1fr;text-align:center}}
.wt-free img.bx{width:100%;max-width:280px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.4));margin:0 auto}
.wt-free .t1{font-family:var(--display);font-size:1.3rem;letter-spacing:1px;color:var(--primary-dd)}
.wt-free .t2{font-size:1.05rem;font-weight:800;margin-top:4px}
.wt-free .t3{font-size:.82rem;color:var(--text-mute);margin-top:8px}
.wt-free .go{background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:.95rem;padding:14px 30px;border-radius:999px;
  white-space:nowrap;box-shadow:0 10px 24px -8px rgba(247,148,29,.55)}
.wt-free .alt{margin-top:14px;display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.wt-free .alt span{color:#98917f;font-size:.8rem}
.wt-free .alt button{cursor:pointer;font-weight:700;font-size:.8rem;background:#fff;border:1.5px solid rgba(42,32,22,.2);
  color:#5a5244;border-radius:99px;padding:8px 18px}

/* สินค้ามาใหม่ (new release) */
.wt-new{background:var(--bg-soft);padding:34px 0 44px}
.wt-new .hd{max-width:1240px;margin:0 auto 16px;padding:0 16px;display:flex;align-items:center;gap:14px}
.wt-new .nb{background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:.72rem;letter-spacing:1px;border-radius:8px;
  padding:8px 14px;box-shadow:0 6px 14px -6px rgba(247,148,29,.6)}
.wt-new h2{font-size:1.15rem;font-weight:800;line-height:1.3}
.wt-new .hsub{font-size:.74rem;color:var(--text-mute)}
.wt-new .seeall{margin-left:auto;font-size:.8rem;color:#fff;background:var(--primary-dd);font-weight:700;text-decoration:none;
  border-radius:99px;padding:9px 20px;white-space:nowrap}
.wt-new .wt-pgrid{max-width:1240px;margin:0 auto;padding:0 16px}

/* news room (คู่การ์ด) */
.wt-newsroom{background:var(--bg);padding:36px 0 48px}
.wt-newsroom h2{font-family:var(--display);font-size:1.6rem;letter-spacing:2px;text-transform:lowercase;margin-bottom:2px}
.wt-newsroom .sub{font-size:.8rem;color:var(--text-mute);margin-bottom:22px}
.wt-newsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px}
@media(max-width:520px){.wt-newsgrid{grid-template-columns:1fr}}
.wt-np{display:grid;grid-template-columns:1fr 1fr;cursor:pointer;text-decoration:none;color:var(--text)}
.wt-np .im{aspect-ratio:1/1;border-radius:4px 0 0 4px;display:grid;place-items:center;font-size:3rem;color:#fff;overflow:hidden}
.wt-np .im img{width:100%;height:100%;object-fit:cover}
.wt-np .tx{background:var(--bg);border:1px solid rgba(42,32,22,.08);border-left:none;border-radius:0 4px 4px 0;
  padding:18px;display:flex;flex-direction:column;position:relative;transition:.18s}
.wt-np:hover .tx{box-shadow:0 14px 30px -14px rgba(42,32,22,.25)}
.wt-np .meta{font-size:.66rem;color:var(--text-mute);margin-bottom:9px}
.wt-np b{font-size:.98rem;line-height:1.5}
.wt-np:hover b{color:var(--primary-dd)}
.wt-np .ex{font-size:.74rem;color:var(--text-mute);margin-top:auto;padding-top:14px;line-height:1.6;padding-right:44px}
.wt-np .go2{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;background:var(--primary);
  color:var(--primary-ink);display:grid;place-items:center;font-size:.95rem}
@media(max-width:640px){.wt-np{grid-template-columns:1fr}.wt-np .im{border-radius:4px 4px 0 0}.wt-np .tx{border-left:1px solid rgba(42,32,22,.08);border-top:none;border-radius:0 0 4px 4px}}
.wt-nlt{margin-top:34px;background:var(--bg-soft);border-radius:16px;padding:26px;text-align:center}
.wt-nlt b{font-size:1rem}
.wt-nlt p{font-size:.8rem;color:var(--text-mute);margin:4px 0 14px}
.wt-nlt .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.wt-nlt input{font-size:.85rem;padding:11px 16px;border-radius:99px;border:1.5px solid rgba(42,32,22,.18);min-width:260px}
.wt-nlt button{cursor:pointer;font-weight:800;font-size:.85rem;border:none;border-radius:99px;padding:11px 26px;background:var(--primary);color:#fff}
.wt-popc{margin-top:36px}
.wt-popc h3{font-size:.95rem;margin-bottom:12px;letter-spacing:.5px}
.wt-popc .row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.wt-pc{border-radius:14px;overflow:hidden;aspect-ratio:1/.82;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;color:#fff;font-weight:800;font-size:.9rem;text-shadow:0 2px 8px rgba(0,0,0,.55);cursor:pointer;transition:.2s;
  text-decoration:none;text-align:center;padding:14px;box-shadow:0 8px 20px -12px rgba(42,32,22,.45);position:relative}
.wt-pc .ic{font-size:2.1rem;line-height:1;filter:drop-shadow(0 3px 7px rgba(0,0,0,.4));position:relative;z-index:1}
.wt-pc .lb{position:relative;z-index:1}
.wt-pc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.28));pointer-events:none}
.wt-pc:hover{transform:translateY(-4px);box-shadow:0 16px 30px -12px rgba(42,32,22,.55)}

/* ───────── หน้า PRODUCTS / รวมสินค้า ───────── */
.wt-plhero{background:var(--primary);color:#fff;text-align:center;padding:56px 16px 64px}
.wt-plhero h1{font-size:2.2rem;font-weight:700;letter-spacing:.5px}
.wt-plhero .sub{font-size:.85rem;opacity:.9;margin-top:6px}
.wt-plbar{max-width:1240px;margin:14px auto 0;padding:0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wt-plbar .fbtn{background:#22262c;color:#fff;font-size:.78rem;font-weight:700;border-radius:99px;padding:8px 18px;cursor:pointer;border:none}
.wt-plbar .sort{margin-left:auto;font-size:.78rem;color:#5a5244;border-bottom:2px solid var(--primary);padding-bottom:2px;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.wt-plgrid{max-width:1240px;margin:20px auto 0;padding:0 16px 52px}
.wt-plgrid .wt-pgrid{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.wt-plgrid .wt-pgrid{grid-template-columns:repeat(2,1fr)}}

/* ───────── หน้า account (login / สมัครสมาชิก) — โครงไว้ก่อน (ยังไม่มี backend) ───────── */
.wt-auth{max-width:440px;margin:44px auto 64px;padding:0 16px}
.wt-auth .card{background:var(--bg);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:26px}
.wt-auth .tabs{display:flex;gap:6px;background:var(--bg-soft);border-radius:12px;padding:5px;margin-bottom:20px}
.wt-auth .tabs button{flex:1;border:none;background:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:.9rem;padding:10px;border-radius:9px;color:var(--text-dim)}
.wt-auth .tabs button.on{background:var(--primary);color:var(--primary-ink)}
.wt-auth h1{font-family:var(--display);font-size:1.35rem;margin-bottom:4px}
.wt-auth p.sub{font-size:.82rem;color:var(--text-mute);margin-bottom:16px}
.wt-auth label{display:block;font-size:.8rem;font-weight:600;color:var(--text-dim);margin:12px 0 5px}
.wt-auth input{width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--border-2);background:var(--bg);color:var(--text);font-family:inherit;font-size:.92rem}
.wt-auth input:focus{outline:2px solid var(--primary);border-color:transparent}
.wt-auth .go{width:100%;margin-top:18px;padding:13px;border:none;border-radius:11px;background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:.95rem;cursor:pointer}
.wt-auth .soc{display:flex;gap:10px;margin-top:14px}
.wt-auth .soc button{flex:1;padding:11px;border:1px solid var(--border-2);border-radius:10px;background:var(--bg);cursor:pointer;font-family:inherit;font-weight:600;font-size:.85rem;color:var(--text)}
.wt-auth .link{margin-top:12px;text-align:center;font-size:.8rem}
.wt-auth .link a{color:var(--primary-dd);font-weight:600}
.wt-auth .note{margin-top:16px;font-size:.72rem;color:var(--text-mute);text-align:center;line-height:1.6}
.wt-auth form{display:none}.wt-auth form.on{display:block}

/* ───────── news: ปุ่มติดตาม (FB/LINE) + QR สแกน (แทนกล่องอีเมล) ───────── */
.wt-follow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.wt-follow a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:700;font-size:.85rem;
  padding:11px 20px;border-radius:99px;border:1.5px solid var(--border-2);background:var(--bg);color:var(--text);transition:.15s}
.wt-follow a:hover{transform:translateY(-2px);border-color:var(--primary)}
.wt-follow a.fb{background:#1877f2;color:#fff;border-color:#1877f2}
.wt-follow a.line{background:#06c755;color:#fff;border-color:#06c755}
.wt-qr{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:8px}
.wt-qr img{width:132px;height:132px;border-radius:12px;background:#fff;padding:8px;box-shadow:var(--shadow-sm)}
.wt-qr div{font-size:.74rem;color:var(--text-mute);font-weight:600;letter-spacing:.5px}

/* ───────── หน้า ติดต่อเรา (contact.html) ───────── */
.wt-cpage{max-width:1000px;margin:40px auto 60px;padding:0 16px}
.wt-cpage h1{font-family:var(--display);font-size:1.7rem;text-align:center;margin-bottom:4px}
.wt-cpage .lead{text-align:center;color:var(--text-mute);font-size:.9rem;margin-bottom:28px}
.wt-cpage .grid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start}
@media(max-width:760px){.wt-cpage .grid{grid-template-columns:1fr}}
.wt-chan{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:480px){.wt-chan{grid-template-columns:1fr}}
.wt-chan a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:14px 16px;transition:.15s}
.wt-chan a:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-sm)}
.wt-chan .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.25rem;flex:none;
  background:var(--glass-2)}
.wt-chan .ico.line{background:#06c755;color:#fff}.wt-chan .ico.fb{background:#1877f2;color:#fff}
.wt-chan .ico.ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:#fff}
.wt-chan .tt{font-weight:700;font-size:.9rem;line-height:1.3}
.wt-chan .ss{font-size:.72rem;color:var(--text-mute)}
.wt-cqr{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:22px;text-align:center}
.wt-cqr img{width:170px;height:170px;border-radius:12px;background:#fff;padding:10px;box-shadow:var(--shadow-sm)}
.wt-cqr b{display:block;margin-top:12px;font-size:.92rem}
.wt-cqr p{font-size:.76rem;color:var(--text-mute);margin-top:4px}
.wt-cqr .join{display:inline-block;margin-top:12px;background:#06c755;color:#fff;font-weight:800;font-size:.85rem;
  text-decoration:none;padding:10px 24px;border-radius:99px}
.wt-cform{margin-top:26px;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:22px}
.wt-cform h3{font-size:1rem;margin-bottom:12px}
.wt-cform label{display:block;font-size:.8rem;font-weight:600;color:var(--text-dim);margin:10px 0 5px}
.wt-cform input,.wt-cform textarea{width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--border-2);
  background:var(--bg);color:var(--text);font-family:inherit;font-size:.92rem}
.wt-cform textarea{min-height:110px;resize:vertical}
.wt-cform input:focus,.wt-cform textarea:focus{outline:2px solid var(--primary);border-color:transparent}
.wt-cform button{margin-top:16px;padding:12px 30px;border:none;border-radius:11px;background:var(--primary);
  color:var(--primary-ink);font-weight:800;font-size:.92rem;cursor:pointer}

/* ============================================================
   หน้าแรกใหม่ v2 (23 ก.ค. 2026) — 4 ฮีโร่ + สินค้าแนะนำ + รูปดารา + news
   ยกมาจากพรีวิวที่ลูกค้าเคาะแล้ว · มาร์คีปล่อยเต็มจอ (self-manage)
   คลิป/ข่าวจำกัดกลาง · สินค้า/รูปดารา = ไทล์ขนาดคงที่
   ============================================================ */
/* ปุ่มไอคอนนีออนลอย (popup) — ไม่กินพื้นที่บล็อก */
.wt-float{position:absolute;bottom:20px;z-index:6;margin:0;animation:wtFloatY 3s ease-in-out infinite}
.wt-float.l{left:26px} .wt-float.r{right:26px}
/* ปุ่มไอคอน = ป็อปอัพลอย (absolute) ลอยทับบนเนื้อหา ไม่แตะโครงสร้าง/ไม่ดันเลย์เอาต์
   hero1 ยกสูง 48px เลี่ยง ticker ล่าง (คงไว้) · hero2/3/4 มุมล่างซ้ายที่ 20px (ค่า base) */
.wt-hero1 .wt-float{bottom:48px}
.wt-icobtn{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.wt-icobtn img{width:88px;height:88px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 22px rgba(60,140,255,.6),0 8px 20px rgba(0,0,0,.5);transition:transform .2s}
.wt-icobtn:hover img{transform:scale(1.08)}
@keyframes wtFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.wt-float{animation:none}}
@media(max-width:760px){.wt-float{left:50%!important;right:auto;transform:translateX(-50%);bottom:12px}.wt-icobtn img{width:66px;height:66px}}
/* ฮีโร่1 การ์ดวนลูป */
.wt-hero1{min-height:auto!important}
.wt-hero1 .wt-in{padding-top:24px!important;padding-bottom:54px!important}
.wt-cmarq{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wt-cmarq .trk{display:flex;width:max-content;animation:wtSlideX 95s linear infinite;will-change:transform}
.wt-cmarq:hover .trk{animation-play-state:paused}
.wt-cmarq img{height:170px;border-radius:9px;flex:0 0 auto;margin-right:16px;box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 20px rgba(232,193,90,.25)}
@keyframes wtSlideX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ⭐ ฮีโร่ 2 (gif/วิดีโอ) = แบนเนอร์ responsive เต็มเฟรม · ฮีโร่ 3/4 = สูงพอดีเนื้อหา (กันช่องว่างดำโล่ง) */
.wt-home{--bannerH:clamp(260px,28vw,440px)}
/* ฮีโร่2 โหมด media — วิดีโอ/รูป cover เต็มเฟรม ไม่ล็อกกว้าง ไม่มีขอบ */
.wt-hero2--media{min-height:var(--bannerH)!important;height:var(--bannerH);overflow:hidden}
.wt-hero2--media .wt-in{padding:0!important;max-width:none!important;width:100%;height:100%;margin:0}
.wt-hero2--media #heroYt,.wt-hero2--media .wt-h2media{position:relative;width:100%;height:100%;overflow:hidden}
/* ฮีโร่ 4 เมื่อใช้โหมดสื่อ = สูงเท่าแบนเนอร์ (ทับ min-height 464 ของ hero3/4) */
.wt-hero4.wt-hero2--media{min-height:var(--bannerH)!important;height:var(--bannerH)!important}
.wt-hero4.wt-hero2--media .wt-in{padding:0!important;max-width:none!important;width:100%;height:100%;margin:0}

/* ══════════ 3 ระบบใหม่ = "แบ่งพื้นที่" ในฮีโร่ 1/2/4 · แผงขวายืดเต็มสูง (justify:space-between) ไม่ลอยเป็นป็อปอัพ ══════════ */
.wt-newside{background:linear-gradient(180deg,#171226,#12101c);display:flex;flex-direction:column;min-width:0;
  border-left:1px solid rgba(255,255,255,.08);overflow:hidden}

/* hero1: การ์ด(ซ้าย) + 🔨 ประมูล(ขวา) — สูงพอดีเนื้อหา (ไม่บังคับ bannerH) · full-bleed ไม่มี padding ลอย */
.wt-hero1{min-height:0!important}
.wt-hero1 .wt-in.wt-h1split{display:flex!important;flex-direction:row!important;align-items:stretch;gap:0;padding:0 0 34px!important;max-width:none!important;width:100%}
.wt-h1main{flex:1 1 0;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;padding:16px 0}
.wt-h1split .wt-auction{flex:0 0 clamp(280px,var(--aucW,32%),680px);min-width:0}
/* การ์ดใหญ่ขึ้นให้เต็มความสูงฮีโร่ (เดิม 170px ตายตัว → เล็กลอย) */
.wt-h1main .wt-cmarq img{height:clamp(180px,20vw,238px)}

/* hero2: สื่อ(ซ้าย) + 📡 สตรีม(ขวา) */
.wt-hero2--media .wt-in.wt-h2split{display:flex!important;flex-direction:row!important;align-items:stretch;padding:0!important;max-width:none!important;width:100%;height:100%;margin:0}
.wt-h2split .wt-h2media{flex:1 1 0;min-width:0;position:relative;overflow:hidden;height:var(--bannerH)}
.wt-h2split .wt-h2media #heroYt{position:relative;width:100%;height:100%;overflow:hidden}
.wt-h2split .wt-stream{flex:0 0 clamp(280px,var(--streamW,42%),760px);height:var(--bannerH);min-width:0}

/* hero4: 🎁 ลุ้นรางวัล(ซ้าย) + 🤝 สปอนเซอร์(ขวา) */
.wt-hero4{min-height:var(--bannerH)!important;height:var(--bannerH)!important;overflow:hidden}
.wt-hero4 .wt-in.wt-h4split{display:flex!important;flex-direction:row!important;align-items:stretch;padding:0!important;max-width:none!important;width:100%;height:100%}
.wt-h4main{flex:1 1 0;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wt-h4bg{position:absolute;inset:0;z-index:0}
.wt-h4bg video,.wt-h4bg img,.wt-h4bg .wt-hero2img,.wt-h4bg .wt-ythost{width:100%;height:100%;object-fit:cover}
.wt-h4bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 50%,rgba(8,6,20,.25),rgba(8,6,20,.72))}
.wt-h4ov{position:relative;z-index:2;display:flex;flex-direction:column;gap:13px;align-items:center;text-align:center;padding:clamp(20px,3vw,40px)}
/* ═══ ข้อความ hero คลิกได้ (แทนปุ่ม pill · เด้งไปตามลิงก์ที่แอดมินตั้ง) ═══ */
.wt-ovlink{pointer-events:auto;display:inline-block;text-decoration:none;color:inherit;cursor:pointer;transition:transform .15s,filter .15s}
.wt-ovlink:hover{transform:translateY(-2px);filter:brightness(1.06)}
.wt-ovlink:hover .wt-ovtitle{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.wt-h4link{text-decoration:none;color:inherit;cursor:pointer;transition:transform .15s,filter .15s}
.wt-h4link:hover{transform:translateY(-2px);filter:brightness(1.06)}
.wt-h4link:hover .wt-gifph{text-decoration:underline;text-underline-offset:5px}
.wt-spon-hlink{text-decoration:none;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:filter .15s}
.wt-spon-hlink:hover{filter:brightness(1.12)}
.wt-spon-hlink .wt-spon-arrow{transition:transform .15s}
.wt-spon-hlink:hover .wt-spon-arrow{transform:translateX(3px)}
.wt-h4sub{margin:0;color:rgba(255,255,255,.92);font-weight:600;font-size:clamp(.85rem,1.6vw,1.05rem);text-shadow:0 2px 10px rgba(0,0,0,.6);max-width:32ch}
/* ฮีโร่ 4 = แบ่งครึ่ง 50/50 (ลุ้นรางวัล ซ้าย : สปอนเซอร์ ขวา เท่ากัน) */
.wt-h4split .wt-spon{flex:1 1 0;min-width:0}

/* ── 🔨 ประมูล: แผงเต็มสูง (หัวข้อบน · สินค้ากลาง flex:1 · โน้ตล่าง) ── */
.wt-auction{padding:clamp(15px,2vw,24px);justify-content:space-between}
.wt-auc-h{font-weight:800;font-size:1.02rem;color:#ffcf6a;display:flex;align-items:center;gap:7px}
.wt-auc-body{display:flex;gap:14px;align-items:center;flex:1;min-height:0;margin:6px 0}
/* รูปสินค้าเด่น: แสงสปอตไลต์ทอง + กรอบทอง + ป้าย 🔥 */
.wt-auc-imgwrap{position:relative;flex:0 0 auto;display:grid;place-items:center;align-self:center}
.wt-auc-imgwrap::before{content:"";position:absolute;inset:-22%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,193,90,.55),rgba(255,157,60,.15) 55%,transparent 72%);
  filter:blur(4px);animation:wtAucGlow 3.2s ease-in-out infinite}
@keyframes wtAucGlow{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){.wt-auc-imgwrap::before{animation:none}}
.wt-auc-img{position:relative;z-index:1;width:96px;height:96px;border-radius:13px;object-fit:cover;background:#0d0b16;flex:0 0 auto;display:grid;place-items:center;font-size:2.3rem;border:2px solid rgba(255,207,106,.75);box-shadow:0 8px 22px rgba(255,150,50,.35)}
.wt-auc-hot{position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:2;white-space:nowrap;
  font-size:.6rem;font-weight:800;color:#2a1500;background:linear-gradient(90deg,#ffd884,#ff9d3c);
  padding:2px 8px;border-radius:999px;box-shadow:0 3px 9px rgba(0,0,0,.45)}
.wt-auc-desc{font-size:.74rem;color:#b7afce;line-height:1.35}
.wt-auc-stats{display:flex;gap:9px;flex-wrap:wrap;margin-top:1px}
.wt-auc-stats .s{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:5px 10px;line-height:1.2}
.wt-auc-stats .s span{display:block;font-size:.63rem;color:#9d95bd}
.wt-auc-stats .s b{font-size:1rem;color:#e8e2f7}
.wt-auc-stats .s.hi{background:rgba(51,224,138,.1);border-color:rgba(51,224,138,.3)}
.wt-auc-stats .s.hi b{color:#33e08a}
.wt-auc-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.74rem;color:#c9c1e0;margin-top:1px}
.wt-auc-timer b{color:#ffcf6a;font-variant-numeric:tabular-nums;font-weight:800}
.wt-auc-bidders b{color:#fff}
.wt-auc-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.wt-auc-name{font-weight:800;font-size:1.06rem;color:#fff;line-height:1.2}
.wt-auc-bid{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.wt-auc-bid input{flex:1 1 130px;min-width:0;padding:9px 11px;border-radius:9px;background:#0d0b16;border:1px solid #3a3157;color:#eee;font:inherit;font-size:.9rem}
.wt-auc-bid>.wt-liqbtn,.wt-auc-bid>button{flex:0 0 auto;white-space:nowrap;padding:.55em 1em}
.wt-auc-note{font-size:.7rem;color:#8a83a6;display:flex;align-items:center;gap:5px}

/* ── 📡 สตรีม: แผงเต็มสูง · 2 โหมด (แนวตั้ง TikTok = ดีฟอลต์ / แนวนอน 16:9) — แอดมินสลับได้ ── */
.wt-stream{padding:14px;display:flex;flex-direction:column}
.wt-stream-h{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.98rem;margin-bottom:10px;color:#fff;flex-wrap:wrap}
/* แนวตั้ง = การ์ด portrait 9:16 เรียงแถวเดียว N คอลัมน์ · จัดกึ่งกลางแนวตั้ง (ไม่ยืดจนผอม) */
.wt-stream .wt-lg-vertical{display:grid!important;align-content:center;justify-items:stretch}
/* n1 ต้อง stretch ไม่ใช่ center — ไม่งั้นแถวสูงตามเนื้อหา แล้ว height:100% ของการ์ดไม่มีอะไรให้อ้างอิง
   → การ์ดยุบเหลือ min-height 92px แล้วโดน aspect-ratio 9/16 บีบกว้างเหลือ ~52px (เจอตอนเหลือช่องไลฟ์ช่องเดียว) */
.wt-stream .wt-lg-vertical.n1{grid-template-columns:1fr;justify-items:center;align-content:stretch}
.wt-stream .wt-lg-vertical.n2{grid-template-columns:repeat(2,1fr)}
.wt-stream .wt-lg-vertical.n3{grid-template-columns:repeat(3,1fr)}
.wt-stream .wt-lg-vertical.n4{grid-template-columns:repeat(4,1fr)}
.wt-stream .wt-lg-vertical .wt-live-card{aspect-ratio:9/16;width:100%;max-height:100%;max-width:100%}
.wt-stream .wt-lg-vertical.n1 .wt-live-card{width:auto;height:100%;min-width:120px}
/* แนวนอน = การ์ด 16:9 ซ้อนลงเป็นคอลัมน์
   min-height:0 จำเป็น — .wt-live-card มีพื้น min-height:92px ทำให้การ์ดหดต่ำกว่านั้นไม่ได้
   พอ 3-4 ใบ ความสูงรวม (4×92+gap) เกินความสูงแบนเนอร์ → ทะลุ overflow:hidden ของฮีโร่ แล้วโดนตัดหาย */
.wt-stream .wt-lg-horizontal{display:flex!important;flex-direction:column;min-height:0;overflow:hidden}
.wt-stream .wt-lg-horizontal .wt-live-card{flex:1 1 0;width:100%;min-height:0}
/* แนวนอน "เคียงกัน" (hrow) — 16:9 วางข้างเป็นแถว */
.wt-stream .wt-lg-hrow{display:flex!important;flex-direction:row;gap:9px;align-items:center;min-height:0;overflow:hidden}
.wt-stream .wt-lg-hrow .wt-live-card{flex:1 1 0;min-width:0;aspect-ratio:16/9;height:auto;max-height:100%}
/* แนวนอน "กริด 2×2" (hgrid) — 16:9 สี่จอ */
.wt-stream .wt-lg-hgrid{display:grid!important;grid-template-columns:repeat(2,1fr);gap:9px;align-content:center;min-height:0;overflow:hidden}
.wt-stream .wt-lg-hgrid .wt-live-card{aspect-ratio:16/9;width:100%;min-height:0;max-height:100%}

/* ══════════ มือถือ (≤860): แบ่งพื้นที่→ซ้อนแนวตั้ง · แผงกว้างเต็ม สูงตามเนื้อหา ══════════ */
@media(max-width:860px){
  .wt-hero1,.wt-hero2,.wt-hero4,.wt-hero2--media{height:auto!important;min-height:0!important;overflow-x:clip!important;overflow-y:visible!important}
  /* overflow:visible ข้างบนจำเป็น (ไม่งั้นการ์ดที่ซ้อนแนวตั้งโดนตัด) แต่มันปลดตัวตัดเรืองแสง
     ของ .wt-hero::before ที่ยื่นออกนอกกรอบ 20% ทุกด้านไปด้วย → หน้าเว็บเลื่อนซ้ายขวาได้ ~20%
     (วัดจริง: จอ 768 หน้ากว้าง 910) · บนมือถือให้เรืองแสงพอดีกรอบ ไม่ต้องยื่นออกมา */
  .wt-hero::before{inset:0!important}
  /* ⚠️ ต้องเขียน selector ให้ specificity สูงเท่าฝั่งเดสก์ท็อป (.wt-hero1 .wt-in.wt-h1split = 0-3-0)
     เดิมเขียนสั้นเป็น .wt-h1split (0-1-0) → แพ้ แม้จะมี !important ทั้งคู่ (!important เท่ากันแล้วตัดสินที่ specificity)
     ผลคือบนมือถือแผงประมูลไม่ซ้อนลงล่าง แต่เรียงข้างกันจนหลุดออกนอกจอ และหน้าเว็บกว้างเป็น 2 เท่า
     พี่น้องอีก 2 ตัว (.wt-h2split/.wt-h4split) เขียนเต็มอยู่แล้วจึงไม่โดน */
  .wt-hero1 .wt-in.wt-h1split,.wt-hero2--media .wt-in.wt-h2split,.wt-hero4 .wt-in.wt-h4split{flex-direction:column!important;height:auto!important;min-height:0!important}
  .wt-h1main,.wt-h2split .wt-h2media,.wt-h4main,
  .wt-h1split .wt-auction,.wt-h2split .wt-stream,.wt-h4split .wt-spon{flex:0 0 auto!important;width:100%!important;height:auto!important}
  .wt-newside{border-left:none;border-top:1px solid rgba(255,255,255,.08)}
  .wt-h2split .wt-h2media{min-height:clamp(200px,52vw,320px)}
  .wt-h4main{min-height:clamp(190px,48vw,300px)}
  .wt-h2split .wt-stream{min-height:clamp(250px,66vw,360px)}
  .wt-auc-body{margin:10px 0}
  .wt-auc-bid input,.wt-auc-bid>.wt-liqbtn,.wt-auc-bid>button{flex:1 1 100%}
  /* มือถือ: แนวตั้ง 3–4 ช่อง → 2 คอลัมน์ (ไม่ให้การ์ดแคบเกินไป) */
  .wt-stream .wt-lg-vertical.n3,.wt-stream .wt-lg-vertical.n4{grid-template-columns:repeat(2,1fr)}
}

/* ── สตรีม (live cards) ── */
.wt-stream-tag{font-size:.72rem;font-weight:800;color:#25f4ee;background:rgba(37,244,238,.12);border:1px solid rgba(37,244,238,.35);padding:2px 9px;border-radius:999px}
.wt-stream-more{font-size:.68rem;font-weight:700;color:#a79fc4;background:rgba(255,255,255,.07);padding:2px 8px;border-radius:999px}
.wt-stream-join{display:block;margin-top:9px;text-align:center;font-size:.78rem;font-weight:700;color:#25f4ee;
  text-decoration:none;background:rgba(37,244,238,.08);border:1px solid rgba(37,244,238,.28);border-radius:9px;padding:7px}
.wt-stream-join:hover{background:rgba(37,244,238,.16)}
.wt-live-grid{animation:wtFadeIn .45s ease}
@keyframes wtFadeIn{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wt-live-grid{animation:none}}
.wt-live-dot{width:9px;height:9px;border-radius:50%;background:#ff2c55;box-shadow:0 0 0 4px rgba(255,44,85,.22);animation:wtBlink 1.4s infinite}
@keyframes wtBlink{50%{opacity:.35}}
.wt-live-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;flex:1 1 auto;min-height:120px}
.wt-live-grid.n1{grid-template-columns:1fr}
.wt-live-card{position:relative;border-radius:11px;overflow:hidden;background:#0d0b16;border:1px solid #2c2542;
  text-decoration:none;color:#fff;display:block;min-height:92px;transition:transform .15s,border-color .15s}
.wt-live-card:hover{transform:translateY(-2px);border-color:#ff2c55}
.wt-live-card .thumb{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:1.3rem;letter-spacing:.02em;
  background:radial-gradient(120% 120% at 30% 20%,#25f4ee33,transparent),radial-gradient(120% 120% at 80% 90%,#fe2c5533,transparent),#0d0b16;color:#fff}
/* placeholder ตอนไม่มีรูปปก — ตัวอักษรแรกของช่องตัวใหญ่ + ป้ายแพลตฟอร์ม (ดูตั้งใจกว่ากล่องว่าง) */
.wt-live-card .thumb{gap:8px;align-content:center}
/* ขนาดยืดตามการ์ด — การ์ด 4 ช่องจะแคบ ถ้า fix 64px จะล้น */
.wt-live-mark{font-size:clamp(1.1rem,2.2vw,2.4rem);line-height:1;font-weight:900;color:#fff;opacity:.92;
  text-shadow:0 4px 18px rgba(255,44,85,.45);display:grid;place-items:center;
  width:min(64px,42%);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(140deg,#25f4ee2e,#fe2c552e);border:1px solid #ffffff26}
.wt-live-plat{font-size:.62rem;font-weight:800;letter-spacing:.18em;color:#cfc7e6;opacity:.7}
.wt-live-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wt-live-badge{position:absolute;top:6px;left:6px;background:#ff2c55;color:#fff;font-size:.6rem;font-weight:800;
  padding:2px 7px;border-radius:5px;z-index:2;display:flex;align-items:center;gap:4px}
.wt-live-badge i{width:5px;height:5px;border-radius:50%;background:#fff;animation:wtBlink 1.2s infinite}
.wt-live-title{font-size:.8rem;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-live-sub{font-size:.68rem;color:#cfc7e6;margin-top:2px}
.wt-live-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* การ์ดสไตล์ TikTok live grid */
.wt-hls-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#000;display:block}
.wt-hls-off .wt-hls-video{display:none}
.wt-hls-off::after{content:"ไลฟ์ยังไม่พร้อม · แตะไปดูที่ TikTok";position:absolute;inset:0;display:grid;place-items:center;color:#8a83a6;font-size:.82rem;z-index:1;text-align:center;padding:0 10px}
/* สตรีมตายแล้วห้ามติดป้าย LIVE ต่อ — กล่องดำที่ยังบอกว่ากำลังไลฟ์คือการโกหกผู้ใช้ */
.wt-hls-off .wt-live-badge{display:none}
.wt-live-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.wt-live-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:8px;
  padding:8px 9px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.wt-live-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#333;border:1px solid rgba(255,255,255,.55)}
.wt-live-av.ph{display:grid;place-items:center;font-size:.82rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#fe2c55,#25f4ee)}
/* flex:1 + min-width:0 = ตัดข้อความด้วย ellipsis แทนที่จะดันล้นออกนอกการ์ดตอนการ์ดแคบ */
.wt-live-txt{min-width:0;flex:1 1 auto;overflow:hidden}
.wt-live-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-live-badge .vc{font-weight:700;font-variant-numeric:tabular-nums}
.wt-live-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;opacity:0;
  display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:800;color:#fff;
  background:rgba(254,44,85,.92);padding:6px 13px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.4);pointer-events:none;transition:opacity .15s}
.wt-live-card:hover .wt-live-play{opacity:1}
/* การ์ดฝังเล่นในเว็บ (YouTube / TikTok embed ทางการ) — ป้ายทับไม่ให้บังการกดวิดีโอ */
.wt-live-embed{cursor:default}
.wt-live-embed .wt-live-badge,.wt-live-embed .wt-live-tags,.wt-live-embed .wt-live-meta{pointer-events:none}
.wt-live-embed:hover{transform:none}

/* ── สปอนเซอร์ + ปุ่ม liquid ── */
.wt-spon{padding:clamp(16px,2vw,26px);gap:12px;justify-content:space-between}
.wt-spon-h{font-weight:800;color:#fff;font-size:.95rem;display:flex;gap:7px;align-items:center}
.wt-spon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;width:100%}
.wt-spon-item{background:#fff;border-radius:10px;height:56px;display:grid;place-items:center;overflow:hidden;text-decoration:none;padding:6px 10px}
.wt-spon-item img{max-width:86%;max-height:76%;object-fit:contain}
.wt-spon-empty{color:#a79fc4;font-size:.85rem;line-height:1.5}
.wt-liqbtn{position:relative;display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  padding:.8em 1.6em;border-radius:999px;border:none;cursor:pointer;font:inherit;font-weight:800;color:#fff;text-decoration:none;
  background:linear-gradient(90deg,#7c3aed,#e0463f,#f59e0b,#7c3aed);background-size:300% 100%;
  animation:wtLiquid 6s linear infinite;box-shadow:0 10px 26px -8px rgba(124,58,237,.7);overflow:hidden;align-self:flex-start}
.wt-liqbtn::before{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);animation:wtShine 3.4s ease-in-out infinite}
.wt-liqbtn:hover{transform:translateY(-2px);filter:brightness(1.06)}
@keyframes wtLiquid{to{background-position:300% 0}}
@keyframes wtShine{0%,100%{transform:translateX(-120%)}55%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.wt-liqbtn,.wt-liqbtn::before,.wt-live-dot,.wt-live-badge i{animation:none}}
.wt-hero2--media video,.wt-hero2--media .wt-hero2img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* ฮีโร่2 โหมด YouTube (fallback) */
.wt-hero2:not(.wt-hero2--media){min-height:auto!important}
.wt-hero2:not(.wt-hero2--media) .wt-in{padding-top:24px!important;padding-bottom:24px!important}
/* ⭐ ฮีโร่ 1 (การ์ด) + 3 (กล่อง) เต็มความกว้างจอ — หลุด container max-width ของ .wt-in
   (เดิมถูกจำกัด ~1560px จอกว้างเลยเหลือขอบว่างซ้าย-ขวา · โชว์การ์ด/กล่องมากขึ้นตามจอ) */
.wt-hero1 .wt-in,.wt-hero3 .wt-in{max-width:none!important;width:100%!important;padding-left:0!important;padding-right:0!important}
.wt-hero3 .wt-in{padding:14px 0!important}
.wt-hero4 .wt-in{padding:clamp(34px,5vw,60px) 0!important}
/* กล่อง responsive */
.wt-boxrow img{height:clamp(150px,15vw,215px)}
/* ฮีโร่ 3/4 สูงเท่า gif (~464) = เดสก์ท็อปเท่านั้น · gate ด้วย min-width:861 → กฎนี้ "เข้าไม่ถึง" มือถือไม่ว่าอยู่ตรงไหนในไฟล์ (แก้ source-order trap ถาวร) · มือถือปล่อย height:auto ผ่านบล็อก @media(max-width:860) */
@media(min-width:861px){
  .wt-hero3{min-height:464px!important;height:auto!important;overflow:hidden}
  .wt-hero3 .wt-in{padding-top:26px!important;padding-bottom:26px!important}
}
/* ฮีโร่2 คลิป YouTube เต็มเฟรม (cover) — เล่นเอง วนลูป ไม่โชว์ปุ่ม/แบรนด์ · 1 คลิป=เต็ม · 2 คลิป=แบ่งครึ่ง */
.wt-ythost{position:absolute;inset:0;display:flex;background:#000}
.wt-ytcell{position:relative;flex:1 1 0;overflow:hidden}
.wt-ythost--2 .wt-ytcell+.wt-ytcell{border-left:2px solid rgba(0,0,0,.85)}
/* iframe 16:9 ขยายให้ครอบช่องเต็ม (cover) แล้ว overflow ตัดส่วนเกิน · กัน interaction กับยูทูป */
.wt-ytcov{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%,calc(var(--bannerH,360px)*1.78));aspect-ratio:16/9;height:auto;
  border:0;pointer-events:none}
/* ป้ายข้อความลอยทับสื่อ (cas:pace style) */
.wt-hero2ov{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(10px,1.4vw,18px);padding:clamp(20px,5vw,64px);pointer-events:none;
  background:linear-gradient(90deg,rgba(8,6,20,.55),rgba(8,6,20,.15) 55%,transparent)}
.wt-ovbadge{display:inline-block;font-size:clamp(.66rem,1.1vw,.82rem);font-weight:800;letter-spacing:.18em;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);
  padding:6px 16px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-transform:uppercase}
.wt-ovtitle{margin:0;color:#fff;font-weight:900;line-height:1.05;letter-spacing:-.01em;
  font-size:clamp(1.6rem,4.6vw,3.6rem);text-shadow:0 4px 26px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.5)}
.wt-ovsub{margin:0;color:rgba(255,255,255,.94);font-weight:600;max-width:min(90%,640px);
  font-size:clamp(.85rem,1.7vw,1.18rem);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.wt-ovbtn{pointer-events:auto;display:inline-flex;align-items:center;gap:.5em;margin-top:6px;
  font-weight:800;font-size:clamp(.9rem,1.5vw,1.05rem);color:#fff;text-decoration:none;
  background:linear-gradient(135deg,#7c3aed,#e0463f);padding:.72em 1.7em;border-radius:999px;
  box-shadow:0 14px 34px -8px rgba(124,58,237,.7);transition:transform .16s,box-shadow .16s}
.wt-ovbtn span{transition:transform .16s}
.wt-ovbtn:hover{transform:translateY(-2px);box-shadow:0 20px 44px -8px rgba(224,70,63,.7)}
.wt-ovbtn:hover span{transform:translateX(4px)}
/* ── ตำแหน่งป้ายข้อความ 9 จุด (แอดมินเลือกจากตาราง 3×3) — แกน x คุมชิดซ้าย/กลาง/ขวา + ทิศไล่เงา · แกน y คุมบน/กลาง/ล่าง ── */
.wt-ovlink{display:flex;flex-direction:column;gap:inherit;align-items:inherit;text-align:inherit}
.wt-ov-x-left{align-items:flex-start;text-align:left;background:linear-gradient(90deg,rgba(8,6,20,.55),rgba(8,6,20,.15) 55%,transparent)}
.wt-ov-x-center{align-items:center;text-align:center;background:radial-gradient(62% 74% at 50% 50%,rgba(8,6,20,.5),rgba(8,6,20,.16) 62%,transparent)}
.wt-ov-x-right{align-items:flex-end;text-align:right;background:linear-gradient(270deg,rgba(8,6,20,.55),rgba(8,6,20,.15) 55%,transparent)}
.wt-ov-y-top{justify-content:flex-start}
.wt-ov-y-middle{justify-content:center}
.wt-ov-y-bottom{justify-content:flex-end}
.wt-ovsub{max-width:min(100%,640px)}
@media(max-width:640px){.wt-hero2ov{align-items:center;text-align:center;justify-content:center;
  background:linear-gradient(rgba(8,6,20,.25),rgba(8,6,20,.55))}}  /* มือถือ = กลางเสมอ อ่านง่ายสุด */
/* ── ป้าย "เร็วๆ นี้" มาตรฐาน (โหมดกำลังมา — แอดมินเขียนข้อความเองได้) ── */
.wt-soonbox{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  text-align:center;padding:22px 16px;color:#fff;border:1.5px dashed rgba(255,255,255,.28);border-radius:13px;margin:4px}
.wt-soonbox .soon-badge{font-size:.68rem;font-weight:800;letter-spacing:.14em;color:#ffcf6a;
  background:rgba(255,207,106,.12);border:1px solid rgba(255,207,106,.4);padding:3px 12px;border-radius:999px}
.wt-soonbox .soon-ic{font-size:2.2rem;line-height:1}
.wt-soonbox b{font-size:1.05rem;font-weight:800}
.wt-soonbox p{font-size:.8rem;color:rgba(255,255,255,.75);line-height:1.55;max-width:34ch;margin:0}
/* ── ป้ายรับสมัครสปอนเซอร์ (ตอนยังไม่มีสปอนเซอร์) — ใหญ่เต็มแผง คลิกทั้งก้อน ── */
/* เต็มขอบแผงทั้งก้อน — ไม่มีเว้นขอบ/เส้นประ (ตัด padding ของ aside ทิ้งด้วย :has) */
.wt-spon:has(.wt-spon-recruit){padding:0}
.wt-spon-recruit{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;text-decoration:none;color:#fff;padding:26px 18px;margin:0;border-radius:0;
  background:linear-gradient(160deg,rgba(255,207,106,.12),rgba(124,58,237,.12));
  transition:background .18s}
.wt-spon-recruit:hover{background:linear-gradient(160deg,rgba(255,207,106,.2),rgba(124,58,237,.18))}
.wt-spon-recruit .ic{font-size:2.6rem;line-height:1}
.wt-spon-recruit b{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:900;letter-spacing:.02em}
.wt-spon-recruit p{margin:0;font-size:.86rem;color:rgba(255,255,255,.82);line-height:1.5}
.wt-spon-recruit .cta{margin-top:4px;font-weight:800;font-size:.88rem;color:#1c1206;
  background:linear-gradient(90deg,#ffd884,#ff9d3c);padding:9px 22px;border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(255,157,60,.55)}
/* ฮีโร่3 กล่องเลื่อนวนลูป */
.wt-boxwrap{overflow:hidden;width:100%;padding:24px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.wt-boxrow{display:flex;align-items:center;width:max-content;animation:wtSlideX 110s linear infinite;will-change:transform}
.wt-boxwrap:hover .wt-boxrow{animation-play-state:paused}
/* โหมดนิ่ง — ไม่เลื่อนเอง · เรียงเต็มจากซ้าย (fill ความกว้าง) · กว้างเกินเลื่อนแนวนอนเอง */
.wt-boxrow.static{animation:none;width:100%;justify-content:flex-start;flex-wrap:nowrap;padding-left:clamp(12px,3vw,40px)}
.wt-boxwrap:has(.wt-boxrow.static){overflow-x:auto;scrollbar-width:none}
.wt-boxrow>a,.wt-boxrow>img{flex:0 0 auto;margin-right:26px;display:block;line-height:0}
.wt-boxrow img{height:210px;width:auto;filter:drop-shadow(0 14px 28px rgba(0,0,0,.55));transition:transform .2s;cursor:pointer}
.wt-boxrow a:hover img,.wt-boxrow>img:hover{transform:translateY(-6px) scale(1.05)}
.wt-boxrow.static>a:last-child,.wt-boxrow.static>img:last-child{margin-right:0}
.wt-boxrow img:hover{transform:translateY(-6px) scale(1.05)}
/* ── แถวกล่อง: ปุ่ม ‹ › + จับลาก (ฮีโร่ 3 · เปิด-ปิดจากหลังบ้าน HOME_FLAGS.boxNav/boxNames) ── */
.wt-boxhost{position:relative}
.wt-boxscroll{cursor:grab;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wt-boxscroll::-webkit-scrollbar{display:none}
.wt-boxscroll.dragging{cursor:grabbing}
.wt-boxscroll.dragging a{pointer-events:none}
.wt-boxnav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.28);background:rgba(15,12,10,.72);color:#fff;font-size:1.7rem;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0 0 4px;backdrop-filter:blur(3px);box-shadow:0 6px 16px rgba(0,0,0,.45);transition:background .15s,opacity .15s}
.wt-boxnav:hover{background:rgba(15,12,10,.92)}
.wt-boxnav:disabled{opacity:.3;cursor:default}
.wt-boxnav.prev{left:12px}.wt-boxnav.next{right:12px}
@media(max-width:640px){.wt-boxnav{width:44px;height:44px;font-size:1.5rem}.wt-boxnav.prev{left:6px}.wt-boxnav.next{right:6px}}
.wt-boxlink{position:relative;text-decoration:none}
.wt-boxlink .nm{display:block;margin-top:7px;line-height:1.3;text-align:center;font-size:.78rem;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* ฮีโร่4 พื้นที่ GIF */
.wt-gifph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:#fff;font-weight:700;text-align:center;opacity:.9;min-height:180px}
.wt-gifph .big{font-size:2.4rem}
/* บล็อกขอบน้อยสุด (Recommend / รูปดารา) — ขอบบน-ล่างชิด · ภาพชนบน */
.wt-tight{padding:0;margin:0}
.wt-tight .wt-featgrid{padding:6px 3vw 8px}
.wt-tight .wt-rvwrap{padding:2px 0 8px}
/* สินค้าแนะนำ = ไทล์ขนาดคงที่ auto-fill (self-manage) */
.wt-featgrid{display:grid;grid-template-columns:repeat(auto-fill,168px);justify-content:center;gap:14px;padding:12px 3vw 24px}
@media(max-width:760px){.wt-featgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
.wt-featcard{background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:9px;text-align:center;box-shadow:var(--shadow-sm);text-decoration:none;color:var(--text)}
.wt-featcard img{width:100%;border-radius:7px;aspect-ratio:.72;object-fit:cover;background:var(--glass-2)}
.wt-featcard .nm{font-size:.8rem;font-weight:600;margin-top:8px;min-height:2.4em;line-height:1.2}
.wt-featcard .pr{color:var(--primary-dd);font-weight:800;margin-top:4px}
/* รูปดาราถ่ายกับสินค้า — เลื่อนวนลูป */
.wt-rvwrap{overflow:hidden;padding:6px 0 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.wt-rvtrack{display:flex;width:max-content;animation:wtSlideX 70s linear infinite;will-change:transform}
.wt-rvwrap:hover .wt-rvtrack{animation-play-state:paused}
.wt-rvcard{flex:0 0 168px;margin-right:14px;border-radius:11px;overflow:hidden;box-shadow:0 8px 22px -10px rgba(0,0,0,.35);
  background:var(--glass-2);position:relative;aspect-ratio:.72}
.wt-rvcard img{width:100%;height:100%;object-fit:cover;display:block}
.wt-rvcard .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--text-mute);font-weight:700;text-align:center;padding:10px;font-size:.8rem}
.wt-rvcard .ph .big{font-size:1.8rem}

/* ── บล็อกเนื้อหา static สำหรับคน + บอท (SEO) ─────────────────────────────
   ทั้งเว็บ render ด้วย JS ทำให้บอทเคยเห็นหน้าแรกเป็นข้อความแค่ 52 ตัวอักษร
   ส่วนนี้อยู่ใน HTML ตั้งแต่แรก อ่านได้ทันทีไม่ต้องรอ JS และเป็นเนื้อหาจริงที่ผู้ใช้อ่านได้ */
.wt-seo{padding:46px 0 30px;border-top:1px solid var(--glass-2);background:var(--bg-soft)}
.wt-seo .wt-in{max-width:1180px;margin:0 auto;padding:0 18px}
.wt-seo h1{font-family:var(--display,inherit);font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.25;margin-bottom:14px;color:var(--text)}
.wt-seo h2{font-size:clamp(1rem,1.6vw,1.15rem);margin:22px 0 8px;color:var(--text)}
.wt-seo p{font-size:.92rem;line-height:1.75;color:var(--text-dim);max-width:78ch}
.wt-seo strong{color:var(--text)}
/* ⚠️ ห้ามใช้ --brand ตรงนี้ — มันคือสีฟ้าเก่าที่ประกาศไว้ที่ :root และธีมไม่ได้ทับ
   ทำให้ลิงก์เป็นสีฟ้าจางบนพื้นสว่าง contrast 2.14:1 (เกณฑ์ 4.5) และผิดโทนแบรนด์ส้ม
   --primary คือสีเน้นของธีมที่ใช้จริง */
.wt-seo a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wt-seo a:hover{opacity:.78}
.wt-seonav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.wt-seonav a{border:1px solid var(--glass-2);border-radius:999px;padding:7px 14px;font-size:.85rem;color:var(--text)}
.wt-seonav a:hover{border-color:var(--primary);color:var(--primary)}

/* สีลิงก์ในบล็อกเนื้อหาบนธีมพื้นสว่าง — --primary (#f2681b) บนพื้น #e9e9ec ได้ contrast แค่ 2.56:1
   ต้องใช้ส้มเข้มกว่าถึงจะผ่านเกณฑ์อ่านออก 4.5:1 (สีแบรนด์ยังคงเดิม เปลี่ยนเฉพาะสีตัวอักษรลิงก์) */
[data-theme="wanna-orange"] .wt-seo a,
[data-theme="light"] .wt-seo a,
[data-theme="inkwell"] .wt-seo a,
[data-theme="sapphire"] .wt-seo a{color:#a63c05}
[data-theme="wanna-orange"] .wt-seonav a:hover,
[data-theme="light"] .wt-seonav a:hover{border-color:#a63c05;color:#a63c05}
@media(max-width:640px){.wt-seo{padding:32px 0 22px}.wt-seo p{font-size:.88rem}}

/* จองความสูงให้ container ที่ JS เติมทีหลัง — ไม่งั้นเนื้อหาที่อยู่ใต้มันถูกดันลงตอน JS ทำงาน
   นับเป็น layout shift (CLS) ซึ่งเป็นตัวชี้วัดที่ Google ใช้จัดอันดับ */
#header{min-height:90px}
#footer{min-height:340px}
@media(max-width:980px){#footer{min-height:560px}}
#prodGrid,.wt-plgrid{min-height:60vh}
/* ⚠️ id ต้องตรงกับที่ HTML ใช้จริง — เดิมเขียน #cardGrid ซึ่งไม่มีอยู่ในเว็บเลย กฎจึงตายเปล่า
   ผลคือหน้าคลังการ์ด CLS 0.594 (บล็อกเนื้อหาถูกกริดดันลงตอน JS เติมการ์ด 3,000 ใบ) */
#grid,#mkGrid,#packGrid,#chaseGrid{min-height:70vh}
#newsGrid,.wt-newsgrid{min-height:280px}
/* ═══ กริดข่าว — ตัวการ CLS 0.26 ของ news.html ═══
   วัดด้วย PerformanceObserver: entry เดียว value 0.2585 sources = .wt-nlt/.wt-popc/.wt-pc
   #newsList โตจาก 280px → 1246.6px หลัง initNews() เรนเดอร์ (t=461ms) ดันทุกอย่างใต้มันลง 966px
   ที่ fonts.ready ไม่มีอะไรขยับเลย = ไม่ใช่ฟอนต์ (Lighthouse โทษ "Web font loaded" ผิด)

   ⚠️ บทเรียน: รอบก่อนจอง min-height ถูกต้องแล้ว แต่ผมเขียน `.wt-newsgrid:empty{min-height:280px}`
   ต่อท้ายไว้กันช่องว่างเวลาไม่มีข่าว — ซึ่ง :empty มี specificity สูงกว่า และกริด "ว่างพอดี"
   ณ วินาทีที่ต้องจองที่ กฎกันช่องว่างเลยไปล้มกฎที่แก้ปัญหาเสียเอง CLS จึงไม่ขยับเลยสักทศนิยม
   → คราวนี้ไม่มี :empty เด็ดขาด
   ถ้าจำนวนข่าวเปลี่ยนมากต้องมาปรับเลขนี้ (ปัจจุบัน 15 การ์ด = 5 แถว)

   ⚠️ ต้องจองเฉพาะ #newsList (หน้าข่าว 15 การ์ด) ห้ามรวม #newsGrid ของหน้าแรกที่มีแค่ 2 การ์ด
   สูงจริง 297px — จอง 1250px แล้วการ์ดยืดตามแถว (grid stretch) กลายเป็นการ์ด 2 ใบสูง 1250px
   มีที่ว่างโล่งกลางการ์ด 953px และไม่ได้ช่วย CLS หน้าแรกเลยสักนิด (0.0948 เท่าเดิมเป๊ะ) */
@media(min-width:900px){#newsList{min-height:1250px}}
@media(max-width:520px){#newsList{min-height:1080px}}
#featGrid,.wt-featgrid{min-height:600px}
/* jsแทนที่ #heroPaidSlot ด้วย section.wt-hero4 ทั้ง element (outerHTML) → id หายจาก DOM
   กฎที่ผูกกับ id จึงคุมได้แค่ ~700ms แรก ต้องจองที่ตัวจริงด้วย */
#heroPaidSlot,.wt-hero4{min-height:300px}

/* ── จองความสูงฮีโร่หน้าแรก ─────────────────────────────────────────────────
   ฮีโร่ทุกก้อนถูก JS เติมเนื้อหาทีหลัง (การ์ดวนลูป/วิดีโอ/แผงประมูล/แผงไลฟ์)
   ก่อน JS ทำงานมันสูงแค่ 76-82px แล้วพองเป็น 304-390px ดันทั้งหน้าลงทีเดียว
   = CLS หน้าแรก 0.465 (เดสก์ท็อป) / 1.015 (มือถือ) ซึ่งเป็นตัวชี้วัดที่ Google ใช้จัดอันดับ
   ต้องใช้ !important + specificity สูงกว่า เพราะกฎเดิมตั้ง min-height:0!important ไว้ */
@media(min-width:861px){
  .wt-home .wt-hero1{min-height:304px!important}
  .wt-home #heroVideo{min-height:var(--bannerH)!important}
  .wt-home .wt-hero3{min-height:464px}
}
@media(max-width:860px){
  /* มือถือเรียงซ้อนลง — จองแยกทีละแผงตามที่ธีมมือถือกำหนดไว้แล้ว */
  .wt-home .wt-h1main{min-height:clamp(150px,42vw,230px)}
  .wt-home .wt-h1split .wt-auction{min-height:260px}
  .wt-home .wt-h2split .wt-stream{min-height:clamp(250px,66vw,360px)}
  .wt-home .wt-h4split .wt-spon{min-height:220px}
}
/* การ์ดในแถบวนลูป — รูปเปลี่ยนความกว้าง 90px→260px หลังโหลด ทำให้แถวขยับ */
.wt-cmarq .trk img{min-width:90px;aspect-ratio:5/7;object-fit:cover}
/* min-width 90px ไม่พอ — กว้างจริง 171px(เดสก์ท็อป)/129px(มือถือ)
   aspect-ratio ทำให้เบราว์เซอร์รู้ความกว้างตั้งแต่ก่อนรูปมาถึง (คู่กับ height ที่บรรทัด ~1765) */

/* จองความสูงแถบหมวดหมู่ (#catRow / #prodCats) — JS เติมทีหลัง โตจาก 32px เป็น 115px (เดสก์ท็อป)
   และ 26px เป็น 229-234px (มือถือ) ดันทั้งหน้าลง = ตัวการหลักของ CLS ทั้งหน้าแรกและหน้าสินค้า */
.wt-cats{min-height:115px}
@media(max-width:860px){
  .wt-cats{min-height:232px}
  /* เดิมล็อก 740px!important เพื่อรับการ์ดไลฟ์ 3 ใบซ้อนแนวตั้ง แต่มันดันเนื้อหาถัดไปหล่นไกลมาก
     เปลี่ยนเป็น clamp ยืดตามจอ + ให้กริดไลฟ์บนมือถือเลื่อนแนวนอนแทนซ้อนสูง (ดู .wt-live-grid ล่าง) */
  .wt-home .wt-hero2 .wt-h2split .wt-stream{min-height:clamp(300px,78vw,460px)}
  /* มือถือ: ไลฟ์เป็นแถวเดียวเลื่อนแนวนอน แทนซ้อนแนวตั้งหลายแถว (เดิมสูงพุ่ง 754px ดันเนื้อหา) */
  .wt-home .wt-hero2 .wt-lg-vertical{display:flex!important;grid-template-columns:none!important;
    gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .wt-home .wt-hero2 .wt-lg-vertical .wt-live-card{flex:0 0 auto;width:clamp(122px,38vw,150px);height:auto;
    aspect-ratio:9/16;max-height:100%;scroll-snap-align:start}
}
/* หน้าข่าว: กล่องรับข่าวสาร .wt-nlt ถูก JS ลบทิ้งทั้งก้อน (339px หายไป) → จองที่ตัวมันเองไม่ช่วย
   ต้องไม่ให้มันกินที่ตั้งแต่แรก */
.wt-nlt:empty{display:none}
/* หน้าเปิดแพ็ก: แถบผลเปิดล่าสุดกับการ์ดเด็ดประจำวัน JS เติมทีหลัง */
.livepulls{min-height:235px}
#potd{min-height:177px}

/* ฟุตเตอร์บนมือถือสูงจริง 756px (เพิ่งเพิ่มคอลัมน์นโยบายเข้าไปด้วย) */
@media(max-width:640px){#footer{min-height:760px}}

/* เคยใส่ #heroVideo{min-height:378px} กับ #auctionSlot{min-height:260px} — ถอนออกทั้งคู่
   วัดครบ 7 วิวพอร์ตแล้ว: ตัวแรกไม่ชนะที่ไหนเลย (เดสก์ท็อปแพ้ .wt-home #heroVideo ที่มี !important
   มือถือแพ้กฎ height:auto!important ของฮีโร่) และ 378px ยัง hardcode ค่าของจอ 1350px จอเดียว
   ตัวที่สองก็ไม่ช่วย เพราะกล่องประมูลไม่ได้โตเอง มันถูกดันลงจากข้างบน
   ตัวจริงที่ทำงานอยู่คือ .wt-home #heroVideo{min-height:var(--bannerH)} ซึ่งยืดตามจอถูกต้องแล้ว */

/* ── ทีมมือถือทดลองซื้อจริงแล้วพบ (390x844 iPhone) ─────────────────────────
   1) โมดัลผลเปิดแพ็กกว้าง 636px บนจอ 390px ปุ่มฝั่งขวาโดนตัด กดไม่ได้
      (documentElement ไม่ฟ้อง hscroll เพราะ overflow อยู่ในโมดัล) */
@media(max-width:640px){
  .open-overlay{overflow-x:hidden}
  .open-stage{max-width:100vw;padding:0 10px;box-sizing:border-box}
  .open-stage>*{max-width:100%}
  .open-actions,.open-actions2{flex-wrap:wrap}
  /* 2) ช่องติ๊กตัวกรอง 16x16 เล็กเกินกดยาก */
  .filters input[type=checkbox]{width:22px;height:22px}
  .filters label{min-height:40px;display:flex;align-items:center;gap:8px}
  /* 3) ปุ่มเข้าร่วมไลฟ์หน้าแรกสูง 36px */
  .wt-stream-join{min-height:44px;display:flex;align-items:center;justify-content:center}
}

/* ปุ่มปรับจำนวนในตะกร้า — ปุ่มกดขนาดนิ้วโป้ง 40px ตามเกณฑ์มือถือ */
.cart-qty{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:4px}
.cart-qty button{width:40px;height:40px;border-radius:10px;border:1px solid var(--border-2);
  background:var(--glass);color:var(--text);font-size:1.1rem;font-weight:800;cursor:pointer;line-height:1}
.cart-qty button:hover{border-color:var(--primary);color:var(--primary)}
.cart-qty b{min-width:28px;text-align:center;font-size:.95rem}

/* ── สีที่ต้องแยกตามธีม (บทเรียน: ใส่สีตายตัวเพื่อแก้ธีมสว่าง = ทำธีมมืดพัง) ──
   เขียวมิ้นต์ #3fd089 อ่านง่ายบนพื้นเข้ม แต่บนพื้นอ่อนได้แค่ 1.5-1.9
   ตัวเลขเหล่านี้อยู่บนชิปพื้นเขียวจางของตัวเอง ไม่ใช่พื้นขาว จึงต้องเข้มกว่าที่คำนวณบนขาว */
[data-theme="wanna-orange"] .fmv.up,[data-theme="light"] .fmv.up,
[data-theme="wanna-orange"] .market .trend.up,[data-theme="light"] .market .trend.up,
[data-theme="wanna-orange"] .cond.NM,[data-theme="light"] .cond.NM{color:#0f5c37}
/* ฟุตเตอร์ในธีมมืด — ส้มจ้าติดพื้นดำตัดกันแรงเกินไป ใช้พื้นเข้มของธีมแทน */
[data-theme="wanna-dark"]{--foot-bg:#2a1409}

/* ตะกร้าบนมือถือ: ชื่อการ์ดถูกบีบจนเหลือ "Be…" อ่านไม่ออกว่าเป็นใบไหน
   เพราะ 4 คอลัมน์ (รูป/ชื่อ/ราคา+จำนวน/ลบ) เบียดกันในจอ 390px → จัดใหม่เป็น 2 บรรทัด */
/* ⚠️ เดิม markup ใส่ inline style (flex:1;min-width:0 + white-space:nowrap) ไว้ที่ตัว div
   inline ชนะ selector ทุกตัว กฎใน media query จึงไม่มีผลเลย → ถอด inline ออกจาก app.js
   แล้วย้ายมาคุมด้วยคลาส .cart-info/.nm ตรงนี้แทน (บทเรียนเดียวกับ :empty ที่ล้มกฎตัวเอง) */
.cart-info{flex:1;min-width:0}
.cart-info .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){
  .cart-row{flex-wrap:wrap;gap:10px}
  .cart-info{flex:1 1 100%;order:2}
  .cart-info .nm{white-space:normal;overflow:visible;text-overflow:clip;font-size:.9rem;line-height:1.35}
  .cart-row>div:nth-child(3){order:3;margin-left:auto;text-align:right}
  .cart-row>.icon-btn{order:4}
}

/* toast ลอยทับหัวข้อโมดัลตะกร้าบนมือถือ ~2 วิ (จอแคบ โมดัลกินเต็มจอ ไม่มีที่ให้หลบ)
   ตอนมีโมดัลเปิดอยู่ ย้าย toast ไปไว้ล่างจอแทน — ยังเห็นได้ แต่ไม่บังสิ่งที่ผู้ใช้กำลังอ่าน */
@media(max-width:640px){
  body:has(.modal-bg.open) .toast-wrap{top:auto;bottom:16px;right:12px;left:12px}
}

/* การ์ดที่ยังไม่มีราคาตลาด — ขึ้น "สอบถามราคา" แทนราคาที่เดาขึ้นมาเอง */
.card .price .ask{font-size:.86rem;font-weight:700;color:var(--text-dim)}
.card .btn-ghost.add{display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;font-size:.8rem;border-radius:10px;min-height:44px;white-space:nowrap}

/* แถบการ์ดเลื่อนหน้าเปิดแพ็ก ทำให้จอมือถือเลื่อนแนวนอนได้ 19px (scrollWidth 409 บนจอ 390)
   .lp-row มี overflow:hidden แล้ว แต่ .livepulls ที่ครอบอยู่ยังปล่อยให้ track ยื่นออกไป */
.livepulls{overflow:hidden;max-width:100%}
.lp-row{max-width:100%}

/* ตารางในหน้ารายเซ็ต (หน้า static ที่สร้างจากข้อมูลจริง) */
.wt-settable{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:.88rem}
.wt-settable th,.wt-settable td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}
.wt-settable th{color:var(--text-dim);font-weight:700;font-size:.8rem}
.wt-settable tr:last-child td{border-bottom:none}
@media(max-width:520px){.wt-settable{font-size:.8rem}.wt-settable th,.wt-settable td{padding:6px 6px}}

/* ลิงก์ข้ามไปเนื้อหาหลัก — คนใช้คีย์บอร์ดต้องกด Tab 33 ครั้งผ่านเมนูก่อนถึงเนื้อหาทุกครั้งที่เปลี่ยนหน้า
   ซ่อนไว้จนกว่าจะโฟกัส (ไม่ใช่ display:none ซึ่งจะโฟกัสไม่ได้) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--primary);color:#fff;
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0;top:8px}

/* ข้ามงานเรนเดอร์ของการ์ดที่ยังอยู่นอกจอ — เบราว์เซอร์จะคำนวณเลย์เอาต์เฉพาะที่กำลังจะเห็น
   contain-intrinsic-size บอกความสูงโดยประมาณไว้ก่อน กันไม่ให้สกรอลล์บาร์กระโดด
   (รองรับ Chrome/Edge/Safari 18+ · เบราว์เซอร์ที่ไม่รองรับก็แค่ทำงานเหมือนเดิม ไม่พัง) */
/* วัดแล้วได้ผลเฉพาะหน้าที่มีการ์ดหลายสิบใบ (cards: styleLayout -19%, TBT -47%)
   หน้าที่มีไม่กี่ชิ้น overhead ของ containment ไม่คุ้ม (หน้าแรก styleLayout แย่ลง 18%) */
.grid .card,#mkGrid .mk-card{content-visibility:auto;contain-intrinsic-size:auto 420px}

/* เลื่อน layout/paint ของโซนใต้ fold ออกจาก critical path — ทีมวัด A/B: TBT -74ms, CLS ไม่ขึ้น
   contain-intrinsic-size จองพื้นที่ไว้ก่อน กัน scrollbar/CLS เด้ง (เฉพาะจอมือถือที่ critical) */
@media(max-width:860px){
  .wt-home .wt-hero3,.wt-home .wt-dara,.wt-home .wt-newsroom{
    content-visibility:auto;contain-intrinsic-size:auto 500px}
}