/* roulang page: index */
:root {
            --ink: #132238;
            --muted: #637287;
            --paper: #f6f8fc;
            --white: #ffffff;
            --navy: #102a43;
            --blue: #246bfe;
            --cyan: #28c8d8;
            --gold: #f2b84b;
            --rose: #ef6f79;
            --line: #dfe7f1;
            --soft-blue: #edf4ff;
            --soft-gold: #fff7e7;
            --radius-xl: 28px;
            --radius-lg: 18px;
            --radius-md: 12px;
            --shadow: 0 18px 50px rgba(16, 42, 67, .10);
            --shadow-sm: 0 8px 25px rgba(16, 42, 67, .07);
        }

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

        html { scroll-behavior: smooth; }

        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: Inter, "Segoe UI", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }

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

        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
        }

        button, input { font: inherit; }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible {
            outline: 3px solid rgba(36, 107, 254, .3);
            outline-offset: 3px;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255, 255, 255, .94);
            border-bottom: 1px solid rgba(223, 231, 241, .9);
            backdrop-filter: blur(16px);
        }

        .nav-wrap {
            max-width: 1240px;
            min-height: 78px;
            margin: 0 auto;
            padding: 0 22px;
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            color: var(--navy);
            font-weight: 800;
            letter-spacing: -.02em;
            white-space: nowrap;
        }

        .brand-mark {
            width: 39px;
            height: 39px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: linear-gradient(135deg, var(--blue), var(--cyan));
            border-radius: 13px 13px 13px 4px;
            box-shadow: 0 8px 18px rgba(36, 107, 254, .25);
            font-size: 19px;
        }

        .brand-text { font-size: 16px; }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
        }

        .main-nav a {
            color: var(--muted);
            padding: 10px 13px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--blue);
            background: var(--soft-blue);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-link {
            color: var(--muted);
            font-size: 14px;
            font-weight: 700;
            padding: 9px 7px;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 46px;
            padding: 11px 19px;
            border: 0;
            border-radius: 999px;
            font-weight: 800;
            line-height: 1.2;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .button:hover { transform: translateY(-2px); }
        .button:active { transform: translateY(0); }

        .button-primary {
            color: var(--white);
            background: linear-gradient(100deg, var(--blue), #5c8cff);
            box-shadow: 0 10px 22px rgba(36, 107, 254, .22);
        }

        .button-primary:hover {
            color: var(--white);
            box-shadow: 0 14px 28px rgba(36, 107, 254, .3);
        }

        .button-light {
            color: var(--blue);
            background: var(--white);
            border: 1px solid #cfe0ff;
        }

        .button-light:hover { background: var(--soft-blue); }

        .menu-toggle {
            display: none;
            border: 1px solid var(--line);
            background: var(--white);
            color: var(--navy);
            border-radius: 10px;
            width: 42px;
            height: 42px;
            cursor: pointer;
        }

        .hero {
            position: relative;
            min-height: 575px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: var(--white);
            background:
                linear-gradient(90deg, rgba(10, 35, 64, .96) 0%, rgba(17, 60, 100, .86) 48%, rgba(17, 60, 100, .45) 100%),
                url('/assets/images/backpic/back-1.jpg') center/cover;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: auto -10% -100px;
            height: 180px;
            background: var(--paper);
            border-radius: 50% 50% 0 0;
        }

        .hero-inner {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 1240px;
            margin: 0 auto;
            padding: 78px 22px 120px;
        }

        .hero-copy { max-width: 760px; }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            color: #ffe2a4;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--gold);
        }

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

        h1 {
            max-width: 780px;
            margin-bottom: 22px;
            font-size: clamp(2.2rem, 5vw, 4.45rem);
            line-height: 1.08;
            letter-spacing: -.055em;
            font-weight: 850;
        }

        .hero-lead {
            max-width: 670px;
            margin-bottom: 29px;
            color: #dcecff;
            font-size: 18px;
            line-height: 1.7;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 13px;
            margin-bottom: 28px;
        }

        .hero .button-light {
            color: var(--white);
            background: rgba(255,255,255,.12);
            border-color: rgba(255,255,255,.35);
        }

        .hero .button-light:hover { background: rgba(255,255,255,.22); }

        .hero-signals {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            color: #bcd2e8;
            font-size: 13px;
        }

        .hero-signals strong {
            display: block;
            color: var(--white);
            font-size: 20px;
            line-height: 1.2;
        }

        .hero-panel {
            position: absolute;
            z-index: 2;
            right: 5%;
            bottom: 145px;
            width: 270px;
            padding: 21px;
            color: var(--ink);
            background: rgba(255,255,255,.94);
            border: 1px solid rgba(255,255,255,.7);
            border-radius: 22px;
            box-shadow: 0 22px 55px rgba(5, 27, 54, .28);
        }

        .panel-label {
            margin-bottom: 12px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .panel-date {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 15px;
            margin-bottom: 15px;
            border-bottom: 1px solid var(--line);
        }

        .panel-date strong { font-size: 21px; }
        .status-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #35bf7a;
            box-shadow: 0 0 0 5px rgba(53,191,122,.13);
        }

        .number-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0;
            font-size: 14px;
        }

        .number-row b {
            color: var(--blue);
            font-size: 19px;
            letter-spacing: .12em;
        }

        .section {
            padding: 88px 22px;
        }

        .container {
            max-width: 1196px;
            margin: 0 auto;
        }

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

        .section-heading.split {
            max-width: none;
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 30px;
        }

        .section-kicker {
            margin-bottom: 10px;
            color: var(--blue);
            font-size: 12px;
            font-weight: 850;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        h2 {
            margin-bottom: 13px;
            color: var(--navy);
            font-size: clamp(1.75rem, 3.4vw, 2.65rem);
            line-height: 1.16;
            letter-spacing: -.04em;
        }

        .section-heading p {
            margin-bottom: 0;
            color: var(--muted);
            line-height: 1.72;
        }

        .feature-layout {
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            gap: 62px;
            align-items: center;
        }

        .feature-image {
            position: relative;
            min-height: 400px;
            overflow: hidden;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow);
        }

        .feature-image img {
            width: 100%;
            height: 100%;
            min-height: 400px;
            object-fit: cover;
        }

        .image-caption {
            position: absolute;
            right: 18px;
            bottom: 18px;
            left: 18px;
            padding: 15px 17px;
            color: var(--white);
            background: rgba(16,42,67,.78);
            border-radius: 14px;
            backdrop-filter: blur(8px);
            font-size: 14px;
        }

        .feature-content h2 { max-width: 610px; }

        .feature-content > p {
            color: var(--muted);
            line-height: 1.75;
        }

        .check-list {
            padding: 0;
            margin: 25px 0 0;
            list-style: none;
        }

        .check-list li {
            position: relative;
            padding: 12px 0 12px 31px;
            border-bottom: 1px solid var(--line);
            color: #33465c;
        }

        .check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 12px;
            width: 20px;
            height: 20px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: var(--blue);
            border-radius: 50%;
            font-size: 12px;
            font-weight: 900;
        }

        .blue-band {
            color: var(--white);
            background: linear-gradient(110deg, #102a43, #164e75);
        }

        .blue-band h2,
        .blue-band .section-kicker { color: var(--white); }

        .blue-band .section-heading p { color: #c7dcec; }

        .signal-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            overflow: hidden;
            background: rgba(255,255,255,.16);
            border: 1px solid rgba(255,255,255,.16);
            border-radius: var(--radius-lg);
        }

        .signal-item {
            min-height: 184px;
            padding: 27px 22px;
            background: rgba(255,255,255,.07);
        }

        .signal-icon {
            width: 39px;
            height: 39px;
            display: grid;
            place-items: center;
            margin-bottom: 20px;
            color: #143855;
            background: var(--gold);
            border-radius: 12px;
            font-weight: 900;
        }

        .signal-item h3 {
            margin-bottom: 6px;
            color: var(--white);
            font-size: 18px;
        }

        .signal-item p {
            margin-bottom: 0;
            color: #b7d0e2;
            font-size: 14px;
            line-height: 1.55;
        }

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

        .topic-card {
            position: relative;
            overflow: hidden;
            min-height: 290px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
        }

        .topic-card img {
            width: 100%;
            height: 152px;
            object-fit: cover;
            transition: transform .45s ease;
        }

        .topic-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }

        .topic-card:hover img { transform: scale(1.05); }

        .topic-body { padding: 21px; }

        .topic-body .tag {
            display: inline-block;
            margin-bottom: 10px;
            color: var(--blue);
            font-size: 11px;
            font-weight: 850;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .topic-body h3 {
            margin-bottom: 8px;
            color: var(--navy);
            font-size: 19px;
            line-height: 1.3;
        }

        .topic-body p {
            margin-bottom: 14px;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.55;
        }

        .topic-link {
            color: var(--blue);
            font-size: 13px;
            font-weight: 850;
        }

        .progress-layout {
            display: grid;
            grid-template-columns: 1fr .9fr;
            gap: 54px;
            align-items: start;
        }

        .steps {
            display: grid;
            gap: 0;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .step {
            position: relative;
            display: grid;
            grid-template-columns: 54px 1fr;
            gap: 18px;
            min-height: 105px;
        }

        .step:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 48px;
            left: 25px;
            width: 2px;
            height: 57px;
            background: #d7e4fa;
        }

        .step-number {
            position: relative;
            z-index: 1;
            width: 51px;
            height: 51px;
            display: grid;
            place-items: center;
            color: var(--blue);
            background: var(--soft-blue);
            border: 1px solid #cfe0ff;
            border-radius: 50%;
            font-weight: 900;
        }

        .step h3 {
            margin: 3px 0 6px;
            font-size: 18px;
        }

        .step p {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.55;
        }

        .score-box {
            padding: 28px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-sm);
        }

        .score-box h3 {
            margin-bottom: 8px;
            font-size: 21px;
        }

        .score-box > p {
            color: var(--muted);
            font-size: 14px;
        }

        .score-line {
            display: flex;
            justify-content: space-between;
            padding: 16px 0;
            border-bottom: 1px solid var(--line);
            font-size: 14px;
        }

        .score-line:last-child { border-bottom: 0; }
        .score-line strong { color: var(--blue); }

        .quote-strip {
            padding: 38px 0;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .quote-content {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 52px;
            align-items: center;
        }

        .quote-content h2 { margin-bottom: 0; }

        blockquote {
            margin: 0;
            padding-left: 24px;
            border-left: 3px solid var(--gold);
            color: #43566b;
            font-size: 18px;
            line-height: 1.7;
        }

        blockquote cite {
            display: block;
            margin-top: 12px;
            color: var(--muted);
            font-size: 13px;
            font-style: normal;
            font-weight: 700;
        }

        .latest-section { background: #eef3f9; }

        .latest-layout {
            display: grid;
            grid-template-columns: 1.3fr .7fr;
            gap: 30px;
            align-items: start;
        }

        .news-list {
            overflow: hidden;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
        }

        .news-item {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 20px;
            padding: 19px 23px;
            border-bottom: 1px solid var(--line);
        }

        .news-item:last-child { border-bottom: 0; }

        .news-item:hover { background: #fbfdff; }

        .news-item h3 {
            margin-bottom: 4px;
            color: var(--navy);
            font-size: 17px;
            line-height: 1.4;
        }

        .news-item h3 a:hover { color: var(--blue); }

        .news-item p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.55;
        }

        .news-meta {
            min-width: 92px;
            color: #8391a1;
            font-size: 12px;
            text-align: right;
        }

        .news-meta span {
            display: block;
            margin-bottom: 5px;
            color: var(--blue);
            font-weight: 800;
        }

        .side-note {
            padding: 25px;
            color: var(--white);
            background: linear-gradient(145deg, #246bfe, #19a7bb);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
        }

        .side-note h3 {
            margin-bottom: 10px;
            color: var(--white);
            font-size: 21px;
        }

        .side-note p {
            color: #e6f7ff;
            font-size: 14px;
            line-height: 1.65;
        }

        .side-note .button {
            color: var(--navy);
            background: var(--white);
        }

        .faq-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px 28px;
        }

        .faq-item {
            padding: 22px 0;
            border-bottom: 1px solid var(--line);
        }

        .faq-item h3 {
            margin-bottom: 9px;
            color: var(--navy);
            font-size: 17px;
            line-height: 1.4;
        }

        .faq-item p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.68;
        }

        .final-cta {
            position: relative;
            overflow: hidden;
            color: var(--white);
            background:
                linear-gradient(110deg, rgba(16,42,67,.96), rgba(36,107,254,.88)),
                url('/assets/images/backpic/back-2.jpg') center/cover;
            border-radius: var(--radius-xl);
            text-align: center;
        }

        .final-cta::before {
            content: "";
            position: absolute;
            width: 260px;
            height: 260px;
            right: -80px;
            top: -130px;
            border: 35px solid rgba(242,184,75,.2);
            border-radius: 50%;
        }

        .final-cta-inner {
            position: relative;
            z-index: 1;
            max-width: 720px;
            margin: 0 auto;
            padding: 65px 25px;
        }

        .final-cta h2 { color: var(--white); }
        .final-cta p { color: #d9e9fa; }
        .final-cta .button-light { color: var(--navy); }

        .site-footer {
            padding: 58px 22px 27px;
            color: #b6c6d8;
            background: #0b2035;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1fr;
            gap: 35px;
            max-width: 1196px;
            margin: 0 auto 45px;
        }

        .footer-brand {
            display: inline-flex;
            margin-bottom: 15px;
            color: var(--white);
            font-weight: 800;
        }

        .footer-column h3 {
            margin-bottom: 15px;
            color: var(--white);
            font-size: 14px;
        }

        .footer-column p,
        .footer-column a {
            display: block;
            margin-bottom: 8px;
            color: #afc0d2;
            font-size: 13px;
            line-height: 1.6;
        }

        .footer-column a:hover { color: var(--gold); }

        .footer-note {
            max-width: 340px;
            font-size: 13px;
            line-height: 1.7;
        }

        .footer-bottom {
            max-width: 1196px;
            margin: 0 auto;
            padding-top: 22px;
            border-top: 1px solid rgba(255,255,255,.14);
            display: flex;
            justify-content: space-between;
            gap: 20px;
            color: #8da3b8;
            font-size: 12px;
        }

        .fab {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 50;
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: rgba(10, 31, 53, .9);
            border: 2px solid var(--cyan);
            border-radius: 50%;
            box-shadow: 0 0 18px rgba(40,200,216,.45);
            font-size: 22px;
            opacity: .78;
            animation: floatFab 3.6s ease-in-out infinite;
        }

        .fab:hover {
            color: var(--white);
            opacity: 1;
            transform: scale(1.1);
            box-shadow: 0 0 29px rgba(40,200,216,.72);
        }

        .fab::after {
            content: "MỚI";
            position: absolute;
            top: -8px;
            right: -13px;
            padding: 2px 6px;
            color: var(--navy);
            background: var(--gold);
            border-radius: 8px;
            font-size: 9px;
            font-weight: 900;
        }

        @keyframes floatFab {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-7px); }
        }

        @media (max-width: 1024px) {
            .hero-panel { right: 3%; width: 235px; }
            .feature-layout { gap: 35px; }
            .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
        }

        @media (max-width: 768px) {
            .nav-wrap { min-height: 68px; gap: 12px; }
            .brand-text { font-size: 14px; }
            .main-nav {
                display: none;
                position: absolute;
                top: 68px;
                right: 16px;
                left: 16px;
                padding: 10px;
                flex-direction: column;
                align-items: stretch;
                background: var(--white);
                border: 1px solid var(--line);
                border-radius: 14px;
                box-shadow: var(--shadow);
            }
            .main-nav.is-open { display: flex; }
            .main-nav a { padding: 12px 14px; }
            .menu-toggle { display: block; }
            .nav-actions { margin-left: auto; }
            .nav-link { display: none; }
            .nav-actions .button { min-height: 39px; padding: 9px 13px; font-size: 12px; }
            .hero { min-height: 650px; }
            .hero-inner { padding-top: 72px; }
            .hero-panel {
                position: relative;
                right: auto;
                bottom: auto;
                width: min(100%, 330px);
                margin-top: 34px;
            }
            .hero::after { bottom: -125px; }
            .section { padding: 66px 18px; }
            .feature-layout,
            .progress-layout,
            .latest-layout,
            .quote-content { grid-template-columns: 1fr; }
            .feature-image { min-height: 300px; }
            .feature-image img { min-height: 300px; }
            .signal-grid { grid-template-columns: 1fr 1fr; }
            .topic-grid { grid-template-columns: 1fr; }
            .section-heading.split { display: block; }
            .section-heading.split .button { margin-top: 20px; }
            .faq-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 520px) {
            h1 { font-size: 2.35rem; }
            .hero-lead { font-size: 16px; }
            .hero-actions { align-items: stretch; flex-direction: column; }
            .hero-actions .button { width: 100%; }
            .hero-signals { gap: 13px; }
            .signal-grid { grid-template-columns: 1fr; }
            .signal-item { min-height: auto; }
            .news-item { grid-template-columns: 1fr; gap: 7px; }
            .news-meta { text-align: left; }
            .footer-grid { grid-template-columns: 1fr; gap: 25px; }
            .footer-bottom { flex-direction: column; gap: 7px; }
            .brand-text { max-width: 165px; white-space: normal; line-height: 1.2; }
        }

/* roulang page: article */
:root {
            --ink: #132238;
            --muted: #637287;
            --paper: #f6f8fc;
            --white: #ffffff;
            --navy: #102a43;
            --blue: #246bfe;
            --cyan: #28c8d8;
            --gold: #f2b84b;
            --rose: #ef6f79;
            --line: #dfe7f1;
            --soft-blue: #edf4ff;
            --soft-gold: #fff7e7;
            --radius-xl: 28px;
            --radius-lg: 18px;
            --radius-md: 12px;
            --shadow: 0 18px 50px rgba(16, 42, 67, .10);
            --shadow-sm: 0 8px 25px rgba(16, 42, 67, .07);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: Inter, "Segoe UI", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }
        img { display: block; max-width: 100%; }
        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
        }
        button, input { font: inherit; }
        button:focus-visible, a:focus-visible, input:focus-visible {
            outline: 3px solid rgba(36, 107, 254, .3);
            outline-offset: 3px;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255,255,255,.94);
            border-bottom: 1px solid rgba(223,231,241,.9);
            backdrop-filter: blur(16px);
        }
        .nav-wrap {
            max-width: 1240px;
            min-height: 78px;
            margin: 0 auto;
            padding: 0 22px;
            display: flex;
            align-items: center;
            gap: 28px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            color: var(--navy);
            font-weight: 800;
            letter-spacing: -.02em;
            white-space: nowrap;
        }
        .brand-mark {
            width: 39px;
            height: 39px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: linear-gradient(135deg, var(--blue), var(--cyan));
            border-radius: 13px 13px 13px 4px;
            box-shadow: 0 8px 18px rgba(36,107,254,.25);
            font-size: 19px;
        }
        .brand-text { font-size: 16px; }
        .main-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
        }
        .main-nav a {
            color: var(--muted);
            padding: 10px 13px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
        }
        .main-nav a:hover, .main-nav a.active {
            color: var(--blue);
            background: var(--soft-blue);
        }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .nav-link {
            color: var(--muted);
            font-size: 14px;
            font-weight: 700;
            padding: 9px 7px;
        }
        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 46px;
            padding: 11px 19px;
            border: 0;
            border-radius: 999px;
            font-weight: 800;
            line-height: 1.2;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .button:hover { transform: translateY(-2px); }
        .button:active { transform: translateY(0); }
        .button-primary {
            color: var(--white);
            background: linear-gradient(100deg, var(--blue), #5c8cff);
            box-shadow: 0 10px 22px rgba(36,107,254,.22);
        }
        .button-primary:hover {
            color: var(--white);
            box-shadow: 0 14px 28px rgba(36,107,254,.3);
        }
        .button-light {
            color: var(--blue);
            background: var(--white);
            border: 1px solid #cfe0ff;
        }
        .button-light:hover { background: var(--soft-blue); }
        .menu-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border: 1px solid var(--line);
            border-radius: 10px;
            color: var(--navy);
            background: var(--white);
            cursor: pointer;
        }

        .article-banner {
            position: relative;
            min-height: 330px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: var(--white);
            background:
                linear-gradient(100deg, rgba(10,35,64,.96), rgba(17,60,100,.76)),
                url('/assets/images/backpic/back-2.jpg') center/cover;
        }
        .article-banner::before {
            content: "";
            position: absolute;
            width: 420px;
            height: 420px;
            right: 8%;
            top: -230px;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 50%;
            box-shadow: 0 0 0 28px rgba(255,255,255,.035), 0 0 0 56px rgba(255,255,255,.025);
        }
        .banner-inner {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 1240px;
            margin: 0 auto;
            padding: 58px 22px 68px;
        }
        .breadcrumbs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 18px;
            color: #bcd6f3;
            font-size: 13px;
            font-weight: 700;
        }
        .breadcrumbs a:hover { color: var(--white); }
        .banner-title {
            max-width: 880px;
            margin: 0 0 17px;
            color: var(--white);
            font-size: clamp(2rem, 4vw, 3.5rem);
            line-height: 1.13;
            letter-spacing: -.045em;
        }
        .banner-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px 18px;
            color: #d9e9fa;
            font-size: 14px;
        }
        .meta-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 11px;
            color: #ffe2a4;
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.17);
            border-radius: 999px;
        }

        .search-panel {
            position: relative;
            z-index: 3;
            max-width: 1050px;
            margin: -34px auto 0;
            padding: 22px;
            background: var(--white);
            border: 1px solid rgba(223,231,241,.9);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow);
        }
        .search-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .search-field {
            position: relative;
            flex: 1;
        }
        .search-field svg {
            position: absolute;
            top: 15px;
            left: 15px;
            color: var(--blue);
        }
        .search-field input {
            width: 100%;
            height: 50px;
            margin: 0;
            padding: 0 16px 0 45px;
            border: 1px solid var(--line);
            border-radius: 13px;
            color: var(--ink);
            background: #fbfcfe;
            box-shadow: none;
        }
        .search-field input:focus {
            border-color: var(--blue);
            box-shadow: 0 0 0 4px rgba(36,107,254,.1);
        }
        .quick-links {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-top: 15px;
            color: var(--muted);
            font-size: 13px;
        }
        .quick-links strong { color: var(--navy); }
        .quick-links a {
            padding: 6px 11px;
            color: var(--blue);
            background: var(--soft-blue);
            border-radius: 999px;
            font-weight: 700;
        }
        .quick-links a:hover { background: #dceaff; }

        .content-shell {
            max-width: 1160px;
            margin: 0 auto;
            padding: 64px 22px 86px;
        }
        .article-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 295px;
            gap: 48px;
            align-items: start;
        }
        .article-main {
            min-width: 0;
            padding: 0 0 10px;
        }
        .article-intro {
            margin: 0 0 28px;
            padding: 22px 25px;
            color: #34506d;
            background: linear-gradient(135deg, #eef6ff, #f7fbff);
            border-left: 4px solid var(--cyan);
            border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
            font-size: 18px;
            line-height: 1.7;
        }
        .article-content {
            color: #33475d;
            font-size: 17px;
            line-height: 1.78;
        }
        .article-content h2 {
            margin: 38px 0 13px;
            color: var(--navy);
            font-size: 28px;
            line-height: 1.25;
            letter-spacing: -.025em;
        }
        .article-content h3 {
            margin: 28px 0 10px;
            color: var(--navy);
            font-size: 21px;
            line-height: 1.35;
        }
        .article-content p { margin: 0 0 18px; }
        .article-content ul, .article-content ol {
            margin: 0 0 22px 22px;
        }
        .article-content li { margin-bottom: 8px; padding-left: 4px; }
        .article-content a {
            color: var(--blue);
            font-weight: 700;
        }
        .article-content a:hover { color: #134ec9; }
        .article-content blockquote {
            margin: 28px 0;
            padding: 20px 24px;
            color: var(--navy);
            background: var(--soft-gold);
            border: 1px solid #f4dfb3;
            border-radius: var(--radius-lg);
            font-weight: 700;
        }
        .article-content img {
            width: 100%;
            margin: 24px 0;
            border-radius: var(--radius-lg);
        }
        .article-content table {
            width: 100%;
            margin: 24px 0;
            border-collapse: collapse;
            background: var(--white);
            border-radius: var(--radius-md);
            overflow: hidden;
        }
        .article-content th, .article-content td {
            padding: 12px 14px;
            border: 1px solid var(--line);
            text-align: left;
        }
        .article-content th { color: var(--navy); background: var(--soft-blue); }

        .article-aside {
            position: sticky;
            top: 103px;
        }
        .aside-card {
            margin-bottom: 18px;
            padding: 22px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
        }
        .aside-card h2 {
            margin: 0 0 15px;
            color: var(--navy);
            font-size: 18px;
            line-height: 1.3;
        }
        .aside-image {
            width: calc(100% + 44px);
            height: 148px;
            margin: -22px -22px 18px;
            object-fit: cover;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }
        .aside-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .aside-list li {
            display: flex;
            gap: 10px;
            padding: 11px 0;
            border-bottom: 1px solid var(--line);
            color: var(--muted);
            font-size: 14px;
        }
        .aside-list li:last-child { border-bottom: 0; padding-bottom: 0; }
        .aside-number {
            flex: 0 0 25px;
            height: 25px;
            display: grid;
            place-items: center;
            color: var(--blue);
            background: var(--soft-blue);
            border-radius: 8px;
            font-size: 12px;
            font-weight: 800;
        }
        .notice {
            color: #765a22;
            background: #fff9eb;
            border-color: #f4dfb3;
        }
        .notice h2 { color: #755216; }
        .notice p { margin: 0; font-size: 14px; line-height: 1.65; }

        .reading-strip {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin: 38px 0 0;
            padding-top: 28px;
            border-top: 1px solid var(--line);
        }
        .reading-item {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }
        .reading-icon {
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            display: grid;
            place-items: center;
            color: var(--blue);
            background: var(--soft-blue);
            border-radius: 11px;
            font-weight: 900;
        }
        .reading-item strong {
            display: block;
            margin-bottom: 3px;
            color: var(--navy);
            font-size: 14px;
        }
        .reading-item span { color: var(--muted); font-size: 13px; }

        .section {
            padding: 78px 22px;
        }
        .section-soft { background: var(--white); }
        .section-heading {
            max-width: 1160px;
            margin: 0 auto 28px;
        }
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            color: var(--blue);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .section-kicker::before {
            content: "";
            width: 25px;
            height: 2px;
            background: var(--gold);
        }
        .section-heading h2 {
            margin: 0;
            color: var(--navy);
            font-size: clamp(1.7rem, 3vw, 2.35rem);
            line-height: 1.2;
            letter-spacing: -.035em;
        }
        .faq-grid {
            max-width: 1160px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px 24px;
        }
        .faq-item {
            padding: 21px 22px;
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
        }
        .faq-item h3 {
            margin: 0 0 9px;
            color: var(--navy);
            font-size: 17px;
            line-height: 1.4;
        }
        .faq-item p { margin: 0; color: var(--muted); font-size: 15px; }

        .cta-section {
            padding: 76px 22px;
            color: var(--white);
            background:
                linear-gradient(110deg, rgba(16,42,67,.98), rgba(28,105,157,.92)),
                url('/assets/images/backpic/back-3.jpg') center/cover;
        }
        .cta-inner {
            max-width: 960px;
            margin: 0 auto;
            text-align: center;
        }
        .cta-inner h2 {
            margin: 0 0 14px;
            color: var(--white);
            font-size: clamp(1.8rem, 3.2vw, 2.65rem);
            line-height: 1.2;
        }
        .cta-inner p {
            max-width: 710px;
            margin: 0 auto 25px;
            color: #dcecff;
            font-size: 17px;
        }
        .cta-inner .button-light {
            color: var(--navy);
            background: var(--white);
            border-color: var(--white);
        }
        .cta-inner .button-light:hover { background: #eaf3ff; }

        .site-footer {
            padding: 62px 22px 22px;
            color: #d7e1ed;
            background: #0d2136;
        }
        .footer-grid {
            max-width: 1160px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.35fr 1fr 1fr 1fr;
            gap: 38px;
        }
        .footer-column { min-width: 0; }
        .footer-brand {
            display: inline-block;
            margin-bottom: 14px;
            color: var(--white);
            font-weight: 800;
            font-size: 18px;
            line-height: 1.35;
        }
        .footer-note {
            max-width: 310px;
            margin: 0;
            color: #9fb4c9;
            font-size: 13px;
            line-height: 1.7;
        }
        .footer-column h3 {
            margin: 0 0 14px;
            color: var(--white);
            font-size: 15px;
        }
        .footer-column a {
            display: block;
            width: fit-content;
            margin: 8px 0;
            color: #a9bed2;
            font-size: 14px;
        }
        .footer-column a:hover { color: var(--cyan); transform: translateX(2px); }
        .footer-column p {
            margin: 7px 0;
            color: #a9bed2;
            font-size: 13px;
            line-height: 1.55;
        }
        .footer-bottom {
            max-width: 1160px;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin: 43px auto 0;
            padding-top: 19px;
            border-top: 1px solid rgba(215,225,237,.16);
            color: #829ab0;
            font-size: 12px;
        }

        .floating-note {
            position: fixed;
            left: 16px;
            bottom: 24px;
            z-index: 50;
            width: 54px;
            height: 54px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: linear-gradient(135deg, var(--blue), var(--cyan));
            border: 3px solid rgba(255,255,255,.9);
            border-radius: 50%;
            box-shadow: 0 8px 24px rgba(36,107,254,.34);
            font-size: 22px;
            animation: floatNote 3.2s ease-in-out infinite;
        }
        .floating-note::after {
            content: "";
            position: absolute;
            top: 1px;
            right: 1px;
            width: 10px;
            height: 10px;
            background: var(--rose);
            border: 2px solid var(--white);
            border-radius: 50%;
        }
        .floating-note:hover { color: var(--white); transform: scale(1.1); }
        @keyframes floatNote {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        @media (max-width: 1024px) {
            .nav-wrap { gap: 16px; }
            .brand-text { max-width: 180px; white-space: normal; line-height: 1.15; }
            .main-nav a { padding-left: 9px; padding-right: 9px; }
            .article-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .nav-wrap { min-height: 70px; padding: 0 16px; }
            .menu-toggle { display: block; margin-left: auto; }
            .main-nav {
                position: absolute;
                top: 70px;
                left: 0;
                right: 0;
                display: none;
                flex-direction: column;
                align-items: stretch;
                gap: 3px;
                margin: 0;
                padding: 12px 16px 16px;
                background: rgba(255,255,255,.98);
                border-bottom: 1px solid var(--line);
                box-shadow: var(--shadow-sm);
            }
            .main-nav.is-open { display: flex; }
            .main-nav a { padding: 12px 14px; }
            .article-banner { min-height: 300px; }
            .banner-inner { padding: 45px 20px 55px; }
            .search-panel { margin: -25px 16px 0; padding: 17px; }
            .search-row { align-items: stretch; flex-direction: column; }
            .search-row .button { width: 100%; }
            .content-shell { padding: 48px 18px 65px; }
            .article-layout { display: block; }
            .article-aside { position: static; margin-top: 38px; }
            .reading-strip { grid-template-columns: 1fr; gap: 18px; }
            .section { padding: 60px 18px; }
            .faq-grid { grid-template-columns: 1fr; }
            .footer-grid { gap: 28px 20px; }
        }
        @media (max-width: 520px) {
            .brand-text { max-width: 145px; font-size: 14px; }
            .brand-mark { width: 35px; height: 35px; border-radius: 11px 11px 11px 3px; }
            .article-banner { min-height: 275px; }
            .banner-title { font-size: 2rem; }
            .banner-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
            .article-intro { padding: 18px; font-size: 16px; }
            .article-content { font-size: 16px; }
            .article-content h2 { font-size: 24px; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-bottom { align-items: flex-start; flex-direction: column; gap: 6px; }
            .floating-note { left: 14px; bottom: 18px; }
        }

/* roulang page: category1 */
:root {
            --ink: #132238;
            --muted: #637287;
            --paper: #f6f8fc;
            --white: #ffffff;
            --navy: #102a43;
            --blue: #246bfe;
            --blue-dark: #174dbd;
            --cyan: #28c8d8;
            --gold: #f2b84b;
            --rose: #ef6f79;
            --line: #dfe7f1;
            --soft-blue: #edf4ff;
            --soft-cyan: #eafcff;
            --soft-gold: #fff7e7;
            --radius-xl: 28px;
            --radius-lg: 18px;
            --radius-md: 12px;
            --shadow: 0 18px 50px rgba(16, 42, 67, .10);
            --shadow-sm: 0 8px 25px rgba(16, 42, 67, .07);
        }

        html {
            scroll-behavior: smooth;
        }

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

        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: Inter, "Segoe UI", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }

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

        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
        }

        button,
        input {
            font: inherit;
        }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        summary:focus-visible {
            outline: 3px solid rgba(36, 107, 254, .3);
            outline-offset: 3px;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255, 255, 255, .95);
            border-bottom: 1px solid rgba(223, 231, 241, .92);
            backdrop-filter: blur(16px);
        }

        .nav-wrap {
            max-width: 1240px;
            min-height: 78px;
            margin: 0 auto;
            padding: 0 22px;
            display: flex;
            align-items: center;
            gap: 25px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            color: var(--navy);
            font-weight: 800;
            letter-spacing: -.02em;
            white-space: nowrap;
        }

        .brand-mark {
            width: 39px;
            height: 39px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: linear-gradient(135deg, var(--blue), var(--cyan));
            border-radius: 13px 13px 13px 4px;
            box-shadow: 0 8px 18px rgba(36, 107, 254, .25);
            font-size: 19px;
        }

        .brand-text {
            max-width: 245px;
            font-size: 15px;
            line-height: 1.25;
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-left: auto;
        }

        .main-nav a {
            color: var(--muted);
            padding: 10px 12px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--blue);
            background: var(--soft-blue);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-link {
            color: var(--muted);
            font-size: 14px;
            font-weight: 700;
            padding: 9px 7px;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 46px;
            padding: 11px 19px;
            border: 0;
            border-radius: 999px;
            font-weight: 800;
            line-height: 1.2;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .button:hover {
            transform: translateY(-2px);
        }

        .button:active {
            transform: translateY(0);
        }

        .button-primary {
            color: var(--white);
            background: linear-gradient(100deg, var(--blue), #5c8cff);
            box-shadow: 0 10px 22px rgba(36, 107, 254, .22);
        }

        .button-primary:hover {
            color: var(--white);
            box-shadow: 0 14px 28px rgba(36, 107, 254, .3);
        }

        .button-light {
            color: var(--blue);
            background: var(--white);
            border: 1px solid #cfe0ff;
        }

        .button-light:hover {
            color: var(--blue-dark);
            background: var(--soft-blue);
        }

        .button-outline {
            color: var(--navy);
            background: transparent;
            border: 1px solid var(--line);
        }

        .button-outline:hover {
            color: var(--blue);
            border-color: #b9d0fb;
            background: var(--white);
        }

        .menu-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border: 1px solid var(--line);
            border-radius: 10px;
            color: var(--navy);
            background: var(--white);
            cursor: pointer;
        }

        .page-banner {
            position: relative;
            overflow: hidden;
            color: var(--white);
            background:
                linear-gradient(105deg, rgba(10, 39, 72, .96), rgba(24, 96, 139, .82)),
                url('/assets/images/backpic/back-2.jpg') center/cover;
        }

        .page-banner::after {
            content: "";
            position: absolute;
            right: -90px;
            bottom: -130px;
            width: 360px;
            height: 260px;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 50%;
            transform: rotate(-18deg);
        }

        .banner-inner {
            position: relative;
            z-index: 1;
            max-width: 1240px;
            margin: 0 auto;
            padding: 72px 22px 76px;
        }

        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-bottom: 22px;
            color: #b9d9f1;
            font-size: 13px;
            font-weight: 700;
        }

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

        .banner-content {
            max-width: 790px;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 17px;
            color: #ffe2a4;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--gold);
        }

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

        h1 {
            max-width: 820px;
            margin-bottom: 19px;
            color: var(--white);
            font-size: clamp(2.25rem, 5vw, 4.25rem);
            line-height: 1.08;
            letter-spacing: -.055em;
            font-weight: 850;
        }

        .banner-lead {
            max-width: 710px;
            margin-bottom: 28px;
            color: #dcecff;
            font-size: 18px;
            line-height: 1.7;
        }

        .banner-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            min-height: 31px;
            padding: 5px 11px;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 999px;
            color: #eaf6ff;
            background: rgba(255, 255, 255, .1);
            font-size: 12px;
            font-weight: 750;
        }

        .section {
            padding: 86px 22px;
        }

        .container {
            max-width: 1240px;
            margin: 0 auto;
        }

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

        .section-heading.split-heading {
            max-width: none;
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 30px;
        }

        .section-kicker {
            display: block;
            margin-bottom: 9px;
            color: var(--blue);
            font-size: 12px;
            font-weight: 850;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        h2 {
            margin-bottom: 13px;
            color: var(--navy);
            font-size: clamp(1.8rem, 3.2vw, 2.8rem);
            line-height: 1.15;
            letter-spacing: -.04em;
            font-weight: 850;
        }

        .section-heading p,
        .intro-copy p,
        .feature-card p,
        .scenario-copy p,
        .method-copy p,
        .faq-item p {
            color: var(--muted);
        }

        .intro-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
            gap: 62px;
            align-items: center;
        }

        .intro-copy {
            padding-right: 14px;
        }

        .intro-copy h2 {
            max-width: 590px;
        }

        .intro-copy p {
            margin-bottom: 19px;
        }

        .check-list {
            display: grid;
            gap: 12px;
            margin: 26px 0 31px;
            padding: 0;
            list-style: none;
        }

        .check-list li {
            position: relative;
            padding-left: 31px;
            color: var(--ink);
            font-weight: 650;
        }

        .check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 1px;
            width: 21px;
            height: 21px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: var(--white);
            background: linear-gradient(135deg, var(--blue), var(--cyan));
            font-size: 12px;
            font-weight: 900;
        }

        .image-frame {
            position: relative;
            padding: 10px;
            border-radius: var(--radius-xl);
            background: linear-gradient(135deg, rgba(36, 107, 254, .25), rgba(40, 200, 216, .18));
        }

        .image-frame img {
            width: 100%;
            min-height: 400px;
            object-fit: cover;
            border-radius: 21px;
        }

        .image-note {
            position: absolute;
            right: -19px;
            bottom: 28px;
            max-width: 210px;
            padding: 16px 18px;
            border: 1px solid rgba(255, 255, 255, .9);
            border-radius: 16px;
            background: rgba(255, 255, 255, .94);
            box-shadow: var(--shadow);
        }

        .image-note strong {
            display: block;
            color: var(--navy);
            font-size: 22px;
            line-height: 1.1;
        }

        .image-note span {
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: 12px;
        }

        .feature-section {
            background: var(--white);
        }

        .feature-layout {
            display: grid;
            grid-template-columns: .82fr 1.5fr;
            gap: 58px;
            align-items: start;
        }

        .feature-intro {
            position: sticky;
            top: 112px;
        }

        .feature-intro h2 {
            margin-bottom: 18px;
        }

        .feature-intro p {
            color: var(--muted);
        }

        .feature-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

        .feature-card {
            min-height: 215px;
            padding: 25px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, #fff, #f8fbff);
            box-shadow: var(--shadow-sm);
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            border-color: #bcd4ff;
            box-shadow: var(--shadow);
        }

        .feature-icon {
            width: 43px;
            height: 43px;
            display: grid;
            place-items: center;
            margin-bottom: 18px;
            border-radius: 14px 14px 14px 4px;
            color: var(--blue);
            background: var(--soft-blue);
            font-size: 20px;
        }

        .feature-card:nth-child(2) .feature-icon {
            color: #0daab9;
            background: var(--soft-cyan);
        }

        .feature-card:nth-child(3) .feature-icon {
            color: #d48b15;
            background: var(--soft-gold);
        }

        .feature-card:nth-child(4) .feature-icon {
            color: var(--rose);
            background: #fff0f2;
        }

        .feature-card h3 {
            margin-bottom: 8px;
            color: var(--navy);
            font-size: 18px;
            line-height: 1.25;
        }

        .feature-card p {
            margin-bottom: 0;
            font-size: 14px;
            line-height: 1.65;
        }

        .stats-section {
            background:
                linear-gradient(120deg, rgba(10, 43, 78, .96), rgba(21, 89, 124, .92)),
                url('/assets/images/backpic/back-3.jpg') center/cover;
        }

        .stats-section h2,
        .stats-section .section-heading p {
            color: var(--white);
        }

        .stats-section .section-kicker {
            color: #9beaf1;
        }

        .stats-layout {
            display: grid;
            grid-template-columns: .95fr 1.05fr;
            gap: 55px;
            align-items: center;
        }

        .stats-copy {
            max-width: 580px;
        }

        .stats-copy p {
            color: #cfe4f4;
        }

        .metric-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 13px;
            margin-top: 30px;
        }

        .metric {
            padding: 19px 15px;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 16px;
            background: rgba(255, 255, 255, .09);
        }

        .metric strong {
            display: block;
            color: var(--white);
            font-size: 25px;
            line-height: 1.1;
        }

        .metric span {
            display: block;
            margin-top: 7px;
            color: #b9d9ea;
            font-size: 12px;
        }

        .reading-panel {
            padding: 28px;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: var(--radius-xl);
            background: rgba(255, 255, 255, .1);
            box-shadow: 0 20px 55px rgba(3, 21, 43, .2);
            backdrop-filter: blur(13px);
        }

        .panel-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding-bottom: 19px;
            border-bottom: 1px solid rgba(255, 255, 255, .16);
        }

        .panel-top h3 {
            margin-bottom: 0;
            color: var(--white);
            font-size: 19px;
        }

        .live-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 9px;
            border-radius: 999px;
            color: #d8fff0;
            background: rgba(30, 196, 130, .18);
            font-size: 11px;
            font-weight: 800;
        }

        .live-badge::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #43e39e;
            box-shadow: 0 0 0 5px rgba(67, 227, 158, .12);
        }

        .reading-list {
            display: grid;
            gap: 0;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .reading-list li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 17px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .12);
        }

        .reading-list li:last-child {
            border-bottom: 0;
        }

        .reading-label {
            color: #cfe4f4;
            font-size: 13px;
        }

        .reading-value {
            color: var(--white);
            font-size: 16px;
            font-weight: 800;
        }

        .reading-value em {
            margin-left: 6px;
            color: #8eebd0;
            font-size: 11px;
            font-style: normal;
        }

        .steps-section {
            background: var(--paper);
        }

        .step-layout {
            display: grid;
            grid-template-columns: 1.3fr .7fr;
            gap: 70px;
            align-items: end;
        }

        .steps {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .steps::before {
            content: "";
            position: absolute;
            top: 22px;
            left: 11%;
            right: 11%;
            height: 1px;
            background: linear-gradient(90deg, var(--blue), var(--cyan));
            opacity: .35;
        }

        .step {
            position: relative;
        }

        .step-number {
            width: 45px;
            height: 45px;
            position: relative;
            z-index: 1;
            display: grid;
            place-items: center;
            margin-bottom: 21px;
            border: 5px solid var(--paper);
            border-radius: 50%;
            color: var(--white);
            background: linear-gradient(135deg, var(--blue), var(--cyan));
            box-shadow: 0 6px 15px rgba(36, 107, 254, .23);
            font-weight: 850;
        }

        .step h3 {
            margin-bottom: 8px;
            color: var(--navy);
            font-size: 17px;
        }

        .step p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .tip-box {
            padding: 26px;
            border-left: 4px solid var(--gold);
            border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
            background: var(--soft-gold);
        }

        .tip-box strong {
            display: block;
            margin-bottom: 8px;
            color: #80570d;
        }

        .tip-box p {
            margin-bottom: 0;
            color: #806c42;
            font-size: 14px;
        }

        .scenario-section {
            background: var(--white);
        }

        .scenario-grid {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 60px;
            align-items: center;
        }

        .scenario-image {
            overflow: hidden;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow);
        }

        .scenario-image img {
            width: 100%;
            min-height: 385px;
            object-fit: cover;
            transition: transform .5s ease;
        }

        .scenario-image:hover img {
            transform: scale(1.035);
        }

        .scenario-copy {
            max-width: 600px;
        }

        .scenario-copy h2 {
            margin-bottom: 17px;
        }

        .scenario-points {
            display: grid;
            gap: 17px;
            margin: 27px 0 31px;
        }

        .scenario-point {
            display: grid;
            grid-template-columns: 39px 1fr;
            gap: 14px;
            align-items: start;
        }

        .scenario-point > span {
            width: 39px;
            height: 39px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            color: var(--blue);
            background: var(--soft-blue);
            font-size: 17px;
            font-weight: 800;
        }

        .scenario-point h3 {
            margin: 0 0 3px;
            color: var(--navy);
            font-size: 16px;
        }

        .scenario-point p {
            margin-bottom: 0;
            font-size: 14px;
        }

        .faq-section {
            background: var(--paper);
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .75fr 1.25fr;
            gap: 70px;
        }

        .faq-intro p {
            color: var(--muted);
        }

        .faq-list {
            display: grid;
            gap: 12px;
        }

        .faq-item {
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: var(--white);
            box-shadow: 0 5px 16px rgba(16, 42, 67, .04);
        }

        .faq-item summary {
            position: relative;
            padding: 19px 52px 19px 21px;
            color: var(--navy);
            cursor: pointer;
            list-style: none;
            font-weight: 800;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary::after {
            content: "+";
            position: absolute;
            top: 17px;
            right: 21px;
            color: var(--blue);
            font-size: 22px;
            font-weight: 400;
        }

        .faq-item[open] summary::after {
            content: "−";
        }

        .faq-item p {
            margin: -3px 21px 19px;
            font-size: 14px;
        }

        .cta-section {
            padding: 76px 22px 88px;
            background: var(--white);
        }

        .cta-box {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 35px;
            padding: 43px 48px;
            border-radius: var(--radius-xl);
            color: var(--white);
            background: linear-gradient(110deg, #123b74, #246bfe 61%, #28bfcf);
            box-shadow: 0 20px 45px rgba(36, 107, 254, .22);
        }

        .cta-box::after {
            content: "";
            position: absolute;
            right: -65px;
            top: -90px;
            width: 290px;
            height: 290px;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 50%;
            box-shadow: 0 0 0 25px rgba(255, 255, 255, .04), 0 0 0 52px rgba(255, 255, 255, .03);
        }

        .cta-copy {
            position: relative;
            z-index: 1;
            max-width: 690px;
        }

        .cta-copy h2 {
            margin-bottom: 10px;
            color: var(--white);
        }

        .cta-copy p {
            margin-bottom: 0;
            color: #dcecff;
        }

        .cta-box .button {
            position: relative;
            z-index: 1;
            flex: 0 0 auto;
            color: var(--navy);
            background: var(--white);
            box-shadow: 0 10px 20px rgba(4, 28, 65, .16);
        }

        .cta-box .button:hover {
            color: var(--blue);
            background: #f0fbff;
        }

        .site-footer {
            padding: 62px 22px 22px;
            color: #c8d6e7;
            background: #0e2238;
        }

        .footer-grid {
            max-width: 1240px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.4fr .8fr .9fr 1fr;
            gap: 40px;
            padding-bottom: 43px;
        }

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

        .footer-brand {
            display: inline-block;
            margin-bottom: 15px;
            color: var(--white);
            font-size: 18px;
            line-height: 1.3;
            font-weight: 850;
        }

        .footer-note,
        .footer-column p {
            max-width: 330px;
            margin-bottom: 9px;
            color: #a9bdd2;
            font-size: 13px;
            line-height: 1.65;
        }

        .footer-column h3 {
            margin-bottom: 15px;
            color: var(--white);
            font-size: 15px;
        }

        .footer-column a:not(.footer-brand) {
            margin-bottom: 9px;
            color: #b6c9dc;
            font-size: 13px;
        }

        .footer-column a:hover {
            color: #75e4ed;
            transform: translateX(2px);
        }

        .footer-bottom {
            max-width: 1240px;
            margin: 0 auto;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, .12);
            display: flex;
            justify-content: space-between;
            gap: 20px;
            color: #8fa8c0;
            font-size: 12px;
        }

        .floating-support {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 50;
            min-width: 58px;
            min-height: 58px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 12px 16px;
            border: 1px solid rgba(40, 200, 216, .9);
            border-radius: 999px;
            color: var(--white);
            background: rgba(13, 35, 61, .9);
            box-shadow: 0 0 18px rgba(40, 200, 216, .38);
            font-size: 13px;
            font-weight: 800;
            opacity: .82;
            animation: floatButton 3s ease-in-out infinite;
        }

        .floating-support:hover {
            color: var(--white);
            opacity: 1;
            transform: scale(1.08);
            box-shadow: 0 0 28px rgba(40, 200, 216, .65);
        }

        .floating-support .support-icon {
            font-size: 22px;
        }

        .floating-support::after {
            content: "MỚI";
            position: absolute;
            top: -9px;
            right: -4px;
            padding: 2px 6px;
            border-radius: 8px;
            color: var(--white);
            background: var(--rose);
            font-size: 9px;
            letter-spacing: .04em;
        }

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

        @media (max-width: 1100px) {
            .nav-wrap {
                gap: 15px;
            }

            .main-nav a {
                padding-left: 8px;
                padding-right: 8px;
                font-size: 13px;
            }

            .intro-grid,
            .stats-layout,
            .scenario-grid {
                gap: 38px;
            }

            .feature-layout {
                gap: 35px;
            }

            .footer-grid {
                grid-template-columns: 1.2fr 1fr 1fr;
            }

            .footer-column:last-child {
                grid-column: span 3;
            }
        }

        @media (max-width: 860px) {
            .nav-wrap {
                min-height: 70px;
            }

            .brand-text {
                max-width: 190px;
                font-size: 13px;
            }

            .menu-toggle {
                display: block;
                margin-left: auto;
            }

            .main-nav {
                position: absolute;
                top: 70px;
                left: 0;
                right: 0;
                display: none;
                padding: 13px 22px 18px;
                border-bottom: 1px solid var(--line);
                background: rgba(255, 255, 255, .98);
                box-shadow: var(--shadow-sm);
            }

            .main-nav.is-open {
                display: grid;
            }

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

            .nav-actions {
                gap: 6px;
            }

            .nav-actions .nav-link {
                display: none;
            }

            .nav-actions .button {
                min-height: 40px;
                padding: 9px 13px;
                font-size: 13px;
            }

            .intro-grid,
            .stats-layout,
            .scenario-grid,
            .faq-layout,
            .step-layout {
                grid-template-columns: 1fr;
            }

            .intro-copy {
                padding-right: 0;
            }

            .feature-intro {
                position: static;
            }

            .stats-copy {
                max-width: none;
            }

            .steps {
                max-width: 720px;
            }

            .tip-box {
                max-width: 570px;
            }

            .faq-layout {
                gap: 28px;
            }
        }

        @media (max-width: 620px) {
            body {
                font-size: 15px;
            }

            .nav-wrap {
                padding: 0 15px;
            }

            .brand-mark {
                width: 35px;
                height: 35px;
                font-size: 16px;
            }

            .brand-text {
                max-width: 145px;
                white-space: normal;
            }

            .nav-actions .button {
                padding: 8px 10px;
                font-size: 12px;
            }

            .banner-inner {
                padding: 50px 18px 58px;
            }

            h1 {
                font-size: clamp(2rem, 11vw, 3rem);
            }

            .banner-lead {
                font-size: 16px;
            }

            .section,
            .cta-section {
                padding: 61px 18px;
            }

            .section-heading.split-heading {
                display: block;
            }

            .intro-grid {
                display: flex;
                flex-direction: column;
            }

            .image-frame {
                width: calc(100% - 7px);
                margin-right: 7px;
            }

            .image-frame img {
                min-height: 280px;
            }

            .image-note {
                right: -7px;
                bottom: 18px;
            }

            .feature-list {
                grid-template-columns: 1fr;
            }

            .feature-card {
                min-height: auto;
            }

            .metric-row {
                grid-template-columns: 1fr;
            }

            .reading-panel {
                padding: 20px;
            }

            .steps {
                grid-template-columns: 1fr;
                gap: 26px;
            }

            .steps::before {
                top: 22px;
                bottom: 22px;
                left: 22px;
                width: 1px;
                height: auto;
            }

            .step {
                display: grid;
                grid-template-columns: 45px 1fr;
                gap: 17px;
            }

            .step-number {
                grid-row: span 2;
                margin-bottom: 0;
            }

            .step h3 {
                margin-bottom: 4px;
            }

            .scenario-image img {
                min-height: 280px;
            }

            .cta-box {
                display: block;
                padding: 30px 25px;
            }

            .cta-box .button {
                margin-top: 24px;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 28px 20px;
            }

            .footer-column:last-child {
                grid-column: span 2;
            }

            .footer-bottom {
                display: block;
            }

            .footer-bottom span {
                display: block;
                margin-bottom: 5px;
            }

            .floating-support {
                left: 14px;
                bottom: 24px;
                min-width: 52px;
                min-height: 52px;
                padding: 10px 13px;
            }

            .floating-support .support-text {
                display: none;
            }
        }

/* roulang page: category2 */
:root {
            --ink: #132238;
            --muted: #637287;
            --paper: #f6f8fc;
            --white: #ffffff;
            --navy: #102a43;
            --blue: #246bfe;
            --cyan: #28c8d8;
            --gold: #f2b84b;
            --rose: #ef6f79;
            --line: #dfe7f1;
            --soft-blue: #edf4ff;
            --soft-gold: #fff7e7;
            --soft-rose: #fff0f2;
            --green: #21a67a;
            --radius-xl: 28px;
            --radius-lg: 18px;
            --radius-md: 12px;
            --shadow: 0 18px 50px rgba(16, 42, 67, .10);
            --shadow-sm: 0 8px 25px rgba(16, 42, 67, .07);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: Inter, "Segoe UI", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }
        img { max-width: 100%; display: block; }
        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }
        button, input { font: inherit; }
        button:focus-visible,
        a:focus-visible,
        input:focus-visible {
            outline: 3px solid rgba(36, 107, 254, .3);
            outline-offset: 3px;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255, 255, 255, .94);
            border-bottom: 1px solid rgba(223, 231, 241, .9);
            backdrop-filter: blur(16px);
        }
        .nav-wrap {
            max-width: 1240px;
            min-height: 78px;
            margin: 0 auto;
            padding: 0 22px;
            display: flex;
            align-items: center;
            gap: 28px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            color: var(--navy);
            font-weight: 800;
            letter-spacing: -.02em;
            white-space: nowrap;
        }
        .brand-mark {
            width: 39px;
            height: 39px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: linear-gradient(135deg, var(--blue), var(--cyan));
            border-radius: 13px 13px 13px 4px;
            box-shadow: 0 8px 18px rgba(36, 107, 254, .25);
            font-size: 19px;
        }
        .brand-text { font-size: 16px; }
        .main-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
        }
        .main-nav a {
            color: var(--muted);
            padding: 10px 13px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
        }
        .main-nav a:hover,
        .main-nav a.active {
            color: var(--blue);
            background: var(--soft-blue);
        }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .nav-link {
            color: var(--muted);
            font-size: 14px;
            font-weight: 700;
            padding: 9px 7px;
        }
        .menu-toggle {
            display: none;
            border: 1px solid var(--line);
            background: var(--white);
            color: var(--navy);
            border-radius: 10px;
            width: 42px;
            height: 42px;
            cursor: pointer;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 46px;
            padding: 11px 19px;
            border: 0;
            border-radius: 999px;
            font-weight: 800;
            line-height: 1.2;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
        }
        .button:hover { transform: translateY(-2px); }
        .button:active { transform: translateY(0); }
        .button-primary {
            color: var(--white);
            background: linear-gradient(100deg, var(--blue), #5c8cff);
            box-shadow: 0 10px 22px rgba(36, 107, 254, .22);
        }
        .button-primary:hover {
            color: var(--white);
            box-shadow: 0 14px 28px rgba(36, 107, 254, .3);
        }
        .button-light {
            color: var(--blue);
            background: var(--white);
            border: 1px solid #cfe0ff;
        }
        .button-light:hover { background: var(--soft-blue); }
        .button-soft {
            color: var(--navy);
            background: var(--soft-gold);
            border: 1px solid #ffe2a4;
        }

        .page-hero {
            position: relative;
            overflow: hidden;
            color: var(--white);
            background:
                linear-gradient(115deg, rgba(16, 42, 67, .96) 0%, rgba(36, 107, 254, .78) 50%, rgba(40, 200, 216, .54) 100%),
                url('/assets/images/backpic/back-2.jpg') center/cover;
        }
        .page-hero::after {
            content: "";
            position: absolute;
            inset: auto -12% -98px;
            height: 180px;
            background: var(--paper);
            border-radius: 50% 50% 0 0;
        }
        .hero-inner {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 1240px;
            margin: 0 auto;
            padding: 74px 22px 124px;
        }
        .hero-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(340px, .75fr);
            gap: 42px;
            align-items: center;
        }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 18px;
            color: #ffe2a4;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--gold);
        }
        h1, h2, h3, p { margin-top: 0; }
        h1 {
            max-width: 820px;
            margin-bottom: 22px;
            color: var(--white);
            font-size: clamp(36px, 5vw, 62px);
            line-height: 1.06;
            font-weight: 850;
            letter-spacing: 0;
        }
        .hero-lead {
            max-width: 690px;
            margin-bottom: 29px;
            color: #dcecff;
            font-size: 18px;
            line-height: 1.7;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 13px;
            margin-bottom: 26px;
        }
        .page-hero .button-light {
            color: var(--white);
            background: rgba(255,255,255,.12);
            border-color: rgba(255,255,255,.35);
        }
        .page-hero .button-light:hover { background: rgba(255,255,255,.22); }
        .hero-signals {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .signal {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            color: #ecf7ff;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.22);
            border-radius: 999px;
            font-size: 13px;
            font-weight: 750;
        }
        .signal-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--gold);
            box-shadow: 0 0 0 4px rgba(242,184,75,.18);
        }

        .feature-panel {
            position: relative;
            padding: 20px;
            background: rgba(255,255,255,.13);
            border: 1px solid rgba(255,255,255,.28);
            border-radius: var(--radius-xl);
            box-shadow: 0 28px 70px rgba(0,0,0,.20);
            backdrop-filter: blur(16px);
        }
        .feature-panel img {
            width: 100%;
            height: 235px;
            object-fit: cover;
            border-radius: 22px;
            margin-bottom: 18px;
        }
        .panel-label {
            display: inline-flex;
            padding: 6px 10px;
            margin-bottom: 12px;
            color: #11233a;
            background: #fff1bf;
            border-radius: 999px;
            font-weight: 850;
            font-size: 12px;
        }
        .feature-panel h2 {
            color: var(--white);
            font-size: 26px;
            line-height: 1.2;
            margin-bottom: 12px;
        }
        .feature-panel p {
            color: #eaf5ff;
            margin-bottom: 18px;
        }
        .mini-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .mini-stat {
            padding: 12px;
            border-radius: 16px;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.16);
        }
        .mini-stat strong {
            display: block;
            color: var(--white);
            font-size: 20px;
            line-height: 1.1;
        }
        .mini-stat span {
            color: #dcecff;
            font-size: 12px;
            font-weight: 700;
        }

        .section {
            max-width: 1240px;
            margin: 0 auto;
            padding: 76px 22px;
        }
        .section-tight { padding-top: 34px; }
        .section-head {
            max-width: 790px;
            margin-bottom: 34px;
        }
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 11px;
            color: var(--blue);
            font-size: 13px;
            font-weight: 850;
        }
        .section-kicker::before {
            content: "";
            width: 20px;
            height: 2px;
            background: var(--cyan);
        }
        h2 {
            color: var(--navy);
            font-size: clamp(28px, 3vw, 42px);
            line-height: 1.16;
            font-weight: 850;
            letter-spacing: 0;
            margin-bottom: 14px;
        }
        .section-head p {
            color: var(--muted);
            font-size: 17px;
            margin-bottom: 0;
        }

        .value-strip {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 24px;
            align-items: stretch;
        }
        .value-card {
            padding: 34px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-sm);
        }
        .value-card.large {
            background:
                radial-gradient(circle at 88% 12%, rgba(40,200,216,.18), transparent 32%),
                linear-gradient(145deg, #ffffff 0%, #f4f8ff 100%);
        }
        .value-card h3 {
            color: var(--navy);
            font-size: 24px;
            font-weight: 850;
            line-height: 1.25;
            margin-bottom: 12px;
        }
        .value-card p {
            color: var(--muted);
            margin-bottom: 20px;
        }
        .data-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 21px;
        }
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 36px;
            padding: 8px 12px;
            border-radius: 999px;
            color: var(--navy);
            background: var(--soft-blue);
            border: 1px solid #d5e5ff;
            font-size: 13px;
            font-weight: 800;
        }
        .badge.gold {
            background: var(--soft-gold);
            border-color: #ffe3aa;
        }
        .metric-list {
            display: grid;
            gap: 12px;
        }
        .metric-row {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 15px 0;
            border-bottom: 1px solid var(--line);
        }
        .metric-row:last-child { border-bottom: 0; }
        .metric-row span {
            color: var(--muted);
            font-weight: 700;
        }
        .metric-row strong {
            color: var(--blue);
            font-size: 21px;
            line-height: 1;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }
        .info-card {
            padding: 24px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }
        .info-card:hover {
            transform: translateY(-4px);
            border-color: #cfe0ff;
            box-shadow: var(--shadow);
        }
        .icon-box {
            width: 46px;
            height: 46px;
            display: grid;
            place-items: center;
            margin-bottom: 17px;
            color: var(--white);
            background: linear-gradient(135deg, var(--blue), var(--cyan));
            border-radius: 16px;
            font-weight: 900;
            box-shadow: 0 12px 22px rgba(36,107,254,.18);
        }
        .info-card h3 {
            color: var(--navy);
            font-size: 19px;
            font-weight: 850;
            line-height: 1.28;
            margin-bottom: 10px;
        }
        .info-card p {
            color: var(--muted);
            margin-bottom: 0;
        }

        .visual-band {
            background: var(--white);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }
        .split-layout {
            display: grid;
            grid-template-columns: .92fr 1.08fr;
            gap: 44px;
            align-items: center;
        }
        .image-stack {
            position: relative;
        }
        .image-stack img {
            width: 100%;
            height: 440px;
            object-fit: cover;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow);
        }
        .float-note {
            position: absolute;
            right: -18px;
            bottom: 28px;
            max-width: 250px;
            padding: 18px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }
        .float-note strong {
            display: block;
            color: var(--navy);
            font-size: 22px;
        }
        .float-note span {
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
        }
        .check-list {
            display: grid;
            gap: 14px;
            margin: 24px 0 0;
            padding: 0;
            list-style: none;
        }
        .check-list li {
            position: relative;
            padding-left: 34px;
            color: var(--muted);
        }
        .check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            width: 23px;
            height: 23px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: var(--green);
            border-radius: 50%;
            font-size: 13px;
            font-weight: 900;
        }

        .scenario-wrap {
            display: grid;
            grid-template-columns: .72fr 1fr;
            gap: 30px;
            align-items: start;
        }
        .scenario-aside {
            position: sticky;
            top: 102px;
            padding: 30px;
            color: var(--white);
            background:
                linear-gradient(145deg, rgba(16,42,67,.94), rgba(36,107,254,.82)),
                url('/assets/images/coverpic/cover-6.jpg') center/cover;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow);
        }
        .scenario-aside h2 { color: var(--white); }
        .scenario-aside p { color: #e3f0ff; }
        .scenario-list {
            display: grid;
            gap: 14px;
        }
        .scenario-item {
            display: grid;
            grid-template-columns: 54px 1fr;
            gap: 16px;
            padding: 22px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
        }
        .scenario-no {
            width: 54px;
            height: 54px;
            display: grid;
            place-items: center;
            color: var(--blue);
            background: var(--soft-blue);
            border-radius: 17px;
            font-weight: 900;
            font-size: 18px;
        }
        .scenario-item h3 {
            color: var(--navy);
            font-size: 19px;
            font-weight: 850;
            margin-bottom: 6px;
        }
        .scenario-item p {
            color: var(--muted);
            margin-bottom: 0;
        }

        .proof-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
        .proof-card {
            padding: 26px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
        }
        .proof-card strong {
            display: block;
            color: var(--blue);
            font-size: 36px;
            line-height: 1;
            margin-bottom: 10px;
        }
        .proof-card h3 {
            color: var(--navy);
            font-size: 18px;
            font-weight: 850;
            margin-bottom: 8px;
        }
        .proof-card p {
            color: var(--muted);
            margin-bottom: 0;
        }

        .price-panel {
            display: grid;
            grid-template-columns: .95fr 1.05fr;
            gap: 24px;
            padding: 34px;
            background:
                radial-gradient(circle at 14% 18%, rgba(242,184,75,.20), transparent 30%),
                linear-gradient(135deg, #ffffff, #edf4ff);
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow);
            align-items: center;
        }
        .price-box {
            padding: 28px;
            background: var(--navy);
            border-radius: 24px;
            color: var(--white);
        }
        .price-box .price {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin: 14px 0 16px;
        }
        .price strong {
            font-size: 44px;
            line-height: 1;
        }
        .price span {
            color: #c9d9ec;
            font-weight: 700;
        }
        .price-box p { color: #dcecff; }
        .pay-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 16px;
        }
        .pay-tag {
            padding: 7px 10px;
            color: var(--navy);
            background: #ffffff;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 850;
        }

        .faq-wrap {
            display: grid;
            grid-template-columns: .72fr 1fr;
            gap: 34px;
            align-items: start;
        }
        .faq-list {
            display: grid;
            gap: 12px;
        }
        details.faq-item {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }
        .faq-item summary {
            cursor: pointer;
            padding: 20px 22px;
            color: var(--navy);
            font-weight: 850;
            list-style: none;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            content: "+";
            float: right;
            color: var(--blue);
            font-size: 22px;
            line-height: 1;
        }
        .faq-item[open] summary::after { content: "–"; }
        .faq-item p {
            padding: 0 22px 22px;
            color: var(--muted);
            margin: 0;
        }

        .cta-band {
            max-width: 1240px;
            margin: 0 auto 76px;
            padding: 0 22px;
        }
        .cta-inner {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 26px;
            align-items: center;
            padding: 38px;
            color: var(--white);
            background:
                linear-gradient(120deg, rgba(16,42,67,.96), rgba(36,107,254,.88)),
                url('/assets/images/backpic/back-3.jpg') center/cover;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow);
        }
        .cta-inner h2 {
            color: var(--white);
            margin-bottom: 10px;
        }
        .cta-inner p {
            color: #e0eeff;
            margin-bottom: 0;
            max-width: 760px;
        }

        .left-fab {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 50;
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: linear-gradient(145deg, #0f2742, #246bfe);
            border: 3px solid var(--gold);
            border-radius: 50%;
            box-shadow: 0 4px 22px rgba(242,184,75,.35);
            opacity: .72;
            animation: fabFloat 3.2s ease-in-out infinite;
        }
        .left-fab::after {
            content: "";
            position: absolute;
            top: 7px;
            right: 7px;
            width: 10px;
            height: 10px;
            background: var(--rose);
            border: 2px solid var(--white);
            border-radius: 50%;
            animation: blink 1.2s infinite;
        }
        .left-fab span {
            font-size: 24px;
            transition: transform .5s ease;
        }
        .left-fab:hover {
            opacity: 1;
            transform: scale(1.1);
            color: var(--white);
        }
        .left-fab:hover span { transform: rotate(360deg); }
        .left-fab:active { transform: scale(.95) translateY(2px); }
        @keyframes fabFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-7px); }
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: .25; }
        }

        .site-footer {
            background: var(--navy);
            color: #d9e8fb;
            padding: 58px 22px 26px;
        }
        .footer-grid {
            max-width: 1240px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.25fr .8fr .8fr .9fr;
            gap: 30px;
        }
        .footer-brand {
            display: inline-flex;
            color: var(--white);
            font-size: 18px;
            font-weight: 850;
            margin-bottom: 14px;
        }
        .footer-note {
            color: #b8cbe2;
            max-width: 420px;
            margin-bottom: 0;
        }
        .footer-column h3 {
            color: var(--white);
            font-size: 15px;
            font-weight: 850;
            margin-bottom: 13px;
        }
        .footer-column a,
        .footer-column p {
            display: block;
            color: #b8cbe2;
            margin-bottom: 9px;
        }
        .footer-column a:hover { color: var(--gold); }
        .footer-bottom {
            max-width: 1240px;
            margin: 34px auto 0;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,.12);
            display: flex;
            justify-content: space-between;
            gap: 18px;
            color: #9eb5d0;
            font-size: 14px;
        }

        @media (max-width: 1024px) {
            .nav-wrap {
                flex-wrap: wrap;
                gap: 14px;
                padding-top: 14px;
                padding-bottom: 14px;
            }
            .main-nav {
                order: 3;
                width: 100%;
                margin-left: 0;
                overflow-x: auto;
                padding-bottom: 2px;
            }
            .main-nav a { white-space: nowrap; }
            .hero-layout,
            .value-strip,
            .split-layout,
            .scenario-wrap,
            .faq-wrap,
            .price-panel {
                grid-template-columns: 1fr;
            }
            .feature-grid,
            .proof-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .scenario-aside {
                position: static;
            }
            .float-note {
                right: 18px;
            }
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .nav-wrap {
                min-height: auto;
                align-items: flex-start;
            }
            .brand {
                max-width: calc(100% - 56px);
                white-space: normal;
            }
            .brand-text {
                font-size: 14px;
                line-height: 1.25;
            }
            .menu-toggle {
                display: grid;
                place-items: center;
                margin-left: auto;
            }
            .main-nav {
                display: none;
                flex-direction: column;
                align-items: stretch;
                background: var(--white);
                border: 1px solid var(--line);
                border-radius: 16px;
                padding: 10px;
                box-shadow: var(--shadow-sm);
            }
            .main-nav.is-open { display: flex; }
            .nav-actions {
                width: 100%;
                justify-content: flex-start;
            }
            .nav-link { padding-left: 0; }
            .page-hero::after { height: 120px; }
            .hero-inner { padding: 54px 18px 96px; }
            h1 { font-size: 34px; }
            .hero-lead { font-size: 16px; }
            .feature-panel img { height: 205px; }
            .section { padding: 58px 18px; }
            .section-tight { padding-top: 22px; }
            .value-card,
            .price-panel,
            .cta-inner {
                padding: 25px;
            }
            .feature-grid,
            .proof-grid {
                grid-template-columns: 1fr;
            }
            .image-stack img { height: 330px; }
            .float-note {
                position: static;
                margin-top: -30px;
                margin-left: 18px;
                margin-right: 18px;
            }
            .cta-inner {
                grid-template-columns: 1fr;
            }
            .footer-grid {
                grid-template-columns: 1fr;
            }
            .footer-bottom {
                flex-direction: column;
            }
        }

        @media (max-width: 520px) {
            .nav-wrap { padding-left: 14px; padding-right: 14px; }
            .brand-mark {
                width: 36px;
                height: 36px;
                border-radius: 12px 12px 12px 4px;
            }
            .button {
                width: 100%;
                min-height: 48px;
                padding-left: 16px;
                padding-right: 16px;
            }
            .nav-actions .button {
                width: auto;
                min-height: 42px;
                padding: 9px 13px;
                font-size: 13px;
            }
            .hero-actions .button { width: 100%; }
            .mini-stats { grid-template-columns: 1fr; }
            .metric-row {
                align-items: flex-start;
                flex-direction: column;
                gap: 6px;
            }
            .scenario-item {
                grid-template-columns: 1fr;
            }
            .price strong { font-size: 36px; }
            .left-fab {
                width: 52px;
                height: 52px;
                left: 16px;
                bottom: 96px;
            }
        }

/* roulang page: category3 */
:root {
            --ink: #132238;
            --muted: #637287;
            --paper: #f6f8fc;
            --white: #ffffff;
            --navy: #102a43;
            --blue: #246bfe;
            --cyan: #28c8d8;
            --gold: #f2b84b;
            --rose: #ef6f79;
            --line: #dfe7f1;
            --soft-blue: #edf4ff;
            --soft-gold: #fff7e7;
            --soft-cyan: #eafafd;
            --radius-xl: 28px;
            --radius-lg: 18px;
            --radius-md: 12px;
            --shadow: 0 18px 50px rgba(16, 42, 67, .10);
            --shadow-sm: 0 8px 25px rgba(16, 42, 67, .07);
            --max-width: 1240px;
        }

        * { box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: Inter, "Segoe UI", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }

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

        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
        }

        button, input { font: inherit; }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        summary:focus-visible {
            outline: 3px solid rgba(36, 107, 254, .3);
            outline-offset: 3px;
        }

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

        h1, h2, h3 {
            color: var(--navy);
            letter-spacing: -.035em;
            line-height: 1.15;
        }

        h1 {
            margin-bottom: 22px;
            font-size: clamp(2.35rem, 5vw, 4.8rem);
        }

        h2 {
            margin-bottom: 15px;
            font-size: clamp(1.85rem, 3.2vw, 3rem);
        }

        h3 {
            margin-bottom: 9px;
            font-size: 1.18rem;
        }

        .container {
            width: min(100% - 44px, var(--max-width));
            margin: 0 auto;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255, 255, 255, .95);
            border-bottom: 1px solid rgba(223, 231, 241, .9);
            backdrop-filter: blur(16px);
        }

        .nav-wrap {
            width: min(100% - 44px, var(--max-width));
            min-height: 78px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            color: var(--navy);
            font-weight: 800;
            letter-spacing: -.02em;
            white-space: nowrap;
        }

        .brand-mark {
            width: 39px;
            height: 39px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: linear-gradient(135deg, var(--blue), var(--cyan));
            border-radius: 13px 13px 13px 4px;
            box-shadow: 0 8px 18px rgba(36, 107, 254, .25);
            font-size: 19px;
        }

        .brand-text {
            font-size: 16px;
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
        }

        .main-nav a {
            color: var(--muted);
            padding: 10px 13px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--blue);
            background: var(--soft-blue);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-link {
            color: var(--muted);
            font-size: 14px;
            font-weight: 700;
            padding: 9px 7px;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 46px;
            padding: 11px 19px;
            border: 0;
            border-radius: 999px;
            font-weight: 800;
            line-height: 1.2;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .button:hover {
            transform: translateY(-2px);
        }

        .button:active {
            transform: translateY(0);
        }

        .button-primary {
            color: var(--white);
            background: linear-gradient(100deg, var(--blue), #5c8cff);
            box-shadow: 0 10px 22px rgba(36, 107, 254, .22);
        }

        .button-primary:hover {
            color: var(--white);
            box-shadow: 0 14px 28px rgba(36, 107, 254, .3);
        }

        .button-light {
            color: var(--blue);
            background: var(--white);
            border: 1px solid #cfe0ff;
        }

        .button-light:hover {
            color: var(--blue);
            background: var(--soft-blue);
        }

        .button-gold {
            color: #754d11;
            background: linear-gradient(100deg, #ffd982, var(--gold));
            box-shadow: 0 10px 24px rgba(242, 184, 75, .2);
        }

        .button-gold:hover {
            color: #5f3d0d;
            box-shadow: 0 14px 28px rgba(242, 184, 75, .32);
        }

        .menu-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border: 1px solid var(--line);
            border-radius: 10px;
            color: var(--navy);
            background: var(--white);
            cursor: pointer;
        }

        .hero {
            position: relative;
            min-height: 590px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: var(--white);
            background:
                linear-gradient(100deg, rgba(10, 35, 64, .96) 0%, rgba(17, 60, 100, .88) 46%, rgba(17, 60, 100, .48) 100%),
                url('/assets/images/backpic/back-2.jpg') center/cover;
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .15;
            background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
            background-size: 45px 45px;
            mask-image: linear-gradient(90deg, black, transparent 85%);
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: auto -10% -115px;
            height: 180px;
            background: var(--paper);
            border-radius: 50% 50% 0 0;
        }

        .hero-inner {
            position: relative;
            z-index: 1;
            width: min(100% - 44px, var(--max-width));
            margin: 0 auto;
            padding: 68px 0 120px;
        }

        .hero-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
            gap: 64px;
            align-items: center;
        }

        .hero-copy {
            max-width: 770px;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            color: #ffe2a4;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--gold);
        }

        .hero h1 {
            max-width: 820px;
            color: var(--white);
        }

        .hero-lead {
            max-width: 690px;
            margin-bottom: 29px;
            color: #dcecff;
            font-size: 18px;
            line-height: 1.7;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 13px;
            margin-bottom: 28px;
        }

        .hero .button-light {
            color: var(--white);
            background: rgba(255,255,255,.12);
            border-color: rgba(255,255,255,.35);
        }

        .hero .button-light:hover {
            background: rgba(255,255,255,.22);
        }

        .hero-signals {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 20px;
            color: #dcecff;
            font-size: 13px;
            font-weight: 700;
        }

        .hero-signals span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .hero-signals i {
            width: 8px;
            height: 8px;
            display: inline-block;
            border-radius: 50%;
            background: var(--cyan);
            box-shadow: 0 0 0 5px rgba(40, 200, 216, .15);
        }

        .hero-panel {
            position: relative;
            padding: 26px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,.25);
            border-radius: var(--radius-xl);
            background: linear-gradient(150deg, rgba(255,255,255,.19), rgba(255,255,255,.07));
            box-shadow: 0 24px 60px rgba(2, 19, 38, .25);
            backdrop-filter: blur(14px);
        }

        .hero-panel::after {
            content: "";
            position: absolute;
            width: 180px;
            height: 180px;
            right: -85px;
            top: -80px;
            border: 1px solid rgba(242,184,75,.42);
            border-radius: 50%;
            box-shadow: 0 0 0 20px rgba(242,184,75,.05), 0 0 0 40px rgba(242,184,75,.04);
        }

        .panel-label {
            display: block;
            margin-bottom: 17px;
            color: #ffe2a4;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .panel-title {
            margin-bottom: 21px;
            color: var(--white);
            font-size: 1.35rem;
            letter-spacing: -.02em;
        }

        .panel-steps {
            display: grid;
            gap: 15px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .panel-steps li {
            display: grid;
            grid-template-columns: 34px 1fr;
            gap: 12px;
            align-items: start;
        }

        .step-number {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 11px;
            color: var(--navy);
            background: var(--gold);
            font-size: 13px;
            font-weight: 900;
        }

        .panel-steps strong {
            display: block;
            margin-bottom: 2px;
            color: var(--white);
            font-size: 14px;
        }

        .panel-steps span {
            display: block;
            color: #c6dcf2;
            font-size: 13px;
            line-height: 1.5;
        }

        .countdown-bar {
            position: absolute;
            z-index: 3;
            top: 19px;
            right: 0;
            left: 0;
            width: min(100% - 44px, var(--max-width));
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            color: #eaf6ff;
            font-size: 12px;
        }

        .countdown-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
        }

        .countdown-label::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #69e5cf;
            box-shadow: 0 0 0 5px rgba(105,229,207,.16);
        }

        .countdown-value {
            min-width: 106px;
            padding: 6px 11px;
            border: 1px solid rgba(255,255,255,.25);
            border-radius: 999px;
            color: #ffe2a4;
            background: rgba(7, 27, 48, .35);
            font-variant-numeric: tabular-nums;
            font-weight: 900;
            text-align: center;
        }

        .section {
            padding: 92px 0;
        }

        .section-tight {
            padding: 70px 0;
        }

        .section-heading {
            max-width: 730px;
            margin-bottom: 38px;
        }

        .section-heading .kicker {
            display: block;
            margin-bottom: 11px;
            color: var(--blue);
            font-size: 12px;
            font-weight: 900;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .section-heading p {
            max-width: 670px;
            margin-bottom: 0;
            color: var(--muted);
            font-size: 17px;
        }

        .intro-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(270px, .75fr);
            gap: 58px;
            align-items: end;
        }

        .intro-copy p {
            max-width: 730px;
            color: var(--muted);
            font-size: 17px;
        }

        .metric-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 28px;
        }

        .metric {
            padding: 18px 17px;
            border-left: 3px solid var(--cyan);
            background: var(--white);
            box-shadow: var(--shadow-sm);
        }

        .metric:nth-child(2) { border-color: var(--gold); }
        .metric:nth-child(3) { border-color: var(--rose); }

        .metric strong {
            display: block;
            margin-bottom: 2px;
            color: var(--navy);
            font-size: 1.55rem;
            letter-spacing: -.04em;
        }

        .metric span {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
        }

        .notice {
            padding: 22px 24px;
            border: 1px solid #f1dba6;
            border-radius: var(--radius-lg);
            background: var(--soft-gold);
        }

        .notice strong {
            display: block;
            margin-bottom: 6px;
            color: #875c13;
        }

        .notice p {
            margin-bottom: 0;
            color: #786543;
            font-size: 14px;
            line-height: 1.6;
        }

        .method-section {
            background: var(--white);
        }

        .method-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
            gap: 40px;
            align-items: stretch;
        }

        .method-list {
            padding: 33px;
            border-radius: var(--radius-xl);
            background: linear-gradient(135deg, #f0f6ff 0%, #ffffff 72%);
            box-shadow: var(--shadow-sm);
        }

        .method-list h2 {
            max-width: 480px;
            margin-bottom: 27px;
        }

        .method-item {
            position: relative;
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 18px;
            padding: 18px 0;
            border-bottom: 1px solid var(--line);
        }

        .method-item:first-of-type { padding-top: 0; }
        .method-item:last-child {
            padding-bottom: 0;
            border-bottom: 0;
        }

        .method-icon {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            border-radius: 15px;
            color: var(--blue);
            background: var(--white);
            box-shadow: 0 7px 18px rgba(36,107,254,.12);
            font-size: 19px;
            font-weight: 900;
        }

        .method-item:nth-child(3) .method-icon {
            color: #b17612;
            background: #fff8e9;
        }

        .method-item:nth-child(4) .method-icon {
            color: #078a95;
            background: #e9fbfc;
        }

        .method-item h3 {
            margin-bottom: 5px;
            font-size: 1.05rem;
        }

        .method-item p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.62;
        }

        .method-visual {
            position: relative;
            min-height: 470px;
            overflow: hidden;
            border-radius: var(--radius-xl);
            background: var(--navy);
            box-shadow: var(--shadow);
        }

        .method-visual img {
            width: 100%;
            height: 100%;
            min-height: 470px;
            object-fit: cover;
            opacity: .8;
        }

        .method-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(16,42,67,.05) 20%, rgba(16,42,67,.88) 100%);
        }

        .visual-caption {
            position: absolute;
            z-index: 1;
            right: 28px;
            bottom: 27px;
            left: 28px;
            color: var(--white);
        }

        .visual-caption .badge {
            margin-bottom: 13px;
        }

        .visual-caption h3 {
            max-width: 400px;
            color: var(--white);
            font-size: 1.62rem;
        }

        .visual-caption p {
            max-width: 420px;
            margin-bottom: 0;
            color: #d8e6f3;
            font-size: 14px;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            min-height: 27px;
            padding: 5px 10px;
            border-radius: 999px;
            color: #725114;
            background: #ffe6a8;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .05em;
            text-transform: uppercase;
        }

        .badge-blue {
            color: var(--blue);
            background: #dce9ff;
        }

        .signal-section {
            background:
                radial-gradient(circle at 92% 5%, rgba(40,200,216,.1), transparent 23%),
                var(--paper);
        }

        .signal-layout {
            display: grid;
            grid-template-columns: .72fr 1.28fr;
            gap: 58px;
            align-items: center;
        }

        .signal-intro {
            padding-right: 15px;
        }

        .signal-intro p {
            color: var(--muted);
        }

        .link-arrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            color: var(--blue);
            font-size: 14px;
            font-weight: 850;
        }

        .link-arrow:hover {
            gap: 12px;
            color: var(--navy);
        }

        .signal-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .signal-item {
            min-height: 175px;
            padding: 24px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--white);
            box-shadow: var(--shadow-sm);
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }

        .signal-item:hover {
            transform: translateY(-5px);
            border-color: #bdd2ff;
            box-shadow: var(--shadow);
        }

        .signal-item:nth-child(2) {
            transform: translateY(24px);
            background: linear-gradient(145deg, #fffdf8, #fff7e7);
        }

        .signal-item:nth-child(2):hover {
            transform: translateY(19px);
        }

        .signal-item:nth-child(3) {
            background: linear-gradient(145deg, #f0fcfd, #ffffff);
        }

        .signal-item:nth-child(4) {
            transform: translateY(24px);
            background: linear-gradient(145deg, #fff5f6, #ffffff);
        }

        .signal-item:nth-child(4):hover {
            transform: translateY(19px);
        }

        .signal-item .mini-icon {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            margin-bottom: 17px;
            border-radius: 12px;
            color: var(--blue);
            background: var(--soft-blue);
            font-weight: 900;
        }

        .signal-item:nth-child(2) .mini-icon {
            color: #ad7819;
            background: #ffedbf;
        }

        .signal-item:nth-child(3) .mini-icon {
            color: #088a95;
            background: #d8f6f7;
        }

        .signal-item:nth-child(4) .mini-icon {
            color: #cf5664;
            background: #ffe0e4;
        }

        .signal-item h3 {
            font-size: 1.05rem;
        }

        .signal-item p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.55;
        }

        .scenarios {
            padding-top: 105px;
            background: var(--white);
        }

        .scenario-layout {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 17px;
            align-items: stretch;
        }

        .scenario-lead {
            grid-column: span 5;
            padding: 34px 30px;
            border-radius: var(--radius-xl);
            color: var(--white);
            background:
                linear-gradient(135deg, rgba(16,42,67,.94), rgba(36,107,254,.84)),
                url('/assets/images/backpic/back-3.jpg') center/cover;
        }

        .scenario-lead h2 {
            color: var(--white);
        }

        .scenario-lead p {
            color: #dcecff;
        }

        .scenario-lead .button {
            margin-top: 16px;
        }

        .scenario-card {
            grid-column: span 3;
            padding: 28px 22px;
            border-top: 4px solid var(--cyan);
            background: #f8fbff;
        }

        .scenario-card:nth-child(3) {
            border-color: var(--gold);
            background: #fffaf0;
        }

        .scenario-card:nth-child(4) {
            border-color: var(--rose);
            background: #fff6f7;
        }

        .scenario-card strong {
            display: block;
            margin-bottom: 10px;
            color: var(--navy);
            font-size: 2rem;
            line-height: 1;
        }

        .scenario-card h3 {
            font-size: 1rem;
        }

        .scenario-card p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.6;
        }

        .process {
            background: var(--paper);
        }

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

        .process-aside {
            position: sticky;
            top: 115px;
        }

        .process-aside p {
            color: var(--muted);
        }

        .process-board {
            position: relative;
            padding-left: 30px;
        }

        .process-board::before {
            content: "";
            position: absolute;
            top: 13px;
            bottom: 15px;
            left: 4px;
            width: 2px;
            background: linear-gradient(var(--blue), var(--cyan), var(--gold));
        }

        .process-step {
            position: relative;
            padding: 0 0 29px 28px;
        }

        .process-step:last-child {
            padding-bottom: 0;
        }

        .process-step::before {
            content: "";
            position: absolute;
            top: 4px;
            left: -1px;
            width: 12px;
            height: 12px;
            border: 3px solid var(--paper);
            border-radius: 50%;
            background: var(--blue);
            box-shadow: 0 0 0 2px var(--blue);
        }

        .process-step:nth-child(2)::before {
            background: var(--cyan);
            box-shadow: 0 0 0 2px var(--cyan);
        }

        .process-step:nth-child(3)::before {
            background: var(--gold);
            box-shadow: 0 0 0 2px var(--gold);
        }

        .process-step h3 {
            margin-bottom: 6px;
        }

        .process-step p {
            max-width: 630px;
            margin-bottom: 0;
            color: var(--muted);
            font-size: 15px;
        }

        .latest {
            background: var(--white);
        }

        .latest-layout {
            display: grid;
            grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
            gap: 34px;
            align-items: stretch;
        }

        .latest-image {
            min-height: 370px;
            overflow: hidden;
            border-radius: var(--radius-xl);
        }

        .latest-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .latest-content {
            padding: 34px;
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            background: linear-gradient(145deg, #f8fbff, #ffffff);
        }

        .latest-content h2 {
            max-width: 570px;
        }

        .latest-content > p {
            color: var(--muted);
        }

        .check-list {
            display: grid;
            gap: 13px;
            margin: 25px 0 0;
            padding: 0;
            list-style: none;
        }

        .check-list li {
            position: relative;
            padding-left: 28px;
            color: var(--ink);
            font-size: 14px;
            font-weight: 650;
        }

        .check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 1px;
            width: 19px;
            height: 19px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: var(--white);
            background: var(--cyan);
            font-size: 12px;
            font-weight: 900;
        }

        .faq {
            background: var(--paper);
        }

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

        .faq-intro p {
            color: var(--muted);
        }

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

        .faq-item {
            border-bottom: 1px solid var(--line);
        }

        .faq-item summary {
            position: relative;
            padding: 22px 38px 22px 0;
            color: var(--navy);
            font-weight: 800;
            cursor: pointer;
            list-style: none;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary::after {
            content: "+";
            position: absolute;
            top: 17px;
            right: 4px;
            color: var(--blue);
            font-size: 25px;
            font-weight: 400;
            transition: transform .2s ease;
        }

        .faq-item[open] summary::after {
            transform: rotate(45deg);
        }

        .faq-answer {
            max-width: 720px;
            padding: 0 35px 21px 0;
            color: var(--muted);
            font-size: 15px;
        }

        .cta {
            padding: 78px 0;
            color: var(--white);
            background:
                linear-gradient(120deg, rgba(16,42,67,.97), rgba(36,107,254,.89)),
                url('/assets/images/backpic/back-1.jpg') center/cover;
        }

        .cta-layout {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 35px;
        }

        .cta-copy {
            max-width: 720px;
        }

        .cta h2 {
            margin-bottom: 12px;
            color: var(--white);
        }

        .cta p {
            margin-bottom: 0;
            color: #dcecff;
            font-size: 17px;
        }

        .cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 11px;
            flex-shrink: 0;
        }

        .site-footer {
            padding: 66px 22px 23px;
            color: #b9cbe0;
            background: #0b2137;
        }

        .footer-grid {
            width: min(100%, var(--max-width));
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.35fr .8fr .9fr .9fr;
            gap: 42px;
            padding-bottom: 43px;
        }

        .footer-brand {
            display: inline-block;
            margin-bottom: 16px;
            color: var(--white);
            font-size: 18px;
            font-weight: 850;
            letter-spacing: -.02em;
        }

        .footer-note {
            max-width: 360px;
            margin-bottom: 0;
            color: #9eb4cb;
            font-size: 14px;
            line-height: 1.65;
        }

        .footer-column h3 {
            margin-bottom: 17px;
            color: var(--white);
            font-size: 14px;
            letter-spacing: .01em;
        }

        .footer-column > a:not(.footer-brand),
        .footer-column > p {
            display: block;
            margin-bottom: 9px;
            color: #a9bfd5;
            font-size: 14px;
            line-height: 1.5;
        }

        .footer-column > a:not(.footer-brand):hover {
            color: var(--cyan);
            transform: translateX(3px);
        }

        .footer-column > p {
            margin-bottom: 7px;
        }

        .footer-bottom {
            width: min(100%, var(--max-width));
            margin: 0 auto;
            padding-top: 19px;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            border-top: 1px solid rgba(190, 215, 237, .16);
            color: #89a5bf;
            font-size: 12px;
        }

        .floating-note {
            position: fixed;
            z-index: 50;
            left: 16px;
            bottom: 24px;
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            border: 2px solid var(--gold);
            border-radius: 50%;
            color: #ffe6a8;
            background: rgba(16,42,67,.95);
            box-shadow: 0 4px 20px rgba(255, 190, 70, .3);
            font-size: 20px;
            animation: floatNote 3s ease-in-out infinite;
        }

        .floating-note::after {
            content: "";
            position: absolute;
            top: 1px;
            right: 2px;
            width: 9px;
            height: 9px;
            border: 2px solid #102a43;
            border-radius: 50%;
            background: var(--rose);
            animation: blink 1.8s ease-in-out infinite;
        }

        .floating-note:hover {
            color: var(--white);
            transform: scale(1.1);
        }

        @keyframes floatNote {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: .35; }
        }

        @media (max-width: 1100px) {
            .nav-wrap { gap: 17px; }
            .brand-text { max-width: 190px; white-space: normal; line-height: 1.2; }
            .hero-layout { gap: 34px; }
            .process-layout,
            .faq-layout { gap: 40px; }
            .footer-grid { gap: 25px; }
        }

        @media (max-width: 850px) {
            .nav-wrap {
                position: relative;
                min-height: 70px;
            }

            .menu-toggle {
                display: block;
                margin-left: auto;
            }

            .main-nav {
                position: absolute;
                top: calc(100% + 1px);
                right: 0;
                left: 0;
                display: none;
                padding: 12px;
                border: 1px solid var(--line);
                border-top: 0;
                background: rgba(255,255,255,.98);
                box-shadow: var(--shadow-sm);
            }

            .main-nav.is-open {
                display: grid;
            }

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

            .nav-actions {
                display: none;
            }

            .hero-layout,
            .intro-layout,
            .method-layout,
            .signal-layout,
            .latest-layout,
            .process-layout,
            .faq-layout {
                grid-template-columns: 1fr;
            }

            .hero-panel {
                max-width: 560px;
            }

            .process-aside {
                position: static;
            }

            .scenario-lead {
                grid-column: span 12;
            }

            .scenario-card {
                grid-column: span 4;
            }

            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .container,
            .nav-wrap,
            .hero-inner,
            .countdown-bar {
                width: min(100% - 32px, var(--max-width));
            }

            .brand-text {
                max-width: 175px;
                font-size: 14px;
            }

            .hero {
                min-height: auto;
            }

            .hero-inner {
                padding: 88px 0 105px;
            }

            .hero h1 {
                font-size: clamp(2.2rem, 11vw, 3.25rem);
            }

            .hero-lead {
                font-size: 16px;
            }

            .countdown-bar {
                align-items: flex-start;
                flex-direction: column;
                gap: 7px;
            }

            .section {
                padding: 68px 0;
            }

            .section-tight {
                padding: 55px 0;
            }

            .metric-row,
            .signal-grid {
                grid-template-columns: 1fr;
            }

            .signal-item:nth-child(2),
            .signal-item:nth-child(4) {
                transform: none;
            }

            .signal-item:nth-child(2):hover,
            .signal-item:nth-child(4):hover {
                transform: translateY(-5px);
            }

            .method-list,
            .latest-content {
                padding: 25px 21px;
            }

            .method-visual,
            .method-visual img {
                min-height: 340px;
            }

            .scenario-card {
                grid-column: span 12;
            }

            .scenario-lead {
                padding: 28px 23px;
            }

            .process-board {
                padding-left: 23px;
            }

            .cta-layout {
                display: block;
            }

            .cta-actions {
                margin-top: 25px;
            }

            .cta-actions .button {
                width: 100%;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .footer-bottom {
                align-items: flex-start;
                flex-direction: column;
                gap: 7px;
            }

            .floating-note {
                left: 14px;
                bottom: 18px;
            }
        }

        @media (max-width: 420px) {
            .brand-mark {
                width: 35px;
                height: 35px;
            }

            .brand-text {
                max-width: 145px;
                font-size: 13px;
            }

            .hero-actions .button {
                width: 100%;
            }

            .hero-signals {
                display: grid;
                gap: 11px;
            }

            .panel-steps li {
                grid-template-columns: 30px 1fr;
            }

            .step-number {
                width: 30px;
                height: 30px;
            }
        }