/* roulang page: index */
:root {
            --bg: #0f0c20;
            --bg-deep: #090817;
            --panel: #17132d;
            --panel-soft: #201a3a;
            --cyan: #00f0ff;
            --lime: #ccff00;
            --pink: #ff4da6;
            --text: #f7f8ff;
            --muted: #a6acbf;
            --line: rgba(0,240,255,.18);
            --line-soft: rgba(255,255,255,.1);
            --radius-lg: 28px;
            --radius-md: 18px;
            --radius-sm: 12px;
            --shadow: 0 24px 70px rgba(0,0,0,.35);
            --glow: 0 0 28px rgba(0,240,255,.18);
            --container: 1180px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            min-width: 320px;
            background: var(--bg-deep);
            color: var(--text);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }
        body:before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .28;
            background-image: linear-gradient(rgba(0,240,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,.035) 1px, transparent 1px);
            background-size: 46px 46px;
            mask-image: linear-gradient(to bottom, black, transparent 75%);
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--lime);
            font-size: .75rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }
        .eyebrow:before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }
        h1, h2, h3 { font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif; line-height: 1.15; letter-spacing: -.035em; }
        h1 { font-size: clamp(2.65rem, 6vw, 5.8rem); }
        h2 { font-size: clamp(2rem, 4vw, 3.45rem); }
        h3 { font-size: 1.22rem; }
        .section { padding: 112px 0; position: relative; }
        .section-heading { max-width: 690px; margin-bottom: 46px; }
        .section-heading h2 { margin-top: 15px; }
        .section-heading p { color: var(--muted); margin-top: 18px; max-width: 650px; }
        .section-heading.split { display: flex; justify-content: space-between; align-items: end; gap: 35px; max-width: none; }
        .section-heading.split > div:first-child { max-width: 680px; }
        .text-link { color: var(--cyan); font-weight: 700; border-bottom: 1px solid rgba(0,240,255,.4); padding-bottom: 3px; transition: .25s; }
        .text-link:hover { color: var(--lime); border-color: var(--lime); }

        .site-header {
            position: fixed;
            z-index: 40;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(9,8,23,.82);
            border-bottom: 1px solid var(--line-soft);
            backdrop-filter: blur(18px);
        }
        .nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 30px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 250px; }
        .brand-mark {
            width: 40px; height: 40px; border-radius: 13px;
            display: grid; place-items: center; color: var(--bg-deep);
            font-weight: 900; background: linear-gradient(135deg, var(--lime), var(--cyan));
            box-shadow: 0 0 22px rgba(0,240,255,.3);
        }
        .brand-name { font: 700 1rem/1.15 "Space Grotesk", sans-serif; max-width: 205px; }
        .main-nav { display: flex; align-items: center; justify-content: center; gap: 7px; flex: 1; }
        .main-nav a {
            color: var(--muted); padding: 10px 13px; border-radius: 10px;
            font-size: .88rem; font-weight: 600; transition: .25s;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--text); background: rgba(0,240,255,.09); }
        .main-nav a.active { box-shadow: inset 0 -2px var(--cyan); }
        .nav-actions { display: flex; align-items: center; gap: 15px; white-space: nowrap; }
        .login-link { color: var(--text); font-size: .88rem; font-weight: 700; }
        .menu-toggle { display: none; border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 10px; width: 42px; height: 42px; }

        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            min-height: 48px; padding: 0 20px; border: 1px solid transparent;
            border-radius: 12px; font-weight: 800; font-size: .88rem; transition: transform .25s, box-shadow .25s, background .25s;
        }
        .btn:hover { transform: translateY(-3px); }
        .btn-primary { color: #08100b; background: var(--lime); box-shadow: 0 0 23px rgba(204,255,0,.2); }
        .btn-primary:hover { background: #e4ff70; box-shadow: 0 0 32px rgba(204,255,0,.42); }
        .btn-outline { color: var(--cyan); border-color: rgba(0,240,255,.5); background: rgba(0,240,255,.05); }
        .btn-outline:hover { color: var(--bg-deep); background: var(--cyan); box-shadow: 0 0 25px rgba(0,240,255,.35); }
        .btn-ghost { color: var(--text); background: rgba(255,255,255,.07); border-color: var(--line-soft); }
        .btn-ghost:hover { background: rgba(255,255,255,.13); }

        .hero {
            min-height: 720px; padding: 150px 0 95px; display: flex; align-items: center;
            background: linear-gradient(90deg, rgba(9,8,23,.98) 12%, rgba(9,8,23,.72) 54%, rgba(9,8,23,.82)), url("/assets/images/backpic/back-1.jpg") center/cover;
            position: relative; isolation: isolate;
        }
        .hero:after {
            content: ""; position: absolute; z-index: -1; inset: auto 0 0;
            height: 180px; background: linear-gradient(transparent, var(--bg-deep));
        }
        .hero-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); gap: 70px; align-items: center; }
        .hero-copy { max-width: 760px; }
        .hero h1 { margin: 19px 0 24px; max-width: 770px; }
        .hero h1 span { color: var(--cyan); text-shadow: 0 0 24px rgba(0,240,255,.28); }
        .hero-intro { max-width: 660px; color: #d5d8e8; font-size: 1.08rem; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
        .hero-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 42px; }
        .stat-mini { display: grid; gap: 2px; }
        .stat-mini strong { color: var(--lime); font: 700 1.5rem "Space Grotesk", sans-serif; }
        .stat-mini span { color: var(--muted); font-size: .76rem; }
        .trial-panel {
            padding: 28px; border: 1px solid rgba(0,240,255,.32); border-radius: var(--radius-lg);
            background: linear-gradient(145deg, rgba(32,26,58,.94), rgba(11,26,48,.9));
            box-shadow: var(--shadow), var(--glow); position: relative; overflow: hidden;
        }
        .trial-panel:before { content: ""; position: absolute; width: 180px; height: 180px; background: var(--pink); filter: blur(80px); opacity: .16; right: -70px; top: -80px; }
        .panel-top { display: flex; justify-content: space-between; gap: 15px; align-items: start; position: relative; }
        .panel-top h3 { font-size: 1.4rem; max-width: 235px; }
        .live-badge, .tag {
            display: inline-flex; align-items: center; gap: 7px; border-radius: 99px;
            padding: 6px 10px; font-size: .68rem; font-weight: 800;
        }
        .live-badge { color: var(--lime); background: rgba(204,255,0,.11); border: 1px solid rgba(204,255,0,.25); }
        .live-badge i { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 10px var(--lime); animation: pulse 1.5s infinite; }
        .panel-note { color: var(--muted); font-size: .84rem; margin: 18px 0 22px; }
        .benefit-list { list-style: none; display: grid; gap: 11px; margin-bottom: 25px; }
        .benefit-list li { display: flex; gap: 10px; color: #e4e7f3; font-size: .86rem; }
        .benefit-list li:before { content: "✓"; color: var(--lime); font-weight: 900; }
        .trial-form { display: grid; gap: 10px; }
        .trial-form input { width: 100%; height: 48px; color: var(--text); background: rgba(0,0,0,.3); border: 1px solid var(--line-soft); border-radius: 10px; padding: 0 14px; }
        .trial-form input::placeholder { color: #7e849b; }
        .form-hint { color: #7e849b; font-size: .7rem; }
        .form-status { min-height: 20px; color: var(--lime); font-size: .78rem; }

        .calendar-strip { background: var(--panel); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 23px 0; }
        .calendar-row { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 16px; align-items: center; }
        .calendar-title { color: var(--text); font-weight: 800; }
        .calendar-title small { display: block; color: var(--cyan); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
        .calendar-item { display: flex; align-items: center; gap: 11px; border-left: 1px solid var(--line-soft); padding-left: 17px; }
        .calendar-day { color: var(--lime); font: 700 1.25rem "Space Grotesk", sans-serif; }
        .calendar-item span { color: var(--muted); font-size: .78rem; line-height: 1.35; }

        .topics { background: var(--bg); }
        .topic-grid { display: grid; grid-template-columns: 1.08fr .92fr .92fr; gap: 18px; }
        .topic-card { min-height: 360px; border-radius: var(--radius-lg); overflow: hidden; position: relative; isolation: isolate; border: 1px solid var(--line-soft); transition: .35s; }
        .topic-card:hover { transform: translateY(-7px); border-color: var(--cyan); box-shadow: 0 16px 40px rgba(0,240,255,.16); }
        .topic-card:first-child { min-height: 440px; }
        .topic-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s; }
        .topic-card:hover img { transform: scale(1.07); }
        .topic-card:after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(9,8,23,.98), rgba(9,8,23,.08) 75%); }
        .topic-body { position: absolute; left: 24px; right: 24px; bottom: 23px; }
        .topic-body h3 { margin: 10px 0 8px; font-size: 1.45rem; }
        .topic-body p { color: #c0c5d8; font-size: .84rem; }
        .tag { color: var(--cyan); background: rgba(0,240,255,.1); border: 1px solid rgba(0,240,255,.25); }

        .dashboard { background: linear-gradient(180deg, var(--bg), #111a2c); }
        .dashboard-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 60px; align-items: center; }
        .dashboard-copy p { color: var(--muted); margin-top: 20px; }
        .metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
        .metric { padding: 25px; border-left: 3px solid var(--cyan); background: rgba(255,255,255,.045); border-radius: 0 18px 18px 0; }
        .metric:nth-child(2) { border-color: var(--lime); }
        .metric:nth-child(3) { border-color: var(--pink); }
        .metric:nth-child(4) { border-color: #a67bff; }
        .metric strong { display: block; font: 700 clamp(1.7rem, 3vw, 2.5rem) "Space Grotesk", sans-serif; }
        .metric span { color: var(--muted); font-size: .78rem; }
        .progress { height: 7px; background: rgba(255,255,255,.1); border-radius: 20px; margin-top: 15px; overflow: hidden; }
        .progress b { display: block; width: 82%; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--lime)); border-radius: inherit; }

        .updates { background: var(--bg-deep); }
        .updates-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 25px; }
        .updates-list { border-top: 1px solid var(--line-soft); }
        .update-row { display: grid; grid-template-columns: 95px 1fr auto; gap: 18px; align-items: center; padding: 19px 0; border-bottom: 1px solid var(--line-soft); transition: .25s; }
        .update-row:hover { padding-left: 9px; background: rgba(0,240,255,.035); }
        .update-date { color: var(--cyan); font-size: .76rem; font-weight: 700; }
        .update-row h3 { font-size: 1rem; letter-spacing: -.015em; }
        .update-row p { color: var(--muted); font-size: .78rem; margin-top: 4px; }
        .update-arrow { color: var(--lime); font-size: 1.3rem; }
        .feature-note { padding: 29px; border-radius: var(--radius-lg); background: linear-gradient(145deg, #241b43, #101e37); border: 1px solid rgba(255,77,166,.26); }
        .feature-note h3 { font-size: 1.55rem; margin: 17px 0 12px; }
        .feature-note p { color: var(--muted); font-size: .87rem; }
        .mini-points { margin-top: 22px; display: grid; gap: 12px; }
        .mini-points div { display: flex; align-items: center; gap: 10px; color: #dce0ed; font-size: .81rem; }
        .mini-points b { color: var(--pink); }

        .guide { background: #111a2c; }
        .guide-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: start; }
        .guide-visual { position: relative; min-height: 430px; border-radius: var(--radius-lg); overflow: hidden; }
        .guide-visual img { height: 100%; width: 100%; object-fit: cover; opacity: .78; }
        .guide-visual:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,17,33,.3), rgba(10,17,33,.05)); }
        .guide-stamp { position: absolute; z-index: 2; bottom: 22px; left: 22px; right: 22px; padding: 17px 18px; background: rgba(9,8,23,.78); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(10px); }
        .guide-stamp strong { color: var(--lime); display: block; }
        .guide-stamp span { color: var(--muted); font-size: .77rem; }
        .steps { display: grid; gap: 25px; }
        .step { display: grid; grid-template-columns: 45px 1fr; gap: 16px; }
        .step-no { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--bg-deep); background: var(--cyan); font-weight: 900; }
        .step:nth-child(2) .step-no { background: var(--lime); }
        .step:nth-child(3) .step-no { background: var(--pink); color: white; }
        .step p { color: var(--muted); font-size: .87rem; margin-top: 5px; }

        .voices { background: var(--bg); }
        .voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .voice { padding: 25px; border-top: 2px solid var(--cyan); background: rgba(255,255,255,.035); border-radius: 0 0 var(--radius-md) var(--radius-md); }
        .voice:nth-child(2) { border-color: var(--lime); }
        .voice:nth-child(3) { border-color: var(--pink); }
        .voice p { color: #d5d8e8; font-size: .9rem; }
        .voice footer { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--muted); font-size: .76rem; }
        .avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--bg-deep); background: linear-gradient(135deg, var(--cyan), var(--lime)); font-weight: 800; }

        .faq { background: linear-gradient(180deg, var(--bg), #13102a); }
        .faq-list { max-width: 900px; display: grid; gap: 10px; }
        details { border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255,255,255,.035); overflow: hidden; }
        summary { list-style: none; cursor: pointer; padding: 20px 23px; font-weight: 700; display: flex; justify-content: space-between; gap: 20px; }
        summary::-webkit-details-marker { display: none; }
        summary:after { content: "+"; color: var(--cyan); font-size: 1.4rem; line-height: 1; }
        details[open] summary:after { content: "−"; color: var(--lime); }
        details p { color: var(--muted); padding: 0 23px 21px; font-size: .87rem; max-width: 820px; }

        .cta { padding: 90px 0; background: linear-gradient(110deg, #102846, #29143b); text-align: center; border-top: 1px solid var(--line); }
        .cta h2 { max-width: 760px; margin: 14px auto 16px; }
        .cta p { color: #c6cbda; max-width: 650px; margin: 0 auto 27px; }
        .cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; }

        .site-footer { padding: 60px 0 25px; background: #080714; border-top: 1px solid var(--line-soft); }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 35px; padding-bottom: 45px; }
        .footer-brand p { color: var(--muted); font-size: .82rem; max-width: 320px; margin-top: 16px; }
        .footer-col h3 { font-size: .9rem; margin-bottom: 15px; color: var(--text); }
        .footer-col a { display: block; color: var(--muted); font-size: .8rem; margin: 9px 0; transition: .2s; }
        .footer-col a:hover { color: var(--cyan); transform: translateX(3px); }
        .payment-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
        .payment { padding: 6px 9px; color: var(--lime); border: 1px solid rgba(204,255,0,.25); border-radius: 7px; font-size: .68rem; font-weight: 800; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid var(--line-soft); color: #777d93; font-size: .72rem; }
        .responsible { color: #afb4c5; }
        .fab {
            position: fixed; left: 16px; bottom: 96px; z-index: 50; width: 58px; height: 58px;
            display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 18px;
            color: var(--cyan); background: rgba(8,8,20,.78); backdrop-filter: blur(12px);
            box-shadow: 0 0 18px rgba(0,240,255,.45); font-size: 1.45rem; transition: .3s; animation: float 3s ease-in-out infinite;
        }
        .fab:hover { opacity: 1; transform: scale(1.1); box-shadow: 0 0 35px rgba(204,255,0,.6); color: var(--lime); }
        .fab:after { content: "MỚI"; position: absolute; top: -8px; right: -9px; padding: 2px 5px; border-radius: 5px; color: white; background: var(--pink); font-size: .55rem; font-weight: 900; animation: pulse 1.5s infinite; }
        @keyframes pulse { 50% { opacity: .45; } }
        @keyframes float { 50% { transform: translateY(-6px); } }

        @media (max-width: 1024px) {
            .hero-layout { gap: 35px; }
            .brand { min-width: 220px; }
            .main-nav a { padding-inline: 8px; font-size: .78rem; }
            .dashboard-layout { gap: 30px; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 30px, 620px); }
            .section { padding: 78px 0; }
            .nav-wrap { min-height: 68px; gap: 12px; }
            .brand { min-width: 0; flex: 1; }
            .brand-name { font-size: .82rem; max-width: 175px; }
            .menu-toggle { display: block; }
            .main-nav {
                position: absolute; top: 68px; left: 15px; right: 15px; display: none;
                padding: 12px; flex-direction: column; align-items: stretch; background: rgba(16,13,36,.98);
                border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 12px 14px; }
            .nav-actions { gap: 9px; }
            .login-link { font-size: .75rem; }
            .nav-actions .btn { min-height: 39px; padding: 0 12px; font-size: .72rem; }
            .hero { min-height: auto; padding: 125px 0 70px; }
            .hero-layout, .dashboard-layout, .guide-layout, .updates-layout { grid-template-columns: 1fr; }
            .hero h1 { font-size: clamp(2.45rem, 12vw, 4rem); }
            .hero-intro { font-size: .98rem; }
            .trial-panel { max-width: 560px; }
            .calendar-row { grid-template-columns: 1fr 1fr; }
            .calendar-title { grid-column: 1 / -1; }
            .topic-grid { grid-template-columns: 1fr 1fr; }
            .topic-card:first-child { grid-column: 1 / -1; min-height: 350px; }
            .topic-card { min-height: 280px; }
            .section-heading.split { display: block; }
            .section-heading.split .text-link { display: inline-block; margin-top: 20px; }
            .guide-visual { min-height: 330px; }
            .voice-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
            .footer-brand { grid-column: 1 / -1; }
        }
        @media (max-width: 520px) {
            .hero-actions, .hero-actions .btn, .cta-actions, .cta-actions .btn { width: 100%; }
            .hero-stats { gap: 17px; justify-content: space-between; }
            .stat-mini strong { font-size: 1.25rem; }
            .calendar-row { grid-template-columns: 1fr; }
            .calendar-title { grid-column: auto; }
            .calendar-item { border-left: 0; border-top: 1px solid var(--line-soft); padding: 12px 0 0; }
            .topic-grid { grid-template-columns: 1fr; }
            .topic-card:first-child { grid-column: auto; }
            .metric-grid { grid-template-columns: 1fr 1fr; }
            .metric { padding: 18px 14px; }
            .metric strong { font-size: 1.45rem; }
            .update-row { grid-template-columns: 66px 1fr; gap: 10px; }
            .update-arrow { display: none; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 18px; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { display: block; }
            .footer-bottom .responsible { margin-top: 8px; }
        }

/* roulang page: category1 */
:root {
            --bg: #0f0c20;
            --bg-deep: #090817;
            --panel: #17132d;
            --panel-soft: #201a3a;
            --cyan: #00f0ff;
            --lime: #ccff00;
            --pink: #ff4da6;
            --text: #f7f8ff;
            --muted: #a6acbf;
            --line: rgba(0,240,255,.18);
            --line-soft: rgba(255,255,255,.1);
            --radius-lg: 28px;
            --radius-md: 18px;
            --radius-sm: 12px;
            --shadow: 0 24px 70px rgba(0,0,0,.35);
            --glow: 0 0 28px rgba(0,240,255,.18);
            --container: 1180px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            min-width: 320px;
            margin: 0;
            background: var(--bg-deep);
            color: var(--text);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }
        body:before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            opacity: .28;
            background-image:
                linear-gradient(rgba(0,240,255,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,240,255,.035) 1px, transparent 1px);
            background-size: 46px 46px;
            mask-image: linear-gradient(to bottom, black, transparent 75%);
        }
        body:after {
            content: "";
            position: fixed;
            z-index: -2;
            width: 420px;
            height: 420px;
            top: 12%;
            right: -180px;
            border-radius: 50%;
            background: rgba(0,240,255,.07);
            filter: blur(80px);
            pointer-events: none;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif; letter-spacing: -.035em; }
        h1 { font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1.03; }
        h2 { margin-bottom: 0; font-size: clamp(2rem, 3.2vw, 3.25rem); line-height: 1.1; }
        h3 { margin-bottom: 10px; font-size: 1.2rem; line-height: 1.25; }
        .container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
        .site-header {
            position: fixed;
            z-index: 40;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(9,8,23,.84);
            border-bottom: 1px solid var(--line-soft);
            backdrop-filter: blur(18px);
        }
        .nav-wrap {
            min-height: 76px;
            display: flex;
            align-items: center;
            gap: 28px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: 230px;
        }
        .brand-mark {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            display: grid;
            place-items: center;
            color: var(--bg-deep);
            border-radius: 13px;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 900;
            background: linear-gradient(135deg, var(--lime), var(--cyan));
            box-shadow: 0 0 22px rgba(0,240,255,.3);
        }
        .brand-name {
            max-width: 205px;
            font: 700 1rem/1.15 "Space Grotesk", sans-serif;
        }
        .main-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 1;
        }
        .main-nav a {
            padding: 10px 12px;
            color: var(--muted);
            border-radius: 10px;
            font-size: .86rem;
            font-weight: 600;
            transition: .25s ease;
        }
        .main-nav a:hover,
        .main-nav a.active {
            color: var(--text);
            background: rgba(0,240,255,.09);
        }
        .main-nav a.active { box-shadow: inset 0 -2px var(--cyan); }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 13px;
            white-space: nowrap;
        }
        .login-link {
            color: var(--text);
            font-size: .86rem;
            font-weight: 700;
            transition: color .2s ease;
        }
        .login-link:hover { color: var(--cyan); }
        .menu-toggle {
            display: none;
            width: 42px;
            height: 42px;
            color: var(--text);
            border: 1px solid var(--line);
            border-radius: 10px;
            background: transparent;
        }
        .btn {
            display: inline-flex;
            min-height: 48px;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 12px;
            font-size: .88rem;
            font-weight: 800;
            transition: transform .25s, box-shadow .25s, background .25s, color .25s;
        }
        .btn:hover { transform: translateY(-3px); }
        .btn:active { transform: translateY(0) scale(.97); }
        .btn:focus-visible,
        a:focus-visible,
        button:focus-visible,
        input:focus-visible {
            outline: 3px solid rgba(0,240,255,.55);
            outline-offset: 3px;
        }
        .btn-primary {
            color: #08100b;
            background: var(--lime);
            box-shadow: 0 0 23px rgba(204,255,0,.2);
        }
        .btn-primary:hover {
            background: #e4ff70;
            box-shadow: 0 0 32px rgba(204,255,0,.42);
        }
        .btn-outline {
            color: var(--cyan);
            border-color: rgba(0,240,255,.5);
            background: rgba(0,240,255,.05);
        }
        .btn-outline:hover {
            color: var(--bg-deep);
            background: var(--cyan);
            box-shadow: 0 0 25px rgba(0,240,255,.35);
        }
        .btn-ghost {
            color: var(--text);
            background: rgba(255,255,255,.07);
            border-color: var(--line-soft);
        }
        .btn-ghost:hover { background: rgba(255,255,255,.13); }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--lime);
            font-size: .73rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }
        .eyebrow:before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }
        .section {
            position: relative;
            padding: 108px 0;
        }
        .section-heading {
            max-width: 700px;
            margin-bottom: 44px;
        }
        .section-heading p {
            max-width: 650px;
            margin: 18px 0 0;
            color: var(--muted);
        }
        .section-heading.split {
            display: flex;
            max-width: none;
            align-items: end;
            justify-content: space-between;
            gap: 35px;
        }
        .section-heading.split > div:first-child { max-width: 680px; }
        .text-link {
            color: var(--cyan);
            border-bottom: 1px solid rgba(0,240,255,.4);
            padding-bottom: 3px;
            font-weight: 700;
            transition: .25s;
        }
        .text-link:hover {
            color: var(--lime);
            border-color: var(--lime);
        }

        .hero {
            position: relative;
            isolation: isolate;
            min-height: 700px;
            display: flex;
            align-items: center;
            padding: 150px 0 92px;
            background:
                linear-gradient(90deg, rgba(9,8,23,.98) 8%, rgba(9,8,23,.82) 40%, rgba(9,8,23,.48)),
                url("/assets/images/backpic/back-2.jpg") center/cover;
        }
        .hero:after {
            content: "";
            position: absolute;
            z-index: -1;
            right: 0;
            bottom: 0;
            left: 0;
            height: 180px;
            background: linear-gradient(transparent, var(--bg-deep));
        }
        .hero-layout {
            display: grid;
            grid-template-columns: minmax(0, 5fr) minmax(390px, 7fr);
            gap: 46px;
            align-items: center;
        }
        .hero-copy { max-width: 650px; }
        .hero h1 { margin: 20px 0 23px; }
        .hero h1 span { color: var(--cyan); text-shadow: 0 0 24px rgba(0,240,255,.28); }
        .hero-intro {
            max-width: 620px;
            color: #d5d8e8;
            font-size: 1.06rem;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
            margin-top: 31px;
        }
        .hero-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 28px;
            margin-top: 40px;
        }
        .stat-number {
            display: block;
            color: var(--text);
            font: 700 1.55rem/1.2 "Space Grotesk", sans-serif;
        }
        .stat-label {
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: .78rem;
        }
        .hero-visual {
            position: relative;
            min-height: 475px;
            transform: translate(16px, 22px) rotate(2deg);
        }
        .hero-image {
            position: absolute;
            inset: 0 0 30px 15px;
            overflow: hidden;
            border: 1px solid rgba(0,240,255,.55);
            border-radius: 34px;
            box-shadow: var(--shadow), 0 0 42px rgba(0,240,255,.18);
        }
        .hero-image:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0,240,255,.05), rgba(15,12,32,.08) 50%, rgba(204,255,0,.22));
        }
        .hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .data-panel {
            position: absolute;
            z-index: 2;
            right: -25px;
            bottom: 0;
            width: 245px;
            padding: 19px;
            border: 1px solid rgba(204,255,0,.32);
            border-radius: 18px;
            background: rgba(23,19,45,.93);
            box-shadow: 0 18px 40px rgba(0,0,0,.38);
            backdrop-filter: blur(16px);
        }
        .data-panel small {
            display: block;
            color: var(--muted);
            font-size: .7rem;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .data-value {
            margin: 8px 0 13px;
            color: var(--lime);
            font: 700 1.55rem/1 "Space Grotesk", sans-serif;
        }
        .signal {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #dce4d5;
            font-size: .77rem;
        }
        .signal i {
            width: 8px;
            height: 8px;
            display: inline-block;
            border-radius: 50%;
            background: var(--lime);
            box-shadow: 0 0 12px var(--lime);
            animation: pulse 1.8s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .45; transform: scale(.75); }
        }

        .metrics-strip {
            position: relative;
            z-index: 3;
            margin-top: -28px;
        }
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: rgba(23,19,45,.88);
            box-shadow: var(--shadow);
        }
        .metric {
            padding: 23px 25px;
            border-right: 1px solid var(--line-soft);
        }
        .metric:last-child { border-right: 0; }
        .metric strong {
            display: block;
            color: var(--cyan);
            font: 700 1.75rem/1.1 "Space Grotesk", sans-serif;
        }
        .metric span {
            display: block;
            margin-top: 7px;
            color: var(--muted);
            font-size: .79rem;
        }

        .matrix {
            display: grid;
            grid-template-columns: 1fr 1.45fr;
            gap: 64px;
            align-items: start;
        }
        .matrix-intro { position: sticky; top: 105px; }
        .matrix-intro p {
            margin: 21px 0 27px;
            color: var(--muted);
        }
        .matrix-list { display: grid; gap: 2px; }
        .matrix-item {
            display: grid;
            grid-template-columns: 58px 1fr auto;
            gap: 20px;
            align-items: center;
            padding: 23px 0;
            border-bottom: 1px solid var(--line-soft);
            transition: .25s;
        }
        .matrix-item:hover { padding-left: 10px; border-color: rgba(0,240,255,.35); }
        .matrix-icon {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(0,240,255,.35);
            border-radius: 15px;
            color: var(--cyan);
            background: rgba(0,240,255,.08);
            font-size: 1.25rem;
        }
        .matrix-item p {
            margin: 0;
            color: var(--muted);
            font-size: .88rem;
        }
        .matrix-arrow { color: var(--lime); font-size: 1.2rem; }

        .experience {
            background: linear-gradient(180deg, rgba(32,26,58,.25), rgba(15,12,32,.1));
        }
        .experience-layout {
            display: grid;
            grid-template-columns: .95fr 1.05fr;
            gap: 70px;
            align-items: center;
        }
        .experience-image {
            position: relative;
            min-height: 465px;
            overflow: hidden;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255,77,166,.28);
            box-shadow: var(--shadow);
        }
        .experience-image img {
            width: 100%;
            height: 100%;
            min-height: 465px;
            object-fit: cover;
        }
        .experience-image:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(9,8,23,.7), transparent 60%);
        }
        .image-label {
            position: absolute;
            z-index: 1;
            right: 22px;
            bottom: 20px;
            left: 22px;
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 14px;
        }
        .image-label strong {
            max-width: 220px;
            font: 600 1.3rem/1.2 "Space Grotesk", sans-serif;
        }
        .image-label span {
            color: var(--lime);
            font-size: .75rem;
            font-weight: 700;
        }
        .feature-copy p { color: var(--muted); }
        .feature-points {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
            margin-top: 31px;
        }
        .feature-point {
            padding-top: 17px;
            border-top: 1px solid var(--line);
        }
        .feature-point strong {
            display: block;
            margin-bottom: 6px;
            font-size: .95rem;
        }
        .feature-point span {
            color: var(--muted);
            font-size: .82rem;
        }

        .comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        .compare-block {
            padding: 29px;
            border-radius: var(--radius-md);
            background: var(--panel);
            border: 1px solid var(--line-soft);
        }
        .compare-block.highlight {
            background: linear-gradient(145deg, rgba(0,240,255,.1), rgba(32,26,58,.86));
            border-color: rgba(0,240,255,.38);
        }
        .compare-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 23px;
        }
        .compare-head h3 { margin: 0; }
        .compare-tag {
            padding: 5px 9px;
            border-radius: 99px;
            color: var(--lime);
            background: rgba(204,255,0,.1);
            font-size: .68rem;
            font-weight: 800;
        }
        .compare-row {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding: 13px 0;
            border-bottom: 1px solid var(--line-soft);
            color: var(--muted);
            font-size: .85rem;
        }
        .compare-row:last-child { border-bottom: 0; }
        .compare-row strong { color: var(--text); text-align: right; }
        .compare-block.highlight .compare-row strong { color: var(--cyan); }

        .steps-layout {
            display: grid;
            grid-template-columns: .82fr 1.18fr;
            gap: 65px;
            align-items: start;
        }
        .steps-note {
            padding: 28px;
            border-left: 3px solid var(--lime);
            background: linear-gradient(90deg, rgba(204,255,0,.08), transparent);
        }
        .steps-note p { margin: 0; color: var(--muted); }
        .steps {
            display: grid;
            gap: 0;
        }
        .step {
            position: relative;
            display: grid;
            grid-template-columns: 58px 1fr;
            gap: 20px;
            padding: 0 0 32px;
        }
        .step:last-child { padding-bottom: 0; }
        .step:not(:last-child):after {
            content: "";
            position: absolute;
            top: 52px;
            bottom: 0;
            left: 24px;
            width: 1px;
            background: linear-gradient(var(--cyan), rgba(0,240,255,0));
        }
        .step-number {
            position: relative;
            z-index: 1;
            width: 50px;
            height: 50px;
            display: grid;
            place-items: center;
            border: 1px solid var(--cyan);
            border-radius: 50%;
            color: var(--cyan);
            background: var(--bg-deep);
            font: 700 1rem "Space Grotesk", sans-serif;
            box-shadow: 0 0 17px rgba(0,240,255,.16);
        }
        .step p { margin: 0; color: var(--muted); font-size: .9rem; }

        .faq-layout {
            display: grid;
            grid-template-columns: .72fr 1.28fr;
            gap: 70px;
            align-items: start;
        }
        .faq-lead p { margin-top: 19px; color: var(--muted); }
        .faq-list { border-top: 1px solid var(--line-soft); }
        details { border-bottom: 1px solid var(--line-soft); }
        summary {
            position: relative;
            list-style: none;
            padding: 21px 42px 21px 0;
            cursor: pointer;
            font-weight: 700;
        }
        summary::-webkit-details-marker { display: none; }
        summary:after {
            content: "+";
            position: absolute;
            top: 17px;
            right: 5px;
            color: var(--cyan);
            font-size: 1.5rem;
            font-weight: 400;
            transition: transform .25s;
        }
        details[open] summary:after { transform: rotate(45deg); }
        details p {
            max-width: 700px;
            margin: -7px 0 20px;
            color: var(--muted);
            font-size: .9rem;
        }

        .cta {
            position: relative;
            overflow: hidden;
            padding: 65px 0;
            background:
                linear-gradient(105deg, rgba(0,240,255,.16), rgba(255,77,166,.12)),
                url("/assets/images/backpic/back-3.jpg") center/cover;
        }
        .cta:before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(9,8,23,.56);
        }
        .cta-inner {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 35px;
        }
        .cta-copy { max-width: 670px; }
        .cta-copy h2 { margin: 14px 0 13px; }
        .cta-copy p { margin: 0; color: #d6d9e7; }
        .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

        .fab {
            position: fixed;
            z-index: 50;
            left: 16px;
            bottom: 96px;
            width: 57px;
            height: 57px;
            display: grid;
            place-items: center;
            color: var(--cyan);
            border: 1px solid var(--cyan);
            border-radius: 17px;
            background: rgba(0,0,0,.68);
            box-shadow: 0 0 15px rgba(0,240,255,.5);
            font-size: 1.4rem;
            opacity: .72;
            transition: .3s ease;
        }
        .fab:after {
            content: "MỚI";
            position: absolute;
            top: -10px;
            right: -10px;
            padding: 2px 5px;
            border-radius: 5px;
            color: var(--bg-deep);
            background: var(--lime);
            font-size: .54rem;
            font-weight: 900;
        }
        .fab:hover {
            opacity: 1;
            transform: scale(1.1);
            box-shadow: 0 0 28px rgba(0,240,255,.8);
        }
        .fab:hover span { animation: flicker .45s ease; }
        @keyframes flicker {
            0%, 100% { opacity: 1; }
            35% { opacity: .2; }
            65% { opacity: .8; }
        }

        footer {
            padding: 45px 0 35px;
            border-top: 1px solid var(--line-soft);
            background: #080716;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.3fr 1fr 1fr;
            gap: 45px;
            padding-bottom: 34px;
        }
        .footer-brand p {
            max-width: 360px;
            margin: 17px 0 0;
            color: var(--muted);
            font-size: .86rem;
        }
        .footer-title {
            margin-bottom: 14px;
            color: var(--text);
            font: 700 .9rem "Space Grotesk", sans-serif;
        }
        .footer-links {
            display: grid;
            gap: 8px;
            color: var(--muted);
            font-size: .84rem;
        }
        .footer-links a { transition: color .2s; }
        .footer-links a:hover { color: var(--cyan); }
        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            padding-top: 25px;
            border-top: 1px solid var(--line-soft);
            color: var(--muted);
            font-size: .75rem;
        }
        .user-note {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--muted);
            line-height: 1.35;
        }
        footer .avatar {
            width: 35px;
            height: 35px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: var(--bg-deep);
            background: linear-gradient(135deg, var(--cyan), var(--lime));
            font-weight: 900;
        }
        .trust-line { color: var(--muted); }
        .trust-line strong { color: var(--lime); }

        @media (max-width: 1100px) {
            .nav-wrap { gap: 15px; }
            .brand { min-width: 205px; }
            .main-nav a { padding-inline: 8px; font-size: .79rem; }
            .hero-layout { gap: 28px; }
            .hero-visual { transform: translate(0, 18px) rotate(2deg); }
            .matrix, .steps-layout, .faq-layout { gap: 42px; }
        }
        @media (max-width: 900px) {
            .main-nav {
                position: absolute;
                top: 76px;
                right: 20px;
                left: 20px;
                display: none;
                flex-direction: column;
                align-items: stretch;
                padding: 12px;
                border: 1px solid var(--line);
                border-radius: 16px;
                background: rgba(23,19,45,.97);
                box-shadow: var(--shadow);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 13px 15px; }
            .menu-toggle { display: block; }
            .nav-wrap { justify-content: space-between; }
            .nav-actions { margin-left: auto; }
            .hero-layout,
            .experience-layout,
            .matrix,
            .steps-layout,
            .faq-layout {
                grid-template-columns: 1fr;
            }
            .hero { min-height: auto; }
            .hero-copy { max-width: 760px; }
            .hero-visual { min-height: 420px; max-width: 650px; margin: 12px auto 0; width: 100%; }
            .matrix-intro { position: static; }
            .experience-image { max-height: 430px; }
            .experience-image img { min-height: 430px; }
            .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
        }
        @media (max-width: 680px) {
            .container { width: min(var(--container), calc(100% - 30px)); }
            .nav-wrap { min-height: 68px; }
            .site-header .brand { min-width: 0; }
            .brand-name { max-width: 138px; font-size: .82rem; }
            .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
            .nav-actions { gap: 9px; }
            .login-link { font-size: .74rem; }
            .nav-actions .btn { min-height: 39px; padding: 0 11px; font-size: .7rem; }
            .main-nav { top: 68px; right: 15px; left: 15px; }
            .hero { padding: 125px 0 65px; }
            .hero h1 { font-size: clamp(2.25rem, 11vw, 3.8rem); }
            .hero-intro { font-size: .95rem; }
            .hero-stats { gap: 18px; }
            .hero-visual { min-height: 330px; }
            .data-panel { right: -3px; width: 205px; padding: 15px; }
            .metrics-grid { grid-template-columns: 1fr 1fr; }
            .metric { padding: 18px 15px; }
            .metric:nth-child(2) { border-right: 0; }
            .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
            .metric strong { font-size: 1.35rem; }
            .section { padding: 76px 0; }
            .section-heading { margin-bottom: 30px; }
            .section-heading.split { display: block; }
            .section-heading.split .text-link { display: inline-block; margin-top: 20px; }
            .matrix-item { grid-template-columns: 48px 1fr; gap: 14px; }
            .matrix-arrow { display: none; }
            .feature-points { gap: 18px; }
            .comparison { grid-template-columns: 1fr; }
            .compare-block { padding: 22px; }
            .cta-inner { display: block; }
            .cta-actions { margin-top: 25px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { display: block; }
            .trust-line { margin-top: 15px; }
        }
        @media (max-width: 430px) {
            .nav-actions .login-link { display: none; }
            .nav-actions .btn { padding-inline: 10px; }
            .hero-actions .btn,
            .cta-actions .btn { width: 100%; }
            .feature-points { grid-template-columns: 1fr; }
            .hero-visual { min-height: 285px; }
            .data-panel { width: 185px; }
        }

/* roulang page: article */
:root {
            --bg: #0f0c20;
            --bg-deep: #090817;
            --panel: #17132d;
            --panel-soft: #201a3a;
            --cyan: #00f0ff;
            --lime: #ccff00;
            --pink: #ff4da6;
            --text: #f7f8ff;
            --muted: #a6acbf;
            --line: rgba(0,240,255,.18);
            --line-soft: rgba(255,255,255,.1);
            --radius-lg: 28px;
            --radius-md: 18px;
            --radius-sm: 12px;
            --shadow: 0 24px 70px rgba(0,0,0,.35);
            --glow: 0 0 28px rgba(0,240,255,.18);
            --container: 1180px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            min-width: 320px;
            margin: 0;
            background:
                radial-gradient(circle at 85% 18%, rgba(0,240,255,.08), transparent 26rem),
                var(--bg-deep);
            color: var(--text);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .28;
            background-image:
                linear-gradient(rgba(0,240,255,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,240,255,.035) 1px, transparent 1px);
            background-size: 46px 46px;
            mask-image: linear-gradient(to bottom, black, transparent 76%);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            display: block;
            max-width: 100%;
        }

        button, input {
            font: inherit;
        }

        button {
            cursor: pointer;
        }

        h1, h2, h3, p {
            margin: 0;
        }

        h1, h2, h3 {
            font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
            line-height: 1.15;
            letter-spacing: -.035em;
        }

        h1 {
            font-size: clamp(2.15rem, 5vw, 4.7rem);
        }

        h2 {
            font-size: clamp(1.8rem, 3.2vw, 3rem);
        }

        h3 {
            font-size: 1.14rem;
        }

        .container {
            width: min(var(--container), calc(100% - 40px));
            margin-inline: auto;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--lime);
            font-size: .74rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }

        .section {
            position: relative;
            padding: 92px 0;
        }

        .section-heading {
            max-width: 700px;
            margin-bottom: 36px;
        }

        .section-heading h2 {
            margin-top: 14px;
        }

        .section-heading p {
            margin-top: 16px;
            color: var(--muted);
        }

        .site-header {
            position: fixed;
            z-index: 40;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(9,8,23,.84);
            border-bottom: 1px solid var(--line-soft);
            backdrop-filter: blur(18px);
        }

        .nav-wrap {
            min-height: 76px;
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: 248px;
        }

        .brand-mark {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            display: grid;
            place-items: center;
            border-radius: 13px;
            color: var(--bg-deep);
            font-weight: 900;
            background: linear-gradient(135deg, var(--lime), var(--cyan));
            box-shadow: 0 0 22px rgba(0,240,255,.3);
        }

        .brand-name {
            max-width: 200px;
            font: 700 1rem/1.14 "Space Grotesk", sans-serif;
        }

        .main-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            flex: 1;
        }

        .main-nav a {
            color: var(--muted);
            padding: 10px 12px;
            border-radius: 10px;
            font-size: .86rem;
            font-weight: 600;
            transition: color .25s, background .25s, box-shadow .25s;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--text);
            background: rgba(0,240,255,.09);
        }

        .main-nav a.active {
            box-shadow: inset 0 -2px var(--cyan);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 14px;
            white-space: nowrap;
        }

        .nav-login {
            color: var(--text);
            font-size: .86rem;
            font-weight: 700;
            transition: color .25s;
        }

        .nav-login:hover {
            color: var(--cyan);
        }

        .menu-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: transparent;
            color: var(--text);
            font-size: 1.2rem;
        }

        .btn {
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 12px;
            font-size: .88rem;
            font-weight: 800;
            transition: transform .25s, box-shadow .25s, background .25s, color .25s;
        }

        .btn:hover {
            transform: translateY(-3px);
        }

        .btn:focus-visible,
        .main-nav a:focus-visible,
        .nav-login:focus-visible,
        .fab:focus-visible,
        summary:focus-visible {
            outline: 3px solid rgba(204,255,0,.55);
            outline-offset: 4px;
        }

        .btn-primary {
            color: #08100b;
            background: var(--lime);
            box-shadow: 0 0 23px rgba(204,255,0,.2);
        }

        .btn-primary:hover {
            background: #e4ff70;
            box-shadow: 0 0 32px rgba(204,255,0,.42);
        }

        .btn-outline {
            color: var(--cyan);
            border-color: rgba(0,240,255,.5);
            background: rgba(0,240,255,.05);
        }

        .btn-outline:hover {
            color: var(--bg-deep);
            background: var(--cyan);
            box-shadow: 0 0 25px rgba(0,240,255,.35);
        }

        .btn-ghost {
            color: var(--text);
            background: rgba(255,255,255,.07);
            border-color: var(--line-soft);
        }

        .btn-ghost:hover {
            background: rgba(255,255,255,.13);
        }

        .article-banner {
            position: relative;
            min-height: 370px;
            display: flex;
            align-items: flex-end;
            padding: 136px 0 58px;
            isolation: isolate;
            background:
                linear-gradient(90deg, rgba(9,8,23,.98) 12%, rgba(9,8,23,.78) 58%, rgba(9,8,23,.72)),
                url("/assets/images/backpic/back-2.jpg") center/cover;
        }

        .article-banner::after {
            content: "";
            position: absolute;
            z-index: -1;
            inset: auto 0 0;
            height: 130px;
            background: linear-gradient(transparent, var(--bg-deep));
        }

        .banner-copy {
            max-width: 860px;
        }

        .banner-copy h1 {
            margin-top: 18px;
            color: var(--text);
            font-size: clamp(2rem, 4.6vw, 4.05rem);
        }

        .banner-copy h1::first-letter {
            color: var(--cyan);
        }

        .banner-description {
            max-width: 760px;
            margin-top: 20px;
            color: #d8d9e9;
            font-size: 1.04rem;
        }

        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            align-items: center;
            margin-bottom: 20px;
            color: var(--muted);
            font-size: .8rem;
        }

        .breadcrumb a {
            color: var(--cyan);
        }

        .article-area {
            padding: 68px 0 90px;
        }

        .article-layout {
            display: grid;
            grid-template-columns: minmax(0, 720px) minmax(260px, 330px);
            justify-content: space-between;
            align-items: start;
            gap: 64px;
        }

        .article-card {
            min-width: 0;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 20px;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--line-soft);
            color: var(--muted);
            font-size: .84rem;
        }

        .meta-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 11px;
            border: 1px solid var(--line);
            border-radius: 99px;
            color: var(--cyan);
            background: rgba(0,240,255,.06);
            font-weight: 700;
        }

        .article-content {
            color: #dfe1ef;
            font-size: 1.03rem;
            line-height: 1.76;
        }

        .article-content > * + * {
            margin-top: 22px;
        }

        .article-content h2 {
            margin-top: 42px;
            color: var(--text);
            font-size: clamp(1.55rem, 3vw, 2.25rem);
        }

        .article-content h3 {
            margin-top: 32px;
            color: var(--cyan);
        }

        .article-content strong {
            color: var(--text);
        }

        .article-content a {
            color: var(--cyan);
            border-bottom: 1px solid rgba(0,240,255,.35);
        }

        .article-content ul,
        .article-content ol {
            padding-left: 23px;
        }

        .article-content li + li {
            margin-top: 10px;
        }

        .article-content blockquote {
            margin: 32px 0;
            padding: 22px 24px;
            border-left: 3px solid var(--lime);
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            color: #f0f6cf;
            background: rgba(204,255,0,.07);
        }

        .article-content img {
            width: 100%;
            margin: 30px 0;
            border-radius: var(--radius-md);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }

        .empty-article {
            padding: 42px 30px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, rgba(0,240,255,.08), rgba(255,77,166,.08));
        }

        .empty-article h2 {
            color: var(--text);
            font-size: 1.7rem;
        }

        .empty-article a {
            display: inline-flex;
            margin-top: 22px;
            color: var(--lime);
            font-weight: 800;
        }

        .sidebar {
            position: sticky;
            top: 102px;
        }

        .side-panel {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: rgba(23,19,45,.86);
            box-shadow: var(--shadow);
        }

        .side-image {
            width: 100%;
            height: 178px;
            object-fit: cover;
        }

        .side-body {
            padding: 25px;
        }

        .side-body h2 {
            margin-top: 12px;
            font-size: 1.45rem;
        }

        .side-body p {
            margin-top: 13px;
            color: var(--muted);
            font-size: .9rem;
        }

        .side-list {
            display: grid;
            gap: 0;
            margin-top: 22px;
            border-top: 1px solid var(--line-soft);
        }

        .side-list a {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            padding: 14px 0;
            border-bottom: 1px solid var(--line-soft);
            color: #dfe1ef;
            font-size: .86rem;
            font-weight: 600;
            transition: color .25s, padding-left .25s;
        }

        .side-list a::after {
            content: "↗";
            color: var(--cyan);
        }

        .side-list a:hover {
            padding-left: 5px;
            color: var(--cyan);
        }

        .trust-strip {
            padding: 22px 0;
            border-top: 1px solid var(--line-soft);
            border-bottom: 1px solid var(--line-soft);
            background: rgba(255,255,255,.025);
        }

        .trust-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .trust-item {
            display: flex;
            align-items: center;
            gap: 13px;
        }

        .trust-icon {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            flex: 0 0 42px;
            border: 1px solid rgba(204,255,0,.35);
            border-radius: 13px;
            color: var(--lime);
            background: rgba(204,255,0,.08);
            font-size: 1.1rem;
        }

        .trust-item strong {
            display: block;
            font-size: .92rem;
        }

        .trust-item span {
            display: block;
            color: var(--muted);
            font-size: .76rem;
        }

        .faq-section {
            padding: 88px 0;
            background: linear-gradient(180deg, transparent, rgba(23,19,45,.55));
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 70px;
            align-items: start;
        }

        .faq-intro p {
            max-width: 420px;
            margin-top: 18px;
            color: var(--muted);
        }

        .faq-list {
            border-top: 1px solid var(--line-soft);
        }

        details {
            border-bottom: 1px solid var(--line-soft);
        }

        summary {
            position: relative;
            padding: 20px 40px 20px 0;
            color: var(--text);
            font-weight: 700;
            list-style: none;
            cursor: pointer;
        }

        summary::-webkit-details-marker {
            display: none;
        }

        summary::after {
            content: "+";
            position: absolute;
            top: 16px;
            right: 0;
            color: var(--cyan);
            font-size: 1.4rem;
            font-weight: 700;
        }

        .cta-section {
            padding: 82px 0 105px;
        }

        .cta-box {
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 35px;
            align-items: center;
            padding: 42px 48px;
            border: 1px solid rgba(0,240,255,.3);
            border-radius: var(--radius-lg);
            background:
                linear-gradient(105deg, rgba(0,240,255,.13), rgba(255,77,166,.1)),
                var(--panel);
            box-shadow: var(--glow);
        }

        .cta-box::before,
        .cta-box::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(2px);
        }

        .cta-box::before {
            width: 230px;
            height: 230px;
            right: 15%;
            top: -150px;
            background: rgba(0,240,255,.13);
        }

        .cta-box::after {
            width: 180px;
            height: 180px;
            left: -100px;
            bottom: -120px;
            background: rgba(255,77,166,.14);
        }

        .cta-copy,
        .cta-box .btn {
            position: relative;
            z-index: 1;
        }

        .cta-copy h2 {
            margin-top: 13px;
            max-width: 680px;
        }

        .cta-copy p {
            max-width: 650px;
            margin-top: 15px;
            color: var(--muted);
        }

        footer {
            padding: 30px 0 34px;
            border-top: 1px solid var(--line-soft);
            background: rgba(7,6,18,.92);
        }

        .footer-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
        }

        .footer-profile {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            color: var(--text);
            font-size: .82rem;
            line-height: 1.4;
        }

        .avatar {
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: var(--bg-deep);
            background: linear-gradient(135deg, var(--cyan), var(--lime));
            font-weight: 900;
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 16px 22px;
            color: var(--muted);
            font-size: .78rem;
        }

        .footer-links a {
            transition: color .25s;
        }

        .footer-links a:hover {
            color: var(--cyan);
        }

        .copyright {
            margin-top: 23px;
            padding-top: 18px;
            border-top: 1px solid var(--line-soft);
            color: #767b95;
            font-size: .73rem;
        }

        .fab {
            position: fixed;
            z-index: 50;
            left: 16px;
            bottom: 96px;
            min-width: 58px;
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 0 15px;
            border: 1px solid transparent;
            border-radius: 99px;
            color: var(--cyan);
            background:
                linear-gradient(var(--bg-deep), var(--bg-deep)) padding-box,
                linear-gradient(100deg, var(--lime), var(--cyan), var(--pink)) border-box;
            box-shadow: 0 0 19px rgba(0,240,255,.45);
            opacity: .78;
            font-size: .78rem;
            font-weight: 800;
            transition: opacity .25s, transform .25s, box-shadow .25s;
            animation: fab-breathe 3.5s ease-in-out infinite;
        }

        .fab::before {
            content: "◉";
            color: var(--lime);
            font-size: 1rem;
        }

        .fab::after {
            content: "MỚI";
            position: absolute;
            right: -4px;
            top: -11px;
            padding: 2px 5px;
            border-radius: 5px;
            color: #160b20;
            background: var(--pink);
            font-size: .55rem;
            font-weight: 900;
            animation: blink 1.6s ease-in-out infinite;
        }

        .fab:hover {
            opacity: 1;
            transform: scale(1.08);
            box-shadow: 0 0 31px rgba(0,240,255,.7);
        }

        .fab:hover::before {
            animation: spin .6s ease;
        }

        @keyframes fab-breathe {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        @keyframes blink {
            0%, 45%, 100% { opacity: 1; }
            55%, 75% { opacity: .35; }
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        @media (max-width: 1080px) {
            .brand {
                min-width: 205px;
            }

            .nav-wrap {
                gap: 16px;
            }

            .main-nav a {
                padding-inline: 8px;
                font-size: .8rem;
            }

            .article-layout {
                gap: 36px;
            }
        }

        @media (max-width: 860px) {
            .menu-toggle {
                display: grid;
                place-items: center;
            }

            .main-nav {
                position: absolute;
                top: calc(100% + 1px);
                left: 20px;
                right: 20px;
                display: none;
                flex-direction: column;
                align-items: stretch;
                padding: 12px;
                border: 1px solid var(--line);
                border-radius: var(--radius-md);
                background: rgba(15,12,32,.97);
                box-shadow: var(--shadow);
            }

            .main-nav.open {
                display: flex;
            }

            .main-nav a {
                padding: 12px 14px;
            }

            .main-nav a.active {
                box-shadow: inset 3px 0 var(--cyan);
            }

            .nav-actions {
                margin-left: auto;
            }

            .article-layout,
            .faq-layout {
                grid-template-columns: 1fr;
            }

            .sidebar {
                position: static;
                max-width: 720px;
            }

            .cta-box {
                grid-template-columns: 1fr;
                align-items: start;
            }
        }

        @media (max-width: 680px) {
            .container {
                width: min(var(--container), calc(100% - 28px));
            }

            .nav-wrap {
                min-height: 68px;
            }

            .brand {
                min-width: 0;
                flex: 1;
            }

            .brand-name {
                max-width: 165px;
                font-size: .86rem;
            }

            .brand-mark {
                width: 36px;
                height: 36px;
                flex-basis: 36px;
            }

            .nav-login {
                display: none;
            }

            .nav-actions .btn {
                min-height: 40px;
                padding-inline: 13px;
                font-size: .74rem;
            }

            .article-banner {
                min-height: 405px;
                padding: 118px 0 48px;
            }

            .article-area,
            .section,
            .faq-section,
            .cta-section {
                padding-top: 66px;
                padding-bottom: 66px;
            }

            .article-content {
                font-size: .98rem;
            }

            .article-meta {
                margin-bottom: 24px;
            }

            .trust-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .cta-box {
                padding: 30px 24px;
            }

            .footer-wrap {
                align-items: flex-start;
                flex-direction: column;
            }

            .footer-links {
                justify-content: flex-start;
            }

            .fab {
                left: 12px;
                bottom: 22px;
            }
        }

        @media (max-width: 430px) {
            .brand-name {
                max-width: 138px;
                font-size: .78rem;
            }

            .nav-actions {
                gap: 8px;
            }

            .nav-actions .btn {
                padding-inline: 10px;
            }

            .banner-copy h1 {
                font-size: 2rem;
            }

            .breadcrumb {
                font-size: .72rem;
            }
        }

/* roulang page: category2 */
:root {
            --bg: #0f0c20;
            --bg-deep: #090817;
            --panel: #17132d;
            --panel-soft: #201a3a;
            --cyan: #00f0ff;
            --lime: #ccff00;
            --pink: #ff4da6;
            --text: #f7f8ff;
            --muted: #a6acbf;
            --line: rgba(0,240,255,.18);
            --line-soft: rgba(255,255,255,.1);
            --radius-lg: 28px;
            --radius-md: 18px;
            --radius-sm: 12px;
            --shadow: 0 24px 70px rgba(0,0,0,.35);
            --glow: 0 0 28px rgba(0,240,255,.18);
            --container: 1180px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            min-width: 320px;
            background: var(--bg-deep);
            color: var(--text);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }
        body:before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .3;
            background-image:
                linear-gradient(rgba(0,240,255,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,240,255,.035) 1px, transparent 1px);
            background-size: 46px 46px;
            mask-image: linear-gradient(to bottom, black, transparent 78%);
        }
        body:after {
            content: "";
            position: fixed;
            width: 330px;
            height: 330px;
            right: -120px;
            top: 28%;
            border-radius: 50%;
            background: rgba(0,240,255,.06);
            filter: blur(80px);
            pointer-events: none;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        h1, h2, h3, h4 { font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif; line-height: 1.13; }
        h1 { font-size: clamp(2.45rem, 5.4vw, 5.2rem); letter-spacing: -.055em; }
        h2 { font-size: clamp(2rem, 3.5vw, 3.35rem); letter-spacing: -.045em; }
        h3 { font-size: 1.25rem; }
        p { color: var(--muted); }
        .container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--lime);
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }
        .eyebrow:before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }
        .section { padding: 104px 0; position: relative; }
        .section-heading { max-width: 700px; margin-bottom: 44px; }
        .section-heading h2 { margin-top: 15px; }
        .section-heading p { margin-top: 18px; max-width: 650px; }
        .section-heading.split {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 36px;
            max-width: none;
        }
        .section-heading.split > div:first-child { max-width: 690px; }
        .text-link {
            color: var(--cyan);
            font-weight: 700;
            border-bottom: 1px solid rgba(0,240,255,.4);
            padding-bottom: 3px;
            transition: .25s;
            white-space: nowrap;
        }
        .text-link:hover { color: var(--lime); border-color: var(--lime); }

        .site-header {
            position: fixed;
            z-index: 40;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(9,8,23,.84);
            border-bottom: 1px solid var(--line-soft);
            backdrop-filter: blur(18px);
        }
        .nav-wrap {
            min-height: 76px;
            display: flex;
            align-items: center;
            gap: 26px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: 245px;
        }
        .brand-mark {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            border-radius: 13px;
            display: grid;
            place-items: center;
            color: var(--bg-deep);
            font-weight: 900;
            background: linear-gradient(135deg, var(--lime), var(--cyan));
            box-shadow: 0 0 22px rgba(0,240,255,.3);
        }
        .brand-name {
            font: 700 1rem/1.15 "Space Grotesk", sans-serif;
            max-width: 205px;
        }
        .main-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            flex: 1;
        }
        .main-nav a {
            color: var(--muted);
            padding: 10px 12px;
            border-radius: 10px;
            font-size: .84rem;
            font-weight: 600;
            transition: .25s;
        }
        .main-nav a:hover,
        .main-nav a.active {
            color: var(--text);
            background: rgba(0,240,255,.09);
        }
        .main-nav a.active { box-shadow: inset 0 -2px var(--cyan); }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 13px;
            white-space: nowrap;
        }
        .login-link {
            color: var(--muted);
            font-size: .86rem;
            font-weight: 700;
            transition: .2s;
        }
        .login-link:hover { color: var(--cyan); }
        .menu-toggle {
            display: none;
            border: 1px solid var(--line);
            background: transparent;
            color: var(--text);
            border-radius: 10px;
            width: 42px;
            height: 42px;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 12px;
            font-weight: 800;
            font-size: .86rem;
            transition: transform .25s, box-shadow .25s, background .25s, color .25s;
        }
        .btn:hover { transform: translateY(-3px); }
        .btn:active { transform: translateY(0) scale(.97); }
        .btn:focus-visible, a:focus-visible, button:focus-visible {
            outline: 3px solid rgba(0,240,255,.45);
            outline-offset: 3px;
        }
        .btn-primary {
            color: #08100b;
            background: var(--lime);
            box-shadow: 0 0 23px rgba(204,255,0,.2);
        }
        .btn-primary:hover {
            background: #e4ff70;
            box-shadow: 0 0 32px rgba(204,255,0,.42);
        }
        .btn-outline {
            color: var(--cyan);
            border-color: rgba(0,240,255,.5);
            background: rgba(0,240,255,.05);
        }
        .btn-outline:hover {
            color: var(--bg-deep);
            background: var(--cyan);
            box-shadow: 0 0 25px rgba(0,240,255,.35);
        }
        .btn-ghost {
            color: var(--text);
            background: rgba(255,255,255,.07);
            border-color: var(--line-soft);
        }
        .btn-ghost:hover { background: rgba(255,255,255,.13); }

        .inner-hero {
            min-height: 570px;
            padding: 145px 0 82px;
            position: relative;
            isolation: isolate;
            display: flex;
            align-items: center;
            background:
                linear-gradient(90deg, rgba(9,8,23,.98) 8%, rgba(9,8,23,.83) 48%, rgba(9,8,23,.6)),
                url("/assets/images/backpic/back-2.jpg") center/cover;
        }
        .inner-hero:after {
            content: "";
            position: absolute;
            z-index: -1;
            inset: auto 0 0;
            height: 150px;
            background: linear-gradient(transparent, var(--bg-deep));
        }
        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 390px;
            align-items: center;
            gap: 80px;
        }
        .hero-copy { max-width: 760px; }
        .hero-copy h1 { margin: 19px 0 22px; }
        .hero-copy h1 span { color: var(--cyan); text-shadow: 0 0 24px rgba(0,240,255,.28); }
        .hero-intro {
            max-width: 680px;
            color: #d5d8e8;
            font-size: 1.05rem;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
            margin-top: 31px;
        }
        .hero-note {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
            margin-top: 27px;
            color: var(--muted);
            font-size: .82rem;
        }
        .hero-note span { display: inline-flex; align-items: center; gap: 7px; }
        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--lime);
            box-shadow: 0 0 12px var(--lime);
        }
        .download-panel {
            position: relative;
            padding: 28px;
            border: 1px solid rgba(0,240,255,.28);
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, rgba(32,26,58,.94), rgba(15,12,32,.87));
            box-shadow: var(--shadow), var(--glow);
            overflow: hidden;
        }
        .download-panel:before {
            content: "";
            position: absolute;
            width: 180px;
            height: 180px;
            right: -70px;
            top: -80px;
            border-radius: 50%;
            background: rgba(0,240,255,.15);
            filter: blur(18px);
        }
        .panel-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--line-soft);
        }
        .panel-label {
            color: var(--muted);
            font-size: .76rem;
            font-weight: 700;
        }
        .status-badge, .data-badge, .tag {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border-radius: 99px;
            padding: 6px 10px;
            font-size: .68rem;
            font-weight: 800;
        }
        .status-badge {
            color: var(--lime);
            background: rgba(204,255,0,.1);
            border: 1px solid rgba(204,255,0,.25);
        }
        .download-panel h3 { margin: 25px 0 10px; font-size: 1.5rem; }
        .download-panel p { font-size: .88rem; }
        .download-options { display: grid; gap: 10px; margin: 24px 0; }
        .download-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding: 13px 14px;
            border: 1px solid var(--line-soft);
            border-radius: 13px;
            background: rgba(255,255,255,.035);
        }
        .download-option strong { display: block; font-size: .88rem; }
        .download-option small { color: var(--muted); font-size: .72rem; }
        .option-icon {
            display: grid;
            place-items: center;
            width: 35px;
            height: 35px;
            border-radius: 10px;
            color: var(--bg-deep);
            background: var(--cyan);
            font-weight: 900;
        }
        .download-option:nth-child(2) .option-icon { background: var(--lime); }
        .download-panel .btn { width: 100%; }

        .metrics-section { padding: 64px 0 46px; }
        .metrics-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            overflow: hidden;
            border: 1px solid var(--line-soft);
            border-radius: var(--radius-md);
            background: var(--line-soft);
        }
        .metric {
            position: relative;
            padding: 24px 25px;
            background: rgba(23,19,45,.92);
        }
        .metric:after {
            content: "";
            position: absolute;
            right: 20px;
            bottom: 18px;
            width: 34px;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 9px var(--cyan);
        }
        .metric strong {
            display: block;
            color: var(--text);
            font: 700 1.85rem/1 "Space Grotesk", sans-serif;
        }
        .metric span { display: block; color: var(--muted); font-size: .78rem; margin-top: 8px; }

        .matrix-section { background: linear-gradient(180deg, transparent, rgba(23,19,45,.58), transparent); }
        .matrix-layout {
            display: grid;
            grid-template-columns: .75fr 1.25fr;
            gap: 64px;
            align-items: start;
        }
        .matrix-intro p { margin-top: 20px; max-width: 470px; }
        .matrix-list { display: grid; gap: 13px; }
        .matrix-item {
            display: grid;
            grid-template-columns: 54px 1fr auto;
            align-items: center;
            gap: 17px;
            padding: 17px 18px;
            border-bottom: 1px solid var(--line-soft);
            transition: .25s;
        }
        .matrix-item:hover {
            background: rgba(0,240,255,.055);
            border-radius: 14px;
            border-color: var(--line);
        }
        .matrix-number {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: 13px;
            color: var(--cyan);
            background: rgba(0,240,255,.08);
            border: 1px solid var(--line);
            font: 700 .9rem "Space Grotesk", sans-serif;
        }
        .matrix-item strong { display: block; font-size: .98rem; }
        .matrix-item p { margin-top: 3px; font-size: .82rem; }
        .data-badge {
            color: var(--lime);
            background: rgba(204,255,0,.08);
            border: 1px solid rgba(204,255,0,.22);
            white-space: nowrap;
        }

        .showcase {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            align-items: stretch;
        }
        .feature-image {
            min-height: 385px;
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-lg);
            border: 1px solid var(--line);
            background: var(--panel);
        }
        .feature-image img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
        .feature-image:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(9,8,23,.93), transparent 65%);
        }
        .image-caption {
            position: absolute;
            z-index: 1;
            left: 27px;
            right: 27px;
            bottom: 25px;
        }
        .image-caption strong { display: block; font-size: 1.35rem; }
        .image-caption p { margin-top: 5px; font-size: .84rem; }
        .comparison {
            padding: 28px;
            border-radius: var(--radius-lg);
            background: var(--panel);
            border: 1px solid var(--line-soft);
        }
        .comparison h3 { margin-bottom: 24px; }
        .compare-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            padding: 16px 0;
            border-bottom: 1px solid var(--line-soft);
        }
        .compare-row:last-child { border-bottom: 0; }
        .compare-row span { color: var(--muted); font-size: .8rem; }
        .compare-row strong { color: var(--text); text-align: right; font-size: .85rem; }
        .compare-row strong em { color: var(--lime); font-style: normal; }

        .process-section { background: rgba(15,12,32,.7); }
        .process-layout {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 80px;
            align-items: center;
        }
        .steps { display: grid; gap: 0; }
        .step {
            display: grid;
            grid-template-columns: 52px 1fr;
            gap: 20px;
            position: relative;
            padding-bottom: 28px;
        }
        .step:last-child { padding-bottom: 0; }
        .step:not(:last-child):before {
            content: "";
            position: absolute;
            left: 25px;
            top: 51px;
            bottom: 0;
            width: 1px;
            background: linear-gradient(var(--cyan), rgba(0,240,255,.12));
            box-shadow: 0 0 10px rgba(0,240,255,.35);
        }
        .step-index {
            position: relative;
            z-index: 1;
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            border-radius: 16px;
            color: var(--bg-deep);
            background: linear-gradient(135deg, var(--cyan), var(--lime));
            box-shadow: 0 0 20px rgba(0,240,255,.2);
            font: 800 1rem "Space Grotesk", sans-serif;
        }
        .step h3 { margin: 3px 0 7px; font-size: 1.08rem; }
        .step p { max-width: 540px; font-size: .9rem; }
        .device-card {
            position: relative;
            padding: 30px;
            min-height: 300px;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(204,255,0,.23);
            background:
                radial-gradient(circle at 80% 15%, rgba(204,255,0,.15), transparent 34%),
                var(--panel);
            overflow: hidden;
        }
        .device-card:before,
        .device-card:after {
            content: "";
            position: absolute;
            border: 1px solid rgba(0,240,255,.18);
            border-radius: 50%;
        }
        .device-card:before {
            width: 230px;
            height: 230px;
            right: -110px;
            bottom: -115px;
        }
        .device-card:after {
            width: 150px;
            height: 150px;
            right: -70px;
            bottom: -75px;
        }
        .device-card h3 { margin-bottom: 14px; }
        .device-card p { font-size: .88rem; max-width: 350px; }
        .device-points {
            display: grid;
            gap: 13px;
            margin-top: 23px;
        }
        .device-points li {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #dce0ee;
            font-size: .82rem;
            list-style: none;
        }
        .check {
            width: 20px;
            height: 20px;
            display: grid;
            place-items: center;
            flex: 0 0 20px;
            border-radius: 50%;
            color: var(--bg-deep);
            background: var(--lime);
            font-size: .72rem;
            font-weight: 900;
        }

        .trust-section { padding-top: 88px; }
        .trust-layout {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 70px;
            align-items: center;
        }
        .trust-copy p { margin-top: 19px; max-width: 500px; }
        .trust-points {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
            margin-top: 27px;
        }
        .trust-point {
            padding: 17px;
            border-left: 2px solid var(--cyan);
            background: rgba(255,255,255,.035);
        }
        .trust-point strong { display: block; font-size: .92rem; }
        .trust-point span { display: block; color: var(--muted); font-size: .76rem; margin-top: 4px; }
        .payment-panel {
            padding: 30px;
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, var(--panel-soft), var(--panel));
            border: 1px solid var(--line);
        }
        .payment-panel h3 { margin-bottom: 19px; }
        .payment-list { display: grid; gap: 11px; }
        .payment-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 14px 15px;
            border-radius: 13px;
            background: rgba(9,8,23,.48);
            border: 1px solid var(--line-soft);
        }
        .payment-item span { color: var(--muted); font-size: .82rem; }
        .payment-item strong { color: var(--text); font-size: .86rem; }
        .payment-item strong:before {
            content: "✓";
            color: var(--lime);
            margin-right: 9px;
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .68fr 1.32fr;
            gap: 72px;
            align-items: start;
        }
        .faq-intro p { margin-top: 18px; font-size: .92rem; }
        .faq-list { display: grid; gap: 11px; }
        .faq-item {
            border: 1px solid var(--line-soft);
            border-radius: 15px;
            background: rgba(23,19,45,.72);
            overflow: hidden;
            transition: border-color .25s, background .25s;
        }
        .faq-item:hover, .faq-item[open] {
            border-color: rgba(0,240,255,.4);
            background: rgba(32,26,58,.88);
        }
        .faq-item summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 19px 21px;
            color: var(--text);
            font-size: .91rem;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary:after {
            content: "+";
            color: var(--cyan);
            font: 500 1.35rem/1 "Space Grotesk", sans-serif;
            transition: transform .2s;
        }
        .faq-item[open] summary:after { content: "−"; color: var(--lime); }
        .faq-answer {
            padding: 0 21px 20px;
            font-size: .84rem;
            color: var(--muted);
        }

        .cta-section { padding: 45px 0 112px; }
        .cta-box {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 35px;
            padding: 43px 48px;
            border: 1px solid rgba(0,240,255,.32);
            border-radius: var(--radius-lg);
            background:
                linear-gradient(105deg, rgba(0,240,255,.11), rgba(204,255,0,.08)),
                var(--panel);
            box-shadow: var(--glow);
        }
        .cta-box:after {
            content: "";
            position: absolute;
            width: 330px;
            height: 330px;
            right: -130px;
            top: -180px;
            border-radius: 50%;
            border: 1px solid rgba(204,255,0,.28);
            box-shadow: 0 0 0 24px rgba(204,255,0,.03), 0 0 0 48px rgba(204,255,0,.025);
        }
        .cta-content { position: relative; z-index: 1; max-width: 680px; }
        .cta-content h2 { margin-top: 13px; font-size: clamp(1.7rem, 3vw, 2.6rem); }
        .cta-content p { margin-top: 11px; }
        .cta-actions { position: relative; z-index: 1; display: flex; gap: 11px; flex-wrap: wrap; }

        .site-footer {
            position: relative;
            padding: 45px 0 30px;
            border-top: 1px solid var(--line-soft);
            background: #080713;
        }
        .footer-main {
            display: grid;
            grid-template-columns: 1.2fr .8fr .8fr;
            gap: 45px;
            padding-bottom: 35px;
        }
        .footer-brand {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        .footer-brand .brand-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
        .footer-brand strong {
            display: block;
            font: 700 1rem/1.25 "Space Grotesk", sans-serif;
            max-width: 255px;
        }
        .footer-brand p { margin-top: 12px; max-width: 350px; font-size: .8rem; }
        .footer-column h3 {
            color: var(--text);
            font-size: .88rem;
            margin-bottom: 15px;
        }
        .footer-links { display: grid; gap: 9px; }
        .footer-links a {
            color: var(--muted);
            font-size: .8rem;
            transition: .2s;
        }
        .footer-links a:hover { color: var(--cyan); padding-left: 4px; }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            padding-top: 23px;
            border-top: 1px solid var(--line-soft);
            color: var(--muted);
            font-size: .75rem;
        }
        .footer-user {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .avatar {
            display: inline-grid;
            place-items: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            color: var(--bg-deep);
            background: linear-gradient(135deg, var(--cyan), var(--lime));
            font-weight: 900;
        }
        .legal-note { text-align: right; }
        .legal-note strong { color: var(--lime); }
        .fab {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 50;
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            border: 1px solid var(--cyan);
            border-radius: 17px;
            color: var(--cyan);
            background: rgba(9,8,23,.84);
            box-shadow: 0 0 18px rgba(0,240,255,.5);
            backdrop-filter: blur(12px);
            opacity: .72;
            transition: .25s;
            animation: fabFloat 3.4s ease-in-out infinite;
        }
        .fab:hover {
            opacity: 1;
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(0,240,255,.8);
        }
        .fab:active { transform: scale(.95); border-color: var(--pink); color: var(--pink); }
        .fab-icon { font-size: 1.35rem; font-weight: 900; }
        .fab:after {
            content: "MỚI";
            position: absolute;
            top: -8px;
            right: -12px;
            padding: 2px 5px;
            border-radius: 5px;
            color: #17091f;
            background: var(--pink);
            font-size: .52rem;
            font-weight: 900;
            animation: blink 1.8s infinite;
        }
        @keyframes fabFloat {
            0%, 100% { translate: 0 0; }
            50% { translate: 0 -7px; }
        }
        @keyframes blink {
            0%, 42%, 100% { opacity: 1; }
            52%, 72% { opacity: .42; }
        }

        @media (max-width: 1060px) {
            .brand { min-width: 205px; }
            .main-nav a { padding-inline: 8px; font-size: .78rem; }
            .nav-wrap { gap: 14px; }
            .hero-grid { gap: 42px; }
            .process-layout, .trust-layout { gap: 45px; }
        }
        @media (max-width: 860px) {
            .nav-wrap { min-height: 70px; }
            .brand-name { font-size: .9rem; }
            .brand { min-width: auto; flex: 1; }
            .menu-toggle { display: block; order: 3; }
            .main-nav {
                display: none;
                position: absolute;
                left: 20px;
                right: 20px;
                top: 78px;
                padding: 12px;
                align-items: stretch;
                flex-direction: column;
                border: 1px solid var(--line);
                border-radius: 16px;
                background: rgba(15,12,32,.98);
                box-shadow: var(--shadow);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 13px 14px; }
            .nav-actions { margin-left: auto; }
            .hero-grid,            grid-template-columns: minmax(0, 1fr) 360px;
        }
        @media (max-width: 760px) {
            .container { width: min(var(--container), calc(100% - 28px)); }
            .section { padding: 76px 0; }
            .inner-hero { min-height: auto; padding: 125px 0 68px; }
            .hero-grid,
            .matrix-layout,
            .process-layout,
            .trust-layout,
            .faq-layout {
                grid-template-columns: 1fr;
            }
            .hero-grid { gap: 38px; }
            .download-panel { max-width: 560px; }
            .metrics-bar { grid-template-columns: repeat(2, 1fr); }
            .showcase { grid-template-columns: 1fr; }
            .feature-image { min-height: 320px; }
            .process-layout, .trust-layout, .faq-layout { gap: 38px; }
            .cta-box { align-items: flex-start; flex-direction: column; padding: 32px 27px; }
            .footer-main { grid-template-columns: 1fr 1fr; }
            .footer-main > :first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 520px) {
            h1 { font-size: clamp(2.25rem, 12vw, 3.5rem); }
            h2 { font-size: 2rem; }
            .hero-actions .btn, .cta-actions .btn { width: 100%; }
            .metrics-bar { grid-template-columns: 1fr 1fr; }
            .metric { padding: 19px 15px; }
            .metric strong { font-size: 1.42rem; }
            .metric span { font-size: .69rem; }
            .matrix-item { grid-template-columns: 44px 1fr; gap: 12px; padding-inline: 4px; }
            .matrix-item .data-badge { grid-column: 2; justify-self: start; }
            .trust-points { grid-template-columns: 1fr; }
            .download-panel, .comparison, .payment-panel, .device-card { padding: 23px 19px; }
            .footer-main { grid-template-columns: 1fr; gap: 29px; }
            .footer-main > :first-child { grid-column: auto; }
            .footer-bottom { align-items: flex-start; flex-direction: column; }
            .legal-note { text-align: left; }
            .nav-actions { gap: 9px; }
            .login-link { font-size: .78rem; }
            .nav-actions .btn { min-height: 40px; padding: 0 13px; font-size: .74rem; }
            .brand-name { max-width: 154px; font-size: .78rem; }
            .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
        }

/* roulang page: category3 */
:root {
            --bg: #0f0c20;
            --bg-deep: #090817;
            --panel: #17132d;
            --panel-soft: #201a3a;
            --cyan: #00f0ff;
            --lime: #ccff00;
            --pink: #ff4da6;
            --text: #f7f8ff;
            --muted: #a6acbf;
            --line: rgba(0,240,255,.18);
            --line-soft: rgba(255,255,255,.1);
            --radius-lg: 28px;
            --radius-md: 18px;
            --radius-sm: 12px;
            --shadow: 0 24px 70px rgba(0,0,0,.35);
            --glow: 0 0 28px rgba(0,240,255,.18);
            --container: 1180px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            min-width: 320px;
            background: var(--bg-deep);
            color: var(--text);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }
        body:before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -2;
            pointer-events: none;
            opacity: .28;
            background-image:
                linear-gradient(rgba(0,240,255,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,240,255,.035) 1px, transparent 1px);
            background-size: 46px 46px;
            mask-image: linear-gradient(to bottom, black, transparent 75%);
        }
        body:after {
            content: "";
            position: fixed;
            z-index: -3;
            width: 420px;
            height: 420px;
            left: -220px;
            top: 42%;
            border-radius: 50%;
            background: rgba(255,77,166,.08);
            filter: blur(90px);
            pointer-events: none;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        h1, h2, h3, h4 { font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif; line-height: 1.13; }
        h1 { font-size: clamp(2.4rem, 5.7vw, 5.2rem); letter-spacing: -.065em; }
        h2 { font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: -.05em; }
        h3 { font-size: 1.25rem; letter-spacing: -.025em; }
        p { color: var(--muted); }
        .container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
        .section { padding: 112px 0; position: relative; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--lime);
            font-size: .74rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }
        .eyebrow:before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }
        .section-heading { max-width: 700px; margin-bottom: 44px; }
        .section-heading h2 { margin-top: 15px; }
        .section-heading p { margin-top: 18px; max-width: 650px; }
        .section-heading.split {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 35px;
            max-width: none;
        }
        .section-heading.split > div:first-child { max-width: 680px; }
        .text-link {
            color: var(--cyan);
            font-weight: 700;
            border-bottom: 1px solid rgba(0,240,255,.4);
            padding-bottom: 3px;
            transition: .25s;
        }
        .text-link:hover { color: var(--lime); border-color: var(--lime); }

        .site-header {
            position: fixed;
            z-index: 40;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(9,8,23,.84);
            border-bottom: 1px solid var(--line-soft);
            backdrop-filter: blur(18px);
        }
        .nav-wrap {
            min-height: 76px;
            display: flex;
            align-items: center;
            gap: 25px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: 245px;
        }
        .brand-mark {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            border-radius: 13px;
            display: grid;
            place-items: center;
            color: var(--bg-deep);
            font-weight: 900;
            background: linear-gradient(135deg, var(--lime), var(--cyan));
            box-shadow: 0 0 22px rgba(0,240,255,.3);
        }
        .brand-name {
            font: 700 1rem/1.15 "Space Grotesk", sans-serif;
            max-width: 205px;
        }
        .main-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            flex: 1;
        }
        .main-nav a {
            color: var(--muted);
            padding: 10px 12px;
            border-radius: 10px;
            font-size: .84rem;
            font-weight: 600;
            transition: .25s;
        }
        .main-nav a:hover,
        .main-nav a.active {
            color: var(--text);
            background: rgba(0,240,255,.09);
        }
        .main-nav a.active { box-shadow: inset 0 -2px var(--cyan); }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 13px;
            white-space: nowrap;
        }
        .nav-login {
            color: var(--muted);
            font-size: .84rem;
            font-weight: 700;
            transition: color .25s;
        }
        .nav-login:hover { color: var(--cyan); }
        .menu-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border: 1px solid var(--line);
            background: transparent;
            color: var(--text);
            border-radius: 10px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 12px;
            font-weight: 800;
            font-size: .86rem;
            transition: transform .25s, box-shadow .25s, background .25s, color .25s;
        }
        .btn:hover { transform: translateY(-3px); }
        .btn:active { transform: translateY(0) scale(.98); }
        .btn:focus-visible,
        a:focus-visible,
        button:focus-visible,
        input:focus-visible {
            outline: 3px solid rgba(0,240,255,.45);
            outline-offset: 3px;
        }
        .btn-primary {
            color: #08100b;
            background: var(--lime);
            box-shadow: 0 0 23px rgba(204,255,0,.2);
        }
        .btn-primary:hover {
            background: #e4ff70;
            box-shadow: 0 0 32px rgba(204,255,0,.42);
        }
        .btn-outline {
            color: var(--cyan);
            border-color: rgba(0,240,255,.5);
            background: rgba(0,240,255,.05);
        }
        .btn-outline:hover {
            color: var(--bg-deep);
            background: var(--cyan);
            box-shadow: 0 0 25px rgba(0,240,255,.35);
        }
        .btn-ghost {
            color: var(--text);
            background: rgba(255,255,255,.07);
            border-color: var(--line-soft);
        }
        .btn-ghost:hover { background: rgba(255,255,255,.13); }

        .hero {
            min-height: 650px;
            padding: 154px 0 95px;
            display: flex;
            align-items: center;
            position: relative;
            isolation: isolate;
            background:
                linear-gradient(90deg, rgba(9,8,23,.98) 10%, rgba(9,8,23,.8) 49%, rgba(9,8,23,.62)),
                url("/assets/images/backpic/back-2.jpg") center/cover;
        }
        .hero:after {
            content: "";
            position: absolute;
            z-index: -1;
            inset: auto 0 0;
            height: 180px;
            background: linear-gradient(transparent, var(--bg-deep));
        }
        .hero-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
            gap: 70px;
            align-items: center;
        }
        .hero-copy { max-width: 730px; }
        .hero h1 { margin: 19px 0 24px; }
        .hero h1 span {
            color: var(--cyan);
            text-shadow: 0 0 24px rgba(0,240,255,.28);
        }
        .hero-intro {
            max-width: 650px;
            color: #d5d8e8;
            font-size: 1.06rem;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
            margin-top: 32px;
        }
        .hero-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 28px;
            margin-top: 42px;
        }
        .stat-item strong {
            display: block;
            color: var(--text);
            font: 700 1.55rem/1 "Space Grotesk", sans-serif;
        }
        .stat-item span { display: block; color: var(--muted); font-size: .78rem; margin-top: 7px; }
        .live-badge, .tag {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border-radius: 99px;
            padding: 6px 10px;
            font-size: .68rem;
            font-weight: 800;
        }
        .live-badge {
            color: var(--lime);
            background: rgba(204,255,0,.11);
            border: 1px solid rgba(204,255,0,.25);
        }
        .live-badge:before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--lime);
            box-shadow: 0 0 10px var(--lime);
            animation: pulse 1.5s infinite;
        }
        .hero-panel {
            position: relative;
            padding: 24px;
            border: 1px solid rgba(0,240,255,.35);
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, rgba(32,26,58,.95), rgba(15,12,32,.92));
            box-shadow: var(--shadow), var(--glow);
            overflow: hidden;
        }
        .hero-panel:before {
            content: "";
            position: absolute;
            width: 190px;
            height: 190px;
            right: -70px;
            top: -80px;
            border-radius: 50%;
            background: rgba(0,240,255,.14);
            filter: blur(8px);
        }
        .panel-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding-bottom: 19px;
            border-bottom: 1px solid var(--line-soft);
        }
        .panel-top strong { font: 700 1.1rem "Space Grotesk", sans-serif; }
        .panel-label { color: var(--muted); font-size: .75rem; }
        .score-block { padding: 28px 0 25px; }
        .score-block small { color: var(--muted); }
        .score-block strong {
            display: block;
            margin: 6px 0;
            color: var(--lime);
            font: 700 3rem/1 "Space Grotesk", sans-serif;
            text-shadow: 0 0 20px rgba(204,255,0,.25);
        }
        .score-block p { font-size: .82rem; }
        .meter {
            height: 9px;
            margin: 20px 0 12px;
            border-radius: 99px;
            background: rgba(255,255,255,.1);
            overflow: hidden;
        }
        .meter i {
            display: block;
            width: 76%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--cyan), var(--lime));
            box-shadow: 0 0 15px rgba(0,240,255,.55);
        }
        .panel-list { display: grid; gap: 10px; }
        .panel-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            padding: 12px 13px;
            border-radius: 12px;
            background: rgba(255,255,255,.05);
            font-size: .82rem;
        }
        .panel-row span { color: var(--muted); }
        .panel-row b { color: var(--text); }
        .ticker {
            padding: 13px 0;
            border-top: 1px solid var(--line-soft);
            border-bottom: 1px solid var(--line-soft);
            background: rgba(0,0,0,.18);
            overflow: hidden;
        }
        .ticker-track {
            display: flex;
            width: max-content;
            gap: 45px;
            animation: ticker 28s linear infinite;
        }
        .ticker-item { color: var(--muted); font-size: .79rem; white-space: nowrap; }
        .ticker-item b { color: var(--cyan); }
        .ticker-item i {
            display: inline-block;
            width: 6px;
            height: 6px;
            margin-right: 8px;
            border-radius: 50%;
            background: var(--lime);
            box-shadow: 0 0 9px var(--lime);
        }

        .dashboard {
            display: grid;
            grid-template-columns: 1.18fr .82fr;
            gap: 24px;
            align-items: stretch;
        }
        .dashboard-main,
        .dashboard-side,
        .feature-panel,
        .comparison-wrap,
        .contact-box {
            border: 1px solid var(--line-soft);
            border-radius: var(--radius-lg);
            background: rgba(23,19,45,.78);
        }
        .dashboard-main { padding: 30px; }
        .dashboard-main h3 { margin-bottom: 10px; }
        .dashboard-main > p { max-width: 660px; }
        .metric-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-top: 28px;
        }
        .metric {
            padding: 17px;
            border-radius: 15px;
            background: rgba(0,240,255,.055);
            border: 1px solid rgba(0,240,255,.13);
        }
        .metric b {
            display: block;
            color: var(--cyan);
            font: 700 1.65rem/1.1 "Space Grotesk", sans-serif;
        }
        .metric span { display: block; margin-top: 7px; color: var(--muted); font-size: .74rem; }
        .dashboard-side {
            padding: 30px;
            background: linear-gradient(150deg, rgba(255,77,166,.12), rgba(23,19,45,.9));
        }
        .dashboard-side h3 { max-width: 280px; }
        .side-points { display: grid; gap: 17px; margin-top: 25px; }
        .side-point { display: flex; gap: 12px; align-items: flex-start; }
        .point-icon {
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            display: grid;
            place-items: center;
            color: var(--bg-deep);
            border-radius: 9px;
            background: var(--lime);
            font-size: .75rem;
            font-weight: 900;
        }
        .side-point strong { display: block; font-size: .88rem; }
        .side-point p { margin-top: 2px; font-size: .77rem; line-height: 1.45; }

        .matrix {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
        .feature-panel {
            min-height: 250px;
            padding: 26px;
            position: relative;
            overflow: hidden;
            transition: transform .3s, border-color .3s, box-shadow .3s;
        }
        .feature-panel:hover {
            transform: translateY(-6px);
            border-color: rgba(0,240,255,.48);
            box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 0 22px rgba(0,240,255,.1);
        }
        .feature-panel:nth-child(2) { background: linear-gradient(145deg, rgba(204,255,0,.09), rgba(23,19,45,.84)); }
        .feature-panel:nth-child(3) { background: linear-gradient(145deg, rgba(255,77,166,.1), rgba(23,19,45,.84)); }
        .feature-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            color: var(--bg-deep);
            border-radius: 11px;
            background: var(--cyan);
            font: 800 .85rem "Space Grotesk", sans-serif;
        }
        .feature-panel h3 { margin-top: 40px; }
        .feature-panel p { margin-top: 12px; font-size: .9rem; }
        .feature-panel .text-link { position: absolute; bottom: 25px; left: 26px; font-size: .82rem; }

        .image-story {
            display: grid;
            grid-template-columns: .82fr 1.18fr;
            gap: 55px;
            align-items: center;
        }
        .story-image {
            min-height: 410px;
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid rgba(0,240,255,.3);
            box-shadow: var(--shadow);
        }
        .story-image img {
            width: 100%;
            height: 100%;
            min-height: 410px;
            object-fit: cover;
            transition: transform .6s;
        }
        .story-image:hover img { transform: scale(1.04); }
        .story-image:after {
            content: "Bắn Cá Vàng";
            position: absolute;
            left: 22px;
            bottom: 20px;
            padding: 7px 12px;
            border: 1px solid rgba(204,255,0,.38);
            border-radius: 99px;
            color: var(--lime);
            background: rgba(9,8,23,.7);
            font-size: .73rem;
            font-weight: 800;
        }
        .story-copy h2 { margin-top: 16px; max-width: 620px; }
        .story-copy > p { margin-top: 20px; max-width: 630px; }
        .check-list {
            display: grid;
            gap: 14px;
            margin-top: 27px;
            list-style: none;
        }
        .check-list li {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            color: #d9dcec;
            font-size: .92rem;
        }
        .check-list li:before {
            content: "✓";
            display: grid;
            place-items: center;
            width: 22px;
            height: 22px;
            flex: 0 0 22px;
            margin-top: 2px;
            border-radius: 50%;
            color: var(--bg-deep);
            background: var(--lime);
            font-size: .75rem;
            font-weight: 900;
        }

        .comparison-wrap { overflow: hidden; }
        .comparison-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 20px;
            padding: 27px 30px;
            border-bottom: 1px solid var(--line-soft);
        }
        .comparison-head h3 { margin-top: 7px; }
        .comparison-table { width: 100%; border-collapse: collapse; }
        .comparison-table th,
        .comparison-table td {
            padding: 19px 24px;
            text-align: left;
            border-bottom: 1px solid rgba(255,255,255,.07);
        }
        .comparison-table th {
            color: var(--muted);
            font-size: .74rem;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
        }
        .comparison-table td { color: #e4e6f4; font-size: .88rem; }
        .comparison-table td:first-child { color: var(--text); font-weight: 700; }
        .comparison-table tr:last-child td { border-bottom: 0; }
        .good { color: var(--lime) !important; }
        .neutral { color: var(--cyan) !important; }

        .steps {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 0;
            border-top: 1px solid var(--line-soft);
            border-bottom: 1px solid var(--line-soft);
        }
        .step {
            position: relative;
            padding: 26px 28px 29px;
            border-right: 1px solid var(--line-soft);
        }
        .step:last-child { border-right: 0; }
        .step:before {
            content: "";
            display: block;
            width: 42px;
            height: 4px;
            margin-bottom: 23px;
            border-radius: 99px;
            background: linear-gradient(90deg, var(--cyan), var(--lime));
        }
        .step b {
            display: block;
            color: var(--cyan);
            font: 700 2rem/1 "Space Grotesk", sans-serif;
        }
        .step h3 { margin: 17px 0 9px; }
        .step p { font-size: .86rem; }

        .faq-layout {
            display: grid;
            grid-template-columns: .7fr 1.3fr;
            gap: 70px;
            align-items: start;
        }
        .faq-intro p { margin-top: 17px; }
        .faq-list { display: grid; gap: 10px; }
        .faq-item {
            border: 1px solid var(--line-soft);
            border-radius: 14px;
            background: rgba(23,19,45,.8);
            overflow: hidden;
        }
        .faq-question {
            width: 100%;
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: center;
            padding: 20px 22px;
            color: var(--text);
            border: 0;
            background: transparent;
            text-align: left;
            font-weight: 700;
        }
        .faq-question span:last-child {
            color: var(--cyan);
            font-size: 1.35rem;
            line-height: 1;
            transition: transform .25s;
        }
        .faq-answer {
            display: none;
            padding: 0 22px 20px;
            color: var(--muted);
            font-size: .88rem;
        }
        .faq-item.open { border-color: rgba(0,240,255,.4); }
        .faq-item.open .faq-answer { display: block; }
        .faq-item.open .faq-question span:last-child { transform: rotate(45deg); }

        .cta-section { padding: 95px 0 115px; }
        .cta-box {
            position: relative;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 35px;
            align-items: center;
            padding: 46px 52px;
            border: 1px solid rgba(0,240,255,.4);
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 86% 15%, rgba(204,.12), transparent 42%);
            pointer-events: none;
        }
        .cta-box:after {
            content: "";
            position: absolute;
            width: 260px;
            height: 260px;
            right: -90px;
            bottom: -150px;
            border-radius: 50%;
            background: rgba(255,77,166,.12);
            filter: blur(10px);
            pointer-events: none;
        }
        .cta-box h2 { max-width: 680px; margin-top: 14px; }
        .cta-box p { max-width: 660px; margin-top: 14px; }
        .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
        .contact-box {
            padding: 28px;
            background: linear-gradient(135deg, rgba(0,240,255,.1), rgba(23,19,45,.88));
        }
        .contact-box h3 { margin-bottom: 8px; }
        .contact-box p { font-size: .86rem; }
        .contact-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        .contact-list span {
            padding: 8px 12px;
            border: 1px solid rgba(0,240,255,.2);
            border-radius: 99px;
            color: #dfe6fa;
            background: rgba(255,255,255,.05);
            font-size: .78rem;
            font-weight: 700;
        }
        .site-footer {
            padding: 36px 0;
            border-top: 1px solid var(--line-soft);
            background: rgba(9,8,23,.9);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr 1fr 1fr;
            gap: 35px;
        }
        .footer-brand p { max-width: 285px; margin-top: 14px; font-size: .82rem; }
        .footer-title {
            margin-bottom: 14px;
            color: var(--text);
            font-size: .84rem;
            font-weight: 800;
        }
        .footer-links { display: grid; gap: 9px; list-style: none; }
        .footer-links a {
            width: fit-content;
            color: var(--muted);
            font-size: .8rem;
            transition: color .25s, transform .25s;
        }
        .footer-links a:hover { color: var(--cyan); transform: translateX(3px); }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 34px;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,.07);
            color: var(--muted);
            font-size: .74rem;
        }
        .trust-line { display: flex; flex-wrap: wrap; gap: 9px; }
        .trust-line span {
            padding: 5px 9px;
            border: 1px solid rgba(204,255,0,.2);
            border-radius: 7px;
            color: var(--lime);
        }
        .fab {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 50;
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            border: 1px solid transparent;
            border-radius: 17px;
            color: var(--cyan);
            background: linear-gradient(var(--bg-deep), var(--bg-deep)) padding-box,
                        linear-gradient(135deg, var(--lime), var(--cyan), var(--pink)) border-box;
            box-shadow: 0 0 15px rgba(0,240,255,.42);
            opacity: .7;
            transition: opacity .25s, transform .3s, box-shadow .3s;
            animation: float 3.2s ease-in-out infinite;
        }
        .fab:hover {
            opacity: 1;
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(0,240,255,.68);
        }
        .fab:active { transform: scale(.95); }
        .fab-icon { font-size: 1.55rem; line-height: 1; }
        .fab em {
            position: absolute;
            top: -5px;
            right: -5px;
            min-width: 18px;
            height: 18px;
            display: grid;
            place-items: center;
            border: 2px solid var(--bg-deep);
            border-radius: 50%;
            color: #fff;
            background: var(--pink);
            font-size: .57rem;
            font-style: normal;
            font-weight: 800;
            animation: pulse 1.6s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .58; transform: scale(.82); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-7px); }
        }
        @keyframes ticker {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        @media (max-width: 1024px) {
            .brand { min-width: 215px; }
            .main-nav a { padding-inline: 8px; font-size: .78rem; }
            .hero-layout { gap: 35px; }
            .image-story, .faq-layout { gap: 35px; }
        }
        @media (max-width: 820px) {
            .nav-wrap { gap: 12px; }
            .brand { min-width: 0; flex: 1; }
            .brand-name { max-width: 180px; font-size: .9rem; }
            .menu-toggle { display: block; order: 3; }
            .main-nav {
                position: absolute;
                top: calc(100% + 1px);
                left: 20px;
                right: 20px;
                display: none;
                padding: 12px;
                flex-direction: column;
                align-items: stretch;
                border: 1px solid var(--line);
                border-radius: 16px;
                background: rgba(15,12,32,.98);
                box-shadow: var(--shadow);
            }
            .main-nav.is-open { display: flex; }
            .main-nav a { padding: 12px 14px; }
            .nav-actions { margin-left: auto; }
            .hero-layout, .dashboard, .image-story, .faq-layout { grid-template-columns: 1fr; }
            .hero { min-height: auto; }
            .hero-panel { max-width: 600px; }
            .story-image { min-height: 340px; }
            .story-image img { min-height: 340px; }
            .matrix { grid-template-columns: 1fr 1fr; }
            .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
        }
        @media (max-width: 600px) {
            .container { width: min(var(--container), calc(100% - 28px)); }
            .section { padding: 76px 0; }
            .hero { padding: 126px 0 72px; }
            h1 { font-size: clamp(2.25rem, 12vw, 3.7rem); }
            h2 { font-size: 2rem; }
            .hero-actions .btn, .cta-actions .btn { width: 100%; }
            .hero-stats { gap: 20px; }
            .metric-grid, .matrix { grid-template-columns: 1fr; }
            .dashboard-main, .dashboard-side { padding: 23px; }
            .section-heading.split { display: block; }
            .section-heading.split .text-link { display: inline-block; margin-top: 18px; }
            .steps { display: block; }
            .step { border-right: 0; border-bottom: 1px solid var(--line-soft); }
            .step:last-child { border-bottom: 0; }
            .comparison-wrap { overflow-x: auto; }
            .comparison-table { min-width: 620px; }
            .comparison-head { display: block; padding: 23px; }
            .comparison-head .tag { margin-top: 15px; }
            .cta-box { display: block; padding: 30px 23px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { display: block; }
            .trust-line { margin-top: 14px; }
            .nav-actions { gap: 9px; }
            .nav-login { font-size: .76rem; }
            .nav-actions .btn { min-height: 40px; padding: 0 12px; font-size: .73rem; }
            .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
            .brand-name { font-size: .76rem; }
            .fab { left: 14px; bottom: 78px; }
        }
        @media (max-width: 420px) {
            .nav-wrap { min-height: 68px; }
            .brand-name { max-width: 125px; }
            .nav-login { display: none; }
            .hero-panel { padding: 20px; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-brand { grid-column: auto; }
        }