@import "./breakpoints.css";
@import "./fontawesome-used.css";

/* ============================================================
   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 (--bp-lt-1024) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (--bp-lt-md) { .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 (--bp-lt-md) {
  .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;}