/* roulang page: index */
:root{
  --bg:#051F14;
  --bg-soft:#0B2E1E;
  --surface:#0E3524;
  --surface-2:#0A2A1C;
  --gold:#F59E0B;
  --gold-light:#FCD34D;
  --gold-dim:rgba(245,158,11,.28);
  --gold-line:rgba(245,158,11,.16);
  --red:#DC2626;
  --mint:#D1FAE5;
  --olive:#A3A375;
  --text:#F8FAFC;
  --muted:#9FBFAD;
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --shadow:0 18px 44px rgba(0,0,0,.45);
  --shadow-gold:0 10px 28px rgba(245,158,11,.24);
  --space:clamp(56px,7vw,96px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 12% -6%, rgba(245,158,11,.14), transparent 60%),
    radial-gradient(900px 520px at 96% 4%, rgba(16,185,129,.12), transparent 62%),
    var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-light);text-decoration:none;transition:color .2s ease,opacity .2s ease}
a:hover{color:#fff}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.01em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:6px}

.wrap{width:min(1200px,92vw);margin-inline:auto}
.section{padding:var(--space) 0;position:relative}
.section.alt{background:linear-gradient(180deg,rgba(11,46,30,.72),rgba(5,31,20,.15));border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:26px;align-items:end;margin-bottom:40px}
.sec-head h2{font-size:clamp(22px,2.35vw,34px);line-height:1.3}
.sec-head p{color:var(--muted);font-size:15.5px;line-height:1.7}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);border:1px solid var(--gold-dim);background:rgba(245,158,11,.08);padding:7px 14px;border-radius:999px}
.section-title-sm{font-size:clamp(19px,1.9vw,25px);line-height:1.35;margin-bottom:12px}
.lead-sm{color:var(--muted);font-size:15.5px;line-height:1.7}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:1040;background:rgba(5,31,20,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--gold-line)}
.nav-inner{display:flex;align-items:center;gap:18px;min-height:76px}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);flex:0 0 auto;max-width:44%}
.brand:hover{color:var(--text)}
.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,var(--gold),var(--gold-light));display:grid;place-items:center;color:#07251a;font-size:19px;box-shadow:var(--shadow-gold);flex:0 0 auto}
.brand-name{font-size:15px;font-weight:800;line-height:1.25;display:block}
.brand-name span{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{position:relative;display:inline-block;padding:10px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--mint);white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-links a:hover{color:#fff;background:rgba(245,158,11,.08)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--gold-light)}
.nav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.burger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--gold-dim);background:rgba(245,158,11,.07);color:var(--gold-light);font-size:18px;align-items:center;justify-content:center}

/* ============ BUTTONS ============ */
.btn-x{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;border-radius:999px;font-weight:700;font-size:15px;padding:13px 24px;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07251a;box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,158,11,.34);color:#07251a}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:rgba(245,158,11,.06);border:1px solid var(--gold-dim);color:var(--gold-light)}
.btn-ghost:hover{background:rgba(245,158,11,.14);border-color:var(--gold);color:#fff;transform:translateY(-2px)}
.btn-line{background:transparent;border:1px solid rgba(209,250,229,.28);color:var(--mint)}
.btn-line:hover{border-color:var(--mint);color:#fff;background:rgba(209,250,229,.06)}
.btn-xs{padding:9px 16px;font-size:13.5px}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;padding:clamp(44px,6vw,78px) 0 clamp(52px,7vw,92px);background-image:linear-gradient(120deg,rgba(5,31,20,.95) 8%,rgba(5,31,20,.78) 52%,rgba(5,31,20,.94) 100%),url('/assets/images/6185d5f180960344.jpg');background-size:cover;background-position:center}
.hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:120px;background:linear-gradient(180deg,transparent,var(--bg))}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:start}
.hero h1{font-size:clamp(27px,3.5vw,48px);line-height:1.18;margin:18px 0 16px}
.hero-lead{color:var(--mint);font-size:17px;line-height:1.7;max-width:64ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--olive)}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:36px}
.hero-stats div{background:rgba(209,250,229,.05);border:1px solid var(--gold-line);border-radius:var(--radius-sm);padding:14px 16px}
.hero-stats b{display:block;font-size:20px;color:var(--gold-light)}
.hero-stats span{font-size:12.5px;color:var(--muted);line-height:1.45;display:block;margin-top:3px}

.reward-panel{background:linear-gradient(165deg,rgba(14,53,36,.97),rgba(6,29,19,.97));border:1px solid var(--gold-dim);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
.reward-panel h2{font-size:19px;line-height:1.4}
.reward-panel .sub{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.6}
.progress-wrap{margin:22px 0 8px}
.progress-track{height:12px;border-radius:999px;background:rgba(209,250,229,.1);overflow:hidden;border:1px solid rgba(245,158,11,.2)}
.progress-fill{height:100%;width:70%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold-light));box-shadow:0 0 20px rgba(245,158,11,.55)}
.progress-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:9px}
.progress-meta b{color:var(--gold-light)}
.milestones{margin:20px 0 22px;display:grid;gap:10px}
.milestones li{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;color:var(--mint);background:rgba(209,250,229,.045);border:1px dashed rgba(245,158,11,.24);border-radius:12px;padding:10px 14px}
.milestones li b{color:var(--gold-light)}
.milestones li.done{border-style:solid;background:rgba(245,158,11,.1)}
.milestones li.done i{color:#34d399}
.copy-note{margin-top:14px;font-size:12.5px;color:var(--olive);min-height:18px;word-break:break-all}

/* ============ TRUST STRIP ============ */
.trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.trust-item{background:linear-gradient(160deg,rgba(14,53,36,.9),rgba(6,29,19,.6));border:1px solid var(--gold-line);border-radius:var(--radius);padding:22px}
.trust-item i{font-size:20px;color:var(--gold-light)}
.trust-item b{display:block;margin:12px 0 6px;font-size:16px}
.trust-item p{color:var(--muted);font-size:13.5px;line-height:1.6}

/* ============ PAIN LIST ============ */
.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.pain-list{display:grid;gap:14px}
.pain-list li{display:flex;gap:14px;align-items:flex-start;background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.22);border-radius:var(--radius-sm);padding:16px 18px}
.pain-list i{color:#f87171;font-size:16px;margin-top:3px}
.pain-list b{display:block;font-size:15px;margin-bottom:4px}
.pain-list p{color:var(--muted);font-size:13.5px;line-height:1.6}
.solve-box{background:linear-gradient(160deg,rgba(16,185,129,.1),rgba(6,29,19,.7));border:1px solid rgba(16,185,129,.28);border-radius:var(--radius);padding:26px}
.solve-box h3{font-size:18px;margin-bottom:12px}
.solve-box ul{display:grid;gap:10px;margin-top:14px}
.solve-box li{display:flex;gap:10px;font-size:14.5px;color:var(--mint)}
.solve-box li i{color:#34d399;margin-top:4px}

/* ============ GAME GRID ============ */
.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.game-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--gold-dim);background:var(--surface-2);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.game-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.5);border-color:var(--gold)}
.game-thumb{position:relative;aspect-ratio:16/10;overflow:hidden}
.game-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.game-card:hover .game-thumb img{transform:scale(1.06)}
.game-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,31,20,.92))}
.corner-tag{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:8px;background:var(--red);color:#fff;box-shadow:0 6px 16px rgba(220,38,38,.4)}
.corner-tag.vip{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07251a;box-shadow:var(--shadow-gold)}
.game-body{padding:16px 18px 20px}
.game-body h3{font-size:16px;margin-bottom:6px}
.game-body p{color:var(--muted);font-size:13.5px;line-height:1.55;min-height:62px}
.game-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12.5px;color:var(--olive)}

/* ============ CATEGORY WALL ============ */
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cat-card{display:block;color:var(--text);border-radius:var(--radius);border:1px solid var(--gold-line);background:linear-gradient(165deg,rgba(14,53,36,.95),rgba(6,29,19,.85));padding:26px;transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease}
.cat-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:var(--shadow);color:var(--text)}
.cat-card i{font-size:22px;color:var(--gold-light)}
.cat-card h3{margin:14px 0 10px;font-size:18px}
.cat-card p{color:var(--muted);font-size:14px;line-height:1.6}
.cat-card span{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--gold-light)}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:step}
.step{position:relative;padding:26px 24px 24px;border-radius:var(--radius);background:rgba(209,250,229,.045);border:1px solid var(--gold-line)}
.step::before{counter-increment:step;content:"0" counter(step);font-size:30px;font-weight:800;color:rgba(245,158,11,.32);display:block;margin-bottom:10px}
.step h3{font-size:16.5px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14px;line-height:1.6}
.step-visual{margin-top:20px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--gold-line)}
.step-visual img{width:100%;aspect-ratio:21/9;object-fit:cover}

/* ============ RESULT TABLE ============ */
.result-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.pay-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.pay-table th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--olive);text-align:left;padding:0 16px 6px}
.pay-table td{background:rgba(209,250,229,.05);padding:14px 16px;font-size:14.5px;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.pay-table td:first-child{border-left:1px solid var(--gold-line);border-radius:12px 0 0 12px;font-weight:700}
.pay-table td:last-child{border-right:1px solid var(--gold-line);border-radius:0 12px 12px 0;color:var(--gold-light);font-weight:700}
.result-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--gold-dim)}
.result-media img{width:100%;aspect-ratio:16/11;object-fit:cover}
.result-caption{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.6}

/* ============ Q&A (stuck points) ============ */
.qa-list{display:grid;gap:12px}
.qa-item{border:1px solid var(--gold-line);border-radius:var(--radius-sm);background:rgba(209,250,229,.04);padding:0 20px;transition:border-color .25s ease,background .25s ease}
.qa-item[open]{border-color:var(--gold-dim);background:rgba(245,158,11,.06)}
.qa-item summary{cursor:pointer;list-style:none;padding:18px 0;font-size:15.5px;font-weight:700;display:flex;justify-content:space-between;gap:14px;align-items:center}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary::after{content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;font-size:12px;color:var(--gold-light);transition:transform .25s ease}
.qa-item[open] summary::after{transform:rotate(45deg)}
.qa-item p{padding:0 0 18px;color:var(--muted);font-size:14.5px;line-height:1.65}

/* ============ TIMELINE ============ */
.timeline{display:grid;gap:18px;border-left:2px solid var(--gold-line);padding-left:26px;margin-left:6px}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:-35px;top:6px;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-light));box-shadow:0 0 0 4px rgba(245,158,11,.14)}
.timeline b{display:block;font-size:16px;margin-bottom:5px}
.timeline p{color:var(--muted);font-size:14px;line-height:1.6}

/* ============ PAYMENT BADGES ============ */
.pay-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pay-badge{display:flex;flex-direction:column;gap:8px;border:1px solid var(--gold-line);border-radius:var(--radius);padding:20px;background:rgba(209,250,229,.04);text-align:left}
.pay-badge i{font-size:20px;color:var(--gold-light)}
.pay-badge b{font-size:15.5px}
.pay-badge span{font-size:13px;color:var(--muted);line-height:1.55}

/* ============ TIERS ============ */
.tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tier-card{border:1px solid var(--gold-line);border-radius:var(--radius);padding:26px;background:linear-gradient(170deg,rgba(14,53,36,.92),rgba(6,29,19,.75));display:flex;flex-direction:column;gap:14px}
.tier-card.featured{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.tier-card .tier-name{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--olive);font-weight:700}
.tier-card h3{font-size:20px}
.tier-card .tier-value{font-size:26px;font-weight:800;color:var(--gold-light)}
.tier-card ul{display:grid;gap:9px}
.tier-card li{font-size:14px;color:var(--mint);display:flex;gap:9px}
.tier-card li i{color:#34d399;margin-top:4px;font-size:12px}
.tier-bar{height:8px;border-radius:999px;background:rgba(209,250,229,.1);overflow:hidden}
.tier-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}

/* ============ COUPON WALL ============ */
.coupon-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;margin-bottom:36px}
.coupon-hero-media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--gold-dim)}
.coupon-hero-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.coupon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.coupon{position:relative;border-radius:var(--radius);padding:22px;background:linear-gradient(160deg,rgba(245,158,11,.14),rgba(6,29,19,.85));border:1px dashed var(--gold-dim);overflow:hidden}
.coupon::before,.coupon::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:var(--bg);top:50%;transform:translateY(-50%)}
.coupon::before{left:-11px;border-right:1px dashed var(--gold-dim)}
.coupon::after{right:-11px;border-left:1px dashed var(--gold-dim)}
.coupon .val{font-size:24px;font-weight:800;color:var(--gold-light)}
.coupon .code{margin:12px 0;display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;letter-spacing:.1em;background:rgba(5,31,20,.7);border:1px solid var(--gold-line);border-radius:9px;padding:7px 12px;color:var(--mint)}
.coupon p{font-size:13px;color:var(--muted);line-height:1.55;min-height:56px}
.coupon .btn-x{margin-top:14px;width:100%}
.coupon-rules{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.coupon-rules div{border-top:2px solid var(--gold-dim);padding-top:14px}
.coupon-rules b{display:block;margin-bottom:6px;font-size:15px}
.coupon-rules p{color:var(--muted);font-size:13.5px;line-height:1.6}

/* ============ TESTIMONIALS ============ */
.voice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.voice-card{border:1px solid var(--gold-line);border-radius:var(--radius);padding:22px;background:rgba(209,250,229,.035);display:flex;flex-direction:column;gap:14px}
.voice-card p{font-size:14.5px;color:var(--mint);line-height:1.65}
.voice-user{display:flex;align-items:center;gap:12px;margin-top:auto}
.voice-user img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1px solid var(--gold-dim)}
.voice-user b{display:block;font-size:14.5px}
.voice-user span{font-size:12.5px;color:var(--olive)}
.stars{color:var(--gold-light);font-size:12.5px;letter-spacing:2px}

/* ============ SAFETY ============ */
.safety-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.safety-item{border:1px solid var(--gold-line);border-radius:var(--radius);padding:22px;background:linear-gradient(165deg,rgba(14,53,36,.85),rgba(6,29,19,.6))}
.safety-item i{font-size:20px;color:var(--gold-light)}
.safety-item b{display:block;margin:12px 0 6px;font-size:15.5px}
.safety-item p{color:var(--muted);font-size:13.5px;line-height:1.6}

/* ============ NEWS ============ */
.news-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);gap:30px;align-items:start}
.news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.news-card{border:1px solid var(--gold-line);border-radius:var(--radius);overflow:hidden;background:rgba(10,42,28,.7);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;height:100%}
.news-card:hover{transform:translateY(-4px);border-color:var(--gold-dim);box-shadow:var(--shadow)}
.news-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.news-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.news-body h3{font-size:15.5px;line-height:1.45}
.news-body h3 a{color:var(--text)}
.news-body h3 a:hover{color:var(--gold-light)}
.news-body p{font-size:13.5px;color:var(--muted);line-height:1.55}
.news-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--olive);margin-top:auto}
.tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light);border:1px solid var(--gold-dim);border-radius:999px;padding:3px 10px;background:rgba(245,158,11,.08)}
.side-panel{border:1px solid var(--gold-line);border-radius:var(--radius);padding:22px;background:rgba(209,250,229,.04)}
.side-panel h3{font-size:16.5px;margin-bottom:14px}
.side-list{display:grid;gap:14px}
.side-list li{border-bottom:1px dashed var(--gold-line);padding-bottom:14px}
.side-list li:last-child{border-bottom:none;padding-bottom:0}
.side-list a{font-size:14.5px;font-weight:600;color:var(--mint);line-height:1.5;display:block}
.side-list a:hover{color:var(--gold-light)}
.side-list span{display:block;font-size:12px;color:var(--olive);margin-top:5px}
.empty-note{color:var(--muted);font-size:14.5px;border:1px dashed var(--gold-line);border-radius:var(--radius-sm);padding:20px}
.more-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:14px;font-weight:700;color:var(--gold-light)}
.more-link:hover{gap:12px;color:#fff}

/* ============ FINAL CTA ============ */
.cta-band{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--gold-dim);padding:clamp(30px,4.4vw,54px);background-image:linear-gradient(115deg,rgba(5,31,20,.94),rgba(5,31,20,.72)),url('/assets/images/87c803644efc8acb.jpg');background-size:cover;background-position:center}
.cta-band h2{font-size:clamp(22px,2.5vw,33px);line-height:1.3;max-width:24ch}
.cta-band p{color:var(--mint);font-size:15.5px;line-height:1.7;margin-top:14px;max-width:60ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* ============ FOOTER ============ */
.site-footer{margin-top:var(--space);border-top:1px solid var(--gold-line);background:linear-gradient(180deg,rgba(11,46,30,.55),rgba(5,31,20,.95))}
.footer-grid{display:grid;grid-template-columns:1.35fr .85fr .85fr 1fr;gap:30px;padding:56px 0 34px}
.footer-brand p{color:var(--muted);font-size:13.5px;line-height:1.65;margin-top:14px;max-width:38ch}
.footer-col h4{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px}
.footer-col li{margin-bottom:10px}
.footer-col a{color:var(--mint);font-size:14px}
.footer-col a:hover{color:#fff}
.footer-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.badge-x{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--mint);border:1px solid var(--gold-line);border-radius:999px;padding:6px 12px;background:rgba(209,250,229,.05)}
.badge-x.eighteen{border-color:rgba(220,38,38,.5);color:#fca5a5}
.footer-bottom{border-top:1px solid var(--gold-line);padding:20px 0 30px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:13px;color:var(--olive)}
.footer-bottom a{color:var(--olive)}
.footer-bottom a:hover{color:var(--gold-light)}

/* ============ FAB ============ */
.fab{position:fixed;left:16px;bottom:96px;z-index:1050;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--gold);background:radial-gradient(circle at 32% 28%,#2b1206,#0b0c0e 72%);color:var(--gold-light);font-size:21px;box-shadow:0 6px 25px rgba(245,158,11,.35);opacity:.88;transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease}
.fab:hover{opacity:1;transform:scale(1.1);color:var(--gold-light);box-shadow:0 10px 32px rgba(245,158,11,.5)}
.fab:active{transform:scale(.94) translateY(3px)}
.fab i{transition:transform .5s ease}
.fab:hover i{transform:rotate(360deg)}
.fab .dot{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:#dc2626;border:2px solid #fff}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .nav-links a{padding:10px 10px;font-size:13.5px}
  .game-grid,.pay-badges,.safety-grid,.trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
}
@media (max-width:991px){
  .burger{display:flex}
  .nav-links{position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:rgba(5,31,20,.98);border-bottom:1px solid var(--gold-line);padding:12px 4vw 18px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 12px;font-size:15px}
  .nav-links a::after{display:none}
  .hero-grid,.pain-grid,.result-layout,.coupon-hero,.news-layout,.sec-head{grid-template-columns:1fr}
  .sec-head{align-items:start}
  .game-grid,.cat-grid,.steps,.tier-grid,.coupon-grid,.voice-grid,.coupon-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .brand{max-width:60%}
  .brand-name{font-size:13px}
  .brand-name span{font-size:10px}
  .btn-x{padding:12px 18px;font-size:14px}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-grid,.cat-grid,.steps,.tier-grid,.coupon-grid,.voice-grid,.coupon-rules,.pay-badges,.safety-grid,.trust-strip,.footer-grid{grid-template-columns:1fr}
  .hero{padding-top:34px}
  .timeline{padding-left:20px}
  .timeline li::before{left:-29px}
  .fab{width:54px;height:54px;bottom:84px;left:12px}
  .footer-bottom{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* roulang page: article */
:root{
  --bg:#051F14;
  --bg-soft:#0B2E1E;
  --surface:#0E3524;
  --surface-2:#0A2A1C;
  --gold:#F59E0B;
  --gold-light:#FCD34D;
  --gold-dim:rgba(245,158,11,.28);
  --gold-line:rgba(245,158,11,.16);
  --red:#DC2626;
  --mint:#D1FAE5;
  --olive:#A3A375;
  --text:#F8FAFC;
  --muted:#9FBFAD;
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --shadow:0 18px 44px rgba(0,0,0,.45);
  --shadow-gold:0 10px 28px rgba(245,158,11,.24);
  --space:clamp(56px,7vw,96px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 12% -6%, rgba(245,158,11,.14), transparent 60%),
    radial-gradient(900px 520px at 96% 4%, rgba(16,185,129,.12), transparent 62%),
    var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-light);text-decoration:none;transition:color .2s ease,opacity .2s ease}
a:hover{color:#fff}
ul,ol{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,h4{margin:0 0 12px;font-weight:800;line-height:1.28}
p{margin:0 0 14px}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:6px}

.wrap{width:min(1220px,92%);margin:0 auto}

/* ============ SECTION ============ */
.section{padding:var(--space) 0;position:relative}
.section.alt{background:linear-gradient(180deg,rgba(11,46,30,.72),rgba(5,31,20,.15));border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.section-head{max-width:820px;margin-bottom:34px}
.section-head.center{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);border:1px solid var(--gold-dim);background:rgba(245,158,11,.08);padding:7px 14px;border-radius:999px;margin-bottom:14px}
.section-title{font-size:clamp(22px,2.6vw,34px);line-height:1.25;margin-bottom:12px}
.lead-sm{color:var(--muted);font-size:15.5px;line-height:1.7;margin:0}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:1040;background:rgba(5,31,20,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--gold-line)}
.nav-inner{display:flex;align-items:center;gap:18px;min-height:76px}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);flex:0 0 auto;max-width:46%}
.brand:hover{color:var(--text)}
.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,var(--gold),var(--gold-light));display:grid;place-items:center;color:#07251a;font-size:19px;box-shadow:var(--shadow-gold);flex:0 0 auto}
.brand-name{font-size:15px;font-weight:800;line-height:1.25;display:block}
.brand-name span{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{position:relative;display:inline-block;padding:10px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--mint);white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-links a:hover{color:#fff;background:rgba(245,158,11,.08)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--gold-light)}
.nav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.burger{display:none;width:44px;height:44px;border-radius:12px;background:rgba(245,158,11,.1);border:1px solid var(--gold-dim);color:var(--gold-light);font-size:18px;cursor:pointer;place-items:center}

/* ============ BUTTONS ============ */
.btn-x{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;border-radius:999px;font-weight:700;font-size:15px;padding:13px 24px;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07251a;box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,158,11,.34);color:#07251a}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:rgba(245,158,11,.06);border:1px solid var(--gold-dim);color:var(--gold-light)}
.btn-ghost:hover{background:rgba(245,158,11,.14);border-color:var(--gold);color:#fff;transform:translateY(-2px)}
.btn-line{background:transparent;border:1px solid rgba(209,250,229,.28);color:var(--mint)}
.btn-line:hover{border-color:var(--mint);color:#fff;background:rgba(209,250,229,.06)}
.btn-xs{padding:9px 16px;font-size:13.5px}

/* ============ PAGE HEAD (MAGAZINE HERO) ============ */
.page-head{
  position:relative;
  padding:clamp(36px,5vw,70px) 0 clamp(44px,5.6vw,84px);
  background-image:linear-gradient(115deg,rgba(5,31,20,.96) 6%,rgba(5,31,20,.78) 54%,rgba(5,31,20,.94) 100%),url('/assets/images/fd76e21ec89ad772.jpg');
  background-size:cover;
  background-position:center;
  border-bottom:1px solid var(--gold-line);
}
.mag-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:44px;align-items:start}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:18px}
.crumb a{color:var(--mint)}
.crumb a:hover{color:var(--gold-light)}
.crumb .sep{color:var(--olive)}
.crumb .now{color:var(--gold-light);max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-head h1{font-size:clamp(26px,3.1vw,44px);line-height:1.2;margin:6px 0 16px}
.head-lead{color:var(--mint);font-size:16.5px;line-height:1.7;max-width:66ch;margin:0}
.meta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--mint);background:rgba(209,250,229,.06);border:1px solid var(--gold-line);padding:7px 13px;border-radius:999px}
.chip i{color:var(--gold-light)}
.feature-card{background:linear-gradient(165deg,rgba(14,53,36,.95),rgba(6,29,19,.72));border:1px solid var(--gold-dim);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.feature-card img{width:100%;height:210px;object-fit:cover}
.fc-body{padding:22px 24px 26px}
.fc-title{font-size:18px;line-height:1.4;margin-bottom:14px}
.fc-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--mint);line-height:1.6;padding:7px 0;border-bottom:1px dashed rgba(245,158,11,.14)}
.fc-list li:last-child{border-bottom:0}
.fc-list i{color:var(--gold-light);font-size:13px;margin-top:5px}

/* ============ ARTICLE BODY ============ */
.article-card{background:linear-gradient(165deg,rgba(14,53,36,.84),rgba(6,29,19,.6));border:1px solid var(--gold-line);border-radius:var(--radius-lg);padding:clamp(22px,3.2vw,46px);box-shadow:var(--shadow)}
.article-body{max-width:84ch}
.article-body h2{font-size:clamp(21px,2.2vw,29px);margin:36px 0 14px;padding-left:16px;border-left:4px solid var(--gold);line-height:1.32}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-size:clamp(18px,1.8vw,22px);margin:26px 0 10px;color:var(--gold-light)}
.article-body p{margin:0 0 16px;color:var(--mint)}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px}
.article-body ul li{list-style:disc}
.article-body ol li{list-style:decimal}
.article-body li{margin-bottom:9px;color:var(--mint)}
.article-body strong{color:#fff}
.article-body img{border-radius:var(--radius);margin:22px 0;border:1px solid var(--gold-line)}
.article-body a{color:var(--gold-light);text-decoration:underline;text-decoration-color:var(--gold-dim);text-underline-offset:3px}
.article-body a:hover{text-decoration-color:var(--gold-light)}
.article-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.article-body th,.article-body td{border:1px solid var(--gold-line);padding:11px 13px;text-align:left}
.article-body th{background:rgba(245,158,11,.1);color:var(--gold-light);font-weight:700}
.article-body blockquote{margin:22px 0;padding:16px 20px;border-left:3px solid var(--gold);background:rgba(245,158,11,.06);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--mint)}
.article-body iframe{max-width:100%;border-radius:var(--radius-sm);border:1px solid var(--gold-line)}
.empty-state{text-align:left;padding:12px 0}
.empty-state i{font-size:30px;color:var(--gold-light)}
.empty-state h2{font-size:24px;margin:16px 0 10px}
.empty-state p{color:var(--muted);max-width:60ch}

/* ============ FACT LIST ============ */
.fact-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fact-item{background:linear-gradient(160deg,rgba(14,53,36,.86),rgba(6,29,19,.55));border:1px solid var(--gold-line);border-radius:var(--radius);padding:22px 20px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.fact-item:hover{transform:translateY(-4px);border-color:var(--gold-dim);box-shadow:0 14px 32px rgba(0,0,0,.4)}
.fact-item b{display:block;font-size:clamp(22px,2.4vw,30px);color:var(--gold-light);line-height:1.15}
.fact-item span{display:block;margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.6}
.fact-item i{color:var(--gold);font-size:16px;margin-bottom:12px;display:block}

/* ============ PLAY CARDS ============ */
.play-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.play-card{background:linear-gradient(165deg,rgba(14,53,36,.86),rgba(6,29,19,.58));border:1px solid var(--gold-line);border-radius:var(--radius-lg);overflow:hidden;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.play-card:hover{transform:translateY(-5px);border-color:var(--gold-dim);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.play-card img{width:100%;height:220px;object-fit:cover;border-bottom:1px solid var(--gold-line)}
.play-body{padding:24px}
.play-body h3{font-size:20px;margin-bottom:10px}
.play-body p{color:var(--muted);font-size:14.5px;line-height:1.7}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag{font-size:12px;font-weight:600;color:var(--gold-light);background:rgba(245,158,11,.09);border:1px solid var(--gold-line);padding:6px 12px;border-radius:999px}

/* ============ PAY GRID ============ */
.pay-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:26px}
.pay-item{background:rgba(209,250,229,.04);border:1px solid var(--gold-line);border-radius:var(--radius);padding:20px;transition:background .25s ease,border-color .25s ease}
.pay-item:hover{background:rgba(245,158,11,.08);border-color:var(--gold-dim)}
.pay-item i{font-size:19px;color:var(--gold-light)}
.pay-item b{display:block;margin:12px 0 5px;font-size:16px}
.pay-item span{font-size:13.5px;color:var(--muted);line-height:1.6}
.note-line{display:flex;gap:12px;align-items:flex-start;border:1px dashed var(--gold-dim);border-radius:var(--radius-sm);padding:16px 18px;background:rgba(245,158,11,.05);max-width:960px}
.note-line i{color:var(--gold-light);margin-top:4px}
.note-line p{margin:0;color:var(--mint);font-size:14.5px;line-height:1.7}

/* ============ HUB CARDS ============ */
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hub-card{display:flex;flex-direction:column;background:linear-gradient(165deg,rgba(14,53,36,.9),rgba(6,29,19,.6));border:1px solid var(--gold-line);border-radius:var(--radius);padding:26px 24px;color:var(--text);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.hub-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 16px 38px rgba(0,0,0,.45);color:var(--text)}
.hub-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(245,158,11,.12);border:1px solid var(--gold-dim);color:var(--gold-light);font-size:19px;margin-bottom:16px}
.hub-card h3{font-size:18px;margin-bottom:9px}
.hub-card p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:18px}
.hub-more{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--gold-light);display:inline-flex;align-items:center;gap:8px}
.hub-card:hover .hub-more i{transform:translateX(4px)}
.hub-more i{transition:transform .25s ease}

/* ============ QUOTES ============ */
.quote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.quote-card{background:rgba(209,250,229,.04);border:1px solid var(--gold-line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column}
.quote-card .stars{color:var(--gold-light);font-size:12.5px;letter-spacing:3px;margin-bottom:12px}
.quote-card p{color:var(--mint);font-size:14.5px;line-height:1.75;margin-bottom:18px}
.quote-author{margin-top:auto;display:flex;align-items:center;gap:11px}
.quote-author .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--gold),var(--gold-light));color:#07251a;font-weight:800;font-size:14px}
.quote-author b{display:block;font-size:14px}
.quote-author span{font-size:12.5px;color:var(--olive)}

/* ============ FAQ ============ */
.faq-list{display:grid;gap:14px;max-width:920px}
.faq-item{background:linear-gradient(165deg,rgba(14,53,36,.82),rgba(6,29,19,.55));border:1px solid var(--gold-line);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .25s ease}
.faq-item[open]{border-color:var(--gold-dim)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-size:16px;font-weight:700;color:var(--text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"\2b";font-weight:800;color:var(--gold-light);font-size:19px;line-height:1;transition:transform .25s ease}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:hover{color:var(--gold-light)}
.faq-a{padding:0 20px 20px;color:var(--muted);font-size:14.5px;line-height:1.75}
.faq-a p{margin:0}

/* ============ CTA BAND ============ */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--gold-dim);background-image:linear-gradient(120deg,rgba(5,31,20,.94),rgba(11,46,30,.82)),url('/assets/images/636bb2b405656c54.jpg');background-size:cover;background-position:center;padding:clamp(30px,4vw,54px);text-align:center}
.cta-band h2{font-size:clamp(22px,2.6vw,34px);margin-bottom:12px}
.cta-band p{color:var(--mint);max-width:70ch;margin:0 auto 26px;font-size:15.5px;line-height:1.7}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============ FOOTER ============ */
.site-footer{background:linear-gradient(180deg,rgba(5,31,20,.6),rgba(3,20,13,.98));border-top:1px solid var(--gold-line);padding:clamp(44px,6vw,74px) 0 26px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr .8fr .9fr 1fr;gap:34px}
.footer-brand .brand{max-width:100%;margin-bottom:16px}
.footer-brand p{color:var(--muted);font-size:14px;line-height:1.75;max-width:52ch}
.footer-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.badge-x{font-size:12px;font-weight:600;color:var(--mint);background:rgba(209,250,229,.05);border:1px solid var(--gold-line);padding:6px 12px;border-radius:999px}
.badge-x.eighteen{color:#fff;background:rgba(220,38,38,.22);border-color:rgba(220,38,38,.5)}
.footer-col h4{font-size:15px;margin-bottom:16px;color:var(--gold-light)}
.footer-col ul li{margin-bottom:10px}
.footer-col ul a{color:var(--muted);font-size:14px}
.footer-col ul a:hover{color:var(--gold-light)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:38px;padding-top:20px;border-top:1px solid var(--gold-line);color:var(--olive);font-size:12.5px;line-height:1.6}

/* ============ FAB ============ */
.fab-support{position:fixed;left:16px;bottom:24px;z-index:1050;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,#134028,#061c13 72%);border:2px solid var(--gold);color:var(--gold-light);font-size:20px;box-shadow:0 6px 25px rgba(245,158,11,.35);opacity:.86;transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease}
.fab-support:hover{opacity:1;transform:scale(1.1);color:var(--gold-light);box-shadow:0 10px 32px rgba(245,158,11,.5)}
.fab-support:active{transform:scale(.95) translateY(3px)}
.fab-float{display:grid;place-items:center;width:100%;height:100%;animation:fabFloat 3.6s ease-in-out infinite}
.fab-support:hover .fab-float{animation-play-state:paused}
.fab-float i{transition:transform .55s cubic-bezier(.3,.9,.3,1)}
.fab-support:hover .fab-float i{transform:rotate(360deg)}
.fab-dot{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #0b2e1e}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .nav-inner{flex-wrap:wrap;padding:11px 0;gap:12px}
  .burger{display:grid;margin-left:auto;order:2}
  .nav-actions{order:3;margin-left:auto}
  .nav-links{order:4;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;display:none;padding:8px 0 4px;border-top:1px solid var(--gold-line)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 12px}
  .nav-links a::after{display:none}
  .brand{max-width:100%}
  .mag-grid{grid-template-columns:1fr;gap:32px}
  .fact-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-grid,.quote-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  body{font-size:15.5px}
  .brand-name{font-size:14px}
  .brand-mark{width:38px;height:38px;font-size:17px}
  .play-grid{grid-template-columns:1fr}
  .play-card img{height:190px}
  .feature-card img{height:180px}
  .fact-list{grid-template-columns:1fr 1fr;gap:12px}
  .hub-grid,.quote-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .cta-actions .btn-x{width:100%}
  .section-head{margin-bottom:26px}
}
@media (max-width:520px){
  .wrap{width:92%}
  .page-head h1{font-size:24px}
  .head-lead{font-size:15px}
  .fact-list{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr}
  .article-card{padding:18px}
  .brand-name span{font-size:10px}
  .nav-actions .btn-x{padding:8px 12px;font-size:12.5px}
  .fab-support{width:52px;height:52px;font-size:18px;bottom:20px}
}

/* roulang page: category1 */
:root{
  --bg:#051F14;
  --bg-soft:#0B2E1E;
  --surface:#0E3524;
  --surface-2:#0A2A1C;
  --gold:#F59E0B;
  --gold-light:#FCD34D;
  --gold-dim:rgba(245,158,11,.28);
  --gold-line:rgba(245,158,11,.16);
  --red:#DC2626;
  --mint:#D1FAE5;
  --olive:#A3A375;
  --text:#F8FAFC;
  --muted:#9FBFAD;
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --shadow:0 18px 44px rgba(0,0,0,.45);
  --shadow-gold:0 10px 28px rgba(245,158,11,.24);
  --space:clamp(56px,7vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 12% -6%, rgba(245,158,11,.14), transparent 60%),
    radial-gradient(900px 520px at 96% 4%, rgba(16,185,129,.12), transparent 62%),
    var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-light);text-decoration:none;transition:color .2s ease,opacity .2s ease,background .2s ease,border-color .2s ease}
a:hover{color:#fff}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.015em}
p{margin:0}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:8px}
.wrap{width:min(1200px,92vw);margin:0 auto}
.section{padding:var(--space) 0;position:relative}
.section.alt{background:linear-gradient(180deg,rgba(11,46,30,.72),rgba(5,31,20,.15));border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.section-head{max-width:780px;margin-bottom:34px}
.section-title{font-size:clamp(23px,2.6vw,34px);line-height:1.26;margin:14px 0 12px}
.section-title-sm{font-size:clamp(19px,1.9vw,25px);line-height:1.35;margin-bottom:12px}
.lead{color:var(--mint);font-size:16.5px;line-height:1.7}
.lead-sm{color:var(--muted);font-size:15.5px;line-height:1.7}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);border:1px solid var(--gold-dim);background:rgba(245,158,11,.08);padding:7px 14px;border-radius:999px}
.eyebrow i{font-size:12px}

/* ===== HEADER ===== */
.site-header{position:sticky;top:0;z-index:1040;background:rgba(5,31,20,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--gold-line)}
.nav-inner{display:flex;align-items:center;gap:18px;min-height:76px;position:relative}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);flex:0 0 auto;max-width:44%}
.brand:hover{color:var(--text)}
.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,var(--gold),var(--gold-light));display:grid;place-items:center;color:#07251a;font-size:19px;box-shadow:var(--shadow-gold);flex:0 0 auto}
.brand-name{font-size:15px;font-weight:800;line-height:1.25;display:block}
.brand-name span{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{position:relative;display:inline-block;padding:10px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--mint);white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-links a:hover{color:#fff;background:rgba(245,158,11,.08)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--gold-light)}
.nav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.burger{display:none;width:44px;height:44px;border-radius:12px;background:rgba(245,158,11,.08);border:1px solid var(--gold-dim);color:var(--gold-light);font-size:18px;align-items:center;justify-content:center;cursor:pointer}

/* ===== BUTTONS ===== */
.btn-x{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;border-radius:999px;font-weight:700;font-size:15px;padding:13px 24px;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07251a;box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,158,11,.34);color:#07251a}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:rgba(245,158,11,.06);border:1px solid var(--gold-dim);color:var(--gold-light)}
.btn-ghost:hover{background:rgba(245,158,11,.14);border-color:var(--gold);color:#fff;transform:translateY(-2px)}
.btn-line{background:transparent;border:1px solid rgba(209,250,229,.28);color:var(--mint)}
.btn-line:hover{border-color:var(--mint);color:#fff;background:rgba(209,250,229,.06)}
.btn-xs{padding:9px 16px;font-size:13.5px}
.btn-lg{padding:15px 30px;font-size:16px}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;padding:clamp(42px,5.6vw,76px) 0 clamp(50px,6vw,88px);background-image:linear-gradient(120deg,rgba(5,31,20,.96) 6%,rgba(5,31,20,.82) 50%,rgba(5,31,20,.96) 100%),url('/assets/images/fd76e21ec89ad772.jpg');background-size:cover;background-position:center}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:110px;background:linear-gradient(180deg,transparent,var(--bg))}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.hero h1{font-size:clamp(26px,3.4vw,44px);line-height:1.2;margin:16px 0 14px}
.hero-lead{color:var(--mint);font-size:16.5px;line-height:1.7;max-width:62ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--olive);line-height:1.65;max-width:60ch}
.chip-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--mint);background:rgba(209,250,229,.06);border:1px solid var(--gold-line);border-radius:999px;padding:7px 13px}
.chip i{color:var(--gold-light);font-size:12px}
.hero-panel{background:linear-gradient(160deg,rgba(14,53,36,.94),rgba(6,29,19,.72));border:1px solid var(--gold-dim);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--gold-line);margin-bottom:16px}
.panel-head b{font-size:15px}
.live-dot{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--gold-light);font-weight:700}
.live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:pulseDot 1.7s infinite}
@keyframes pulseDot{50%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{background:rgba(5,31,20,.55);border:1px solid var(--gold-line);border-radius:var(--radius-sm);padding:13px 14px}
.stat b{display:block;font-size:18px;color:var(--gold-light)}
.stat span{font-size:12px;color:var(--muted);display:block;margin-top:2px;line-height:1.5}
.progress{margin-top:18px;height:8px;border-radius:99px;background:rgba(209,250,229,.1);overflow:hidden}
.progress i{display:block;height:100%;width:62%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.progress-meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:9px}
.progress-meta b{color:var(--gold-light)}

/* ===== CARDS ===== */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card-x{background:linear-gradient(160deg,rgba(14,53,36,.82),rgba(6,29,19,.5));border:1px solid var(--gold-line);border-radius:var(--radius);padding:24px;transition:transform .25s ease,border-color .25s ease,box-shadow .3s ease}
.card-x:hover{transform:translateY(-4px);border-color:var(--gold-dim);box-shadow:var(--shadow)}
.card-x .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(245,158,11,.12);border:1px solid var(--gold-dim);color:var(--gold-light);font-size:19px;margin-bottom:16px}
.card-x h3{font-size:17px;margin-bottom:9px}
.card-x p{color:var(--muted);font-size:14.5px;line-height:1.68}

/* ===== TWO COLUMN / STEPS ===== */
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.step-list{display:grid;gap:14px}
.step{display:flex;gap:16px;padding:18px 20px;border-radius:var(--radius-sm);background:rgba(209,250,229,.04);border:1px solid var(--gold-line);transition:border-color .25s ease,background .25s ease}
.step:hover{border-color:var(--gold-dim);background:rgba(245,158,11,.05)}
.step-no{flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:linear-gradient(140deg,var(--gold),var(--gold-light));color:#07251a;font-weight:800;display:grid;place-items:center;font-size:15px;box-shadow:var(--shadow-gold)}
.step h3{font-size:16px;margin-bottom:6px}
.step p{color:var(--muted);font-size:14.5px;line-height:1.65}
.hash-box{margin-top:22px;border:1px dashed var(--gold-dim);border-radius:var(--radius);background:rgba(5,31,20,.62);padding:20px}
.hash-row{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid var(--gold-line)}
.hash-row:last-child{border-bottom:0;padding-bottom:0}
.hash-row span{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--olive);font-weight:700}
.hash-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--gold-light);word-break:break-all;line-height:1.6}
.figure-x{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--gold-line);box-shadow:var(--shadow);background:rgba(5,31,20,.6)}
.figure-x img{width:100%;aspect-ratio:16/11;object-fit:cover}
.figure-x figcaption{font-size:13px;color:var(--muted);padding:14px 18px;line-height:1.6;background:rgba(5,31,20,.72)}

/* ===== TABLE ===== */
.tbl-wrap{overflow-x:auto;border:1px solid var(--gold-line);border-radius:var(--radius);background:rgba(10,42,28,.6)}
table.tbl-x{width:100%;border-collapse:collapse;min-width:660px}
.tbl-x th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--olive);padding:16px 18px;border-bottom:1px solid var(--gold-line);background:rgba(245,158,11,.05);font-weight:700}
.tbl-x td{padding:16px 18px;border-bottom:1px solid rgba(245,158,11,.08);font-size:14.5px;color:var(--mint);vertical-align:top;line-height:1.6}
.tbl-x tbody tr:last-child td{border-bottom:0}
.tbl-x tbody tr:hover{background:rgba(245,158,11,.05)}
.tbl-x td b{color:var(--gold-light)}
.tbl-note{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.65}

/* ===== SCENARIOS ===== */
.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.scene{border-left:2px solid var(--gold);padding:4px 0 4px 20px}
.scene h3{font-size:17px;margin-bottom:12px}
.scene ul{display:grid;gap:9px}
.scene li{font-size:14.5px;color:var(--muted);line-height:1.62;display:flex;gap:10px;align-items:flex-start}
.scene li i{color:var(--gold-light);font-size:11px;margin-top:7px;flex:0 0 auto}

/* ===== PAYMENT / BADGES ===== */
.pay-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pay-card{background:rgba(209,250,229,.04);border:1px solid var(--gold-line);border-radius:var(--radius-sm);padding:18px;transition:border-color .25s ease,transform .25s ease}
.pay-card:hover{border-color:var(--gold-dim);transform:translateY(-3px)}
.pay-card b{display:block;font-size:15px;margin-bottom:8px}
.pay-card span{display:block;font-size:13.5px;color:var(--muted);line-height:1.62}
.badge-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.badge-x{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--mint);background:rgba(245,158,11,.08);border:1px solid var(--gold-line);border-radius:999px;padding:6px 12px}
.badge-x.eighteen{background:rgba(220,38,38,.16);border-color:rgba(220,38,38,.42);color:#fecaca}
.safe-list{display:grid;gap:12px;margin-top:26px}
.safe-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--muted);line-height:1.65}
.safe-list i{color:var(--gold-light);margin-top:4px;flex:0 0 auto}

/* ===== QUOTES ===== */
.quote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.quote{background:linear-gradient(160deg,rgba(14,53,36,.8),rgba(6,29,19,.5));border:1px solid var(--gold-line);border-radius:var(--radius);padding:24px}
.stars{color:var(--gold-light);font-size:13px;letter-spacing:3px;margin-bottom:14px}
.quote p{font-size:14.5px;color:var(--mint);line-height:1.7}
.quote-author{margin-top:18px;padding-top:14px;border-top:1px solid var(--gold-line);font-size:12.5px;color:var(--olive)}
.quote-author b{display:block;color:var(--text);font-size:14px;margin-bottom:2px}

/* ===== FAQ ===== */
.faq{display:grid;gap:12px;max-width:920px}
.faq-item{background:rgba(209,250,229,.04);border:1px solid var(--gold-line);border-radius:var(--radius-sm);padding:0 20px;transition:border-color .2s ease,background .2s ease}
.faq-item[open]{border-color:var(--gold-dim);background:rgba(245,158,11,.05)}
.faq-q{cursor:pointer;list-style:none;padding:17px 32px 17px 0;font-size:15.5px;font-weight:700;position:relative;color:var(--text)}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";position:absolute;right:0;top:15px;font-size:20px;line-height:1;color:var(--gold-light);font-weight:700}
.faq-item[open] .faq-q::after{content:"\2013"}
.faq-a{padding:0 0 18px;font-size:14.5px;color:var(--muted);line-height:1.7}

/* ===== POSTS ===== */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.post-card{background:linear-gradient(160deg,rgba(14,53,36,.82),rgba(6,29,19,.5));border:1px solid var(--gold-line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease,box-shadow .3s ease}
.post-card:hover{transform:translateY(-4px);border-color:var(--gold-dim);box-shadow:var(--shadow)}
.post-thumb{display:block;position:relative;overflow:hidden}
.post-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .45s ease}
.post-card:hover .post-thumb img{transform:scale(1.05)}
.post-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--olive)}
.post-meta i{margin-right:5px;color:var(--gold-light);font-size:11.5px}
.post-card h3{font-size:16.5px;line-height:1.45}
.post-card h3 a{color:var(--text)}
.post-card h3 a:hover{color:var(--gold-light)}
.post-sum{font-size:14px;color:var(--muted);line-height:1.65}
.empty-note{padding:26px;border:1px dashed var(--gold-dim);border-radius:var(--radius-sm);color:var(--muted);font-size:14.5px;line-height:1.65}

/* ===== CTA ===== */
.cta-band{padding:clamp(46px,5.4vw,78px) 0;background-image:linear-gradient(120deg,rgba(245,158,11,.16),rgba(5,31,20,.93) 58%),url('/assets/images/636bb2b405656c54.jpg');background-size:cover;background-position:center;border-top:1px solid var(--gold-line)}
.cta-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.cta-inner h2{font-size:clamp(22px,2.6vw,32px);line-height:1.28;margin-bottom:12px}
.cta-inner p{color:var(--mint);font-size:15.5px;line-height:1.7;max-width:56ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}
.note{font-size:13px;color:var(--olive);margin-top:16px;line-height:1.62}

/* ===== FOOTER ===== */
.site-footer{background:linear-gradient(180deg,rgba(6,29,19,.6),rgba(3,18,12,.97));border-top:1px solid var(--gold-line);padding:clamp(46px,5vw,72px) 0 26px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.footer-brand p{color:var(--muted);font-size:14px;line-height:1.72;margin-top:16px;max-width:46ch}
.footer-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.footer-col h4{font-size:13.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-light);margin-bottom:16px}
.footer-col ul{display:grid;gap:10px}
.footer-col a{color:var(--muted);font-size:14px}
.footer-col a:hover{color:var(--gold-light)}
.footer-bottom{margin-top:42px;padding-top:20px;border-top:1px solid var(--gold-line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:var(--olive);line-height:1.65}

/* ===== FAB ===== */
.fab{position:fixed;left:16px;bottom:96px;z-index:1050;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,#3b2a08,#0B2E1E 72%);border:2px solid var(--gold);color:var(--gold-light);box-shadow:0 6px 25px rgba(245,158,11,.35);opacity:.85;transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease}
.fab-core{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;animation:fabFloat 3.4s ease-in-out infinite}
.fab i{font-size:20px;transition:transform .55s ease}
.fab:hover{opacity:1;transform:scale(1.1);box-shadow:0 12px 34px rgba(245,158,11,.5);color:#fff}
.fab:hover .fab-core i{transform:rotate(360deg)}
.fab:active{transform:scale(.95) translateY(3px)}
.fab .gem{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:var(--red);border:2px solid #fff}
@keyframes fabFloat{50%{transform:translateY(-6px)}}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .hero-grid,.two-col,.cta-inner{grid-template-columns:1fr}
  .card-grid,.post-grid,.quote-grid,.scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-links{position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;margin-left:0;background:rgba(5,31,20,.98);backdrop-filter:blur(18px);border-bottom:1px solid var(--gold-line);padding:12px 4vw 18px;transform:translateY(-10px);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:12px 14px;font-size:15px}
  .nav-links a::after{display:none}
  .burger{display:inline-flex;order:3}
  .nav-actions{order:2;margin-left:auto}
  .brand{max-width:52%}
}
@media (max-width:768px){
  .brand-mark{width:38px;height:38px;border-radius:11px;font-size:17px}
  .brand-name{font-size:13px}
  .brand-name span{font-size:10px}
  .nav-inner{min-height:68px;gap:12px}
  .btn-x{padding:11px 20px;font-size:14.5px}
  .hero{padding-top:36px}
  .hero-lead{font-size:15.5px}
  .section-head{margin-bottom:26px}
  .card-grid,.post-grid,.quote-grid,.scene-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fab{left:12px;bottom:88px;width:52px;height:52px}
}
@media (max-width:560px){
  .brand-mark{width:34px;height:34px;font-size:15px}
  .brand-name{font-size:11.5px;max-width:150px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .brand-name span{font-size:9.5px;letter-spacing:.06em}
  .nav-actions{gap:7px}
  .btn-xs{padding:8px 12px;font-size:12px}
  .burger{width:40px;height:40px;font-size:16px}
  .stat-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero h1{font-size:24px}
  .cta-actions{justify-content:stretch}
  .cta-actions .btn-x{width:100%}
}

/* roulang page: category3 */
:root{
  --bg:#051F14;
  --bg-soft:#0B2E1E;
  --surface:#0E3524;
  --surface-2:#0A2A1C;
  --gold:#F59E0B;
  --gold-light:#FCD34D;
  --gold-dim:rgba(245,158,11,.28);
  --gold-line:rgba(245,158,11,.16);
  --red:#DC2626;
  --mint:#D1FAE5;
  --olive:#A3A375;
  --text:#F8FAFC;
  --muted:#9FBFAD;
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --shadow:0 18px 44px rgba(0,0,0,.45);
  --shadow-gold:0 10px 28px rgba(245,158,11,.24);
  --space:clamp(56px,7vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 12% -6%, rgba(245,158,11,.14), transparent 60%),
    radial-gradient(900px 520px at 96% 4%, rgba(16,185,129,.12), transparent 62%),
    var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.01em;color:var(--text)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-light);text-decoration:none;transition:color .2s ease,opacity .2s ease,border-color .2s ease}
a:hover{color:#fff}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:1040;background:rgba(5,31,20,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--gold-line)}
.nav-inner{display:flex;align-items:center;gap:18px;min-height:76px}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);flex:0 0 auto;max-width:44%}
.brand:hover{color:var(--text)}
.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,var(--gold),var(--gold-light));display:grid;place-items:center;color:#07251a;font-size:19px;box-shadow:var(--shadow-gold);flex:0 0 auto}
.brand-name{font-size:15px;font-weight:800;line-height:1.25;display:block}
.brand-name span{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{position:relative;display:inline-block;padding:10px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--mint);white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-links a:hover{color:#fff;background:rgba(245,158,11,.08)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--gold-light)}
.nav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.burger{display:none;width:44px;height:44px;border-radius:12px;background:rgba(245,158,11,.08);border:1px solid var(--gold-dim);color:var(--gold-light);font-size:17px;align-items:center;justify-content:center;cursor:pointer;margin-left:auto}
.burger:hover{background:rgba(245,158,11,.16)}

/* ============ BUTTONS ============ */
.btn-x{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;border-radius:999px;font-weight:700;font-size:15px;padding:13px 24px;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07251a;box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,158,11,.34);color:#07251a}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:rgba(245,158,11,.06);border:1px solid var(--gold-dim);color:var(--gold-light)}
.btn-ghost:hover{background:rgba(245,158,11,.14);border-color:var(--gold);color:#fff;transform:translateY(-2px)}
.btn-line{background:transparent;border:1px solid rgba(209,250,229,.28);color:var(--mint)}
.btn-line:hover{border-color:var(--mint);color:#fff;background:rgba(209,250,229,.06)}
.btn-xs{padding:9px 16px;font-size:13.5px}
.btn-block{width:100%}

/* ============ SECTION BASICS ============ */
.section{padding:var(--space) 0;position:relative}
.section.alt{background:linear-gradient(180deg,rgba(11,46,30,.72),rgba(5,31,20,.15));border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);border:1px solid var(--gold-dim);background:rgba(245,158,11,.08);padding:7px 14px;border-radius:999px}
.sec-head{max-width:820px;margin-bottom:38px}
.sec-head h2{font-size:clamp(23px,2.9vw,36px);line-height:1.24;margin:16px 0 14px}
.sec-head p{color:var(--muted);font-size:16px;line-height:1.72}
.sec-head.center{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;padding:clamp(46px,6vw,80px) 0 clamp(52px,7vw,92px);background-image:linear-gradient(120deg,rgba(5,31,20,.95) 6%,rgba(5,31,20,.76) 50%,rgba(5,31,20,.95) 100%),url('/assets/images/6185d5f180960344.jpg');background-size:cover;background-position:center}
.hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:120px;background:linear-gradient(180deg,transparent,var(--bg))}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:start}
.hero h1{font-size:clamp(27px,3.5vw,47px);line-height:1.18;margin:18px 0 16px}
.hero-lead{color:var(--mint);font-size:17px;line-height:1.72;max-width:64ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--olive);display:flex;align-items:center;gap:8px}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:36px}
.hero-stats div{background:rgba(209,250,229,.05);border:1px solid var(--gold-line);border-radius:var(--radius-sm);padding:14px 16px}
.hero-stats b{display:block;font-size:20px;color:var(--gold-light);line-height:1.2}
.hero-stats span{font-size:12.5px;color:var(--muted);line-height:1.45;display:block;margin-top:4px}
.hero-panel{background:linear-gradient(160deg,rgba(14,53,36,.94),rgba(6,29,19,.78));border:1px solid var(--gold-dim);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.panel-tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#07251a;background:linear-gradient(135deg,var(--gold),var(--gold-light));padding:5px 12px;border-radius:999px}
.hero-panel h2{font-size:19px;margin:16px 0 8px}
.hero-panel .pnl-sub{color:var(--muted);font-size:13.5px;line-height:1.6}
.pnl-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px dashed var(--gold-line)}
.pnl-row:last-of-type{border-bottom:none}
.pnl-row .pnl-name{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600}
.pnl-row .pnl-name i{color:var(--gold-light);font-size:14px}
.pnl-row .pnl-val{font-size:13.5px;font-weight:700;color:var(--gold-light);white-space:nowrap}
.hero-panel .btn-x{margin-top:18px}
.panel-foot{margin-top:12px;font-size:12.5px;color:var(--olive);line-height:1.55}

/* ============ FEATURE CARDS ============ */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.feat{background:linear-gradient(165deg,rgba(14,53,36,.86),rgba(8,32,21,.6));border:1px solid var(--gold-line);border-radius:var(--radius);padding:24px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.feat:hover{transform:translateY(-4px);border-color:var(--gold-dim);box-shadow:0 16px 36px rgba(0,0,0,.42)}
.feat .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(245,158,11,.12);border:1px solid var(--gold-dim);color:var(--gold-light);font-size:18px}
.feat h3{font-size:17px;margin:16px 0 8px}
.feat p{color:var(--muted);font-size:14px;line-height:1.68}
.feat ul{margin-top:12px;display:grid;gap:8px}
.feat ul li{display:flex;gap:9px;font-size:13.5px;color:var(--mint);line-height:1.55}
.feat ul li i{color:var(--gold-light);font-size:12px;margin-top:4px}

/* ============ CHANNEL MATRIX ============ */
.chan{display:block;background:linear-gradient(170deg,rgba(14,53,36,.9),rgba(7,30,20,.55));border:1px solid var(--gold-line);border-radius:var(--radius);padding:26px;color:var(--text);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.chan:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 18px 40px rgba(245,158,11,.16);color:var(--text)}
.chan .chan-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chan .chan-top i{font-size:22px;color:var(--gold-light)}
.tag-x{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid var(--gold-dim);color:var(--gold-light);background:rgba(245,158,11,.08)}
.tag-x.live{border-color:rgba(16,185,129,.4);color:#6EE7B7;background:rgba(16,185,129,.12)}
.chan h3{font-size:19px;margin:18px 0 8px}
.chan p{color:var(--muted);font-size:14px;line-height:1.66}
.chan .chan-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;font-size:12.5px;color:var(--olive)}
.chan .chan-meta span{display:inline-flex;align-items:center;gap:6px}
.chan .chan-go{margin-top:18px;font-size:13.5px;font-weight:700;color:var(--gold-light);display:inline-flex;align-items:center;gap:8px}

/* ============ SCENES ============ */
.scene{display:flex;gap:18px;align-items:flex-start;padding:22px;border-radius:var(--radius);border:1px solid var(--gold-line);background:rgba(9,34,22,.55);transition:border-color .25s ease,background .25s ease}
.scene:hover{border-color:var(--gold-dim);background:rgba(12,44,29,.7)}
.scene .num{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:15px;color:#07251a;background:linear-gradient(135deg,var(--gold),var(--gold-light))}
.scene h3{font-size:16.5px;margin-bottom:7px}
.scene p{color:var(--muted);font-size:14px;line-height:1.66}
.scene-stack{display:grid;gap:16px}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.step{position:relative;background:rgba(9,34,22,.5);border:1px solid var(--gold-line);border-radius:var(--radius);padding:22px 20px}
.step b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light)}
.step h3{font-size:16px;margin:12px 0 8px}
.step p{color:var(--muted);font-size:13.5px;line-height:1.62}
.step::before{content:"";position:absolute;top:26px;right:-18px;width:18px;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.step:last-child::before{display:none}

/* ============ MEDIA BLOCK ============ */
.media-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--gold-dim);box-shadow:var(--shadow);position:relative}
.media-frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.media-frame .media-cap{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(5,31,20,.82);backdrop-filter:blur(8px);border:1px solid var(--gold-line);border-radius:var(--radius-sm);padding:12px 15px;font-size:13px;color:var(--mint);line-height:1.55}
.check-list{display:grid;gap:14px;margin-top:24px}
.check-list li{display:flex;gap:13px;align-items:flex-start}
.check-list i{color:var(--gold-light);font-size:15px;margin-top:4px}
.check-list b{display:block;font-size:15.5px;margin-bottom:4px}
.check-list p{color:var(--muted);font-size:14px;line-height:1.66}

/* ============ LEDGER ============ */
.ledger{border:1px solid var(--gold-line);border-radius:var(--radius);overflow:hidden;background:rgba(8,32,21,.6)}
.ledger-head,.ledger-row{display:grid;grid-template-columns:1.3fr 1fr 1fr .9fr;gap:14px;padding:15px 22px;align-items:center}
.ledger-head{background:rgba(245,158,11,.08);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);font-weight:700}
.ledger-row{border-top:1px solid var(--gold-line);font-size:14px;color:var(--mint)}
.ledger-row span:last-child{color:var(--gold-light);font-weight:700;text-align:right}
.ledger-head span:last-child{text-align:right}
.ledger-row:nth-child(even){background:rgba(209,250,229,.03)}
.ledger-note{margin-top:14px;font-size:12.5px;color:var(--olive);line-height:1.6}

/* ============ FAQ ============ */
.faq{display:grid;gap:14px;max-width:940px}
.faq-item{border:1px solid var(--gold-line);border-radius:var(--radius);background:rgba(9,34,22,.55);overflow:hidden;transition:border-color .25s ease}
.faq-item[open]{border-color:var(--gold-dim);background:rgba(11,42,28,.72)}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 24px;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{color:var(--gold-light);font-size:14px;transition:transform .25s ease;flex:0 0 auto}
.faq-item[open] summary i{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 24px 22px;color:var(--muted);font-size:14.5px;line-height:1.72}

/* ============ CTA BAND ============ */
.cta-band{border:1px solid var(--gold-dim);border-radius:var(--radius-lg);padding:clamp(30px,4vw,52px);background:linear-gradient(140deg,rgba(245,158,11,.14),rgba(6,29,19,.85) 58%),url('/assets/images/fd76e21ec89ad772.jpg');background-size:cover;background-position:center;text-align:center;box-shadow:var(--shadow)}
.cta-band h2{font-size:clamp(23px,2.9vw,34px);line-height:1.24;margin-bottom:14px}
.cta-band p{color:var(--mint);font-size:15.5px;line-height:1.7;max-width:70ch;margin:0 auto}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}
.cta-support{margin-top:20px;font-size:13.5px;color:var(--olive)}

/* ============ TRUST STRIP ============ */
.trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.trust-item{background:linear-gradient(160deg,rgba(14,53,36,.9),rgba(6,29,19,.6));border:1px solid var(--gold-line);border-radius:var(--radius);padding:22px}
.trust-item i{font-size:20px;color:var(--gold-light)}
.trust-item b{display:block;margin:12px 0 6px;font-size:16px}
.trust-item p{color:var(--muted);font-size:13.5px;line-height:1.6}

/* ============ FAB ============ */
.fab{position:fixed;left:16px;bottom:96px;z-index:1050;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,#1a1305,#0B2E1E 62%);border:2px solid var(--gold);color:var(--gold-light);font-size:21px;box-shadow:0 6px 25px rgba(245,158,11,.35);opacity:.85;transition:transform .25s ease,opacity .25s ease;animation:fabFloat 3.4s ease-in-out infinite}
.fab:hover{opacity:1;transform:scale(1.1);color:#fff}
.fab:active{transform:scale(.95) translateY(3px)}
.fab .dot{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #fff}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ============ FOOTER ============ */
.site-footer{background:linear-gradient(180deg,rgba(5,31,20,.4),rgba(3,20,13,.95));border-top:1px solid var(--gold-line);padding:clamp(42px,5vw,68px) 0 26px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.footer-brand p{color:var(--muted);font-size:13.5px;line-height:1.68;margin-top:16px;max-width:46ch}
.footer-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.badge-x{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--gold-line);color:var(--mint);background:rgba(209,250,229,.04)}
.badge-x.eighteen{border-color:rgba(220,38,38,.45);color:#FCA5A5;background:rgba(220,38,38,.1)}
.footer-col h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);margin-bottom:16px}
.footer-col ul li{margin-bottom:10px}
.footer-col ul li a{font-size:14px;color:var(--mint)}
.footer-col ul li a:hover{color:var(--gold-light)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;border-top:1px solid var(--gold-line);margin-top:38px;padding-top:20px;font-size:12.5px;color:var(--olive)}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .step::before{display:none}
  .trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:1024px){
  .nav-inner{flex-wrap:wrap;padding:12px 0;min-height:auto}
  .burger{display:inline-flex}
  .nav-links{order:3;width:100%;flex-direction:column;align-items:stretch;gap:2px;margin-left:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav-links.open{max-height:340px;padding-top:10px}
  .nav-links a{padding:12px 14px;font-size:15px}
  .nav-links a::after{display:none}
  .nav-links a.active{background:rgba(245,158,11,.12)}
  .nav-actions{margin-left:auto}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .grid-2{grid-template-columns:1fr;gap:30px}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger-head,.ledger-row{grid-template-columns:1.2fr 1fr .8fr;padding:14px 18px}
  .ledger-head span:nth-child(3),.ledger-row span:nth-child(3){display:none}
}
@media (max-width:700px){
  .brand{max-width:70%}
  .brand-name{font-size:13.5px}
  .nav-actions .btn-xs{padding:8px 13px;font-size:12.5px}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .sec-head{margin-bottom:28px}
  .ledger-head,.ledger-row{grid-template-columns:1.3fr .9fr;font-size:13px}
  .ledger-head span:nth-child(2),.ledger-row span:nth-child(2){display:none}
  .faq-item summary{padding:17px 18px;font-size:15px}
  .faq-item .faq-body{padding:0 18px 18px}
  .fab{bottom:120px}
}
@media (max-width:520px){
  .wrap{padding:0 16px}
  .hero-stats{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .trust-strip{grid-template-columns:1fr}
  .hero-cta .btn-x{width:100%}
  .cta-actions .btn-x{width:100%}
  .footer-bottom{flex-direction:column}
}

/* roulang page: category2 */
:root{
  --bg:#051F14;
  --bg-soft:#0B2E1E;
  --surface:#0E3524;
  --surface-2:#0A2A1C;
  --gold:#F59E0B;
  --gold-light:#FCD34D;
  --gold-dim:rgba(245,158,11,.28);
  --gold-line:rgba(245,158,11,.16);
  --red:#DC2626;
  --mint:#D1FAE5;
  --olive:#A3A375;
  --text:#F8FAFC;
  --muted:#9FBFAD;
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --shadow:0 18px 44px rgba(0,0,0,.45);
  --shadow-gold:0 10px 28px rgba(245,158,11,.24);
  --space:clamp(56px,7vw,96px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 12% -6%, rgba(245,158,11,.14), transparent 60%),
    radial-gradient(900px 520px at 96% 4%, rgba(16,185,129,.12), transparent 62%),
    var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-light);text-decoration:none;transition:color .2s ease,opacity .2s ease}
a:hover{color:#fff}
button,input,select,textarea{font-family:inherit;font-size:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.28}
p{margin:0 0 12px}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:var(--space) 0;position:relative}
.section.alt{background:linear-gradient(180deg,rgba(11,46,30,.72),rgba(5,31,20,.15));border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);border:1px solid var(--gold-dim);background:rgba(245,158,11,.08);padding:7px 14px;border-radius:999px}
.section-title{font-size:clamp(23px,2.7vw,34px);margin:14px 0 12px}
.section-title-sm{font-size:clamp(19px,1.9vw,25px);line-height:1.35;margin-bottom:12px}
.lead{color:var(--muted);font-size:16px;line-height:1.7;max-width:70ch}
.lead-sm{color:var(--muted);font-size:15.5px;line-height:1.7}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent);margin:34px 0}
.badge-x{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--mint);background:rgba(209,250,229,.06);border:1px solid var(--gold-line);border-radius:999px;padding:6px 12px}
.badge-x.eighteen{color:#FEE2E2;border-color:rgba(220,38,38,.4);background:rgba(220,38,38,.14)}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(220,38,38,.16);color:#FCA5A5;border:1px solid rgba(220,38,38,.35)}
.tag.gold{background:rgba(245,158,11,.14);color:var(--gold-light);border-color:var(--gold-dim)}
/* HEADER */
.site-header{position:sticky;top:0;z-index:1040;background:rgba(5,31,20,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--gold-line)}
.nav-inner{display:flex;align-items:center;gap:18px;min-height:76px}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);flex:0 0 auto;max-width:46%}
.brand:hover{color:var(--text)}
.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,var(--gold),var(--gold-light));display:grid;place-items:center;color:#07251a;font-size:19px;box-shadow:var(--shadow-gold);flex:0 0 auto}
.brand-name{font-size:15px;font-weight:800;line-height:1.25;display:block}
.brand-name span{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{position:relative;display:inline-block;padding:10px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--mint);white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-links a:hover{color:#fff;background:rgba(245,158,11,.08)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--gold-light)}
.nav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.burger{display:none;background:transparent;border:1px solid var(--gold-dim);color:var(--gold-light);width:42px;height:42px;border-radius:12px;cursor:pointer;align-items:center;justify-content:center;font-size:18px}
.burger:hover{background:rgba(245,158,11,.1)}
/* BUTTONS */
.btn-x{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;border-radius:999px;font-weight:700;font-size:15px;padding:13px 24px;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07251a;box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,158,11,.34);color:#07251a}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:rgba(245,158,11,.06);border:1px solid var(--gold-dim);color:var(--gold-light)}
.btn-ghost:hover{background:rgba(245,158,11,.14);border-color:var(--gold);color:#fff;transform:translateY(-2px)}
.btn-line{background:transparent;border:1px solid rgba(209,250,229,.28);color:var(--mint)}
.btn-line:hover{border-color:var(--mint);color:#fff;background:rgba(209,250,229,.06)}
.btn-xs{padding:9px 16px;font-size:13.5px}
.btn-x:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
/* HERO */
.hero{position:relative;overflow:hidden;padding:clamp(44px,6vw,78px) 0 clamp(52px,7vw,92px);background-image:linear-gradient(120deg,rgba(5,31,20,.96) 6%,rgba(5,31,20,.8) 52%,rgba(5,31,20,.95) 100%),url('/assets/images/6185d5f180960344.jpg');background-size:cover;background-position:center}
.hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:120px;background:linear-gradient(180deg,transparent,var(--bg))}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start}
.hero h1{font-size:clamp(27px,3.4vw,46px);line-height:1.18;margin:18px 0 16px}
.hero-pain{font-size:17px;font-weight:600;color:#FDE68A;border-left:3px solid var(--gold);padding-left:14px;margin-bottom:14px}
.hero-lead{color:var(--mint);font-size:16.5px;line-height:1.7;max-width:64ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px}
.hero-stats div{background:rgba(209,250,229,.05);border:1px solid var(--gold-line);border-radius:var(--radius-sm);padding:14px 16px}
.hero-stats b{display:block;font-size:19px;color:var(--gold-light);line-height:1.2}
.hero-stats span{font-size:12.5px;color:var(--muted);line-height:1.45;display:block;margin-top:4px}
.hero-form-card{background:linear-gradient(165deg,rgba(14,53,36,.96),rgba(6,29,19,.92));border:1px solid var(--gold-dim);border-radius:var(--radius-lg);padding:28px 26px;box-shadow:var(--shadow);position:relative}
.hero-form-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:linear-gradient(90deg,var(--gold),var(--gold-light),transparent)}
.hero-form-card h2{font-size:21px;margin-bottom:8px}
.hero-form-card > p{color:var(--muted);font-size:14.5px;line-height:1.65;margin-bottom:18px}
.lead-form{display:grid;gap:8px}
.lead-form label{font-size:13px;font-weight:600;color:var(--mint);margin-top:6px}
.lead-form input,.lead-form select{width:100%;background:rgba(5,31,20,.85);border:1px solid rgba(209,250,229,.18);color:var(--text);border-radius:12px;padding:12px 14px;font-size:14.5px;transition:border-color .2s ease,background .2s ease}
.lead-form input::placeholder{color:rgba(159,191,173,.7)}
.lead-form input:focus,.lead-form select:focus{border-color:var(--gold);background:rgba(5,31,20,1)}
.lead-form button{margin-top:14px;width:100%}
.lead-form small{display:block;color:var(--olive);font-size:12.5px;line-height:1.55;margin-top:12px}
.w-100{width:100%}
/* GRIDS */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.split-start{align-items:start}
/* VALUE CARDS */
.value-card{background:linear-gradient(160deg,rgba(14,53,36,.9),rgba(6,29,19,.6));border:1px solid var(--gold-line);border-radius:var(--radius);padding:24px;transition:transform .25s ease,border-color .25s ease}
.value-card:hover{transform:translateY(-4px);border-color:var(--gold-dim)}
.value-card i{font-size:20px;color:var(--gold-light)}
.value-card h3{font-size:17px;margin:14px 0 8px}
.value-card p{color:var(--muted);font-size:14px;line-height:1.65;margin:0}
.figure-frame{border:1px solid var(--gold-line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--surface-2)}
.figure-frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.figure-caption{padding:16px 20px;border-top:1px solid var(--gold-line);font-size:13.5px;color:var(--muted)}
/* GAME CARDS */
.game-card{background:linear-gradient(170deg,rgba(14,53,36,.92),rgba(6,29,19,.72));border:1px solid var(--gold-line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.game-card:hover{transform:translateY(-5px);border-color:var(--gold-dim);box-shadow:var(--shadow-gold)}
.game-media{position:relative;overflow:hidden}
.game-media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s ease}
.game-card:hover .game-media img{transform:scale(1.04)}
.game-media .tag{position:absolute;top:12px;left:12px}
.game-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.game-body h3{font-size:17px}
.game-body p{color:var(--muted);font-size:14px;line-height:1.62;margin:0}
.game-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--mint);margin-top:auto;padding-top:12px;border-top:1px dashed var(--gold-line)}
.game-meta span{display:inline-flex;align-items:center;gap:6px}
/* TABLE */
.table-shell{border:1px solid var(--gold-line);border-radius:var(--radius);overflow:hidden;background:rgba(10,42,28,.7)}
.table-scroll{overflow-x:auto}
table.payout{width:100%;border-collapse:collapse;min-width:720px}
table.payout th,table.payout td{padding:15px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid rgba(245,158,11,.1)}
table.payout thead th{background:rgba(245,158,11,.09);color:var(--gold-light);font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
table.payout tbody tr{transition:background .2s ease}
table.payout tbody tr:hover{background:rgba(245,158,11,.05)}
table.payout tbody tr:last-child td{border-bottom:none}
table.payout td.money{color:var(--gold-light);font-weight:700}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
.stat-block{border-left:2px solid var(--gold);padding:6px 0 6px 18px}
.stat-block b{display:block;font-size:26px;color:var(--gold-light);line-height:1.1}
.stat-block span{font-size:13.5px;color:var(--muted)}
/* STEPS */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:step}
.step{position:relative;padding:26px 22px 22px;border:1px solid var(--gold-line);border-radius:var(--radius);background:linear-gradient(165deg,rgba(14,53,36,.85),rgba(6,29,19,.55))}
.step::before{counter-increment:step;content:"0" counter(step);display:block;font-size:26px;font-weight:800;color:rgba(245,158,11,.42);margin-bottom:10px;letter-spacing:.04em}
.step h3{font-size:16.5px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14px;line-height:1.65;margin:0}
/* TIPS */
.tip-list{display:grid;gap:14px}
.tip-list li{display:flex;gap:14px;align-items:flex-start;background:rgba(209,250,229,.04);border:1px solid var(--gold-line);border-radius:var(--radius-sm);padding:16px 18px}
.tip-list i{color:var(--gold-light);font-size:16px;margin-top:3px}
.tip-list b{display:block;font-size:15.5px;margin-bottom:4px}
.tip-list p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}
.quote-panel{background:linear-gradient(170deg,rgba(14,53,36,.95),rgba(6,29,19,.8));border:1px solid var(--gold-dim);border-radius:var(--radius-lg);padding:28px 26px}
.quote-panel blockquote{margin:0 0 18px;font-size:16px;line-height:1.7;color:var(--mint)}
.quote-panel blockquote i{color:var(--gold-light);margin-right:8px}
.quote-author{font-size:13px;color:var(--olive);padding-bottom:18px;border-bottom:1px solid var(--gold-line)}
.mini-stats{display:grid;gap:12px;margin-top:18px}
.mini-stats div{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--muted)}
.mini-stats b{color:var(--gold-light);white-space:nowrap}
/* CATEGORY MATRIX */
.channel-card{display:block;background:linear-gradient(165deg,rgba(14,53,36,.9),rgba(6,29,19,.6));border:1px solid var(--gold-line);border-radius:var(--radius);padding:24px;color:var(--text);transition:transform .25s ease,border-color .25s ease}
.channel-card:hover{transform:translateY(-4px);border-color:var(--gold);color:var(--text)}
.channel-card i{font-size:20px;color:var(--gold-light)}
.channel-card h3{font-size:17.5px;margin:14px 0 8px}
.channel-card p{color:var(--muted);font-size:14px;line-height:1.62;margin:0 0 14px}
.channel-card span.more{font-size:13.5px;font-weight:700;color:var(--gold-light);display:inline-flex;align-items:center;gap:8px}
.channel-card.current{border-color:var(--gold-dim);box-shadow:inset 0 0 0 1px rgba(245,158,11,.2)}
/* NEWS */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.news-card{background:linear-gradient(170deg,rgba(14,53,36,.85),rgba(6,29,19,.55));border:1px solid var(--gold-line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease,border-color .25s ease}
.news-card:hover{transform:translateY(-4px);border-color:var(--gold-dim)}
.news-card h3{font-size:16.5px;line-height:1.45}
.news-card h3 a{color:var(--text)}
.news-card h3 a:hover{color:var(--gold-light)}
.news-card p{color:var(--muted);font-size:14px;line-height:1.62;margin:0}
.news-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--olive);margin-top:auto;padding-top:12px;border-top:1px dashed var(--gold-line)}
.empty-note{color:var(--muted);font-size:14.5px;border:1px dashed var(--gold-dim);border-radius:var(--radius-sm);padding:20px;background:rgba(209,250,229,.03)}
/* FAQ */
.faq-list{display:grid;gap:12px;max-width:960px}
.faq-item{border:1px solid var(--gold-line);border-radius:var(--radius-sm);background:rgba(10,42,28,.6);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 20px;font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:16px;transition:background .2s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;font-size:13px;color:var(--gold-light);transition:transform .25s ease}
.faq-item[open] summary{background:rgba(245,158,11,.07)}
.faq-item[open] summary::after{content:"\f068"}
.faq-item summary:hover{background:rgba(245,158,11,.06)}
.faq-item .faq-body{padding:0 20px 20px;color:var(--muted);font-size:14.5px;line-height:1.7}
/* CTA */
.cta-band{position:relative;overflow:hidden;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);background-image:linear-gradient(110deg,rgba(5,31,20,.95),rgba(5,31,20,.82)),url('/assets/images/fd76e21ec89ad772.jpg');background-size:cover;background-position:center}
.cta-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center}
.cta-inner h2{font-size:clamp(22px,2.5vw,31px);margin-bottom:12px}
.cta-inner p{color:var(--mint);font-size:15.5px;line-height:1.7}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.cta-panel{border:1px solid var(--gold-dim);border-radius:var(--radius);padding:24px;background:rgba(5,31,20,.6)}
.cta-panel ul{display:grid;gap:12px}
.cta-panel li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--mint)}
.cta-panel i{color:var(--gold-light);margin-top:4px}
/* FOOTER */
.site-footer{background:linear-gradient(180deg,rgba(6,29,19,.9),rgba(3,20,13,1));border-top:1px solid var(--gold-line);padding:56px 0 26px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.footer-brand .brand{margin-bottom:16px;max-width:100%}
.footer-brand p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:16px}
.footer-badges{display:flex;flex-wrap:wrap;gap:8px}
.footer-col h4{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px}
.footer-col ul{display:grid;gap:10px}
.footer-col a{color:var(--muted);font-size:14.5px}
.footer-col a:hover{color:var(--gold-light)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;border-top:1px solid var(--gold-line);margin-top:38px;padding-top:20px;font-size:13px;color:var(--olive)}
/* FAB */
.fab{position:fixed;left:16px;bottom:96px;z-index:1050;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#07251a;font-size:21px;background:radial-gradient(circle at 32% 26%,#FCD34D,#F59E0B 62%,#B45309);border:2px solid rgba(252,211,77,.85);box-shadow:0 6px 25px rgba(245,158,11,.35);opacity:.85;transition:transform .25s ease,opacity .25s ease}
.fab:hover{opacity:1;transform:scale(1.1);color:#07251a}
.fab:active{transform:scale(.95) translateY(3px)}
.fab .fab-dot{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#DC2626;border:2px solid #fff}
.fab .fab-i{transition:transform .45s ease}
.fab:hover .fab-i{transform:rotate(360deg)}
/* RESPONSIVE */
@media (max-width:1100px){
  .nav-links a{padding:9px 10px;font-size:14px}
  .brand{max-width:38%}
}
@media (max-width:1024px){
  .hero-grid,.split,.cta-inner{grid-template-columns:1fr;gap:32px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .burger{display:inline-flex;order:3;margin-left:auto}
  .nav-links{position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:12px 20px 20px;background:rgba(5,31,20,.98);border-bottom:1px solid var(--gold-line);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;font-size:15px}
  .nav-actions{order:4;margin-left:0}
  .brand{max-width:60%}
}
@media (max-width:768px){
  .grid-2,.grid-3,.grid-4,.news-grid,.steps,.stat-row{grid-template-columns:1fr}
  .hero-form-card{padding:22px 20px}
  .footer-grid{grid-template-columns:1fr}
  .fab{left:12px;bottom:82px;width:54px;height:54px}
}
@media (max-width:600px){
  body{font-size:15.5px}
  .brand-name{font-size:12.5px}
  .brand-name span{display:none}
  .brand-mark{width:36px;height:36px;font-size:16px;border-radius:11px}
  .nav-actions .btn-xs{padding:8px 13px;font-size:12.5px}
  .hero-stats{grid-template-columns:1fr 1fr}
  .cta-actions .btn-x{width:100%}
  .footer-bottom{flex-direction:column}
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}