/* Custom elements default to inline - force block for correct layout */
media-gallery,
product-form,
tabs-section,
page-content,
frequently-bundle,
carousel-slider {
  display: block;
}

.z-999 {
  z-index: 999;
}

.btn {
  border-radius: var(--rounded-button);
}

select {
  padding: 4px;
}

select option {
  padding: 4px;
  /* Add padding around each option */
}

/* ============================================
   PRODUCT DETAILS ACCORDION - CLEAN & MODERN
   ============================================ */

/* Base details/summary reset */
details>summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

details>summary::-webkit-details-marker {
  display: none;
}

/* Product details accordion container */
.product-form-wrapper details.group\/details {
  position: relative;
  background: var(--color-background);
  border: 1px solid var(--color-neutral-50);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.product-form-wrapper details.group\/details:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.product-form-wrapper details.group\/details[open] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Summary (header) styling */
.product-form-wrapper details.group\/details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--color-foreground);
  background: var(--color-background);
  position: relative;
}

.product-form-wrapper details.group\/details summary:hover {
  background: #f8f8f8;
}

.product-form-wrapper details.group\/details[open] summary {
  background: #f8f8f8;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-neutral-50);
}

/* Summary title */
.product-form-wrapper details.group\/details summary h3 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
}

/* Icon styling - no animation */
.product-form-wrapper details.group\/details summary .icon-carret-down {
  color: var(--color-neutral-100);
  font-size: 1.8rem;
}

.product-form-wrapper details.group\/details[open] summary .icon-carret-down {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.product-form-wrapper details.group\/details summary:hover .icon-carret-down {
  color: var(--color-primary);
}

/* Content area - instant display */
.product-form-wrapper details.group\/details .content {
  display: none;
  padding: 20px;
}

.product-form-wrapper details.group\/details[open] .content {
  display: block;
}

/* Content typography */
.product-form-wrapper details.group\/details .content.prose {
  line-height: 1.7;
  color: var(--color-foreground);
}

.product-form-wrapper details.group\/details .content.prose p {
  margin-bottom: 12px;
}

.product-form-wrapper details.group\/details .content.prose ul,
.product-form-wrapper details.group\/details .content.prose ol {
  margin-left: 20px;
  margin-bottom: 12px;
}

.product-form-wrapper details.group\/details .content.prose li {
  margin-bottom: 8px;
}

/* First accordion item special styling */
.product-form-wrapper details.group\/details:first-of-type {
  margin-top: 0;
}

/* Active state indicator */




/* Mobile optimizations */
@media (max-width: 767px) {
  .product-form-wrapper details.group\/details {
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .product-form-wrapper details.group\/details summary {
    padding: 14px 16px;
    font-size: 1.5rem;
  }

  .product-form-wrapper details.group\/details summary h3 {
    font-size: 1.5rem;
  }

  .product-form-wrapper details.group\/details[open] .content {
    padding: 16px;
  }

  .product-form-wrapper details.group\/details summary .icon-carret-down {
    font-size: 1.6rem;
  }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-form-wrapper details.group\/details summary {
    padding: 15px 18px;
  }
}

/* Enhanced content styling (image sizing handled by the universal .content img rule) */
.product-form-wrapper details.group\/details .content.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.product-form-wrapper details.group\/details .content.prose table td,
.product-form-wrapper details.group\/details .content.prose table th {
  padding: 10px;
  border: 1px solid var(--color-neutral-50);
}

.product-form-wrapper details.group\/details .content.prose table th {
  background: var(--color-neutral-50);
  font-weight: 600;
}

/* Smooth scroll behavior when opening */
.product-details-accordion {
  scroll-margin-top: 100px;
}


/* Legacy support for icon-carret-right */
details[open]>summary>.icon-carret-right {
  transform: rotate(90deg);
}

.h-inherit {
  height: inherit !important;
}

.break-word {
  word-break: break-word;
}

.addtocart-btn {
  --color-button-primary: var(--color-addtocart-bg);
  --color-button-primary-text: var(--color-addtocart);
}

.card-product .addtocart-btn {
  --color-button-primary: var(--color-primary);
  --color-button-primary-text: #fff;
  padding: 7px;
  width: 3.2rem;
  height: 3.2rem;
  position: relative;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .card-product .addtocart-btn {
    padding: 11px 8px;
    width: 100%;
    height: auto;
    border-radius: var(--rounded-button);
    position: relative;
  }

  /* card dọc: nút quick-add luôn là icon tròn cố định, không nở full-width như card ngang */
  .card-product .addtocart-btn.addtocart-btn--icon {
    width: 3.2rem;
    height: 3.2rem;
    padding: 7px;
    border-radius: 9999px;
  }
}

/* nút quick-add icon tròn (card dọc): nổi bật khỏi nền card bằng shadow, mọi breakpoint */
.card-product .addtocart-btn.addtocart-btn--icon {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.btn:disabled {
  opacity: 0.5;
}

.collection-item-thumb-bg::after {
  display: block;
  content: "";
  background: #ebebeb;
  width: 50% !important;
  height: 50% !important;
  border-radius: 100%;
  position: absolute;
  margin: auto;
  z-index: -1 !important;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all .3s ease;
}

.collection-item-thumb-bg:hover::after {
  transform: scale(1.1) translateZ(0);
}

@media (min-width: 768px) {
  .collection-item span {
    font-size: 1.8rem;
  }
}

.collection-item-thumb-bg:hover::after {
  background: var(--coll-bg-hover);
  background: linear-gradient(to top,
      color-mix(in oklab, var(--coll-bg-hover), white 14%) 0%, var(--coll-bg-hover) 55%,
      color-mix(in oklab, var(--coll-bg-hover), black 12%) 100%);
  /* transform: translate(-50%, -50%) scale(1.04); */
}

.section-flashsale:after {
  z-index: -1;
}

.overflow-item {
  display: none;
}

.aside-item {
  background: var(--color-background);
}

.filter-container {
  gap: 1px;
}

/* ── Bộ lọc collection dạng thẻ (card) ──
   Mỗi nhóm lọc (danh mục/thương hiệu/giá...) tách thành 1 thẻ trắng bo góc,
   thay cho kiểu list liền khối chia hairline cũ. */
.collection-filter .filter-container {
  background: transparent;
  gap: 1.6rem;
}

.collection-filter .aside-item {
  background: var(--color-background);
  border: 1px solid var(--color-neutral-50);
  border-radius: var(--rounded-lg);
  padding: 1.8rem 2rem;
}

.collection-filter .aside-title .title-head {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-foreground);
}

.collection-filter .filter-item {
  padding-left: 0;
}

.collection-filter .filter-item--check-box label {
  font-size: 1.4rem;
  color: var(--color-foreground);
}

.collection-filter .form-checkbox,
.collection-filter .form-radio {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--color-primary);
  border-color: var(--color-neutral-200);
}

.collection-filter .filter-item-toggle {
  font-size: 1.3rem;
  padding-left: 0;
}

.collection-filter .facet-form {
  display: block;
}

@media (max-width: 1269px) {
  .collection-filter {
    position: fixed;
    top: 0 !important;
    right: 0;
    width: 100%;
    z-index: 9999;
    max-height: 100vh;
    overflow: auto;
    border-radius: 0px;
  }
}

.is-empty .cart-form {
  display: none;
}

.portal--modal .portal-inner {
  height: auto;
  max-width: 100.24rem;
  width: 100%;
}

@media(max-width: 1024px) {
  .portal--modal .portal-inner {
    max-width: 72.4rem
  }
}

.portal--modal.portal--modal-sm .portal-inner {
  height: auto;
  max-width: 50rem;
}

.loading-icon {
  height: 2rem;
}

.loading>span:not(.loading-icon) {
  display: none;
}

.map iframe {
  width: 100%;
}

/** compare qv **/

#quick-view-compare .portal-inner {
  width: calc(100% - var(--container-padding) * 2);
  max-width: calc(1520px - var(--container-padding) * 2);
  height: auto;
  bottom: var(--container-padding) !important;
  top: auto !important;
  overflow: initial;
  box-shadow: var(--shadow-l);
  position: absolute;
}

#PortalClose-quick-view {
  top: -5rem;
}

.compare-product__qv-show {
  grid-column: 4;
}

@media (max-width: 767px) {
  .compare-product__qv-show {
    grid-column: 1 / -1;
  }
}

.color-spot {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: var(--rounded-full);
  overflow: hidden;
  border: #fff;
  display: block;
}

.color-swatch {
  width: 40px;
  height: 40px;
  padding: 0;
  box-shadow: 0 0 0 1px var(--color-neutral-50),
    inset 0 0 0 2px var(--color-background);
  overflow: hidden;
}

.product-gallery {
  --thumbs-size: 8rem;
}

/* Mobile - Force bottom layout */
@media (max-width: 767px) {
  .product-gallery.layout-left .gallery-container {
    display: block !important;
  }

  .product-gallery.layout-left .embla-thumbs,
  .product-gallery.layout-left .gallery-main {
    order: initial !important;
    width: auto !important;
    flex: none !important;
  }

  .product-gallery.layout-left .gallery-thumbnails {
    margin-top: 0.75rem !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
  }

  .product-gallery.layout-left .gallery-thumbnails .embla__container {
    flex-direction: row !important;
    height: auto !important;
  }

  .product-gallery.layout-left .gallery-thumbnails .embla__slide {
    width: 6.1rem !important;
  }
}

/* Desktop only - Left layout */
@media (min-width: 768px) {
  .product-gallery.layout-left .gallery-container {
    display: flex !important;
  }

  .product-gallery.layout-left .embla-thumbs {
    order: 1 !important;
    width: 8rem !important;
    flex-shrink: 0 !important;
  }

  .product-gallery.layout-left .gallery-main {
    order: 2 !important;
    flex: 1 !important;
  }

  .product-gallery.layout-left .gallery-thumbnails .embla__container {
    flex-direction: column !important;
    height: 100% !important;
  }

  .product-gallery.layout-left .gallery-thumbnails .embla__slide {
    width: 100% !important;
  }
}

/* Thumbnail styling improvements */
.gallery-thumbnails .embla__slide {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.gallery-thumbnails .embla__slide:hover {
  opacity: 0.8;
}

.gallery-thumbnails .embla__slide.embla-thumbs__slide--selected {
  opacity: 1;
}

.gallery-thumbnails .embla__slide>div {
  border: 2px solid transparent;
  border-radius: 0.5rem;
  transition: border-color 0.3s ease;
}

.product-gallery--vertical .embla-thumbs .embla__container {
  overflow: hidden;
}

@media (min-width: 768px) {
  .product-gallery--vertical .embla-thumbs .embla__container {
    touch-action: pan-x pinch-zoom;
    flex-direction: column;
  }

  .product-gallery--vertical .gallery-container {
    padding-left: calc(var(--thumbs-size) + var(--spacing-3));
  }

  #quick-view-product .gallery-container {
    padding-left: 0;
  }

  .product-gallery--vertical .embla-thumbs {
    position: absolute;
    inset: 0;
    height: 100%;
    z-index: 2;
    width: max-content;
  }

  .product-gallery--vertical .embla-thumbs .embla__slide {
    margin: 0;
  }
}

.ega-badge-ctd__item {
  color: var(--color-flashsale-timer);
  background-color: var(--color-flashsale-timer-bg);
}

.stock-percent {
  background: var(--color-flashsale-process);
}

.flashsale-heading {
  font-weight: var(--font-headings-weight);
  font-family: var(--font-headings-family);
}

.flashsale-tab {
  cursor: pointer;
}

.flashsale-tab.ended {
  cursor: not-allowed;
  display: none;
}

.flashsale-tab .status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--rounded-full);
}

.flashsale-tab.ongoing .status {
  background: var(--color-flashsale-tab-bg);
  color: var(--color-flashsale-tab);
}

.product-flashsale-item {
  color: var(--color-flashsale);
  background: var(--color-flashsale-bg);
}

.flashsale-tab.active {
  background: var(--color-flashsale-tab-bg);
  color: var(--color-flashsale-tab);
  border-radius: 12px;
}

.flashsale-nav {
  border-radius: 12px;
}

.flashsale-background {
  --side-width: 120px;
  width: calc(1440px - var(--spacing-3) - 2 * var(--side-width));
}

.flashsale-heading:hover a {
  color: var(--color-flashsale-title-hover);
}

/* Dots của carousel Flash Sale nằm trên nền tối (--color-flashsale-bg) nên dot
   active (--color-primary) bị chìm. Dùng màu sáng để tách nền: dot mờ trắng,
   dot active theo màu chữ flashsale (mặc định #fff). */
.section-flashsale .embla__dot {
  background-color: rgba(255, 255, 255, 0.45);
}

.section-flashsale .embla__dot--selected {
  background-color: var(--color-flashsale-title, #fff);
}

@media (max-width: 976px) {
  .flashsale-background {
    --side-width: 120px;
    width: 100%;
  }

  .flashsale-nav {
    border-radius: 0;
    padding: 12px 12px;
    /* margin: 0 -12px; */
  }
}

@media (max-width: 767px) {
  .flashsale-nav {
    border-radius: 0;
    /* padding: 0;
    margin: 0 -12px; */
  }

  .flashsale-nav>ul {
    grid-template-columns: repeat(3, auto);
    white-space: nowrap;
    gap: var(--spacing-1);
  }

  .flashsale-tab {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

.product-detail .flashsale__countdown-label {
  display: none !important;
}

.product-flashsale-item .stock-countdown {
  width: 50%;
}

.product-flashsale-item .ega-badge-ctd__item {
  width: 3.2rem;
}

.product-flashsale-item .ega-badge-ctd__h {
  font-size: var(--font-size-h6);
}

.product-flashsale-item .ega-badge-ctd__item span {
  display: none;
}

.product-flashsale-item:has(.active.ongoing) {
  padding: 0.8rem 1.5rem;
}

.product-price-group:has(.active.ongoing) {
  border: 1px solid var(--color-flashsale-bg);
}

.product-price-group:has(.active.ongoing) .price-box {
  padding: 1.2rem 1.5rem 0.8rem;
}

.product-flashsale-item .ega-badge-dot {
  display: block;
}

/* ============================================
   COUPON CARDS - MODERN DESIGN
   ============================================ */

.coupon-list {
  display: flex;
  flex-direction: column;
  grid-gap: 2rem;
  padding: 2rem;
  border-radius: 4px;
  max-height: 100%;
  overflow: auto;
  padding-bottom: calc(2rem + constant(safe-area-inset-bottom)) !important;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
}

/* ============================================
   COUPON CARD — vertical ticket layout (dark + gold)
   All colors come from theme settings via CSS vars,
   defaults live in settings_schema.json — no CSS fallback.
   ============================================ */
.coupon-ticket {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--coupon-active-bg);
  border-radius: 16px;
  padding: 2rem 1.8rem 1.8rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* giữ 2 lớp hoạ tiết bên dưới (z-index âm) không lọt ra ngoài card */
}

/* Lớp 1 — gradient nền + quầng sáng góc phải trên, pha từ chính 2 màu setting (nền + badge) */
.coupon-ticket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    /* quầng sáng góc phải trên, pha màu badge */
    radial-gradient(130% 100% at 100% -10%, color-mix(in srgb, var(--coupon-badge-color) 38%, transparent) 0%, transparent 55%),
    /* ánh sáng loang mềm, lệch tâm — mô phỏng đèn chiếu bắt trên bề mặt kim loại thật thay vì 1 vệt sáng cứng */
    radial-gradient(42% 60% at 20% 12%, rgba(255, 255, 255, 0.1) 0%, transparent 72%),
    radial-gradient(34% 50% at 82% 58%, rgba(255, 255, 255, 0.05) 0%, transparent 75%),
    /* nền dạng kim loại xước (brushed metal): nhiều dải sáng/tối xen kẽ thay vì 1 màu phẳng */
    linear-gradient(160deg,
      color-mix(in srgb, var(--coupon-active-bg) 100%, white 16%) 0%,
      var(--coupon-active-bg) 18%,
      color-mix(in srgb, var(--coupon-active-bg) 100%, black 30%) 42%,
      var(--coupon-active-bg) 60%,
      color-mix(in srgb, var(--coupon-active-bg) 100%, white 10%) 80%,
      color-mix(in srgb, var(--coupon-active-bg) 100%, black 22%) 100%);
}

/* Lớp 2 — hoạ tiết chấm bi mờ, tạo chất liệu như vé/coupon thật */
.coupon-ticket::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  background-image: radial-gradient(var(--coupon-active-title) 1px, transparent 1.6px);
  background-size: 14px 14px;
  mix-blend-mode: overlay;
}

.coupon-ticket:hover {
  transform: translateY(-2px);
}

/* ── Top row: icon circle (left) + info dot (right) ── */
.coupon-ticket__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Icon tròn kiểu kim loại đánh bóng: dải sáng-tối-sáng (brushed metal) + gờ nổi/chìm (inset bevel) */
.coupon-ticket__icon {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(145deg,
      color-mix(in srgb, var(--coupon-badge-color) 100%, white 65%) 0%,
      var(--coupon-badge-color) 30%,
      color-mix(in srgb, var(--coupon-badge-color) 100%, black 35%) 55%,
      var(--coupon-badge-color) 78%,
      color-mix(in srgb, var(--coupon-badge-color) 100%, white 45%) 100%);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 3px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coupon-active-bg);
  position: relative;
  z-index: 1;
}

.coupon-ticket__icon-img,
.coupon-ticket__icon-svg {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.coupon-ticket__info {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  color: var(--coupon-active-desc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.coupon-ticket__info svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* ── Body: title + desc + meta ── */
.coupon-ticket__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.coupon-ticket__title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--coupon-active-title);
  line-height: 1.3;
  margin: 0;
}

.coupon-ticket__desc {
  font-size: 1.3rem;
  color: var(--coupon-active-desc);
  line-height: 1.45;
  margin: 0;
}

.coupon-ticket__meta {
  font-size: 1.2rem;
  color: var(--coupon-active-desc);
  /* HSD trước đây mờ (opacity .75) khó đọc — tăng tương phản: bỏ giảm mờ + đậm nhẹ. */
  opacity: 1;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.coupon-ticket__meta:empty {
  display: none;
}

.coupon-ticket__meta .coupon-expiry:not(:empty) {
  display: block;
  margin-top: 0.2rem;
}

/* ── Ticket-style dashed divider with punched notches ── */
.coupon-ticket__divider {
  position: relative;
  height: 1px;
  margin: 0.2rem -1.8rem;
  /* độ mờ đặt trực tiếp vào màu viền (color-mix), KHÔNG dùng opacity trên chính phần tử này —
     opacity CSS áp cho cả subtree nên sẽ làm mờ theo luôn 2 chấm notch (con của div này) */
  border-top: 1.5px dashed color-mix(in srgb, var(--coupon-active-desc) 40%, transparent);
}

.coupon-ticket__notch {
  position: absolute;
  top: 50%;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-background-body);
  transform: translateY(-50%);
}

.coupon-ticket__notch--left {
  left: -0.8rem;
}

.coupon-ticket__notch--right {
  right: -0.8rem;
}

/* ── Footer: code (left) + outlined copy button (right) ── */
.coupon-ticket__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.coupon-ticket__code {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--coupon-badge-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chữ code ánh kim (foil text): gradient sáng-tối-sáng cắt theo glyph, icon tag giữ màu đặc để không mất icon khi color:transparent */
.coupon-ticket__code span {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--coupon-badge-color) 100%, white 60%) 0%,
      var(--coupon-badge-color) 45%,
      color-mix(in srgb, var(--coupon-badge-color) 100%, black 30%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.coupon-ticket__copy-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coupon-badge-color);
  padding: 0.6rem 1.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* viền dạng bezel kim loại: 2 lớp background (nền thật + gradient) cắt theo padding-box/border-box thay vì border phẳng 1 màu */
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--coupon-active-bg), var(--coupon-active-bg)) padding-box,
    linear-gradient(135deg,
      color-mix(in srgb, var(--coupon-badge-color) 100%, white 55%) 0%,
      var(--coupon-badge-color) 50%,
      color-mix(in srgb, var(--coupon-badge-color) 100%, black 25%) 100%) border-box;
  /* unified pill radius. !important needed: theme has a global `.btn{border-radius:9999px!important}` (force-rounded) that otherwise wins */
  border-radius: 8px !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.coupon-ticket__copy-btn:hover {
  background: linear-gradient(135deg, var(--coupon-active-button-bg) 0%, color-mix(in srgb, var(--coupon-active-button-bg) 80%, white 20%) 100%) border-box;
  color: var(--coupon-active-button-text);
  transform: scale(1.02);
}

/* ── Expired state ── */
.coupon-ticket.expired {
  opacity: 0.6;
}

.coupon-ticket.expired .coupon-ticket__copy-btn,
.copy-button.coupon-expired {
  border-color: var(--coupon-active-desc);
  color: var(--coupon-active-desc);
  background: transparent;
  cursor: not-allowed;
}

.coupon-ticket.expired .coupon-ticket__copy-btn:hover {
  transform: none;
}

/* Hạn sử dụng trong modal chi tiết mã */
.coupon-modal-expiry {
  font-size: 1.3rem;
  color: var(--coupon-active-desc, #666666);
  opacity: 0.85;
  /* kéo sát khối điều kiện phía trên (khối đó có margin-bottom riêng) */
  margin-top: -1.6rem;
}

/* ── Dải mã giảm giá ở trang chi tiết sản phẩm ── */
/* Layout viết bằng CSS thật (theme dùng CSS prebuilt, không compile Tailwind mới) */
.coupon-group {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-width: 0;
}

.coupon-group-header {
  flex: 0 0 auto;
}

.coupon-group-strip {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Danh sách mã cuộn ngang khi thiếu chỗ — thay vì cắt cụt mã thành "EG…" */
.coupon-group-list {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.coupon-group-list::-webkit-scrollbar {
  display: none;
}

.coupon-group-item-wrap {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Chip co theo độ dài mã, luôn hiện trọn mã */
.coupon-group-item {
  white-space: nowrap;
  transition: transform 0.2s ease;
}

.coupon-group-more {
  flex: 0 0 auto;
}

.coupon-group-more>div {
  transition: transform 0.2s ease;
}

@media (hover: hover) {

  .coupon-group-item:hover,
  .coupon-group-more>div:hover {
    transform: scale(1.05);
  }
}

/* Mobile: nhãn xuống dòng riêng để dải mã được trọn chiều ngang.
   Hiện ĐỦ mã và cho cuộn ngang (mã cuối thò ra làm tín hiệu còn nội dung bên phải)
   thay vì ẩn từ mã thứ 3 — ẩn bớt khiến dải không còn gì tràn nên mất luôn cuộn. */
@media (max-width: 767px) {
  .coupon-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
}

/* Mã hết hạn ở dải mã trang chi tiết sản phẩm */
.coupon-group-item.expired {
  opacity: 0.6;
  text-decoration: line-through;
}

/* ── Carousel — equal height slides ── */
.section-coupons .embla {
  overflow: visible;
}

.section-coupons .embla__viewport {
  overflow-x: clip;
  overflow-y: visible;
}

.section-coupons .embla__container {
  display: flex;
  align-items: stretch;
}

/* Slide widths via REAL css — theme's Tailwind JIT does NOT compile hand-edited
   arbitrary values (w-[80%]) at runtime, so those classes are inert. Control widths here.
   Mobile 80% → ~1.25 items visible (peek signals horizontal scroll). */
.section-coupons .embla__slide {
  display: flex;
  height: auto;
  width: 80%;
  flex: 0 0 80%;
  max-width: 80%;
}

@media (min-width: 768px) {
  .section-coupons .embla__slide {
    width: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
}

@media (min-width: 1280px) {
  .section-coupons .embla__slide {
    /* --coupon-items-per-row đặt từ settings (coupon_items_per_row), fallback 3 nếu section cũ chưa render inline var */
    width: calc(100% / var(--coupon-items-per-row, 3));
    flex-basis: calc(100% / var(--coupon-items-per-row, 3));
    max-width: calc(100% / var(--coupon-items-per-row, 3));
  }
}

.section-coupons .embla__slide coupon-item {
  display: flex;
  width: 100%;
  flex: 1;
}

.section-coupons .coupon-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.section-coupons .coupon-ticket {
  height: 100%;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .coupon-ticket {
    gap: 0.8rem;
    padding: 1.6rem 1.4rem 1.4rem;
  }

  .coupon-ticket__icon {
    width: 3.6rem;
    height: 3.6rem;
  }

  .coupon-ticket__title {
    font-size: 1.5rem;
  }

  .coupon-ticket__divider {
    margin: 0.2rem -1.4rem;
  }

  .coupon-ticket__code {
    flex: 1 1 auto;
    min-width: 0;
  }
}




/* ============================================
   COUPON MODAL - MODERN UI
   ============================================ */

.coupon-modal-inner {
  max-width: 500px;
  width: 100%;
}

.coupon-modal-content {
  position: relative;
}

/* Modal Badge */
.coupon-modal-badge {
  background: var(--coupon-badge-color, #FF6B00);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 16px;
  border-radius: 20px;
}

/* Modal Title */
.coupon-modal-title {
  color: var(--color-foreground);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.coupon-modal-subtitle {
  color: var(--color-neutral-300);
  line-height: 1.5;
}

/* Code Display Box */
.coupon-modal-code-box {
  background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
  border: 2px dashed var(--coupon-active-badge-from, #FF6B00);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.coupon-modal-code-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.coupon-code-display {
  position: relative;
  z-index: 1;
}

.coupon-code-text {
  font-size: 28px;
  font-weight: 700;
  color: var(--coupon-active-badge-from, #FF6B00);
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

/* Modal Description */
.coupon-desc {
  color: var(--color-foreground);
  line-height: 1.7;
  font-size: 14px;
}

.coupon-desc ul,
.coupon-desc ol {
  margin-left: 18px;
  margin-bottom: 0;
  /* reset của theme bỏ list-style nên phải khai báo lại để có gạch đầu dòng */
  list-style: disc outside;
}

.coupon-desc li {
  margin-bottom: 4px;
  padding-left: 2px;
}

.coupon-desc li::marker {
  color: var(--coupon-badge-color, #FF6B00);
}

/* Tiêu đề khối điều kiện trong modal */
.coupon-desc-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--coupon-active-title, #1a1a1a);
  margin-bottom: 0.6rem;
}

/* Modal Actions */
.coupon-modal-actions {
  gap: 12px;
}

.coupon-modal-actions .btn {
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.coupon-modal-actions .btn--secondary:hover {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-200);
  transform: translateY(-1px);
}

.coupon-modal-actions .btn--primary {
  background: var(--coupon-active-button-bg, #1A1A1A);
  color: var(--coupon-active-button-text, #FFFFFF);
  border: none;
}

.coupon-modal-actions .btn--primary:hover {
  transform: translateY(-2px);
}

.coupon-modal-actions .icon-copy {
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .coupon-modal-inner {
    max-width: 100%;
  }

  .coupon-modal-content {
    padding: 24px !important;
  }

  .coupon-modal-title {
    font-size: 20px !important;
  }

  .coupon-code-text {
    font-size: 22px;
    letter-spacing: 1px;
  }

  .coupon-modal-code-box {
    padding: 16px;
  }
}

@media (min-width: 768px) {
  .product-flashsale-item .stock-countdown {
    width: 20rem;
  }
}

.cart-drawer-related-products {
  max-width: calc(1440px - var(--dialog-max-width) - 1.6rem);
  padding-left: 0.8rem;
  margin: auto;
  width: calc(100% - var(--dialog-max-width) - 1.6rem);
}

.cart-releated-products .card-product--horizontal .card-product__cta {
  display: block;
}

.card-product__option.selected .card-product__option-dot {
  box-shadow: none;
}

.card-product__option-dot-lg {
  width: 3.2rem;
  height: 3.2rem;
}

.card-product__option-dot-md {
  width: 2.6rem;
  height: 2.6rem;
}

.card-product__option-dot-sm {
  width: 1.4rem;
  height: 1.4rem;
}

.card-product__option-dot-sm {
  border-radius: 100%;
}

@media (max-width: 1024px) {
  .card-product__option-dot-lg {
    width: 2.4rem;
    height: 2.4rem;
  }

  .card-product__option-dot-md {
    width: 2rem;
    height: 2rem;
  }

  .card-product__option-dot-sm {
    width: 1.4rem;
    height: 1.4rem;
  }
}

.card-product--horizontal form {
  padding-inline: 0;
}

@media (max-width: 767px) {
  .card-product--horizontal form {
    padding-inline: 0;
  }

  .card-product--horizontal form {
    grid-template-columns: 8rem 1fr;
  }
}

.card-product .stock-countdown-inner {
  margin-bottom: var(--spacing-3);
}

@media (max-width: 767px) {
  .card-product .stock-countdown-inner {
    margin-bottom: 0;
  }
}

.slide-in-left {
  -webkit-animation: slide-in-left 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: slide-in-left 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right {
  -webkit-animation: slide-in-right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-bottom {
  -webkit-animation: slide-in-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.scale-in-hor-left {
  -webkit-animation: scale-in-hor-left 0.4s ease-out both;
  animation: scale-in-hor-left 0.4s ease-out both;
}

@-webkit-keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }

  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

@keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 0;
  }

  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

animating:not(.fade-in),
.animating:not(.fade-in)>* {
  opacity: 0;
}

.fade-in {
  -webkit-animation: fade-in 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animation-reverse {
  animation-direction: reverse !important;
}

.cro-btn-item .cart-count {
  margin-right: -1.6rem;
  top: -0.4rem;
}

.cro-btns .cart-limit-note,
.cro-btns .cart-vat-note {
  display: none;
}

.cro-btns .cart-total {
  padding: 0;
  flex-direction: column;
}

.cro-btns .cart-submit button {
  padding: 0.8rem;
}

cart-form,
productform {
  transition: opacity 0.3s ease-out;
}

product-form.loading .product-cta {
  pointer-events: none;
  opacity: 0.5;
}

cart-form.loading,
product-form.loading .product-cta {
  pointer-events: none;
}

.cart-item.loading .cart-total-col .price,
cart-form.loading .cart-total .price {
  display: none;
}

cart-form.loading .cart-total .loading-icon,
.cart-item.loading .cart-total-col .loading-icon {
  display: inline-flex;
  color: var(--color-neutral-50);
  height: 1.6rem;
}

product-form.loading .product-cta .btn .loading-icon {
  display: none;
}

.variant-picker__input input.disabled~label {
  opacity: 0.5;
  position: relative;
  overflow: hidden;
}

.variant-picker__input input.disabled~label:after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-neutral-100);
  position: absolute;
  transform: rotate(200deg) scale(1.1);
  left: 0;
}

.variant-picker__input input.disabled~label.color-swatch:after {
  transform: rotate(220deg) scale(1.1);
}

.portal--modal .portal-close-button {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 999;
}

@media (max-width: 767px) {
  .portal--modal .portal-close-button {
    right: 0.8rem;
    top: 0.8rem;
  }
}

/* Add-to-cart success popup: close button sits INSIDE the modal's
   top-right corner (all viewports) so it never overlaps the page
   content behind the overlay. */
#add-to-cart-popup .portal-close-button {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--rounded-full);
  background: transparent;
  color: var(--color-neutral-300);
  z-index: 10;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

#add-to-cart-popup .portal-close-button:hover {
  color: var(--color-foreground);
  background: var(--color-neutral-50);
}

#add-to-cart-popup .portal-close-button:active {
  transform: scale(0.92);
}

/* keep the success title clear of the close button */
#add-to-cart-popup .popup-header {
  padding-right: 3.6rem;
}

/* Breadcrumbs: subtle full-width background strip.
   Override the color via --breadcrumb-bg if a different tone is wanted. */
.breadcrumbs {
  background-color: var(--breadcrumb-bg, var(--color-neutral-50));
  margin-bottom: var(--spacing-6);
}

.sapo-product-reviews-badge .sapo-product-reviews-star i {
  font-size: var(--font-size-body) !important;
}

.bpr-success-popup .icon-checked {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 975px) {
  #product-review {
    display: block;
  }
}

@media (max-width: 767px) {
  .gallery-main {
    position: relative;
  }
}

.card-product__badges:has(.product-promo-tag) {
  display: block;
}

.card-product__title {
  --font-size-body: 1.6rem;
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .card-product__title {
    --font-size-body: 1.4rem;
  }
}

.card-product--vertical.card-product__title {
  min-height: calc(var(--font-size-body) * 1.4 * 2);
}

.cro-btns {
  display: none;
}

@media (max-width: 767px) {
  .cro-btns:has(.cro-btn-item) {
    display: block;
  }
}

.promo-box__body p {
  margin: 0;
}

.promo-box__body ol,
.promo-box__body ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--spacing-2);
}

@media (max-width: 992px) {

  .promo-box__body ol,
  .promo-box__body ul {
    grid-template-columns: 1fr;
  }
}

/* ===== Promo box "Khuyến mãi - Ưu đãi": viền đứt nét + heading kiểu legend ===== */
/* Selector element+class để thắng specificity của .promo-box-group trong components.css */
promo-box.promo-box-group {
  display: block;
  position: relative;
  margin-top: 12px;
  /* Viền đứt nét theo màu primary của theme */
  border: 1px dashed var(--color-primary);
  /* Bo góc theo chuẩn rounded-md của theme cho đồng nhất với các box khác */
  border-radius: var(--rounded-md);
  /* Nền fill đặt ở container (đã bo góc) để không lòi góc vuông ra ngoài viền */
  background: var(--color-background, #fff);
  overflow: visible;
}

/* Heading nổi trên viền trên (fieldset-legend), nền che nét đứt phía sau */
.promo-box-group .promo-box__header {
  position: absolute;
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  padding: 0 8px;
  background: var(--color-background, #fff);
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
}

/* Chừa khoảng trống phía trên cho heading legend; nền trong suốt để container (bo góc) lo phần fill */
.promo-box-group .promo-box__body {
  padding-top: 20px;
  background: transparent;
}

/* Bullet tròn cho từng dòng ưu đãi (nguồn metafield/settings) */
.promo-box-group .promo-box__body-item {
  position: relative;
  padding-left: 18px;
  line-height: 1.6;
}

.promo-box-group .promo-box__body-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Link "Sao chép" đỏ inline sinh từ shortcode [coupon="..."] */
.copy-button--inline {
  display: inline;
}

.copy-button--inline .copy-button {
  display: inline;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #f5533d;
  /* đỏ cam cố định cho link "Sao chép" */
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

.copy-button--inline .copy-button:hover {
  text-decoration: underline;
}

/* Trạng thái đã copy (class 'copied' do <copy-button> trong main.js thêm vào) */
.copy-button--inline.copied .copy-button {
  color: var(--color-neutral-400);
  text-decoration: none;
}

.btn.coupon-expired {
  color: var(--color-neutral-400);
  background: var(--color-neutral-50);
  border-color: var(--color-neutral-50);
  filter: none;
  opacity: 1;
}

.flashsale-ended .tab-content {
  display: none;
}

.flashsale-ended .flashsale-end-message {
  display: block;
  padding: var(--spacing-6) var(--spacing-2);
}

.flashsale-ended .flashsale-nav {
  display: none;
}

.heading-bar {
  position: relative;
}

.heading-bar a:hover {
  opacity: var(--color-link);
}

.heading {
  font-size: var(--font-size-h3);
  position: relative;
  z-index: 1;
  width: auto;
  display: inline-block;
  font-weight: var(--font-headings-weight);
  font-family: var(--font-headings-family);
}

.heading-bar .heading {
  text-wrap: pretty;
}

.heading-bar .heading .heading-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  object-fit: contain;
}

.section-flashsale--single .flashsale__countdown-timer {
  flex-direction: row;
}

.heading:not([class*="mb"]) {
  margin-bottom: 3.2rem;
}

.heading span {
  color: var(--color-highlight);
  position: relative;
  display: inline-block;
}

/* Sub-headline dùng chung cho mọi section (qua snippet 'heading' param `subtitle`,
   hoặc gắn thủ công ở section không dùng snippet chung như flashsale) — không
   gạch chân, đồng nhất 1 kiểu cho toàn site. */
.heading-subtitle {
  margin: 0.8rem 0 3.2rem;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--color-neutral-300, #6B5F58);
  text-decoration: none;
}

.heading:has(+ .heading-subtitle) {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .heading-subtitle {
    font-size: 1.4rem;
    margin-bottom: 2rem;
  }

  .heading {
    font-size: var(--font-size-h3);
  }

  .heading:not([class*="mb"]) {
    margin-bottom: 2rem;
  }

  .section-flashsale--single .flashsale__countdown-timer {
    flex-direction: column;
  }

  .section-flashsale .flashsale-heading {
    font-size: var(--font-size-h4) !important;
  }
}

.heading:has(.heading-icon) {
  padding-right: 45px;
}



@media (max-width: 767px) {
  .heading {
    font-size: var(--font-size-h4);
    margin-bottom: 1.2rem;
  }
}



.card-article__title {
  min-height: calc(var(--font-size-body) * 1.5 * 2);
}

.section-main-cart .cart-summary-info {
  position: relative;
}

.section-main-cart .cart-summary-info:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0.8rem 2.4rem 0px rgba(var(--color-primary-rgb), 0.15);
  top: 0;
  left: 0;
  opacity: 0.1;
  z-index: -1;
}

@media (max-width: 976px) {
  .header-search {
    display: none;
  }

  .search-opener {
    display: block;
  }
}

.landing-page-section.section-flashsale:before,
.landing-page-section.section-flashsale:after {
  content: none;
}

.product-flashsale-item:has(.not-started),
.product-flashsale-item:has(.ended) {
  display: none;
}

.product-flashsale-item:has(.active.ongoing)~.product-flashsale-item {
  display: none;
}

.compare-opener {
  position: fixed;
  bottom: 60px;
  display: block;
  top: auto !important;
  left: 25px;
  transform: translateY(-50%) scale(1);
  z-index: 999;
}

/* Nút "So sánh" nổi (bottom-left): markup là <div class="btn btn--secondary">, không phải
   <button> — rule cũ nhắm `button` nên không áp, khiến nút mất nền + đổ bóng, bị chìm vào
   ảnh SP khi cuộn. Nhắm đúng .btn, ép nền đặc + viền + bóng để luôn nổi trên nội dung. */
.compare-opener button,
.compare-opener .btn {
  background: var(--color-background);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.2);
}

.compare-opener.hidden {
  transform: translateY(-50%) scale(0);
  display: none;
}

/* Thanh CRO mobile — nút "Đặt lịch dịch vụ" (SP dịch vụ): giảm padding trái/phải để
   nhường chỗ cho chữ, tránh bị cắt (…). Text mặc định cũng rút còn "Đặt lịch dịch vụ". */
.cro-btns .cro-btn-item--addtocart .btn {
  padding-inline: 1rem;
}

#error-modal {
  --dialog-index: 4000;
}

#error-modal .portal-inner {
  max-width: 30rem;
}

.content {
  word-break: break-word;
}

.section-products:has(.no-products) {
  display: none !important;
}

.section-brand__container {
  padding: 1rem 0;
}

/* Slot cố định cho logo thương hiệu: giữ chỗ trước khi ảnh tải xong (chống layout shift).
   Ảnh không còn thuộc tính width/height vì mỗi logo có tỉ lệ khác nhau. */
.section-brand .scrolling-promotion__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 48px;
}

.section-brand .scrolling-promotion__item img {
  width: auto;
  height: auto;
  max-height: 48px;
  max-width: 140px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .section-brand .scrolling-promotion__item a {
    width: 110px;
    height: 36px;
  }

  .section-brand .scrolling-promotion__item img {
    max-height: 36px;
    max-width: 110px;
  }
}

footer .btn {
  color: var(--color-footer-text);
}

.footer-copyright {
  text-wrap: balance;
}

.card-product--vertical:after {
  opacity: 0.7;
}

.ega-badge-ctd__h {
  position: relative;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}

.ega-badge-ctd--transition::before {
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.ega-badge-ctd--animate:before {
  position: relative;
  content: "00\a 01\a 02\a 03\a 04\a 05\a 06\a 07\a 08\a 09\a 10\a 11\a 12\a 13\a 14\a 15\a 16\a 17\a 18\a 19\a 20\a 21\a 22\a 23\a 24\a 25\a 26\a 27\a 28\a 29\a 30\a 31\a 32\a 33\a 34\a 35\a 36\a 37\a 38\a 39\a 40\a 41\a 42\a 43\a 44\a 45\a 46\a 47\a 48\a 49\a 50\a 51\a 52\a 53\a 54\a 55\a 56\a 57\a 58\a 59\a";
  white-space: pre;
  top: calc(var(--value) * -1em);
  text-align: center;
}

.product-detail .module-buyxgety .list-product-buyxgety .item-product-buyxgety .product-content-buyxgety .product-title-buyxgety {
  white-space: initial;
}



.spl-pane iframe {
  width: 90%;
  height: 90%;
}

#contact_map iframe {
  height: 100%;
}

.card-product .sapo-buyxgety-badge {
  top: auto;
  bottom: 15px;
  right: 15px;
  min-width: 20px;
}

.card-product .sapo-buyxgety-badge .icon-buyxgety {
  max-width: 20px;
}

.card-product .sapo-combo-badge {
  position: absolute;
  left: 15px;
  z-index: 2;
  min-width: 50px;
  bottom: 15px;
  top: auto;
  right: auto;
  font-size: 8px;
}

.card-product .sapo-combo-badge .label-text {
  border-radius: 4px;
}

.card-product .sapo-combo-badge .label-text+.label-text {
  display: none;
}

.ae-lang-selected a {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
}

img.ae-icon-left {
  object-fit: contain;
  width: 16px;
}

.ae-type-dropdown {
  display: flex;
  align-items: center;
}

.ae-lang-selected a .ae-caret {
  width: auto;
}

.ae-lang-selected a span {
  display: none;
}

.ae-box-lang a span {
  display: inline;
}

#desktop-lang {
  min-width: 50px;
}

.prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  display: inline-block;
}

.no-products {
  display: none;
}

.no-products-content .embla__buttons,
.no-products-content .embla__dots {
  display: none;
}

.sapo-product-reviews-badge:empty {
  display: none;
}

.product-cta .btn {
  min-height: 60px;
}

.btn-live {
  border-radius: 5px;
  padding: 4px 10px 4px 22px;
  color: var(--header-live-color);
  border: 1px solid var(--header-live-color);
  background: transparent;
  outline: none;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  max-width: 130px;
  cursor: pointer !important;
  overflow: hidden;
  font-size: 13px;
}

.btn-live:after {
  content: " ";
  background: var(--header-live-color);
  width: 8px;
  height: 8px;
  position: absolute;
  left: 7px;
  top: calc(50% - 4px);
  border-radius: 50%;
  animation: pulse-red 1.65s linear infinite;
}

@media (max-width: 991px) {
  .btn-live {
    padding: 2px 5px 0px 20px;
  }

  .btn-live:after {
    left: 6px;
  }
}

@media (max-width: 767px) {
  .addThis_listSharing .btn-live {
    padding: 0;
    width: 40px;
    font-size: 10px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border: none;
  }

  .btn-live:after {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
}

@keyframes pulselive {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 0.3;
  }
}

@keyframes pulse-red {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 var(--header-live-color);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }

  100% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}

/** end naviagtion **/

.modal-live {
  position: fixed;
  overflow: hidden;
  max-width: 45%;
  max-height: 75%;
  bottom: 5px;
  top: auto !important;
  left: 50%;
  z-index: 9999;
  transform: translateY(calc(100% + 5px)) translateX(-50%);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

@media (max-width: 767px) {
  .modal-live {
    display: none !important;
  }
}

.modal-live.opened {
  transform: translateY(0) translateX(-50%);
}

/* Nút đóng phải NẰM TRONG hộp video và luôn hiện:
   - đặt ở ngoài (right: -40px) thì trên màn hình thấp/hẹp nút bị đẩy khỏi vùng nhìn thấy;
   - opacity: 0 chờ :hover thì trên thiết bị cảm ứng không bao giờ hiện được. */
.modal-live .btn-close--live {
  position: absolute;
  right: 6px;
  top: 6px;
  cursor: pointer;
  opacity: 1;
  z-index: 2;
  line-height: 0;
  padding: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

.modal-live iframe {
  border-radius: 10px;
  display: block;
  width: 100%;
  height: 100%;
}

.modal-live .modal-live--inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.btn--soldout:not(.hidden) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.price {
  font-family: var(--font-body-family);
}

.compare-price {
  font-family: var(--font-body-family);
}

.aspect-custom {
  aspect-ratio: var(--aspect-ratio);
}

cart-form .product-list>div {
  min-width: 270px;
}

.link-underline {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 300ms, color 300ms, width 300ms;
  padding-block-end: 3px;
}

.link-underline:hover {
  background-size: 100% 1px;
}

.main-product {
  --header-offset: 1.2rem;
  /* Guard against horizontal overflow leaking extra empty space on the right
     of the product detail. `clip` (with the default overflow-y:visible) does
     NOT create a scroll container, so the sticky gallery/info still work. */
  overflow-x: clip;
}

/* Layout "Thu gọn" trang sản phẩm (product_main_layout == 'box').
   Phải HẸP HƠN lòng .container (max 1440px, padding 6rem 2 bên → ~1320px ở ≥1440px)
   thì mới thấy khác "Full width"; để 140rem (1400px) như cũ luôn >= lòng container
   nên 2 kiểu render y hệt. 120rem (1200px) canh giữa (mx-auto) tạo khác biệt rõ. */
.product-detail-info-box-width {
  max-width: 120rem;
  width: 100%;
}

/* Tu 768px tro len: bo padding ngang cua gallery de mep noi dung khoi chi tiet
   san pham thang hang voi banner + breadcrumb ben tren.
   Nguong 768px khop dung voi noi `md:px-3` bat dau ap; duoi 768px class do
   khong ap nen padding von da bang 0, khong can dung toi.
   Scope toi .main-product (trang san pham chinh) vi class .product-detail con
   duoc dung boi featured-product -> quickview va shortcode-egaproduct; nhung
   noi do nam trong modal/shortcode co padding rieng, khong duoc dinh toi. */
@media (min-width: 768px) {
  .main-product .product-detail .product-gallery {
    padding-left: 0;
    padding-right: 0;
  }
}

.social-share-group {
  background-color: #f9fafb;
}

.header-pinned .main-product {
  --header-offset: calc(var(--header-height) - 1.2rem);
}

.peer:checked~.peer-checked\:bg-\[var\(--color-button-primary\)\] {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}

.card-product .price {
  font-size: 1.6rem;
}

.card-product .compare-price {
  font-size: 1.4rem;
}

@media (max-width: 767px) {
  .card-product .price {
    font-size: 1.4rem;
  }

  .card-product .compare-price {
    font-size: 1.2rem;
  }
}

/* Bundle Section Grid Layout */
.bundle-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: Stack vertically, image 100% */
  align-items: start;
  gap: 1.5rem;
  /* 24px on mobile */
  width: 100%;
  max-width: 100%;
}

/* Desktop: 2:3 ratio horizontal */
@media (min-width: 1024px) {
  .bundle-grid {
    grid-template-columns: 2fr 3fr;
    /* Desktop: Image 40%, Products 60% */
    gap: 4rem;
    /* 40px on desktop */
  }
}

/* Product Bundle - Modern Grid Layout */
.product-bundle-grid-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.product-bundle-grid {
  display: flex;
  width: 100%;
  gap: 1.5rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.product-bundle-grid::-webkit-scrollbar {
  display: none;
}

.product-bundle-grid {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Tablet & Desktop: Grid Layout */
@media (min-width: 768px) {
  .product-bundle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    overflow: visible;
    width: 100%;
  }
}

.product-bundle-card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-bundle-card:hover {
  box-shadow: none;
  transform: none;
}

.card-product-bundle .card-product__image img {
  transition: transform 0.3s ease;
}

/* Ảnh được canh giữa bằng translate(-50%, -50%) (xem product-add-item-bundle.bwt).
   `transform` là MỘT thuộc tính: ghi scale() trần ở đây sẽ xoá luôn phần translate
   -> ảnh nhảy xuống góc dưới-phải khi rê chuột. Phải giữ lại translate. */
.card-product-bundle:hover .card-product__image img {
  transform: translate(-50%, -50%) scale(1.05);
}

/* Bundle Card Responsive Fixes */
.card-product-bundle {
  height: 100%;
}

/* Bundle card corner radius: mirror the standard .card-product--vertical cards.
   Previously only the inner image <div> was rounded (hardcoded rounded-lg), so
   the product-card radius setting rounded the IMAGE but NOT the card box. Give
   the card box the same border + background + radius + overflow clip so the
   whole card rounds consistently with the other product cards. */
.card-product-bundle .item_product_main {
  border: 1px solid var(--color-neutral-50);
  background: var(--color-background);
  border-radius: var(--product-card-rounded, 0);
  overflow: hidden;
}

.card-product-bundle .item_product_main>form {
  border-radius: var(--product-card-rounded, 0);
  overflow: hidden;
}

/* Round only the TOP 2 corners of the image box, tied to the card radius so the
   image top corners align exactly with the card. Bottom corners stay square so
   the image sits flush against the card body (no white card bg showing through
   rounded bottom corners). Mirrors how .card-product--vertical rounds its image. */
.card-product-bundle .card-product__image>div {
  border-top-left-radius: var(--product-card-rounded, 0);
  border-top-right-radius: var(--product-card-rounded, 0);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.card-product-bundle:hover .item_product_main {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.product-bundle-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Mobile specific */
@media (max-width: 767px) {

  /* Prevent image overflow */
  .section-bundle hot-spots,
  .section-bundle hot-spots>div,
  .section-bundle hot-spots img {
    max-width: 100%;
    width: 100%;
  }

  .section-bundle hot-spots img {
    height: auto;
    display: block;
    max-height: none;
    object-fit: cover;
  }

  .product-bundle-card {
    width: 280px;
    max-width: 80vw;
    flex: 0 0 auto;
  }

  /* Ensure smooth scrolling on mobile */
  .product-bundle-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0;
    gap: 1rem;
    padding-bottom: 1rem;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .product-bundle-card {
    width: auto;
    max-width: none;
    flex: 1 1 auto;
  }

  .product-bundle-grid {
    overflow-x: visible;
    padding-bottom: 0;
  }
}


@media(min-width: 1025px) {
  .product-bundle-grid:has(.active) .product-bundle-card:not(.active) {
    opacity: 0.3;
  }
}


.tab-btn {
  position: relative;
  transition: all 0.2s ease;
}

.tab-btn.active {
  color: var(--color-primary);
  font-weight: 700;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  width: 0;
  height: 3px;
  background: var(--color-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Pill/Segmented Control Tabs */
.tabs-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tabs-wrapper::-webkit-scrollbar {
  display: none;
}

/* Pill/Segmented Control Tabs V2 - Premium Minimalist */
.pill-style-v2 {
  background: #f1f3f5;
  padding: 5px;
  border-radius: 12px;
  display: inline-flex;
}

.tab-btn-v2 {
  padding: 8px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #6c757d;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.tab-btn-v2.active {
  background: #ffffff;
  color: var(--color-primary);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.tab-btn-v2:not(.active):hover {
  color: #212529;
  background: rgba(0, 0, 0, 0.03);
}

/* Readmore Ghost - Less Intrusive */
.readmore-btn-ghost {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid #e9ecef;
  padding: 10px 28px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.readmore-btn-ghost:hover {
  background: #f8f9fa;
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.product-readmore.is-expanded .readmore-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: #adb5bd;
  font-weight: 500;
}

.product-readmore.is-expanded .readmore-btn-ghost:hover {
  color: var(--color-primary);
}


.heading-tabs.pill-style {
  display: inline-flex;
  background: #f1f3f5;
  padding: 6px;
  border-radius: 14px;
  gap: 4px;
}

.pill-style .tab-btn {
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #495057;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: none !important;
  opacity: 1;
}

.pill-style .tab-btn::after {
  display: none;
  /* Remove underline */
}

.pill-style .tab-btn:hover {
  color: var(--color-primary);
  background: rgba(0, 0, 0, 0.03);
}

.pill-style .tab-btn.active {
  background: #ffffff !important;
  color: var(--color-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Product Readmore Styling - Floating Pill */
.product-readmore {
  position: relative;
  transition: all 0.3s ease;
}

.product-readmore .content {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Clamp + fade ONLY when JS detects overflow (.is-clamped). Default = full content, no fade. */
.product-readmore.is-clamped .content {
  overflow: hidden;
  max-height: var(--rm-height, 800px);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.product-readmore.is-clamped.is-expanded .content {
  max-height: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.readmore-btn-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  justify-content: center;
  padding-bottom: 0;
  z-index: 10;
  background: linear-gradient(transparent, #fff 80%);
  height: 80px;
  align-items: flex-end;
  pointer-events: none;
  /* display managed by JS via Tailwind flex/hidden classes */
}

/* When expanded, the button wrapper shouldn't cover content with gradient */
.product-readmore.is-expanded .readmore-btn-wrapper {
  position: relative;
  height: auto;
  background: none;
  padding-top: 20px;
  pointer-events: auto;
}

.readmore-btn {
  background: var(--color-primary);
  color: #fff !important;
  padding: 8px 24px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.3);
  border: none;
  display: flex !important;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  cursor: pointer;
}

.readmore-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
  filter: brightness(1.1);
}

.product-readmore.is-expanded .readmore-btn {
  background: #f8fafc;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary);
  box-shadow: none;
}


.tab-content {
  animation: tabSlideUp 0.4s ease;
}

/* Inline guide images (chi tiết thành phần / hướng dẫn giặt sấy / chọn size) - always responsive,
   since an unstyled <img> in the product description would break layout at native pixel size.
   Scope: exclude images inside .not-prose wrappers (egacate/egaproduct/featured-product
   shortcode carousels) so embedded product-card images keep their own aspect/positioning
   instead of being forced full-width with a 20px vertical margin (empty band bug). */
.content img:not(.not-prose *) {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 20px 0;
  display: block;
}

@keyframes tabSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile optimizations for tabs */
@media (max-width: 767px) {
  .tabs-wrapper {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.scrolling-promotion {
  display: flex;
  overflow: hidden;
}

.scrolling-promotion__container {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  align-items: center;
}

.scrolling-promotion__container:hover .scrolling-promotion--animated {
  animation-play-state: paused;
}

.scrolling-promotion__item {
  position: relative;
  padding: 0 32px;
}

@media (max-width: 767px) {
  .scrolling-promotion__item {
    padding: 0 20px;
  }
}

@media (min-width: 768px) {

  .scrolling-promotion__item img,
  .scrolling-promotion__item svg {
    height: var(--image-height, 100%);
  }
}

.scrolling-promotion--animated {
  animation: scroll var(--animate-duration, 12s) linear infinite;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: var(--animate-duration, 12s);
  animation-play-state: running;
  will-change: transform;
}

.scrolling-promotion--ltr.scrolling-promotion--animated {
  animation-direction: reverse;
}

.scrolling-promotion--paused.scrolling-promotion--animated,
.scrolling-promotion--hover-pause:hover .scrolling-promotion--animated {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.card-product,
.product-gallery {
  --aspect-ratio: var(--product-aspect-ratio, 1 / 1);
}

.card-article .aspect-custom,
.card-article__image .aspect-custom {
  --aspect-ratio: var(--blogs-aspect-ratio, 1 / 1);
}

@media (max-width: 767px) {
  .hot-spot-item[open] {
    z-index: 9000;
  }

  .hot-spot-overlay {
    top: 0 !important;
  }

  .hot-spot-content.fixed {
    top: auto !important;
    left: 0 !important;
  }
}



.btn.loading .btn-label {
  display: none
}

.embla__container.product-list {
  margin-left: calc(var(--spacing-4)*-1) !important;
}

.embla__container.product-list>div {
  padding-left: var(--spacing-4) !important;
}

@media (max-width: 767px) {
  .embla__container.product-list {
    margin-left: -0.8rem !important;
  }

  .embla__container.product-list>div {
    padding-left: 0.8rem !important;
  }
}

.section-flashsale .flashsale-heading {
  font-size: 4rem;
  line-height: 1;
  font-weight: 900;
  font-style: italic;
}

/* Size Chart Modal Custom Styles */
.size-chart-modal {
  max-width: 800px !important;
}

#size-chart-modal .measurement-input-group input[type="number"] {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#size-chart-modal .measurement-input-group input[type="number"]:focus {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

#size-chart-modal .size-chart-table-wrapper table {
  min-width: 100%;
  border: 1px solid var(--color-neutral-50);
  border-bottom: none;
}

#size-chart-modal .size-chart-table-wrapper table th {
  font-weight: 600;
  white-space: nowrap;
}

#size-chart-modal .size-chart-table-wrapper table td:first-child {
  border-left: none;
}

#size-chart-modal .size-chart-table-wrapper table td {
  white-space: nowrap;
  border-left: 1px solid var(--color-neutral-50);
  border-bottom: 1px solid var(--color-neutral-50);
}

#size-chart-modal #size-recommendation {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#size-chart-modal .btn-outline {
  background-color: transparent;
  border: 1px solid var(--color-neutral-30, #d1d5db);
  color: var(--color-text, #1f2937);
}

#size-chart-modal .btn-outline:hover {
  background-color: var(--color-neutral-5, #f9fafb);
}

#size-chart-modal select#product-type-selector,
#product-type-selector-calculator {
  cursor: pointer;
  transition: border-color 0.2s ease;
  line-height: 1.3;
}

#size-chart-modal select#product-type-selector:hover {
  border-color: var(--color-primary, #2563eb);
}

/* Ensure smooth scrolling in modal */
#size-chart-modal .animation {
  -webkit-overflow-scrolling: touch;
}

#size-chart-modal .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

#size-chart-modal .overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

#size-chart-modal .overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

#size-chart-modal .overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

#size-chart-modal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Warning and Error states for recommendation box */
#size-chart-modal .bg-warning-light {
  background-color: #fef3c7;
}

#size-chart-modal .border-warning {
  border-color: #f59e0b;
}

#size-chart-modal .text-warning {
  color: #f59e0b;
}

#size-chart-modal .bg-error-light {
  background-color: #fee2e2;
}

#size-chart-modal .border-error {
  border-color: #ef4444;
}

#size-chart-modal .text-error {
  color: #ef4444;
}

#size-chart-modal .bg-info-light {
  background-color: #dbeafe;
}

#size-chart-modal .border-info {
  border-color: var(--color-primary);
}

#size-chart-modal .text-info {
  color: var(--color-primary);
}

/* Input validation states */
#size-chart-modal .measurement-input-group input.border-error {
  border-color: var(--color-error);
  background-color: var(--color-error-light);
}

#size-chart-modal .measurement-input-group input.border-error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(var(--color-error), 0.1);
}

#size-chart-modal .measurement-input-group input.border-success {
  border-color: var(--color-success);
  background-color: var(--color-success-light);
}

#size-chart-modal .measurement-input-group input.border-success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(var(--color-success), 0.1);
}

#size-chart-modal .input-error-message {
  display: block;
}

/* Default state styling */
#size-chart-modal .text-neutral-60 {
  color: var(--color-neutral-60);
}

#size-chart-modal .icon-info-circle {
  color: var(--color-neutral-60);
}

/* Modal scrolling optimization */
#size-chart-modal .animation {
  -webkit-overflow-scrolling: touch;
}

#size-chart-modal .flex-1.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Mobile optimization */
@media (max-width: 768px) {
  #size-chart-modal .flex-1.overflow-y-auto {
    max-height: calc(95vh - 300px) !important;
  }
}

/* Modern UI Enhancements */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceSubtle {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

.animate-bounce-subtle {
  animation: bounceSubtle 2s ease-in-out infinite;
}

/* Enhanced input styling */
#size-chart-modal input[type="number"] {
  transition: all 0.2s ease;
}

#size-chart-modal input[type="number"]:hover {
  border-color: rgba(var(--primary-rgb, 14, 78, 255), 0.3);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 14, 78, 255), 0.05);
}

#size-chart-modal input[type="number"]:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 14, 78, 255), 0.15);
}

/* Table styling enhancements */
#size-chart-modal table {
  border-collapse: separate;
  border-spacing: 0;
}

#size-chart-modal table th {
  background: linear-gradient(to bottom, #f9fafb, #f3f4f6);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem;
  border-bottom: 2px solid #e5e7eb;
}

#size-chart-modal table td {
  padding: 0.875rem 1rem;
  transition: background-color 0.15s ease;
}

#size-chart-modal table tbody tr:hover td {
  background-color: rgba(var(--primary-rgb, 14, 78, 255), 0.02);
}

/* Button hover effects */
#size-chart-modal .btn-primary {
  position: relative;
  overflow: hidden;
}

#size-chart-modal .btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

#size-chart-modal .btn-primary:hover::before {
  width: 300px;
  height: 300px;
}

/* Smooth scrollbar */
#size-chart-modal .overflow-y-auto::-webkit-scrollbar {
  width: 8px;
}

#size-chart-modal .overflow-y-auto::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

#size-chart-modal .overflow-y-auto::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #d1d5db, #9ca3af);
  border-radius: 10px;
  transition: background 0.2s;
}

#size-chart-modal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #9ca3af, #6b7280);
}

/* Tabs UI Styling */
#size-chart-modal .tab-button {
  position: relative;
}

#size-chart-modal .tab-button.active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

#size-chart-modal .tab-button:not(.active):hover {
  background: #f9fafb;
}

#size-chart-modal .tab-content {
  display: none;
  animation: fadeIn 0.3s ease-out;
}

#size-chart-modal .tab-content.active {
  display: block;
}

.image_order {
  width: 64px !important;
}

/* ============================================
   AUTOCARE THEME — TYPOGRAPHY
   ============================================ */

/* Heading tags and generic titles default to the BODY font.
   Only section headlines (allowlist below) keep the heading font.
   (.price/.compare-price already forced to body font above.) */
h1,
h2,
h3,
h4,
h5,
h6,
.title {
  font-family: var(--font-body-family);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.2;
}

/* Section headlines — the only elements that use the heading font.
   Placed AFTER the body-default rule so it wins on equal specificity
   (e.g. .fs-luxury__title.flashsale-heading). */
.heading,
.section-heading,
.flashsale-heading {
  font-family: var(--font-headings-family);
  font-weight: var(--font-headings-weight);
  letter-spacing: normal;
  line-height: 1.2;
}

h1 {
  font-size: 4.8rem;
}

h2 {
  font-size: 3.6rem;
}

h3 {
  font-size: 2.8rem;
}

h4 {
  font-size: 2.2rem;
}

/* ============================================
   RICH-TEXT (.prose) BRAND THEMING
   Single source of truth for product description / page / blog / collection
   rich text. Overrides Tailwind Typography's default palette (global.css
   .prose block) with theme tokens instead of a hardcoded hex.
   ============================================ */
.prose {
  --tw-prose-body: var(--color-foreground);
  --tw-prose-headings: var(--color-foreground);
  --tw-prose-bold: var(--color-foreground);
  --tw-prose-links: var(--color-primary);
  --tw-prose-bullets: var(--color-primary);
  --tw-prose-counters: var(--color-primary);
  --tw-prose-quote-borders: var(--color-primary);
  --tw-prose-hr: var(--color-neutral-50);
  --tw-prose-th-borders: var(--color-neutral-50);
  --tw-prose-td-borders: var(--color-neutral-50);
}

/* Product & card titles use the BODY font — only section headings keep the heading font */
.product-title,
.product-title h1,
.product-title h2,
.product-title a,
card-product .product-name,
.card-product__title,
.card-product__title a,
card-product [class*="title"] {
  font-family: var(--font-body-family);
  letter-spacing: normal;
}

/* Countdown / flash-sale timers use the BODY font (numeric digits read cleaner
   in the sans body face; the heading serif is reserved for section headings). */
.flashsale__countdown-timer,
.flashsale__countdown-timer *,
.flashsale__countdown,
.flashsale__countdown *,
.flashsale__countdown-label,
.ega-badge-ctd,
.ega-badge-ctd *,
.stock-countdown,
.stock-countdown * {
  font-family: var(--font-body-family);
}

/* ============================================
   AUTOCARE THEME — BUTTONS
   ============================================ */

.btn,
button[type="submit"],
.button,
[class*="btn-"] {
  font-family: var(--font-body-family);
  border-radius: 9999px !important;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Primary CTA — dùng đúng setting "Màu nút" (button_primary_*) */
.btn-primary,
.btn--primary {
  background: var(--color-button-primary);
  color: var(--color-button-primary-text);
  border: 1px solid var(--color-button-primary);
}

/* Thêm vào giỏ hàng — dùng riêng setting "Màu nút Thêm vào giỏ hàng" (addtocart_*),
   tách khỏi Primary CTA ở trên vì đây là 1 setting riêng trong customizer. */
button.btn-add-to-cart,
[class*="add-to-cart"] {
  background: var(--color-addtocart-bg);
  color: var(--color-addtocart);
  border: 1px solid var(--color-addtocart-bg);
}

/* Hover: làm tối nhẹ màu nền hiện tại thay vì hardcode 1 màu cố định,
   để luôn khớp bất kể setting đang chọn màu gì. */
.btn-primary:hover,
.btn--primary:hover,
button.btn-add-to-cart:hover,
[class*="add-to-cart"]:hover {
  filter: brightness(0.9);
}

/* Secondary / outlined */
.btn-secondary,
.btn--secondary {
  background: transparent;
  color: var(--color-foreground);
  border: 1px solid var(--color-foreground);
}

.btn-secondary:hover,
.btn--secondary:hover {
  background: var(--color-foreground);
  color: #FFFFFF;
}

/* ============================================
   AUTOCARE THEME — PRODUCT CARDS
   ============================================ */

/* The custom element defaults to display:inline. In carousels/flash-sale it is
   NOT a flex/grid item, so it stays inline and border/radius on it render as
   stray vertical lines + broken corners. Force block, and put the visible card
   chrome on the inner block wrapper (.item_product_main) which is always block. */
card-product,
.product-card {
  display: block;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Root cause of the "cưa bo góc" (square corners peeking out) on flash-sale's
   dark background: the OUTER <card-product> element itself paints a white, SQUARE
   background the exact size of the rounded inner card, so its 4 square corners
   show behind the rounded inner card. Round the outer element's own bg box to
   match. overflow stays visible so hover add-to-cart / utilities that translate
   outside the card are NOT clipped. */
.card-product--vertical {
  border-radius: var(--product-card-rounded, 0);
}

.card-product--vertical .item_product_main {
  border: 1px solid var(--color-neutral-50);
  background: var(--color-background);
  border-radius: var(--product-card-rounded, 0);
  /* rounds the 1px border + the (non-transformed) body */
  overflow: hidden;
  /* NOT clip-path here, so hover box-shadow isn't clipped */
  box-shadow: 0 2px 10px rgba(18, 22, 28, 0.06);
}

/* Root-cause fix for square top corners.
   The visible white card fill is NOT .item_product_main — it's the inner <form>
   (class "bg-background", h-full, z-10 relative) that stacks on top and fills the
   whole card. Under flash-sale's composited ancestor (.fs-luxury: overflow+rounded),
   the form's square corners ESCAPE .item_product_main's overflow:hidden+radius clip,
   so the top corners render square even though the wrapper is rounded.
   Fix: round the form at its OWN source. An element's own border-radius always clips
   its own background/border — immune to the composited-descendant escape. overflow
   clips the (square) .card-product__top image box to the same rounded shape. */
.card-product--vertical .item_product_main>form {
  border-radius: var(--product-card-rounded, 0);
  overflow: hidden;
}

/* Round the image box top corners too. The template marks the image with the
   class "rounded-t", but that utility is NOT compiled in this theme (only
   .rounded-t-sm exists), so the image kept SQUARE top corners. On flash-sale's
   dark background the scaled image (transform: scale) composites onto its own
   layer and its square top corners ESCAPE the form's rounded overflow clip,
   reading as un-rounded vs. the fully-rounded cards elsewhere. Fix at the source:
   round .card-product__top (already overflow:hidden) AND the image elements
   directly so the corners round even when the image forms its own layer. */
.card-product--vertical .card-product__top {
  border-top-left-radius: var(--product-card-rounded, 0);
  border-top-right-radius: var(--product-card-rounded, 0);
}

.card-product--vertical .card-product__vendor {
  opacity: 0.8;
  padding-bottom: 0.5rem;
}

.card-product--vertical .card-product__image,
.card-product--vertical .card-product__image-2 {
  border-top-left-radius: var(--product-card-rounded, 0);
  border-top-right-radius: var(--product-card-rounded, 0);
}

.card-product--vertical:hover .item_product_main {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

/* Product carousels: stretch slides to EQUAL height so every card is the same
   size. The card body anchors its price/actions to the bottom (mt-auto) so the
   extra height sits as balanced spacing, not an empty gap under the content. */
.section-related-products .embla__container,
.section-equal-price-products .embla__container,
.section-recent-products .embla__container,
#recent-view-coll .embla__container,
.section-product-slider .embla__container,
.section-product-tabs .embla__container {
  align-items: stretch;
}

card-product .product-price,
.product-card .price {
  letter-spacing: 0.05em;
  font-size: 1.5rem;
}

/* Subtle image hover — no aggressive zoom */
card-product .card-media img,
.product-card .card-media img {
  transition: transform 0.6s ease;
}

card-product:hover .card-media img,
.product-card:hover .card-media img {
  transform: scale(1.03);
}

/* Removed breaking header styles */

/* ============================================
   AUTOCARE THEME — FOOTER
   ============================================ */

.footer,
footer,
.site-footer {
  background: var(--color-footer) !important;
  color: var(--color-footer-text);
}

.footer h2,
.footer h3,
.footer h4,
.site-footer .heading,
.site-footer .title {
  font-family: var(--font-body-family);
  color: #FFFFFF;
  font-size: 2rem;
  letter-spacing: normal;
}

.footer a,
.site-footer a {
  color: var(--color-footer-text);
  transition: color 0.2s;
}

.footer a:hover,
.site-footer a:hover {
  color: var(--color-footer-hover);
}

/* ============================================
   AUTOCARE THEME — SECTIONS & LAYOUT
   ============================================ */


/* ============================================
   AUTOCARE THEME — MICRO-FIXES (from design review)
   ============================================ */

/* Badge border-radius — use token for consistency */
.sale-badge,
.badge {
  border-radius: var(--rounded-lg) !important;
}

/* Mobile touch target — ATC button min 44px */
@media (max-width: 767px) {

  button.btn-add-to-cart,
  [class*="add-to-cart"],
  .btn-primary {
    min-height: 44px;
  }
}

/* Product card — subtle warm background for depth vs page bg */
card-product,
.product-card {
  background-color: var(--color-background);
}

/* Force buttons to be completely rounded */
.btn,
button.btn-add-to-cart,
[class*="add-to-cart"],
.btn-primary {
  border-radius: 9999px !important;
}

/* Flash Sale: label text color white */
.section-flashsale .flashsale__countdown-label,
.section-flashsale .flashsale__countdown-wrapper {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ── Policies v2 — dark bar, đồng bộ màu với footer (footer_bg_color/footer_text_color) và primary_color (gold) ── */
.section.section-polices-v2 {
  background: var(--policies-section-bg);
  /* KHÔNG thêm đệm dưới. Thiết lập "policies_margin" đã sinh ra CẢ margin trên lẫn
     dưới (snippets/section-styles.bwt đổi "64px 64px" thành "64px 0 64px"), nên mọi
     đệm thêm ở đây đều cộng dồn và làm section này cách section kế tiếp xa hơn các
     section khác dù thiết lập khoảng cách y hệt nhau. Section cũng không có
     padding-top, để đệm dưới còn gây lệch trên/dưới. */
  padding-bottom: 0;
}

.section-polices-v2 .policies-inner.has-border-bottom {
  border-bottom: 1px solid var(--policies-border-color);
}

.policy-card {
  background: var(--policies-card-bg);
  border-radius: 1.6rem;
  transition: transform 0.25s ease;
}

.policy-card:hover {
  transform: translateY(-3px);
}

.policy-card__icon {
  width: 7.2rem;
  height: 7.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.policy-icon-img {
  width: 5.6rem;
  height: 5.6rem;
  object-fit: contain;
}

.policy-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--policies-title-color);
  line-height: 1.4;
}

.policy-card__desc {
  font-size: 1.3rem;
  color: var(--policies-desc-color);
  line-height: 1.6;
}

/* Mobile: stack icon above text so the copy gets the full card width */
@media (max-width: 767px) {
  .policy-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .policy-card__icon {
    width: 6rem;
    height: 6rem;
  }

  .policy-icon-img {
    width: 4.6rem;
    height: 4.6rem;
  }
}

/* Standardize blog article grid gaps */
.article-list.grid {
  gap: var(--grid-gutter) !important;
}

/* ── Mobile carousels: ONE uniform item width (~1.75 items) across every card
   carousel, so tiles stop varying in size between sections (were: 74vw / 65.5%
   / 61.3% / 130px / 300px). Prioritises large, clearly-readable items. ── */
@media (max-width: 767px) {

  /* Product card carousels sharing the .product-list embla container:
     related, recently-viewed, same-price, cart cross-sell, product-slider
     section, and the frequently-bought bundle */
  .product-list.embla__container>div,
  /* Flash-sale products */
  .section-flashsale .flashsale__item,
  /* Video review tiles */
  .section-video-review .video-list .embla__slide,
  /* Lookbook (instagram) + group banners */
  .section-banner-group .embla__container>div {
    width: 57% !important;
    max-width: 57% !important;
  }

  /* Tighter, uniform gap between items: 0.8rem (8px) — reduces the mixed
     pl-4 (16px) / pl-6 (24px) gaps down to match flash-sale/hotspot (already 8px).
     Raw CSS (not Tailwind classes) so it can't silently miss an uncompiled class. */
  .product-list.embla__container,
  .section-video-review .video-list .embla__container,
  .section-banner-group .embla__container {
    margin-left: -0.8rem !important;
  }

  .product-list.embla__container>div,
  .section-video-review .video-list .embla__slide,
  .section-banner-group .embla__container>div {
    padding-left: 0.8rem !important;
  }

  /* First product card flush with container edge
     (cancels the [&>div:first-of-type]:-ml-6 offset) */
  .product-list.embla__container>div:first-of-type {
    margin-left: 0 !important;
  }
}

/* ── Tỉ lệ khung video (section trang chủ) — theo setting section_video_ratio ── */
.section-video-review .svr-thumb {
  aspect-ratio: 9 / 16;
  /* mặc định: dọc (hợp Shorts) */
}

.section-video-review.svr--landscape .svr-thumb {
  aspect-ratio: 16 / 9;
}

.section-video-review.svr--square .svr-thumb {
  aspect-ratio: 1 / 1;
}

.section-video-review.svr--portrait .svr-thumb {
  aspect-ratio: 9 / 16;
}

/* Ảnh phủ đầy khung theo tỉ lệ đã chọn (crop gọn, không méo) */
.section-video-review .svr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Video review pill button ── */
.review-video__item .relative {
  position: relative;
  border-radius: 1.2rem;
  overflow: hidden;
}

.review-video__pill {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  right: 1.2rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: #ffffff;
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  /* Hover transition */
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.review-video__pill:hover,
.review-video__item:hover .review-video__pill {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  background: #f8f8f8;
}

.review-video__pill:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.review-video__pill span:first-child {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-foreground);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  flex: 1;
  transition: color 0.2s ease;
}

.review-video__pill:hover span:first-child,
.review-video__item:hover .review-video__pill span:first-child {
  color: var(--color-primary);
}

.review-video__pill .pill-arrow {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  transition: transform 0.2s ease, background 0.2s ease;
}

.review-video__pill:hover .pill-arrow,
.review-video__item:hover .review-video__pill .pill-arrow {
  transform: translateX(3px);
  background: var(--color-primary-dark, #1a2540);
}

/* ── Product video review block (theo sản phẩm, YouTube) ──
   Ratio + bề rộng slide điều khiển tại đây để KHÔNG phụ thuộc
   Tailwind arbitrary values (aspect-[9/16], w-[240px]...) vốn không
   được compile sẵn trong theme. Thumbnail dùng object-cover nên
   ảnh 16:9 của YouTube cắt gọn theo tỉ lệ, không méo. */
/* Block nhúng trong cột thông tin SP (có nền bg-background).
   Thêm padding ngang để thumbnail không sát/tràn mép nền — bù cho
   embla__container -ml-4 (kéo slide đầu ra ngoài 1rem) và trường hợp
   cột không có padding ngang trên mobile. */
.pvr-embed {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ── Video play button — thin outlined ring with a radiating pulse effect
   (compact, NOT a big solid disc). Shared by main gallery video + the product
   video-review carousel. ── */
.ega-video-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  aspect-ratio: 1 / 1;
  /* guarantee a perfect circle, never oval */
  flex: 0 0 auto;
  /* never let a flex parent squash it */
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  /* contrast on light frames */
  transition: transform 0.2s ease, background 0.2s ease;
}

/* A single ring radiating outward — slow, with a long idle pause between
   pulses (only ~30% of the cycle is active) so it doesn't run continuously. */
.ega-video-play::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: ega-video-pulse 5s ease-out infinite;
  pointer-events: none;
}

@keyframes ega-video-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  30% {
    transform: scale(1.7);
    opacity: 0;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

.ega-video-play .icon-play {
  font-size: 4rem;
  line-height: 1;
  opacity: 0.75;
  /* optically center the triangle glyph */
}

.group:hover .ega-video-play,
.review-video__item:hover .ega-video-play,
.swipe-tablet__item:hover .ega-video-play {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.08);
}

/* Respect users who prefer no motion. */
@media (prefers-reduced-motion: reduce) {

  .ega-video-play::before,
  .ega-video-play::after {
    animation: none;
  }
}

@media (max-width: 767px) {
  .ega-video-play {
    width: 4.4rem;
    height: 4.4rem;
  }

  .ega-video-play .icon-play {
    font-size: 1.7rem;
  }
}

.section-product-video-review .pvr-thumb {
  aspect-ratio: 9 / 16;
  /* mặc định: dọc (hợp Shorts) */
}

.section-product-video-review.pvr--landscape .pvr-thumb {
  aspect-ratio: 16 / 9;
}

.section-product-video-review.pvr--square .pvr-thumb {
  aspect-ratio: 1 / 1;
}

.section-product-video-review.pvr--portrait .pvr-thumb {
  aspect-ratio: 9 / 16;
}

.section-product-video-review .pvr-slide {
  flex: 0 0 auto;
  max-width: 100%;
}

/* Mobile (mặc định) */
.section-product-video-review.pvr--portrait .pvr-slide {
  width: 42%;
}

.section-product-video-review.pvr--square .pvr-slide {
  width: 60%;
}

.section-product-video-review.pvr--landscape .pvr-slide {
  width: 78%;
}

/* Tablet ≥768px */
@media (min-width: 768px) {
  .section-product-video-review.pvr--portrait .pvr-slide {
    width: 25%;
  }

  .section-product-video-review.pvr--square .pvr-slide {
    width: 33.333%;
  }

  .section-product-video-review.pvr--landscape .pvr-slide {
    width: 50%;
  }
}

/* Desktop ≥1024px — block nằm trong CỘT thông tin SP (hẹp ~45% màn),
   nên số cột ít hơn full-width để card không bị nhỏ vụn. */
@media (min-width: 1024px) {
  .section-product-video-review.pvr--portrait .pvr-slide {
    width: 33.333%;
  }

  .section-product-video-review.pvr--square .pvr-slide {
    width: 40%;
  }

  .section-product-video-review.pvr--landscape .pvr-slide {
    width: 50%;
  }
}

/* Cap bề rộng card theo tỉ lệ: khi block đặt ở vị trí FULL-WIDTH
   (kiểu tab 'horizontal' — mô tả nằm dưới), % width sẽ cho card quá to.
   max-width giữ card ở kích thước hợp lý, thành 1 dải video gọn. */
.section-product-video-review.pvr--portrait .pvr-slide {
  max-width: 190px;
}

.section-product-video-review.pvr--square .pvr-slide {
  max-width: 240px;
}

.section-product-video-review.pvr--landscape .pvr-slide {
  max-width: 340px;
}

/* ── Full-section placement (video block đặt trên/dưới mô tả SP): width bằng
   container như các section khác + spacing rộng hơn, và số cột desktop lấy từ
   setting (--pvr-cols, mặc định 4). Bỏ cap max-width để lấp đầy chiều ngang. ── */
.section-product-video-review.pvr-section {
  margin-top: 6.4rem;
  margin-bottom: 6.4rem;
}

@media (min-width: 1024px) {
  .section-product-video-review.pvr-section .pvr-slide {
    width: calc(100% / var(--pvr-cols, 4));
    max-width: none;
  }
}

@media (max-width: 767px) {
  .section-product-video-review.pvr-section {
    margin-top: 3.2rem;
    margin-bottom: 3.2rem;
  }
}

/* ── Info placement (video block nằm trong CỘT thông tin SP): số cột desktop
   cũng lấy từ setting (--pvr-cols) thay vì cố định theo tỉ lệ. Đặt sau các rule
   width/max-width theo tỉ lệ để thắng source-order. ── */
@media (min-width: 1024px) {
  .section-product-video-review.pvr-embed .pvr-slide {
    width: calc(100% / var(--pvr-cols, 3));
    max-width: none;
  }
}

/* ═══════════════════════════════════════════
   GLOBAL LAYOUT — Container 1440px, 5-col max
   ═══════════════════════════════════════════ */

/* Ensure container never exceeds 1440px */
.container {
  max-width: 1440px !important;
}

/* ── Grid product lists: max 5 columns ── */
@media (min-width: 1024px) {

  .product-list.grid,
  .tab-content-inner.grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ── Flex/Embla carousel: 5 items per row on desktop (~20% each) ──
   Applies to: Related products, Same price, Recently viewed,
   Product slider section, Blog section carousel
*/
@media (min-width: 1024px) {

  /* product-list-carousel (related, recent-view, equal-price) */
  .section-related-products .embla__container>div,
  .section-equal-price-products .embla__container>div,
  #recent-view-coll .embla__container>div,
  /* product-slider section */
  .section-product-slider .embla__container>div,
  /* flashsale carousel */
  .section-flashsale .flashsale__item {
    width: 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}

/* ============================================
   PRODUCT POLICIES
   ============================================ */

.ega-fallback-icon {
  width: 48px;
  height: 48px;
  background: #f8f9fa;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
}

.ega-highlight {
  color: var(--color-secondary, #094eff);
  font-weight: 700;
}

.ega-tooltip-box {
  position: relative;
  display: flex;
  align-items: center;
  cursor: help;
  flex-shrink: 0;
}

.ega-tooltip-icon {
  color: #ccc;
  transition: color 0.2s;
  display: flex;
}

.ega-tooltip-box:hover .ega-tooltip-icon {
  color: var(--color-secondary, #094eff);
}

.ega-tooltip-content {
  position: absolute;
  bottom: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  z-index: 9999;
  pointer-events: none;
}

.ega-tooltip-box:hover .ega-tooltip-content {
  visibility: visible;
  opacity: 1;
  bottom: calc(100% + 10px);
}

/* Auto-flip tooltip to prevent viewport overflow */
.ega-tooltip-content.tooltip-align-right {
  left: auto;
  right: 0;
  transform: none;
}

.ega-tooltip-arrow.tooltip-arrow-right {
  left: auto;
  right: 16px;
  transform: none;
}

.ega-tooltip-content.tooltip-align-left {
  left: 0;
  transform: none;
}

.ega-tooltip-arrow.tooltip-arrow-left {
  left: 16px;
  transform: none;
}


.ega-tooltip-inner {
  background: #fff;
  color: #444;
  padding: 15px 25px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #eee;
}

.ega-tooltip-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

@media (max-width: 1023px) {

  .ega-tooltip-box {
    position: static !important;
  }

  /* Tooltip responsive */
  .ega-tooltip-content {
    width: auto;
    left: 15px !important;
    right: 15px !important;
    transform: none !important;
    max-width: none;
  }

  .ega-tooltip-box:hover .ega-tooltip-content {
    bottom: calc(100% + 10px);
  }

  /* Row 1 (items 1,2): show above */

  /* Row 2 (items 3,4): show below */

  /* Arrow horizontal positions */

  /* 3-item special: last item full width, tooltip below */

  .ega-tooltip-inner {
    padding: 12px 15px;
    font-size: 12px;
  }
}

/* ============================================
   PRODUCT POLICIES - MODERN GRID
   ============================================ */

.ega-highlight {
  font-weight: 700;
}

.ega-tooltip-box {
  position: relative;
  display: flex;
  align-items: center;
  cursor: help;
}

.ega-tooltip-content {
  position: absolute;
  bottom: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 100;
}

.ega-tooltip-box:hover .ega-tooltip-content {
  visibility: visible;
  opacity: 1;
  bottom: calc(100% + 10px);
}

.ega-tooltip-inner {
  background: #fff;
  color: #444;
  padding: 15px 25px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #eee;
}

.ega-tooltip-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fff;
}

@media (max-width: 1023px) {

  .ega-tooltip-box {
    position: static !important;
  }

  .ega-tooltip-content {
    display: none !important;
  }
}

/* SMART MOBILE DRAWER STYLES */
.ega-policy-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.ega-policy-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 24px 24px 0 0;
  z-index: 10001;
  padding: 24px 20px 40px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
}

.ega-policy-drawer.active {
  transform: translateY(0);
}

.ega-policy-overlay.active {
  opacity: 1;
  visibility: visible;
}

.ega-drawer-handle {
  width: 40px;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  margin: -12px auto 20px;
}

.ega-drawer-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #333;
  display: block;
}

.ega-drawer-body {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.ega-drawer-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #f5f5f5;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (min-width: 1024px) {

  .ega-policy-overlay,
  .ega-policy-drawer {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .tabs-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    padding-bottom: 5px;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Product tabs (horizontal, bottom) wrapper — moved off Tailwind arbitrary values (NO-KIT) */
.product-tabs-bottom {
  border-radius: 24px;
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.05);
}

/* ===== Home banner countdown overlay ("Ảnh Banner - Trang chủ") ===== */
/* Glass-blur card overlaid on the single-image banner (section-image-banner.bwt) */
.banner-overlay-card {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  max-width: min(90%, 36rem);
  padding: clamp(1.5rem, 2.6vw, 2.6rem);
  border-radius: 1.75rem;
  color: #fff;
  text-align: left;
  /* Solid fallback (browsers without backdrop-filter) */
  background-color: rgba(18, 20, 22, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .banner-overlay-card {
    background-color: rgba(18, 20, 22, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* Position variants */
.banner-overlay-card--left {
  left: clamp(1rem, 4vw, 4rem);
}

.banner-overlay-card--right {
  right: clamp(1rem, 4vw, 4rem);
}

.banner-overlay-card--center {
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  text-align: center;
}

.banner-overlay-card__heading {
  margin: 0;
  font-family: var(--font-headings-family);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  line-height: 1.15;
}

.banner-overlay-card__subheading {
  margin: 0;
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  color: rgba(255, 255, 255, 0.72);
}

/* CTA button — white pill */
.banner-overlay-card__btn {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.7em 1.6em;
  border-radius: var(--rounded-button);
  background-color: #fff;
  color: #16181a;
  font-weight: 700;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.banner-overlay-card__btn:hover {
  opacity: 0.85;
}

/* Dark countdown badges scoped to the card (overrides --color-flashsale-timer defaults) */
.banner-overlay-card__countdown .flashsale__countdown-wrapper {
  justify-content: flex-start;
}

.banner-overlay-card--center .banner-overlay-card__countdown .flashsale__countdown-wrapper {
  justify-content: center;
}

/* Countdown tiles — frosted grey, number+label left-aligned (matches mockup) */
.banner-overlay-card .ega-badge-ctd {
  gap: 0.55rem;
}

.banner-overlay-card .ega-badge-ctd__item {
  width: 4.9rem;
  padding: 0.75rem 0.85rem;
  text-align: center;
  border-radius: var(--rounded-md) !important;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.banner-overlay-card .ega-badge-ctd__h {
  text-align: center;
  font-size: 1.9rem;
  font-weight: 700;
  /* MUST stay 1: the flip animation scrolls the digit column by -1em per tick
     against a height:1em mask; any other line-height drifts digits progressively. */
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.banner-overlay-card .ega-badge-ctd--animate::before {
  text-align: left;
}

.banner-overlay-card .ega-badge-ctd__item span {
  display: block;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  font-weight: 400;
}

.banner-overlay-card .ega-badge-dot {
  color: rgba(255, 255, 255, 0.38);
  font-weight: 700;
  align-self: center;
}

/* Hide shared flash-sale status labels ("Ưu đãi sẽ kết thúc sau:" ...) while
   the deal is upcoming/ongoing — the card's own subheading conveys this. */
.banner-overlay-card .flashsale__countdown-label {
  display: none;
}

/* When the deal has ENDED the countdown digits empty out, so the static
   "Ưu đãi sẽ kết thúc sau:" subheading becomes misleading. Swap it for the
   configured ended label ("Chương trình đã kết thúc"). */
.banner-overlay-card:has(countdown-timer.ended) .banner-overlay-card__subheading {
  display: none;
}

.banner-overlay-card:has(countdown-timer.ended) .flashsale__countdown-label[data-label="ended"] {
  display: block;
  margin: 0;
  text-align: inherit;
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  color: rgba(255, 255, 255, 0.72);
}

/* Desktop: align the flash-deal card's edge with the site container (max-width
   1440px, 6rem gutter) instead of the raw viewport edge, and scale it up ~2x */
@media (min-width: 1024px) {
  .banner-overlay-card {
    max-width: min(90%, 62rem);
    gap: 2.2rem;
    padding: clamp(2.8rem, 3vw, 4rem);
    border-radius: 2.4rem;
  }

  /* Left/right edge = container inner edge: (viewport - 1520)/2 + 6rem gutter */
  .banner-overlay-card--left {
    left: max(3rem, calc((100% - 1520px) / 2 + 6rem));
  }

  .banner-overlay-card--right {
    right: max(3rem, calc((100% - 1520px) / 2 + 6rem));
  }

  .banner-overlay-card__heading {
    font-size: clamp(3.2rem, 3.6vw, 4.8rem);
  }

  .banner-overlay-card__subheading,
  .banner-overlay-card:has(countdown-timer.ended) .flashsale__countdown-label[data-label="ended"] {
    font-size: clamp(1.5rem, 1.4vw, 2rem);
  }

  .banner-overlay-card__btn {
    font-size: 1.8rem;
    padding: 0.85em 2.2em;
  }

  /* Countdown tiles doubled */
  .banner-overlay-card .ega-badge-ctd {
    gap: 1rem;
  }

  .banner-overlay-card .ega-badge-ctd__item {
    width: 9rem;
    padding: 1.4rem 1.5rem;
  }

  .banner-overlay-card .ega-badge-ctd__h {
    font-size: 3.6rem;
  }

  .banner-overlay-card .ega-badge-ctd__item span {
    font-size: 1.4rem;
    margin-top: 0.4rem;
  }
}

/* Mobile: center card, shrink so 4 boxes fit the portrait banner (rec 450x500) */
@media (max-width: 767px) {

  .banner-overlay-card,
  .banner-overlay-card--left,
  .banner-overlay-card--right {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    align-items: center;
    text-align: center;
    max-width: calc(100% - 2rem);
    padding: 1.2rem 1rem;
    gap: 0.75rem;
  }

  .banner-overlay-card__countdown .flashsale__countdown-wrapper {
    justify-content: center;
  }

  /* scoped selector beats JS-injected w-[5.4rem] utility */
  .banner-overlay-card .ega-badge-ctd {
    gap: 0.4rem;
  }

  .banner-overlay-card .ega-badge-ctd__item {
    width: 3.7rem;
    padding: 0.55rem 0.5rem;
  }

  .banner-overlay-card .ega-badge-ctd__h {
    font-size: 1.4rem;
  }

  .banner-overlay-card .ega-badge-ctd__item span {
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   Tra cứu mã số thuế (vat-lookup)
   Lưu ý: root font-size của theme = 10px, nên 1rem = 10px.
   ========================================================================== */

.vat-lookup-control {
  display: flex;
  align-items: stretch;
  gap: 0.8rem;
}

.vat-lookup-control .form-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Nút tra cứu: cao bằng ô input, chữ không xuống dòng */
.vat-lookup-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0 1.8rem;
  white-space: nowrap;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-button-primary-text, #fff);
  background-color: var(--color-button-primary, #464646);
  border: 0;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.vat-lookup-btn:hover:not(:disabled) {
  opacity: 0.88;
}

/* Chưa đủ 10 số thì nút mờ & không bấm được — chặn gọi API vô ích */
.vat-lookup-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vat-lookup-spinner {
  display: none;
  width: 1.4rem;
  height: 1.4rem;
  border: 0.2rem solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
}

.vat-lookup.is-loading .vat-lookup-spinner {
  display: block;
  animation: vat-lookup-spin 0.7s linear infinite;
}

@keyframes vat-lookup-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Dòng trạng thái: ẩn hoàn toàn khi rỗng để không tạo khoảng trống thừa */
.vat-lookup-status {
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--color-neutral-300, #737373);
}

.vat-lookup-status:empty {
  display: none;
}

.vat-lookup-status[data-state="success"] {
  color: var(--color-success, #16a34a);
}

.vat-lookup-status[data-state="warning"] {
  color: var(--color-warning, #d97706);
}

.vat-lookup-status[data-state="empty"],
.vat-lookup-status[data-state="error"] {
  color: var(--color-neutral-300, #737373);
}

/* Nháy nền các ô vừa được điền tự động để người dùng thấy điều gì đã thay đổi */
.vat-lookup-filled {
  animation: vat-lookup-flash 1.2s ease;
}

@keyframes vat-lookup-flash {

  0%,
  60% {
    /* neutral-50 thay vì --color-highlight: highlight là màu thương hiệu do
       khách chỉnh, có thể quá đậm để làm nền nháy sau ô input */
    background-color: var(--color-neutral-50, #f0eeeb);
  }

  100% {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vat-lookup.is-loading .vat-lookup-spinner {
    animation: none;
  }

  .vat-lookup-filled {
    animation: none;
  }
}

/* Nút xoá thông tin hoá đơn: hành động phụ, cố tình để nhạt hơn nút Lưu */
.vat-clear-btn {
  display: block;
  width: 100%;
  margin-top: 1.2rem;
  padding: 1rem;
  font-size: 1.4rem;
  color: var(--color-neutral-300, #6b5f58);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  cursor: pointer;
}

.vat-clear-btn:hover {
  color: var(--color-error, #ee1926);
}

/* =========================================================
   PRODUCT PAGE 2026-07
   Chính sách dưới slider / Dịch vụ áp dụng / Hàng sắp về / Banner
   Ghi chú: root font-size = 10px (1rem = 10px).
   ========================================================= */

/* --- Hàng sắp về (phase 04) --- */
.btn--preorder {
  background: var(--color-warning-bg, #fff4e5);
  color: var(--color-foreground, #1a1a1a);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9999px !important;
}

.product-contact__preorder-note {
  margin: 0;
  color: var(--color-foreground-secondary, #6b7280);
}

/* --- Dịch vụ áp dụng (phase 03) --- */
/*
  Dịch vụ áp dụng - trình bày dạng bảng (theo Vua Nệm):
  khung bo góc + nền nhạt, mỗi dịch vụ là 1 hàng ngăn nhau bằng đường kẻ,
  nhãn/hành động căn phải.
*/
.ega-policy-block {
  margin-top: 2.4rem;
}

.ega-policy-block__title {
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}

/*
  KHÔNG dùng overflow:hidden ở đây - nó cắt mất tooltip (position:absolute) của các hàng,
  gây ra dải trắng bị xén khi hover. Các hàng không có nền riêng nên bo góc ở khung là đủ.
*/
.ega-policy-list {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: .8rem;
  background: var(--color-background-subtle, #f8fafc);
}

.ega-policy-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.ega-policy-row:last-child {
  border-bottom: none;
}

.ega-policy-row__icon {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ega-policy-row__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
  Dùng block + inline thay vì flex: khi tiêu đề xuống 2 dòng (hay gặp trên mobile),
  flex đẩy icon info ra sát mép phải và tách rời khỏi chữ. Để icon chảy inline thì
  nó luôn nằm ngay sau từ cuối cùng.
*/
.ega-policy-row__text {
  flex: 1 1 auto;
  display: block;
  min-width: 0;
}

.ega-policy-row__title {
  display: inline;
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.4;
  /* Chữ thường - phần nào cần đậm thì nhập <b> trong setting */
  font-weight: 400;
}

.ega-policy-row__text .ega-tooltip-box {
  display: inline-flex;
  vertical-align: middle;
  margin-left: .4rem;
}

/*
  Tooltip mặc định rộng 420px - quá khổ so với cột thông tin, dễ tràn mép.
  Thu hẹp lại trong phạm vi khối dịch vụ và nâng z-index để không bị hàng dưới che.
*/
.ega-policy-row__text .ega-tooltip-content {
  width: 30rem;
  max-width: min(30rem, 80vw);
  z-index: 200;
}

.ega-policy-row__status {
  flex: 0 0 auto;
  font-size: 1.3rem;
  white-space: nowrap;
  margin-left: auto;
}

.ega-policy-row__status--pill {
  padding: .4rem 1rem;
  border-radius: 999px;
  background: var(--color-neutral-50, #f0f0f0);
}

.ega-policy-row__status--link {
  text-decoration: underline;
  color: var(--color-primary);
}

/* portal-opener chỉ là lớp bọc logic, không được phá layout hàng */
.ega-policy-row portal-opener {
  display: contents;
}

/*
  Nút "Tìm showroom" làm nổi bật dạng chip (theo Vua Nệm: 12px, padding 5x8, bo 8px,
  nền tint + viền). Dùng --color-primary-rgb để tạo tint theo đúng màu thương hiệu,
  không hardcode. Không dùng class .btn vì custom.css ép .btn bo tròn 9999px.
*/
.ega-policy-row__status--store {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .8rem;
  border-radius: .8rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  color: var(--color-primary, #283455);
  background: rgba(var(--color-primary-rgb, 40, 52, 85), .08);
  border: 1px solid rgba(var(--color-primary-rgb, 40, 52, 85), .28);
  transition: background-color .2s ease, border-color .2s ease;
}

.ega-policy-row__status--store:hover {
  background: rgba(var(--color-primary-rgb, 40, 52, 85), .16);
  border-color: rgba(var(--color-primary-rgb, 40, 52, 85), .45);
}

.ega-policy-row__status--store:focus-visible {
  outline: 2px solid var(--color-primary, #283455);
  outline-offset: 2px;
}

/* --- Banner nhỏ trang sản phẩm (phase 05) --- */
.product-inline-banner {
  width: 100%;
  margin-bottom: 1.6rem;
}

.product-inline-banner picture,
.product-inline-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.product-inline-banner img {
  border-radius: .8rem;
}

/*
  Không đặt aspect-ratio: chiều cao chạy theo tỉ lệ thật của ảnh (height auto),
  nên ảnh banner kích thước nào cũng hiển thị đúng, không bị bóp/cắt.
*/

/* --- Bỏ in đậm mặc định (in đậm do người dùng nhập <b> trong setting) --- */
.ega-policy-row__title span:not(.ega-highlight) {
  font-weight: inherit;
}

/* ═══════════════════════════════════════════
   PRODUCT CONTACT — card cùng ngôn ngữ với policy list
   ═══════════════════════════════════════════
   Dùng lại đúng token của .ega-policy-list (viền, nền, bo .8rem, padding 1.2/1.4rem,
   icon 2.4rem) để khối liên hệ thuộc cùng hệ thống với khối "Dịch vụ áp dụng" ngay dưới,
   thay vì tự tạo kiểu riêng và trôi nổi giữa CTA (pill) với card chính sách. */
.product-contact {
  margin-top: 1.6rem;
}

.product-contact__card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.8rem;
  background: var(--color-background-subtle, #f8fafc);
}

.product-contact__icon {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--color-neutral-300, #6b5f58);
}

.product-contact__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-contact__text {
  flex: 1 1 auto;
  min-width: 0;
}

.product-contact__label {
  display: block;
  color: var(--color-neutral-300, #6b5f58);
  font-size: 1.25rem;
  line-height: 1.4;
}

.product-contact__phone {
  display: inline-block;
  color: var(--color-foreground);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.product-contact__phone:hover {
  color: var(--color-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product-contact__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.8rem;
}

/* Chip mượn dáng nút phụ của policy row ("Tìm showroom") để đồng bộ hệ thống */
.product-contact__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.8rem;
  background: #ffffff;
  color: var(--color-foreground);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.product-contact__chip svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-contact__chip:hover {
  border-color: var(--color-foreground);
  color: var(--color-foreground);
}

/* Cột hẹp: cho chip xuống hàng thay vì bóp chữ hotline */
@media (max-width: 480px) {
  .product-contact__card {
    flex-wrap: wrap;
  }

  .product-contact__text {
    flex: 1 1 60%;
  }

  .product-contact__actions {
    flex: 1 1 100%;
    padding-left: 3.6rem;
  }

  .product-contact__chip {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ── Trang giỏ hàng ở khổ 976–1269px ──
   Lưới 5 cột trong components.css được tính cho bố cục rộng 1384px. Ở khổ tablet
   cột "Đơn giá" chỉ còn ~54px nên chuỗi giá tràn ra, đồng thời ô số lượng bị ghim
   cứng 13rem trong khi rãnh lưới cũng đúng 13rem (chưa trừ padding ngang) nên ô này
   tràn sang và đè lên cột giá. Thu hẹp khoảng cách + ô số lượng, nới cột giá. */
@media (min-width: 976px) and (max-width: 1269px) {
  .cart-table {
    --table-gap: calc(1.6 / var(--total-width) * 100%);
    --product-column: calc(30 / var(--total-width) * 100%);
    --default-column: calc(17 / var(--total-width) * 100%);
    --cart-template: var(--product-column) var(--default-column) 10.4rem var(--default-column) auto;
  }

  .cart-header>*,
  .cart-item>.cart-product-col,
  .cart-item>.cart-unit-price-col,
  .cart-item>.cart-quantity-col,
  .cart-item>.cart-total-col,
  .cart-item>.cart-remove-col {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }

  .cart-item .cart-quantity-col .custom-number-input {
    width: 100%;
    max-width: 10.4rem;
  }

  /* Hai nút -/+ là flex item cố định; ô nhập phải co giãn phần còn lại. Nếu để nút
     rộng 3.2rem thì ô nhập chỉ còn ~22px, số 2 chữ số bị cắt mất (khung có
     overflow: hidden nên không thấy phần tràn). */
  .cart-item .cart-quantity-col .custom-number-input button {
    width: 2.8rem;
    flex: 0 0 2.8rem;
  }

  .cart-unit-price-col .price,
  .cart-unit-price-col .compare-price,
  .cart-total-col .price {
    white-space: nowrap;
  }
}

/* ── Thanh banner trên cùng khi dùng ảnh ──
   Ảnh trước đây bị đặt position-absolute nên thanh banner sập chiều cao về 0. */
.top-banner .top-banner__link {
  display: block;
}

.top-banner .top-banner__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── Bộ lọc danh mục dạng ngăn kéo ──
   Ngăn kéo còn là lớp phủ tới 1269px, nên chỉ bỏ đệm ngang từ 1270px trở lên
   (trước đây bỏ từ 976px làm nội dung dính sát lề trái ở khổ tablet). */
@media (min-width: 1270px) {
  .collection-filter .facet-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ── Ô nhập số lượng trong giỏ hàng ──
   Ô nhập vốn không co giãn được (min-width mặc định của flex item là auto) nên khi
   khung hẹp lại ở khổ tablet, số bị khung `overflow: hidden` cắt mất. Cho ô nhập
   chiếm hết phần còn lại và bỏ đệm ngang — chữ đã canh giữa sẵn. */
.cart-item .cart-quantity-col .custom-number-input input.form-quantity {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ── Carousel sản phẩm trong mega-menu ──
   Slide phải TRÀN hết bề ngang khung (header.css đã khai flex: 0 0 100%), không dùng
   kiểu "ló 1.75 card" của carousel trong trang. Rule 57% ở khối mobile phía trên nhắm
   `.product-list.embla__container>div` nên vô tình trùm cả carousel này — trong ngăn kéo
   mobile khung chỉ rộng 337px mà slide bị ép 192px, card thứ hai tràn ra ngoài và bị
   mép `overflow: clip` cắt mất. Đặt ngoài media query để đúng ở mọi khổ. */
.megamenu-products-carousel .embla__container>div {
  width: 100% !important;
  max-width: 100% !important;
}

/* Nhãn "Quà tặng" cho dòng quà trong giỏ (gift-engine tự thêm, sản phẩm 0đ) */
.cart-item__gift-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.2rem 0.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-success, #16a34a);
  background: color-mix(in srgb, var(--color-success, #16a34a) 12%, transparent);
  border-radius: 9999px;
}

.cart-item__gift-badge::before {
  content: "\1F381";
  /* 🎁 */
  font-size: 1.2rem;
}

.cart-item--gift .gift-quantity {
  white-space: nowrap;
}

/* ===== Hero AutoCare (section-autocare-hero) ===== */
.section-autocare-hero {
  padding: 0;
}

.autocare-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(42rem, 60vh, 62rem);
  overflow: hidden;
  isolation: isolate;
}

.autocare-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Lớp (trên→dưới): overlay đọc chữ · ảnh merchant (nếu có) · glow gold · base gradient thiết kế.
     Khi chưa upload ảnh, lớp ảnh 404 = trong suốt → glow + base gradient hiện ra (hero vẫn "chủ đích", không trống). */
  background-image:
    linear-gradient(90deg, var(--hero-overlay-1) 0%, var(--hero-overlay-2) 55%, rgba(18, 22, 28, 0.1) 100%),
    var(--hero-image, none),
    radial-gradient(120% 120% at 82% 20%, rgba(245, 166, 35, 0.55) 0%, rgba(245, 166, 35, 0) 55%),
    linear-gradient(120deg, #0d1116 0%, #12161C 45%, #1a1408 100%);
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  background-color: var(--color-dark, #12161C);
}

.autocare-hero--center {
  text-align: center;
}

.autocare-hero--center .autocare-hero__content {
  margin-inline: auto;
}

.autocare-hero--center .autocare-hero__actions {
  justify-content: center;
}

.autocare-hero__content {
  position: relative;
  z-index: 1;
  max-width: 60rem;
  color: #fff;
  padding-block: clamp(3.2rem, 6vw, 6.4rem);
}

.autocare-hero__kicker {
  display: inline-block;
  margin-bottom: 1.2rem;
  padding: 0.4rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  font-family: var(--font-headings-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.autocare-hero__heading {
  margin: 0 0 1.4rem;
  font-family: var(--font-headings-family);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3.2rem, 5.4vw, 6rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: #fff;
}

.autocare-hero__subheading {
  margin: 0 0 2.4rem;
  font-size: clamp(1.5rem, 1.8vw, 1.9rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  /* Canh đều bề rộng với tiêu đề/nút (không bó hẹp 46rem gây trống lề phải) */
  max-width: 100%;
}

.autocare-hero--center .autocare-hero__subheading {
  margin-inline: auto;
}

/* Canh nội dung sang phải (chỉ desktop — mobile luôn canh giữa) */
.autocare-hero--right {
  text-align: right;
}

.autocare-hero--right .autocare-hero__content {
  margin-inline-start: auto;
}

.autocare-hero--right .autocare-hero__actions {
  justify-content: flex-end;
}

.autocare-hero--right .autocare-hero__subheading {
  margin-inline-start: auto;
}

.autocare-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
}

.autocare-hero__btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.autocare-hero__btn-ghost:hover {
  background: #fff;
  color: var(--color-dark, #12161C);
  border-color: #fff;
}

@media (max-width: 767px) {
  .autocare-hero {
    min-height: clamp(38rem, 74vh, 52rem);
  }

  .autocare-hero__bg {
    background-image:
      linear-gradient(180deg, rgba(18, 22, 28, 0.45) 0%, var(--hero-overlay-1) 100%),
      var(--hero-image, none),
      radial-gradient(120% 90% at 70% 12%, rgba(245, 166, 35, 0.5) 0%, rgba(245, 166, 35, 0) 60%),
      linear-gradient(160deg, #0d1116 0%, #12161C 50%, #1a1408 100%);
    background-position: center, center, center, center;
  }

  .autocare-hero__content {
    text-align: center;
    margin-inline: auto;
  }

  .autocare-hero__actions {
    justify-content: center;
  }

  .autocare-hero__subheading {
    margin-inline: auto;
  }
}

/* ===== Reveal on scroll (reusable) ===== */
.reveal-on-scroll .reveal-item {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}

.reveal-on-scroll.is-visible .reveal-item {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Process steps (section-process-steps) — dark gunmetal band. Hero: tiêu đề
   + ảnh xe minh hoạ bên phải (chạy chéo góc trên-trái khi cuộn tới). Bước: icon
   hexagon nối đường đứt nét, nổi trên thẻ kính cao bằng nhau (CSS Grid stretch). ===== */
.section-process-steps {
  background-color: var(--process-bg-color);
  background-image: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--process-accent-color) 28%, transparent) 0%, transparent 55%);
  color: var(--process-heading-color);
}

.process-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.2rem;
  flex-wrap: wrap;
  margin-bottom: 3.2rem;
  /* Chặn tràn ngang toàn trang: quầng sáng ::before của ảnh xe (inset -20% -10%)
     và trạng thái trước animation translate(4rem,-4rem) đều lấn ra ngoài mép
     phải. Dùng `clip` (không phải hidden) để không tạo scroll container mới —
     sticky/position bên trong giữ nguyên; trục dọc vẫn visible. */
  overflow-x: clip;
}

.process-hero__text {
  flex: 1 1 30rem;
  min-width: 0;
}

.process-steps__kicker {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--font-headings-family);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--process-accent-color);
}

.process-steps__heading {
  margin: 0 0 1.2rem;
  font-family: var(--font-headings-family);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 4.2vw, 4.8rem);
  color: var(--process-heading-color);
}

.process-steps__subheading {
  margin: 0;
  color: var(--process-desc-color);
}

/* ── Ảnh xe: đã trim sát nội dung (không còn viền trong suốt thừa) nên chỉ cần
   giới hạn max-width, không cần max-height nữa. Mũi xe hướng trái nên chạy từ
   trên-phải xuống đúng vị trí (thuận chiều đầu xe). Delay 0.6s + quãng đường
   ngắn (2rem) + kéo dài thời lượng cho chuyển động chậm, rõ ràng hơn. ── */
.process-hero__car {
  display: block;
  position: relative;
  flex: 1 1 40rem;
  min-width: 0;
  max-width: 60rem;
  opacity: 0;
  transform: translate(4rem, -4rem) scale(0.97);
  transition: opacity 1.1s ease-out 0.6s, transform 1.1s ease-out 0.6s;
}

.process-hero__car.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.process-hero__car::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  background: radial-gradient(60% 60% at 60% 45%, rgba(245, 166, 35, 0.24) 0%, rgba(245, 166, 35, 0) 70%);
}

.process-hero__car img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2.4rem 3.6rem rgba(0, 0, 0, 0.55));
}

@media (prefers-reduced-motion: reduce) {
  .process-hero__car {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Hàng bước: grid đều cột, card cao bằng nhau, icon hexagon nối đường đứt nét ── */
.process-steps-row {
  display: grid;
  grid-template-columns: repeat(var(--process-cols, 5), 1fr);
  gap: 2.4rem 2rem;
  align-items: stretch;
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Đường nối chạy hết bề rộng CỘT (không phải bề rộng hexagon) + tràn nửa gap
   2 bên để nối liền mạch sang cột kế — cột grid mới là mốc đúng, hexagon chỉ
   là icon nhỏ nằm giữa cột nên không thể dùng làm mốc căn đường nối. */
.process-step::before {
  content: "";
  position: absolute;
  left: -1rem;
  right: -1rem;
  top: 4.15rem;
  height: 2px;
  z-index: 1;
  background-image: repeating-linear-gradient(to right, var(--process-accent-color) 0 6px, transparent 6px 12px);
  opacity: 0.5;
}

.process-step:first-child::before {
  left: 50%;
}

.process-step:last-child::before {
  right: 50%;
}

.process-step__hexwrap {
  position: relative;
  z-index: 2;
  width: 9.2rem;
  height: 8.3rem;
  margin-bottom: 1.6rem;
  flex-shrink: 0;
}

/* Hexagon dạng viền (ring) — không nền đặc: lớp ngoài tô màu nhấn làm viền,
   lớp ::before nhỏ hơn (inset) tô lại màu nền section để "khoét rỗng" phần
   giữa, tạo hiệu ứng outline thay vì khối đặc. Icon nổi trên cùng nhờ z-index. */
.process-step__hex {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: var(--process-accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
}

.process-step__hex::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: var(--process-bg-color);
}

.process-step__hex .icon {
  position: relative;
  z-index: 1;
  font-size: inherit;
  line-height: 1;
  color: var(--process-accent-color);
}

.process-step__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.6rem;
  padding: 2.4rem 2rem;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.process-step:hover .process-step__card {
  border-color: color-mix(in srgb, var(--process-accent-color) 55%, transparent);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-0.4rem);
}

.process-step__num {
  display: inline-block;
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--process-accent-color);
}

.process-step__title {
  margin: 0 0 0.8rem;
  font-family: var(--font-headings-family);
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--process-heading-color);
}

.process-step__desc {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--process-desc-color);
}

@media (max-width: 1023px) {
  .process-hero {
    justify-content: center;
    text-align: center;
  }

  .process-hero__car {
    flex-basis: 34rem;
    max-width: 44rem;
  }

  .process-steps-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-step::before {
    display: none;
  }
}

@media (max-width: 639px) {
  .process-hero__car {
    max-width: 30rem;
  }

  .process-steps-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-step__hexwrap {
    width: 7.6rem;
    height: 6.8rem;
  }

  .process-step__hex {
    font-size: 2.8rem;
  }
}

/* ===== Service pricing (section-service-pricing) ===== */
/* padding-top chừa chỗ cho badge "nổi bật" + card featured nhô lên (translateY),
   tránh đè subtitle section phía trên. */
.pricing-grid {
  padding-top: 2.4rem;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2.4rem 2rem;
  background: var(--color-background, #fff);
  border: 1px solid rgba(18, 22, 28, 0.1);
  border-radius: 1.8rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card--featured {
  border-color: var(--color-primary, #F5A623);
  box-shadow: 0 1.6rem 4rem rgba(var(--color-primary-rgb), 0.22);
  transform: translateY(-6px);
}

.pricing-card--featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(160deg, var(--color-primary, #F5A623), rgba(245, 166, 35, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.pricing-card__badge {
  position: absolute;
  top: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4rem 1.4rem;
  border-radius: 100px;
  background: var(--color-primary, #F5A623);
  color: #fff;
  font-family: var(--font-headings-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing-card__name {
  margin: 0;
  font-family: var(--font-headings-family);
  font-weight: 600;
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--color-foreground, #12161C);
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pricing-card__amount {
  font-family: var(--font-headings-family);
  font-weight: 700;
  font-size: 2.8rem;
  color: var(--color-primary, #F5A623);
}

.pricing-card__note {
  font-size: 1.3rem;
  color: var(--color-neutral-300);
}

.pricing-card__features {
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--color-neutral-300, #6B5F58);
}

.pricing-card__feature .icon {
  color: var(--color-primary, #F5A623);
  font-size: 1.4rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.pricing-card__cta-wrap {
  margin-top: auto;
  display: block;
}

.pricing-card__cta--ghost {
  background: transparent;
  color: var(--color-primary, #F5A623);
  border: 1.5px solid var(--color-primary, #F5A623);
}

.pricing-card__cta--ghost:hover {
  background: var(--color-primary, #F5A623);
  color: #fff;
}

.pricing__compare-link {
  color: var(--color-primary, #F5A623);
}

/* ===== Pricing page (page.pricing) ===== */
.pricing-page {
  padding-block: clamp(4rem, 6vw, 7.2rem) clamp(6.4rem, 9vw, 10.4rem);
}

.pricing-page__head {
  margin-bottom: 4rem;
}

.pricing-page__title {
  font-family: var(--font-headings-family);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 4vw, 4rem);
  color: var(--color-foreground, #12161C);
  margin: 0 0 1rem;
}

.pricing-page__intro {
  font-size: 1.5rem;
  line-height: 1.6;
}

.pricing-page__cta {
  margin-top: 5.6rem;
  padding: 3.2rem 2.4rem;
}

/* ===== Pricing tabs + bảng so sánh theo nhóm dịch vụ (trang /bang-gia) ===== */
.pricing-tabs__nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 4rem;
}

.pricing-tabs__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 2.4rem;
  border-radius: 9999px;
  border: 1px solid rgba(18, 22, 28, 0.12);
  background: #fff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.35rem;
  color: var(--color-foreground, #12161C);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(18, 22, 28, 0.04);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pricing-tabs__btn:hover:not(.active) {
  border-color: var(--color-primary, #F5A623);
  color: var(--color-primary, #F5A623);
}

.pricing-tabs__btn.active {
  background: var(--color-foreground, #12161C);
  border-color: var(--color-foreground, #12161C);
  color: #fff;
}

.pricing-table-wrap {
  /* Card ngoài KHÔNG set overflow (mặc định visible) — đây là nơi badge
     "Được khuyến nghị" nổi tự do ra ngoài viền trên, không bị cắt và không
     cần padding-top dự trữ chỗ. Cuộn ngang mobile chuyển xuống
     .pricing-table-scroll (div con) để overflow-x:auto không ép cắt theo
     trục dọc ở tầng này (nếu đặt overflow-x ngay trên card, badge sẽ bị
     ép clip theo — đã thử/thất bại nhiều cách trước khi tách 2 tầng này).
     `overflow-x: clip` chỉ là chốt chặn cuối: badge đã được JS kẹp trong lòng
     card, nếu JS không chạy thì badge cũng không bao giờ đẩy tràn ngang trang.
     Dùng `clip` (không phải hidden/auto) để trục dọc vẫn visible — badge vẫn
     nổi lên trên viền trên của card. */
  position: relative;
  /* KHÔNG overflow clip: WebKit (Safari/Chrome iOS) không giữ trục dọc visible khi trục
     ngang clip → cắt mất phần badge nhô lên. Chống tràn ngang bằng JS ẩn badge khi cột
     nổi bật trôi ra ngoài khung (pricing-table.js). */
  overflow: visible;
  border-radius: 1.8rem;
  border: 1px solid rgba(18, 22, 28, 0.08);
  box-shadow: 0 1.6rem 4rem rgba(18, 22, 28, 0.08);
}

.pricing-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 1.8rem;
}

.pricing-table {
  width: 100%;
  min-width: 76rem;
  border-collapse: collapse;
  background: #fff;
}

.pricing-table th,
.pricing-table td {
  padding: 2rem 2rem;
  text-align: center;
  border-bottom: 1px solid rgba(18, 22, 28, 0.08);
  vertical-align: top;
}

.pricing-table__head-cat {
  text-align: left !important;
  background: var(--color-foreground, #12161C);
  color: #fff;
}

.pricing-table__head-cat-name {
  font-family: var(--font-headings-family);
  font-weight: 700;
  font-size: 1.9rem;
  margin: 0 0 0.4rem;
}

.pricing-table__head-cat-sub {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.6);
}

.pricing-table__head-tier {
  background: #fff;
  position: relative;
}

.pricing-table th.pricing-table__head-tier--featured {
  background: var(--color-foreground, #12161C);
  color: #fff;
}

.pricing-table__recommend {
  /* Sibling của .pricing-table-scroll (không còn nằm trong <th>) nên không bị
     overflow-x:auto của phần cuộn ép clip theo trục dọc. Vị trí ngang do JS
     (pricing-table.js) tính theo tâm thật của cột đang có class
     .pricing-table__head-tier--featured — không hardcode %, merchant đổi số
     cột/đổi cột nổi bật trong nội dung trang vẫn tự bám đúng. `left` mặc
     định 50% chỉ là fallback trước khi JS chạy hoặc khi JS bị chặn. */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -60%);
  z-index: 1;
  background: var(--color-primary, #F5A623);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.6rem 1.6rem;
  border-radius: 9999px;
  box-shadow: 0 0.4rem 1rem rgba(var(--color-primary-rgb), 0.35);
  white-space: nowrap;
}

.pricing-table__tier-name {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.4rem;
  margin: 0 0 0.8rem;
}

.pricing-table__badge {
  display: block;
  width: fit-content;
  padding: 0.3rem 1.2rem;
  border-radius: 9999px;
  border: 1px solid rgba(18, 22, 28, 0.15);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 auto 1.2rem;
}

.pricing-table__head-tier--featured .pricing-table__badge {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.pricing-table__price {
  display: inline-block;
  font-family: var(--font-headings-family);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  vertical-align: baseline;
  color: var(--color-primary, #F5A623);
}

.pricing-table__note {
  display: inline-block;
  font-size: 1.2rem;
  margin-left: 0.4rem;
  vertical-align: baseline;
  color: rgba(18, 22, 28, 0.5);
}

.pricing-table__head-tier--featured .pricing-table__note {
  color: rgba(255, 255, 255, 0.6);
}

.pricing-table__feat {
  text-align: left !important;
  font-weight: 600;
  color: var(--color-foreground, #12161C);
}

.pricing-table__feat-desc {
  font-weight: 400;
  font-size: 1.25rem;
  color: rgba(18, 22, 28, 0.5);
  margin-top: 0.2rem;
}

.pricing-table td.is-featured {
  background: rgba(var(--color-primary-rgb), 0.06);
}

.pricing-table__yes {
  color: #2e7d32;
  font-size: 1.8rem;
}

.pricing-table__no {
  color: rgba(18, 22, 28, 0.25);
  font-size: 1.8rem;
}

.pricing-table__cta {
  padding: 2rem 1.8rem 2.4rem;
}

.pricing-table__cta .btn {
  width: 100%;
  justify-content: center;
  border-radius: 9999px;
}

/* ===== Before / After slider (section-before-after) ===== */
.before-after {
  display: block;
}

.before-after__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 1.4rem;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  background: var(--color-dark, #12161C);
}

.before-after__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.before-after__after {
  clip-path: inset(0 0 0 var(--pos, 50%));
  /* Chưa upload ảnh sau: background-image rỗng → lộ ảnh trước bên dưới. Nền đen
     để phần "sau" hiển thị nền đen thay vì trông giống hệt ảnh trước. */
  background-color: #000;
}

.before-after__label {
  position: absolute;
  top: 1rem;
  padding: 0.3rem 1.1rem;
  border-radius: 100px;
  font-family: var(--font-headings-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.before-after__label--before {
  left: 1rem;
  background: rgba(18, 22, 28, 0.72);
}

.before-after__label--after {
  right: 1rem;
  background: var(--color-primary, #F5A623);
}

.before-after__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

.before-after__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary, #F5A623);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.before-after__handle .icon {
  font-size: 1.1rem;
}

.before-after__handle-left {
  transform: rotate(180deg);
}

.before-after__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  /* mouse/touch dùng kéo trên frame; range chỉ cho bàn phím (tab + mũi tên) */
}

.before-after__range:focus-visible {
  outline: none;
}

.before-after__frame:has(.before-after__range:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.before-after.is-dragging .before-after__frame {
  cursor: ew-resize;
}

.before-after__caption {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-headings-family);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--color-foreground, #12161C);
}

/* ===== Vertical rhythm cho các section AutoCare =====
   `.section{padding:var(--section-padding,0)}` (css-variables inline <style>) load SAU
   custom.css nên thắng cascade nếu cùng specificity. Dùng `.section.section-xxx`
   (2 class) để specificity cao hơn → thắng bất kể thứ tự load. Dùng !important cho
   chắc vì shorthand `padding` reset cả padding-block. */
.section.section-process-steps {
  padding-block: clamp(6rem, 7.5vw, 9.6rem) !important;
}

@media (max-width: 767px) {

  .section.section-process-steps {
    padding-block: 4.8rem !important;
  }
}

/* ===== Promo popup redesign (promo-card: ảnh nền + overlay heading/CTA) ===== */
.promo-card {
  position: relative;
  width: min(92vw, 46rem);
  border-radius: 1.8rem;
  overflow: hidden;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.5);
}

.promo-card__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 3;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
}

.promo-card__link {
  display: block;
}

.promo-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 82vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

@media (min-width: 768px) {
  .promo-card__media {
    aspect-ratio: 1 / 1;
  }
}

.promo-card__badge {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  padding: 0.5rem 1.4rem;
  border-radius: 100px;
  background: var(--color-primary, #F5A623);
  color: #fff;
  font-family: var(--font-headings-family);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 0.4rem 1.2rem rgba(var(--color-primary-rgb), 0.5);
}

.promo-card__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 2.4rem;
  text-align: center;
  color: #fff;
}

.promo-card__heading {
  margin: 0 0 0.8rem;
  font-family: var(--font-headings-family);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  line-height: 1.1;
  color: #fff;
}

.promo-card__subtext {
  margin: 0 auto 1.6rem;
  max-width: 34rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.promo-card__cta {
  pointer-events: none;
}

/* ===== Fix booking modal tràn chiều cao mobile + 2 panel desktop =====
   Theme không compile class Tailwind arbitrary (max-h-[92vh]/max-w-[48rem]/max-w-[64rem]/
   md:grid-cols-[38%_62%]) → set tường minh. Thiếu rule này khiến panel ảnh trái không có
   cột riêng để hiển thị (grid vẫn 1 cột trên mọi viewport). */
.booking-card {
  width: min(92vw, 46rem);
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 1.8rem;
  grid-template-columns: 1fr;
  /* rounded-lg arbitrary không compile → set tường minh */
}

/* Chặn "lỗi UI khi scroll ngang": grid item (form panel) mặc định có min-width:auto,
   nghĩa là nó không co nhỏ hơn nội dung bên trong — hàng icon dịch vụ scroll ngang
   (flex-nowrap) đẩy min-content rộng ra, kéo cả .booking-card/trang tràn ngang theo.
   min-width:0 buộc grid item co vừa cột, để overflow-x-auto bên trong tự cuộn đúng chỗ. */
.booking-panel-form,
.booking-panel-image {
  min-width: 0;
}

@media (min-width: 768px) {
  .booking-card {
    width: min(94vw, 100rem);
    max-height: 92vh;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .booking-card {
    width: 96vw;
    max-height: 94vh;
    padding: 1.8rem 1.4rem;
    border-radius: 1.6rem;
  }

  .booking-card .booking-grid {
    gap: 1rem;
  }
}

/* ===== Đồng nhất canh heading + subheading (heading snippet mặc định canh trái,
   subheading canh giữa → cho cả hai canh GIỮA ở các section AutoCare) ===== */
.section-service-pricing .heading-bar,
.section-before-after .heading-bar {
  text-align: center;
  justify-content: center;
}

.section-service-pricing .heading-bar .heading,
.section-before-after .heading-bar .heading {
  margin-inline: auto;
}

/* subheading: đảm bảo max-width + canh giữa (arbitrary max-w-[52rem] không compile) */
.pricing__subheading,
.ba__subheading {
  max-width: 70rem;
  margin-inline: auto;
  text-align: center;
}

/* ============================================================
   REDESIGN v2 — "Cinematic Automotive Luxury"
   Nền kim loại + gold accent sắc, chiều sâu, typography uy lực.
   Block cuối cùng → override các style trước.
   ============================================================ */

/* --- Section heading system: kicker line + Oswald lớn, canh giữa uy lực --- */
.section-service-pricing .heading-bar,
.section-before-after .heading-bar,
.section-collection-list .section-heading,
.section-video-review .section-heading {
  text-align: center;
}

/* Headline đồng nhất TOÀN SITE: KHÔNG gạch chân/thanh trang trí dưới heading
   (trước đây .section-before-after có 1 thanh gradient ::after riêng, gây lệch
   với các section khác — bỏ để mọi heading cùng 1 kiểu, không có gạch dưới). */
.section-service-pricing .heading,
.section-before-after .heading {
  position: relative;
  font-family: var(--font-headings-family);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 3.6vw, 3.8rem);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.pricing__subheading {
  margin-top: 0.8rem !important;
  margin-bottom: 3.2rem !important;
}

/* Combo tiết kiệm — thẻ biến thể số lượng trên product detail */
.combo-tier-card-wrap {
  width: 100%;
  display: flex;
}

.combo-tier-card {
  width: 100%;
  flex: 1;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--rounded, 8px);
  padding: 1rem 0.6rem;
  text-align: center;
  transition: border-color .2s ease, background-color .2s ease;
}

.peer:checked+.combo-tier-card,
.combo-tier-card--selected {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.combo-tier-card__badge {
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%);
  background: #E85D2C;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  white-space: nowrap;
}

.combo-tier-card__badge--featured {
  background: #218410;
}

.combo-tier-card__name {
  font-weight: 600;
  font-size: 1.4rem;
  margin-top: 0.4rem;
}

.combo-tier-card__price {
  font-weight: 700;
  color: var(--color-price);
}

.combo-tier-card__unit-price {
  font-size: 1.2rem;
  color: var(--color-neutral-300);
}

/* Mobile: 3 tier trở xuống vẫn dùng grid-cols-3 (vừa khít màn hình, không cắt chữ).
   Chỉ chuyển sang scroll ngang khi có từ 4 tier trở lên (không đủ chỗ chia cột đều). */
@media (max-width: 767px) {
  .combo-tier-picker__grid:has(.combo-tier-card-wrap:nth-child(4)) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .combo-tier-picker__grid:has(.combo-tier-card-wrap:nth-child(4))::-webkit-scrollbar {
    display: none;
  }

  .combo-tier-picker__grid:has(.combo-tier-card-wrap:nth-child(4)) .combo-tier-card-wrap {
    flex: 0 0 auto;
    width: 11rem;
  }

  .combo-tier-card__name {
    font-size: 1.3rem;
  }

  .combo-tier-card__price {
    font-size: 1.4rem;
  }

  .combo-tier-card__unit-price {
    font-size: 1.1rem;
  }
}

.service-card {
  border: 1px solid rgba(18, 22, 28, 0.08);
  border-radius: 1.8rem;
  box-shadow: 0 1px 2px rgba(18, 22, 28, 0.04);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(245, 166, 35, 0.5);
  box-shadow: 0 2.4rem 5rem rgba(var(--color-primary-rgb), 0.22);
}

.service-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 17, 22, 0.55), rgba(12, 17, 22, 0) 45%);
}

.service-card .service-card__media {
  position: relative;
}

.service-card__badge {
  z-index: 2;
  background: rgba(245, 166, 35, 0.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.3);
}

.service-card__title {
  font-size: 2rem;
  letter-spacing: 0.01em;
}

.service-card__price strong {
  font-size: 1.9rem;
}

/* CTA nhẹ: outline → fill khi hover (bớt 6 thanh xanh đặc) */
.service-card__cta.btn--primary {
  background: transparent;
  color: var(--color-primary, #F5A623);
  border: 1.5px solid rgba(245, 166, 35, 0.55);
}

.service-card:hover .service-card__cta.btn--primary,
.service-card__cta.btn--primary:hover {
  background: var(--color-primary, #F5A623);
  color: #fff;
  border-color: var(--color-primary, #F5A623);
}

/* --- Collections & video cards: bo tròn, hover zoom ảnh, viền tinh --- */
.section-collection-list .coll-item,
.section-collection-list a[class*="coll"] {
  border-radius: 1.4rem;
  overflow: hidden;
}

.section-collection-list img,
.section-video-review img {
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.section-collection-list a:hover img {
  transform: scale(1.06);
}

/* --- Atmosphere: bớt phẳng cho các band sáng --- */
.section.section-service-pricing {
  background: var(--pricing-section-bg);
}

/* --- pass 2: nâng chiều sâu ảnh service card (zoom nhẹ khi hover) --- */
.service-card__media {
  position: relative;
}

.service-card__media[style] {
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.service-card:hover .service-card__media[style] {
  transform: scale(1.05);
}

/* --- pass 2: shadow tinh tế hơn cho pricing card thường (bớt phẳng) --- */
.pricing-card:not(.pricing-card--featured) {
  box-shadow: 0 0.6rem 2rem rgba(18, 22, 28, 0.06);
}

/* ===== Section Blog — featured (trái) + list nhỏ (phải) ===== */
.section-blogs__view-all {
  color: var(--color-primary, #F5A623);
}

.section-blogs__view-all:hover {
  text-decoration: underline;
}

.section-blogs__featured-image {
  background: var(--color-neutral-100, #e9ebee);
}

/* Tỷ lệ khung ảnh lấy đúng theo setting "Tỷ lệ khung hình bài viết" (kể cả
   'Tuỳ chỉnh') qua biến --blogs-aspect-ratio đã tính sẵn ở css-variables.bwt —
   giống hệt cách article-card.bwt đang dùng, không hardcode ratio riêng ở đây. */
.section-blogs__featured-image.aspect-custom,
.section-blogs__featured-image .aspect-custom,
.section-blogs__list-thumb.aspect-custom,
.section-blogs__list-thumb .aspect-custom {
  --aspect-ratio: var(--blogs-aspect-ratio, 1/1);
}

.section-blogs__featured-tag {
  margin: 1.2rem 0 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary, #F5A623);
}

.section-blogs__featured-title {
  margin: 0 0 0.6rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-foreground, #12161C);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section-blogs__featured-tag+.section-blogs__featured-title {
  margin-top: 0;
}

.section-blogs__featured-desc {
  margin: 0;
  color: var(--color-neutral-300);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section-blogs__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.section-blogs__list-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.section-blogs__list-thumb {
  flex: none;
  width: 8rem;
  background: var(--color-neutral-100, #e9ebee);
}

.section-blogs__list-title {
  margin: 0 0 0.4rem;
  font-weight: 600;
  color: var(--color-foreground, #12161C);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section-blogs__list-item:hover .section-blogs__list-title {
  color: var(--color-primary, #F5A623);
}

.section-blogs__list-meta {
  margin: 0;
  font-size: 1.3rem;
  color: var(--color-neutral-300);
}

/* Booking portal — 2 panel (ảnh trái + form phải) */
.booking-card {
  padding: 0;
}

.booking-panel-image {
  background-color: var(--booking-panel-bg);
  color: var(--booking-panel-text);
  min-height: 100%;
}

/* Ảnh thật ở nửa trên panel (thay cho div bg-image + overlay text cũ — text giờ tách
   thành nội dung HTML thật bên dưới ảnh, dễ đọc hơn nhiều so với chữ đè lên ảnh). */
.booking-panel-photo {
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  width: 100%;
}

.booking-panel-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.booking-panel-content {
  min-height: 0;
}

.booking-usp-title {
  color: var(--booking-panel-text);
  margin-bottom: 2.5rem;
}

.booking-usp-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.booking-usp-icon {
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--rounded-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  color: var(--color-primary);
}

.booking-usp-icon svg {
  width: 1.8rem;
  height: 1.8rem;
}

.booking-usp-item-title {
  color: var(--booking-panel-text);
  font-size: 1.5rem;
}

.booking-usp-item-desc {
  color: var(--booking-panel-text);
  margin-top: 0.5rem;
  opacity: 0.7;
}

.booking-support-card {
  margin-top: 2rem;
  padding: 1.6rem;
  border-radius: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--booking-panel-text) 16%, transparent);
}

.booking-support-label {
  color: var(--booking-panel-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.booking-support-phone {
  font-size: 1.8rem;
  color: var(--color-primary);
}

.booking-support-hours {
  color: var(--booking-panel-text);
  margin-top: 0.8rem;
}

.booking-panel-form {
  max-height: 92vh;
}

@media (min-width: 768px) {
  .booking-panel-form {
    max-height: 92vh;
  }
}

/* Scroll ngang, mỗi item chiếm ~1/3.75 chiều rộng khung (thay vì wrap xuống dòng).
   fieldset có default `min-width: min-content` của trình duyệt — ép fieldset (và
   mọi thứ bên trong, kể cả grid overflow-x-auto) nở rộng vừa đủ chứa hết 6 item
   không-wrap, phá luôn cơ chế cuộn ngang (tràn ra ngoài card thay vì cuộn). */
.booking-group fieldset {
  min-width: 0;
}

.booking-service-grid {
  gap: 1.2rem;
  padding-bottom: 0.6rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.booking-service-grid::-webkit-scrollbar {
  height: 0.5rem;
}

.booking-service-grid::-webkit-scrollbar-thumb {
  background: var(--color-neutral-100);
  border-radius: var(--rounded-full);
}

.booking-service-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex: 0 0 calc((100% - 3 * 1.2rem) / 3.5);
  scroll-snap-align: start;
}

.booking-service-icon {
  width: 6rem;
  height: 6rem;
  border-radius: var(--rounded-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-50);
  color: var(--color-foreground);
  border: 1px solid var(--color-neutral-100);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.booking-service-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.booking-service-icon .icon {
  font-size: 2.8rem;
}

.booking-service-icon svg {
  width: 2.8rem;
  height: 2.8rem;
  color: var(--color-primary);
}

.booking-service-option.is-active .booking-service-icon {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.booking-service-label {
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.3;
  color: var(--color-neutral-300);
}

.booking-service-option.is-active .booking-service-label {
  color: var(--color-foreground);
  font-weight: 600;
}

.booking-variant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.booking-variant-list[hidden] {
  display: none;
}

.booking-variant-option {
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--color-neutral-100);
  border-radius: var(--rounded-full);
  background: var(--color-background);
  color: var(--color-foreground);
  font-size: 1.3rem;
  font-weight: 600;
}

.booking-variant-option.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-button-primary-text);
}

.booking-variant-option:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.booking-price {
  margin-top: 1rem;
  color: var(--color-primary);
  font-size: 1.6rem;
  font-weight: 700;
}

.booking-price[hidden] {
  display: none;
}

.booking-branch-select {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 3.2rem;
}

.booking-nearest-trigger {
  width: 100%;
  margin-top: 1rem;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.booking-nearest-trigger span[aria-hidden] {
  flex-shrink: 0;
}

.booking-nearest-trigger.is-loading {
  cursor: wait;
  opacity: 0.7;
}

.booking-nearest-status {
  margin-top: 0.8rem;
  color: var(--color-neutral-300);
}

.booking-nearest-status[data-tone="success"] {
  color: var(--color-primary);
}

.booking-nearest-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
  max-height: 32rem;
  overflow-y: auto;
}

.booking-nearest-list[hidden] {
  display: none;
}

.booking-nearest-card {
  position: relative;
  padding: 1rem;
  border: 1px solid var(--color-neutral-100);
  border-radius: var(--rounded);
  background: var(--color-background);
}

.booking-nearest-card:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.booking-nearest-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.8rem;
  cursor: pointer;
}

.booking-nearest-choice input {
  margin-top: 0.3rem;
  accent-color: var(--color-primary);
}

.booking-nearest-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.booking-nearest-copy small {
  color: var(--color-neutral-300);
}

.booking-nearest-distance {
  color: var(--color-primary);
  font-size: 1.2rem;
  font-weight: 600;
  white-space: nowrap;
}

.booking-nearest-directions {
  display: inline-flex;
  margin-top: 0.6rem;
  margin-left: 2.2rem;
  color: var(--color-primary);
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: underline;
}

/* Thông tin hotline/zalo hiển thị trong panel ảnh (desktop) — chữ sáng trên nền tối,
   bản mobile (.booking-contacts không có hậu tố --panel) giữ style cũ ở cuối form. */
.booking-contacts--panel .booking-contact {
  color: var(--booking-panel-text);
}

.booking-date-field {
  display: flex;
  align-items: center;
}

.booking-date-icon {
  position: absolute;
  left: 1.2rem;
  pointer-events: none;
  color: var(--color-neutral-300);
}

.booking-date-input {
  padding-left: 3.6rem;
}

/* Phân nhóm form đặt lịch theo bước (1. Chọn dịch vụ / 2. Thông tin khách hàng / 3. Thời gian) —
   mỗi nhóm là 1 khối card riêng (nền + viền) để phân tách rõ ràng thay vì chỉ có heading trơn. */
.booking-group {
  margin-bottom: 1.6rem;
  padding: 1.6rem;
  border-radius: 1.2rem;
  background: #fcfcfc;
  border: 1px solid var(--color-neutral-50);
}

.booking-group-heading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-neutral-50);
}

.booking-group-num {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--rounded-full);
  background: var(--color-primary);
  color: var(--color-button-primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
}

/* Headline mọi section in hoa đồng nhất (trước chỉ product-tabs tự uppercase). */
.heading-bar .heading,
.section-hot-spots .heading,
.process-steps__heading {
  text-transform: uppercase;
}

/* ============================================================
   Sản phẩm dịch vụ (product.service) — P0-A
   Quy trình theo nhóm + CTA đặt lịch. Dùng token theme sẵn có,
   sizing/radius set tường minh (Tailwind purged không compile arbitrary).
   ============================================================ */

/* CTA đặt lịch trên trang dịch vụ — mirror layout nút sản phẩm thường (2 nút ngang đều nhau) */
.service-cta__book .icon {
  font-size: 1.6rem;
}

.service-cta>a,
.service-cta portal-opener {
  flex: 1 1 0%;
  min-width: 0;
}

.service-cta portal-opener {
  display: flex;
}

.service-cta portal-opener>.service-cta__book {
  width: 100%;
}

/* Quy trình theo nhóm */
.section-service-process {
  margin-block: var(--section-margin, 6.4rem) 0;
}

.service-process__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  max-width: 96rem;
  margin-inline: auto;
}

.service-process__heading {
  text-align: center;
}

.service-process__warranty {
  max-width: 96rem;
  margin-inline: auto;
}

/* Trước/Sau canh giữa (headline + block) */
.service-ba-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 108rem;
  margin-inline: auto;
}

.service-ba-grid .before-after {
  flex: 1 1 48rem;
  max-width: 52rem;
}

.service-process__step {
  background: var(--color-relative, #f4f6f5);
  border: 1px solid var(--color-neutral-50);
  border-radius: 1.2rem;
  padding: 1.8rem 1.6rem;
}

.service-process__num {
  font-family: var(--font-heading, inherit);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.85;
}

.service-process__title {
  font-weight: 600;
  font-size: 1.6rem;
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
}

.service-process__desc {
  font-size: 1.4rem;
  color: var(--color-neutral-300);
  line-height: 1.5;
}

.service-process__warranty {
  margin-top: 1.8rem;
  padding: 1.2rem 1.6rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-neutral-400);
  font-size: 1.4rem;
  text-align: center;
}

@media (max-width: 767px) {
  .service-process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

@media (max-width: 479px) {
  .service-process__grid {
    grid-template-columns: 1fr;
  }
}

/* Context dịch vụ + cỡ xe trong modal đặt lịch (P0-B) */
.booking-context {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  color: var(--color-primary);
  font-size: 1.4rem;
}

.booking-context[hidden] {
  display: none;
}

.booking-context .icon {
  font-size: 1.6rem;
}

.booking-context b {
  color: var(--color-heading, inherit);
}

/* Card dịch vụ động (P1-A) */
.service-card__media-link {
  display: block;
}

.service-card__badge-service {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 2;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.3rem 1rem;
  border-radius: var(--rounded-full);
  background: var(--color-primary);
  color: var(--color-button-primary-text, #fff);
}

/* ============================================================
   Bảng THƯỜNG trong nội dung (non-tech chèn qua editor, không class) — P1-B
   Áp cho: trang so sánh giá (.pricing-page) + mô tả sản phẩm dịch vụ (.prose).
   Header vàng brand, zebra, viền mềm, cuộn ngang trên mobile.
   ============================================================ */
.pricing-page table:not(.pricing-table),
.main-product .content.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font-size: 1.45rem;
  border: 1px solid var(--color-neutral-50);
  border-radius: 1rem;
  overflow: hidden;
}

.pricing-page table:not(.pricing-table) th,
.main-product .content.prose table th {
  background: var(--color-primary);
  color: var(--color-button-primary-text, #fff);
  font-weight: 600;
  text-align: left;
  padding: 1.2rem 1.4rem;
}

.pricing-page table:not(.pricing-table) td,
.main-product .content.prose table td {
  padding: 1.1rem 1.4rem;
  border-top: 1px solid var(--color-neutral-50);
  vertical-align: top;
}

.pricing-page table:not(.pricing-table) tbody tr:nth-child(even),
.main-product .content.prose table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

/* Cột đầu (tên gói/hạng mục) nổi bật */
.pricing-page table:not(.pricing-table) td:first-child,
.main-product .content.prose table td:first-child {
  font-weight: 600;
  color: var(--color-heading, inherit);
}

@media (max-width: 639px) {

  .pricing-page table:not(.pricing-table),
  .main-product .content.prose table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* Badge "Phù hợp xe điện" (P2-A) — xanh điện semantic, tiết chế trên nền black-gold */
:root {
  --color-ev: #12A66A;
}

.badge-ev {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.3rem 1rem;
  border-radius: var(--rounded-full);
  background: var(--color-ev);
  color: #fff;
}

.badge-ev::before {
  content: "\26A1";
  font-size: 1.1rem;
}

.badge-ev--inline {
  position: static;
  align-self: flex-start;
  margin-top: 0.4rem;
}
/* ===== Mobile UI review (Task 67) ===== */
@media (max-width: 767px) {
  /* Header trong suốt chỉ hợp desktop: banner mobile thấp, logo/menu đè lên chữ trong ảnh → mobile dùng header thường */
  .header.header.header-transparent {
    background-color: var(--color-header-bg);
    color: var(--color-header);
  }
  .header.header.header-transparent .header-logo { display: block; }
  .header.header.header-transparent .header-logo-transparent { display: none; }
  /* header.css nạp sau custom.css → cần selector mạnh hơn để thắng margin âm */
  .header.header.header-has-transparent ~ main { margin-top: 0; }

  /* Thanh CRO đáy: 6 nút trên ~390px → chữ nhỏ lại để không bị cắt "Sản...", "Khuyến..." */
  .cro-btn-item .text-xs {
    font-size: 1rem;
    line-height: 1.4rem;
    letter-spacing: -0.01em;
  }
  /* Liquid gắn .hidden khi giỏ rỗng nhưng .cro-btns:has(.cro-btn-item){display:block} thắng .hidden → ép lại */
  .cro-btns.hidden { display: none; }

  /* Tab bảng giá (markup trong nội dung trang): không bẻ chữ thành nhiều dòng, cuộn ngang từ mép trái */
  .pricing-tabs__nav {
    justify-content: flex-start;
    padding-bottom: 0.4rem;
  }
  .pricing-tabs__nav > li { flex: 0 0 auto; }
  .pricing-tabs__btn { white-space: nowrap; }
  /* Nút Đặt lịch trong bảng giá: cột hẹp trên mobile → không bẻ chữ, bớt padding ngang (bảng tự cuộn ngang) */
  .pricing-table__cta .btn {
    white-space: nowrap;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  /* Bảng giá mobile: ô đệm gọn hơn, cột 1 (tên hạng mục) rộng tối thiểu + dính mép trái khi cuộn ngang */
  .pricing-table th,
  .pricing-table td { padding: 1.4rem 1.2rem; }
  .pricing-table__head-cat,
  .pricing-table__feat {
    min-width: 15rem;
    max-width: 17rem;
    position: sticky;
    left: 0;
    z-index: 2;
  }
  .pricing-table__feat { background: #fff; }
  .pricing-table__head-tier { min-width: 13rem; }

  /* Bảng trong nội dung trang (hướng dẫn chọn cỡ xe...): cuộn ngang thay vì bẻ từng chữ */
  .page-content .prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-content .prose table td:first-child,
  .page-content .prose table th:first-child { white-space: nowrap; }

  /* Bước lẻ cuối của quy trình (bước 05 khi grid 2 cột): canh giữa thay vì lệch trái */
  .process-steps-row > .process-step:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: calc(50% - 0.8rem);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Trước & Sau: khi số cặp lẻ (vd 3), cặp cuối đứng 1 mình ở hàng 2 → canh giữa
   thay vì lệch trái (grid 2 cột md+). */
@media (min-width: 768px) {
  .ba-grid > .before-after:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: calc(50% - 1.2rem);
    margin-inline: auto;
  }
}

/* Bảng giá: canh giữa khi tắt bớt gói. --pricing-cols = số gói đang bật; giới hạn
   bề rộng grid theo số gói + margin auto để cụm thẻ nằm giữa (4 gói vẫn full). */
@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(var(--pricing-cols, 4), minmax(0, 1fr));
    max-width: calc(var(--pricing-cols, 4) * 30rem);
    margin-inline: auto;
  }
}