/* roulang page: index */
:root{
      --ink:#121212;
      --charcoal:#1c1c1e;
      --paper:#f6f3ec;
      --paper-deep:#ece5d5;
      --gold:#c5a059;
      --gold-light:#f4d98a;
      --amber:#ffbf00;
      --cream:#fffdf7;
      --muted:#a89f93;
      --line:rgba(197,160,89,.24);
      --green:#55bc85;
      --danger:#e36955;
      --radius:18px;
      --radius-sm:12px;
      --shadow:0 20px 55px rgba(0,0,0,.2);
      --sans:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
      --serif:Georgia,"Times New Roman",serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--paper);color:#28241f;font-family:var(--sans);
      font-size:16px;line-height:1.64;overflow-x:hidden
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    ::selection{background:var(--gold);color:#16110a}
    .site-shell{overflow:hidden}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;color:var(--gold-light);font-size:.72rem;
      font-weight:800;letter-spacing:.12em;text-transform:uppercase
    }
    .eyebrow:before{content:"";width:22px;height:1px;background:currentColor}
    .section-title{
      font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.35rem);line-height:1.08;
      letter-spacing:-.035em;margin:14px 0;color:inherit;font-weight:700
    }
    .section-intro{max-width:690px;color:#6e665d;margin:0;font-size:1rem}
    .btn{
      display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;
      border-radius:999px;padding:12px 21px;font-size:.88rem;font-weight:800;letter-spacing:.01em;
      transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border .22s ease
    }
    .btn:focus-visible,.nav-link:focus-visible,.form-input:focus-visible,.faq-trigger:focus-visible{
      outline:3px solid rgba(255,191,0,.55);outline-offset:3px
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(1px) scale(.985)}
    .btn-gold{background:linear-gradient(135deg,var(--amber),var(--gold-light));color:#22190a;box-shadow:0 10px 25px rgba(197,160,89,.24)}
    .btn-gold:hover{box-shadow:0 14px 30px rgba(197,160,89,.4)}
    .btn-dark{background:#1c1c1e;color:var(--cream);border-color:#34312d}
    .btn-dark:hover{background:#2d2b29;border-color:var(--gold)}
    .btn-outline{color:var(--cream);border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.05)}
    .btn-outline:hover{border-color:var(--gold-light);background:rgba(255,255,255,.12)}
    .site-header{
      position:sticky;top:0;z-index:60;background:rgba(18,18,18,.93);
      backdrop-filter:blur(16px);border-bottom:1px solid rgba(197,160,89,.17)
    }
    .nav-wrap{height:78px;display:flex;align-items:center;gap:26px}
    .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
    .brand-mark{
      flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
      color:#17120a;background:radial-gradient(circle at 35% 30%,#fff0ad,var(--amber) 48%,#9c6f22);
      border:1px solid var(--gold-light);box-shadow:0 0 0 4px rgba(197,160,89,.1)
    }
    .brand-name{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--cream);line-height:1.08}
    .brand-sub{display:block;color:#a99d8a;font-family:var(--sans);font-size:.59rem;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
    .desktop-nav{display:flex;align-items:center;gap:3px}
    .nav-link{
      color:#cdc6bb;padding:10px 12px;border-radius:8px;font-size:.8rem;font-weight:700;white-space:nowrap;
      transition:color .2s,background .2s
    }
    .nav-link:hover,.nav-link.active{color:var(--gold-light);background:rgba(197,160,89,.1)}
    .nav-actions{display:flex;align-items:center;gap:5px}
    .login-link{color:#d9d0c3;font-size:.8rem;font-weight:800;padding:9px 11px;white-space:nowrap}
    .login-link:hover{color:var(--gold-light)}
    .signup{min-height:39px;padding:9px 14px;font-size:.77rem}
    .menu-toggle{display:none;border:0;background:transparent;color:var(--cream);padding:8px;font-size:1.25rem}
    .mobile-panel{display:none;border-top:1px solid rgba(197,160,89,.15);padding:10px 20px 17px;background:#151515}
    .mobile-panel.open{display:block}
    .mobile-panel .nav-link{display:block;padding:11px 8px}
    .hero{
      color:var(--cream);position:relative;min-height:650px;isolation:isolate;
      background:#151515 url('/assets/images/backpic/back-2.jpg') center/cover no-repeat
    }
    .hero:before{
      content:"";position:absolute;inset:0;z-index:-1;background:
      linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(16,15,13,.84) 45%,rgba(15,15,15,.52) 100%),
      linear-gradient(0deg,rgba(18,18,18,.88),transparent 47%)
    }
    .hero:after{
      content:"";position:absolute;right:-14%;top:-25%;width:55vw;height:55vw;z-index:-1;border-radius:50%;
      border:1px solid rgba(255,191,0,.16);box-shadow:0 0 0 54px rgba(197,160,89,.035),0 0 0 105px rgba(197,160,89,.025)
    }
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(350px,.84fr);gap:65px;align-items:center;min-height:650px;padding:72px 0}
    .hero h1{
      font-family:var(--serif);font-size:clamp(2.65rem,5vw,5rem);line-height:.99;letter-spacing:-.052em;
      margin:16px 0 22px;max-width:800px
    }
    .hero h1 em{font-style:normal;color:var(--gold-light)}
    .hero-copy{max-width:720px;color:#ded8cf;font-size:1.04rem;margin:0}
    .hero-proof{display:flex;gap:21px;flex-wrap:wrap;margin:28px 0 29px}
    .proof-item{display:flex;align-items:center;gap:9px;color:#d9d1c4;font-size:.78rem;font-weight:700}
    .proof-icon{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:rgba(197,160,89,.16);color:var(--gold-light);border:1px solid rgba(244,217,138,.24)}
    .hero-actions{display:flex;gap:11px;flex-wrap:wrap}
    .whitepaper{
      background:linear-gradient(145deg,rgba(43,40,36,.95),rgba(19,19,19,.96));padding:13px;border:1px solid rgba(244,217,138,.42);
      border-radius:8px 28px 8px 28px;box-shadow:var(--shadow);transform:rotate(1.4deg);position:relative
    }
    .whitepaper:before{content:"";position:absolute;inset:24px -10px -11px 15px;background:rgba(0,0,0,.35);filter:blur(16px);z-index:-1}
    .paper-cover{position:relative;min-height:450px;border-radius:3px 21px 3px 21px;overflow:hidden;padding:32px;background:#2c251e url('/assets/images/coverpic/cover-4.jpg') center/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end}
    .paper-cover:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,10,.2),rgba(13,11,8,.94))}
    .paper-inner{position:relative}
    .paper-top{font-size:.64rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-light);font-weight:900}
    .paper-cover h2{font-family:var(--serif);font-size:2.15rem;line-height:1.04;margin:10px 0;color:#fff8e8}
    .paper-cover p{font-size:.84rem;line-height:1.55;color:#d9d0c0;margin:0 0 18px}
    .paper-list{display:grid;gap:7px;border-top:1px solid rgba(255,255,255,.2);padding-top:16px}
    .paper-list span{font-size:.75rem;color:#eee7dc;display:flex;gap:10px;align-items:center}
    .paper-list b{color:var(--gold-light);font-family:var(--serif);font-size:1rem}
    .channel{background:var(--paper);padding:102px 0 88px;position:relative}
    .channel-top{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:end;margin-bottom:48px}
    .channel-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:0;border-top:1px solid #d9d0c2;border-bottom:1px solid #d9d0c2}
    .channel-card{padding:29px 28px;border-right:1px solid #d9d0c2;min-height:205px;transition:background .25s,transform .25s}
    .channel-card:last-child{border-right:0}
    .channel-card:hover{background:#fffdf8;transform:translateY(-5px)}
    .number{font-family:var(--serif);font-size:1rem;color:var(--gold);font-weight:bold}
    .channel-card h3{font-family:var(--serif);font-size:1.5rem;line-height:1.12;color:#2c261e;margin:19px 0 10px}
    .channel-card p{font-size:.88rem;color:#756d63;margin:0}
    .data-bar{background:#181817;color:var(--cream);padding:38px 0}
    .data-wrap{display:grid;grid-template-columns:1.2fr repeat(3,.62fr);gap:20px;align-items:center}
    .data-lead p{color:#b7aea2;margin:7px 0 0;font-size:.86rem;max-width:360px}
    .stat{border-left:1px solid rgba(244,217,138,.28);padding-left:22px}
    .stat strong{display:block;font-family:var(--serif);font-size:2.15rem;color:var(--gold-light);line-height:1}
    .stat span{display:block;color:#bdb5a9;font-size:.72rem;line-height:1.35;margin-top:7px}
    .lead-section{padding:94px 0;background:#ede7da}
    .lead-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:78px;align-items:start}
    .lead-aside{padding-top:15px}
    .lead-aside .section-title{color:#27231e}
    .check-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
    .check-list li{display:flex;gap:12px;color:#665e55;font-size:.9rem}
    .check-list i{font-style:normal;color:#8a6b32;font-weight:900}
    .lead-form{background:#fffdf8;padding:34px;border-top:3px solid var(--gold);box-shadow:0 18px 45px rgba(62,52,39,.1)}
    .lead-form h3{font-family:var(--serif);font-size:1.7rem;line-height:1.2;color:#29251f;margin:0 0 7px}
    .lead-form>p{margin:0 0 23px;font-size:.85rem;color:#786f63}
    .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
    .field{display:grid;gap:6px}
    .field.full{grid-column:1/-1}
    .field label{font-size:.74rem;font-weight:800;color:#544b40}
    .form-input{width:100%;border:1px solid #d8d0c2;background:#fff;padding:12px 13px;border-radius:7px;color:#2a251f;transition:border .2s,box-shadow .2s}
    .form-input::placeholder{color:#a9a196}
    .form-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,160,89,.14);outline:0}
    textarea.form-input{min-height:86px;resize:vertical}
    .form-bottom{display:flex;align-items:center;gap:15px;justify-content:space-between;margin-top:19px}
    .consent{font-size:.7rem;line-height:1.5;color:#837a6e;max-width:310px}
    .form-note{display:none;margin:14px 0 0;padding:10px 12px;background:#ebf6ee;border-left:3px solid var(--green);font-size:.8rem;color:#286440}
    .guide{padding:99px 0;background:#fbfaf6}
    .guide-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:42px}
    .guide-head .section-intro{max-width:520px}
    .guide-path{display:grid;grid-template-columns:.75fr 1.1fr .9fr;gap:38px;align-items:stretch}
    .guide-visual{min-height:350px;position:relative;overflow:hidden;background:#25221d}
    .guide-visual img{height:100%;width:100%;object-fit:cover;opacity:.76}
    .guide-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,15,13,.82),transparent 70%)}
    .guide-stamp{position:absolute;z-index:1;bottom:22px;left:22px;color:#fff9eb;font-family:var(--serif);font-size:1.5rem;line-height:1.15;max-width:210px}
    .guide-steps{display:grid;align-content:start}
    .step{display:grid;grid-template-columns:46px 1fr;gap:15px;padding:0 0 23px;margin-bottom:22px;border-bottom:1px solid #e0d9ce}
    .step:last-child{margin:0;border:0}
    .step-num{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:#2b2926;color:var(--gold-light);font-family:var(--serif);font-weight:bold}
    .step h3{margin:1px 0 5px;font-size:1rem;color:#312b24}
    .step p{margin:0;font-size:.84rem;color:#756c61}
    .guide-note{border-left:1px solid #ded4c5;padding-left:31px;display:flex;flex-direction:column;justify-content:center}
    .guide-note .mini-label{color:#92733b;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
    .guide-note h3{font-family:var(--serif);font-size:1.8rem;line-height:1.12;margin:10px 0;color:#2c2720}
    .guide-note p{font-size:.88rem;color:#71685e;margin:0 0 20px}
    .articles{padding:98px 0;background:#201f1d;color:var(--cream)}
    .articles-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:39px}
    .articles .section-intro{color:#bbb3a8}
    .article-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:56px}
    .article-list{border-top:1px solid rgba(244,217,138,.26)}
    .article-item{display:grid;grid-template-columns:110px 1fr auto;gap:19px;align-items:center;padding:21px 2px;border-bottom:1px solid rgba(244,217,138,.18);transition:padding .2s,background .2s}
    .article-item:hover{padding-left:13px;background:rgba(255,255,255,.035)}
    .article-date{font-size:.72rem;color:var(--gold-light);font-weight:800;line-height:1.4}
    .article-category{display:block;color:#a69c8f;font-size:.67rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
    .article-item h3{font-family:var(--serif);font-size:1.17rem;line-height:1.25;margin:0;color:#fffaf1}
    .article-item p{font-size:.78rem;line-height:1.55;color:#b5aca0;margin:6px 0 0;max-width:570px}
    .article-arrow{color:var(--gold-light);font-size:1.25rem;transition:transform .2s}
    .article-item:hover .article-arrow{transform:translateX(5px)}
    .article-feature{position:relative;min-height:340px;overflow:hidden;padding:28px;display:flex;align-items:flex-end}
    .article-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52}
    .article-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,11,.96),rgba(10,10,10,.12))}
    .feature-copy{z-index:1;position:relative}
    .feature-copy span{color:var(--gold-light);font-size:.68rem;letter-spacing:.11em;font-weight:900;text-transform:uppercase}
    .feature-copy h3{font-family:var(--serif);font-size:1.85rem;line-height:1.05;margin:9px 0;color:#fffaf0}
    .feature-copy p{font-size:.83rem;color:#d0c7bb;margin:0 0 17px}
    .privacy{background:#f4f0e7;padding:88px 0}
    .privacy-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:75px}
    .privacy .section-title{color:#2d2821}
    .privacy p{color:#6c645a;margin:0}
    .safety-points{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#ded6c8;margin-top:24px}
    .safety-points div{background:#f4f0e7;padding:19px 17px}
    .safety-points b{display:block;color:#40372c;font-size:.87rem;margin-bottom:4px}
    .safety-points span{display:block;color:#746b60;font-size:.78rem;line-height:1.5}
    .faq-wrap{border-top:1px solid #d7cdbd}
    .faq-item{border-bottom:1px solid #d7cdbd}
    .faq-trigger{width:100%;border:0;background:transparent;padding:18px 0;display:flex;justify-content:space-between;text-align:left;gap:15px;color:#372f26;font-size:.93rem;font-weight:800}
    .faq-trigger span:last-child{color:#9a783a;font-size:1.25rem;line-height:1;transition:transform .2s}
    .faq-item.open .faq-trigger span:last-child{transform:rotate(45deg)}
    .faq-answer{display:none;padding:0 35px 19px 0;color:#70675d;font-size:.84rem;line-height:1.62}
    .faq-item.open .faq-answer{display:block}
    .final-cta{background:#151515;color:#fffaf0;padding:45px 0;border-top:1px solid rgba(197,160,89,.3)}
    .final-grid{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .final-grid h2{font-family:var(--serif);font-size:1.85rem;line-height:1.1;margin:0}
    .final-grid p{margin:7px 0 0;color:#bdb4a7;font-size:.84rem}
    .site-footer{background:#101010;color:#b8b0a4;padding:46px 0 30px}
    .footer-top{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:46px;padding-bottom:35px;border-bottom:1px solid rgba(197,160,89,.17)}
    .footer-brand{font-family:var(--serif);color:#fff8eb;font-size:1.2rem;line-height:1.15}
    .footer-brand span{display:block;font-family:var(--sans);font-size:.64rem;color:#a89d8f;letter-spacing:.08em;text-transform:uppercase;margin-top:7px}
    .footer-desc{font-size:.8rem;max-width:420px;line-height:1.65;margin:16px 0 0;color:#a9a195}
    .footer-col h3{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);margin:3px 0 14px}
    .footer-col a{display:block;font-size:.81rem;padding:4px 0;color:#b8b0a4;transition:color .2s}
    .footer-col a:hover{color:var(--gold-light)}
    .badges{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}
    .badge{font-size:.67rem;border:1px solid rgba(244,217,138,.3);color:#ddd3c4;border-radius:5px;padding:5px 8px}
    .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:21px;font-size:.7rem;color:#81796d}
    .fab{
      position:fixed;left:16px;bottom:96px;z-index:70;width:58px;height:58px;border-radius:17px;
      display:grid;place-items:center;background:rgba(9,9,9,.8);border:1px solid transparent;
      background-image:linear-gradient(#111,#111),linear-gradient(135deg,var(--gold-light),var(--amber),#694d1b);
      background-origin:border-box;background-clip:padding-box,border-box;color:var(--gold-light);
      box-shadow:0 0 18px rgba(255,191,0,.22);opacity:.76;animation:floatFab 3.2s ease-in-out infinite;transition:opacity .2s,transform .2s,box-shadow .2s
    }
    .fab:before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;right:7px;top:7px;background:#e95041;box-shadow:0 0 0 3px #151515;animation:blink 1.2s infinite}
    .fab:hover{opacity:1;transform:scale(1.11);box-shadow:0 0 28px rgba(255,191,0,.46)}
    .fab:active{transform:translateY(2px) scale(.95)}
    .fab svg{width:26px;height:26px;filter:drop-shadow(0 0 5px rgba(255,191,0,.65))}
    @keyframes floatFab{50%{transform:translateY(-6px)}}@keyframes blink{50%{opacity:.25}}
    @media(max-width:1024px){
      .desktop-nav{gap:0}.nav-link{padding:9px 8px;font-size:.74rem}.hero-grid{gap:35px}.channel-top,.lead-grid,.privacy-grid{gap:45px}.article-layout{gap:34px}
    }
    @media(max-width:768px){
      .container{width:min(100% - 30px,1180px)}.nav-wrap{height:68px;gap:8px}.brand{flex:1}.brand-sub{display:none}
      .desktop-nav{display:none}.menu-toggle{display:block}.login-link{padding:7px;font-size:.73rem}.signup{padding:8px 10px;font-size:.7rem;min-height:35px}
      .hero{min-height:auto}.hero-grid{grid-template-columns:1fr;gap:33px;min-height:auto;padding:62px 0}.hero h1{font-size:clamp(2.35rem,10vw,3.7rem)}
      .whitepaper{max-width:440px;margin:0 auto;transform:rotate(.5deg);width:100%}.paper-cover{min-height:375px}
      .channel{padding:72px 0}.channel-top,.lead-grid,.privacy-grid{grid-template-columns:1fr;gap:27px}.channel-grid{grid-template-columns:1fr}.channel-card{border-right:0;border-bottom:1px solid #d9d0c2;min-height:unset}.channel-card:last-child{border-bottom:0}
      .data-wrap{grid-template-columns:repeat(3,1fr);gap:19px}.data-lead{grid-column:1/-1}.stat{padding-left:14px}.stat strong{font-size:1.75rem}
      .lead-section,.guide,.articles,.privacy{padding:70px 0}.guide-head,.articles-head{display:block}.guide-head .section-intro,.articles-head .section-intro{margin-top:12px}.guide-path{grid-template-columns:1fr;gap:25px}.guide-visual{min-height:250px}.guide-note{padding:25px 0 0;border-left:0;border-top:1px solid #ded4c5}
      .article-layout{grid-template-columns:1fr;gap:29px}.article-feature{min-height:270px}.article-item{grid-template-columns:82px 1fr auto;gap:12px}.article-item p{display:none}
      .footer-top{grid-template-columns:1fr 1fr;gap:27px}.footer-top>div:first-child{grid-column:1/-1}.final-grid{display:block}.final-grid .btn{margin-top:18px}.safety-points{grid-template-columns:1fr 1fr}
    }
    @media(max-width:520px){
      body{font-size:15px}.brand-mark{width:33px;height:33px;flex-basis:33px}.brand-name{font-size:.92rem}.login-link{display:none}.hero-grid{padding:48px 0}.hero-proof{gap:12px}.proof-item{font-size:.69rem}.hero-actions .btn{width:100%}.paper-cover{padding:24px;min-height:335px}.paper-cover h2{font-size:1.8rem}
      .section-title{font-size:2rem}.field-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.lead-form{padding:25px 19px}.form-bottom{display:block}.form-bottom .btn{width:100%;margin-top:14px}.data-wrap{grid-template-columns:1fr 1fr}.stat:nth-of-type(4){display:none}
      .article-item{grid-template-columns:64px 1fr 14px}.article-item h3{font-size:1rem}.article-date{font-size:.65rem}.safety-points{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr}.footer-top>div:first-child{grid-column:auto}.footer-bottom{display:block;line-height:1.7}.footer-bottom span{display:block}.fab{bottom:20px}.final-cta{padding:37px 0}
    }

/* roulang page: article */
:root{
      --ink:#121212;
      --charcoal:#1c1c1e;
      --paper:#f6f3ec;
      --paper-deep:#ece5d5;
      --gold:#c5a059;
      --gold-light:#f4d98a;
      --amber:#ffbf00;
      --cream:#fffdf7;
      --muted:#a89f93;
      --line:rgba(197,160,89,.24);
      --green:#55bc85;
      --danger:#e36955;
      --radius:18px;
      --radius-sm:12px;
      --shadow:0 20px 55px rgba(0,0,0,.2);
      --sans:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
      --serif:Georgia,"Times New Roman",serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--paper);color:#28241f;font-family:var(--sans);
      font-size:16px;line-height:1.64;overflow-x:hidden
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:.72rem;
      font-weight:800;letter-spacing:.12em;text-transform:uppercase
    }
    .eyebrow:before{content:"";width:22px;height:1px;background:currentColor}
    .section-title{
      font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.35rem);line-height:1.08;
      letter-spacing:-.035em;margin:14px 0;color:inherit;font-weight:700
    }
    .section-intro{max-width:700px;color:#6e665d;margin:0;font-size:1rem}
    .btn{
      display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;
      border-radius:999px;padding:12px 21px;font-size:.88rem;font-weight:800;letter-spacing:.01em;
      transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border .22s ease
    }
    .btn:focus-visible,.nav-link:focus-visible,.faq-trigger:focus-visible,.article-content a:focus-visible{
      outline:3px solid rgba(255,191,0,.55);outline-offset:3px
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(1px) scale(.985)}
    .btn-gold{background:linear-gradient(135deg,var(--amber),var(--gold-light));color:#22190a;box-shadow:0 10px 25px rgba(197,160,89,.24)}
    .btn-gold:hover{box-shadow:0 14px 30px rgba(197,160,89,.4)}
    .btn-dark{background:#1c1c1e;color:var(--cream);border-color:#34312d}
    .btn-dark:hover{background:#2d2b29;border-color:var(--gold)}
    .btn-outline{color:var(--cream);border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.05)}
    .btn-outline:hover{border-color:var(--gold-light);background:rgba(255,255,255,.12)}
    .site-header{
      position:sticky;top:0;z-index:60;background:rgba(18,18,18,.93);
      backdrop-filter:blur(16px);border-bottom:1px solid rgba(197,160,89,.17)
    }
    .nav-wrap{height:78px;display:flex;align-items:center;gap:26px}
    .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
    .brand-mark{
      flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
      color:#17120a;background:radial-gradient(circle at 35% 30%,#fff0ad,var(--amber) 48%,#9c6f22);
      border:1px solid var(--gold-light);box-shadow:0 0 0 4px rgba(197,160,89,.1)
    }
    .brand-name{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--cream);line-height:1.08}
    .brand-sub{display:block;color:#a99d8a;font-family:var(--sans);font-size:.59rem;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
    .desktop-nav{display:flex;align-items:center;gap:3px}
    .nav-link{
      color:#cdc6bb;padding:10px 12px;border-radius:8px;font-size:.8rem;font-weight:700;white-space:nowrap;
      transition:color .2s,background .2s
    }
    .nav-link:hover,.nav-link.active{color:var(--gold-light);background:rgba(197,160,89,.1)}
    .nav-actions{display:flex;align-items:center;gap:5px}
    .login-link{color:#ddd5c8;padding:9px 10px;font-size:.8rem;font-weight:700;white-space:nowrap}
    .login-link:hover{color:var(--gold-light)}
    .menu-toggle{display:none;border:0;background:transparent;color:var(--cream);padding:8px;font-size:1.25rem}
    .mobile-panel{display:none;border-top:1px solid rgba(197,160,89,.15);padding:10px 20px 17px;background:#151515}
    .mobile-panel.open{display:block}
    .mobile-panel .nav-link{display:block;padding:11px 8px}
    .article-hero{
      position:relative;color:var(--cream);overflow:hidden;background:#141413;
      background-image:linear-gradient(90deg,rgba(16,16,15,.94) 0%,rgba(16,16,15,.82) 53%,rgba(16,16,15,.48) 100%),url('/assets/images/backpic/back-3.jpg');
      background-position:center;background-size:cover
    }
    .article-hero:after{
      content:"";position:absolute;right:-13vw;bottom:-16vw;width:48vw;height:48vw;border:1px solid rgba(244,217,138,.24);
      border-radius:50%;box-shadow:0 0 0 42px rgba(197,160,89,.045),0 0 0 86px rgba(197,160,89,.025);pointer-events:none
    }
    .hero-inner{
      position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(330px,7fr);
      gap:52px;align-items:end;min-height:480px;padding:76px 0 65px
    }
    .article-hero .eyebrow{color:var(--gold-light)}
    .article-title{
      font-family:var(--serif);font-size:clamp(2.4rem,4.8vw,4.8rem);line-height:1.03;
      letter-spacing:-.05em;margin:16px 0 21px;max-width:780px
    }
    .hero-summary{font-size:1.03rem;color:#ded8cf;max-width:690px;margin:0}
    .article-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;color:#c7bda9;font-size:.78rem;font-weight:700}
    .article-meta span{display:inline-flex;align-items:center;gap:7px}
    .article-meta svg{color:var(--gold-light)}
    .hero-cover{
      position:relative;transform:translateY(22px) skewY(-2deg);border-radius:var(--radius);overflow:hidden;
      border:1px solid rgba(244,217,138,.45);box-shadow:var(--shadow)
    }
    .hero-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(197,160,89,.05),rgba(0,0,0,.36))}
    .hero-cover img{width:100%;height:344px;object-fit:cover;transform:skewY(2deg) scale(1.05)}
    .article-shell{padding:78px 0 94px}
    .article-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:70px;align-items:start}
    .article-content{min-width:0;font-size:1.035rem;color:#39342e}
    .article-content>*:first-child{margin-top:0}
    .article-content h2,.article-content h3{
      font-family:var(--serif);color:#272119;line-height:1.15;letter-spacing:-.025em
    }
    .article-content h2{font-size:clamp(1.7rem,3vw,2.45rem);margin:45px 0 15px;padding-top:7px}
    .article-content h3{font-size:1.4rem;margin:31px 0 11px}
    .article-content p{margin:0 0 18px}
    .article-content a{color:#8f682c;text-decoration:underline;text-decoration-color:rgba(143,104,44,.35);text-underline-offset:3px;font-weight:700}
    .article-content a:hover{color:#503715;text-decoration-color:currentColor}
    .article-content ul,.article-content ol{padding-left:23px;margin:0 0 23px}
    .article-content li{padding-left:6px;margin:8px 0}
    .article-content li::marker{color:var(--gold);font-weight:800}
    .article-content blockquote{
      margin:29px 0;padding:22px 25px;border-left:3px solid var(--gold);background:#eee7da;
      color:#51483d;font-family:var(--serif);font-size:1.18rem;line-height:1.52
    }
    .article-content img{border-radius:var(--radius-sm);margin:28px 0;box-shadow:0 12px 30px rgba(38,29,16,.12)}
    .article-content table{width:100%;border-collapse:collapse;margin:26px 0;font-size:.92rem;overflow:hidden}
    .article-content th,.article-content td{padding:13px 12px;text-align:left;border-bottom:1px solid #dcd2c2}
    .article-content th{background:#25231f;color:var(--cream);font-size:.78rem;letter-spacing:.04em}
    .article-aside{position:sticky;top:104px}
    .aside-box{border-top:2px solid var(--gold);padding-top:16px}
    .aside-box h2{font-family:var(--serif);font-size:1.35rem;line-height:1.18;margin:0 0 13px;color:#2b251d}
    .aside-box p{margin:0 0 16px;color:#71685d;font-size:.86rem}
    .quick-links{margin:0;padding:0;list-style:none;border-top:1px solid #ded4c5}
    .quick-links li{border-bottom:1px solid #ded4c5}
    .quick-links a{display:flex;gap:10px;padding:11px 2px;color:#564d42;font-weight:750;font-size:.83rem;transition:color .2s,padding .2s}
    .quick-links a:hover{color:#936d31;padding-left:6px}
    .quick-links b{color:var(--gold);font-family:var(--serif)}
    .safe-note{margin-top:34px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:17px 16px;background:#f0ebdf}
    .safe-note strong{display:block;color:#3e3529;font-size:.85rem;margin-bottom:5px}
    .safe-note p{font-size:.77rem;line-height:1.55;margin:0;color:#756b5e}
    .insight-band{background:#1b1b1a;color:var(--cream);padding:80px 0}
    .insight-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
    .insight-band .section-title{color:var(--cream)}
    .insight-band .section-intro{color:#c5bcaf}
    .rule-list{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.16)}
    .rule-list li{display:grid;grid-template-columns:35px 1fr;gap:13px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.16)}
    .rule-num{font-family:var(--serif);font-size:1.25rem;color:var(--gold-light)}
    .rule-list strong{display:block;color:#fffaf0;font-size:.92rem;margin-bottom:3px}
    .rule-list p{margin:0;color:#bdb5a9;font-size:.84rem;line-height:1.55}
    .faq-section{padding:88px 0;background:#ede7da}
    .faq-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:74px;align-items:start}
    .faq-intro{position:sticky;top:110px}
    .faq-list{border-top:1px solid #d5cab8}
    .faq-item{border-bottom:1px solid #d5cab8}
    .faq-trigger{
      appearance:none;width:100%;border:0;background:transparent;padding:20px 0;display:flex;gap:16px;
      justify-content:space-between;text-align:left;align-items:flex-start;color:#342d23;font-weight:800;font-size:1rem
    }
    .faq-trigger svg{flex:0 0 20px;margin-top:3px;color:#a47c3b;transition:transform .25s}
    .faq-item.open .faq-trigger svg{transform:rotate(45deg)}
    .faq-answer{display:none;padding:0 35px 19px 0;color:#6a6157;font-size:.91rem}
    .faq-item.open .faq-answer{display:block}
    .resource-cta{padding:88px 0;background:var(--paper)}
    .cta-panel{
      overflow:hidden;position:relative;background:#22211f;color:var(--cream);border-radius:22px;padding:56px 60px;
      display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;box-shadow:var(--shadow)
    }
    .cta-panel:before{content:"";position:absolute;inset:0;background:url('/assets/images/backpic/back-1.jpg') right center/cover no-repeat;opacity:.17}
    .cta-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#22211f 14%,rgba(34,33,31,.8) 61%,rgba(34,33,31,.35))}
    .cta-panel>*{position:relative;z-index:1}
    .cta-panel h2{font-family:var(--serif);font-size:clamp(2rem,3vw,3rem);letter-spacing:-.035em;line-height:1.08;margin:11px 0}
    .cta-panel p{margin:0;color:#d3cbbb;max-width:660px}
    .cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .not-found{background:#fffdf8;border:1px solid var(--line);border-radius:var(--radius);padding:45px}
    .not-found h2{font-family:var(--serif);font-size:2rem;color:#2c251b;margin:0 0 10px}
    .not-found p{color:#6c6358;margin:0 0 21px}
    .site-footer{background:#121212;color:#cfc7bb;padding:61px 0 22px}
    .footer-top{display:grid;grid-template-columns:1.5fr .7fr .7fr;gap:56px;padding-bottom:45px}
    .footer-brand{font-family:var(--serif);font-weight:700;font-size:1.45rem;color:var(--cream);line-height:1.1}
    .footer-brand span{display:block;color:var(--gold-light);font-family:var(--sans);font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;margin-top:8px}
    .footer-desc{max-width:520px;color:#aaa195;font-size:.84rem;line-height:1.65;margin:17px 0}
    .badges{display:flex;flex-wrap:wrap;gap:8px}
    .badge{border:1px solid rgba(197,160,89,.36);color:#d7c495;padding:5px 9px;border-radius:999px;font-size:.67rem;font-weight:750}
    .footer-col h3{margin:2px 0 14px;color:var(--gold-light);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em}
    .footer-col a{display:block;color:#b8b0a4;font-size:.83rem;padding:4px 0;transition:color .2s,transform .2s}
    .footer-col a:hover{color:var(--gold-light);transform:translateX(3px)}
    .footer-bottom{padding-top:21px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;font-size:.72rem;color:#8c8479}
    .support-fab{
      position:fixed;left:16px;bottom:96px;z-index:50;width:58px;height:58px;border-radius:15px;
      display:grid;place-items:center;color:#00f0ff;background:rgba(10,12,15,.8);border:1px solid #00f0ff;
      box-shadow:0 0 10px rgba(0,240,255,.65),0 0 22px rgba(197,160,89,.28);backdrop-filter:blur(10px);
      opacity:.72;transition:transform .22s,opacity .22s,box-shadow .22s;animation:neonPulse 2.6s ease-in-out infinite
    }
    .support-fab:before{content:"";position:absolute;right:7px;top:7px;width:7px;height:7px;background:#ff3d54;border-radius:50%;box-shadow:0 0 8px #ff3d54}
    .support-fab:hover{opacity:1;transform:scale(1.1);box-shadow:0 0 17px rgba(0,240,255,.92),0 0 34px rgba(197,160,89,.45)}
    .support-fab svg{transition:transform .35s}
    .support-fab:hover svg{transform:rotate(-12deg) scale(1.12)}
    @keyframes neonPulse{50%{opacity:1;box-shadow:0 0 18px rgba(0,240,255,.7),0 0 29px rgba(197,160,89,.24)}}
    @media(max-width:1024px){
      .desktop-nav{display:none}.menu-toggle{display:block}.nav-wrap{gap:15px}
      .article-layout{grid-template-columns:minmax(0,1fr) 215px;gap:39px}
      .hero-inner{gap:33px}.cta-panel{padding:47px 42px}
    }
    @media(max-width:768px){
      .container{width:min(100% - 32px,1180px)}.nav-wrap{height:70px}
      .brand-sub{display:none}.brand-name{font-size:.98rem}.nav-actions .btn{min-height:39px;padding:8px 12px;font-size:.74rem}
      .login-link{display:none}.hero-inner{grid-template-columns:1fr;min-height:auto;padding:59px 0 0;gap:27px}
      .article-title{font-size:clamp(2.35rem,10vw,3.5rem)}.hero-cover{transform:translateY(0) skewY(-1.5deg);margin:0 -16px}
      .hero-cover img{height:240px}.article-shell{padding:55px 0 66px}.article-layout{display:block}
      .article-aside{position:static;margin-top:46px}.aside-box{max-width:560px}.insight-band{padding:64px 0}
      .insight-grid,.faq-grid{grid-template-columns:1fr;gap:35px}.faq-intro{position:static}.faq-section{padding:65px 0}
      .cta-panel{grid-template-columns:1fr;padding:40px 29px}.cta-actions{justify-content:flex-start}
      .footer-top{grid-template-columns:1fr 1fr;gap:34px}.footer-top>div:first-child{grid-column:1/-1}
    }
    @media(max-width:520px){
      body{font-size:15px}.container{width:calc(100% - 28px)}.brand-mark{flex-basis:34px;width:34px;height:34px}
      .brand-name{font-size:.9rem}.nav-actions{gap:0}.menu-toggle{padding:7px 3px 7px 7px}
      .article-hero{background-position:61% center}.article-meta{gap:8px 15px}.article-content{font-size:1rem}
      .article-content h2{margin-top:37px}.article-content blockquote{padding:18px 19px;font-size:1.08rem}
      .article-content table{font-size:.8rem}.article-content th,.article-content td{padding:10px 8px}
      .faq-trigger{font-size:.94rem}.faq-answer{padding-right:4px}.footer-top{grid-template-columns:1fr;gap:29px}
      .footer-top>div:first-child{grid-column:auto}.footer-bottom{display:block;line-height:1.7}.footer-bottom span{display:block;margin:4px 0}
      .cta-panel{padding:34px 23px}.support-fab{width:52px;height:52px;bottom:84px}
    }

/* roulang page: category1 */
:root{
      --ink:#121212;
      --charcoal:#1c1c1e;
      --paper:#f6f3ec;
      --paper-deep:#ece5d5;
      --gold:#c5a059;
      --gold-light:#f4d98a;
      --amber:#ffbf00;
      --cream:#fffdf7;
      --muted:#a89f93;
      --line:rgba(197,160,89,.24);
      --green:#55bc85;
      --danger:#e36955;
      --radius:18px;
      --radius-sm:12px;
      --shadow:0 20px 55px rgba(0,0,0,.2);
      --sans:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
      --serif:Georgia,"Times New Roman",serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--paper);color:#28241f;font-family:var(--sans);
      font-size:16px;line-height:1.64;overflow-x:hidden
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:.72rem;
      font-weight:800;letter-spacing:.12em;text-transform:uppercase
    }
    .eyebrow:before{content:"";width:22px;height:1px;background:currentColor}
    .section-title{
      font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.35rem);line-height:1.08;
      letter-spacing:-.035em;margin:14px 0;color:inherit;font-weight:700
    }
    .section-intro{max-width:700px;color:#6e665d;margin:0;font-size:1rem}
    .btn{
      display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;
      border-radius:999px;padding:12px 21px;font-size:.88rem;font-weight:800;letter-spacing:.01em;
      transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border .22s ease
    }
    .btn:focus-visible,.nav-link:focus-visible,.form-input:focus-visible,.faq-trigger:focus-visible{
      outline:3px solid rgba(255,191,0,.55);outline-offset:3px
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(1px) scale(.985)}
    .btn-gold{background:linear-gradient(135deg,var(--amber),var(--gold-light));color:#22190a;box-shadow:0 10px 25px rgba(197,160,89,.24)}
    .btn-gold:hover{box-shadow:0 14px 30px rgba(197,160,89,.4)}
    .btn-dark{background:#1c1c1e;color:var(--cream);border-color:#34312d}
    .btn-dark:hover{background:#2d2b29;border-color:var(--gold)}
    .btn-outline{color:var(--cream);border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.05)}
    .btn-outline:hover{border-color:var(--gold-light);background:rgba(255,255,255,.12)}
    .site-header{
      position:sticky;top:0;z-index:60;background:rgba(18,18,18,.93);
      backdrop-filter:blur(16px);border-bottom:1px solid rgba(197,160,89,.17)
    }
    .nav-wrap{height:78px;display:flex;align-items:center;gap:26px}
    .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
    .brand-mark{
      flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
      color:#17120a;background:radial-gradient(circle at 35% 30%,#fff0ad,var(--amber) 48%,#9c6f22);
      border:1px solid var(--gold-light);box-shadow:0 0 0 4px rgba(197,160,89,.1)
    }
    .brand-name{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--cream);line-height:1.08}
    .brand-sub{display:block;color:#a99d8a;font-family:var(--sans);font-size:.59rem;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
    .desktop-nav{display:flex;align-items:center;gap:3px}
    .nav-link{
      color:#cdc6bb;padding:10px 12px;border-radius:8px;font-size:.8rem;font-weight:700;white-space:nowrap;
      transition:color .2s,background .2s
    }
    .nav-link:hover,.nav-link.active{color:var(--gold-light);background:rgba(197,160,89,.1)}
    .nav-actions{display:flex;align-items:center;gap:5px}
    .login-link{color:#ded7cc;padding:9px 9px;font-size:.8rem;font-weight:700;white-space:nowrap}
    .login-link:hover{color:var(--gold-light)}
    .menu-toggle{display:none;border:0;background:transparent;color:var(--cream);padding:8px;font-size:1.25rem}
    .mobile-panel{display:none;border-top:1px solid rgba(197,160,89,.15);padding:10px 20px 17px;background:#151515}
    .mobile-panel.open{display:block}
    .mobile-panel .nav-link{display:block;padding:11px 8px}

    .inner-banner{
      position:relative;isolation:isolate;overflow:hidden;color:var(--cream);
      min-height:300px;background:#181817 url('/assets/images/backpic/back-1.jpg') center 46%/cover no-repeat
    }
    .inner-banner:before{
      content:"";position:absolute;inset:0;z-index:-1;
      background:linear-gradient(90deg,rgba(18,18,18,.95) 0%,rgba(18,18,18,.82) 52%,rgba(18,18,18,.39) 100%)
    }
    .inner-banner:after{
      content:"";position:absolute;z-index:-1;width:360px;height:360px;border-radius:50%;
      right:8%;top:-145px;border:1px solid rgba(244,217,138,.34);box-shadow:0 0 0 45px rgba(197,160,89,.06),0 0 0 92px rgba(197,160,89,.035)
    }
    .banner-content{padding:51px 0 47px}
    .breadcrumb{display:flex;align-items:center;gap:8px;color:#c9bfae;font-size:.78rem;font-weight:700;margin-bottom:19px}
    .breadcrumb span{color:var(--gold-light)}
    .inner-banner h1{
      max-width:800px;margin:0;font-family:var(--serif);font-size:clamp(2.25rem,4.5vw,4.35rem);
      line-height:1.02;letter-spacing:-.045em
    }
    .banner-copy{max-width:720px;margin:17px 0 0;color:#e0d9ce;font-size:1rem}
    .banner-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px}
    .meta-pill{border:1px solid rgba(244,217,138,.38);background:rgba(255,255,255,.06);border-radius:99px;padding:5px 11px;color:#f2e8d9;font-size:.73rem;font-weight:700}

    main{overflow:hidden}
    .dashboard{padding:74px 0 84px}
    .dashboard-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(430px,1.2fr);gap:64px;align-items:start}
    .dashboard-copy{padding-top:8px}
    .dash-note{margin:24px 0 0;padding:16px 0;border-top:1px solid #d8cfbf;border-bottom:1px solid #d8cfbf;color:#625b52;font-size:.9rem}
    .dash-note strong{color:#3c342a}
    .stats-board{
      display:grid;grid-template-columns:repeat(2,1fr);background:#1c1c1e;border:1px solid rgba(197,160,89,.42);
      box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden
    }
    .stat-item{padding:27px 28px;border-right:1px solid rgba(244,217,138,.16);border-bottom:1px solid rgba(244,217,138,.16)}
    .stat-item:nth-child(2n){border-right:0}
    .stat-item:nth-last-child(-n+2){border-bottom:0}
    .stat-kicker{display:flex;gap:8px;align-items:center;color:#c0b5a4;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
    .stat-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 4px rgba(85,188,133,.13)}
    .stat-number{font-family:var(--serif);font-size:2.45rem;line-height:1;margin:16px 0 8px;color:var(--gold-light)}
    .stat-text{color:#d1c8bb;margin:0;font-size:.82rem;line-height:1.5}
    .board-footer{grid-column:1/-1;padding:16px 26px;background:#151515;color:#bfb6aa;font-size:.77rem}
    .board-footer b{color:#f4d98a}

    .guide-strip{background:var(--paper-deep);border-top:1px solid #dfd5c5;border-bottom:1px solid #dfd5c5}
    .guide-grid{display:grid;grid-template-columns:.93fr 1.07fr}
    .guide-image{min-height:390px;position:relative;overflow:hidden}
    .guide-image img{width:100%;height:100%;object-fit:cover}
    .guide-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,16,11,.52),transparent 55%)}
    .image-caption{position:absolute;z-index:2;left:27px;right:26px;bottom:23px;color:#fffdf7;font-family:var(--serif);font-size:1.38rem;line-height:1.15}
    .guide-content{padding:72px clamp(30px,6vw,94px)}
    .check-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:16px}
    .check-list li{position:relative;padding-left:32px;color:#5e574e;font-size:.92rem}
    .check-list li:before{
      content:"✓";position:absolute;left:0;top:1px;width:21px;height:21px;display:grid;place-items:center;
      border-radius:50%;background:#30291e;color:var(--gold-light);font-size:.75rem;font-weight:900
    }

    .matrix-section{padding:94px 0 92px;background:#fbf9f4}
    .matrix-head{display:flex;justify-content:space-between;gap:30px;align-items:end;padding-bottom:32px;border-bottom:1px solid #ded5c7}
    .matrix-head .section-intro{text-align:right;max-width:455px}
    .matrix-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:0}
    .matrix-card{padding:33px 30px 31px;border-right:1px solid #ded5c7;border-bottom:1px solid #ded5c7;min-height:250px;transition:background .25s,transform .25s}
    .matrix-card:nth-child(3n){border-right:0}
    .matrix-card:hover{background:#fffdf8;transform:translateY(-5px)}
    .matrix-card.featured{background:#25231f;color:var(--cream)}
    .matrix-card.featured:hover{background:#302d28}
    .card-index{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#eee3cf;color:#624a24;font-family:var(--serif);font-weight:700}
    .featured .card-index{background:rgba(244,217,138,.16);color:var(--gold-light)}
    .matrix-card h3{font-family:var(--serif);font-size:1.58rem;line-height:1.1;margin:20px 0 10px;color:#2d271e}
    .featured h3{color:var(--gold-light)}
    .matrix-card p{font-size:.87rem;line-height:1.62;color:#71695f;margin:0}
    .featured p{color:#d2c9bc}
    .card-link{display:inline-flex;gap:7px;align-items:center;margin-top:18px;font-size:.79rem;color:var(--gold);font-weight:800}
    .card-link svg{transition:transform .2s}
    .matrix-card:hover .card-link svg{transform:translateX(4px)}

    .compare-section{padding:92px 0;background:#1a1a1a;color:var(--cream)}
    .compare-top{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:end;margin-bottom:38px}
    .compare-top .section-title{color:var(--cream)}
    .compare-top .section-intro{color:#c6bdb1}
    .compare-list{border-top:1px solid rgba(244,217,138,.28)}
    .compare-row{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:25px;padding:20px 8px;border-bottom:1px solid rgba(244,217,138,.17);align-items:center}
    .compare-row.heading{padding:12px 8px;color:#a99f92;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
    .compare-row h3{margin:0;color:#f4d98a;font-family:var(--serif);font-size:1.17rem}
    .compare-row p{margin:0;color:#ddd5ca;font-size:.86rem}
    .positive{display:inline-flex;align-items:center;gap:8px;color:#dbe9db;font-size:.84rem}
    .positive:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(85,188,133,.7)}
    .warn{display:inline-flex;align-items:center;gap:8px;color:#e4c7b6;font-size:.84rem}
    .warn:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
    .responsible-note{display:flex;gap:13px;margin-top:29px;padding:17px 19px;border-left:3px solid var(--gold);background:rgba(255,255,255,.045);color:#c9c1b5;font-size:.84rem}
    .responsible-note strong{color:var(--gold-light);white-space:nowrap}

    .tips-section{padding:91px 0}
    .tips-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start}
    .tips-sticky{position:sticky;top:105px}
    .tips-photo{margin-top:29px;border-radius:var(--radius);overflow:hidden;position:relative;height:245px}
    .tips-photo img{width:100%;height:100%;object-fit:cover}
    .tips-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,13,10,.55),transparent)}
    .timeline{border-left:1px solid #d2c4ad;padding-left:33px;display:grid;gap:0}
    .timeline-item{position:relative;padding:0 0 33px}
    .timeline-item:last-child{padding-bottom:0}
    .timeline-item:before{content:"";position:absolute;left:-40px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:3px solid var(--gold)}
    .timeline-item h3{font-family:var(--serif);font-size:1.42rem;line-height:1.15;color:#302a22;margin:0 0 8px}
    .timeline-item p{margin:0;color:#6e665c;font-size:.91rem}
    .timeline-label{display:inline-block;margin-bottom:7px;color:var(--gold);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

    .faq-section{padding:88px 0;background:#eee7da}
    .faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:74px;align-items:start}
    .faq-aside{padding-top:4px}
    .faq-aside p{color:#6d655c;margin:0 0 23px}
    .faq-list{border-top:1px solid #d2c5b2}
    .faq-item{border-bottom:1px solid #d2c5b2}
    .faq-trigger{
      width:100%;padding:22px 0;border:0;background:transparent;color:#2d271f;text-align:left;display:flex;
      gap:20px;justify-content:space-between;align-items:center;font-weight:800;font-size:1rem
    }
    .faq-icon{width:28px;height:28px;flex:0 0 28px;border:1px solid #bfa77a;border-radius:50%;display:grid;place-items:center;color:#75571f;transition:transform .25s,background .25s}
    .faq-item.open .faq-icon{transform:rotate(45deg);background:#2b261e;color:var(--gold-light);border-color:#2b261e}
    .faq-answer{display:none;padding:0 45px 22px 0;color:#675f55;font-size:.91rem}
    .faq-item.open .faq-answer{display:block}

    .cta-section{padding:94px 0;background:#181817;color:var(--cream)}
    .cta-box{display:grid;grid-template-columns:1.05fr .95fr;gap:65px;align-items:center}
    .cta-copy .section-title{color:var(--cream);max-width:610px}
    .cta-copy p{color:#c8c0b6;max-width:600px;margin:0}
    .cta-points{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
    .cta-points li{border:1px solid rgba(244,217,138,.26);padding:6px 10px;border-radius:99px;color:#e4dccf;font-size:.74rem;font-weight:700}
    .lead-form{padding:30px;background:#252522;border:1px solid rgba(244,217,138,.27);border-radius:var(--radius);box-shadow:0 18px 40px rgba(0,0,0,.19)}
    .lead-form h3{font-family:var(--serif);font-size:1.65rem;line-height:1.13;color:var(--gold-light);margin:0 0 8px}
    .lead-form p{color:#c3baad;font-size:.84rem;margin:0 0 20px}
    .form-label{display:block;margin:0 0 7px;color:#e7ded1;font-size:.77rem;font-weight:800}
    .form-input{width:100%;height:49px;border:1px solid #565049;border-radius:10px;background:#171716;color:#fffdf7;padding:0 14px;transition:border-color .2s,box-shadow .2s}
    .form-input::placeholder{color:#8e877d}
    .form-input:focus{border-color:var(--gold-light);box-shadow:0 0 0 3px rgba(197,160,89,.16);outline:none}
    .form-row{margin-bottom:15px}
    .form-help{margin:14px 0 0;color:#a99f92;font-size:.71rem;line-height:1.55}
    .form-message{display:none;margin-top:13px;color:#cce7d6;font-size:.8rem;font-weight:700}
    .form-message.show{display:block}

    .site-footer{background:#101010;color:#d0c7ba;padding:62px 0 21px;border-top:1px solid rgba(197,160,89,.18)}
    .footer-top{display:grid;grid-template-columns:1.65fr .65fr .65fr;gap:60px;padding-bottom:45px}
    .footer-brand{font-family:var(--serif);font-size:1.5rem;line-height:1.08;color:var(--cream)}
    .footer-brand span{display:block;margin-top:6px;color:var(--gold);font-family:var(--sans);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
    .footer-desc{max-width:470px;margin:18px 0;color:#aaa195;font-size:.83rem}
    .badges{display:flex;flex-wrap:wrap;gap:8px}
    .badge{border:1px solid rgba(244,217,138,.25);border-radius:99px;padding:5px 9px;color:#d8cda9;font-size:.68rem;font-weight:700}
    .footer-col h3{margin:2px 0 13px;font-size:.75rem;color:var(--gold-light);letter-spacing:.1em;text-transform:uppercase}
    .footer-col a{display:block;color:#c5bdb2;font-size:.82rem;margin:9px 0;transition:color .2s,transform .2s}
    .footer-col a:hover{color:var(--gold-light);transform:translateX(3px)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);color:#817a70;font-size:.72rem}

    .fab{
      position:fixed;left:16px;bottom:96px;z-index:50;width:58px;height:58px;border-radius:19px;border:1px solid rgba(0,240,255,.85);
      background:rgba(9,12,15,.78);backdrop-filter:blur(9px);color:#00f0ff;display:grid;place-items:center;
      box-shadow:0 0 0 2px rgba(197,160,89,.18),0 0 20px rgba(0,240,255,.38);opacity:.72;
      transition:transform .25s,opacity .25s,box-shadow .25s;animation:fabFloat 3s ease-in-out infinite
    }
    .fab:before{content:"";position:absolute;inset:-2px;border-radius:20px;padding:1px;background:linear-gradient(135deg,#00f0ff,#f4d98a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
    .fab:hover{opacity:1;transform:scale(1.1);box-shadow:0 0 29px rgba(0,240,255,.62)}
    .fab svg{width:27px;height:27px;filter:drop-shadow(0 0 6px #00f0ff)}
    .fab-dot{position:absolute;top:5px;right:6px;width:9px;height:9px;background:#e36955;border-radius:50%;box-shadow:0 0 0 2px #111;animation:blink 1.2s infinite}
    @keyframes fabFloat{50%{transform:translateY(-7px)}}
    @keyframes blink{50%{opacity:.25}}

    @media(max-width:1024px){
      .desktop-nav{display:none}.menu-toggle{display:block}.nav-wrap{gap:15px}
      .dashboard-layout,.compare-top,.tips-layout,.faq-layout,.cta-box{gap:40px}
      .matrix-card{padding:28px 22px}.guide-content{padding:55px 42px}
    }
    @media(max-width:768px){
      .container{width:min(100% - 30px,1180px)}
      .nav-wrap{height:70px}.brand-sub{display:none}.brand-name{font-size:.96rem}
      .login-link{font-size:.74rem;padding:8px 3px}.signup{min-height:39px;padding:9px 12px;font-size:.75rem}
      .inner-banner{min-height:286px}.banner-content{padding:39px 0}.inner-banner h1{font-size:clamp(2.1rem,9vw,3.25rem)}
      .dashboard{padding:58px 0}.dashboard-layout,.guide-grid,.compare-top,.tips-layout,.faq-layout,.cta-box{grid-template-columns:1fr}
      .dashboard-layout,.compare-top,.tips-layout,.faq-layout,.cta-box{gap:33px}
      .guide-image{min-height:290px}.guide-content{padding:51px 25px}
      .matrix-section,.compare-section,.tips-section,.faq-section,.cta-section{padding:64px 0}
      .matrix-head{display:block}.matrix-head .section-intro{text-align:left;margin-top:14px}
      .matrix-grid{grid-template-columns:1fr 1fr}.matrix-card:nth-child(3n){border-right:1px solid #ded5c7}.matrix-card:nth-child(2n){border-right:0}
      .compare-row{grid-template-columns:.9fr 1fr 1fr;gap:14px}.compare-row p{font-size:.78rem}
      .tips-sticky{position:static}.tips-photo{display:none}
      .footer-top{grid-template-columns:1.3fr 1fr;gap:35px}.footer-top>div:first-child{grid-column:1/-1}
    }
    @media(max-width:520px){
      body{font-size:15px}.container{width:min(100% - 28px,1180px)}
      .brand-mark{width:33px;height:33px;flex-basis:33px}.brand-name{font-size:.87rem}
      .nav-actions{gap:1px}.login-link{display:none}.signup{font-size:.69rem;padding:8px 10px;min-height:36px}
      .inner-banner:after{right:-150px}.banner-copy{font-size:.9rem}
      .stats-board{grid-template-columns:1fr}.stat-item,.stat-item:nth-child(2n){border-right:0;border-bottom:1px solid rgba(244,217,138,.16)}.stat-item:last-of-type{border-bottom:0}
      .matrix-grid{grid-template-columns:1fr}.matrix-card,.matrix-card:nth-child(3n){border-right:0}.matrix-card{min-height:auto}
      .compare-row{grid-template-columns:1fr;gap:7px;padding:19px 2px}.compare-row.heading{display:none}
      .compare-row h3{margin-bottom:3px}.compare-row p:before{content:"Thông tin chính: ";color:#aa9f8f;font-size:.7rem;font-weight:800;text-transform:uppercase}
      .faq-answer{padding-right:5px}.faq-trigger{font-size:.93rem}
      .lead-form{padding:24px 19px}.footer-top{grid-template-columns:1fr;gap:25px}.footer-top>div:first-child{grid-column:auto}.footer-bottom{display:block;line-height:1.8}.footer-bottom span{display:block;margin:3px 0}
      .fab{bottom:84px;width:52px;height:52px}
    }

/* roulang page: category3 */
:root{
      --ink:#121212;
      --charcoal:#1c1c1e;
      --paper:#f6f3ec;
      --paper-deep:#ece5d5;
      --gold:#c5a059;
      --gold-light:#f4d98a;
      --amber:#ffbf00;
      --cream:#fffdf7;
      --muted:#a89f93;
      --line:rgba(197,160,89,.24);
      --green:#55bc85;
      --danger:#e36955;
      --radius:18px;
      --radius-sm:12px;
      --shadow:0 20px 55px rgba(0,0,0,.2);
      --sans:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
      --serif:Georgia,"Times New Roman",serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--paper);color:#28241f;font-family:var(--sans);
      font-size:16px;line-height:1.64;overflow-x:hidden
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:.72rem;
      font-weight:800;letter-spacing:.12em;text-transform:uppercase
    }
    .eyebrow:before{content:"";width:22px;height:1px;background:currentColor}
    .section-title{
      font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.35rem);line-height:1.08;
      letter-spacing:-.035em;margin:14px 0;color:inherit;font-weight:700
    }
    .section-intro{max-width:690px;color:#6e665d;margin:0;font-size:1rem}
    .btn{
      display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;
      border-radius:999px;padding:12px 21px;font-size:.88rem;font-weight:800;letter-spacing:.01em;
      transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border .22s ease
    }
    .btn:focus-visible,.nav-link:focus-visible,.form-input:focus-visible,.faq-trigger:focus-visible,.menu-toggle:focus-visible{
      outline:3px solid rgba(255,191,0,.55);outline-offset:3px
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(1px) scale(.985)}
    .btn-gold{background:linear-gradient(135deg,var(--amber),var(--gold-light));color:#22190a;box-shadow:0 10px 25px rgba(197,160,89,.24)}
    .btn-gold:hover{box-shadow:0 14px 30px rgba(197,160,89,.4)}
    .btn-dark{background:#1c1c1e;color:var(--cream);border-color:#34312d}
    .btn-dark:hover{background:#2d2b29;border-color:var(--gold)}
    .btn-outline{color:var(--cream);border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.05)}
    .btn-outline:hover{border-color:var(--gold-light);background:rgba(255,255,255,.12)}
    .site-header{
      position:sticky;top:0;z-index:60;background:rgba(18,18,18,.93);
      backdrop-filter:blur(16px);border-bottom:1px solid rgba(197,160,89,.17)
    }
    .nav-wrap{height:78px;display:flex;align-items:center;gap:26px}
    .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
    .brand-mark{
      flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
      color:#17120a;background:radial-gradient(circle at 35% 30%,#fff0ad,var(--amber) 48%,#9c6f22);
      border:1px solid var(--gold-light);box-shadow:0 0 0 4px rgba(197,160,89,.1)
    }
    .brand-name{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--cream);line-height:1.08}
    .brand-sub{display:block;color:#a99d8a;font-family:var(--sans);font-size:.59rem;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
    .desktop-nav{display:flex;align-items:center;gap:3px}
    .nav-link{
      color:#cdc6bb;padding:10px 12px;border-radius:8px;font-size:.8rem;font-weight:700;white-space:nowrap;
      transition:color .2s,background .2s
    }
    .nav-link:hover,.nav-link.active{color:var(--gold-light);background:rgba(197,160,89,.1)}
    .nav-actions{display:flex;align-items:center;gap:5px}
    .login-link{color:#d8d0c4;padding:8px 10px;font-size:.8rem;font-weight:700;white-space:nowrap}
    .login-link:hover{color:var(--gold-light)}
    .menu-toggle{display:none;border:0;background:transparent;color:var(--cream);padding:8px;font-size:1.25rem}
    .mobile-panel{display:none;border-top:1px solid rgba(197,160,89,.15);padding:10px 20px 17px;background:#151515}
    .mobile-panel.open{display:block}
    .mobile-panel .nav-link{display:block;padding:11px 8px}
    .inner-hero{
      position:relative;overflow:hidden;color:var(--cream);background:#151515 url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;
      isolation:isolate
    }
    .inner-hero:before{
      content:"";position:absolute;inset:0;z-index:-1;
      background:linear-gradient(105deg,rgba(12,12,12,.96) 5%,rgba(18,16,12,.87) 54%,rgba(17,15,13,.64))
    }
    .inner-hero:after{
      content:"";position:absolute;z-index:-1;width:590px;height:590px;right:-180px;top:-240px;
      border-radius:50%;border:1px solid rgba(244,217,138,.26);box-shadow:0 0 0 56px rgba(197,160,89,.04),0 0 0 115px rgba(197,160,89,.025)
    }
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.75fr);gap:62px;align-items:center;min-height:580px;padding:74px 0}
    .inner-hero .eyebrow{color:var(--gold-light)}
    .inner-hero h1{
      font-family:var(--serif);font-size:clamp(2.45rem,4.8vw,4.7rem);line-height:1.01;
      letter-spacing:-.052em;margin:16px 0 21px;max-width:785px
    }
    .inner-hero h1 em{font-style:normal;color:var(--gold-light)}
    .hero-copy{max-width:710px;color:#d9d1c5;font-size:1.03rem;margin:0}
    .hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:29px}
    .hero-notice{display:flex;align-items:flex-start;gap:10px;margin-top:23px;color:#c8bfb0;font-size:.79rem;max-width:650px}
    .hero-notice svg{flex:0 0 18px;margin-top:4px;color:var(--gold-light)}
    .vip-panel{
      background:linear-gradient(145deg,rgba(37,35,30,.95),rgba(15,15,15,.94));
      border:1px solid rgba(244,217,138,.34);border-radius:var(--radius);padding:24px;
      box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.07);position:relative;overflow:hidden
    }
    .vip-panel:before{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,191,0,.17);border-radius:50%;right:-85px;top:-80px}
    .panel-label{position:relative;display:flex;justify-content:space-between;align-items:center;color:#d9d0c2;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
    .live-dot{display:inline-flex;align-items:center;gap:6px;color:#9be2b5}
    .live-dot i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 1.8s infinite}
    .panel-title{position:relative;font-family:var(--serif);font-size:1.72rem;line-height:1.13;color:var(--cream);margin:22px 0 8px}
    .panel-copy{position:relative;color:#bdb4a8;font-size:.84rem;margin:0 0 21px}
    .level-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:18px 0 10px}
    .level-track span{height:7px;border-radius:999px;background:#51493d}
    .level-track span:nth-child(1){background:linear-gradient(90deg,#b57b4e,#e6bd88)}
    .level-track span:nth-child(2){background:linear-gradient(90deg,#a3a5a6,#e8e8e4)}
    .level-track span:nth-child(3){background:linear-gradient(90deg,#d4a71b,#f4d98a)}
    .level-track span:nth-child(4){background:linear-gradient(90deg,#8fb2bc,#e8f8fa)}
    .level-names{position:relative;display:flex;justify-content:space-between;color:#aaa091;font-size:.64rem;font-weight:700}
    .mini-checks{position:relative;display:grid;gap:0;margin-top:22px;border-top:1px solid rgba(255,255,255,.1)}
    .mini-check{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:14px;font-size:.77rem;color:#d5ccc0}
    .mini-check b{color:var(--gold-light);white-space:nowrap}
    .dashboard{background:#1b1b19;color:var(--cream);padding:34px 0}
    .dashboard-grid{display:grid;grid-template-columns:1.3fr repeat(3,.7fr);gap:20px;align-items:stretch}
    .dash-lead{padding:3px 24px 3px 0;border-right:1px solid rgba(255,255,255,.12)}
    .dash-lead h2{font-family:var(--serif);font-size:1.5rem;line-height:1.18;margin:0 0 7px;color:var(--cream)}
    .dash-lead p{margin:0;color:#bcb3a6;font-size:.82rem;max-width:400px}
    .metric{padding:2px 16px;border-right:1px solid rgba(255,255,255,.12)}
    .metric:last-child{border:0}
    .metric b{display:block;font-family:var(--serif);font-size:2rem;line-height:1;color:var(--gold-light)}
    .metric span{display:block;color:#bdb4a8;font-size:.73rem;line-height:1.35;margin-top:8px}
    .section{padding:96px 0}
    .summary-section{background:var(--paper)}
    .summary-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:86px;align-items:start}
    .side-note{padding-top:12px;border-top:2px solid var(--gold)}
    .side-note h2{font-family:var(--serif);font-size:1.7rem;line-height:1.16;margin:16px 0 12px;color:var(--ink)}
    .side-note p{color:#71695f;font-size:.93rem;margin:0}
    .guidance-list{border-top:1px solid #d9d0c2}
    .guidance-item{display:grid;grid-template-columns:55px 1fr;gap:18px;padding:23px 0;border-bottom:1px solid #d9d0c2}
    .guidance-number{font-family:var(--serif);font-size:2rem;line-height:1;color:var(--gold)}
    .guidance-item h3{font-family:var(--serif);font-size:1.35rem;line-height:1.15;color:#302a22;margin:0 0 6px}
    .guidance-item p{margin:0;color:#70685f;font-size:.91rem}
    .vip-feature{background:#e9e1d3;position:relative;overflow:hidden}
    .feature-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.92fr);gap:68px;align-items:center}
    .feature-copy .section-intro{margin-bottom:29px}
    .benefit-list{display:grid;gap:0;border-top:1px solid #cfc3b1}
    .benefit{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid #cfc3b1}
    .benefit-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#292722;color:var(--gold-light);font-weight:800;font-size:.83rem}
    .benefit h3{font-size:1rem;line-height:1.2;margin:2px 0 4px;color:#302a22}
    .benefit p{font-size:.86rem;color:#6d665c;margin:0}
    .image-frame{position:relative}
    .image-frame img{width:100%;height:460px;object-fit:cover;border-radius:var(--radius);filter:saturate(.84) contrast(1.04)}
    .image-frame:after{content:"";position:absolute;inset:0;border:1px solid rgba(244,217,138,.48);border-radius:var(--radius);pointer-events:none}
    .image-caption{
      position:absolute;left:22px;bottom:22px;right:22px;padding:16px 18px;background:rgba(18,18,18,.86);
      backdrop-filter:blur(10px);border-left:2px solid var(--gold-light);color:#eee6d8;font-size:.8rem
    }
    .process-section{background:var(--paper)}
    .process-head{display:grid;grid-template-columns:.74fr 1.26fr;gap:65px;align-items:end;margin-bottom:42px}
    .process-rail{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d8cebd;border-bottom:1px solid #d8cebd}
    .process-step{padding:28px 29px 30px;border-right:1px solid #d8cebd;min-height:225px;position:relative}
    .process-step:last-child{border:0}
    .step-chip{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:#282622;color:var(--gold-light);font-family:var(--serif);font-size:1rem}
    .process-step h3{font-family:var(--serif);font-size:1.43rem;line-height:1.15;color:#302a22;margin:20px 0 9px}
    .process-step p{font-size:.87rem;color:#6f675d;margin:0}
    .check-section{background:#20201f;color:var(--cream)}
    .check-layout{display:grid;grid-template-columns:.76fr 1.24fr;gap:78px;align-items:start}
    .check-section .section-title{color:var(--cream)}
    .check-section .section-intro{color:#bdb3a6}
    .check-card{border:1px solid rgba(244,217,138,.29);border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.025)}
    .check-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:19px 21px;border-bottom:1px solid rgba(255,255,255,.11);align-items:center}
    .check-row:last-child{border-bottom:0}
    .check-row strong{display:block;font-size:.92rem;color:#f1e9dc}
    .check-row span{display:block;font-size:.78rem;color:#b8afa4;margin-top:3px}
    .status{font-size:.68rem;font-weight:800;color:#aee0bd;background:rgba(85,188,133,.13);border:1px solid rgba(85,188,133,.27);border-radius:999px;padding:5px 9px;white-space:nowrap}
    .status.gold{color:var(--gold-light);background:rgba(197,160,89,.12);border-color:rgba(197,160,89,.28)}
    .faq-section{background:#f1ecdf}
    .faq-layout{display:grid;grid-template-columns:.77fr 1.23fr;gap:80px;align-items:start}
    .faq-aside{position:sticky;top:112px}
    .faq-aside p{color:#70685e;margin-bottom:25px}
    .faq-list{border-top:1px solid #d2c7b5}
    .faq-item{border-bottom:1px solid #d2c7b5}
    .faq-trigger{
      width:100%;border:0;background:transparent;text-align:left;color:#2f2921;display:flex;align-items:center;justify-content:space-between;
      gap:18px;padding:20px 0;font-family:var(--serif);font-size:1.2rem;font-weight:700;line-height:1.25
    }
    .faq-trigger span:last-child{font-family:var(--sans);font-size:1.4rem;color:var(--gold);font-weight:400;transition:transform .22s}
    .faq-item.open .faq-trigger span:last-child{transform:rotate(45deg)}
    .faq-answer{display:none;padding:0 37px 20px 0;color:#70685e;font-size:.9rem}
    .faq-item.open .faq-answer{display:block}
    .cta-section{padding:96px 0;background:var(--paper)}
    .cta-box{
      position:relative;overflow:hidden;background:#1b1b1a;color:var(--cream);border-radius:var(--radius);padding:58px 60px;
      display:grid;grid-template-columns:1fr minmax(330px,.78fr);gap:50px;align-items:center;box-shadow:var(--shadow)
    }
    .cta-box:before{content:"";position:absolute;width:410px;height:410px;right:-150px;bottom:-250px;border-radius:50%;border:1px solid rgba(244,217,138,.21);box-shadow:0 0 0 45px rgba(197,160,89,.035),0 0 0 95px rgba(197,160,89,.02)}
    .cta-box .eyebrow{color:var(--gold-light)}
    .cta-box .section-title{color:var(--cream);font-size:clamp(2rem,3.4vw,3.2rem);max-width:610px}
    .cta-box p{position:relative;color:#bdb4a8;max-width:620px;margin:0}
    .form-stack{position:relative;display:grid;gap:11px}
    .form-input{
      width:100%;min-height:49px;border-radius:10px;border:1px solid rgba(255,255,255,.19);background:rgba(255,255,255,.075);
      color:var(--cream);padding:12px 14px;outline:0;transition:border .2s,background .2s
    }
    .form-input::placeholder{color:#a89f93}
    .form-input:focus{border-color:var(--gold-light);background:rgba(255,255,255,.11)}
    .form-note{font-size:.72rem;line-height:1.45;color:#aaa094;margin:2px 0 0}
    .form-result{display:none;padding:9px 11px;border-radius:8px;background:rgba(85,188,133,.14);color:#b9edca;font-size:.77rem}
    .form-result.show{display:block}
    .site-footer{background:#111110;color:#bbb2a7;padding:64px 0 22px}
    .footer-top{display:grid;grid-template-columns:1.65fr .65fr .75fr;gap:70px;padding-bottom:48px}
    .footer-brand{font-family:var(--serif);font-size:1.65rem;line-height:1;color:var(--cream)}
    .footer-brand span{display:block;margin-top:8px;font-family:var(--sans);font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-light)}
    .footer-desc{max-width:520px;font-size:.83rem;color:#aaa196;margin:19px 0}
    .badges{display:flex;flex-wrap:wrap;gap:7px}
    .badge{border:1px solid rgba(197,160,89,.28);color:#d9c9a5;border-radius:999px;padding:5px 9px;font-size:.67rem;font-weight:700}
    .footer-col{display:grid;align-content:start;gap:9px}
    .footer-col h3{font-size:.73rem;color:var(--gold-light);letter-spacing:.1em;text-transform:uppercase;margin:4px 0 8px}
    .footer-col a{font-size:.82rem;color:#bcb3a7;transition:color .2s,transform .2s}
    .footer-col a:hover{color:var(--gold-light);transform:translateX(3px)}
    .footer-bottom{padding-top:21px;border-top:1px solid rgba(255,255,255,.11);display:flex;justify-content:space-between;gap:20px;color:#80786e;font-size:.72rem}
    .fab{
      position:fixed;left:16px;bottom:96px;z-index:50;width:57px;height:57px;border:1px solid transparent;border-radius:18px;
      background:linear-gradient(#151515,#151515) padding-box,linear-gradient(135deg,#00f0ff,#c5a059,#00f0ff) border-box;
      color:#00f0ff;display:grid;place-items:center;box-shadow:0 0 18px rgba(0,240,255,.36);opacity:.74;
      transition:transform .25s,opacity .25s,box-shadow .25s;animation:fabBreathe 2.4s ease-in-out infinite
    }
    .fab svg{width:27px;height:27px;filter:drop-shadow(0 0 5px #00f0ff)}
    .fab:after{content:"";position:absolute;right:7px;top:7px;width:7px;height:7px;border-radius:50%;background:#ff4c65;box-shadow:0 0 8px #ff4c65;animation:pulse 1s infinite}
    .fab:hover{opacity:1;transform:scale(1.1);box-shadow:0 0 29px rgba(0,240,255,.65)}
    .fab:hover svg{animation:flicker .38s linear}
    .fab:active{transform:scale(.94)}
    @keyframes pulse{50%{opacity:.4;transform:scale(.78)}}
    @keyframes fabBreathe{50%{transform:translateY(-5px);opacity:1}}
    @keyframes flicker{25%{opacity:.2}50%{opacity:1}70%{opacity:.35}100%{opacity:1}}
    @media(max-width:1024px){
      .desktop-nav{gap:0}
      .nav-link{padding:9px 8px}
      .hero-grid,.feature-layout{gap:42px}
      .summary-grid,.check-layout,.faq-layout{gap:54px}
      .cta-box{padding:48px}
      .footer-top{gap:42px}
    }
    @media(max-width:768px){
      .container{width:min(100% - 32px,1180px)}
      .nav-wrap{height:70px;gap:8px}
      .brand{flex:1}
      .brand-name{font-size:.93rem}
      .brand-sub{font-size:.52rem}
      .desktop-nav{display:none}
      .menu-toggle{display:block}
      .login-link{display:none}
      .nav-actions .btn{min-height:39px;padding:8px 13px;font-size:.73rem}
      .hero-grid{grid-template-columns:1fr;min-height:auto;padding:65px 0 56px;gap:35px}
      .inner-hero h1{font-size:clamp(2.35rem,10vw,3.5rem)}
      .vip-panel{max-width:570px}
      .dashboard-grid{grid-template-columns:1fr 1fr;gap:0}
      .dash-lead{grid-column:1/-1;border-right:0;border-bottom:1px solid rgba(255,255,255,.12);padding:0 0 22px;margin-bottom:20px}
      .metric{padding:4px 16px 4px 0}
      .metric:nth-child(3){border-right:0;padding-left:16px}
      .metric:last-child{display:none}
      .section{padding:70px 0}
      .summary-grid,.feature-layout,.check-layout,.faq-layout,.cta-box{grid-template-columns:1fr;gap:34px}
      .feature-layout{gap:38px}
      .image-frame{max-width:600px}
      .image-frame img{height:360px}
      .process-head{grid-template-columns:1fr;gap:17px;margin-bottom:30px}
      .process-rail{grid-template-columns:1fr}
      .process-step{border-right:0;border-bottom:1px solid #d8cebd;min-height:0}
      .process-step:last-child{border-bottom:0}
      .faq-aside{position:static}
      .cta-box{padding:38px 28px}
      .footer-top{grid-template-columns:1fr 1fr;gap:34px}
      .footer-top>div:first-child{grid-column:1/-1}
    }
    @media(max-width:520px){
      body{font-size:15px}
      .container{width:min(100% - 28px,1180px)}
      .brand-mark{flex-basis:34px;width:34px;height:34px}
      .brand-name{font-size:.85rem}
      .brand-sub{display:none}
      .nav-actions .signup{padding:8px 10px}
      .menu-toggle{padding:7px 3px}
      .inner-hero h1{letter-spacing:-.045em}
      .hero-actions .btn{width:100%}
      .dashboard{padding:27px 0}
      .metric b{font-size:1.68rem}
      .summary-grid{gap:28px}
      .guidance-item{grid-template-columns:42px 1fr;gap:12px}
      .image-frame img{height:280px}
      .image-caption{left:12px;right:12px;bottom:12px;padding:12px;font-size:.73rem}
      .check-row{padding:16px 14px;grid-template-columns:1fr}
      .status{justify-self:start}
      .faq-trigger{font-size:1.08rem}
      .cta-box{padding:33px 20px;border-radius:14px}
      .footer-top{grid-template-columns:1fr;gap:27px}
      .footer-top>div:first-child{grid-column:auto}
      .footer-bottom{display:grid;gap:8px}
      .fab{width:52px;height:52px;bottom:77px;left:13px}
    }

/* roulang page: category2 */
:root{
      --ink:#121212;
      --charcoal:#1c1c1e;
      --paper:#f6f3ec;
      --paper-deep:#ece5d5;
      --gold:#c5a059;
      --gold-light:#f4d98a;
      --amber:#ffbf00;
      --cream:#fffdf7;
      --muted:#a89f93;
      --line:rgba(197,160,89,.24);
      --green:#55bc85;
      --danger:#e36955;
      --radius:18px;
      --radius-sm:12px;
      --shadow:0 20px 55px rgba(0,0,0,.2);
      --sans:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
      --serif:Georgia,"Times New Roman",serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--paper);color:#28241f;font-family:var(--sans);
      font-size:16px;line-height:1.64;overflow-x:hidden
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;color:var(--gold-light);font-size:.72rem;
      font-weight:800;letter-spacing:.12em;text-transform:uppercase
    }
    .eyebrow:before{content:"";width:22px;height:1px;background:currentColor}
    .section-title{
      font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.35rem);line-height:1.08;
      letter-spacing:-.035em;margin:14px 0;color:inherit;font-weight:700
    }
    .section-intro{max-width:690px;color:#6e665d;margin:0;font-size:1rem}
    .btn{
      display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;
      border-radius:999px;padding:12px 21px;font-size:.88rem;font-weight:800;letter-spacing:.01em;
      transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border .22s ease
    }
    .btn:focus-visible,.nav-link:focus-visible,.form-input:focus-visible,.faq-trigger:focus-visible,.menu-toggle:focus-visible{
      outline:3px solid rgba(255,191,0,.55);outline-offset:3px
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(1px) scale(.985)}
    .btn-gold{background:linear-gradient(135deg,var(--amber),var(--gold-light));color:#22190a;box-shadow:0 10px 25px rgba(197,160,89,.24)}
    .btn-gold:hover{box-shadow:0 14px 30px rgba(197,160,89,.4)}
    .btn-dark{background:#1c1c1e;color:var(--cream);border-color:#34312d}
    .btn-dark:hover{background:#2d2b29;border-color:var(--gold)}
    .btn-outline{color:var(--cream);border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.05)}
    .btn-outline:hover{border-color:var(--gold-light);background:rgba(255,255,255,.12)}
    .site-header{
      position:sticky;top:0;z-index:60;background:rgba(18,18,18,.93);
      backdrop-filter:blur(16px);border-bottom:1px solid rgba(197,160,89,.17)
    }
    .nav-wrap{height:78px;display:flex;align-items:center;gap:26px}
    .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
    .brand-mark{
      flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
      color:#17120a;background:radial-gradient(circle at 35% 30%,#fff0ad,var(--amber) 48%,#9c6f22);
      border:1px solid var(--gold-light);box-shadow:0 0 0 4px rgba(197,160,89,.1)
    }
    .brand-name{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--cream);line-height:1.08}
    .brand-sub{display:block;color:#a99d8a;font-family:var(--sans);font-size:.59rem;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
    .desktop-nav{display:flex;align-items:center;gap:3px}
    .nav-link{
      color:#cdc6bb;padding:10px 12px;border-radius:8px;font-size:.8rem;font-weight:700;white-space:nowrap;
      transition:color .2s,background .2s
    }
    .nav-link:hover,.nav-link.active{color:var(--gold-light);background:rgba(197,160,89,.1)}
    .nav-actions{display:flex;align-items:center;gap:5px}
    .login-link{color:#e5ded2;font-size:.82rem;font-weight:800;padding:10px 11px;border-radius:999px}
    .login-link:hover{color:var(--gold-light);background:rgba(255,255,255,.06)}
    .signup{min-height:42px;padding:10px 16px;font-size:.8rem}
    .menu-toggle{display:none;border:0;background:transparent;color:var(--cream);padding:8px;font-size:1.25rem}
    .mobile-panel{display:none;border-top:1px solid rgba(197,160,89,.15);padding:10px 20px 17px;background:#151515}
    .mobile-panel.open{display:block}
    .mobile-panel .nav-link{display:block;padding:11px 8px}
    .category-hero{
      position:relative;color:var(--cream);isolation:isolate;overflow:hidden;
      background:#151515 url('/assets/images/backpic/back-1.jpg') center/cover no-repeat
    }
    .category-hero:before{
      content:"";position:absolute;inset:0;z-index:-1;background:
      linear-gradient(90deg,rgba(12,12,12,.94) 0%,rgba(20,19,18,.88) 50%,rgba(25,20,14,.62) 100%),
      linear-gradient(0deg,rgba(18,18,18,.93),rgba(18,18,18,.24) 54%,rgba(18,18,18,.82))
    }
    .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:50px;align-items:center;padding:78px 0 70px;min-height:610px}
    .hero-kicker{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
    .pill{
      display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(244,217,138,.35);background:rgba(255,255,255,.07);
      color:#f7e7b3;border-radius:999px;padding:7px 11px;font-size:.72rem;font-weight:800
    }
    .category-hero h1{
      font-family:var(--serif);font-size:clamp(2.35rem,5vw,4.9rem);line-height:1;letter-spacing:-.052em;margin:0 0 20px;max-width:790px
    }
    .category-hero h1 span{color:var(--gold-light)}
    .hero-copy{max-width:720px;color:#ded8cf;font-size:1.04rem;margin:0}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}
    .progress-panel{
      border:1px solid rgba(244,217,138,.28);background:rgba(18,18,18,.72);backdrop-filter:blur(14px);
      border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)
    }
    .progress-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:22px}
    .progress-top h2{font-family:var(--serif);font-size:1.45rem;line-height:1.12;margin:0;color:#fff7df}
    .progress-top p{margin:7px 0 0;color:#c7beb2;font-size:.84rem}
    .ring-wrap{display:grid;grid-template-columns:142px 1fr;gap:20px;align-items:center}
    .progress-ring{
      width:142px;height:142px;border-radius:50%;display:grid;place-items:center;position:relative;
      background:conic-gradient(var(--amber) 0 72%,rgba(255,255,255,.12) 72% 100%);
      box-shadow:0 0 28px rgba(255,191,0,.16)
    }
    .progress-ring:after{content:"";position:absolute;inset:12px;border-radius:50%;background:#171717;border:1px solid rgba(255,255,255,.08)}
    .ring-value{position:relative;z-index:1;text-align:center}
    .ring-value strong{display:block;font-family:var(--serif);font-size:2rem;color:var(--gold-light);line-height:1}
    .ring-value small{font-size:.68rem;color:#cfc6bb;font-weight:800}
    .tier-list{display:grid;gap:10px}
    .tier{
      display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid rgba(255,255,255,.12);
      padding-bottom:9px;color:#e9e0d2;font-size:.82rem
    }
    .tier b{color:#fff5d1}
    .tier span{color:var(--gold-light);font-weight:900}
    .mini-note{margin:17px 0 0;color:#bdb2a3;font-size:.78rem}
    .stats-section{background:#181817;color:var(--cream);padding:38px 0}
    .stats-grid{display:grid;grid-template-columns:1.25fr repeat(4,.72fr);gap:18px;align-items:stretch}
    .stats-lead{padding-right:20px}
    .stats-lead h2{font-family:var(--serif);font-size:1.8rem;line-height:1.1;margin:0 0 9px;color:#fff3cb}
    .stats-lead p{color:#b7aea2;margin:0;font-size:.88rem}
    .stat-box{
      border-left:1px solid rgba(197,160,89,.35);padding:4px 0 4px 18px;min-height:94px;
      display:flex;flex-direction:column;justify-content:center
    }
    .stat-box strong{font-family:var(--serif);font-size:2rem;line-height:1;color:var(--gold-light)}
    .stat-box span{font-size:.76rem;color:#c7beb1;margin-top:8px}
    main{background:var(--paper)}
    .section{padding:86px 0}
    .section.dark{background:#121212;color:var(--cream)}
    .section.deep{background:var(--paper-deep)}
    .split-head{display:grid;grid-template-columns:.75fr 1fr;gap:48px;align-items:end;margin-bottom:34px}
    .split-head .section-intro{max-width:760px}
    .matrix-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}
    .matrix-card{
      border:1px solid #d8cdbb;background:#fffdf8;border-radius:var(--radius);overflow:hidden;
      transition:transform .24s ease,border .24s ease,box-shadow .24s ease
    }
    .matrix-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 18px 34px rgba(75,56,26,.12)}
    .matrix-image{height:260px;position:relative;overflow:hidden}
    .matrix-image img{width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.02)}
    .matrix-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,18,18,.7),transparent 58%)}
    .matrix-body{padding:24px}
    .matrix-body h3{font-family:var(--serif);font-size:1.7rem;line-height:1.12;margin:0 0 10px;color:#2d261d}
    .matrix-body p{margin:0;color:#6e655a;font-size:.93rem}
    .check-list{display:grid;gap:12px;margin-top:20px}
    .check-item{display:flex;gap:11px;align-items:flex-start;color:#3a342c;font-size:.9rem}
    .check-icon{
      flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
      background:#201b13;color:var(--gold-light);font-size:.75rem;font-weight:900
    }
    .service-stack{display:grid;gap:14px}
    .service-row{
      display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:start;padding:18px;border:1px solid #dacdb8;
      background:rgba(255,253,248,.72);border-radius:var(--radius-sm);transition:background .22s ease,transform .22s ease
    }
    .service-row:hover{background:#fffdf8;transform:translateX(4px)}
    .service-icon{
      width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:#1f1709;
      background:linear-gradient(135deg,var(--amber),var(--gold-light));box-shadow:0 10px 22px rgba(197,160,89,.2)
    }
    .service-row h3{margin:0 0 5px;font-size:1rem;font-weight:900;color:#2f281e}
    .service-row p{margin:0;color:#6f665b;font-size:.88rem}
    .compare-wrap{
      display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center
    }
    .compare-card{
      border:1px solid rgba(244,217,138,.22);background:#1c1c1e;border-radius:var(--radius);padding:24px;
      box-shadow:0 20px 45px rgba(0,0,0,.18)
    }
    .compare-row{
      display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:16px 0;
      border-bottom:1px solid rgba(255,255,255,.11)
    }
    .compare-row:last-child{border-bottom:0}
    .compare-row b{color:#fff5d1}
    .compare-row span{color:#bfb5a6;font-size:.86rem}
    .meter{width:150px;height:10px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
    .meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--amber))}
    .compare-photo{
      border-radius:var(--radius);overflow:hidden;border:1px solid rgba(244,217,138,.24);position:relative;min-height:430px
    }
    .compare-photo img{width:100%;height:100%;min-height:430px;object-fit:cover}
    .compare-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62),transparent 56%)}
    .photo-caption{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff3d5}
    .photo-caption h3{font-family:var(--serif);font-size:1.65rem;line-height:1.1;margin:0 0 8px}
    .photo-caption p{margin:0;color:#ddd2c1;font-size:.9rem}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d8cdbb;border:1px solid #d8cdbb;border-radius:var(--radius);overflow:hidden}
    .step{background:#fffdf8;padding:24px;min-height:220px}
    .step small{font-family:var(--serif);font-size:2rem;color:var(--gold);line-height:1}
    .step h3{font-size:1.02rem;font-weight:900;line-height:1.25;margin:18px 0 9px;color:#2c261e}
    .step p{margin:0;color:#746b60;font-size:.88rem}
    .proof-band{padding:60px 0;background:#211f1d;color:var(--cream)}
    .proof-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
    .proof-card{border-top:1px solid rgba(244,217,138,.32);padding-top:20px}
    .proof-card b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--gold-light);margin-bottom:8px}
    .proof-card p{margin:0;color:#c8beb0;font-size:.9rem}
    .faq-layout{display:grid;grid-template-columns:.72fr 1fr;gap:48px;align-items:start}
    .faq-list{display:grid;gap:12px}
    .faq-item{background:#fffdf8;border:1px solid #dbd0bf;border-radius:var(--radius-sm);overflow:hidden}
    .faq-trigger{
      width:100%;border:0;background:transparent;text-align:left;padding:18px 20px;display:flex;justify-content:space-between;gap:18px;
      align-items:center;color:#2a241d;font-weight:900
    }
    .faq-trigger span:last-child{color:var(--gold);font-size:1.35rem;line-height:1}
    .faq-panel{display:none;padding:0 20px 19px;color:#6f665b;font-size:.91rem}
    .faq-item.open .faq-panel{display:block}
    .faq-item.open .faq-trigger span:last-child{transform:rotate(45deg)}
    .cta-section{padding:84px 0;background:#151515;color:var(--cream)}
    .cta-grid{
      display:grid;grid-template-columns:.95fr 1.05fr;gap:42px;align-items:center;border:1px solid rgba(244,217,138,.22);
      border-radius:var(--radius);padding:34px;background:
      linear-gradient(135deg,rgba(197,160,89,.12),rgba(255,255,255,.03)),
      #1c1c1e;box-shadow:var(--shadow)
    }
    .cta-grid h2{font-family:var(--serif);font-size:clamp(2rem,3vw,3.2rem);line-height:1.08;margin:12px 0;color:#fff4d4}
    .cta-grid p{color:#cfc4b5;margin:0;max-width:580px}
    .form-box{display:grid;gap:13px}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
    .form-input{
      width:100%;min-height:50px;border:1px solid rgba(244,217,138,.22);background:rgba(0,0,0,.22);color:#fffdf7;
      border-radius:12px;padding:13px 14px;outline:none
    }
    .form-input::placeholder{color:#9e9280}
    textarea.form-input{min-height:110px;resize:vertical}
    .form-note{color:#a79c8b;font-size:.78rem;margin:0}
    .site-footer{background:#0f0f10;color:#d8d0c2;padding:56px 0 28px;border-top:1px solid rgba(197,160,89,.24)}
    .footer-top{display:grid;grid-template-columns:1.2fr .55fr .55fr;gap:42px}
    .footer-brand{font-family:var(--serif);font-size:1.4rem;color:var(--cream);font-weight:700;line-height:1.12}
    .footer-brand span{display:block;font-family:var(--sans);font-size:.75rem;color:var(--gold-light);margin-top:5px;letter-spacing:.08em;text-transform:uppercase}
    .footer-desc{max-width:520px;color:#aaa094;font-size:.88rem;margin:18px 0}
    .badges{display:flex;gap:9px;flex-wrap:wrap}
    .badge{
      display:inline-flex;align-items:center;border:1px solid rgba(244,217,138,.26);color:#eadfbf;background:rgba(197,160,89,.08);
      border-radius:999px;padding:7px 10px;font-size:.72rem;font-weight:800
    }
    .footer-col h3{font-size:.86rem;color:#fff2cf;margin:0 0 13px;font-weight:900}
    .footer-col a{display:block;color:#aaa094;font-size:.86rem;margin:8px 0;transition:color .2s}
    .footer-col a:hover{color:var(--gold-light)}
    .footer-bottom{display:flex;justify-content:space-between;gap:18px;border-top:1px solid rgba(255,255,255,.1);margin-top:38px;padding-top:20px;color:#8f8578;font-size:.78rem}
    .fab{
      position:fixed;left:1rem;bottom:6rem;z-index:50;min-width:58px;height:58px;border-radius:18px;padding:0 14px;
      display:flex;align-items:center;gap:8px;color:#fff;background:rgba(0,0,0,.62);backdrop-filter:blur(12px);
      border:1px solid transparent;background-image:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.62)),linear-gradient(135deg,#c5a059,#00f0ff);
      background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 0 18px rgba(197,160,89,.36);
      opacity:.72;transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease
    }
    .fab:hover{opacity:1;transform:scale(1.08);box-shadow:0 0 28px rgba(244,217,138,.45)}
    .fab:active{transform:scale(.96)}
    .fab span{font-size:.72rem;font-weight:900;color:var(--gold-light)}
    .fab:after{content:"";position:absolute;right:8px;top:8px;width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 10px rgba(255,59,48,.8);animation:blink 1s infinite}
    @keyframes blink{50%{opacity:.25}}
    @media (max-width:1024px){
      .desktop-nav{display:none}
      .menu-toggle{display:block}
      .nav-wrap{gap:12px}
      .hero-inner,.matrix-grid,.compare-wrap,.faq-layout,.cta-grid{grid-template-columns:1fr}
      .progress-panel{max-width:620px}
      .stats-grid{grid-template-columns:1fr 1fr}
      .stats-lead{grid-column:1/-1}
      .steps{grid-template-columns:1fr 1fr}
      .footer-top{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .container{width:min(100% - 28px,1180px)}
      .nav-wrap{height:70px}
      .brand-name{font-size:.92rem}
      .brand-sub{display:none}
      .login-link{padding:8px 7px;font-size:.76rem}
      .signup{min-height:38px;padding:8px 12px}
      .category-hero h1{font-size:clamp(2.15rem,12vw,3.6rem)}
      .hero-inner{padding:54px 0;gap:30px}
      .ring-wrap{grid-template-columns:1fr;text-align:left}
      .stats-grid,.proof-grid,.footer-top,.form-row{grid-template-columns:1fr}
      .split-head{grid-template-columns:1fr;gap:14px}
      .section{padding:64px 0}
      .matrix-image{height:220px}
      .compare-photo,.compare-photo img{min-height:340px}
      .footer-bottom{flex-direction:column}
    }
    @media (max-width:520px){
      .nav-actions{gap:2px}
      .btn{width:100%}
      .nav-actions .btn{width:auto}
      .hero-actions{width:100%}
      .progress-panel{padding:18px}
      .steps{grid-template-columns:1fr}
      .cta-grid{padding:22px}
      .fab{left:1rem;bottom:6rem;min-width:52px;height:52px}
      .fab span{display:none}
    }