:root{ --ink:#070707; --cream:#F4F0EC; --blue:#3250F0; --lime:#C1FF72; --mint:#7BE3A4; --dim:rgba(244,240,236,.5); --dim2:rgba(244,240,236,.3); --brand:"IBM Plex Sans Thai","Sukhumvit Set","Prompt","Inter",-apple-system,sans-serif; /* ★★★ ชุดฟอนต์สำหรับที่ที่อยากได้หน้าตาแบบ Inter (ตัวเลข ป้ายอังกฤษ ราคา) ═══════════════════════════════════════════════════════════════════════ ★★★ Inter ไม่มีตัวอักษรไทยอยู่ในตัวเลย สั่ง var(--latin) แล้วพอเจอคำไทย เบราว์เซอร์จะตกไปใช้ฟอนต์ระบบของเครื่องนั้น ๆ ซึ่งเป็นคนละหน้าตากับทั้งหน้าเว็บ (เจ้าของงานเห็นจากคำว่า "เกียรตินิยม" ตอนท้าย แต่จริง ๆ โดน 60 จุดทั้งหน้า) ★★ ที่หลอกตามากคือสัญลักษณ์บาท ฿ เป็นอักษรในบล็อกภาษาไทย (U+0E3F) ด้วย ราคาทุกตัวในหน้านี้จึงมี ฿ เป็นฟอนต์หนึ่ง ตัวเลขอีกฟอนต์หนึ่ง เห็นเป็นความไม่เนียน ที่บอกไม่ถูกว่าอะไรผิด ★ เรียง Inter ไว้หน้าสุด ตัวอักษรละตินกับตัวเลขจึงยังเป็น Inter เหมือนเดิมทุกประการ ส่วนตัวไทยไหลไปที่ IBM Plex Sans Thai ซึ่งเป็นฟอนต์หลักของทั้งหน้าอยู่แล้ว */ --latin:"Inter","IBM Plex Sans Thai","Sukhumvit Set","Prompt",-apple-system,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} /* ★★★ ต้องมาคู่กับ width/height ที่ใส่ไว้ใน ทุกตัวเสมอ ห้ามลบ ═══════════════════════════════════════════════════════════════════════════ เราใส่ width/height ใน HTML เพื่อให้เบราว์เซอร์จองที่ถูกขนาดตั้งแต่ก่อนภาพโหลด (กัน layout กระโดด) แต่ค่า height นั้นคือ "ความสูงจริงเป็นพิกเซล" ด้วย พอ CSS สั่งแค่ width:100% โดยไม่แตะความสูง ภาพจะกว้างตามกล่องแต่สูง 731px ตายตัว ผลคือภาพยืดเป็นแนวตั้งทั้งหน้า — เจอจริงที่ตอน 13 โมดูล กับตอนรายงานพร้อมส่ง ★★ height:auto คืนให้ความสูงคำนวณจากสัดส่วนจริงของไฟล์ ส่วน width/height ยังทำหน้าที่ จองพื้นที่ให้เหมือนเดิม (เบราว์เซอร์ใช้เป็น aspect-ratio ตั้งต้น) ★ ภาพที่ตั้งใจให้ครอบกล่อง (.xwrap img.xf, .file .th img) มี specificity สูงกว่า จึงเขียนทับกฎนี้ได้เองอยู่แล้ว ไม่ต้องยกเว้นให้ */ img{height:auto} /* ★★★ ต้องกันการล้นแนวนอนที่ ด้วย ไม่ใช่แค่ที่ ของเดิมใส่ overflow-x:hidden ไว้ที่ body อย่างเดียว แต่ตัวที่เลื่อนจริงคือ บนมือถือกว้าง 390 จึงลากหน้าจอไปทางขวาได้อีก 147px เจอแถบดำเปล่า ๆ ข้างหน้าเว็บ (ต้นเหตุคือการ์ดกับภาพที่ GSAP วางล้ำออกไปนอกจอโดยตั้งใจ ไม่ใช่ข้อความล้น) ★★ ใช้ clip ไม่ใช่ hidden — hidden ทำให้ กลายเป็นกล่องเลื่อนของตัวเอง แล้วไปตีกับการ "ล็อกหน้าจอ" (pin) ของ ScrollTrigger ส่วน clip แค่ตัดส่วนที่ล้นทิ้ง */ html{scroll-behavior:auto;overflow-x:clip} body{background:var(--ink);color:var(--cream);font-family:var(--brand); -webkit-font-smoothing:antialiased;overflow-x:clip} /* ---------- โครงหลัก ---------- */ .act{position:relative;min-height:100vh;display:grid;place-items:center;padding:0 24px} .wrap{width:min(1180px,100%);position:relative;z-index:2} .kicker{font-family:var(--latin);font-size:clamp(11px,1.1vw,14px);font-weight:700; letter-spacing:.34em;text-transform:uppercase;color:var(--dim2);margin-bottom:20px} h2{font-size:clamp(30px,4.4vw,58px);font-weight:600;line-height:1.24;letter-spacing:-.02em} h2 b{font-weight:600;color:var(--lime)} .lead{font-size:clamp(16px,1.9vw,26px);font-weight:300;color:var(--dim); line-height:1.66;margin-top:18px;max-width:44ch} .shot{width:100%;border-radius:14px;display:block;border:1px solid rgba(244,240,236,.12); box-shadow:0 30px 70px rgba(0,0,0,.7)} .grain{position:fixed;inset:-20%;opacity:.1;mix-blend-mode:overlay;pointer-events:none;z-index:90} /* ---------- แถบความคืบหน้า ---------- */ #bar{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left; background:linear-gradient(90deg,var(--lime),var(--blue));z-index:100} #nav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:100; display:grid;gap:13px} #nav a{width:9px;height:9px;border-radius:50%;background:rgba(244,240,236,.2); display:block;transition:.3s;border:0;padding:0} #nav a.on{background:var(--lime);transform:scale(1.5)} #nav a:focus-visible{outline:2px solid var(--lime);outline-offset:4px} /* ---------- ฉาก 1 ---------- */ #a1{text-align:center} #a1 .dot{width:16px;height:16px;border-radius:50%;background:var(--lime);margin:0 auto 40px; box-shadow:0 0 52px 12px rgba(193,255,114,.55)} #a1 h1{font-size:clamp(38px,6.6vw,92px);font-weight:700;line-height:1.14;letter-spacing:-.035em} #a1 h1 b{font-weight:700;color:var(--lime)} #a1 .sub{font-size:clamp(15px,1.8vw,25px);font-weight:300;color:var(--dim);margin-top:26px} .scrollcue{position:absolute;bottom:38px;left:50%;transform:translateX(-50%); font-size:13px;letter-spacing:.2em;color:var(--dim2);text-transform:uppercase; font-family:var(--latin)} .scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(var(--dim2),transparent); margin:12px auto 0} #glow1{position:absolute;width:min(1100px,110vw);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 38% 34%,rgba(193,255,114,.16),transparent 58%), radial-gradient(circle at 66% 68%,rgba(50,80,240,.24),transparent 60%); filter:blur(70px);pointer-events:none;z-index:1} /* ---------- ฉาก 2 : กองจอ ---------- */ #a2 .stage{position:relative;height:clamp(280px,44vw,560px);perspective:1700px;margin-top:44px} #a2 .lyr{position:absolute;left:50%;top:0;width:min(760px,82vw);margin-left:min(-380px,-41vw); border-radius:14px;overflow:hidden;background:#0f0f11;border:1px solid rgba(244,240,236,.13); box-shadow:0 34px 76px rgba(0,0,0,.72)} #a2 .lyr img{width:100%;display:block} /* ---------- ฉาก 3 : โมดูล ---------- */ .mods{display:grid;gap:14px;margin-top:40px} .grp{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:clamp(14px,3vw,44px); align-items:center} .grp .lab{text-align:right} .grp .lab .n{font-family:var(--latin);font-size:12px;font-weight:700; letter-spacing:.3em;color:var(--sc)} .grp .lab .t{font-size:clamp(14px,1.5vw,21px);font-weight:500;margin-top:5px;line-height:1.3} .grp .cards{display:flex;gap:10px;flex-wrap:wrap} .mcard{width:clamp(120px,15vw,200px);border-radius:9px;overflow:hidden;display:block; box-shadow:0 10px 26px rgba(0,0,0,.55)} .done{display:inline-flex;align-items:center;gap:12px;padding:13px 26px;border-radius:99px; background:rgba(193,255,114,.09);border:1px solid rgba(193,255,114,.34); font-size:clamp(14px,1.5vw,21px);margin-top:34px} .done i{width:22px;height:22px;border-radius:50%;background:var(--lime);display:grid; place-items:center;color:#0b1405;font:700 13px/1 var(--latin);font-style:normal} /* ---------- ล้อหมุน 13 โมดูล ---------- */ .vpwrap{text-align:center} .stage3d{position:relative;height:clamp(230px,30vw,400px);margin-top:clamp(18px,3vw,40px); perspective:1500px;perspective-origin:50% 46%} .wheel{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform} .vglow{position:absolute;left:50%;top:52%;width:min(560px,70vw);aspect-ratio:2.2; transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(ellipse,rgba(50,80,240,.3),transparent 66%);filter:blur(48px)} .vcard{position:absolute;left:50%;top:50%;width:clamp(190px,25vw,330px); margin-left:clamp(-165px,-12.5vw,-95px);transform-style:preserve-3d; border-radius:14px;overflow:hidden;background:#0e0e10; border:1px solid rgba(244,240,236,.16);box-shadow:0 26px 60px rgba(0,0,0,.7); will-change:transform,opacity,filter} .vcard img{width:100%;display:block} .vcard::after{content:"";position:absolute;inset:0;border-radius:14px; box-shadow:inset 0 0 0 1px var(--c);opacity:0;transition:opacity .3s} .vcard.on::after{opacity:.75} .vcard.on{box-shadow:0 30px 70px rgba(0,0,0,.75),0 0 44px rgba(193,255,114,.16)} .vtag{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 9px; font-size:clamp(10px,1.05vw,13px);font-weight:500;color:var(--cream); background:linear-gradient(0deg,rgba(7,7,7,.94),transparent)} .vinfo{margin-top:clamp(14px,2.2vw,28px);min-height:140px} .vnum{font-family:var(--latin);font-size:11px;font-weight:700;letter-spacing:.28em; color:var(--dim2)} .vinfo h3{font-size:clamp(20px,2.7vw,36px);font-weight:600;margin:8px 0 8px;line-height:1.3} .vinfo p{font-size:clamp(13px,1.5vw,19px);font-weight:300;color:var(--dim); line-height:1.66;max-width:46ch;margin:0 auto} .vdots{display:flex;gap:6px;justify-content:center;margin-top:18px} .vdots i{width:6px;height:6px;border-radius:50%;background:rgba(244,240,236,.2); transition:.3s} .vdots i.on{background:var(--lime);transform:scale(1.6)} @media (max-width:640px){.vinfo{min-height:150px}} /* ---------- วางข้อมูล -> การ์ดลูกค้าผุดขึ้น ---------- */ .pastewrap{margin-top:34px} .pastebox{border-radius:16px;background:rgba(244,240,236,.045); border:1px solid rgba(244,240,236,.12);overflow:hidden;text-align:left} .pbhead{display:flex;align-items:center;gap:7px;padding:11px 16px;font-size:12.5px; color:var(--dim2);background:rgba(244,240,236,.04); border-bottom:1px solid rgba(244,240,236,.08)} .pbhead span{width:9px;height:9px;border-radius:50%;background:rgba(244,240,236,.18)} .pbhead span:first-child{margin-left:0} #pbody{margin:0;padding:14px 16px;font-family:"Inter",ui-monospace,"IBM Plex Sans Thai",monospace; font-size:clamp(10px,1.05vw,13px);line-height:1.85;color:rgba(244,240,236,.62); white-space:pre;overflow:hidden;min-height:132px} #pbody b{color:var(--lime);font-weight:600} .arrowdown{text-align:center;color:rgba(193,255,114,.5);font-size:15px;margin:12px 0 4px} .custgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px} .ccard{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px; background:rgba(244,240,236,.05);border:1px solid rgba(244,240,236,.1);opacity:0} .ccard i{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center; font-style:normal;font-size:14px;font-weight:600;color:#0b1405} .ccard u{text-decoration:none;display:block;min-width:0} .ccard .cn{font-size:clamp(11px,1.15vw,14px);font-weight:500;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .ccard .cp{font-size:clamp(10px,1vw,12px);color:var(--dim2)} .ccard.more{justify-content:center;color:var(--lime);font-weight:600; background:rgba(193,255,114,.08);border-color:rgba(193,255,114,.3)} /* ---------- พีระมิดการเงิน ---------- */ .pyrwrap{margin-top:34px} #pyr{width:100%;height:auto;display:block;overflow:visible} #pyr .pl-n{fill:rgba(244,240,236,.4);font-size:12px;font-weight:700;letter-spacing:.24em; font-family:var(--latin)} #pyr .pl-t{fill:var(--cream);font-size:19px;font-weight:600} #pyr .pl-v{font-size:26px;font-weight:800;font-family:var(--latin)} #pyr .pl-s{fill:rgba(244,240,236,.42);font-size:13px} #pyr .pl-line{stroke:rgba(244,240,236,.24);stroke-width:1;fill:none} /* ---------- หุ่นเดินขึ้นภูเขา ---------- */ .walkwrap{margin:6px 0 10px} #walk{width:100%;height:auto;display:block;overflow:hidden;border-radius:16px; background:linear-gradient(180deg,rgba(20,26,48,.5),rgba(7,7,7,.2))} .walkwrap{border-radius:16px;overflow:hidden} .walkcap{font-size:clamp(11px,1.2vw,15px);color:var(--dim2);text-align:center;margin-top:4px} #walk .ax{stroke:rgba(244,240,236,.12);stroke-width:1} #walk .yr{fill:rgba(244,240,236,.4);font-size:13px;font-family:var(--latin);font-weight:600} #walk .yl{fill:rgba(244,240,236,.28);font-size:12px} #walk .lifecap{fill:var(--mint);font-size:14px;font-weight:600} /* ---------- ไทม์ไลน์กรมธรรม์ ---------- */ .polwrap{margin-top:34px} #pol{width:100%;height:auto;display:block;overflow:visible} #pol .pn{fill:rgba(244,240,236,.72);font-size:12.5px} #pol .pv{fill:var(--lime);font-size:11.5px;font-family:var(--latin);font-weight:700} #pol .ax{fill:rgba(244,240,236,.34);font-size:12px;font-family:var(--latin);font-weight:600} #pol .now{fill:var(--lime);font-size:13px;font-weight:700} /* ---------- สายน้ำกระแสเงินสด ---------- */ .flowwrap{margin-top:34px} #flow{width:100%;height:auto;display:block;overflow:visible} #flow .fn{fill:rgba(244,240,236,.8);font-size:14px;font-weight:500} #flow .fv{font-size:13px;font-family:var(--latin);font-weight:700} /* ---------- อวัยวะ 2 มิติ ---------- */ .orgrid{display:grid;grid-template-columns:minmax(230px,320px) 1fr; gap:clamp(20px,3.6vw,54px);align-items:start;margin-top:36px} .orgpanel{border-radius:20px;padding:24px 22px 28px;background:rgba(244,240,236,.04); border:1px solid rgba(244,240,236,.1);text-align:center} #organ{width:100%;max-width:216px;height:auto;display:block;margin:2px auto 0} .orgname{font-family:var(--latin);font-size:12px;font-weight:700;letter-spacing:.26em; text-transform:uppercase;color:#F292B4;margin-top:14px} .orgdis{font-size:clamp(16px,1.8vw,22px);font-weight:600;margin-top:8px;line-height:1.35} .orgcost{font-family:var(--latin);font-size:clamp(15px,1.7vw,21px);font-weight:700; color:var(--lime);margin-top:10px} .orgsub{font-size:13px;color:var(--dim2);margin-top:8px;line-height:1.55} .dgroup{font-family:var(--latin);font-size:11px;font-weight:700;letter-spacing:.24em; text-transform:uppercase;color:var(--dim2);margin:4px 0 12px} .dgroup:not(:first-child){margin-top:24px} .dchips{display:flex;flex-wrap:wrap;gap:8px} .dchip{padding:9px 15px;border-radius:10px;background:rgba(244,240,236,.05); border:1px solid rgba(244,240,236,.1);color:var(--cream);font-family:inherit; font-size:clamp(12px,1.25vw,15px);cursor:pointer;transition:.2s;line-height:1.3} .dchip:hover{background:rgba(244,240,236,.1);transform:translateY(-2px)} .dchip[aria-selected=true]{background:rgba(232,112,155,.16);border-color:#E3709B; box-shadow:0 0 0 1px #E3709B inset} .dchip:focus-visible{outline:2px solid var(--lime);outline-offset:3px} @media (max-width:900px){.orgrid{grid-template-columns:1fr}} /* ---------- ไล่ดูโรคอัตโนมัติ ---------- */ #a4b{min-height:100vh;padding-top:0;padding-bottom:0} .didx{font-family:var(--latin);font-size:11px;font-weight:700;letter-spacing:.2em; color:var(--dim2);margin-bottom:6px} .dbarwrap{height:3px;border-radius:99px;background:rgba(244,240,236,.1);margin-bottom:20px; overflow:hidden} .dbar{display:block;height:100%;border-radius:99px;transform:scaleX(.07);transform-origin:left; background:linear-gradient(90deg,#E3709B,var(--lime));transition:transform .25s} .dchip{transition:.22s} /* ---------- NBIQ Motion Layer ---------- */ .ln{display:block;overflow:hidden;padding-bottom:.06em} .ln>i{display:block;font-style:normal;will-change:transform,opacity} .act{will-change:opacity} @media (prefers-reduced-motion:reduce){ .ln>i{transform:none!important;opacity:1!important} .act{opacity:1!important} } /* ---------- Crossfade หน้าจอในกองจอ ---------- */ .xwrap{position:relative;width:100%;aspect-ratio:1400/914;overflow:hidden;border-radius:inherit} .xwrap img.xf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;will-change:opacity,transform} .xwrap img.xf.on{opacity:1} .xlab{display:block;text-align:center;margin-top:clamp(16px,2.4vw,30px); font-size:clamp(12px,1.35vw,17px);font-weight:500;color:rgba(244,240,236,.82); letter-spacing:.01em;pointer-events:none} .xlab::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--lime);margin-right:9px;vertical-align:middle} /* ---------- แถบบน + ปุ่มสมัคร ---------- */ #topbar{position:fixed;top:0;left:0;right:0;z-index:120;display:flex; align-items:center;justify-content:space-between; padding:14px clamp(16px,3vw,38px); background:rgba(7,7,7,0);backdrop-filter:blur(0px); transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease; border-bottom:1px solid transparent} #topbar.solid{background:rgba(7,7,7,.72);backdrop-filter:blur(16px); border-bottom-color:rgba(244,240,236,.09)} .tb-logo{display:flex;align-items:center;gap:9px;color:var(--cream); text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.04em} .tb-act{display:flex;align-items:center;gap:clamp(8px,1.6vw,18px)} .tb-login{color:rgba(244,240,236,.66);text-decoration:none; font-size:clamp(12px,1.3vw,15px);transition:color .25s} .tb-login:hover{color:var(--cream)} .tb-cta{display:inline-block;padding:9px 20px;border-radius:99px; background:var(--lime);color:#12210a;font-weight:600;text-decoration:none; font-size:clamp(12px,1.3vw,15px);transition:transform .25s, box-shadow .25s; opacity:0;transform:translateY(-6px);pointer-events:none} #topbar.solid .tb-cta{opacity:1;transform:none;pointer-events:auto} .tb-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(193,255,114,.3)} .tb-cta:focus-visible,.tb-login:focus-visible,.tb-logo:focus-visible{ outline:2px solid var(--lime);outline-offset:3px;border-radius:6px} /* ---------- ปุ่มกลางหน้า ---------- */ .midcta{text-align:center;margin-top:clamp(34px,5vw,64px);display:grid; justify-items:center;gap:14px} .midcta p{font-size:clamp(15px,1.7vw,22px);font-weight:300;color:var(--dim)} .midnote{font-size:clamp(11px,1.2vw,14px);color:var(--dim2)} .ctasub{margin-top:16px;font-size:clamp(12px,1.3vw,16px);color:var(--dim2)} .ctasub a{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(193,255,114,.35)} @media (max-width:520px){ .tb-login{display:none} #topbar{padding:11px 14px} } /* ---------- บอร์ด CRM ---------- */ .crmwrap{margin-top:clamp(24px,3.4vw,44px)} #crm{width:100%;height:auto;display:block;overflow:visible} #crm .ch{font-size:15px;font-weight:600;fill:var(--cream)} #crm .cn{font-size:12px;font-family:var(--latin);font-weight:700} #crm .cname{font-size:12.5px;fill:rgba(244,240,236,.86)} #crm .cval{font-size:11.5px;font-family:var(--latin);font-weight:600; fill:rgba(244,240,236,.42)} #crm .cnote{font-size:12.5px;fill:var(--dim2)} /* ---------- เครดิตผู้สร้าง ---------- */ .creds{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,26px); margin:clamp(26px,3.6vw,44px) auto clamp(20px,2.6vw,32px);max-width:1000px;text-align:left} .cred{padding:clamp(18px,2.2vw,26px);border-radius:18px; background:rgba(244,240,236,.045);border:1px solid rgba(244,240,236,.1)} .cred b{display:block;font-family:var(--latin);font-size:clamp(22px,2.6vw,34px); font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--lime)} .cred b i{display:block;font-style:normal;font-size:.62em;color:rgba(193,255,114,.72)} .cred u{display:block;text-decoration:none;font-size:clamp(12px,1.25vw,15px); font-weight:600;color:var(--cream);margin:12px 0 7px} .cred p{font-size:clamp(12px,1.25vw,15px);font-weight:300;color:var(--dim);line-height:1.62} @media (max-width:820px){.creds{grid-template-columns:1fr;max-width:520px}} /* ---------- ตัวเลข ---------- */ .stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .stat{flex:1 1 150px;border-radius:16px;padding:20px 22px;background:rgba(244,240,236,.05); border:1px solid rgba(244,240,236,.1)} .stat u{display:block;font-size:clamp(12px,1.2vw,17px);color:var(--dim);text-decoration:none} .stat b{display:block;font-family:var(--latin);font-size:clamp(26px,3.4vw,50px); font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:6px} .stat.hi b{color:var(--lime)} .stat i{font-family:var(--brand);font-size:clamp(12px,1.2vw,17px);font-weight:400; color:var(--dim);font-style:normal;margin-left:7px} /* ---------- ผังเมืองสามมิติ ---------- */ .cityhint{font-size:clamp(12px,1.3vw,17px);color:var(--dim2);margin-top:46px; letter-spacing:.02em;text-align:center} .citywrap{position:relative;margin-top:6px} #city{width:100%;height:auto;display:block;overflow:visible} #city .fT{transition:none} #city text{font-family:var(--brand)} .cl-line{stroke:rgba(193,255,114,.55);stroke-width:1.2;fill:none} .cl-dot{fill:var(--lime)} .cl-box{fill:rgba(14,14,16,.92);stroke:rgba(193,255,114,.4);stroke-width:1} .cl-name{fill:var(--cream);font-size:15px;font-weight:500} .cl-val{fill:var(--lime);font-size:17px;font-weight:700;font-family:var(--latin)} #city .lm-t{fill:rgba(244,240,236,.62);font-size:13px;font-weight:500; paint-order:stroke;stroke:rgba(7,7,7,.85);stroke-width:3.5px;stroke-linejoin:round} .cl-sub{fill:rgba(244,240,236,.42);font-size:11.5px} .tablecard{position:absolute;left:0;right:0;bottom:0;opacity:0;pointer-events:none} .tablecard img{width:100%;border-radius:12px;display:block; border:1px solid rgba(244,240,236,.14);box-shadow:0 30px 74px rgba(0,0,0,.8)} .tcap{font-size:clamp(12px,1.3vw,17px);color:var(--dim);text-align:center;margin-bottom:14px} .dis{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:clamp(20px,3.4vw,48px); align-items:center;margin-top:clamp(40px,7vw,90px)} .dis h3{font-size:clamp(20px,2.6vw,36px);font-weight:600;margin:10px 0 12px} .dis p{font-size:clamp(14px,1.5vw,19px);font-weight:300;color:var(--dim);line-height:1.7} .dis ul{list-style:none;margin-top:20px;display:grid;gap:12px} .dis li{padding:12px 16px;border-radius:11px;background:rgba(244,240,236,.045); border:1px solid rgba(244,240,236,.09)} .dis li b{display:block;font-size:clamp(13px,1.4vw,17px);font-weight:500} .dis li span{display:block;font-size:clamp(12px,1.25vw,15px);color:#E9A7CB;margin-top:3px; font-family:var(--latin);font-weight:600} @media (max-width:760px){ .dis{grid-template-columns:1fr} .cityhint{margin-top:34px} } /* ---------- ฉาก 5 : โยนไฟล์ ---------- */ #a5 .board{position:relative;border-radius:22px;padding:clamp(20px,3vw,34px); background:rgba(244,240,236,.04);border:1.5px dashed rgba(244,240,236,.2);margin-top:38px} #a5 .board.hit{border-style:solid;border-color:rgba(193,255,114,.5)} #a5 .file{position:absolute;left:50%;top:-56px;transform:translateX(-50%);z-index:5; display:flex;align-items:center;gap:13px;padding:12px 20px 12px 12px;border-radius:15px; background:#141416;border:1px solid rgba(244,240,236,.2); box-shadow:0 24px 54px rgba(0,0,0,.75);white-space:nowrap} #a5 .file .th{width:40px;height:50px;border-radius:7px;overflow:hidden;background:#fff;flex:none} #a5 .file .th img{width:100%;height:100%;object-fit:cover;object-position:top} #a5 .file .fn{font-size:clamp(13px,1.3vw,19px);font-weight:500} #a5 .file .fs{font-family:var(--latin);font-size:clamp(11px,1.1vw,15px);color:var(--dim)} #a5 .wave{position:absolute;left:50%;top:38%;width:220px;height:220px;margin:-110px 0 0 -110px; border-radius:50%;border:3px solid var(--lime);opacity:0;pointer-events:none} #radar{width:min(360px,74vw);height:auto;display:block;margin:26px auto 0;overflow:visible} #radar .ring{fill:none;stroke:rgba(244,240,236,.13);stroke-width:1} #radar .ax{stroke:rgba(244,240,236,.1);stroke-width:1} #radar .lb{font-size:9px;fill:rgba(244,240,236,.45);font-family:var(--brand)} #radar .shape{fill:rgba(193,255,114,.2);stroke:var(--lime);stroke-width:2.4;stroke-linejoin:round} #radar .nd{fill:var(--lime)} /* ---------- ฉาก 6 : จำลองสด ---------- */ .simbox{margin-top:38px} .track{position:relative;height:11px;border-radius:99px;background:rgba(244,240,236,.12); margin:38px 0 12px} .track .fill{position:absolute;inset:0 auto 0 0;width:60%;border-radius:99px;transform-origin:left; background:linear-gradient(90deg,rgba(123,227,164,.4),var(--mint))} .track .knob{position:absolute;top:50%;left:60%;width:56px;height:56px;margin:-28px 0 0 -28px; border-radius:50%;background:#111713;border:2.5px solid var(--mint);display:grid; place-items:center;font:700 20px/1 var(--latin);color:var(--mint); box-shadow:0 0 30px rgba(123,227,164,.4)} .track em{position:absolute;top:24px;font-size:14px;color:var(--dim);font-style:normal} .track em.a{left:0}.track em.b{right:0} .rdy{display:flex;justify-content:space-between;align-items:baseline; font-size:clamp(14px,1.6vw,23px);font-weight:300;margin:26px 0 10px} .rdy b{font-family:var(--latin);font-size:clamp(24px,3vw,42px);font-weight:700;color:var(--mint)} .rbar{height:14px;border-radius:99px;background:rgba(244,240,236,.09);overflow:hidden} .rbar .fill{display:block;height:100%;border-radius:99px;transform-origin:left;transform:scaleX(0); background:linear-gradient(90deg,#3E9E68,var(--mint));box-shadow:0 0 18px rgba(123,227,164,.45)} /* ---------- ฉาก 8 : รายงาน ---------- */ #a8 .fan{position:relative;height:clamp(250px,32vw,450px);margin-top:clamp(26px,3.4vw,46px); perspective:1700px;display:flex;align-items:center;justify-content:center} #a8 .pg{position:absolute;left:50%;top:50%;width:clamp(140px,19vw,258px); margin-left:clamp(-129px,-9.5vw,-70px); will-change:transform,opacity;cursor:zoom-in;outline:none; pointer-events:auto} #a8 .pgi{display:block;pointer-events:none;border-radius:10px;overflow:hidden;background:#fff; border:1px solid rgba(244,240,236,.18);box-shadow:0 22px 52px rgba(0,0,0,.62); transform-origin:50% 55%; transition:transform .5s cubic-bezier(.2,.85,.25,1), box-shadow .5s ease, opacity .4s ease, border-color .4s ease} #a8 .pgi img{width:100%;display:block} #a8 .pg.back .pgi{opacity:.55;filter:saturate(.75) brightness(.9)} #a8 .pg[data-p="5"] .pgi{box-shadow:0 30px 70px rgba(0,0,0,.75),0 0 40px rgba(193,255,114,.14); border-color:rgba(193,255,114,.34)} @media (hover:hover) and (pointer:fine){ /* ชี้ที่ใบไหน ใบนั้นขยายออกมา ใบอื่นถอยไปเป็นฉากหลัง */ #a8 .fan.act .pgi,#a8 .fan:hover .pgi{opacity:.42;filter:saturate(.7)} #a8 .pg.hov,#a8 .pg:hover,#a8 .pg:focus-visible{z-index:80!important} #a8 .pg.hov .pgi,#a8 .pg:hover .pgi,#a8 .pg:focus-visible .pgi{ opacity:1;filter:none;transform:scale(1.5) translateY(-4%); box-shadow:0 44px 96px rgba(0,0,0,.82),0 0 46px rgba(193,255,114,.2); border-color:rgba(193,255,114,.42)} } #a8 .pg:focus-visible .pgi{outline:2px solid var(--lime);outline-offset:3px} #a8 .fanhint{text-align:center;font-size:clamp(11px,1.2vw,14px);color:var(--dim2); margin-top:clamp(10px,1.4vw,18px)} @media (hover:none){#a8 .fanhint{display:none}} #a8 .pg img{width:100%;display:block} .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;justify-content:center} .act-pill{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:99px; font-size:clamp(13px,1.4vw,20px);background:rgba(244,240,236,.06); border:1px solid rgba(244,240,236,.16)} .act-pill.key{background:var(--lime);color:#12210a;border-color:transparent;font-weight:500} .act-pill s{width:8px;height:8px;border-radius:50%;background:var(--lime);text-decoration:none} .act-pill.key s{background:#12210a} /* ---------- ฉาก 9 : ผู้สร้าง ---------- */ #a9{text-align:center} #a9 .halo{position:absolute;width:min(900px,110vw);aspect-ratio:16/9;border-radius:50%; background:radial-gradient(circle,rgba(193,255,114,.13),transparent 66%); filter:blur(64px);pointer-events:none} #a9 .badge{display:inline-flex;align-items:center;gap:12px;padding:13px 28px;border-radius:99px; background:rgba(193,255,114,.09);border:1px solid rgba(193,255,114,.34); font-size:clamp(14px,1.5vw,22px);margin-top:30px} #a9 .badge s{width:9px;height:9px;border-radius:50%;background:var(--lime);text-decoration:none} .rule{width:70px;height:2px;background:rgba(244,240,236,.22);margin:26px auto;transform:scaleX(0)} /* ---------- ปิดท้าย ---------- */ #a10{text-align:center} #a10 .glow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 55% at 22% 14%,rgba(193,255,114,.2),transparent 56%), radial-gradient(76% 58% at 80% 86%,rgba(50,80,240,.3),transparent 58%); filter:blur(56px)} #mark{width:clamp(160px,18vw,280px);height:auto;margin:0 auto 30px;display:block} #a10 .tag{font-size:clamp(26px,4vw,56px);font-weight:500;letter-spacing:-.02em;line-height:1.3} #a10 .cta{display:inline-block;margin-top:34px;padding:17px 42px;border-radius:99px; background:var(--lime);color:#12210a;font-size:clamp(15px,1.7vw,24px);font-weight:600; text-decoration:none;box-shadow:0 18px 46px rgba(193,255,114,.26)} #a10 .cta:focus-visible{outline:3px solid var(--cream);outline-offset:4px} #a10 .pb{font-size:clamp(12px,1.2vw,17px);font-weight:300;color:var(--dim2);margin-top:26px} @media (max-width:720px){ .grp{grid-template-columns:1fr} .grp .lab{text-align:left} #nav{display:none} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }