:root{--red:#c62828;--red2:#a91f1f;--gold:#d6a62a;--ink:#202733;--muted:#6b7280;--line:#e8ebf0;--bg:#f7f9fc;--card:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Tahoma,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}.topbar{height:66px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}
.navwrap{max-width:1320px;height:100%;margin:auto;padding:0 22px;display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;font-weight:900;font-style:italic;font-size:24px;letter-spacing:-1.5px;white-space:nowrap}.brand span{color:var(--red)}.brand-logo{height:62px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}.nav{display:flex;align-items:center;gap:5px;flex:1;justify-content:center}.nav a{font-size:12px;font-weight:800;padding:22px 11px;color:#4b5563;border-bottom:3px solid transparent}.nav a:hover,.nav a.active{color:var(--red);border-bottom-color:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid transparent;font-weight:800;cursor:pointer;transition:.2s}.btn-small{padding:10px 20px;font-size:12px}.btn-red{background:var(--red);color:#fff;box-shadow:0 5px 16px rgba(198,40,40,.18)}.btn-red:hover{background:var(--red2);transform:translateY(-1px)}.btn-outline{border-color:#d9dee7;background:#fff}.btn-gold{background:var(--gold);color:#fff}
.hero{position:relative;min-height:510px;overflow:hidden;background:#0c0e13}.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,7,11,.5) 0%,rgba(6,7,11,.15) 35%,rgba(6,7,11,.6) 100%),linear-gradient(100deg,rgba(6,7,11,.95) 0%,rgba(6,7,11,.85) 28%,rgba(6,7,11,.45) 52%,rgba(6,7,11,.05) 76%)}.hero-art{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center right;opacity:.98}.hero-art{animation:heroZoom 22s ease-in-out infinite alternate}@keyframes heroZoom{0%{transform:scale(1)}100%{transform:scale(1.07)}}.hero-sparkles{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}.hero-sparkles span{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 6px 2px rgba(255,255,255,.75);animation:sparkleFloat linear infinite}.hero-sparkles span.gold{background:var(--gold);box-shadow:0 0 7px 2px rgba(214,166,42,.8)}@keyframes sparkleFloat{0%{opacity:0;transform:translateY(0) scale(.5)}12%{opacity:1}75%{opacity:.7}100%{opacity:0;transform:translateY(-260px) scale(1.3)}}.hero-meteor{position:absolute;top:92%;left:-6%;width:280px;height:2px;z-index:1;pointer-events:none;opacity:0;transform:rotate(-16deg) translate(0,0);animation:heroMeteorFall 11s linear infinite}.hero-meteor:before{content:"";position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 78%,#fff 100%)}.hero-meteor:after{content:"";position:absolute;right:-2px;top:-2.5px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(255,255,255,.9)}@keyframes heroMeteorFall{0%{opacity:0;transform:rotate(-16deg) translate(0,0)}2%{opacity:1}22%{opacity:0;transform:rotate(-16deg) translate(88vw,-410px)}100%{opacity:0;transform:rotate(-16deg) translate(88vw,-410px)}}@media(prefers-reduced-motion:reduce){.hero-art{animation:none}.hero-sparkles{display:none}.hero-meteor{display:none}}.hero-content{position:relative;z-index:2;max-width:1320px;margin:auto;padding:82px 40px 50px}.eyebrow{color:#ff6b6b;font-weight:900;letter-spacing:4px;font-size:14px;text-shadow:0 2px 10px rgba(0,0,0,.6)}.hero h1{font-size:78px;line-height:.88;margin:12px 0 8px;font-style:italic;letter-spacing:-5px;color:#ff5252;text-shadow:0 4px 18px rgba(0,0,0,.7)}.hero h1 span{display:block;color:var(--gold);font-size:55px;letter-spacing:-2px}.hero h2{font-size:26px;margin:20px 0 8px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}.hero p{max-width:520px;line-height:1.8;color:#d3d9e2;text-shadow:0 2px 8px rgba(0,0,0,.55)}.hero-actions{display:flex;gap:12px;margin:24px 0}.stats{display:flex;gap:28px;margin-top:26px}.stat b{font-size:22px;display:block;color:#6bff8f;text-shadow:0 2px 8px rgba(0,0,0,.55)}.stat small{color:#aeb7c4;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.section{max-width:1220px;margin:auto;padding:54px 24px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px}.section-head h2{margin:0;font-size:30px}.section-head p{margin:5px 0 0;color:var(--muted)}.red-title{color:var(--red)}
.features{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.feature{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 10px;text-align:center;min-height:135px;box-shadow:0 5px 20px rgba(20,30,50,.03)}.feature .icon{font-size:30px;color:var(--gold);margin-bottom:12px}.feature b{display:block;font-size:12px}.feature small{display:block;color:#87909f;margin-top:7px;line-height:1.5}
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.news-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 7px 24px rgba(20,30,50,.05)}.news-img{height:145px;background:linear-gradient(135deg,#e8f1ff,#fff0ee);display:flex;align-items:center;justify-content:center;font-size:36px}.news-body{padding:18px}.tag{display:inline-block;border-radius:999px;padding:4px 9px;background:#fff0f0;color:var(--red);font-size:10px;font-weight:900}.news-body h3{margin:10px 0 6px;font-size:18px}.news-body p{color:var(--muted);font-size:13px;line-height:1.7;margin:0}.news-body time{display:block;color:#9aa1ad;font-size:11px;margin-top:12px}
.side-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.panel h3{margin:0 0 15px}.status-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.online{color:#20a55a;font-weight:800}.rank-row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.rank-num{font-weight:900;color:var(--gold)}
.community{background:linear-gradient(110deg,#eef5ff,#fff);border:1px solid #dce8fa;border-radius:18px;padding:26px 32px;display:flex;justify-content:space-between;align-items:center}.community h2{margin:0 0 5px}.community p{margin:0;color:var(--muted)}
.footer{background:#17202d;color:#dbe2ea}.footer-inner{max-width:1220px;margin:auto;padding:30px 24px;display:flex;justify-content:space-between;align-items:center}.footer-brand{color:#fff}.footer-links{display:flex;gap:10px 20px;font-size:13px;flex-wrap:wrap;justify-content:flex-end;max-width:760px}.footer-links a:hover{color:#fff}
.form-page{max-width:560px;margin:55px auto;padding:0 20px}.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 12px 35px rgba(20,30,50,.07)}.form-card h1{margin-top:0}.field{margin:15px 0}.field label{display:block;font-weight:800;font-size:13px;margin-bottom:7px}.field input,.field select{width:100%;padding:12px;border:1px solid #d9dee7;border-radius:8px;font-size:14px;background:#fff}.hint{font-size:12px;color:#8b93a0;margin-top:5px}.notice{padding:12px 14px;border-radius:9px;background:#f7f8fb;margin:15px 0;font-size:13px}.error{background:#fff0f0;color:#b42318}.success{background:#effbf3;color:#16733c}
.package-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.package{border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer}.package:hover{border-color:var(--gold)}.package b{display:block;color:var(--red);font-size:18px}.package small{color:var(--muted)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:34px;height:34px;border:none;background:transparent;cursor:pointer;padding:0}.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}@media(max-width:1000px){.nav{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(20,30,50,.1);max-height:calc(100vh - 66px);overflow-y:auto}.nav.open{display:flex}.nav a{padding:16px 22px;border-bottom:1px solid var(--line)}.nav-toggle{display:flex}.features{grid-template-columns:repeat(3,1fr)}.hero h1{font-size:58px}.hero h1 span{font-size:42px}.hero-art{opacity:.35}.side-layout{grid-template-columns:1fr}}
@media(max-width:650px){.navwrap{justify-content:space-between}.hero{min-height:570px}.hero-content{padding:65px 24px}.hero h1{font-size:48px}.hero h1 span{font-size:34px}.stats{gap:14px;flex-wrap:wrap}.features,.newsgrid{grid-template-columns:1fr}.community,.footer-inner{display:block}.footer-links{margin-top:20px;flex-wrap:wrap;justify-content:flex-start;max-width:none}.package-grid{grid-template-columns:1fr}}

/* ---- TOPUP: เรทปกติ / เรทช่วงกิจกรรม ---- */
.event-banner{margin:15px 0;padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,#fff4d6,#ffe3e3);border:1px solid var(--gold);text-align:center}
.event-banner b{display:block;color:var(--red);font-size:18px}
.event-banner small{display:block;color:var(--muted);margin-top:4px;font-size:12px}
.package .rate{display:block;margin-top:5px;font-size:12px;line-height:1.4}
.package .rate-normal{color:var(--muted)}
.package .rate-event{color:var(--red);font-weight:800;font-size:13px}
.package .rate-event em{font-style:normal;background:var(--red);color:#fff;border-radius:5px;padding:1px 6px;margin-right:4px;font-size:11px}
.package:has(input:checked){border-color:var(--red);box-shadow:0 0 0 2px rgba(198,40,40,.12)}

/* ---- TOPUP: กรอบไอเทมรางวัล ---- */
.package{position:relative}
.package .reward-slot{position:absolute;top:12px;right:12px;width:54px;height:54px;border:2px solid #22c55e;border-radius:9px;background:#f4fff7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.package .reward-slot img{max-width:100%;max-height:100%;display:block}
.package .reward-slot i{font-style:normal;color:#9aa3af;font-weight:800}
.package .reward-slot em{position:absolute;right:2px;bottom:1px;font-style:normal;font-size:11px;font-weight:800;color:#fff;background:rgba(0,0,0,.65);border-radius:4px;padding:0 4px}
.package .reward-line{display:block;margin-top:6px;font-size:12px;font-weight:700;color:#15803d}
.nav-fix{margin-right:8px;white-space:nowrap}@media(max-width:1100px){.nav-fix{display:none}}