:root{
  --speedx-gold:#C9A961;--speedx-gold-soft:#ECD08C;--speedx-teal:#1F8B98;
  --speedx-slate:#2D4858;--speedx-pearl:#FBFAF6;--bg-page:#FBFAF6;--bg-section:#FFFFFF;
  --bg-dark:#2D4858;--bg-teal:#1F8B98;--text-strong:#2D4858;--text-body:#3F5260;
  --text-muted:#6B7C88;--text-on-dark:#FBFAF6;--cta-text-on-gold:#2D4858;
  --border-soft:#E8E0CC;--border-card:rgba(45,72,88,0.08);
  --shadow-sm:0 1px 3px rgba(45,72,88,0.08);--shadow-md:0 4px 12px rgba(45,72,88,0.12);
  --shadow-lg:0 8px 24px rgba(45,72,88,0.16);--shadow-gold:0 4px 16px rgba(201,169,97,0.32);
  --radius-md:8px;--radius-lg:12px;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.65;color:var(--text-body);background:var(--bg-page);margin:0;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;max-width:100vw}
.zalo-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#0068FF;border-radius:6px;font-family:'Be Vietnam Pro',Arial,sans-serif;font-weight:900;font-size:9.5px;color:#fff;letter-spacing:-.03em;flex-shrink:0;line-height:1}
.zalo-icon::before{content:'Zalo'}
.cta--lg .zalo-icon{width:26px;height:26px;font-size:10.5px;border-radius:7px}
.cta--xl .zalo-icon{width:28px;height:28px;font-size:11px;border-radius:7px}
.cta--sm .zalo-icon{width:20px;height:20px;font-size:8.5px;border-radius:5px}
.cta--secondary .zalo-icon{background:#fff;color:#0068FF}
.cta--outline .zalo-icon{background:var(--speedx-gold);color:#fff}
.float-zalo .zalo-icon{width:30px;height:30px;font-size:12px;border-radius:7px;background:#fff;color:#0068FF}
.mobile-bar__cta .zalo-icon{width:22px;height:22px;font-size:9.5px;background:#fff;color:#0068FF}
h1,h2,h3,h4{font-family:inherit;color:var(--text-strong);font-weight:700;line-height:1.2;letter-spacing:-0.01em;margin:0}
h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-0.02em}
h2{font-size:clamp(1.5rem,3.5vw,2.25rem)}
h3{font-size:clamp(1.15rem,2.2vw,1.4rem)}
p{margin:0 0 1rem}
a{color:var(--speedx-teal);text-decoration:none;transition:color .2s}
a:hover{color:var(--speedx-gold)}
img{max-width:100%;height:auto;display:block}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 32px;background:linear-gradient(180deg,var(--speedx-gold-soft) 0%,var(--speedx-gold) 100%);color:var(--cta-text-on-gold);font-weight:700;font-size:16px;border-radius:var(--radius-md);box-shadow:var(--shadow-gold);transition:all .2s;cursor:pointer;border:none;line-height:1.2}
.cta:hover{background:linear-gradient(180deg,var(--speedx-gold) 0%,#B89752 100%);color:var(--cta-text-on-gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,169,97,.42)}
.cta svg{width:20px;height:20px;flex-shrink:0;fill:currentColor}
.cta--lg{padding:16px 36px;font-size:17px}
.cta--xl{padding:18px 44px;font-size:19px}
.cta--secondary{background:var(--speedx-teal);color:#fff;box-shadow:0 4px 12px rgba(31,139,152,.32)}
.cta--secondary:hover{background:#187380;color:#fff}
.cta--outline{background:transparent;color:var(--speedx-gold);border:2px solid var(--speedx-gold);box-shadow:none}
.cta--outline:hover{background:var(--speedx-gold);color:var(--cta-text-on-gold)}

.float-zalo{position:fixed;bottom:24px;right:24px;z-index:9999;width:64px;height:64px;background:var(--speedx-teal);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(31,139,152,.4);transition:transform .2s;color:#fff}
.float-zalo:hover{transform:scale(1.08)}
.float-zalo svg{width:32px;height:32px;fill:#fff}

.header{position:sticky;top:0;z-index:1000;background:#1B1F24;padding:11px 1.5rem;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 14px rgba(0,0,0,.25);border-bottom:1px solid rgba(201,169,97,.12)}
.header__logo img{height:54px;filter:drop-shadow(0 1px 4px rgba(201,169,97,.5)) brightness(1.22) contrast(1.1)}
.header__nav{display:flex;gap:1.5rem;align-items:center}
.header__nav a{color:rgba(251,250,246,.9);font-size:14px;font-weight:500}
.header__nav a:hover{color:var(--speedx-gold)}
.header__nav .cta{padding:8px 18px;font-size:13px}
@media(max-width:768px){.header__nav a:not(.cta){display:none}}

.hero{position:relative;background:var(--bg-dark);color:var(--text-on-dark);padding:clamp(4rem,10vh,7rem) 1.5rem;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top right,rgba(201,169,97,.18),transparent 60%),radial-gradient(ellipse at bottom left,rgba(31,139,152,.14),transparent 60%);pointer-events:none}
.hero__inner{position:relative;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}
@media(max-width:900px){.hero__inner{grid-template-columns:1fr;gap:3rem}}
.hero__eyebrow{display:inline-block;padding:6px 16px;background:rgba(201,169,97,.15);color:var(--speedx-gold);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;margin-bottom:1rem;border:1px solid rgba(201,169,97,.4)}
.hero__title{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:800;line-height:1.1;color:#fff;margin:0 0 1.5rem;letter-spacing:-0.02em}
.hero__title em{font-style:normal;background:linear-gradient(180deg,#ECD08C 0%,#C9A961 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__subtitle{color:rgba(251,250,246,.85);margin:0 0 2rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.hero__stats{display:flex;gap:2rem;flex-wrap:wrap;font-size:14px;color:rgba(251,250,246,.75)}
.hero__stats strong{color:#ECD08C}
.hero__visual{text-align:center}
.hero__visual img{margin:0 auto;max-height:340px;width:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}

.sec{padding:6rem 1.5rem}
.sec--pearl{background:var(--speedx-pearl)}
.sec--white{background:#fff}
.sec--dark{background:var(--bg-dark);color:var(--text-on-dark)}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:var(--text-on-dark)}
.sec--gold{background:linear-gradient(135deg,var(--speedx-gold-soft) 0%,var(--speedx-gold) 100%);color:var(--cta-text-on-gold)}
.sec--gold h2,.sec--gold p{color:var(--speedx-slate)}
.container{max-width:1200px;margin:0 auto}
.container--narrow{max-width:920px;margin:0 auto}
.sec-title{text-align:center;margin-bottom:3rem}
.sec-title__eyebrow{display:inline-block;color:var(--speedx-teal);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.5rem}
.sec--dark .sec-title__eyebrow{color:var(--speedx-gold)}
.sec-title__sub{font-size:17px;color:var(--text-muted);max-width:640px;margin:0 auto}
.sec--dark .sec-title__sub{color:rgba(251,250,246,.75)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media(max-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--border-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:all .25s;display:flex;flex-direction:column}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:rgba(201,169,97,.4)}
.card__media{position:relative;aspect-ratio:1;background:var(--speedx-pearl);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card__media img{transform:scale(1.04)}
.card__badge{position:absolute;top:12px;left:12px;padding:4px 10px;background:var(--speedx-slate);color:var(--speedx-gold);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:4px}
.card__body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.card__series{font-size:12px;color:var(--speedx-teal);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.card__name{font-size:19px;font-weight:700;color:var(--text-strong);margin:0 0 .5rem;line-height:1.3}
.card__name a{color:inherit}
.card__specs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1rem}
.card__spec{font-size:12px;padding:3px 8px;background:var(--speedx-pearl);color:var(--text-muted);border-radius:4px;border:1px solid var(--border-soft)}
.card__price{font-size:17px;font-weight:700;color:var(--speedx-slate);margin:0 0 1rem}
.card__price em{font-style:normal;color:var(--text-muted);font-weight:500;font-size:13px;margin-right:4px}
.card__price--inquire{font-size:14.5px;font-weight:700;color:var(--speedx-teal);background:linear-gradient(135deg,rgba(31,139,152,.08),rgba(201,169,97,.06));padding:8px 12px;border-radius:6px;border:1px dashed var(--speedx-teal);display:inline-flex;align-items:center;gap:4px}
.card__price--inquire em{color:var(--speedx-teal);font-size:14px;margin-right:0}
.card__actions{display:flex;gap:.5rem;margin-top:auto}
.card__detail{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1.5px solid var(--border-soft);color:var(--text-strong);background:#fff;border-radius:8px;font-weight:600;font-size:14px;flex:1}
.card__detail:hover{border-color:var(--speedx-gold);color:var(--speedx-gold)}
.card__actions .cta{flex:1;padding:10px 16px;font-size:14px}

.filter-btn{padding:8px 18px;background:var(--speedx-pearl);border:1.5px solid var(--border-soft);color:var(--text-strong);border-radius:99px;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s;font-family:inherit}
.filter-btn:hover{border-color:var(--speedx-gold);color:var(--speedx-gold)}
.filter-btn--active{background:var(--speedx-slate);color:var(--speedx-gold);border-color:var(--speedx-slate)}

.dealer{background:linear-gradient(135deg,var(--speedx-gold-soft) 0%,var(--speedx-gold) 100%);padding:3rem 1.5rem}
.dealer__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.dealer h2{color:var(--speedx-slate);margin:0 0 .5rem}
.dealer p{color:var(--speedx-slate);margin:0;font-size:17px;font-weight:500}

/* Compact footer (single row on desktop) */
.footer{background:var(--speedx-slate);color:rgba(251,250,246,.7);padding:2rem 1.5rem 1.5rem}
.footer__grid{max-width:1200px;margin:0 auto 1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.footer__brand{display:flex;align-items:center;gap:1rem;flex:1;min-width:240px}
.footer__brand img{height:60px;filter:drop-shadow(0 1px 4px rgba(201,169,97,.5)) brightness(1.22) contrast(1.1)}
.footer__brand p{margin:0;font-size:13px;color:rgba(251,250,246,.6);line-height:1.5;max-width:380px}
.footer__links{display:flex;gap:1.25rem;flex-wrap:wrap}
.footer__links a{color:rgba(251,250,246,.8);font-size:14px;font-weight:500}
.footer__links a:hover{color:var(--speedx-gold)}
.footer__bottom{max-width:1200px;margin:0 auto;padding-top:1rem;border-top:1px solid rgba(251,250,246,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;align-items:flex-start}
.footer__bottom-info{font-size:12px;color:rgba(251,250,246,.55);line-height:1.55;flex:1;min-width:280px}
.footer__bottom-info p{margin:.2rem 0}
.footer__bottom-info strong{color:rgba(251,250,246,.85);font-weight:700}
.footer__bottom-info a{color:inherit;text-decoration:underline}
.footer__bottom-legal{font-size:11.5px;color:rgba(251,250,246,.4);text-align:right}

/* Legacy multi-column footer fallback (kept for pages that haven't been updated) */
.footer h4{color:var(--speedx-gold);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 0 1rem}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:8px}
.footer a{color:rgba(251,250,246,.8);font-size:14px}
.footer a:hover{color:var(--speedx-gold)}

/* Model detail page */
.model-hero{background:var(--speedx-pearl);padding:3rem 1.5rem}
.model-hero__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media(max-width:900px){.model-hero__inner{grid-template-columns:1fr}}
.model-hero__gallery img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.price-callout{background:linear-gradient(135deg,var(--speedx-pearl),#fff);border:1.5px solid var(--speedx-gold);padding:1.5rem;border-radius:var(--radius-md);margin-bottom:1.5rem}
.price-callout__label{display:block;font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.price-callout__price{font-size:28px;font-weight:800;color:var(--speedx-slate);line-height:1}
.price-callout__hint{display:block;font-size:13px;color:var(--text-muted);margin-top:8px}
.spec-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.spec-table th,.spec-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border-soft)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:none}
.spec-table th{font-weight:600;color:var(--speedx-slate);width:40%;background:var(--speedx-pearl)}
.spec-table td{color:var(--text-body);font-weight:500}

.highlights{list-style:none;padding:0;margin:0 0 1.5rem}
.highlights li{padding:6px 0;color:var(--text-strong);font-weight:500}
.highlights li::before{content:'✓';color:var(--speedx-gold);margin-right:8px;font-weight:700}

/* =====================================================
   MOBILE-FIRST REDESIGN (≤768px)
   Compact, snap-scroll, sticky bottom bar
   ===================================================== */
@media(max-width:768px){
  body{font-size:15px;padding-bottom:68px}

  /* HEADER */
  .header{padding:10px 14px}
  .header__logo img{height:46px}
  .header__nav{gap:0}
  .header__nav .cta{padding:7px 14px;font-size:12px;border-radius:99px}

  /* HERO (shared layout for non-index pages) */
  .hero{padding:2rem 1rem 1.5rem}
  .hero__inner{gap:1.25rem}
  .hero__eyebrow{font-size:10px;padding:4px 12px;margin-bottom:.5rem}
  .hero__title{font-size:1.65rem;line-height:1.15;margin-bottom:.75rem}
  .hero__subtitle{font-size:.9rem;margin-bottom:1.25rem}
  .hero__ctas{flex-direction:column;gap:.6rem;margin-bottom:1.25rem}
  .hero__ctas .cta{width:100%;padding:14px 20px;font-size:15px}

  /* MODEL HERO (single-product page) */
  .model-hero{padding:1.25rem 1rem 1.5rem}
  .model-hero__inner{gap:1rem}
  .model-hero__gallery img{border-radius:12px}
  .model-hero h1{font-size:1.5rem;line-height:1.2;margin-bottom:.5rem !important}
  .model-hero p{font-size:.9rem !important}
  .price-callout{padding:.85rem 1rem;margin-bottom:1rem}
  .price-callout__label{font-size:11px}
  .price-callout__price{font-size:1.4rem !important;line-height:1.1}
  .price-callout__hint{font-size:11.5px;line-height:1.4}
  .highlights li{padding:4px 0;font-size:13.5px}

  /* SECTIONS */
  .sec{padding:2rem 1rem}
  .sec-title{margin-bottom:1.25rem}
  .sec-title h2{font-size:1.3rem;line-height:1.25}
  .sec-title__eyebrow{font-size:10px;letter-spacing:.14em}
  .sec-title__sub{font-size:.9rem}

  /* PRODUCT CARDS — horizontal snap on mobile */
  .grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:.75rem;
    margin:0 -1rem;
    padding:.25rem 1rem .5rem;
    scrollbar-width:none;
  }
  .grid::-webkit-scrollbar{display:none}
  .card{flex:0 0 78%;scroll-snap-align:start;border-radius:12px}
  .card__media{aspect-ratio:4/3}
  .card__body{padding:.85rem}
  .card__series{font-size:10px;margin-bottom:4px}
  .card__name{font-size:15px;margin-bottom:6px}
  .card__specs{gap:4px;margin-bottom:.5rem}
  .card__spec{font-size:10px;padding:2px 6px}
  .card__price{font-size:14px;margin-bottom:.6rem}
  .card__price em{font-size:11px}
  .card__actions{gap:.4rem}
  .card__detail,.card__actions .cta{padding:8px 10px;font-size:12px;flex:1}
  .card__badge{font-size:10px;padding:3px 8px}

  /* CATALOG: don't snap-scroll, keep grid 1-col for /san-pham/ archive */
  body.catalog .grid{
    display:grid;
    grid-template-columns:1fr;
    overflow:visible;
    margin:0;
    padding:0;
    gap:.75rem;
  }
  body.catalog .card{flex:none;width:100%}

  /* FILTER BAR */
  .filter-btn{padding:6px 12px;font-size:12px}

  /* SPEC TABLE */
  .spec-table th,.spec-table td{padding:9px 11px;font-size:13px;vertical-align:top}
  .spec-table th{width:48%;font-weight:600}

  /* CTAs */
  .cta--lg,.cta--xl{padding:14px 24px;font-size:15px;width:100%}

  /* FOOTER */
  .footer{padding:1.25rem 1rem .75rem}
  .footer__grid{flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:.5rem}
  .footer__brand{gap:.75rem;flex-wrap:wrap}
  .footer__brand img{height:48px}
  .footer__brand p{font-size:11px;max-width:none}
  .footer__links{gap:.5rem 1rem}
  .footer__links a{font-size:12px}
  .footer__bottom{flex-direction:column;text-align:center;align-items:center;gap:.65rem;padding-top:.75rem}
  .footer__bottom-info{font-size:11.5px;min-width:auto}
  .footer__bottom-legal{font-size:10.5px;text-align:center}
  .footer__grid > div{width:100%}

  /* Hide desktop floating Zalo on mobile */
  .float-zalo{display:none}

  /* === MOBILE STICKY BOTTOM BAR — Zalo only === */
  .mobile-bar{position:fixed;bottom:0;left:0;right:0;z-index:9998;background:#1B1F24;padding:10px 12px;display:flex;gap:0;align-items:center;border-top:1px solid rgba(201,169,97,.28);box-shadow:0 -4px 18px rgba(0,0,0,.32);transition:transform .3s}
  .mobile-bar--hidden{transform:translateY(100%)}
  .mobile-bar__cta{flex:1;background:linear-gradient(180deg,#ECD08C,#C9A961);color:#1B1F24;padding:14px;border-radius:12px;font-weight:700;font-size:15px;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 14px rgba(201,169,97,.5);position:relative;overflow:hidden}
  .mobile-bar__cta::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-100%);animation:btnShine 3.5s ease-in-out infinite}
  @keyframes btnShine{0%{transform:translateX(-100%)}50%,100%{transform:translateX(100%)}}
  .mobile-bar__call{display:none}

  /* Hide model page bottom-stuck CTA — bottom bar replaces it */
  .speedx-mobile-sticky-cta{display:none !important}
}
@media(min-width:769px){.mobile-bar{display:none}}
@media(max-width:380px){
  .hero__title,.model-hero h1{font-size:1.4rem}
  .sec-title h2{font-size:1.15rem}
  .card{flex:0 0 85%}
}