:root{--accent:#e11d2e;--accent2:#ff4a4a;--bg:#0a0a0a;--card:#121212;--ring:#8b0000;--fg:#f3f3f3;--muted:#b9b9b9;--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans Thai',sans-serif;background:var(--bg) url('../img/bg.webp') center/cover fixed no-repeat;color:var(--fg);line-height:1.65}
a{color:var(--accent);text-decoration:none}a:hover{opacity:.9}
.container{width:min(1200px,92%);margin-inline:auto}
.header{position:sticky;top:0;z-index:40;background:rgba(10,10,10,.72);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{display:flex;align-items:center;gap:12px;padding:12px 0}
.logo img{height:42px}
.brand{font-weight:800}
.nav{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap}
.nav a{padding:.5rem .9rem;border-radius:999px;background:#161616;border:1px solid #222}
.nav a:hover{box-shadow:0 0 0 2px var(--ring) inset}
.hero{padding: clamp(46px,8vw,90px) 0 30px}
.hero h1{font-size:clamp(1.8rem,3.5vw,3rem);margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 16px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;background:linear-gradient(180deg,#1b1b1b,#111);border:1px solid #2a2a2a;color:#fff;font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.section{padding: clamp(36px,6vw,64px) 0}
.section h2{margin:0 0 10px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:radial-gradient(1000px 800px at 0% -10%,rgba(255,0,0,.07),transparent 40%) ,var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);overflow:hidden;transition:transform .16s ease, box-shadow .16s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.card img{width:100%;height:210px;object-fit:cover;display:block}
.card .p{padding:14px}
.kicker{color:var(--muted);text-transform:uppercase;font-size:.78rem;letter-spacing:.4px}
.notice{background:#131313;border-left:4px solid #e11d2e;color:#d6d6d6;padding:12px;border-radius:10px}
.footer{padding:28px 0;color:#c9c9c9;border-top:1px solid rgba(255,255,255,.08);background:#0d0d0d}
.footer small{color:#9a9a9a}
.float{position:fixed;right:16px;bottom:16px;border-radius:999px;padding:14px 18px}