/* roulang page: index */
:root{
  --bg:#030712;
  --bg-2:#081229;
  --bg-3:#0b1a35;
  --glass:rgba(15,28,55,.55);
  --glass-2:rgba(9,17,35,.86);
  --border:rgba(56,189,248,.18);
  --border-strong:rgba(56,189,248,.48);
  --blue:#2563eb;
  --blue-deep:#1d4ed8;
  --cyan:#38bdf8;
  --holo:#60a5fa;
  --gold:#fbbf24;
  --rose:#f43f5e;
  --green:#22c55e;
  --text:#f8fafc;
  --text-soft:#cbd5e1;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --shadow:0 18px 50px rgba(2,8,23,.65);
  --glow:0 0 22px rgba(56,189,248,.32);
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(37,99,235,.30), transparent 62%),
    radial-gradient(900px 520px at -8% 8%, rgba(56,189,248,.14), transparent 58%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700;letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:rgba(3,7,18,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.02em;color:#02101f;background:linear-gradient(135deg,#1d4ed8,#38bdf8);box-shadow:0 0 18px rgba(56,189,248,.45)}
.brand-text{font-size:14.5px;font-weight:700;color:#e2e8f0;line-height:1.2;max-width:190px}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:color .25s ease,background .25s ease,box-shadow .25s ease;white-space:nowrap}
.nav-link:hover{color:#fff;background:rgba(56,189,248,.10)}
.nav-link.is-active{color:#fff;background:rgba(37,99,235,.24);box-shadow:inset 0 0 0 1px rgba(56,189,248,.38)}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:rgba(56,189,248,.08);cursor:pointer;padding:0;place-items:center;gap:4px}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:#e2e8f0;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .22s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;white-space:nowrap;text-align:center}
.btn-sm{padding:9px 17px;font-size:13.5px}
.btn-lg{padding:15px 28px;font-size:15.5px}
.btn-primary{background:linear-gradient(135deg,var(--blue-deep),var(--cyan));color:#02101f;font-weight:700;box-shadow:0 0 22px rgba(56,189,248,.38)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(56,189,248,.62)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-outline{background:rgba(56,189,248,.09);border-color:rgba(56,189,248,.45);color:#e2f3ff}
.btn-outline:hover{background:rgba(56,189,248,.2);border-color:var(--cyan);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:rgba(148,163,184,.35);color:var(--text-soft)}
.btn-ghost:hover{color:#fff;border-color:var(--cyan);background:rgba(56,189,248,.08)}

/* HERO */
.hero{position:relative;overflow:hidden;padding:66px 0 76px;border-bottom:1px solid var(--border)}
.hero-bg{position:absolute;inset:0;background-image:url('/assets/images/00445d5f7cde5a46.jpg');background-size:cover;background-position:center;opacity:.24;filter:saturate(1.1)}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,18,.72) 0%,rgba(3,7,18,.92) 62%,var(--bg) 100%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#7dd3fc;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35)}
.hero h1{margin-top:18px;font-size:clamp(29px,3.9vw,46px);font-weight:800;line-height:1.2}
.hero h1 .hl{background:linear-gradient(120deg,#38bdf8,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{margin-top:20px;color:var(--text-soft);font-size:16.5px;line-height:1.72;max-width:620px}
.hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.hero-points{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hero-points li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;color:var(--text-soft)}
.hero-points li i{color:var(--cyan);margin-top:4px}
.hero-stack{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.stack-card{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.stack-main{grid-column:1/-1;background:linear-gradient(150deg,rgba(37,99,235,.32),rgba(8,18,41,.9));border-color:rgba(56,189,248,.35)}
.stack-card h3{font-size:15px;color:#e2f3ff;display:flex;align-items:center;gap:9px}
.stack-card h3 i{color:var(--cyan)}
.stack-label{display:block;margin-top:14px;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ball-row{margin-top:12px;display:flex;flex-wrap:wrap;gap:9px}
.ball{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(4,12,28,.85);border:1px solid rgba(56,189,248,.35);font-weight:700;font-size:17px;color:#e0f2fe}
.ball.is-hot{border-color:rgba(251,191,36,.6);color:#fde68a;box-shadow:0 0 14px rgba(251,191,36,.28)}
.stack-meta{margin-top:14px;font-size:13.5px;color:var(--muted)}
.stack-side:nth-child(2){transform:translateY(14px)}
.stack-side:nth-child(3){transform:translateY(-10px)}

/* SECTIONS */
.section{padding:72px 0;position:relative}
.section--alt{background:linear-gradient(180deg,rgba(8,18,41,.72),rgba(3,7,18,.35));border-top:1px solid rgba(56,189,248,.08);border-bottom:1px solid rgba(56,189,248,.08)}
.section--deep{background:linear-gradient(160deg,rgba(11,26,53,.85),rgba(3,7,18,.9));border-top:1px solid rgba(56,189,248,.1);border-bottom:1px solid rgba(56,189,248,.1)}
.sec-head{max-width:780px;margin-bottom:38px}
.sec-head--split{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.sec-head--split > div{max-width:660px}
.sec-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7dd3fc;margin-bottom:10px}
.sec-head h2{font-size:clamp(22px,2.6vw,32px)}
.sec-head p{margin-top:12px;color:var(--muted);line-height:1.7}

/* METRICS */
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.metric{padding:22px 20px;border-radius:var(--radius);background:linear-gradient(160deg,rgba(15,28,55,.75),rgba(6,13,28,.6));border:1px solid var(--border);border-left:3px solid var(--cyan);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.metric:hover{transform:translateY(-4px);border-left-color:var(--gold);box-shadow:0 14px 34px rgba(2,8,23,.6)}
.metric-num{font-size:30px;font-weight:800;line-height:1.1;background:linear-gradient(120deg,#38bdf8,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric-label{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{position:relative;padding:24px 22px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--border);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.step:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--glow)}
.step-num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;font-weight:800;font-size:15px;color:#02101f;background:linear-gradient(135deg,#1d4ed8,#38bdf8);margin-bottom:14px}
.step h3{font-size:16px}
.step p{margin-top:10px;font-size:14px;color:var(--muted);line-height:1.65}

/* TIERS */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.tier{position:relative;padding:28px 24px;border-radius:var(--radius-l);background:var(--glass);border:1px solid var(--border);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.tier:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 20px 44px rgba(2,8,23,.65),var(--glow)}
.tier--feature{border-color:rgba(251,191,36,.5);background:linear-gradient(165deg,rgba(37,99,235,.28),rgba(6,13,28,.85))}
.tier-badge{position:absolute;top:-13px;left:24px;padding:5px 13px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#3b1d00}
.tier h3{font-size:18px}
.tier-rate{margin-top:14px;font-size:26px;font-weight:800;color:#a5f3fc;letter-spacing:-.02em}
.tier-sub{margin-top:4px;font-size:13px;color:var(--muted)}
.tier-list{margin-top:20px;display:grid;gap:11px}
.tier-list li{display:flex;gap:10px;font-size:14px;color:var(--text-soft);line-height:1.55}
.tier-list li i{color:var(--cyan);margin-top:4px;font-size:12px}
.tier-foot{margin-top:22px;padding-top:18px;border-top:1px solid rgba(148,163,184,.16);font-size:13.5px;color:var(--muted)}

/* COMPARE */
.compare-wrap{border-radius:var(--radius-l);border:1px solid var(--border);background:var(--glass);overflow:hidden}
.compare-table{width:100%;border-collapse:collapse;min-width:640px}
.compare-table th,.compare-table td{padding:16px 18px;text-align:left;font-size:14px;border-bottom:1px solid rgba(148,163,184,.12)}
.compare-table thead th{background:rgba(37,99,235,.18);color:#e2f3ff;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.compare-table tbody th{font-weight:600;color:var(--text-soft)}
.compare-table tbody tr:hover{background:rgba(56,189,248,.06)}
.compare-table td{color:var(--muted)}
.mark-yes{color:var(--green);font-weight:700}
.mark-no{color:var(--rose);font-weight:700}
.scroll-x{overflow-x:auto}

/* SLOTS */
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.slot{padding:24px 22px;border-radius:var(--radius);background:linear-gradient(160deg,rgba(15,28,55,.8),rgba(6,13,28,.55));border:1px solid var(--border);transition:border-color .25s ease,transform .25s ease}
.slot:hover{border-color:var(--border-strong);transform:translateY(-4px)}
.slot-time{font-size:22px;font-weight:800;color:#a5f3fc}
.slot h3{margin-top:10px;font-size:15.5px}
.slot p{margin-top:9px;font-size:13.8px;color:var(--muted);line-height:1.6}
.countdown{margin-top:18px;display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.4);font-size:14px;font-weight:600;color:#fecdd3}
.countdown i{color:var(--rose)}

/* CANG LIST */
.cang-list{display:grid;gap:12px}
.cang-row{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:18px;padding:16px 20px;border-radius:var(--radius);background:rgba(9,17,35,.7);border:1px solid var(--border);transition:border-color .25s ease,background .25s ease,transform .25s ease}
.cang-row:hover{border-color:var(--border-strong);background:rgba(15,28,55,.8);transform:translateX(4px)}
.cang-code{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;font-weight:800;font-size:20px;color:#02101f;background:linear-gradient(135deg,#38bdf8,#a5f3fc)}
.cang-info h3{font-size:15.5px}
.cang-info p{margin-top:5px;font-size:13.6px;color:var(--muted);line-height:1.55}
.cang-score{text-align:right;font-size:13px;color:var(--muted)}
.cang-score strong{display:block;font-size:17px;color:#fde68a}

/* DATA TABLE */
.data-table{width:100%;border-collapse:collapse;min-width:620px;font-size:14px}
.data-table thead th{padding:14px 16px;text-align:left;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#bae6fd;background:rgba(37,99,235,.16)}
.data-table tbody td{padding:14px 16px;border-bottom:1px solid rgba(148,163,184,.12);color:var(--muted)}
.data-table tbody tr:hover td{background:rgba(56,189,248,.06);color:var(--text-soft)}
.gan-bar{display:flex;align-items:center;gap:10px}
.gan-track{width:120px;height:7px;border-radius:99px;background:rgba(148,163,184,.18);overflow:hidden}
.gan-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#2563eb,#38bdf8)}
.gan-fill.is-high{background:linear-gradient(90deg,#f43f5e,#fbbf24)}
.pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(56,189,248,.14);color:#7dd3fc;border:1px solid rgba(56,189,248,.3)}
.pill--warm{background:rgba(251,191,36,.14);color:#fde68a;border-color:rgba(251,191,36,.35)}
.pill--hot{background:rgba(244,63,94,.14);color:#fecdd3;border-color:rgba(244,63,94,.35)}

/* CATEGORY MATRIX */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat-card{display:block;padding:26px 24px;border-radius:var(--radius-l);background:linear-gradient(160deg,rgba(15,28,55,.8),rgba(6,13,28,.55));border:1px solid var(--border);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.cat-card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 20px 44px rgba(2,8,23,.6),var(--glow)}
.cat-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.3);color:#7dd3fc;font-size:19px;margin-bottom:16px}
.cat-card h3{font-size:17.5px}
.cat-card p{margin-top:11px;font-size:14px;color:var(--muted);line-height:1.66}
.cat-more{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#7dd3fc}
.cat-card:hover .cat-more i{transform:translateX(4px)}
.cat-more i{transition:transform .25s ease}

/* GUIDE */
.guide-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.guide-body h3{margin-top:28px;font-size:19px;color:#e2f3ff}
.guide-body h3:first-of-type{margin-top:0}
.guide-body p{margin-top:12px;color:var(--text-soft);font-size:15.2px;line-height:1.72}
.guide-body ul{margin-top:14px;display:grid;gap:10px}
.guide-body ul li{display:flex;gap:10px;font-size:14.6px;color:var(--muted);line-height:1.62}
.guide-body ul li i{color:var(--cyan);margin-top:5px;font-size:12px}
.guide-figure{border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border);background:var(--glass);box-shadow:var(--shadow)}
.guide-figure img{width:100%;height:300px;object-fit:cover}
.guide-figure figcaption{padding:16px 20px;font-size:13.5px;color:var(--muted);line-height:1.6}
.guide-note{margin-top:22px;padding:18px 20px;border-radius:var(--radius);background:rgba(37,99,235,.14);border:1px solid rgba(56,189,248,.3);font-size:14.2px;color:var(--text-soft);line-height:1.65}

/* QUOTES */
.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.quote{padding:24px 22px;border-radius:var(--radius);background:rgba(9,17,35,.62);border:1px solid var(--border);border-left:3px solid var(--cyan);transition:border-left-color .25s ease,transform .25s ease}
.quote:hover{border-left-color:var(--gold);transform:translateY(-4px)}
.quote-text{font-size:14.8px;color:var(--text-soft);line-height:1.7}
.quote-meta{margin-top:16px;display:flex;align-items:center;gap:12px}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#02101f;background:linear-gradient(135deg,#38bdf8,#a5f3fc)}
.quote-meta span{font-size:13.4px;color:var(--muted);display:block}
.quote-meta strong{font-size:14.2px;color:var(--text)}

/* TRUST BAR */
.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust-item{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:var(--radius);background:rgba(9,17,35,.55);border:1px solid var(--border)}
.trust-item i{font-size:20px;color:var(--cyan);margin-top:3px}
.trust-item h3{font-size:15px}
.trust-item p{margin-top:7px;font-size:13.4px;color:var(--muted);line-height:1.55}

/* TIMELINE */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.timeline::before{content:'';position:absolute;top:19px;left:6%;right:6%;height:1px;background:linear-gradient(90deg,rgba(56,189,248,.1),rgba(56,189,248,.55),rgba(56,189,248,.1))}
.milestone{position:relative;padding-top:52px}
.milestone::before{content:'';position:absolute;top:12px;left:0;width:15px;height:15px;border-radius:50%;background:var(--bg-2);border:2px solid var(--cyan);box-shadow:0 0 14px rgba(56,189,248,.55)}
.milestone h3{font-size:15.5px}
.milestone p{margin-top:9px;font-size:13.6px;color:var(--muted);line-height:1.6}

/* PAYMENTS */
.pay-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.pay-badge{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:14px;background:rgba(9,17,35,.7);border:1px solid var(--border);font-size:14px;font-weight:600;color:var(--text-soft);transition:border-color .25s ease,transform .25s ease}
.pay-badge:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.pay-badge i{color:#7dd3fc;font-size:16px}
.pay-note{margin-top:20px;font-size:14px;color:var(--muted);line-height:1.7;max-width:760px}

/* NEWS */
.news-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:32px;align-items:start}
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.news-card{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:rgba(9,17,35,.66);border:1px solid var(--border);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.news-card:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:0 18px 40px rgba(2,8,23,.6)}
.news-card img{width:100%;height:160px;object-fit:cover}
.news-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.news-body h3{font-size:15.6px;line-height:1.4}
.news-body p{font-size:13.6px;color:var(--muted);line-height:1.6;flex:1}
.news-date{font-size:12.6px;color:var(--muted-2)}
.news-side{padding:24px 22px;border-radius:var(--radius-l);background:linear-gradient(165deg,rgba(15,28,55,.8),rgba(6,13,28,.6));border:1px solid var(--border)}
.news-side h3{font-size:16.5px;margin-bottom:16px}
.news-side-list{display:grid;gap:14px}
.news-side-list a{display:block;padding-bottom:14px;border-bottom:1px solid rgba(148,163,184,.14);transition:color .2s ease}
.news-side-list a:last-child{border-bottom:none;padding-bottom:0}
.news-side-list a:hover{color:#7dd3fc}
.news-side-list strong{display:block;font-size:14.4px;font-weight:600;line-height:1.45}
.news-side-list span{display:block;margin-top:5px;font-size:12.6px;color:var(--muted-2)}
.empty-note{padding:22px;border-radius:var(--radius);border:1px dashed rgba(56,189,248,.35);color:var(--muted);font-size:14px}

/* LEAD FORM */
.lead-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:38px;align-items:center}
.lead-panel{padding:30px 28px;border-radius:var(--radius-l);background:linear-gradient(165deg,rgba(37,99,235,.26),rgba(6,13,28,.88));border:1px solid rgba(56,189,248,.32);box-shadow:var(--shadow)}
.lead-form{margin-top:22px;display:grid;gap:14px}
.field{display:grid;gap:7px}
.field label{font-size:13px;color:var(--muted)}
.field input,.field select{padding:13px 15px;border-radius:12px;background:rgba(4,12,28,.75);border:1px solid rgba(148,163,184,.28);font-size:14.5px;transition:border-color .22s ease,box-shadow .22s ease}
.field input:focus,.field select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
.lead-form .btn{width:100%;margin-top:6px}
.form-note{font-size:12.6px;color:var(--muted-2);line-height:1.6}
.lead-list{display:grid;gap:16px;margin-top:22px}
.lead-list li{display:flex;gap:12px;font-size:14.6px;color:var(--text-soft);line-height:1.6}
.lead-list li i{color:var(--cyan);margin-top:4px}

/* FAQ */
.faq-list{display:grid;gap:14px;max-width:900px}
.faq-item{border-radius:var(--radius);background:rgba(9,17,35,.62);border:1px solid var(--border);overflow:hidden;transition:border-color .25s ease}
.faq-item[open]{border-color:var(--border-strong);background:rgba(15,28,55,.7)}
.faq-item summary{cursor:pointer;padding:19px 22px;font-size:15.4px;font-weight:600;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:20px;color:var(--cyan);line-height:1;transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 22px 20px;font-size:14.6px;color:var(--muted);line-height:1.7}

/* FINAL CTA */
.cta-band{padding:52px 44px;border-radius:var(--radius-l);background:linear-gradient(140deg,rgba(37,99,235,.38),rgba(8,18,41,.92));border:1px solid rgba(56,189,248,.36);box-shadow:var(--shadow);text-align:center}
.cta-band h2{font-size:clamp(22px,2.6vw,30px)}
.cta-band p{margin:16px auto 0;max-width:720px;color:var(--text-soft);font-size:15.4px;line-height:1.7}
.cta-actions{margin-top:28px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* FOOTER */
.site-footer{margin-top:0;padding:56px 0 26px;background:linear-gradient(180deg,rgba(3,7,18,.4),rgba(8,18,41,.92));border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:38px}
.footer-brand p{margin-top:16px;font-size:14px;color:var(--muted);line-height:1.7;max-width:420px}
.footer-col h3{font-size:14.5px;letter-spacing:.04em;color:#e2f3ff;margin-bottom:16px}
.footer-links{display:grid;gap:11px}
.footer-links a{font-size:14px;color:var(--muted);transition:color .22s ease,transform .22s ease;display:inline-block}
.footer-links a:hover{color:var(--cyan);transform:translateX(3px)}
.footer-bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(148,163,184,.16);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted-2)}
.age-badge{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid rgba(251,191,36,.5);color:#fde68a;font-weight:700;font-size:12.5px}

/* FAB */
.fab{position:fixed;left:1rem;bottom:6rem;z-index:50;display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:999px;background:rgba(7,10,22,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid transparent;background-image:linear-gradient(rgba(7,10,22,.86),rgba(7,10,22,.86)),linear-gradient(135deg,#38bdf8,#2563eb);background-origin:border-box;background-clip:padding-box,border-box;color:#e2f3ff;font-size:13.5px;font-weight:600;box-shadow:0 0 20px rgba(6,182,212,.42);opacity:.78;transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease;animation:fabPulse 2.6s ease-in-out infinite}
.fab i{font-size:17px;color:#7dd3fc}
.fab:hover{opacity:1;transform:scale(1.06);box-shadow:0 0 30px rgba(56,189,248,.65)}
.fab:active{transform:scale(.95) translateY(2px)}
.fab-dot{position:absolute;top:6px;right:10px;width:9px;height:9px;border-radius:50%;background:#f43f5e;box-shadow:0 0 10px rgba(244,63,94,.9);animation:dotBlink 1.4s ease-in-out infinite}
@keyframes fabPulse{0%,100%{box-shadow:0 0 18px rgba(6,182,212,.35)}50%{box-shadow:0 0 30px rgba(56,189,248,.62)}}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* RESPONSIVE */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-lead{max-width:none}
  .metric-grid,.steps,.trust-bar,.timeline{grid-template-columns:repeat(2,1fr)}
  .tier-grid,.cat-grid,.slot-grid{grid-template-columns:1fr 1fr}
  .guide-layout,.lead-wrap{grid-template-columns:1fr;gap:30px}
  .news-layout{grid-template-columns:1fr}
  .timeline::before{display:none}
}
@media (max-width:880px){
  .main-nav{position:absolute;top:74px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:6px;padding:14px 20px 20px;background:rgba(4,10,24,.98);border-bottom:1px solid var(--border)}
  .main-nav.is-open{display:flex}
  .nav-link{padding:12px 14px}
  .nav-toggle{display:grid}
  .brand-text{font-size:13.4px;max-width:150px}
  .quote-grid,.news-grid{grid-template-columns:1fr}
  .cta-band{padding:38px 24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:520px){
  .section{padding:52px 0}
  .hero{padding:46px 0 56px}
  .hero-points{grid-template-columns:1fr}
  .metric-grid,.steps,.trust-bar,.timeline,.tier-grid,.cat-grid,.slot-grid{grid-template-columns:1fr}
  .cang-row{grid-template-columns:56px 1fr;gap:14px}
  .cang-score{grid-column:2;text-align:left}
  .stack-side:nth-child(2),.stack-side:nth-child(3){transform:none}
  .footer-grid{grid-template-columns:1fr}
  .fab{left:.75rem;bottom:5rem;padding:12px 15px;font-size:12.6px}
  .header-actions{gap:7px}
  .btn-sm{padding:8px 12px;font-size:12.6px}
  .compare-table,.data-table{min-width:560px}
}

/* roulang page: article */
:root{
  --bg:#030712;
  --bg-2:#081229;
  --bg-3:#0b1a35;
  --glass:rgba(15,28,55,.55);
  --glass-2:rgba(9,17,35,.86);
  --border:rgba(56,189,248,.18);
  --border-strong:rgba(56,189,248,.48);
  --blue:#2563eb;
  --blue-deep:#1d4ed8;
  --cyan:#38bdf8;
  --holo:#60a5fa;
  --gold:#fbbf24;
  --rose:#f43f5e;
  --green:#22c55e;
  --text:#f8fafc;
  --text-soft:#cbd5e1;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --shadow:0 18px 50px rgba(2,8,23,.65);
  --glow:0 0 22px rgba(56,189,248,.32);
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.68;
  color:var(--text);
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(37,99,235,.30), transparent 62%),
    radial-gradient(900px 520px at -8% 8%, rgba(56,189,248,.14), transparent 58%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.28;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}

/* ===== HEADER ===== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(3,7,18,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.02em;color:#02101f;background:linear-gradient(135deg,#1d4ed8,#38bdf8);box-shadow:0 0 18px rgba(56,189,248,.45)}
.brand-text{font-size:14.5px;font-weight:700;color:#e2e8f0;line-height:1.2;max-width:190px}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:color .25s ease,background .25s ease,box-shadow .25s ease;white-space:nowrap}
.nav-link:hover{color:#fff;background:rgba(56,189,248,.10)}
.nav-link.is-active{color:#fff;background:rgba(37,99,235,.24);box-shadow:inset 0 0 0 1px rgba(56,189,248,.38)}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:rgba(56,189,248,.08);cursor:pointer;padding:0;place-items:center;gap:4px}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:#e2e8f0;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .22s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;white-space:nowrap;text-align:center}
.btn-sm{padding:9px 17px;font-size:13.5px}
.btn-lg{padding:15px 28px;font-size:15.5px}
.btn-primary{background:linear-gradient(135deg,var(--blue-deep),var(--cyan));color:#02101f;font-weight:700;box-shadow:0 0 22px rgba(56,189,248,.38)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(56,189,248,.62)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-outline{background:rgba(56,189,248,.09);border-color:rgba(56,189,248,.45);color:#e2f3ff}
.btn-outline:hover{background:rgba(56,189,248,.2);border-color:var(--cyan);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:rgba(148,163,184,.35);color:var(--text-soft)}
.btn-ghost:hover{color:#fff;border-color:var(--cyan);background:rgba(56,189,248,.08)}

/* ===== READING PROGRESS ===== */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--blue-deep),var(--cyan));box-shadow:0 0 12px rgba(56,189,248,.75)}

/* ===== ARTICLE HERO ===== */
.article-hero{position:relative;overflow:hidden;padding:44px 0 52px;border-bottom:1px solid var(--border)}
.article-hero__bg{position:absolute;inset:0;background-image:url('/assets/images/00445d5f7cde5a46.jpg');background-size:cover;background-position:center;opacity:.22;filter:saturate(1.05)}
.article-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,18,.80) 0%,rgba(3,7,18,.94) 66%,var(--bg) 100%)}
.article-hero__inner{position:relative;z-index:2}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.breadcrumb a{color:var(--muted);transition:color .2s ease}
.breadcrumb a:hover{color:var(--cyan)}
.breadcrumb i{font-size:10px;color:var(--muted-2)}
.breadcrumb span[aria-current]{color:var(--text-soft)}
.article-head{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start;margin-top:22px}
.article-head__main{max-width:760px}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#7dd3fc;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35)}
.article-title{margin-top:16px;font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.24}
.article-title .hl{background:linear-gradient(120deg,#38bdf8,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.article-lead{margin-top:18px;color:var(--text-soft);font-size:16.5px;line-height:1.75}
.article-meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.meta-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:13px;color:var(--text-soft);background:var(--glass);border:1px solid var(--border)}
.meta-chip i{color:var(--cyan);font-size:12px}
.head-panel{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-l);padding:22px;box-shadow:var(--shadow)}
.head-panel h2{font-size:15px;color:#e2f3ff;display:flex;align-items:center;gap:9px}
.head-panel h2 i{color:var(--cyan)}
.check-list{margin-top:14px;display:grid;gap:11px}
.check-list li{display:flex;gap:10px;font-size:14.2px;color:var(--text-soft);align-items:flex-start}
.check-list li i{color:var(--green);margin-top:4px;font-size:12px}
.head-panel .btn{width:100%;margin-top:18px}
.head-panel__note{margin-top:12px;font-size:12.8px;color:var(--muted);text-align:left}

/* ===== SECTIONS ===== */
.section{padding:70px 0;position:relative}
.section--alt{background:linear-gradient(180deg,rgba(8,18,41,.72),rgba(3,7,18,.35));border-top:1px solid rgba(56,189,248,.08);border-bottom:1px solid rgba(56,189,248,.08)}
.section--deep{background:linear-gradient(160deg,rgba(11,26,53,.85),rgba(3,7,18,.9));border-top:1px solid rgba(56,189,248,.10);border-bottom:1px solid rgba(56,189,248,.10)}
.section-head{max-width:720px;margin-bottom:36px}
.section-head--split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:end;max-width:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan)}
.eyebrow::before{content:'';width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),transparent)}
.section-title{margin-top:14px;font-size:clamp(22px,2.5vw,32px);font-weight:800}
.section-desc{margin-top:14px;color:var(--muted);font-size:15.5px;line-height:1.75}

/* ===== ARTICLE BODY ===== */
.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
.article-body{max-width:820px;font-size:16.5px;color:var(--text-soft)}
.article-body > * + *{margin-top:18px}
.article-body h2{margin-top:42px;font-size:clamp(21px,2.2vw,27px);color:#fff;padding-left:16px;border-left:4px solid var(--cyan);line-height:1.35}
.article-body h3{margin-top:30px;font-size:18.5px;color:#e2f3ff}
.article-body h4{margin-top:24px;font-size:16.5px;color:var(--text)}
.article-body p{line-height:1.78}
.article-body strong{color:#fff}
.article-body a{color:var(--cyan);border-bottom:1px dashed rgba(56,189,248,.5)}
.article-body a:hover{color:#a5f3fc}
.article-body ul,.article-body ol{display:grid;gap:10px;padding-left:0}
.article-body ul li{position:relative;padding-left:24px}
.article-body ul li::before{content:'\f0da';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:2px;top:0;color:var(--cyan);font-size:12px}
.article-body ol{counter-reset:step}
.article-body ol li{position:relative;padding-left:34px;counter-increment:step}
.article-body ol li::before{content:counter(step);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#02101f;background:linear-gradient(135deg,var(--blue-deep),var(--cyan))}
.article-body blockquote{margin:26px 0;padding:20px 24px;border-radius:var(--radius);background:linear-gradient(140deg,rgba(37,99,235,.22),rgba(8,18,41,.7));border-left:3px solid var(--cyan);color:#e2f3ff;font-size:15.5px}
.article-body img{border-radius:var(--radius);border:1px solid var(--border);margin:26px 0}
.article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.5px;display:block;overflow-x:auto}
.article-body th,.article-body td{padding:12px 14px;border:1px solid rgba(56,189,248,.16);text-align:left;white-space:nowrap}
.article-body th{background:rgba(37,99,235,.18);color:#e2f3ff;font-weight:600}
.article-body tr:nth-child(even) td{background:rgba(8,18,41,.55)}
.article-body hr{border:none;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.4),transparent);margin:34px 0}
.article-empty{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-l);padding:40px 30px;max-width:680px}
.article-empty h2{font-size:22px;color:#fff}
.article-empty p{margin-top:12px;color:var(--muted)}
.article-empty .btn{margin-top:22px}

/* ===== ASIDE ===== */
.article-aside{position:sticky;top:96px;display:grid;gap:18px}
.aside-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.aside-card h3{font-size:14.5px;color:#e2f3ff;display:flex;align-items:center;gap:9px}
.aside-card h3 i{color:var(--cyan)}
.aside-card p{margin-top:12px;font-size:13.8px;color:var(--muted);line-height:1.7}
.mini-list{margin-top:14px;display:grid;gap:12px}
.mini-list li{display:flex;justify-content:space-between;gap:10px;font-size:13.8px;color:var(--text-soft);padding-bottom:11px;border-bottom:1px dashed rgba(56,189,248,.16)}
.mini-list li:last-child{border-bottom:none;padding-bottom:0}
.mini-list b{color:#fff;font-weight:700}
.aside-card .btn{width:100%;margin-top:16px}
.aside-card--accent{background:linear-gradient(150deg,rgba(37,99,235,.30),rgba(8,18,41,.9));border-color:rgba(56,189,248,.38)}

/* ===== FIGURE ===== */
.figure-band{position:relative;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.figure-band img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/7}
.figure-band__caption{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 22px;background:linear-gradient(180deg,transparent,rgba(3,7,18,.92));font-size:14px;color:var(--text-soft)}
.figure-band__caption b{color:#fff;display:block;font-size:16px;margin-bottom:4px}

/* ===== STEPS ===== */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.step{position:relative;padding:26px 22px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--border);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.step:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--glow)}
.step__no{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-weight:800;font-size:15px;color:#02101f;background:linear-gradient(135deg,var(--blue-deep),var(--cyan))}
.step h3{margin-top:16px;font-size:17px;color:#fff}
.step p{margin-top:10px;font-size:14.5px;color:var(--muted);line-height:1.72}
.step__tag{display:inline-block;margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#7dd3fc}

/* ===== TABLE / FILTER ===== */
.table-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--glass)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:14.5px}
.table-wrap th,.table-wrap td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(56,189,248,.12)}
.table-wrap th{background:rgba(37,99,235,.20);color:#e2f3ff;font-weight:600;font-size:13.5px;letter-spacing:.02em;white-space:nowrap}
.table-wrap td{color:var(--text-soft)}
.table-wrap tbody tr:hover td{background:rgba(56,189,248,.06)}
.table-wrap tbody tr:last-child td{border-bottom:none}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12.3px;font-weight:600}
.pill--hot{color:#fecdd3;background:rgba(244,63,94,.16);border:1px solid rgba(244,63,94,.4)}
.pill--warm{color:#fde68a;background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.36)}
.pill--cool{color:#a7f3d0;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.34)}
.scroll-hint{margin-top:10px;font-size:12.5px;color:var(--muted-2)}

/* ===== CHECKLIST / MISTAKES ===== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start}
.note-list{display:grid;gap:16px}
.note{display:flex;gap:14px;padding:18px 20px;border-radius:var(--radius);background:rgba(9,17,35,.7);border:1px solid var(--border)}
.note i{color:var(--rose);font-size:17px;margin-top:3px}
.note b{display:block;color:#fff;font-size:15.5px;margin-bottom:6px}
.note p{font-size:14.3px;color:var(--muted);line-height:1.7}
.note--ok i{color:var(--green)}

/* ===== FAQ ===== */
.faq{display:grid;gap:12px;max-width:900px}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--glass);overflow:hidden;transition:border-color .25s ease}
.faq-item[open]{border-color:var(--border-strong);box-shadow:var(--glow)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font-size:16px;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'\2b';font-family:'Font Awesome 6 Free';font-weight:900;color:var(--cyan);font-size:14px;transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item__body{padding:0 22px 20px;font-size:14.8px;color:var(--muted);line-height:1.78}

/* ===== RELATED ===== */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.post-card{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--glass);border:1px solid var(--border);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.post-card:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--glow)}
.post-card__thumb{aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-card:hover .post-card__thumb img{transform:scale(1.05)}
.post-card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card__body h3{font-size:16px;color:#fff;line-height:1.45}
.post-card__body p{font-size:14px;color:var(--muted);line-height:1.7}
.post-card__link{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--cyan);display:inline-flex;align-items:center;gap:8px}
.post-card__link i{transition:transform .25s ease}
.post-card:hover .post-card__link i{transform:translateX(4px)}

/* ===== CTA ===== */
.cta-band{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center;padding:42px;border-radius:var(--radius-l);background:linear-gradient(150deg,rgba(37,99,235,.30),rgba(8,18,41,.92));border:1px solid rgba(56,189,248,.34);box-shadow:var(--shadow)}
.cta-band h2{font-size:clamp(22px,2.4vw,30px);color:#fff}
.cta-band p{margin-top:14px;color:var(--text-soft);font-size:15.5px;line-height:1.75}
.cta-list{margin-top:20px;display:grid;gap:10px}
.cta-list li{display:flex;gap:10px;font-size:14.3px;color:var(--text-soft);align-items:flex-start}
.cta-list li i{color:var(--cyan);margin-top:4px;font-size:12px}
.cta-form{display:grid;gap:12px;background:rgba(3,7,18,.55);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.cta-form label{font-size:13px;color:var(--muted);font-weight:600}
.field{display:grid;gap:7px}
.field input,.field select{width:100%;padding:13px 15px;border-radius:var(--radius-s);background:rgba(3,7,18,.75);border:1px solid rgba(56,189,248,.28);color:var(--text);transition:border-color .25s ease,box-shadow .25s ease}
.field input::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
.cta-form .btn{width:100%;margin-top:6px}
.form-note{font-size:12.5px;color:var(--muted-2);text-align:left}
.form-success{display:none;font-size:14px;color:#a7f3d0;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.36);border-radius:var(--radius-s);padding:12px 14px}
.cta-form.is-sent .form-success{display:block}

/* ===== TRUST STRIP ===== */
.trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.trust-item{display:flex;gap:13px;align-items:flex-start;padding:20px;border-radius:var(--radius);background:rgba(9,17,35,.6);border:1px solid var(--border)}
.trust-item i{font-size:19px;color:var(--cyan);margin-top:3px}
.trust-item b{display:block;font-size:14.8px;color:#fff;margin-bottom:5px}
.trust-item span{font-size:13.4px;color:var(--muted);line-height:1.65}

/* ===== FAB ===== */
.fab{position:fixed;left:16px;bottom:96px;z-index:150;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:999px;background:rgba(7,7,13,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid transparent;background-image:linear-gradient(rgba(7,7,13,.86),rgba(7,7,13,.86)),linear-gradient(120deg,#38bdf8,#a3e635);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 0 20px rgba(6,182,212,.45);opacity:.78;transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease;min-height:52px}
.fab:hover{opacity:1;transform:translateY(-3px);box-shadow:0 0 30px rgba(6,182,212,.7)}
.fab:active{transform:scale(.95)}
.fab i{font-size:17px;color:#a3e635;animation:fabPulse 2.4s ease-in-out infinite}
.fab span{font-size:13.5px;font-weight:600;color:#e2f3ff;white-space:nowrap}
.fab__dot{position:absolute;top:4px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 3px rgba(244,63,94,.25);animation:dotPulse 1.8s infinite}
@keyframes fabPulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* ===== FOOTER ===== */
.site-footer{margin-top:20px;background:linear-gradient(180deg,rgba(8,18,41,.85),rgba(3,7,18,.98));border-top:1px solid var(--border);padding:60px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer-brand .brand{margin-bottom:18px}
.footer-brand p{font-size:14.2px;color:var(--muted);line-height:1.75;max-width:460px}
.footer-col h3{font-size:15px;color:#fff;margin-bottom:16px}
.footer-links{display:grid;gap:11px}
.footer-links a{font-size:14.2px;color:var(--muted);transition:color .22s ease,transform .22s ease}
.footer-links a:hover{color:var(--cyan);transform:translateX(3px)}
.footer-bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(56,189,248,.14);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;font-size:13.2px;color:var(--muted-2)}
.age-badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:26px;padding:0 10px;border-radius:8px;font-size:12.5px;font-weight:700;color:#fecdd3;border:1px solid rgba(244,63,94,.45);background:rgba(244,63,94,.12)}

/* ===== RESPONSIVE ===== */
@media (max-width:1080px){
  .article-head{grid-template-columns:1fr;gap:30px}
  .article-head__main{max-width:none}
  .article-shell{grid-template-columns:1fr;gap:34px}
  .article-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-band{grid-template-columns:1fr;padding:34px}
}
@media (max-width:900px){
  .main-nav{position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:6px;padding:16px 20px 22px;background:rgba(3,7,18,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transform:translateY(-14px);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;margin-left:0}
  .main-nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
  .nav-link{padding:12px 14px;font-size:15px}
  .nav-toggle{display:grid}
  .header-inner{justify-content:space-between}
  .brand-text{max-width:150px;font-size:13.5px}
  .section-head--split{grid-template-columns:1fr;gap:18px}
  .split{grid-template-columns:1fr;gap:26px}
}
@media (max-width:640px){
  .header-actions .btn-sm{padding:8px 13px;font-size:12.5px}
  .brand-text{display:none}
  .article-hero{padding:30px 0 40px}
  .section{padding:52px 0}
  .article-body{font-size:16px}
  .article-aside{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr}
  .trust-strip{grid-template-columns:1fr}
  .cta-band{padding:26px 20px}
  .table-wrap table{font-size:13.6px}
  .table-wrap th,.table-wrap td{padding:11px 12px}
  .fab span{display:none}
  .fab{padding:14px;left:14px;bottom:84px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* roulang page: category1 */
:root{
  --bg:#030712;
  --bg-2:#081229;
  --bg-3:#0b1a35;
  --glass:rgba(15,28,55,.55);
  --glass-2:rgba(9,17,35,.86);
  --border:rgba(56,189,248,.18);
  --border-strong:rgba(56,189,248,.48);
  --blue:#2563eb;
  --blue-deep:#1d4ed8;
  --cyan:#38bdf8;
  --holo:#60a5fa;
  --gold:#fbbf24;
  --rose:#f43f5e;
  --green:#22c55e;
  --text:#f8fafc;
  --text-soft:#cbd5e1;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --shadow:0 18px 50px rgba(2,8,23,.65);
  --glow:0 0 22px rgba(56,189,248,.32);
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(37,99,235,.30), transparent 62%),
    radial-gradient(900px 520px at -8% 8%, rgba(56,189,248,.14), transparent 58%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.25}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:rgba(3,7,18,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:18px;height:74px;position:relative}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.02em;color:#02101f;background:linear-gradient(135deg,#1d4ed8,#38bdf8);box-shadow:0 0 18px rgba(56,189,248,.45)}
.brand-text{font-size:14.5px;font-weight:700;color:#e2e8f0;line-height:1.2;max-width:190px}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:color .25s ease,background .25s ease,box-shadow .25s ease;white-space:nowrap}
.nav-link:hover{color:#fff;background:rgba(56,189,248,.10)}
.nav-link.is-active{color:#fff;background:rgba(37,99,235,.24);box-shadow:inset 0 0 0 1px rgba(56,189,248,.38)}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:rgba(56,189,248,.08);cursor:pointer;padding:0;place-items:center;gap:4px}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:#e2e8f0;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .22s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;white-space:nowrap;text-align:center}
.btn-sm{padding:9px 17px;font-size:13.5px}
.btn-lg{padding:15px 28px;font-size:15.5px}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(135deg,var(--blue-deep),var(--cyan));color:#02101f;font-weight:700;box-shadow:0 0 22px rgba(56,189,248,.38)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(56,189,248,.62)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-outline{background:rgba(56,189,248,.09);border-color:rgba(56,189,248,.45);color:#e2f3ff}
.btn-outline:hover{background:rgba(56,189,248,.2);border-color:var(--cyan);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:rgba(148,163,184,.35);color:var(--text-soft)}
.btn-ghost:hover{color:#fff;border-color:var(--cyan);background:rgba(56,189,248,.08)}

/* HERO */
.hero{position:relative;overflow:hidden;padding:62px 0 70px;border-bottom:1px solid var(--border)}
.hero-bg{position:absolute;inset:0;background-image:url('/assets/images/1f54bb723b644d51.jpg');background-size:cover;background-position:center;opacity:.22}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,18,.74) 0%,rgba(3,7,18,.93) 60%,var(--bg) 100%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:start}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#7dd3fc;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35)}
.hero h1{margin-top:18px;font-size:clamp(28px,3.6vw,43px);font-weight:800;line-height:1.22}
.hero-lead{margin-top:20px;color:var(--text-soft);font-size:16.5px;line-height:1.72;max-width:620px}
.hero-points{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hero-points li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;color:var(--text-soft)}
.hero-points li i{color:var(--cyan);margin-top:5px}
.hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}

/* HERO PANEL / FORM */
.hero-panel{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-strong);border-radius:var(--radius-l);padding:26px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero-panel::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(37,99,235,.22),transparent 58%);pointer-events:none}
.panel-title{position:relative;font-size:19px;font-weight:700}
.panel-note{position:relative;margin-top:8px;font-size:14px;color:var(--muted)}
.badge-row{position:relative;margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:#bae6fd;background:rgba(8,18,41,.75);border:1px solid rgba(56,189,248,.3)}
.pill i{color:var(--cyan);font-size:12px}
.filter-form{position:relative;margin-top:20px;display:grid;gap:14px}
.field{display:grid;gap:7px}
.field label{font-size:13px;font-weight:600;color:var(--text-soft)}
.field input,.field select{width:100%;padding:12px 14px;border-radius:var(--radius-s);background:rgba(3,7,18,.72);border:1px solid rgba(148,163,184,.28);color:var(--text);transition:border-color .22s ease,box-shadow .22s ease}
.field input::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,189,248,.16)}
.form-note{font-size:12.5px;color:var(--muted-2);line-height:1.6}
.form-status{font-size:13px;color:#86efac;min-height:18px}

/* SECTION BASE */
.section{padding:70px 0;position:relative}
.section--alt{background:linear-gradient(180deg,rgba(8,18,41,.72),rgba(3,7,18,.35));border-top:1px solid rgba(56,189,248,.08);border-bottom:1px solid rgba(56,189,248,.08)}
.section--deep{background:linear-gradient(160deg,rgba(11,26,53,.85),rgba(3,7,18,.9));border-top:1px solid rgba(56,189,248,.1)}
.section-head{max-width:760px}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--holo)}
.section-title{margin-top:10px;font-size:clamp(23px,2.6vw,32px);font-weight:800}
.section-desc{margin-top:14px;color:var(--text-soft);font-size:15.5px;line-height:1.72}

/* METRICS */
.metric-grid{margin-top:38px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.metric-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.metric-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:0 18px 40px rgba(2,8,23,.6)}
.metric-card i{color:var(--cyan);font-size:18px}
.metric-value{margin-top:14px;font-size:30px;font-weight:800;letter-spacing:-.01em;background:linear-gradient(120deg,#60a5fa,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric-label{margin-top:6px;font-size:14.5px;font-weight:600;color:#e2e8f0}
.metric-note{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.6}

/* METHOD MATRIX */
.method-grid{margin-top:38px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.method-card{background:linear-gradient(165deg,rgba(15,28,55,.72),rgba(4,10,24,.86));border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.method-card:hover{transform:translateY(-5px);border-color:rgba(56,189,248,.5);box-shadow:0 20px 46px rgba(2,8,23,.62)}
.method-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.32);color:var(--cyan);font-size:18px}
.method-card h3{font-size:17px;font-weight:700}
.method-card p{font-size:14.5px;color:var(--muted);line-height:1.7}
.method-list{display:grid;gap:8px;margin-top:2px}
.method-list li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--text-soft)}
.method-list li i{color:var(--holo);margin-top:4px;font-size:11px}

/* COMPARE */
.compare-wrap{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.compare-col{border-radius:var(--radius);padding:24px;border:1px solid var(--border);background:var(--glass)}
.compare-col.is-good{border-color:rgba(56,189,248,.42);background:linear-gradient(165deg,rgba(37,99,235,.22),rgba(4,10,24,.88))}
.compare-head{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700}
.compare-head i{color:var(--muted)}
.compare-col.is-good .compare-head i{color:var(--cyan)}
.compare-rows{margin-top:18px;display:grid;gap:14px}
.compare-row{display:grid;gap:5px;padding-bottom:14px;border-bottom:1px dashed rgba(148,163,184,.18)}
.compare-row:last-child{border-bottom:0;padding-bottom:0}
.compare-row span{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:600}
.compare-row strong{font-size:14.5px;font-weight:600;color:#e2e8f0;line-height:1.6}

/* STEPS */
.steps-layout{margin-top:38px;display:grid;grid-template-columns:.92fr 1.08fr;gap:36px;align-items:start}
.steps-visual{position:relative;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border)}
.steps-visual img{width:100%;height:100%;min-height:320px;object-fit:cover}
.steps-visual figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;background:linear-gradient(180deg,transparent,rgba(3,7,18,.94));font-size:14px;color:var(--text-soft)}
.steps{display:grid;gap:16px}
.step{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:18px;border-radius:var(--radius);background:rgba(9,17,35,.6);border:1px solid rgba(56,189,248,.14);transition:border-color .25s ease,transform .25s ease}
.step:hover{border-color:var(--border-strong);transform:translateX(4px)}
.step-num{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:17px;color:#02101f;background:linear-gradient(135deg,var(--blue-deep),var(--cyan));box-shadow:0 0 18px rgba(56,189,248,.32)}
.step-body h3{font-size:16.5px;font-weight:700}
.step-body p{margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.7}

/* DATA TABLE */
.data-card{margin-top:36px;border:1px solid var(--border);border-radius:var(--radius-l);background:var(--glass);overflow:hidden}
.data-row{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:14px;align-items:center;padding:16px 22px;border-bottom:1px solid rgba(148,163,184,.12)}
.data-row:last-child{border-bottom:0}
.data-row.data-head{background:rgba(56,189,248,.09);font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:#bae6fd;font-weight:700}
.data-row span{font-size:14.5px;color:var(--text-soft)}
.data-row strong{font-size:15px;font-weight:700;color:#e2e8f0}
.status-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;justify-self:start}
.status-tag i{font-size:9px}
.status-tag.is-hot{color:#fecdd3;background:rgba(244,63,94,.16);border:1px solid rgba(244,63,94,.42)}
.status-tag.is-warm{color:#fde68a;background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.4)}
.status-tag.is-cold{color:#a7f3d0;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.4)}
.data-note{padding:14px 22px 20px;font-size:13px;color:var(--muted-2)}

/* CATEGORY ENTRY */
.cat-grid{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cat-card{border:1px solid var(--border);border-radius:var(--radius);padding:24px;background:linear-gradient(160deg,rgba(11,26,53,.8),rgba(4,10,24,.9));display:flex;flex-direction:column;gap:12px;transition:transform .25s ease,border-color .25s ease}
.cat-card:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.cat-card h3{font-size:17px;font-weight:700}
.cat-card p{font-size:14.5px;color:var(--muted);line-height:1.7}
.cat-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--cyan)}
.cat-link:hover{color:#a5f3fc}

/* POST LIST */
.post-grid{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.post-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:rgba(9,17,35,.72);display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.post-card:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:0 20px 46px rgba(2,8,23,.6)}
.post-thumb{display:block;aspect-ratio:16/9;overflow:hidden}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-thumb img{transform:scale(1.06)}
.post-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--muted-2)}
.post-meta span{display:inline-flex;align-items:center;gap:6px}
.post-body h3{font-size:16px;font-weight:700;line-height:1.45}
.post-body h3 a:hover{color:var(--cyan)}
.post-excerpt{font-size:14px;color:var(--muted);line-height:1.65}
.post-more{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--cyan);display:inline-flex;align-items:center;gap:7px}
.empty-state{margin-top:32px;padding:26px;border-radius:var(--radius);border:1px dashed rgba(56,189,248,.35);background:rgba(9,17,35,.6);color:var(--muted);font-size:14.5px}

/* ASSURANCE + CTA */
.cta-band{margin-top:0;border:1px solid rgba(56,189,248,.3);border-radius:var(--radius-l);padding:34px;background:linear-gradient(150deg,rgba(37,99,235,.26),rgba(4,10,24,.92));display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.cta-band h2{font-size:clamp(21px,2.4vw,28px);font-weight:800}
.cta-band p{margin-top:12px;font-size:15px;color:var(--text-soft);line-height:1.72}
.assure-list{display:grid;gap:12px}
.assure-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--text-soft);background:rgba(3,7,18,.55);border:1px solid rgba(56,189,248,.16);border-radius:var(--radius-s);padding:12px 14px}
.assure-list li i{color:var(--cyan);margin-top:4px}
.cta-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}

/* FAQ */
.faq-list{margin-top:34px;display:grid;gap:14px;max-width:920px}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:rgba(9,17,35,.68);overflow:hidden;transition:border-color .25s ease}
.faq-item[open]{border-color:var(--border-strong)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font-size:15.5px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{color:var(--cyan);transition:transform .25s ease;font-size:14px}
.faq-item[open] summary i{transform:rotate(45deg)}
.faq-item p{padding:0 22px 20px;font-size:14.5px;color:var(--muted);line-height:1.75}

/* FOOTER */
.site-footer{background:linear-gradient(180deg,rgba(3,7,18,.6),rgba(8,18,41,.96));border-top:1px solid var(--border);padding:56px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
.footer-brand .brand{margin-bottom:16px}
.footer-brand p{color:var(--muted);font-size:14.5px;max-width:460px;line-height:1.7}
.footer-col h3{font-size:13.5px;text-transform:uppercase;letter-spacing:.08em;color:#bfe4ff;margin-bottom:16px}
.footer-links{display:grid;gap:11px}
.footer-links a{color:var(--muted);font-size:14.5px;transition:color .2s ease,transform .2s ease;display:inline-block}
.footer-links a:hover{color:var(--cyan);transform:translateX(3px)}
.footer-bottom{margin-top:38px;padding-top:20px;border-top:1px solid rgba(148,163,184,.16);display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;color:var(--muted-2);font-size:13px}
.age-badge{display:inline-grid;place-items:center;min-width:38px;height:26px;padding:0 10px;border-radius:999px;border:1px solid rgba(244,63,94,.55);color:#fda4af;font-weight:700;font-size:12px}

/* FAB */
.fab{position:fixed;left:16px;bottom:96px;z-index:50;width:58px;height:58px;border-radius:999px;display:grid;place-items:center;background:rgba(7,7,13,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid transparent;background-image:linear-gradient(rgba(7,7,13,.86),rgba(7,7,13,.86)),linear-gradient(135deg,#38bdf8,#2563eb,#a3e635);background-origin:border-box;background-clip:padding-box,border-box;color:#a5f3fc;font-size:21px;box-shadow:0 0 20px rgba(6,182,212,.45);opacity:.78;transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease}
.fab:hover{opacity:1;transform:scale(1.1);box-shadow:0 0 30px rgba(6,182,212,.7)}
.fab:active{transform:scale(.95)}
.fab i{animation:fabPulse 2.6s ease-in-out infinite}
.fab-dot{position:absolute;top:6px;right:8px;width:12px;height:12px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 2px rgba(3,7,18,.9),0 0 12px rgba(244,63,94,.8);animation:dotBlink 1.6s ease-in-out infinite}
@keyframes fabPulse{0%,100%{opacity:.85}50%{opacity:1;filter:drop-shadow(0 0 8px rgba(56,189,248,.85))}}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.35}}

/* RESPONSIVE */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-panel{max-width:640px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps-layout{grid-template-columns:1fr;gap:26px}
  .cta-band{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .nav-toggle{display:grid}
  .main-nav{position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:6px;padding:14px 20px 20px;margin:0;background:rgba(4,10,24,.97);border-bottom:1px solid var(--border);box-shadow:var(--shadow);display:none}
  .main-nav.is-open{display:flex}
  .nav-link{padding:12px 14px;border-radius:12px;font-size:15px}
  .header-inner{gap:10px}
  .brand-text{font-size:13px;max-width:150px}
  .hero{padding:50px 0 58px}
  .section{padding:56px 0}
}
@media (max-width:768px){
  .metric-grid{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr}
  .compare-wrap{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-points{grid-template-columns:1fr}
  .data-row{grid-template-columns:1fr;gap:8px;padding:16px 18px}
  .data-row.data-head{display:none}
  .cta-band{padding:26px 20px}
}
@media (max-width:520px){
  .container{padding:0 16px}
  .brand-text{display:none}
  .header-actions .btn-sm{padding:8px 13px;font-size:12.5px}
  .hero h1{font-size:26px}
  .hero-actions .btn{width:100%}
  .hero-panel{padding:20px}
  .section{padding:48px 0}
  .step{grid-template-columns:44px 1fr;gap:13px;padding:15px}
  .step-num{width:44px;height:44px;font-size:15px;border-radius:12px}
  .fab{width:52px;height:52px;font-size:19px;bottom:88px}
}

/* roulang page: category2 */
:root{
  --bg:#030712;
  --bg-2:#081229;
  --bg-3:#0b1a35;
  --glass:rgba(15,28,55,.55);
  --glass-2:rgba(9,17,35,.86);
  --border:rgba(56,189,248,.18);
  --border-strong:rgba(56,189,248,.48);
  --blue:#2563eb;
  --blue-deep:#1d4ed8;
  --cyan:#38bdf8;
  --holo:#60a5fa;
  --gold:#fbbf24;
  --rose:#f43f5e;
  --green:#22c55e;
  --text:#f8fafc;
  --text-soft:#cbd5e1;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --shadow:0 18px 50px rgba(2,8,23,.65);
  --glow:0 0 22px rgba(56,189,248,.32);
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(37,99,235,.30), transparent 62%),
    radial-gradient(900px 520px at -8% 8%, rgba(56,189,248,.14), transparent 58%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.3}
p{margin:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:rgba(3,7,18,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.02em;color:#02101f;background:linear-gradient(135deg,#1d4ed8,#38bdf8);box-shadow:0 0 18px rgba(56,189,248,.45)}
.brand-text{font-size:14.5px;font-weight:700;color:#e2e8f0;line-height:1.2;max-width:190px}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:color .25s ease,background .25s ease,box-shadow .25s ease;white-space:nowrap}
.nav-link:hover{color:#fff;background:rgba(56,189,248,.10)}
.nav-link.is-active{color:#fff;background:rgba(37,99,235,.24);box-shadow:inset 0 0 0 1px rgba(56,189,248,.38)}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:rgba(56,189,248,.08);cursor:pointer;padding:0;place-items:center;gap:4px}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:#e2e8f0;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .22s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;white-space:nowrap;text-align:center}
.btn-sm{padding:9px 17px;font-size:13.5px}
.btn-lg{padding:15px 28px;font-size:15.5px}
.btn-primary{background:linear-gradient(135deg,var(--blue-deep),var(--cyan));color:#02101f;font-weight:700;box-shadow:0 0 22px rgba(56,189,248,.38)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(56,189,248,.62)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-outline{background:rgba(56,189,248,.09);border-color:rgba(56,189,248,.45);color:#e2f3ff}
.btn-outline:hover{background:rgba(56,189,248,.2);border-color:var(--cyan);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:rgba(148,163,184,.35);color:var(--text-soft)}
.btn-ghost:hover{color:#fff;border-color:var(--cyan);background:rgba(56,189,248,.08)}

/* HERO */
.hero{position:relative;overflow:hidden;padding:66px 0 76px;border-bottom:1px solid var(--border)}
.hero-bg{position:absolute;inset:0;background-image:url('/assets/images/1f54bb723b644d51.jpg');background-size:cover;background-position:center;opacity:.22;filter:saturate(1.1)}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,18,.72) 0%,rgba(3,7,18,.93) 62%,var(--bg) 100%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#7dd3fc;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35)}
.hero h1{margin-top:18px;font-size:clamp(29px,3.9vw,46px);font-weight:800;line-height:1.2}
.hero h1 .hl{background:linear-gradient(120deg,#38bdf8,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{margin-top:20px;color:var(--text-soft);font-size:16.5px;line-height:1.72;max-width:620px}
.hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.hero-points{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hero-points li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;color:var(--text-soft)}
.hero-points li i{color:var(--cyan);margin-top:4px}
.hero-stack{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.stack-card{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.stack-main{grid-column:1/-1;background:linear-gradient(150deg,rgba(37,99,235,.32),rgba(8,18,41,.9));border-color:rgba(56,189,248,.35);padding:0;overflow:hidden}
.stack-main img{width:100%;height:190px;object-fit:cover;opacity:.85}
.stack-main .stack-body{padding:20px}
.stack-card h3{font-size:15px;color:#e2f3ff;display:flex;align-items:center;gap:9px}
.stack-card h3 i{color:var(--cyan)}
.stack-value{margin-top:12px;font-size:26px;font-weight:800;color:#fff}
.stack-meta{margin-top:6px;font-size:13.5px;color:var(--muted)}
.ball-row{margin-top:12px;display:flex;flex-wrap:wrap;gap:9px}
.ball{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:14px;color:#e2f3ff;background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.4)}
.ball.is-hot{color:#02101f;background:linear-gradient(135deg,#1d4ed8,#38bdf8);border-color:transparent;box-shadow:0 0 16px rgba(56,189,248,.5)}

/* SECTIONS */
.section{padding:72px 0;position:relative}
.section--alt{background:linear-gradient(180deg,rgba(8,18,41,.72),rgba(3,7,18,.35));border-top:1px solid rgba(56,189,248,.08);border-bottom:1px solid rgba(56,189,248,.08)}
.section--deep{background:linear-gradient(160deg,rgba(11,26,53,.85),rgba(3,7,18,.9));border-top:1px solid rgba(56,189,248,.12);border-bottom:1px solid rgba(56,189,248,.12)}
.sec-head{max-width:780px}
.sec-head h2{margin-top:16px;font-size:clamp(23px,2.7vw,34px);font-weight:800;line-height:1.28}
.sec-head p{margin-top:14px;color:var(--text-soft);font-size:15.5px;line-height:1.7}
.sec-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.sec-split .sec-head{max-width:none}

/* METRICS */
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:38px}
.metric{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.metric:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--glow)}
.metric-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.metric-value{margin-top:10px;font-size:27px;font-weight:800;color:#fff}
.metric-value span{font-size:14px;font-weight:600;color:var(--cyan)}
.metric-note{margin-top:8px;font-size:13.5px;color:var(--muted)}
.note-bar{margin-top:26px;display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--radius);border:1px solid rgba(56,189,248,.3);background:rgba(56,189,248,.07)}
.note-bar i{color:var(--cyan);margin-top:4px}
.note-bar p{font-size:14.5px;color:var(--text-soft)}

/* CARD GRID */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:38px}
.card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:0 18px 40px rgba(2,8,23,.6),var(--glow)}
.card-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(37,99,235,.55),rgba(56,189,248,.28));border:1px solid rgba(56,189,248,.35);color:#dff2ff;font-size:18px}
.card h3{margin-top:16px;font-size:17.5px;font-weight:700;color:#fff}
.card p{margin-top:10px;font-size:14.5px;color:var(--text-soft);line-height:1.68}
.card ul{margin-top:14px;display:grid;gap:8px}
.card ul li{font-size:14px;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.card ul li i{color:var(--cyan);font-size:12px;margin-top:6px}
.card-foot{margin-top:16px;display:flex;align-items:center;gap:8px;font-size:13px;color:#7dd3fc;font-weight:600}

/* LIST BLOCK */
.check-list{display:grid;gap:14px;margin-top:26px}
.check-list li{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius);border:1px solid var(--border);background:rgba(9,17,35,.55)}
.check-list li i{color:var(--cyan);margin-top:5px}
.check-list strong{display:block;font-size:15px;color:#fff;font-weight:700}
.check-list span{font-size:14px;color:var(--text-soft)}
.figure{margin-top:26px;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.figure img{width:100%;height:260px;object-fit:cover}
.figure figcaption{padding:14px 18px;font-size:13.5px;color:var(--muted);background:rgba(9,17,35,.8);border-top:1px solid var(--border)}

/* COMPARE TABLE */
.table-wrap{margin-top:34px;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--glass-2)}
table.cmp{width:100%;min-width:620px;border-collapse:collapse}
table.cmp th,table.cmp td{padding:15px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid rgba(56,189,248,.12)}
table.cmp thead th{background:rgba(37,99,235,.22);color:#e2f3ff;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp td:first-child{color:#fff;font-weight:600}
table.cmp td.good{color:#7dd3fc;font-weight:600}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:38px}
.step{position:relative;padding:26px 24px;border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(150deg,rgba(15,28,55,.7),rgba(3,7,18,.6))}
.step-no{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;font-weight:800;font-size:15px;color:#02101f;background:linear-gradient(135deg,#1d4ed8,#38bdf8);box-shadow:0 0 16px rgba(56,189,248,.45)}
.step h3{margin-top:16px;font-size:17px;color:#fff}
.step p{margin-top:9px;font-size:14.5px;color:var(--text-soft)}

/* TIMELINE */
.timeline{display:grid;gap:14px;margin-top:36px}
.tl-item{display:grid;grid-template-columns:130px 1fr;gap:22px;padding:22px 24px;border-radius:var(--radius);border:1px solid var(--border);background:var(--glass);transition:border-color .25s ease,transform .25s ease}
.tl-item:hover{border-color:var(--border-strong);transform:translateX(4px)}
.tl-day{font-weight:800;font-size:15px;color:#7dd3fc;letter-spacing:.03em}
.tl-item h3{font-size:16.5px;color:#fff}
.tl-item p{margin-top:8px;font-size:14.5px;color:var(--text-soft)}
.tl-money{margin-top:10px;display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;color:#fde68a;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.35)}

/* POSTS */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.post-card{display:flex;flex-direction:column;padding:22px;border-radius:var(--radius);border:1px solid var(--border);background:var(--glass);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.post-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--glow)}
.post-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.post-meta span{display:inline-flex;align-items:center;gap:6px}
.post-card h3{margin-top:14px;font-size:16.5px;font-weight:700;line-height:1.45}
.post-card h3 a{transition:color .2s ease}
.post-card h3 a:hover{color:var(--cyan)}
.post-card p{margin-top:10px;font-size:14px;color:var(--text-soft);flex:1}
.post-more{margin-top:16px;font-size:13.5px;font-weight:600;color:#7dd3fc;display:inline-flex;align-items:center;gap:8px}
.post-more i{transition:transform .2s ease}
.post-card:hover .post-more i{transform:translateX(4px)}
.empty-note{margin-top:30px;padding:22px;border-radius:var(--radius);border:1px dashed var(--border-strong);color:var(--muted);font-size:14.5px;text-align:left}
.list-foot{margin-top:30px;display:flex;justify-content:flex-start}

/* TRUST */
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:36px}
.trust{padding:22px;border-radius:var(--radius);border:1px solid var(--border);background:rgba(9,17,35,.6)}
.trust i{font-size:20px;color:var(--cyan)}
.trust h3{margin-top:14px;font-size:16px;color:#fff}
.trust p{margin-top:8px;font-size:14px;color:var(--text-soft)}

/* FAQ */
.faq{display:grid;gap:14px;margin-top:34px;max-width:940px}
.faq details{border:1px solid var(--border);border-radius:var(--radius);background:var(--glass);overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}
.faq details[open]{border-color:var(--border-strong);box-shadow:var(--glow)}
.faq summary{cursor:pointer;list-style:none;padding:19px 22px;font-size:15.5px;font-weight:600;color:#fff;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{color:var(--cyan);transition:transform .25s ease;margin-top:4px}
.faq details[open] summary i{transform:rotate(180deg)}
.faq .ans{padding:0 22px 20px;font-size:14.5px;color:var(--text-soft);line-height:1.72}

/* CTA */
.cta-box{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;padding:40px;border-radius:var(--radius-l);border:1px solid var(--border-strong);background:linear-gradient(150deg,rgba(37,99,235,.3),rgba(8,18,41,.94));box-shadow:var(--shadow)}
.cta-box h2{font-size:clamp(22px,2.5vw,31px);font-weight:800;line-height:1.3}
.cta-box > div > p{margin-top:14px;color:var(--text-soft);font-size:15.5px}
.cta-list{margin-top:22px;display:grid;gap:11px}
.cta-list li{display:flex;gap:10px;font-size:14.5px;color:var(--text-soft)}
.cta-list li i{color:var(--cyan);margin-top:5px}
.form-card{padding:26px;border-radius:var(--radius);border:1px solid var(--border);background:rgba(3,7,18,.6);backdrop-filter:blur(10px)}
.field{display:grid;gap:8px;margin-bottom:15px}
.field label{font-size:13.5px;color:var(--muted);font-weight:600}
.field input,.field select{width:100%;padding:13px 15px;border-radius:var(--radius-s);border:1px solid var(--border);background:rgba(3,7,18,.75);color:var(--text);transition:border-color .2s ease,box-shadow .2s ease}
.field input::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,189,248,.2)}
.form-note{margin-top:14px;font-size:12.8px;color:var(--muted);line-height:1.6}

/* FOOTER */
.site-footer{margin-top:0;padding:60px 0 28px;background:linear-gradient(180deg,rgba(3,7,18,.4),rgba(8,18,41,.9));border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px}
.footer-brand p{margin-top:16px;font-size:14.5px;color:var(--muted);max-width:430px}
.footer-col h3{font-size:15px;color:#e2f3ff;margin-bottom:16px}
.footer-links{display:grid;gap:11px}
.footer-links a{font-size:14px;color:var(--muted);transition:color .2s ease,transform .2s ease;display:inline-block}
.footer-links a:hover{color:var(--cyan);transform:translateX(3px)}
.footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(56,189,248,.14);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted-2)}
.age-badge{display:inline-grid;place-items:center;min-width:44px;height:26px;padding:0 10px;border-radius:999px;font-weight:700;font-size:12.5px;color:#fecdd3;border:1px solid rgba(244,63,94,.5);background:rgba(244,63,94,.14)}

/* FAB */
.fab{position:fixed;left:16px;bottom:96px;z-index:50;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:rgba(7,7,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid transparent;background-image:linear-gradient(rgba(7,7,13,.86),rgba(7,7,13,.86)),linear-gradient(120deg,#38bdf8,#2563eb);background-origin:border-box;background-clip:padding-box,border-box;color:#e2f3ff;font-size:13.5px;font-weight:600;box-shadow:0 0 20px rgba(56,189,248,.45);opacity:.78;transition:opacity .25s ease,transform .25s ease,box-shadow .3s ease;animation:fabPulse 3.4s ease-in-out infinite}
.fab i{color:var(--cyan)}
.fab:hover{opacity:1;transform:translateY(-3px) scale(1.04);box-shadow:0 0 34px rgba(56,189,248,.7)}
.fab:active{transform:translateY(0) scale(.96)}
.fab-dot{position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:#f43f5e;box-shadow:0 0 0 3px rgba(3,7,18,.9),0 0 12px rgba(244,63,94,.9);animation:dotBlink 1.6s ease-in-out infinite}
@keyframes fabPulse{0%,100%{box-shadow:0 0 18px rgba(56,189,248,.38)}50%{box-shadow:0 0 30px rgba(56,189,248,.68)}}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.35}}

/* RESPONSIVE */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-grid,.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-split{grid-template-columns:1fr;gap:30px}
  .cta-box{grid-template-columns:1fr;gap:30px;padding:32px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:980px){
  .main-nav{position:fixed;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;margin-left:0;padding:16px 20px 24px;background:rgba(3,7,18,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transform:translateY(-140%);transition:transform .32s ease;box-shadow:0 24px 50px rgba(2,8,23,.7)}
  .main-nav.is-open{transform:translateY(0)}
  .nav-link{padding:12px 14px;border-radius:12px;font-size:14.5px}
  .nav-toggle{display:grid}
  .header-actions{margin-left:0}
  .steps{grid-template-columns:1fr}
  .tl-item{grid-template-columns:1fr;gap:12px}
}
@media (max-width:640px){
  .section{padding:56px 0}
  .hero{padding:48px 0 58px}
  .metric-grid,.card-grid,.post-grid,.trust-grid{grid-template-columns:1fr}
  .hero-points{grid-template-columns:1fr}
  .hero-stack{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-box{padding:24px}
  .form-card{padding:20px}
  .fab{bottom:84px;padding:11px 15px;font-size:13px}
}
@media (max-width:520px){
  .brand-text{display:none}
  .btn-sm{padding:8px 12px;font-size:12.5px}
  .header-inner{gap:10px;height:68px}
  .main-nav{top:68px}
  .figure img{height:200px}
  .stack-main img{height:160px}
}

/* roulang page: category3 */
:root{
  --bg:#030712;
  --bg-2:#081229;
  --bg-3:#0b1a35;
  --glass:rgba(15,28,55,.55);
  --glass-2:rgba(9,17,35,.86);
  --border:rgba(56,189,248,.18);
  --border-strong:rgba(56,189,248,.48);
  --blue:#2563eb;
  --blue-deep:#1d4ed8;
  --cyan:#38bdf8;
  --holo:#60a5fa;
  --gold:#fbbf24;
  --rose:#f43f5e;
  --green:#22c55e;
  --text:#f8fafc;
  --text-soft:#cbd5e1;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --shadow:0 18px 50px rgba(2,8,23,.65);
  --glow:0 0 22px rgba(56,189,248,.32);
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(37,99,235,.30), transparent 62%),
    radial-gradient(900px 520px at -8% 8%, rgba(56,189,248,.14), transparent 58%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:rgba(3,7,18,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.02em;color:#02101f;background:linear-gradient(135deg,#1d4ed8,#38bdf8);box-shadow:0 0 18px rgba(56,189,248,.45)}
.brand-text{font-size:14.5px;font-weight:700;color:#e2e8f0;line-height:1.2;max-width:190px}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:color .25s ease,background .25s ease,box-shadow .25s ease;white-space:nowrap}
.nav-link:hover{color:#fff;background:rgba(56,189,248,.10)}
.nav-link.is-active{color:#fff;background:rgba(37,99,235,.24);box-shadow:inset 0 0 0 1px rgba(56,189,248,.38)}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:rgba(56,189,248,.08);cursor:pointer;padding:0;place-items:center;gap:4px}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:#e2e8f0;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .22s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;white-space:nowrap;text-align:center}
.btn-sm{padding:9px 17px;font-size:13.5px}
.btn-lg{padding:15px 28px;font-size:15.5px}
.btn-primary{background:linear-gradient(135deg,var(--blue-deep),var(--cyan));color:#02101f;font-weight:700;box-shadow:0 0 22px rgba(56,189,248,.38)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(56,189,248,.62)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-outline{background:rgba(56,189,248,.09);border-color:rgba(56,189,248,.45);color:#e2f3ff}
.btn-outline:hover{background:rgba(56,189,248,.2);border-color:var(--cyan);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:rgba(148,163,184,.35);color:var(--text-soft)}
.btn-ghost:hover{color:#fff;border-color:var(--cyan);background:rgba(56,189,248,.08)}

/* HERO */
.hero{position:relative;overflow:hidden;padding:66px 0 76px;border-bottom:1px solid var(--border)}
.hero-bg{position:absolute;inset:0;background-image:url('/assets/images/1f54bb723b644d51.jpg');background-size:cover;background-position:center;opacity:.24;filter:saturate(1.1)}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,18,.72) 0%,rgba(3,7,18,.92) 62%,var(--bg) 100%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#7dd3fc;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35)}
.hero h1{margin-top:18px;font-size:clamp(27px,3.6vw,42px);font-weight:800;line-height:1.22}
.hero h1 .hl{background:linear-gradient(120deg,#38bdf8,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{margin-top:20px;color:var(--text-soft);font-size:16.5px;line-height:1.72;max-width:620px}
.hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.hero-points{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hero-points li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;color:var(--text-soft)}
.hero-points li i{color:var(--cyan);margin-top:5px}
.hero-side{display:grid;gap:16px}
.panel{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-l);padding:22px;box-shadow:var(--shadow)}
.panel-main{background:linear-gradient(150deg,rgba(37,99,235,.34),rgba(8,18,41,.92));border-color:rgba(56,189,248,.36)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.panel-head i{color:var(--cyan)}
.gauge{margin-top:16px;display:flex;align-items:flex-end;gap:14px}
.gauge-num{font-size:46px;font-weight:800;line-height:1;color:#fff;letter-spacing:-.02em}
.gauge-num span{font-size:16px;font-weight:600;color:#7dd3fc;margin-left:4px}
.gauge-cap{font-size:13.5px;color:var(--muted);line-height:1.5}
.meter{margin-top:18px;height:8px;border-radius:999px;background:rgba(2,8,23,.7);overflow:hidden;border:1px solid rgba(56,189,248,.2)}
.meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1d4ed8,#38bdf8)}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{background:rgba(9,17,35,.72);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.mini b{display:block;font-size:22px;font-weight:800;color:#e0f2fe}
.mini span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.45}
.ball-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ball{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:700;color:#cbd5e1;background:rgba(2,8,23,.65);border:1px solid rgba(56,189,248,.22)}
.ball.hot{color:#fff;background:linear-gradient(140deg,rgba(37,99,235,.55),rgba(56,189,248,.35));border-color:rgba(56,189,248,.6);box-shadow:var(--glow)}

/* SECTION BASE */
.section{padding:72px 0;position:relative}
.section--alt{background:linear-gradient(180deg,rgba(8,18,41,.7),rgba(3,7,18,.3));border-top:1px solid rgba(56,189,248,.08);border-bottom:1px solid rgba(56,189,248,.08)}
.section--deep{background:linear-gradient(160deg,rgba(11,26,53,.8),rgba(3,7,18,.88));border-top:1px solid var(--border)}
.sec-head{max-width:790px}
.sec-head .kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7dd3fc}
.sec-head h2{margin-top:12px;font-size:clamp(23px,2.6vw,33px);font-weight:800;letter-spacing:-.01em}
.sec-head p{margin-top:14px;color:var(--text-soft);font-size:15.6px;line-height:1.72}

/* METRIC BOARD */
.metric-grid{margin-top:38px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.metric{position:relative;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:22px;overflow:hidden;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.metric::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.7}
.metric:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:0 14px 34px rgba(2,8,23,.6)}
.metric i.m-ico{color:var(--cyan);font-size:17px}
.metric b{display:block;margin-top:14px;font-size:30px;font-weight:800;letter-spacing:-.02em}
.metric small{display:block;margin-top:6px;font-size:12.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.metric p{margin-top:12px;font-size:14px;color:var(--text-soft);line-height:1.62}

/* FEATURE MATRIX */
.feature-grid{margin-top:38px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.feature{background:linear-gradient(155deg,rgba(15,28,55,.62),rgba(6,13,28,.85));border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.feature:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:0 16px 38px rgba(2,8,23,.55)}
.feature .f-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#7dd3fc;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.3)}
.feature h3{margin-top:16px;font-size:17px}
.feature p{margin-top:10px;font-size:14.4px;color:var(--text-soft);line-height:1.68}
.feature ul{margin-top:14px;display:grid;gap:8px}
.feature ul li{display:flex;gap:9px;font-size:13.8px;color:var(--muted)}
.feature ul li i{color:var(--cyan);margin-top:4px;font-size:12px}

/* DATA TABLE */
.table-wrap{margin-top:34px;border:1px solid var(--border);border-radius:var(--radius-l);background:var(--glass-2);overflow-x:auto}
table.cang{width:100%;min-width:720px;border-collapse:collapse}
table.cang thead th{text-align:left;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#7dd3fc;padding:16px 18px;background:rgba(37,99,235,.16);border-bottom:1px solid var(--border);white-space:nowrap}
table.cang tbody td{padding:15px 18px;border-bottom:1px solid rgba(56,189,248,.1);font-size:14.4px;color:var(--text-soft);white-space:nowrap}
table.cang tbody tr:last-child td{border-bottom:none}
table.cang tbody tr:hover td{background:rgba(56,189,248,.05)}
.tcang{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:800;color:#fff;background:linear-gradient(140deg,rgba(37,99,235,.6),rgba(56,189,248,.35));border:1px solid rgba(56,189,248,.5)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.pill.cold{color:#bfdbfe;background:rgba(37,99,235,.2);border-color:rgba(56,189,248,.45)}
.pill.mid{color:#e2e8f0;background:rgba(148,163,184,.14);border-color:rgba(148,163,184,.3)}
.pill.hotp{color:#fecdd3;background:rgba(244,63,94,.16);border-color:rgba(244,63,94,.4)}
.table-note{margin-top:14px;font-size:13.5px;color:var(--muted-2)}

/* COMPARE */
.compare{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmp{border-radius:var(--radius-l);padding:26px;border:1px solid var(--border);background:var(--glass)}
.cmp.bad{background:linear-gradient(160deg,rgba(43,7,18,.55),rgba(6,13,28,.9));border-color:rgba(244,63,94,.28)}
.cmp.good{background:linear-gradient(160deg,rgba(9,32,64,.7),rgba(5,12,26,.92));border-color:rgba(56,189,248,.4);box-shadow:0 0 30px rgba(56,189,248,.12)}
.cmp h3{display:flex;align-items:center;gap:10px;font-size:17.5px}
.cmp.bad h3 i{color:var(--rose)}
.cmp.good h3 i{color:var(--green)}
.cmp ul{margin-top:18px;display:grid;gap:12px}
.cmp ul li{display:flex;gap:11px;font-size:14.6px;color:var(--text-soft);line-height:1.62}
.cmp.bad ul li i{color:var(--rose);margin-top:5px}
.cmp.good ul li i{color:var(--green);margin-top:5px}

/* TIMELINE */
.timeline{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tl{position:relative;padding:24px 20px 22px;border-radius:var(--radius);background:rgba(9,17,35,.6);border:1px solid var(--border)}
.tl .step{font-size:12px;font-weight:700;letter-spacing:.12em;color:#7dd3fc}
.tl h3{margin-top:10px;font-size:16.5px}
.tl p{margin-top:10px;font-size:14px;color:var(--text-soft);line-height:1.65}
.tl::after{content:'';position:absolute;top:34px;right:-18px;width:18px;height:2px;background:linear-gradient(90deg,rgba(56,189,248,.6),transparent)}
.tl:last-child::after{display:none}

/* ASSURANCE */
.assure-grid{margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.assure{display:flex;gap:14px;padding:20px;border-radius:var(--radius);background:rgba(9,17,35,.58);border:1px solid var(--border)}
.assure i{color:var(--cyan);font-size:19px;margin-top:3px}
.assure h3{font-size:15.5px}
.assure p{margin-top:7px;font-size:13.9px;color:var(--muted);line-height:1.62}
.pay-row{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pay{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:#dbeafe;background:rgba(37,99,235,.16);border:1px solid rgba(56,189,248,.32)}

/* CHANNEL MATRIX */
.chan-grid{margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.chan{display:block;padding:24px;border-radius:var(--radius);background:linear-gradient(155deg,rgba(15,28,55,.66),rgba(6,13,28,.88));border:1px solid var(--border);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.chan:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:0 16px 36px rgba(2,8,23,.6)}
.chan .c-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(56,189,248,.13);border:1px solid rgba(56,189,248,.3);color:#7dd3fc}
.chan h3{margin-top:15px;font-size:16.5px}
.chan p{margin-top:9px;font-size:14px;color:var(--text-soft);line-height:1.65}
.chan span.more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:13.5px;font-weight:600;color:#7dd3fc}

/* FAQ */
.faq{margin-top:34px;display:grid;gap:14px;max-width:960px}
.faq details{border:1px solid var(--border);border-radius:var(--radius);background:rgba(9,17,35,.6);padding:0 22px;transition:border-color .25s ease,background .25s ease}
.faq details[open]{border-color:var(--border-strong);background:rgba(15,28,55,.72)}
.faq summary{cursor:pointer;list-style:none;padding:19px 0;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'\002B';font-size:19px;color:var(--cyan);font-weight:700;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq p{padding:0 0 20px;font-size:14.8px;color:var(--text-soft);line-height:1.72}

/* CTA */
.cta-wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center}
.cta-copy h2{font-size:clamp(23px,2.6vw,32px);font-weight:800}
.cta-copy p{margin-top:16px;font-size:15.6px;color:var(--text-soft);line-height:1.72}
.cta-list{margin-top:22px;display:grid;gap:11px}
.cta-list li{display:flex;gap:10px;font-size:14.5px;color:var(--text-soft)}
.cta-list li i{color:var(--cyan);margin-top:5px}
.form-card{background:var(--glass-2);border:1px solid var(--border-strong);border-radius:var(--radius-l);padding:28px;box-shadow:var(--shadow),0 0 32px rgba(56,189,248,.14)}
.form-card h3{font-size:18px}
.form-card p.hint{margin-top:9px;font-size:14px;color:var(--muted)}
.form-row{margin-top:18px;display:grid;gap:8px}
.form-row label{font-size:13px;font-weight:600;color:var(--text-soft);letter-spacing:.02em}
.form-row input,.form-row select{width:100%;padding:13px 15px;border-radius:var(--radius-s);background:rgba(3,7,18,.75);border:1px solid rgba(56,189,248,.26);font-size:14.5px;transition:border-color .2s ease,box-shadow .2s ease}
.form-row input:focus,.form-row select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,189,248,.2)}
.form-card .btn{width:100%;margin-top:20px}
.form-note{margin-top:14px;font-size:12.8px;color:var(--muted-2);line-height:1.6}

/* FOOTER */
.site-footer{margin-top:0;padding:58px 0 26px;background:linear-gradient(180deg,rgba(5,12,26,.92),rgba(2,6,16,.98));border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.footer-brand .brand{margin-bottom:16px}
.footer-brand p{font-size:14.3px;color:var(--muted);line-height:1.72;max-width:460px}
.footer-col h3{font-size:14.5px;color:#e2e8f0;letter-spacing:.02em}
.footer-links{margin-top:14px;display:grid;gap:10px}
.footer-links a{font-size:14px;color:var(--muted);transition:color .2s ease,transform .2s ease}
.footer-links a:hover{color:var(--cyan);transform:translateX(3px)}
.footer-bottom{margin-top:38px;padding-top:20px;border-top:1px solid rgba(56,189,248,.14);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted-2)}
.age-badge{display:inline-grid;place-items:center;min-width:44px;padding:5px 12px;border-radius:999px;font-weight:700;color:#fca5a5;border:1px solid rgba(244,63,94,.4);background:rgba(244,63,94,.12)}

/* FAB */
.fab{position:fixed;left:16px;bottom:96px;z-index:50;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#e0f2fe;background:rgba(7,7,13,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:2px solid transparent;background-image:linear-gradient(rgba(7,7,13,.85),rgba(7,7,13,.85)),linear-gradient(135deg,#38bdf8,#22d3ee,#60a5fa);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 0 22px rgba(6,182,212,.45);opacity:.78;transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease}
.fab:hover{opacity:1;transform:translateY(-3px) scale(1.06);box-shadow:0 0 34px rgba(56,189,248,.7)}
.fab:active{transform:translateY(0) scale(.94)}
.fab i{font-size:19px}
.fab .dot{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:#f43f5e;box-shadow:0 0 0 2px rgba(3,7,18,.9);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* RESPONSIVE */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl::after{display:none}
  .assure-grid{grid-template-columns:1fr 1fr}
  .chan-grid{grid-template-columns:1fr 1fr}
  .cta-wrap{grid-template-columns:1fr;gap:30px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .main-nav{position:fixed;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:6px;margin:0;padding:18px 20px 24px;background:rgba(3,7,18,.98);border-bottom:1px solid var(--border);transform:translateY(-140%);transition:transform .3s ease;max-height:calc(100vh - 74px);overflow-y:auto}
  .main-nav.is-open{transform:translateY(0)}
  .nav-link{padding:12px 14px;border-radius:12px;font-size:15px}
  .nav-toggle{display:grid}
  .header-actions .btn-ghost{display:none}
}
@media (max-width:768px){
  .section{padding:56px 0}
  .hero{padding:46px 0 56px}
  .metric-grid,.feature-grid,.timeline,.assure-grid,.chan-grid{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .hero-points{grid-template-columns:1fr}
  .brand-text{max-width:130px;font-size:13px}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .container{padding:0 16px}
  .hero h1{font-size:26px}
  .metric b{font-size:26px}
  .gauge-num{font-size:38px}
  .header-inner{height:66px;gap:10px}
  .main-nav{top:66px;max-height:calc(100vh - 66px)}
  .btn-lg{padding:13px 20px;font-size:14.5px}
  .hero-actions .btn{width:100%}
  .form-card{padding:22px}
  .mini-grid{grid-template-columns:1fr}
}