/* ============================================================
   BREAKPOINTS — Honda Ô Tô Sài Gòn Q2
   Nguồn duy nhất (single source of truth) cho responsive tokens.

   Bootstrap 5 aligned + project-specific ranges.
   Được inject tự động vào mọi CSS file qua PostCSS importFrom.
   ============================================================

   SCALE:
     xs      < 576px    mobile portrait
     sm    576–767px    mobile landscape
     md    768–991px    tablet portrait
     lg   992–1199px    tablet landscape / small laptop
     xl  1200–1399px    desktop
     xxl   ≥ 1400px    large desktop

   NAMING CONVENTION:
     --bp-{size}         min-width  (mobile-first, "from size and up")
     --bp-lt-{size}      max-width  (max-down, "until size")
     --bp-{size}-only    range      (only at this breakpoint)
     --bp-{a}-to-{b}     range      (custom cross-breakpoint range)
   ============================================================ */

/* ── Min-width (mobile-first) ──────────────────────────────── */

/* ── Max-width (max-down) ──────────────────────────────────── */
/* .98px offset: avoids overlap at exact pixel boundary        */

/* ── Ranges (single breakpoint only) ──────────────────────── */

/* ── Project-specific ranges ──────────────────────────────── */
/* Container max = 1280px → useful cho sidebar/content layouts */

/* Tablet range: iPad portrait + landscape */

/* Small phone */

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/view/public/assets/fonts/fontawesome/webfonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/view/public/assets/fonts/fontawesome/webfonts/fa-regular-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/view/public/assets/fonts/fontawesome/webfonts/fa-light-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/view/public/assets/fonts/fontawesome/webfonts/fa-brands-400.woff2') format('woff2');
}
.fa,.fab,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}
.fa-fw{text-align:center;width:1.25em}
.fa-xs{font-size:.75em}
.fa-2x{font-size:2em}
.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}
.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}
@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
.fa-star:before{content:"\f005"}
.fa-map-marker-alt:before{content:"\f3c5"}
.fa-phone:before{content:"\f095"}
.fa-envelope:before{content:"\f0e0"}
.fa-chevron-down:before{content:"\f078"}
.fa-angle-left:before{content:"\f104"}
.fa-angle-right:before{content:"\f105"}
.fa-arrow-left:before{content:"\f060"}
.fa-phone-rotary:before{content:"\f8d3"}
.fa-globe:before{content:"\f0ac"}
.fa-external-link-alt:before{content:"\f35d"}
.fa-check:before{content:"\f00c"}
.fa-times:before{content:"\f00d"}
.fa-search:before{content:"\f002"}
.fa-bars:before{content:"\f0c9"}
.fa-chevron-left:before{content:"\f053"}
.fa-chevron-right:before{content:"\f054"}
.fa-clock:before{content:"\f017"}
.fa-user:before{content:"\f007"}
.fa-facebook-f:before{content:"\f39e"}
.fa-youtube:before{content:"\f167"}
.fa-tiktok:before{content:"\e07b"}
.fa-calendar-alt:before{content:"\f073"}
.fa-share:before{content:"\f064"}
.fa-cog:before{content:"\f013"}
.fa-sync:before{content:"\f021"}
.fa-sign-in-alt:before{content:"\f2f6"}
.fa-align-left:before{content:"\f036"}
.fa-angle-up:before{content:"\f106"}
.fa-arrow-right:before{content:"\f061"}
.fa-arrows-h:before{content:"\f07e"}
.fa-bolt:before{content:"\f0e7"}
.fa-calendar-check:before{content:"\f274"}
.fa-car:before{content:"\f1b9"}
.fa-car-mechanic:before{content:"\f5e3"}
.fa-car-side:before{content:"\f5e4"}
.fa-certificate:before{content:"\f0a3"}
.fa-check-circle:before{content:"\f058"}
.fa-clipboard-check:before{content:"\f46c"}
.fa-clipboard-list:before{content:"\f46d"}
.fa-comment-alt:before{content:"\f27a"}
.fa-directions:before{content:"\f5eb"}
.fa-exchange-alt:before{content:"\f362"}
.fa-eye:before{content:"\f06e"}
.fa-facebook:before{content:"\f09a"}
.fa-file-alt:before{content:"\f15c"}
.fa-file-contract:before{content:"\f56c"}
.fa-file-download:before{content:"\f56d"}
.fa-file-invoice:before{content:"\f570"}
.fa-filter:before{content:"\f0b0"}
.fa-fire:before{content:"\f06d"}
.fa-gift:before{content:"\f06b"}
.fa-hand-holding-usd:before{content:"\f4c0"}
.fa-headset:before{content:"\f590"}
.fa-history:before{content:"\f1da"}
.fa-home:before{content:"\f015"}
.fa-home-lg:before{content:"\f80b"}
.fa-info-circle:before{content:"\f05a"}
.fa-instagram:before{content:"\f16d"}
.fa-link:before{content:"\f0c1"}
.fa-linkedin:before{content:"\f08c"}
.fa-list-alt:before{content:"\f022"}
.fa-list-ul:before{content:"\f0ca"}
.fa-location-arrow:before{content:"\f124"}
.fa-lock:before{content:"\f023"}
.fa-long-arrow-right:before{content:"\f178"}
.fa-newspaper:before{content:"\f1ea"}
.fa-palette:before{content:"\f53f"}
.fa-paper-plane:before{content:"\f1d8"}
.fa-percentage:before{content:"\f541"}
.fa-phone-alt:before{content:"\f879"}
.fa-piggy-bank:before{content:"\f4d3"}
.fa-play-circle:before{content:"\f144"}
.fa-plus:before{content:"\f067"}
.fa-plus-circle:before{content:"\f055"}
.fa-search-dollar:before{content:"\f688"}
.fa-shield-alt:before{content:"\f3ed"}
.fa-shield-check:before{content:"\f2f7"}
.fa-signal-alt-3:before{content:"\f693"}
.fa-star-half-alt:before{content:"\f5c0"}
.fa-steering-wheel:before{content:"\f622"}
.fa-store:before{content:"\f54e"}
.fa-table:before{content:"\f0ce"}
.fa-tachometer-alt:before{content:"\f3fd"}
.fa-tag:before{content:"\f02b"}
.fa-tags:before{content:"\f02c"}
.fa-th-large:before{content:"\f009"}
.fa-tools:before{content:"\f7d9"}
.fa-twitter:before{content:"\f099"}
.fa-university:before{content:"\f19c"}
.fa-user-circle:before{content:"\f2bd"}
.fa-user-hard-hat:before{content:"\f82c"}
.fa-wrench:before{content:"\f0ad"}
.fa-arrows-alt:before{content:"\f0b2"}
.fa-building:before{content:"\f1ad"}
.fa-camera:before{content:"\f030"}
.fa-camera-alt:before{content:"\f332"}
.fa-code:before{content:"\f121"}
.fa-cogs:before{content:"\f085"}
.fa-comment-dots:before{content:"\f4ad"}
.fa-compress:before{content:"\f066"}
.fa-copy:before{content:"\f0c5"}
.fa-edit:before{content:"\f044"}
.fa-exclamation-circle:before{content:"\f06a"}
.fa-exclamation-triangle:before{content:"\f071"}
.fa-expand:before{content:"\f065"}
.fa-folder:before{content:"\f07b"}
.fa-folder-open:before{content:"\f07c"}
.fa-home-alt:before{content:"\f80a"}
.fa-image:before{content:"\f03e"}
.fa-images:before{content:"\f302"}
.fa-key:before{content:"\f084"}
.fa-list:before{content:"\f03a"}
.fa-magic:before{content:"\f0d0"}
.fa-minus-circle:before{content:"\f056"}
.fa-paint-brush:before{content:"\f1fc"}
.fa-pen:before{content:"\f304"}
.fa-pencil-alt:before{content:"\f303"}
.fa-play:before{content:"\f04b"}
.fa-puzzle-piece:before{content:"\f12e"}
.fa-save:before{content:"\f0c7"}
.fa-share-alt:before{content:"\f1e0"}
.fa-sitemap:before{content:"\f0e8"}
.fa-spinner:before{content:"\f110"}
.fa-sync-alt:before{content:"\f2f1"}
.fa-trash-alt:before{content:"\f2ed"}
.fa-upload:before{content:"\f093"}
.fa-user-alt:before{content:"\f406"}
.fa-user-edit:before{content:"\f4ff"}
.fa-video:before{content:"\f03d"}
.fa-couch:before{content:"\f4b8"}
.fa-balance-scale:before{content:"\f24e"}
.fas{font-family:'Font Awesome 6 Free';font-weight:900}
.far{font-family:'Font Awesome 6 Free';font-weight:400}
.fal{font-family:'Font Awesome 6 Free';font-weight:300}
.fab{font-family:'Font Awesome 6 Brands';font-weight:400}

/* ============================================================
   HONDA ÔTÔ SÀI GÒN Q2 — COMPONENT LIBRARY (Runtime subset)
   ============================================================ */

.product-card .ratio {
	--bs-aspect-ratio: 56.25%;
}

.ds-flow > * + * { margin-top: var(--space-4); }
.ds-stack-sm > * + * { margin-top: var(--space-2); }
.ds-stack-md > * + * { margin-top: var(--space-4); }
.ds-stack-lg > * + * { margin-top: var(--space-6); }

.container--narrow { max-width: var(--container-narrow); }
.container--prose { max-width: var(--container-prose); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 1023.98px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.text-display-xl  { font-family: var(--font-heading); font-size: var(--text-display-xl); font-weight: var(--weight-extrabold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.text-display-lg  { font-family: var(--font-heading); font-size: var(--text-display-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.text-h1 { font-family: var(--font-heading); font-size: var(--text-h1); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.text-h2 { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.text-h3 { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.text-h4 { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: var(--leading-normal); }
.text-body-lg { font-size: var(--text-lg); line-height: var(--leading-normal); }
.text-body { font-size: var(--text-base); line-height: var(--leading-normal); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.text-xs { font-size: var(--text-xs); line-height: var(--leading-normal); }
.text-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; }

.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-red-600);
  margin-bottom: var(--space-3);
}
.section-label::before { content: '—'; margin-right: var(--space-2); }
.section-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}
.section-header__desc {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-base);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 3px; }
.btn-primary { background: var(--color-red-600); color: var(--color-white); box-shadow: var(--shadow-red); }
.btn-primary:hover { background: var(--color-red-700); border-color: var(--color-red-700); }
.btn-primary:active { background: var(--color-red-800); }
.btn-secondary { background: transparent; color: var(--color-red-600); border-color: var(--color-red-600); }
.btn-secondary:hover { background: var(--color-red-600); color: var(--color-white); border-color: var(--color-red-600); }
.btn-ghost { background: rgba(255,255,255,.08); color: var(--color-white); border-color: rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); }
.btn-call { background: var(--color-neutral-900); color: var(--color-white); gap: var(--space-3); padding: var(--space-3) var(--space-5); }
.btn-call:hover { background: var(--color-neutral-700); transform: translateY(-1px); }
.btn-call .btn-call__icon {
  width: 20px; height: 20px; background: var(--color-red-600); border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(204,0,0,.5); } 70% { box-shadow: 0 0 0 8px rgba(204,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(204,0,0,0); } }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn--full { width: 100%; }

.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.form-label--required::after { content: ' *'; color: var(--color-red-600); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-white); font-family: var(--font-body);
  font-size: var(--text-base); color: var(--color-text-primary);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-neutral-400); }
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--color-neutral-400); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(204,0,0,.12);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer;
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-contact { display: flex; flex-direction: column; gap: var(--space-4); }
.form-micro { font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.5; }

.ds-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ds-card__image-wrap {
  position: relative; overflow: hidden; background: var(--color-bg-secondary);
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
}
.ds-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.ds-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; transition: var(--transition-base); }
.ds-card:hover .ds-card__image-wrap img { transform: scale(1.04); }
.ds-card__badge {
  position: absolute; top: var(--space-3); left: var(--space-3); background: var(--color-red-600); color: var(--color-white);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
}
.ds-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.ds-card__title { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-bold); color: var(--color-neutral-900); letter-spacing: var(--tracking-tight); }
.ds-card__meta { font-size: var(--text-sm); color: var(--color-text-secondary); }
.ds-card__price strong { color: var(--color-red-600); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.ds-card__actions { display: flex; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-neutral-100); }
.ds-card__actions .btn { flex: 1; font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }

.promo-banner {
  display: flex; align-items: center; gap: var(--space-4);
  background: linear-gradient(135deg, var(--color-red-700) 0%, var(--color-red-600) 100%);
  color: var(--color-white); padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); font-size: var(--text-sm);
}
.promo-banner__icon { font-size: 1.5rem; flex-shrink: 0; }
.promo-banner__content { flex: 1; }
.promo-banner__title { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-base); margin-bottom: var(--space-1); }
.promo-banner__desc { color: rgba(255,255,255,.85); font-size: var(--text-sm); }
.promo-banner .btn-promo {
  background: var(--color-white); color: var(--color-red-600); border: none; padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; cursor: pointer; flex-shrink: 0; white-space: nowrap; transition: var(--transition-base);
}
.promo-banner .btn-promo:hover { background: rgba(255,255,255,.9); }

.top-bar {
  background: var(--color-neutral-950); color: rgba(255,255,255,.8); padding: var(--space-2) var(--space-6); font-size: var(--text-xs);
}
.top-bar__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); max-width: var(--container-max); margin: 0 auto; }
.top-bar__phone { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-white); font-size: var(--text-sm); }
.top-bar__phone-dot { width: 6px; height: 6px; background: var(--color-red-600); border-radius: var(--radius-full); animation: pulse-ring 2s ease-out infinite; }
.top-bar a { color: rgba(255,255,255,.6); transition: color var(--duration-fast) var(--ease-out); }
.top-bar a:hover { color: var(--color-white); }
.top-bar__links { display: flex; gap: var(--space-4); }

.trust-bar { background: var(--color-neutral-950); color: var(--color-white); padding: var(--space-6) var(--space-8); }
.trust-bar__inner { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-8); align-items: center; max-width: var(--container-max); margin: 0 auto; }
.trust-bar__item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: rgba(255,255,255,.65); }
.trust-bar__item strong { color: var(--color-white); font-weight: var(--weight-semibold); }
.trust-bar__divider { width: 1px; height: 20px; background: rgba(255,255,255,.2); }

.sticky-cta-bar {
  background: var(--color-neutral-950); border-top: 1px solid rgba(255,255,255,.08); padding: var(--space-3) var(--space-4);
  display: flex; gap: var(--space-3); box-shadow: 0 -4px 20px rgba(0,0,0,.3); border-radius: var(--radius-lg);
}
.sticky-cta-bar .btn { flex: 1; }

.hero-preview {
  position: relative; min-height: 480px; display: flex; align-items: center; overflow: hidden;
  background: var(--color-neutral-950); color: var(--color-white); border-radius: var(--radius-xl); padding: var(--space-12);
}
.hero-preview__bg { position: absolute; inset: 0; border-radius: var(--radius-xl); overflow: hidden; }
.hero-preview__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .45; }
.hero-preview__overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.5) 60%, rgba(10,10,10,.15) 100%); }
.hero-preview__content { position: relative; z-index: 1; max-width: 560px; }
.hero-eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.hero-eyebrow__line { width: 28px; height: 2px; background: var(--color-red-600); }
.hero-eyebrow__text { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: rgba(255,255,255,.65); }
.hero-title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: var(--weight-extrabold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); }
.hero-title em { font-style: normal; color: var(--color-red-600); }
.hero-subtitle { font-size: var(--text-lg); color: rgba(255,255,255,.72); line-height: var(--leading-normal); margin-bottom: var(--space-8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,.12); }
.hero-trust__item { display: flex; flex-direction: column; }
.hero-trust__number { font-family: var(--font-heading); font-size: 2rem; font-weight: var(--weight-extrabold); color: var(--color-white); line-height: 1; }
.hero-trust__number span { color: var(--color-red-600); }
.hero-trust__label { font-size: var(--text-xs); color: rgba(255,255,255,.5); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-top: var(--space-1); }


/* Controlled Adoption — round 1 */
.section-heading_ds .section-label { margin-bottom: var(--space-2); }
.section-heading_ds.text-center .section-label { display: inline-block; }

.ds-breadcrumb-hero__title .section-header__title {
  font-size: var(--text-h1);
  margin-bottom: var(--space-4);
}
.ds-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.ds-breadcrumb .breadcrumb-item,
.ds-breadcrumb .breadcrumb-item > a {
  color: rgba(255,255,255,.82);
}
.ds-breadcrumb .breadcrumb-item.active,
.ds-breadcrumb .breadcrumb-item.active > a {
  color: var(--color-white);
  font-weight: var(--weight-semibold);
}
.ds-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,.45);
}

.ds-pagination-wrap {
  display: flex;
  justify-content: center;
}
.ds-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.ds-pagination li { list-style: none; }
.ds-pagination li a {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text-primary);
  transition: var(--transition-base);
}
.ds-pagination li.active a,
.ds-pagination li.pageactive a,
.ds-pagination li a:hover {
  background: var(--color-red-600);
  border-color: var(--color-red-600);
  color: var(--color-white);
}

.product-card.ds-card,
.article-card.ds-card,
.accessory-card.ds-card {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}
.product-card.ds-card .card-title,
.article-card.ds-card .card-title,
.accessory-card.ds-card .card-title {
  margin-bottom: 0;
}
.article-card.ds-card .card-link,
.accessory-card.ds-card .card-link {
  margin-top: auto;
}


/* Controlled Adoption — round 2 */
.ds-form-surface {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.ds-form-surface .contact-form_item--input.form-control,
.ds-form-surface .contact-form_item--input.form-select,
.page-contact .form-control.form-input,
.page-contact .form-select.form-select,
.page-contact .form-textarea {
  border-radius: var(--radius-md);
  border-color: var(--color-border);
}
.ds-form-surface .contact-form_item--input.form-control:focus,
.ds-form-surface .contact-form_item--input.form-select:focus,
.page-contact .form-control.form-input:focus,
.page-contact .form-select.form-select:focus,
.page-contact .form-textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(204,0,0,.12);
}
.ds-form-surface .btn,
.page-contact .form-buttons .btn,
.hero-item_button.btn,
.section-tools .btn,
.section-introduction .btn {
  min-height: 48px;
}
.page-contact .form-buttons .btn {
  min-width: 200px;
}


/* Controlled Adoption — round 3 */
.service-form.ds-form-surface,
.footer-form.ds-form-surface {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
}
.footer-form.ds-form-surface .footer-form_item__input.form-control,
.service-form.ds-form-surface .contact-form_item--input.form-control,
.service-form.ds-form-surface .contact-form_item--input.form-select {
  border-radius: var(--radius-md);
}
.page-price .price-tools .button-theme.btn,
.page-price .collapse-inner_buttons .button-theme.btn,
.page-price .item-link .button-theme.btn {
  min-height: 44px;
}
.page-price .item-link .button-theme.btn {
  min-width: 140px;
}


/* Controlled Adoption — round 4 */
.detail-accessory .btn,
.compare-inner .btn,
.popup-compare_body .btn {
  min-height: 48px;
}
.popup-compare_body.ds-form-surface {
  border-radius: var(--radius-xl);
}
.popup-compare_body.ds-form-surface .form-select {
  border-radius: var(--radius-md);
}
.compare-inner .callPopUp.btn {
  min-width: 220px;
}


/* Controlled Adoption — round 5 */
.error-page .error-button .btn,
.thankyou-button .btn,
.section-products .btn,
.section-price .btn,
#preview-button .btn {
  min-height: 48px;
}
.compare-inner .product-card.ds-card {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

/* Shared floating CTA */
:root {
  --fc-blue: var(--color-brand-blue);
  --fc-red: var(--color-red-600);
  --fc-zalo: #0068FF;
}

.hn-floats {
  position: fixed;
  right: 18px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 997;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.hn-floats.hn-visible {
  opacity: 1;
  pointer-events: auto;
}
.hn-fb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.hn-fb:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
}
.hn-fb--zalo { background: var(--fc-zalo); }
.hn-fb--phone { background: var(--fc-red); }
.hn-fb--zalo::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid var(--fc-zalo);
  animation: hn-ring-pulse 2s ease-in-out infinite;
}
.hn-fb--price { background: var(--fc-blue); }
.hn-fb i {
  color: #fff;
  font-size: 19px;
}
.hn-fb svg,
.hn-fb__icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.hn-fb__tip {
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.hn-fb:hover .hn-fb__tip { opacity: 1; }
.hn-fb--phone::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid var(--fc-red);
  animation: hn-ring-pulse 2s ease-in-out infinite;
}
@keyframes hn-ring-pulse {
  0%, 100% {
    opacity: .7;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@media (max-width: 767.98px) {
  .hn-floats {
    right: 10px;
    bottom: 16px;
  }
  .hn-fb {
    width: 44px;
    height: 44px;
  }
}

/* ── QUOTE POPUP — shared across all pages ───────────────────────
   quotePopup/quoteOverlay được render trong floating-component.php
   (load trên mọi trang). CSS này đảm bảo popup ẩn đúng cách và
   định vị fixed khi mở, kể cả trên trang không load xemoi/xecu CSS.
   ─────────────────────────────────────────────────────────────── */
.hidden {
  display: none !important;
}

.qp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.qp-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 920px;
  max-width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  z-index: 1000;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}

.qp-close {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 24px;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 10;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

@media (max-width: 767.98px) {
  .qp-modal .qp-close {
    top: 8px !important;
    right: 8px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 34px !important;
    line-height: 1 !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  }
}

/* ── SUCCESS POPUP — fixed overlay, no page flow ───────────────── */
body.honda-popup-open {
  overflow: hidden;
}

.honda-popup {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.honda-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

.honda-popup__dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 22px 20px 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  animation: hondaPopupIn 0.18s ease-out;
}

.honda-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: #4a4a4a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.honda-popup__close:hover,
.honda-popup__close:focus {
  background: rgba(204, 0, 0, 0.1);
  color: #cc0000;
}

.honda-popup__icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}

.honda-popup__body {
  padding-right: 34px;
}

.honda-popup__title {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

.honda-popup__text {
  font-size: 15px;
  line-height: 1.55;
  color: #4b5563;
}

@keyframes hondaPopupIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── BREADCRUMB BAR ── */
.bcrumb-bar{background:var(--color-neutral-100);border-bottom:1px solid var(--color-neutral-200);}
.bcrumb-list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:var(--space-2) 0;gap:0;}
.bcrumb-item{display:flex;align-items:center;min-width:0;font-size:14px;color:var(--color-neutral-500);}
.bcrumb-item+.bcrumb-item::before{content:">";margin:0 var(--space-2);color:var(--color-neutral-400);flex-shrink:0;}
.bcrumb-item a{color:var(--color-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out);}
.bcrumb-item a:hover{color:var(--color-link);text-decoration:underline;}
.bcrumb-item--active{color:var(--color-neutral-500);font-weight:600;}
.bcrumb-item svg{vertical-align:middle;margin-top:-2px;margin-right:4px;}