/* YOUJINX Play Frame · style.css — สร้างจาก build_wp.py (อย่าแก้ไฟล์นี้ตรงๆ) สีทุกจุดเป็นตัวแปร: ชุดสีหลัก --p-* · สีที่คำนวณจากชุดสีหลัก --c-* · สีรายจุด --s-* (ตั้งได้ในหลังบ้าน › สีธีม) */ :root{--p-c1-l:#ff7a4a;--p-c1:#f3361f;--p-c1-d:#c8190c;--p-c2-l:#ffb04a;--p-c2:#ff7a1a;--p-c2-d:#c2410c;--p-c3-l:#fff3b8;--p-c3:#ffc93c;--p-c3-d:#e09a12;--p-c4-l:#e9f7fe;--p-c4:#9fd8fa;--p-c4-d:#1b8df0;--p-c5-l:#b9a08e;--p-c5:#7a5634;--p-c5-d:#3b1d0b;--p-shade:#aa5a14;--p-ink:#141414;--p-txt:#262628;--p-muted:#6f6f73;--p-bg:#fefefc;--p-soft:#feeee5;--p-cream:#fff4ea;--p-card:#ffffff;--p-line:#f1e6dc;--p-foot:#feecd9;--p-on:#ffffff;--p-ok:#16a34a;--c-1:#ffd35a;--c-2:#1a1000;--c-3:rgba(255,255,255,.14);--c-4:#2b2b2b;--c-5:rgba(255,255,255,.13);--c-6:rgba(255,255,255,.75);--c-7:#16110c;--c-8:#1d1d1d;--c-9:#1a140f;--c-10:#b8860b;--c-11:#fff1c2;--c-12:#6b4b00;--c-13:rgba(255,255,255,.06);--c-14:rgba(255,255,255,.1);--c-15:rgba(255,205,80,.85);--c-16:#ff7a59;--c-17:#ffd166;--c-18:#1b1b1b;--c-19:#f59e0b;--c-20:#ffb703;--c-21:#fb8500;--c-22:#ff6a3d;--c-23:#ffb21f;--c-24:#fff0d9;--c-25:#a5520a;--c-26:#f5e6da;--c-27:rgba(255,255,255,.6);--c-28:#8a4b1b;--c-29:#1b1b1d;--c-30:rgba(40,20,5,.55);--c-31:#2b1607;--c-32:#1d1d1f;--c-33:#f3e7dd;--c-34:#e5401f;--c-35:rgba(140,70,20,.1);--c-36:#f4e9e0;--c-37:#8a4300;--c-38:#ff8a2a;--c-39:#ff4a2a;--c-40:#ee2a18;--c-41:rgba(255,255,255,.35);--c-42:rgba(240,60,20,.28);--c-43:#2b1a00;--c-44:#ffe28a;--c-45:#ffcf4a;--c-46:#ffbb2a;--c-47:rgba(240,160,0,.25);--c-48:#e8331c;--c-49:#ff8f73;--c-50:rgba(240,80,40,.08);--c-51:#fff4ef;--c-52:rgba(255,255,255,.62);--c-53:rgba(40,40,45,.55);--c-54:rgba(255,255,255,.9);--c-55:rgba(255,255,255,.95);--c-56:#f3e6da;--c-57:rgba(120,60,10,.1);--c-58:rgba(160,70,0,.18);--c-59:rgba(255,255,255,.88);--c-60:rgba(30,90,140,.1);--c-61:#17171a;--c-62:#ff6a1a;--c-63:#fff1e8;--c-64:rgba(140,60,10,.12);--c-65:rgba(120,60,10,.18);--c-66:#f6ece4;--c-67:#bfe6fb;--c-68:#dff4fd;--c-69:#f8e2b4;--c-70:#f2c46a;--c-71:rgba(120,60,10,.12);--c-72:rgba(120,60,20,.32);--c-73:rgba(255,255,255,.82);--c-74:#3b3b3e;--c-75:#ff9a1a;--c-76:rgba(150,80,20,.12);--c-77:#f6eee6;--c-78:#f1ebe5;--c-79:#121214;--c-80:#4d4d52;--c-81:rgba(200,90,0,.18);--c-82:rgba(200,90,30,.13);--c-83:#ff5a3c;--c-84:#ec2a1c;--c-85:rgba(220,40,20,.25);--c-86:#141416;--c-87:#ff6a3a;--c-88:#f4221d;--c-89:#d9121b;--c-90:#26262a;--c-91:#2a2a2e;--c-92:#ffc24a;--c-93:#ffa51a;--c-94:#f58a0a;--c-95:rgba(255,255,255,.45);--c-96:rgba(240,140,0,.3);--c-97:#ff5a3a;--c-98:#e8201c;--c-99:rgba(200,90,30,.22);--c-100:rgba(200,90,30,.16);--c-101:rgba(255,255,255,.55);--c-102:rgba(255,255,255,.18);--c-103:rgba(255,255,255,0);--c-104:#ffc23a;--c-105:#ffa91f;--c-106:#5a2a00;--c-107:rgba(240,150,0,.3);--c-108:rgba(255,255,255,.34);--c-109:rgba(200,100,40,.12);--c-110:#5d5d62;--c-111:rgba(240,100,20,.25);--c-112:#fff7f0;--c-113:rgba(200,100,40,.2);--c-114:rgba(200,100,40,.14);--c-115:#3d3d42;--c-116:rgba(160,80,20,.1);--c-117:#ff5a1f;--c-118:#f6eee7;--c-119:#ffeadb;--c-120:#ffd6bd;--c-121:#b5560c;--c-122:#ffd45a;--c-123:#f2a20c;--c-124:#d3dae6;--c-125:#9aa6bb;--c-126:#f3ad78;--c-127:#cf6f2e;--c-128:rgba(150,70,20,.18);--c-129:#8a8a90;--c-130:#ff9f80;--c-131:rgba(240,60,20,.25);--c-132:rgba(150,70,20,.2);--c-133:#9a9aa0;--c-134:#fff7ef;--c-135:#ffe8d6;--c-136:#fde0ca;--c-137:rgba(150,80,30,.1);--c-138:#a4defc;--c-139:#0f3d63;--c-140:rgba(150,80,30,.18);--c-141:#f3e2d4;--c-142:#f3ebe4;--c-143:rgba(150,80,30,.05);--c-144:#ffb48f;--c-145:rgba(240,100,40,.1);--c-146:#1d1d20;--c-147:#55555b;--c-148:rgba(200,40,40,.15);--c-149:#fff4ee;--c-150:#6b5a4c;--c-151:#f4dcc8;--c-152:#7a6a5c;--c-153:rgba(120,60,10,.14);--c-154:#8a7a6b;--c-155:#9a8a7b;--c-156:#ff8a1a;--c-157:rgba(240,120,20,.35);--c-158:rgba(255,255,255,.97);--c-159:#4b3a2c;--c-160:rgba(240,60,20,.35);--c-161:rgba(255,255,255,.4);--c-162:#2a1a10;--c-163:#8a6a50;--c-164:#77777d;--c-165:#fff7f1;--c-166:#ffcbb3;--c-167:#fff0e4;--c-168:rgba(255,214,120,.55);--c-169:rgba(255,214,120,0);--c-170:#c6ebfd;--c-171:rgba(255,255,255,.25);--c-172:#f6e6da;--c-173:rgba(255,251,222,.95);--c-174:rgba(255,251,222,0);--c-175:#a6dbfb;--c-176:#d3effe;--c-177:#fff3cc;--c-178:#ffd685;--c-179:#ffc35c;--c-180:rgba(200,110,30,.15);--c-181:rgba(255,255,255,.36);--c-182:rgba(170,90,0,.25);--c-183:rgba(170,90,0,.2);--c-184:#fffef6;--c-185:#fff6c4;--c-186:#ffd843;--c-187:#ffab1f;--c-188:#f0461c;--c-189:#a3230b;--c-190:rgba(130,40,0,.3);--c-191:rgba(160,70,0,.3);--c-192:#4a2508;--c-193:#fff7b0;--c-194:#ffe050;--c-195:rgba(160,80,0,.25);--c-196:rgba(196,96,8,.34);--c-197:rgba(196,96,8,0);--c-198:rgba(255,255,255,.72);--c-199:#7a3a0c;--c-200:rgba(170,90,20,.1);--c-201:rgba(150,40,10,.32);--c-202:rgba(255,240,200,.55);--c-203:rgba(255,190,40,.95);--c-204:#ffe27a;--c-205:rgba(255,200,60,.95);--c-206:#b9f0c9;--c-207:rgba(20,110,50,.3);--c-208:rgba(255,255,255,.92);--c-209:rgba(170,90,20,.2);--c-210:rgba(170,90,20,.18);--c-211:#5a3010;--c-212:#1e0d04;--c-213:rgba(255,255,255,.08);--c-214:rgba(255,255,255,.12);--c-215:rgba(80,30,0,.28);--c-216:rgba(255,255,255,.84);--c-217:#6b4320;--c-218:rgba(170,90,20,.15);--c-219:#ffd6bf;--c-220:rgba(170,90,20,.22);--c-221:#14a85a;--c-222:#ffd75a;--c-223:#eda10c;--c-224:#fff1c6;--c-225:rgba(120,50,10,.35);--c-226:rgba(150,40,10,.35);--c-227:rgba(255,180,40,.3);--c-228:rgba(255,180,40,0);--c-229:#fffdf6;--c-230:#fff2df;--c-231:#ffe0c4;--c-232:#4a4a50;--c-233:rgba(150,60,0,.35);--c-234:rgba(255,255,255,.96);--c-235:rgba(150,60,10,.25);--c-236:rgba(255,140,40,.6);--c-237:rgba(200,110,30,.25);--c-238:#fff1c4;--c-239:#fffaf1;--c-240:#ffe7d2;--c-241:rgba(255,255,255,.5);--c-242:rgba(240,60,20,.32);--c-243:#f6e4d6;--c-244:#b4917a;--c-245:#efd3bf;--c-246:rgba(170,90,20,.14);--c-247:#f6e3d2;--c-248:rgba(255,249,238,.88);--c-249:#fff0d8;--c-250:rgba(170,80,10,.25);--c-251:#ffdcae;--c-252:rgba(255,186,50,.34);--c-253:rgba(255,186,50,0);--c-254:rgba(150,60,0,.3);--c-255:rgba(150,60,0,.2);--c-256:#5c4632;--c-257:#c27a0a;--c-258:#ffe48a;--c-259:#f2b12a;--c-260:#d8900f;--c-261:#ffe08a;--c-262:rgba(170,80,0,.35);--c-263:rgba(110,45,0,.35);--c-264:#fffbe6;--c-265:rgba(255,244,190,.95);--c-266:#ffb02e;--c-267:rgba(255,176,46,.6);--c-268:rgba(255,255,255,.75);--c-269:rgba(120,40,0,.22);--c-270:rgba(90,30,0,.3);--c-271:#8a1d00;--c-272:rgba(90,20,0,.45);--c-273:#fffbe0;--c-274:#ffd84a;--c-275:#f29a0c;--c-276:#c46a00;--c-277:rgba(200,110,10,.35);--c-278:rgba(150,60,0,.45);--c-279:#8a2400;--c-280:rgba(110,30,0,.35);--c-281:#ff7a52;--c-282:#fff4cc;--c-283:rgba(255,206,70,.55);--c-284:rgba(255,206,70,0);--c-285:#b9682a;--c-286:#8a4516;--c-287:#6a320d;--c-288:#a5581f;--c-289:#7a3a10;--c-290:#5a290a;--c-291:#c47f0e;--c-292:#ffe489;--c-293:#f2b52a;--c-294:#b8700a;--c-295:#5a2a08;--c-296:#9a5a06;--c-297:#4a2205;--c-298:#8a4f05;--c-299:#3a1802;--c-300:#f4dcc6;--c-301:#ffcf6a;--c-302:#fffbe8;--c-303:#ffe7a8;--c-304:#ffc861;--c-305:#c81e0e;--c-306:rgba(170,90,20,.12);--c-307:#ffe4cc;--c-308:#ffe9d6;--c-309:rgba(150,70,20,.15);--c-310:#fff6e6;--c-311:#ffe0b8;--c-312:#f4e1cf;--c-313:#9de2b5;--c-314:#effcf3;--c-315:#c6efd3;--c-316:rgba(120,50,10,.32);--c-317:rgba(120,50,10,.5);--c-318:#ffe2a8;--c-319:#ffca8c;--c-320:rgba(255,255,255,.42);--c-321:rgba(180,80,10,.22);--c-322:#7a4a22;--c-323:#2a2a2d;--c-324:#fff8f2;--c-325:#f3d9c6;--c-326:rgba(255,122,26,.16);--c-327:#e5301d;--c-328:rgba(229,48,29,.12);--c-329:#e8582a;--c-330:#8c6a55;--c-331:#ffeede;--c-332:#d42a16;--c-333:#fff0ed;--c-334:#b8200f;--c-335:#fff6dc;--c-336:#7a5200;--c-337:#eafaf0;--c-338:#11743a;--c-339:#8d8d92;--c-340:#f0e2d6;--c-341:#fff1d6;--c-342:#9a5a00;--c-343:rgba(150,80,30,.06);--c-344:rgba(6,140,60,.35);--c-345:rgba(6,140,60,.3);--c-346:rgba(40,20,5,.82);--c-347:rgba(240,60,20,.3);--c-348:rgba(40,20,5,.62);--c-349:rgba(255,255,255,.38);--c-350:rgba(200,90,0,.2)} /* ===================================================================== ส่วนกลาง (ทุกธีมใช้ร่วมกัน): 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,var(--c-1));color:var(--skip-fg,var(--c-2));font-weight:600} .skip:focus{top:12px} :focus-visible{outline:3px solid var(--focus,var(--c-1));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,var(--c-3));color:var(--demo-fg,currentColor)} /* ---------- รูปจาก API: โครงวิบวับระหว่างโหลด / ภาพสำรองเมื่อโหลดไม่ได้ ---------- */ .sk{position:relative;overflow:hidden;background:var(--sk-bg,var(--c-4))} .sk::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,transparent 30%,var(--sk-shine,var(--c-5)) 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,var(--c-6))} .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,var(--p-card));color:var(--mdl-fg,var(--c-7));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:var(--p-on);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,var(--c-8));color:var(--toast-fg,var(--p-on));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,var(--p-card));color:var(--doc-fg,var(--c-9));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,var(--c-10));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,var(--c-11));color:var(--doc-tpl-fg,var(--c-12));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,var(--c-13));box-shadow:0 0 0 1px var(--side-line,var(--c-14))} .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,var(--p-card));color:var(--doc-fg,var(--c-9));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,var(--p-card));color:var(--doc-fg,var(--c-9));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,var(--c-10))} @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 var(--c-15))} @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(var(--c-16) 0 60deg,var(--c-17) 60deg 120deg,#06d6a0 120deg 180deg,#4cc9f0 180deg 240deg,#9b5de5 240deg 300deg,#f15bb5 300deg 360deg);box-shadow:0 0 0 7px var(--p-card),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,var(--p-card));color:var(--dm-card-fg,var(--c-18));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,var(--p-card));color:var(--dm-card-fg,var(--c-18));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,var(--c-19))} .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,var(--c-20),var(--c-21));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} /* ==================== ธีม SUNBURST PLAY ==================== */ /* สี/ฟอนต์ของธีม (เปลี่ยนสีหลักได้ที่ assets/js/config.js → theme) */ :root{ --bg:var(--p-bg); --peach:var(--p-soft); --foot-bg:var(--p-foot); --card:var(--p-card); --line:var(--p-line); --red:var(--p-c1); --red-2:var(--c-22); --orange:var(--p-c2); --sun:var(--p-c3); --sun-2:var(--c-23); --sky:var(--p-c4); --ink:var(--p-ink); --txt:var(--p-txt); --muted:var(--p-muted); --max:1328px; --g:24px; --sp:96px; --hdr-h:80px; --f:'Kanit',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif; --fw:'Fredoka','Kanit',system-ui,sans-serif; --skip-bg:var(--p-c3); --focus:var(--p-c2); --demo-bg:var(--c-24); --demo-fg:var(--c-25); --sk-bg:var(--c-26); --sk-shine:var(--c-27); --fb-fg:var(--c-28); --mdl-bg:var(--s-mdl-bg,var(--p-card)); --mdl-fg:var(--c-29); --mdl-back:var(--s-mdl-back,var(--c-30)); --toast-bg:var(--c-31); --doc-bg:var(--p-card); --doc-fg:var(--c-32); --doc-line:var(--c-33); --doc-link:var(--c-34); --doc-note-bg:var(--p-cream); --doc-shadow:0 10px 30px var(--c-35),0 0 0 1px var(--c-36); --doc-tpl-bg:var(--c-24); --doc-tpl-fg:var(--c-37); --side-bg:var(--p-card); --side-line:var(--c-36); --dm-bg:var(--p-cream); --dm-card-bg:var(--p-card); --dm-card-fg:var(--c-32); --dm-accent:var(--p-c2); } body{font:400 16px/1.55 var(--f);color:var(--txt);-webkit-font-smoothing:antialiased;background:var(--s-page-bg,var(--bg))} .o{background:var(--s-heading-hl,linear-gradient(180deg,var(--c-38),var(--p-c1)));-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- ปุ่ม ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 24px;border:0;border-radius:999px;font-weight:600;font-size:16px;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-red{color:var(--s-btn1-fg,var(--p-on));background:var(--s-btn1-bg,linear-gradient(180deg,var(--p-c1-l) 0%,var(--c-39) 48%,var(--c-40) 100%));box-shadow:inset 0 1px 0 var(--c-41),0 8px 18px var(--c-42)} .btn-sun{color:var(--s-btn2-fg,var(--c-43));background:var(--s-btn2-bg,linear-gradient(180deg,var(--c-44) 0%,var(--c-45) 55%,var(--c-46) 100%));box-shadow:inset 0 1px 0 var(--c-27),0 6px 14px var(--c-47)} .btn-line{color:var(--s-btn3-fg,var(--c-48));background:var(--s-btn3-bg,var(--p-card));box-shadow:inset 0 0 0 1.5px var(--s-btn3-line,var(--c-49)),0 4px 12px var(--c-50)} .btn-line:hover{background:var(--c-51)} .btn-ghost{color:var(--s-btn4-fg,var(--c-29));background:var(--s-btn4-bg,var(--c-52));box-shadow:inset 0 0 0 1.5px var(--c-53);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .btn-ghost:hover{background:var(--c-54)} .btn-red:hover,.btn-sun:hover{filter:brightness(1.05) saturate(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);transition:background .25s,box-shadow .25s} .hdr.scrolled,body.menu-open .hdr{background:var(--s-hdr-bg,var(--c-55));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--c-56),0 10px 26px var(--c-57)} .hdr-in{position:relative;display:flex;align-items:center;gap:14px;width:min(1440px,100%);height:100%;margin-inline:auto;padding:0 calc(min(100vw,1440px) * .07) 0 calc(min(100vw,1440px) * .0829)} .logo{position:absolute;left:calc(min(100vw,1440px) * .0829);top:3px;display:block;transition:transform .3s,top .3s;transform-origin:0 0} .logo img{width:auto;height:max(64px,calc(min(100vw,1440px) * .0833));filter:drop-shadow(0 4px 8px var(--c-58))} .hdr.scrolled .logo{top:9px;transform:scale(.5)} .nav{display:none;align-items:center;gap:4px;height:49px;margin-left:calc(min(100vw,1440px) * .206);padding:0 10px 0 16px;border-radius:999px;background:var(--s-nav-bg,var(--c-59));box-shadow:0 6px 18px var(--c-60),inset 0 0 0 1px var(--c-54)} .nav a{padding:8px 15px;border-radius:99px;font-size:15px;font-weight:500;color:var(--s-nav-fg,var(--c-61));white-space:nowrap;transition:color .2s,background .2s} .nav a:hover{color:var(--s-nav-on,var(--red))} .nav a[aria-current="page"]{color:var(--s-nav-on,var(--c-62));font-weight:600} .srch{display:grid;place-items:center;width:40px;height:40px;margin-left:auto;border:0;border-radius:50%;background:none;color:var(--p-ink)} .srch:hover{background:var(--c-63)} .srch .ico{width:19px;height:19px} .nav{flex:1;max-width:644px} .hdr-r{display:flex;align-items:center;gap:14px;margin-left:auto} .nav+.hdr-r{margin-left:16px} .hdr .btn{min-height:46px;padding:0 22px;font-size:16.5px;font-weight:700} .hdr .btn-sun{min-width:110px} .hdr .btn-red{min-width:138px} .menu-btn{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:14px;background:var(--c-54);color:var(--s-menu-btn,var(--c-48));box-shadow:0 4px 12px var(--c-64)} .menu-btn .ico{width:19px;height:19px} .menu{position:fixed;left:0;right:0;top:var(--hdr-h);z-index:59;background:var(--s-menu-bg,var(--p-card));box-shadow:0 24px 40px var(--c-65);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 var(--c-66);font-size:16px;font-weight:500;color:var(--s-menu-fg,var(--c-29))} .menu nav>a .ico{width:12px;height:12px;color:var(--red)} .menu-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px} .menu-cta .btn{display:inline-flex;min-height:50px} @media (max-width:599px){.hdr .btn-red{display:none}} /* มือถือ: หัวเว็บแสดงปุ่มเข้าสู่ระบบ (สมัครอยู่ที่แถบล่าง) */ @media (min-width:1180px){.nav{display:flex}.menu-btn,.menu{display:none!important}} @media (min-width:1180px) and (max-width:1379px){.nav{margin-left:calc(min(100vw,1440px) * .19)}.nav a{padding:8px 10px;font-size:14.5px}.hdr .btn{padding:0 16px;font-size:15.5px}.hdr .btn-sun{min-width:0}.hdr .btn-red{min-width:0}} /* ---------- A · ปก (คอม): สไลด์ภาพกว้าง 3 ภาพ (เฟดสลับ) + ปุ่ม/จุดเด่น HTML วางตามสัดส่วนภาพ (หน่วย --u = 1px ของ mockup) ---------- */ .hero{position:relative;margin-top:calc(var(--hdr-h) * -1);container-type:inline-size;isolation:isolate} .hero{overflow:hidden;background:var(--s-hero-bg,linear-gradient(180deg,var(--c-67) 0%,var(--c-68) 45%,var(--c-69) 76%,var(--c-70) 100%))} .hero-track{position:absolute;inset:0;z-index:-1;touch-action:pan-y} .hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s} .hero-slide.on{opacity:1;visibility:visible;transition:opacity .8s ease} .hero-slide img{position:absolute;left:50%;top:0;width:auto;max-width:none;height:100%;transform:translateX(-50%);-webkit-mask:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)} .hero-a{position:absolute;inset:0;z-index:1} .hero-in{pointer-events:none} .hero-txt{pointer-events:auto} .hero-dots{position:absolute;left:50%;bottom:calc(min(100vw,1440px) / 941 * 22);z-index:3;display:flex;gap:2px;margin:0;padding:3px 6px;border-radius:99px;background:var(--c-52);box-shadow:0 4px 12px var(--c-71);transform:translateX(-50%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .hero-dots button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:99px;background:none;cursor:pointer} .hero-dots button::before{content:"";width:10px;height:10px;border-radius:99px;background:var(--c-72);transition:width .3s,background .3s} .hero-dots button[aria-current="true"]{width:40px} .hero-dots button[aria-current="true"]::before{width:26px;background:var(--s-btn1-bg,linear-gradient(90deg,var(--p-c1-l),var(--c-40)))} .hero-arw{position:absolute;top:44%;z-index:3;display:grid;place-items:center;width:50px;height:50px;border:0;border-radius:50%;background:var(--c-73);color:var(--s-hero-arw,var(--c-48));box-shadow:0 6px 16px var(--c-65);cursor:pointer;opacity:0;transition:opacity .25s,background .2s} .hero:hover .hero-arw,.hero-arw:focus-visible{opacity:1} .hero-arw:hover{background:var(--p-card)} .hero-arw .ico{width:16px;height:16px} .hero-prev{left:max(14px,calc((100% - 1440px) / 2 + 14px))}.hero-next{right:max(14px,calc((100% - 1440px) / 2 + 14px))} .hero-in{--u:min(calc(100cqw / 941),1.5303px);position:relative;width:calc(var(--u) * 941);height:calc(var(--u) * 386);margin-inline:auto} .hero-txt{position:absolute;left:calc(var(--u) * 62);top:calc(var(--u) * 278.1);width:calc(var(--u) * 330)} .hero-cta{display:flex;gap:calc(var(--u) * 11)} .hero-cta .btn{min-height:0;height:calc(var(--u) * 38);padding:0;gap:calc(var(--u) * 7)} .hero-b1{width:calc(var(--u) * 150);font-size:calc(var(--u) * 14.6);font-weight:700} .hero-b2{width:calc(var(--u) * 150);font-size:calc(var(--u) * 12.6);font-weight:600} .hero-b2:hover .ico{transform:translateY(2px)} ul.hero-checks{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 4) calc(var(--u) * 14);margin-top:calc(var(--u) * 17);list-style:none;padding:0} .hero-checks li{display:flex;align-items:center;gap:calc(var(--u) * 5);font-size:calc(var(--u) * 8.9);color:var(--s-hero-check,var(--c-74));white-space:nowrap} .hero-checks .ico{width:calc(var(--u) * 10);height:calc(var(--u) * 10);color:var(--s-hero-check-ic,var(--c-75))} /* ---------- B · แถบข้อมูล ---------- */ .facts{position:relative;z-index:2;width:min(var(--max),100% - 2*var(--g));margin:calc(min(100vw,1440px) / 941 * -15) auto 0} .facts-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;min-height:100px;padding:10px 18px;border-radius:20px;background:var(--s-facts-bg,var(--p-card));box-shadow:0 14px 34px var(--c-76),0 0 0 1px var(--c-77);list-style:none;margin:0} .facts-in li{display:flex;align-items:center;justify-content:center;gap:14px;min-width:0;padding:4px 10px} .facts-in li+li{border-left:1px solid var(--s-facts-line,var(--c-78))} .facts-in img{flex:none;width:54px;height:54px;object-fit:contain} .facts-in p{display:flex;flex-direction:column;min-width:0;line-height:1.2} .facts-in b{font-size:25px;font-weight:700;color:var(--s-facts-num,var(--c-79));letter-spacing:-.01em;white-space:nowrap} .facts-in p>span{font-size:14.5px;color:var(--s-facts-label,var(--c-80));white-space:nowrap} .facts-in .demo{margin-left:2px;font-size:10.5px} /* ---------- หัวข้อ ---------- */ .sec{margin-top:44px} .sec-h{display:flex;align-items:center;gap:14px;margin-bottom:22px} .sec-ic{flex:none;width:46px;height:auto;align-self:flex-start;margin-top:2px;filter:drop-shadow(0 4px 6px var(--c-81))} .sec-h>div{flex:1;min-width:0} .sec-h h2{font-size:37px;font-weight:700;line-height:1.2;color:var(--s-heading,var(--ink));letter-spacing:-.005em} .sec-s{margin-top:2px;font-size:19px;color:var(--s-subheading,var(--muted));line-height:1.45} .sec-more{flex:none;min-height:46px;padding:0 22px;font-size:16px;font-weight:600} /* ---------- C · โปรโมชั่น 4 ใบ ---------- */ ul.promos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .pc{position:relative;display:block;aspect-ratio:210/152;border-radius:18px;overflow:hidden;container-type:inline-size;isolation:isolate;box-shadow:0 10px 24px var(--c-82)} .pc>img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;transition:transform .6s} .pc-t{position:absolute;left:5.6cqw;top:5cqw;bottom:4cqw;display:flex;flex-direction:column;align-items:flex-start;width:52%} .pc-tag{display:inline-flex;align-items:center;height:8.2cqw;padding:0 3.4cqw;border-radius:99px;background:var(--s-pc-tag-bg,linear-gradient(180deg,var(--c-83),var(--c-84)));color:var(--s-pc-tag-fg,var(--p-on));font-size:5.25cqw;font-weight:600;line-height:1;box-shadow:0 .8cqw 1.6cqw var(--c-85);white-space:nowrap} .pc-h{margin-top:3.8cqw;font-size:7.35cqw;font-weight:700;line-height:1.2;color:var(--s-pc-title,var(--c-86));white-space:nowrap} .pc-n{display:flex;align-items:baseline;gap:1.2cqw;margin-top:.2cqw;line-height:1;white-space:nowrap} .pc-n b{font-size:14.4cqw;font-weight:800;letter-spacing:-.015em;background:var(--s-pc-num,linear-gradient(180deg,var(--c-87) 0%,var(--c-88) 70%,var(--c-89) 100%));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em} .pc-n small{font-size:4.9cqw;font-weight:500;color:var(--s-pc-sub,var(--c-90))} .pc-n-sm{margin-top:1.6cqw} .pc-n-sm b{font-size:12.4cqw} .pc-s{margin-top:1.4cqw;font-size:4.85cqw;font-weight:500;color:var(--s-pc-sub,var(--c-91));white-space:nowrap} .pc-b{min-height:0;height:14.6cqw;margin-top:auto;padding:0 5.2cqw;gap:2.4cqw;font-size:4.55cqw;font-weight:600;box-shadow:inset 0 1px 0 var(--c-41),0 1.4cqw 3cqw var(--c-42)} .pc-gold .pc-b{color:var(--p-on);background:var(--s-gold-btn,linear-gradient(180deg,var(--c-92) 0%,var(--c-93) 55%,var(--c-94) 100%));box-shadow:inset 0 1px 0 var(--c-95),0 1.4cqw 3cqw var(--c-96)} .pc-gold .pc-n b{background:var(--s-pc-num,linear-gradient(180deg,var(--c-97) 0%,var(--c-98) 100%));-webkit-background-clip:text;background-clip:text} @media (hover:hover){.pc:hover{transform:translateY(-6px);box-shadow:0 18px 34px var(--c-99)}.pc:hover>img{transform:scale(1.04)}} /* ---------- C1 · โปรโมชั่นเด่น (ลูกค้าขอ 26 ต.ค. แบบ ROYAL NOIR): แบนเนอร์ใหญ่ · ภาพคอม 4:1 / มือถือ 2:1 · ข้อความ/ปุ่ม HTML ทับด้านซ้าย ---------- */ .pfeat{position:relative;display:block;margin-bottom:16px;aspect-ratio:4/1;border-radius:22px;overflow:hidden;container-type:inline-size;isolation:isolate;box-shadow:0 12px 28px var(--c-100),0 0 0 1px var(--c-27) inset} .pfeat img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:right center;transition:transform .6s} .pfeat::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--c-101),var(--c-102) 40%,var(--c-103) 58%)} .pf-t{position:absolute;left:4.4cqw;top:50%;display:flex;flex-direction:column;align-items:flex-start;width:46%;transform:translateY(-50%)} .pf-k{display:inline-flex;align-items:center;height:max(24px,2.7cqw);padding:0 max(10px,1.3cqw);border-radius:99px;background:var(--s-pf-k-bg,linear-gradient(180deg,var(--c-44),var(--c-104) 60%,var(--c-105)));color:var(--s-pf-k-fg,var(--c-106));font-size:max(12px,1.42cqw);font-weight:700;letter-spacing:.02em;line-height:1;box-shadow:0 .4cqw 1cqw var(--c-107),inset 0 1px 0 var(--c-27)} .pf-l1{margin-top:1.1cqw;font-size:max(18px,2.75cqw);font-weight:700;line-height:1.2;color:var(--s-pc-title,var(--c-86))} .pf-l2{display:flex;align-items:baseline;gap:1cqw;font-size:max(20px,3.2cqw);font-weight:700;line-height:1.05;color:var(--s-pc-title,var(--c-86))} .pf-l2 b{font-size:max(34px,5.6cqw);font-weight:800;letter-spacing:-.015em;background:var(--s-pc-num,linear-gradient(180deg,var(--c-87) 0%,var(--c-88) 70%,var(--c-89) 100%));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em} .pf-l3{margin-top:.2cqw;font-size:max(13.5px,1.95cqw);font-weight:600;color:var(--s-pc-sub,var(--c-91))} .pf-b{min-height:0;height:max(36px,4cqw);margin-top:1.5cqw;padding:0 max(16px,2.3cqw);gap:.8cqw;font-size:max(13.5px,1.55cqw);font-weight:700} .pfeat.pf-c{aspect-ratio:2/1} .pf-c .pf-t{left:5.6cqw;width:50%} .pf-c .pf-k{height:6.2cqw;padding:0 2.8cqw;font-size:3.3cqw} .pf-c .pf-l1{margin-top:2.2cqw;font-size:5.6cqw} .pf-c .pf-l2{gap:1.6cqw;font-size:6.2cqw} .pf-c .pf-l2 b{font-size:10cqw} .pf-c .pf-l3{font-size:4.1cqw} .pf-c .pf-b{height:9.6cqw;margin-top:2.6cqw;padding:0 5cqw;gap:1.6cqw;font-size:3.8cqw} @media (hover:hover){.pfeat:hover{transform:translateY(-4px);box-shadow:0 18px 34px var(--c-99)}.pfeat:hover img{transform:scale(1.03)}} /* ---------- D · มินิเกม & กิจกรรม (แผงสีพีช) ---------- */ .hub{width:min(1372px,100% - 2*12px);margin:26px auto 0;border-radius:28px;background:var(--s-hub-bg,repeating-conic-gradient(from 0deg at 50% -10%,var(--c-108) 0 4deg,var(--c-103) 4deg 12deg),var(--peach))} .hub-in{width:min(var(--max),100% - 2*var(--g));margin-inline:auto;padding:26px 0 24px} .hub .sec-h{margin-bottom:22px} ul.acts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:21px} .ac{display:flex;flex-direction:column;height:100%;border-radius:16px;overflow:hidden;background:var(--s-ac-bg,var(--p-card));box-shadow:0 8px 20px var(--c-109);outline-offset:3px} .ac-img{display:block;overflow:hidden;aspect-ratio:161/106} .ac-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .ac-b{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 8px 13px;text-align:center} .ac-b b{font-size:20px;font-weight:700;line-height:1.25;color:var(--s-ac-title,var(--c-86))} .ac-b span{font-size:16px;color:var(--s-ac-desc,var(--c-110));line-height:1.35} .ac.on{box-shadow:0 0 0 3px var(--p-c2),0 12px 26px var(--c-111)} .ac.on .ac-b{background:var(--c-112)} @media (hover:hover){.ac:hover{transform:translateY(-5px);box-shadow:0 16px 30px var(--c-113)}.ac:hover .ac-img img{transform:scale(1.06)}} .hub-panel{margin-top:18px} .hub-panel.in{animation:hpIn .35s ease} @keyframes hpIn{from{opacity:0;transform:translateY(-8px)}} .hp{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;padding:22px 24px;border-radius:20px;background:var(--p-card);box-shadow:0 10px 26px var(--c-114)} .hp-x{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--c-63);color:var(--c-48)} .hp-x .ico{width:16px;height:16px} .hp-k{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--p-c2)} .hp h3{margin-top:2px;font-size:28px;font-weight:700;line-height:1.25;color:var(--c-86);outline:0} .hp-lead{margin-top:2px;font-size:16px;color:var(--c-110)} .hp .tpl{display:inline-block;padding:0 10px;border-radius:99px;background:var(--doc-tpl-bg);color:var(--doc-tpl-fg);font-size:12.5px;font-weight:600} .hp-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px} .hp h4{font-size:16.5px;font-weight:700;color:var(--c-86)} .hp ul,.hp ol{margin:6px 0 0;padding-left:1.25em;font-size:15px;line-height:1.6;color:var(--c-115)} .hp-period{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14.5px;color:var(--c-110)} .hp-period .ico{color:var(--p-c2)} .hp-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .hp-demo{display:flex;flex-direction:column;justify-content:center} .hp-dh{font-size:17px;font-weight:700;color:var(--c-86)} .hp-demo>p{font-size:14px;color:var(--c-110);margin:2px 0 4px} .hp .dm{background:var(--c-112);margin-bottom:0} .dm-btn{min-width:180px;min-height:46px;color:var(--s-btn1-fg,var(--p-on));background:var(--s-btn1-bg,linear-gradient(180deg,var(--p-c1-l) 0%,var(--c-39) 48%,var(--c-40) 100%))} /* ---------- E · เกมแนะนำรอบนี้ (ลูกค้าขอ 26 ต.ค. แบบ POP ARENA: ลิสต์อันดับ) + อัปเดตล่าสุด ---------- */ .g-dash{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:20px;align-items:stretch} .gbox{min-width:0;padding:16px 22px 10px;border-radius:20px;background:var(--s-gbox-bg,var(--p-card));box-shadow:0 10px 28px var(--c-116),0 0 0 1px var(--c-36)} .gbox-h{display:flex;align-items:center;gap:10px;min-height:44px} .gbox-h h2{display:flex;align-items:center;gap:7px;flex:1;min-width:0;font-size:27px;font-weight:700;line-height:1.25;color:var(--s-heading,var(--ink));white-space:nowrap} .ic-fire{width:21px;height:21px;color:var(--c-117)}.ic-bolt{width:20px;height:20px;color:var(--c-23)} .gbox-h .demo{flex:none} .more{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:15.5px;font-weight:600;color:var(--s-link,var(--c-34));white-space:nowrap} .more .ico{width:11px;height:11px;transition:transform .2s} .more:hover .ico{transform:translateX(3px)} .gbox-s{margin-top:-2px;font-size:14px;line-height:1.45;color:var(--muted)} .gbox-s b{color:var(--red);font-variant-numeric:tabular-nums} ol.gl,ul.ups{display:grid;margin:8px 0 0;padding:0;list-style:none} .gr{display:grid;grid-template-columns:32px 62px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:78px;padding:7px 0;border-top:1px solid var(--c-118)} .gr:first-child,.up:first-child{border-top:0} .gr-n{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--s-gr-n-bg,linear-gradient(180deg,var(--c-119),var(--c-120)));font-size:16px;font-weight:700;color:var(--s-gr-n-fg,var(--c-121));box-shadow:inset 0 -2px 0 rgba(0,0,0,.07)} .gr:nth-child(1) .gr-n{background:var(--s-gr-1,linear-gradient(180deg,var(--c-122),var(--c-123)));color:var(--p-on)} .gr:nth-child(2) .gr-n{background:var(--s-gr-2,linear-gradient(180deg,var(--c-124),var(--c-125)));color:var(--p-on)} .gr:nth-child(3) .gr-n{background:var(--s-gr-3,linear-gradient(180deg,var(--c-126),var(--c-127)));color:var(--p-on)} .gr-img{width:62px;height:62px;border-radius:14px;overflow:hidden;box-shadow:0 4px 10px var(--c-128)} .gr-img img{width:100%;height:100%;object-fit:cover} .gr-img .fb{font-size:18px;font-weight:700} .gr-t{display:flex;flex-direction:column;min-width:0} .gr-t b{font-size:17px;font-weight:600;line-height:1.3;color:var(--c-86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gr-t small{font-size:13.5px;color:var(--c-129);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gr-b{min-width:92px;height:42px;padding:0 18px;border:0;border-radius:99px;background:var(--p-card);box-shadow:inset 0 0 0 1.5px var(--s-gr-b-line,var(--c-130));font:600 15.5px var(--f);color:var(--s-gr-b-fg,var(--c-48));cursor:pointer;transition:background .2s,color .2s,box-shadow .2s} .gr-b:hover{color:var(--p-on);background:var(--s-btn1-bg,linear-gradient(180deg,var(--p-c1-l),var(--c-40)));box-shadow:0 6px 14px var(--c-131)} .up{display:grid;grid-template-columns:52px minmax(0,1fr) 62px;align-items:center;gap:12px;min-height:84px;padding:7px 0;border-top:1px solid var(--c-118)} .up-av{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;font-size:20px;font-weight:700;color:var(--p-on);background:hsl(calc(var(--tone,1) * 53deg + 250deg) 80% 60%);box-shadow:0 0 0 3px var(--p-card),0 4px 10px var(--c-132)} .up-t{display:flex;flex-direction:column;min-width:0;line-height:1.38} .up-t b{font-size:16px;font-weight:600;color:var(--c-86)} .up-a{font-size:14.5px;color:var(--c-110);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .up-amt{font-style:normal;font-weight:700;color:var(--s-up-amt,var(--c-40))} .up-amt:has(span:empty){display:none} .up-t small{font-size:13px;color:var(--c-133)} .up-img{width:62px;height:62px;padding:6px;border-radius:14px;object-fit:contain;background:linear-gradient(180deg,var(--c-134),var(--c-135));box-shadow:inset 0 0 0 1px var(--c-136)} .up-img.noimg{visibility:hidden} .g-note{margin-top:10px;font-size:13px;color:var(--muted)} .g-note a{color:var(--s-link,var(--c-34));text-decoration:underline;text-underline-offset:2px} /* ---------- F · บทความ ---------- */ ul.arts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .art{position:relative;display:flex;flex-direction:column;height:100%;border-radius:16px;overflow:hidden;background:var(--s-art-bg,var(--p-card));box-shadow:0 8px 22px var(--c-137),0 0 0 1px var(--c-118)} .art-img{display:block;overflow:hidden;aspect-ratio:206/69} .art-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .art-tag{align-self:flex-start;margin:-14px 0 0 22px;position:relative;padding:3px 13px;border-radius:99px;background:var(--s-art-tag-bg,var(--c-138));color:var(--s-art-tag-fg,var(--c-139));font-size:13.5px;font-weight:500;line-height:1.3;box-shadow:0 0 0 3px var(--p-card)} .art h3{margin:9px 20px 0;font-size:19.5px;font-weight:600;line-height:1.38;color:var(--s-art-title,var(--c-86));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .art-d{display:flex;align-items:center;gap:7px;margin:8px 20px 16px;font-size:14px;color:var(--s-art-date,var(--c-129))} .art-d .ico{width:15px;height:15px} @media (hover:hover){.art:hover{transform:translateY(-5px);box-shadow:0 16px 32px var(--c-140),0 0 0 1px var(--c-141)}.art:hover img{transform:scale(1.05)}.art:hover h3{color:var(--c-34)}} /* ---------- G · FAQ ---------- */ .faq-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:20px} .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;align-items:start} .faq-i{border-radius:12px;background:var(--s-faq-bg,var(--p-card));box-shadow:0 0 0 1px var(--c-142),0 4px 12px var(--c-143);transition:box-shadow .2s} .faq-i[open]{box-shadow:0 0 0 1.5px var(--s-faq-open,var(--c-144)),0 8px 18px var(--c-145)} .faq-i summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 16px 6px 18px;list-style:none;cursor:pointer;font-size:17px;line-height:1.4;color:var(--s-faq-q,var(--c-146))} .faq-i summary::-webkit-details-marker{display:none} .faq-i summary>.ico:last-child{margin-left:auto;width:14px;height:14px;color:var(--c-146);transition:transform .2s} .faq-i[open] summary>.ico:last-child{transform:rotate(45deg);color:var(--red)} .faq-i p{padding:0 18px 14px;font-size:15px;line-height:1.7;color:var(--s-faq-a,var(--c-147))} .faq-art{width:100%;height:auto;margin-top:-84px;filter:drop-shadow(0 12px 18px var(--c-148))} .faq-more{display:flex;align-items:center;gap:8px;margin:14px auto 0;min-height:44px;padding:0 18px;border:0;border-radius:99px;background:var(--s-faq-more-bg,var(--c-149));color:var(--s-faq-more-fg,var(--c-34));font:600 15px var(--f)} .faq-more .ico{width:12px;height:12px;transition:transform .2s} .faq-more[aria-expanded="true"] .ico{transform:rotate(180deg)} /* ---------- ท้ายเว็บ ---------- */ .foot{margin-top:40px;background:var(--s-foot-bg,var(--foot-bg))} .foot-in{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.6fr) minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1.25fr);gap:24px;padding:30px 0 18px} .foot-logo img{height:76px;width:auto} .foot-brand p{margin-top:6px;font-size:13.7px;line-height:1.55;color:var(--s-foot-text,var(--c-150))} .socials{display:flex;gap:12px;margin-top:12px} .so{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--p-on);transition:transform .2s} .so:hover{transform:translateY(-2px)} .so .ico{width:18px;height:18px} .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-col h2{font-size:15.7px;font-weight:600;color:var(--s-foot-h,var(--c-146));margin-bottom:8px} @media (min-width:1024px){.foot-col{padding-left:22px;border-left:1px solid var(--s-foot-line,var(--c-151))}} .foot-col ul{display:grid;gap:2px;list-style:none;margin:0;padding:0} .foot-col ul.pays{display:flex;flex-wrap:wrap;gap:8px} .foot-col a{display:inline-block;padding:4px 0;font-size:14.2px;line-height:1.55;color:var(--s-foot-link,var(--c-152))} .foot-col a:hover{color:var(--red)} .foot-col a[aria-current="page"]{color:var(--c-34);font-weight:500} .pays{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:2px 0 0;padding:0} .pay-i{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--p-on);box-shadow:0 4px 10px var(--c-153)} .pay-i .ico{width:20px;height:20px} .p1{background:linear-gradient(160deg,#22b35e,#118a42)}.p2{background:linear-gradient(160deg,#7c4dff,#5328d6)}.p3{background:linear-gradient(160deg,#2f8bff,#1a5fe0)}.p4{background:linear-gradient(160deg,#ff9a3c,#f2650c)}.p5{background:linear-gradient(160deg,#ff5a6a,#e0263a)}.p6{background:linear-gradient(160deg,#18b8e8,#0b8cc4)} .pay-t{margin-top:8px;font-size:12.5px;color:var(--s-foot-copy,var(--c-154))} .foot-copy{padding:10px var(--g) 22px;text-align:center;font-size:13.4px;color:var(--s-foot-copy,var(--c-155))} .foot-copy a{color:var(--s-foot-copy,var(--c-154));text-decoration:underline;text-underline-offset:2px} .foot-copy span[aria-hidden]{margin:0 8px;opacity:.6} .to-top{position:fixed;right:20px;bottom:24px;z-index:65;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--s-totop,linear-gradient(180deg,var(--p-c2-l),var(--c-156)));color:var(--p-on);box-shadow:0 8px 20px var(--c-157);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s} .to-top.on{opacity:1;visibility:visible;transform:none} .to-top .ico{width:18px;height:18px} /* ---------- แถบล่าง (มือถือ) ---------- */ .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:var(--s-mbar-bg,var(--c-158));box-shadow:0 -1px 0 var(--c-56),0 -10px 24px var(--c-71)} .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:var(--s-mbar-fg,var(--c-159))} .mb .ico{width:19px;height:19px;color:var(--s-mbar-ic,var(--p-c2))} .mb-main{margin-top:-16px;min-height:62px;border-radius:16px;color:var(--p-on);font-weight:600;background:var(--s-mbar-main,var(--s-btn1-bg,linear-gradient(180deg,var(--p-c1-l),var(--c-40))));box-shadow:0 6px 16px var(--c-160),inset 0 1px 0 var(--c-161)} .mb-main .ico{color:var(--p-on)} body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))} @media (min-width:1180px){.mbar{display:none}body{padding-bottom:0}} @media (max-width:1179px){.to-top{bottom:calc(86px + env(safe-area-inset-bottom,0px))}} /* ---------- หน้าต่าง: ข้อมูลเกม / ค้นหา ---------- */ .mdl[data-kind="game"]{--mdl-w:520px} .gm-art{aspect-ratio:16/9;--sk-bg:var(--c-162)} .gm-art img{width:100%;height:100%;object-fit:cover} .gm-art img.fit-contain{object-fit:contain;background:var(--gc,var(--c-162))} .gm-b{padding:18px 22px 4px} .gm-k{font-size:13px;color:var(--p-c2);font-weight:600} .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:var(--p-cream)} .gm-dl dt{font-size:12.5px;color:var(--c-163)} .gm-dl dd{font-size:18px;font-weight:700;color:var(--c-86)} .gm-n{margin-top:10px;font-size:13px;line-height:1.55;color:var(--c-164)} .gm-n a{color:var(--c-34);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:var(--c-165);box-shadow:inset 0 0 0 1.5px var(--c-166)} .srch-f .ico{width:16px;height:16px;color:var(--p-c2)} .srch-f input{flex:1;min-width:0;height:48px;border:0;background:none;color:var(--c-86);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:var(--c-149)} .srch-l small{margin-left:auto;padding:0 8px;border-radius:99px;background:var(--c-167);font-size:11.5px;color:var(--c-25);white-space:nowrap} .srch-0{margin-top:10px;font-size:14px;color:var(--c-164)} .srch-0 a{color:var(--c-34);text-decoration:underline} .wres-cta,.eres-cta{color:var(--s-btn1-fg,var(--p-on));background:var(--s-btn1-bg,linear-gradient(180deg,var(--p-c1-l),var(--c-40)))} /* ---------- หน้าย่อย ---------- */ .page{padding-top:18px} .page .wrap{--max:1240px} .doc h1{color:var(--s-heading,var(--ink))} .list-card h2{color:var(--s-heading,var(--ink))} .list-card[href*="articles/"] img{aspect-ratio:3/1} .list-card[href*="promotions/"] img,.list-act img{aspect-ratio:3/2} body:has(.page) .hdr{background:var(--s-hdr-bg,var(--c-55));box-shadow:0 1px 0 var(--c-56)} @media (min-width:768px){body:has(.page) .logo{top:9px;transform:scale(.5)}} .doc-img.doc-pc{display:block;padding:18px 18px 0} .doc-pc .pc{width:min(100%,560px);margin-inline:auto;box-shadow:0 10px 26px var(--c-100)} .doc-pc .pc>img{border-radius:0;box-shadow:none;max-height:none} .doc-pc .pc .btn,.doc-pc .pfeat .btn{visibility:hidden} .doc-pc .pfeat{width:min(100%,560px);margin-inline:auto;box-shadow:0 10px 26px var(--c-100)} /* ===================== โน้ตบุ๊ก / แท็บเล็ต ===================== */ @media (max-width:1279px){ .facts-in b{font-size:22px}.facts-in p>span{font-size:13.5px}.facts-in img{width:46px;height:46px}.facts-in li{gap:10px;padding:4px 6px} ul.acts{gap:14px} .ac-b b{font-size:18px}.ac-b span{font-size:14.5px} } @media (max-width:1179px){ :root{--hdr-h:72px} .nav+.hdr-r{margin-left:auto} .hdr-in{padding-right:var(--g)} } /* ปก: จอเล็กกว่า 1024 = แบนเนอร์มือถือ (ข้อความอยู่ในภาพ) แล้วตามด้วยปุ่ม HTML */ @media (max-width:1023px){ .hero{padding-top:var(--hdr-h);background:var(--s-hero-bg-m,radial-gradient(120% 60% at 0% 0%,var(--c-168),var(--c-169) 45%),linear-gradient(180deg,var(--p-c4) 0%,var(--c-170) 34%,var(--p-c4-l) 70%,var(--p-bg) 100%));container-type:normal} .hero-in{--u:1px;width:auto;height:auto;padding:0 var(--g)} .hero-txt{position:static;width:auto;max-width:560px;margin-inline:auto;text-align:center} .hero-cta{justify-content:center;gap:10px;margin-top:6px} .hero-cta .btn{height:52px;flex:1 1 0;max-width:260px;gap:8px} .hero-b1{width:auto;font-size:17px} .hero-b2{width:auto;font-size:16px} ul.hero-checks{justify-content:center;gap:6px 14px;margin-top:14px} .hero-checks li{font-size:13.5px;gap:5px} .hero-checks .ico{width:15px;height:15px} .hero-track{position:relative;inset:auto;z-index:auto;display:grid;width:min(100%,560px);margin:0 auto} .hero-slide{position:relative;inset:auto;grid-area:1/1} .hero-slide img{position:static;width:100%;height:auto;max-width:100%;transform:none;-webkit-mask:linear-gradient(180deg,#000 90%,transparent 100%);mask:linear-gradient(180deg,#000 90%,transparent 100%)} .hero-dots{position:relative;left:auto;bottom:auto;width:max-content;margin:-40px auto 0;transform:none} .hero-arw{display:none} .hero-in{pointer-events:auto} .facts{margin-top:20px} .facts-in{display:flex;flex-wrap:wrap;justify-content:center;row-gap:8px;padding:12px 8px} .facts-in li{flex:0 0 33.333%;justify-content:flex-start;padding:4px 12px} .facts-in li+li{border-left:0} ul.promos{grid-template-columns:repeat(2,minmax(0,1fr))} ul.acts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,30%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--g) * -1);padding:4px var(--g) 10px;scroll-padding-inline:var(--g)} ul.acts::-webkit-scrollbar{display:none} ul.acts>li{scroll-snap-align:start} ul.arts{grid-template-columns:repeat(2,minmax(0,1fr))} .faq-grid{grid-template-columns:1fr} .faq-art{display:none} .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))} .foot-brand{grid-column:1/-1} .hp{grid-template-columns:1fr} } @media (max-width:899px){ .g-dash{grid-template-columns:1fr;gap:14px} .sec-h{flex-wrap:wrap} .sec-h>div{flex-basis:calc(100% - 60px)} .sec-more{margin-left:60px} } /* ===================== มือถือ ===================== */ @media (max-width:767px){ :root{--g:16px;--hdr-h:64px;--sp:76px} .hdr-in{gap:10px;padding:0 var(--g)} .logo{left:var(--g);top:4px} .logo img{height:58px} .hdr.scrolled .logo{top:6px;transform:scale(.86)} .hdr .btn{min-width:0;min-height:42px;padding:0 16px;font-size:14.5px} .menu-btn{width:44px;height:44px} .sec{margin-top:36px} .sec-h{gap:10px;margin-bottom:14px} .sec-ic{width:36px} .sec-h>div{flex-basis:calc(100% - 50px)} .sec-h h2{font-size:clamp(22px,6.4vw,27px)} .sec-s{font-size:14.5px} .sec-more{margin-left:46px;min-height:44px;padding:0 18px;font-size:14.5px} .facts-in{padding:10px 4px;border-radius:16px;row-gap:4px} .facts-in li{flex-basis:50%;gap:8px;padding:6px 8px} .facts-in li:last-child{flex-basis:100%;justify-content:center} .facts-in b{font-size:19px}.facts-in p>span{font-size:12.5px;line-height:1.35;white-space:normal}.facts-in img{width:38px;height:38px} /* โปร: 2×2 เห็นครบ 4 ใบ ไม่ต้องเลื่อน (ลูกค้าขอ 26 ต.ค. แบบ ROYAL NOIR) · จอเล็กกว่า 600 px ดูชุดย่อด้านล่าง */ ul.promos{gap:12px} .hub{width:100%;border-radius:22px;margin-top:30px} .hub-in{padding:20px 0 18px} ul.acts{grid-auto-columns:62%;gap:12px} .ac-b b{font-size:17px}.ac-b span{font-size:13.5px} .hp{padding:18px 16px;gap:14px} .hp h3{font-size:23px} .hp-cols{grid-template-columns:1fr;gap:8px} .hp-cta .btn{flex:1 1 auto} .pfeat{aspect-ratio:2/1;border-radius:18px;margin-bottom:12px} .pfeat .pf-t{left:5.6cqw;width:50%} .pfeat .pf-k{height:6.2cqw;padding:0 2.8cqw;font-size:3.3cqw} .pfeat .pf-l1{margin-top:2.2cqw;font-size:5.6cqw} .pfeat .pf-l2{gap:1.6cqw;font-size:6.2cqw} .pfeat .pf-l2 b{font-size:10cqw} .pfeat .pf-l3{font-size:4.1cqw} .pfeat .pf-b{height:9.6cqw;margin-top:2.6cqw;padding:0 5cqw;gap:1.6cqw;font-size:3.8cqw} .pfeat::before{background:linear-gradient(90deg,var(--c-52),var(--c-171) 46%,var(--c-103) 64%)} .gbox{padding:12px 14px 6px;border-radius:18px} .gbox-h h2{font-size:clamp(20px,5.6vw,24px)} .more{font-size:14.5px} .gbox-s{font-size:13px} .gr{grid-template-columns:26px 50px minmax(0,1fr) auto;gap:9px;min-height:68px} .gr-n{width:26px;height:26px;font-size:13.5px;border-radius:8px} .gr-img{width:50px;height:50px;border-radius:12px} .gr-t b{font-size:15px}.gr-t small{font-size:12.5px} .gr-b{min-width:74px;height:42px;padding:0 12px;font-size:14.5px} .up{grid-template-columns:42px minmax(0,1fr) 50px;gap:10px;min-height:74px} .up-av{width:42px;height:42px;font-size:17px} .up-img{width:50px;height:50px;padding:5px;border-radius:12px} .up-t b{font-size:15px}.up-a{font-size:13.5px;white-space:normal}.up-t small{font-size:12px} ul.arts{grid-template-columns:1fr;gap:14px} .art h3{font-size:18px;margin:8px 16px 0} .art-d{margin:6px 16px 14px;font-size:13px} .art-tag{margin-left:16px} .faq{grid-template-columns:1fr;gap:10px} .faq-i summary{min-height:52px;font-size:15.5px;padding:6px 14px} .faq-i p{padding:0 14px 12px;font-size:14.5px} .foot{margin-top:34px} .foot-in{gap:18px;padding:24px 0 10px} .foot-logo img{height:64px} .foot-copy{font-size:12.5px;line-height:1.8} .foot-copy span[aria-hidden]{margin:0 4px} } /* โปร 2×2 บนมือถือ: การ์ดเดิมย่อลงทั้งใบ (ภาพเดิมไม่ถูกตัด) · ซ่อนบรรทัดรอง (เช่น "สูงสุด 1,000 บาท" — ยังอยู่ในหน้ารายละเอียด) ตัวอักษรมีขนาดขั้นต่ำให้อ่านได้บนจอ 360 px */ @media (max-width:599px){ ul.promos{gap:10px} ul.promos .pc{border-radius:14px} ul.promos .pc-t{left:6.5cqw;top:6.5cqw;bottom:6.5cqw;width:62%} ul.promos .pc-tag{height:max(17px,8.2cqw);padding:0 max(7px,3.4cqw);font-size:max(10px,5.25cqw)} ul.promos .pc-h{margin-top:max(5px,3.4cqw);font-size:max(13px,7.35cqw)} ul.promos .pc-n b{font-size:max(23px,14.4cqw)} ul.promos .pc-n-sm b{font-size:max(20px,12.4cqw)} ul.promos .pc-n small{font-size:max(10px,4.9cqw)} ul.promos .pc-n-sm small:last-child{display:none} /* "สูงสุด 1,000 บาท" → "สูงสุด 1,000" ไม่ให้คำท้ายทับภาพ */ ul.promos .pc-s{display:none} ul.promos .pc-b{height:max(25px,14.6cqw);padding:0 max(9px,5.2cqw);gap:4px;font-size:max(10.5px,4.55cqw)} ul.promos .pc-b .ico{width:10px;height:10px} } @media (max-width:400px){.logo img{height:50px}.hdr-r{gap:8px}.hdr .btn{padding:0 13px;font-size:13.5px}} @media (max-width:340px){.logo img{height:44px}.hdr .btn{padding:0 11px;font-size:13px}.menu-btn{width:42px;height:42px}} /* แบนเนอร์มือถือบนแท็บเล็ต: กว้างไม่เกิน 560 px ขอบซ้าย/ขวาจางเข้ากับพื้นปก */ @media (min-width:600px) and (max-width:1023px){.hero-slide img{-webkit-mask:linear-gradient(180deg,#000 90%,transparent 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;mask:linear-gradient(180deg,#000 90%,transparent 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}} /* ===================================================================== V2 (ลูกค้าขอ 27 ต.ค. 2026) · C2 โปรโมชั่นแนะนำแบบเลื่อน · D2 เปิดซองลุ้นรางวัล ===================================================================== */ /* ---------- C2 · โปรโมชั่นแนะนำ: แถวเลื่อน (การ์ดชุดเดิมก่อนแก้เป็น 2×2) · คอม 3 ใบต่อจอ + ลูกศร ---------- */ .prail{margin-top:42px} .rail-w{position:relative} ul.rail-l{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 18px) / 3);gap:18px;margin:-8px 0 0;padding:8px 0 18px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain} ul.rail-l::-webkit-scrollbar{display:none} ul.rail-l>li{scroll-snap-align:start;min-width:0} .rail-arw{position:absolute;top:calc(50% - 30px);z-index:3;display:grid;place-items:center;width:50px;height:50px;border:0;border-radius:50%;background:var(--p-card);color:var(--s-rail-arw,var(--c-48));box-shadow:0 8px 20px var(--c-132),0 0 0 1px var(--c-172);cursor:pointer;transition:opacity .2s,transform .2s,visibility .2s} .rail-arw .ico{width:15px;height:15px} .rail-prev{left:-20px}.rail-next{right:-20px} .rail-arw:hover{transform:scale(1.07)} .rail-arw:disabled{opacity:0;visibility:hidden} /* ---------- D2 · เปิดซองลุ้นรางวัล (โครงแบบ CANDY REEL TOWN + ซองแบบ FORTUNE BAZAAR: เลือก 1 จาก 5 ซอง แล้วนับถอยหลัง) ---------- */ .ebox{position:relative;width:min(1372px,100% - 2*12px);margin:26px auto 0;border-radius:28px;overflow:hidden;isolation:isolate; background:var(--s-stage-bg,radial-gradient(40% 36% at 50% 56%,var(--c-173),var(--c-174) 72%), linear-gradient(180deg,var(--c-175) 0%,var(--c-176) 26%,var(--c-177) 56%,var(--c-178) 82%,var(--c-179) 100%)); box-shadow:0 14px 34px var(--c-180),inset 0 0 0 1px var(--c-101)} .ebox::before{content:"";position:absolute;left:50%;top:56%;z-index:-1;width:1700px;height:1700px;margin:-850px 0 0 -850px; background:repeating-conic-gradient(from 0deg,var(--s-stage-rays,var(--c-181)) 0 5deg,var(--c-103) 5deg 13deg); -webkit-mask:radial-gradient(closest-side,#000 11%,rgba(0,0,0,.55) 42%,transparent 74%);mask:radial-gradient(closest-side,#000 11%,rgba(0,0,0,.55) 42%,transparent 74%);animation:ebSpin 80s linear infinite} @keyframes ebSpin{to{transform:rotate(1turn)}} .eb-coin{position:absolute;z-index:-1;height:auto;pointer-events:none;filter:drop-shadow(0 8px 10px var(--c-182))} .eb-coin1{left:5%;top:34px;width:78px;transform:rotate(-16deg)} .eb-coin2{right:6%;top:70px;width:58px;transform:rotate(24deg) scaleX(-1);filter:blur(1.2px) drop-shadow(0 8px 10px var(--c-183))} .eb-coin3{left:9%;bottom:56px;width:52px;transform:rotate(34deg);filter:blur(2px);opacity:.9} .ebox-in{position:relative;display:grid;grid-template-areas:"head" "stage" "bar" "note";justify-items:center;width:min(var(--max),100% - 2*var(--g));margin-inline:auto;padding:30px 0 28px} /* หัวข้อ: ตัวอักษรนูน 3 ชั้น (ขอบขาว · ขอบส้มแดง · ไล่สีแดดทอง) */ .eb-head{grid-area:head;display:flex;flex-direction:column;align-items:center;text-align:center} .eb-title{font-weight:800;line-height:1;transform:rotate(-2deg)} .x3{position:relative;display:inline-block;isolation:isolate;white-space:nowrap;line-height:1.18;font-size:60px;letter-spacing:-.005em; --x3f:var(--s-x3-fill,linear-gradient(180deg,var(--c-184) 0%,var(--c-185) 40%,var(--c-186) 70%,var(--c-187) 100%));--x3s:var(--s-x3-stroke,var(--c-188));--x3e:var(--s-x3-shadow,var(--c-189));--x3o:var(--s-x3-outline,var(--p-card));--x3w:.13em;--x3ow:.25em} .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) var(--x3s);text-shadow:0 .06em 0 var(--x3e),0 .1em .1em var(--c-190)} .x3::after{z-index:-2;color:var(--x3o);-webkit-text-stroke:var(--x3ow) var(--x3o);filter:drop-shadow(0 .05em .08em var(--c-191))} .eb-sub{margin-top:8px;font-size:19px;font-weight:600;color:var(--s-eb-sub,var(--c-192));text-shadow:0 0 2px var(--p-card),0 0 2px var(--p-card),0 0 8px var(--p-card)} .eb-rib{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;margin-top:8px;padding:0 26px;background:var(--s-eb-rib-bg,linear-gradient(180deg,var(--c-193),var(--c-194)));color:var(--s-eb-rib-fg,var(--c-106));font-size:16px;font-weight:700;white-space:nowrap;clip-path:polygon(0 0,100% 0,95.5% 50%,100% 100%,0 100%,4.5% 50%);transform:rotate(-1.5deg);filter:drop-shadow(0 3px 4px var(--c-195))} .eb-rib .ico{width:16px;height:16px;color:var(--c-156)} /* ซอง 5 ซอง (เรียงโค้ง · ลอยเบาๆ · กดแล้วสั่น) */ .eb-board{grid-area:stage;position:relative;width:min(780px,100%);margin-top:14px;z-index:1} .eb-board::before{content:"";position:absolute;left:8%;right:8%;bottom:6px;height:56px;border-radius:50%;background:radial-gradient(closest-side,var(--c-196),var(--c-197));pointer-events:none} .eb-hint{display:table;margin:0 auto;padding:3px 14px;border-radius:99px;background:var(--s-eb-hint-bg,var(--c-198));font-size:14.5px;font-weight:600;color:var(--s-eb-hint-fg,var(--c-199));box-shadow:0 2px 8px var(--c-200)} ul.eb-envs{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:26px;margin:0;padding:26px 0 34px;list-style:none} .eb-envs li{flex:0 1 128px;min-width:0} .eb-envs li:nth-child(1){transform:translateY(18px) rotate(-9deg)} .eb-envs li:nth-child(2){transform:translateY(4px) rotate(-4.5deg)} .eb-envs li:nth-child(3){transform:translateY(-4px) scale(1.06)} .eb-envs li:nth-child(4){transform:translateY(4px) rotate(4.5deg)} .eb-envs li:nth-child(5){transform:translateY(18px) rotate(9deg)} .env{position:relative;display:block;width:100%;aspect-ratio:488/546;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 75%;animation:envIdle 2.8s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.55s);transition:filter .25s;-webkit-tap-highlight-color:transparent} .env img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px var(--c-201))} .env::after{content:"";position:absolute;inset:3% 4%;border-radius:9%;background:linear-gradient(105deg,transparent 35%,var(--c-202) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;animation:envShine 4.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * .35s);pointer-events:none;mix-blend-mode:screen} @keyframes envIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}} @keyframes envShine{0%,60%{background-position:150% 0}85%,100%{background-position:-60% 0}} @media (hover:hover){.env:not(.is-locked):not(.is-open):hover{animation:none;transform:translateY(-8%) scale(1.07);filter:drop-shadow(0 0 16px var(--c-203)) brightness(1.06)}} .env:focus-visible{outline:3px solid var(--p-c2);outline-offset:5px;border-radius:12px} .env.opening{animation:envShake .52s ease-in-out;filter:drop-shadow(0 0 22px var(--c-204)) brightness(1.15)} @keyframes envShake{0%,100%{transform:rotate(0) scale(1.05)}20%{transform:rotate(-7deg) scale(1.1)}40%{transform:rotate(7deg) scale(1.12)}60%{transform:rotate(-5deg) scale(1.12)}80%{transform:rotate(3deg) scale(1.07)}} .env.is-locked{animation:none;filter:grayscale(.75) brightness(1.06) opacity(.62)} .env.is-locked::after,.env.is-open::after{display:none} .env.is-open{animation:none;transform:translateY(-10%) scale(1.1);filter:drop-shadow(0 0 18px var(--c-205))} .env.is-open::before{content:"✓ เลือกแล้ว";position:absolute;left:50%;top:44%;z-index:2;transform:translate(-50%,-50%) rotate(-10deg);padding:.28em .75em;border-radius:99px;background:var(--p-card);color:var(--p-ok);font:700 max(11px,min(15px,1.05vw)) var(--f);white-space:nowrap;box-shadow:0 0 0 2px var(--c-206),0 4px 10px var(--c-207)} .snd{position:absolute;right:0;top:-4px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--c-208);color:var(--c-48);box-shadow:0 4px 12px var(--c-209);cursor:pointer} .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} /* แถบนับถอยหลัง + ปุ่มเปิดซอง */ .eb-bar{grid-area:bar;position:relative;z-index:1;display:flex;align-items:center;gap:22px;margin-top:2px;padding:10px 10px 10px 22px;border-radius:999px;background:var(--s-eb-bar-bg,var(--c-54));box-shadow:0 12px 28px var(--c-210),inset 0 0 0 1px var(--p-card)} .eb-cd{display:flex;align-items:center;gap:14px} .eb-cd-t{display:flex;align-items:center;gap:7px;font-size:15.5px;font-weight:600;color:var(--s-eb-cd-t,var(--c-211));white-space:nowrap} .eb-cd-t .ico{width:18px;height:18px;color:var(--p-c2)} .cd-box{display:flex;align-items:flex-start;gap:5px} .cd-box>span{display:flex;flex-direction:column;align-items:center;gap:2px} .cd-box b{display:grid;place-items:center;width:48px;height:44px;border-radius:11px;background:var(--s-cd-box-bg,linear-gradient(180deg,var(--p-c5-d),var(--c-212)));color:var(--s-cd-box-fg,var(--p-on));font:700 25px/1 var(--f);font-variant-numeric:tabular-nums;box-shadow:inset 0 -3px 0 var(--c-213),inset 0 1px 0 var(--c-214),0 3px 8px var(--c-215)} .cd-box small{font-size:11.5px;line-height:1.2;color:var(--s-cd-box-lbl,var(--p-c5))} .cd-box>i{font-style:normal;font-weight:700;font-size:21px;line-height:44px;color:var(--s-cd-box-lbl,var(--c-211))} .eb-btn{min-height:0;height:58px;padding:0 36px;gap:10px;font-size:20px;font-weight:700;box-shadow:inset 0 0 0 3px var(--c-101),0 10px 22px var(--c-160)} .eb-note{grid-area:note;position:relative;z-index:1;margin-top:14px;padding:4px 16px;border-radius:99px;background:var(--s-eb-note-bg,var(--c-216));font-size:13.5px;line-height:1.6;color:var(--s-eb-note-fg,var(--c-217));text-align:center} .eb-note a{color:var(--c-34);font-weight:600;text-decoration:underline;text-underline-offset:2px} /* ปุ่มชิป 6 ปุ่ม → หน้ากิจกรรมในระบบ */ ul.eb-chips{list-style:none;margin:0;padding:0} .chip{display:flex;align-items:center;gap:10px;min-height:54px;padding:7px 16px 7px 8px;border-radius:999px;background:var(--s-chip-bg,var(--p-card));box-shadow:0 8px 18px var(--c-218),inset 0 0 0 1.5px var(--c-219);font-size:16px;font-weight:600;line-height:1.25;color:var(--s-chip-fg,var(--c-146));transition:transform .2s,box-shadow .2s} .chip-i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:var(--p-on);background:var(--cg);box-shadow:inset 0 1px 0 var(--c-95),inset 0 -2px 0 rgba(0,0,0,.1),0 3px 8px rgba(0,0,0,.14)} .chip-i .ico{width:19px;height:19px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))} .chip-t{flex:1;min-width:0} .chip-go{width:11px;height:11px;margin-left:2px;color:var(--c-48);transition:transform .2s} .chip:hover{box-shadow:0 12px 24px var(--c-220),inset 0 0 0 1.5px var(--c-130)} .chip:hover .chip-go{transform:translateX(3px)} .chip-1{--cg:var(--s-chip1,linear-gradient(160deg,#72dcff,var(--p-c4-d)))} .chip-2{--cg:var(--s-chip2,linear-gradient(160deg,var(--c-92),var(--p-c2)))} .chip-3{--cg:var(--s-chip3,linear-gradient(160deg,#ff86a6,#ee3a62))} .chip-4{--cg:var(--s-chip4,linear-gradient(160deg,#5ddc93,var(--c-221)))} .chip-5{--cg:var(--s-chip5,linear-gradient(160deg,#bb92ff,#7a4bf0))} .chip-6{--cg:var(--s-chip6,linear-gradient(160deg,var(--c-222),var(--c-223)))} /* หน้าต่างผลเปิดซอง + กติกา */ .mdl[data-kind="envelope"]{--mdl-w:420px} .mdl[data-kind="envelope"] .mdl-panel{background:var(--s-env-panel,radial-gradient(130% 62% at 50% 0%,var(--c-224),var(--p-card) 64%))} .mdl[data-kind="envelope"] .mdl-x{background:var(--c-225)} .epick{padding:30px 22px 22px} .epick-env{position:relative;width:120px;margin:0 auto;animation:epWiggle .7s ease-in-out} .epick-env img{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px var(--c-226))} .epick-burst{position:absolute;left:50%;top:50%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;background:repeating-conic-gradient(var(--c-227) 0 9deg,var(--c-228) 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 22%,transparent 66%);mask:radial-gradient(circle,#000 22%,transparent 66%);animation:ebSpin 16s linear infinite;pointer-events:none} .epick-paper{position:relative;margin-top:-30px;padding:20px 16px 12px;border-radius:18px;background:var(--s-epick-paper,linear-gradient(180deg,var(--c-229),var(--c-230)));box-shadow:0 12px 26px var(--c-128),inset 0 0 0 1.5px var(--c-231);animation:epUp .5s .42s cubic-bezier(.34,1.56,.64,1) both} .epick .eres-k{color:var(--p-c2-d);font-weight:600;opacity:1} .epick h3{color:var(--c-86)} .epick .eres-x{color:var(--c-232)} .epick .eres-cta{min-height:50px;gap:8px;font-size:17px} .epick .eres-d{margin:0 0 6px} .epick.again .epick-env,.epick.again .epick-paper{animation:none} /* ของในซองมีรูป: รูปลอยขึ้นจากซอง */ .epick.has-prize{padding-top:66px} .epick-env .epick-prize{position:absolute;left:50%;bottom:58%;z-index:2;width:112px;height:112px;margin-left:-56px;object-fit:contain;filter:drop-shadow(0 10px 14px var(--c-233));animation:epPrize .75s .3s cubic-bezier(.34,1.56,.64,1) both} .epick.again .epick-env .epick-prize{animation:none} @keyframes epPrize{from{opacity:0;transform:translateY(54px) scale(.3)}} @keyframes epWiggle{0%{transform:scale(.55) rotate(0)}40%{transform:scale(1.12) rotate(-7deg)}70%{transform:scale(1.04) rotate(5deg)}100%{transform:none}} @keyframes epUp{from{opacity:0;transform:translateY(28px)}} .erules{padding:30px 24px 22px} .erules h3{margin-top:2px;font-size:24px;font-weight:700;line-height:1.3;color:var(--c-86)} .erules .tpl{display:inline-block;padding:0 10px;border-radius:99px;background:var(--doc-tpl-bg);color:var(--doc-tpl-fg);font-size:12.5px;font-weight:600;vertical-align:middle} .erules h4{margin-top:14px;font-size:16.5px;font-weight:700;color:var(--c-86)} .erules ul,.erules ol{margin:6px 0 0;padding-left:1.25em;font-size:15px;line-height:1.65;color:var(--c-115)} /* ---------- V2 · จอใหญ่: ปุ่มชิป 3 ซ้าย / 3 ขวา ขนาบซอง (แบบ CANDY REEL TOWN) ---------- */ @media (min-width:1200px){ .ebox-in{grid-template-columns:minmax(0,1fr)} ul.eb-chips{grid-area:stage;align-self:center;display:grid;width:100%;grid-template-columns:250px minmax(0,1fr) 250px;grid-template-rows:repeat(3,auto);grid-auto-flow:column;row-gap:18px;margin-top:40px;pointer-events:none} ul.eb-chips>li{pointer-events:auto} ul.eb-chips>li:nth-child(n+4){grid-column:3} ul.eb-chips>li:nth-child(2){transform:translateX(-10px)} ul.eb-chips>li:nth-child(5){transform:translateX(10px)} .eb-board{width:min(700px,100% - 2 * 290px)} .eb-envs li{flex-basis:116px} ul.eb-envs{gap:22px} } /* ---------- V2 · แท็บเล็ต/คอมเล็ก: ปุ่มชิปใต้หมายเหตุ 3 คอลัมน์ ---------- */ @media (max-width:1199px){ .ebox-in{grid-template-areas:"head" "stage" "bar" "note" "chips"} ul.eb-chips{grid-area:chips;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(820px,100%);margin-top:18px} } @media (max-width:1023px){ ul.rail-l{grid-auto-columns:calc((100% - 16px) / 2.2);gap:16px} .rail-arw{display:none} .x3{font-size:52px} } /* ---------- V2 · มือถือ ---------- */ @media (max-width:767px){ .prail{margin-top:34px} ul.rail-l{grid-auto-columns:84%;gap:12px;margin:-6px calc(var(--g) * -1) 0;padding:6px var(--g) 12px;scroll-padding-inline:var(--g)} .ebox{width:100%;border-radius:22px;margin-top:30px} .ebox::before{top:52%;width:1000px;height:1000px;margin:-500px 0 0 -500px;animation:none} /* มือถือ: แสงไม่หมุน (ประหยัดแบต) */ .ebox-in{padding:22px 0 20px} .x3{font-size:clamp(31px,9.4vw,44px)} .eb-sub{margin-top:6px;font-size:14.5px} .eb-rib{height:30px;margin-top:6px;padding:0 20px;font-size:14px;gap:6px} .eb-rib .ico{width:14px;height:14px} .eb-coin1{left:-12px;top:12px;width:50px} .eb-coin2{right:-10px;top:96px;width:42px} .eb-coin3{display:none} .eb-board{margin-top:12px} .eb-board::before{bottom:2px;height:36px} .eb-hint{font-size:13px;padding:2px 12px} .snd{width:38px;height:38px;top:-6px} .snd .ico{width:16px;height:16px} ul.eb-envs{gap:6px;padding:20px 2px 24px} .eb-envs li{flex:1 1 0;max-width:86px} .eb-envs li:nth-child(1){transform:translateY(12px) rotate(-8deg)} .eb-envs li:nth-child(2){transform:translateY(3px) rotate(-4deg)} .eb-envs li:nth-child(3){transform:translateY(-3px) scale(1.06)} .eb-envs li:nth-child(4){transform:translateY(3px) rotate(4deg)} .eb-envs li:nth-child(5){transform:translateY(12px) rotate(8deg)} .env.is-open::before{font-size:10.5px;padding:.25em .6em} .eb-bar{flex-direction:column;align-items:stretch;gap:10px;width:100%;padding:12px;border-radius:20px} .eb-cd{justify-content:space-between;gap:8px} .eb-cd-t{font-size:13.5px;white-space:normal} .cd-box{gap:3px} .cd-box b{width:40px;height:38px;font-size:21px;border-radius:9px} .cd-box small{font-size:10px} .cd-box>i{font-size:17px;line-height:38px} .eb-btn{height:52px;font-size:18px} .eb-note{margin-top:12px;padding:6px 12px;border-radius:14px;font-size:12.5px} ul.eb-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px} .chip{min-height:50px;padding:5px 8px 5px 5px;gap:7px;font-size:14px;letter-spacing:-.005em} .chip-i{width:34px;height:34px} .chip-i .ico{width:16px;height:16px} .chip-go{display:none} .epick{padding:26px 16px 18px} } @media (max-width:374px){ .chip{font-size:13px;gap:6px} .chip-i{width:30px;height:30px} .chip-i .ico{width:15px;height:15px} .cd-box b{width:34px;font-size:19px} .eb-cd-t{font-size:12.5px} } /* ===================================================================== V2 · มินิเกมเล่นได้จริง (กดการ์ด = หน้าต่างเกม · กงล้อ / กล่องสมบัติ / ขูดการ์ด / ภารกิจรายวัน) ===================================================================== */ .ac-img{position:relative} .ac-go{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:99px;background:var(--s-ac-go-bg,var(--c-234));color:var(--s-ac-go-fg,var(--c-48));font-size:13.5px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:0 4px 12px var(--c-235);transition:transform .2s} .ac-go .ico{width:10px;height:10px} @media (hover:hover){.ac:hover .ac-go{transform:scale(1.07)}} .ebox{scroll-margin-top:calc(var(--hdr-h) + 8px)} .ebox.flash{animation:ebFlash 1.5s ease} @keyframes ebFlash{0%,100%{box-shadow:0 14px 34px var(--c-180),inset 0 0 0 1px var(--c-101)}25%,55%{box-shadow:0 0 0 6px var(--c-236),0 14px 34px var(--c-237)}} /* ซองในหน้าต่างเกม / หน้ากิจกรรม (เลือก 1 จาก 5 ซอง · สิทธิ์ใช้ร่วมกับส่วนเกมเด่น) */ .mg-envelope .eb-hint{font-size:13.5px} .mg-envelope ul.eb-envs{gap:6px;padding:18px 0 22px} .mg-envelope .eb-envs li{flex:1 1 0;max-width:78px} .mg-envelope .eb-envs li:nth-child(1){transform:translateY(12px) rotate(-8deg)} .mg-envelope .eb-envs li:nth-child(2){transform:translateY(3px) rotate(-4deg)} .mg-envelope .eb-envs li:nth-child(3){transform:translateY(-3px) scale(1.06)} .mg-envelope .eb-envs li:nth-child(4){transform:translateY(3px) rotate(4deg)} .mg-envelope .eb-envs li:nth-child(5){transform:translateY(12px) rotate(8deg)} .mg-envelope .env.is-open::before{font-size:10.5px;padding:.25em .6em} /* เกมอื่นบนส่วนเกมเด่น (กงล้อ / กล่อง / ขูดการ์ด / ภารกิจ): หัวข้อ + ปุ่มหลัก + ปุ่มเสียง ใช้ของส่วนเกมเด่น */ .eb-board .mg-st{padding:14px 0 30px;text-align:center} .mg-st .mg-head{display:none} .mg-st .mg-stage{margin-top:0} .mg-st.mg-wheel .mg-foot,.mg-st.mg-scratch .mg-foot,.mg-st.mg-mission .mg-foot{display:none} .mg-st.mg-chest .mg-foot{margin-top:6px} .mg-st .mgw{width:min(390px,100%)} .mg-st .mgs{width:min(420px,100%)} .mg-st .mgm{width:min(540px,100%);margin:0 auto} .mg-st .mg-res{border-radius:26px} [data-stage]:not([data-stage="envelope"]) .eb-board::before{bottom:18px} @media (max-width:767px){.eb-board .mg-st{padding:10px 0 22px}.mg-st .mgw{width:min(340px,100%)}} /* หน้าต่างเกม */ .mdl[data-kind="mg"]{--mdl-w:440px} .mdl[data-kind="mg"] .mdl-panel{background:var(--s-mg-panel,radial-gradient(130% 50% at 50% 0%,var(--c-238),var(--c-239) 60%,var(--p-card) 100%))} .mdl[data-kind="mg"] .mdl-body{padding:0} .mdl[data-kind="mg"] .mdl-x{background:var(--c-225)} .mg{position:relative;padding:22px 18px 20px;text-align:center;isolation:isolate} .mg-k{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:99px;background:var(--c-240);color:var(--p-c2-d);font-size:12.5px;font-weight:700;letter-spacing:.04em} .mg-t{margin-top:6px;font-size:26px;font-weight:800;line-height:1.2;color:var(--c-86)} .mg-h{margin-top:2px;font-size:14.5px;line-height:1.45;color:var(--p-c5)} .mg-stage{position:relative;margin-top:14px} .mg-foot{display:flex;justify-content:center;gap:10px;margin-top:16px} .mg-go{min-width:220px;min-height:0;height:54px;padding:0 28px;gap:9px;font-size:19px;font-weight:700;box-shadow:inset 0 0 0 3px var(--c-241),0 10px 22px var(--c-242)} .mg-go .ico{width:17px;height:17px} .mg-go:disabled{background:var(--c-243);color:var(--c-244);box-shadow:inset 0 0 0 1.5px var(--c-245);filter:none;cursor:default} .mg-snd{position:absolute;left:10px;top:10px;z-index:9;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--c-54);color:var(--c-48);box-shadow:0 3px 10px var(--c-210);cursor:pointer} .mg-snd .ico{width:16px;height:16px} .mg-snd .i-on,[data-sound][aria-pressed="true"] .i-off{display:none} .mg-snd[aria-pressed="true"] .i-on{display:block} .mg-page{position:relative;width:min(440px,100%);margin:12px auto 18px;border-radius:24px;background:var(--s-mg-panel,radial-gradient(130% 50% at 50% 0%,var(--c-238),var(--c-239) 60%,var(--p-card) 100%));box-shadow:0 12px 30px var(--c-246),0 0 0 1px var(--c-247);overflow:hidden} .mg-page .mg-snd{left:12px;top:12px} /* พลุกระดาษ */ .mg-conf{position:absolute;left:50%;top:45%;z-index:7;width:0;height:0;pointer-events:none} .mg-conf i{position:absolute;left:0;top:0;width:8px;height:12px;border-radius:2px;background:var(--c);opacity:0;animation:mgConf 1.25s cubic-bezier(.2,.7,.3,1) var(--d) forwards} .mg-conf i:nth-child(3n){width:9px;height:9px;border-radius:50%} @keyframes mgConf{0%{opacity:1;transform:translate(0,0) rotate(0)}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 90px)) rotate(var(--r))}} /* หน้าต่างผลรางวัล (ทับบนเกม) */ .mg-res{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:16px;background:var(--c-248);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .mg-res-in{position:relative;width:100%;max-width:350px;padding:20px 16px 16px;border-radius:24px;background:var(--s-res-bg,linear-gradient(180deg,var(--c-229),var(--c-249)));box-shadow:0 18px 40px var(--c-250),inset 0 0 0 2px var(--c-251);text-align:center;overflow:hidden;isolation:isolate} .mg-res.in .mg-res-in{animation:mgPop .48s cubic-bezier(.34,1.56,.64,1)} .mg-burst{position:absolute;left:50%;top:84px;z-index:-1;width:380px;height:380px;margin:-190px 0 0 -190px;background:repeating-conic-gradient(var(--c-252) 0 9deg,var(--c-253) 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 16%,transparent 62%);mask:radial-gradient(circle,#000 16%,transparent 62%);animation:ebSpin 14s linear infinite} .mg-res-in.miss .mg-burst{opacity:.35} .mg-res-img{display:block;width:128px;height:128px;margin:0 auto;object-fit:contain;filter:drop-shadow(0 10px 14px var(--c-254));animation:mgFloat 2.4s ease-in-out infinite} .mg-res-in.miss .mg-res-img{width:96px;height:96px;filter:grayscale(.2) drop-shadow(0 6px 10px var(--c-255))} .mg-res-k{margin-top:6px;font-size:15px;font-weight:600;color:var(--s-res-k,var(--p-c2-d))} .mg-res-t{margin-top:2px;font-size:27px;font-weight:800;line-height:1.25;color:var(--s-res-t,var(--c-86))} .mg-res-x{margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--c-256)} .mg-res-b{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px} .mg-res-b .btn{min-height:50px;padding:0 20px;font-size:16.5px;font-weight:700} .mg-res-b .btn .ico{width:14px;height:14px} .mg-res-b .btn:disabled{opacity:.55;cursor:default} .mg-res-n{margin-top:10px;font-size:12px;color:var(--c-163)} @keyframes mgPop{from{opacity:0;transform:scale(.7)}} @keyframes mgFloat{50%{transform:translateY(-6px)}} /* ---------- กงล้อ ---------- */ .mgw{position:relative;width:min(330px,100%);aspect-ratio:1;margin:0 auto;container-type:inline-size;-webkit-user-select:none;user-select:none} .mgw-rim{position:absolute;inset:0;border-radius:50%;background:var(--s-mgw-rim,conic-gradient(from 200deg,var(--c-257),var(--c-258),var(--c-259),var(--p-c3-l),var(--c-260),var(--c-261),var(--c-257)));box-shadow:0 14px 30px var(--c-262),inset 0 0 0 1.2cqw var(--c-41),inset 0 -1.8cqw 3cqw var(--c-263)} .mgw-rim i{position:absolute;left:50%;top:50%;width:3.6cqw;height:3.6cqw;margin:-1.8cqw;border-radius:50%;background:var(--c-264);box-shadow:0 0 1.6cqw .5cqw var(--c-265);transform:rotate(var(--b)) translateY(-46.3cqw);animation:mgBulb 1s steps(1) infinite} .mgw-rim i:nth-child(even){animation-delay:-.5s} .mgw.spinning .mgw-rim i{animation-duration:.22s} @keyframes mgBulb{50%{background:var(--c-266);box-shadow:0 0 .6cqw var(--c-267)}} .mgw-disc{position:absolute;inset:7.4%;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 .7cqw var(--c-268),inset 0 0 6cqw var(--c-269);will-change:transform} .mgw-lines{position:absolute;inset:0;border-radius:50%} .mgw-seg{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:.9cqw;width:var(--sw);margin-left:calc(var(--sw) / -2);transform-origin:50% 0;transform:rotate(var(--a)) translateY(-40cqw)} .mgw-seg img{width:var(--iw);height:var(--iw);object-fit:contain;filter:drop-shadow(0 .6cqw .7cqw var(--c-270));-webkit-user-drag:none} .mgw-seg span{display:-webkit-box;max-width:100%;overflow:hidden;font-size:var(--fs);font-weight:700;line-height:1.1;color:var(--c-271);text-align:center;text-wrap:balance;-webkit-line-clamp:2;-webkit-box-orient:vertical} .mgw-seg.dk span{color:var(--p-on);text-shadow:0 .25cqw .5cqw var(--c-272)} .mgw-win{position:absolute;inset:7.4%;border-radius:50%;background:conic-gradient(from calc(var(--s) / -2),var(--c-52) 0 var(--s),var(--c-103) var(--s));-webkit-mask:radial-gradient(circle,transparent 26%,#000 27%);mask:radial-gradient(circle,transparent 26%,#000 27%);pointer-events:none;animation:mgwWin .6s ease-in-out infinite alternate} @keyframes mgwWin{from{opacity:.35}to{opacity:1}} .mgw-hub{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:23cqw;height:23cqw;margin:-11.5cqw;padding:0;border:0;border-radius:50%;background:var(--s-mgw-hub,radial-gradient(circle at 36% 30%,var(--c-273),var(--c-274) 38%,var(--c-275) 72%,var(--c-276)));box-shadow:0 0 0 1.3cqw var(--p-card),0 0 0 2.2cqw var(--c-277),0 1.6cqw 3.2cqw var(--c-278),inset 0 -1cqw 1.6cqw var(--c-233);cursor:pointer;transition:transform .15s} .mgw-hub span{font-size:5.6cqw;font-weight:800;line-height:1;color:var(--s-mgw-hub-fg,var(--c-279));text-shadow:0 .3cqw 0 var(--c-27)} .mgw-hub:not(:disabled):hover{transform:scale(1.05)} .mgw-hub:not(:disabled):active{transform:scale(.95)} .mgw-hub:disabled{cursor:default} .mgw-pin{position:absolute;left:50%;top:-3.2cqw;z-index:4;width:12.5cqw;height:auto;margin-left:-6.25cqw;filter:drop-shadow(0 1.2cqw 1.2cqw var(--c-280));transform-origin:50% 30%} .mgw-pin.tk{animation:mgwTk .14s ease-out} .mgw-pin-a{stop-color:var(--s-mgw-pin-a,var(--c-281))}.mgw-pin-b{stop-color:var(--s-mgw-pin-b,var(--p-c1-d))}.mgw-pin-c{fill:var(--c-282)} @keyframes mgwTk{40%{transform:rotate(-16deg)}} /* ---------- กล่องสมบัติ ---------- */ .mgc{position:relative;width:min(320px,100%);height:262px;margin:0 auto} .mgc-rays{position:absolute;left:50%;top:58%;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;background:repeating-conic-gradient(var(--c-283) 0 9deg,var(--c-284) 9deg 20deg);-webkit-mask:radial-gradient(circle,#000 14%,transparent 60%);mask:radial-gradient(circle,#000 14%,transparent 60%);opacity:.32;scale:.62;transition:opacity .45s,scale .6s cubic-bezier(.34,1.56,.64,1);animation:ebSpin 20s linear infinite;pointer-events:none} .mgc.open .mgc-rays{opacity:1;scale:1} .mgc-box{position:absolute;left:50%;bottom:6px;width:230px;height:220px;margin-left:-115px;padding:0;border:0;background:none;cursor:pointer;perspective:700px;animation:mgcIdle 2.4s ease-in-out infinite;-webkit-tap-highlight-color:transparent} .mgc-box svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .mgc-box.hit{animation:mgcHit .32s ease} .mgc.open .mgc-box{animation:none;cursor:default} @keyframes mgcIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes mgcHit{0%{transform:none}30%{transform:scale(1.07,.9) rotate(-4deg)}60%{transform:scale(.96,1.05) rotate(3deg)}100%{transform:none}} .mgc-lid{transform-origin:50% 47%;transition:transform .6s cubic-bezier(.34,1.56,.64,1)} /* ฝาพับไปด้านหลัง (3 มิติ) */ .mgc.open .mgc-lid{transform:rotateX(72deg)} /* สีกล่อง (เดิมอยู่ใน SVG) */ .mgc-w1{stop-color:var(--s-mgc-w1,var(--c-285))}.mgc-w2{stop-color:var(--s-mgc-w2,var(--c-286))}.mgc-w3{stop-color:var(--s-mgc-w3,var(--c-287))} .mgc-b1{stop-color:var(--s-mgc-w1,var(--c-288))}.mgc-b2{stop-color:var(--s-mgc-w2,var(--c-289))}.mgc-b3{stop-color:var(--s-mgc-w3,var(--c-290))} .mgc-g1{stop-color:var(--s-mgc-g1,var(--c-291))}.mgc-g2{stop-color:var(--s-mgc-g2,var(--c-292))}.mgc-g3{stop-color:var(--s-mgc-g3,var(--c-293))}.mgc-g4{stop-color:var(--s-mgc-g4,var(--c-294))} .mgc-o1{stop-color:var(--c-273)}.mgc-o2{stop-color:var(--c-274)}.mgc-o3{stop-color:var(--p-c3-d)} .mgc-ln{stroke:var(--c-295)}.mgc-gs{stroke:var(--c-296)}.mgc-ol{stroke:var(--c-297)}.mgc-lk{stroke:var(--c-298)}.mgc-kh{fill:var(--c-299)}.mgc-rv{fill:var(--s-mgc-g2,var(--c-292))} .mgc-glow{opacity:0;transition:opacity .4s .1s} .mgc.open .mgc-glow{opacity:1} .mgc-prize{position:absolute;left:50%;top:22%;width:126px;height:126px;margin-left:-63px;object-fit:contain;opacity:0;transform:translateY(46px) scale(.25);filter:drop-shadow(0 10px 14px var(--c-233));pointer-events:none} .mgc.open .mgc-prize{opacity:1;transform:translateY(-58px) scale(1);transition:opacity .25s .28s,transform .75s .28s cubic-bezier(.34,1.56,.64,1)} .mgc-coins img{position:absolute;left:50%;top:56%;width:34px;height:auto;opacity:0;pointer-events:none} .mgc.open .mgc-coins img{animation:mgcCoin 1s cubic-bezier(.2,.7,.3,1) calc(.25s + var(--d)) forwards} @keyframes mgcCoin{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1)}} .mgc-cnt{display:grid;justify-items:center;gap:6px} .mgc-dots{display:flex;gap:8px;justify-content:center;margin:0} .mgc-dots i{width:13px;height:13px;border-radius:50%;background:var(--c-300);box-shadow:inset 0 1px 2px var(--c-132);transition:background .2s,transform .2s} .mgc-dots i.on{background:linear-gradient(180deg,var(--p-c2-l),var(--c-40));transform:scale(1.15)} .mgc-t{font-size:17px;font-weight:700;color:var(--p-c2-d)} /* ---------- ขูดการ์ด ---------- */ .mgs{position:relative;width:min(340px,100%);aspect-ratio:4/3;margin:0 auto;border-radius:22px;overflow:hidden;box-shadow:0 12px 26px var(--c-220),0 0 0 3px var(--p-card),0 0 0 6px var(--s-mgs-ring,var(--c-301))} .mgs-under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--s-mgs-under,radial-gradient(circle at 50% 42%,var(--c-302),var(--c-303) 55%,var(--c-304)));overflow:hidden} .mgs-burst{position:absolute;left:50%;top:44%;width:150%;aspect-ratio:1;margin-left:-75%;transform:translateY(-50%);background:repeating-conic-gradient(var(--c-101) 0 8deg,var(--c-103) 8deg 18deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 60%);mask:radial-gradient(circle,#000 18%,transparent 60%)} .mgs-img{position:relative;width:44%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 8px 12px var(--c-254))} .mgs-t{position:relative;font-size:24px;font-weight:800;line-height:1.2;color:var(--c-305)} .mgs-foil{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:pointer;transition:opacity .55s} .mgs-foil.gone{opacity:0;pointer-events:none} .mg-all{min-height:44px;padding:0 18px;gap:8px;font-size:15px} .mg-all .ico{width:15px;height:15px} .mg-all:disabled{opacity:.5;cursor:default} /* ---------- ภารกิจรายวัน ---------- */ .mgm{text-align:left} .mgm-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-radius:18px;background:var(--p-card);box-shadow:0 6px 16px var(--c-306),inset 0 0 0 1px var(--c-307)} .mgm-n{display:flex;flex-direction:column;line-height:1.15} .mgm-n b{font-size:22px;font-weight:800;color:var(--c-48)} .mgm-n span{font-size:12px;color:var(--p-c5);white-space:nowrap} .mgm-bar{height:12px;border-radius:99px;background:var(--c-308);overflow:hidden;box-shadow:inset 0 1px 2px var(--c-309)} .mgm-bar i{display:block;width:0;height:100%;border-radius:inherit;background:var(--s-mgm-bar,linear-gradient(90deg,var(--c-92),var(--p-c2),var(--c-40)));transition:width .55s cubic-bezier(.34,1.3,.64,1)} .mgm-gift{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:var(--c-310);box-shadow:inset 0 0 0 1px var(--c-311);filter:grayscale(.6);opacity:.75;transition:filter .3s,opacity .3s} .mgm-gift img{width:44px;height:44px;object-fit:contain} .mgm.all .mgm-gift{filter:none;opacity:1;animation:mgGift .9s ease-in-out infinite} .mgm.claim .mgm-gift{animation:mgcHit .32s ease 3} @keyframes mgGift{50%{transform:scale(1.1) rotate(-6deg)}} .mgm-list{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none} .mgm-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:8px 8px 8px 10px;border-radius:16px;background:var(--p-card);box-shadow:inset 0 0 0 1px var(--c-312);transition:background .3s,box-shadow .3s} .mgm-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--s-mgm-ic,linear-gradient(160deg,var(--p-c2-l),var(--c-62)));color:var(--p-on);box-shadow:inset 0 1px 0 var(--c-161)} .mgm-ic .ico{width:18px;height:18px} .mgm-tx{font-size:15px;font-weight:600;line-height:1.3;color:var(--c-146)} .mgm-do{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:86px;height:40px;padding:0 14px;border:0;border-radius:99px;background:var(--s-mgm-do,var(--s-btn1-bg,linear-gradient(180deg,var(--p-c1-l),var(--c-40))));color:var(--p-on);font:700 14.5px var(--f);white-space:nowrap;cursor:pointer;box-shadow:0 4px 10px var(--c-131)} .mgm-do .ico{width:13px;height:13px} .mgm-do.wait span{visibility:hidden} .mgm-do.wait::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border:2.5px solid var(--c-95);border-top-color:var(--p-card);border-radius:50%;animation:ebSpin .7s linear infinite} .mgm-do.ok{background:var(--p-card);color:var(--p-ok);box-shadow:inset 0 0 0 1.5px var(--c-313);cursor:default} .mgm-row.done{background:var(--c-314);box-shadow:inset 0 0 0 1px var(--c-315)} .mgm-row.done .mgm-ic{background:linear-gradient(160deg,#5ddc93,var(--c-221))} .mgm-row.pop{animation:mgRow .4s cubic-bezier(.34,1.56,.64,1)} @keyframes mgRow{40%{transform:scale(1.03)}} @media (max-width:420px){ .mg{padding:20px 14px 16px} .mg-t{font-size:23px} .mgm-tx{font-size:14px} .mgm-do{min-width:78px;padding:0 12px;font-size:13.5px} .mg-go{min-width:200px} } /* ================= V2 · หน้าต่างเข้าสู่ระบบ (ปุ่ม "เข้าสู่ระบบ" ทุกปุ่ม · config.js › login) ================= */ .mdl[data-kind="login"]{--mdl-w:420px} .mdl[data-kind="login"] .mdl-panel{background:var(--p-card)} .mdl[data-kind="login"] .mdl-body{padding:0 0 22px} .mdl[data-kind="login"] .mdl-x{background:var(--c-316)} .mdl[data-kind="login"] .mdl-x:hover{background:var(--c-317)} .lg-top{position:relative;overflow:hidden;padding:26px 24px 20px;text-align:center;background:var(--s-lg-top,radial-gradient(120% 95% at 50% 0%,var(--c-282) 0%,var(--c-318) 46%,var(--c-319) 100%))} .lg-top::before{content:"";position:absolute;left:50%;top:-430px;width:900px;height:900px;margin-left:-450px;background:repeating-conic-gradient(from 0deg,var(--c-320) 0 5deg,var(--c-103) 5deg 15deg);-webkit-mask:radial-gradient(closest-side,#000 28%,transparent 70%);mask:radial-gradient(closest-side,#000 28%,transparent 70%);pointer-events:none} .lg-top>*{position:relative} .lg-logo{display:block;width:150px;height:auto;margin:0 auto 4px;filter:drop-shadow(0 6px 12px var(--c-321))} .lg-t{font-size:26px;font-weight:700;line-height:1.25;color:var(--s-lg-t,var(--p-ink))} .lg-s{margin-top:2px;font-size:14.5px;line-height:1.45;color:var(--c-322)} .lg-form{padding:20px 24px 0} .lg-fd+.lg-fd{margin-top:14px} .lg-fd label{display:block;margin-bottom:6px;font-size:14.5px;font-weight:600;color:var(--c-323)} .lg-in{position:relative;display:flex;align-items:center;height:52px;border-radius:14px;background:var(--s-lg-in,var(--c-324));box-shadow:inset 0 0 0 1.5px var(--c-325);transition:box-shadow .18s,background .18s} .lg-in:focus-within{background:var(--p-card);box-shadow:inset 0 0 0 2px var(--s-lg-focus,var(--p-c2)),0 0 0 4px var(--c-326)} .lg-in.bad{box-shadow:inset 0 0 0 2px var(--c-327),0 0 0 4px var(--c-328)} .lg-i{flex:none;width:18px;height:18px;margin:0 11px 0 16px;color:var(--c-329)} .lg-in input{flex:1;min-width:0;height:100%;padding:0 14px 0 0;border:0;border-radius:0;background:none;font:inherit;font-size:17px;color:var(--p-ink);outline:0} .lg-in input::placeholder{color:var(--p-c5-l)} .lg-in input[type=tel]{letter-spacing:.03em;font-variant-numeric:tabular-nums} .lg-in input[readonly]{color:var(--p-muted)} .lg-eye{flex:none;display:grid;place-items:center;width:46px;height:46px;margin-right:3px;border:0;border-radius:12px;background:none;color:var(--c-330);cursor:pointer} .lg-eye:hover{background:var(--c-331);color:var(--c-48)} .lg-eye .ico{width:19px;height:19px} .lg-e{margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--c-332)} .lg-fg{margin-top:10px;text-align:right;font-size:14px} .lg-fg a{font-weight:600;color:var(--c-48)} .lg-fg a:hover{text-decoration:underline} .lg-msg{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 13px;border-radius:12px;font-size:14.5px;line-height:1.45} .lg-msg .ico{flex:none;width:18px;height:18px;margin-top:1px} .lg-msg.err{background:var(--c-333);color:var(--c-334)} .lg-msg.info{background:var(--c-335);color:var(--c-336)} .lg-msg.ok{background:var(--c-337);color:var(--c-338)} .lg-go{width:100%;height:54px;margin-top:16px;font-size:18.5px;font-weight:700} .lg-go .lg-go-i{width:18px;height:18px} .lg-go:hover .lg-go-i{transform:translateX(3px)} .lg-go:disabled{cursor:progress;filter:saturate(.85) brightness(.97)} .lg-spin{display:none;width:20px;height:20px;border:2.5px solid var(--c-95);border-top-color:var(--p-card);border-radius:50%;animation:lgSpin .8s linear infinite} .lg-go.busy .lg-spin{display:block} .lg-go.busy .lg-go-i{display:none} @keyframes lgSpin{to{transform:rotate(360deg)}} .lg-or{display:flex;align-items:center;gap:12px;margin:18px 24px 10px;font-size:13.5px;color:var(--c-339)} .lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:var(--c-340)} .lg-reg{display:flex;width:calc(100% - 48px);height:50px;margin:0 24px;font-size:16.5px} .lg-reg .ico{width:17px;height:17px} .lg-demo{margin:16px 24px 0;text-align:center;font-size:13px;color:var(--c-339);--demo-bg:var(--c-341);--demo-fg:var(--c-342)} .lg-demo .demo{margin-right:4px} @media (max-width:420px){ .lg-top{padding:22px 18px 16px} .lg-logo{width:130px} .lg-t{font-size:23px} .lg-form{padding:16px 18px 0} .lg-or{margin:16px 18px 10px} .lg-reg{width:calc(100% - 36px);margin:0 18px} .lg-demo{margin:14px 18px 0} } @media (prefers-reduced-motion:reduce){.lg-spin{animation-duration:2.4s}} /* ==================== YOUJINX Play Frame (WordPress): ส่วนที่ปรับได้จากหลังบ้าน ==================== ต่อท้าย CSS ของ SUNBURST PLAY V2 (ไม่แก้ของเดิม) · สีทุกค่าเปลี่ยนตามชุดสีในหลังบ้าน */ /* ---------- ปก: ปุ่ม 1–3 ปุ่ม (เลือกได้ในหลังบ้าน) ---------- */ @media (min-width:1024px){ .hero-cta[data-n="1"] .btn{width:calc(var(--u) * 170)} .hero-cta[data-n="3"] .btn{width:calc(var(--u) * 122)} .hero-cta[data-n="3"] .hero-b1{font-size:calc(var(--u) * 13.2)} .hero-cta[data-n="3"] .hero-b2{font-size:calc(var(--u) * 12.1)} .hero-txt:has(.hero-cta[data-n="3"]){width:calc(var(--u) * 400)} } @media (max-width:1023px){ .hero-cta[data-n="1"] .btn{width:auto;max-width:320px} .hero-cta[data-n="3"] .btn{width:auto;max-width:220px;font-size:16px} } @media (max-width:599px){ .hero-cta[data-n="3"]{flex-wrap:wrap} .hero-cta[data-n="3"] .btn{flex:1 1 calc(50% - 5px);max-width:none;height:50px;font-size:15.5px} .hero-cta[data-n="3"] .btn:first-child{flex-basis:100%} } /* ---------- หน้าแรกที่ไม่ได้เริ่มด้วยแบนเนอร์: หัวเว็บทึบตั้งแต่แรก ---------- */ .pf-nohero .hdr{background:var(--s-hdr-bg,var(--c-55));box-shadow:0 1px 0 var(--c-56)} @media (min-width:768px){.pf-nohero .logo{top:9px;transform:scale(.5)}} .pf-top{display:block;height:0} /* ---------- แถบข้อมูล: จำนวนช่องตามที่ใส่ · วางห่างจากแบนเนอร์ = แถบปกติ ---------- */ @media (min-width:1024px){.facts-in{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}} @media (max-width:767px){.facts-in[data-even] li:last-child{flex-basis:50%;justify-content:flex-start}} .facts.facts-solo{margin-top:44px} @media (max-width:767px){.facts.facts-solo{margin-top:36px}} /* ---------- การ์ดมินิเกม: จำนวนการ์ดตามที่เปิด ---------- */ @media (min-width:1024px){ul.acts{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}} @media (min-width:1024px){ul.acts[style*="--n:1"],ul.acts[style*="--n:2"]{grid-template-columns:repeat(var(--n),minmax(0,300px));justify-content:center}} /* ---------- โปรโมชั่น: รูปล้วน (ไม่มีข้อความทับ) ---------- */ .pfeat.pf-bare::before{display:none} .pc-bare>img{object-fit:cover} /* ---------- เกมแนะนำ: ปิดกล่องอัปเดตล่าสุด = กล่องเดียวเต็มแถว ---------- */ .g-dash.g-solo{grid-template-columns:minmax(0,1fr)} /* ---------- ส่วนเกมเด่น: ปุ่มชิปเกิน 6 ปุ่ม · ข้อความที่ตั้งเป็นค่าว่าง = ซ่อน ---------- */ .chip-7{--cg:linear-gradient(160deg,#72dcff,var(--p-c4-d))} .chip-8{--cg:linear-gradient(160deg,var(--c-92),var(--p-c2))} span.chip{cursor:default} .eb-sub:empty,.eb-hint:empty,.eb-rib:has(>span:empty),.eb-note>span[data-st]:empty{display:none} /* ---------- ท้ายเว็บ ---------- */ .so-tt{background:var(--p-ink)} .pay-i.pay-img{padding:3px;background:var(--p-card);overflow:hidden} .pay-i.pay-img img{width:100%;height:100%;object-fit:contain} .menu-cta:has(>:only-child){grid-template-columns:1fr} /* ---------- บทความ ---------- */ .art-tag.pf-notag{visibility:hidden} .faq-grid.pf-noart{grid-template-columns:minmax(0,1fr)} .pf-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px 0 6px} .pf-pg{display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:12px;background:var(--p-card);color:var(--p-txt);font-weight:600;box-shadow:0 0 0 1px var(--p-line),0 4px 12px var(--c-343)} a.pf-pg:hover{color:var(--c-34);box-shadow:0 0 0 1.5px var(--c-49)} .pf-pg.on{color:var(--p-on);background:linear-gradient(180deg,var(--p-c1-l),var(--c-40));box-shadow:0 6px 14px var(--c-131)} .pf-pg-gap{background:none;box-shadow:none;min-width:20px} .pf-pg .ico{width:12px;height:12px} .pf-empty{padding:30px 0;text-align:center;color:var(--p-muted)} .pf-desc{margin-top:4px;opacity:.85} /* ---------- เนื้อหาที่เขียนใน WordPress (บทความ/หน้า) ---------- */ .doc-body>:first-child{margin-top:0} .doc-body img{max-width:100%;height:auto;border-radius:12px} .doc-body figure{margin:16px 0} .doc-body figcaption,.doc-body .wp-caption-text,.doc-body .wp-element-caption{margin-top:6px;font-size:13.5px;text-align:center;color:var(--p-muted)} .doc-body .aligncenter{display:block;margin-inline:auto} .doc-body .alignleft{float:left;margin:4px 18px 10px 0} .doc-body .alignright{float:right;margin:4px 0 10px 18px} .doc-body blockquote{margin:16px 0;padding:10px 18px;border-left:4px solid var(--p-c2);border-radius:0 12px 12px 0;background:var(--p-cream)} .doc-body iframe,.doc-body video{max-width:100%} .doc-body .wp-block-button__link{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;color:var(--p-on);background:linear-gradient(180deg,var(--p-c1-l) 0%,var(--c-39) 48%,var(--c-40) 100%);text-decoration:none} .doc-body::after{content:"";display:table;clear:both} .pf-404 .doc-cta{flex-wrap:wrap} /* ---------- ตัวอักษรวิ่ง (แถบประกาศบนสุด) ---------- */ .pf-mq{position:relative;z-index:61;background:var(--mq-bg,linear-gradient(90deg,var(--c-40),var(--p-c2)));color:var(--mq-fg,var(--p-on));font-size:14px;font-weight:600;line-height:1.2} .pf-mq-in{display:flex;align-items:center;gap:10px;width:min(1440px,100%);height:36px;margin-inline:auto;padding:0 var(--g);color:inherit} .pf-mq-ic{flex:none;display:grid;place-items:center} .pf-mq-ic .ico{width:16px;height:16px} .pf-mq-vp{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)} .pf-mq-tr{display:flex;width:max-content} .pf-mq-tr span{padding-right:64px;white-space:nowrap} .pf-mq.on .pf-mq-tr{animation:pfMq var(--mq-dur,30s) linear infinite} .pf-mq:hover .pf-mq-tr{animation-play-state:paused} @keyframes pfMq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.pf-mq.on .pf-mq-tr{animation:none}} /* ---------- ปุ่ม LINE ลอย ---------- */ .pf-lf{position:fixed;right:20px;bottom:84px;z-index:64;display:none;align-items:center;gap:8px;height:52px;padding:0 18px 0 6px;border-radius:999px;background:#06c755;color:var(--p-on);font-size:15px;font-weight:600;box-shadow:0 8px 20px var(--c-344);transition:transform .2s} .pf-lf:hover{transform:translateY(-2px)} .pf-lf-i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-102)} .pf-lf-i .ico{width:22px;height:22px} .pf-lf.pf-lf-ic{width:56px;height:56px;padding:0;justify-content:center} .pf-lf.pf-lf-ic .pf-lf-i{width:56px;height:56px;background:none} .pf-lf.pf-lf-ic .pf-lf-i .ico{width:28px;height:28px} .pf-lf.pf-lf-own{padding:0;background:none;box-shadow:none;height:auto} .pf-lf-img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.2))} .pf-lf.pf-lf-own .pf-lf-t{padding:6px 12px;border-radius:99px;background:#06c755;box-shadow:0 6px 14px var(--c-345)} .pf-lf.pf-lf-l{right:auto;left:20px;bottom:24px} @media (min-width:1180px){.pf-lf{display:inline-flex}} @media (max-width:1179px){ .pf-lf.pf-lf-m{display:inline-flex;right:14px;bottom:calc(146px + env(safe-area-inset-bottom,0px))} .pf-lf.pf-lf-m.pf-lf-l{right:auto;left:14px;bottom:calc(86px + env(safe-area-inset-bottom,0px))} .pf-lf.pf-lf-m:not(.pf-lf-ic):not(.pf-lf-own){height:48px;font-size:14px} } /* ---------- ยืนยันอายุ 18+ ---------- */ .pf-ag{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:var(--c-346);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .pf-ag[hidden]{display:none} html.pf-ag-on,html.pf-ag-on body{overflow:hidden} .pf-ag-box{width:min(440px,100%);padding:26px 24px 22px;border-radius:24px;background:var(--p-card);color:var(--p-txt);text-align:center;box-shadow:0 30px 60px rgba(0,0,0,.35)} .pf-ag-logo{width:auto;height:72px;margin:0 auto 6px} .pf-ag-18{display:inline-grid;place-items:center;width:58px;height:58px;margin:4px auto 8px;border-radius:50%;background:linear-gradient(180deg,var(--p-c1-l),var(--c-40));color:var(--p-on);font-size:20px;font-weight:800;box-shadow:0 8px 18px var(--c-347)} .pf-ag-box h2{font-size:21px;line-height:1.35;color:var(--p-ink)} .pf-ag-x{margin-top:8px;font-size:15px;line-height:1.6;color:var(--p-muted)} .pf-ag-b{display:grid;gap:10px;margin-top:18px} .pf-ag-b .btn{min-height:50px;font-size:16px} /* ---------- ป๊อปอัปประกาศ ---------- */ .pf-pop{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px} .pf-pop[hidden]{display:none} .pf-pop-back{position:absolute;inset:0;background:var(--c-348)} .pf-pop-box{position:relative;width:min(560px,100%);max-height:calc(100vh - 60px);animation:pfPop .35s cubic-bezier(.2,.9,.3,1.2)} .pf-pop-box img{display:block;width:100%;height:auto;max-height:calc(100vh - 60px);object-fit:contain;border-radius:18px;box-shadow:0 24px 50px rgba(0,0,0,.35)} .pf-pop-a{display:block} .pf-pop-x{position:absolute;right:-10px;top:-10px;z-index:1;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--p-card);color:var(--p-ink);font-size:26px;line-height:1;box-shadow:0 6px 16px rgba(0,0,0,.25);cursor:pointer} @keyframes pfPop{from{opacity:0;transform:scale(.9)}} @media (max-width:767px){.pf-pop-box{width:min(420px,100%)}.pf-pop-x{right:-6px;top:-6px}} /* ---------- ไอคอนวงกลม: ไอคอนสำเร็จรูป (สีตามธีม) แทนรูป · หน้าหัวข้อแต่ละส่วน + แถบข้อมูล ---------- พื้นวงกลม = --cg (ตั้งรายตัวในหลังบ้าน = style="--cg:…" · ตั้งทั้งหมด = สีรายจุด) · ไอคอน = สีตัวอักษรบนพื้นเข้ม */ .ic-b{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--cg);color:var(--p-on);box-shadow:inset 0 1px 0 var(--c-349),inset 0 -2px 0 rgba(0,0,0,.1),0 4px 10px var(--c-350)} .ic-b .ico{width:46%;height:46%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))} .sec-h .ic-b{--cg:var(--s-secic-bg,linear-gradient(160deg,var(--p-c1-l),var(--p-c1)));width:46px;height:46px;align-self:flex-start;margin-top:2px;color:var(--s-secic-fg,var(--p-on))} .facts-in .ic-b{width:54px;height:54px;color:var(--s-factic-fg,var(--p-on))} .facts-in li:nth-child(6n+1) .ic-b{--cg:var(--s-factic-bg,linear-gradient(160deg,var(--p-c1-l),var(--p-c1)))} .facts-in li:nth-child(6n+2) .ic-b{--cg:var(--s-factic-bg,linear-gradient(160deg,var(--p-c2-l),var(--p-c2)))} .facts-in li:nth-child(6n+3) .ic-b{--cg:var(--s-factic-bg,linear-gradient(160deg,var(--p-c4),var(--p-c4-d)))} .facts-in li:nth-child(6n+4) .ic-b{--cg:var(--s-factic-bg,linear-gradient(160deg,var(--p-c3),var(--p-c3-d)))} .facts-in li:nth-child(6n+5) .ic-b{--cg:var(--s-factic-bg,linear-gradient(160deg,var(--p-c1),var(--p-c1-d)))} .facts-in li:nth-child(6n+6) .ic-b{--cg:var(--s-factic-bg,linear-gradient(160deg,var(--p-c2),var(--p-c2-d)))} @media (max-width:1279px){.facts-in .ic-b{width:46px;height:46px}} @media (max-width:767px){.sec-h .ic-b{width:36px;height:36px}.facts-in .ic-b{width:38px;height:38px}} /* คำโปรยส่วนเกมเด่น: สีขอบเรือง (ตั้งได้ใน สีรายจุด › ส่วนเกมเด่น) */ .eb-sub{--ebsg:var(--s-eb-sub-glow,var(--p-card));text-shadow:0 0 2px var(--ebsg),0 0 2px var(--ebsg),0 0 8px var(--ebsg)}