/* =====================================================================
   ส่วนกลาง (ทุกธีมใช้ร่วมกัน): reset · ป้ายข้อมูลตัวอย่าง · โครงรูประหว่างโหลด · หน้าต่าง (modal) · หน้าอ่านรายละเอียด
   สีของแต่ละธีมตั้งที่ตัวแปร --xxx ในส่วน "ธีม" ด้านล่างไฟล์นี้
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--sp,84px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;margin:0;padding:0}
.ico{width:1em;height:1em;fill:currentColor;flex:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:min(var(--max,1200px),100% - 2*var(--g,16px));margin-inline:auto}
.skip{position:absolute;left:12px;top:-90px;z-index:500;padding:10px 16px;border-radius:8px;background:var(--skip-bg,#ffd35a);color:var(--skip-fg,#1a1000);font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus,#ffd35a);outline-offset:2px}
.press{transform:scale(.96)!important}

/* ---------- ป้าย "ข้อมูลตัวอย่าง" (DEMO) — ซ่อนเองเมื่อต่อข้อมูลจริงใน config.js ---------- */
.demo{display:inline-flex;align-items:center;padding:0 8px;border-radius:999px;font-size:11px;font-weight:500;font-style:normal;line-height:1.8;letter-spacing:.02em;white-space:nowrap;vertical-align:middle;background:var(--demo-bg,rgba(255,255,255,.14));color:var(--demo-fg,currentColor)}

/* ---------- รูปจาก API: โครงวิบวับระหว่างโหลด / ภาพสำรองเมื่อโหลดไม่ได้ ---------- */
.sk{position:relative;overflow:hidden;background:var(--sk-bg,#2b2b2b)}
.sk::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,transparent 30%,var(--sk-shine,rgba(255,255,255,.13)) 50%,transparent 70%);transform:translateX(-100%);animation:skShine 1.3s infinite;pointer-events:none}
.sk>img{position:relative;z-index:1;opacity:0;transition:opacity .35s}
.sk.ok::after,.sk.err::after{display:none}
.sk.ok>img{opacity:1}
.sk .fb{position:absolute;inset:0;z-index:0;display:none;place-items:center;font-size:12px;text-align:center;padding:8px;color:var(--fb-fg,rgba(255,255,255,.75))}
.sk.err .fb{display:grid}
.sk.err>img{display:none}
@keyframes skShine{to{transform:translateX(100%)}}
.api-status{font-size:12px;opacity:.75}

/* ---------- หน้าต่าง (รายละเอียดโปร / กิจกรรม / ผลวงล้อ) ---------- */
.mdl{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:14px}
.mdl-back{position:absolute;inset:0;background:var(--mdl-back,rgba(0,0,0,.72));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mdlFade .25s}
.mdl-panel{position:relative;display:flex;flex-direction:column;width:min(var(--mdl-w,600px),100%);max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);border-radius:var(--mdl-r,18px);overflow:hidden;background:var(--mdl-bg,#fff);color:var(--mdl-fg,#16110c);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px var(--mdl-line,rgba(0,0,0,.06));animation:mdlPop .32s cubic-bezier(.34,1.56,.64,1)}
.mdl-body{overflow:auto;overscroll-behavior:contain;padding:0 0 18px}
.mdl-x{position:absolute;right:10px;top:10px;z-index:5;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:24px;line-height:1}
.mdl-x:hover{background:rgba(0,0,0,.65)}
.mdl-load{display:grid;place-items:center;min-height:200px;font-size:14px;opacity:.7}
.mdl .doc{padding:18px 22px 0}
.mdl .doc-img{margin:0}
.mdl .doc-img img{border-radius:0}
.mdl .doc-more{display:inline-block;margin:14px 22px 0;font-size:14px;text-decoration:underline;opacity:.8}
body.mdl-on{overflow:hidden}
@keyframes mdlFade{from{opacity:0}}
@keyframes mdlPop{from{transform:translateY(16px) scale(.96);opacity:0}}

/* ---------- ข้อความลอยสั้นๆ ---------- */
.toast{position:fixed;left:50%;bottom:92px;z-index:450;max-width:calc(100% - 32px);transform:translate(-50%,16px);padding:10px 18px;border-radius:999px;background:var(--toast-bg,#1d1d1d);color:var(--toast-fg,#fff);font-size:14.5px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transition:.25s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- แถวเลื่อนแนวนอน (มือถือ) ---------- */
.rail{display:grid;grid-auto-flow:column;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;min-width:0}

/* ---------- สไลด์ ---------- */
.sl{position:relative}
.sl-track{position:relative}
.sl[data-slider="fade"] .sl-track>*{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.sl[data-slider="fade"] .sl-track>.on{position:relative;opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.sl[data-slider="fade"] .sl-track>*:not(.on){pointer-events:none}
.sl[data-slider="slide"] .sl-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.sl[data-slider="slide"] .sl-track::-webkit-scrollbar{display:none}
.sl[data-slider="slide"] .sl-track>*{flex:0 0 100%;scroll-snap-align:start}

/* ---------- หน้าอ่านรายละเอียด (โปรโมชั่น / บทความ / กิจกรรม / นโยบาย) ---------- */
.page{padding:22px 0 48px;min-height:calc(100vh - 150px)}
.crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;opacity:.8;margin-bottom:14px}
.crumb a{text-decoration:underline;text-underline-offset:3px}
.crumb span[aria-hidden]{opacity:.6}
.page-grid{display:grid;gap:24px}
@media (min-width:960px){.page-grid{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.page-side{position:sticky;top:96px}}
.doc-card{border-radius:var(--doc-r,18px);overflow:hidden;background:var(--doc-bg,#fff);color:var(--doc-fg,#1a140f);box-shadow:var(--doc-shadow,0 10px 30px rgba(0,0,0,.18))}
.doc-img{margin:0}
.doc-img img{width:100%;height:auto;aspect-ratio:var(--doc-ar,auto);object-fit:cover}
.doc-img.doc-promo,.doc-img.doc-act{display:grid;place-items:center;padding:18px 18px 0;background:var(--doc-fig-bg,transparent)}
.doc-img.doc-promo img,.doc-img.doc-act img{width:auto;max-width:100%;max-height:min(420px,52vh);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.doc-img.doc-promo.crop-top img{width:min(100%,420px);max-height:none;aspect-ratio:var(--crop-ar,7/6);object-fit:cover;object-position:50% 0}
.doc{padding:22px 26px 26px;font-size:16.5px;line-height:1.8}
.doc h1{font-size:clamp(25px,3.4vw,36px);line-height:1.3;margin-bottom:8px}
.doc .doc-lead{font-size:17.5px;opacity:.86;margin-bottom:6px}
.doc .doc-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;opacity:.72;margin:6px 0 4px}
.doc h2{font-size:clamp(19px,2.3vw,23px);line-height:1.4;margin:24px 0 8px}
.doc h3{font-size:18px;margin:18px 0 6px}
.doc p{margin:0 0 10px}
.doc ul,.doc ol{margin:6px 0 12px;padding-left:1.3em}
.doc li{margin:4px 0}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:15px}
.doc th,.doc td{padding:9px 10px;border-bottom:1px solid var(--doc-line,rgba(0,0,0,.1));text-align:left;vertical-align:top}
.doc th{font-weight:600;white-space:nowrap}
.doc a:not(.btn){color:var(--doc-link,#b8860b);text-decoration:underline;text-underline-offset:3px}
.doc .note{margin:14px 0;padding:12px 14px;border-radius:12px;background:var(--doc-note-bg,rgba(0,0,0,.05));font-size:14.5px;line-height:1.65}
.doc .tpl{display:inline-block;margin:0 0 10px;padding:2px 10px;border-radius:999px;background:var(--doc-tpl-bg,#fff1c2);color:var(--doc-tpl-fg,#6b4b00);font-size:12.5px;font-weight:600}
.doc-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.side-card{border-radius:var(--doc-r,18px);padding:18px;background:var(--side-bg,rgba(255,255,255,.06));box-shadow:0 0 0 1px var(--side-line,rgba(255,255,255,.1))}
.side-card h2{font-size:17px;margin-bottom:10px}
.side-card ul{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.side-card li a{display:flex;gap:10px;align-items:center;font-size:14.5px;line-height:1.4}
.side-card li img{width:72px;height:48px;object-fit:cover;border-radius:8px;flex:none}
.side-card+.side-card{margin-top:16px}
.list-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.list-card{display:flex;flex-direction:column;border-radius:var(--doc-r,18px);overflow:hidden;background:var(--doc-bg,#fff);color:var(--doc-fg,#1a140f);box-shadow:var(--doc-shadow,0 10px 30px rgba(0,0,0,.18));transition:transform .25s}
.list-card:hover{transform:translateY(-4px)}
.list-card img{width:100%;aspect-ratio:var(--list-ar,16/9);object-fit:cover}
.list-card div{padding:14px 16px 16px}
.list-card h2{font-size:18px;line-height:1.4}
.list-card p{margin-top:6px;font-size:14.5px;line-height:1.55;opacity:.8}
.list-rows{display:grid;gap:16px}
.list-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:22px;padding:14px;border-radius:var(--doc-r,18px);background:var(--doc-bg,#fff);color:var(--doc-fg,#1a140f);box-shadow:var(--doc-shadow,0 10px 30px rgba(0,0,0,.18));transition:transform .25s}
.list-row:hover{transform:translateY(-3px)}
.list-row-v .doc-img{padding:0!important;margin:0}
.list-row-v .doc-img>*{width:100%!important;max-width:560px;margin-inline:auto}
.list-row-v>img{width:100%;height:auto;border-radius:12px}
.list-row h2{font-size:21px;line-height:1.35}
.list-row p{margin-top:6px;font-size:15px;line-height:1.55;opacity:.82}
.list-row-more{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;color:var(--doc-link,#b8860b)}
@media (max-width:700px){.list-row{grid-template-columns:1fr;gap:12px}}
.page-h{margin-bottom:18px}
.page-h h1{font-size:clamp(26px,3.6vw,38px);line-height:1.3}
.page-h p{margin-top:4px;opacity:.85}

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

/* ---------- ทดลองกิจกรรม (เดโม · ในหน้ากิจกรรมและหน้าต่าง) ---------- */
.dm{display:grid;justify-items:center;gap:12px;margin:10px 0 8px;padding:18px 14px;border-radius:16px;background:var(--dm-bg,rgba(0,0,0,.045));text-align:center}
.dm-out{font-size:15px;line-height:1.6}
.dm-out b{display:block;margin-top:4px;font-size:19px}
.dm-stage img{width:170px;height:auto;margin:0 auto;transition:transform .3s,filter .3s}
.dm-stage.go img{animation:dmShake .9s ease-in-out}
.dm-stage.done img{transform:scale(1.06);filter:drop-shadow(0 0 18px rgba(255,205,80,.85))}
@keyframes dmShake{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-7deg) scale(1.05)}40%{transform:rotate(7deg) scale(1.08)}60%{transform:rotate(-5deg) scale(1.08)}80%{transform:rotate(4deg) scale(1.05)}}
.dm-wheel-wrap{position:relative;width:210px;height:210px}
.dm-wheel{width:100%;height:100%;border-radius:50%;background:conic-gradient(#ff7a59 0 60deg,#ffd166 60deg 120deg,#06d6a0 120deg 180deg,#4cc9f0 180deg 240deg,#9b5de5 240deg 300deg,#f15bb5 300deg 360deg);box-shadow:0 0 0 7px #fff,0 0 0 10px rgba(0,0,0,.12),0 12px 26px rgba(0,0,0,.22)}
.dm-pin{position:absolute;left:50%;top:-10px;width:0;height:0;border:13px solid transparent;border-top:24px solid #e63946;transform:translateX(-50%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.dm-card{position:relative;display:grid;place-items:center;width:min(320px,100%);min-height:124px;padding:12px;border-radius:14px;background:var(--dm-card-bg,#fff);color:var(--dm-card-fg,#1b1b1b);box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}
.dm-card canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;cursor:crosshair}
.dm-hint{font-size:13px;opacity:.7}
.dm-mission ul{display:grid;gap:8px;width:min(380px,100%);text-align:left;list-style:none;margin:0;padding:0}
.dm-mission label{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:12px;background:var(--dm-card-bg,#fff);color:var(--dm-card-fg,#1b1b1b);box-shadow:0 0 0 1px rgba(0,0,0,.08);cursor:pointer}
.dm-mission input{width:20px;height:20px;accent-color:var(--dm-accent,#f59e0b)}
.dm-bar{width:min(380px,100%);height:10px;border-radius:99px;background:rgba(0,0,0,.1);overflow:hidden}
.dm-bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffb703,#fb8500);transition:width .4s}
.dm-done{font-size:14.5px}

/* ---------- ผลวงล้อ / ซองของวันนี้ (ในหน้าต่าง) ---------- */
.wres,.eres{padding:34px 24px 26px;text-align:center}
.wres-k{margin-bottom:6px}
.wres-t,.eres-k{font-size:14px;opacity:.75}
.wres h3,.eres h3{margin:4px 0 8px;font-size:clamp(22px,5vw,28px);line-height:1.3}
.wres-x,.eres-x{font-size:16px;line-height:1.65;opacity:.92}
.wres-cta,.eres-cta{margin-top:18px;min-width:220px}
.wres-n,.eres-n{margin-top:12px;font-size:12.5px;line-height:1.5;opacity:.65}

/* ==================== ธีม CANDY REEL TOWN ==================== */
/* สี/ฟอนต์ของธีม (เปลี่ยนสีหลักได้ที่ assets/js/config.js → theme) */
:root{
  --bg:#ffe9f6; --card:#fff; --line:#f7d6ea;
  --pink:#ff2f96; --pink-2:#ff5fb0; --purple:#7a2bd6; --plum:#3a0f63; --blue:#2f8dff; --lilac:#c9a6ff; --gold:#ffc83a;
  --txt:#2c1a3d; --txt-2:#5b4a6b; --muted:#8f7f9c;
  --max:1352px; --g:24px; --sp:96px;
  --f:'Kanit',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --fd:'Mitr','Kanit',system-ui,sans-serif;
  --skip-bg:#ffc83a; --focus:#7a2bd6;
  --demo-bg:#fff0b8; --demo-fg:#8a5200;
  --sk-bg:#f6d5ea; --sk-shine:rgba(255,255,255,.6); --fb-fg:#7a2b6a;
  --mdl-bg:#fff; --mdl-fg:#2c1a3d; --mdl-back:rgba(60,10,70,.55);
  --toast-bg:#4a1470;
  --doc-bg:#fff; --doc-fg:#2c1a3d; --doc-line:#f6dcec; --doc-link:#d6157a; --doc-note-bg:#fff0f8; --doc-shadow:0 10px 30px rgba(180,40,120,.12),0 0 0 1px #f6dcec;
  --doc-tpl-bg:#fff0b8; --doc-tpl-fg:#7a4a00; --side-bg:#fff; --side-line:#f6dcec;
  --dm-bg:#fff0f8; --dm-card-bg:#fff; --dm-card-fg:#2c1a3d; --dm-accent:#ff2f96;
}
body{font:400 16px/1.55 var(--f);color:var(--txt);-webkit-font-smoothing:antialiased;background:url(../images/bg/page.webp) center top/100% 100% no-repeat,linear-gradient(180deg,#ffd9ef,#f6e0ff 40%,#ffe4f4 70%,#ffeaf6);background-attachment:scroll}
.wrap{--max:1352px}

/* ---------- ตัวหนังสือนูนขอบหนา ---------- */
.x3{position:relative;display:inline-block;isolation:isolate;white-space:nowrap;line-height:1.12;--x3s:#7a1a9e;--x3e:#4c0b6e;--x3o:#fff}
.x3 i{font-style:normal;background:var(--x3f);-webkit-background-clip:text;background-clip:text;color:transparent}
.x3::before,.x3::after{content:attr(data-t);position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none}
.x3::before{z-index:-1;color:var(--x3s);-webkit-text-stroke:var(--x3w,.14em) var(--x3s);text-shadow:0 .05em 0 var(--x3e),0 .08em .06em rgba(80,0,90,.3)}
.x3::after{z-index:-2;color:var(--x3o);-webkit-text-stroke:var(--x3ow,.26em) var(--x3o);filter:drop-shadow(0 .04em .05em rgba(120,0,90,.25))}
.x3-w{--x3f:linear-gradient(180deg,#fff 0%,#fff6fb 60%,#ffd6ec 100%)}
.x3-y{--x3f:linear-gradient(180deg,#fff7c0 0%,#ffd84a 45%,#ffa21a 100%)}
.x3-wp{--x3f:linear-gradient(180deg,#fff 0%,#fff 55%,#ffe0f0 100%);--x3s:#ff2f96;--x3e:#b0105e;--x3w:.15em;--x3ow:.27em}
.x3-wv{--x3f:linear-gradient(180deg,#fff 0%,#fff 60%,#efe2ff 100%);--x3s:#5a1aa0;--x3e:#3a0b6e}
.x3-st{--x3f:linear-gradient(180deg,#ffffff 0%,#fff 36%,#ffc4e7 68%,#ff98d2 100%);--x3s:#7a1ab0;--x3e:#4c0b7e;--x3w:.13em;--x3ow:.24em}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border:0;border-radius:999px;font-weight:600;font-size:15.5px;line-height:1.1;white-space:nowrap;transition:transform .18s,filter .18s,box-shadow .2s}
.btn .ico{width:.9em;height:.9em;transition:transform .2s}
.btn:hover .ico{transform:translateX(3px)}
.btn-pink{color:#fff;background:linear-gradient(180deg,#ff7cc0 0%,#ff3a9c 50%,#ec1580 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(150,0,70,.25),0 6px 16px rgba(240,30,130,.3)}
.btn-blue{color:#fff;background:linear-gradient(180deg,#5fb2ff 0%,#2f8dff 50%,#1a6ff0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px rgba(30,110,240,.28)}
.btn-pink:hover,.btn-blue:hover{filter:brightness(1.06) saturate(1.05)}
.fx{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s}

/* ---------- หัวเว็บ ---------- */
.hdr{position:sticky;top:0;z-index:60;transition:background .25s,box-shadow .25s}
.hdr.scrolled,body.menu-open .hdr{background:rgba(255,240,249,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(160,30,110,.12)}
.hdr-in{display:flex;align-items:center;gap:18px;width:min(var(--max),100% - 2*var(--g));height:100px;margin-inline:auto;transition:height .25s}
.hdr.scrolled .hdr-in{height:76px}
.logo{flex:none;display:block;margin-left:5%}
.logo img{height:86px;width:auto;filter:drop-shadow(0 4px 8px rgba(160,30,110,.22));transition:height .25s}
.hdr.scrolled .logo img{height:62px}
.hdr-pill{flex:1;display:flex;align-items:center;gap:10px;min-width:0;height:57px;padding:0 10px 0 12px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 8px 22px rgba(160,30,120,.14),inset 0 0 0 1px rgba(255,255,255,.9)}
.nav{display:none;align-items:center;gap:10px;margin-left:14px}
.nav a{padding:8px 15px;border-radius:99px;font-size:16px;font-weight:500;color:#2a1640;white-space:nowrap;transition:background .2s,color .2s}
.nav a:hover{color:var(--pink)}
.nav a[aria-current="page"]{color:#fff;font-weight:600;background:linear-gradient(180deg,#ff6ab4,#ff2f96);box-shadow:0 4px 10px rgba(240,30,130,.28)}
.hdr-r{display:flex;align-items:center;gap:10px;margin-left:auto}
.hdr .btn{min-height:42px;padding:0 20px;font-size:15.5px}
.hb-reg .ico{width:1.15em;height:1.15em}
.hb-reg:hover .ico{transform:none}
.hb-login{display:none}
.srch{display:none;place-items:center;width:42px;height:42px;border:0;border-radius:50%;color:#fff;background:linear-gradient(180deg,#5fb2ff,#2f8dff);box-shadow:0 4px 10px rgba(30,110,240,.3)}
.srch .ico{width:16px;height:16px}
.menu-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:linear-gradient(180deg,#ff7cc0,#ff2f96);color:#fff}
.menu-btn .ico{width:18px;height:18px}
.menu{position:fixed;left:0;right:0;top:76px;z-index:59;background:#fff;box-shadow:0 24px 40px rgba(140,20,100,.18);transform:translateY(-10px);opacity:0;visibility:hidden;transition:.22s;max-height:calc(100vh - 76px);overflow:auto}
.menu.open{transform:none;opacity:1;visibility:visible}
.menu nav{display:grid;padding:6px 0 18px}
.menu nav>a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 4px;border-bottom:1px solid #fbe3f1;font-size:16px;font-weight:500;color:#2a1640}
.menu nav>a .ico{width:12px;height:12px;color:var(--pink)}
.menu-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.menu-cta .btn{display:inline-flex;min-height:50px}
@media (min-width:600px){.hb-login{display:inline-flex}}
@media (min-width:1180px){.nav{display:flex}.srch{display:grid}.menu-btn,.menu{display:none!important}}
@media (min-width:1180px) and (max-width:1379px){.logo{margin-left:0}.nav{margin-left:4px;gap:2px}.nav a{padding:8px 11px;font-size:15px}.hdr .btn{padding:0 14px;font-size:14.5px}}

/* ---------- A · ปก (≥900px: ภาพกว้าง + ข้อความวางตามสัดส่วนกรอบ · หน่วย cqw = % ของความกว้างกรอบ) ---------- */
.hero{width:min(var(--max),100% - 2*var(--g));margin:12px auto 0}
.hero-box{position:relative;border-radius:22px;overflow:hidden;background:#ffd2ec;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(255,120,190,.55),0 18px 40px rgba(180,40,130,.22);container-type:inline-size}
.hero-box .sl-track{aspect-ratio:875/258}
.slide{position:absolute;inset:0}
.slide picture,.slide picture img{display:block;width:100%;height:100%}
.slide picture img{object-fit:cover;object-position:100% 50%}
.s-txt{position:absolute;left:12.3cqw;top:.8cqw;width:35cqw;display:flex;flex-direction:column;align-items:center;text-align:center}
.s-h1{display:flex;flex-direction:column;align-items:center}
.s-lock{width:33.8cqw;height:auto;filter:drop-shadow(0 .5cqw 1cqw rgba(150,20,110,.25))}
.s-sub{margin-top:-2cqw;transform:rotate(-3.6deg);font-size:1.63cqw;font-weight:700;line-height:1.3;color:#3a0f63;text-shadow:0 0 .4cqw #fff,0 0 .8cqw rgba(255,255,255,.9)}
ul.chips{display:flex;gap:.6cqw;margin-top:1cqw}
.chips li{display:flex;align-items:center;gap:.7cqw;height:4.7cqw;padding:0 1cqw 0 .9cqw;border-radius:1cqw;background:linear-gradient(180deg,#a645e8,#7322c9);box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.35),0 .6cqw 1.4cqw rgba(110,20,170,.3);color:#fff;text-align:left}
.chips .ico{width:2.6cqw;height:2.6cqw;color:#ffd84a;filter:drop-shadow(0 .2cqw .2cqw rgba(80,0,60,.3))}
.chips li>span{display:flex;flex-direction:column;line-height:1.3;white-space:nowrap}
.chips small{font-size:1.05cqw;color:#f2e4ff}
.chips b{font-size:1.46cqw;font-weight:700;color:#fff;line-height:1.2}
.s-cta{min-height:0;width:21.6cqw;height:4.4cqw;margin-top:.3cqw;padding:0;font-size:1.9cqw;font-weight:700;gap:1.2cqw;box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.55),0 .8cqw 1.8cqw rgba(240,30,130,.35)}
.s-k{padding:.3cqw 1.4cqw;border-radius:99px;background:#fff;color:var(--pink);font-size:1.4cqw;font-weight:600;box-shadow:0 .4cqw 1cqw rgba(200,40,130,.18)}
.s2 .s-txt,.s3 .s-txt{top:3.6cqw;left:6cqw;width:38cqw}
.s2 .s-txt{isolation:isolate;top:2.6cqw;left:4.6cqw;width:37cqw;padding:1.2cqw 1.6cqw 1.6cqw;border-radius:2cqw;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 .2cqw rgba(255,255,255,.8),0 1.4cqw 3cqw rgba(170,40,130,.18)}
.s3-fan{position:absolute;right:4cqw;top:50%;width:46cqw;height:22cqw;transform:translateY(-50%)}
.fan-i{position:absolute;top:50%;left:50%;width:13.5cqw;aspect-ratio:1;border-radius:1.6cqw;overflow:hidden;background:#fbd3ec;box-shadow:0 0 0 .35cqw #fff,0 1.2cqw 2.4cqw rgba(140,30,110,.3);transform:translate(-50%,-50%) translateX(calc(var(--k) * 8.6cqw)) rotate(calc(var(--k) * 7deg)) translateY(calc(var(--a) * 1cqw))}
.fan-i img{width:100%;height:100%;object-fit:cover}
.fan-i:nth-child(1){--k:-2;--a:2.2;z-index:1}.fan-i:nth-child(2){--k:-1;--a:.6;z-index:2}.fan-i:nth-child(3){--k:0;--a:0;z-index:3;width:16cqw}.fan-i:nth-child(4){--k:1;--a:.6;z-index:2}.fan-i:nth-child(5){--k:2;--a:2.2;z-index:1}
@media (hover:hover){.s3 .fan-i{transition:transform .4s cubic-bezier(.2,.8,.2,1)}.s3:hover .fan-i{transform:translate(-50%,-50%) translateX(calc(var(--k) * 9.6cqw)) rotate(calc(var(--k) * 9deg)) translateY(calc(var(--a) * 1.2cqw))}}
/* โปรที่ใช้การ์ดหน้าแรก (หน้าโปร / รายการโปร) */
.doc-ic{padding:0!important;background:none!important}
.doc-ic .ic,.list-row-v .ic{width:100%;max-width:560px;height:auto;aspect-ratio:207/142;margin-inline:auto}
.doc-ic .ic-vip,.list-row-v .ic-vip{aspect-ratio:217/142}
.s-h{display:flex;flex-direction:column;align-items:center;margin-top:1cqw;font-family:var(--fd);font-weight:700;line-height:1.05}
.s-h .x3{font-size:4.3cqw}
.s-h .x3-y{font-size:3.4cqw;margin-top:.3cqw}
.s-p{max-width:36cqw;margin-top:1.2cqw;font-size:1.5cqw;font-weight:600;line-height:1.45;color:#3a0f63;text-shadow:0 0 .4cqw #fff,0 0 .8cqw #fff}
.s-arrow{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:3.5cqw;height:3.5cqw;min-width:34px;min-height:34px;margin-top:-1.75cqw;border:0;border-radius:50%;color:#fff;background:rgba(40,6,60,.72);box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);transition:background .2s}
.s-arrow:hover{background:rgba(255,47,150,.85)}
.s-arrow .ico{width:40%;height:40%}
.s-prev{left:.6cqw}.s-next{right:.6cqw}
.s-dots{position:absolute;left:50%;bottom:.9cqw;z-index:3;display:flex;gap:.4cqw;padding:.4cqw .8cqw;border-radius:99px;background:rgba(40,6,60,.45);transform:translateX(-50%)}
.s-dots button{width:28px;height:28px;padding:0;border:0;background:none;display:grid;place-items:center}
.s-dots button::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;opacity:.85;transition:.25s}
.s-dots button[aria-current="true"]::before{background:#ff2f96;box-shadow:0 0 0 2px #fff;opacity:1}

/* ---------- B · แถบข่าวสาร ---------- */
.news{display:flex;align-items:center;gap:12px;height:47px;margin-top:8px;padding:0 6px 0 4px;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:inset 0 0 0 2px #ffb6dc,0 6px 16px rgba(200,40,130,.12)}
.news-k{flex:none;display:flex;align-items:center;gap:6px;height:39px;padding:0 16px 0 10px;border-radius:999px;background:linear-gradient(180deg,#ff6ab4,#ff2f96);color:#fff;font-size:16px;font-weight:600;box-shadow:0 4px 10px rgba(240,30,130,.25)}
.news-k img{width:auto;height:26px}
.news-vp{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
ul.news-track{display:flex;width:max-content;gap:44px;padding:0 20px}
.news-track li{display:flex;align-items:center;gap:8px;font-size:15.2px;font-weight:500;color:#33164f;white-space:nowrap}
.news-track a{display:inline-flex;align-items:center;min-height:44px}
.news-track a:hover{color:var(--pink);text-decoration:underline}
.tk-sym{width:19px;height:19px}
.tk-pink{color:#ff2f96}.tk-purple{color:#8a3be0}.tk-gold{color:#f2a20c}.tk-orange{color:#ff6a1a}
.news-track .demo{font-size:11px}
.news-track .tk-feed b{color:#7a2bd6}
.news-track .tk-feed em{font-style:normal;font-weight:700;color:#ff2f96}
@media (prefers-reduced-motion:no-preference){
  .js ul.news-track{animation:tk var(--dur,40s) linear infinite}
  .news:hover ul.news-track,.news:focus-within ul.news-track,ul.news-track.paused{animation-play-state:paused}
}
@keyframes tk{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.news-vp{overflow-x:auto;-webkit-mask:none;mask:none}}
.news-pause{flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#ffe3f2;color:#d6157a}
.news-pause .ico{width:13px;height:13px}
.news-pause .i-play,.news-pause[aria-pressed="true"] .i-pause{display:none}
.news-pause[aria-pressed="true"] .i-play{display:block}

/* ---------- C · Mini Magazine Dashboard ---------- */
.dash{display:grid;grid-template-columns:minmax(0,207fr) minmax(0,217fr) minmax(0,193fr) minmax(0,232fr);gap:14px;margin-top:14px}
.ic{position:relative;min-width:0;height:204px;border-radius:16px;overflow:hidden;container-type:inline-size;isolation:isolate;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 10px 22px rgba(180,40,130,.16)}
.ic-bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:100% 50%;transition:transform .6s}
.ic-h{position:absolute;left:6.5cqw;top:6.5cqw;font-family:var(--fd);font-weight:700;line-height:1}
.ic-today .ic-h .x3,.ic-vip .ic-h .x3{font-size:9.3cqw}
.ic-main{position:absolute;inset:0;z-index:1}
.ic-today .ic-s{position:absolute;left:6.8cqw;top:24.5cqw;font-size:5.4cqw;font-weight:600;font-style:italic;color:#2c0d4e;text-shadow:0 0 .8cqw #fff}
.ic-big{position:absolute;left:6.5cqw;top:30.4cqw;font-size:10.3cqw;font-weight:800;font-style:italic;line-height:1.2;color:#ff2f96;text-shadow:0 .3cqw 0 #fff,0 0 1.4cqw #fff;white-space:nowrap}
.ic-v{position:absolute;left:6.5cqw;top:24cqw;font-size:6.1cqw;font-weight:600;font-style:italic;line-height:1.3;color:#3a0f63;text-shadow:0 0 .8cqw #fff,0 0 1.2cqw #fff}
.ic-b{position:absolute;left:6.5cqw;bottom:6cqw;z-index:2;min-height:0;height:15cqw;max-height:40px;padding:0 6cqw;font-size:min(5.4cqw,15px);gap:2.4cqw}
@media (hover:hover){.ic:hover .ic-bg{transform:scale(1.05)}}
.ic-online .ic-h .x3{font-size:8.4cqw}
.ic-n{position:absolute;left:6.6cqw;top:21cqw;font-size:8.6cqw;font-weight:700;font-style:italic;color:#fff;text-shadow:0 .2cqw .6cqw rgba(60,0,110,.4)}
.ic-n b{font-size:14.5cqw;font-weight:800;background:linear-gradient(180deg,#fff7b8,#ffd23c 55%,#ffa11a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .4cqw 0 #7a2bd6)}
.ic-o{position:absolute;left:6.6cqw;top:41cqw;font-size:6.8cqw;font-weight:600;font-style:italic;color:#fff;text-shadow:0 .2cqw .6cqw rgba(60,0,110,.45)}
.ic-demo{position:absolute;right:4cqw;top:4cqw;z-index:2}
.ic-wd{background:#fff}
.ic-top{position:absolute;left:0;top:0;width:100%;height:auto;z-index:-1}
.ic-wd .ic-h{display:flex;align-items:center;gap:2.6cqw;left:4.6cqw;top:3.8cqw}
.ic-wd .ic-h img{width:11.5cqw;height:auto}
.ic-wd .ic-h .x3{font-size:7.5cqw}
.ic-wd .ic-demo{top:5.4cqw}
ul.wd{position:absolute;left:4cqw;right:4cqw;top:19cqw;bottom:3.4cqw;display:flex;flex-direction:column;justify-content:space-around;padding:1.4cqw 3cqw;border-radius:3.4cqw;background:rgba(255,255,255,.96);box-shadow:0 0 0 1px #fbe1ef}
.wd li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:3cqw;font-size:5.6cqw;line-height:1.3}
.av{display:grid;place-items:center;width:9.4cqw;height:9.4cqw;max-width:28px;max-height:28px;border-radius:50%;font-size:min(4.6cqw,13px);font-weight:700;color:#fff;background:hsl(calc(var(--tone,1) * 47deg + 300deg) 70% 62%);box-shadow:0 0 0 2px #fff,0 2px 5px rgba(120,30,90,.25)}
.wd-u{color:#3a2950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-a{font-weight:700;color:#ff2f96;white-space:nowrap;font-variant-numeric:tabular-nums}
.wd-t{font-size:4.6cqw;color:#9b8aa8;white-space:nowrap;min-width:16cqw;text-align:right}

/* ---------- หัวข้อ ---------- */
.sec{margin-top:20px}
.sh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sh-ic{flex:none;width:38px;height:auto;filter:drop-shadow(0 3px 5px rgba(160,40,100,.2))}
.sh>div{flex:1;min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:16px}
.sh h2{font-size:38px;font-weight:700;line-height:1.15;color:#3a0f63;letter-spacing:-.01em}
.sh h2 em{font-style:italic;font-weight:800;color:#ff2f96;text-shadow:0 2px 0 #fff}
.sh-s{font-size:14.5px;color:#6d5a80}
.sh-s b{color:var(--pink);font-variant-numeric:tabular-nums}
.sh-s a{color:#d6157a;text-decoration:underline;text-underline-offset:2px}
.sh-more{flex:none;min-height:44px;padding:0 22px;font-size:16px}

/* ---------- D · เกมแนะนำ ---------- */
ul.gl{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;overflow:visible}
.gt{position:relative;display:flex;flex-direction:column;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left}
.gt-img{display:block;aspect-ratio:1/1;border-radius:14px;box-shadow:0 0 0 2px #fff,0 10px 22px rgba(170,40,130,.22);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.gt-img img{width:100%;height:100%;object-fit:cover}
.gt-img .fb{font-size:14px;color:#7a2b6a}
.g-tag{position:absolute;left:8px;top:8px;z-index:2;padding:1px 9px 2px;border-radius:7px;background:linear-gradient(180deg,#ff5a8e,#e8125e);font-size:12px;font-weight:700;color:#fff;box-shadow:0 0 0 1.5px #fff,0 3px 8px rgba(160,20,60,.35)}
.g-tag.new{left:auto;right:8px;background:linear-gradient(180deg,#5fe07a,#1fae45)}
.gt-n,.gt-m{position:absolute;left:0;right:0;z-index:1;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .25s,transform .25s;transform:translateY(4px);pointer-events:none}
.gt-n{bottom:22px;font-size:15px;font-weight:600;line-height:1.3;color:#fff;text-shadow:0 1px 3px rgba(40,0,50,.6)}
.gt-m{bottom:6px;font-size:12.5px;color:#ffd6f0}
.gt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;border-radius:0 0 14px 14px;background:linear-gradient(180deg,rgba(70,10,90,0),rgba(70,10,90,.88));opacity:0;transition:opacity .25s;pointer-events:none}
.gt:hover .gt-n,.gt:hover .gt-m,.gt:focus-visible .gt-n,.gt:focus-visible .gt-m{opacity:1;transform:none}
.gt:hover::after,.gt:focus-visible::after{opacity:1}
@media (hover:hover){.gt:hover .gt-img{transform:translateY(-6px);box-shadow:0 0 0 2px #fff,0 18px 32px rgba(170,40,130,.32)}.gt:hover::after,.gt:hover .gt-n,.gt:hover .gt-m{translate:0 -6px}}

/* ---------- E · เวทีเปิดซอง ----------
   ภาพพื้นมีซองใบใหญ่อยู่แล้ว: ซอง HTML (ภาพเดียวกัน) วางทับตรงตำแหน่งเดิมพอดี
   จอใหญ่: ภาพพื้นสูงเท่าเวที กึ่งกลางตรงกับกรอบ 941u · มือถือ: ภาพ bg-m ยึดกับกล่องซองโดยตรง */
.stage{position:relative;margin-top:20px;container-type:inline-size;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#f5d9f7,#ffd3ea 60%,#ffe2f1)}
.stage-bg{position:absolute;left:50%;top:0;z-index:-1;width:auto;max-width:none;height:100%;transform:translateX(-50%);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.env-bgm{display:none}
.stage-in{--u:min(calc(100cqw / 941),1.5303px);position:relative;width:calc(var(--u) * 941);height:calc(var(--u) * 300);margin-inline:auto}
.st-head{position:absolute;left:0;right:0;top:calc(var(--u) * 18);display:flex;flex-direction:column;align-items:center;text-align:center}
.st-head h2{font-family:var(--fd);font-weight:700;line-height:1;transform:rotate(-2deg)}
.st-head .x3{font-size:calc(var(--u) * 47);letter-spacing:-.01em}
.st-sub{margin-top:calc(var(--u) * 3);font-size:calc(var(--u) * 16);font-weight:700;color:#3a0f63;text-shadow:0 0 calc(var(--u) * 2) #fff,0 0 calc(var(--u) * 2) #fff,0 0 calc(var(--u) * 5) #fff}
.st-rib{display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 6);width:calc(var(--u) * 184);height:calc(var(--u) * 29);margin-top:calc(var(--u) * 4);padding:0 calc(var(--u) * 14);background:linear-gradient(180deg,#fff6a6,#ffe14f);color:#5a2a00;font-size:calc(var(--u) * 15);font-weight:700;white-space:nowrap;clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);transform:rotate(-1.5deg);filter:drop-shadow(0 2px 3px rgba(150,80,0,.25))}
.st-rib .ico{width:calc(var(--u) * 15);height:calc(var(--u) * 15);color:#ff9f1a}
ul.pills{position:absolute;top:calc(var(--u) * 64);display:flex;flex-direction:column;gap:calc(var(--u) * 14)}
.pills-l{left:calc(var(--u) * 70);align-items:flex-start}
.pills-r{right:calc(var(--u) * 70);align-items:flex-end}
.pills li{transform:rotate(-6deg)}
.pills li:nth-child(2){transform:translateX(calc(var(--u) * -18)) rotate(-4deg)}
.pills li:nth-child(3){transform:rotate(-8deg)}
.pills-r li{transform:rotate(6deg)}
.pills-r li:nth-child(2){transform:translateX(calc(var(--u) * 14)) rotate(4deg)}
.pills-r li:nth-child(3){transform:rotate(7deg)}
.pills a{display:flex;align-items:center;gap:calc(var(--u) * 6);height:calc(var(--u) * 36);padding:0 calc(var(--u) * 18) 0 calc(var(--u) * 11);border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(170,40,130,.18);font-size:calc(var(--u) * 11.5);font-weight:600;color:#e3127c;white-space:nowrap;transition:transform .25s}
.pills a:hover{transform:scale(1.06)}
.pills .ico{width:calc(var(--u) * 17);height:calc(var(--u) * 17);color:#ffb21f;filter:drop-shadow(0 1px 1px rgba(150,80,0,.3))}
/* ซอง: ภาพเดียวกัน 2 ชั้น (ตัวซอง + ฝาซองรูปตัว V) → กดแล้วฝาเปิด การ์ดเลื่อนขึ้น */
.env-zone{position:absolute;left:calc(var(--u) * 355);top:calc(var(--u) * 129);width:calc(var(--u) * 226);height:calc(var(--u) * 130)}
.env{position:absolute;inset:0;padding:0;border:0;background:none;cursor:pointer;perspective:calc(var(--u) * 600)}
.env>img,.env-back,.env-card{position:absolute;left:0;top:0;width:100%;height:100%}
.env-back{background:linear-gradient(180deg,#b3124f,#e0306f 70%);clip-path:polygon(0 0,100% 0,96% 5%,64% 38%,65% 74%,35% 74%,36% 38%,4% 5%)}
.env-card{left:12%;top:4%;width:76%;height:70%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:calc(var(--u) * 4);padding-top:calc(var(--u) * 10);border-radius:calc(var(--u) * 8);background:linear-gradient(180deg,#fff,#fff1f9);box-shadow:0 0 0 calc(var(--u) * 2) #ffd1ea;color:#e3127c;font-size:calc(var(--u) * 11);opacity:0;transition:transform .5s cubic-bezier(.3,1.4,.5,1) .25s,opacity .2s .2s}
.env-card .ico{width:calc(var(--u) * 20);height:calc(var(--u) * 20);color:#ffb21f}
.env-front{clip-path:polygon(0 0,4% 5%,36% 38%,35% 74%,65% 74%,64% 38%,96% 5%,100% 0,100% 100%,0 100%)}
.env-flap{clip-path:polygon(0 0,100% 0,97% 5.6%,65% 39%,66% 75%,34% 75%,35% 39%,3% 5.6%);transform-origin:50% 2%;transition:transform .45s cubic-bezier(.5,0,.3,1),filter .45s;backface-visibility:visible}
.env-fx{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none}
.env-fx i{position:absolute;left:0;top:0;width:calc(var(--u) * 8);height:calc(var(--u) * 12);border-radius:2px;background:var(--c,#ffd23c);opacity:0}
.env-fx i:nth-child(3n){--c:#ff5fb0;border-radius:50%;width:calc(var(--u) * 9);height:calc(var(--u) * 9)}
.env-fx i:nth-child(3n+1){--c:#7ad3ff}
.env-fx i:nth-child(1){--x:-120;--y:-90}.env-fx i:nth-child(2){--x:-80;--y:-130}.env-fx i:nth-child(3){--x:-30;--y:-150}.env-fx i:nth-child(4){--x:30;--y:-150}
.env-fx i:nth-child(5){--x:80;--y:-130}.env-fx i:nth-child(6){--x:125;--y:-90}.env-fx i:nth-child(7){--x:-150;--y:-30}.env-fx i:nth-child(8){--x:150;--y:-30}
.env-fx i:nth-child(9){--x:-100;--y:30}.env-fx i:nth-child(10){--x:100;--y:30}.env-fx i:nth-child(11){--x:-55;--y:-110}.env-fx i:nth-child(12){--x:55;--y:-110}
@media (hover:hover){.env:hover{animation:envNudge .7s ease-in-out}}
@keyframes envNudge{0%,100%{transform:none}30%{transform:rotate(-3deg) scale(1.03)}60%{transform:rotate(3deg) scale(1.03)}}
.stage.opening .env{animation:envShake .45s ease-in-out}
@keyframes envShake{0%,100%{transform:none}20%{transform:rotate(-6deg) scale(1.06)}45%{transform:rotate(6deg) scale(1.08)}70%{transform:rotate(-4deg) scale(1.06)}}
.stage.opening .env-flap{transform:rotateX(180deg);filter:brightness(.82) saturate(1.1);transition-delay:.35s}
.stage.opening .env-card{transform:translateY(-58%);opacity:1}
.env-done{position:absolute;right:-4%;top:-9%;z-index:2;display:none;align-items:center;gap:calc(var(--u) * 4);padding:calc(var(--u) * 4) calc(var(--u) * 10);border-radius:99px;background:#fff;color:#18a34a;font-size:max(calc(var(--u) * 10.5),12px);font-weight:700;white-space:nowrap;box-shadow:0 0 0 2px #b8f0c9,0 4px 10px rgba(20,120,60,.25);transform:rotate(8deg)}
.env-done .ico{width:1em;height:1em}
.stage.is-opened:not(.opening) .env-done{display:flex;animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:rotate(8deg) scale(.4);opacity:0}}
.stage.opening .env-fx i{animation:conf .9s cubic-bezier(.2,.7,.3,1) .45s forwards}
@keyframes conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(calc(var(--x) * var(--u)),calc(var(--y) * var(--u) + 40 * var(--u))) rotate(540deg)}}
.st-cta{position:absolute;left:0;right:0;top:calc(var(--u) * 230);display:flex;flex-direction:column;align-items:center}
.st-btn{min-height:0;height:calc(var(--u) * 46);padding:0 calc(var(--u) * 36);gap:calc(var(--u) * 10);font-size:calc(var(--u) * 19);font-weight:700;box-shadow:inset 0 0 0 calc(var(--u) * 3) rgba(255,255,255,.7),0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(240,30,130,.35)}
.st-note{margin-top:calc(var(--u) * 6);padding:calc(var(--u) * 2) calc(var(--u) * 10);border-radius:99px;background:rgba(255,255,255,.82);font-size:max(calc(var(--u) * 8),11px);color:#5b3a70}
.st-note a{color:#d6157a;text-decoration:underline;text-underline-offset:2px}
.snd{position:absolute;right:calc(var(--u) * 28);top:calc(var(--u) * 14);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#d6157a;box-shadow:0 4px 12px rgba(170,40,130,.2)}
.snd .ico{width:18px;height:18px}
.snd .i-on{display:none}
.snd[aria-pressed="true"] .i-on{display:block}
.snd[aria-pressed="true"] .i-off{display:none}
.mdl[data-kind="envelope"] .mdl-panel{background:linear-gradient(180deg,#ffe3f3,#fff 42%)}
.eres-d{margin-bottom:6px}
.eres-cta{color:#fff;background:linear-gradient(180deg,#ff7cc0,#ff3a9c 50%,#ec1580)}

/* ---------- F · ชุมชน + บทความ ---------- */
.duo{display:grid;grid-template-columns:minmax(0,446fr) minmax(0,450fr);gap:14px;margin-top:4px}
.panel{display:flex;flex-direction:column;min-width:0;padding:16px 18px 18px;border-radius:20px;background:rgba(255,255,255,.9);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 12px 28px rgba(170,40,130,.12)}
.ph{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ph>img{flex:none;width:38px;height:auto}
.ph h2{flex:1;min-width:0;font-size:26px;font-weight:700;line-height:1.2;color:#ff2f96;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph h2 em{font-style:normal;font-weight:600}
.ph-b{flex:none;min-height:36px;padding:0 16px;font-size:14px}
ul.posts{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;overflow:visible}
.post{display:flex;flex-direction:column;height:100%;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #f6dcec,0 6px 14px rgba(170,40,130,.08)}
.post-img{width:100%;aspect-ratio:194/165;object-fit:cover;transition:transform .6s}
.post-by{display:flex;align-items:center;gap:6px;padding:8px 10px 0;font-size:14px}
.post-by img{width:30px;height:30px;object-fit:contain;border-radius:50%;background:#fff0f8;box-shadow:0 0 0 1.5px #ffd1ea;padding:2px}
.post-by b{font-weight:600;color:#2c1a3d;white-space:nowrap}
.post-tag{margin-left:auto;padding:0 8px;border-radius:99px;background:#fff0f8;font-size:11.5px;color:#d6157a;white-space:nowrap}
.post-x{flex:1;padding:6px 10px 0;font-size:14.5px;line-height:1.5;color:#4b3a5c}
.post-d{display:flex;align-items:center;gap:5px;padding:8px 10px 10px;font-size:12.5px;color:#9b8aa8}
.post-d .ico{width:12px;height:12px}
.post-go{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-weight:600;color:#ff2f96}
.post-go .ico{width:11px;height:11px}
@media (hover:hover){.post:hover{transform:translateY(-4px);box-shadow:0 0 0 1px #ffc2e2,0 14px 26px rgba(170,40,130,.18)}.post:hover .post-img{transform:scale(1.05)}}
ul.arts{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.art{display:flex;flex-direction:column;height:100%;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #f6dcec,0 6px 14px rgba(170,40,130,.08)}
.art img{width:100%;aspect-ratio:137/90;object-fit:cover;transition:transform .6s}
.art h3{margin:10px 12px 0;font-size:17px;font-weight:700;line-height:1.35;color:#1d1230;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-x{flex:1;margin:4px 12px 0;font-size:14px;line-height:1.5;color:#7a6a88;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-d{display:flex;align-items:center;gap:5px;margin:8px 12px 12px;font-size:12.5px;color:#9b8aa8}
.art-d .ico{width:12px;height:12px}
@media (hover:hover){.art:hover{transform:translateY(-4px);box-shadow:0 0 0 1px #ffc2e2,0 14px 26px rgba(170,40,130,.18)}.art:hover img{transform:scale(1.05)}.art:hover h3{color:#d6157a}}

/* ---------- G · FAQ + ชวนสมัคร ---------- */
.faqs{display:grid;grid-template-columns:minmax(0,312fr) minmax(0,570fr);gap:14px;align-items:start;margin-top:16px}
.fq-art{position:relative;container-type:inline-size}
.fq-art>img{-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 90%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 90%,transparent);mask-composite:intersect}
.fq-art img{width:100%;height:auto}
.fq-h{position:absolute;left:30cqw;top:4.5cqw;right:2cqw;transform:rotate(-3deg);transform-origin:0 50%}
.fq-h h2{font-family:var(--fd);font-weight:700;line-height:1.1}
.fq-h .x3{font-size:9.2cqw}
.fq-h p{margin-top:.6cqw;font-size:max(3.6cqw,12px);font-weight:500;color:#3a0f63;text-shadow:0 0 .8cqw #fff,0 0 1.6cqw #fff}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:start}
.faq-i{border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 0 0 1px #f8d8ea,0 6px 14px rgba(170,40,130,.08);transition:box-shadow .2s}
.faq-i[open]{box-shadow:0 0 0 2px #ff9ccc,0 10px 22px rgba(240,40,130,.12)}
.faq-i summary{display:flex;align-items:center;gap:12px;min-height:50px;padding:6px 16px 6px 10px;list-style:none;cursor:pointer;font-size:15px;font-weight:500;line-height:1.4;color:#2c1a3d}
.faq-i summary::-webkit-details-marker{display:none}
.q-b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#ff7cc0,#ff2f96);color:#fff;font-size:14px;font-weight:700;box-shadow:0 3px 8px rgba(240,30,130,.3)}
.faq-i summary>.ico:last-child{margin-left:auto;width:13px;height:13px;color:#ff2f96;transition:transform .2s}
.faq-i[open] summary>.ico:last-child{transform:rotate(45deg)}
.faq-i p{padding:0 16px 14px 52px;font-size:14.5px;line-height:1.7;color:#5b4a6b}
.fq-more{display:flex;align-items:center;gap:8px;margin:12px auto 0;min-height:44px;padding:0 20px;border:0;border-radius:99px;background:#fff;color:#d6157a;font:600 15px var(--f);box-shadow:0 0 0 1.5px #ffb6dc}
.fq-more .ico{width:12px;height:12px;transition:transform .2s}
.fq-more[aria-expanded="true"] .ico{transform:rotate(180deg)}
.cta{margin-top:22px;background:radial-gradient(40% 120% at 15% 50%,rgba(255,255,255,.75),rgba(255,255,255,0)),radial-gradient(30% 120% at 85% 40%,rgba(255,255,255,.6),rgba(255,255,255,0)),linear-gradient(180deg,#c9ecff 0%,#b3e2ff 55%,#d9c9ff 100%)}
.cta-in{display:flex;align-items:center;gap:22px;width:min(var(--max),100% - 2*var(--g));min-height:104px;margin-inline:auto;padding:6px 0}
.cta-logo{flex:none;width:auto;height:94px;margin:-6px 0;filter:drop-shadow(0 4px 6px rgba(160,30,110,.2))}
.cta h2{flex:none;font-family:var(--fd);font-weight:700;line-height:1}
.cta h2 .x3{font-size:34px}
.cta p{flex:1;min-width:0;font-size:15.3px;font-weight:500;color:#3a0f63}
.cta-b{flex:none;display:flex;gap:14px}
.cta-b .btn{min-height:60px;padding:0 40px;font-size:21px;font-weight:700;box-shadow:inset 0 0 0 3px rgba(255,255,255,.6),0 8px 18px rgba(120,40,160,.25)}

/* ---------- ท้ายเว็บ: แผงม่วง + ก้อนเมฆด้านล่าง (≥1180px วางตามสัดส่วนภาพ · cqw = % ความกว้างแผง) ---------- */
.foot{position:relative;background:#ffe6f4}
.foot-panel{position:relative;container-type:inline-size;aspect-ratio:941/152;border-radius:24px 24px 0 0;background:url(../images/footer/bg.webp) center bottom/100% auto no-repeat,linear-gradient(180deg,#3d1b4a,#3f1e4b);box-shadow:0 -3px 0 #fff,0 -12px 26px rgba(120,30,110,.18)}
.foot-in{display:grid;grid-template-columns:98fr 107fr 123fr 161fr 196fr;width:72.8cqw;margin-left:15.4cqw;padding-top:1.25cqw}
.fcol h2,.fapp h2{font-size:clamp(14px,1.15cqw,17px);font-weight:600;line-height:1.3;color:#fff}
.fcol ul{display:grid;margin-top:.5cqw;list-style:none;padding:0}
.fcol a{display:inline-block;font-size:clamp(12.5px,1.02cqw,15.5px);line-height:1.62;color:#e9dcff;transition:color .2s}
.fcol a:hover,.fcol a:focus-visible{color:#ffd23c}
.fsoc{border-left:1px dashed rgba(255,255,255,.22);padding-left:2.3cqw}
.socials{display:flex;flex-wrap:wrap;gap:.48cqw;margin-top:.9cqw}
.socials .so{display:grid;place-items:center;font-size:clamp(30px,2.23cqw,38px);width:1em;height:1em;border-radius:24%;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.25);transition:transform .2s}
.socials .so:hover{transform:translateY(-2px)}
.so .ico{width:.52em;height:.52em}
.so-line{background:#06c755}.so-fb{background:#1877f2}.so-yt{background:#ff1f1f}.so-tt{background:#111;box-shadow:inset 0 0 0 1px #444,0 3px 8px rgba(0,0,0,.25)}.so-ig{background:radial-gradient(circle at 30% 110%,#fdcb52 0 12%,#f56040 35%,#c13584 65%,#5851db)}
.fapp{display:flex;align-items:flex-start;gap:1cqw;padding:.6cqw 1.6cqw 0 0}
.fapp>div{min-width:0}
.fqr{flex:none;width:5.95cqw;min-width:78px;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.95),0 6px 16px rgba(0,0,0,.3)}
.fqr .qr-svg{display:block;width:100%;height:100%}
.fapp p{margin-top:.2cqw;font-size:clamp(12.5px,1cqw,15px);line-height:1.5;color:#e9dcff}
.fqr-m{display:none}
.fapp-b{margin-top:.8cqw;min-height:40px;padding:0 18px;font-size:14px}
.foot-copy{position:absolute;left:0;right:0;bottom:1.5cqw;padding:0 var(--g);text-align:center;font-size:clamp(11.5px,.92cqw,14px);font-weight:500;color:#6b3f84;text-shadow:0 0 6px rgba(255,255,255,.9)}
@media (hover:none){.fqr,.fqr-t{display:none}.fqr-m{display:inline}}

/* ---------- แถบล่าง (มือถือ) ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);box-shadow:0 -1px 0 #f7d6ea,0 -10px 24px rgba(160,30,110,.12)}
.mb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;font-size:11.5px;font-weight:500;color:#4b2a63}
.mb .ico{width:19px;height:19px;color:#ff2f96}
.mb-main{margin-top:-16px;min-height:62px;border-radius:18px;color:#fff;font-weight:600;background:linear-gradient(180deg,#ff7cc0,#ff2f96 55%,#ec1580);box-shadow:0 6px 16px rgba(240,30,130,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.mb-main .ico{color:#fff}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
@media (min-width:1180px){.mbar{display:none}body{padding-bottom:0}}

/* ---------- หน้าต่าง: ข้อมูลเกม / ค้นหา ---------- */
.mdl[data-kind="game"]{--mdl-w:520px}
.gm-art{aspect-ratio:16/9;--sk-bg:#3a1250}
.gm-art img{width:100%;height:100%;object-fit:cover}
.gm-art img.fit-contain{object-fit:contain;background:var(--gc,#3a1250)}
.gm-b{padding:18px 22px 4px}
.gm-k{font-size:13px;font-weight:600;color:#ff2f96}
.gm-b h3{margin-top:2px;font-size:25px;font-weight:700;line-height:1.25}
.gm-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.gm-dl div{padding:10px 12px;border-radius:12px;background:#fff0f8}
.gm-dl dt{font-size:12.5px;color:#8a5a7a}
.gm-dl dd{font-size:18px;font-weight:700;color:#2c1a3d}
.gm-n{margin-top:10px;font-size:13px;line-height:1.55;color:#7d6a8a}
.gm-n a{color:#d6157a;text-decoration:underline}
.gm-cta{width:100%;margin-top:14px;min-height:50px}
.srch-m{padding:28px 22px 22px}
.srch-m h3{font-size:24px;font-weight:700}
.srch-f{display:flex;align-items:center;gap:10px;margin-top:12px;padding:0 14px;border-radius:12px;background:#fff6fb;box-shadow:inset 0 0 0 1.5px #ffbfdf}
.srch-f .ico{width:16px;height:16px;color:#ff2f96}
.srch-f input{flex:1;min-width:0;height:48px;border:0;background:none;color:#2c1a3d;font:400 16px var(--f);outline:0}
ul.srch-l{display:grid;gap:4px;margin-top:12px;max-height:50vh;overflow:auto}
.srch-l a{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 10px;border-radius:10px;font-size:15px}
.srch-l a:hover{background:#fff0f8}
.srch-l small{margin-left:auto;padding:0 8px;border-radius:99px;background:#fff0f8;font-size:11.5px;color:#d6157a;white-space:nowrap}
.srch-0{margin-top:10px;font-size:14px;color:#7d6a8a}
.srch-0 a{color:#d6157a;text-decoration:underline}
.dm-btn{min-width:180px;min-height:46px;color:#fff;background:linear-gradient(180deg,#ff7cc0,#ff3a9c 50%,#ec1580)}
.dm-stage img{width:240px}

/* ---------- หน้าย่อย ---------- */
.page{padding-top:10px}
body:has(.page) .hdr{background:rgba(255,240,249,.94);box-shadow:0 8px 24px rgba(160,30,110,.10)}
body:has(.page) .hdr-in{height:76px}
body:has(.page) .logo img{height:62px}
.doc h1{color:#3a0f63}
.list-card h2{color:#3a0f63}
.list-card[href*="articles/"] img{aspect-ratio:16/10}
.list-card[href*="promotions/"] img{aspect-ratio:2.2/1}

/* ===================== โน้ตบุ๊กเล็ก / แท็บเล็ต ===================== */
@media (max-width:1399px){.cta-b .btn{min-height:54px;padding:0 28px;font-size:18px}.cta p{font-size:14.5px}}
@media (max-width:1279px){
  .sh h2{font-size:32px}
  .dash{gap:12px}
  .ic{height:auto;aspect-ratio:var(--ar,207/142)}
  .ic-today{--ar:207/142}.ic-vip{--ar:217/142}.ic-online{--ar:193/142}.ic-wd{--ar:232/142}
  ul.gl{gap:12px}
  .gt-n{font-size:14.5px}
  .ph h2{font-size:22px}
  .faq-i summary{font-size:14.5px}
  .cta h2 .x3{font-size:28px}
  .cta p{font-size:14px}
  .cta-b .btn{min-height:50px;padding:0 22px;font-size:17px}
}
@media (max-width:1179px){
  .hdr-in{height:84px}
  .logo{margin-left:0}
  .logo img{height:70px}
  .hdr-pill{flex:0 1 auto;margin-left:auto}
  .dash{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(260px,40%);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:0;width:auto;padding:4px var(--g) 10px;scroll-padding-inline:var(--g)}
  .dash>*{scroll-snap-align:start}
  .ic{aspect-ratio:auto;height:190px}
  ul.gl{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(150px,22%);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--g) * -1);padding:4px var(--g) 10px;scroll-padding-inline:var(--g)}
  .gt-n,.gt-m{position:static;padding:0;opacity:1;transform:none;translate:none}
  .gt-n{margin-top:8px;font-size:14.5px;color:#2c1a3d;text-shadow:none}
  .gt-m{font-size:12.5px;color:#8a6f98}
  .gt::after{display:none}
  .duo{grid-template-columns:1fr}
  .faqs{grid-template-columns:1fr}
  .fq-art{max-width:560px;width:100%;margin-inline:auto}
  .cta-in{flex-wrap:wrap;justify-content:center;text-align:center;padding:16px 0}
  .cta p{flex:1 1 100%;order:3}
  .cta-b{order:4}
  .foot-panel{aspect-ratio:auto;border-radius:22px 22px 0 0;background:url(../images/footer/bg.webp) center bottom/max(100%,1050px) auto no-repeat,#3f1e4b}
  .foot-in{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;width:min(var(--max),100% - 2*var(--g));margin:0 auto;padding:26px 0 120px}
  .fsoc{grid-column:1/3;border:0;padding:0}
  .fapp{grid-column:3/4;padding:0;gap:14px}
  .fqr{width:84px;min-width:0}
  .fapp p{margin-top:2px}
  .socials{gap:8px;margin-top:8px}
  .socials .so{font-size:44px}
  .fcol ul{margin-top:4px}
  .fcol a{padding:4px 0;line-height:1.45}
  .foot-copy{bottom:14px;font-size:12px}
}

/* ===================== มือถือ / แท็บเล็ตแนวตั้ง (<900px): ปกภาพแนวตั้ง ข้อความใต้ภาพ ===================== */
@media (max-width:899px){
  .hero{width:100%}
  .hero-box{border-radius:0 0 22px 22px;box-shadow:0 12px 26px rgba(180,40,130,.18);container-type:normal;background:linear-gradient(180deg,#ffd9ef,#ffeaf7)}
  .hero-box .sl-track{aspect-ratio:auto;height:auto}
  .sl[data-slider="fade"] .sl-track>.slide{position:absolute;inset:0 0 auto 0}
  .sl[data-slider="fade"] .sl-track>.slide.on{position:relative}
  .slide picture{height:auto}
  .slide picture img{height:auto;aspect-ratio:900/640;object-position:50% 0;-webkit-mask:linear-gradient(180deg,#000 72%,transparent 99%);mask:linear-gradient(180deg,#000 72%,transparent 99%)}
  .s-txt,.s2 .s-txt,.s3 .s-txt{position:relative;left:auto;top:auto;width:auto;margin-top:-96px;padding:0 16px 54px}
  .s-lock{width:min(78%,360px);filter:drop-shadow(0 4px 10px rgba(150,20,110,.3))}
  .s-sub{margin-top:-6px;font-size:clamp(15px,4.4vw,19px)}
  ul.chips{gap:6px;margin-top:12px;flex-wrap:wrap;justify-content:center}
  .chips li{height:auto;min-height:52px;padding:6px 10px;border-radius:12px;gap:6px}
  .chips .ico{width:20px;height:20px}
  .chips small{font-size:11.5px}
  .chips b{font-size:14px}
  .s-cta{width:min(100%,330px);height:52px;margin-top:14px;font-size:18px;gap:10px}
  .s-k{font-size:13.5px;padding:3px 12px}
  .s-h{margin-top:8px}
  .s-h .x3{font-size:clamp(36px,10vw,52px)}
  .s-h .x3-y{font-size:clamp(28px,7.8vw,40px)}
  .s-p{max-width:none;margin-top:8px;font-size:14.5px}
  .s2 .s-txt{padding:0 16px 54px;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .s3-fan{right:auto;left:50%;top:25vw;width:94vw;height:40vw;transform:translate(-50%,-50%)}
  .fan-i{width:27vw;border-radius:16px;box-shadow:0 0 0 3px #fff,0 8px 18px rgba(140,30,110,.3);transform:translate(-50%,-50%) translateX(calc(var(--k) * 16vw)) rotate(calc(var(--k) * 7deg)) translateY(calc(var(--a) * 2vw))}
  .fan-i:nth-child(3){width:32vw}
  .s-arrow{display:none}
  .s-dots{bottom:12px}
  .news{height:44px;margin-top:12px;gap:8px}
  .news-k{height:36px;padding:0 10px 0 6px;font-size:14px}
  .news-k span{display:none}
  .news-k img{height:24px}
  .news-track li{font-size:14px}
  .sh{flex-wrap:wrap;gap:10px}
  .sh>div{flex-basis:calc(100% - 50px)}
  .sh-ic{width:32px}
  .sh h2{font-size:clamp(24px,7vw,30px)}
  .sh-more{margin-left:42px;min-height:44px;padding:0 18px;font-size:14.5px}
  /* เวทีเปิดซอง: ประมาณหนึ่งหน้าจอ */
  .stage{margin-top:26px;container-type:normal}
  .stage-in{--u:min(calc(100vw / 420),1.4px);width:100%;height:auto;display:flex;flex-direction:column;align-items:center;padding:20px 16px 26px}
  .st-head{position:static}
  .st-head .x3{font-size:clamp(34px,10.4vw,48px)}
  .st-sub{font-size:15px}
  .st-head h2{transform:none}
  .st-rib{width:auto;height:32px;font-size:14px;padding:0 26px}
  .st-rib .ico{width:15px;height:15px}
  .stage-bg{display:none}
  .env-zone{position:relative;left:auto;top:auto;width:min(80vw,340px);height:auto;aspect-ratio:226/130;margin-top:46px}
  .env-bgm{display:block;position:absolute;z-index:-1;left:-46.46%;top:-99.23%;width:194.69%;max-width:none;height:auto;-webkit-mask:linear-gradient(180deg,transparent 0,#000 12%,#000 78%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 12%,#000 78%,transparent 100%)}
  .env-card{font-size:14px}
  .st-cta{position:relative;top:auto;margin-top:-26px}
  .st-btn{height:54px;padding:0 34px;font-size:19px}
  .st-note{font-size:12px;text-align:center;line-height:1.5;border-radius:12px;padding:4px 12px;margin-top:10px}
  ul.pills{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
  .pills li,.pills-r li,.pills li:nth-child(n),.pills-r li:nth-child(n){transform:none}
  .pills a{height:38px;padding:0 14px 0 10px;font-size:13.5px;gap:6px}
  .pills .ico{width:16px;height:16px}
  .pills-l{order:5}.pills-r{order:6;margin-top:8px}
  .snd{right:10px;top:94px}
  .panel{padding:14px 14px 16px}
  .ph h2{font-size:19px;white-space:normal}
  ul.posts{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(220px,70%);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -14px;padding:2px 14px 8px;scroll-padding-inline:14px}
  ul.posts>li{scroll-snap-align:start}
  ul.arts{grid-template-columns:1fr}
  .art{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:12px}
  .art img{grid-row:1/4;height:100%;aspect-ratio:auto;min-height:100px}
  .art h3{margin:10px 10px 0 0;font-size:15.5px}
  .art-x{margin:2px 10px 0 0;font-size:13px}
  .art-d{margin:6px 10px 10px 0}
  .faq{grid-template-columns:1fr;gap:10px}
  .faq-i summary{min-height:54px}
  .cta-logo{height:64px}
  .cta h2 .x3{font-size:26px}
  .cta-b{width:100%;justify-content:center}
  .cta-b .btn{flex:1 1 0;max-width:220px;padding:0 14px;font-size:16px}
}
@media (max-width:767px){
  :root{--g:16px;--sp:80px}
  .hdr-in{height:68px;gap:10px}
  .hdr.scrolled .hdr-in{height:64px}
  .menu{top:64px;max-height:calc(100vh - 64px)}
  .logo img,.hdr.scrolled .logo img{height:52px}
  .hdr-pill{flex:none;height:auto;padding:0;background:none;box-shadow:none}
  .hdr .btn{min-height:42px;padding:0 15px;font-size:14.5px}
  .hb-reg .ico{display:none}
  .dash{grid-auto-columns:82%;gap:12px}
  .ic{height:auto;aspect-ratio:var(--ar,207/142)}
  .ic-wd{aspect-ratio:232/150}
  ul.gl{grid-auto-columns:42%}
  .foot-in{grid-template-columns:1fr 1fr;gap:20px 16px;padding:24px 0 116px}
  .fsoc,.fapp{grid-column:1/-1}
  .fqr,.fqr-t{display:none}
  .fqr-m{display:inline}
}
@media (max-width:400px){.ph{flex-wrap:wrap;row-gap:8px}.ph h2{flex:1 1 calc(100% - 48px);white-space:normal}.ph-b{margin-left:48px}.logo img,.hdr.scrolled .logo img{height:44px}.hdr .btn{padding:0 12px;font-size:13.5px}.hdr-r{gap:6px}.menu-btn{width:42px;height:42px}.chips li{min-height:48px;padding:5px 8px}.chips b{font-size:13px}.chips small{font-size:10.5px}}
@media (max-width:340px){.logo img,.hdr.scrolled .logo img{height:38px}.hdr .btn{padding:0 10px;font-size:13px}.hb-login{display:none}}
.env:focus-visible{outline:3px solid #fff;outline-offset:5px;border-radius:calc(var(--u) * 14);box-shadow:0 0 0 8px rgba(122,43,214,.55)}