body{font-family:'Noto Sans Thai',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:#9069e9}.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 mwmq{to{transform:translateX(-50%)}}
.mw-mq{animation:mwmq 45s linear infinite}
.mw-mq:hover{animation-play-state:paused}
/* ---- reveal on scroll (ซ่อนเฉพาะเมื่อ JS ทำงาน) ---- */
.mwj [data-mwqwaz]{opacity:0;transform:translateX(-36px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.2,1)}
.mwj [data-mwqwaz].in{opacity:1;transform:none}
.mwj main .mwu-grid>[data-mwqwaz].in:hover{transform:translateY(-6px)}
main .mwu-grid>article{transition:transform .25s ease,border-color .25s,box-shadow .25s}
main .mwu-grid>article:hover{box-shadow:0 18px 40px -20px #9069e9}
/* ---- header / progress / back-to-top ---- */
header{transition:box-shadow .3s}
header.mw-sc{box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
#mw-bar{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#9069e9,#fff);z-index:80;pointer-events:none}
#mw-top{position:fixed;right:16px;bottom:96px;z-index:55;width:44px;height:44px;border-radius:999px;background:#9069e9;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)}
#mw-top.on{opacity:1;transform:none;pointer-events:auto}
@media(min-width:768px){#mw-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)}
.mw-rip{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.4);animation:mwrip .6s ease-out;pointer-events:none}
@keyframes mwrip{to{transform:scale(4);opacity:0}}
/* ---- ปุ่ม 3D: ขอบหนาด้านล่าง + ไฮไลต์ด้านบน + เงาเรืองสีแบรนด์ ---- */
.mw-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}
.mw-b3.mwu-text-sm{--e:4px}
.mw-b3p{background-color:#9069e9;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,#9069e9,#6d28d9);
box-shadow:0 var(--e) 0 #3b1677,0 calc(var(--e)*2 + 4px) 26px -6px rgba(144,105,233,.7),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.18)}
.mw-b3s{background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03));border-color:rgba(144,105,233,.18)!important;
box-shadow:0 var(--e) 0 rgba(0,0,0,.55),0 calc(var(--e)*2 + 4px) 22px -8px rgba(144,105,233,.7),inset 0 1px 0 rgba(255,255,255,.28)}
.mw-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}
.mw-b3:hover{transform:translateY(-2px);filter:brightness(1.08) saturate(1.1)}
.mw-b3p:hover{box-shadow:0 calc(var(--e) + 2px) 0 #3b1677,0 calc(var(--e)*3 + 6px) 34px -6px rgba(144,105,233,.7),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.18)}
.mw-b3s:hover{border-color:#9069e9!important;box-shadow:0 calc(var(--e) + 2px) 0 rgba(0,0,0,.55),0 calc(var(--e)*3 + 6px) 30px -8px rgba(144,105,233,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.mw-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}
.mw-b3:active{transform:translateY(calc(var(--e) - 1px));filter:brightness(.97);transition-duration:.05s}
.mw-b3p:active{box-shadow:0 1px 0 #3b1677,0 3px 10px -2px rgba(144,105,233,.7),inset 0 2px 4px rgba(0,0,0,.25)}
.mw-b3s:active{box-shadow:0 1px 0 rgba(0,0,0,.55),0 3px 10px -4px rgba(144,105,233,.7),inset 0 2px 4px rgba(0,0,0,.3)}
.mw-b3w:active{box-shadow:0 1px 0 rgba(15,23,42,.45),inset 0 2px 4px rgba(0,0,0,.15)}
/* รายการเลือกเว็บใน modal */
.mw-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}
.mw-b3o:hover,.mw-b3o:focus-visible{transform:translateY(-2px);border-color:#9069e9!important;background-color:rgba(144,105,233,.18);
box-shadow:0 7px 0 #3b1677,0 14px 30px -8px rgba(144,105,233,.7),inset 0 1px 0 rgba(255,255,255,.18);outline:none}
.mw-b3o:active{transform:translateY(4px);box-shadow:0 1px 0 #3b1677,inset 0 2px 4px rgba(0,0,0,.3)}
.mw-b3o>span:first-child{box-shadow:0 3px 0 #3b1677,0 6px 16px -4px rgba(144,105,233,.7),inset 0 1px 0 rgba(255,255,255,.4)}
/* ปุ่มกลางแถบล่าง + ปุ่มขึ้นบนสุด */
[data-mwpwbk]>span:first-child{box-shadow:0 5px 0 #3b1677,0 12px 24px -4px rgba(144,105,233,.7),inset 0 2px 0 rgba(255,255,255,.4);transition:transform .1s,box-shadow .1s}
[data-mwpwbk]:active{transform:none}
[data-mwpwbk]:active>span:first-child{transform:translateY(4px);box-shadow:0 1px 0 #3b1677,0 4px 10px -2px rgba(144,105,233,.7),inset 0 2px 0 rgba(255,255,255,.4)}
#mw-top{box-shadow:0 4px 0 #3b1677,0 10px 24px -4px rgba(144,105,233,.7),inset 0 1px 0 rgba(255,255,255,.4)}
#mw-top:active{transform:translateY(3px);box-shadow:0 1px 0 #3b1677}
/* ---- ปุ่มหลักมีแสงวิ่ง ---- */
.mw-shine{position:relative;overflow:hidden}
.mw-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:mwsh 3.2s ease-in-out infinite}
@keyframes mwsh{0%,60%{left:-60%}100%{left:130%}}
/* ---- ปุ่มกลางแถบล่างเต้นเป็นจังหวะ ---- */
.mw-pulse{position:relative}
.mw-pulse::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#9069e9;animation:mwpl 2s ease-out infinite;z-index:-1}
@keyframes mwpl{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
/* ---- modal เด้งเข้า + รายการทยอยมา ---- */
#mwdwqrw:not(.mwu-hidden)>.mwu-absolute{animation:mwfd .25s ease}
#mwdwqrw:not(.mwu-hidden) [data-mwnzmz]{animation:mwpop .42s cubic-bezier(.2,.9,.3,1.25)}
#mwdwqrw:not(.mwu-hidden) [data-mwnzmz] .mwu-space-y-3>a{animation:mwin .45s both}
#mwdwqrw:not(.mwu-hidden) [data-mwnzmz] .mwu-space-y-3>a:nth-child(2){animation-delay:.08s}
#mwdwqrw:not(.mwu-hidden) [data-mwnzmz] .mwu-space-y-3>a:nth-child(3){animation-delay:.16s}
@keyframes mwfd{from{opacity:0}}
@keyframes mwpop{from{opacity:0;transform:translateY(28px) scale(.9)}}
@keyframes mwin{from{opacity:0;transform:translateX(-18px)}}
/* ---- ตารางผู้เล่น ---- */
.mw-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:mwdt 1.6s infinite}
@keyframes mwdt{70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.mw-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}
.mw-bd-ok{background:rgba(34,197,94,.15);color:#4ade80;border-color:rgba(34,197,94,.35)}
.mw-bd-busy{background:rgba(234,179,8,.15);color:#facc15;border-color:rgba(234,179,8,.35)}
.mw-bd-hot{background:rgba(239,68,68,.18);color:#f87171;border-color:rgba(239,68,68,.4);animation:mwhp 1.4s ease-in-out infinite}
@keyframes mwhp{50%{opacity:.6}}
[data-mwxdse].mw-up{color:#4ade80!important}[data-mwxdse].mw-dn{color:#f87171!important}
[data-mwxdse]{transition:color .6s}
/* ---- ธนาคาร ---- */
.mw-bank{transition:transform .25s ease,box-shadow .25s ease,border-color .25s,background-color .25s;cursor:default}
.mw-bank:hover{transform:translateY(-6px);border-color:var(--bc);background-color:rgba(255,255,255,.07);box-shadow:0 18px 34px -14px var(--bc)}
.mw-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}
.mw-bank:hover .mw-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)}
/* ---- ขั้นตอนถอนเงิน: เส้นเชื่อมเคลื่อนไหว ---- */
.mw-line{position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:rgba(255,255,255,.1);overflow:hidden;border-radius:2px}
.mw-line::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:linear-gradient(180deg,transparent,#9069e9,transparent);animation:mwlv 2.4s linear infinite}
@keyframes mwlv{from{transform:translateY(-100%)}to{transform:translateY(250%)}}
@media(min-width:768px){.mw-line{left:12.5%;right:12.5%;top:27px;bottom:auto;width:auto;height:2px}
.mw-line::after{width:30%;height:100%;background:linear-gradient(90deg,transparent,#9069e9,transparent);animation-name:mwlh}}
@keyframes mwlh{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.mw-si{box-shadow:0 5px 0 #3b1677,0 10px 22px -6px rgba(144,105,233,.7),inset 0 2px 0 rgba(255,255,255,.35);transition:transform .35s cubic-bezier(.2,.9,.3,1.4),box-shadow .35s}
.mw-step.on .mw-si{transform:scale(1.12);box-shadow:0 5px 0 #3b1677,0 0 0 6px rgba(144,105,233,.18),0 0 30px rgba(144,105,233,.7),inset 0 2px 0 rgba(255,255,255,.4)}
.mw-step.on h3{color:#9069e9}
.mw-step h3{transition:color .35s}
@media (prefers-reduced-motion:reduce){.mw-line::after{animation-duration:4s}}
/* ---- FAQ เปิดแล้วไฮไลต์ ---- */
details{transition:border-color .25s,background-color .25s}
details[open]{border-color:#9069e9;background-color:rgba(255,255,255,.07)}
details[open]>p{animation:mwdn .35s ease}
@keyframes mwdn{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:#9069e9;transition:transform .25s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
/* ผู้ใช้ที่ตั้งลดการเคลื่อนไหว: เหลือแค่จางเข้า ไม่มีเลื่อน/หมุน/วนซ้ำ */
@media (prefers-reduced-motion:reduce){.mwj [data-mwqwaz]{transform:none;transition:opacity .5s ease}
.mw-shine::after,.mw-pulse::before{animation:none}.mwj main .mwu-grid>[data-mwqwaz].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}
.mwj [data-mwqwaz]{transition:opacity .7s var(--ez),transform .7s var(--ez)}
main .mwu-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)}
.mw-b3{transition:transform .3s var(--ez),box-shadow .3s var(--ez),filter .3s var(--ez),border-color .3s var(--ez);text-shadow:none}
.mw-b3p{background-image:none}
.mw-b3s{background-image:none;background-color:rgba(255,255,255,.06)}
.mw-b3w{background-image:none;background-color:#fff}
.mw-b3o{background-image:none;background-color:rgba(255,255,255,.05)}
.mw-shine::after{display:none}
#mw-top{transition:opacity .3s var(--ez),transform .5s var(--ez)}
#mwdwqrw:not(.mwu-hidden)>.mwu-absolute{animation-timing-function:var(--ez);animation-duration:.3s}
#mwdwqrw:not(.mwu-hidden) [data-mwnzmz]{animation-timing-function:var(--ez);animation-duration:.5s}
:focus-visible{outline:2px solid #9069e9;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mwj [data-mwqwaz]{transform:none!important;transition:opacity .3s linear}.mw-pulse::before,.mw-dot{animation:none}}

.mw-b3p{background-color:#7f5ccd}
.mwu-bg-brand{background-color:#7f5ccd}
.mwu-text-brand,.mwu-hover\:text-brand:hover{color:#9975eb}