/* 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 {
  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;
  }
}

.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;
}

@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(1440px - 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 — flat layout (matches new UI)
   All colors come from theme settings via CSS vars
   ============================================ */
.coupon-ticket {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  background: var(--coupon-active-bg, #ffffff);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  width: 100%;
  height: 100%;
  position: relative;
}

.coupon-ticket:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* ── Icon circle (bg from theme neutral, tint from title color) ── */
.coupon-ticket__icon {
  flex: 0 0 auto;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: var(--color-neutral-50, #f0eeeb);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coupon-active-title, #1a1a1a);
}

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

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

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

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

.coupon-ticket__meta {
  font-size: 1.2rem;
  color: var(--coupon-active-desc, #666666);
  opacity: 0.75;
  line-height: 1.4;
  margin: 0;
}

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

/* ── Action: dashed code pill + copy button ── */
.coupon-ticket__action {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  text-align: center;
}

.coupon-ticket__action .coupon-ticket__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border: 1.5px dashed var(--coupon-badge-color, #ff6b00);
  /* unified with copy button; scoped selector beats global .btn (--rounded-button pill) */
  border-radius: 8px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--coupon-badge-color, #ff6b00);
  white-space: nowrap;
}

.coupon-ticket__action .coupon-ticket__copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: var(--coupon-active-button-bg, #1a1a1a);
  color: var(--coupon-active-button-text, #ffffff);
  border: none;
  padding: 0.8rem 1.4rem;
  font-size: 1.3rem;
  font-weight: 600;
  /* unified with code pill. !important needed: theme has a global `.btn{border-radius:9999px!important}` (force-rounded) that otherwise wins */
  border-radius: 8px !important;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.coupon-ticket__copy-btn:hover {
  opacity: 0.88;
  transform: scale(1.02);
}

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

.coupon-ticket.expired .coupon-ticket__code {
  border-color: #ccc;
  color: #aaa;
}

.coupon-ticket.expired .coupon-ticket__copy-btn,
.copy-button.coupon-expired {
  background: transparent;
  border: 1.5px dashed #ccc;
  color: #aaa;
  cursor: not-allowed;
}

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

/* 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 {
    width: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%;
  }
}

.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 {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.4rem;
  }

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

  /* action wraps to full width; code pill + copy button stack (robust for long codes) */
  .coupon-ticket__action {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

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

  .coupon-ticket__action .coupon-ticket__copy-btn {
    width: auto;
    flex: 0 0 auto;
  }
}




/* ============================================
   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);
}
.line-top-bar {
	width: 100%;
	height: 10px;
	background-color: var(--color-primary);
}
/* 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: 2px 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;
}

.heading span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg height='11' viewBox='0 0 219 11' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8C25.8556 3.07738 53.8451 3.61733 82.4695 3.07653C119.514 2.37666 150.586 6.76911 216 4.41882' stroke='var(--color-highlight)' stroke-width='2' pathLength='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;

  /* Fallback: tạo mask để apply màu từ CSS variable */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg height='11' viewBox='0 0 219 11' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8C25.8556 3.07738 53.8451 3.61733 82.4695 3.07653C119.514 2.37666 150.586 6.76911 216 4.41882' stroke='black' stroke-width='2' pathLength='1' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg height='11' viewBox='0 0 219 11' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8C25.8556 3.07738 53.8451 3.61733 82.4695 3.07653C119.514 2.37666 150.586 6.76911 216 4.41882' stroke='black' stroke-width='2' pathLength='1' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--color-highlight);
  background-image: none;
}

@media (max-width: 767px) {
  .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;
}

.compare-opener button {
  box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.2);
}

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

#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;
}

/* ============================================
   SLEEP 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,
[class*="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);
  font-weight: 600;
  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);
}

/* ============================================
   SLEEP 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 */
.btn-primary,
.btn--primary,
button.btn-add-to-cart,
[class*="add-to-cart"] {
  background: var(--color-primary);
  color: #FFFFFF;
  border: 1px solid var(--color-primary);
}

.btn-primary:hover,
.btn--primary:hover,
button.btn-add-to-cart:hover {
  background: #2C4238;
  border-color: #2C4238;
}

/* 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;
}

/* ============================================
   SLEEP 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 */
}

/* 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__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 */

/* ============================================
   SLEEP 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);
}

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

/* Generous section padding */
.section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

@media (max-width: 767px) {

  .section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}


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

/* Badge border-radius — use token for consistency */
.sale-badge,
.badge,
[class*="badge"] {
  border-radius: var(--rounded-xs) !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 — Ru9 inspired light card style ── */
.section.section-polices-v2 {
  background: var(--policies-section-bg, var(--color-background-body));
  /* 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;
}

.policy-card {
  background: var(--policies-card-bg, #ffffff);
  border: 1px solid rgba(40, 52, 85, 0.04);
  border-radius: 1.6rem;
  box-shadow: 0 2px 10px rgba(40, 52, 85, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.policy-card:hover {
  box-shadow: 0 8px 28px rgba(40, 52, 85, 0.1);
  transform: translateY(-3px);
}

.policy-card__icon {
  width: 4.8rem;
  height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 1.2rem;
  background: rgba(40, 52, 85, 0.05);
}

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

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

.policy-card__desc {
  font-size: 1.3rem;
  color: var(--policies-desc-color, #6b7280);
  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: 4rem;
    height: 4rem;
  }
}

/* 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, 4-col max
   ═══════════════════════════════════════════ */

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

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

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

/* ── Flex/Embla carousel: 4 items per row on desktop (~25% 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: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !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 - 1440)/2 + 6rem gutter */
  .banner-overlay-card--left {
    left: max(3rem, calc((100% - 1440px) / 2 + 6rem));
  }

  .banner-overlay-card--right {
    right: max(3rem, calc((100% - 1440px) / 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;
}