/* JL6911 — design token ดึงจาก th39club.com (dark + orange + gold) */
:root{
  --bg:#0b0b0c; --bg2:#121214; --card:#17171a; --line:#26262b;
  --orange:#ff4500; --orange2:#ff6a00; --gold:#ffd166;
  --txt:#f2f2f4; --muted:#a1a1aa; --radius:14px;
  --maxw:1152px;
  --font-th:"Noto Sans Thai","ThonburiUI","Sarabun",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--font-th); font-size:17px; line-height:1.75;
  padding-bottom:76px; /* กัน footerbar ทับ */
}
img{max-width:100%; height:auto; display:block}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--orange2)}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:8px; top:8px; background:var(--orange); color:#fff; padding:8px 12px; border-radius:8px; z-index:99}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:40; background:rgba(11,11,12,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.head-inner{max-width:var(--maxw); margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px}
.brand{display:flex; align-items:center; gap:10px; color:var(--txt); font-weight:700}
.brand-logo{width:44px; height:44px; border-radius:10px}
.brand-txt{font-size:22px; letter-spacing:.5px; color:var(--orange2)}
.main-nav{margin-left:auto; display:flex; flex-wrap:wrap; gap:4px}
.main-nav a{padding:8px 12px; border-radius:10px; font-size:15px; color:var(--txt)}
.main-nav a:hover{background:var(--card); color:var(--gold)}
.head-cta{background:linear-gradient(135deg,var(--orange),var(--orange2)); color:#fff; font-weight:700; padding:9px 16px; border-radius:10px; font-size:15px; white-space:nowrap}
.head-cta:hover{filter:brightness(1.1); color:#fff}

/* ---------- hero ---------- */
.hero{position:relative; background:radial-gradient(1200px 400px at 50% -50%, #2a1408, transparent), var(--bg)}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:34px 16px 26px}
.hero h1{font-size:34px; line-height:1.35; margin:0 0 12px}
.hero h1 em{color:var(--orange2); font-style:normal}
.hero-lead{font-size:19px; color:#e4e4e7; max-width:820px}
.hero-badges{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 20px; padding:0; list-style:none}
.hero-badges li{background:var(--card); border:1px solid var(--line); color:var(--gold); font-size:14px; padding:6px 12px; border-radius:999px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.btn-reg,.btn-play{display:inline-flex; align-items:center; justify-content:center; min-width:180px; padding:14px 22px; border-radius:12px; font-weight:700; font-size:17px}
.btn-reg{background:linear-gradient(135deg,var(--orange),var(--orange2)); color:#fff; box-shadow:0 8px 24px rgba(255,69,0,.28)}
.btn-play{border:2px solid var(--gold); color:var(--gold); background:transparent}
.btn-play:hover{background:rgba(255,209,102,.12)}
.btn-reg:hover{color:#fff; filter:brightness(1.08)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:26px 16px}
.sec{margin:34px 0}
h2{font-size:26px; line-height:1.4; margin:0 0 14px; color:#fff}
h2::before{content:""; display:block; width:46px; height:4px; background:var(--orange); border-radius:4px; margin-bottom:12px}
h3{font-size:20px; margin:22px 0 10px; color:var(--gold)}
p{margin:0 0 16px}
ul.toc{list-style:none; margin:0 0 8px; padding:0; display:grid; gap:8px}
ul.toc li a{display:block; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--orange); padding:12px 16px; border-radius:10px; font-size:16px}

/* ---------- figure ---------- */
figure{margin:20px 0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
figure img{width:100%; aspect-ratio:1152/576; object-fit:cover}
figcaption{padding:10px 14px; font-size:14px; color:var(--muted); border-top:1px solid var(--line)}

/* ---------- cards ---------- */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.card h3{margin:0 0 8px}
.card-desc,.step-desc{color:#d4d4d8; font-size:15px}
.card-num{display:inline-block; font-size:13px; color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:2px 10px; margin-bottom:8px}
.steps{display:grid; gap:14px; counter-reset:st}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 16px 62px; position:relative}
.step::before{counter-increment:st; content:counter(st); position:absolute; left:16px; top:16px; width:32px; height:32px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; font-weight:700}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto; margin:18px 0}
table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-width:520px}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:15px}
th{background:#1d1d21; color:var(--gold); font-weight:700}
tr:last-child td{border-bottom:none}

/* ---------- faq ---------- */
details{background:var(--card); border:1px solid var(--line); border-radius:12px; margin:10px 0; padding:14px 16px}
details[open]{border-color:var(--orange)}
summary{cursor:pointer; font-weight:700; color:#fff; list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋"; float:right; color:var(--gold)}
details[open] summary::after{content:"−"}
details .faq-a{margin:10px 0 0; color:#d4d4d8}

/* ---------- notice ---------- */
.notice{background:rgba(255,69,0,.08); border:1px solid rgba(255,69,0,.35); border-radius:12px; padding:16px; color:#fde3d3; font-size:15px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); background:var(--bg2); margin-top:30px}
.foot-inner{max-width:var(--maxw); margin:0 auto; padding:26px 16px; display:grid; gap:18px; grid-template-columns:1fr auto; align-items:center}
.foot-brand{display:flex; gap:12px; align-items:center}
.foot-brand img{width:52px; height:52px; border-radius:12px}
.foot-txt{margin:0; font-size:14px; color:var(--muted); max-width:420px}
.foot-nav{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:14px; grid-column:1/-1}
.foot-nav a{color:var(--muted)}
.foot-nav a:hover{color:var(--gold)}
.foot-cta{display:flex; gap:10px; flex-wrap:wrap}
.foot-copy{max-width:var(--maxw); margin:0 auto; padding:0 16px 22px; font-size:13px; color:#71717a}

/* ---------- footerbar (fixed ล่างจอ) ---------- */
.footerbar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; background:rgba(11,11,12,.97); border-top:1px solid var(--line); backdrop-filter:blur(8px)}
.footerbar .fb{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 8px; font-weight:700; font-size:16px}
.footerbar .fb-reg{background:linear-gradient(135deg,var(--orange),var(--orange2)); color:#fff}
.footerbar .fb-play{color:var(--gold); border-left:1px solid var(--line)}
.footerbar .fb-play:hover{background:rgba(255,209,102,.1)}
.footerbar .fb-ico{font-size:15px}
@media (max-width:640px){
  body{font-size:16px}
  .hero h1{font-size:27px}
  h2{font-size:22px}
  .main-nav{display:none}
  .foot-inner{grid-template-columns:1fr}
  .btn-reg,.btn-play{min-width:140px; flex:1}
}