/* brand tokens -> /css/brand-tokens.css (nguồn duy nhất) */
    /* ─── Typography scale tokens (2026-05-21 audit fix) ─── */
    /* Fluid sizes via clamp() = auto-responsive desktop ↔ mobile, no media queries needed */
    :root{
        --fs-display:clamp(36px,5.5vw,56px);   /* hero only */
        --fs-h1:clamp(28px,4vw,42px);          /* page title */
        --fs-h2:clamp(22px,3vw,32px);          /* section heading */
        --fs-h3:clamp(18px,2.2vw,22px);        /* sub heading */
        --fs-body-lg:16px;                     /* main reading content (paragraphs) */
        --fs-body:15px;                        /* default body */
        --fs-body-sm:14px;                     /* secondary text / forms */
        --fs-caption:13px;                     /* meta, captions */
        --fs-micro:12px;                       /* labels, badges (floor — never < 12px for content) */
        --fw-regular:400;                      /* paragraphs */
        --fw-medium:500;                       /* body emphasis */
        --fw-semibold:600;                     /* buttons, UI chrome */
        --fw-bold:700;                         /* text emphasis */
        --fw-extra:800;                        /* display secondary */
        --fw-black:900;                        /* display primary, prices */
        --lh-tight:1.1;                        /* display headings */
        --lh-snug:1.3;                         /* H2/H3 */
        --lh-normal:1.55;                      /* body text */
        --lh-loose:1.7;                        /* long-form paragraphs */
    }
    *{margin:0;padding:0;box-sizing:border-box}
    body{font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;color:var(--tx);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-normal);display:flex;flex-direction:column;min-height:100vh;background:var(--g1);overflow-x:hidden}
    main{flex:1}
    a{text-decoration:none;color:inherit}
    .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:9px;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);cursor:pointer;border:none;font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;transition:all .2s;white-space:nowrap;letter-spacing:.01em}
    .p{background:var(--or);color:#fff}.p:hover{background:var(--or2);transform:translateY(-1px)}
    .tl{background:var(--t);color:#fff}.tl:hover{background:var(--t2)}
    .ol{background:transparent;border:2px solid var(--t);color:var(--t)}.ol:hover{background:var(--t);color:#fff}
    .ow{background:transparent;border:2px solid rgba(255,255,255,.6);color:#fff}.ow:hover{border-color:#fff}
    .sm{padding:6px 12px;font-size:var(--fs-micro)}
    .card{background:var(--w);border-radius:14px;border:1px solid var(--g2);box-shadow:0 1px 6px rgba(0,0,0,.06)}
    .bd{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;font-size:var(--fs-micro);font-weight:var(--fw-semibold)}
    .bt{background:var(--t4);color:var(--t)}.bo{background:#fff0e8;color:var(--or-text)}.bgn{background:var(--gl);color:var(--gn)}.bpu{background:var(--pll);color:#8a5a00}.bgy{background:var(--g2);color:var(--gt)}.bdk{background:var(--dk);color:#fff}
    .inp{border:1.5px solid var(--g2);border-radius:9px;padding:11px 14px;font-size:var(--fs-body-sm);font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;outline:none;width:100%;color:var(--tx);background:var(--w);transition:border-color .2s}.inp:focus{border-color:var(--t3)}
    .inp::placeholder{color:#aaa}
    .lbl{font-size:11px;font-weight:var(--fw-extra);color:var(--t);text-transform:uppercase;letter-spacing:.6px;display:block;margin-bottom:5px}
    .stl{font-family:'Spline Sans Mono','Spline Sans Mono Fallback',sans-serif;font-size:var(--fs-h2);font-weight:var(--fw-black);line-height:var(--lh-snug);color:var(--t);letter-spacing:-.01em}.stl span{color:var(--or-text)}
    .sub{font-size:var(--fs-caption);color:var(--gt);margin-top:3px;line-height:var(--lh-normal)}

    /* Navigation */
    nav{background:var(--t);position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(1,89,89,.35)}
    .ni{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:62px}
    .logo{display:flex;align-items:center;gap:9px}
    .lm{width:38px;height:38px;background:var(--w);border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;color:var(--t)}
    .lt{color:#fff;font-weight:800;font-size:18px}
    .ls{color:var(--gd);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;display:block;line-height:1}
    .nl{display:flex;align-items:center;gap:3px}
    .nl a{color:rgba(255,255,255,.8);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);padding:7px 11px;border-radius:8px;transition:all .2s}.nl a:hover,.nl a.ac{background:rgba(255,255,255,.12);color:#fff;font-weight:var(--fw-semibold)}
    .mob-btn{display:none;background:transparent;border:none;cursor:pointer;padding:4px}
    .mob-menu{display:none;position:absolute;top:62px;left:0;right:0;background:var(--w);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:99}
    .mob-menu a{display:block;padding:13px 20px;border-bottom:1px solid var(--g2);color:var(--tx);font-size:var(--fs-body);font-weight:var(--fw-medium)}

    /* Footer */
    footer{background:#111;padding:40px 24px 20px;margin-top:auto}
    .fi{max-width:1200px;margin:0 auto}
    .fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
    .fd2{font-size:var(--fs-caption);color:rgba(255,255,255,.6);line-height:var(--lh-loose);margin:10px 0}
    .fco{font-size:var(--fs-caption);color:rgba(255,255,255,.7);margin:4px 0;font-weight:var(--fw-medium)}.fco strong{color:var(--gd);font-weight:var(--fw-bold)}
    .fc h4{color:#fff;font-size:var(--fs-body-sm);font-weight:var(--fw-extra);margin-bottom:11px;letter-spacing:.02em}
    .fc a{display:block;color:rgba(255,255,255,.55);font-size:var(--fs-caption);margin-bottom:7px;transition:color .2s;font-weight:var(--fw-medium)}.fc a:hover{color:var(--t3);font-weight:var(--fw-semibold)}
    .fb{border-top:1px solid rgba(255,255,255,.08);padding-top:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
    .fcp{font-size:var(--fs-micro);color:rgba(255,255,255,.5)}
    .cert{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:4px 10px;font-size:10px;color:rgba(255,255,255,.5);display:inline-block;margin-left:6px}

    /* Hero */
    .hero-section{background:linear-gradient(135deg,var(--t3) 0%,var(--t2) 50%,var(--t) 100%);padding:60px 24px 40px;position:relative;overflow:visible;text-align:center;z-index:20}
    .hero-bg-deco{position:absolute;top:-100px;right:-150px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(41,179,182,.12),transparent 70%);pointer-events:none;overflow:hidden;clip:rect(0,auto,auto,0)}
    .hero-content{max-width:750px;margin:0 auto;position:relative;z-index:2}
    .hero-badge{background:rgba(41,179,182,.25);color:#fff;font-size:11px;font-weight:700;padding:6px 14px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;margin-bottom:16px}
    .hero-h{font-family:'Spline Sans Mono','Spline Sans Mono Fallback',sans-serif;font-size:var(--fs-display);font-weight:var(--fw-black);line-height:var(--lh-tight);color:#fff;margin-bottom:12px;letter-spacing:-.025em}
    .hero-h span{color:var(--gd)}
    .hero-sub{color:rgba(255,255,255,.88);font-size:var(--fs-body-lg);line-height:var(--lh-normal);margin-bottom:32px;font-weight:var(--fw-regular)}

    /* Search tabs */
    .search-container{background:var(--w);border-radius:18px 18px 0 0;max-width:920px;margin:0 auto;position:relative;z-index:10;box-shadow:0 -8px 32px rgba(0,0,0,.12);overflow:visible}
    .tab-nav{display:flex;border-bottom:2px solid var(--g2);padding:0 18px;overflow-x:auto;overflow-y:hidden;border-radius:18px 18px 0 0;background:var(--w);scrollbar-width:none;-ms-overflow-style:none}
    .tab-nav::-webkit-scrollbar{display:none}
    .tab-btn{padding:14px 16px;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);background:transparent;border:none;border-bottom:3px solid transparent;color:var(--gt);cursor:pointer;font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;white-space:nowrap;transition:all .2s;margin-bottom:-2px}
    .tab-btn.active{border-bottom-color:var(--t);color:var(--t)}
    .tab-content{padding:20px 18px 24px;display:none;animation:fadeIn .3s ease-in;position:relative;overflow:visible}
    .tab-content.active{display:block}
    @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

    .search-form{display:grid;gap:12px;align-items:end}
    .search-form-1{grid-template-columns:1fr auto}
    .search-form-2{grid-template-columns:1fr 42px 1fr 160px auto}
    .search-form-3{grid-template-columns:1fr 150px 100px auto}
    .search-form-4{grid-template-columns:1fr auto}

    .form-group{display:flex;flex-direction:column;position:relative;z-index:1}
    .swap-btn{background:transparent;border:1.5px solid var(--g2);border-radius:9px;height:42px;width:42px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .2s;align-self:flex-end}
    .swap-btn:hover{border-color:var(--t3);color:var(--t)}
    .search-btn{background:var(--or);color:#fff;border:none;border-radius:9px;padding:11px 24px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;height:42px;align-self:flex-end;transition:all .2s;white-space:nowrap}
    .search-btn:hover{background:var(--or2);transform:translateY(-1px)}
    .country-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .chip{background:var(--g1);border:1.5px solid var(--g2);border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
    .chip:hover{border-color:var(--t3);background:var(--t4)}

    /* Destination autocomplete */
    .form-group{position:relative}
    .autocomplete-list{position:absolute;background:var(--w);border:2px solid var(--t3);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.35),0 0 0 1px rgba(255,107,53,.15);z-index:99999;max-height:320px;overflow-y:auto;width:calc(100% + 20px);top:calc(100% + 6px);left:-10px;animation:acDropIn .2s ease}
    @keyframes acDropIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
    .autocomplete-item{padding:10px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--g2);color:var(--dk);font-weight:500;display:flex;align-items:center;gap:8px}
    .autocomplete-item:last-child{border-bottom:none}
    .autocomplete-item:hover{background:var(--t4);color:var(--t)}

    /* Quick tags */
    .quick-tags{background:var(--cr);padding:12px 24px;border-bottom:1px solid var(--g2);position:relative;z-index:1}
    .quick-tags-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .quick-tags-label{font-size:11px;font-weight:700;color:var(--gt)}
    .quick-tag{background:var(--w);border:1.5px solid var(--g2);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:700;color:var(--t);transition:all .2s;text-decoration:none;display:inline-block;cursor:pointer}
    .quick-tag:hover{border-color:var(--t3);background:var(--t4)}

    /* Stats */
    .stats-bar{background:var(--w);padding:20px 24px;border-bottom:1px solid var(--g2);box-shadow:0 2px 12px rgba(0,0,0,.04)}
    .stats-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
    .stat-item{text-align:center;padding:8px 0}
    .stat-value{font-family:'Spline Sans Mono','Spline Sans Mono Fallback',sans-serif;font-size:28px;font-weight:900;color:var(--t)}
    .stat-label{font-size:10px;font-weight:700;color:var(--gt);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}

    /* Sections */
    .section{padding:48px 24px}
    .section-alt{background:var(--cr)}
    .section-inner{max-width:1200px;margin:0 auto}
    .section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}

    /* Bus tabs — chia Popular routes vận chuyển thành 2 nhóm: "Giá tốt nhất" + "Nhiều chuyến nhất" */
    .bus-tabs{display:flex;gap:8px;margin-bottom:18px;justify-content:center;flex-wrap:wrap}
    .bus-tab{background:var(--w);border:1.5px solid var(--g2);padding:9px 18px;border-radius:22px;font-weight:800;cursor:pointer;color:var(--gt);font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;font-size:13px;transition:all .2s}
    .bus-tab:hover{border-color:var(--t3);color:var(--t)}
    .bus-tab.active{background:var(--t);color:var(--w);border-color:var(--t);box-shadow:0 6px 18px -6px rgba(8,80,72,.45)}
    .bus-panel{display:none}
    .bus-panel.active{display:block;animation:fadeIn .25s ease-in}
    /* Force 2-col mobile cho Popular routes (anh request 2026-05-27 — compact) */
    @media(max-width:768px){
      .bus-panel .featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
      .bus-panel .product-card .product-name{font-size:13px}
      .bus-panel .product-card .price-value{font-size:15px}
    }
    /* Mobile card: cashback chip full width row riêng dưới price+rating (anh 2026-05-27) */
    @media(max-width:768px){
      .hp-cb{width:100%;max-width:100%;box-sizing:border-box;justify-content:center;white-space:normal;font-size:10px;padding:3px 8px;margin-top:6px}
    }

    /* Khối đánh giá khách trên trang chủ — 3 cột thay vì 4 như lưới sản phẩm. Thẻ đánh giá chứa
       ĐOẠN VĂN, không phải ảnh + giá; cột 280px làm chữ chạy lêu nghêu và khó đọc. 3 cột trong
       khung 1200px ra thẻ ~389px, đọc thoải mái và 6 đánh giá lấp đủ 2 hàng không hụt ô. */
    .hp-rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
    @media(max-width:900px){ .hp-rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
    @media(max-width:600px){ .hp-rv-grid{grid-template-columns:1fr} }
    /* Cắt còn 5 dòng để một lời khen dài không kéo cả hàng cao lên. Cắt bằng CSS nên dữ liệu gốc
       nguyên vẹn, và khách bấm sang trang sản phẩm vẫn đọc được trọn vẹn. */
    .hp-rv-text{display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

    /* Featured grid — minmax(0,1fr) để badge dài (vd "TP. Hồ Chí Minh — Tây Ninh, Việt Nam")
       hoặc tên SP uppercase không đẩy column wider hơn 1/n viewport → tránh crop card bên phải */
    .featured-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
    .product-card{display:block;text-decoration:none;color:inherit;min-width:0}
    .featured-grid .bd{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
    .product-card .card{overflow:hidden;cursor:pointer;transition:all .25s;height:100%}
    .product-card .card:hover{transform:translateY(-4px)}
    /* Dấu * cuối chip cashback: mức 2% là hạng Diamond, hover xem chú thích đầy đủ
       (chuỗi card.cashback_note, 5 ngôn ngữ). Không dùng cho hạng khác. */
    .cb-star{font-size:.85em;margin-left:1px;opacity:.75;cursor:help}
    .hp-cb{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:#8a5a00;margin-top:5px;background:var(--sand,#fdf0c5);border:1px solid var(--gd,#fbc117);padding:2px 8px;border-radius:999px;width:fit-content;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .product-image{height:165px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--t3),var(--t));display:flex;align-items:center;justify-content:center;font-size:48px}
    .product-image.cat-transport{background:linear-gradient(135deg,#29b3b6,#015959)}
    .product-image.cat-esim{background:linear-gradient(135deg,#fbc117,#f95d00)}
    .product-image.cat-dmc{background:linear-gradient(135deg,#f95d00,#dc5200)}
    .product-info{padding:12px 14px 14px}
    .product-meta{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
    .product-name{font-size:14px;font-weight:700;color:var(--dk);margin-bottom:7px;line-height:1.4}
    .product-rating{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:11px}
    .product-price{display:flex;align-items:baseline;gap:6px}
    .price-label{font-size:10px;color:var(--gt)}
    .price-value{font-size:18px;font-weight:900;color:var(--or)}

    /* Why Us */
    .why-us{background:linear-gradient(135deg,var(--t) 0%,#064e3b 100%);color:#fff;text-align:center}
    .why-us h2{font-family:'Spline Sans Mono','Spline Sans Mono Fallback',sans-serif;font-size:28px;font-weight:900;margin-bottom:32px}
    .why-us-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .why-us-card{text-align:center;background:rgba(255,255,255,.06);border-radius:16px;padding:24px 16px;border:1px solid rgba(255,255,255,.08);transition:all .3s}
    .why-us-card:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
    .why-us-icon{width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.12);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:24px}
    .why-us-title{font-size:15px;font-weight:800;color:#fff;margin-bottom:6px}
    .why-us-desc{font-size:12px;color:rgba(255,255,255,.6)}

    /* CTA */
    .cta-section{background:linear-gradient(135deg,var(--t2) 0%,var(--t3) 50%,var(--or) 100%);padding:52px 24px;text-align:center;position:relative;overflow:hidden}
    .cta-h{font-family:'Spline Sans Mono','Spline Sans Mono Fallback',sans-serif;font-size:30px;font-weight:900;color:#fff;margin-bottom:16px;position:relative;z-index:1}
    .cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

    /* Recruitment */
    .recruitment{background:var(--g1);border-top:3px solid var(--t);padding:22px 24px}
    .recruitment-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
    .recruitment-content h3{font-size:15px;font-weight:800;color:var(--dk);margin-bottom:4px}
    .recruitment-content p{font-size:13px;color:var(--gt)}
    .recruitment-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

    /* Responsive */
    @media(max-width:900px){
      .nl{display:none!important}.mob-btn{display:flex!important}.ni{padding:0 16px}
      .search-form-2,.search-form-3{grid-template-columns:1fr}.swap-btn{align-self:flex-start}
      .featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.why-us-grid{grid-template-columns:repeat(2,1fr)}
      .stats-inner{grid-template-columns:repeat(2,1fr)}
      .recruitment-inner{flex-direction:column;text-align:center}.recruitment-badges{justify-content:center}
    }
    @media(max-width:768px){
      .hero-h{font-size:36px}
      html[data-nav-active="home"] .search-form-1,
      html[data-nav-active="home"] .search-form-2,
      html[data-nav-active="home"] .search-form-3,
      html[data-nav-active="home"] .search-form-4{grid-template-columns:1fr!important}
      html[data-nav-active="home"] .search-form-2 .form-group,
      html[data-nav-active="home"] .search-form-2 .inp,
      html[data-nav-active="home"] .search-form-2 .hp-date{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
      html[data-nav-active="home"] .search-form-2 .swap-btn{width:100%;align-self:stretch;margin:0}
      html[data-nav-active="home"] .search-form-2 .autocomplete-list{width:100%;left:0;max-width:calc(100vw - 32px)}
      .search-btn{width:100%}
      .stats-inner{grid-template-columns:repeat(2,1fr)}
      .section{padding:36px 16px}
    }
    @media(max-width:600px){
      .featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
      /* Mobile ≤600px: rút nhỏ font badge để 2 col fit gọn dù destination dài */
      .featured-grid .bd{font-size:10px!important;padding:3px 7px!important}
      .hp-cb{font-size:9.5px;padding:2px 6px}
      /* Card 2-col mobile: scale VND xuống để FX (≈ NT$/$/₩…) luôn cùng dòng, không bị wrap */
      .hp-price{font-size:15px!important;gap:4px!important}
      .hp-price-fx{font-size:10px!important}
      .why-us-grid{grid-template-columns:repeat(2,1fr);gap:12px}
      .product-info{padding:10px 11px 12px}
      .product-name{font-size:12.5px;line-height:1.35}
      .price-value{font-size:15px}
      .product-image{height:130px;font-size:38px}
      .why-us-card{padding:18px 10px}
      .why-us-icon{width:44px;height:44px;font-size:20px;margin-bottom:8px}
      .why-us-title{font-size:13px}
      .why-us-desc{font-size:11px}
    }
    @media(max-width:480px){
      .hero-h{font-size:28px}.hero-sub{font-size:14px}
      .search-container .tab-nav{gap:3px;padding:6px}
      .search-container .tab-btn{flex-direction:column!important;padding:8px 3px!important;font-size:10.5px!important;gap:3px!important;line-height:1.1!important;min-width:0!important;border-radius:9px!important}
      .search-container .tab-btn span{font-size:10.5px!important;text-align:center!important;white-space:normal!important;display:block!important;font-weight:700!important}
      .tab-content{padding:16px 12px}.search-container{border-radius:12px 12px 0 0}
    }


/* ========== separator ========== */


html[data-nav-active="home"] .hero-section{background:linear-gradient(135deg,var(--t3) 0%,var(--t2) 25%,var(--t) 50%,var(--t2) 75%,var(--t3) 100%);background-size:400% 400%;animation:hpV2-gradient 12s ease-in-out infinite;position:relative}
@keyframes hpV2-gradient{0%{background-position:0% 50%}25%{background-position:100% 50%}50%{background-position:100% 100%}75%{background-position:0% 100%}100%{background-position:0% 50%}}
html[data-nav-active="home"] .hero-section{position:relative}
html[data-nav-active="home"] .hpV2-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1;will-change:transform}
html[data-nav-active="home"] .hpV2-glow.g1{top:-100px;right:5%;width:480px;height:480px;background:var(--gd);opacity:.6;animation:hpV2-drift1 10s ease-in-out infinite}
html[data-nav-active="home"] .hpV2-glow.g2{bottom:-140px;left:3%;width:560px;height:560px;background:var(--or);opacity:.55;animation:hpV2-drift2 13s ease-in-out infinite}
html[data-nav-active="home"] .hpV2-glow.g3{top:20%;left:38%;width:300px;height:300px;background:var(--t3);opacity:.4;animation:hpV2-drift3 11s ease-in-out infinite}
@keyframes hpV2-drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,80px) scale(1.25)}}
@keyframes hpV2-drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,-70px) scale(.85)}}
@keyframes hpV2-drift3{0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}33%{transform:translate(60px,-50px) scale(1.18) rotate(120deg)}66%{transform:translate(-40px,40px) scale(.9) rotate(240deg)}}
html[data-nav-active="home"] .hpV2-imgoverlay{position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=2400&q=85');background-size:cover;background-position:center;opacity:.22;mix-blend-mode:overlay;pointer-events:none;z-index:0}
html[data-nav-active="home"] .hero-content{position:relative;z-index:5}
html[data-nav-active="home"] .hero-badge .hpV2-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gd);box-shadow:0 0 0 0 var(--gd);animation:hpV2-pulseDot 2s ease infinite;margin-right:6px;vertical-align:middle}
@keyframes hpV2-pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(251,193,23,.7)}50%{box-shadow:0 0 0 9px rgba(251,193,23,0)}}
html[data-nav-active="home"] .search-container{position:relative;z-index:10;box-shadow:0 24px 60px -20px rgba(0,0,0,.35),0 4px 18px rgba(0,0,0,.08)}
html[data-nav-active="home"] .search-container::before{content:"";position:absolute;top:-14px;right:32px;width:64px;height:64px;background:var(--gd);border-radius:50%;filter:blur(2px);opacity:.65;z-index:-1}
html[data-nav-active="home"] .product-card .card{transition:all .35s cubic-bezier(.2,.7,.2,1)}
html[data-nav-active="home"] .product-card:hover .card{transform:translateY(-8px);box-shadow:0 20px 40px -12px rgba(13,28,26,.18),0 4px 12px rgba(0,0,0,.06)}
html[data-nav-active="home"] .product-card .product-image{overflow:hidden}
html[data-nav-active="home"] .product-card .product-image img{transition:transform .8s cubic-bezier(.2,.6,.2,1)}
html[data-nav-active="home"] .product-card:hover .product-image img{transform:scale(1.08)}
html[data-nav-active="home"] .why-us-card{position:relative;overflow:hidden}
html[data-nav-active="home"] .why-us-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gd);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
html[data-nav-active="home"] .why-us-card:hover::before{transform:scaleX(1)}
html[data-nav-active="home"] .why-us-icon{transition:all .4s ease}
html[data-nav-active="home"] .why-us-card:hover .why-us-icon{transform:rotate(-8deg) scale(1.08);background:rgba(251,193,23,.22)}
html[data-nav-active="home"] .stat-value{transition:color .3s}
html[data-nav-active="home"] #hpV2-toast{position:fixed;bottom:22px;left:22px;background:#fff;border-radius:14px;padding:11px 16px 11px 11px;display:flex;align-items:center;gap:11px;box-shadow:0 14px 36px rgba(0,0,0,.16);font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;font-size:13px;max-width:340px;z-index:35;border:1px solid var(--g2);transform:translateX(-130%);transition:transform .55s cubic-bezier(.2,.7,.2,1.05);opacity:.97;color:var(--dk)}
html[data-nav-active="home"] #hpV2-toast.show{transform:translateX(0)}
html[data-nav-active="home"] #hpV2-toast .av{width:36px;height:36px;border-radius:50%;background:var(--or);color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px;flex-shrink:0}
html[data-nav-active="home"] #hpV2-toast .tx{font-size:12.5px;line-height:1.45;color:var(--dk)}
html[data-nav-active="home"] #hpV2-toast .tx b{font-weight:800}
html[data-nav-active="home"] #hpV2-toast .tx small{display:block;font-size:10.5px;color:var(--gt);margin-top:2px;font-style:italic}
html[data-nav-active="home"] #hpV2-fab{position:fixed;bottom:22px;right:22px;width:58px;height:58px;background:var(--or);color:#fff;border:none;border-radius:50%;font-size:24px;cursor:pointer;box-shadow:0 14px 30px rgba(234,96,36,.4);z-index:40;display:grid;place-items:center;transition:all .25s;font-family:inherit}
html[data-nav-active="home"] #hpV2-fab:hover{transform:scale(1.08) rotate(8deg)}
html[data-nav-active="home"] #hpV2-fab::before{content:"";position:absolute;inset:-4px;border:2px solid var(--or);border-radius:50%;animation:hpV2-fab 2s ease-out infinite;opacity:0;pointer-events:none}
@keyframes hpV2-fab{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.45);opacity:0}}
.hpV2-reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease,transform .9s ease}
.hpV2-reveal.in{opacity:1;transform:translateY(0)}
html[data-nav-active="home"] .quick-tags.hpV2-chips{background:transparent;padding:14px 24px;border-bottom:none}html[data-nav-active="home"] .quick-tags.hpV2-chips .quick-tags-inner{max-width:1200px;margin:0 auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}html[data-nav-active="home"] .quick-tags.hpV2-chips .quick-tag{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid rgba(251,193,23,.4);border-radius:30px;color:var(--t);font-size:13px;font-weight:700;text-decoration:none;transition:all .25s ease;box-shadow:0 4px 14px rgba(0,0,0,.08)}html[data-nav-active="home"] .quick-tags.hpV2-chips .quick-tag:hover{background:var(--gd);border-color:var(--gd);color:var(--t);transform:translateY(-2px);box-shadow:0 8px 22px rgba(251,193,23,.4)}@media(max-width:600px){html[data-nav-active="home"] .quick-tags.hpV2-chips .quick-tag{font-size:12px;padding:7px 14px}}
html[data-nav-active="home"] .hero-h{font-size:clamp(48px,7vw,72px);max-width:880px;margin:0 auto 18px;line-height:1.05;letter-spacing:-.02em}html[data-nav-active="home"] .hero-h span{color:#fff}html[data-nav-active="home"] .hero-h .em{color:var(--gd);position:relative;display:inline-block;padding:0 4px}html[data-nav-active="home"] .hero-h .em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:6%;height:13%;background:var(--or);opacity:.85;z-index:-1;border-radius:4px;transform:rotate(-1deg)}html[data-nav-active="home"] .hero-sub{max-width:680px;margin:0 auto 32px;font-size:clamp(15px,1.6vw,17px);line-height:1.7;color:rgba(255,255,255,.88)}html[data-nav-active="home"] .hero-badge{background:rgba(251,193,23,.18);border:1px solid rgba(251,193,23,.45);color:var(--gd);font-size:12px;padding:7px 16px;border-radius:30px;backdrop-filter:blur(8px)}@media(max-width:600px){html[data-nav-active="home"] .hero-h{font-size:34px;line-height:1.1}}
html[data-nav-active="home"] .stats-bar{background:linear-gradient(180deg,var(--w) 0%,#fafaf7 100%);padding:36px 24px;border-bottom:1px solid var(--g2);box-shadow:0 -8px 24px -16px rgba(0,0,0,.08)}html[data-nav-active="home"] .stats-bar .stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}html[data-nav-active="home"] .stats-bar .stat-item{text-align:center;padding:16px 8px;border-radius:14px;transition:all .3s ease;position:relative;cursor:default}html[data-nav-active="home"] .stats-bar .stat-item:not(:last-child)::after{content:"";position:absolute;right:0;top:25%;bottom:25%;width:1px;background:linear-gradient(180deg,transparent,var(--g2),transparent)}html[data-nav-active="home"] .stats-bar .stat-item:hover{background:rgba(251,193,23,.06);transform:translateY(-2px)}html[data-nav-active="home"] .stats-bar .stat-value{font-family:'Spline Sans Mono','Spline Sans Mono Fallback',sans-serif;font-size:clamp(32px,4vw,44px);font-weight:900;color:var(--t);line-height:1;letter-spacing:-.02em;background:linear-gradient(135deg,var(--t) 0%,var(--t3) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}html[data-nav-active="home"] .stats-bar .stat-label{font-size:11px;font-weight:800;color:var(--gt);text-transform:uppercase;letter-spacing:1.5px;margin-top:8px}@media(max-width:600px){html[data-nav-active="home"] .stats-bar .stats-inner{grid-template-columns:repeat(2,1fr)}html[data-nav-active="home"] .stats-bar .stat-item:not(:last-child)::after{display:none}}html[data-nav-active="home"] .search-container .tab-nav{display:flex;gap:6px;padding:8px;background:linear-gradient(180deg,#f9f7f1 0%,#f4f1ea 100%);border-bottom:1px solid var(--g2);border-radius:18px 18px 0 0}html[data-nav-active="home"] .search-container .tab-btn{flex:1;padding:14px 8px;background:transparent;border:none;font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;font-size:13px;font-weight:800;color:var(--gt);cursor:pointer;border-radius:12px;transition:all .25s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;position:relative}html[data-nav-active="home"] .search-container .tab-btn span{transition:color .25s}html[data-nav-active="home"] .search-container .tab-btn:hover:not(.active){background:rgba(255,255,255,.6);color:var(--t)}html[data-nav-active="home"] .search-container .tab-btn.active{background:var(--t);color:var(--w);box-shadow:0 6px 18px -6px rgba(8,80,72,.45)}html[data-nav-active="home"] .search-container .tab-btn.active span{color:var(--w)}html[data-nav-active="home"] .search-container .tab-content{padding:24px}html[data-nav-active="home"] .search-container .lbl{color:var(--t);font-weight:800;letter-spacing:1px;font-size:10px;display:flex;align-items:center;gap:4px;margin-bottom:6px;text-transform:uppercase}html[data-nav-active="home"] .search-container .inp{border:1.5px solid var(--g2);border-radius:11px;padding:11px 14px;font-size:14px;font-weight:600;transition:all .2s}html[data-nav-active="home"] .search-container .inp:focus{border-color:var(--t);box-shadow:0 0 0 4px rgba(8,80,72,.08);outline:none}html[data-nav-active="home"] .search-container .search-btn{background:var(--or);color:var(--w);border:none;padding:14px 28px;border-radius:12px;font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:all .25s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px}html[data-nav-active="home"] .search-container .search-btn:hover{background:var(--or-2);transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(234,96,36,.45)}html[data-nav-active="home"] .search-container .swap-btn{background:var(--t4);color:var(--t);border:1.5px solid var(--t3);border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:16px;font-weight:800;transition:all .25s;align-self:end;margin-bottom:2px}html[data-nav-active="home"] .search-container .swap-btn:hover{background:var(--t);color:var(--w);transform:rotate(180deg)}@media(max-width:600px){html[data-nav-active="home"] .search-container .tab-btn{padding:10px 4px;font-size:11px}html[data-nav-active="home"] .search-container .tab-btn span{display:none}}
html[data-nav-active="home"] .hpV2-dest-section{padding:64px 24px;background:linear-gradient(180deg,var(--g1) 0%,#fafaf7 100%)}html[data-nav-active="home"] .hpV2-dest-inner{max-width:1200px;margin:0 auto}html[data-nav-active="home"] .hpV2-dest-head{text-align:center;margin-bottom:36px}html[data-nav-active="home"] .hpV2-dest-eye{font-size:11px;font-weight:800;color:var(--or-text);letter-spacing:3px;margin-bottom:10px}html[data-nav-active="home"] .hpV2-dest-h{font-family:'Spline Sans Mono','Spline Sans Mono Fallback',sans-serif;font-size:clamp(28px,4vw,40px);font-weight:900;color:var(--dk);line-height:1.1;letter-spacing:-.02em;margin-bottom:8px}html[data-nav-active="home"] .hpV2-dest-h span{color:var(--or-text)}html[data-nav-active="home"] .hpV2-dest-sub{font-size:14px;color:var(--gt);max-width:520px;margin:0 auto;line-height:1.6}html[data-nav-active="home"] .hpV2-dest-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}html[data-nav-active="home"] .hpV2-dest{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;background:var(--dk);text-decoration:none;color:#fff;transition:transform .35s ease,box-shadow .35s ease}html[data-nav-active="home"] .hpV2-dest:hover{transform:translateY(-5px);box-shadow:0 18px 40px -12px rgba(13,28,26,.25)}html[data-nav-active="home"] .hpV2-dest .hpV2-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top right;display:block;transition:transform .9s cubic-bezier(.2,.6,.2,1);filter:brightness(.78)}html[data-nav-active="home"] .hpV2-dest:hover .hpV2-img{transform:scale(1.08);filter:brightness(.95)}html[data-nav-active="home"] .hpV2-dest::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,28,26,.85) 0%,rgba(13,28,26,.15) 50%,transparent 100%);z-index:1}html[data-nav-active="home"] .hpV2-dest .hpV2-info{position:absolute;bottom:0;left:0;right:0;padding:18px 20px;color:#fff;z-index:2}html[data-nav-active="home"] .hpV2-dest .hpV2-nm{font-family:'Spline Sans Mono','Spline Sans Mono Fallback',sans-serif;font-size:24px;font-weight:900;line-height:1;margin-bottom:4px;letter-spacing:-.01em}html[data-nav-active="home"] .hpV2-d1 .hpV2-nm{font-size:36px}html[data-nav-active="home"] .hpV2-dest .hpV2-meta{font-size:12px;color:rgba(255,255,255,.85);font-weight:600}html[data-nav-active="home"] .hpV2-badge{position:absolute;top:14px;right:14px;padding:5px 11px;border-radius:30px;font-size:11px;font-weight:800;z-index:3;letter-spacing:.5px}html[data-nav-active="home"] .hpV2-badge.hpV2-b1{background:var(--or);color:#fff}html[data-nav-active="home"] .hpV2-badge.hpV2-b2{background:var(--gd);color:var(--t)}html[data-nav-active="home"] .hpV2-badge.hpV2-b3{background:rgba(255,255,255,.95);color:var(--t);backdrop-filter:blur(8px)}html[data-nav-active="home"] .hpV2-d1{grid-column:span 7;grid-row:span 2;aspect-ratio:auto;min-height:480px}html[data-nav-active="home"] .hpV2-d2,html[data-nav-active="home"] .hpV2-d3{grid-column:span 5;height:233px}html[data-nav-active="home"] .hpV2-d4,html[data-nav-active="home"] .hpV2-d5,html[data-nav-active="home"] .hpV2-d6{grid-column:span 4;height:200px}@media(max-width:900px){html[data-nav-active="home"] .hpV2-d1{grid-column:span 12;min-height:300px}html[data-nav-active="home"] .hpV2-d2,html[data-nav-active="home"] .hpV2-d3{grid-column:span 6;height:200px}html[data-nav-active="home"] .hpV2-d4,html[data-nav-active="home"] .hpV2-d5,html[data-nav-active="home"] .hpV2-d6{grid-column:span 4;height:170px}}@media(max-width:600px){html[data-nav-active="home"] .hpV2-d1{min-height:240px}html[data-nav-active="home"] .hpV2-d2,html[data-nav-active="home"] .hpV2-d3,html[data-nav-active="home"] .hpV2-d4,html[data-nav-active="home"] .hpV2-d5,html[data-nav-active="home"] .hpV2-d6{grid-column:span 6;height:160px}html[data-nav-active="home"] .hpV2-d1 .hpV2-nm{font-size:28px}}
@media(prefers-reduced-motion:reduce){html[data-nav-active="home"] .hero-section,html[data-nav-active="home"] .hpV2-glow,html[data-nav-active="home"] #hpV2-fab::before{animation:none!important}.hpV2-reveal{opacity:1;transform:none;transition:none}}