body{font-family:'Anuphan',system-ui,sans-serif}
main strong{color:#fff}
.prose p{margin:1em 0;line-height:1.85}.prose h2{color:#fff;font-size:1.45em;margin:1.4em 0 .5em;font-weight:700}
.prose a{color:#e64d67}.prose a:hover{text-decoration:underline}.prose ul,.prose ol{margin:1em 0;padding-left:1.5em}
.prose ul{list-style:disc}.prose ol{list-style:decimal}.prose li{margin:.4em 0}
@keyframes ewmq{to{transform:translateX(-50%)}}
.ew-mq{animation:ewmq 35s linear infinite}
.ew-mq:hover{animation-play-state:paused}
/* ---- reveal on scroll (ซ่อนเฉพาะเมื่อ JS ทำงาน) ---- */
.ewj [data-ewxhbg]{opacity:0;transform:translateY(22px) rotate(-1.2deg);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.2,1)}
.ewj [data-ewxhbg].in{opacity:1;transform:none}
.ewj main .ewc-grid>[data-ewxhbg].in:hover{transform:translateY(-6px)}
main .ewc-grid>article{transition:transform .25s ease,border-color .25s,box-shadow .25s}
main .ewc-grid>article:hover{box-shadow:0 18px 40px -20px #e64d67}
/* ---- header / progress / back-to-top ---- */
header{transition:box-shadow .3s}
header.ew-sc{box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
#ew-bar{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#e64d67,#fff);z-index:80;pointer-events:none}
#ew-top{position:fixed;right:16px;bottom:96px;z-index:55;width:44px;height:44px;border-radius:999px;background:#e64d67;color:#fff;display:grid;place-items:center;opacity:0;transform:translateY(16px) scale(.8);transition:opacity .3s,transform .3s;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.45)}
#ew-top.on{opacity:1;transform:none;pointer-events:auto}
@media(min-width:768px){#ew-top{bottom:24px}}
/* ---- กดปุ่ม: ยุบ + ripple ---- */
a,button{-webkit-tap-highlight-color:transparent}
button{transition:transform .15s ease,background-color .2s,border-color .2s}
button:active{transform:scale(.95)}
.ew-rip{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.4);animation:ewrip .6s ease-out;pointer-events:none}
@keyframes ewrip{to{transform:scale(4);opacity:0}}
/* ---- ปุ่ม 3D: ขอบหนาด้านล่าง + ไฮไลต์ด้านบน + เงาเรืองสีแบรนด์ ---- */
.ew-b3{--e:6px;position:relative;transform:translateY(0);text-shadow:0 1px 0 rgba(0,0,0,.28);
transition:transform .12s ease,box-shadow .12s ease,filter .2s ease,border-color .2s}
.ew-b3.ewc-text-sm{--e:4px}
.ew-b3p{background-color:#e64d67;background-image:linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.06) 48%,rgba(0,0,0,0) 52%),linear-gradient(180deg,#e64d67,#b61a40);
box-shadow:0 var(--e) 0 #640e23,0 calc(var(--e)*2 + 4px) 26px -6px rgba(230,77,103,.7),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.18)}
.ew-b3s{background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03));border-color:rgba(230,77,103,.18)!important;
box-shadow:0 var(--e) 0 rgba(0,0,0,.55),0 calc(var(--e)*2 + 4px) 22px -8px rgba(230,77,103,.7),inset 0 1px 0 rgba(255,255,255,.28)}
.ew-b3w{background-image:linear-gradient(180deg,#fff 0%,#f1f5f9 50%,#e2e8f0 100%);
box-shadow:0 var(--e) 0 rgba(15,23,42,.45),0 calc(var(--e)*2 + 4px) 26px -6px rgba(255,255,255,.45),inset 0 1px 0 #fff;text-shadow:none}
.ew-b3:hover{transform:translateY(-2px);filter:brightness(1.08) saturate(1.1)}
.ew-b3p:hover{box-shadow:0 calc(var(--e) + 2px) 0 #640e23,0 calc(var(--e)*3 + 6px) 34px -6px rgba(230,77,103,.7),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.18)}
.ew-b3s:hover{border-color:#e64d67!important;box-shadow:0 calc(var(--e) + 2px) 0 rgba(0,0,0,.55),0 calc(var(--e)*3 + 6px) 30px -8px rgba(230,77,103,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.ew-b3w:hover{box-shadow:0 calc(var(--e) + 2px) 0 rgba(15,23,42,.45),0 calc(var(--e)*3 + 6px) 34px -6px rgba(255,255,255,.55),inset 0 1px 0 #fff}
.ew-b3:active{transform:translateY(calc(var(--e) - 1px));filter:brightness(.97);transition-duration:.05s}
.ew-b3p:active{box-shadow:0 1px 0 #640e23,0 3px 10px -2px rgba(230,77,103,.7),inset 0 2px 4px rgba(0,0,0,.25)}
.ew-b3s:active{box-shadow:0 1px 0 rgba(0,0,0,.55),0 3px 10px -4px rgba(230,77,103,.7),inset 0 2px 4px rgba(0,0,0,.3)}
.ew-b3w:active{box-shadow:0 1px 0 rgba(15,23,42,.45),inset 0 2px 4px rgba(0,0,0,.15)}
/* รายการเลือกเว็บใน modal */
.ew-b3o{background-image:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
box-shadow:0 5px 0 rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .12s,box-shadow .12s,border-color .2s,background-color .2s}
.ew-b3o:hover,.ew-b3o:focus-visible{transform:translateY(-2px);border-color:#e64d67!important;background-color:rgba(230,77,103,.18);
box-shadow:0 7px 0 #640e23,0 14px 30px -8px rgba(230,77,103,.7),inset 0 1px 0 rgba(255,255,255,.18);outline:none}
.ew-b3o:active{transform:translateY(4px);box-shadow:0 1px 0 #640e23,inset 0 2px 4px rgba(0,0,0,.3)}
.ew-b3o>span:first-child{box-shadow:0 3px 0 #640e23,0 6px 16px -4px rgba(230,77,103,.7),inset 0 1px 0 rgba(255,255,255,.4)}
/* ปุ่มกลางแถบล่าง + ปุ่มขึ้นบนสุด */
[data-ewnnsk]>span:first-child{box-shadow:0 5px 0 #640e23,0 12px 24px -4px rgba(230,77,103,.7),inset 0 2px 0 rgba(255,255,255,.4);transition:transform .1s,box-shadow .1s}
[data-ewnnsk]:active{transform:none}
[data-ewnnsk]:active>span:first-child{transform:translateY(4px);box-shadow:0 1px 0 #640e23,0 4px 10px -2px rgba(230,77,103,.7),inset 0 2px 0 rgba(255,255,255,.4)}
#ew-top{box-shadow:0 4px 0 #640e23,0 10px 24px -4px rgba(230,77,103,.7),inset 0 1px 0 rgba(255,255,255,.4)}
#ew-top:active{transform:translateY(3px);box-shadow:0 1px 0 #640e23}
/* ---- ปุ่มหลักมีแสงวิ่ง ---- */
.ew-shine{position:relative;overflow:hidden}
.ew-shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:ewsh 3.2s ease-in-out infinite}
@keyframes ewsh{0%,60%{left:-60%}100%{left:130%}}
/* ---- ปุ่มกลางแถบล่างเต้นเป็นจังหวะ ---- */
.ew-pulse{position:relative}
.ew-pulse::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#e64d67;animation:ewpl 2s ease-out infinite;z-index:-1}
@keyframes ewpl{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
/* ---- modal เด้งเข้า + รายการทยอยมา ---- */
#ewkqpbv:not(.ewc-hidden)>.ewc-absolute{animation:ewfd .25s ease}
#ewkqpbv:not(.ewc-hidden) [data-ewqkdg]{animation:ewpop .42s cubic-bezier(.2,.9,.3,1.25)}
#ewkqpbv:not(.ewc-hidden) [data-ewqkdg] .ewc-space-y-3>a{animation:ewin .45s both}
#ewkqpbv:not(.ewc-hidden) [data-ewqkdg] .ewc-space-y-3>a:nth-child(2){animation-delay:.08s}
#ewkqpbv:not(.ewc-hidden) [data-ewqkdg] .ewc-space-y-3>a:nth-child(3){animation-delay:.16s}
@keyframes ewfd{from{opacity:0}}
@keyframes ewpop{from{opacity:0;transform:translateY(28px) scale(.9)}}
@keyframes ewin{from{opacity:0;transform:translateX(-18px)}}
/* ---- ตารางผู้เล่น ---- */
.ew-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:ewdt 1.6s infinite}
@keyframes ewdt{70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.ew-bd{display:inline-block;padding:3px 9px;border-radius:6px;font-size:12px;border:1px solid;white-space:nowrap;transition:background-color .3s,color .3s}
.ew-bd-ok{background:rgba(34,197,94,.15);color:#4ade80;border-color:rgba(34,197,94,.35)}
.ew-bd-busy{background:rgba(234,179,8,.15);color:#facc15;border-color:rgba(234,179,8,.35)}
.ew-bd-hot{background:rgba(239,68,68,.18);color:#f87171;border-color:rgba(239,68,68,.4);animation:ewhp 1.4s ease-in-out infinite}
@keyframes ewhp{50%{opacity:.6}}
[data-ewxhgw].ew-up{color:#4ade80!important}[data-ewxhgw].ew-dn{color:#f87171!important}
[data-ewxhgw]{transition:color .6s}
/* ---- ธนาคาร ---- */
.ew-bank{transition:transform .25s ease,box-shadow .25s ease,border-color .25s,background-color .25s;cursor:default}
.ew-bank:hover{transform:translateY(-6px);border-color:var(--bc);background-color:rgba(255,255,255,.07);box-shadow:0 18px 34px -14px var(--bc)}
.ew-bl{box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.3);transition:box-shadow .25s,transform .25s}
.ew-bank:hover .ew-bl{transform:scale(1.08);box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 26px var(--bc),inset 0 2px 0 rgba(255,255,255,.35)}
/* ---- ขั้นตอนถอนเงิน: เส้นเชื่อมเคลื่อนไหว ---- */
.ew-line{position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:rgba(255,255,255,.1);overflow:hidden;border-radius:2px}
.ew-line::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:linear-gradient(180deg,transparent,#e64d67,transparent);animation:ewlv 2.4s linear infinite}
@keyframes ewlv{from{transform:translateY(-100%)}to{transform:translateY(250%)}}
@media(min-width:768px){.ew-line{left:12.5%;right:12.5%;top:27px;bottom:auto;width:auto;height:2px}
.ew-line::after{width:30%;height:100%;background:linear-gradient(90deg,transparent,#e64d67,transparent);animation-name:ewlh}}
@keyframes ewlh{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.ew-si{box-shadow:0 5px 0 #640e23,0 10px 22px -6px rgba(230,77,103,.7),inset 0 2px 0 rgba(255,255,255,.35);transition:transform .35s cubic-bezier(.2,.9,.3,1.4),box-shadow .35s}
.ew-step.on .ew-si{transform:scale(1.12);box-shadow:0 5px 0 #640e23,0 0 0 6px rgba(230,77,103,.18),0 0 30px rgba(230,77,103,.7),inset 0 2px 0 rgba(255,255,255,.4)}
.ew-step.on h3{color:#e64d67}
.ew-step h3{transition:color .35s}
@media (prefers-reduced-motion:reduce){.ew-line::after{animation-duration:4s}}
/* ---- FAQ เปิดแล้วไฮไลต์ ---- */
details{transition:border-color .25s,background-color .25s}
details[open]{border-color:#e64d67;background-color:rgba(255,255,255,.07)}
details[open]>p{animation:ewdn .35s ease}
@keyframes ewdn{from{opacity:0;transform:translateY(-6px)}}
summary{list-style:none;position:relative;padding-right:28px}summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.3em;color:#e64d67;transition:transform .25s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
/* ผู้ใช้ที่ตั้งลดการเคลื่อนไหว: เหลือแค่จางเข้า ไม่มีเลื่อน/หมุน/วนซ้ำ */
@media (prefers-reduced-motion:reduce){.ewj [data-ewxhbg]{transform:none;transition:opacity .5s ease}
.ew-shine::after,.ew-pulse::before{animation:none}.ewj main .ewc-grid>[data-ewxhbg].in:hover{transform:none}}

/* ---- ชุดที่ 2: redesign-existing-projects ---- */
:root{--ez:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h1,h2,h3{text-wrap:balance}
main p,main li{text-wrap:pretty;line-height:1.75}
.ewj [data-ewxhbg]{transition:opacity .7s var(--ez),transform .7s var(--ez)}
main .ewc-grid>article{transition:transform .5s var(--ez),border-color .3s var(--ez),box-shadow .3s var(--ez)}
header{transition:box-shadow .3s var(--ez),background-color .3s var(--ez)}
button,a{transition-timing-function:var(--ez)}
button{transition:transform .3s var(--ez),background-color .3s var(--ez),border-color .3s var(--ez)}
.ew-b3{transition:transform .3s var(--ez),box-shadow .3s var(--ez),filter .3s var(--ez),border-color .3s var(--ez);text-shadow:none}
.ew-b3p{background-image:none}
.ew-b3s{background-image:none;background-color:rgba(255,255,255,.06)}
.ew-b3w{background-image:none;background-color:#fff}
.ew-b3o{background-image:none;background-color:rgba(255,255,255,.05)}
.ew-shine::after{display:none}
#ew-top{transition:opacity .3s var(--ez),transform .5s var(--ez)}
#ewkqpbv:not(.ewc-hidden)>.ewc-absolute{animation-timing-function:var(--ez);animation-duration:.3s}
#ewkqpbv:not(.ewc-hidden) [data-ewqkdg]{animation-timing-function:var(--ez);animation-duration:.5s}
:focus-visible{outline:2px solid #e64d67;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ewj [data-ewxhbg]{transform:none!important;transition:opacity .3s linear}.ew-pulse::before,.ew-dot{animation:none}}

.ew-b3p{background-color:#ca445b}
.ewc-bg-brand{background-color:#ca445b}
.ewc-text-brand,.ewc-hover\:text-brand:hover{color:#e64d67}