/* roulang page: index */
:root{
  --jade-900:#051F14;
  --jade-850:#08281A;
  --jade-800:#0B2E1E;
  --jade-700:#103A26;
  --gold:#F59E0B;
  --gold-light:#FCD34D;
  --gold-deep:#B45309;
  --red:#DC2626;
  --ivory:#F8FAFC;
  --mint:#D1FAE5;
  --olive:#A3A375;
  --line:rgba(245,158,11,.28);
  --line-soft:rgba(209,250,229,.13);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.30);
  --shadow:0 16px 44px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(245,158,11,.22), 0 14px 38px rgba(245,158,11,.14);
  --container:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--jade-900);
  color:var(--ivory);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(245,158,11,.10), transparent 62%),
    radial-gradient(760px 460px at 92% 8%, rgba(16,185,129,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease);}
a:hover{color:var(--gold-light);}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.25;letter-spacing:-.01em;}
p{margin:0;}
button,input,select{font-family:inherit;font-size:inherit;}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:6px;}
.container-x{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;position:relative;z-index:2;}
main{position:relative;z-index:1;}

/* ===== Buttons ===== */
.btn-gold{
  display:inline-flex;align-items:center;gap:.55rem;
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#1A1206;font-weight:700;font-size:.94rem;
  padding:.78rem 1.5rem;border-radius:999px;border:none;
  box-shadow:0 10px 26px rgba(245,158,11,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
.btn-gold:hover{color:#1A1206;transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,158,11,.38);filter:brightness(1.05);}
.btn-gold:active{transform:translateY(0) scale(.985);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;color:var(--gold-light);
  border:1px solid var(--line);border-radius:999px;
  padding:.74rem 1.35rem;font-weight:600;font-size:.92rem;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn-ghost:hover{background:rgba(245,158,11,.10);border-color:var(--gold);color:var(--gold-light);transform:translateY(-2px);}
.btn-outline-light-x{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line-soft);border-radius:999px;padding:.72rem 1.3rem;
  color:var(--mint);font-weight:600;font-size:.9rem;background:rgba(255,255,255,.03);
  transition:all .25s var(--ease);
}
.btn-outline-light-x:hover{border-color:var(--line);color:var(--gold-light);background:rgba(245,158,11,.08);}

/* ===== Header ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(5,31,20,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.scrolled{background:rgba(5,31,20,.95);box-shadow:0 10px 30px rgba(0,0,0,.45);border-bottom-color:var(--line);}
.nav-inner{display:flex;align-items:center;gap:1.4rem;min-height:74px;}
.brand{display:flex;align-items:center;gap:.65rem;flex-shrink:0;}
.brand-mark{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));
  display:grid;place-items:center;color:#20160A;font-size:1.15rem;
  box-shadow:0 8px 20px rgba(245,158,11,.3);
}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text strong{font-size:1.02rem;font-weight:800;color:var(--ivory);letter-spacing:-.02em;}
.brand-text span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.nav-links{display:flex;align-items:center;gap:.35rem;margin-left:auto;}
.nav-link-x{
  padding:.55rem .85rem;border-radius:999px;font-size:.9rem;font-weight:600;
  color:var(--mint);white-space:nowrap;transition:all .25s var(--ease);
}
.nav-link-x:hover{color:var(--gold-light);background:rgba(245,158,11,.09);}
.nav-link-x.active{color:var(--gold-light);background:rgba(245,158,11,.14);box-shadow:inset 0 0 0 1px var(--line);}
.nav-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.btn-login{
  background:none;border:none;color:var(--gold-light);font-weight:600;font-size:.9rem;
  padding:.55rem .7rem;border-radius:999px;transition:background .25s var(--ease);
}
.btn-login:hover{background:rgba(245,158,11,.10);}
.btn-signup{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#1A1206;font-weight:700;font-size:.88rem;border:none;
  padding:.62rem 1.2rem;border-radius:999px;
  box-shadow:0 8px 20px rgba(245,158,11,.3);
  transition:transform .25s var(--ease),filter .25s var(--ease);
}
.btn-signup:hover{transform:translateY(-2px);filter:brightness(1.06);}
.nav-toggle{
  display:none;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);
  color:var(--mint);width:42px;height:42px;border-radius:12px;font-size:1.05rem;
}
.mobile-panel{
  display:none;border-top:1px solid var(--line-soft);
  background:rgba(5,31,20,.98);padding:.75rem 0 1rem;
}
.mobile-panel.open{display:block;}
.mobile-panel a{
  display:block;padding:.72rem .3rem;font-weight:600;color:var(--mint);
  border-bottom:1px solid rgba(209,250,229,.07);font-size:.94rem;
}
.mobile-panel a:last-child{border-bottom:none;}
.mobile-panel a.active{color:var(--gold-light);}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding:150px 0 86px;
  background-image:linear-gradient(180deg,rgba(5,31,20,.90) 0%,rgba(5,31,20,.94) 55%,var(--jade-900) 100%),url('/assets/images/3f9ffaf1610aab83.jpg');
  background-size:cover;background-position:center;
  text-align:center;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  width:min(880px,92%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(245,158,11,.12);border:1px solid var(--line);
  color:var(--gold-light);font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:.42rem 1rem;border-radius:999px;margin-bottom:1.35rem;
}
.hero h1{
  font-size:clamp(1.65rem,4vw,2.85rem);
  font-weight:800;max-width:960px;margin:0 auto 1.1rem;
  background:linear-gradient(120deg,#FFFFFF 18%,var(--gold-light) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{
  max-width:800px;margin:0 auto 2rem;color:var(--mint);font-size:1.02rem;line-height:1.7;
}
.hero-search{
  max-width:660px;margin:0 auto 1.2rem;
  display:flex;gap:.5rem;background:rgba(11,46,30,.85);
  border:1px solid var(--line);border-radius:999px;padding:.45rem .5rem .45rem 1.15rem;
  box-shadow:var(--glow);
}
.hero-search i{align-self:center;color:var(--gold);font-size:1rem;}
.hero-search input{
  flex:1;background:transparent;border:none;color:var(--ivory);padding:.6rem .2rem;outline:none;
}
.hero-search input::placeholder{color:rgba(209,250,229,.55);}
.hero-search button{border:none;border-radius:999px;padding:.68rem 1.35rem;font-weight:700;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));color:#1A1206;white-space:nowrap;
  transition:filter .25s var(--ease),transform .25s var(--ease);}
.hero-search button:hover{filter:brightness(1.07);transform:translateY(-1px);}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-bottom:2.4rem;}
.chip{
  font-size:.82rem;font-weight:600;color:var(--mint);
  border:1px solid var(--line-soft);background:rgba(255,255,255,.04);
  padding:.42rem .9rem;border-radius:999px;transition:all .25s var(--ease);
}
.chip:hover{border-color:var(--gold);color:var(--gold-light);background:rgba(245,158,11,.10);transform:translateY(-2px);}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:2.8rem;}
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  max-width:900px;margin:0 auto;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
}
.hero-stats div{background:rgba(11,46,30,.72);padding:1.15rem .8rem;}
.hero-stats strong{display:block;font-size:1.35rem;font-weight:800;color:var(--gold-light);}
.hero-stats span{font-size:.78rem;color:var(--mint);opacity:.85;}

/* ===== Sections ===== */
.section{padding:74px 0;position:relative;}
.section.alt{background:linear-gradient(180deg,rgba(11,46,30,.55),rgba(5,31,20,.2));border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.section-head{max-width:760px;margin-bottom:2.4rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.85rem;
}
.section-head h2{font-size:clamp(1.35rem,2.6vw,2.05rem);margin-bottom:.85rem;}
.section-head p{color:var(--mint);opacity:.9;font-size:.98rem;line-height:1.7;}
.gold-divider{width:64px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold-light),transparent);margin-bottom:1rem;}
.section-head.center .gold-divider{margin-left:auto;margin-right:auto;background:linear-gradient(90deg,transparent,var(--gold-light),transparent);}

/* ===== Commitment strip ===== */
.commit-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.commit-item{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:1.15rem 1.1rem;border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  background:rgba(11,46,30,.5);transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.commit-item:hover{border-color:var(--line);transform:translateY(-3px);}
.commit-item i{color:var(--gold);font-size:1.15rem;margin-top:.15rem;}
.commit-item h3{font-size:.95rem;margin-bottom:.25rem;}
.commit-item p{font-size:.83rem;color:var(--mint);opacity:.82;line-height:1.55;}

/* ===== Pain / Solution ===== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:start;}
.pain-list li{
  display:flex;gap:.8rem;padding:.9rem 0;border-bottom:1px dashed var(--line-soft);
}
.pain-list li:last-child{border-bottom:none;}
.pain-list i{color:var(--red);margin-top:.3rem;}
.pain-list strong{display:block;font-size:.96rem;margin-bottom:.15rem;}
.pain-list span{font-size:.86rem;color:var(--mint);opacity:.82;line-height:1.55;}
.solve-panel{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(16,58,38,.85),rgba(5,31,20,.9));
  padding:1.8rem;box-shadow:var(--shadow);
}
.solve-panel h3{font-size:1.15rem;margin-bottom:1rem;color:var(--gold-light);}
.solve-list li{display:flex;gap:.75rem;padding:.6rem 0;font-size:.9rem;color:var(--mint);}
.solve-list i{color:var(--gold);margin-top:.25rem;}

/* ===== Steps ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;counter-reset:step;}
.step{
  position:relative;padding:1.9rem 1.4rem 1.5rem;
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:rgba(11,46,30,.45);transition:all .3s var(--ease);
}
.step:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--glow);}
.step-num{
  position:absolute;top:-16px;left:1.4rem;
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));color:#1A1206;font-weight:800;
  box-shadow:0 8px 18px rgba(245,158,11,.3);
}
.step h3{font-size:1rem;margin:1.2rem 0 .55rem;}
.step p{font-size:.87rem;color:var(--mint);opacity:.85;line-height:1.6;}

/* ===== Spec grid ===== */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.spec-card{
  padding:1.35rem 1.25rem;border-radius:var(--radius-sm);
  border:1px solid var(--line-soft);background:rgba(11,46,30,.4);
  transition:all .3s var(--ease);
}
.spec-card:hover{border-color:var(--line);background:rgba(16,58,38,.6);}
.spec-card i{font-size:1.3rem;color:var(--gold);margin-bottom:.7rem;display:block;}
.spec-card h3{font-size:.98rem;margin-bottom:.4rem;}
.spec-card p{font-size:.85rem;color:var(--mint);opacity:.83;line-height:1.6;}

/* ===== Metrics ===== */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.metric{
  text-align:center;padding:1.7rem 1rem;border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(170deg,rgba(16,58,38,.8),rgba(5,31,20,.7));
}
.metric strong{display:block;font-size:1.9rem;font-weight:800;color:var(--gold-light);line-height:1.1;}
.metric span{font-size:.83rem;color:var(--mint);opacity:.85;display:block;margin-top:.4rem;}

/* ===== Before / After ===== */
.compare-two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.compare-col{border-radius:var(--radius);padding:1.6rem 1.4rem;border:1px solid var(--line-soft);background:rgba(11,46,30,.4);}
.compare-col.good{border-color:var(--line);background:linear-gradient(165deg,rgba(16,58,38,.85),rgba(5,31,20,.75));box-shadow:var(--glow);}
.compare-col h3{font-size:1.02rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;}
.compare-col.bad h3 i{color:var(--red);}
.compare-col.good h3 i{color:var(--gold);}
.compare-col li{display:flex;gap:.65rem;font-size:.88rem;color:var(--mint);padding:.48rem 0;line-height:1.55;}
.compare-col.bad li i{color:rgba(220,38,38,.85);margin-top:.28rem;}
.compare-col.good li i{color:var(--gold);margin-top:.28rem;}

/* ===== Cases ===== */
.case-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:1.4rem;}
.case-main{
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  border:1px solid var(--line-soft);background:var(--jade-800);
}
.case-main img{width:100%;height:280px;object-fit:cover;opacity:.9;}
.case-main .case-body{padding:1.5rem;}
.case-main h3{font-size:1.12rem;margin-bottom:.6rem;}
.case-main p{font-size:.9rem;color:var(--mint);opacity:.88;line-height:1.65;}
.case-side{display:grid;gap:1rem;}
.case-mini{
  display:flex;gap:1rem;padding:1rem;border-radius:var(--radius-sm);
  border:1px solid var(--line-soft);background:rgba(11,46,30,.42);transition:all .3s var(--ease);
}
.case-mini:hover{border-color:var(--line);transform:translateX(4px);}
.case-mini img{width:78px;height:78px;border-radius:12px;object-fit:cover;flex-shrink:0;}
.case-mini h4{font-size:.93rem;margin-bottom:.3rem;}
.case-mini p{font-size:.82rem;color:var(--mint);opacity:.82;line-height:1.55;}
.tag{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-light);background:rgba(245,158,11,.13);border:1px solid var(--line);
  padding:.2rem .6rem;border-radius:999px;margin-bottom:.55rem;
}

/* ===== Reviews ===== */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.review{
  padding:1.5rem 1.35rem;border-radius:var(--radius);
  border:1px solid var(--line-soft);background:rgba(11,46,30,.42);
  display:flex;flex-direction:column;gap:.85rem;transition:all .3s var(--ease);
}
.review:hover{border-color:var(--line);transform:translateY(-4px);}
.review .stars{color:var(--gold);font-size:.82rem;letter-spacing:.15em;}
.review p{font-size:.88rem;color:var(--mint);opacity:.9;line-height:1.65;}
.review .who{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line-soft);}
.review .who span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));color:#1A1206;font-weight:800;font-size:.82rem;}
.review .who strong{font-size:.85rem;display:block;}
.review .who em{font-size:.74rem;color:var(--olive);font-style:normal;}

/* ===== Audience ===== */
.audience-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
.audience-item{
  display:flex;gap:.9rem;padding:1.1rem 1.15rem;border-radius:var(--radius-sm);
  border-left:3px solid var(--gold);background:rgba(11,46,30,.4);
}
.audience-item i{color:var(--gold);font-size:1.05rem;margin-top:.2rem;}
.audience-item h3{font-size:.95rem;margin-bottom:.28rem;}
.audience-item p{font-size:.84rem;color:var(--mint);opacity:.83;line-height:1.55;}

/* ===== Timeline ===== */
.timeline{position:relative;padding-left:26px;}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(245,158,11,.05));}
.tl-item{position:relative;padding:0 0 1.6rem 1.1rem;}
.tl-item::before{content:"";position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--jade-900);border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(245,158,11,.12);}
.tl-time{font-size:.76rem;font-weight:700;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;}
.tl-item h3{font-size:.98rem;margin:.3rem 0 .3rem;}
.tl-item p{font-size:.85rem;color:var(--mint);opacity:.83;line-height:1.55;}

/* ===== Category matrix ===== */
.cat-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.cat-card{
  position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line-soft);
  background:var(--jade-800);transition:all .35s var(--ease);
}
.cat-card:hover{border-color:var(--line);transform:translateY(-5px);box-shadow:var(--glow);}
.cat-card img{width:100%;height:170px;object-fit:cover;opacity:.85;transition:transform .5s var(--ease);}
.cat-card:hover img{transform:scale(1.05);}
.cat-card .cat-body{padding:1.25rem;}
.cat-card h3{font-size:1.02rem;margin-bottom:.45rem;}
.cat-card p{font-size:.85rem;color:var(--mint);opacity:.83;line-height:1.6;margin-bottom:.85rem;}
.cat-card .cat-link{font-size:.85rem;font-weight:700;color:var(--gold-light);display:inline-flex;align-items:center;gap:.4rem;}
.cat-card .cat-link i{transition:transform .3s var(--ease);}
.cat-card:hover .cat-link i{transform:translateX(4px);}

/* ===== Compare table ===== */
.table-wrap{border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:rgba(11,46,30,.35);}
table.cmp{width:100%;border-collapse:collapse;}
table.cmp th,table.cmp td{padding:1rem 1.1rem;text-align:left;font-size:.88rem;border-bottom:1px solid var(--line-soft);}
table.cmp thead th{background:rgba(16,58,38,.75);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);font-weight:700;}
table.cmp tbody tr:last-child td{border-bottom:none;}
table.cmp td:first-child{font-weight:600;color:var(--ivory);}
table.cmp td.ok{color:var(--gold-light);font-weight:600;}
table.cmp td.no{color:rgba(209,250,229,.6);}
table.cmp tbody tr:hover{background:rgba(245,158,11,.05);}

/* ===== News / CMS ===== */
.news-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:1.6rem;align-items:start;}
.news-list{display:grid;gap:1rem;}
.news-item{
  display:flex;gap:1.1rem;padding:1.05rem;border-radius:var(--radius-sm);
  border:1px solid var(--line-soft);background:rgba(11,46,30,.4);transition:all .3s var(--ease);
}
.news-item:hover{border-color:var(--line);transform:translateX(4px);}
.news-item img{width:120px;height:88px;object-fit:cover;border-radius:10px;flex-shrink:0;}
.news-item h3{font-size:.96rem;margin-bottom:.35rem;line-height:1.4;}
.news-item p{font-size:.83rem;color:var(--mint);opacity:.8;line-height:1.55;margin-bottom:.45rem;}
.news-meta{font-size:.74rem;color:var(--olive);display:flex;gap:.8rem;flex-wrap:wrap;}
.news-side{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;background:linear-gradient(165deg,rgba(16,58,38,.8),rgba(5,31,20,.7));}
.news-side h3{font-size:1rem;margin-bottom:1rem;color:var(--gold-light);}
.news-side .side-item{padding:.7rem 0;border-bottom:1px dashed var(--line-soft);}
.news-side .side-item:last-child{border-bottom:none;}
.news-side .side-item a{font-size:.87rem;font-weight:600;line-height:1.45;display:block;}
.news-side .side-item span{font-size:.74rem;color:var(--olive);}
.empty-note{padding:1.6rem;border:1px dashed var(--line);border-radius:var(--radius-sm);color:var(--mint);font-size:.9rem;text-align:center;}

/* ===== FAQ ===== */
.faq-list{display:grid;gap:.8rem;max-width:920px;}
.faq-item{border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:rgba(11,46,30,.4);overflow:hidden;}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--ivory);
  padding:1.05rem 1.2rem;font-weight:600;font-size:.95rem;display:flex;justify-content:space-between;gap:1rem;
  transition:color .25s var(--ease);
}
.faq-q:hover{color:var(--gold-light);}
.faq-q i{color:var(--gold);transition:transform .3s var(--ease);flex-shrink:0;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-a{display:none;padding:0 1.2rem 1.15rem;font-size:.88rem;color:var(--mint);opacity:.88;line-height:1.7;}
.faq-item.open .faq-a{display:block;}

/* ===== CTA band ===== */
.cta-band{
  position:relative;padding:70px 0;text-align:center;overflow:hidden;
  background-image:linear-gradient(180deg,rgba(5,31,20,.92),rgba(5,31,20,.96)),url('/assets/images/b04be696a93d29bd.jpg');
  background-size:cover;background-position:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cta-band h2{font-size:clamp(1.4rem,3vw,2.1rem);margin-bottom:.9rem;}
.cta-band p{max-width:660px;margin:0 auto 1.8rem;color:var(--mint);font-size:.97rem;}
.cta-form{display:flex;gap:.6rem;max-width:560px;margin:0 auto 1rem;flex-wrap:wrap;justify-content:center;}
.cta-form input{
  flex:1;min-width:220px;background:rgba(11,46,30,.9);border:1px solid var(--line);
  border-radius:999px;padding:.8rem 1.2rem;color:var(--ivory);outline:none;transition:border-color .25s var(--ease);
}
.cta-form input::placeholder{color:rgba(209,250,229,.5);}
.cta-form input:focus{border-color:var(--gold);}
.cta-note{font-size:.78rem;color:var(--olive);}

/* ===== Footer ===== */
.site-footer{background:rgba(3,20,13,.92);border-top:1px solid var(--line);padding:56px 0 24px;position:relative;z-index:2;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2rem;margin-bottom:2.2rem;}
.footer-brand p{font-size:.85rem;color:var(--mint);opacity:.78;line-height:1.65;margin-top:.9rem;max-width:320px;}
.footer-col h4{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;font-weight:700;}
.footer-col li{padding:.32rem 0;}
.footer-col a{font-size:.86rem;color:var(--mint);opacity:.85;}
.footer-col a:hover{opacity:1;color:var(--gold-light);}
.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;}
.footer-badges span{
  font-size:.72rem;font-weight:600;color:var(--mint);border:1px solid var(--line-soft);
  padding:.28rem .7rem;border-radius:999px;background:rgba(255,255,255,.03);
}
.footer-bottom{
  border-top:1px solid var(--line-soft);padding-top:1.3rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--olive);
}
.age-badge{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);color:var(--gold-light);font-size:.7rem;font-weight:800;
}

/* ===== FAB ===== */
.fab{
  position:fixed;left:1rem;bottom:6rem;z-index:50;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%, #3A2A0C 0%, #14161B 62%);
  border:2px solid var(--gold);
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  color:var(--gold-light);font-size:1.25rem;
  opacity:.8;
  animation:fabFloat 3.4s ease-in-out infinite;
  transition:transform .3s var(--ease),opacity .3s var(--ease),box-shadow .3s var(--ease);
}
.fab:hover{opacity:1;transform:scale(1.1);box-shadow:0 10px 34px rgba(245,158,11,.5);}
.fab:active{transform:scale(.95) translateY(3px);}
.fab i{transition:transform .5s var(--ease);}
.fab:hover i{transform:rotate(360deg);}
.fab .dot{
  position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;
  background:#DC2626;box-shadow:0 0 0 2px #FFFFFF;
  animation:pulseDot 1.8s infinite;
}
@keyframes fabFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(.85);}}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .nav-links{display:none;}
  .nav-toggle{display:grid;place-items:center;margin-left:auto;}
  .split{grid-template-columns:1fr;gap:1.8rem;}
  .commit-strip{grid-template-columns:repeat(2,1fr);}
  .spec-grid{grid-template-columns:repeat(2,1fr);}
  .metrics{grid-template-columns:repeat(2,1fr);}
  .case-grid{grid-template-columns:1fr;}
  .news-layout{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.6rem;}
}
@media (max-width:768px){
  .section{padding:56px 0;}
  .hero{padding:126px 0 64px;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr;}
  .review-grid{grid-template-columns:1fr;}
  .audience-grid{grid-template-columns:1fr;}
  .cat-matrix{grid-template-columns:1fr;}
  .compare-two{grid-template-columns:1fr;}
  .brand-text strong{font-size:.92rem;}
  .nav-inner{gap:.8rem;}
  .btn-signup{padding:.55rem .95rem;font-size:.82rem;}
  .btn-login{font-size:.84rem;padding:.5rem .5rem;}
}
@media (max-width:520px){
  .commit-strip{grid-template-columns:1fr;}
  .spec-grid{grid-template-columns:1fr;}
  .metrics{grid-template-columns:1fr;}
  .hero-search{flex-wrap:wrap;border-radius:var(--radius);padding:.9rem;}
  .hero-search input{width:100%;}
  .hero-search button{width:100%;}
  .news-item{flex-direction:column;}
  .news-item img{width:100%;height:150px;}
  .footer-grid{grid-template-columns:1fr;}
  .fab{width:50px;height:50px;bottom:5.2rem;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta a{justify-content:center;}
}

/* roulang page: article */
:root{
  --jade-900:#051F14;
  --jade-850:#08281A;
  --jade-800:#0B2E1E;
  --jade-700:#103A26;
  --gold:#F59E0B;
  --gold-light:#FCD34D;
  --gold-deep:#B45309;
  --red:#DC2626;
  --ivory:#F8FAFC;
  --mint:#D1FAE5;
  --olive:#A3A375;
  --line:rgba(245,158,11,.28);
  --line-soft:rgba(209,250,229,.13);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.30);
  --shadow:0 16px 44px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(245,158,11,.22), 0 14px 38px rgba(245,158,11,.14);
  --container:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--jade-900);
  color:var(--ivory);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(245,158,11,.10), transparent 62%),
    radial-gradient(760px 460px at 92% 8%, rgba(16,185,129,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease);}
a:hover{color:var(--gold-light);}
button,input,select{font-family:inherit;font-size:inherit;}
h1,h2,h3,h4{margin:0 0 .6rem;line-height:1.28;font-weight:800;letter-spacing:-.01em;}
p{margin:0 0 1rem;}
.container-x{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;position:relative;z-index:2;}
main{position:relative;z-index:1;}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:6px;}
/* ===== Buttons ===== */
.btn-gold{
  display:inline-flex;align-items:center;gap:.55rem;
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#1A1206;font-weight:700;font-size:.94rem;
  padding:.78rem 1.5rem;border-radius:999px;border:none;
  box-shadow:0 10px 26px rgba(245,158,11,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
.btn-gold:hover{color:#1A1206;transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,158,11,.38);filter:brightness(1.05);}
.btn-gold:active{transform:translateY(0) scale(.985);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;color:var(--gold-light);
  border:1px solid var(--line);border-radius:999px;
  padding:.74rem 1.35rem;font-weight:600;font-size:.92rem;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn-ghost:hover{background:rgba(245,158,11,.10);border-color:var(--gold);color:var(--gold-light);transform:translateY(-2px);}
.btn-outline-light-x{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line-soft);border-radius:999px;padding:.72rem 1.3rem;
  color:var(--mint);font-weight:600;font-size:.9rem;background:rgba(255,255,255,.03);
  transition:all .25s var(--ease);
}
.btn-outline-light-x:hover{border-color:var(--line);color:var(--gold-light);background:rgba(245,158,11,.08);}
/* ===== Header ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(5,31,20,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.scrolled{background:rgba(5,31,20,.95);box-shadow:0 10px 30px rgba(0,0,0,.45);border-bottom-color:var(--line);}
.nav-inner{display:flex;align-items:center;gap:1.4rem;min-height:74px;}
.brand{display:flex;align-items:center;gap:.65rem;flex-shrink:0;}
.brand-mark{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));
  display:grid;place-items:center;color:#20160A;font-size:1.15rem;
  box-shadow:0 8px 20px rgba(245,158,11,.3);
}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text strong{font-size:1.02rem;font-weight:800;color:var(--ivory);letter-spacing:-.02em;}
.brand-text span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.nav-links{display:flex;align-items:center;gap:.35rem;margin-left:auto;list-style:none;padding:0;}
.nav-link-x{
  display:inline-block;padding:.55rem .85rem;border-radius:999px;font-size:.9rem;font-weight:600;
  color:var(--mint);white-space:nowrap;transition:all .25s var(--ease);
}
.nav-link-x:hover{color:var(--gold-light);background:rgba(245,158,11,.09);}
.nav-link-x.active{color:var(--gold-light);background:rgba(245,158,11,.14);box-shadow:inset 0 0 0 1px var(--line);}
.nav-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.btn-login{
  background:none;border:none;color:var(--gold-light);font-weight:600;font-size:.9rem;
  padding:.55rem .7rem;border-radius:999px;transition:background .25s var(--ease);
}
.btn-login:hover{background:rgba(245,158,11,.10);}
.btn-signup{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#1A1206;font-weight:700;font-size:.88rem;border:none;
  padding:.62rem 1.2rem;border-radius:999px;
  box-shadow:0 8px 20px rgba(245,158,11,.3);
  transition:transform .25s var(--ease),filter .25s var(--ease);
}
.btn-signup:hover{transform:translateY(-2px);filter:brightness(1.06);}
.nav-toggle{
  display:none;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);
  color:var(--mint);width:42px;height:42px;border-radius:12px;font-size:1.05rem;
}
.mobile-panel{
  display:none;border-top:1px solid var(--line-soft);
  background:rgba(5,31,20,.98);padding:.75rem 0 1rem;
}
.mobile-panel.open{display:block;}
.mobile-panel a{
  display:block;padding:.72rem .3rem;font-weight:600;color:var(--mint);
  border-bottom:1px solid rgba(209,250,229,.07);font-size:.94rem;
}
.mobile-panel a:last-child{border-bottom:none;}
.mobile-panel a.active{color:var(--gold-light);}
/* ===== Article hero ===== */
.article-hero{
  position:relative;
  padding:138px 0 54px;
  background-image:linear-gradient(180deg,rgba(5,31,20,.92) 0%,rgba(5,31,20,.95) 58%,var(--jade-900) 100%),url('/assets/images/b04be696a93d29bd.jpg');
  background-size:cover;background-position:center;
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.82rem;color:var(--olive);margin-bottom:1.1rem;}
.crumbs a{color:var(--mint);}
.crumbs a:hover{color:var(--gold-light);}
.crumbs i{font-size:.6rem;opacity:.7;}
.crumbs .current{color:var(--gold-light);font-weight:600;}
.article-chip{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(245,158,11,.12);border:1px solid var(--line);
  color:var(--gold-light);font-size:.78rem;font-weight:700;
  padding:.4rem .9rem;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:1rem;
}
.article-title{
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  max-width:900px;
  margin:0 0 1rem;
  background:linear-gradient(120deg,#FFFFFF 25%,var(--gold-light) 85%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.article-lead{max-width:820px;color:var(--mint);font-size:1.02rem;margin-bottom:1.2rem;}
.article-meta{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.85rem;color:var(--olive);margin-bottom:1.6rem;}
.article-meta span{display:inline-flex;align-items:center;gap:.45rem;}
.article-meta i{color:var(--gold);}
.quick-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden;
}
.quick-strip div{
  background:rgba(8,40,26,.86);
  padding:1.05rem 1.2rem;
  display:flex;align-items:flex-start;gap:.7rem;
}
.quick-strip i{color:var(--gold);font-size:1.05rem;margin-top:.2rem;}
.quick-strip strong{display:block;font-size:.94rem;color:var(--ivory);}
.quick-strip small{color:var(--olive);font-size:.8rem;line-height:1.5;}
/* ===== Sections ===== */
.section{padding:66px 0;position:relative;}
.section-alt{background:linear-gradient(180deg,rgba(8,40,26,.55),rgba(5,31,20,.2));border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.section-head{max-width:760px;margin-bottom:2.2rem;}
.section-head .eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.6rem;
}
.section-head h2{font-size:clamp(1.35rem,2.4vw,1.95rem);}
.section-head p{color:var(--olive);margin:0;font-size:.95rem;}
/* ===== Article body ===== */
.article-shell{max-width:830px;}
.article-body{font-size:1.02rem;color:#E8F5EE;line-height:1.75;}
.article-body h2{
  font-size:clamp(1.2rem,2vw,1.6rem);margin:2.4rem 0 .9rem;padding-left:.85rem;
  border-left:4px solid var(--gold);color:var(--ivory);
}
.article-body h3{font-size:1.14rem;margin:1.8rem 0 .7rem;color:var(--gold-light);}
.article-body p{margin:0 0 1.15rem;}
.article-body ul,.article-body ol{margin:0 0 1.3rem;padding-left:1.35rem;}
.article-body li{margin-bottom:.55rem;}
.article-body ul li::marker{color:var(--gold);}
.article-body strong{color:var(--gold-light);}
.article-body a{color:var(--gold-light);text-decoration:underline;text-decoration-color:rgba(245,158,11,.45);}
.article-body img{border-radius:var(--radius);margin:1.3rem 0;border:1px solid var(--line-soft);}
.article-body blockquote{
  margin:1.5rem 0;padding:1.1rem 1.3rem;border-left:3px solid var(--gold);
  background:rgba(245,158,11,.07);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--mint);font-style:italic;
}
.article-body table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.93rem;}
.article-body th,.article-body td{border:1px solid var(--line-soft);padding:.7rem .85rem;text-align:left;}
.article-body th{background:rgba(245,158,11,.12);color:var(--gold-light);}
.article-body figcaption{font-size:.82rem;color:var(--olive);text-align:left;margin-top:-.6rem;}
.article-empty{
  border:1px dashed var(--line);border-radius:var(--radius);
  padding:2.4rem 1.6rem;background:rgba(8,40,26,.6);
}
.article-empty h2{font-size:1.25rem;margin-bottom:.5rem;}
.article-empty p{color:var(--olive);}
/* ===== Criteria cards ===== */
.crit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
.crit-card{
  background:linear-gradient(165deg,rgba(16,58,38,.85),rgba(8,40,26,.92));
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.4rem 1.25rem;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.crit-card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--glow);}
.crit-card .ic{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(245,158,11,.13);color:var(--gold);font-size:1.05rem;margin-bottom:.9rem;
}
.crit-card h3{font-size:1.02rem;margin-bottom:.45rem;}
.crit-card p{margin:0;font-size:.88rem;color:var(--olive);}
/* ===== Schedule ===== */
.slot-list{border-top:1px solid var(--line-soft);}
.slot-row{
  display:grid;grid-template-columns:170px 1fr auto;gap:1rem;align-items:center;
  padding:1.05rem .4rem;border-bottom:1px solid var(--line-soft);
  transition:background .25s var(--ease),padding-left .25s var(--ease);
}
.slot-row:hover{background:rgba(245,158,11,.05);padding-left:.9rem;}
.slot-time{font-weight:800;color:var(--gold-light);font-size:1rem;letter-spacing:.01em;}
.slot-note{font-size:.9rem;color:var(--mint);}
.slot-tag{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:.28rem .7rem;white-space:nowrap;
}
.slot-tag.hot{color:#FEE2E2;border-color:rgba(220,38,38,.5);background:rgba(220,38,38,.16);}
.note-line{margin-top:1.1rem;font-size:.85rem;color:var(--olive);display:flex;gap:.5rem;align-items:flex-start;}
.note-line i{color:var(--gold);margin-top:.25rem;}
/* ===== Compare table ===== */
.table-wrap{
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  background:rgba(8,40,26,.6);
}
.table-x{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px;}
.table-x th,.table-x td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--line-soft);}
.table-x thead th{
  background:rgba(245,158,11,.12);color:var(--gold-light);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
}
.table-x tbody tr:last-child td{border-bottom:none;}
.table-x tbody tr{transition:background .25s var(--ease);}
.table-x tbody tr:hover{background:rgba(245,158,11,.05);}
.table-x td:first-child{font-weight:700;color:var(--ivory);}
.table-scroll{overflow-x:auto;}
/* ===== Devices ===== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;align-items:center;}
.split-media{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);
  box-shadow:var(--shadow);position:relative;
}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.split-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,31,20,0) 45%,rgba(5,31,20,.75));
}
.device-list{list-style:none;padding:0;margin:0;}
.device-list li{
  display:flex;gap:.85rem;padding:.95rem 0;border-bottom:1px dashed var(--line-soft);
}
.device-list li:last-child{border-bottom:none;}
.device-list i{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;
  background:rgba(245,158,11,.12);color:var(--gold);font-size:.95rem;
}
.device-list strong{display:block;font-size:.96rem;}
.device-list span{font-size:.86rem;color:var(--olive);}
/* ===== Reviews ===== */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.review-card{
  background:linear-gradient(160deg,rgba(16,58,38,.9),rgba(8,40,26,.95));
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.5rem 1.35rem;
  display:flex;flex-direction:column;gap:.8rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.review-card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--glow);}
.review-card .stars{color:var(--gold);font-size:.85rem;letter-spacing:.15em;}
.review-card p{margin:0;font-size:.92rem;color:#E8F5EE;font-style:italic;}
.review-user{display:flex;align-items:center;gap:.7rem;margin-top:auto;}
.review-avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));color:#20160A;font-size:.9rem;
}
.review-user strong{font-size:.9rem;display:block;}
.review-user span{font-size:.78rem;color:var(--olive);}
/* ===== Category matrix ===== */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.cat-card{
  display:flex;flex-direction:column;gap:.75rem;
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  background:rgba(8,40,26,.72);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.cat-card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--glow);}
.cat-card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;}
.cat-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.cat-card:hover .thumb img{transform:scale(1.06);}
.cat-card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,31,20,.05),rgba(5,31,20,.7));}
.cat-card .body{padding:1.15rem 1.25rem 1.4rem;}
.cat-card h3{font-size:1.05rem;margin-bottom:.4rem;}
.cat-card p{margin:0 0 .8rem;font-size:.88rem;color:var(--olive);}
.cat-card .more{font-size:.85rem;font-weight:700;color:var(--gold-light);display:inline-flex;align-items:center;gap:.4rem;}
/* ===== FAQ ===== */
.faq-accordion{max-width:860px;}
.faq-item{
  background:rgba(8,40,26,.7);border:1px solid var(--line-soft)!important;
  border-radius:var(--radius-sm)!important;margin-bottom:.8rem;overflow:hidden;
}
.faq-item .accordion-button{
  background:transparent;color:var(--ivory);font-weight:700;font-size:.98rem;
  padding:1.1rem 1.2rem;box-shadow:none!important;
}
.faq-item .accordion-button:not(.collapsed){color:var(--gold-light);background:rgba(245,158,11,.07);}
.faq-item .accordion-button::after{
  background-image:none;content:"\2b";font-family:"Font Awesome 6 Free";font-weight:900;
  color:var(--gold);display:grid;place-items:center;width:1rem;height:1rem;font-size:.9rem;
  transition:transform .3s var(--ease);
}
.faq-item .accordion-button:not(.collapsed)::after{content:"\f068";transform:none;}
.faq-item .accordion-body{padding:0 1.2rem 1.25rem;color:var(--olive);font-size:.92rem;line-height:1.7;}
/* ===== Timeline / bulletin ===== */
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--line);}
.timeline li{position:relative;padding:0 0 1.5rem 1.6rem;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{
  content:"";position:absolute;left:-8px;top:.35rem;width:14px;height:14px;border-radius:50%;
  background:var(--jade-900);border:2px solid var(--gold);
}
.timeline .t{font-weight:800;color:var(--gold-light);font-size:.9rem;letter-spacing:.03em;}
.timeline p{margin:.2rem 0 0;font-size:.9rem;color:var(--mint);}
/* ===== CTA ===== */
.cta-band{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);
  background-image:linear-gradient(115deg,rgba(5,31,20,.94),rgba(11,46,30,.86)),url('/assets/images/553269deb95e3eb4.jpg');
  background-size:cover;background-position:center;
  padding:2.6rem 2.4rem;
  text-align:center;
}
.cta-band h2{font-size:clamp(1.35rem,2.5vw,1.9rem);margin-bottom:.7rem;}
.cta-band p{max-width:680px;margin:0 auto 1.6rem;color:var(--mint);font-size:.96rem;}
.cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;}
.cta-foot{margin-top:1.3rem;font-size:.8rem;color:var(--olive);}
/* ===== Footer ===== */
.site-footer{
  margin-top:20px;padding:60px 0 26px;
  background:linear-gradient(180deg,rgba(8,40,26,.85),var(--jade-900));
  border-top:1px solid var(--line-soft);
  position:relative;z-index:2;
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:2.2rem;}
.footer-brand p{font-size:.88rem;color:var(--olive);margin:1rem 0 1.1rem;max-width:340px;}
.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem;}
.footer-badges span{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--mint);
  border:1px solid var(--line-soft);border-radius:999px;padding:.3rem .75rem;background:rgba(255,255,255,.03);
}
.footer-badges i{color:var(--gold);}
.age-badge{
  font-weight:800;color:#FEE2E2!important;border-color:rgba(220,38,38,.5)!important;
  background:rgba(220,38,38,.18)!important;
}
.footer-col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.13em;color:var(--gold);margin-bottom:1rem;}
.footer-col ul{list-style:none;padding:0;margin:0;}
.footer-col li{margin-bottom:.6rem;}
.footer-col a{font-size:.88rem;color:var(--mint);}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{
  margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;
  font-size:.78rem;color:var(--olive);
}
/* ===== FAB ===== */
.fab-coin{
  position:fixed;left:1rem;bottom:6rem;z-index:50;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#2A2016,#0B0C0E 72%);
  border:2px solid var(--gold);
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  opacity:.82;
  animation:fabFloat 3.4s ease-in-out infinite;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.fab-coin i{color:var(--gold-light);font-size:1.2rem;transition:transform .5s var(--ease);}
.fab-coin:hover{opacity:1;transform:scale(1.1);}
.fab-coin:hover i{transform:rotate(360deg);}
.fab-coin:active{transform:scale(.95) translateY(3px);}
.fab-coin .dot{
  position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 2px #FFFFFF;
}
@keyframes fabFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
/* ===== Responsive ===== */
@media (max-width:1024px){
  .nav-links{display:none;}
  .nav-toggle{display:grid;place-items:center;}
  .nav-actions .btn-login,.nav-actions .btn-signup{padding:.5rem .85rem;font-size:.8rem;}
  .crit-grid{grid-template-columns:repeat(2,1fr);}
  .review-grid,.cat-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem;}
  .split{grid-template-columns:1fr;gap:1.6rem;}
  .quick-strip{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .article-hero{padding:118px 0 44px;}
  .section{padding:52px 0;}
  .slot-row{grid-template-columns:1fr;gap:.35rem;}
  .slot-tag{justify-self:start;}
  .review-grid,.cat-grid{grid-template-columns:1fr;}
  .cta-band{padding:2rem 1.3rem;}
}
@media (max-width:520px){
  .brand-text strong{font-size:.9rem;}
  .brand-text span{display:none;}
  .crit-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .article-title{font-size:1.45rem;}
  .fab-coin{width:52px;height:52px;bottom:5.5rem;}
}

/* roulang page: category1 */
:root{
  --jade-900:#051F14;
  --jade-850:#08281A;
  --jade-800:#0B2E1E;
  --jade-700:#103A26;
  --gold:#F59E0B;
  --gold-light:#FCD34D;
  --gold-deep:#B45309;
  --red:#DC2626;
  --ivory:#F8FAFC;
  --mint:#D1FAE5;
  --olive:#A3A375;
  --line:rgba(245,158,11,.28);
  --line-soft:rgba(209,250,229,.13);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.30);
  --shadow:0 16px 44px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(245,158,11,.22), 0 14px 38px rgba(245,158,11,.14);
  --container:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--jade-900);
  color:var(--ivory);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(245,158,11,.10), transparent 62%),
    radial-gradient(760px 460px at 92% 8%, rgba(16,185,129,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease);}
a:hover{color:var(--gold-light);}
button,input,select{font-family:inherit;font-size:inherit;}
h1,h2,h3,h4{margin:0 0 .65rem;line-height:1.28;letter-spacing:-.02em;font-weight:800;}
p{margin:0 0 1rem;}
ul{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:6px;}
.container-x{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;position:relative;z-index:2;}
main{position:relative;z-index:1;}
[id]{scroll-margin-top:104px;}

/* ===== Buttons ===== */
.btn-gold{
  display:inline-flex;align-items:center;gap:.55rem;
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#1A1206;font-weight:700;font-size:.94rem;
  padding:.78rem 1.5rem;border-radius:999px;border:none;
  box-shadow:0 10px 26px rgba(245,158,11,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
.btn-gold:hover{color:#1A1206;transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,158,11,.38);filter:brightness(1.05);}
.btn-gold:active{transform:translateY(0) scale(.985);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;color:var(--gold-light);
  border:1px solid var(--line);border-radius:999px;
  padding:.74rem 1.35rem;font-weight:600;font-size:.92rem;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn-ghost:hover{background:rgba(245,158,11,.10);border-color:var(--gold);color:var(--gold-light);transform:translateY(-2px);}
.btn-outline-light-x{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line-soft);border-radius:999px;padding:.72rem 1.3rem;
  color:var(--mint);font-weight:600;font-size:.9rem;background:rgba(255,255,255,.03);
  transition:all .25s var(--ease);
}
.btn-outline-light-x:hover{border-color:var(--line);color:var(--gold-light);background:rgba(245,158,11,.08);}

/* ===== Header ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(5,31,20,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.scrolled{background:rgba(5,31,20,.95);box-shadow:0 10px 30px rgba(0,0,0,.45);border-bottom-color:var(--line);}
.nav-inner{display:flex;align-items:center;gap:1.4rem;min-height:74px;}
.brand{display:flex;align-items:center;gap:.65rem;flex-shrink:0;}
.brand-mark{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));
  display:grid;place-items:center;color:#20160A;font-size:1.15rem;
  box-shadow:0 8px 20px rgba(245,158,11,.3);
}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text strong{font-size:1.02rem;font-weight:800;color:var(--ivory);letter-spacing:-.02em;}
.brand-text span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.nav-links{display:flex;align-items:center;gap:.35rem;margin-left:auto;}
.nav-link-x{
  padding:.55rem .85rem;border-radius:999px;font-size:.9rem;font-weight:600;
  color:var(--mint);white-space:nowrap;transition:all .25s var(--ease);
}
.nav-link-x:hover{color:var(--gold-light);background:rgba(245,158,11,.09);}
.nav-link-x.active{color:var(--gold-light);background:rgba(245,158,11,.14);box-shadow:inset 0 0 0 1px var(--line);}
.nav-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.btn-login{
  background:none;border:none;color:var(--gold-light);font-weight:600;font-size:.9rem;
  padding:.55rem .7rem;border-radius:999px;transition:background .25s var(--ease);
}
.btn-login:hover{background:rgba(245,158,11,.10);}
.btn-signup{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#1A1206;font-weight:700;font-size:.88rem;border:none;
  padding:.62rem 1.2rem;border-radius:999px;
  box-shadow:0 8px 20px rgba(245,158,11,.3);
  transition:transform .25s var(--ease),filter .25s var(--ease);
}
.btn-signup:hover{transform:translateY(-2px);filter:brightness(1.06);}
.nav-toggle{
  display:none;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);
  color:var(--mint);width:42px;height:42px;border-radius:12px;font-size:1.05rem;
}
.mobile-panel{
  display:none;border-top:1px solid var(--line-soft);
  background:rgba(5,31,20,.98);padding:.75rem 0 1rem;
}
.mobile-panel.open{display:block;}
.mobile-panel a{
  display:block;padding:.72rem .3rem;font-weight:600;color:var(--mint);
  border-bottom:1px solid rgba(209,250,229,.07);font-size:.94rem;
}
.mobile-panel a:last-child{border-bottom:none;}
.mobile-panel a.active{color:var(--gold-light);}

/* ===== Sections ===== */
.section{padding:80px 0;position:relative;}
.section-alt{background:linear-gradient(180deg,rgba(8,40,26,.72),rgba(5,31,20,.92));border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.section-head{max-width:780px;margin-bottom:2.4rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.9rem;
}
.section-title{font-size:clamp(1.5rem,3vw,2.15rem);}
.section-sub{color:var(--mint);opacity:.82;font-size:.98rem;margin:0;}
.lead{font-size:1.02rem;color:var(--mint);opacity:.9;}

/* ===== Hero ===== */
.hero-cat{
  position:relative;padding:142px 0 74px;
  background-image:linear-gradient(180deg,rgba(5,31,20,.88) 0%,rgba(5,31,20,.95) 58%,var(--jade-900) 100%),url('/assets/images/3f9ffaf1610aab83.jpg');
  background-size:cover;background-position:center;
  overflow:hidden;
}
.hero-cat::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:3rem;align-items:center;}
.hero-copy{text-align:left;}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(245,158,11,.12);border:1px solid var(--line);
  color:var(--gold-light);font-size:.78rem;font-weight:700;
  padding:.42rem .95rem;border-radius:999px;margin-bottom:1.2rem;
  letter-spacing:.04em;
}
.hero-copy h1{font-size:clamp(1.75rem,3.6vw,2.7rem);margin-bottom:1rem;}
.hero-copy h1 em{font-style:normal;color:var(--gold-light);}
.hero-lead{font-size:1.02rem;color:var(--mint);opacity:.9;max-width:640px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 0;}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin-top:2.2rem;}
.metric{
  background:rgba(255,255,255,.04);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:.9rem 1rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.metric:hover{border-color:var(--line);transform:translateY(-3px);}
.metric b{display:block;font-size:1.14rem;color:var(--gold-light);font-weight:800;letter-spacing:-.02em;}
.metric span{font-size:.72rem;color:var(--olive);text-transform:uppercase;letter-spacing:.09em;}

.panel{
  background:linear-gradient(165deg,rgba(16,58,38,.78),rgba(5,31,20,.86));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.5rem 1.4rem 1.1rem;
  box-shadow:var(--glow);
}
.panel-title{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:1rem;font-weight:700;color:var(--ivory);margin-bottom:.5rem;
}
.live-dot{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;
  color:#FCA5A5;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.live-dot::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 4px rgba(220,38,38,.2);
  animation:pulseDot 1.6s infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}
.panel-row{display:flex;align-items:center;justify-content:space-between;gap:.9rem;padding:.78rem .1rem;border-bottom:1px dashed rgba(209,250,229,.14);}
.panel-row:last-child{border-bottom:none;}
.panel-left{display:flex;flex-direction:column;}
.panel-time{font-weight:800;color:var(--gold-light);font-size:.95rem;}
.panel-name{color:var(--mint);opacity:.82;font-size:.85rem;}

/* ===== Tags ===== */
.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  padding:.3rem .7rem;border-radius:999px;white-space:nowrap;
}
.tag-live{background:rgba(220,38,38,.18);color:#FCA5A5;border:1px solid rgba(220,38,38,.45);}
.tag-soon{background:rgba(245,158,11,.16);color:var(--gold-light);border:1px solid var(--line);}
.tag-done{background:rgba(209,250,229,.08);color:var(--mint);border:1px solid var(--line-soft);}
.tag-wait{background:rgba(16,185,129,.14);color:#6EE7B7;border:1px solid rgba(16,185,129,.32);}

/* ===== Split block ===== */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:2.8rem;align-items:start;}
.split-media{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);
  box-shadow:var(--shadow);
}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.feature-list{display:flex;flex-direction:column;gap:0;}
.feature-item{
  display:grid;grid-template-columns:46px 1fr;gap:1rem;
  padding:1.15rem 0;border-bottom:1px solid var(--line-soft);
}
.feature-item:first-child{padding-top:0;}
.feature-item:last-child{border-bottom:none;}
.feature-icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(245,158,11,.13);border:1px solid var(--line);color:var(--gold-light);font-size:1.05rem;
}
.feature-item h3{font-size:1.02rem;margin-bottom:.25rem;}
.feature-item p{margin:0;font-size:.92rem;color:var(--mint);opacity:.8;}

/* ===== Compare ===== */
.compare{
  margin-top:2.4rem;border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;background:rgba(5,31,20,.55);
}
.compare-head,.compare-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1rem;padding:.9rem 1.2rem;}
.compare-head{background:rgba(245,158,11,.10);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);font-weight:700;}
.compare-row{border-top:1px solid var(--line-soft);font-size:.9rem;color:var(--mint);}
.compare-row span:first-child{color:var(--ivory);font-weight:600;}
.compare-row span:last-child{color:#6EE7B7;font-weight:600;}

/* ===== Schedule ===== */
.schedule-grid{display:grid;grid-template-columns:1.42fr .58fr;gap:2.2rem;align-items:start;}
.timeline{display:flex;flex-direction:column;gap:.8rem;}
.tl-row{
  display:grid;grid-template-columns:104px 1fr auto;gap:1rem;align-items:center;
  background:rgba(255,255,255,.035);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:1rem 1.15rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease);
}
.tl-row:hover{border-color:var(--line);transform:translateX(4px);background:rgba(245,158,11,.06);}
.tl-time{font-weight:800;color:var(--gold-light);font-size:1rem;letter-spacing:-.01em;}
.tl-name{font-weight:600;font-size:.96rem;color:var(--ivory);}
.tl-desc{font-size:.83rem;color:var(--mint);opacity:.72;}
.side-note{
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  overflow:hidden;background:rgba(8,40,26,.6);
}
.side-note img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.side-note-body{padding:1.2rem 1.25rem 1.35rem;}
.side-note-body h3{font-size:1rem;}
.side-note-body p{font-size:.88rem;color:var(--mint);opacity:.8;margin:0;}

/* ===== Format cards ===== */
.format-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;}
.format-card{
  background:linear-gradient(170deg,rgba(16,58,38,.72),rgba(5,31,20,.68));
  border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.format-card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--glow);}
.format-card img{width:100%;aspect-ratio:16/11;object-fit:cover;}
.format-body{padding:1.1rem 1.15rem 1.3rem;}
.format-body h3{font-size:1rem;margin-bottom:.35rem;}
.format-body p{font-size:.87rem;color:var(--mint);opacity:.78;margin:0;}
.format-body .tag{margin-bottom:.6rem;}

/* ===== Steps ===== */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;}
.step{position:relative;padding-left:0;border-top:2px solid var(--line);padding-top:1.2rem;}
.step-num{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));color:#1A1206;
  font-weight:800;font-size:.9rem;margin-bottom:.7rem;
}
.step h3{font-size:.99rem;margin-bottom:.3rem;}
.step p{font-size:.88rem;color:var(--mint);opacity:.78;margin:0;}
.device-strip{
  margin-top:2.4rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.3rem 1.2rem;
  background:rgba(255,255,255,.03);
}
.device-item{display:flex;align-items:flex-start;gap:.7rem;font-size:.88rem;color:var(--mint);}
.device-item i{color:var(--gold-light);font-size:1.05rem;margin-top:.15rem;}
.device-item b{display:block;color:var(--ivory);font-size:.92rem;}

/* ===== Channel matrix ===== */
.channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;}
.channel-card{
  display:block;padding:1.6rem 1.5rem;border-radius:var(--radius);
  border:1px solid var(--line-soft);background:rgba(8,40,26,.6);
  transition:transform .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease);
}
.channel-card:hover{transform:translateY(-4px);border-color:var(--line);background:rgba(16,58,38,.75);}
.channel-card.active{border-color:var(--line);background:linear-gradient(160deg,rgba(245,158,11,.14),rgba(8,40,26,.7));}
.channel-card i{color:var(--gold-light);font-size:1.3rem;margin-bottom:.7rem;display:block;}
.channel-card h3{font-size:1.05rem;margin-bottom:.3rem;}
.channel-card p{font-size:.87rem;color:var(--mint);opacity:.78;margin:0;}

/* ===== Quotes ===== */
.quote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;}
.quote{border-left:3px solid var(--gold);padding:.2rem 0 .2rem 1.2rem;}
.quote p{font-size:.95rem;color:var(--mint);opacity:.9;font-style:italic;}
.quote footer{font-size:.83rem;color:var(--olive);letter-spacing:.03em;}
.quote footer b{color:var(--ivory);font-style:normal;}

/* ===== News list ===== */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;}
.news-card{
  background:rgba(8,40,26,.62);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.news-card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--glow);}
.news-link{display:block;height:100%;}
.news-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;}
.news-body{padding:1.1rem 1.2rem 1.35rem;}
.news-meta{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.75rem;color:var(--olive);margin-bottom:.5rem;letter-spacing:.04em;}
.news-meta span{display:inline-flex;align-items:center;gap:.3rem;}
.news-body h3{font-size:1rem;line-height:1.4;margin-bottom:.4rem;color:var(--ivory);}
.news-link:hover h3{color:var(--gold-light);}
.news-body p{font-size:.86rem;color:var(--mint);opacity:.76;margin:0;}
.news-empty{
  border:1px dashed var(--line-soft);border-radius:var(--radius);
  padding:1.6rem;text-align:center;color:var(--mint);opacity:.8;margin:0;
}

/* ===== FAQ ===== */
.faq-accordion .accordion-item{
  background:rgba(8,40,26,.62);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm)!important;margin-bottom:.8rem;overflow:hidden;
}
.faq-accordion .accordion-button{
  background:transparent;color:var(--ivory);font-weight:700;font-size:.98rem;
  padding:1.05rem 1.2rem;box-shadow:none;border-radius:var(--radius-sm)!important;
}
.faq-accordion .accordion-button:not(.collapsed){
  color:var(--gold-light);background:rgba(245,158,11,.09);box-shadow:none;
}
.faq-accordion .accordion-button::after{
  filter:invert(72%) sepia(58%) saturate(640%) hue-rotate(348deg) brightness(1.05);
}
.faq-accordion .accordion-body{
  padding:.2rem 1.2rem 1.2rem;font-size:.92rem;color:var(--mint);opacity:.85;
}

/* ===== CTA band ===== */
.cta-band{
  background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(16,185,129,.08));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2.6rem 2.2rem;text-align:center;box-shadow:var(--glow);
}
.cta-band h2{font-size:clamp(1.35rem,2.6vw,1.9rem);}
.cta-band p{color:var(--mint);opacity:.88;max-width:720px;margin:0 auto 1.5rem;}
.cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;}
.cta-note{font-size:.8rem;color:var(--olive);margin:1.2rem 0 0;}

/* ===== Footer ===== */
.site-footer{
  background:linear-gradient(180deg,rgba(5,31,20,.96),rgba(3,20,13,1));
  border-top:1px solid var(--line);padding:3.2rem 0 1.6rem;position:relative;z-index:1;
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:2.2rem;}
.footer-brand .brand{margin-bottom:1rem;}
.footer-brand p{font-size:.9rem;color:var(--mint);opacity:.76;max-width:360px;}
.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;}
.footer-badges span{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;
  border:1px solid var(--line-soft);border-radius:999px;padding:.32rem .75rem;
  color:var(--mint);opacity:.9;background:rgba(255,255,255,.03);
}
.footer-badges .age-badge{border-color:var(--line);color:var(--gold-light);font-weight:800;}
.footer-col h4{font-size:.95rem;margin-bottom:1rem;color:var(--gold-light);letter-spacing:.02em;}
.footer-col ul li{margin-bottom:.55rem;}
.footer-col ul li a{font-size:.88rem;color:var(--mint);opacity:.82;}
.footer-col ul li a:hover{color:var(--gold-light);opacity:1;}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;
  margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--line-soft);
  font-size:.8rem;color:var(--olive);
}

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

/* ===== Responsive ===== */
@media (max-width:1024px){
  .nav-links{display:none;}
  .nav-toggle{display:grid;place-items:center;}
  .nav-actions{margin-left:auto;}
  .hero-cat{padding:126px 0 62px;}
  .hero-grid{grid-template-columns:1fr;gap:2.2rem;}
  .split{grid-template-columns:1fr;gap:2rem;}
  .schedule-grid{grid-template-columns:1fr;gap:2rem;}
  .format-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .channel-grid{grid-template-columns:1fr;}
  .quote-grid{grid-template-columns:1fr;gap:1.3rem;}
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem;}
  .device-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:768px){
  body{font-size:15.5px;}
  .section{padding:58px 0;}
  .hero-cat{padding:118px 0 54px;}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tl-row{grid-template-columns:88px 1fr;row-gap:.5rem;}
  .tl-row .tag{grid-column:1 / -1;justify-self:start;}
  .compare-head,.compare-row{grid-template-columns:1fr 1fr;gap:.6rem;font-size:.85rem;}
  .compare-head span:last-child,.compare-row span:last-child{text-align:right;}
  .compare-row span:first-child{grid-column:1 / -1;color:var(--gold-light);}
  .cta-band{padding:2rem 1.4rem;}
  .brand-text strong{font-size:.95rem;}
}
@media (max-width:520px){
  .container-x{padding:0 16px;}
  .nav-inner{gap:.5rem;min-height:66px;}
  .brand-mark{width:36px;height:36px;border-radius:11px;font-size:1rem;}
  .brand-text strong{font-size:.84rem;}
  .brand-text span{display:none;}
  .btn-login{padding:.4rem .5rem;font-size:.78rem;}
  .btn-signup{padding:.46rem .8rem;font-size:.78rem;}
  .nav-toggle{width:38px;height:38px;}
  .hero-cta .btn-gold,.hero-cta .btn-ghost{width:100%;justify-content:center;}
  .metrics{grid-template-columns:1fr;}
  .format-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .news-grid{grid-template-columns:1fr;}
  .device-strip{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;}
  .fab{width:50px;height:50px;bottom:5.2rem;left:.75rem;}
}

/* roulang page: category2 */
:root{
  --jade-900:#051F14;
  --jade-850:#08281A;
  --jade-800:#0B2E1E;
  --jade-700:#103A26;
  --gold:#F59E0B;
  --gold-light:#FCD34D;
  --gold-deep:#B45309;
  --red:#DC2626;
  --ivory:#F8FAFC;
  --mint:#D1FAE5;
  --olive:#A3A375;
  --line:rgba(245,158,11,.28);
  --line-soft:rgba(209,250,229,.13);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.30);
  --shadow:0 16px 44px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(245,158,11,.22), 0 14px 38px rgba(245,158,11,.14);
  --container:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--jade-900);
  color:var(--ivory);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(245,158,11,.10), transparent 62%),
    radial-gradient(760px 460px at 92% 8%, rgba(16,185,129,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease);}
a:hover{color:var(--gold-light);}
button,input,select{font-family:inherit;font-size:inherit;}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;line-height:1.22;margin:0 0 .65rem;color:var(--ivory);}
p{margin:0 0 1rem;color:rgba(209,250,229,.86);}
ul{margin:0;padding:0;list-style:none;}
.container-x{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;position:relative;z-index:2;}
main{position:relative;z-index:1;}

/* ===== Buttons ===== */
.btn-gold{
  display:inline-flex;align-items:center;gap:.55rem;
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#1A1206;font-weight:700;font-size:.94rem;
  padding:.78rem 1.5rem;border-radius:999px;border:none;
  box-shadow:0 10px 26px rgba(245,158,11,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
  cursor:pointer;
}
.btn-gold:hover{color:#1A1206;transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,158,11,.38);filter:brightness(1.05);}
.btn-gold:active{transform:translateY(0) scale(.985);}
.btn-gold:focus-visible,.btn-ghost:focus-visible,.btn-outline-light-x:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;color:var(--gold-light);
  border:1px solid var(--line);border-radius:999px;
  padding:.74rem 1.35rem;font-weight:600;font-size:.92rem;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  cursor:pointer;
}
.btn-ghost:hover{background:rgba(245,158,11,.10);border-color:var(--gold);color:var(--gold-light);transform:translateY(-2px);}
.btn-outline-light-x{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line-soft);border-radius:999px;padding:.72rem 1.3rem;
  color:var(--mint);font-weight:600;font-size:.9rem;background:rgba(255,255,255,.03);
  transition:all .25s var(--ease);cursor:pointer;
}
.btn-outline-light-x:hover{border-color:var(--line);color:var(--gold-light);background:rgba(245,158,11,.08);}

/* ===== Header ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(5,31,20,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.scrolled{background:rgba(5,31,20,.95);box-shadow:0 10px 30px rgba(0,0,0,.45);border-bottom-color:var(--line);}
.nav-inner{display:flex;align-items:center;gap:1.2rem;min-height:74px;}
.brand{display:flex;align-items:center;gap:.65rem;flex-shrink:0;}
.brand-mark{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));
  display:grid;place-items:center;color:#20160A;font-size:1.15rem;
  box-shadow:0 8px 20px rgba(245,158,11,.3);
}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text strong{font-size:1.02rem;font-weight:800;color:var(--ivory);letter-spacing:-.02em;}
.brand-text span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.nav-links{display:flex;align-items:center;gap:.35rem;margin-left:auto;}
.nav-link-x{
  padding:.55rem .85rem;border-radius:999px;font-size:.9rem;font-weight:600;
  color:var(--mint);white-space:nowrap;transition:all .25s var(--ease);
}
.nav-link-x:hover{color:var(--gold-light);background:rgba(245,158,11,.09);}
.nav-link-x.active{color:var(--gold-light);background:rgba(245,158,11,.14);box-shadow:inset 0 0 0 1px var(--line);}
.nav-actions{display:flex;align-items:center;gap:.55rem;flex-shrink:0;}
.btn-login{
  background:none;border:none;color:var(--gold-light);font-weight:600;font-size:.9rem;
  padding:.55rem .7rem;border-radius:999px;transition:background .25s var(--ease);cursor:pointer;
}
.btn-login:hover{background:rgba(245,158,11,.10);}
.btn-signup{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#1A1206;font-weight:700;font-size:.88rem;border:none;
  padding:.62rem 1.2rem;border-radius:999px;
  box-shadow:0 8px 20px rgba(245,158,11,.3);
  transition:transform .25s var(--ease),filter .25s var(--ease);cursor:pointer;
}
.btn-signup:hover{transform:translateY(-2px);filter:brightness(1.06);}
.nav-toggle{
  display:none;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);
  color:var(--mint);width:42px;height:42px;border-radius:12px;font-size:1.05rem;cursor:pointer;
}
.mobile-panel{
  display:none;border-top:1px solid var(--line-soft);
  background:rgba(5,31,20,.98);padding:.75rem 0 1rem;
}
.mobile-panel.open{display:block;}
.mobile-panel a{
  display:block;padding:.72rem .3rem;font-weight:600;color:var(--mint);
  border-bottom:1px solid rgba(209,250,229,.07);font-size:.94rem;
}
.mobile-panel a:last-child{border-bottom:none;}
.mobile-panel a.active{color:var(--gold-light);}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding:148px 0 78px;
  background-image:linear-gradient(180deg,rgba(5,31,20,.90) 0%,rgba(5,31,20,.94) 55%,var(--jade-900) 100%),url('/assets/images/553269deb95e3eb4.jpg');
  background-size:cover;background-position:center;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  width:min(880px,92%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:3rem;align-items:center;}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(245,158,11,.10);
  border:1px solid var(--line);
  color:var(--gold-light);
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.42rem .9rem;border-radius:999px;margin-bottom:1.15rem;
}
.hero h1{font-size:clamp(1.85rem,3.9vw,3rem);margin-bottom:.85rem;}
.hero h1 .hl{background:linear-gradient(120deg,var(--gold-light),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-sub{font-size:1.02rem;color:var(--mint);opacity:.88;max-width:600px;margin-bottom:1.5rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.6rem;}
.subscribe-box{
  background:linear-gradient(150deg,rgba(16,58,38,.85),rgba(5,31,20,.9));
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px 22px;
  max-width:520px;
}
.subscribe-box h3{font-size:1rem;margin-bottom:.35rem;}
.subscribe-box p{font-size:.86rem;margin-bottom:.9rem;opacity:.8;}
.subscribe-form{display:flex;gap:.5rem;flex-wrap:wrap;}
.subscribe-form input{
  flex:1 1 200px;background:rgba(5,31,20,.75);border:1px solid var(--line-soft);
  border-radius:999px;padding:.7rem 1.05rem;color:var(--ivory);font-size:.9rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.subscribe-form input::placeholder{color:rgba(209,250,229,.45);}
.subscribe-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,158,11,.16);}
.form-msg{font-size:.82rem;color:var(--gold-light);margin:.65rem 0 0;min-height:1.1em;}
.roadmap-card{
  background:linear-gradient(160deg,rgba(16,58,38,.9),rgba(5,31,20,.94));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--glow);
}
.roadmap-card h3{font-size:1rem;display:flex;align-items:center;gap:.55rem;margin-bottom:1.1rem;}
.roadmap-card h3 i{color:var(--gold);}
.node{position:relative;padding-left:28px;padding-bottom:20px;}
.node:last-child{padding-bottom:0;}
.node::before{
  content:"";position:absolute;left:6px;top:6px;width:10px;height:10px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(245,158,11,.18);
}
.node::after{
  content:"";position:absolute;left:10px;top:18px;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--line),rgba(245,158,11,0));
}
.node:last-child::after{display:none;}
.node b{display:block;font-size:.92rem;color:var(--ivory);}
.node span{font-size:.82rem;color:rgba(209,250,229,.7);}
.node .node-tag{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.12rem .5rem;border-radius:999px;margin-left:.4rem;vertical-align:middle;
}
.tag-live{background:rgba(16,185,129,.16);color:#6EE7B7;border:1px solid rgba(16,185,129,.35);}
.tag-next{background:rgba(245,158,11,.14);color:var(--gold-light);border:1px solid var(--line);}

/* ===== Sections ===== */
.section{padding:86px 0;position:relative;}
.section-alt{
  background:linear-gradient(180deg,rgba(8,40,26,.72),rgba(5,31,20,.15));
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.85rem;
}
.section-title{font-size:clamp(1.5rem,3vw,2.15rem);margin-bottom:.7rem;}
.section-lead{max-width:660px;font-size:1rem;color:rgba(209,250,229,.8);}
.head-split{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.6rem;}

/* ===== Cards ===== */
.x-card{
  background:linear-gradient(160deg,rgba(16,58,38,.72),rgba(5,31,20,.9));
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:26px 24px;height:100%;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.x-card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--glow);}
.x-card h3{font-size:1.05rem;margin-bottom:.5rem;}
.x-card p{font-size:.92rem;margin:0;}
.icon-badge{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(245,158,11,.22),rgba(180,83,9,.16));
  border:1px solid var(--line);color:var(--gold-light);font-size:1.1rem;margin-bottom:1rem;
}
.pain-list li{
  display:flex;gap:.9rem;align-items:flex-start;padding:16px 0;
  border-bottom:1px dashed rgba(209,250,229,.12);
}
.pain-list li:last-child{border-bottom:none;}
.pain-list i{color:var(--red);font-size:1.05rem;margin-top:.25rem;}
.pain-list b{display:block;font-size:.98rem;margin-bottom:.2rem;}
.pain-list span{font-size:.9rem;color:rgba(209,250,229,.75);}

.check-list li{display:flex;gap:.75rem;align-items:flex-start;padding:.55rem 0;font-size:.94rem;color:rgba(209,250,229,.86);}
.check-list i{color:var(--gold);margin-top:.3rem;}
.figure-box{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);box-shadow:var(--shadow);}
.figure-box img{width:100%;object-fit:cover;}
.figure-cap{font-size:.82rem;color:rgba(209,250,229,.62);padding:.7rem .2rem 0;}

.info-panel{
  background:linear-gradient(160deg,rgba(16,58,38,.85),rgba(5,31,20,.92));
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;
}
.info-panel h3{font-size:1rem;margin-bottom:1rem;}
.info-row{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;border-bottom:1px solid rgba(209,250,229,.09);font-size:.9rem;}
.info-row:last-child{border-bottom:none;}
.info-row span:first-child{color:rgba(209,250,229,.7);}
.info-row span:last-child{color:var(--gold-light);font-weight:600;text-align:right;}

/* ===== Steps ===== */
.step-item{
  display:grid;grid-template-columns:64px 1fr;gap:1.2rem;
  padding:22px 0;border-bottom:1px solid rgba(209,250,229,.09);
}
.step-item:last-child{border-bottom:none;}
.step-num{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  font-weight:800;font-size:1.1rem;color:#1A1206;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));
  box-shadow:0 8px 20px rgba(245,158,11,.26);
}
.step-item h3{font-size:1.02rem;margin-bottom:.35rem;}
.step-item p{font-size:.92rem;margin:0;}
.schedule-strip{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;
  padding:.42rem .85rem;border-radius:999px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.03);color:var(--mint);
}
.chip i{color:var(--gold);}

/* ===== Metrics ===== */
.metric-card{
  background:linear-gradient(160deg,rgba(16,58,38,.75),rgba(5,31,20,.92));
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:24px 22px;height:100%;text-align:left;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.metric-card:hover{transform:translateY(-4px);border-color:var(--line);}
.metric-card .num{
  font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:800;line-height:1.1;
  background:linear-gradient(120deg,var(--gold-light),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  display:block;margin-bottom:.35rem;
}
.metric-card .lbl{font-size:.86rem;color:rgba(209,250,229,.75);}
.compare-table{
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  background:rgba(5,31,20,.55);
}
.compare-row{
  display:grid;grid-template-columns:1.3fr .8fr .8fr 1fr;
  gap:.6rem;padding:.85rem 1.1rem;font-size:.88rem;
  border-bottom:1px solid rgba(209,250,229,.08);align-items:center;
}
.compare-row:last-child{border-bottom:none;}
.compare-row.head{background:rgba(245,158,11,.08);color:var(--gold-light);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;}
.compare-row span{color:rgba(209,250,229,.8);}
.compare-row strong{color:var(--ivory);font-weight:700;}

/* ===== Testimonials ===== */
.quote-card{
  background:linear-gradient(160deg,rgba(16,58,38,.72),rgba(5,31,20,.9));
  border:1px solid var(--line-soft);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:24px;height:100%;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.quote-card:hover{transform:translateY(-4px);box-shadow:var(--glow);}
.quote-card p{font-size:.94rem;font-style:italic;color:rgba(248,250,252,.9);}
.quote-who{display:flex;align-items:center;gap:.7rem;margin-top:1rem;}
.avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(245,158,11,.28),rgba(180,83,9,.2));
  border:1px solid var(--line);color:var(--gold-light);font-weight:800;font-size:.9rem;
}
.quote-who b{display:block;font-size:.9rem;}
.quote-who span{font-size:.78rem;color:rgba(209,250,229,.62);}
.stars{color:var(--gold);font-size:.8rem;letter-spacing:.15em;margin-bottom:.6rem;display:block;}

/* ===== Category matrix ===== */
.cat-card{
  display:block;background:linear-gradient(160deg,rgba(16,58,38,.7),rgba(5,31,20,.92));
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:26px 24px;height:100%;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.cat-card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--glow);color:inherit;}
.cat-card .icon-badge{margin-bottom:.9rem;}
.cat-card h3{font-size:1.08rem;margin-bottom:.45rem;}
.cat-card p{font-size:.9rem;margin-bottom:.9rem;}
.cat-link{font-size:.85rem;font-weight:700;color:var(--gold-light);display:inline-flex;align-items:center;gap:.4rem;}

/* ===== News ===== */
.news-card{
  display:block;background:linear-gradient(160deg,rgba(16,58,38,.7),rgba(5,31,20,.92));
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px;height:100%;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.news-card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--glow);color:inherit;}
.news-tag{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-light);background:rgba(245,158,11,.12);border:1px solid var(--line);
  border-radius:999px;padding:.2rem .6rem;margin-bottom:.85rem;
}
.news-card h3{font-size:1rem;margin-bottom:.5rem;}
.news-card p{font-size:.88rem;margin-bottom:.9rem;}
.news-date{font-size:.78rem;color:rgba(209,250,229,.6);}
.empty-note{font-size:.92rem;color:rgba(209,250,229,.7);}

/* ===== FAQ ===== */
.faq-item{
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  background:rgba(5,31,20,.5);margin-bottom:.85rem;overflow:hidden;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.faq-item[open]{border-color:var(--line);background:rgba(16,58,38,.55);}
.faq-item summary{
  cursor:pointer;list-style:none;padding:1rem 1.2rem;font-weight:600;font-size:.96rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;color:var(--ivory);
}
.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:.78rem;transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-body{padding:0 1.2rem 1.1rem;font-size:.92rem;color:rgba(209,250,229,.82);}

/* ===== CTA ===== */
.cta-band{
  background:linear-gradient(120deg,rgba(16,58,38,.95),rgba(5,31,20,.98));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:44px 38px;box-shadow:var(--glow);position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.20),transparent 68%);
}
.cta-band h2{font-size:clamp(1.4rem,2.8vw,1.95rem);margin-bottom:.6rem;}
.cta-band p{max-width:640px;font-size:.96rem;}
.cta-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem;}
.pay-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;}
.pay-badge{
  font-size:.76rem;font-weight:700;letter-spacing:.05em;
  padding:.35rem .75rem;border-radius:8px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.04);color:var(--mint);
}

/* ===== FAB ===== */
.fab-x{
  position:fixed;left:1rem;bottom:6rem;z-index:50;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#0B2E1E 0%,#051F14 68%);
  border:2px solid var(--gold);
  color:var(--gold-light);font-size:1.25rem;
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  opacity:.85;cursor:pointer;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
  animation:fabFloat 3.4s ease-in-out infinite;
}
.fab-x:hover{transform:scale(1.1) rotate(360deg);opacity:1;}
.fab-x:active{transform:scale(.95) translateY(3px);}
.fab-x .fab-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 fabFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

/* ===== Footer ===== */
.site-footer{
  position:relative;z-index:2;margin-top:20px;
  background:linear-gradient(180deg,rgba(8,40,26,.6),rgba(3,18,12,.98));
  border-top:1px solid var(--line-soft);padding:64px 0 26px;
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.2rem;}
.footer-brand .brand{margin-bottom:1rem;}
.footer-brand p{font-size:.9rem;max-width:340px;color:rgba(209,250,229,.72);}
.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;}
.footer-badges span{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:600;
  color:var(--mint);border:1px solid var(--line-soft);border-radius:999px;
  padding:.32rem .7rem;background:rgba(255,255,255,.03);
}
.footer-badges i{color:var(--gold);}
.age-badge{
  display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);color:var(--gold-light);font-weight:800;font-size:.85rem;
  background:rgba(245,158,11,.1);
}
.footer-col h4{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;}
.footer-col ul li{margin-bottom:.6rem;}
.footer-col ul li a{font-size:.9rem;color:rgba(209,250,229,.78);}
.footer-col ul li a:hover{color:var(--gold-light);}
.footer-bottom{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(209,250,229,.09);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;color:rgba(209,250,229,.55);
}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .nav-links{display:none;}
  .nav-toggle{display:grid;place-items:center;}
  .hero-grid{grid-template-columns:1fr;gap:2.2rem;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem;}
  .section{padding:70px 0;}
}
@media (max-width:768px){
  .nav-actions .btn-login,.nav-actions .btn-signup{font-size:.82rem;padding:.5rem .9rem;}
  .hero{padding:124px 0 60px;}
  .hero h1{font-size:1.72rem;}
  .compare-row{grid-template-columns:1fr 1fr;gap:.35rem;font-size:.84rem;}
  .compare-row.head{display:none;}
  .compare-row span:nth-child(2)::before{content:"Độ trễ: ";color:rgba(209,250,229,.55);}
  .compare-row span:nth-child(3)::before{content:"Hình ảnh: ";color:rgba(209,250,229,.55);}
  .step-item{grid-template-columns:52px 1fr;gap:.9rem;}
  .step-num{width:44px;height:44px;border-radius:13px;font-size:.98rem;}
  .cta-band{padding:32px 24px;}
}
@media (max-width:520px){
  .container-x{padding:0 15px;}
  .brand-text strong{font-size:.92rem;}
  .brand-text span{font-size:.6rem;letter-spacing:.1em;}
  .nav-actions{gap:.35rem;}
  .nav-actions .btn-login{display:none;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-actions .btn-gold,.hero-actions .btn-ghost{width:100%;justify-content:center;}
  .section{padding:56px 0;}
  .fab-x{width:52px;height:52px;font-size:1.1rem;bottom:5rem;}
}

/* roulang page: category3 */
:root{
  --jade-900:#051F14;
  --jade-850:#08281A;
  --jade-800:#0B2E1E;
  --jade-700:#103A26;
  --gold:#F59E0B;
  --gold-light:#FCD34D;
  --gold-deep:#B45309;
  --red:#DC2626;
  --ivory:#F8FAFC;
  --mint:#D1FAE5;
  --olive:#A3A375;
  --line:rgba(245,158,11,.28);
  --line-soft:rgba(209,250,229,.13);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.30);
  --shadow:0 16px 44px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(245,158,11,.22), 0 14px 38px rgba(245,158,11,.14);
  --container:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--jade-900);
  color:var(--ivory);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(245,158,11,.10), transparent 62%),
    radial-gradient(760px 460px at 92% 8%, rgba(16,185,129,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease);}
a:hover{color:var(--gold-light);}
button,input,select{font-family:inherit;font-size:inherit;}
h1,h2,h3,h4,h5{font-weight:800;letter-spacing:-.02em;line-height:1.28;margin:0 0 .6rem;}
p{margin:0 0 1rem;}
ul{margin:0;padding:0;list-style:none;}
.container-x{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;position:relative;z-index:2;}
main{position:relative;z-index:1;}
section[id],div[id]{scroll-margin-top:92px;}
/* ===== Buttons ===== */
.btn-gold{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#1A1206;font-weight:700;font-size:.94rem;
  padding:.78rem 1.5rem;border-radius:999px;border:none;
  box-shadow:0 10px 26px rgba(245,158,11,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
.btn-gold:hover{color:#1A1206;transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,158,11,.38);filter:brightness(1.05);}
.btn-gold:active{transform:translateY(0) scale(.985);}
.btn-gold:focus-visible,.btn-ghost:focus-visible,.btn-outline-light-x:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:transparent;color:var(--gold-light);
  border:1px solid var(--line);border-radius:999px;
  padding:.74rem 1.35rem;font-weight:600;font-size:.92rem;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn-ghost:hover{background:rgba(245,158,11,.10);border-color:var(--gold);color:var(--gold-light);transform:translateY(-2px);}
.btn-outline-light-x{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line-soft);border-radius:999px;padding:.72rem 1.3rem;
  color:var(--mint);font-weight:600;font-size:.9rem;background:rgba(255,255,255,.03);
  transition:all .25s var(--ease);
}
.btn-outline-light-x:hover{border-color:var(--line);color:var(--gold-light);background:rgba(245,158,11,.08);}
/* ===== Header ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(5,31,20,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.scrolled{background:rgba(5,31,20,.95);box-shadow:0 10px 30px rgba(0,0,0,.45);border-bottom-color:var(--line);}
.nav-inner{display:flex;align-items:center;gap:1rem;min-height:74px;}
.brand{display:flex;align-items:center;gap:.65rem;flex-shrink:0;}
.brand-mark{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));
  display:grid;place-items:center;color:#20160A;font-size:1.15rem;
  box-shadow:0 8px 20px rgba(245,158,11,.3);
}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text strong{font-size:1.02rem;font-weight:800;color:var(--ivory);letter-spacing:-.02em;}
.brand-text span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.nav-links{display:flex;align-items:center;gap:.35rem;margin-left:auto;}
.nav-link-x{
  padding:.55rem .85rem;border-radius:999px;font-size:.9rem;font-weight:600;
  color:var(--mint);white-space:nowrap;transition:all .25s var(--ease);
}
.nav-link-x:hover{color:var(--gold-light);background:rgba(245,158,11,.09);}
.nav-link-x.active{color:var(--gold-light);background:rgba(245,158,11,.14);box-shadow:inset 0 0 0 1px var(--line);}
.nav-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0;margin-left:.5rem;}
.btn-login{
  background:none;border:none;color:var(--gold-light);font-weight:600;font-size:.9rem;
  padding:.55rem .7rem;border-radius:999px;transition:background .25s var(--ease);
}
.btn-login:hover{background:rgba(245,158,11,.10);}
.btn-signup{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#1A1206;font-weight:700;font-size:.88rem;border:none;white-space:nowrap;
  padding:.62rem 1.2rem;border-radius:999px;
  box-shadow:0 8px 20px rgba(245,158,11,.3);
  transition:transform .25s var(--ease),filter .25s var(--ease);
}
.btn-signup:hover{transform:translateY(-2px);filter:brightness(1.06);color:#1A1206;}
.nav-toggle{
  display:none;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);
  color:var(--mint);width:42px;height:42px;border-radius:12px;font-size:1.05rem;
  align-items:center;justify-content:center;
}
.mobile-panel{
  display:none;border-top:1px solid var(--line-soft);
  background:rgba(5,31,20,.98);padding:.75rem 0 1rem;
}
.mobile-panel.open{display:block;}
.mobile-panel a{
  display:block;padding:.72rem .3rem;font-weight:600;color:var(--mint);
  border-bottom:1px solid rgba(209,250,229,.07);font-size:.94rem;
}
.mobile-panel a:last-child{border-bottom:none;}
.mobile-panel a.active{color:var(--gold-light);}
/* ===== Hero ===== */
.cat-hero{
  position:relative;
  padding:142px 0 78px;
  background-image:linear-gradient(105deg,rgba(5,31,20,.95) 0%,rgba(5,31,20,.88) 46%,rgba(8,40,26,.78) 100%),url('/assets/images/b04be696a93d29bd.jpg');
  background-size:cover;background-position:center;
  overflow:hidden;
}
.cat-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-light);background:rgba(245,158,11,.12);
  border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;margin-bottom:1.1rem;
}
.cat-hero h1{font-size:2.35rem;margin-bottom:1rem;max-width:22ch;}
.hero-lead{font-size:1.02rem;color:var(--mint);max-width:60ch;margin-bottom:1.4rem;}
.hero-points{display:grid;gap:.6rem;margin-bottom:1.7rem;}
.hero-points li{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;color:#E6F6EE;}
.hero-points i{color:var(--gold);margin-top:.32rem;font-size:.85rem;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;}
.hero-panel{
  background:linear-gradient(160deg,rgba(11,46,30,.95),rgba(5,31,20,.92));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.5rem 1.4rem;box-shadow:var(--glow);
}
.panel-title{
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);
  font-weight:700;margin-bottom:1rem;
}
.panel-list{display:grid;gap:.15rem;margin-bottom:1.2rem;}
.panel-list a{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.72rem .2rem;font-size:.94rem;font-weight:600;color:var(--mint);
  border-bottom:1px solid rgba(209,250,229,.08);
}
.panel-list li:last-child a{border-bottom:none;}
.panel-list a i{color:var(--gold);font-size:.78rem;transition:transform .25s var(--ease);}
.panel-list a:hover{color:var(--gold-light);}
.panel-list a:hover i{transform:translateX(4px);}
.panel-stat{
  border-top:1px dashed var(--line);padding-top:1rem;display:flex;flex-direction:column;gap:.15rem;
}
.stat-num{font-size:1.6rem;font-weight:800;color:var(--gold-light);line-height:1.1;}
.stat-label{font-size:.82rem;color:var(--olive);}
/* ===== Section basics ===== */
.section{padding:76px 0;position:relative;}
.section-alt{
  background:linear-gradient(180deg,rgba(8,40,26,.72),rgba(5,31,20,.28));
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.section-head{margin-bottom:2.2rem;max-width:760px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.7rem;
}
.section-title{font-size:1.85rem;color:var(--ivory);}
.section-sub{color:var(--olive);font-size:.98rem;margin:0;}
.section-head.left{align-items:flex-start;}
/* ===== Pain list ===== */
.pain-item{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.15rem 0;border-bottom:1px solid var(--line-soft);
}
.pain-item:last-child{border-bottom:none;}
.pain-num{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;font-weight:800;font-size:.9rem;
  color:var(--gold-light);background:rgba(245,158,11,.10);border:1px solid var(--line);
}
.pain-item h3{font-size:1.02rem;margin-bottom:.3rem;}
.pain-item p{font-size:.92rem;color:var(--olive);margin:0;}
.quote-side{
  background:linear-gradient(150deg,rgba(16,58,38,.85),rgba(5,31,20,.9));
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:1.6rem 1.5rem;
}
.quote-side p{font-size:.95rem;color:var(--mint);margin-bottom:.9rem;}
.quote-side .sig{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700;}
/* ===== Pillars ===== */
.pillar-card{
  height:100%;
  background:linear-gradient(165deg,rgba(16,58,38,.72),rgba(5,31,20,.86));
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:1.7rem 1.5rem;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.pillar-card:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:var(--glow);}
.pillar-icon{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  font-size:1.25rem;color:#20160A;margin-bottom:1.1rem;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));
  box-shadow:0 8px 20px rgba(245,158,11,.26);
}
.pillar-card h3{font-size:1.1rem;}
.pillar-card p{font-size:.93rem;color:var(--olive);margin:0;}
/* ===== Metrics ===== */
.metric-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden;margin:2.6rem 0 2.4rem;
}
.metric-cell{background:rgba(5,31,20,.9);padding:1.35rem 1.1rem;text-align:left;}
.metric-cell strong{display:block;font-size:1.5rem;color:var(--gold-light);line-height:1.15;}
.metric-cell span{font-size:.82rem;color:var(--olive);}
/* ===== Compare ===== */
.compare-wrap{border-top:1px solid var(--line-soft);padding-top:2.2rem;}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.compare-col{border-radius:var(--radius);padding:1.5rem 1.4rem;border:1px solid var(--line-soft);background:rgba(5,31,20,.7);}
.compare-col.is-bad{border-color:rgba(220,38,38,.32);}
.compare-col.is-good{border-color:var(--line);background:linear-gradient(160deg,rgba(16,58,38,.75),rgba(5,31,20,.85));}
.compare-col h3{font-size:1rem;display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;}
.compare-col.is-bad h3{color:#FCA5A5;}
.compare-col.is-good h3{color:var(--gold-light);}
.compare-col li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;padding:.5rem 0;color:var(--mint);border-bottom:1px dashed rgba(209,250,229,.08);}
.compare-col li:last-child{border-bottom:none;}
.compare-col.is-bad li i{color:#EF4444;margin-top:.28rem;}
.compare-col.is-good li i{color:var(--gold);margin-top:.28rem;}
/* ===== Steps ===== */
.steps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;}
.step-card{
  position:relative;height:100%;
  background:rgba(5,31,20,.78);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:1.5rem 1.2rem;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.step-card:hover{transform:translateY(-5px);border-color:var(--line);}
.step-card::before{
  content:"";position:absolute;top:34px;right:-1rem;width:1rem;height:1px;background:var(--line-soft);
}
.step-card:last-child::before{display:none;}
.step-index{
  font-size:1.5rem;font-weight:800;color:var(--gold-light);opacity:.55;line-height:1;margin-bottom:.7rem;
}
.step-card h3{font-size:.98rem;margin-bottom:.45rem;}
.step-card p{font-size:.86rem;color:var(--olive);margin:0;}
/* ===== Testimonials ===== */
.quote-card{
  height:100%;background:linear-gradient(165deg,rgba(16,58,38,.62),rgba(5,31,20,.86));
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:1.6rem 1.45rem;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.quote-card:hover{border-color:var(--line);transform:translateY(-5px);}
.quote-stars{color:var(--gold);font-size:.8rem;letter-spacing:.18em;margin-bottom:.85rem;}
.quote-card blockquote{margin:0 0 1.1rem;font-size:.95rem;color:var(--mint);}
.quote-who{display:flex;align-items:center;gap:.75rem;}
.avatar-x{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.9rem;color:#20160A;
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));
}
.quote-who strong{display:block;font-size:.92rem;color:var(--ivory);}
.quote-who span{font-size:.8rem;color:var(--olive);}
/* ===== Audience ===== */
.audience-media{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);
  position:relative;min-height:280px;height:100%;
}
.audience-media img{width:100%;height:100%;object-fit:cover;}
.audience-media figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.2rem;
  background:linear-gradient(180deg,transparent,rgba(5,31,20,.94));
  font-size:.86rem;color:var(--mint);
}
.audience-item{display:flex;gap:.9rem;align-items:flex-start;padding:.95rem 0;border-bottom:1px solid var(--line-soft);}
.audience-item:last-child{border-bottom:none;}
.audience-item i{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(245,158,11,.1);border:1px solid var(--line);color:var(--gold-light);font-size:.9rem;
}
.audience-item h3{font-size:1rem;margin-bottom:.25rem;}
.audience-item p{font-size:.89rem;color:var(--olive);margin:0;}
/* ===== Channels ===== */
.channel-card{
  display:block;height:100%;
  background:linear-gradient(160deg,rgba(16,58,38,.7),rgba(5,31,20,.88));
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:1.6rem 1.45rem;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.channel-card:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:var(--glow);color:var(--ivory);}
.channel-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;}
.channel-top i{color:var(--gold-light);font-size:1.1rem;}
.channel-card h3{font-size:1.08rem;margin:0;}
.channel-card p{font-size:.9rem;color:var(--olive);margin:0 0 1rem;}
.channel-link{font-size:.86rem;font-weight:700;color:var(--gold-light);display:inline-flex;align-items:center;gap:.4rem;}
/* ===== News ===== */
.news-card{
  height:100%;display:flex;flex-direction:column;
  background:rgba(5,31,20,.8);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.news-card:hover{transform:translateY(-5px);border-color:var(--line);}
.news-thumb{display:block;aspect-ratio:16/10;overflow:hidden;}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.news-card:hover .news-thumb img{transform:scale(1.05);}
.news-body{padding:1.15rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
.news-tag{
  align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-light);background:rgba(245,158,11,.12);border:1px solid var(--line);
  border-radius:999px;padding:.24rem .65rem;
}
.news-body h3{font-size:1rem;margin:0;line-height:1.45;}
.news-body h3 a{color:var(--ivory);}
.news-body h3 a:hover{color:var(--gold-light);}
.news-body p{font-size:.88rem;color:var(--olive);margin:0;}
.news-meta{margin-top:auto;font-size:.79rem;color:var(--olive);display:flex;align-items:center;gap:.45rem;}
.empty-note{
  border:1px dashed var(--line);border-radius:var(--radius);padding:1.4rem 1.3rem;
  color:var(--olive);font-size:.92rem;background:rgba(5,31,20,.6);
}
/* ===== FAQ ===== */
.faq-item{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:rgba(5,31,20,.72);margin-bottom:.85rem;overflow:hidden;
  transition:border-color .3s var(--ease);
}
.faq-item[open]{border-color:var(--line);background:rgba(16,58,38,.5);}
.faq-item summary{
  cursor:pointer;list-style:none;padding:1.1rem 1.25rem;
  font-weight:700;font-size:.98rem;color:var(--ivory);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.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:.8rem;transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{content:"\f068";transform:rotate(180deg);}
.faq-item p{padding:0 1.25rem 1.2rem;margin:0;font-size:.92rem;color:var(--olive);}
/* ===== CTA ===== */
.cta-band{
  position:relative;
  background-image:linear-gradient(120deg,rgba(5,31,20,.94),rgba(180,83,9,.42)),url('/assets/images/553269deb95e3eb4.jpg');
  background-size:cover;background-position:center;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2.4rem 2rem;margin:0 0 8px;
  box-shadow:var(--glow);
}
.cta-band h2{font-size:1.7rem;margin-bottom:.7rem;}
.cta-band p{color:var(--mint);font-size:.98rem;margin-bottom:1.3rem;max-width:56ch;}
.cta-form{display:flex;gap:.7rem;flex-wrap:wrap;max-width:520px;}
.cta-form input{
  flex:1 1 240px;min-width:0;padding:.82rem 1.1rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(5,31,20,.75);color:var(--ivory);
  font-size:.92rem;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.cta-form input::placeholder{color:rgba(209,250,229,.5);}
.cta-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,158,11,.16);}
.form-note{font-size:.82rem;color:var(--olive);margin:.9rem 0 0;}
/* ===== Footer ===== */
.site-footer{
  background:linear-gradient(180deg,rgba(5,31,20,.6),rgba(4,22,14,.98));
  border-top:1px solid var(--line);padding:64px 0 26px;margin-top:26px;
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.2rem;}
.footer-brand .brand{margin-bottom:1rem;}
.footer-brand p{font-size:.9rem;color:var(--olive);max-width:40ch;}
.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;}
.footer-badges span{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.76rem;color:var(--mint);background:rgba(255,255,255,.04);
  border:1px solid var(--line-soft);border-radius:999px;padding:.32rem .75rem;
}
.footer-badges i{color:var(--gold);}
.age-badge{
  border-color:var(--line) !important;color:var(--gold-light) !important;font-weight:700;
}
.footer-col h4{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin-bottom:1rem;
}
.footer-col li{margin-bottom:.6rem;}
.footer-col a{font-size:.9rem;color:var(--mint);}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{
  margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;
  font-size:.8rem;color:var(--olive);
}
/* ===== FAB ===== */
.fab-coin{
  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% 26%,#FCD34D,#F59E0B 48%,#B45309 100%);
  border:2px solid #FCD34D;
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  opacity:.8;
  animation:fabFloat 3.6s ease-in-out infinite;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.fab-coin::before{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(5,31,20,.86);}
.fab-coin i{position:relative;z-index:2;color:#FCD34D;font-size:1.05rem;}
.fab-coin:hover{opacity:1;animation:none;transform:scale(1.1);}
.fab-coin:hover i{animation:fabSpin .9s var(--ease);}
.fab-coin:active{transform:scale(.95) translateY(4px);}
.fab-dot{
  position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;
  background:#DC2626;box-shadow:0 0 0 2px #F8FAFC;z-index:3;
}
@keyframes fabFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes fabSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
/* ===== Responsive ===== */
@media (max-width:1024px){
  .nav-links{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav-actions{margin-left:auto;}
  .steps-grid{grid-template-columns:repeat(3,1fr);}
  .step-card::before{display:none;}
  .cat-hero h1{font-size:2rem;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem;}
}
@media (max-width:768px){
  .section{padding:60px 0;}
  .cat-hero{padding:124px 0 62px;}
  .cat-hero h1{font-size:1.72rem;}
  .hero-lead{font-size:.96rem;}
  .section-title{font-size:1.5rem;}
  .metric-strip{grid-template-columns:1fr 1fr;}
  .compare-grid{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .cta-band{padding:1.9rem 1.4rem;}
  .cta-band h2{font-size:1.4rem;}
  .footer-bottom{flex-direction:column;gap:.4rem;}
}
@media (max-width:640px){
  .brand-text{display:none;}
  .btn-login{font-size:.82rem;padding:.5rem .55rem;}
  .btn-signup{font-size:.8rem;padding:.55rem .9rem;}
  .nav-inner{min-height:66px;gap:.6rem;}
}
@media (max-width:520px){
  .container-x{padding:0 15px;}
  .cat-hero h1{font-size:1.5rem;}
  .steps-grid{grid-template-columns:1fr;}
  .metric-strip{grid-template-columns:1fr;}
  .hero-cta .btn-gold,.hero-cta .btn-ghost{width:100%;}
  .footer-grid{grid-template-columns:1fr;}
  .fab-coin{width:52px;height:52px;bottom:88px;}
}

/* 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}