/* roulang page: index */
:root{
            --bg:#0b2519;
            --bg-deep:#06170f;
            --surface:#103522;
            --surface-2:#16462c;
            --gold:#ffcc00;
            --gold-soft:#ffe584;
            --lime:#72db62;
            --mint:#ccebd6;
            --text:#fffdf0;
            --muted:#b7d3c0;
            --line:rgba(255,230,132,.23);
            --red:#f04747;
            --shadow:0 18px 50px rgba(0,0,0,.28);
            --radius:20px;
            --radius-sm:12px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            background:var(--bg-deep);
            color:var(--text);
            font-family:"Be Vietnam Pro",Arial,sans-serif;
            font-size:16px;
            line-height:1.65;
            overflow-x:hidden;
        }
        body:before{
            content:"";
            position:fixed;
            inset:0;
            z-index:-2;
            background:
                radial-gradient(circle at 12% 18%,rgba(114,219,98,.13),transparent 29rem),
                radial-gradient(circle at 88% 42%,rgba(255,204,0,.09),transparent 25rem),
                linear-gradient(130deg,#06170f 0%,#0b2519 45%,#071b11 100%);
        }
        body:after{
            content:"";
            position:fixed;
            inset:0;
            z-index:-1;
            opacity:.16;
            pointer-events:none;
            background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
            background-size:46px 46px;
            mask-image:linear-gradient(to bottom,black,transparent 70%);
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input{font:inherit}
        button{border:0}
        :focus-visible{outline:3px solid var(--gold);outline-offset:3px}
        .container{width:min(1160px,calc(100% - 40px))}
        .site-header{
            position:sticky;
            top:0;
            z-index:100;
            background:rgba(6,23,15,.88);
            backdrop-filter:blur(18px);
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .nav-wrap{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:10px;
            width:240px;
            font-weight:800;
            line-height:1.16;
            font-size:.84rem;
            color:var(--gold-soft);
        }
        .brand-mark{
            display:grid;
            place-items:center;
            flex:none;
            width:39px;
            height:39px;
            color:#0b2519;
            background:linear-gradient(135deg,var(--gold),#f6a900);
            border-radius:50% 50% 45% 45%;
            box-shadow:0 0 0 4px rgba(255,204,0,.13),0 8px 22px rgba(0,0,0,.3);
            font-size:1rem;
        }
        .main-nav{display:flex;align-items:center;gap:5px}
        .main-nav a{
            padding:9px 11px;
            border-radius:8px;
            color:var(--mint);
            font-size:.86rem;
            font-weight:600;
            transition:.22s ease;
        }
        .main-nav a:hover,.main-nav a.active{color:var(--gold);background:rgba(255,204,0,.09)}
        .nav-actions{display:flex;align-items:center;gap:8px}
        .login-link{
            color:var(--mint);
            padding:9px 10px;
            font-size:.84rem;
            font-weight:700;
            white-space:nowrap;
        }
        .login-link:hover{color:var(--gold)}
        .nav-join,.btn-gold{
            display:inline-flex;
            justify-content:center;
            align-items:center;
            gap:8px;
            color:#0b2519;
            background:linear-gradient(135deg,#ffdc39,var(--gold));
            font-weight:800;
            border-radius:9px;
            padding:10px 15px;
            box-shadow:0 7px 19px rgba(255,204,0,.17);
            transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
            white-space:nowrap;
        }
        .nav-join:hover,.btn-gold:hover{transform:translateY(-2px);box-shadow:0 11px 26px rgba(255,204,0,.28);filter:brightness(1.04)}
        .nav-join:active,.btn-gold:active{transform:translateY(1px)}
        .menu-toggle{display:none;color:var(--gold);background:transparent;font-size:1.35rem;padding:7px}
        .hero{
            position:relative;
            min-height:640px;
            isolation:isolate;
            overflow:hidden;
            display:flex;
            align-items:center;
            padding:74px 0 76px;
            background-image:linear-gradient(90deg,rgba(5,20,13,.94) 0%,rgba(6,27,17,.78) 51%,rgba(6,23,15,.86) 100%),url("/assets/images/backpic/back-1.jpg");
            background-position:center;
            background-size:cover;
            border-bottom:1px solid var(--line);
        }
        .hero:before{
            content:"";
            position:absolute;
            width:700px;height:700px;
            right:-240px;top:-380px;
            z-index:-1;
            border-radius:50%;
            border:1px solid rgba(255,204,0,.23);
            box-shadow:0 0 0 60px rgba(255,204,0,.035),0 0 0 120px rgba(255,204,0,.025);
        }
        .hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);gap:60px;align-items:center}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:18px;
            color:var(--gold-soft);
            text-transform:uppercase;
            letter-spacing:.1em;
            font-size:.74rem;
            font-weight:800;
        }
        .eyebrow:before{content:"";width:25px;height:2px;background:var(--gold)}
        h1,h2,h3,p{margin-top:0}
        h1{
            max-width:720px;
            margin-bottom:20px;
            font-family:"Playfair Display",serif;
            font-size:clamp(2.35rem,5vw,4.6rem);
            line-height:1.09;
            letter-spacing:-.04em;
            color:#fffef8;
        }
        .hero-copy{
            max-width:650px;
            color:#d7eddd;
            font-size:1.05rem;
            line-height:1.72;
            margin-bottom:29px;
        }
        .hero-links{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
        .btn-outline{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:10px 16px;
            border:1px solid rgba(255,231,132,.55);
            color:var(--gold-soft);
            font-size:.91rem;
            font-weight:800;
            border-radius:9px;
            transition:.2s ease;
        }
        .btn-outline:hover{background:rgba(255,204,0,.1);border-color:var(--gold);color:#fff}
        .hero-stats{
            display:flex;
            flex-wrap:wrap;
            gap:23px;
            margin-top:32px;
            padding-top:24px;
            border-top:1px solid rgba(255,255,255,.15);
        }
        .hero-stat b{display:block;color:var(--gold);font-size:1.15rem;line-height:1.2}
        .hero-stat span{display:block;color:var(--muted);font-size:.79rem;margin-top:3px}
        .coupon-stage{position:relative}
        .coupon-glow{position:absolute;inset:10% 0;background:rgba(255,204,0,.17);filter:blur(50px);border-radius:50%;z-index:-1}
        .coupon-card{
            position:relative;
            padding:29px 30px 25px;
            color:#12301d;
            background:linear-gradient(145deg,#ffe88f 0%,#ffcc00 55%,#eaa400 100%);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),var(--shadow);
            clip-path:polygon(0 0,94% 0,100% 10%,100% 90%,94% 100%,0 100%,5% 91%,0 80%,0 20%,5% 9%);
        }
        .coupon-card:after{
            content:"";
            position:absolute;
            top:20px;bottom:20px;right:40px;
            border-left:2px dashed rgba(25,53,31,.33);
        }
        .coupon-top{display:flex;justify-content:space-between;gap:15px;align-items:center;position:relative;z-index:1}
        .coupon-type{
            display:inline-flex;
            gap:7px;
            align-items:center;
            border-radius:100px;
            padding:5px 10px;
            color:#fffef3;
            background:#9d1515;
            font-size:.72rem;
            font-weight:800;
            letter-spacing:.04em;
        }
        .coupon-code{font-size:.74rem;font-weight:800;color:#52603a}
        .coupon-card h2{
            max-width:270px;
            margin:20px 0 8px;
            font-family:"Playfair Display",serif;
            font-size:2rem;
            line-height:1.05;
            letter-spacing:-.04em;
        }
        .coupon-card p{max-width:270px;font-size:.86rem;line-height:1.55;margin:0;color:#274630}
        .coupon-number{position:absolute;right:20px;bottom:30px;width:80px;color:#9d1515;font-size:1.8rem;font-weight:800;line-height:.95;word-break:break-all}
        .coupon-redeem{
            position:relative;
            z-index:2;
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-top:18px;
            padding-top:17px;
            border-top:1px solid rgba(20,47,28,.24);
        }
        .coupon-redeem small{font-weight:700;color:#436044}
        .coupon-redeem .btn-dark{
            padding:9px 13px;
            color:#fff;
            background:#113d25;
            border-radius:8px;
            font-weight:800;
            font-size:.83rem;
            transition:.2s ease;
        }
        .coupon-redeem .btn-dark:hover{background:#072414;transform:translateY(-1px)}
        .ticker{
            background:#0c301d;
            border-top:1px solid rgba(255,204,0,.16);
            border-bottom:1px solid rgba(255,204,0,.16);
        }
        .ticker-inner{display:flex;align-items:center;min-height:47px;gap:15px;overflow:hidden}
        .live-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(114,219,98,.12),0 0 12px var(--lime);flex:none}
        .ticker-label{color:var(--gold);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
        .ticker-text{color:var(--muted);font-size:.86rem;white-space:nowrap;animation:marquee 23s linear infinite}
        @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-34%)}}
        main{padding-bottom:0}
        section{position:relative;padding:92px 0}
        .section-kicker{color:var(--gold);font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:11px}
        .section-title{
            font-family:"Playfair Display",serif;
            font-size:clamp(1.85rem,3.1vw,3rem);
            line-height:1.16;
            letter-spacing:-.035em;
            margin-bottom:15px;
            color:#fffef8;
        }
        .section-intro{max-width:660px;color:var(--muted);margin-bottom:0;font-size:.98rem}
        .progress-section{background:linear-gradient(180deg,rgba(13,53,33,.58),rgba(7,25,16,.15))}
        .progress-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
        .progress-note{padding-top:15px}
        .progress-note p{color:var(--muted);max-width:430px}
        .mini-quote{
            margin-top:28px;
            padding:18px 0 18px 20px;
            border-left:3px solid var(--gold);
            color:#dfefe2;
            font-size:.95rem;
        }
        .goal-list{padding-top:7px}
        .goal-item{
            display:grid;
            grid-template-columns:132px 1fr 48px;
            align-items:center;
            gap:17px;
            padding:17px 0;
            border-bottom:1px solid rgba(255,255,255,.1);
        }
        .goal-item:first-child{border-top:1px solid rgba(255,255,255,.1)}
        .goal-name{font-size:.91rem;font-weight:800;color:#e9f5e9}
        .goal-bar{height:9px;border-radius:30px;background:rgba(255,255,255,.12);overflow:hidden}
        .goal-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--lime),var(--gold));box-shadow:0 0 14px rgba(255,204,0,.4)}
        .goal-pct{text-align:right;font-size:.86rem;color:var(--gold-soft);font-weight:800}
        .tier-section{padding-top:97px}
        .tier-heading{display:grid;grid-template-columns:1fr .75fr;gap:70px;align-items:end;margin-bottom:40px}
        .tier-aside{color:var(--muted);padding-bottom:4px}
        .tier-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:17px}
        .tier-card{
            position:relative;
            min-height:290px;
            overflow:hidden;
            padding:27px;
            background:#103622;
            border:1px solid rgba(255,255,255,.1);
            border-radius:var(--radius);
            transition:transform .25s ease,border-color .25s ease,background .25s ease;
        }
        .tier-card:hover{transform:translateY(-6px);border-color:rgba(255,204,0,.65);background:#16452a}
        .tier-card.featured{
            color:#17331f;
            background:linear-gradient(140deg,#ffe384,#ffcc00);
            border-color:#ffe993;
            box-shadow:0 14px 38px rgba(255,204,0,.13);
        }
        .tier-card.featured:after{
            content:"";
            position:absolute;
            right:-40px;bottom:-70px;
            width:185px;height:185px;
            border:22px solid rgba(20,54,31,.14);
            border-radius:50%;
        }
        .tier-chip{display:inline-flex;border-radius:100px;padding:5px 10px;background:rgba(255,255,255,.13);font-size:.72rem;font-weight:800}
        .featured .tier-chip{background:#a21c1c;color:white}
        .tier-card h3{font-size:1.35rem;font-weight:800;margin:20px 0 7px}
        .tier-value{font-family:"Playfair Display",serif;font-size:2.4rem;line-height:1;margin:17px 0 12px;color:var(--gold)}
        .featured .tier-value{color:#8b1515}
        .tier-card p{font-size:.87rem;line-height:1.55;color:var(--muted);max-width:300px}
        .featured p{color:#29462e}
        .tier-card a{position:absolute;bottom:24px;font-weight:800;font-size:.86rem;color:var(--gold-soft)}
        .featured a{color:#183d26}
        .supporters{
            overflow:hidden;
            background:#092316;
            border-top:1px solid var(--line);
            border-bottom:1px solid var(--line);
        }
        .supporters:before{
            content:"";
            position:absolute;
            inset:0;
            opacity:.25;
            background:url("/assets/images/backpic/back-2.jpg") center/cover;
            mix-blend-mode:screen;
        }
        .supporter-grid{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
        .supporter-copy p{color:var(--muted);max-width:420px}
        .supporter-collage{display:grid;grid-template-columns:1fr 1fr;gap:13px}
        .supporter-card{
            min-height:145px;
            padding:21px;
            border:1px solid rgba(255,231,132,.22);
            background:rgba(12,47,29,.67);
            backdrop-filter:blur(8px);
            border-radius:15px;
            transition:.25s ease;
        }
        .supporter-card:nth-child(2){transform:translateY(30px)}
        .supporter-card:nth-child(3){transform:translateY(-10px)}
        .supporter-card:hover{border-color:var(--gold);transform:translateY(-5px)}
        .supporter-card:nth-child(2):hover{transform:translateY(25px)}
        .supporter-card:nth-child(3):hover{transform:translateY(-15px)}
        .supporter-icon{color:var(--gold);font-size:1.4rem;margin-bottom:13px}
        .supporter-card h3{font-size:.96rem;margin-bottom:5px;font-weight:800}
        .supporter-card p{margin:0;color:var(--muted);font-size:.79rem;line-height:1.55}
        .article-section{padding-bottom:98px}
        .article-heading{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:35px}
        .article-heading .section-intro{max-width:560px}
        .article-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:46px}
        .article-list{border-top:1px solid rgba(255,255,255,.15)}
        .article-row{
            display:grid;
            grid-template-columns:93px 1fr auto;
            align-items:center;
            gap:21px;
            padding:22px 0;
            border-bottom:1px solid rgba(255,255,255,.13);
            transition:.2s ease;
        }
        .article-row:hover{padding-left:9px;border-color:rgba(255,204,0,.7)}
        .article-date{color:var(--gold-soft);font-size:.78rem;font-weight:800;line-height:1.3}
        .article-date span{display:block;color:var(--muted);font-weight:500;margin-top:4px;font-size:.72rem}
        .article-content h3{font-size:1rem;line-height:1.42;margin-bottom:5px;font-weight:800}
        .article-content h3 a:hover{color:var(--gold)}
        .article-content p{margin:0;font-size:.83rem;line-height:1.55;color:var(--muted)}
        .article-arrow{color:var(--gold);font-size:1.1rem}
        .insight-panel{
            min-height:100%;
            padding:26px;
            border-radius:var(--radius);
            background:linear-gradient(145deg,#16462c,#0c2d1c);
            border:1px solid var(--line);
        }
        .insight-panel img{height:142px;width:100%;object-fit:cover;border-radius:12px;margin-bottom:20px;opacity:.87}
        .insight-panel h3{font-family:"Playfair Display",serif;font-size:1.5rem;line-height:1.2;margin-bottom:12px}
        .insight-panel p{font-size:.88rem;color:var(--muted);margin-bottom:16px}
        .text-link{color:var(--gold);font-weight:800;font-size:.86rem}
        .text-link:hover{color:#fff0a4}
        .trust-strip{padding:30px 0;background:#123c25;border-top:1px solid rgba(255,255,255,.08)}
        .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
        .trust-item{display:flex;align-items:flex-start;gap:13px}
        .trust-item i{color:var(--gold);font-size:1.25rem;margin-top:3px}
        .trust-item strong{display:block;font-size:.87rem;color:#fffef8}
        .trust-item span{display:block;color:var(--muted);font-size:.76rem;line-height:1.45;margin-top:2px}
        .faq-section{padding-top:94px;padding-bottom:96px}
        .faq-layout{display:grid;grid-template-columns:.73fr 1.27fr;gap:78px}
        .faq-side p{color:var(--muted)}
        .faq-contact{display:inline-flex;gap:8px;align-items:center;margin-top:12px;color:var(--gold);font-size:.88rem;font-weight:800}
        .faq-list{border-top:1px solid rgba(255,255,255,.15)}
        .faq-item{border-bottom:1px solid rgba(255,255,255,.15)}
        .faq-question{
            display:flex;
            justify-content:space-between;
            align-items:center;
            width:100%;
            text-align:left;
            padding:20px 2px;
            color:#f8fff8;
            background:transparent;
            font-size:.98rem;
            line-height:1.4;
            font-weight:800;
            cursor:pointer;
        }
        .faq-question i{color:var(--gold);transition:transform .25s ease}
        .faq-question[aria-expanded="true"] i{transform:rotate(45deg)}
        .faq-answer{display:none;padding:0 32px 21px 2px;color:var(--muted);font-size:.9rem;line-height:1.72}
        .faq-answer.show{display:block}
        .support-section{
            padding:74px 0;
            background:linear-gradient(110deg,rgba(255,204,0,.98),#f3b800 54%,#dfa300);
            color:#17351e;
            overflow:hidden;
        }
        .support-section:after{
            content:"♠";
            position:absolute;
            right:5%;top:-110px;
            color:rgba(82,57,0,.12);
            font-size:26rem;
            font-family:serif;
            line-height:1;
        }
        .support-layout{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:65px;align-items:center}
        .support-section .section-kicker{color:#8b1717}
        .support-section .section-title{color:#18351e;max-width:500px}
        .support-section .section-intro{color:#355033;max-width:500px}
        .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
        .form-field{position:relative}
        .form-field.full{grid-column:1/-1}
        .contact-form input{
            width:100%;
            padding:13px 14px;
            color:#12331f;
            background:rgba(255,255,255,.82);
            border:1px solid rgba(34,57,26,.18);
            border-radius:9px;
            outline:none;
            font-size:.88rem;
            transition:.2s ease;
        }
        .contact-form input:focus{background:#fff;border-color:#214b2c;box-shadow:0 0 0 3px rgba(30,76,40,.16)}
        .form-submit{
            display:inline-flex;
            justify-content:center;
            align-items:center;
            gap:8px;
            padding:13px 17px;
            color:#fff;
            background:#123c25;
            border-radius:9px;
            font-weight:800;
            font-size:.9rem;
            cursor:pointer;
            transition:.2s ease;
        }
        .form-submit:hover{background:#082816;transform:translateY(-2px)}
        .privacy-note{grid-column:1/-1;margin:1px 0 0;color:#42603d;font-size:.72rem;line-height:1.55}
        .site-footer{padding:58px 0 22px;background:#06170f;color:var(--muted)}
        .footer-top{display:grid;grid-template-columns:1.1fr .7fr .8fr;gap:60px;padding-bottom:43px;border-bottom:1px solid rgba(255,255,255,.1)}
        .footer-brand{max-width:380px}
        .footer-brand .brand{width:auto;margin-bottom:16px}
        .footer-brand p{font-size:.83rem;line-height:1.65;margin:0}
        .footer-heading{color:var(--gold-soft);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
        .footer-links{display:grid;gap:8px}
        .footer-links a{font-size:.84rem;transition:.2s ease}
        .footer-links a:hover{color:var(--gold);padding-left:3px}
        .footer-badges{display:flex;flex-wrap:wrap;gap:8px}
        .footer-badge{padding:7px 9px;border:1px solid rgba(255,204,0,.32);border-radius:7px;color:#d9eadc;font-size:.72rem;font-weight:700}
        .responsible-note{margin-top:16px;font-size:.78rem;line-height:1.62}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;font-size:.73rem}
        .footer-bottom a{color:var(--gold-soft)}
        .fab{
            position:fixed;
            left:16px;
            bottom:96px;
            z-index:90;
            display:grid;
            place-items:center;
            width:57px;
            height:57px;
            color:var(--gold);
            background:rgba(7,29,18,.82);
            border:1px solid var(--gold);
            border-radius:50%;
            box-shadow:0 4px 20px rgba(255,204,0,.3),inset 0 0 15px rgba(255,204,0,.12);
            opacity:.75;
            transition:.25s ease;
            animation:float 3.2s ease-in-out infinite;
        }
        .fab:before{
            content:"";
            position:absolute;
            inset:4px;
            border:1px dashed rgba(255,204,0,.75);
            border-radius:50%;
            animation:spin 8s linear infinite;
        }
        .fab i{position:relative;font-size:1.35rem;transition:.4s ease}
        .fab em{position:absolute;right:2px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 9px var(--red);animation:blink 1.2s infinite}
        .fab:hover{opacity:1;transform:scale(1.1);color:#fff;box-shadow:0 5px 28px rgba(255,204,0,.58)}
        .fab:hover i{transform:rotate(360deg)}
        .fab:active{transform:scale(.95) translateY(2px)}
        @keyframes float{50%{transform:translateY(-7px)}}
        @keyframes spin{to{transform:rotate(360deg)}}
        @keyframes blink{50%{opacity:.25}}
        @media (max-width:1024px){
            .brand{width:190px;font-size:.74rem}
            .main-nav{gap:0}
            .main-nav a{padding:8px 8px;font-size:.79rem}
            .hero-grid,.progress-layout,.faq-layout{gap:40px}
            .tier-heading{gap:35px}
            .article-layout{gap:28px}
        }
        @media (max-width:768px){
            .container{width:min(100% - 30px,1160px)}
            .site-header{position:sticky}
            .nav-wrap{min-height:67px;gap:8px}
            .brand{width:auto;max-width:195px;font-size:.68rem}
            .brand-mark{width:33px;height:33px}
            .menu-toggle{display:block;order:3}
            .nav-actions{margin-left:auto;order:2}
            .login-link{padding:7px;font-size:.76rem}
            .nav-join{padding:8px 10px;font-size:.75rem}
            .main-nav{
                display:none;
                position:absolute;
                top:67px;
                left:0;right:0;
                padding:12px 15px 16px;
                background:#092516;
                border-bottom:1px solid var(--line);
                box-shadow:var(--shadow);
            }
            .main-nav.open{display:grid;grid-template-columns:1fr 1fr}
            .main-nav a{padding:10px}
            .hero{min-height:auto;padding:55px 0 58px}
            .hero-grid,.progress-layout,.supporter-grid,.article-layout,.faq-layout,.support-layout{grid-template-columns:1fr}
            .hero-grid{gap:43px}
            h1{font-size:clamp(2.25rem,9vw,3.8rem)}
            .coupon-stage{max-width:500px;width:100%;margin:auto}
            section{padding:66px 0}
            .progress-layout,.faq-layout{gap:30px}
            .tier-heading{grid-template-columns:1fr;gap:13px;margin-bottom:27px}
            .tier-grid{grid-template-columns:1fr 1fr}
            .tier-card.featured{grid-column:1/-1;min-height:250px}
            .supporter-grid{gap:32px}
            .article-heading{display:block}
            .article-heading .section-intro{margin-top:12px}
            .article-layout{gap:27px}
            .insight-panel{max-width:520px}
            .trust-grid{grid-template-columns:1fr 1fr}
            .faq-side{max-width:550px}
            .support-layout{gap:29px}
            .footer-top{grid-template-columns:1.1fr 1fr;gap:32px}
            .footer-top>div:first-child{grid-column:1/-1}
        }
        @media (max-width:520px){
            .container{width:calc(100% - 26px)}
            .brand{max-width:145px;font-size:.61rem}
            .brand-mark{width:30px;height:30px;font-size:.8rem}
            .login-link{display:none}
            .nav-join{padding:8px 9px;font-size:.69rem}
            .menu-toggle{padding:5px}
            .hero{padding-top:43px}
            .hero-copy{font-size:.94rem}
            .hero-stats{gap:16px}
            .hero-stat b{font-size:1.02rem}
            .coupon-card{padding:24px 22px 21px}
            .coupon-card h2{font-size:1.7rem}
            .coupon-card:after{right:30px}
            .coupon-number{right:10px;font-size:1.3rem;width:58px}
            .section-title{font-size:1.85rem}
            .goal-item{grid-template-columns:96px 1fr 38px;gap:10px}
            .goal-name{font-size:.77rem}
            .goal-pct{font-size:.74rem}
            .tier-grid{grid-template-columns:1fr}
            .tier-card.featured{grid-column:auto}
            .supporter-collage{gap:9px}
            .supporter-card{min-height:135px;padding:16px}
            .supporter-card:nth-child(2){transform:translateY(18px)}
            .article-row{grid-template-columns:70px 1fr 13px;gap:11px}
            .article-content h3{font-size:.91rem}
            .article-content p{font-size:.77rem}
            .article-date{font-size:.7rem}
            .trust-grid{grid-template-columns:1fr;gap:15px}
            .contact-form{grid-template-columns:1fr}
            .form-field.full{grid-column:auto}
            .privacy-note{grid-column:auto}
            .footer-top{grid-template-columns:1fr;gap:28px}
            .footer-top>div:first-child{grid-column:auto}
            .footer-bottom{display:block;line-height:1.8}
            .fab{bottom:80px;left:13px;width:52px;height:52px}
        }

/* roulang page: article */
:root{
            --bg:#0b2519;
            --bg-deep:#06170f;
            --surface:#103522;
            --surface-2:#16462c;
            --surface-3:#1a5032;
            --gold:#ffcc00;
            --gold-soft:#ffe584;
            --lime:#72db62;
            --mint:#ccebd6;
            --text:#fffdf0;
            --muted:#b7d3c0;
            --line:rgba(255,230,132,.23);
            --line-soft:rgba(255,255,255,.10);
            --red:#f04747;
            --shadow:0 18px 50px rgba(0,0,0,.28);
            --shadow-soft:0 10px 30px rgba(0,0,0,.18);
            --radius:20px;
            --radius-sm:12px;
            --radius-xs:8px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            background:var(--bg-deep);
            color:var(--text);
            font-family:"Be Vietnam Pro",Arial,sans-serif;
            font-size:16px;
            line-height:1.65;
            overflow-x:hidden;
        }
        body:before{
            content:"";
            position:fixed;
            inset:0;
            z-index:-2;
            background:
                radial-gradient(circle at 12% 18%,rgba(114,219,98,.13),transparent 29rem),
                radial-gradient(circle at 88% 42%,rgba(255,204,0,.09),transparent 25rem),
                linear-gradient(130deg,#06170f 0%,#0b2519 45%,#071b11 100%);
        }
        body:after{
            content:"";
            position:fixed;
            inset:0;
            z-index:-1;
            opacity:.16;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
                linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
            background-size:46px 46px;
            mask-image:linear-gradient(to bottom,black,transparent 70%);
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input{font:inherit}
        button{border:0}
        button:focus-visible,
        a:focus-visible,
        input:focus-visible{
            outline:3px solid rgba(255,204,0,.7);
            outline-offset:3px;
        }
        .container{width:min(1160px,calc(100% - 40px));margin:0 auto}

        .site-header{
            position:sticky;
            top:0;
            z-index:100;
            background:rgba(6,23,15,.88);
            backdrop-filter:blur(18px);
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .nav-wrap{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:10px;
            width:240px;
            flex:none;
            font-weight:800;
            line-height:1.16;
            font-size:.84rem;
            color:var(--gold-soft);
        }
        .brand-mark{
            display:grid;
            place-items:center;
            flex:none;
            width:39px;
            height:39px;
            color:#0b2519;
            background:linear-gradient(135deg,var(--gold),#f6a900);
            border-radius:50% 50% 45% 45%;
            box-shadow:0 0 0 4px rgba(255,204,0,.13),0 8px 22px rgba(0,0,0,.3);
            font-size:1rem;
        }
        .main-nav{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:5px;
        }
        .main-nav a{
            padding:9px 11px;
            border-radius:8px;
            color:var(--mint);
            font-size:.86rem;
            font-weight:600;
            transition:.22s ease;
        }
        .main-nav a:hover,
        .main-nav a.active{
            color:var(--gold);
            background:rgba(255,204,0,.09);
        }
        .nav-actions{
            display:flex;
            align-items:center;
            gap:8px;
            flex:none;
        }
        .nav-login{
            color:var(--mint);
            font-weight:700;
            font-size:.86rem;
            padding:9px 8px;
            transition:.2s ease;
            white-space:nowrap;
        }
        .nav-login:hover{color:var(--gold)}
        .nav-join,
        .btn-gold{
            display:inline-flex;
            justify-content:center;
            align-items:center;
            gap:8px;
            color:#0b2519;
            background:linear-gradient(135deg,#ffdc39,var(--gold));
            font-weight:800;
            border-radius:9px;
            padding:10px 15px;
            box-shadow:0 7px 19px rgba(255,204,0,.17);
            transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
            white-space:nowrap;
        }
        .nav-join:hover,
        .btn-gold:hover{
            transform:translateY(-2px);
            box-shadow:0 11px 26px rgba(255,204,0,.28);
            filter:brightness(1.04);
        }
        .nav-join:active,
        .btn-gold:active{transform:translateY(1px)}
        .menu-toggle{
            display:none;
            color:var(--gold);
            background:transparent;
            font-size:1.35rem;
            padding:7px;
        }

        .article-hero{
            position:relative;
            overflow:hidden;
            padding:66px 0 62px;
            background:
                linear-gradient(90deg,rgba(5,20,13,.95) 0%,rgba(6,27,17,.82) 54%,rgba(6,23,15,.91) 100%),
                url("/assets/images/backpic/back-2.jpg") center/cover;
            border-bottom:1px solid var(--line);
        }
        .article-hero:after{
            content:"";
            position:absolute;
            width:470px;
            height:470px;
            right:-120px;
            bottom:-250px;
            border:1px solid rgba(255,204,0,.25);
            border-radius:50%;
            box-shadow:0 0 0 42px rgba(255,204,0,.03),0 0 0 84px rgba(255,204,0,.02);
        }
        .hero-layout{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:minmax(0,1.25fr) minmax(260px,.55fr);
            gap:58px;
            align-items:end;
        }
        .breadcrumb{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:8px;
            color:var(--muted);
            font-size:.83rem;
            margin-bottom:24px;
        }
        .breadcrumb a{transition:.2s ease}
        .breadcrumb a:hover{color:var(--gold)}
        .breadcrumb i{font-size:.66rem;color:var(--gold)}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:16px;
            color:var(--gold-soft);
            text-transform:uppercase;
            letter-spacing:.1em;
            font-size:.73rem;
            font-weight:800;
        }
        .eyebrow:before{
            content:"";
            width:25px;
            height:2px;
            background:var(--gold);
        }
        h1,h2,h3,h4{margin-top:0;color:var(--text)}
        h1{
            max-width:840px;
            margin-bottom:20px;
            font-family:"Playfair Display","Be Vietnam Pro",serif;
            font-size:clamp(2rem,4.4vw,4rem);
            line-height:1.14;
            letter-spacing:-.035em;
        }
        .hero-summary{
            max-width:760px;
            color:#d7eddd;
            margin:0;
            font-size:1.03rem;
            line-height:1.75;
        }
        .article-meta{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:12px 22px;
            margin-top:25px;
            color:var(--muted);
            font-size:.84rem;
        }
        .article-meta span{
            display:inline-flex;
            align-items:center;
            gap:7px;
        }
        .article-meta i{color:var(--gold)}
        .cover-card{
            position:relative;
            min-height:274px;
            padding:20px;
            display:flex;
            flex-direction:column;
            justify-content:flex-end;
            overflow:hidden;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:#103522;
            box-shadow:var(--shadow);
        }
        .cover-card:before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(0deg,rgba(4,17,10,.95),rgba(4,17,10,.14) 72%),
                url("/assets/images/coverpic/cover-6.jpg") center/cover;
            transition:transform .5s ease;
        }
        .cover-card:hover:before{transform:scale(1.05)}
        .cover-card > *{position:relative;z-index:1}
        .cover-label{
            align-self:flex-start;
            padding:6px 10px;
            border:1px solid rgba(255,229,132,.42);
            border-radius:999px;
            background:rgba(6,23,15,.62);
            color:var(--gold-soft);
            font-size:.72rem;
            font-weight:800;
        }
        .cover-card strong{
            display:block;
            max-width:180px;
            margin-top:auto;
            font-size:1.08rem;
            line-height:1.35;
        }
        .cover-card small{color:var(--mint);margin-top:6px}

        main{padding:70px 0 0}
        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,1fr) 300px;
            gap:52px;
            align-items:start;
        }
        .article-main{min-width:0}
        .content-topline{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:18px;
            padding-bottom:19px;
            margin-bottom:31px;
            border-bottom:1px solid var(--line-soft);
        }
        .content-topline p{
            margin:0;
            color:var(--gold-soft);
            font-weight:700;
            font-size:.86rem;
        }
        .reading-time{
            color:var(--muted);
            white-space:nowrap;
            font-size:.82rem;
        }
        .article-body{
            color:#e2f0e5;
            font-size:1.03rem;
            line-height:1.78;
        }
        .article-body > *:first-child{margin-top:0}
        .article-body h2{
            margin:46px 0 17px;
            color:var(--gold-soft);
            font-family:"Playfair Display","Be Vietnam Pro",serif;
            font-size:clamp(1.45rem,2.4vw,2.1rem);
            line-height:1.28;
        }
        .article-body h3{
            margin:31px 0 12px;
            color:var(--text);
            font-size:1.23rem;
            line-height:1.4;
        }
        .article-body p{margin:0 0 20px}
        .article-body a{
            color:var(--gold-soft);
            text-decoration:underline;
            text-decoration-color:rgba(255,204,0,.45);
            text-underline-offset:3px;
        }
        .article-body a:hover{color:var(--gold)}
        .article-body ul,
        .article-body ol{
            margin:0 0 23px;
            padding-left:1.35rem;
        }
        .article-body li{margin-bottom:9px;padding-left:4px}
        .article-body li::marker{color:var(--gold)}
        .article-body blockquote{
            margin:30px 0;
            padding:19px 22px;
            border-left:3px solid var(--gold);
            border-radius:0 var(--radius-sm) var(--radius-sm) 0;
            background:rgba(255,204,0,.07);
            color:var(--mint);
            font-size:1.03rem;
        }
        .article-body img{
            width:100%;
            margin:31px 0;
            border:1px solid var(--line);
            border-radius:var(--radius-sm);
            box-shadow:var(--shadow-soft);
        }
        .article-body table{
            width:100%;
            margin:28px 0;
            overflow:hidden;
            border-collapse:separate;
            border-spacing:0;
            border:1px solid var(--line);
            border-radius:var(--radius-sm);
            color:var(--mint);
        }
        .article-body th,
        .article-body td{
            padding:13px 15px;
            border-right:1px solid var(--line-soft);
            border-bottom:1px solid var(--line-soft);
            text-align:left;
        }
        .article-body th{
            background:rgba(255,204,0,.09);
            color:var(--gold-soft);
            font-size:.88rem;
        }
        .article-body tr:last-child td{border-bottom:0}
        .article-body th:last-child,
        .article-body td:last-child{border-right:0}

        .missing-content{
            padding:42px 30px;
            border:1px dashed rgba(255,230,132,.35);
            border-radius:var(--radius);
            background:rgba(16,53,34,.55);
            text-align:left;
        }
        .missing-content h2{
            margin-bottom:8px;
            color:var(--gold-soft);
            font-family:"Playfair Display","Be Vietnam Pro",serif;
        }
        .missing-content p{color:var(--muted);margin-bottom:20px}

        .article-sidebar{
            position:sticky;
            top:102px;
        }
        .side-panel{
            margin-bottom:18px;
            padding:22px;
            border:1px solid var(--line);
            border-radius:var(--radius-sm);
            background:linear-gradient(145deg,rgba(22,70,44,.83),rgba(10,42,25,.82));
            box-shadow:var(--shadow-soft);
        }
        .side-panel h3{
            margin-bottom:12px;
            color:var(--gold-soft);
            font-size:1rem;
        }
        .side-panel p{
            margin:0;
            color:var(--muted);
            font-size:.88rem;
            line-height:1.65;
        }
        .mini-list{
            display:grid;
            gap:12px;
            margin:17px 0 0;
            padding:0;
            list-style:none;
        }
        .mini-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:var(--mint);
            font-size:.84rem;
            line-height:1.52;
        }
        .mini-list i{
            margin-top:4px;
            color:var(--lime);
            font-size:.75rem;
        }
        .topic-tags{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:16px;
        }
        .topic-tags span{
            padding:5px 9px;
            border:1px solid rgba(255,230,132,.25);
            border-radius:999px;
            color:var(--gold-soft);
            background:rgba(255,204,0,.05);
            font-size:.72rem;
            font-weight:700;
        }
        .side-image{
            min-height:185px;
            position:relative;
            overflow:hidden;
            display:flex;
            align-items:flex-end;
            padding:18px;
            border-radius:var(--radius-sm);
            background:
                linear-gradient(0deg,rgba(4,20,12,.9),rgba(4,20,12,.12)),
                url("/assets/images/coverpic/cover-3.jpg") center/cover;
            border:1px solid var(--line);
        }
        .side-image span{
            font-size:.9rem;
            font-weight:800;
            line-height:1.42;
        }

        .insight-section{
            margin-top:75px;
            padding:62px 0;
            border-top:1px solid var(--line-soft);
            border-bottom:1px solid var(--line-soft);
            background:rgba(5,24,14,.38);
        }
        .insight-grid{
            display:grid;
            grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
            gap:66px;
            align-items:start;
        }
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:7px;
            color:var(--gold);
            font-size:.75rem;
            font-weight:800;
            letter-spacing:.08em;
            text-transform:uppercase;
        }
        .section-kicker i{font-size:.8rem}
        .section-title{
            margin:13px 0 14px;
            font-family:"Playfair Display","Be Vietnam Pro",serif;
            font-size:clamp(1.65rem,3vw,2.45rem);
            line-height:1.22;
        }
        .section-copy{
            margin:0;
            color:var(--muted);
            max-width:480px;
        }
        .signal-list{
            display:grid;
            gap:0;
            border-top:1px solid var(--line-soft);
        }
        .signal-item{
            display:grid;
            grid-template-columns:50px 1fr;
            gap:16px;
            padding:21px 0;
            border-bottom:1px solid var(--line-soft);
        }
        .signal-number{
            color:var(--gold);
            font-family:"Playfair Display",serif;
            font-size:1.35rem;
            line-height:1;
        }
        .signal-item h3{
            margin:0 0 5px;
            color:var(--text);
            font-size:1rem;
        }
        .signal-item p{
            margin:0;
            color:var(--muted);
            font-size:.9rem;
            line-height:1.65;
        }

        .faq-section{padding:76px 0}
        .faq-layout{
            display:grid;
            grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
            gap:64px;
            align-items:start;
        }
        .faq-intro{position:sticky;top:104px}
        .faq-intro .section-copy{margin-bottom:22px}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{
            border-bottom:1px solid var(--line);
        }
        .faq-question{
            width:100%;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            padding:20px 0;
            color:var(--text);
            background:transparent;
            font-weight:800;
            text-align:left;
            cursor:pointer;
        }
        .faq-question i{
            flex:none;
            color:var(--gold);
            transition:transform .25s ease;
        }
        .faq-item.open .faq-question i{transform:rotate(45deg)}
        .faq-answer{
            display:grid;
            grid-template-rows:0fr;
            opacity:0;
            transition:grid-template-rows .3s ease,opacity .25s ease;
        }
        .faq-answer > div{overflow:hidden}
        .faq-answer p{
            margin:0;
            padding:0 34px 20px 0;
            color:var(--muted);
            font-size:.92rem;
        }
        .faq-item.open .faq-answer{
            grid-template-rows:1fr;
            opacity:1;
        }

        .download-section{
            margin:0 0 76px;
        }
        .download-box{
            position:relative;
            overflow:hidden;
            display:grid;
            grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
            gap:40px;
            align-items:center;
            padding:43px 48px;
            border:1px solid rgba(255,204,0,.42);
            border-radius:var(--radius);
            background:
                linear-gradient(120deg,rgba(20,70,40,.96),rgba(7,31,18,.95)),
                url("/assets/images/backpic/back-3.jpg") center/cover;
            box-shadow:var(--shadow);
        }
        .download-box:before{
            content:"";
            position:absolute;
            width:330px;
            height:330px;
            right:22%;
            top:-240px;
            border-radius:50%;
            background:rgba(255,204,0,.07);
            filter:blur(6px);
        }
        .download-copy,
        .download-form{position:relative;z-index:1}
        .download-copy h2{
            margin:10px 0 12px;
            font-family:"Playfair Display","Be Vietnam Pro",serif;
            font-size:clamp(1.6rem,3vw,2.4rem);
            line-height:1.25;
        }
        .download-copy p{margin:0;color:var(--mint)}
        .download-form{
            display:flex;
            flex-direction:column;
            gap:11px;
        }
        .form-label{
            color:var(--gold-soft);
            font-weight:700;
            font-size:.84rem;
        }
        .email-row{
            display:flex;
            gap:9px;
        }
        .email-row input{
            min-width:0;
            flex:1;
            padding:12px 14px;
            color:var(--text);
            border:1px solid rgba(255,255,255,.18);
            border-radius:9px;
            background:rgba(4,21,12,.69);
        }
        .email-row input::placeholder{color:#9bb9a4}
        .email-row input:focus{
            border-color:var(--gold);
            box-shadow:0 0 0 4px rgba(255,204,0,.12);
            outline:0;
        }
        .form-note{
            margin:0;
            color:var(--muted);
            font-size:.74rem;
            line-height:1.55;
        }
        .form-status{
            min-height:18px;
            margin:0;
            color:var(--lime);
            font-size:.79rem;
            font-weight:700;
        }

        .site-footer{
            padding:57px 0 22px;
            background:#05170e;
            border-top:1px solid var(--line);
        }
        .footer-top{
            display:grid;
            grid-template-columns:1.2fr .7fr 1.1fr;
            gap:48px;
            padding-bottom:42px;
        }
        .footer-brand .brand{margin-bottom:17px}
        .footer-brand p{
            max-width:370px;
            margin:0;
            color:var(--muted);
            font-size:.86rem;
        }
        .footer-heading{
            margin:5px 0 14px;
            color:var(--gold-soft);
            font-size:.84rem;
            font-weight:800;
        }
        .footer-links{
            display:grid;
            gap:9px;
        }
        .footer-links a{
            color:var(--muted);
            font-size:.85rem;
            transition:.2s ease;
        }
        .footer-links a:hover{
            color:var(--gold);
            transform:translateX(3px);
        }
        .footer-badges{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-bottom:15px;
        }
        .footer-badge{
            padding:5px 9px;
            border:1px solid rgba(114,219,98,.24);
            border-radius:999px;
            color:#c4ebcc;
            background:rgba(114,219,98,.07);
            font-size:.72rem;
            font-weight:700;
        }
        .footer-badge i{color:var(--lime)}
        .responsible-note{
            margin:0;
            color:var(--muted);
            font-size:.78rem;
            line-height:1.6;
        }
        .footer-bottom{
            display:flex;
            justify-content:space-between;
            gap:18px;
            padding-top:20px;
            border-top:1px solid rgba(255,255,255,.09);
            color:#89ad95;
            font-size:.75rem;
        }

        .support-fab{
            position:fixed;
            left:16px;
            bottom:96px;
            z-index:90;
            display:flex;
            align-items:center;
            justify-content:center;
            width:58px;
            height:58px;
            color:var(--gold-soft);
            border:2px solid var(--gold);
            border-radius:50%;
            background:
                radial-gradient(circle at 30% 25%,rgba(255,255,255,.16),transparent 23%),
                linear-gradient(145deg,#173822,#07140c);
            box-shadow:0 4px 20px rgba(255,215,0,.3),inset 0 0 0 4px rgba(255,204,0,.12);
            opacity:.74;
            transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease;
            animation:floatSupport 3.2s ease-in-out infinite;
        }
        .support-fab:before{
            content:"";
            position:absolute;
            top:6px;
            right:7px;
            width:9px;
            height:9px;
            border-radius:50%;
            background:var(--red);
            box-shadow:0 0 0 3px rgba(240,71,71,.16);
            animation:blinkDot 1.2s infinite;
        }
        .support-fab i{font-size:1.28rem;transition:transform .45s ease}
        .support-fab:hover{
            opacity:1;
            color:#fff;
            transform:scale(1.1);
            box-shadow:0 6px 27px rgba(255,215,0,.48),inset 0 0 0 4px rgba(255,204,0,.16);
        }
        .support-fab:hover i{transform:rotate(360deg)}
        .support-fab:active{transform:translateY(2px) scale(.95)}
        @keyframes floatSupport{
            0%,100%{transform:translateY(0)}
            50%{transform:translateY(-6px)}
        }
        @keyframes blinkDot{
            0%,100%{opacity:1}
            50%{opacity:.2}
        }

        @media (max-width:1024px){
            .brand{width:210px}
            .main-nav a{padding:8px 8px;font-size:.8rem}
            .hero-layout{gap:34px}
            .article-layout{gap:34px;grid-template-columns:minmax(0,1fr) 270px}
            .insight-grid,.faq-layout{gap:40px}
            .download-box{padding:36px}
        }

        @media (max-width:768px){
            .container{width:min(100% - 30px,1160px)}
            .nav-wrap{min-height:68px;gap:10px}
            .brand{width:auto;max-width:188px;font-size:.75rem}
            .brand-mark{width:35px;height:35px}
            .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
            .main-nav{
                position:absolute;
                top:68px;
                left:0;
                right:0;
                display:none;
                flex-direction:column;
                align-items:stretch;
                gap:3px;
                padding:13px 15px 17px;
                border-bottom:1px solid var(--line);
                background:rgba(6,23,15,.98);
                box-shadow:0 16px 30px rgba(0,0,0,.26);
            }
            .main-nav.show{display:flex}
            .main-nav a{padding:10px 12px}
            .nav-login{display:none}
            .nav-join{padding:9px 11px;font-size:.78rem}
            .article-hero{padding:42px 0 46px}
            .hero-layout{grid-template-columns:1fr;gap:27px}
            h1{font-size:clamp(2rem,8vw,3.1rem)}
            .cover-card{min-height:188px}
            main{padding-top:48px}
            .article-layout{grid-template-columns:1fr}
            .article-sidebar{
                position:static;
                display:grid;
                grid-template-columns:1fr 1fr;
                gap:15px;
            }
            .side-panel{margin:0}
            .side-image{grid-column:1/-1}
            .insight-section{margin-top:55px;padding:50px 0}
            .insight-grid,.faq-layout{grid-template-columns:1fr;gap:30px}
            .faq-intro{position:static}
            .download-box{grid-template-columns:1fr;gap:25px;padding:31px 25px}
            .footer-top{grid-template-columns:1fr 1fr;gap:30px}
            .footer-brand{grid-column:1/-1}
        }

        @media (max-width:520px){
            body{font-size:15px}
            .container{width:calc(100% - 28px)}
            .brand{max-width:156px;font-size:.68rem}
            .brand-mark{width:32px;height:32px;font-size:.82rem}
            .nav-join{padding:8px 9px;font-size:.71rem}
            .article-hero{padding:34px 0 39px}
            .breadcrumb{font-size:.75rem;margin-bottom:18px}
            .hero-summary{font-size:.94rem}
            .article-meta{gap:8px 14px;font-size:.76rem}
            .content-topline{align-items:flex-start;flex-direction:column;gap:6px;margin-bottom:25px}
            .article-body{font-size:1rem}
            .article-body h2{margin-top:36px}
            .article-body blockquote{padding:16px 17px}
            .article-body th,.article-body td{padding:10px;font-size:.8rem}
            .article-sidebar{grid-template-columns:1fr}
            .side-image{grid-column:auto}
            .signal-item{grid-template-columns:37px 1fr;gap:10px}
            .faq-section{padding:55px 0}
            .faq-question{font-size:.91rem;padding:17px 0}
            .download-section{margin-bottom:55px}
            .download-box{padding:27px 20px}
            .email-row{flex-direction:column}
            .email-row .btn-gold{width:100%}
            .footer-top{grid-template-columns:1fr;gap:26px}
            .footer-brand{grid-column:auto}
            .footer-bottom{flex-direction:column;gap:6px}
            .support-fab{width:52px;height:52px;bottom:76px;left:14px}
        }

/* roulang page: category1 */
:root{
            --bg:#0b2519;
            --bg-deep:#06170f;
            --surface:#103522;
            --surface-2:#16462c;
            --gold:#ffcc00;
            --gold-soft:#ffe584;
            --lime:#72db62;
            --mint:#ccebd6;
            --text:#fffdf0;
            --muted:#b7d3c0;
            --line:rgba(255,230,132,.23);
            --red:#f04747;
            --shadow:0 18px 50px rgba(0,0,0,.28);
            --radius:20px;
            --radius-sm:12px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            background:var(--bg-deep);
            color:var(--text);
            font-family:"Be Vietnam Pro",Arial,sans-serif;
            font-size:16px;
            line-height:1.65;
            overflow-x:hidden;
        }
        body:before{
            content:"";
            position:fixed;
            inset:0;
            z-index:-2;
            background:
                radial-gradient(circle at 12% 18%,rgba(114,219,98,.13),transparent 29rem),
                radial-gradient(circle at 88% 42%,rgba(255,204,0,.09),transparent 25rem),
                linear-gradient(130deg,#06170f 0%,#0b2519 45%,#071b11 100%);
        }
        body:after{
            content:"";
            position:fixed;
            inset:0;
            z-index:-1;
            opacity:.16;
            pointer-events:none;
            background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
            background-size:46px 46px;
            mask-image:linear-gradient(to bottom,black,transparent 70%);
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{border:0}
        .container{width:min(1160px,calc(100% - 40px));margin:0 auto}
        .site-header{
            position:sticky;
            top:0;
            z-index:100;
            background:rgba(6,23,15,.88);
            backdrop-filter:blur(18px);
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .nav-wrap{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:10px;
            width:240px;
            flex-shrink:0;
            font-weight:800;
            line-height:1.16;
            font-size:.84rem;
            color:var(--gold-soft);
        }
        .brand-mark{
            display:grid;
            place-items:center;
            flex:none;
            width:39px;
            height:39px;
            color:#0b2519;
            background:linear-gradient(135deg,var(--gold),#f6a900);
            border-radius:50% 50% 45% 45%;
            box-shadow:0 0 0 4px rgba(255,204,0,.13),0 8px 22px rgba(0,0,0,.3);
            font-size:1rem;
        }
        .main-nav{display:flex;align-items:center;gap:5px}
        .main-nav a{
            padding:9px 11px;
            border-radius:8px;
            color:var(--mint);
            font-size:.86rem;
            font-weight:600;
            white-space:nowrap;
            transition:.22s ease;
        }
        .main-nav a:hover,.main-nav a.active{color:var(--gold);background:rgba(255,204,0,.09)}
        .nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
        .nav-login{
            padding:9px 8px;
            color:var(--mint);
            font-size:.84rem;
            font-weight:700;
            transition:.2s ease;
        }
        .nav-login:hover{color:var(--gold)}
        .nav-join,.btn-gold{
            display:inline-flex;
            justify-content:center;
            align-items:center;
            gap:8px;
            color:#0b2519;
            background:linear-gradient(135deg,#ffdc39,var(--gold));
            font-weight:800;
            border-radius:9px;
            padding:10px 15px;
            box-shadow:0 7px 19px rgba(255,204,0,.17);
            transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
            white-space:nowrap;
        }
        .nav-join:hover,.btn-gold:hover{
            color:#0b2519;
            transform:translateY(-2px);
            box-shadow:0 11px 26px rgba(255,204,0,.28);
            filter:brightness(1.04);
        }
        .nav-join:active,.btn-gold:active{transform:translateY(1px)}
        .menu-toggle{
            display:none;
            color:var(--gold);
            background:transparent;
            font-size:1.35rem;
            padding:7px;
        }
        .menu-toggle:focus-visible,.btn-gold:focus-visible,.btn-outline:focus-visible,.nav-join:focus-visible,.main-nav a:focus-visible,.faq-button:focus-visible,.form-control:focus-visible{
            outline:3px solid rgba(255,204,0,.5);
            outline-offset:3px;
        }

        .category-hero{
            position:relative;
            overflow:hidden;
            padding:86px 0 42px;
            min-height:535px;
            display:flex;
            align-items:center;
            background:
                linear-gradient(90deg,rgba(5,20,13,.95) 0%,rgba(6,27,17,.76) 52%,rgba(6,23,15,.8) 100%),
                url("/assets/images/backpic/back-2.jpg") center/cover;
            border-bottom:1px solid var(--line);
        }
        .category-hero:before{
            content:"";
            position:absolute;
            width:620px;
            height:620px;
            border:1px solid rgba(255,204,0,.22);
            border-radius:50%;
            right:-260px;
            top:-270px;
            box-shadow:0 0 0 62px rgba(255,204,0,.035),0 0 0 124px rgba(114,219,98,.025);
        }
        .hero-content{position:relative;z-index:1}
        .breadcrumb-line{
            display:flex;
            align-items:center;
            gap:8px;
            color:var(--muted);
            font-size:.82rem;
            margin-bottom:25px;
        }
        .breadcrumb-line a:hover{color:var(--gold)}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:15px;
            color:var(--gold-soft);
            text-transform:uppercase;
            letter-spacing:.1em;
            font-size:.73rem;
            font-weight:800;
        }
        .eyebrow:before{content:"";width:25px;height:2px;background:var(--gold)}
        h1,h2,h3,p{margin-top:0}
        h1{
            max-width:880px;
            margin-bottom:18px;
            font-family:"Playfair Display","Be Vietnam Pro",serif;
            font-size:clamp(2.25rem,5vw,4.55rem);
            line-height:1.1;
            letter-spacing:-.035em;
            color:var(--text);
        }
        h2{
            margin-bottom:15px;
            font-family:"Playfair Display","Be Vietnam Pro",serif;
            color:var(--text);
            font-size:clamp(1.8rem,3.1vw,2.85rem);
            line-height:1.17;
            letter-spacing:-.025em;
        }
        h3{
            color:var(--gold-soft);
            font-size:1.05rem;
            line-height:1.36;
            font-weight:800;
        }
        .hero-lead{
            max-width:760px;
            color:#d7eddd;
            font-size:1.05rem;
            line-height:1.72;
            margin-bottom:28px;
        }
        .hero-actions{display:flex;flex-wrap:wrap;gap:11px}
        .btn-outline{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:10px 16px;
            border:1px solid rgba(255,231,132,.55);
            color:var(--gold-soft);
            font-size:.91rem;
            font-weight:800;
            border-radius:9px;
            transition:.2s ease;
        }
        .btn-outline:hover{background:rgba(255,204,0,.1);border-color:var(--gold);color:#fff}
        .countdown-strip{
            position:relative;
            z-index:2;
            margin-top:-1px;
            background:rgba(16,53,34,.96);
            border-bottom:1px solid var(--line);
        }
        .countdown-wrap{
            min-height:77px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:22px;
        }
        .countdown-title{
            display:flex;
            align-items:center;
            gap:11px;
            color:var(--mint);
            font-size:.9rem;
            font-weight:700;
        }
        .countdown-title i{color:var(--gold);font-size:1.15rem}
        .timer-list{display:flex;gap:10px}
        .timer-box{
            min-width:54px;
            padding:5px 8px 4px;
            text-align:center;
            border-left:1px solid var(--line);
        }
        .timer-box strong{display:block;color:var(--gold);font-size:1.05rem;line-height:1.1}
        .timer-box span{display:block;color:var(--muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em}

        main{padding:0}
        .section{padding:88px 0}
        .section-sm{padding:62px 0}
        .section-title{max-width:700px}
        .section-kicker{
            margin-bottom:10px;
            color:var(--lime);
            font-size:.74rem;
            font-weight:800;
            letter-spacing:.11em;
            text-transform:uppercase;
        }
        .section-intro{max-width:760px;color:var(--muted);margin-bottom:0}
        .data-board{
            margin-top:38px;
            display:grid;
            grid-template-columns:1.06fr .94fr;
            border:1px solid var(--line);
            border-radius:var(--radius);
            overflow:hidden;
            background:rgba(16,53,34,.72);
            box-shadow:var(--shadow);
        }
        .board-main{
            padding:35px;
            background:linear-gradient(135deg,rgba(22,70,44,.68),rgba(9,37,24,.92));
        }
        .board-main h3{font-size:1.25rem;margin-bottom:14px}
        .board-main p{color:var(--muted);margin-bottom:22px}
        .signal-list{display:grid;gap:13px}
        .signal-item{
            display:flex;
            align-items:flex-start;
            gap:12px;
            padding-bottom:13px;
            border-bottom:1px solid rgba(255,255,255,.09);
        }
        .signal-item:last-child{padding-bottom:0;border-bottom:0}
        .signal-icon{
            display:grid;
            place-items:center;
            flex:0 0 34px;
            height:34px;
            color:#092515;
            background:var(--lime);
            border-radius:50%;
            font-size:.78rem;
        }
        .signal-item strong{display:block;color:var(--text);font-size:.91rem}
        .signal-item span{display:block;color:var(--muted);font-size:.84rem;line-height:1.55}
        .board-stats{
            padding:28px;
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:1px;
            background:rgba(255,230,132,.12);
        }
        .metric{
            display:flex;
            min-height:145px;
            flex-direction:column;
            justify-content:center;
            padding:23px;
            background:rgba(7,30,18,.92);
        }
        .metric strong{
            display:block;
            color:var(--gold);
            font-family:"Playfair Display",serif;
            font-size:2rem;
            line-height:1;
        }
        .metric span{margin-top:9px;color:var(--muted);font-size:.8rem;line-height:1.45}

        .matrix-section{
            position:relative;
            background:linear-gradient(180deg,rgba(7,31,19,.2),rgba(16,53,34,.46));
            border-top:1px solid rgba(255,255,255,.05);
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .matrix-layout{
            display:grid;
            grid-template-columns:300px minmax(0,1fr);
            gap:65px;
            align-items:start;
        }
        .sticky-copy{position:sticky;top:104px}
        .sticky-copy p{color:var(--muted)}
        .mini-note{
            display:flex;
            gap:10px;
            align-items:flex-start;
            margin-top:24px;
            padding:14px 0;
            border-top:1px solid var(--line);
            color:var(--mint);
            font-size:.83rem;
            line-height:1.55;
        }
        .mini-note i{margin-top:4px;color:var(--gold)}
        .service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
        .service-item{
            position:relative;
            padding:24px 23px 22px;
            border:1px solid rgba(255,230,132,.16);
            border-radius:var(--radius-sm);
            background:rgba(6,23,15,.57);
            transition:transform .24s ease,border-color .24s ease,background .24s ease;
        }
        .service-item:hover{
            transform:translateY(-5px);
            border-color:rgba(255,204,0,.58);
            background:rgba(22,70,44,.75);
        }
        .service-item:before{
            content:"";
            position:absolute;
            top:0;
            left:23px;
            width:42px;
            height:2px;
            background:var(--gold);
        }
        .service-index{display:block;color:var(--lime);font-size:.74rem;font-weight:800;letter-spacing:.08em;margin-bottom:14px}
        .service-item p{margin-bottom:0;color:var(--muted);font-size:.88rem}

        .feature-split{
            display:grid;
            grid-template-columns:minmax(0,.9fr) minmax(390px,1.1fr);
            gap:62px;
            align-items:center;
        }
        .feature-photo{
            position:relative;
            min-height:420px;
            overflow:hidden;
            border-radius:var(--radius);
            border:1px solid var(--line);
            background:#103522;
            box-shadow:var(--shadow);
        }
        .feature-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.78}
        .feature-photo:after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg,rgba(7,22,13,.06),rgba(4,20,11,.74));
        }
        .photo-label{
            position:absolute;
            z-index:1;
            left:25px;
            right:25px;
            bottom:22px;
            color:var(--gold-soft);
            font-size:.85rem;
            font-weight:700;
        }
        .comparison-list{margin-top:27px;border-top:1px solid var(--line)}
        .comparison-row{
            display:grid;
            grid-template-columns:56px 1fr auto;
            gap:15px;
            align-items:center;
            padding:18px 0;
            border-bottom:1px solid rgba(255,255,255,.1);
        }
        .rank{
            display:grid;
            place-items:center;
            width:36px;
            height:36px;
            color:#0b2519;
            background:var(--gold);
            border-radius:50%;
            font-size:.8rem;
            font-weight:800;
        }
        .comparison-row:nth-child(2) .rank,.comparison-row:nth-child(3) .rank{background:var(--lime)}
        .comparison-row strong{display:block;font-size:.94rem;color:var(--text)}
        .comparison-row span{display:block;color:var(--muted);font-size:.81rem;line-height:1.45}
        .status-badge{
            color:var(--lime);
            border:1px solid rgba(114,219,98,.3);
            background:rgba(114,219,98,.08);
            border-radius:999px;
            padding:5px 9px;
            font-size:.7rem;
            font-weight:800;
            white-space:nowrap;
        }

        .process-wrap{
            position:relative;
            padding:38px;
            border-radius:var(--radius);
            background:
                linear-gradient(120deg,rgba(6,23,15,.95),rgba(16,53,34,.9)),
                url("/assets/images/backpic/back-3.jpg") center/cover;
            border:1px solid var(--line);
        }
        .process-head{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:27px}
        .process-head p{max-width:570px;color:var(--muted);margin-bottom:0}
        .process-track{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:0;
            border-top:1px solid rgba(255,230,132,.45);
        }
        .process-step{position:relative;padding:26px 24px 5px 0}
        .process-step:not(:last-child){border-right:1px solid rgba(255,255,255,.1);padding-right:24px;margin-right:24px}
        .process-step:before{
            content:"";
            position:absolute;
            top:-6px;
            left:0;
            width:11px;
            height:11px;
            border-radius:50%;
            background:var(--gold);
            box-shadow:0 0 0 5px rgba(255,204,0,.13);
        }
        .step-number{color:var(--gold-soft);font-weight:800;font-size:.76rem}
        .process-step h3{margin:8px 0 8px;font-size:.98rem}
        .process-step p{margin:0;color:var(--muted);font-size:.83rem;line-height:1.55}

        .faq-layout{
            display:grid;
            grid-template-columns:310px minmax(0,1fr);
            gap:70px;
            align-items:start;
        }
        .faq-aside p{color:var(--muted)}
        .faq-aside .btn-outline{margin-top:10px}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid rgba(255,255,255,.11)}
        .faq-button{
            width:100%;
            padding:21px 0;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:20px;
            text-align:left;
            color:var(--text);
            background:transparent;
            font-weight:800;
            font-size:.98rem;
        }
        .faq-button i{color:var(--gold);transition:transform .22s ease}
        .faq-button[aria-expanded="true"] i{transform:rotate(45deg)}
        .faq-answer{padding:0 35px 20px 0;color:var(--muted);font-size:.9rem}

        .cta-section{padding:0 0 90px}
        .cta-box{
            position:relative;
            overflow:hidden;
            padding:52px;
            border-radius:var(--radius);
            border:1px solid rgba(255,204,0,.42);
            background:
                linear-gradient(110deg,rgba(14,59,35,.96),rgba(6,23,15,.86)),
                url("/assets/images/coverpic/cover-6.jpg") center/cover;
            box-shadow:var(--shadow);
        }
        .cta-box:after{
            content:"";
            position:absolute;
            width:400px;
            height:400px;
            right:-140px;
            bottom:-210px;
            border:1px solid rgba(255,204,0,.28);
            border-radius:50%;
            box-shadow:0 0 0 50px rgba(255,204,0,.035);
        }
        .cta-content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:48px;align-items:center}
        .cta-copy p{max-width:600px;margin-bottom:0;color:var(--mint)}
        .form-shell{
            padding:22px;
            border:1px solid rgba(255,255,255,.15);
            border-radius:var(--radius-sm);
            background:rgba(5,23,13,.72);
            backdrop-filter:blur(10px);
        }
        .form-shell label{display:block;margin-bottom:7px;color:var(--gold-soft);font-size:.8rem;font-weight:700}
        .form-control{
            width:100%;
            height:46px;
            margin-bottom:11px;
            color:var(--text);
            background:rgba(255,255,255,.07);
            border:1px solid rgba(255,255,255,.17);
            border-radius:8px;
            padding:0 13px;
        }
        .form-control::placeholder{color:#a8c7b0}
        .form-control:focus{color:var(--text);background:rgba(255,255,255,.1);border-color:var(--gold);box-shadow:none}
        .form-shell .btn-gold{width:100%;min-height:46px}
        .form-note{margin:10px 0 0;color:var(--muted);font-size:.72rem;line-height:1.5}

        .site-footer{
            padding:63px 0 22px;
            color:var(--muted);
            background:#05150d;
            border-top:1px solid var(--line);
        }
        .footer-top{
            display:grid;
            grid-template-columns:1.18fr .75fr 1fr;
            gap:55px;
            padding-bottom:42px;
        }
        .footer-brand .brand{margin-bottom:17px}
        .footer-brand p{max-width:390px;margin-bottom:0;font-size:.86rem}
        .footer-heading{margin-bottom:16px;color:var(--gold-soft);font-size:.79rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
        .footer-links{display:grid;gap:8px}
        .footer-links a{font-size:.86rem;transition:color .2s ease}
        .footer-links a:hover{color:var(--gold)}
        .footer-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}
        .footer-badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:5px 8px;
            color:var(--mint);
            border:1px solid rgba(114,219,98,.24);
            border-radius:999px;
            background:rgba(114,219,98,.07);
            font-size:.72rem;
            font-weight:700;
        }
        .footer-badge i{color:var(--lime)}
        .responsible-note{max-width:370px;margin:0;font-size:.77rem;line-height:1.6}
        .footer-bottom{
            display:flex;
            justify-content:space-between;
            gap:20px;
            padding-top:21px;
            border-top:1px solid rgba(255,255,255,.09);
            font-size:.76rem;
        }

        .support-fab{
            position:fixed;
            left:16px;
            bottom:96px;
            z-index:80;
            display:grid;
            place-items:center;
            width:58px;
            height:58px;
            color:#0b2519;
            border:2px solid var(--gold);
            border-radius:50%;
            background:
                radial-gradient(circle at 35% 28%,#ffe988 0 9%,transparent 10%),
                linear-gradient(145deg,#253b2b,#07150d);
            box-shadow:0 4px 20px rgba(255,215,0,.3),inset 0 0 0 4px rgba(255,204,0,.15);
            opacity:.78;
            animation:fabFloat 2.8s ease-in-out infinite;
            transition:transform .22s ease,opacity .22s ease,box-shadow .22s ease;
        }
        .support-fab:before{
            content:"";
            position:absolute;
            inset:4px;
            border:1px dashed rgba(255,204,0,.85);
            border-radius:50%;
            animation:spinSlow 10s linear infinite;
        }
        .support-fab i{position:relative;z-index:1;color:var(--gold);font-size:1.25rem;transition:transform .35s ease}
        .support-fab:after{
            content:"";
            position:absolute;
            top:4px;
            right:5px;
            width:9px;
            height:9px;
            border:1px solid #ffe4e4;
            border-radius:50%;
            background:var(--red);
            box-shadow:0 0 9px var(--red);
            animation:blink 1.2s infinite;
        }
        .support-fab:hover{opacity:1;transform:scale(1.1);box-shadow:0 5px 28px rgba(255,215,0,.52)}
        .support-fab:hover i{transform:rotate(360deg)}
        .support-fab:active{transform:scale(.95) translateY(2px)}
        @keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
        @keyframes spinSlow{to{transform:rotate(360deg)}}
        @keyframes blink{50%{opacity:.25}}

        @media (max-width:1024px){
            .brand{width:205px;font-size:.76rem}
            .main-nav a{padding:8px 8px;font-size:.79rem}
            .matrix-layout,.faq-layout{gap:40px}
            .cta-content{gap:30px}
        }
        @media (max-width:860px){
            .nav-wrap{position:relative;min-height:70px;gap:12px}
            .brand{width:auto;max-width:190px}
            .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
            .main-nav{
                display:none;
                position:absolute;
                z-index:20;
                top:70px;
                left:-20px;
                right:-20px;
                padding:15px 20px 18px;
                flex-direction:column;
                align-items:stretch;
                background:rgba(6,23,15,.98);
                border-bottom:1px solid var(--line);
                box-shadow:0 16px 35px rgba(0,0,0,.32);
            }
            .main-nav.show{display:flex}
            .main-nav a{padding:11px 12px;font-size:.88rem}
            .nav-actions{margin-left:auto}
            .nav-login{display:none}
            .nav-join{padding:9px 11px;font-size:.78rem}
            .category-hero{padding:64px 0 38px;min-height:500px}
            .data-board,.feature-split,.cta-content{grid-template-columns:1fr}
            .feature-photo{min-height:330px;order:2}
            .matrix-layout,.faq-layout{grid-template-columns:1fr}
            .sticky-copy{position:static}
            .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
            .process-track{grid-template-columns:repeat(2,1fr);gap:20px}
            .process-step:nth-child(2){border-right:0;margin-right:0;padding-right:0}
            .process-step:nth-child(3),.process-step:nth-child(4){border-top:1px solid rgba(255,255,255,.1);padding-top:28px}
            .footer-top{grid-template-columns:1fr 1fr;gap:35px}
            .footer-brand{grid-column:1/-1}
        }
        @media (max-width:520px){
            .container{width:min(100% - 28px,1160px)}
            body{font-size:15px}
            .brand{max-width:160px;font-size:.68rem}
            .brand-mark{width:34px;height:34px}
            .nav-actions{gap:2px}
            .nav-join{padding:8px 9px;font-size:.69rem}
            .menu-toggle{padding:5px}
            .category-hero{min-height:510px;padding:54px 0 30px}
            h1{font-size:2.25rem}
            .hero-lead{font-size:.95rem}
            .hero-actions .btn-gold,.hero-actions .btn-outline{width:100%}
            .countdown-wrap{padding:13px 0;align-items:flex-start;flex-direction:column;gap:9px}
            .timer-list{width:100%;justify-content:space-between}
            .timer-box{min-width:auto;flex:1;padding:5px}
            .section{padding:62px 0}
            .section-sm{padding:48px 0}
            .board-main{padding:25px 21px}
            .board-stats{padding:1px;gap:1px}
            .metric{min-height:120px;padding:17px}
            .metric strong{font-size:1.65rem}
            .service-grid{grid-template-columns:1fr}
            .service-item{padding:21px 19px}
            .feature-photo{min-height:270px}
            .comparison-row{grid-template-columns:43px 1fr;gap:10px}
            .comparison-row .status-badge{grid-column:2;justify-self:start}
            .process-wrap{padding:28px 21px}
            .process-head{display:block}
            .process-head p{margin-top:10px}
            .process-track{grid-template-columns:1fr;border-top:0}
            .process-step,.process-step:not(:last-child){
                border-right:0;
                border-top:1px solid rgba(255,230,132,.35);
                margin-right:0;
                padding:24px 0 7px;
            }
            .process-step:before{top:-6px}
            .cta-section{padding-bottom:62px}
            .cta-box{padding:31px 20px}
            .footer-top{grid-template-columns:1fr;gap:29px}
            .footer-brand{grid-column:auto}
            .footer-bottom{flex-direction:column;gap:5px}
            .support-fab{left:14px;bottom:80px;width:53px;height:53px}
        }

/* roulang page: category2 */
:root{
            --bg:#0b2519;
            --bg-deep:#06170f;
            --surface:#103522;
            --surface-2:#16462c;
            --gold:#ffcc00;
            --gold-soft:#ffe584;
            --lime:#72db62;
            --mint:#ccebd6;
            --text:#fffdf0;
            --muted:#b7d3c0;
            --line:rgba(255,230,132,.23);
            --red:#f04747;
            --shadow:0 18px 50px rgba(0,0,0,.28);
            --radius:20px;
            --radius-sm:12px;
        }

        html{scroll-behavior:smooth}
        *{box-sizing:border-box}
        body{
            margin:0;
            background:var(--bg-deep);
            color:var(--text);
            font-family:"Be Vietnam Pro",Arial,sans-serif;
            font-size:16px;
            line-height:1.65;
            overflow-x:hidden;
        }
        body:before{
            content:"";
            position:fixed;
            inset:0;
            z-index:-2;
            background:
                radial-gradient(circle at 12% 18%,rgba(114,219,98,.13),transparent 29rem),
                radial-gradient(circle at 88% 42%,rgba(255,204,0,.09),transparent 25rem),
                linear-gradient(130deg,#06170f 0%,#0b2519 45%,#071b11 100%);
        }
        body:after{
            content:"";
            position:fixed;
            inset:0;
            z-index:-1;
            opacity:.16;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
                linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
            background-size:46px 46px;
            mask-image:linear-gradient(to bottom,black,transparent 70%);
        }
        a{color:inherit;text-decoration:none}
        a:hover{text-decoration:none}
        img{max-width:100%;display:block}
        button,input,select{font:inherit}
        button{border:0}
        .container{width:min(1160px,calc(100% - 40px));margin-inline:auto}
        .site-header{
            position:sticky;
            top:0;
            z-index:100;
            background:rgba(6,23,15,.9);
            backdrop-filter:blur(18px);
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .nav-wrap{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:10px;
            width:240px;
            font-weight:800;
            line-height:1.16;
            font-size:.84rem;
            color:var(--gold-soft);
        }
        .brand-mark{
            display:grid;
            place-items:center;
            flex:none;
            width:39px;
            height:39px;
            color:#0b2519;
            background:linear-gradient(135deg,var(--gold),#f6a900);
            border-radius:50% 50% 45% 45%;
            box-shadow:0 0 0 4px rgba(255,204,0,.13),0 8px 22px rgba(0,0,0,.3);
            font-size:1rem;
        }
        .main-nav{display:flex;align-items:center;gap:5px}
        .main-nav a{
            padding:9px 11px;
            border-radius:8px;
            color:var(--mint);
            font-size:.86rem;
            font-weight:600;
            transition:.22s ease;
        }
        .main-nav a:hover,.main-nav a.active{color:var(--gold);background:rgba(255,204,0,.09)}
        .nav-actions{display:flex;align-items:center;gap:8px}
        .nav-login{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            color:var(--gold-soft);
            padding:10px 11px;
            font-size:.86rem;
            font-weight:700;
            transition:color .2s ease,background .2s ease;
            border-radius:8px;
        }
        .nav-login:hover{color:#fff;background:rgba(255,255,255,.07)}
        .nav-join,.btn-gold{
            display:inline-flex;
            justify-content:center;
            align-items:center;
            gap:8px;
            color:#0b2519;
            background:linear-gradient(135deg,#ffdc39,var(--gold));
            font-weight:800;
            border-radius:9px;
            padding:10px 15px;
            box-shadow:0 7px 19px rgba(255,204,0,.17);
            transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
            white-space:nowrap;
        }
        .nav-join:hover,.btn-gold:hover{
            transform:translateY(-2px);
            box-shadow:0 11px 26px rgba(255,204,0,.28);
            filter:brightness(1.04);
        }
        .nav-join:active,.btn-gold:active{transform:translateY(1px)}
        .menu-toggle{
            display:none;
            color:var(--gold);
            background:transparent;
            font-size:1.35rem;
            padding:7px;
            border-radius:8px;
        }
        .menu-toggle:hover{background:rgba(255,204,0,.1)}
        .hero{
            position:relative;
            min-height:610px;
            isolation:isolate;
            overflow:hidden;
            display:flex;
            align-items:center;
            padding:70px 0 74px;
            background-image:
                linear-gradient(90deg,rgba(5,20,13,.95) 0%,rgba(6,27,17,.82) 54%,rgba(6,23,15,.88) 100%),
                url("/assets/images/backpic/back-2.jpg");
            background-position:center;
            background-size:cover;
            border-bottom:1px solid var(--line);
        }
        .hero:before{
            content:"";
            position:absolute;
            width:700px;
            height:700px;
            right:-240px;
            top:-380px;
            z-index:-1;
            border-radius:50%;
            border:1px solid rgba(255,204,0,.23);
            box-shadow:0 0 0 60px rgba(255,204,0,.035),0 0 0 120px rgba(255,204,0,.025);
        }
        .hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);
            gap:62px;
            align-items:center;
        }
        .breadcrumb-line{
            display:flex;
            align-items:center;
            gap:9px;
            margin-bottom:22px;
            color:var(--muted);
            font-size:.78rem;
        }
        .breadcrumb-line a{color:var(--gold-soft)}
        .breadcrumb-line i{font-size:.65rem;color:var(--gold)}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:17px;
            color:var(--gold-soft);
            text-transform:uppercase;
            letter-spacing:.1em;
            font-size:.74rem;
            font-weight:800;
        }
        .eyebrow:before{content:"";width:25px;height:2px;background:var(--gold)}
        h1,h2,h3,p{margin-top:0}
        h1,h2,h3{letter-spacing:-.035em}
        h1{
            max-width:700px;
            margin-bottom:21px;
            color:var(--text);
            font-family:"Playfair Display",Georgia,serif;
            font-size:clamp(2.35rem,5vw,4.4rem);
            line-height:1.08;
        }
        h2{
            margin-bottom:13px;
            color:var(--text);
            font-family:"Playfair Display",Georgia,serif;
            font-size:clamp(1.85rem,3.6vw,2.75rem);
            line-height:1.16;
        }
        h3{
            margin-bottom:8px;
            color:var(--gold-soft);
            font-size:1.08rem;
            line-height:1.3;
            letter-spacing:-.015em;
        }
        .hero-copy{
            max-width:650px;
            color:#d7eddd;
            font-size:1.04rem;
            line-height:1.75;
            margin-bottom:27px;
        }
        .hero-links{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
        .btn-outline{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:10px 16px;
            border:1px solid rgba(255,231,132,.55);
            color:var(--gold-soft);
            font-size:.91rem;
            font-weight:800;
            border-radius:9px;
            transition:.2s ease;
        }
        .btn-outline:hover{
            background:rgba(255,204,0,.1);
            border-color:var(--gold);
            color:#fff;
        }
        .hero-stats{
            display:flex;
            flex-wrap:wrap;
            gap:24px;
            margin-top:31px;
            padding-top:23px;
            border-top:1px solid rgba(255,255,255,.15);
        }
        .hero-stat b{display:block;color:var(--gold);font-size:1.14rem;line-height:1.2}
        .hero-stat span{display:block;color:var(--muted);font-size:.78rem;margin-top:3px}
        .hero-panel{
            position:relative;
            min-height:425px;
            overflow:hidden;
            border:1px solid rgba(255,230,132,.3);
            border-radius:24px;
            background:rgba(7,27,17,.74);
            box-shadow:var(--shadow);
        }
        .hero-panel-image{
            width:100%;
            height:205px;
            object-fit:cover;
            opacity:.79;
            filter:saturate(.86);
        }
        .hero-panel-image:after{content:""}
        .hero-panel-content{padding:25px 27px 27px}
        .panel-kicker{
            display:flex;
            justify-content:space-between;
            gap:12px;
            align-items:center;
            margin-bottom:13px;
            color:var(--gold-soft);
            font-size:.74rem;
            font-weight:800;
            letter-spacing:.08em;
            text-transform:uppercase;
        }
        .live-dot{
            width:8px;
            height:8px;
            flex:none;
            display:inline-block;
            border-radius:50%;
            background:var(--lime);
            box-shadow:0 0 0 5px rgba(114,219,98,.13),0 0 14px rgba(114,219,98,.8);
        }
        .hero-panel h2{
            margin-bottom:17px;
            font-family:"Be Vietnam Pro",Arial,sans-serif;
            font-size:1.42rem;
            letter-spacing:-.025em;
        }
        .check-line{
            display:flex;
            align-items:flex-start;
            gap:11px;
            padding:10px 0;
            color:#e4f1e5;
            font-size:.89rem;
            border-top:1px solid rgba(255,255,255,.1);
        }
        .check-line i{margin-top:5px;color:var(--lime)}
        .signal-bar{
            position:relative;
            z-index:2;
            margin-top:-1px;
            border-top:1px solid var(--line);
            border-bottom:1px solid rgba(255,255,255,.08);
            background:rgba(16,53,34,.8);
        }
        .signal-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:0;
        }
        .signal-item{
            min-height:106px;
            display:flex;
            align-items:center;
            gap:16px;
            padding:22px 28px;
            border-right:1px solid rgba(255,255,255,.1);
        }
        .signal-item:last-child{border-right:0}
        .signal-icon{
            width:42px;
            height:42px;
            display:grid;
            place-items:center;
            flex:none;
            border-radius:50%;
            color:var(--gold);
            background:rgba(255,204,0,.1);
            border:1px solid rgba(255,204,0,.35);
        }
        .signal-item strong{display:block;color:var(--text);font-size:1.2rem;line-height:1.15}
        .signal-item span{display:block;color:var(--muted);font-size:.8rem;margin-top:4px}
        .section{
            padding:93px 0;
            position:relative;
        }
        .section-heading{
            max-width:720px;
            margin-bottom:39px;
        }
        .section-heading p{
            max-width:680px;
            color:var(--muted);
            margin-bottom:0;
        }
        .section-heading.split{
            max-width:none;
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:35px;
        }
        .section-heading.split > div:first-child{max-width:650px}
        .section-note{
            max-width:275px;
            padding-left:18px;
            color:var(--gold-soft);
            font-size:.84rem;
            line-height:1.55;
            border-left:2px solid var(--gold);
        }
        .criteria-layout{
            display:grid;
            grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);
            gap:62px;
            align-items:start;
        }
        .criteria-list{border-top:1px solid var(--line)}
        .criteria-item{
            display:grid;
            grid-template-columns:52px minmax(0,1fr);
            gap:18px;
            padding:25px 0;
            border-bottom:1px solid rgba(255,255,255,.12);
        }
        .criteria-number{
            width:38px;
            height:38px;
            display:grid;
            place-items:center;
            color:var(--bg-deep);
            font-weight:800;
            border-radius:11px 11px 11px 3px;
            background:var(--gold);
        }
        .criteria-item p{margin-bottom:0;color:var(--muted);font-size:.91rem}
        .image-story{
            position:relative;
            min-height:435px;
            padding:12px 12px 0;
            border-radius:24px;
            background:linear-gradient(145deg,rgba(255,204,0,.18),rgba(114,219,98,.08));
        }
        .image-story img{
            width:100%;
            height:355px;
            object-fit:cover;
            border-radius:17px 17px 4px 17px;
            opacity:.9;
        }
        .story-caption{
            position:relative;
            width:calc(100% - 35px);
            margin:-34px 0 0 auto;
            padding:18px 20px;
            color:#e9f6e9;
            font-size:.86rem;
            background:rgba(11,37,25,.94);
            border:1px solid rgba(255,204,0,.27);
            border-radius:12px 12px 4px 12px;
            box-shadow:0 12px 28px rgba(0,0,0,.24);
        }
        .story-caption strong{display:block;margin-bottom:4px;color:var(--gold-soft)}
        .comparison-section{
            padding-top:83px;
            background:linear-gradient(180deg,rgba(16,53,34,.25),rgba(6,23,15,.05));
            border-top:1px solid rgba(255,255,255,.06);
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .ranking-shell{
            display:grid;
            grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr);
            gap:28px;
            align-items:stretch;
        }
        .ranking-panel{
            overflow:hidden;
            border:1px solid rgba(255,230,132,.22);
            border-radius:18px;
            background:rgba(16,53,34,.68);
        }
        .ranking-head{
            display:grid;
            grid-template-columns:55px minmax(0,1fr) 150px;
            gap:18px;
            align-items:center;
            padding:17px 23px;
            color:var(--muted);
            font-size:.73rem;
            font-weight:800;
            letter-spacing:.08em;
            text-transform:uppercase;
            background:rgba(6,23,15,.5);
            border-bottom:1px solid rgba(255,255,255,.1);
        }
        .rank-row{
            display:grid;
            grid-template-columns:55px minmax(0,1fr) 150px;
            gap:18px;
            align-items:center;
            padding:20px 23px;
            border-bottom:1px solid rgba(255,255,255,.09);
            transition:background .2s ease;
        }
        .rank-row:last-child{border-bottom:0}
        .rank-row:hover{background:rgba(255,204,0,.06)}
        .rank-no{
            color:var(--gold);
            font-family:"Playfair Display",Georgia,serif;
            font-size:1.65rem;
            font-weight:700;
        }
        .rank-name strong{display:block;color:var(--text);font-size:.96rem}
        .rank-name span{display:block;color:var(--muted);font-size:.78rem;margin-top:3px}
        .score-wrap{display:flex;align-items:center;gap:10px}
        .score-bar{
            height:6px;
            flex:1;
            overflow:hidden;
            border-radius:20px;
            background:rgba(255,255,255,.12);
        }
        .score-bar i{
            display:block;
            height:100%;
            border-radius:20px;
            background:linear-gradient(90deg,var(--lime),var(--gold));
        }
        .score-wrap b{min-width:34px;color:var(--gold-soft);font-size:.82rem}
        .insight-box{
            align-self:stretch;
            padding:29px 26px;
            border-left:3px solid var(--gold);
            border-radius:0 17px 17px 0;
            background:rgba(22,70,44,.62);
        }
        .insight-box .eyebrow{margin-bottom:14px}
        .insight-box h3{font-size:1.28rem;line-height:1.35}
        .insight-box p{color:var(--muted);font-size:.89rem}
        .insight-list{padding:0;margin:20px 0 0;list-style:none}
        .insight-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            margin-top:12px;
            color:#e7f3e8;
            font-size:.84rem;
        }
        .insight-list i{margin-top:5px;color:var(--lime);font-size:.72rem}
        .process-section{padding-bottom:90px}
        .process-layout{
            display:grid;
            grid-template-columns:.72fr 1.28fr;
            gap:68px;
            align-items:start;
        }
        .process-intro{
            padding-right:15px;
        }
        .process-intro p{color:var(--muted);font-size:.93rem}
        .process-list{
            position:relative;
            list-style:none;
            padding:0;
            margin:0;
        }
        .process-list:before{
            content:"";
            position:absolute;
            top:23px;
            bottom:23px;
            left:18px;
            width:1px;
            background:linear-gradient(var(--gold),rgba(255,204,0,.08));
        }
        .process-step{
            position:relative;
            display:grid;
            grid-template-columns:38px minmax(0,1fr);
            gap:20px;
            padding:0 0 28px;
        }
        .process-step:last-child{padding-bottom:0}
        .step-number{
            position:relative;
            z-index:1;
            width:37px;
            height:37px;
            display:grid;
            place-items:center;
            color:var(--bg-deep);
            font-size:.85rem;
            font-weight:800;
            border-radius:50%;
            background:var(--gold);
            box-shadow:0 0 0 6px rgba(11,37,25,.95);
        }
        .process-step p{margin-bottom:0;color:var(--muted);font-size:.89rem}
        .responsibility-section{
            padding:78px 0;
            background:rgba(6,23,15,.42);
            border-top:1px solid rgba(255,255,255,.08);
        }
        .responsibility-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:24px;
        }
        .responsibility-block{
            min-height:250px;
            padding:31px 30px;
            border-radius:var(--radius);
            background:var(--surface);
            border:1px solid rgba(255,255,255,.09);
        }
        .responsibility-block.accent{
            background:
                linear-gradient(135deg,rgba(255,204,0,.13),transparent 55%),
                var(--surface);
            border-color:rgba(255,204,0,.27);
        }
        .responsibility-block h3{font-size:1.35rem}
        .responsibility-block p{color:var(--muted);font-size:.9rem}
        .bullet-list{
            list-style:none;
            padding:0;
            margin:20px 0 0;
        }
        .bullet-list li{
            display:flex;
            align-items:flex-start;
            gap:11px;
            padding:9px 0;
            color:#e5f3e8;
            font-size:.88rem;
            border-top:1px solid rgba(255,255,255,.09);
        }
        .bullet-list li:first-child{border-top:0}
        .bullet-list i{margin-top:5px;color:var(--gold)}
        .faq-section{padding:92px 0 84px}
        .faq-layout{
            display:grid;
            grid-template-columns:.75fr 1.25fr;
            gap:65px;
            align-items:start;
        }
        .faq-intro p{color:var(--muted);font-size:.93rem}
        .faq-intro .small-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-top:17px;
            padding:8px 12px;
            color:var(--gold-soft);
            font-size:.76rem;
            border:1px solid rgba(255,204,0,.3);
            border-radius:50px;
            background:rgba(255,204,0,.06);
        }
        .accordion-item{
            color:var(--text);
            background:transparent;
            border:0;
            border-bottom:1px solid rgba(255,255,255,.14);
        }
        .accordion-button{
            padding:19px 42px 19px 0;
            color:var(--text);
            background:transparent;
            box-shadow:none!important;
            font-size:.96rem;
            font-weight:700;
        }
        .accordion-button:not(.collapsed){color:var(--gold-soft);background:transparent}
        .accordion-button:after{
            width:16px;
            height:16px;
            background-size:16px;
            filter:brightness(0) saturate(100%) invert(82%) sepia(76%) saturate(900%) hue-rotate(359deg);
        }
        .accordion-body{padding:0 36px 20px 0;color:var(--muted);font-size:.88rem}
        .cta-section{
            padding:86px 0 95px;
            background:
                linear-gradient(100deg,rgba(10,46,28,.88),rgba(16,70,44,.66)),
                url("/assets/images/backpic/back-3.jpg") center/cover;
            border-top:1px solid var(--line);
        }
        .cta-grid{
            display:grid;
            grid-template-columns:1fr .86fr;
            gap:52px;
            align-items:center;
        }
        .cta-copy p{max-width:610px;color:#d7eddd}
        .cta-copy h2{max-width:650px}
        .cta-points{
            display:flex;
            flex-wrap:wrap;
            gap:10px 18px;
            padding:0;
            margin:22px 0 0;
            list-style:none;
        }
        .cta-points li{color:var(--mint);font-size:.84rem}
        .cta-points i{margin-right:6px;color:var(--gold)}
        .signup-form{
            padding:27px;
            border:1px solid rgba(255,230,132,.3);
            border-radius:18px;
            background:rgba(6,23,15,.76);
            box-shadow:var(--shadow);
        }
        .signup-form label{
            display:block;
            margin-bottom:7px;
            color:var(--gold-soft);
            font-size:.78rem;
            font-weight:700;
        }
        .signup-form .form-control,.signup-form .form-select{
            min-height:47px;
            color:var(--text);
            background:rgba(255,255,255,.07);
            border:1px solid rgba(255,255,255,.16);
            border-radius:9px;
        }
        .signup-form .form-control::placeholder{color:#9db9a5}
        .signup-form .form-control:focus,.signup-form .form-select:focus{
            color:var(--text);
            background:rgba(255,255,255,.1);
            border-color:var(--gold);
            box-shadow:0 0 0 4px rgba(255,204,0,.12);
        }
        .signup-form .form-select option{color:#132319;background:#fff}
        .form-hint{margin:13px 0 0;color:#9fc1a9;font-size:.74rem;line-height:1.5}
        .form-status{min-height:22px;margin:10px 0 0;color:var(--gold-soft);font-size:.78rem}
        .site-footer{
            padding:65px 0 22px;
            background:#06170f;
            border-top:1px solid rgba(255,230,132,.17);
        }
        .footer-top{
            display:grid;
            grid-template-columns:1.2fr .72fr 1fr;
            gap:48px;
            padding-bottom:42px;
        }
        .footer-brand .brand{margin-bottom:18px}
        .footer-brand p,.responsible-note{
            max-width:370px;
            margin-bottom:0;
            color:var(--muted);
            font-size:.82rem;
            line-height:1.7;
        }
        .footer-heading{
            margin:5px 0 16px;
            color:var(--gold-soft);
            font-size:.82rem;
            font-weight:800;
            letter-spacing:.08em;
            text-transform:uppercase;
        }
        .footer-links{display:grid;gap:9px}
        .footer-links a{
            width:max-content;
            color:var(--muted);
            font-size:.83rem;
            transition:color .2s ease,transform .2s ease;
        }
        .footer-links a:hover{color:var(--gold);transform:translateX(3px)}
        .footer-badges{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-bottom:16px;
        }
        .footer-badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:6px 9px;
            color:#d7eddd;
            font-size:.72rem;
            border:1px solid rgba(204,235,214,.22);
            border-radius:6px;
            background:rgba(255,255,255,.04);
        }
        .footer-badge i{color:var(--lime)}
        .footer-badge:last-child{color:var(--gold);border-color:rgba(255,204,0,.4);font-weight:800}
        .footer-bottom{
            display:flex;
            justify-content:space-between;
            gap:20px;
            padding-top:20px;
            color:#87a993;
            font-size:.74rem;
            border-top:1px solid rgba(255,255,255,.1);
        }
        .fab-support{
            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:rgba(6,23,15,.92);
            box-shadow:0 4px 20px rgba(255,215,0,.3),inset 0 0 0 4px rgba(255,204,0,.1);
            opacity:.74;
            transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease;
            animation:floatCoin 3.2s ease-in-out infinite;
        }
        .fab-support:hover{
            opacity:1;
            transform:scale(1.1);
            box-shadow:0 5px 29px rgba(255,215,0,.48),inset 0 0 0 4px rgba(255,204,0,.16);
        }
        .fab-support:active{transform:scale(.95) translateY(2px)}
        .fab-support i{font-size:1.2rem;transition:transform .55s ease}
        .fab-support:hover i{transform:rotate(360deg)}
        .fab-support:after{
            content:"";
            position:absolute;
            top:1px;
            right:2px;
            width:9px;
            height:9px;
            border-radius:50%;
            background:var(--red);
            box-shadow:0 0 0 3px rgba(240,71,71,.16);
            animation:blinkRuby 1.8s infinite;
        }
        @keyframes floatCoin{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
        @keyframes blinkRuby{0%,100%{opacity:1}50%{opacity:.35}}
        :focus-visible{
            outline:3px solid rgba(255,204,0,.7);
            outline-offset:3px;
        }

        @media (max-width:1024px){
            .hero-grid{gap:35px}
            .criteria-layout{gap:36px}
            .process-layout,.faq-layout{gap:38px}
            .footer-top{gap:28px}
        }
        @media (max-width:900px){
            .nav-wrap{position:relative;min-height:70px}
            .brand{width:auto;max-width:240px}
            .menu-toggle{display:block;order:2;margin-left:auto}
            .main-nav{
                display:none;
                position:absolute;
                top:70px;
                left:0;
                right:0;
                flex-direction:column;
                align-items:stretch;
                gap:4px;
                padding:12px;
                background:rgba(6,23,15,.98);
                border:1px solid rgba(255,230,132,.18);
                border-top:0;
                box-shadow:var(--shadow);
            }
            .main-nav.open{display:flex}
            .main-nav a{padding:12px 14px}
            .nav-actions{order:3}
            .nav-login{font-size:.78rem;padding-inline:7px}
            .nav-join{font-size:.78rem;padding:9px 11px}
            .hero{min-height:auto;padding:54px 0 65px}
            .hero-grid{grid-template-columns:1fr}
            .hero-copy{max-width:730px}
            .hero-panel{max-width:620px}
            .signal-item{padding-inline:18px}
            .criteria-layout,.ranking-shell,.process-layout,.faq-layout,.cta-grid{grid-template-columns:1fr}
            .image-story{max-width:650px}
            .process-intro{max-width:680px}
            .insight-box{min-height:0}
            .cta-copy{max-width:700px}
            .signup-form{max-width:620px}
            .footer-top{grid-template-columns:1fr 1fr}
            .footer-brand{grid-column:1/-1}
        }
        @media (max-width:768px){
            .container{width:min(100% - 32px,620px)}
            .hero-grid{gap:34px}
            h1{font-size:clamp(2.2rem,8vw,3.45rem)}
            .section{padding:70px 0}
            .section-heading.split{display:block}
            .section-note{max-width:500px;margin-top:20px}
            .signal-grid{grid-template-columns:1fr}
            .signal-item{
                min-height:74px;
                padding:15px 5px;
                border-right:0;
                border-bottom:1px solid rgba(255,255,255,.1);
            }
            .signal-item:last-child{border-bottom:0}
            .ranking-head,.rank-row{
                grid-template-columns:43px minmax(0,1fr);
                gap:12px;
            }
            .ranking-head > :last-child{display:none}
            .score-wrap{grid-column:2}
            .rank-row{padding:17px 16px}
            .ranking-head{padding:14px 16px}
            .responsibility-grid{grid-template-columns:1fr}
            .responsibility-block{min-height:0}
            .footer-top{grid-template-columns:1fr}
            .footer-brand{grid-column:auto}
            .footer-bottom{display:block}
            .footer-bottom span{display:block;margin-top:5px}
        }
        @media (max-width:520px){
            .container{width:calc(100% - 28px)}
            .brand{font-size:.72rem;gap:8px}
            .brand-mark{width:34px;height:34px;font-size:.88rem}
            .nav-actions{gap:2px}
            .nav-login{font-size:.7rem}
            .nav-join{font-size:.7rem;padding:8px 8px}
            .menu-toggle{font-size:1.16rem;padding:5px}
            .hero{padding:39px 0 52px}
            .breadcrumb-line{font-size:.7rem}
            h1{font-size:2.22rem}
            .hero-copy{font-size:.93rem}
            .hero-links{display:grid;grid-template-columns:1fr}
            .hero-links a{width:100%}
            .hero-stats{gap:16px}
            .hero-stat b{font-size:1rem}
            .hero-stat span{font-size:.7rem}
            .hero-panel-content{padding:21px 19px}
            .hero-panel-image{height:170px}
            .section{padding:58px 0}
            h2{font-size:1.85rem}
            .criteria-item{grid-template-columns:42px minmax(0,1fr);gap:13px;padding:20px 0}
            .criteria-item h3{font-size:1rem}
            .criteria-item p{font-size:.84rem}
            .criteria-number{width:34px;height:34px;font-size:.82rem}
            .image-story{min-height:350px;padding:8px 8px 0}
            .image-story img{height:275px}
            .story-caption{width:calc(100% - 20px);padding:15px 16px;font-size:.8rem}
            .responsibility-block{padding:24px 20px}
            .accordion-button{font-size:.88rem}
            .accordion-body{font-size:.82rem}
            .signup-form{padding:21px 18px}
            .cta-section{padding:63px 0 70px}
            .fab-support{left:14px;bottom:82px;width:52px;height:52px}
        }

/* roulang page: category3 */
:root{
            --bg:#0b2519;
            --bg-deep:#06170f;
            --surface:#103522;
            --surface-2:#16462c;
            --gold:#ffcc00;
            --gold-soft:#ffe584;
            --lime:#72db62;
            --mint:#ccebd6;
            --text:#fffdf0;
            --muted:#b7d3c0;
            --line:rgba(255,230,132,.23);
            --red:#f04747;
            --shadow:0 18px 50px rgba(0,0,0,.28);
            --radius:20px;
            --radius-sm:12px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            background:var(--bg-deep);
            color:var(--text);
            font-family:"Be Vietnam Pro",Arial,sans-serif;
            font-size:16px;
            line-height:1.65;
            overflow-x:hidden;
        }
        body:before{
            content:"";
            position:fixed;
            inset:0;
            z-index:-2;
            background:
                radial-gradient(circle at 12% 18%,rgba(114,219,98,.13),transparent 29rem),
                radial-gradient(circle at 88% 42%,rgba(255,204,0,.09),transparent 25rem),
                linear-gradient(130deg,#06170f 0%,#0b2519 45%,#071b11 100%);
        }
        body:after{
            content:"";
            position:fixed;
            inset:0;
            z-index:-1;
            opacity:.16;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
                linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
            background-size:46px 46px;
            mask-image:linear-gradient(to bottom,black,transparent 70%);
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input{font:inherit}
        button{border:0}
        .container{width:min(1160px,calc(100% - 40px));margin-inline:auto}

        .site-header{
            position:sticky;
            top:0;
            z-index:100;
            background:rgba(6,23,15,.9);
            backdrop-filter:blur(18px);
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .nav-wrap{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:10px;
            width:240px;
            font-weight:800;
            line-height:1.16;
            font-size:.84rem;
            color:var(--gold-soft);
        }
        .brand-mark{
            display:grid;
            place-items:center;
            flex:none;
            width:39px;
            height:39px;
            color:#0b2519;
            background:linear-gradient(135deg,var(--gold),#f6a900);
            border-radius:50% 50% 45% 45%;
            box-shadow:0 0 0 4px rgba(255,204,0,.13),0 8px 22px rgba(0,0,0,.3);
            font-size:1rem;
        }
        .main-nav{display:flex;align-items:center;gap:5px}
        .main-nav a{
            padding:9px 11px;
            border-radius:8px;
            color:var(--mint);
            font-size:.86rem;
            font-weight:600;
            transition:.22s ease;
        }
        .main-nav a:hover,.main-nav a.active{
            color:var(--gold);
            background:rgba(255,204,0,.09);
        }
        .nav-actions{display:flex;align-items:center;gap:8px}
        .nav-login{
            color:var(--gold-soft);
            padding:9px 10px;
            font-size:.86rem;
            font-weight:700;
            transition:.2s ease;
        }
        .nav-login:hover{color:#fff}
        .nav-join,.btn-gold{
            display:inline-flex;
            justify-content:center;
            align-items:center;
            gap:8px;
            color:#0b2519;
            background:linear-gradient(135deg,#ffdc39,var(--gold));
            font-weight:800;
            border-radius:9px;
            padding:10px 15px;
            box-shadow:0 7px 19px rgba(255,204,0,.17);
            transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
            white-space:nowrap;
        }
        .nav-join:hover,.btn-gold:hover{
            transform:translateY(-2px);
            box-shadow:0 11px 26px rgba(255,204,0,.28);
            filter:brightness(1.04);
        }
        .nav-join:active,.btn-gold:active{transform:translateY(1px)}
        .menu-toggle{
            display:none;
            color:var(--gold);
            background:transparent;
            font-size:1.35rem;
            padding:7px;
        }

        .page-banner{
            position:relative;
            isolation:isolate;
            overflow:hidden;
            padding:82px 0 76px;
            background-image:
                linear-gradient(90deg,rgba(5,20,13,.95),rgba(6,27,17,.76)),
                url("/assets/images/backpic/back-2.jpg");
            background-position:center;
            background-size:cover;
            border-bottom:1px solid var(--line);
        }
        .page-banner:after{
            content:"";
            position:absolute;
            width:400px;
            height:400px;
            right:-120px;
            top:-190px;
            border:1px solid rgba(255,204,0,.2);
            border-radius:50%;
            box-shadow:0 0 0 45px rgba(255,204,0,.035),0 0 0 90px rgba(255,204,0,.02);
            z-index:-1;
        }
        .banner-grid{
            display:grid;
            grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
            align-items:end;
            gap:60px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:17px;
            color:var(--gold-soft);
            text-transform:uppercase;
            letter-spacing:.1em;
            font-size:.74rem;
            font-weight:800;
        }
        .eyebrow:before{content:"";width:25px;height:2px;background:var(--gold)}
        h1,h2,h3,p{margin-top:0}
        h1{
            max-width:820px;
            margin-bottom:20px;
            color:var(--text);
            font-family:"Playfair Display",Georgia,serif;
            font-size:clamp(2.35rem,5vw,4.65rem);
            line-height:1.1;
            letter-spacing:-.035em;
        }
        h2{
            margin-bottom:14px;
            color:var(--text);
            font-family:"Playfair Display",Georgia,serif;
            font-size:clamp(1.8rem,3vw,2.65rem);
            line-height:1.18;
        }
        h3{font-size:1.1rem;line-height:1.3}
        .banner-copy{
            max-width:720px;
            margin-bottom:0;
            color:#d7eddd;
            font-size:1.04rem;
        }
        .banner-note{
            padding-left:22px;
            border-left:2px solid var(--gold);
            color:var(--gold-soft);
            font-size:.92rem;
        }
        .section{padding:92px 0}
        .section-head{
            display:flex;
            justify-content:space-between;
            align-items:end;
            gap:30px;
            margin-bottom:35px;
        }
        .section-head p{max-width:560px;margin-bottom:0;color:var(--muted)}
        .kicker{
            display:block;
            margin-bottom:10px;
            color:var(--lime);
            font-size:.75rem;
            font-weight:800;
            letter-spacing:.12em;
            text-transform:uppercase;
        }
        .metric-strip{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            border-top:1px solid var(--line);
            border-bottom:1px solid var(--line);
        }
        .metric{
            padding:27px 28px;
            border-right:1px solid var(--line);
        }
        .metric:last-child{border-right:0}
        .metric strong{
            display:block;
            margin-bottom:4px;
            color:var(--gold);
            font-size:2rem;
            line-height:1;
        }
        .metric span{color:var(--muted);font-size:.9rem}

        .matrix{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:18px 24px;
        }
        .matrix-item{
            display:flex;
            gap:18px;
            padding:24px 0;
            border-bottom:1px solid rgba(255,255,255,.12);
        }
        .matrix-icon{
            width:45px;
            height:45px;
            display:grid;
            place-items:center;
            flex:none;
            color:var(--gold);
            border:1px solid var(--line);
            border-radius:13px;
            background:rgba(255,204,0,.07);
            font-size:1.05rem;
        }
        .matrix-item h3{margin-bottom:7px;color:var(--gold-soft)}
        .matrix-item p{margin:0;color:var(--muted);font-size:.92rem}
        .score-panel{
            height:100%;
            padding:31px;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:linear-gradient(145deg,rgba(22,70,44,.8),rgba(7,27,17,.82));
            box-shadow:var(--shadow);
        }
        .score-panel h3{font-family:"Playfair Display",Georgia,serif;font-size:1.6rem;margin-bottom:20px}
        .score-row{margin-bottom:20px}
        .score-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;color:var(--mint);font-size:.86rem}
        .score-label b{color:var(--gold)}
        .progress{height:7px;background:rgba(255,255,255,.11);border-radius:20px;overflow:hidden}
        .progress-bar{background:linear-gradient(90deg,var(--lime),var(--gold));border-radius:20px}
        .score-foot{margin:25px 0 0;padding-top:19px;border-top:1px solid rgba(255,255,255,.12);color:var(--muted);font-size:.84rem}

        .compare-layout{
            display:grid;
            grid-template-columns:.82fr 1.18fr;
            gap:46px;
            align-items:start;
        }
        .image-frame{
            position:relative;
            min-height:380px;
            overflow:hidden;
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }
        .image-frame img{width:100%;height:100%;min-height:380px;object-fit:cover}
        .image-frame:after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg,transparent 45%,rgba(4,18,11,.9));
        }
        .image-caption{
            position:absolute;
            z-index:1;
            left:25px;
            right:25px;
            bottom:23px;
            color:var(--gold-soft);
            font-weight:700;
            font-size:.92rem;
        }
        .comparison-list{border-top:1px solid var(--line)}
        .comparison-item{
            display:grid;
            grid-template-columns:52px 1fr auto;
            align-items:center;
            gap:18px;
            padding:20px 0;
            border-bottom:1px solid rgba(255,255,255,.12);
        }
        .rank{
            color:var(--bg-deep);
            background:var(--gold);
            width:36px;height:36px;
            display:grid;place-items:center;
            border-radius:50%;
            font-weight:800;
        }
        .comparison-item h3{margin-bottom:4px;color:var(--text)}
        .comparison-item p{margin:0;color:var(--muted);font-size:.86rem}
        .tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:5px 9px;
            border-radius:30px;
            color:var(--gold-soft);
            background:rgba(255,204,0,.1);
            border:1px solid rgba(255,204,0,.2);
            font-size:.72rem;
            font-weight:800;
            white-space:nowrap;
        }

        .steps-section{background:rgba(16,53,34,.52);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
        .steps{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:35px;
            counter-reset:step;
        }
        .step{position:relative;padding-top:58px}
        .step:before{
            counter-increment:step;
            content:"0" counter(step);
            position:absolute;
            top:0;left:0;
            color:var(--gold);
            font-family:"Playfair Display",Georgia,serif;
            font-size:2.4rem;
            line-height:1;
        }
        .step:not(:last-child):after{
            content:"";
            position:absolute;
            top:17px;
            right:0;
            width:55%;
            border-top:1px dashed rgba(255,204,0,.35);
        }
        .step h3{color:var(--gold-soft);margin-bottom:9px}
        .step p{color:var(--muted);font-size:.91rem;margin-bottom:0}

        .faq-wrap{max-width:900px}
        .accordion-item{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.13)}
        .accordion-button{
            padding:21px 0;
            color:var(--text);
            background:transparent!important;
            box-shadow:none!important;
            font-weight:700;
        }
        .accordion-button:after{filter:brightness(0) saturate(100%) invert(84%) sepia(87%) saturate(959%) hue-rotate(2deg)}
        .accordion-button:not(.collapsed){color:var(--gold)}
        .accordion-body{padding:0 35px 20px 0;color:var(--muted);font-size:.92rem}

        .cta{
            position:relative;
            overflow:hidden;
            padding:54px 0;
            background:linear-gradient(115deg,#16462c,#0b2519);
            border-top:1px solid var(--line);
            border-bottom:1px solid var(--line);
        }
        .cta-grid{display:flex;justify-content:space-between;align-items:center;gap:35px}
        .cta h2{margin-bottom:9px}
        .cta p{max-width:650px;margin-bottom:0;color:var(--mint)}
        .cta .btn-gold{flex:none;padding:14px 21px}

        .site-footer{padding:55px 0 23px;background:#06170f}
        .footer-top{
            display:grid;
            grid-template-columns:1.35fr .8fr 1fr;
            gap:48px;
            padding-bottom:38px;
            border-bottom:1px solid rgba(255,255,255,.12);
        }
        .footer-brand .brand{margin-bottom:18px}
        .footer-brand p,.responsible-note{max-width:360px;color:var(--muted);font-size:.83rem;margin-bottom:0}
        .footer-heading{margin-bottom:17px;color:var(--gold-soft);font-weight:800;font-size:.9rem}
        .footer-links{display:grid;gap:10px}
        .footer-links a{color:var(--muted);font-size:.86rem;transition:.2s ease}
        .footer-links a:hover{color:var(--gold)}
        .footer-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
        .footer-badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 9px;
            border:1px solid rgba(204,235,214,.18);
            border-radius:8px;
            color:var(--mint);
            font-size:.72rem;
        }
        .footer-badge i{color:var(--lime)}
        .footer-bottom{
            display:flex;
            justify-content:space-between;
            gap:15px;
            padding-top:20px;
            color:#86ab92;
            font-size:.76rem;
        }
        .fab{
            position:fixed;
            left:16px;
            bottom:24px;
            z-index:50;
            width:58px;
            height:58px;
            display:grid;
            place-items:center;
            color:var(--gold);
            background:radial-gradient(circle at 35% 25%,#31543c,#091a10 65%);
            border:2px solid var(--gold);
            border-radius:50%;
            box-shadow:0 4px 20px rgba(255,215,0,.3),0 8px 25px rgba(0,0,0,.35);
            opacity:.78;
            transition:.25s ease;
            animation:floatCoin 3.5s ease-in-out infinite;
        }
        .fab:before{
            content:"";
            position:absolute;
            inset:5px;
            border:1px dashed rgba(255,229,132,.7);
            border-radius:50%;
        }
        .fab:hover{opacity:1;transform:scale(1.1)}
        .fab:hover i{transform:rotate(360deg)}
        .fab i{position:relative;transition:transform .55s ease}
        .fab:after{
            content:"";
            position:absolute;
            top:1px;right:2px;
            width:10px;height:10px;
            border-radius:50%;
            background:var(--red);
            box-shadow:0 0 8px var(--red);
            animation:blink 1.7s infinite;
        }
        @keyframes floatCoin{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
        @keyframes blink{50%{opacity:.35}}
        :focus-visible{outline:3px solid rgba(255,204,0,.7);outline-offset:3px}

        @media(max-width:1024px){
            .main-nav a{padding-inline:8px;font-size:.8rem}
            .brand{width:210px}
            .hero-grid,.banner-grid{gap:35px}
            .compare-layout{gap:30px}
        }
        @media(max-width:768px){
            .container{width:min(100% - 30px,600px)}
            .nav-wrap{min-height:68px;position:relative}
            .brand{width:auto;font-size:.75rem}
            .brand-mark{width:35px;height:35px}
            .menu-toggle{display:block;order:3}
            .main-nav{
                display:none;
                position:absolute;
                top:68px;
                left:0;
                right:0;
                padding:12px 15px 16px;
                flex-direction:column;
                align-items:stretch;
                background:rgba(6,23,15,.98);
                border:1px solid rgba(255,255,255,.09);
                border-top:0;
            }
            .main-nav.open{display:flex}
            .main-nav a{padding:12px 13px}
            .nav-actions{margin-left:auto}
            .nav-login{font-size:.76rem;padding:8px 3px}
            .nav-join{font-size:.76rem;padding:9px 10px}
            .page-banner{padding:62px 0 58px}
            .banner-grid,.compare-layout{grid-template-columns:1fr}
            .banner-note{max-width:470px}
            .section{padding:67px 0}
            .section-head{display:block;margin-bottom:25px}
            .section-head p{margin-top:14px}
            .metric-strip{grid-template-columns:1fr}
            .metric{border-right:0;border-bottom:1px solid var(--line)}
            .metric:last-child{border-bottom:0}
            .matrix{grid-template-columns:1fr}
            .score-panel{padding:25px}
            .steps{grid-template-columns:1fr;gap:27px}
            .step:not(:last-child):after{display:none}
            .cta-grid{display:block}
            .cta .btn-gold{margin-top:23px}
            .footer-top{grid-template-columns:1fr 1fr;gap:32px}
            .footer-brand{grid-column:1/-1}
            .footer-bottom{display:block}
            .footer-bottom span{display:block;margin-bottom:8px}
        }
        @media(max-width:520px){
            h1{font-size:2.28rem}
            h2{font-size:1.9rem}
            .nav-actions{gap:2px}
            .nav-login{display:none}
            .brand{max-width:205px}
            .banner-copy{font-size:.95rem}
            .comparison-item{grid-template-columns:40px 1fr}
            .comparison-item .tag{grid-column:2;justify-self:start}
            .image-frame,.image-frame img{min-height:290px}
            .footer-top{grid-template-columns:1fr}
            .footer-brand{grid-column:auto}
            .fab{left:16px;bottom:18px}
        }