/* roulang page: index */
:root{
  --bg:#051F14;
  --bg-soft:#07291B;
  --bg-deep:#03150D;
  --panel:linear-gradient(160deg,rgba(13,51,35,.92),rgba(6,27,18,.92));
  --gold:#F59E0B;
  --gold-2:#FCD34D;
  --gold-dim:rgba(245,158,11,.18);
  --red:#DC2626;
  --text:#F8FAFC;
  --muted:#D1FAE5;
  --muted-2:#A3A375;
  --line:rgba(245,158,11,.24);
  --line-soft:rgba(245,158,11,.12);
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;
  --shadow:0 22px 50px -26px rgba(0,0,0,.9);
  --shadow-gold:0 16px 38px -18px rgba(245,158,11,.75);
  --container:1200px;
  --gap:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 85% -8%,rgba(245,158,11,.12),transparent 62%),
    radial-gradient(900px 520px at -8% 22%,rgba(16,185,129,.10),transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .22s ease,opacity .22s ease}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{line-height:1.24;margin:0 0 .65rem;font-weight:800;letter-spacing:-.015em}
h1{font-size:clamp(1.75rem,4.1vw,3rem)}
h2{font-size:clamp(1.45rem,2.7vw,2.15rem)}
h3{font-size:clamp(1.08rem,1.7vw,1.32rem)}
p{margin:0 0 1rem;color:var(--muted)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:6px}

.container-x{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.sec{padding:76px 0;position:relative}
.sec-tight{padding:56px 0}
.sec-alt{background:linear-gradient(180deg,#072417 0%,#051F14 100%);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.sec-deep{background:linear-gradient(180deg,#03150D 0%,#051F14 100%);border-top:1px solid var(--line-soft)}
.sec-head{max-width:780px;margin-bottom:36px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin-bottom:.5rem}
.sec-head p{font-size:1.02rem;opacity:.92;margin-bottom:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.71rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(245,158,11,.09);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.34rem .78rem;margin-bottom:14px;
}
.eyebrow i{color:var(--gold)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1040;
  background:rgba(4,24,15,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.95);
}
.site-nav{padding:0}
.site-nav .container-x{display:flex;align-items:center;gap:14px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;padding:0;margin-right:auto}
.brand-mark{
  width:44px;height:44px;border-radius:13px;flex:0 0 44px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;display:grid;place-items:center;font-size:1.15rem;
  box-shadow:var(--shadow-gold);
}
.brand-text{display:flex;flex-direction:column;line-height:1.12}
.brand-text strong{font-size:1.02rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.brand-text small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-menu{justify-content:flex-end;gap:4px}
.nav-menu .nav-link{
  color:var(--muted);font-weight:600;font-size:.94rem;
  padding:.5rem .85rem;border-radius:var(--radius-pill);position:relative;
}
.nav-menu .nav-link:hover{color:var(--gold-2);background:rgba(245,158,11,.10)}
.nav-menu .nav-link.active{color:#062417;background:linear-gradient(135deg,var(--gold),var(--gold-2));font-weight:800}
.navbar-toggler{
  border:1px solid var(--line);border-radius:11px;padding:.42rem .6rem;
  background:rgba(245,158,11,.08);color:var(--gold-2);box-shadow:none;
}
.navbar-toggler:focus{box-shadow:none;outline:2px solid var(--gold-2)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(245,158,11,.5);color:var(--gold-2);
  background:transparent;border-radius:var(--radius-pill);
  padding:.5rem 1rem;font-size:.9rem;font-weight:700;transition:all .24s ease;
}
.btn-ghost:hover{background:rgba(245,158,11,.16);color:#fff;border-color:var(--gold)}
.btn-gold{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;border:0;border-radius:var(--radius-pill);
  padding:.55rem 1.15rem;font-size:.92rem;font-weight:800;
  box-shadow:0 12px 28px -14px rgba(245,158,11,.95);transition:all .24s ease;
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(245,158,11,1);color:#03150D}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-lg-x{padding:.8rem 1.55rem;font-size:1rem}

/* ---------- Hero ---------- */
.hero{padding:58px 0 72px;position:relative;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;background-image:url('/assets/images/804a5c8e63b12f93.jpg');
  background-size:cover;background-position:center;opacity:.20;filter:saturate(1.1);
}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,31,20,.75) 0%,rgba(5,31,20,.96) 68%,#051F14 100%)}
.hero .container-x{position:relative;z-index:2}
.hero h1{margin-bottom:1rem}
.hero h1 .hl{
  background:linear-gradient(120deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{font-size:1.05rem;max-width:620px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.chip{
  display:inline-flex;align-items:center;gap:8px;font-size:.83rem;font-weight:700;
  color:var(--muted);background:rgba(13,51,35,.85);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.42rem .85rem;
}
.chip i{color:var(--gold)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-note{font-size:.82rem;color:var(--muted-2);margin-top:16px}

.live-panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.live-media{position:relative}
.live-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.live-media .live-tag{
  position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px;
  background:rgba(220,38,38,.94);color:#fff;font-size:.7rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:.3rem .6rem;border-radius:7px;
}
.live-media .live-tag .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.3s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.live-media .media-cap{
  position:absolute;left:0;right:0;bottom:0;padding:32px 16px 14px;
  background:linear-gradient(180deg,transparent,rgba(3,21,13,.94));
  font-size:.86rem;color:var(--muted);margin:0;font-weight:600;
}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 16px 4px}
.cd-cell{
  background:rgba(3,21,13,.72);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.6rem .3rem;text-align:center;
}
.cd-cell b{display:block;font-size:1.32rem;color:var(--gold-2);font-weight:800;line-height:1.1}
.cd-cell span{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.live-form{padding:14px 16px 20px}
.live-form label{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:6px}
.form-row{display:flex;gap:8px;flex-wrap:wrap}
.form-row input,.cta-form input,.cta-form select{
  flex:1 1 170px;min-width:0;background:rgba(3,21,13,.8);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.7rem .9rem;color:var(--text);transition:border-color .2s ease;
}
.form-row input::placeholder,.cta-form input::placeholder{color:#7f9c8c}
.form-row input:focus,.cta-form input:focus,.cta-form select:focus{border-color:var(--gold);outline:none}
.form-note{font-size:.78rem;color:var(--muted-2);margin:.6rem 0 0}

/* ---------- Stats ---------- */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-item{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;transition:transform .25s ease,border-color .25s ease;
}
.stat-item:hover{transform:translateY(-4px);border-color:rgba(245,158,11,.6)}
.stat-item b{display:block;font-size:1.75rem;font-weight:800;color:var(--gold-2);line-height:1.1;margin-bottom:6px}
.stat-item span{font-size:.9rem;color:var(--muted);opacity:.9}

/* ---------- Cards ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;height:100%;transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease;
}
.panel:hover{transform:translateY(-5px);border-color:rgba(245,158,11,.62);box-shadow:var(--shadow)}
.panel .ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(245,158,11,.14);border:1px solid var(--line);color:var(--gold-2);font-size:1.1rem;margin-bottom:14px;
}
.panel h3{font-size:1.1rem;margin-bottom:.45rem}
.panel p{margin:0;font-size:.94rem;opacity:.92}
.panel .flag{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(220,38,38,.9);border-radius:6px;padding:.2rem .5rem;margin-bottom:12px;
}

/* ---------- Solution band ---------- */
.band{
  background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  overflow:hidden;
}
.band img{width:100%;height:100%;min-height:280px;object-fit:cover}
.band-body{padding:34px 32px}
.check-list li{
  display:flex;gap:12px;align-items:flex-start;padding:10px 0;
  border-bottom:1px dashed var(--line-soft);font-size:.95rem;color:var(--muted);
}
.check-list li:last-child{border-bottom:0}
.check-list i{color:var(--gold);margin-top:5px}

/* ---------- Category wall ---------- */
.cat-card{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:#08271A;height:100%;
  transition:transform .28s ease,border-color .28s ease;
}
.cat-card:hover{transform:translateY(-6px);border-color:rgba(245,158,11,.7)}
.cat-card img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.78;transition:transform .5s ease,opacity .3s ease}
.cat-card:hover img{transform:scale(1.05);opacity:.92}
.cat-card .cat-body{padding:20px 22px 24px}
.cat-card h3{margin-bottom:.35rem}
.cat-card p{font-size:.92rem;margin-bottom:14px}
.cat-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold-2);font-weight:800;font-size:.88rem}
.cat-link i{transition:transform .25s ease}
.cat-card:hover .cat-link i{transform:translateX(5px)}

/* ---------- Steps ---------- */
.step{
  position:relative;padding:24px 22px 22px;border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(13,51,35,.85),rgba(4,22,14,.9));
  border:1px solid var(--line);height:100%;
}
.step .num{
  font-size:2.1rem;font-weight:800;line-height:1;
  background:linear-gradient(120deg,var(--gold),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px;display:block;
}
.step h3{font-size:1.05rem}
.step p{font-size:.92rem;margin:0}

/* ---------- Game grid ---------- */
.game-card{
  border-radius:16px;overflow:hidden;background:#08271A;border:1px solid rgba(245,158,11,.22);
  height:100%;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;position:relative;
}
.game-card:hover{transform:translateY(-6px);border-color:rgba(245,158,11,.7);box-shadow:var(--shadow)}
.game-thumb{position:relative;overflow:hidden}
.game-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
.game-card:hover .game-thumb img{transform:scale(1.07)}
.game-thumb .tag{
  position:absolute;top:10px;left:10px;background:rgba(220,38,38,.94);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.24rem .55rem;border-radius:6px;
}
.game-thumb .tag.gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#062417}
.game-body{padding:16px 18px 20px}
.game-body h3{font-size:1.02rem;margin-bottom:.35rem}
.game-body p{font-size:.89rem;margin:0}

/* ---------- Money method ---------- */
.method-list{counter-reset:m;margin:0}
.method-list li{
  counter-increment:m;position:relative;padding:14px 0 14px 52px;
  border-bottom:1px solid var(--line-soft);color:var(--muted);font-size:.96rem;
}
.method-list li:last-child{border-bottom:0}
.method-list li::before{
  content:counter(m,decimal-leading-zero);position:absolute;left:0;top:13px;
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(245,158,11,.14);border:1px solid var(--line);color:var(--gold-2);
  font-size:.82rem;font-weight:800;
}
.ratio-box{
  background:linear-gradient(150deg,rgba(245,158,11,.16),rgba(3,21,13,.85));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;height:100%;
}
.ratio-box .big{font-size:2.4rem;font-weight:800;color:var(--gold-2);line-height:1}
.ratio-box p{font-size:.93rem;margin:.6rem 0 0}

/* ---------- Security ---------- */
.security{
  position:relative;overflow:hidden;border-radius:calc(var(--radius) + 6px);
  border:1px solid var(--line);background-image:url('/assets/images/09cfd34a13a97264.jpg');
  background-size:cover;background-position:center;
}
.security::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(3,21,13,.96) 32%,rgba(3,21,13,.72) 100%)}
.security .inner{position:relative;z-index:2;padding:44px 40px}
.sec-feature{
  display:flex;gap:14px;align-items:flex-start;padding:16px;
  background:rgba(6,27,18,.72);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.sec-feature i{color:var(--gold-2);font-size:1.15rem;margin-top:3px}
.sec-feature h4{font-size:1rem;margin-bottom:.25rem}
.sec-feature p{font-size:.89rem;margin:0}

/* ---------- Data bars ---------- */
.metric{margin-bottom:22px}
.metric .top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:8px}
.metric .top b{font-size:.98rem;font-weight:700;color:var(--text)}
.metric .top span{font-size:.95rem;font-weight:800;color:var(--gold-2)}
.bar{height:9px;border-radius:var(--radius-pill);background:rgba(245,158,11,.13);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--gold),var(--gold-2))}

/* ---------- Quotes ---------- */
.quote{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);padding:24px 22px;height:100%;
}
.quote p{font-size:.95rem;font-style:italic;color:var(--text);opacity:.94}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:16px}
.quote .who .av{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#062417;font-size:.9rem;
}
.quote .who b{display:block;font-size:.9rem}
.quote .who small{color:var(--muted-2);font-size:.78rem}
.stars{color:var(--gold-2);font-size:.82rem;letter-spacing:2px;margin-bottom:10px;display:block}

/* ---------- Comparison ---------- */
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:.94rem}
.cmp th,.cmp td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.cmp thead th{background:rgba(245,158,11,.10);color:var(--gold-2);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.cmp td:first-child{color:var(--muted-2);font-weight:600}
.cmp .good{color:#8EF0C0;font-weight:600}
.cmp-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(4,22,14,.7)}

/* ---------- Payments ---------- */
.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pay-item{
  display:flex;align-items:center;gap:12px;padding:18px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:transform .25s ease,border-color .25s ease;
}
.pay-item:hover{transform:translateY(-4px);border-color:rgba(245,158,11,.6)}
.pay-item i{font-size:1.35rem;color:var(--gold-2)}
.pay-item b{display:block;font-size:.95rem}
.pay-item small{color:var(--muted-2);font-size:.78rem}

/* ---------- Tiers ---------- */
.tier{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;height:100%;position:relative;display:flex;flex-direction:column;
}
.tier.hot{border-color:rgba(245,158,11,.75);box-shadow:var(--shadow-gold);transform:translateY(-6px)}
.tier .lvl{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:800}
.tier .amt{font-size:1.9rem;font-weight:800;color:var(--gold-2);margin:.4rem 0 .2rem;line-height:1.1}
.tier p{font-size:.92rem}
.tier ul{margin:14px 0 20px;flex:1}
.tier li{display:flex;gap:10px;font-size:.91rem;padding:7px 0;color:var(--muted)}
.tier li i{color:var(--gold);margin-top:5px}
.tier .ribbon{
  position:absolute;top:-12px;right:20px;background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:var(--radius-pill);
}

/* ---------- News ---------- */
.news-list{background:rgba(4,22,14,.72);border:1px solid var(--line);border-radius:var(--radius);padding:10px 24px}
.news-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px dashed var(--line-soft);align-items:flex-start}
.news-item:last-child{border-bottom:0}
.news-item .idx{font-family:'Courier New',monospace;font-weight:800;color:var(--gold-2);min-width:30px;font-size:.9rem;padding-top:3px}
.news-item h3{font-size:1rem;margin-bottom:.3rem;transition:color .2s ease}
.news-item:hover h3{color:var(--gold-2)}
.news-item p{font-size:.88rem;margin:0 0 .35rem}
.news-meta{font-size:.76rem;color:var(--muted-2);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.side-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
.side-box h3{font-size:1.05rem;margin-bottom:14px}
.side-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line-soft)}
.side-item:last-child{border-bottom:0;padding-bottom:0}
.side-item i{color:var(--gold);margin-top:5px}
.side-item b{font-size:.92rem;font-weight:600;display:block}
.side-item small{color:var(--muted-2);font-size:.76rem}
.empty-note{padding:22px 0;color:var(--muted-2);font-style:italic;margin:0}

/* ---------- FAQ ---------- */
.faq-item{
  background:rgba(4,22,14,.7);border:1px solid var(--line);border-radius:var(--radius-sm);
  margin-bottom:12px;overflow:hidden;transition:border-color .25s ease;
}
.faq-item[open]{border-color:rgba(245,158,11,.66)}
.faq-item summary{
  cursor:pointer;padding:18px 22px;font-weight:700;font-size:1rem;
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.78rem;color:var(--gold-2);transition:transform .25s ease;margin-top:5px}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item .ans{padding:0 22px 20px;color:var(--muted);font-size:.94rem;margin:0}

/* ---------- CTA ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:calc(var(--radius) + 8px);
  border:1px solid var(--line);background:linear-gradient(140deg,rgba(13,51,35,.96),rgba(3,21,13,.96));
  padding:48px 44px;
}
.cta-band::after{
  content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.28),transparent 68%);
}
.cta-band .inner{position:relative;z-index:2}
.cta-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.cta-form input{flex:1 1 200px}
.cta-form select{flex:1 1 160px;background:rgba(3,21,13,.8)}
.cta-form select option{background:#062417}

/* ---------- Footer ---------- */
.site-footer{background:#03150D;border-top:1px solid var(--line-soft);padding:60px 0 26px;margin-top:0}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-col h4{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:16px}
.foot-col a,.foot-col li{display:block;font-size:.92rem;color:var(--muted);opacity:.88;padding:5px 0}
.foot-col a:hover{color:var(--gold-2);opacity:1}
.foot-badge{
  display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:800;
  letter-spacing:.1em;border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.32rem .7rem;color:var(--muted-2);margin:0 8px 8px 0;
}
.foot-divider{height:1px;background:var(--line-soft);margin:34px 0 22px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:.84rem;color:var(--muted-2)}
.foot-bottom a{color:var(--gold-2)}

/* ---------- 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%,#2b1206,#0a2a1b 72%);
  border:2px solid var(--gold);
  color:var(--gold-2);font-size:1.35rem;
  box-shadow:0 10px 30px -8px rgba(245,158,11,.45);
  opacity:.86;transition:transform .3s ease,opacity .3s ease,box-shadow .3s ease;
  animation:floaty 3.6s ease-in-out infinite;
}
.fab:hover{opacity:1;transform:scale(1.1);box-shadow:0 14px 36px -8px rgba(245,158,11,.7)}
.fab:hover i{transform:rotate(360deg);transition:transform .7s ease}
.fab:active{transform:scale(.94) translateY(3px)}
.fab .badge-dot{
  position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 2px #051F14;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- Responsive ---------- */
@media (max-width:1199px){
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .pay-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .site-nav .container-x{min-height:66px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .brand-text small{display:none}
  .nav-menu{
    flex-basis:100%;background:rgba(4,24,15,.98);border:1px solid var(--line);
    border-radius:var(--radius);padding:10px;margin-top:10px;
  }
  .nav-menu .nav-link{padding:.6rem .8rem}
  .sec{padding:60px 0}
  .hero{padding:40px 0 56px}
  .band img{min-height:220px}
  .security .inner{padding:32px 24px}
  .cta-band{padding:34px 24px}
  .tier.hot{transform:none}
}
@media (max-width:767px){
  body{font-size:15.4px}
  .stat-strip{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr}
  .cd-cell b{font-size:1.12rem}
  .countdown{padding:14px 14px 2px}
  .live-form{padding:12px 14px 18px}
  .brand-mark{width:40px;height:40px;flex:0 0 40px;font-size:1rem}
  .brand-text strong{font-size:.95rem}
  .btn-ghost{padding:.45rem .75rem;font-size:.84rem}
  .btn-gold{padding:.5rem .9rem;font-size:.86rem}
  .cmp{font-size:.86rem}
  .cmp th,.cmp td{padding:12px 12px}
  .fab{width:54px;height:54px;bottom:88px}
}
@media (max-width:520px){
  .container-x{padding:0 16px}
  .panel{padding:22px 18px}
  .sec-head{margin-bottom:26px}
  .hero-actions .btn-gold,.hero-actions .btn-ghost{width:100%;justify-content:center}
  .cta-form input,.cta-form select,.cta-form button{flex:1 1 100%;width:100%}
  .news-list{padding:6px 16px}
  .cmp thead{display:none}
  .cmp td{display:block;border-bottom:0;padding:8px 14px}
  .cmp tr{display:block;border-bottom:1px solid var(--line-soft);padding:6px 0}
}

/* roulang page: article */
:root{
  --bg:#051F14;
  --bg-soft:#07291B;
  --bg-deep:#03150D;
  --panel:linear-gradient(160deg,rgba(13,51,35,.92),rgba(6,27,18,.92));
  --gold:#F59E0B;
  --gold-2:#FCD34D;
  --gold-dim:rgba(245,158,11,.18);
  --red:#DC2626;
  --text:#F8FAFC;
  --muted:#D1FAE5;
  --muted-2:#A3A375;
  --line:rgba(245,158,11,.24);
  --line-soft:rgba(245,158,11,.12);
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;
  --shadow:0 22px 50px -26px rgba(0,0,0,.9);
  --shadow-gold:0 16px 38px -18px rgba(245,158,11,.75);
  --container:1200px;
  --gap:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 85% -8%,rgba(245,158,11,.12),transparent 62%),
    radial-gradient(900px 520px at -8% 22%,rgba(16,185,129,.10),transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .22s ease,opacity .22s ease}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0 0 .7rem;line-height:1.26;font-weight:800;color:#fff;letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,3.4vw,2.5rem)}
h2{font-size:clamp(1.28rem,2.5vw,1.85rem)}
h3{font-size:1.1rem}
p{margin:0 0 1rem}
.container-x{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.71rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(245,158,11,.09);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.34rem .78rem;margin-bottom:14px;
}
.eyebrow i{color:var(--gold)}
/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1040;
  background:rgba(4,24,15,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.95);
}
.site-nav{padding:0}
.site-nav .container-x{display:flex;align-items:center;gap:14px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;padding:0;margin-right:auto}
.brand-mark{
  width:44px;height:44px;border-radius:13px;flex:0 0 44px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;display:grid;place-items:center;font-size:1.15rem;
  box-shadow:var(--shadow-gold);
}
.brand-text{display:flex;flex-direction:column;line-height:1.12}
.brand-text strong{font-size:1.02rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.brand-text small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-menu{justify-content:flex-end;gap:4px}
.nav-menu .nav-link{
  color:var(--muted);font-weight:600;font-size:.94rem;
  padding:.5rem .85rem;border-radius:var(--radius-pill);
}
.nav-menu .nav-link:hover{color:var(--gold-2);background:rgba(245,158,11,.10)}
.nav-menu .nav-link.active{color:#062417;background:linear-gradient(135deg,var(--gold),var(--gold-2));font-weight:800}
.navbar-toggler{
  border:1px solid var(--line);border-radius:11px;padding:.42rem .6rem;
  background:rgba(245,158,11,.08);color:var(--gold-2);box-shadow:none;
}
.navbar-toggler:focus{box-shadow:none;outline:2px solid var(--gold-2)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(245,158,11,.5);color:var(--gold-2);
  background:transparent;border-radius:var(--radius-pill);
  padding:.5rem 1rem;font-size:.9rem;font-weight:700;transition:all .24s ease;
}
.btn-ghost:hover{background:rgba(245,158,11,.16);color:#fff;border-color:var(--gold)}
.btn-gold{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;border:0;border-radius:var(--radius-pill);
  padding:.55rem 1.15rem;font-size:.92rem;font-weight:800;
  box-shadow:0 12px 28px -14px rgba(245,158,11,.95);transition:all .24s ease;
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(245,158,11,1);color:#03150D}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-lg-x{padding:.82rem 1.6rem;font-size:1rem}
.btn-quiet{
  display:inline-flex;align-items:center;gap:8px;color:var(--muted);
  border:1px solid var(--line-soft);border-radius:var(--radius-pill);
  padding:.55rem 1.1rem;font-size:.9rem;font-weight:700;background:rgba(3,21,13,.5);
}
.btn-quiet:hover{color:var(--gold-2);border-color:var(--line)}
/* ---------- Article hero ---------- */
.art-hero{position:relative;padding:52px 0 58px;overflow:hidden}
.art-hero-bg{
  position:absolute;inset:0;background-image:url('/assets/images/c6d1beccb6813538.jpg');
  background-size:cover;background-position:center;opacity:.22;
}
.art-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,31,20,.82) 0%,rgba(5,31,20,.96) 70%,#051F14 100%)}
.art-hero .container-x{position:relative;z-index:2}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.82rem;color:var(--muted-2);margin-bottom:16px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--gold-2)}
.crumb i{font-size:.6rem;opacity:.7}
.art-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}
.art-lead{font-size:1.03rem;color:var(--muted);max-width:660px}
.meta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.meta-item{
  display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;
  color:var(--muted);background:rgba(13,51,35,.85);border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);padding:.38rem .82rem;
}
.meta-item i{color:var(--gold)}
.art-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.art-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.art-media .media-cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 16px 14px;
  background:linear-gradient(180deg,transparent,rgba(3,21,13,.95));
  font-size:.85rem;color:var(--muted);font-weight:600;
}
.quick-panel{
  margin-top:16px;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow);
}
.quick-panel h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.quick-list{list-style:none;margin:0;padding:0}
.quick-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--muted);padding:.4rem 0;border-bottom:1px dashed var(--line-soft)}
.quick-list li:last-child{border-bottom:0}
.quick-list i{color:var(--gold);margin-top:.28rem}
/* ---------- Sections ---------- */
.sec{padding:62px 0;position:relative}
.sec-alt{background:linear-gradient(180deg,rgba(3,21,13,.6),rgba(5,31,20,.2))}
.sec-head{max-width:780px;margin-bottom:34px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{color:var(--muted);margin-bottom:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.split-wide{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--gap);align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.panel{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
}
.art-panel{padding:30px 30px 18px}
/* ---------- Article body ---------- */
.article-body{font-size:1.02rem;color:#E3F3EA}
.article-body h2{font-size:1.45rem;margin:2.2rem 0 .9rem;padding-left:14px;border-left:4px solid var(--gold)}
.article-body h3{font-size:1.18rem;margin:1.7rem 0 .6rem;color:var(--gold-2)}
.article-body h4{font-size:1.02rem;margin:1.3rem 0 .5rem;color:#fff}
.article-body p{color:var(--muted);margin:0 0 1.05rem}
.article-body ul,.article-body ol{color:var(--muted);padding-left:1.35rem;margin:0 0 1.2rem}
.article-body li{margin-bottom:.5rem}
.article-body a{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--gold)}
.article-body img{border-radius:var(--radius);border:1px solid var(--line-soft);margin:1.3rem 0}
.article-body blockquote{
  margin:1.4rem 0;padding:16px 20px;border-left:4px solid var(--gold);
  background:rgba(245,158,11,.07);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--muted);font-style:italic;
}
.article-body table{width:100%;border-collapse:collapse;margin:1.3rem 0;font-size:.94rem}
.article-body th,.article-body td{padding:.7rem .85rem;border-bottom:1px solid var(--line-soft);text-align:left;color:var(--muted)}
.article-body th{color:var(--gold-2);font-weight:800;background:rgba(245,158,11,.07)}
.article-body hr{border:0;border-top:1px solid var(--line-soft);margin:2rem 0}
.empty-state{
  text-align:center;padding:52px 24px;border:1px dashed var(--line);
  border-radius:var(--radius);background:rgba(3,21,13,.6);
}
.empty-state i{font-size:1.9rem;color:var(--gold);margin-bottom:14px;display:block}
.empty-state p{color:var(--muted);margin-bottom:18px}
/* ---------- Stats ---------- */
.stat-card{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);height:100%;
}
.stat-card .num{font-size:1.72rem;font-weight:800;color:var(--gold-2);line-height:1.1;display:block}
.stat-card .lbl{font-size:.88rem;color:var(--muted);display:block;margin-top:6px}
.stat-card i{color:var(--gold);font-size:1.1rem;margin-bottom:10px;display:block}
/* ---------- Lists & steps ---------- */
.check-list{list-style:none;margin:0;padding:0}
.check-list li{display:flex;gap:11px;align-items:flex-start;padding:.55rem 0;color:var(--muted);font-size:.95rem}
.check-list i{color:var(--gold);margin-top:.3rem}
.steps{list-style:none;margin:0;padding:0;counter-reset:st}
.steps li{position:relative;padding:0 0 22px 52px;counter-increment:st}
.steps li::before{
  content:counter(st,decimal-leading-zero);position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#062417;
  font-weight:800;font-size:.86rem;
}
.steps li::after{content:"";position:absolute;left:17px;top:42px;bottom:6px;width:1px;background:var(--line-soft)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h4{margin-bottom:.25rem;font-size:1rem}
.steps p{color:var(--muted);font-size:.93rem;margin:0}
.hall-card{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);height:100%;transition:transform .26s ease,border-color .26s ease;
}
.hall-card:hover{transform:translateY(-4px);border-color:var(--line)}
.hall-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hall-card .hall-body{padding:16px 18px 20px}
.hall-card h3{font-size:1rem;margin-bottom:.4rem}
.hall-card p{font-size:.9rem;color:var(--muted);margin:0}
.tag{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#062417;background:linear-gradient(135deg,var(--gold),var(--gold-2));
  border-radius:6px;padding:.22rem .5rem;margin-bottom:10px;
}
.tag.red{background:var(--red);color:#fff}
.note-line{
  display:flex;gap:12px;align-items:flex-start;background:rgba(245,158,11,.07);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:14px 16px;margin-top:18px;
}
.note-line i{color:var(--gold);margin-top:.25rem}
.note-line p{margin:0;font-size:.9rem;color:var(--muted)}
/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px}
.faq-item{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:0;overflow:hidden;transition:border-color .24s ease;
}
.faq-item[open]{border-color:var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:16px 52px 16px 18px;position:relative;
  font-weight:700;color:#fff;font-size:.98rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:.8rem;transition:transform .24s ease;
}
.faq-item[open] summary::after{content:"\f068"}
.faq-item .faq-a{padding:0 18px 18px;color:var(--muted);font-size:.95rem}
.faq-item .faq-a p:last-child{margin-bottom:0}
/* ---------- CTA ---------- */
.cta-strip{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--panel);padding:38px 34px;
  box-shadow:var(--shadow);
}
.cta-strip::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(560px 300px at 88% 12%,rgba(245,158,11,.18),transparent 65%);
  pointer-events:none;
}
.cta-grid{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.pay-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pay-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;
  color:var(--muted);background:rgba(3,21,13,.75);border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);padding:.34rem .7rem;
}
.pay-badge i{color:var(--gold)}
/* ---------- Footer ---------- */
.site-footer{
  margin-top:20px;padding:56px 0 26px;
  background:linear-gradient(180deg,rgba(3,21,13,.35),rgba(3,21,13,.95));
  border-top:1px solid var(--line-soft);
}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-col h4{font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.foot-col a,.foot-col li{display:block;font-size:.9rem;color:var(--muted);margin-bottom:9px}
.foot-col a:hover{color:var(--gold-2)}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:800;
  letter-spacing:.08em;color:var(--muted);background:rgba(245,158,11,.08);
  border:1px solid var(--line-soft);border-radius:var(--radius-pill);
  padding:.3rem .66rem;margin:4px 4px 0 0;
}
.foot-badge i{color:var(--gold)}
.foot-divider{height:1px;background:var(--line-soft);margin:32px 0 18px}
.foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted-2)}
/* ---------- FAB ---------- */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:50;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#1b1b1b,#062417 72%);
  border:2px solid var(--gold);color:var(--gold-2);font-size:1.25rem;
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  opacity:.85;animation:fabFloat 3.2s ease-in-out infinite;
  transition:transform .26s ease,opacity .26s ease;
}
.fab:hover{opacity:1;transform:scale(1.1)}
.fab:active{transform:scale(.95) translateY(3px)}
.fab .gem{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #fff}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ---------- Responsive ---------- */
@media (max-width:1199px){
  .art-hero-grid{grid-template-columns:1fr;gap:26px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .site-nav .container-x{min-height:66px;flex-wrap:wrap;padding:8px 20px}
  .nav-menu{width:100%;justify-content:flex-start;border-top:1px solid var(--line-soft);margin-top:8px;padding-top:8px}
  .nav-menu .nav-link{display:block;padding:.55rem .8rem}
  .split,.split-wide,.cta-grid{grid-template-columns:1fr;gap:22px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .sec{padding:52px 0}
  .art-panel{padding:24px 20px 12px}
  .cta-strip{padding:28px 22px}
}
@media (max-width:767px){
  body{font-size:15.5px}
  .brand-text strong{font-size:.95rem}
  .brand-text small{font-size:.62rem}
  .btn-ghost,.btn-gold{padding:.46rem .82rem;font-size:.84rem}
  .art-media img{aspect-ratio:16/10}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;gap:8px}
}
@media (max-width:520px){
  .container-x{padding:0 15px}
  .nav-right{gap:6px}
  .btn-ghost span,.nav-right .btn-ghost i{margin:0}
  .art-hero{padding:36px 0 44px}
  .sec{padding:44px 0}
  .meta-row{gap:8px}
  .cta-actions .btn-gold,.cta-actions .btn-quiet{width:100%;justify-content:center}
  .fab{width:52px;height:52px;bottom:84px}
}

/* roulang page: category1 */
:root{
  --bg:#051F14;
  --bg-soft:#07291B;
  --bg-deep:#03150D;
  --panel:linear-gradient(160deg,rgba(13,51,35,.92),rgba(6,27,18,.92));
  --gold:#F59E0B;
  --gold-2:#FCD34D;
  --gold-dim:rgba(245,158,11,.18);
  --red:#DC2626;
  --text:#F8FAFC;
  --muted:#D1FAE5;
  --muted-2:#A3A375;
  --line:rgba(245,158,11,.24);
  --line-soft:rgba(245,158,11,.12);
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;
  --shadow:0 22px 50px -26px rgba(0,0,0,.9);
  --shadow-gold:0 16px 38px -18px rgba(245,158,11,.75);
  --container:1200px;
  --gap:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 85% -8%,rgba(245,158,11,.12),transparent 62%),
    radial-gradient(900px 520px at -8% 22%,rgba(16,185,129,.10),transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .22s ease,opacity .22s ease,transform .22s ease}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.24;letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--gold);color:#062417}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
section[id]{scroll-margin-top:96px}
.container-x{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.71rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(245,158,11,.09);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.34rem .78rem;margin-bottom:14px;
}
.eyebrow i{color:var(--gold)}
/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1040;
  background:rgba(4,24,15,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.95);
}
.site-nav{padding:0}
.site-nav .container-x{display:flex;align-items:center;gap:14px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;padding:0;margin-right:auto}
.brand-mark{
  width:44px;height:44px;border-radius:13px;flex:0 0 44px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;display:grid;place-items:center;font-size:1.15rem;
  box-shadow:var(--shadow-gold);
}
.brand-text{display:flex;flex-direction:column;line-height:1.12}
.brand-text strong{font-size:1.02rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.brand-text small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-menu{justify-content:flex-end;gap:4px}
.nav-menu .nav-link{
  color:var(--muted);font-weight:600;font-size:.94rem;
  padding:.5rem .85rem;border-radius:var(--radius-pill);position:relative;
}
.nav-menu .nav-link:hover{color:var(--gold-2);background:rgba(245,158,11,.10)}
.nav-menu .nav-link.active{color:#062417;background:linear-gradient(135deg,var(--gold),var(--gold-2));font-weight:800}
.navbar-toggler{
  border:1px solid var(--line);border-radius:11px;padding:.42rem .6rem;
  background:rgba(245,158,11,.08);color:var(--gold-2);box-shadow:none;
}
.navbar-toggler:focus{box-shadow:none;outline:2px solid var(--gold-2)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(245,158,11,.5);color:var(--gold-2);
  background:transparent;border-radius:var(--radius-pill);
  padding:.5rem 1rem;font-size:.9rem;font-weight:700;transition:all .24s ease;
}
.btn-ghost:hover{background:rgba(245,158,11,.16);color:#fff;border-color:var(--gold)}
.btn-gold{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;border:0;border-radius:var(--radius-pill);
  padding:.55rem 1.15rem;font-size:.92rem;font-weight:800;
  box-shadow:0 12px 28px -14px rgba(245,158,11,.95);transition:all .24s ease;
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(245,158,11,1);color:#03150D}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-lg-x{padding:.8rem 1.55rem;font-size:1rem}
.btn-line{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.78rem 1.4rem;font-size:.96rem;font-weight:700;color:var(--gold-2);
  background:rgba(245,158,11,.06);transition:all .24s ease;
}
.btn-line:hover{background:rgba(245,158,11,.16);border-color:var(--gold);color:#fff}
/* ---------- Hero ---------- */
.hero{padding:62px 0 76px;position:relative;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;
  background-image:url('/assets/images/c6d1beccb6813538.jpg');
  background-size:cover;background-position:center;opacity:.22;filter:saturate(1.08);
}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,31,20,.72) 0%,rgba(5,31,20,.95) 66%,#051F14 100%)}
.hero .container-x{position:relative;z-index:2}
.hero h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;margin-bottom:1rem}
.hero h1 .hl{background:linear-gradient(120deg,var(--gold-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{font-size:1.04rem;color:var(--muted);max-width:640px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.chip{
  display:inline-flex;align-items:center;gap:8px;font-size:.83rem;font-weight:700;
  color:var(--muted);background:rgba(13,51,35,.85);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.42rem .85rem;
}
.chip i{color:var(--gold)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-note{font-size:.82rem;color:var(--muted-2);margin-top:16px;max-width:560px}
.live-media{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#03150D;box-shadow:var(--shadow);
}
.live-media img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.92}
.live-media .live-tag{
  position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  background:rgba(220,38,38,.94);color:#fff;font-size:.7rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:.3rem .6rem;border-radius:7px;
}
.live-media .live-tag .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulseDot 1.3s infinite}
.live-media .media-cap{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  background:linear-gradient(180deg,transparent,rgba(3,21,13,.95));
  font-size:.86rem;color:var(--muted);margin:0;font-weight:600;
}
.play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;z-index:3;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#062417;
  display:grid;place-items:center;font-size:1.2rem;
  box-shadow:0 16px 40px -12px rgba(245,158,11,.95);transition:transform .28s ease;
}
.play-btn::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1px solid rgba(245,158,11,.55);animation:ringPulse 2.4s ease-out infinite;
}
.play-btn:hover{transform:translate(-50%,-50%) scale(1.08)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.hero-stat{border-left:2px solid var(--gold);padding-left:12px}
.hero-stat b{display:block;font-size:1.28rem;font-weight:800;color:var(--gold-2)}
.hero-stat span{font-size:.78rem;color:var(--muted-2);font-weight:600;line-height:1.4;display:block}
/* ---------- Sections ---------- */
.section{padding:74px 0;position:relative}
.section-tight{padding:56px 0}
.section-alt{
  background:linear-gradient(180deg,rgba(7,41,27,.86),rgba(3,21,13,.55));
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.section-head{max-width:780px;margin-bottom:34px}
.section-title{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;margin-bottom:12px}
.section-title .hl{color:var(--gold-2)}
.section-lead{color:var(--muted);font-size:1rem;margin:0}
.card-x{
  height:100%;padding:26px 24px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line-soft);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.card-x:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--shadow)}
.card-x h3{font-size:1.06rem;font-weight:700;margin-bottom:10px}
.card-x p{color:var(--muted);font-size:.94rem}
.icon-badge{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(245,158,11,.12);border:1px solid var(--line);
  color:var(--gold-2);font-size:1.08rem;margin-bottom:15px;
}
/* pain list */
.pain-list{list-style:none;margin:0;padding:0}
.pain-list li{display:flex;gap:18px;padding:22px 0;border-bottom:1px dashed var(--line-soft)}
.pain-list li:last-child{border-bottom:0}
.pain-idx{
  flex:0 0 42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-weight:800;font-size:.95rem;color:var(--gold-2);
  background:rgba(220,38,38,.10);border:1px solid rgba(220,38,38,.35);
}
.pain-list h3{font-size:1.04rem;font-weight:700;margin-bottom:6px}
.pain-list p{color:var(--muted);font-size:.94rem}
/* solution */
.solution-figure{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.solution-figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.solution-figure figcaption{padding:13px 16px;font-size:.82rem;color:var(--muted-2);background:rgba(3,21,13,.9);font-weight:600}
.spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;margin-top:26px}
.spec-item{border-left:3px solid var(--gold);padding:4px 0 4px 15px}
.spec-item b{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:800;margin-bottom:4px}
.spec-item span{font-weight:700;font-size:1.02rem;display:block;line-height:1.45}
/* steps */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.step{
  display:flex;gap:18px;padding:24px 22px;border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(13,51,35,.75),rgba(4,22,14,.85));
  border:1px solid var(--line-soft);transition:border-color .26s ease,transform .26s ease;
}
.step:hover{border-color:var(--line);transform:translateY(-4px)}
.step-num{
  flex:0 0 48px;height:48px;border-radius:14px;display:grid;place-items:center;
  font-weight:800;font-size:1.05rem;color:#062417;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  box-shadow:0 12px 26px -14px rgba(245,158,11,.9);
}
.step h3{font-size:1.02rem;font-weight:700;margin-bottom:7px}
.step p{color:var(--muted);font-size:.92rem}
/* stats */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat-item{padding:24px 20px;border-radius:var(--radius-sm);border:1px solid var(--line-soft);background:rgba(4,22,14,.6)}
.stat-num{
  font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;line-height:1.15;
  background:linear-gradient(120deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-item p{font-size:.86rem;color:var(--muted);margin-top:8px}
/* quotes */
.quote-item{border-left:3px solid var(--gold);padding:6px 0 6px 20px;margin-bottom:26px}
.quote-item p{font-size:1rem;color:var(--muted);font-style:italic}
.quote-who{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.85rem;font-weight:700;color:var(--gold-2)}
.quote-who span{color:var(--muted-2);font-weight:600}
/* audience */
.aud-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 26px}
.aud-list li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--muted)}
.aud-list i{color:var(--gold);margin-top:5px}
.aud-list strong{color:var(--text);display:block;font-weight:700;margin-bottom:3px}
/* faq */
.faq-item{
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  background:rgba(3,21,13,.55);margin-bottom:12px;overflow:hidden;
  transition:border-color .25s ease,background .25s ease;
}
.faq-item[open]{border-color:var(--line);background:rgba(7,41,27,.75)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:17px 20px;font-weight:700;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.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:.78rem;color:var(--gold);transition:transform .26s ease;flex:0 0 auto;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-body{padding:0 20px 18px;color:var(--muted);font-size:.94rem}
/* news */
.news-card{
  display:flex;flex-direction:column;height:100%;border-radius:var(--radius);
  overflow:hidden;background:var(--panel);border:1px solid var(--line-soft);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.news-card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--shadow)}
.news-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.news-body{padding:18px 18px 22px;display:flex;flex-direction:column;flex:1}
.news-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:.75rem;font-weight:700;color:var(--muted-2);letter-spacing:.06em;text-transform:uppercase}
.news-meta .news-cat{color:var(--gold-2)}
.news-title{font-size:1.02rem;font-weight:700;margin:9px 0 8px}
.news-ex{font-size:.9rem;color:var(--muted);margin:0}
.empty-note{color:var(--muted-2);font-size:.94rem;padding:18px 0}
/* cta */
.cta-band{
  border-radius:26px;padding:40px 36px;border:1px solid var(--line);
  background:
    radial-gradient(600px 300px at 88% 0%,rgba(245,158,11,.16),transparent 60%),
    linear-gradient(135deg,rgba(13,51,35,.96),rgba(3,21,13,.96));
  box-shadow:var(--shadow);
}
.cta-band h2{font-size:clamp(1.45rem,2.6vw,2rem);font-weight:800;margin-bottom:10px}
.cta-band p{color:var(--muted);max-width:620px}
.cta-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.cta-form input,.cta-form select{
  flex:1 1 200px;min-width:0;background:rgba(3,21,13,.82);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.78rem .95rem;color:var(--text);
}
.cta-form input::placeholder{color:var(--muted-2)}
.cta-form input:focus,.cta-form select:focus{border-color:var(--gold);outline:none}
.cta-note{font-size:.82rem;color:var(--muted-2);margin-top:14px}
/* ---------- Footer ---------- */
.site-footer{
  padding:62px 0 28px;border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(3,21,13,.65),rgba(2,13,8,.98));
}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.site-footer p{color:var(--muted);font-size:.92rem}
.foot-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;
  letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.32rem .7rem;margin:8px 6px 0 0;
}
.foot-badge i{color:var(--gold)}
.foot-col h4{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);font-weight:800;margin-bottom:14px}
.foot-col a{display:block;color:var(--muted);font-size:.92rem;padding:5px 0}
.foot-col a:hover{color:var(--gold-2);transform:translateX(3px)}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col ul li{color:var(--muted);font-size:.9rem;padding:4px 0}
.foot-divider{height:1px;background:var(--line-soft);margin:34px 0 18px}
.foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted-2)}
/* ---------- FAB ---------- */
.fab-wrap{position:fixed;left:16px;bottom:96px;z-index:1050;text-decoration:none}
.fab-core{
  width:58px;height:58px;border-radius:50%;position:relative;
  display:grid;place-items:center;font-size:1.22rem;color:var(--gold-2);
  background:radial-gradient(circle at 32% 26%,#2A1206,#0B0C0E 72%);
  border:2px solid var(--gold);
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  opacity:.85;transition:transform .3s ease,opacity .3s ease,box-shadow .3s ease;
  animation:floatY 3.6s ease-in-out infinite;
}
.fab-core i{transition:transform .6s ease}
.fab-wrap:hover .fab-core{transform:scale(1.1);opacity:1;box-shadow:0 10px 32px rgba(245,158,11,.6)}
.fab-wrap:hover .fab-core i{transform:rotate(360deg)}
.fab-wrap:active .fab-core{transform:scale(.95) translateY(4px)}
.fab-core .gem{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #fff}
.fab-label{
  position:absolute;left:68px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:.76rem;font-weight:800;letter-spacing:.06em;
  color:var(--gold-2);background:rgba(3,21,13,.92);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.28rem .7rem;opacity:0;pointer-events:none;
  transition:opacity .26s ease;
}
.fab-wrap:hover .fab-label{opacity:1}
/* ---------- Animation ---------- */
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ringPulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* ---------- Responsive ---------- */
@media (max-width:1199.98px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:991.98px){
  .site-nav .container-x{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .nav-menu{
    order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;
    margin:8px 0 12px;padding:12px;border-radius:14px;
    background:rgba(3,21,13,.96);border:1px solid var(--line-soft);
  }
  .nav-menu .nav-link{display:block;text-align:left;padding:.6rem .8rem}
  .hero{padding:44px 0 56px}
  .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .aud-list{grid-template-columns:1fr}
  .section{padding:58px 0}
  .cta-band{padding:32px 24px}
}
@media (max-width:767.98px){
  .hero h1{font-size:1.72rem}
  .hero-lead{font-size:.98rem}
  .spec-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr;gap:12px}
  .hero-stat{display:flex;align-items:baseline;gap:10px;border-left-width:2px}
  .hero-stat b{font-size:1.1rem}
  .stat-grid{grid-template-columns:1fr;gap:14px}
  .btn-lg-x,.btn-line{width:100%;justify-content:center}
  .hero-actions{width:100%}
  .nav-right .btn-ghost,.nav-right .btn-gold{padding:.45rem .8rem;font-size:.84rem}
  .brand-text small{font-size:.62rem}
}
@media (max-width:519.98px){
  .container-x{padding:0 16px}
  .section{padding:48px 0}
  .card-x{padding:22px 18px}
  .cta-band{padding:26px 18px;border-radius:20px}
  .live-media .media-cap{font-size:.8rem}
  .fab-wrap{bottom:88px;left:12px}
  .fab-core{width:52px;height:52px;font-size:1.08rem}
  .fab-label{display:none}
}

/* roulang page: category3 */
:root{
  --bg:#051F14;
  --bg-soft:#07291B;
  --bg-deep:#03150D;
  --panel:linear-gradient(160deg,rgba(13,51,35,.92),rgba(6,27,18,.92));
  --gold:#F59E0B;
  --gold-2:#FCD34D;
  --gold-dim:rgba(245,158,11,.18);
  --red:#DC2626;
  --text:#F8FAFC;
  --muted:#D1FAE5;
  --muted-2:#A3A375;
  --line:rgba(245,158,11,.24);
  --line-soft:rgba(245,158,11,.12);
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;
  --shadow:0 22px 50px -26px rgba(0,0,0,.9);
  --shadow-gold:0 16px 38px -18px rgba(245,158,11,.75);
  --container:1200px;
  --gap:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 85% -8%,rgba(245,158,11,.12),transparent 62%),
    radial-gradient(900px 520px at -8% 22%,rgba(16,185,129,.10),transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .22s ease,opacity .22s ease}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.24;margin:0 0 .6rem}
p{margin:0 0 1rem}
ul{margin:0}
::selection{background:rgba(245,158,11,.35);color:#fff}
.container-x{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.71rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(245,158,11,.09);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.34rem .78rem;margin-bottom:14px;
}
.eyebrow i{color:var(--gold)}
.muted{color:var(--muted)}
.muted-2{color:var(--muted-2)}
/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1040;
  background:rgba(4,24,15,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.95);
}
.site-nav{padding:0}
.site-nav .container-x{display:flex;align-items:center;gap:14px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;padding:0;margin-right:auto}
.brand-mark{
  width:44px;height:44px;border-radius:13px;flex:0 0 44px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;display:grid;place-items:center;font-size:1.15rem;
  box-shadow:var(--shadow-gold);
}
.brand-text{display:flex;flex-direction:column;line-height:1.12}
.brand-text strong{font-size:1.02rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.brand-text small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-menu{justify-content:flex-end;gap:4px}
.nav-menu .nav-link{
  color:var(--muted);font-weight:600;font-size:.94rem;
  padding:.5rem .85rem;border-radius:var(--radius-pill);position:relative;
}
.nav-menu .nav-link:hover{color:var(--gold-2);background:rgba(245,158,11,.10)}
.nav-menu .nav-link.active{color:#062417;background:linear-gradient(135deg,var(--gold),var(--gold-2));font-weight:800}
.navbar-toggler{
  border:1px solid var(--line);border-radius:11px;padding:.42rem .6rem;
  background:rgba(245,158,11,.08);color:var(--gold-2);box-shadow:none;
}
.navbar-toggler:focus{box-shadow:none;outline:2px solid var(--gold-2)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(245,158,11,.5);color:var(--gold-2);
  background:transparent;border-radius:var(--radius-pill);
  padding:.5rem 1rem;font-size:.9rem;font-weight:700;transition:all .24s ease;
}
.btn-ghost:hover{background:rgba(245,158,11,.16);color:#fff;border-color:var(--gold)}
.btn-gold{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;border:0;border-radius:var(--radius-pill);
  padding:.55rem 1.15rem;font-size:.92rem;font-weight:800;
  box-shadow:0 12px 28px -14px rgba(245,158,11,.95);transition:all .24s ease;
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(245,158,11,1);color:#03150D}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-lg-x{padding:.82rem 1.6rem;font-size:1rem}
.btn-soft{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(245,158,11,.10);border:1px solid var(--line);color:var(--gold-2);
  border-radius:var(--radius-pill);padding:.6rem 1.15rem;font-weight:700;font-size:.9rem;
  transition:all .24s ease;
}
.btn-soft:hover{background:rgba(245,158,11,.2);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,.nav-link:focus-visible{
  outline:2px solid var(--gold-2);outline-offset:2px;border-radius:8px;
}
/* ---------- Hero (slanted slab) ---------- */
.hero-cut{position:relative;padding:46px 0 58px;overflow:hidden;isolation:isolate}
.cut-bg{
  position:absolute;inset:0;
  background-image:url('/assets/images/c6d1beccb6813538.jpg');
  background-size:cover;background-position:center;
  opacity:.26;filter:saturate(1.05);
}
.cut-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(5,31,20,.82) 0%,rgba(3,21,13,.96) 62%,#051F14 100%);
}
.hero-cut .container-x{position:relative;z-index:2}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8rem;color:var(--muted-2);margin-bottom:20px}
.crumb a{color:var(--gold-2);font-weight:600}
.crumb a:hover{color:#fff}
.crumb span{opacity:.55}
.cut-slab{
  position:relative;
  background:linear-gradient(128deg,rgba(11,46,30,.97) 0%,rgba(5,31,20,.94) 48%,rgba(3,21,13,.9) 100%);
  border:1px solid var(--line);
  border-left:4px solid var(--gold);
  border-radius:6px var(--radius) var(--radius) 6px;
  clip-path:polygon(0 0,100% 0,100% 86%,0 100%);
  padding:44px 46px 74px;
  box-shadow:var(--shadow);
}
.cut-slab h1{
  font-size:clamp(1.75rem,4.2vw,3.05rem);
  font-weight:800;letter-spacing:-.02em;max-width:18ch;margin-bottom:.85rem;
}
.cut-slab h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{font-size:1.04rem;color:var(--muted);max-width:660px;margin-bottom:0}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 26px}
.chip{
  display:inline-flex;align-items:center;gap:8px;font-size:.83rem;font-weight:700;
  color:var(--muted);background:rgba(13,51,35,.85);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.42rem .85rem;
}
.chip i{color:var(--gold)}
.hero-note{font-size:.82rem;color:var(--muted-2);margin:16px 0 0}
/* ---------- Sections ---------- */
.section{padding:74px 0}
.section-alt{
  background:linear-gradient(180deg,rgba(7,41,27,.78),rgba(3,21,13,.55));
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.sec-head{max-width:780px;margin-bottom:34px}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.015em}
.sec-head p{color:var(--muted);margin:0}
.rule-gold{width:70px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),transparent);margin:14px 0 18px}
/* ---------- Pain list ---------- */
.pain-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.pain-list li{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 22px;background:rgba(7,41,27,.6);
  border-left:3px solid var(--red);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.pain-list .num{font-weight:800;color:var(--red);font-size:.86rem;letter-spacing:.1em;min-width:38px;padding-top:2px}
.pain-list strong{display:block;font-size:1rem;margin-bottom:2px}
.pain-list p{margin:0;font-size:.93rem;color:var(--muted)}
/* ---------- Split (image + text) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.media-frame{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.media-frame img{width:100%;aspect-ratio:16/11;object-fit:cover}
.media-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(3,21,13,.72));
}
.media-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:26px 18px 14px;font-size:.85rem;font-weight:600;color:var(--muted);
}
.tick-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.tick-list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--muted)}
.tick-list i{color:var(--gold);margin-top:.32rem;font-size:.85rem}
.tick-list b{color:var(--text);font-weight:700}
/* ---------- Steps ---------- */
.steps{display:grid;gap:0;margin-top:8px}
.step{
  display:grid;grid-template-columns:62px 1fr;gap:20px;align-items:flex-start;
  padding:24px 0;border-bottom:1px dashed var(--line-soft);
}
.step:last-child{border-bottom:0}
.step .idx{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  font-weight:800;font-size:1.05rem;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;box-shadow:var(--shadow-gold);
}
.step h3{font-size:1.08rem;font-weight:800;margin-bottom:.3rem}
.step p{margin:0;font-size:.94rem;color:var(--muted)}
.step .tag-line{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);margin-bottom:6px}
/* ---------- Tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:6px}
.tier{
  position:relative;padding:26px 22px 24px;
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden;transition:all .28s ease;
}
.tier::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),rgba(245,158,11,0));
}
.tier:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--shadow)}
.tier h3{font-size:1.02rem;font-weight:800;display:flex;align-items:center;gap:8px}
.tier h3 i{color:var(--gold)}
.tier .val{font-size:1.3rem;font-weight:800;color:var(--gold-2);line-height:1.2;margin:.4rem 0 .5rem}
.tier p{margin:0;font-size:.88rem;color:var(--muted)}
/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{
  padding:24px 22px;border-radius:var(--radius);
  background:rgba(3,21,13,.62);border:1px solid var(--line-soft);
}
.stat b{display:block;font-size:clamp(1.55rem,3vw,2.25rem);font-weight:800;color:var(--gold-2);line-height:1;margin-bottom:8px}
.stat span{font-size:.88rem;color:var(--muted)}
/* ---------- Quotes ---------- */
.quotes{display:grid;grid-template-columns:1.12fr .88fr;gap:20px}
.quote{
  padding:28px 26px;border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(13,51,35,.9),rgba(4,24,15,.9));
  border:1px solid var(--line-soft);position:relative;
}
.quote i.q{color:var(--gold);opacity:.55;font-size:1.3rem;margin-bottom:12px;display:block}
.quote p{font-size:.98rem;color:var(--text);margin-bottom:16px}
.quote .who{display:flex;align-items:center;gap:12px;font-size:.86rem;color:var(--muted-2)}
.quote .who span.av{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#062417;font-weight:800;
}
.quote.small{padding:24px 22px}
.quote.small p{font-size:.92rem}
/* ---------- Audience ---------- */
.aud-list{display:grid;gap:0;margin-top:6px}
.aud{
  display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:center;
  padding:20px 4px;border-bottom:1px solid var(--line-soft);
}
.aud:last-child{border-bottom:0}
.aud .ic{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(245,158,11,.11);border:1px solid var(--line);color:var(--gold-2);font-size:1.05rem;
}
.aud h3{font-size:1.02rem;font-weight:800;margin:0 0 .2rem}
.aud p{margin:0;font-size:.9rem;color:var(--muted)}
.aud .pill{
  font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-2);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.28rem .7rem;white-space:nowrap;
}
/* ---------- FAQ ---------- */
.faq-wrap{max-width:900px}
.faq-item{
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  background:rgba(7,41,27,.5);margin-bottom:12px;overflow:hidden;
  transition:border-color .24s ease,background .24s ease;
}
.faq-item[open]{border-color:var(--line);background:rgba(7,41,27,.78)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:18px 22px;
  font-weight:700;font-size:1rem;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;
  color:var(--gold);font-size:.82rem;transition:transform .26s ease;flex:0 0 auto;margin-top:.28rem;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .ans{padding:0 22px 20px;font-size:.94rem;color:var(--muted)}
/* ---------- CTA ---------- */
.cta-wrap{
  background:linear-gradient(150deg,rgba(13,51,35,.96),rgba(3,21,13,.96));
  border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  padding:36px;display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;
  box-shadow:var(--shadow);
}
.cta-wrap h2{font-size:clamp(1.4rem,2.6vw,1.95rem);font-weight:800}
.cta-wrap p{color:var(--muted);font-size:.95rem;margin-bottom:18px}
.cta-form{display:grid;gap:12px}
.cta-form label{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:6px}
.cta-form input,.cta-form select{
  width:100%;background:rgba(3,21,13,.85);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.78rem .95rem;font-size:.95rem;
}
.cta-form input::placeholder{color:rgba(163,163,117,.85)}
.cta-form input:focus,.cta-form select:focus{outline:2px solid var(--gold-2);outline-offset:1px;border-color:transparent}
.form-note{font-size:.8rem;color:var(--muted-2);margin:2px 0 0}
.chan-box{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line-soft)}
.chan-box h3{font-size:.95rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.chan-link{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:13px 16px;border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  background:rgba(3,21,13,.55);font-size:.92rem;font-weight:600;margin-bottom:10px;transition:all .24s ease;
}
.chan-link:hover{border-color:var(--gold);background:rgba(245,158,11,.1);transform:translateX(4px)}
.chan-link i{color:var(--gold)}
/* ---------- Footer ---------- */
.site-footer{
  margin-top:20px;padding:56px 0 26px;
  background:linear-gradient(180deg,rgba(3,21,13,.6),rgba(2,14,9,.98));
  border-top:1px solid var(--line-soft);
}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.site-footer p{color:var(--muted);font-size:.92rem}
.foot-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.3rem .68rem;margin:0 6px 8px 0;background:rgba(245,158,11,.07);
}
.foot-col h4{
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:14px;
}
.foot-col a{display:block;font-size:.92rem;color:var(--muted);padding:5px 0;transition:all .2s ease}
.foot-col a:hover{color:var(--gold-2);transform:translateX(3px)}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{font-size:.9rem;color:var(--muted);padding:5px 0}
.foot-divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:34px 0 20px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.82rem;color:var(--muted-2)}
/* ---------- FAB ---------- */
.fab-support{
  position:fixed;left:16px;bottom:96px;z-index:1050;
  width:56px;height:56px;display:block;
  animation:fabFloat 4s ease-in-out infinite;
}
.fab-core{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#4a3606,#0B0C0E 74%);
  border:2px solid var(--gold);color:var(--gold-2);font-size:1.3rem;
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  opacity:.85;transition:all .28s ease;position:relative;overflow:hidden;
}
.fab-core::after{
  content:"";position:absolute;top:-40%;left:-60%;width:45%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:rotate(14deg);animation:shimmer 4.6s ease-in-out infinite;
}
.fab-support:hover .fab-core{opacity:1;transform:scale(1.1)}
.fab-support:active .fab-core{transform:translateY(4px) scale(.95)}
.fab-support:hover .fab-core i{transform:rotate(360deg)}
.fab-core i{transition:transform .55s ease;position:relative;z-index:2}
.fab-support .gem{
  position:absolute;top:-1px;right:-1px;width:14px;height:14px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 2px #fff;
  animation:pulse 1.6s infinite;
}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes shimmer{0%,60%{left:-60%}100%{left:130%}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(1.16)}}
/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .tiers{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .split,.split.rev{grid-template-columns:1fr;gap:26px}
  .quotes{grid-template-columns:1fr}
  .cta-wrap{grid-template-columns:1fr;padding:28px}
  .section{padding:62px 0}
}
@media (max-width:991.98px){
  .site-nav .container-x{flex-wrap:wrap;min-height:68px}
  .nav-menu{flex-basis:100%;order:5;padding:10px 0 14px;margin-top:8px;border-top:1px solid var(--line-soft)}
  .nav-menu .nav-link{display:block;padding:.68rem .9rem;margin:2px 0}
  .brand-text strong{font-size:.95rem}
}
@media (min-width:992px){
  .nav-menu{display:flex !important;flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap}
}
@media (max-width:768px){
  .cut-slab{padding:30px 24px 56px;clip-path:polygon(0 0,100% 0,100% 92%,0 100%)}
  .hero-cut{padding:32px 0 42px}
  .section{padding:52px 0}
  .step{grid-template-columns:46px 1fr;gap:14px}
  .step .idx{width:44px;height:44px;border-radius:12px;font-size:.95rem}
  .aud{grid-template-columns:44px 1fr;gap:14px}
  .aud .pill{grid-column:2;justify-self:start;margin-top:6px}
  .quote{padding:22px 20px}
  .btn-ghost,.btn-gold{padding:.48rem .9rem;font-size:.85rem}
}
@media (max-width:520px){
  body{font-size:15.4px}
  .container-x{padding:0 16px}
  .tiers,.stats{grid-template-columns:1fr}
  .hero-points .chip{font-size:.78rem}
  .cut-slab h1{font-size:1.6rem}
  .hero-actions .btn-gold{width:100%;justify-content:center}
  .foot-bottom{flex-direction:column;gap:8px}
  .fab-support{bottom:82px;left:12px}
}

/* roulang page: category2 */
:root{
  --bg:#051F14;
  --bg-soft:#07291B;
  --bg-deep:#03150D;
  --panel:linear-gradient(160deg,rgba(13,51,35,.92),rgba(6,27,18,.92));
  --gold:#F59E0B;
  --gold-2:#FCD34D;
  --gold-dim:rgba(245,158,11,.18);
  --red:#DC2626;
  --green:#34D399;
  --text:#F8FAFC;
  --muted:#D1FAE5;
  --muted-2:#A3A375;
  --line:rgba(245,158,11,.24);
  --line-soft:rgba(245,158,11,.12);
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;
  --shadow:0 22px 50px -26px rgba(0,0,0,.9);
  --shadow-gold:0 16px 38px -18px rgba(245,158,11,.75);
  --container:1200px;
  --gap:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 85% -8%,rgba(245,158,11,.12),transparent 62%),
    radial-gradient(900px 520px at -8% 22%,rgba(16,185,129,.10),transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .22s ease,opacity .22s ease,transform .22s ease}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-weight:800;line-height:1.24;letter-spacing:-.015em;margin:0 0 .6rem}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
::selection{background:rgba(245,158,11,.35);color:#fff}
.container-x{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.71rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(245,158,11,.09);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.34rem .78rem;margin-bottom:14px;
}
.eyebrow i{color:var(--gold)}
.chip{
  display:inline-flex;align-items:center;gap:8px;font-size:.83rem;font-weight:700;
  color:var(--muted);background:rgba(13,51,35,.85);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.42rem .85rem;
}
.chip i{color:var(--gold)}
/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1040;
  background:rgba(4,24,15,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.95);
}
.site-nav{padding:0}
.site-nav .container-x{display:flex;align-items:center;gap:14px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;padding:0}
.brand-mark{
  width:44px;height:44px;border-radius:13px;flex:0 0 44px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;display:grid;place-items:center;font-size:1.15rem;
  box-shadow:var(--shadow-gold);
}
.brand-text{display:flex;flex-direction:column;line-height:1.12}
.brand-text strong{font-size:1.02rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.brand-text small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-menu{justify-content:flex-end;gap:4px}
.nav-menu .nav-link{
  color:var(--muted);font-weight:600;font-size:.94rem;
  padding:.5rem .85rem;border-radius:var(--radius-pill);
}
.nav-menu .nav-link:hover{color:var(--gold-2);background:rgba(245,158,11,.10)}
.nav-menu .nav-link.active{color:#062417;background:linear-gradient(135deg,var(--gold),var(--gold-2));font-weight:800}
.navbar-toggler{
  border:1px solid var(--line);border-radius:11px;padding:.42rem .6rem;
  background:rgba(245,158,11,.08);color:var(--gold-2);box-shadow:none;
}
.navbar-toggler:focus{box-shadow:none;outline:2px solid var(--gold-2)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(245,158,11,.5);color:var(--gold-2);
  background:transparent;border-radius:var(--radius-pill);
  padding:.5rem 1rem;font-size:.9rem;font-weight:700;white-space:nowrap;
}
.btn-ghost:hover{background:rgba(245,158,11,.16);color:#fff;border-color:var(--gold)}
.btn-gold{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#062417;border:0;border-radius:var(--radius-pill);
  padding:.55rem 1.15rem;font-size:.92rem;font-weight:800;white-space:nowrap;
  box-shadow:0 12px 28px -14px rgba(245,158,11,.95);transition:all .24s ease;
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(245,158,11,1);color:#03150D}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-lg-x{padding:.78rem 1.5rem;font-size:1rem}
.btn-soft{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:rgba(245,158,11,.08);color:var(--gold-2);
  padding:.65rem 1.2rem;font-weight:700;font-size:.95rem;
}
.btn-soft:hover{background:rgba(245,158,11,.18);color:#fff}
@media (min-width:992px){
  .brand{margin-right:0}
  .nav-menu{order:1;margin-left:auto}
  .nav-right{order:2;margin-left:6px}
}
@media (max-width:991px){
  .site-nav .container-x{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;min-height:0;gap:10px}
  .brand{margin-right:auto}
  .nav-menu{flex-basis:100%;order:3;background:rgba(4,24,15,.98);border:1px solid var(--line-soft);border-radius:var(--radius);margin-top:8px;padding:10px}
  .nav-menu .nav-link{display:block;padding:.62rem .8rem}
  .nav-menu .nav-link.active{margin-top:4px}
}
@media (max-width:575px){
  .brand-text small{display:none}
  .brand-text strong{font-size:.9rem}
  .brand-mark{width:38px;height:38px;flex:0 0 38px;font-size:1rem;border-radius:11px}
  .btn-ghost,.btn-gold{padding:.42rem .68rem;font-size:.78rem}
  .btn-ghost i,.btn-gold i{display:none}
}
/* ---------- Hero ---------- */
.hero{padding:58px 0 92px;position:relative;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;background-image:url('/assets/images/c6d1beccb6813538.jpg');
  background-size:cover;background-position:center;opacity:.22;filter:saturate(1.05);
}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,31,20,.76) 0%,rgba(5,31,20,.95) 64%,#051F14 100%)}
.hero .container-x{position:relative;z-index:2}
.hero h1{font-size:clamp(1.8rem,4.1vw,2.85rem);margin-bottom:1rem}
.hero h1 .hl{background:linear-gradient(120deg,var(--gold-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{font-size:1.05rem;color:var(--muted);max-width:580px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 24px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-note{font-size:.84rem;color:var(--muted-2);margin-top:18px}
.hero-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;max-width:560px}
.kpi-item{background:rgba(3,21,13,.6);border:1px solid var(--line-soft);border-left:3px solid var(--gold);border-radius:var(--radius-sm);padding:14px 16px}
.kpi-num{font-size:1.35rem;font-weight:800;color:var(--gold-2);line-height:1.1}
.kpi-label{font-size:.8rem;color:var(--muted);margin-top:4px;line-height:1.45}
.hero-media{position:relative;transform:rotate(-1.2deg) translateY(-8px)}
.hero-media::before{
  content:"";position:absolute;top:16px;left:18px;right:-14px;bottom:-14px;
  border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);z-index:0;
}
.hero-media .media-frame{position:relative;z-index:1}
.float-card{
  position:absolute;left:-10px;bottom:-26px;z-index:3;
  display:flex;align-items:center;gap:12px;
  background:rgba(4,24,15,.97);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 18px;box-shadow:var(--shadow);max-width:290px;
}
.float-card i{color:var(--gold-2);font-size:1.25rem}
.float-card strong{display:block;font-size:.95rem;color:var(--text)}
.float-card span{font-size:.8rem;color:var(--muted-2)}
.media-frame{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg-deep)}
.media-frame img{width:100%;aspect-ratio:16/10;object-fit:cover}
.media-tag{
  position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;
  background:rgba(220,38,38,.94);color:#fff;font-size:.68rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:.3rem .62rem;border-radius:7px;
}
.media-tag .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulseDot 1.3s infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.25}}
.media-cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 18px 16px;
  background:linear-gradient(180deg,transparent,rgba(3,21,13,.95));
  font-size:.9rem;color:var(--muted);font-weight:600;
}
@media (max-width:991px){
  .hero{padding:44px 0 76px}
  .hero-media{transform:none;margin-top:14px}
  .float-card{position:relative;left:0;bottom:0;margin-top:16px;max-width:100%}
  .hero-media::before{display:none}
  .hero-kpi{max-width:100%}
}
@media (max-width:520px){
  .hero-kpi{grid-template-columns:1fr;gap:10px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn-gold,.hero-actions .btn-ghost{justify-content:center}
}
/* ---------- Sections ---------- */
.section{padding:66px 0;position:relative}
.section-alt{
  background:linear-gradient(180deg,rgba(7,41,27,.72),rgba(3,21,13,.78));
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.sec-head{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:end;margin-bottom:38px}
.sec-kicker{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
.sec-title{font-size:clamp(1.45rem,2.9vw,2.05rem);margin-bottom:.5rem}
.sec-lead{color:var(--muted);font-size:.98rem;margin:0}
@media (max-width:860px){.sec-head{grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:28px}}
/* ---------- Cards & panels ---------- */
.card-x{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:26px;height:100%;position:relative;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.card-x:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--shadow)}
.card-x h3{font-size:1.06rem;margin-bottom:.5rem}
.card-x p{color:var(--muted);font-size:.94rem;margin:0}
.icon-badge{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:rgba(245,158,11,.12);border:1px solid var(--line);color:var(--gold-2);
  font-size:1.08rem;margin-bottom:16px;
}
.panel-x{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:28px;height:100%}
.panel-x h3{font-size:1.14rem;margin-bottom:1rem;display:flex;align-items:center;gap:10px}
.panel-x h3 i{color:var(--gold-2)}
.feat-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;height:100%}
.feat-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feat-card .feat-body{padding:22px}
.feat-card h3{font-size:1.1rem;margin-bottom:.5rem}
.feat-card p{color:var(--muted);font-size:.94rem;margin:0}
.media-frame.sm img{aspect-ratio:16/11}
/* ---------- Lists ---------- */
.list-x{list-style:none;padding:0;margin:0}
.list-x li{position:relative;padding-left:30px;margin-bottom:13px;color:var(--muted);font-size:.95rem;line-height:1.6}
.list-x li:last-child{margin-bottom:0}
.list-x li i{position:absolute;left:0;top:.28em;font-size:.92rem}
.list-x.check li i{color:var(--green)}
.list-x.warn li i{color:var(--gold-2)}
.list-x strong{color:var(--text)}
/* ---------- Steps ---------- */
.step-flow{margin:0;padding:0;list-style:none}
.step-item{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:20px 0;border-bottom:1px dashed var(--line-soft)}
.step-item:first-child{padding-top:0}
.step-item:last-child{border-bottom:0;padding-bottom:0}
.step-num{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  font-weight:800;font-size:1.05rem;color:#062417;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));box-shadow:var(--shadow-gold);
}
.step-item h3{font-size:1.03rem;margin-bottom:.35rem}
.step-item p{color:var(--muted);font-size:.94rem;margin:0}
@media (max-width:520px){
  .step-item{grid-template-columns:44px 1fr;gap:14px}
  .step-num{width:42px;height:42px;border-radius:13px;font-size:.92rem}
}
/* ---------- Stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat-item{
  background:rgba(3,21,13,.62);border:1px solid var(--line-soft);border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);padding:20px;transition:border-color .25s ease,transform .25s ease;
}
.stat-item:hover{border-color:var(--line);transform:translateY(-3px)}
.stat-value{font-size:1.55rem;font-weight:800;color:var(--gold-2);line-height:1.15}
.stat-label{color:var(--muted);font-size:.88rem;margin-top:7px;line-height:1.55}
@media (max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stat-grid{grid-template-columns:1fr}}
/* ---------- Tiers ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier-card{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;height:100%;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.tier-card:hover{transform:translateY(-5px);border-color:var(--line)}
.tier-card.featured{border-color:var(--line);box-shadow:var(--shadow-gold)}
.tier-name{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.tier-range{font-size:1.35rem;font-weight:800;color:var(--gold-2);line-height:1.2}
.tier-desc{color:var(--muted);font-size:.92rem;margin:12px 0 0}
.tier-list{list-style:none;padding:0;margin:18px 0 0;border-top:1px dashed var(--line-soft);padding-top:16px}
.tier-list li{position:relative;padding-left:24px;color:var(--muted);font-size:.9rem;margin-bottom:10px}
.tier-list li:last-child{margin-bottom:0}
.tier-list li i{position:absolute;left:0;top:.3em;color:var(--gold);font-size:.8rem}
@media (max-width:900px){.tier-grid{grid-template-columns:1fr}}
/* ---------- Payment ---------- */
.pay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pay-badge{
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(3,21,13,.58);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:16px;transition:border-color .25s ease,background .25s ease;
}
.pay-badge:hover{border-color:var(--line);background:rgba(13,51,35,.7)}
.pay-badge i{font-size:1.15rem;color:var(--gold-2);margin-top:3px}
.pay-badge strong{display:block;font-size:.97rem;margin-bottom:3px}
.pay-badge span{font-size:.85rem;color:var(--muted);line-height:1.55}
@media (max-width:760px){.pay-grid{grid-template-columns:1fr}}
/* ---------- FAQ ---------- */
.faq-acc .accordion-item{
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--radius) !important;margin-bottom:12px;overflow:hidden;
}
.faq-acc .accordion-button{
  background:transparent;color:var(--text);font-weight:700;font-size:1rem;
  padding:18px 20px;box-shadow:none;line-height:1.5;
}
.faq-acc .accordion-button:not(.collapsed){color:var(--gold-2);background:rgba(245,158,11,.07)}
.faq-acc .accordion-button:focus{box-shadow:none;outline:2px solid var(--line);outline-offset:-2px}
.faq-acc .accordion-button::after{filter:invert(76%) sepia(62%) saturate(1400%) hue-rotate(345deg) brightness(1.05)}
.faq-acc .accordion-body{color:var(--muted);padding:0 20px 20px;font-size:.95rem;line-height:1.7}
.faq-acc .accordion-body strong{color:var(--text)}
/* ---------- CTA ---------- */
.cta-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.cta-form label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);font-weight:700;margin-bottom:6px}
.cta-form input,.cta-form select{
  width:100%;background:rgba(3,21,13,.78);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:.72rem .9rem;color:var(--text);margin-bottom:15px;
  transition:border-color .22s ease,box-shadow .22s ease;
}
.cta-form input::placeholder{color:rgba(209,250,229,.42)}
.cta-form input:focus,.cta-form select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.cta-form .btn-gold{width:100%;justify-content:center;margin-top:4px}
.form-note{display:none;margin:14px 0 0;font-size:.88rem;color:var(--muted);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.35);border-radius:var(--radius-sm);padding:12px 14px}
.form-note.is-on{display:block}
/* ---------- News ---------- */
.news-card{
  display:flex;flex-direction:column;height:100%;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:22px;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.news-card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--shadow)}
.news-tag{
  align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(245,158,11,.1);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.24rem .62rem;margin-bottom:12px;
}
.news-title{font-size:1.03rem;margin-bottom:.5rem;color:var(--text)}
.news-excerpt{color:var(--muted);font-size:.91rem;margin:0 0 14px}
.news-more{margin-top:auto;color:var(--gold-2);font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:8px}
.news-empty{
  border:1px dashed var(--line);border-radius:var(--radius);padding:24px;
  color:var(--muted);font-size:.94rem;background:rgba(3,21,13,.5);
}
@media (max-width:520px){.section{padding:52px 0}}
/* ---------- Footer ---------- */
.site-footer{margin-top:20px;background:linear-gradient(180deg,rgba(3,21,13,.95),#03150D);border-top:1px solid var(--line-soft);padding:58px 0 28px}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  color:var(--muted);border:1px solid var(--line-soft);border-radius:var(--radius-pill);
  padding:.3rem .7rem;margin:6px 6px 0 0;background:rgba(245,158,11,.06);
}
.foot-badge i{color:var(--gold-2)}
.foot-col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-2);margin-bottom:14px}
.foot-col a{display:block;color:var(--muted);font-size:.92rem;padding:.28rem 0}
.foot-col a:hover{color:var(--gold-2);transform:translateX(3px)}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col ul li{color:var(--muted);font-size:.9rem;padding:.28rem 0}
.foot-divider{height:1px;background:var(--line-soft);margin:34px 0 18px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted-2);font-size:.82rem;line-height:1.65}
/* ---------- FAB ---------- */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:50;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#4a0f0f,#0b0c0e 72%);
  border:2px solid var(--gold);color:var(--gold-2);font-size:1.25rem;
  box-shadow:0 6px 25px rgba(245,158,11,.35);opacity:.85;
  animation:fabFloat 3.6s ease-in-out infinite;transition:opacity .3s ease,box-shadow .3s ease;
}
.fab i{transition:transform .6s ease}
.fab:hover{opacity:1;box-shadow:0 10px 34px rgba(245,158,11,.72)}
.fab:hover i{transform:rotate(360deg) scale(1.12)}
.fab:active{box-shadow:0 4px 16px rgba(245,158,11,.5)}
.fab-badge{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--red);border:2px solid #fff}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (max-width:520px){.fab{left:14px;bottom:84px;width:52px;height:52px;font-size:1.1rem}}

/* 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}
/* =========================================================
   💥 修复 Bay789 Mở Lại: 标题割裂 + 左右两栏脱节 + FAQ手风琴排版
   ========================================================= */

/* ---------------------------------------------------------
   1. 修复所有小标题区 (.sec-head)：解决右侧大面积空黑与文字断层
   --------------------------------------------------------- */
.sec-head {
  display: flex !important;
  flex-direction: column !important; /* 强制上下纵向排布，不再左右横排割裂 */
  align-items: flex-start !important;
  max-width: 820px !important;
  margin-bottom: 36px !important;
  width: 100% !important;
}

.sec-head > div {
  width: 100% !important;
}

.sec-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.1) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
}

.sec-title {
  font-size: clamp(22px, 2.8vw, 32px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin: 0 0 14px 0 !important;
}

.sec-lead {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  max-width: 720px !important;
}

/* ---------------------------------------------------------
   2. 修复第 8 部分 (#khoi-phuc-tai-khoan): 左右均衡对齐，消灭空白
   --------------------------------------------------------- */
#khoi-phuc-tai-khoan .row {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important; /* 左侧说明占58%，右侧表单占42% */
  gap: 40px !important;
  align-items: start !important; /* 顶部平齐 */
}

#khoi-phuc-tai-khoan .col-lg-6 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* 左侧打勾列表规范 */
#khoi-phuc-tai-khoan .list-x.check {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  list-style: none !important;
}

#khoi-phuc-tai-khoan .list-x.check li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 14.5px !important;
  color: #cbd5e1 !important;
  line-height: 1.6 !important;
}

#khoi-phuc-tai-khoan .list-x.check li i {
  color: #10b981 !important; /* 绿色对勾 */
  font-size: 15px !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}

/* 左侧客服面板 (.panel-x) 提亮与层次 */
#khoi-phuc-tai-khoan .panel-x {
  background: rgba(11, 46, 30, 0.6) !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
  border-radius: 16px !important;
  padding: 22px 24px !important;
  margin-top: 10px !important;
}

#khoi-phuc-tai-khoan .panel-x h3 {
  font-size: 16px !important;
  color: #fbbf24 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

/* 右侧表单面板 (.cta-panel) 居中与质感 */
#khoi-phuc-tai-khoan .cta-panel {
  background: linear-gradient(165deg, rgba(14, 53, 36, 0.95), rgba(5, 31, 20, 0.98)) !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  border-radius: 20px !important;
  padding: 32px 26px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#khoi-phuc-tai-khoan .cta-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

#khoi-phuc-tai-khoan .cta-form label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #fbbf24 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

#khoi-phuc-tai-khoan .cta-form input,
#khoi-phuc-tai-khoan .cta-form select {
  width: 100% !important;
  height: 46px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background: rgba(3, 15, 10, 0.8) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  color: #ffffff !important;
  font-size: 14.5px !important;
  box-sizing: border-box !important;
}

#khoi-phuc-tai-khoan .cta-form input:focus,
#khoi-phuc-tai-khoan .cta-form select:focus {
  outline: none !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2) !important;
}

/* 提交按钮全宽居中 */
#khoi-phuc-tai-khoan .btn-gold {
  width: 100% !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #b45309 100%) !important;
  color: #07281a !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  border: none !important;
  margin-top: 8px !important;
  cursor: pointer !important;
}

/* ---------------------------------------------------------
   3. 修复第 9 部分 FAQ 手风琴：居中且卡片化高级排版
   --------------------------------------------------------- */
.faq-acc {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important; /* 整体居中 */
}

.faq-acc .accordion-item {
  background: rgba(11, 46, 30, 0.55) !important;
  border: 1px solid rgba(209, 250, 229, 0.15) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.faq-acc .accordion-button {
  background: transparent !important;
  color: #ffffff !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  padding: 18px 22px !important;
  box-shadow: none !important;
}

.faq-acc .accordion-button:not(.collapsed) {
  color: #fbbf24 !important; /* 展开时问题变为金黄色高亮 */
  border-bottom: 1px dashed rgba(209, 250, 229, 0.15) !important;
}

.faq-acc .accordion-body {
  padding: 18px 22px 20px !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #cbd5e1 !important;
}

/* ---------------------------------------------------------
   4. 平板与手机端自适应响应式
   --------------------------------------------------------- */
@media (max-width: 992px) {
  #khoi-phuc-tai-khoan .row {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}
/* =========================================================
   💥 彻底根治：.step-flow / .step-item 步骤卡片极度挤压与单字竖排
   ========================================================= */

/* 1. 步骤列表容器：强制解除宽度限制，恢复整洁的垂直列表 */
.step-flow,
ol.step-flow,
ul.step-flow {
  display: flex !important;
  flex-direction: column !important; /* 4个步骤自上而下纵向整齐堆叠 */
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

/* 2. 单个步骤卡片：横向铺开（左边放醒目数字，右边放完整的标题与大段正文） */
.step-item,
li.step-item {
  display: flex !important;
  flex-direction: row !important; /* 关键：左徽章，右内容 */
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  width: 100% !important; /* 占满整行 100% 宽度，拒绝被压缩成细条！ */
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 24px 28px !important;
  background: rgba(14, 53, 36, 0.75) !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* 3. 黄金数字徽章 (01, 02, 03, 04) */
.step-item .step-num {
  flex-shrink: 0 !important;
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 60%, #b45309 100%) !important;
  color: #07281a !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35) !important;
  margin: 0 !important;
  position: static !important;
}

/* 4. 消除所有可能引发冲突的伪元素 */
.step-item::before,
.step-item::after {
  display: none !important;
}

/* 5. 右侧内容包裹层：强制占据整张卡片剩余的全部宽度！ */
.step-item > div {
  flex: 1 1 auto !important; /* 核心：撑满剩余的 90% 空间！ */
  width: auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 6. 标题规范：完整横排展示 */
.step-item h3 {
  display: block !important;
  width: 100% !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
  margin: 0 0 10px 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  text-align: left !important;
}

/* 7. 描述正文规范：彻底回到卡片框内，恢复舒展流畅的长段落换行！ */
.step-item p {
  display: block !important;
  width: 100% !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #cbd5e1 !important;
  margin: 0 !important;
  white-space: normal !important; /* 彻底消灭单字竖排！ */
  word-break: normal !important;
  text-align: left !important;
}
/* 8. 修复其所在的父级外层分栏比例（安全限定：仅对存在 step-flow 的页面生效） */
#chia-nho-100-lan-cuoc .row:has(.step-flow),
.sec#chia-nho-100-lan-cuoc:has(.step-flow) .row {
  display: grid !important;
  grid-template-columns: 0.95fr 1.35fr !important;
  gap: 40px !important;
  align-items: start !important;
}

#chia-nho-100-lan-cuoc:has(.step-flow) .col-lg-4,
#chia-nho-100-lan-cuoc:has(.step-flow) .col-lg-8 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* 9. 手机与平板端自适应 */
@media (max-width: 992px) {
  #chia-nho-100-lan-cuoc:has(.step-flow) .row {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}