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