/* =====================================================================
   ส่วนกลาง (ทุกธีมใช้ร่วมกัน): 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}

/* ==================== ธีม AQUA JOY ==================== */
/* สี/ฟอนต์ของธีม (เปลี่ยนสีหลักได้ที่ assets/js/config.js → theme) */
:root{
  --bg:#f6fcff; --card:#fff; --line:#e6f2f9;
  --blue:#035bcb; --blue-2:#0a79d8; --aqua:#18b4ec; --aqua-lt:#dff5fe; --navy:#071a49; --yellow:#ffd23c;
  --txt:#14182c; --txt-2:#4f5568; --muted:#81818a;
  --max:1250px; --g:24px; --sp:92px;
  --u:min(calc(100vw / 941),1.5303px);
  --hdr-h:clamp(64px,calc(min(100vw,1440px) * 57 / 941),88px);
  --f:'Kanit',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --fd:'Mitr','Kanit',system-ui,sans-serif;
  --fn:'Fredoka','Kanit',system-ui,sans-serif;
  --skip-bg:#ffd23c; --focus:#0a79d8;
  --demo-bg:#fff2cf; --demo-fg:#8a5a00;
  --sk-bg:#d6eef9; --sk-shine:rgba(255,255,255,.6); --fb-fg:#2f5f8a;
  --mdl-bg:#fff; --mdl-fg:#14182c; --mdl-back:rgba(4,40,80,.6);
  --toast-bg:#06305f;
  --doc-bg:#fff; --doc-fg:#14182c; --doc-line:#e6f2f9; --doc-link:#0a6ccc; --doc-note-bg:#eef8fe; --doc-shadow:0 10px 30px rgba(0,80,150,.10),0 0 0 1px #e6f2f9;
  --doc-tpl-bg:#fff2cf; --doc-tpl-fg:#7a4c00; --side-bg:#fff; --side-line:#e6f2f9;
  --dm-bg:#eef8fe; --dm-card-bg:#fff; --dm-card-fg:#14182c; --dm-accent:#0a79d8;
}
body{font:400 16px/1.55 var(--f);color:var(--txt);-webkit-font-smoothing:antialiased;background:linear-gradient(180deg,#eaf8ff 0,#f7fcff 900px,#f6fcff 100%)}
.wrap{--max:1250px}

/* ---------- ตัวหนังสือนูนขอบหนา (พาดหัว / ตัวเลขโปร) ---------- */
.x3{position:relative;display:inline-block;isolation:isolate;white-space:nowrap;line-height:1.12;--x3s:#0b3d91;--x3e:#062a6b;--x3o:#e9f9ff}
.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,.15em) var(--x3s);text-shadow:0 .055em 0 var(--x3e),0 .09em .06em rgba(0,40,100,.35)}
.x3::after{z-index:-2;color:var(--x3o);-webkit-text-stroke:var(--x3ow,.28em) var(--x3o);filter:drop-shadow(0 .05em .05em rgba(0,60,140,.28))}
.x3-y{--x3f:linear-gradient(180deg,#fffbd0 0%,#ffe066 38%,#ffbd1f 70%,#ff9a00 100%)}
.x3-w{--x3f:linear-gradient(180deg,#ffffff 0%,#fffbe6 55%,#ffe58a 100%)}
.x3-b{--x3f:linear-gradient(180deg,#ffffff 0%,#e4f8ff 45%,#8ad9ff 100%)}
.x3-p{--x3f:linear-gradient(180deg,#ffd0e4 0%,#ff6fa8 45%,#e3176a 100%);--x3s:#fff;--x3e:#b00e52;--x3o:#8a0d47;--x3w:.12em;--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,background .2s}
.btn .ico{width:.9em;height:.9em;transition:transform .2s}
.btn:hover .ico{transform:translateX(3px)}
.btn-yel{color:#2d1c00;background:linear-gradient(180deg,#fff08a 0%,#ffd84a 45%,#ffc21a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(200,120,0,.25),0 6px 14px rgba(230,160,0,.28)}
.btn-blue{color:#fff;background:linear-gradient(180deg,#3fb4ff 0%,#1a8ff0 50%,#0874d6 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 5px 12px rgba(0,110,220,.25)}
.btn-out{color:#0a79d8;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 2px #2b95ea}
.btn-out:hover{background:#fff}
.btn-ol{color:#116ed8;background:#fff;box-shadow:inset 0 0 0 1.5px #5aaef0}
.btn-ol:hover{background:#eef7ff}
.btn-line-g{color:#fff;background:linear-gradient(180deg,#22d667,#06b34f);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 5px 12px rgba(0,150,60,.25)}
.btn-line-g .ico{width:1.25em;height:1.25em}
.btn-line-g:hover .ico{transform:none}
.btn-yel:hover,.btn-blue:hover,.btn-line-g:hover{filter:brightness(1.05)}
.fx{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s}

/* ---------- หัวเว็บ ---------- */
.hdr{position:sticky;top:0;z-index:60;height:var(--hdr-h);background:rgba(255,255,255,.22);transition:background .25s,box-shadow .25s}
.hdr.scrolled,body.menu-open .hdr{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 #e3f1f9,0 10px 26px rgba(0,70,140,.10)}
.hdr-in{display:flex;align-items:center;gap:12px;width:min(1440px,100%);height:100%;margin-inline:auto;padding:0 calc(min(100vw,1440px) * 66 / 941) 0 calc(min(100vw,1440px) * 95 / 941)}
.logo{flex:none;display:block;align-self:flex-start;padding-top:calc(var(--hdr-h) * .04);transition:transform .3s;transform-origin:0 0}
.logo img{height:calc(var(--hdr-h) * 1.08);width:auto;filter:drop-shadow(0 3px 6px rgba(0,60,140,.18))}
.hdr.scrolled .logo{transform:scale(.8)}
.nav{display:none;align-items:center;gap:calc(min(100vw,1440px) * 15 / 941);margin-left:calc(min(100vw,1440px) * 88 / 941)}
.nav a{padding:8px 4px;font-size:15.5px;font-weight:500;color:#0b1c3d;white-space:nowrap;transition:color .2s}
.nav a:hover{color:var(--blue-2)}
.nav a[aria-current="page"]{color:#1686d8;font-weight:600}
.hdr-r{display:flex;align-items:center;gap:calc(min(100vw,1440px) * 10 / 941);margin-left:auto}
.hdr .btn{min-height:46px;padding:0 20px;font-size:15.5px}
.hdr .btn-line-g,.hdr .btn-out{display:none}
.hdr .btn-out{min-width:104px}
.hdr .btn-yel{min-width:136px;font-weight:700}
.menu-btn{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:14px;background:#fff;color:var(--blue);box-shadow:0 4px 12px rgba(0,80,160,.14)}
.menu-btn .ico{width:19px;height:19px}
.menu{position:fixed;left:0;right:0;top:var(--hdr-h);z-index:59;background:#fff;box-shadow:0 24px 40px rgba(0,60,120,.18);transform:translateY(-10px);opacity:0;visibility:hidden;transition:.22s;max-height:calc(100vh - var(--hdr-h));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 #edf5fa;font-size:16px;font-weight:500;color:#0b1c3d}
.menu nav>a .ico{width:12px;height:12px;color:var(--blue-2)}
.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){.hdr .btn-out{display:inline-flex}}
@media (min-width:1180px){.nav{display:flex}.hdr .btn-line-g{display:inline-flex}.menu-btn,.menu{display:none!important}}
@media (min-width:1180px) and (max-width:1379px){.nav{margin-left:28px;gap:14px}.nav a{font-size:15px}.hdr .btn{padding:0 15px;font-size:15px}.hdr .btn-out,.hdr .btn-yel{min-width:0}}

/* ---------- A · ปก (จอคอม ≥1024px: ภาพกว้าง + ตำแหน่งตาม mockup · หน่วย --u = 1px ของ mockup) ---------- */
.hero{position:relative;margin-top:calc(var(--hdr-h) * -1);container-type:inline-size;isolation:isolate}
.hero-bg img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.hero-in{--u:min(calc(100cqw / 941),1.5303px);position:relative;width:calc(var(--u) * 941);height:calc(var(--u) * 420);margin-inline:auto}
.hh{position:absolute;left:calc(var(--u) * 300);top:0;width:calc(var(--u) * 340);height:calc(var(--u) * 300)}
.hh::before{content:"";position:absolute;left:-12%;right:-12%;top:22%;bottom:-6%;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.hh-logo{position:absolute;left:calc(var(--u) * 118);top:calc(var(--u) * 63);width:calc(var(--u) * 88);height:auto;filter:drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0,60,140,.2))}
.hh-h{position:absolute;left:0;right:0;top:calc(var(--u) * 99);display:flex;flex-direction:column;align-items:center;font-family:var(--fd);font-weight:700;line-height:1}
.hh-h .x3{--x3w:.17em;--x3ow:.3em;line-height:1}
.hh-l1,.hh-l2{display:flex;align-items:flex-end;white-space:nowrap}
.hh-a{font-size:calc(var(--u) * 64);margin-right:calc(var(--u) * 1)}
.hh-b{font-size:calc(var(--u) * 49);margin-bottom:calc(var(--u) * 8)}
.hh-l2{margin-top:calc(var(--u) * -17);transform:translateX(calc(var(--u) * 42))}
.hh-c{font-size:calc(var(--u) * 41)}
.hh-d{font-size:calc(var(--u) * 45)}
.sign{position:absolute;left:calc(var(--u) * 50);top:calc(var(--u) * 187.5);display:block;width:calc(var(--u) * 246.5);container-type:inline-size;transition:transform .3s cubic-bezier(.3,1.5,.5,1),filter .3s}
.sign>img{width:100%;height:auto;filter:drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 5) rgba(80,40,0,.22))}
.sign-t{position:absolute;left:12%;right:4%;top:13.5%;display:flex;flex-direction:column;align-items:center;transform:rotate(-3deg)}
.sign-s{font-size:5.42cqw;font-weight:600;line-height:1.2;color:#1c120b;white-space:nowrap}
.sign-n{display:flex;align-items:baseline;gap:1.2cqw;margin-top:-.4cqw;font-family:var(--fn);font-weight:700;line-height:1}
.sign-n>.x3:first-child{font-size:23cqw;letter-spacing:.01em}
.sign-b{font-family:var(--fd);font-size:6.6cqw}
@media (hover:hover){.sign:hover{transform:scale(1.035) rotate(-.6deg);filter:brightness(1.04)}}
.hero-cta,.hero-m{display:none}
ul.feats{position:absolute;left:calc(var(--u) * 318);top:calc(var(--u) * 292);display:flex;align-items:center;justify-content:space-around;width:calc(var(--u) * 328);height:calc(var(--u) * 42);padding:0 calc(var(--u) * 8);border-radius:calc(var(--u) * 12);background:rgba(255,255,255,.82);box-shadow:0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(0,80,150,.12);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.feats li{display:flex;align-items:center;gap:calc(var(--u) * 5)}
.feats .ico{width:calc(var(--u) * 17);height:calc(var(--u) * 17);color:#0a6fd6}
.feats span{display:flex;flex-direction:column;font-size:max(calc(var(--u) * 7.4),10px);line-height:1.3;color:#4b5770;white-space:nowrap}
.feats b{font-size:max(calc(var(--u) * 8.7),11px);font-weight:600;color:#0b1c3d}

/* ---------- B · Split: เกมแนะนำ | โปรโมชั่น ---------- */
.sz{position:relative;z-index:2;margin-top:calc(var(--u) * -73);background:linear-gradient(180deg,rgba(207,248,251,0) calc(var(--u) * 73),#cff6fb calc(var(--u) * 73),#e2fafd calc(var(--u) * 73 + 260px),rgba(240,252,255,0) calc(var(--u) * 73 + 560px))}
.split{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,390fr) minmax(0,426fr);width:min(var(--max),100% - 2*var(--g));margin:0 auto;border-radius:34px;background:#fff;box-shadow:0 22px 50px rgba(0,90,160,.12),0 0 0 1px rgba(255,255,255,.9)}
.sp-games{position:relative;padding:27px 26px 22px 35px;min-width:0}
.sp-games::after{content:"";position:absolute;right:0;top:28px;bottom:28px;width:1px;background:linear-gradient(180deg,rgba(150,205,235,0),#cfe9f7 15%,#cfe9f7 85%,rgba(150,205,235,0))}
.sp-promos{display:flex;flex-direction:column;gap:13px;padding:22px 24px 24px 30px;min-width:0}
.sh{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sh-ic{flex:none;width:50px;height:auto;filter:drop-shadow(0 4px 6px rgba(0,90,180,.18))}
.sh>div{flex:1;min-width:0}
.sh h2{font-size:28px;font-weight:700;line-height:1.2;color:var(--blue);letter-spacing:-.005em}
.sh p{margin-top:1px;font-size:15px;line-height:1.4;color:var(--muted)}
.sh-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14.5px;font-weight:500;color:#116ed8;white-space:nowrap}
.sh-more .ico{width:12px;height:12px}
.sh-p{margin-bottom:3px}
.sh-p .sh-ic{width:56px}
.g-st{white-space:nowrap}
.g-st b{color:var(--blue-2);font-variant-numeric:tabular-nums}
ol.glist{display:grid;gap:8px}
.gr{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:78px;padding:6px 14px 6px 8px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #edf4f9,0 4px 12px rgba(0,80,150,.05)}
.gr-n{display:grid;place-items:center;width:34px;height:34px;margin-left:4px;border-radius:50%;font-size:17px;font-weight:700;color:#0b1430;background:#eef6fb;box-shadow:inset 0 0 0 1px #d8e9f4}
.glist .gr:nth-child(1) .gr-n{background:radial-gradient(circle at 35% 30%,#fff7c8 0 18%,#ffd54a 50%,#eba418 100%);color:#5a3500;box-shadow:0 2px 6px rgba(200,130,0,.35)}
.glist .gr:nth-child(2) .gr-n{background:radial-gradient(circle at 35% 30%,#fff 0 18%,#dfe5ee 50%,#a6b1c2 100%);color:#2f3a4d;box-shadow:0 2px 6px rgba(80,90,110,.3)}
.glist .gr:nth-child(3) .gr-n{background:radial-gradient(circle at 35% 30%,#ffe6cc 0 18%,#f5b07a 50%,#cf7a3c 100%);color:#5a2a05;box-shadow:0 2px 6px rgba(160,80,20,.3)}
.gr-g{display:grid;grid-template-columns:122px minmax(0,1fr);align-items:center;gap:16px;min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left}
.gr-th{width:122px;height:70px;border-radius:9px;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 4px 10px rgba(0,60,120,.14)}
.gr-th img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gr-th img.fit-contain{object-fit:contain;background:var(--gc,#1b2a44)}
.gr-th .fb{font-size:11.5px;color:#2f5f8a}
.gr-i{display:flex;flex-direction:column;min-width:0}
.gr-i b{font-size:16.5px;font-weight:600;line-height:1.3;color:#0d0e25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-tag{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600;line-height:1.35;color:#fe2420}
.gr-tag .ico{width:13px;height:13px}
.gr-i small{display:flex;align-items:center;gap:6px;font-size:13.5px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-i small .ico{flex:none;width:14px;height:14px;padding:2px;border-radius:4px;color:#fff;background:#1fbf6a}
.gr-b{min-height:40px;padding:0 24px;font-size:14px;border-radius:10px}
@media (hover:hover){.gr:hover{box-shadow:0 0 0 1px #cfe6f6,0 8px 20px rgba(0,80,150,.12)}.gr-g:hover .gr-th img{transform:scale(1.06)}.gr-g:hover b{color:var(--blue-2)}}
.g-note{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.g-note a{color:var(--blue-2);text-decoration:underline;text-underline-offset:2px}

/* โปรโมชั่น: ภาพ + ข้อความ HTML (หน่วย cqw = % ของความกว้างการ์ด) */
.pa{position:relative;display:block;overflow:hidden;border-radius:16px;container-type:inline-size;isolation:isolate;box-shadow:0 8px 20px rgba(0,90,160,.14)}
.pa>img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;transition:transform .6s}
@media (hover:hover){.pa:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,90,160,.22)}.pa:hover>img{transform:scale(1.04)}}
.pa-main{aspect-ratio:390/137}
.pm-t{position:absolute;inset:0}
.pm-t>*{position:absolute}
.pm-k{left:9cqw;top:3.8cqw;padding:.25cqw 2.6cqw .5cqw;border-radius:99px;background:#fff;color:#022b91;font-size:4.05cqw;font-weight:600;line-height:1.25;box-shadow:0 .5cqw 1.2cqw rgba(0,60,140,.18)}
.pm-rb{left:10.4cqw;top:8.6cqw;font-family:var(--fd);font-size:6.9cqw;line-height:1}
.pm-n{left:35.4cqw;top:4.4cqw;font-family:var(--fn);font-size:13.6cqw;line-height:1}
.pm-s{left:11.8cqw;top:17.8cqw;padding:.3cqw 2.4cqw .5cqw;border-radius:99px;background:linear-gradient(180deg,#1f6fe0,#0a47b6);color:#fff;font-size:2.65cqw;font-weight:500;line-height:1.3}
.pm-b{left:29cqw;top:24.2cqw;min-height:0;height:9.4cqw;padding:0 4.8cqw;gap:1.6cqw;font-size:2.85cqw;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1cqw 2cqw rgba(230,150,0,.3)}
.pa-row{display:grid;grid-template-columns:minmax(0,181fr) minmax(0,198fr);gap:13px}
.pa-cb{aspect-ratio:181/97}
.pa-rf{aspect-ratio:198/97}
.ps-t{position:absolute;inset:0}
.ps-t>*{position:absolute;line-height:1}
.pa-cb .ps-h{left:9.4cqw;top:9.4cqw;font-family:var(--fd);font-size:8.8cqw}
.pa-cb .ps-n{left:9cqw;top:18.4cqw;font-family:var(--fn);font-size:27cqw}
.pa-rf .ps-h{left:5.6cqw;top:8.4cqw;font-family:var(--fd);font-size:7.4cqw;--x3s:#b0105a;--x3e:#7c0a40}
.ps-row{left:5.4cqw;top:14.2cqw;display:flex;align-items:baseline;gap:1cqw}
.pa-rf .ps-n{font-family:var(--fn);font-size:19cqw;line-height:1}
.pa-rf .ps-u{font-family:var(--fd);font-size:9.6cqw}
.pa-rf .ps-k{left:15.4cqw;top:34.6cqw;font-family:var(--fd);font-size:5.6cqw}
.ps-go{position:absolute;right:3cqw;bottom:2.6cqw;display:grid;place-items:center;width:12.6cqw;height:12.6cqw;border-radius:50%;background:linear-gradient(180deg,#ffe46a,#ffbf1a);color:#2b1a00;box-shadow:0 .8cqw 1.6cqw rgba(160,100,0,.3),inset 0 0 0 .5cqw rgba(255,255,255,.6)}
.ps-go .ico{width:45%;height:45%}
.pa-vip{aspect-ratio:390/89}
.pv-t{position:absolute;left:36.6cqw;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2.2cqw}
.pv-h{display:flex;flex-direction:column;font-size:3.75cqw;font-weight:700;line-height:1.25;color:#fff}
.pv-g,.pv-h em{font-style:normal;background:linear-gradient(180deg,#fff6b0,#ffd23c 50%,#f2a40c);-webkit-background-clip:text;background-clip:text;color:transparent}
.pv-b{min-height:0;height:6.8cqw;padding:0 3.8cqw;gap:1.4cqw;font-size:2.75cqw;font-weight:500;color:#fff;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 .3cqw #d9b45a}
.pv-l{position:absolute;left:70.4cqw;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:.9cqw;list-style:none;margin:0;padding:0}
.pv-l li{display:flex;align-items:center;gap:1.6cqw;font-size:2.35cqw;line-height:1.3;color:#fff;white-space:nowrap}
.pv-l .ico{width:1.1em;height:1.1em;color:#fff}

/* ---------- คลื่นน้ำคั่นส่วน ---------- */
.wave{position:relative;z-index:1;height:clamp(46px,calc(var(--u) * 62),96px);margin-top:calc(clamp(46px,calc(var(--u) * 62),96px) * -.5);overflow:hidden;pointer-events:none}
.wave svg{position:absolute;left:-4%;top:0;width:108%;height:100%}
.w-a{fill:#7fdaf7;opacity:.72}
.w-b{fill:#24b4ec;opacity:.5}
.w-c{stroke:#fff;stroke-width:3;opacity:.7}
@media (prefers-reduced-motion:no-preference){.w-a,.w-c{animation:wv 9s ease-in-out infinite alternate}.w-b{animation:wv 12s ease-in-out infinite alternate-reverse}}
@keyframes wv{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}

/* ---------- C · หมวดหมู่เกม ---------- */
.sec{margin-top:40px}
#categories{margin-top:6px}
ul.cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}
.cat{position:relative;display:block;aspect-ratio:127/129;border-radius:18px;overflow:hidden;container-type:inline-size;isolation:isolate;background:#d9f1fb;box-shadow:0 0 0 2px #fff,0 10px 22px rgba(0,90,160,.16)}
.cat img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cat-t{position:absolute;left:9.5cqw;bottom:8.6cqw;font-size:10.6cqw;font-weight:700;line-height:1.1;color:#fff;text-shadow:0 .5cqw 1.4cqw rgba(0,40,90,.35);white-space:nowrap}
.cat-go{position:absolute;right:6.5cqw;bottom:6.3cqw;display:grid;place-items:center;width:18.6cqw;height:18.6cqw;border-radius:50%;background:#fff;color:var(--c,#1f8ff0);box-shadow:0 .8cqw 1.8cqw rgba(0,40,90,.2)}
.cat-go .ico{width:45%;height:45%}
@media (hover:hover){.cat:hover{transform:translateY(-6px);box-shadow:0 0 0 2px #fff,0 18px 32px rgba(0,90,160,.24)}.cat:hover img{transform:scale(1.06)}.cat:hover .cat-go{transform:translateX(2px)}}

/* ---------- D · Lucky Spin (จอคอม: ตำแหน่งตาม mockup) ---------- */
.spin{position:relative;margin-top:22px;container-type:inline-size;isolation:isolate}
.spin-bg img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.spin-in{--u:min(calc(100cqw / 941),1.5303px);position:relative;width:calc(var(--u) * 941);height:calc(var(--u) * 214);margin-inline:auto}
.spin-h{position:absolute;left:calc(var(--u) * 130);top:calc(var(--u) * 20);width:calc(var(--u) * 220);display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.spin-h h2{display:flex;flex-direction:column;align-items:center;font-family:var(--fn);font-weight:700;line-height:1}
.spin-a{font-size:calc(var(--u) * 21);letter-spacing:.02em;--x3w:.16em}
.spin-b{margin-top:calc(var(--u) * 1);font-size:calc(var(--u) * 31);letter-spacing:.01em}
.spin-s{display:flex;flex-direction:column;align-items:flex-end;margin-top:calc(var(--u) * 6);font-size:max(calc(var(--u) * 10),12px);line-height:1.4;color:#000a5a;text-shadow:0 0 calc(var(--u) * 4) rgba(255,255,255,.9),0 0 calc(var(--u) * 2) #fff}
.spin-s b{font-size:max(calc(var(--u) * 11),13px);font-weight:600;color:#010a4e}
.spin-s span{font-weight:600;color:#0a3fae}
.wheel{position:absolute;left:calc(var(--u) * 366.8);top:calc(var(--u) * -11.2);width:calc(var(--u) * 202);height:calc(var(--u) * 202)}
.wheel-disc{display:block;width:100%;height:100%;border-radius:50%;cursor:pointer;filter:drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 8) rgba(0,60,120,.28));will-change:transform}
.wheel-pin{position:absolute;left:50%;top:calc(var(--u) * 10);width:calc(var(--u) * 21);height:auto;transform:translateX(-50%);filter:drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(0,40,90,.35))}
.spin-card{position:absolute;left:calc(var(--u) * 592);top:calc(var(--u) * 25);width:calc(var(--u) * 198);min-height:calc(var(--u) * 112);padding-bottom:calc(var(--u) * 8)!important;display:flex;flex-direction:column;align-items:center;padding:calc(var(--u) * 13) calc(var(--u) * 12) 0;border-radius:calc(var(--u) * 14);background:rgba(255,255,255,.95);box-shadow:0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0,80,150,.18);text-align:center}
.spin-card h3{font-size:max(calc(var(--u) * 12),14px);font-weight:700;line-height:1.3;color:#0780d1}
.sc-s{font-size:max(calc(var(--u) * 7.6),11px);line-height:1.4;color:#5a6276}
.sc-b{width:calc(var(--u) * 170);height:max(calc(var(--u) * 30),36px);min-height:0;margin-top:calc(var(--u) * 8);font-size:max(calc(var(--u) * 11),14px);font-weight:700}
.sc-b:disabled{filter:grayscale(.4);opacity:.75;cursor:not-allowed}
.sc-n{margin-top:calc(var(--u) * 8);font-size:max(calc(var(--u) * 8.3),11px);line-height:1.35;color:#2f3239}
.sc-n b{color:var(--blue-2)}
.sc-d{margin-top:calc(var(--u) * 4);font-size:max(calc(var(--u) * 6.8),10.5px);line-height:1.4;color:var(--muted)}
.sc-d .demo{font-size:max(calc(var(--u) * 6.4),10px)}
.sc-d a{color:var(--blue-2);text-decoration:underline;text-underline-offset:2px}
/* น้ำกระเซ็นตอนวงล้อหยุด */
.wheel.splash::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:calc(var(--u) * 4) solid rgba(255,255,255,.85);animation:ring .7s ease-out forwards;pointer-events:none}
@keyframes ring{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}
.drop{position:absolute;left:50%;top:50%;z-index:3;width:calc(var(--u) * 9 * var(--s,1));height:calc(var(--u) * 12 * var(--s,1));margin:calc(var(--u) * -6) 0 0 calc(var(--u) * -4.5);border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;background:radial-gradient(circle at 35% 30%,#fff 0 20%,#9fe6ff 45%,#26b4f0 100%);box-shadow:0 1px 3px rgba(0,80,150,.3);animation:drop 1s cubic-bezier(.2,.7,.3,1) forwards;pointer-events:none}
@keyframes drop{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 40px)) scale(1);opacity:0}}

/* ---------- E · บทความ ---------- */
.sh-btn{flex:none;min-height:44px;padding:0 20px;font-size:15px;font-weight:500}
#articles{margin-top:30px}
ul.arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.art{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center;height:100%;padding:6px 16px 6px 6px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #e9f3f9,0 8px 20px rgba(0,80,150,.06)}
.art img{width:170px;height:170px;object-fit:cover;border-radius:12px}
.art-b{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.art-tag{padding:1px 12px 2px;border-radius:99px;color:#fff;font-size:12.5px;font-weight:500;line-height:1.5}
.t-red{background:#fa4260}.t-teal{background:#07c09d}.t-orange{background:#fc5e10}
.art h3{margin-top:8px;font-size:17px;font-weight:600;line-height:1.38;color:#0a0b1c;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-x{margin-top:4px;font-size:13.5px;line-height:1.5;color:#6c6f7d;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-d{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:#8a8a92}
.art-d .ico{width:13px;height:13px}
@media (hover:hover){.art:hover{transform:translateY(-4px);box-shadow:0 0 0 1px #cfe6f6,0 14px 28px rgba(0,80,150,.12)}.art:hover h3{color:var(--blue-2)}}

/* ---------- F · FAQ (2 คอลัมน์ อ่านลงตามคอลัมน์) ---------- */
#faq{margin-top:36px}
.faq{columns:2;column-gap:28px}
.faq-i{break-inside:avoid;margin-bottom:10px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e9f3f9;transition:box-shadow .2s}
.faq-i[open]{box-shadow:0 0 0 1.5px #8fcaf3,0 8px 18px rgba(0,90,170,.08)}
.faq-i summary{display:flex;align-items:center;gap:12px;min-height:50px;padding:6px 18px;list-style:none;cursor:pointer;font-size:15.5px;font-weight:600;line-height:1.4;color:#0e101e}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary>.ico:last-child{margin-left:auto;width:13px;height:13px;color:#716f7d;transition:transform .2s}
.faq-i[open] summary>.ico:last-child{transform:rotate(45deg);color:var(--blue-2)}
.faq-i p{padding:0 18px 14px;font-size:14.5px;line-height:1.7;color:#6c6f7d}

/* ---------- ท้ายเว็บ ---------- */
.foot{position:relative;margin-top:40px;padding-top:40px;background:#dff6fd url(../images/footer/waves.webp) center top/cover no-repeat}
.foot-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 36px;width:min(1300px,100% - 2*var(--g));margin-inline:auto;padding:18px 0 26px}
.foot-brand{display:flex;align-items:center;gap:18px}
.foot-logo img{height:84px;width:auto;filter:drop-shadow(0 4px 8px rgba(0,60,140,.18))}
.foot-brand p{display:flex;flex-direction:column;font-size:15px;line-height:1.5;color:#244a7a}
.foot-brand b{font-size:17px;font-weight:600;color:#0e4fb5}
.foot-mid{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;font-size:13px;color:#1f6a98}
.foot-nav a{padding:3px 12px}
.foot-nav a+a{border-left:1px solid #9fd2ea}
.foot-nav a:hover{color:var(--blue)}
.foot-nav a[aria-current="page"]{color:var(--blue);font-weight:600}
ul.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.trust li{display:flex;align-items:center;gap:10px}
.trust .ico{width:30px;height:30px;padding:5px;border-radius:9px;color:#fff;background:linear-gradient(180deg,#45b8f5,#1584dc)}
.trust span{display:flex;flex-direction:column;font-size:12.5px;line-height:1.35;color:#3a6a8c}
.trust b{font-size:13.5px;font-weight:600;color:#0d3f7a}
.foot-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.socials{display:flex;gap:10px}
.so{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#fff;box-shadow:0 4px 10px rgba(0,60,120,.16);transition:transform .2s}
.so:hover{transform:translateY(-2px)}
.so .ico{width:22px;height:22px}
.so-line{background:#06c755}.so-fb{background:#1877f2}.so-yt{background:#ff1f1f}.so-ig{background:radial-gradient(circle at 30% 110%,#fdcb52 0 12%,#f56040 35%,#c13584 65%,#5851db)}
.foot-copy{font-size:12.5px;line-height:1.6;color:#4c7895;text-align:right}
.foot-copy a{text-decoration:underline;text-underline-offset:2px}

/* ---------- แถบล่าง (มือถือ) ---------- */
.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 #e3f1f9,0 -10px 24px rgba(0,60,120,.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:#21456e}
.mb .ico{width:19px;height:19px;color:var(--blue-2)}
.mb-main{margin-top:-16px;min-height:62px;border-radius:16px;color:#2d1c00;font-weight:600;background:linear-gradient(180deg,#fff08a,#ffd84a 50%,#ffc21a);box-shadow:0 6px 16px rgba(230,160,0,.35),inset 0 1px 0 #fff}
.mb-main .ico{color:#5a3900}
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:#16304f}
.gm-art img{width:100%;height:100%;object-fit:cover}
.gm-art img.fit-contain{object-fit:contain;background:var(--gc,#16304f)}
.gm-b{padding:18px 22px 4px}
.gm-k{font-size:13px;font-weight:600;color:var(--blue-2)}
.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:#eef8fe}
.gm-dl dt{font-size:12.5px;color:#4f7795}
.gm-dl dd{font-size:18px;font-weight:700;color:#0b1c3d}
.gm-n{margin-top:10px;font-size:13px;line-height:1.55;color:#77777d}
.gm-n a{color:var(--blue-2);text-decoration:underline}
.gm-cta{width:100%;margin-top:14px;min-height:50px}
.wres-cta,.eres-cta{color:#2d1c00;background:linear-gradient(180deg,#fff08a,#ffd84a 45%,#ffc21a)}
.mdl[data-kind="wheel"] .mdl-panel{background:linear-gradient(180deg,#e4f8ff,#fff 40%)}
.dm-btn{min-width:180px;min-height:46px;color:#fff;background:linear-gradient(180deg,#3fb4ff 0%,#1a8ff0 50%,#0874d6 100%)}

/* ---------- หน้าย่อย ---------- */
.dm-aw{padding:22px 14px}
.dm-aw .wheel{position:relative;left:auto;top:auto;width:min(78vw,300px);height:min(78vw,300px)}
.dm-aw .wheel-pin{top:5%;width:11%}
.dm-aw .dm-btn{min-width:200px}
.dm-aw .dm-out b{display:inline;font-size:inherit;margin:0}
.list-row-v .pa-cb,.list-row-v .pa-rf{width:min(100%,380px)!important}
.page-side a[href*="promotions/"] img{object-position:100% 50%}
.page{padding-top:20px}
body:has(.page) .hdr{background:rgba(255,255,255,.96);box-shadow:0 1px 0 #e3f1f9}
@media (min-width:768px){body:has(.page) .logo{transform:scale(.8)}}
.doc h1{color:var(--blue)}
.list-card h2{color:#0b1c3d}
.list-card[href*="articles/"] img,.list-act img{aspect-ratio:16/9}
.list-card[href*="promotions/"] img{aspect-ratio:2.4/1}
.doc-img.doc-pa{display:block;padding:18px 18px 0}
.doc-pa .pa{width:min(100%,600px);margin-inline:auto}
.doc-pa .pa>img{border-radius:0;box-shadow:none;max-height:none;max-width:none;width:100%;height:100%}
.doc-pa .pa .btn{visibility:hidden}
.doc-pa .pa-cb,.doc-pa .pa-rf{width:min(100%,420px)}

/* ===================== โน้ตบุ๊กเล็ก ===================== */
@media (max-width:1279px){
  .gr-g{grid-template-columns:104px minmax(0,1fr);gap:12px}
  .gr-th{width:104px;height:60px}
  .gr-i b{font-size:15.5px}.gr-tag{font-size:13px}.gr-i small{font-size:12.5px}
  .gr-b{padding:0 16px}
  .art{grid-template-columns:130px minmax(0,1fr);gap:14px}
  .art img{width:130px;height:130px}
  .art h3{font-size:16px}
  .foot-in{grid-template-columns:minmax(0,1fr) auto}
  .foot-mid{grid-column:1/-1;grid-row:2}
}

/* ===================== แท็บเล็ต / มือถือ (<1024px): จัดหน้าใหม่ ===================== */
@media (max-width:1023px){
  /* ปก: พาดหัว (HTML) บนท้องฟ้า → ปุ่ม → ภาพพรีเซนเตอร์ + มาสคอต → แถบจุดเด่น */
  .hero{padding-top:calc(var(--hdr-h) + 4px);background:radial-gradient(90% 46% at 50% 30%,rgba(255,255,255,.8),rgba(255,255,255,0)),linear-gradient(180deg,#8fd6fa 0%,#bfe9fd 36%,#dff5fe 62%,#f2fbff 100%);container-type:normal}
  .hero-bg{display:none}
  .hero-in{--u:1px;width:auto;height:auto;display:flex;flex-direction:column;align-items:center;padding:0 var(--g)}
  .hh{position:relative;left:auto;top:auto;width:min(100%,520px);height:auto;display:flex;flex-direction:column;align-items:center}
  .hh::before{display:none}
  .hh-logo{position:static;width:clamp(96px,26vw,140px);margin:0}
  .hh-h{position:static;margin-top:-4px}
  .hh-a{font-size:clamp(52px,15.4vw,86px)}
  .hh-b{font-size:clamp(40px,12vw,68px);margin-bottom:clamp(5px,1.6vw,10px)}
  .hh-l2{margin-top:clamp(-12px,-2vw,-6px);transform:translateX(9%)}
  .hh-c{font-size:clamp(33px,9.6vw,54px)}
  .hh-d{font-size:clamp(36px,10.4vw,58px)}
  .sign{position:relative;left:auto;top:auto;width:min(94%,440px);margin:2px 0 0}
  .hero-cta{display:flex;gap:10px;width:min(100%,480px);margin-top:14px}
  .hero-cta .btn{flex:1 1 0;min-height:52px;font-size:16.5px;font-weight:700}
  .hero-m{display:block;width:calc(100% + 2 * var(--g));max-width:760px;height:auto;margin-top:12px;-webkit-mask:linear-gradient(180deg,transparent 0,#000 18%);mask:linear-gradient(180deg,transparent 0,#000 18%)}
  ul.feats{position:relative;left:auto;top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,640px);height:auto;margin-top:-30px;padding:12px 6px;border-radius:18px;background:rgba(255,255,255,.95);box-shadow:0 10px 26px rgba(0,80,150,.14)}
  .feats li{flex-direction:column;justify-content:flex-start;gap:6px;text-align:center;padding:0 4px}
  .feats li+li{border-left:1px solid #e3f1f9}
  .feats .ico{width:24px;height:24px}
  .feats span{align-items:center;font-size:12px;white-space:normal}
  .feats b{font-size:13.5px}
  /* Split → เรียงใหม่: โปรหลัก → เกมแนะนำ → โปรรอง (เลื่อนแนวนอน) → VIP */
  .sz{margin-top:0;background:none}
  .split{display:flex;flex-direction:column;margin-top:22px;padding:20px 18px 18px;border-radius:24px;gap:14px}
  .sp-promos{display:contents}
  .sh-p{order:1;margin:0}
  .pa-1{order:2}
  .sp-games{order:3;padding:6px 0 0}
  .sp-games::after{display:none}
  .pa-row{order:4}
  .pa-4{order:5}
  .sh{margin-bottom:12px}
  .pa-row.rail{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(78%,340px);margin:0 -18px;padding:2px 18px 6px;scroll-padding-inline:18px}
  ul.cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  /* Lucky Spin: หัวข้อ → วงล้อเต็มความกว้าง → การ์ด */
  .spin{margin-top:28px;padding:22px 0 26px;background:radial-gradient(70% 40% at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,0)),linear-gradient(180deg,#d8f4ff 0%,#a8e3fb 40%,#6fd0f5 75%,#3cbff0 100%);container-type:normal}
  .spin-bg{display:none}
  .spin-in{--u:1px;width:auto;height:auto;display:flex;flex-direction:column;align-items:center;padding:0 var(--g)}
  .spin-h{position:static;width:auto;align-items:center;text-align:center}
  .spin-a{font-size:clamp(22px,6.6vw,30px)}
  .spin-b{font-size:clamp(36px,11vw,52px)}
  .spin-s{align-items:center;font-size:15px}
  .spin-s b{font-size:16px}
  .wheel{position:relative;left:auto;top:auto;width:min(84vw,360px);height:min(84vw,360px);margin-top:18px}
  .wheel-pin{top:5%;width:11%}
  .spin-card{position:relative;left:auto;top:auto;width:min(100%,380px);height:auto;margin-top:16px;padding:16px 18px 14px;border-radius:18px}
  .spin-card h3{font-size:20px}
  .sc-s{font-size:14px}
  .sc-b{width:100%;height:52px;margin-top:12px;font-size:18px}
  .sc-n{margin-top:10px;font-size:14.5px}
  .sc-d,.sc-d .demo{font-size:12.5px}
  ul.arts{grid-template-columns:1fr;gap:12px}
  .art{grid-template-columns:120px minmax(0,1fr)}
  .art img{width:120px;height:120px}
  .faq{columns:1}
  .foot-in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .foot-brand{flex-direction:column;gap:6px}
  .foot-r{align-items:center}
  .foot-copy{text-align:center}
}
@media (max-width:767px){
  :root{--g:16px;--sp:76px}
  .hdr-in{gap:10px;padding:0 var(--g)}
  .logo{padding-top:4px}
  .logo img{height:58px}
  .hdr.scrolled .logo{transform:scale(.86)}
  .hdr .btn-yel{min-width:0;min-height:42px;padding:0 16px;font-size:14.5px}
  .sec{margin-top:34px}
  .sh{gap:10px}
  .sh-ic{width:40px}
  .sh-p .sh-ic{width:44px}
  .sh h2{font-size:clamp(22px,6.4vw,26px)}
  .sh p{font-size:13.5px}
  #articles .sh,#faq .sh{flex-wrap:wrap}
  #articles .sh>div,#faq .sh>div{flex-basis:calc(100% - 54px)}
  .sh-btn{order:3;margin-left:50px;min-height:44px;padding:0 18px;font-size:14px}
  .split{width:calc(100% - 2 * 12px);padding:18px 14px 16px}
  .pa-row.rail{margin:0 -14px;padding:2px 14px 6px;scroll-padding-inline:14px;grid-auto-columns:82%}
  .gr{grid-template-columns:30px minmax(0,1fr) auto;gap:8px;min-height:70px;padding:6px 10px 6px 4px}
  .gr-n{width:28px;height:28px;margin-left:2px;font-size:15px}
  .gr-g{grid-template-columns:82px minmax(0,1fr);gap:10px}
  .gr-th{width:82px;height:50px}
  .gr-i b{font-size:15px}.gr-tag{font-size:12.5px}.gr-i small{font-size:12px;gap:4px}
  .gr-i small .ico{width:12px;height:12px}
  .gr-b{min-height:40px;padding:0 13px;font-size:13.5px}
  ul.cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pm-k{font-size:4.4cqw}
  .pm-s{font-size:3.4cqw;top:18.6cqw}
  .pm-b{height:10.6cqw;font-size:3.7cqw;top:25.4cqw}
  .pa-vip{aspect-ratio:390/150}
  .pa-vip>img{object-position:0 50%}
  .pv-t{left:46cqw;gap:3.4cqw}
  .pv-h{font-size:5.6cqw}
  .pv-b{height:10cqw;padding:0 5cqw;font-size:4cqw}
  .pv-l{display:none}
  .cat-t{font-size:11cqw}
  .art{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:6px 12px 6px 6px}
  .art img{width:104px;height:104px}
  .art h3{font-size:15.5px;margin-top:6px}
  .art-x{display:none}
  .faq-i summary{font-size:15px;padding:6px 14px}
  .faq-i p{padding:0 14px 12px}
  .foot{padding-top:30px;background-size:auto 100%}
  .foot-logo img{height:72px}
  .foot-nav a{padding:3px 9px}
  ul.trust{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:400px){.logo img{height:50px}.hdr-r{gap:8px}.hdr .btn-yel{padding:0 13px;font-size:13.5px}.gr-b{padding:0 10px}.gr-g{grid-template-columns:70px minmax(0,1fr)}.gr-th{width:70px;height:44px}}
@media (max-width:340px){.logo img{height:44px}.hdr .btn-yel{padding:0 11px;font-size:13px}.menu-btn{width:42px;height:42px}.gr-b{display:none}}