@font-face{font-family:Prompt;src:url('/th/fonts/prompt-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Prompt;src:url('/th/fonts/prompt-800.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
:root{color-scheme:dark;--blue-a:#003f94;--blue-b:#0078e7;--blue-c:#00b9ff;--line-a:#08752e;--line-b:#06a83f;--line-c:#20d965;--surface:#24272d;--cyan:#21c7ff;--gold:#ffc85c}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#050609}
body{margin:0;color:#f7fbff;background:#050609;font-family:Prompt,"Noto Sans Thai","Leelawadee UI",Tahoma,Arial,sans-serif;overflow-x:hidden}
a{text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
.layout{min-height:100dvh;padding:12px 0 88px;background-image:linear-gradient(rgba(1,5,13,.88),rgba(2,7,17,.95)),radial-gradient(circle at 50% 8%,rgba(0,116,202,.22),transparent 33%),url('/th/img/original-grand-entrance.webp?v=20260816');background-position:center;background-repeat:no-repeat,no-repeat,repeat;background-size:cover,cover,cover;background-attachment:fixed}
.page-shell{width:650px;max-width:100%;margin:0 auto;padding:14px}
.hero-art,.campaign-art{overflow:hidden;border-radius:12px;line-height:0;box-shadow:0 18px 48px rgba(0,0,0,.3)}
.hero-art img,.campaign-art img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.actions{display:flex;flex-direction:column;gap:12px;padding:20px 4px}
.action,.mobile-actions a{display:flex;align-items:center;color:#fff;font-weight:800}
.action{position:relative;min-height:76px;padding:10px 13px;overflow:hidden;border:1px solid rgba(255,255,255,.25);border-radius:14px;box-shadow:inset 0 1px rgba(255,255,255,.24),0 10px 24px rgba(0,0,0,.34);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.action::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.18) 48%,transparent 70%);transform:translateX(-140%);animation:cta-shine 3.2s ease-in-out infinite}
.action:hover{filter:brightness(1.08);transform:translateY(-2px)}
.action:active{transform:scale(.985)}
.action:focus-visible,.gallery-dots button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.action-register{background:linear-gradient(100deg,var(--blue-a),var(--blue-b) 52%,var(--blue-c))}
.action-line{background:linear-gradient(100deg,var(--line-a),var(--line-b) 54%,var(--line-c))}
.action-register.action{animation:button-glow 1.9s ease-in-out infinite}
.action-line::after{animation-delay:1.6s}
.action-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(0,0,0,.2)}
.line-mark{color:#079e39;background:#fff;border:0;border-radius:50%;font:900 9px/1 Arial,sans-serif;letter-spacing:-.04em}
.user-mark i,.mobile-user i{position:relative;width:18px;height:18px;border:3px solid #fff;border-radius:50% 50% 45% 45%}
.user-mark i::after,.mobile-user i::after{content:"";position:absolute;left:50%;top:-12px;width:8px;height:8px;border:3px solid #fff;border-radius:50%;transform:translateX(-50%);background:transparent}
.action strong{margin-left:15px;white-space:nowrap;font-size:22px;line-height:1.2}
.action-arrow{display:grid;place-items:center;width:32px;height:32px;margin-left:auto;border-radius:50%;background:rgba(255,255,255,.16);font:700 27px/1 Arial,sans-serif}
.online{display:flex;justify-content:center;padding:0 0 20px}
.online>div{display:flex;align-items:center;justify-content:center;gap:12px;width:300px;padding:9px;border:1px solid #4ade80;border-radius:8px;background:rgba(34,197,94,.2)}
.online strong{font-size:14px}
.pulse{position:relative;display:inline-flex;width:12px;height:12px}
.pulse i,.pulse b{position:absolute;inset:0;border-radius:50%;background:#22c55e}
.pulse i{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}
.pulse b{animation:blink 1s ease-in-out infinite;box-shadow:0 0 10px #22c55e}
#online-number{display:inline-block;animation:number-pop .3s ease}
.transactions{padding:0 10px 20px}
.transactions h1{margin:0;padding:8px;border-radius:10px 10px 0 0;background:linear-gradient(90deg,#001f53,#00acff);font-size:clamp(21px,5.7vw,24px);font-weight:700;text-align:center}
.notifications-viewport{height:212px;margin-top:20px;overflow:hidden}
.notifications{display:grid;grid-template-columns:1fr;gap:10px;transform:translateY(0);transition:transform .65s cubic-bezier(.22,.72,.2,1)}
.notifications.is-sliding{transform:translateY(-74px)}
.notifications.is-resetting{transition:none}
.notifications article{display:flex;align-items:center;width:100%;height:64px;padding:7px 15px;border:1px solid #444;border-radius:10px;background:#303238}
.notifications article img{flex:none;width:50px;height:50px;margin-right:15px;object-fit:contain}
.notifications p{margin:0;font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,Arial,sans-serif;font-size:14px;line-height:1.45}
.notifications em{color:var(--cyan);font-style:normal}
.campaign-art{margin:18px 6px 8px}
.countdown{display:grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:13px;min-height:62px;margin:0 6px 22px;padding:7px 14px;border:1px solid rgba(255,184,50,.42);border-radius:11px;background:linear-gradient(100deg,rgba(24,22,28,.97),rgba(8,15,27,.97));box-shadow:0 8px 20px rgba(0,0,0,.24)}
.countdown>strong{color:var(--gold);white-space:nowrap;font-size:13px}
.timer{display:flex;align-items:center;justify-content:center;gap:4px}
.timer span{width:40px;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:rgba(0,0,0,.32);font-size:22px;font-weight:800;line-height:1.15;text-align:center;font-variant-numeric:tabular-nums}
.timer i{color:var(--gold);font-size:19px;font-style:normal;font-weight:800}
.countdown small{color:#9babbd;white-space:nowrap;font-size:9px}
.gallery{margin:20px 0 96px}
.gallery-viewport{width:100%;overflow:hidden;border-radius:14px;cursor:grab;touch-action:pan-y}
.gallery-viewport:active{cursor:grabbing}
.gallery-track{display:flex;width:200%;transition:transform .55s cubic-bezier(.22,.72,.2,1);will-change:transform}
.gallery-track img{display:block;flex:none;width:50%;height:auto;object-fit:cover;user-select:none;-webkit-user-drag:none}
.gallery-dots{display:flex;align-items:center;justify-content:center;gap:8px;height:32px}
.gallery-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#596675;cursor:pointer;transition:transform .25s ease,background .25s ease}
.gallery-dots button.active{background:#20bfff;transform:scaleX(3.125)}
.mobile-actions{position:fixed;z-index:50;left:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;width:100%;padding-bottom:env(safe-area-inset-bottom);background:#050609}
.mobile-actions a{justify-content:center;gap:9px;min-height:66px;border:1px solid rgba(255,255,255,.22);border-radius:18px 18px 0 0;font-size:19px;box-shadow:inset 0 1px rgba(255,255,255,.25)}
.mobile-actions span{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:rgba(0,0,0,.17);font-size:16px}
.mobile-line{color:#079e39!important;background:#fff!important;border-radius:50%!important;font:900 7px/1 Arial,sans-serif!important}
.mobile-user i{width:12px;height:12px;border-width:2px}
.mobile-user i::after{top:-9px;width:5px;height:5px;border-width:2px}
@keyframes button-glow{0%,100%{box-shadow:inset 0 1px rgba(255,255,255,.25),0 8px 22px rgba(0,112,230,.3)}50%{box-shadow:inset 0 1px rgba(255,255,255,.32),0 13px 34px rgba(0,177,255,.56)}}
@keyframes cta-shine{0%,65%{transform:translateX(-140%)}85%,100%{transform:translateX(140%)}}
@keyframes ping{75%,100%{opacity:0;transform:scale(2)}}
@keyframes blink{0%,100%{opacity:1;filter:brightness(1.35)}50%{opacity:.32;filter:brightness(.65)}}
@keyframes number-pop{0%{opacity:.35;transform:translateY(3px)}100%{opacity:1;transform:none}}
@media(min-width:768px){.layout{padding-top:20px}.page-shell{padding:20px}.actions{padding-inline:56px}.transactions{padding-inline:24px}.mobile-actions{display:none}.gallery{margin-bottom:20px}}
@media(max-width:390px){.page-shell{padding:12px}.actions{padding-inline:0}.action{min-height:74px}.action strong{margin-left:10px;font-size:19px}.action-icon{width:42px;height:42px}.action-arrow{width:27px;height:27px}.transactions{padding-inline:2px}.notifications article{justify-content:flex-start;padding:7px 10px}.notifications article img{margin-right:10px}.notifications p{font-size:12px}.countdown{gap:8px;padding-inline:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.action,.action::after,.action-register.action,.pulse i,.pulse b,#online-number{animation:none!important;transition:none!important}.gallery-track,.notifications{transition:none!important}}