/* roulang page: index */
:root {
            --wine: #4a0007;
            --crimson: #8b0000;
            --crimson-deep: #260007;
            --gold: #ffd700;
            --amber: #ff9f00;
            --cream: #fffdf9;
            --muted: #e7c9b4;
            --ink: #1e080b;
            --line: rgba(255,215,0,.22);
            --panel: rgba(94, 7, 15, .72);
            --panel-dark: rgba(38, 0, 7, .86);
            --shadow: 0 24px 60px rgba(13,0,2,.34);
            --radius-lg: 28px;
            --radius-md: 17px;
            --ease: 260ms cubic-bezier(.2,.75,.25,1);
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--cream);
            background: var(--crimson-deep);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
        }
        img { max-width: 100%; display: block; }
        a { color: inherit; text-decoration: none; }
        button, input, select, textarea { font: inherit; }
        button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
            outline: 3px solid var(--gold);
            outline-offset: 3px;
        }
        .container { max-width: 1180px; }
        .section-space { padding: 96px 0; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--gold);
            font-size: .74rem;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--amber);
            box-shadow: 0 0 12px var(--amber);
        }
        .section-heading {
            max-width: 690px;
            margin-bottom: 42px;
        }
        .section-heading h2 {
            margin: 14px 0 12px;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(2rem, 4vw, 3.3rem);
            line-height: 1.12;
            letter-spacing: -.035em;
        }
        .section-heading p { color: var(--muted); max-width: 650px; margin: 0; }
        .topbar {
            position: fixed;
            inset: 0 0 auto;
            z-index: 1000;
            background: rgba(38,0,7,.88);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }
        .nav-shell {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 26px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: 245px;
            font-weight: 800;
            line-height: 1.05;
        }
        .brand-mark {
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            color: var(--wine);
            background: linear-gradient(145deg, var(--gold), var(--amber));
            border-radius: 13px;
            font-size: 1.25rem;
            box-shadow: 0 5px 18px rgba(255,159,0,.32);
        }
        .brand-text { font-size: .93rem; }
        .brand-text small {
            display: block;
            color: var(--gold);
            font-size: .65rem;
            letter-spacing: .08em;
            margin-top: 4px;
        }
        .nav-links {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 1;
        }
        .nav-links a {
            padding: 10px 13px;
            color: #f1d9ca;
            border-radius: 10px;
            font-size: .88rem;
            transition: var(--ease);
        }
        .nav-links a:hover, .nav-links a.active {
            color: var(--gold);
            background: rgba(255,215,0,.09);
        }
        .nav-actions { display: flex; align-items: center; gap: 13px; white-space: nowrap; }
        .login-link { color: var(--cream); font-size: .88rem; transition: var(--ease); }
        .login-link:hover { color: var(--gold); }
        .btn-gold {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--gold);
            border-radius: 999px;
            padding: 12px 21px;
            color: var(--wine);
            background: linear-gradient(135deg, var(--gold), var(--amber));
            box-shadow: 0 10px 25px rgba(255,159,0,.2);
            font-weight: 800;
            font-size: .88rem;
            transition: transform var(--ease), box-shadow var(--ease), filter var(--ease);
        }
        .btn-gold:hover { color: var(--wine); transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 15px 30px rgba(255,159,0,.34); }
        .btn-gold:active { transform: translateY(1px) scale(.98); }
        .btn-outline-gold {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1px solid rgba(255,215,0,.62);
            border-radius: 999px;
            padding: 12px 21px;
            color: var(--gold);
            background: rgba(255,215,0,.04);
            font-weight: 800;
            font-size: .88rem;
            transition: var(--ease);
        }
        .btn-outline-gold:hover { color: var(--cream); background: rgba(255,215,0,.12); transform: translateY(-3px); }
        .nav-toggle {
            display: none;
            color: var(--gold);
            background: transparent;
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 7px 10px;
        }
        .hero {
            min-height: 760px;
            padding: 158px 0 85px;
            position: relative;
            background:
                linear-gradient(90deg, rgba(38,0,7,.96) 0%, rgba(57,0,8,.78) 48%, rgba(38,0,7,.72) 100%),
                url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
        }
        .hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 170px;
            background: linear-gradient(transparent, var(--crimson-deep));
            pointer-events: none;
        }
        .hero .container { position: relative; z-index: 1; }
        .hero-copy { padding: 34px 0; }
        .hero h1 {
            max-width: 760px;
            margin: 16px 0 22px;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(2.7rem, 6vw, 5.35rem);
            line-height: 1.02;
            letter-spacing: -.055em;
        }
        .hero h1 span { color: var(--gold); }
        .hero-lead {
            max-width: 650px;
            margin: 0 0 30px;
            color: #f8ded0;
            font-size: 1.09rem;
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 36px; }
        .hero-stats { display: flex; flex-wrap: wrap; gap: 26px; }
        .hero-stat { padding-left: 15px; border-left: 2px solid var(--amber); }
        .hero-stat strong { display: block; color: var(--gold); font-size: 1.35rem; line-height: 1.2; }
        .hero-stat span { color: var(--muted); font-size: .78rem; }
        .scoreboard {
            position: relative;
            margin: 10px 0 0 auto;
            max-width: 440px;
            padding: 25px;
            border: 1px solid rgba(255,215,0,.37);
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, rgba(117,10,20,.86), rgba(43,0,7,.92));
            box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.1);
            transform: rotate(1deg);
        }
        .scoreboard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 21px; }
        .scoreboard-head h2 { font-size: 1.03rem; margin: 0; }
        .live-dot { color: #ffd9a0; font-size: .73rem; }
        .live-dot::before {
            content: "";
            display: inline-block;
            width: 8px; height: 8px; margin-right: 6px;
            border-radius: 50%; background: #56e38b;
            box-shadow: 0 0 11px #56e38b;
        }
        .rank-row {
            display: grid;
            grid-template-columns: 34px 1fr auto;
            gap: 12px;
            align-items: center;
            padding: 14px 0;
            border-top: 1px solid rgba(255,255,255,.1);
        }
        .rank-number { color: var(--gold); font-weight: 900; }
        .rank-name { font-weight: 750; font-size: .91rem; }
        .rank-meta { display: block; color: var(--muted); font-size: .72rem; }
        .rank-score { color: var(--gold); font-size: .83rem; font-weight: 800; }
        .ticker {
            margin-top: 28px;
            padding: 13px 18px;
            border: 1px solid var(--line);
            border-radius: 12px;
            color: #ffe6b7;
            background: rgba(255,159,0,.08);
            font-size: .82rem;
        }
        .ticker strong { color: var(--gold); margin-right: 8px; }
        .gold-band { background: linear-gradient(100deg, #ffb400, #ffd700 48%, #ef8d00); color: var(--wine); }
        .gold-band .container { padding-top: 15px; padding-bottom: 15px; }
        .band-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-weight: 800; }
        .band-content p { margin: 0; font-size: .92rem; }
        .band-content a { border-bottom: 1px solid currentColor; font-size: .82rem; }
        .section-dark { background: var(--crimson-deep); }
        .section-wine { background: linear-gradient(135deg, var(--wine), #69000d); }
        .benefit-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 62px; align-items: start; }
        .benefit-list { border-top: 1px solid var(--line); }
        .benefit-item {
            display: grid;
            grid-template-columns: 52px 1fr;
            gap: 18px;
            padding: 23px 0;
            border-bottom: 1px solid var(--line);
        }
        .benefit-icon {
            width: 44px; height: 44px;
            display: grid; place-items: center;
            color: var(--wine);
            background: var(--gold);
            border-radius: 14px;
            font-size: 1.15rem;
            font-weight: 900;
        }
        .benefit-item h3 { margin: 0 0 5px; font-size: 1.04rem; }
        .benefit-item p { margin: 0; color: var(--muted); font-size: .88rem; }
        .feature-image { position: relative; min-height: 425px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
        .feature-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
        .feature-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(38,0,7,.91), transparent 65%); }
        .image-caption { position: absolute; z-index: 1; left: 25px; right: 25px; bottom: 23px; }
        .image-caption strong { display: block; color: var(--gold); font-size: 1.33rem; }
        .image-caption span { color: #ffe8d9; font-size: .84rem; }
        .pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .pick-card {
            position: relative;
            overflow: hidden;
            min-height: 270px;
            border: 1px solid rgba(255,215,0,.22);
            border-radius: var(--radius-md);
            background: #350008;
            transition: var(--ease);
        }
        .pick-card:hover { transform: translateY(-7px); border-color: var(--gold); box-shadow: 0 18px 35px rgba(0,0,0,.3); }
        .pick-card img { width: 100%; height: 165px; object-fit: cover; opacity: .86; transition: transform 500ms ease; }
        .pick-card:hover img { transform: scale(1.07); }
        .pick-card-body { padding: 16px 17px; }
        .pick-card h3 { margin: 0 0 5px; font-size: 1rem; }
        .pick-card p { margin: 0; color: var(--muted); font-size: .78rem; }
        .hot-tag {
            position: absolute; top: 13px; left: 13px;
            padding: 4px 9px; border-radius: 99px;
            color: #fff; background: var(--crimson);
            font-size: .64rem; font-weight: 900; letter-spacing: .08em;
        }
        .criteria { background: #fff8ef; color: var(--ink); }
        .criteria .section-heading p { color: #725d59; }
        .criteria .eyebrow { color: var(--crimson); }
        .criteria .eyebrow::before { background: var(--crimson); box-shadow: none; }
        .criteria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .criteria-card { padding: 29px 25px; border: 1px solid #ecd7c8; border-radius: var(--radius-md); background: #fff; transition: var(--ease); }
        .criteria-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(74,0,7,.1); }
        .criteria-card .num { color: var(--crimson); font-size: 2rem; font-weight: 900; line-height: 1; }
        .criteria-card h3 { margin: 18px 0 9px; font-size: 1.05rem; }
        .criteria-card p { color: #725d59; margin: 0; font-size: .88rem; }
        .media-section { background: #350008; }
        .media-row { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 14px; scrollbar-color: var(--amber) transparent; }
        .media-card { flex: 0 0 280px; border-left: 3px solid var(--amber); padding: 3px 0 3px 18px; }
        .media-card img { height: 145px; width: 100%; object-fit: cover; border-radius: 14px; margin-bottom: 15px; }
        .media-card .media-type { color: var(--gold); font-size: .68rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
        .media-card h3 { font-size: 1rem; margin: 7px 0; }
        .media-card p { color: var(--muted); font-size: .8rem; margin: 0; }
        .latest-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: start; }
        .news-list { border-top: 1px solid var(--line); }
        .news-item { display: flex; gap: 20px; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--line); }
        .news-item h3 { margin: 0 0 5px; font-size: 1rem; line-height: 1.4; }
        .news-item p { margin: 0; color: var(--muted); font-size: .82rem; }
        .news-date { flex: 0 0 auto; color: var(--gold); font-size: .75rem; }
        .empty-news { padding: 22px 0; color: var(--muted); }
        .quote-panel { padding: 31px; border-radius: var(--radius-lg); background: linear-gradient(145deg, #72000d, #390008); border: 1px solid var(--line); }
        .quote-panel blockquote { margin: 0 0 20px; color: #ffe8d8; font-family: Georgia, serif; font-size: 1.35rem; line-height: 1.4; }
        .quote-panel cite { color: var(--gold); font-size: .82rem; font-style: normal; }
        .join-section { background: linear-gradient(125deg, #2b0006 0%, #68000d 50%, #350008 100%); }
        .join-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
        .join-copy h2 { margin: 16px 0; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.1; }
        .join-copy p { color: var(--muted); max-width: 500px; }
        .trust-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
        .trust-pill { padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; color: #ffe6d3; font-size: .76rem; }
        .lead-form { padding: 30px; border-radius: var(--radius-lg); background: #fff8ef; color: var(--ink); box-shadow: var(--shadow); }
        .lead-form h3 { margin: 0 0 7px; font-family: Georgia, serif; font-size: 1.7rem; }
        .lead-form > p { color: #725d59; font-size: .84rem; margin-bottom: 22px; }
        .form-label { color: #4a2222; font-size: .79rem; font-weight: 800; margin-bottom: 6px; }
        .form-control { min-height: 47px; border: 1px solid #e4cabe; border-radius: 11px; background: #fff; }
        .form-control:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,159,0,.15); }
        .privacy-note { color: #866f69; font-size: .7rem; margin-top: 14px; }
        .faq-section { background: #fff8ef; color: var(--ink); }
        .faq-section .section-heading p { color: #725d59; }
        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 50px; }
        .faq-item { border-bottom: 1px solid #e7d5c8; }
        .faq-item summary { cursor: pointer; list-style: none; padding: 19px 35px 19px 0; position: relative; font-weight: 800; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after { content: "+"; position: absolute; right: 3px; color: var(--crimson); font-size: 1.4rem; font-weight: 400; }
        .faq-item[open] summary::after { content: "−"; }
        .faq-item p { color: #725d59; font-size: .86rem; margin: -5px 0 19px; }
        .final-cta { padding: 74px 0; text-align: center; background: linear-gradient(120deg, var(--crimson), #b20c17); }
        .final-cta h2 { margin: 10px auto 12px; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); }
        .final-cta p { max-width: 680px; margin: 0 auto 24px; color: #ffe4d3; }
        footer { padding: 58px 0 24px; background: #210005; border-top: 1px solid var(--line); }
        .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; }
        footer h3 { color: var(--gold); font-size: .88rem; margin: 0 0 16px; }
        footer p, footer li, footer a { color: #cdaea2; font-size: .79rem; }
        footer p { max-width: 300px; }
        footer ul { margin: 0; padding: 0; list-style: none; }
        footer li { margin-bottom: 9px; }
        footer a:hover { color: var(--gold); }
        .footer-brand { margin-bottom: 16px; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,215,0,.14); color: #a4877c; font-size: .72rem; }
        .responsible { color: var(--gold); }
        .fab {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 50;
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            color: var(--gold);
            border: 2px solid var(--gold);
            border-radius: 50%;
            background: radial-gradient(circle at 35% 28%, #76151d, #210005 70%);
            box-shadow: 0 4px 20px rgba(255,215,0,.3);
            opacity: .76;
            font-size: 1.45rem;
            transition: var(--ease);
            animation: floaty 3.2s ease-in-out infinite;
        }
        .fab:hover { opacity: 1; transform: scale(1.1) rotate(360deg); }
        .fab:active { transform: scale(.95) translateY(2px); }
        .fab::after { content: ""; position: absolute; top: 0; right: 1px; width: 10px; height: 10px; border: 2px solid var(--crimson-deep); border-radius: 50%; background: #e52a32; animation: blink 1.5s infinite; }
        @keyframes floaty { 0%,100% { margin-bottom: 0; } 50% { margin-bottom: 7px; } }
        @keyframes blink { 50% { opacity: .3; } }
        @media (max-width: 1100px) {
            .brand { min-width: 220px; }
            .nav-links a { padding: 9px 8px; font-size: .82rem; }
            .benefit-grid, .join-layout { gap: 38px; }
        }
        @media (max-width: 900px) {
            .nav-shell { min-height: 70px; flex-wrap: wrap; }
            .nav-toggle { display: block; margin-left: auto; }
            .nav-links { order: 4; display: none; width: 100%; flex-direction: column; align-items: stretch; padding: 8px 0 16px; }
            .nav-links.show { display: flex; }
            .nav-links a { padding: 11px 14px; }
            .nav-actions { margin-left: auto; }
            .hero { padding-top: 130px; }
            .benefit-grid, .latest-layout, .join-layout { grid-template-columns: 1fr; }
            .scoreboard { margin: 30px 0 0; max-width: none; transform: none; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 650px) {
            .section-space { padding: 70px 0; }
            .hero { min-height: auto; padding-bottom: 75px; }
            .hero h1 { font-size: clamp(2.45rem, 12vw, 4rem); }
            .hero-lead { font-size: .97rem; }
            .hero-actions, .band-content { align-items: stretch; flex-direction: column; }
            .hero-actions a { width: 100%; }
            .hero-stats { gap: 16px; }
            .pick-grid, .criteria-grid, .faq-grid { grid-template-columns: 1fr; }
            .feature-image { min-height: 335px; }
            .footer-grid { grid-template-columns: 1fr; gap: 25px; }
            .footer-bottom { flex-direction: column; }
            .brand { min-width: 0; max-width: 190px; }
            .brand-text { font-size: .78rem; }
            .nav-actions { gap: 9px; }
            .login-link { font-size: .76rem; }
            .nav-actions .btn-gold { padding: 10px 13px; font-size: .76rem; }
            .fab { left: 14px; bottom: 80px; }
        }

/* roulang page: article */
:root {
            --wine: #4a0007;
            --crimson: #8b0000;
            --crimson-deep: #260007;
            --gold: #ffd700;
            --amber: #ff9f00;
            --cream: #fffdf9;
            --muted: #e7c9b4;
            --ink: #1e080b;
            --line: rgba(255,215,0,.22);
            --line-soft: rgba(255,253,249,.12);
            --panel: rgba(94, 7, 15, .72);
            --panel-dark: rgba(38, 0, 7, .86);
            --shadow: 0 24px 60px rgba(13,0,2,.34);
            --shadow-soft: 0 14px 36px rgba(13,0,2,.24);
            --radius-lg: 28px;
            --radius-md: 17px;
            --radius-sm: 11px;
            --ease: 260ms cubic-bezier(.2,.75,.25,1);
        }

        html {
            scroll-behavior: smooth;
        }

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

        body {
            margin: 0;
            color: var(--cream);
            background:
                radial-gradient(circle at 8% 15%, rgba(139,0,0,.34), transparent 27rem),
                var(--crimson-deep);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }

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

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

        button, input, select, textarea {
            font: inherit;
        }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        textarea:focus-visible {
            outline: 3px solid var(--gold);
            outline-offset: 3px;
        }

        .container {
            width: min(1180px, calc(100% - 40px));
            max-width: 1180px;
            margin: 0 auto;
        }

        .section-space {
            padding: 96px 0;
        }

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

        .eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--amber);
            box-shadow: 0 0 12px var(--amber);
        }

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

        .section-heading h2 {
            margin: 14px 0 12px;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(2rem, 4vw, 3.25rem);
            line-height: 1.12;
            letter-spacing: -.035em;
        }

        .section-heading p {
            color: var(--muted);
            max-width: 650px;
            margin: 0;
        }

        .topbar {
            position: fixed;
            inset: 0 0 auto;
            z-index: 1000;
            background: rgba(38,0,7,.9);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }

        .nav-shell {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 26px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: 245px;
            font-weight: 800;
            line-height: 1.05;
        }

        .brand-mark {
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            flex: 0 0 40px;
            color: var(--wine);
            background: linear-gradient(145deg, var(--gold), var(--amber));
            border-radius: 13px;
            font-size: 1.25rem;
            box-shadow: 0 5px 18px rgba(255,159,0,.32);
        }

        .brand-text {
            font-size: .93rem;
        }

        .brand-text small {
            display: block;
            color: var(--gold);
            font-size: .65rem;
            letter-spacing: .08em;
            margin-top: 4px;
        }

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

        .nav-links a {
            padding: 10px 13px;
            color: #f1d9ca;
            border-radius: 10px;
            font-size: .88rem;
            transition: var(--ease);
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--gold);
            background: rgba(255,215,0,.09);
        }

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

        .login-link {
            color: #f7dfd1;
            font-size: .88rem;
            font-weight: 700;
            transition: color var(--ease);
        }

        .login-link:hover {
            color: var(--gold);
        }

        .btn-gold,
        .btn-outline-gold {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 999px;
            padding: 12px 21px;
            font-size: .88rem;
            font-weight: 800;
            transition: transform var(--ease), box-shadow var(--ease), filter var(--ease), background var(--ease);
        }

        .btn-gold {
            color: var(--wine);
            background: linear-gradient(135deg, var(--gold), var(--amber));
            border: 1px solid var(--gold);
            box-shadow: 0 10px 25px rgba(255,159,0,.2);
        }

        .btn-gold:hover {
            color: var(--wine);
            transform: translateY(-3px);
            filter: brightness(1.08);
            box-shadow: 0 15px 30px rgba(255,159,0,.34);
        }

        .btn-gold:active {
            transform: translateY(1px) scale(.98);
        }

        .btn-outline-gold {
            color: var(--gold);
            background: rgba(255,215,0,.04);
            border: 1px solid rgba(255,215,0,.62);
        }

        .btn-outline-gold:hover {
            color: var(--cream);
            background: rgba(255,215,0,.12);
            transform: translateY(-3px);
        }

        .nav-toggle {
            display: none;
            color: var(--gold);
            background: transparent;
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 7px 10px;
            cursor: pointer;
        }

        .article-hero {
            position: relative;
            padding: 158px 0 92px;
            min-height: 470px;
            background:
                linear-gradient(100deg, rgba(38,0,7,.97) 5%, rgba(74,0,7,.84) 54%, rgba(38,0,7,.78) 100%),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            border-bottom: 1px solid rgba(255,215,0,.16);
        }

        .article-hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 130px;
            background: linear-gradient(transparent, var(--crimson-deep));
            pointer-events: none;
        }

        .article-hero .container {
            position: relative;
            z-index: 1;
        }

        .breadcrumb-line {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-bottom: 25px;
            color: var(--muted);
            font-size: .86rem;
        }

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

        .breadcrumb-line span {
            color: rgba(255,253,249,.42);
        }

        .article-hero h1 {
            max-width: 910px;
            margin: 0 0 22px;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(2.25rem, 5vw, 4.55rem);
            line-height: 1.05;
            letter-spacing: -.05em;
        }

        .article-summary {
            max-width: 790px;
            margin: 0;
            color: #f2d8ca;
            font-size: 1.12rem;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 24px;
            margin-top: 28px;
            color: var(--muted);
            font-size: .86rem;
        }

        .article-meta strong {
            color: var(--gold);
            font-weight: 700;
        }

        .article-main {
            position: relative;
            padding: 76px 0 100px;
        }

        .article-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 310px;
            gap: 52px;
            align-items: start;
        }

        .article-content {
            min-width: 0;
            padding: 0 8px 0 0;
        }

        .article-cover {
            width: 100%;
            max-height: 430px;
            object-fit: cover;
            border-radius: var(--radius-lg);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            margin-bottom: 42px;
        }

        .cms-content {
            color: #f5dfd2;
            font-size: 1.05rem;
            line-height: 1.78;
        }

        .cms-content h2,
        .cms-content h3,
        .cms-content h4 {
            color: var(--cream);
            font-family: Georgia, "Times New Roman", serif;
            line-height: 1.2;
            margin: 42px 0 16px;
        }

        .cms-content h2 {
            font-size: clamp(1.8rem, 3vw, 2.55rem);
        }

        .cms-content h3 {
            font-size: 1.55rem;
        }

        .cms-content p {
            margin: 0 0 22px;
        }

        .cms-content a {
            color: var(--gold);
            text-decoration: underline;
            text-decoration-color: rgba(255,215,0,.45);
            text-underline-offset: 3px;
        }

        .cms-content a:hover {
            color: var(--amber);
        }

        .cms-content ul,
        .cms-content ol {
            margin: 18px 0 28px;
            padding-left: 25px;
        }

        .cms-content li {
            margin: 9px 0;
            padding-left: 5px;
        }

        .cms-content blockquote {
            margin: 32px 0;
            padding: 23px 27px;
            color: #fff4df;
            background: rgba(139,0,0,.36);
            border-left: 3px solid var(--gold);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
        }

        .cms-content img {
            border-radius: var(--radius-md);
            margin: 28px 0;
        }

        .article-sidebar {
            position: sticky;
            top: 105px;
        }

        .side-panel {
            padding: 26px;
            background: linear-gradient(145deg, rgba(117,9,18,.78), rgba(38,0,7,.9));
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-soft);
        }

        .side-panel + .side-panel {
            margin-top: 20px;
        }

        .side-panel h2,
        .side-panel h3 {
            margin: 0 0 16px;
            color: var(--cream);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.35rem;
        }

        .side-panel p {
            margin: 0;
            color: var(--muted);
            font-size: .92rem;
        }

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

        .quick-list li {
            display: flex;
            gap: 11px;
            align-items: flex-start;
            color: #f1d9ca;
            font-size: .9rem;
        }

        .quick-list li::before {
            content: "✦";
            flex: 0 0 auto;
            color: var(--gold);
            margin-top: 1px;
        }

        .trust-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 22px;
        }

        .trust-badge,
        .category-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 11px;
            color: #ffeeb2;
            background: rgba(255,215,0,.08);
            border: 1px solid rgba(255,215,0,.3);
            border-radius: 999px;
            font-size: .76rem;
            font-weight: 700;
        }

        .article-note {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 28px;
            align-items: center;
            margin-top: 58px;
            padding: 30px;
            background:
                linear-gradient(135deg, rgba(139,0,0,.42), rgba(74,0,7,.78)),
                url('/assets/images/backpic/back-3.jpg') center/cover;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-soft);
        }

        .article-note h2 {
            margin: 0 0 12px;
            color: var(--cream);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.8rem;
        }

        .article-note p {
            margin: 0;
            color: var(--muted);
        }

        .note-points {
            display: grid;
            gap: 11px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .note-points li {
            padding: 12px 14px;
            color: #ffe9d6;
            background: rgba(38,0,7,.52);
            border: 1px solid var(--line-soft);
            border-radius: var(--radius-sm);
            font-size: .9rem;
        }

        .note-points strong {
            display: block;
            color: var(--gold);
            font-size: .78rem;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .cta-section {
            padding: 80px 0;
            background:
                radial-gradient(circle at 85% 25%, rgba(255,159,0,.18), transparent 19rem),
                linear-gradient(135deg, #610008, #260007);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .cta-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 35px;
            padding: 43px 48px;
            background: rgba(38,0,7,.54);
            border: 1px solid rgba(255,215,0,.32);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }

        .cta-box h2 {
            margin: 0 0 10px;
            color: var(--cream);
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(1.8rem, 3vw, 2.75rem);
            line-height: 1.15;
        }

        .cta-box p {
            max-width: 680px;
            margin: 0;
            color: var(--muted);
        }

        .cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            flex: 0 0 auto;
        }

        footer {
            padding: 72px 0 26px;
            background: #210006;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, 1fr);
            gap: 42px;
            padding-bottom: 52px;
        }

        .footer-brand {
            margin-bottom: 22px;
        }

        footer p {
            max-width: 320px;
            margin: 0;
            color: var(--muted);
            font-size: .9rem;
        }

        footer h3 {
            margin: 3px 0 16px;
            color: var(--gold);
            font-size: .94rem;
            font-weight: 800;
        }

        footer ul {
            display: grid;
            gap: 9px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        footer li,
        footer li a {
            color: #e9cbbd;
            font-size: .87rem;
        }

        footer li a {
            transition: color var(--ease);
        }

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

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 23px;
            color: rgba(231,201,180,.72);
            border-top: 1px solid var(--line-soft);
            font-size: .78rem;
        }

        .responsible {
            color: var(--gold);
            text-align: right;
        }

        .fab {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 950;
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            color: var(--gold);
            background: rgba(38,0,7,.94);
            border: 2px solid var(--gold);
            border-radius: 50%;
            box-shadow: 0 4px 20px rgba(255,215,0,.3);
            opacity: .78;
            font-size: 1.35rem;
            transition: transform var(--ease), opacity var(--ease), box-shadow var(--ease);
            animation: floatCoin 3.6s ease-in-out infinite;
        }

        .fab::after {
            content: "MỚI";
            position: absolute;
            top: -8px;
            right: -12px;
            padding: 2px 5px;
            color: #fff;
            background: var(--crimson);
            border: 1px solid var(--gold);
            border-radius: 5px;
            font-size: .55rem;
            font-weight: 900;
            animation: blinkRuby 1.6s ease-in-out infinite;
        }

        .fab:hover {
            opacity: 1;
            transform: scale(1.1);
            box-shadow: 0 6px 28px rgba(255,215,0,.5);
        }

        .fab:hover span {
            transform: rotate(360deg);
        }

        .fab span {
            transition: transform .7s ease;
        }

        .empty-state {
            max-width: 760px;
            margin: 0 auto;
            padding: 65px 35px;
            text-align: center;
            background: rgba(94,7,15,.65);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-soft);
        }

        .empty-state h2 {
            margin: 0 0 12px;
            color: var(--cream);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 2rem;
        }

        .empty-state p {
            margin: 0 0 24px;
            color: var(--muted);
        }

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

        @keyframes blinkRuby {
            0%, 100% { opacity: .55; }
            50% { opacity: 1; }
        }

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

            .brand {
                min-width: 220px;
            }

            .nav-links a {
                padding-left: 9px;
                padding-right: 9px;
                font-size: .82rem;
            }

            .article-layout {
                grid-template-columns: minmax(0, 1fr) 270px;
                gap: 32px;
            }

            .footer-grid {
                grid-template-columns: 1.3fr repeat(3, 1fr);
                gap: 24px;
            }
        }

        @media (max-width: 768px) {
            .container {
                width: min(100% - 30px, 680px);
            }

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

            .nav-shell {
                min-height: 70px;
                flex-wrap: wrap;
                gap: 10px;
            }

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

            .nav-toggle {
                display: block;
                order: 2;
            }

            .nav-actions {
                order: 3;
                gap: 8px;
            }

            .nav-actions .login-link {
                display: inline-block;
                font-size: .78rem;
            }

            .nav-actions .btn-gold {
                padding: 9px 13px;
                font-size: .75rem;
            }

            .nav-links {
                display: none;
                order: 4;
                flex-basis: 100%;
                align-items: stretch;
                flex-direction: column;
                gap: 3px;
                padding: 10px 0 15px;
                border-top: 1px solid var(--line-soft);
            }

            .nav-links.show {
                display: flex;
            }

            .nav-links a {
                padding: 11px 13px;
            }

            .article-hero {
                padding: 135px 0 72px;
            }

            .article-layout {
                display: block;
            }

            .article-sidebar {
                position: static;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 18px;
                margin-top: 42px;
            }

            .side-panel + .side-panel {
                margin-top: 0;
            }

            .article-note {
                grid-template-columns: 1fr;
                padding: 26px;
            }

            .cta-box {
                display: block;
                padding: 32px 26px;
            }

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

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

            .footer-grid > div:first-child {
                grid-column: 1 / -1;
            }
        }

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

            .container {
                width: min(100% - 24px, 480px);
            }

            .brand-mark {
                width: 35px;
                height: 35px;
                flex-basis: 35px;
                border-radius: 10px;
                font-size: 1rem;
            }

            .brand-text {
                font-size: .78rem;
            }

            .brand-text small {
                font-size: .54rem;
            }

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

            .article-hero h1 {
                font-size: 2.35rem;
            }

            .article-summary {
                font-size: 1rem;
            }

            .article-main {
                padding: 54px 0 70px;
            }

            .article-content {
                padding: 0;
            }

            .cms-content {
                font-size: 1rem;
            }

            .article-sidebar {
                display: block;
            }

            .side-panel + .side-panel {
                margin-top: 16px;
            }

            .article-note {
                margin-top: 40px;
                padding: 22px;
            }

            .cta-section {
                padding: 58px 0;
            }

            .cta-actions,
            .cta-actions a {
                width: 100%;
            }

            .cta-actions a {
                text-align: center;
            }

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

            .footer-grid > div:first-child {
                grid-column: auto;
            }

            .footer-bottom {
                display: block;
                line-height: 1.7;
            }

            .responsible {
                margin-top: 9px;
                text-align: left;
            }

            .fab {
                left: 14px;
                bottom: 24px;
            }
        }

/* roulang page: category1 */
:root {
            --wine:#4a0007;
            --crimson:#8b0000;
            --crimson-deep:#260007;
            --gold:#ffd700;
            --amber:#ff9f00;
            --cream:#fffdf9;
            --muted:#e7c9b4;
            --line:rgba(255,215,0,.22);
            --panel:rgba(94,7,15,.72);
            --panel-dark:rgba(38,0,7,.88);
            --soft-red:#b91f27;
            --shadow:0 24px 60px rgba(13,0,2,.34);
            --radius-lg:28px;
            --radius-md:17px;
            --ease:260ms cubic-bezier(.2,.75,.25,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--cream);
            background:var(--crimson-deep);
            font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            line-height:1.65;
            overflow-x:hidden;
        }
        img{max-width:100%;display:block}
        a{color:inherit;text-decoration:none}
        button,input,select,textarea{font:inherit}
        button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
            outline:3px solid var(--gold);
            outline-offset:3px;
        }
        .container{max-width:1180px}
        .section-space{padding:94px 0}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:9px;
            color:var(--gold);
            font-size:.74rem;
            font-weight:800;
            letter-spacing:.16em;
            text-transform:uppercase;
        }
        .eyebrow:before{
            content:"";
            width:28px;
            height:2px;
            background:var(--amber);
            box-shadow:0 0 12px var(--amber);
        }
        .section-heading{max-width:700px;margin-bottom:42px}
        .section-heading h2{
            margin:14px 0 12px;
            font-family:Georgia,"Times New Roman",serif;
            font-size:clamp(2rem,4vw,3.25rem);
            line-height:1.12;
            letter-spacing:-.035em;
        }
        .section-heading p{color:var(--muted);max-width:650px;margin:0}
        .topbar{
            position:fixed;
            inset:0 0 auto;
            z-index:1000;
            background:rgba(38,0,7,.9);
            border-bottom:1px solid var(--line);
            backdrop-filter:blur(18px);
        }
        .nav-shell{
            min-height:78px;
            display:flex;
            align-items:center;
            gap:24px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:11px;
            min-width:245px;
            font-weight:800;
            line-height:1.05;
        }
        .brand-mark{
            width:40px;
            height:40px;
            display:grid;
            place-items:center;
            color:var(--wine);
            background:linear-gradient(145deg,var(--gold),var(--amber));
            border-radius:13px;
            font-size:1.25rem;
            box-shadow:0 5px 18px rgba(255,159,0,.32);
        }
        .brand-text{font-size:.93rem}
        .brand-text small{
            display:block;
            color:var(--gold);
            font-size:.65rem;
            letter-spacing:.08em;
            margin-top:4px;
        }
        .nav-links{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:5px;
            flex:1;
        }
        .nav-links a{
            padding:10px 13px;
            color:#f1d9ca;
            border-radius:10px;
            font-size:.88rem;
            transition:var(--ease);
        }
        .nav-links a:hover,.nav-links a.active{
            color:var(--gold);
            background:rgba(255,215,0,.09);
        }
        .nav-actions{
            display:flex;
            align-items:center;
            gap:13px;
            white-space:nowrap;
        }
        .login-link{
            color:#f8ded0;
            font-size:.88rem;
            font-weight:700;
            transition:var(--ease);
        }
        .login-link:hover{color:var(--gold)}
        .btn-gold,.btn-outline-gold{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            border-radius:999px;
            font-weight:800;
            font-size:.88rem;
            transition:transform var(--ease),box-shadow var(--ease),filter var(--ease),background var(--ease);
        }
        .btn-gold{
            border:1px solid var(--gold);
            padding:12px 21px;
            color:var(--wine);
            background:linear-gradient(135deg,var(--gold),var(--amber));
            box-shadow:0 10px 25px rgba(255,159,0,.2);
        }
        .btn-gold:hover{
            color:var(--wine);
            transform:translateY(-3px);
            filter:brightness(1.08);
            box-shadow:0 15px 30px rgba(255,159,0,.34);
        }
        .btn-gold:active{transform:translateY(1px) scale(.98)}
        .btn-outline-gold{
            border:1px solid rgba(255,215,0,.62);
            padding:12px 21px;
            color:var(--gold);
            background:rgba(255,215,0,.04);
        }
        .btn-outline-gold:hover{
            color:var(--cream);
            background:rgba(255,215,0,.12);
            transform:translateY(-3px);
        }
        .nav-toggle{
            display:none;
            color:var(--gold);
            background:transparent;
            border:1px solid var(--line);
            border-radius:10px;
            padding:7px 10px;
        }
        .page-hero{
            position:relative;
            padding:156px 0 90px;
            min-height:560px;
            background:
                linear-gradient(100deg,rgba(38,0,7,.97) 8%,rgba(74,0,7,.82) 54%,rgba(38,0,7,.78)),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
        }
        .page-hero:after{
            content:"";
            position:absolute;
            inset:auto 0 0;
            height:130px;
            background:linear-gradient(transparent,var(--crimson-deep));
            pointer-events:none;
        }
        .page-hero .container{position:relative;z-index:1}
        .hero-copy{max-width:670px}
        .hero-copy h1{
            margin:17px 0 20px;
            font-family:Georgia,"Times New Roman",serif;
            font-size:clamp(2.55rem,5.5vw,4.7rem);
            line-height:1.04;
            letter-spacing:-.055em;
        }
        .hero-copy h1 span{color:var(--gold)}
        .hero-copy p{max-width:620px;color:#f0d8cc;font-size:1.08rem;margin-bottom:27px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
        .hero-note{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px;color:#f2c9a9;font-size:.87rem}
        .hero-note span{display:inline-flex;align-items:center;gap:7px}
        .hero-note b{color:var(--gold)}
        .ranking-panel{
            position:relative;
            max-width:415px;
            margin-left:auto;
            padding:25px;
            background:linear-gradient(145deg,rgba(117,13,20,.88),rgba(38,0,7,.94));
            border:1px solid rgba(255,215,0,.32);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow);
        }
        .ranking-panel:before{
            content:"";
            position:absolute;
            width:120px;height:120px;
            top:-30px;right:-30px;
            background:rgba(255,159,0,.16);
            filter:blur(30px);
            border-radius:50%;
            pointer-events:none;
        }
        .panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
        .panel-top h2{font-size:1.05rem;margin:0;font-weight:800}
        .live-dot{display:inline-flex;align-items:center;gap:7px;color:#ffdca6;font-size:.73rem}
        .live-dot i{width:8px;height:8px;border-radius:50%;background:#58d36b;box-shadow:0 0 12px #58d36b;animation:pulse 1.7s infinite}
        .rank-row{
            display:grid;
            grid-template-columns:34px 1fr auto;
            align-items:center;
            gap:12px;
            padding:13px 0;
            border-top:1px solid rgba(255,215,0,.13);
        }
        .rank-number{color:var(--gold);font-family:Georgia,serif;font-size:1.35rem}
        .rank-name{font-weight:750;font-size:.92rem}
        .rank-meta{display:block;color:var(--muted);font-size:.72rem}
        .rank-score{
            padding:5px 8px;
            color:var(--wine);
            background:var(--gold);
            border-radius:8px;
            font-size:.72rem;
            font-weight:900;
        }
        .trust-strip{
            margin-top:-30px;
            position:relative;
            z-index:3;
        }
        .trust-inner{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            background:#5c0710;
            border:1px solid var(--line);
            border-radius:var(--radius-md);
            box-shadow:var(--shadow);
            overflow:hidden;
        }
        .trust-item{
            padding:23px 24px;
            border-right:1px solid rgba(255,215,0,.14);
        }
        .trust-item:last-child{border-right:0}
        .trust-item strong{display:block;color:var(--gold);font-size:1.4rem;line-height:1.2}
        .trust-item span{display:block;color:var(--muted);font-size:.78rem;margin-top:5px}
        .light-section{background:#fff8f1;color:var(--ink)}
        .light-section .eyebrow{color:var(--crimson)}
        .light-section .eyebrow:before{background:var(--crimson)}
        .light-section .section-heading p{color:#70474b}
        .criteria-layout{
            display:grid;
            grid-template-columns:.8fr 1.2fr;
            gap:70px;
            align-items:start;
        }
        .criteria-intro{position:sticky;top:116px}
        .criteria-intro h2{
            margin:14px 0 18px;
            font-family:Georgia,"Times New Roman",serif;
            font-size:clamp(2rem,4vw,3.25rem);
            line-height:1.1;
            letter-spacing:-.04em;
        }
        .criteria-intro p{color:#70474b}
        .criteria-list{border-top:1px solid #ead5c5}
        .criteria-item{
            display:grid;
            grid-template-columns:62px 1fr;
            gap:20px;
            padding:24px 0;
            border-bottom:1px solid #ead5c5;
            transition:var(--ease);
        }
        .criteria-item:hover{padding-left:8px}
        .criteria-icon{
            width:50px;height:50px;
            display:grid;place-items:center;
            border-radius:15px;
            color:var(--gold);
            background:var(--crimson);
            font-size:1.3rem;
            box-shadow:0 9px 20px rgba(139,0,0,.18);
        }
        .criteria-item h3{margin:0 0 5px;font-size:1.08rem;color:var(--crimson)}
        .criteria-item p{margin:0;color:#68464a;font-size:.94rem}
        .feature-section{
            padding:92px 0;
            background:
                radial-gradient(circle at 85% 15%,rgba(255,159,0,.12),transparent 28%),
                var(--crimson-deep);
        }
        .feature-grid{
            display:grid;
            grid-template-columns:1.12fr .88fr;
            gap:28px;
            align-items:stretch;
        }
        .feature-image{
            min-height:405px;
            position:relative;
            overflow:hidden;
            border-radius:var(--radius-lg);
            border:1px solid var(--line);
            background:#470009;
        }
        .feature-image img{width:100%;height:100%;object-fit:cover;opacity:.78}
        .image-overlay{
            position:absolute;
            inset:0;
            display:flex;
            align-items:flex-end;
            padding:30px;
            background:linear-gradient(transparent 35%,rgba(38,0,7,.95));
        }
        .image-overlay h3{max-width:430px;margin:0;font:700 2rem/1.12 Georgia,serif}
        .feature-copy{
            padding:34px;
            border-radius:var(--radius-lg);
            background:linear-gradient(145deg,#670a13,#350007);
            border:1px solid var(--line);
        }
        .feature-copy h2{margin:14px 0 13px;font:700 clamp(2rem,3vw,3rem)/1.1 Georgia,serif}
        .feature-copy>p{color:var(--muted);margin-bottom:24px}
        .check-list{list-style:none;padding:0;margin:0 0 24px}
        .check-list li{
            position:relative;
            padding:10px 0 10px 29px;
            border-bottom:1px solid rgba(255,215,0,.12);
            color:#f8dfd2;
        }
        .check-list li:before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:900}
        .compare-section{background:#fff8f1;color:var(--ink)}
        .compare-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:36px}
        .compare-head h2{margin:14px 0 0;font:700 clamp(2rem,4vw,3.2rem)/1.1 Georgia,serif;color:var(--ink)}
        .compare-head p{max-width:400px;color:#70474b;margin:0}
        .compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .compare-card{
            padding:25px;
            min-height:245px;
            border-radius:var(--radius-md);
            background:#fff;
            border:1px solid #efd9cb;
            transition:var(--ease);
        }
        .compare-card:hover{transform:translateY(-6px);box-shadow:0 18px 35px rgba(74,0,7,.12);border-color:#d8a05c}
        .compare-card .number{color:var(--crimson);font:bold 2.3rem Georgia,serif}
        .compare-card h3{margin:13px 0 8px;color:var(--crimson);font-size:1.05rem}
        .compare-card p{margin:0;color:#70474b;font-size:.9rem}
        .badge-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
        .data-badge{
            padding:5px 9px;
            color:var(--crimson);
            background:#fff0d6;
            border:1px solid #f0cf8b;
            border-radius:999px;
            font-size:.71rem;
            font-weight:800;
        }
        .quote-section{
            background:
                linear-gradient(115deg,rgba(74,0,7,.95),rgba(139,0,0,.78)),
                url('/assets/images/backpic/back-3.jpg') center/cover;
        }
        .quote-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:65px;align-items:center}
        .quote-layout h2{margin:14px 0;font:700 clamp(2rem,4vw,3.2rem)/1.1 Georgia,serif}
        .quote-layout>div>p{color:var(--muted)}
        .quote-list{display:grid;gap:15px}
        .quote{
            padding:24px 26px;
            background:rgba(38,0,7,.72);
            border:1px solid var(--line);
            border-radius:var(--radius-md);
        }
        .quote p{margin:0 0 15px;color:#ffe8dd;font-size:1rem}
        .quote p:before{content:"“";color:var(--gold);font:2rem Georgia,serif;margin-right:5px}
        .quote footer{padding:0;background:none;border:0;color:var(--gold);font-size:.78rem;font-weight:800}
        .faq-section{background:#fff8f1;color:var(--ink)}
        .faq-wrap{max-width:880px}
        .accordion-item{background:#fff;border:1px solid #ecd8cc!important;margin-bottom:12px;border-radius:14px!important;overflow:hidden}
        .accordion-button{font-weight:800;color:var(--crimson);background:#fff;padding:20px 22px;box-shadow:none!important}
        .accordion-button:not(.collapsed){color:var(--wine);background:#fff2df}
        .accordion-button:after{filter:none}
        .accordion-body{color:#70474b;padding:0 22px 21px}
        .cta{
            padding:86px 0;
            text-align:center;
            background:
                radial-gradient(circle at 50% 0,rgba(255,215,0,.2),transparent 35%),
                linear-gradient(135deg,#720811,#350007);
        }
        .cta h2{max-width:760px;margin:14px auto 13px;font:700 clamp(2.15rem,4vw,3.6rem)/1.08 Georgia,serif}
        .cta p{max-width:650px;margin:0 auto 26px;color:var(--muted)}
        .cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
        footer{padding:65px 0 23px;background:#1c0005;border-top:1px solid var(--line)}
        .footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.15fr;gap:38px}
        .footer-brand{min-width:0;margin-bottom:17px}
        footer p{color:var(--muted);font-size:.88rem;max-width:300px;margin:0}
        footer h3{margin:0 0 15px;color:var(--gold);font-size:.92rem}
        footer ul{list-style:none;margin:0;padding:0}
        footer li{margin:9px 0;color:var(--muted);font-size:.83rem}
        footer li a{transition:var(--ease)}
        footer li a:hover{color:var(--gold);padding-left:4px}
        .footer-bottom{
            display:flex;
            justify-content:space-between;
            gap:15px;
            margin-top:45px;
            padding-top:20px;
            border-top:1px solid rgba(255,215,0,.14);
            color:#c39a8b;
            font-size:.75rem;
        }
        .responsible{color:#f0c26d}
        .fab{
            position:fixed;
            left:16px;
            bottom:96px;
            z-index:50;
            width:58px;
            height:58px;
            display:grid;
            place-items:center;
            border:2px solid var(--gold);
            border-radius:50%;
            color:var(--gold);
            background:radial-gradient(circle at 35% 25%,#8b1c20,#260007 70%);
            box-shadow:0 4px 20px rgba(255,215,0,.3),inset 0 0 0 4px rgba(255,215,0,.13);
            font-size:1.45rem;
            opacity:.8;
            animation:floatCoin 3s ease-in-out infinite;
            transition:var(--ease);
        }
        .fab:after{
            content:"";
            position:absolute;
            top:3px;right:3px;
            width:9px;height:9px;
            border-radius:50%;
            background:#f02d3a;
            box-shadow:0 0 10px #f02d3a;
            animation:pulse 1.4s infinite;
        }
        .fab:hover{opacity:1;transform:scale(1.1) rotate(360deg)}
        .fab:active{transform:scale(.95) translateY(2px)}
        @keyframes pulse{50%{opacity:.35;transform:scale(.75)}}
        @keyframes floatCoin{50%{transform:translateY(-6px)}}
        @media(max-width:1024px){
            .nav-shell{gap:14px}
            .brand{min-width:220px}
            .nav-links a{padding:9px 8px;font-size:.8rem}
            .criteria-layout,.quote-layout{gap:38px}
        }
        @media(max-width:768px){
            .section-space{padding:70px 0}
            .nav-shell{min-height:70px;position:relative}
            .brand{min-width:0;flex:1}
            .brand-text{font-size:.82rem}
            .nav-toggle{display:block;order:2}
            .nav-links{
                display:none;
                position:absolute;
                top:70px;left:0;right:0;
                padding:12px;
                flex-direction:column;
                align-items:stretch;
                background:rgba(38,0,7,.98);
                border:1px solid var(--line);
                border-top:0;
            }
            .nav-links.show{display:flex}
            .nav-links a{text-align:left;padding:12px 15px}
            .nav-actions{order:3;gap:8px}
            .login-link{font-size:.76rem}
            .nav-actions .btn-gold{padding:10px 13px;font-size:.72rem}
            .page-hero{padding:125px 0 70px;min-height:0}
            .hero-copy h1{font-size:clamp(2.35rem,10vw,3.8rem)}
            .ranking-panel{margin:35px 0 0;max-width:none}
            .trust-inner{grid-template-columns:repeat(2,1fr)}
            .trust-item:nth-child(2){border-right:0}
            .trust-item:nth-child(-n+2){border-bottom:1px solid rgba(255,215,0,.14)}
            .criteria-layout,.feature-grid,.quote-layout{grid-template-columns:1fr}
            .criteria-intro{position:static}
            .feature-image{min-height:330px}
            .compare-head{display:block}
            .compare-head p{margin-top:18px}
            .compare-grid{grid-template-columns:1fr 1fr}
            .footer-grid{grid-template-columns:1fr 1fr}
        }
        @media(max-width:520px){
            .container{padding-left:20px;padding-right:20px}
            .brand-mark{width:35px;height:35px;font-size:1rem}
            .brand-text small{font-size:.55rem}
            .nav-actions{gap:6px}
            .nav-actions .login-link{display:none}
            .hero-actions,.cta-actions{align-items:stretch;flex-direction:column}
            .hero-actions a,.cta-actions a{width:100%}
            .hero-note{gap:10px;display:grid}
            .trust-item{padding:17px 15px}
            .trust-item strong{font-size:1.15rem}
            .trust-item span{font-size:.7rem}
            .ranking-panel{padding:20px 17px}
            .rank-row{gap:8px}
            .criteria-item{grid-template-columns:48px 1fr;gap:14px}
            .criteria-icon{width:43px;height:43px;font-size:1.1rem}
            .feature-copy{padding:24px 20px}
            .compare-grid{grid-template-columns:1fr}
            .compare-card{min-height:0}
            .quote-layout{gap:25px}
            .footer-grid{grid-template-columns:1fr;gap:27px}
            .footer-bottom{display:block}
            .responsible{display:block;margin-top:8px}
        }

/* roulang page: category2 */
:root{
            --wine:#4a0007;
            --crimson:#8b0000;
            --crimson-deep:#260007;
            --gold:#ffd700;
            --amber:#ff9f00;
            --cream:#fffdf9;
            --muted:#e7c9b4;
            --ink:#1e080b;
            --line:rgba(255,215,0,.22);
            --panel:rgba(94,7,15,.72);
            --panel-dark:rgba(38,0,7,.86);
            --shadow:0 24px 60px rgba(13,0,2,.34);
            --radius-lg:28px;
            --radius-md:17px;
            --ease:260ms cubic-bezier(.2,.75,.25,1)
        }
        html{scroll-behavior:smooth}
        *{box-sizing:border-box}
        body{margin:0;color:var(--cream);background:var(--crimson-deep);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65;overflow-x:hidden}
        img{max-width:100%;display:block}
        a{color:inherit;text-decoration:none}
        button,input,select,textarea{font:inherit}
        button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
        .container{max-width:1180px}
        .section-space{padding:96px 0}
        .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--gold);font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
        .eyebrow:before{content:"";width:28px;height:2px;background:var(--amber);box-shadow:0 0 12px var(--amber)}
        .section-heading{max-width:700px;margin-bottom:42px}
        .section-heading h2{margin:14px 0 12px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4vw,3.3rem);line-height:1.12;letter-spacing:-.035em}
        .section-heading p{color:var(--muted);max-width:650px;margin:0}
        .topbar{position:fixed;inset:0 0 auto;z-index:1000;background:rgba(38,0,7,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}
        .nav-shell{min-height:78px;display:flex;align-items:center;gap:26px}
        .brand{display:inline-flex;align-items:center;gap:11px;min-width:245px;font-weight:800;line-height:1.05}
        .brand-mark{width:40px;height:40px;display:grid;place-items:center;color:var(--wine);background:linear-gradient(145deg,var(--gold),var(--amber));border-radius:13px;font-size:1.25rem;box-shadow:0 5px 18px rgba(255,159,0,.32)}
        .brand-text{font-size:.93rem}
        .brand-text small{display:block;color:var(--gold);font-size:.65rem;letter-spacing:.08em;margin-top:4px}
        .nav-links{display:flex;align-items:center;justify-content:center;gap:6px;flex:1}
        .nav-links a{padding:10px 13px;color:#f1d9ca;border-radius:10px;font-size:.88rem;transition:var(--ease)}
        .nav-links a:hover,.nav-links a.active{color:var(--gold);background:rgba(255,215,0,.09)}
        .nav-actions{display:flex;align-items:center;gap:13px;white-space:nowrap}
        .login-link{color:#f6d9c9;font-weight:700;font-size:.88rem;transition:var(--ease)}
        .login-link:hover{color:var(--gold)}
        .btn-gold,.btn-outline-gold{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:999px;font-weight:800;font-size:.88rem;transition:transform var(--ease),box-shadow var(--ease),filter var(--ease)}
        .btn-gold{border:1px solid var(--gold);padding:12px 21px;color:var(--wine);background:linear-gradient(135deg,var(--gold),var(--amber));box-shadow:0 10px 25px rgba(255,159,0,.2)}
        .btn-gold:hover{color:var(--wine);transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 15px 30px rgba(255,159,0,.34)}
        .btn-gold:active{transform:translateY(1px) scale(.98)}
        .btn-outline-gold{border:1px solid rgba(255,215,0,.62);padding:12px 21px;color:var(--gold);background:rgba(255,215,0,.04)}
        .btn-outline-gold:hover{color:var(--cream);background:rgba(255,215,0,.12);transform:translateY(-3px)}
        .nav-toggle{display:none;color:var(--gold);background:transparent;border:1px solid var(--line);border-radius:10px;padding:7px 10px}
        .inner-hero{position:relative;padding:164px 0 88px;background:linear-gradient(90deg,rgba(38,0,7,.97),rgba(62,0,8,.76),rgba(38,0,7,.9)),url('/assets/images/backpic/back-2.jpg') center/cover no-repeat}
        .inner-hero:after{content:"";position:absolute;inset:auto 0 0;height:115px;background:linear-gradient(transparent,var(--crimson-deep));pointer-events:none}
        .inner-hero .container{position:relative;z-index:1}
        .hero-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.72fr);gap:64px;align-items:center}
        .hero-copy h1{max-width:760px;margin:17px 0 20px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.6rem,5.5vw,5rem);line-height:1.03;letter-spacing:-.055em}
        .hero-copy h1 span{color:var(--gold)}
        .hero-copy p{max-width:650px;color:#f1d9ca;font-size:1.08rem;margin-bottom:29px}
        .hero-actions{display:flex;gap:13px;flex-wrap:wrap}
        .poster{position:relative;min-height:435px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,215,0,.45);box-shadow:var(--shadow);background:#260007}
        .poster img{width:100%;height:100%;min-height:435px;object-fit:cover;opacity:.8}
        .poster:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(35,0,5,.93))}
        .poster-content{position:absolute;z-index:1;inset:auto 25px 24px}
        .poster-content h2{font-family:Georgia,serif;font-size:1.75rem;margin:12px 0 6px}
        .poster-content p{color:var(--muted);font-size:.88rem;margin:0}
        .hot-badge,.rank-badge,.trust-badge{display:inline-flex;align-items:center;gap:7px;color:var(--wine);background:linear-gradient(135deg,var(--gold),var(--amber));border-radius:999px;padding:7px 12px;font-size:.72rem;font-weight:900;letter-spacing:.05em}
        .hot-badge:before{content:"✦"}
        .metric-strip{margin-top:-30px;position:relative;z-index:3}
        .metric-wrap{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(74,0,7,.9);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
        .metric{padding:24px 28px;border-right:1px solid var(--line)}
        .metric:last-child{border-right:0}
        .metric strong{display:block;color:var(--gold);font:700 2rem/1 Georgia,serif}
        .metric span{display:block;color:var(--muted);font-size:.84rem;margin-top:8px}
        .deep-section{background:linear-gradient(180deg,var(--crimson-deep),#360008)}
        .split-block{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
        .split-block h2{font:700 clamp(2rem,4vw,3.25rem)/1.12 Georgia,serif;letter-spacing:-.04em;margin:14px 0}
        .split-block h2 em{color:var(--gold);font-style:normal}
        .split-block>div>p{color:var(--muted);max-width:510px}
        .check-list{list-style:none;padding:0;margin:26px 0 0}
        .check-list li{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid rgba(255,215,0,.13);color:#f8e7dd}
        .check-list li:before{content:"✓";flex:0 0 24px;height:24px;display:grid;place-items:center;border-radius:50%;color:var(--wine);background:var(--gold);font-weight:900}
        .ranking-panel{border-left:1px solid var(--line);padding-left:36px}
        .rank-row{display:grid;grid-template-columns:48px 78px 1fr auto;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid rgba(255,215,0,.15)}
        .rank-row img{width:78px;height:58px;object-fit:cover;border-radius:11px}
        .rank-number{font:700 1.65rem Georgia,serif;color:var(--gold)}
        .rank-row strong{display:block;font-size:1rem}
        .rank-row small{color:var(--muted)}
        .score{color:var(--gold);font-weight:800;white-space:nowrap}
        .feature-zone{background:#360008;padding:88px 0}
        .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
        .feature-card{min-height:260px;padding:28px;background:linear-gradient(145deg,rgba(139,0,0,.65),rgba(38,0,7,.9));border:1px solid var(--line);border-radius:var(--radius-md);transition:var(--ease)}
        .feature-card:hover{transform:translateY(-7px);border-color:rgba(255,215,0,.7);box-shadow:0 18px 35px rgba(16,0,3,.32)}
        .feature-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;color:var(--wine);background:linear-gradient(135deg,var(--gold),var(--amber));font-size:1.35rem;margin-bottom:23px}
        .feature-card h3{font-size:1.2rem;margin:0 0 10px}
        .feature-card p{color:var(--muted);font-size:.91rem;margin:0}
        .visual-section{padding:96px 0;background:linear-gradient(135deg,#4a0007,#260007)}
        .visual-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:stretch}
        .visual-image{min-height:390px;border-radius:var(--radius-lg);overflow:hidden;position:relative}
        .visual-image img{width:100%;height:100%;object-fit:cover}
        .visual-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,0,7,.2),rgba(38,0,7,.78))}
        .visual-caption{position:absolute;z-index:1;left:30px;bottom:27px;max-width:430px}
        .visual-caption h3{font:700 2rem/1.12 Georgia,serif;margin:12px 0 8px}
        .visual-caption p{color:#f1d9ca;margin:0}
        .benefit-list{padding:32px 34px;border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(38,0,7,.55)}
        .benefit-list h3{font:700 1.8rem/1.2 Georgia,serif;margin:0 0 23px}
        .benefit-item{display:flex;gap:15px;padding:17px 0;border-bottom:1px solid rgba(255,215,0,.14)}
        .benefit-item:last-child{border-bottom:0}
        .benefit-item b{color:var(--gold);font-size:1.15rem}
        .benefit-item strong{display:block;margin-bottom:3px}
        .benefit-item span{display:block;color:var(--muted);font-size:.88rem}
        .quote-section{padding:88px 0;background:#260007}
        .quote-line{max-width:890px;border-left:4px solid var(--gold);padding:12px 0 12px 32px}
        blockquote{font:400 clamp(1.45rem,3vw,2.35rem)/1.3 Georgia,serif;margin:0 0 15px;color:#fff7ef}
        .quote-line cite{color:var(--gold);font-style:normal;font-size:.9rem}
        .faq-section{padding:92px 0;background:linear-gradient(180deg,#360008,var(--crimson-deep))}
        .faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px}
        .faq-layout h2{font:700 clamp(2rem,4vw,3.1rem)/1.1 Georgia,serif;margin:14px 0}
        .faq-layout>div>p{color:var(--muted)}
        .faq-list details{border-bottom:1px solid var(--line);padding:21px 0}
        .faq-list summary{cursor:pointer;list-style:none;font-weight:800;padding-right:28px;position:relative}
        .faq-list summary::-webkit-details-marker{display:none}
        .faq-list summary:after{content:"+";position:absolute;right:0;color:var(--gold);font-size:1.35rem;top:-4px}
        .faq-list details[open] summary:after{content:"−"}
        .faq-list details p{color:var(--muted);font-size:.92rem;margin:12px 0 0}
        .cta-section{padding:90px 0;text-align:center;background:radial-gradient(circle at 50% 0,rgba(255,159,0,.22),transparent 45%),#4a0007}
        .cta-section h2{max-width:760px;margin:14px auto;font:700 clamp(2rem,4.5vw,3.5rem)/1.1 Georgia,serif}
        .cta-section p{max-width:650px;margin:0 auto 27px;color:#f1d9ca}
        .payment-note{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:25px}
        .payment-note span{border:1px solid rgba(255,215,0,.3);border-radius:999px;padding:6px 12px;color:var(--muted);font-size:.76rem}
        footer{padding:70px 0 22px;background:#1e080b;border-top:1px solid var(--line)}
        .footer-grid{display:grid;grid-template-columns:1.35fr .75fr .9fr 1fr;gap:35px}
        .footer-brand{margin-bottom:17px}
        footer p{color:var(--muted);font-size:.88rem;max-width:310px}
        footer h3{font-size:.87rem;color:var(--gold);margin:5px 0 17px}
        footer ul{list-style:none;padding:0;margin:0}
        footer li{color:var(--muted);font-size:.84rem;margin:10px 0}
        footer li a{transition:var(--ease)}
        footer li a:hover{color:var(--gold);padding-left:4px}
        .footer-bottom{display:flex;justify-content:space-between;gap:18px;border-top:1px solid rgba(255,215,0,.15);margin-top:48px;padding-top:20px;color:#b99887;font-size:.77rem}
        .responsible{color:var(--gold)}
        .fab{position:fixed;left:16px;bottom:96px;z-index:50;width:58px;height:58px;display:grid;place-items:center;border:2px solid var(--gold);border-radius:50%;color:var(--gold);background:rgba(38,0,7,.92);box-shadow:0 4px 20px rgba(255,215,0,.3);opacity:.78;transition:var(--ease);animation:floaty 3s ease-in-out infinite}
        .fab:hover{opacity:1;transform:scale(1.1);box-shadow:0 0 28px rgba(255,215,0,.55)}
        .fab:active{transform:scale(.95) translateY(2px)}
        .fab:after{content:"";position:absolute;right:-1px;top:-2px;width:11px;height:11px;border-radius:50%;background:#e33434;box-shadow:0 0 9px #e33434;animation:blink 1.5s infinite}
        @keyframes floaty{50%{transform:translateY(-5px)}}
        @keyframes blink{50%{opacity:.35}}
        @media(max-width:1024px){.nav-shell{gap:14px}.brand{min-width:215px}.nav-links a{padding:9px 8px;font-size:.8rem}.hero-layout,.visual-grid{gap:35px}.split-block{gap:40px}}
        @media(max-width:768px){
            .section-space,.visual-section,.faq-section{padding:70px 0}
            .nav-shell{min-height:70px;flex-wrap:wrap}
            .nav-toggle{display:block;order:2;margin-left:auto}
            .nav-actions{order:3;margin-left:auto}
            .nav-links{display:none;order:4;flex-basis:100%;flex-direction:column;align-items:stretch;padding:8px 0 15px}
            .nav-links.show{display:flex}
            .nav-links a{padding:11px 14px}
            .brand{min-width:0}
            .brand-text{font-size:.8rem}
            .login-link{font-size:.78rem}
            .btn-gold{padding:10px 15px;font-size:.78rem}
            .inner-hero{padding:135px 0 70px}
            .hero-layout,.split-block,.visual-grid,.faq-layout{grid-template-columns:1fr}
            .hero-copy h1{font-size:clamp(2.35rem,10vw,4rem)}
            .poster{min-height:350px}
            .poster img{min-height:350px}
            .metric-strip{margin-top:-12px}
            .metric-wrap{grid-template-columns:1fr}
            .metric{border-right:0;border-bottom:1px solid var(--line);padding:18px 22px}
            .metric:last-child{border-bottom:0}
            .ranking-panel{border-left:0;padding-left:0;margin-top:20px}
            .feature-grid{grid-template-columns:repeat(2,1fr)}
            .footer-grid{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:520px){
            .container{padding-left:20px;padding-right:20px}
            .brand-mark{width:34px;height:34px;font-size:1rem;border-radius:10px}
            .brand-text small{font-size:.53rem}
            .nav-actions{gap:8px}
            .login-link{display:none}
            .hero-copy p{font-size:.98rem}
            .hero-actions{flex-direction:column;align-items:stretch}
            .hero-actions a{width:100%}
            .feature-grid{grid-template-columns:1fr}
            .rank-row{grid-template-columns:34px 62px 1fr}
            .rank-row img{width:62px;height:50px}
            .score{grid-column:3;font-size:.8rem}
            .benefit-list{padding:25px 21px}
            .footer-grid{grid-template-columns:1fr;gap:25px}
            .footer-bottom{flex-direction:column;margin-top:30px}
            .fab{left:16px;bottom:76px}
        }

/* roulang page: category3 */
:root {
            --wine:#4a0007;
            --crimson:#8b0000;
            --crimson-deep:#260007;
            --gold:#ffd700;
            --amber:#ff9f00;
            --cream:#fffdf9;
            --muted:#e7c9b4;
            --ink:#1e080b;
            --line:rgba(255,215,0,.22);
            --panel:rgba(94,7,15,.72);
            --panel-dark:rgba(38,0,7,.86);
            --shadow:0 24px 60px rgba(13,0,2,.34);
            --radius-lg:28px;
            --radius-md:17px;
            --ease:260ms cubic-bezier(.2,.75,.25,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--cream);
            background:var(--crimson-deep);
            font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            line-height:1.65;
            overflow-x:hidden;
        }
        img{max-width:100%;display:block}
        a{color:inherit;text-decoration:none}
        button,input,select,textarea{font:inherit}
        button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
        .container{max-width:1180px}
        .section-space{padding:96px 0}
        .eyebrow{
            display:inline-flex;align-items:center;gap:9px;color:var(--gold);
            font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase
        }
        .eyebrow:before{content:"";width:28px;height:2px;background:var(--amber);box-shadow:0 0 12px var(--amber)}
        .section-heading{max-width:700px;margin-bottom:42px}
        .section-heading h2{
            margin:14px 0 12px;font-family:Georgia,"Times New Roman",serif;
            font-size:clamp(2rem,4vw,3.3rem);line-height:1.12;letter-spacing:-.035em
        }
        .section-heading p{color:var(--muted);max-width:650px;margin:0}
        .topbar{
            position:fixed;inset:0 0 auto;z-index:1000;background:rgba(38,0,7,.9);
            border-bottom:1px solid var(--line);backdrop-filter:blur(18px)
        }
        .nav-shell{min-height:78px;display:flex;align-items:center;gap:26px}
        .brand{display:inline-flex;align-items:center;gap:11px;min-width:245px;font-weight:800;line-height:1.05}
        .brand-mark{
            width:40px;height:40px;display:grid;place-items:center;color:var(--wine);
            background:linear-gradient(145deg,var(--gold),var(--amber));border-radius:13px;
            font-size:1.25rem;box-shadow:0 5px 18px rgba(255,159,0,.32)
        }
        .brand-text{font-size:.93rem}
        .brand-text small{display:block;color:var(--gold);font-size:.65rem;letter-spacing:.08em;margin-top:4px}
        .nav-links{display:flex;align-items:center;justify-content:center;gap:6px;flex:1}
        .nav-links a{padding:10px 13px;color:#f1d9ca;border-radius:10px;font-size:.88rem;transition:var(--ease)}
        .nav-links a:hover,.nav-links a.active{color:var(--gold);background:rgba(255,215,0,.09)}
        .nav-actions{display:flex;align-items:center;gap:13px;white-space:nowrap}
        .login-link{color:#f1d9ca;font-size:.88rem;font-weight:700;transition:var(--ease)}
        .login-link:hover{color:var(--gold)}
        .btn-gold,.btn-outline-gold{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
            padding:12px 21px;font-weight:800;font-size:.88rem;transition:var(--ease)
        }
        .btn-gold{
            border:1px solid var(--gold);color:var(--wine);
            background:linear-gradient(135deg,var(--gold),var(--amber));
            box-shadow:0 10px 25px rgba(255,159,0,.2)
        }
        .btn-gold:hover{color:var(--wine);transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 15px 30px rgba(255,159,0,.34)}
        .btn-gold:active{transform:translateY(1px) scale(.98)}
        .btn-outline-gold{border:1px solid rgba(255,215,0,.62);color:var(--gold);background:rgba(255,215,0,.04)}
        .btn-outline-gold:hover{color:var(--cream);background:rgba(255,215,0,.12);transform:translateY(-3px)}
        .nav-toggle{
            display:none;color:var(--gold);background:transparent;border:1px solid var(--line);
            border-radius:10px;padding:7px 10px
        }
        .page-banner{
            position:relative;padding:158px 0 90px;min-height:480px;
            background:linear-gradient(90deg,rgba(38,0,7,.97),rgba(74,0,7,.78),rgba(38,0,7,.88)),
            url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
        }
        .page-banner:after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(transparent,var(--crimson-deep))}
        .page-banner .container{position:relative;z-index:1}
        .page-banner h1{
            max-width:850px;margin:17px 0 20px;font-family:Georgia,"Times New Roman",serif;
            font-size:clamp(2.5rem,5.5vw,4.75rem);line-height:1.04;letter-spacing:-.055em
        }
        .page-banner h1 span{color:var(--gold)}
        .banner-copy{max-width:700px;color:var(--muted);font-size:1.08rem}
        .banner-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
        .data-badge,.trust-badge{
            display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
            border-radius:999px;padding:8px 13px;color:#ffe7c7;background:rgba(38,0,7,.48);
            font-size:.8rem;font-weight:700
        }
        .data-badge strong{color:var(--gold)}
        .download-intro{background:var(--crimson-deep)}
        .intro-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:64px;align-items:center}
        .intro-image{position:relative}
        .intro-image img{width:100%;height:460px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
        .image-note{
            position:absolute;right:-25px;bottom:25px;max-width:220px;padding:18px;
            border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(38,0,7,.91);
            box-shadow:var(--shadow)
        }
        .image-note b{display:block;color:var(--gold);font-size:1.5rem;line-height:1}
        .image-note span{display:block;margin-top:6px;color:var(--muted);font-size:.82rem}
        .intro-copy h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4vw,3.2rem);line-height:1.12;margin:15px 0}
        .intro-copy p{color:var(--muted);margin-bottom:20px}
        .check-list{list-style:none;padding:0;margin:25px 0 30px}
        .check-list li{position:relative;padding:10px 0 10px 33px;color:#ffece0;border-bottom:1px solid rgba(255,215,0,.12)}
        .check-list li:before{content:"✓";position:absolute;left:0;top:8px;color:var(--gold);font-weight:900;font-size:1.1rem}
        .action-row{display:flex;flex-wrap:wrap;gap:13px}
        .feature-band{background:linear-gradient(135deg,#620009,#3b0008);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
        .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
        .feature-item{padding:29px 28px;background:rgba(74,0,7,.88)}
        .feature-number{color:var(--gold);font:700 2rem Georgia,serif}
        .feature-item h3{font-size:1.05rem;margin:10px 0 7px}
        .feature-item p{color:var(--muted);font-size:.92rem;margin:0}
        .steps-section{background:#300007}
        .steps-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:start}
        .steps-intro p{color:var(--muted);max-width:390px}
        .steps-list{border-top:1px solid var(--line)}
        .step{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:25px 0;border-bottom:1px solid rgba(255,215,0,.16)}
        .step-index{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,var(--gold),var(--amber));color:var(--wine);font-weight:900}
        .step h3{margin:0 0 5px;font-size:1.12rem}
        .step p{margin:0;color:var(--muted);font-size:.94rem}
        .compat-section{background:var(--crimson-deep)}
        .compat-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:32px}
        .compat-panel{padding:34px;border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(111,9,20,.86),rgba(48,0,8,.9));border:1px solid var(--line);box-shadow:var(--shadow)}
        .compat-panel h2{font:2.25rem/1.12 Georgia,serif;margin:0 0 14px}
        .compat-panel p{color:var(--muted)}
        .device-list{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:24px}
        .device{padding:15px 16px;border-radius:14px;background:rgba(255,215,0,.06);border:1px solid rgba(255,215,0,.16)}
        .device strong{display:block;color:var(--gold)}
        .device span{font-size:.82rem;color:var(--muted)}
        .payment-panel{padding:30px;border-left:1px solid var(--line)}
        .payment-panel h3{margin:0 0 14px;color:var(--gold);font-size:1.25rem}
        .payment-panel p{color:var(--muted);font-size:.92rem}
        .payment-list{list-style:none;padding:0;margin:22px 0 0}
        .payment-list li{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid rgba(255,215,0,.15);color:#ffe9dc}
        .payment-list span{color:var(--gold);font-weight:800}
        .choice-section{background:linear-gradient(180deg,#300007,#4a0007)}
        .choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
        .choice-card{overflow:hidden;border-radius:var(--radius-md);background:var(--panel-dark);border:1px solid var(--line);transition:var(--ease)}
        .choice-card:hover{transform:translateY(-7px);box-shadow:0 18px 35px rgba(255,159,0,.15);border-color:rgba(255,215,0,.65)}
        .choice-card img{width:100%;height:178px;object-fit:cover}
        .choice-content{padding:22px}
        .choice-label{color:var(--amber);font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
        .choice-card h3{font:1.35rem/1.2 Georgia,serif;margin:9px 0 8px}
        .choice-card p{margin:0;color:var(--muted);font-size:.9rem}
        .faq-section{background:var(--crimson-deep)}
        .faq-wrap{max-width:900px}
        .accordion-item{background:transparent;border:0;border-bottom:1px solid rgba(255,215,0,.2)}
        .accordion-button{padding:22px 0;color:var(--cream);background:transparent;box-shadow:none;font-weight:800}
        .accordion-button:not(.collapsed){color:var(--gold);background:transparent;box-shadow:none}
        .accordion-button:after{filter:sepia(1) saturate(5)}
        .accordion-body{padding:0 35px 22px 0;color:var(--muted)}
        .cta-section{padding:88px 0;text-align:center;background:linear-gradient(125deg,#8b0000,#4a0007 55%,#260007)}
        .cta-section h2{max-width:780px;margin:0 auto 15px;font:clamp(2.1rem,4vw,3.6rem)/1.1 Georgia,serif}
        .cta-section p{max-width:650px;margin:0 auto 28px;color:#f4d4c1}
        footer{padding:70px 0 24px;background:#210005;border-top:1px solid var(--line)}
        .footer-grid{display:grid;grid-template-columns:1.45fr .8fr .9fr 1fr;gap:38px}
        .footer-brand{margin-bottom:18px}
        footer p{color:var(--muted);font-size:.9rem;max-width:310px}
        footer h3{color:var(--gold);font-size:.92rem;margin:5px 0 17px}
        footer ul{list-style:none;padding:0;margin:0}
        footer li{margin:9px 0;color:var(--muted);font-size:.86rem}
        footer li a{transition:var(--ease)}
        footer li a:hover{color:var(--gold);padding-left:4px}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,215,0,.15);margin-top:45px;padding-top:22px;color:#cba99c;font-size:.78rem}
        .responsible{color:var(--gold)}
        .fab{
            position:fixed;left:16px;bottom:96px;z-index:50;width:58px;height:58px;
            display:grid;place-items:center;border:2px solid var(--gold);border-radius:50%;
            color:var(--gold);background:linear-gradient(145deg,#520009,#210005);
            box-shadow:0 4px 20px rgba(255,215,0,.3);opacity:.8;
            transition:var(--ease);animation:float 3.5s ease-in-out infinite
        }
        .fab:hover{opacity:1;transform:scale(1.1);color:var(--cream)}
        .fab:active{transform:scale(.95) translateY(2px)}
        .fab:after{content:"";position:absolute;right:-1px;top:-2px;width:11px;height:11px;border-radius:50%;background:#e32235;box-shadow:0 0 10px #e32235;animation:blink 1.4s infinite}
        @keyframes float{0%,100%{margin-bottom:0}50%{margin-bottom:7px}}
        @keyframes blink{50%{opacity:.35}}
        @media(max-width:1024px){
            .nav-shell{gap:14px}.brand{min-width:220px}.nav-links a{padding:9px 8px;font-size:.8rem}
            .intro-grid,.steps-layout{gap:38px}.footer-grid{grid-template-columns:1.3fr 1fr 1fr}
        }
        @media(max-width:768px){
            .section-space{padding:70px 0}
            .nav-shell{min-height:70px;position:relative}.brand{min-width:0;flex:1}.brand-text{font-size:.8rem}
            .nav-toggle{display:block;order:2}.nav-actions{order:3;gap:9px}.login-link{font-size:.78rem}
            .nav-actions .btn-gold{padding:10px 13px;font-size:.76rem}
            .nav-links{
                display:none;position:absolute;top:70px;left:0;right:0;padding:12px;
                flex-direction:column;align-items:stretch;background:rgba(38,0,7,.98);
                border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px
            }
            .nav-links.show{display:flex}.nav-links a{padding:12px 14px}
            .page-banner{padding:130px 0 70px;min-height:420px}
            .intro-grid,.steps-layout,.compat-layout{grid-template-columns:1fr}
            .intro-image{order:2}.intro-image img{height:330px}.image-note{right:14px}
            .feature-grid{grid-template-columns:1fr}.feature-item{padding:23px}
            .choice-grid{grid-template-columns:1fr 1fr}.payment-panel{padding:25px 0 0;border-left:0}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
        }
        @media(max-width:520px){
            .container{padding-left:20px;padding-right:20px}
            .brand-mark{width:35px;height:35px;border-radius:11px}.brand-text small{font-size:.55rem}
            .nav-actions{gap:7px}.nav-actions .login-link{display:inline}
            .nav-actions .btn-gold{padding:9px 10px;font-size:.7rem}
            .page-banner h1{font-size:2.55rem}.banner-copy{font-size:.96rem}
            .choice-grid,.device-list{grid-template-columns:1fr}
            .compat-panel{padding:25px 21px}.step{grid-template-columns:52px 1fr;gap:15px}
            .footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px}
            .fab{left:14px;bottom:82px}
        }