/* === Breadcrumb — boxed blue pill (match design) === */
.woocommerce-breadcrumb {
  color: #64748B;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0;
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  margin: 0 0 16px;
  padding: 10px 16px;
  background: #E8F1FD;
  border: 1px solid #D6E6FB;
  border-radius: 12px;
}

/* Separators: theme uses material-symbols chevron_right (+ legacy .divider) */
.woocommerce-breadcrumb .material-symbols-outlined {
  color: #1976D2;
  font-size: 18px;
  margin: 0 2px;
  flex-shrink: 0;
  line-height: 1;
  opacity: .9;
}
.woocommerce-breadcrumb .divider {
  color: #1976D2;
  font-size: 12px;
  margin: 0 4px;
  flex-shrink: 0;
}

/* Links subtle gray, hover deep blue */
.woocommerce-breadcrumb a {
  color: #64748B;
  text-decoration: none !important;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.woocommerce-breadcrumb a:hover {
  color: #0D47A1;
}

/* Current page (last item) — bold deep blue + ellipsis if too long. */
.woocommerce-breadcrumb > *:last-child,
.woocommerce-breadcrumb .breadcrumb-current {
  color: #0D47A1;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 560px;
  flex: 0 1 auto;
}
.woocommerce-breadcrumb .breadcrumb-current {
  display: inline-block;
  vertical-align: bottom;
}

.product-main {
  background-color: var(--surface-page);
  padding-top: 0;
}

.product-main > .row {
  background-color: var(--surface-card);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  margin-top: 4px;

  /* Important: align children to start so sticky works on the gallery column */
  align-items: flex-start !important;
}

/* === Sticky gallery on desktop ===
   Image column follows scroll so customers always see the product while
   reading details / combos. Eliminates empty white space below thumbnails.

   --cms-pm-header-h reserves space for the sticky header (main bar ~80px +
   extra 20px breathing). Override per layout if header height changes:
     :root { --cms-pm-header-h: 100px; }
*/
:root { --cms-pm-header-h: 100px; }

@media (min-width: 850px) {
  .product-main .row > .product-gallery {
    position: sticky;
    top: var(--cms-pm-header-h);
    align-self: flex-start;
    max-height: calc(100vh - var(--cms-pm-header-h) - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
  }
  .product-main .row > .product-gallery::-webkit-scrollbar { width: 4px; }
  .product-main .row > .product-gallery::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
  }
  /* Guard against ancestor overflow that would break sticky */
  .product-main .row,
  .product-main,
  .product-container { overflow: visible !important; }
}

/* Mini trust strip under thumbnails — fills the small gap with useful info */
.cms-pm-gallery-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
}
.cms-pm-gallery-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--second-text);
}
.cms-pm-gallery-trust-item .material-symbols-outlined {
  font-size: 18px;
  color: var(--primary-blue);
  font-variation-settings: 'FILL' 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.cms-pm-gallery-trust-item .cms-pm-gallery-trust-icon-green {
  color: var(--accent-success) !important;
}
.cms-pm-gallery-trust-item .cms-pm-gallery-trust-icon-orange {
  color: var(--accent-orange) !important;
}
.cms-pm-gallery-trust-item strong {
  color: var(--primary-text);
  font-weight: 600;
  display: block;
}
.cms-pm-gallery-trust-item span:not(.material-symbols-outlined) {
  display: block;
}
.cms-pm-gallery-trust-item .cms-pm-gallery-trust-sub {
  font-size: 11.5px;
  color: var(--muted-text);
}
@media (max-width: 849px) {
  .cms-pm-gallery-trust { display: none; }
}

.product .product-gallery .product-images .badge-inner {
  display: inline-block;
  background-color: var(--accent-danger);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  min-width: 24px;
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  height: auto;
}

.product .product-gallery * {
  max-height: 512px;
}

.product .product-gallery .product-images .flickity-slider .woocommerce-product-gallery__image img {
  object-fit: contain;
  width: 100%;
  height: 100%;

  border-radius: var(--radius-md);
  padding: 24px;
  background-color: var(--surface-alt);
}

.product .product-gallery .product-thumbnails .flickity-slider div > a {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 6px;
}

.product .product-gallery .product-thumbnails .flickity-slider div > a:hover,
.product .product-gallery .product-thumbnails .flickity-slider div.is-selected > a {
  border: 1px solid var(--primary-blue);
}

.product .product-gallery .product-thumbnails .flickity-slider img {
  border-radius: var(--radius-sm);
  background-color: var(--surface-alt);
  transform: none;
  margin: 0;
}

.devvn_buy_now {
  display: block;
  width: 100%;
  min-width: 100%;
  border-radius: var(--radius-md) !important;
}

/* === Benefit grid (sau add-to-cart) === */
.cms-single-product-after-add-to-cart {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;

  border-top: 1px solid var(--border-default);
  padding-top: 16px;
}

.cms-single-product-after-add-to-cart .cms-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.cms-single-product-after-add-to-cart .cms-item:hover {
  border-color: #c8d4e8;
}

.cms-single-product-after-add-to-cart .cms-item .cms-item-icon .material-symbols-outlined {
  font-size: 20px;
  padding: 8px;
  border-radius: var(--radius-md);
  color: var(--primary-blue);
  background-color: var(--primary-blue-soft);
  font-variation-settings: 'FILL' 1;
  display: block;
  flex-shrink: 0;
}

/* Per-item accent colors */
.cms-single-product-after-add-to-cart .cms-item .cms-item-icon .cms-green {
  color: #16a34a;
  background-color: #e8f7ee;
}
.cms-single-product-after-add-to-cart .cms-item .cms-item-icon .cms-blue {
  color: var(--primary-blue);
  background-color: var(--primary-blue-soft);
}
.cms-single-product-after-add-to-cart .cms-item .cms-item-icon .cms-orange {
  color: #ea6f1f;
  background-color: #fff4ed;
}
.cms-single-product-after-add-to-cart .cms-item .cms-item-icon .cms-purple {
  color: #7c3aed;
  background-color: #f3f0ff;
}

.cms-single-product-after-add-to-cart .cms-item .cms-item-text .cms-text-bold {
  color: var(--primary-text);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
}

.cms-single-product-after-add-to-cart .cms-item .cms-item-text .cms-text-normal {
  color: var(--muted-text);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

.cms-single-product-after-add-to-cart + .devvn_buy_now {
  display: none;
  visibility: hidden;
  opacity: 1;
}

/* === Review count === */
.cms-single-product-review-count a.woocommerce-review-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  outline: none !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}
.cms-single-product-review-count a.woocommerce-review-link:focus,
.cms-single-product-review-count a.woocommerce-review-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.product-main .product-info .cms-single-product-review-count {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.product-main .product-info .cms-single-product-review-count .cms-single-product-review-count-star-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.product-main .product-info .cms-single-product-review-count .material-symbols-outlined {
  color: var(--accent-star);
  font-size: 18px;
}

.product-main .product-info .cms-single-product-review-count .cms-single-product-review-count-text {
  color: var(--muted-text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.product-main .product-info .product-title {
  color: var(--primary-text);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.product-main .product-info .product-short-description {
  color: var(--second-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  position: relative;
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.product-main .product-info .product-short-description.cms-desc-expanded {
  max-height: 2000px;
}

.product-main .product-info .product-short-description::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.product-main .product-info .product-short-description.cms-desc-expanded::after {
  opacity: 0;
}

.cms-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-blue);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 8px;
  background: none;
  border: none;
  padding: 0;
}

.cms-desc-toggle .material-symbols-outlined {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.cms-desc-toggle.cms-expanded .material-symbols-outlined {
  transform: rotate(180deg);
}

.product-type-simple .product-main .product-info .price.product-page-price {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  column-gap: 12px;
}

.product-main .product-info .price-wrapper {
  padding: 16px;
  background-color: var(--surface-alt);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  border: 1px solid var(--border-default);

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-main .product-info .price-wrapper p {
  margin: 0;
}

.product-main .product-info .price-wrapper p.cms-free-ship-notice {
  color: var(--second-text);
  font-size: 13px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.product-main .product-info .price-wrapper p.cms-free-ship-notice > .material-symbols-outlined {
  font-size: 16px;
  color: var(--accent-success);
}

.product-main .product-info .price.product-page-price bdi {
  color: var(--accent-danger);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
}

.product-main .product-info .price.product-page-price span {
  color: var(--accent-danger);
}

.product-main .product-info .price.product-page-price del {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.product-main .product-info .price.product-page-price del span {
  opacity: 1;
}

.product-main .product-info .price.product-page-price del bdi {
  color: var(--muted-text);
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  text-decoration: line-through;
}

.product-main .product-info .price-wrapper .cms-save {
  order: -1;
  color: var(--accent-success) !important;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  background-color: var(--accent-success-bg);
  border-radius: var(--radius-sm);
  padding: 2px 8px;

  display: inline-flex;
  align-items: flex-end;
  align-self: flex-end;
  height: fit-content;
  letter-spacing: 0.3px;
}

.product-main .product-info form.cart .ux-quantity {
  margin: 0;
}

table.variations .label {
  color: var(--primary-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.thwvsf-wrapper-ul .thwvsf-wrapper-item-li.thwvsf-label-li.attr_swatch_design_default {
  font-size: 13px;
  line-height: 18px;
  width: auto;
  height: auto;
  color: var(--primary-text);
  background-color: var(--surface-card);
  font-weight: 500;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  box-shadow: unset;
}

.thwvsf-wrapper-ul .thwvsf-wrapper-item-li.thwvsf-label-li.attr_swatch_design_default:hover {
  border: 1px solid var(--primary-blue);
}

.thwvsf-wrapper-ul .thwvsf-wrapper-item-li.thwvsf-label-li.attr_swatch_design_default.thwvsf-selected {
  border: 1px solid var(--primary-blue);
  background-color: var(--primary-blue-soft);
  color: var(--primary-blue);
}

.product-main .product-info form.cart .ux-quantity__button.ux-quantity__button--minus {
  border: 1px solid var(--border-default);
  border-right: none !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background-color: var(--surface-card);
  padding: 0 14px;
  color: var(--second-text);
  font-size: 16px;
}

.product-main .product-info form.cart .input-text.qty {
  border: 1px solid var(--border-default);
  border-left: none;
  border-right: none;
  background-color: var(--surface-card);
  box-shadow: unset;
  font-size: 16px;
  min-width: 48px;
  color: var(--primary-text);
}

.product-main .product-info form.cart .ux-quantity__button.ux-quantity__button--plus {
  border: 1px solid var(--border-default);
  border-left: none !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: var(--surface-card);
  padding: 0 14px;
  color: var(--second-text);
  font-size: 16px;
}

.product-main .product-info form.cart .single_add_to_cart_button {
  margin: 0;
  min-height: 48px;
  border-radius: var(--radius-md);
  box-shadow: none;
  background-color: var(--primary-blue);
  text-transform: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  transition: background-color 0.2s ease;

  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  flex-grow: 1;
  align-self: stretch;
}

.product-main .product-info form.cart .single_add_to_cart_button:hover {
  background-color: var(--primary-blue-hover);
}

.product-main .product-info form.cart .single_add_to_cart_button::before {
  content: "shopping_cart";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  line-height: 22px;
  font-weight: normal;
  color: #fff;
}

.product-main .product-info form.cart .material-symbols-outlined.favorite {
  color: var(--second-text);
  border: 1px solid var(--border-default);
  padding: 10px;
  border-radius: var(--radius-md);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.product-main .product-info form.cart .material-symbols-outlined.favorite:hover {
  color: var(--accent-danger);
  border-color: var(--accent-danger);
}

.product-main .product-info form.cart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 12px;
}

/* === Product footer & tabs === */
.product-footer {
  background-color: var(--surface-page);
  padding: 24px 0;
}

.product-footer > .container {
  background-color: var(--surface-card);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
}

.cms-single-product-custom-tabs-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--border-default);
  width: 100%;
}

.cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list li {
  margin: 0;
  padding: 0;
}

.cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list li a {
  text-decoration: none;
  display: inline-block;
  color: var(--second-text);
  padding: 10px 0;
  font-weight: 500;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list li:first-child a,
.cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list li:hover a {
  color: var(--primary-blue);
  border-bottom: 2px solid var(--primary-blue);
}

.cms-single-product-custom-tabs-wrapper .cms-tab {
  width: 100%;
}

.cms-single-product-custom-tabs-wrapper .cms-single-product-tab-title {
  color: var(--primary-text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.cms-single-product-custom-tabs-wrapper ul.cms-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
}

.cms-single-product-custom-tabs-wrapper .cms-list > li {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;

  color: var(--primary-text);
  font-size: 14px;
  line-height: 22px;
}

.cms-single-product-custom-tabs-wrapper .cms-list > li > .material-symbols-outlined {
  font-size: 18px;
  color: var(--accent-success);
}

.cms-single-product-custom-tabs-wrapper .cms-divine {
  width: 100%;
  height: 1px;
  background-color: var(--border-default);
}

.cms-single-product-custom-tabs-wrapper .cms-table {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  overflow: hidden;
  border-bottom: none;
}

.cms-single-product-custom-tabs-wrapper .cms-table tr > * {
  padding: 10px 14px;
  color: var(--primary-text);
  font-size: 14px;
  font-weight: 400;
}

.cms-single-product-custom-tabs-wrapper .cms-table tr > th {
  font-weight: 600;
  background-color: var(--surface-alt);
}

.cms-single-product-custom-tabs-wrapper .cms-tab-cach-dung {
  color: var(--primary-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

.cms-single-product-custom-tabs-wrapper .cms-tab-cach-dung p {
  margin: 0 0 8px;
}

.cms-single-product-custom-tabs-wrapper .cms-tab-cach-dung .font-bold {
  font-weight: 600;
}

.cms-single-product-custom-tabs-wrapper .cms-tab-luu-y {
  width: 100%;
  border-left: 3px solid var(--accent-warning);
  background-color: #fff8e6;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.cms-single-product-custom-tabs-wrapper .cms-tab-luu-y .material-symbols-outlined {
  color: var(--accent-warning);
  font-size: 18px;
}

.cms-single-product-custom-tabs-wrapper .cms-tab-luu-y .cms-text {
  color: #6e4f00;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}

@media all and (max-width: 468px) {
  .woocommerce-breadcrumb {
    font-size: 12px;
    line-height: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    row-gap: 2px;
    padding: 8px 12px;
    margin-bottom: 12px;
  }
  .woocommerce-breadcrumb .material-symbols-outlined { font-size: 16px; }

  .woocommerce-breadcrumb * {
    text-align: left;
  }

  .product-main {
    padding-left: 12px;
    padding-right: 12px;
  }


  .product-main > .row {
    padding: 16px;
  }

  .product .product-gallery .product-images .flickity-slider .woocommerce-product-gallery__image img {
    padding: 12px;
  }

  .product .product-gallery .product-thumbnails .flickity-slider div > a {
    padding: 4px;
  }

  .product-main .product-info .product-title {
    color: var(--primary-text);
    font-size: 22px !important;
    line-height: 28px !important;
    font-weight: 700;
    margin-bottom: 8px;
  }
}

/* === Related products (inside single page) === */
.col.product-small {
  margin: 0;
}

.col.product-small > .col-inner {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  padding: 12px;
  background-color: var(--surface-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.col.product-small > .col-inner:hover {
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-md);
}

.col.product-small > .col-inner > .badge-container {
  left: 12px;
  top: 12px;
}

.col.product-small > .col-inner > .badge-container .badge-inner {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  color: #fff;
  background-color: var(--accent-danger);
  border-radius: var(--radius-sm);
}

.col.product-small .box-image {
  overflow: hidden;
}

.col.product-small .box-image .image-tools.grid-tools.text-center.hide-for-small.bottom.hover-slide-in.show-on-hover {
  opacity: 0 !important;
  transform: none !important;
}

.col.product-small .box-text .title-wrapper {
  margin-bottom: 8px;
}

.col.product-small .box-text .title-wrapper a {
  color: var(--primary-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-align: left;
}

.col.product-small .box-text .price-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-main .product-info .price.product-page-price bdi {
  font-size: 24px;
  line-height: 30px;
}

.col.product-small .box-text .price-wrapper span.price {
  max-width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.col.product-small .box-text .price-wrapper span.price del bdi {
  color: var(--muted-text);
  font-size: 12px;
  line-height: 16px;
}

.col.product-small .box-text .price-wrapper span.price ins bdi {
  color: var(--accent-danger);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}

.col.product-small .box-text .price-wrapper > a.custom-add-to-cart.added {
  display: block !important;
}

.col.product-small .box-text .price-wrapper > a.added_to_cart {
  display: none !important;
}

.col.product-small .box-text .price-wrapper > a.custom-add-to-cart > .material-symbols-outlined {
  color: #fff;
  background-color: var(--primary-blue);
  padding: 8px;
  border-radius: var(--radius-md);
  font-size: 18px;
  transition: background-color 0.2s ease;
}

.col.product-small .box-text .price-wrapper > a.custom-add-to-cart:hover > .material-symbols-outlined {
  background-color: var(--primary-blue-hover);
}

/* === Related products section === */
.product-footer .cms-single-product-related.container {
  margin: 24px auto;
  background-color: unset;
  border: 0;
  padding: 0;
}

.product-footer .cms-single-product-related .product-section {
  border: none;
}

.product-footer .cms-single-product-related .product-section .product-section-title {
  color: var(--primary-text);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  padding: 0;
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

.product-footer .cms-single-product-related .flickity-slider > .col.product-small > .col-inner {
  box-shadow: none;
  border: 1px solid var(--border-default);
}

.product-footer .cms-single-product-related .title-wrapper > .category {
  width: min-content;
  max-width: 100%;
  word-wrap: break-word;
  color: var(--primary-blue);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin: 6px 0;
  background-color: var(--primary-blue-soft);
  opacity: 1;
}

@media screen and (max-width: 468px) {
  .col.product-small {
    width: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* === Reviews === */
.cms-reviews {
  background-color: var(--surface-page);
  margin-top: 24px;
}

.cms-reviews #reviews .woocommerce-Reviews-title {
  color: var(--primary-text);
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 16px;
}
.cms-reviews .cms-rv-count {
  color: var(--muted-text);
  font-weight: 500;
  font-size: 16px;
  margin-left: 4px;
}
/* Hide the original product-name span in title (replaced by our JS) */
.cms-reviews #reviews .woocommerce-Reviews-title > span:not(.cms-rv-count) {
  display: none;
}

.cms-reviews #reviews .devvn_reviews_filter {
  background-color: transparent;
  margin: 0;
  padding: 0;
}

.cms-reviews #reviews .devvn_filter_btn.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
}

.cms-reviews #reviews .devvn_filter_btn {
  border-radius: var(--radius-md);
  padding: 4px 14px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.cms-reviews #reviews .devvn_filter_btn:hover {
  background: #fff;
  border-color: var(--primary-blue);
}

.cms-reviews #comments {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cms-reviews #comments .star_box {
  padding: 24px;
  border-radius: var(--radius-md);
  background-color: #fff;
  border: 1px solid var(--border-default);
  margin: 0;
}

.cms-reviews #comments .star_box * {
  border: unset;
}

.cms-reviews #comments ol.commentlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Tiki-style: separator-only feed, no card borders */
.cms-reviews #comments ol.commentlist {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
.cms-reviews #comments ol.commentlist li.review {
  border: none !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  background: transparent !important;
  margin: 0 !important;
  transition: background 0.15s ease;
}
.cms-reviews #comments ol.commentlist li.review:last-child {
  border-bottom: none !important;
}
.cms-reviews #comments ol.commentlist li.review:hover {
  background: var(--surface-alt) !important;
  box-shadow: none !important;
}
.cms-reviews .comment_container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cms-reviews strong.woocommerce-review__author {
  color: var(--primary-text);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}
.cms-reviews .woocommerce-review__published-date {
  color: var(--muted-text);
  font-size: 12px;
}

.cms-reviews .devvn_review_bottom .reply a {
  color: var(--primary-blue);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.cms-reviews .comment-text {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.cms-reviews .comment-text * {
  margin-bottom: 0;
}

.cms-reviews .woocommerce-review__verified.verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent-success);
  background: var(--accent-success-bg);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  font-style: normal;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-left: 4px;
}
.cms-reviews .woocommerce-review__verified.verified::before {
  content: 'verified';
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 1;
  font-size: 12px;
}

.cms-reviews .devvn_review_mid .description {
  color: var(--primary-text);
  font-size: 14px;
  line-height: 22px;
}

.cms-reviews .commentlist > li:not(:first-child) {
  border-top: 1px solid var(--border-default) !important;
}

/* Hide the "Sửa" (edit) link from public review listing — admin can still edit from WP admin */
.cms-reviews .comment-edit-link {
  display: none !important;
}

/* Refine filter pills */
.cms-reviews #reviews .devvn_reviews_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px !important;
}
.cms-reviews #reviews .devvn_filter_btn {
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--surface-card);
  border: 1px solid var(--border-default) !important;
  color: var(--second-text);
  transition: all 0.15s ease;
}
.cms-reviews #reviews .devvn_filter_btn:hover {
  background: var(--surface-card) !important;
  border-color: var(--primary-blue) !important;
  color: var(--primary-blue);
}
.cms-reviews #reviews .devvn_filter_btn.active {
  background: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
  color: #fff !important;
}

/* Star average box — refine */
.cms-reviews #comments .star_box {
  padding: 20px 24px !important;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #fffbeb 0%, #fff 70%);
  border: 1px solid var(--border-default);
  margin: 0 0 14px !important;
}
.cms-reviews .star-average .woocommerce-product-rating .star_average {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--primary-text);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cms-reviews .star-average .woocommerce-product-rating .devvn-star {
  color: var(--accent-star);
  font-size: 28px;
}
.cms-reviews .star-average strong {
  color: var(--muted-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: block;
  margin-top: 6px;
}

/* Compact: hide the original bottom action row — helpful button moves to meta row */
.cms-reviews .devvn_review_bottom { display: none !important; }

/* Helpful — small icon-only pill inline with meta */
.cms-rv-helpful {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--muted-text);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  line-height: 1.4;
}
.cms-rv-helpful:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: var(--primary-blue-soft);
}
.cms-rv-helpful.is-liked {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: var(--primary-blue-soft);
}
.cms-rv-helpful .material-symbols-outlined { font-size: 13px; }
.cms-rv-helpful-count { font-variant-numeric: tabular-nums; }

/* Meta row — name, verified, stars, date, helpful all in ONE line */
.cms-reviews .devvn_review_top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 !important;
}
.cms-reviews .devvn_review_top .woocommerce-review__published-date {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted-text);
}
.cms-reviews .devvn_review_top .star-rating {
  font-size: 11px !important;
  margin: 0 !important;
  width: 64px;
  line-height: 1;
}

/* Content — 3-line clamp by default with "Xem thêm" toggle */
.cms-reviews .devvn_review_mid {
  margin-top: 4px;
  position: relative;
}
.cms-reviews .devvn_review_mid .description,
.cms-reviews .devvn_review_mid p {
  color: var(--primary-text);
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.cms-reviews .devvn_review_mid.cms-rv-mid-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(1.5em * 3);
}
.cms-reviews .devvn_review_mid.cms-rv-mid-clamped.cms-rv-mid-expanded {
  display: block;
  -webkit-line-clamp: unset;
  max-height: none;
  overflow: visible;
}
.cms-rv-more {
  background: none;
  border: none;
  padding: 2px 0;
  margin-top: 2px;
  color: var(--primary-blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.cms-rv-more:hover { text-decoration: underline; }

/* === Attach image/video buttons in the comment form === */
.cms-reviews .review-attach {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.cms-reviews .review-attach .btn-attach,
.cms-reviews .review-attach .btn-attach-video {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface-card);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--second-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.cms-reviews .review-attach .btn-attach:hover,
.cms-reviews .review-attach .btn-attach-video:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: var(--primary-blue-soft);
}
.cms-reviews .review-attach .btn-attach::before,
.cms-reviews .review-attach .btn-attach-video::before {
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  font-variation-settings: 'FILL' 1;
  line-height: 1;
}
.cms-reviews .review-attach .btn-attach::before { content: 'image'; color: #16a34a; }
.cms-reviews .review-attach .btn-attach-video::before { content: 'videocam'; color: #ea580c; }
.cms-reviews .review-attach .btn-attach:hover::before,
.cms-reviews .review-attach .btn-attach-video:hover::before { color: var(--primary-blue); }

/* Preview area for attached files (after upload, plugin populates .list_attach) */
.cms-reviews .list_attach {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.cms-reviews .devvn_attach_view {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cms-reviews .devvn_attach_view li {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-default);
  background: var(--surface-alt);
  margin: 0;
}
.cms-reviews .devvn_attach_view li img,
.cms-reviews .devvn_attach_view li video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cms-reviews .devvn_attach_view li .devvn_remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}
.cms-reviews .devvn_attach_view li .devvn_remove:hover { background: var(--accent-danger); }

/* When reviews HAVE attached images shown inline (existing reviews) */
.cms-reviews ol.commentlist .devvn_attach_view {
  margin-top: 6px;
}
.cms-reviews ol.commentlist .devvn_attach_view li {
  width: 64px;
  height: 64px;
  cursor: pointer;
}
.cms-reviews ol.commentlist .devvn_attach_view li:hover {
  border-color: var(--primary-blue);
}

.cms-reviews span.devvn_num_reviews {
  color: var(--muted-text);
  font-size: 11px;
  line-height: 16px;
}

.cms-reviews #reviews #comments ol.commentlist li .comment-text .devvn_review_mid p:first-child {
  display: block;
  color: var(--primary-text);
  font-size: 14px;
  line-height: 22px;
}

.cms-reviews .div#reviews.woocommerce-Reviews {
  max-width: 100% !important;
  margin: 0 !important;
}

.cms-reviews .star-average .woocommerce-product-rating strong {
  color: var(--primary-text);
  font-size: 13px !important;
  line-height: 18px;
  font-weight: 600;
}

.cms-reviews #comments a.btn-reviews-now {
  background-color: var(--primary-blue);
  border-radius: var(--radius-md);
  color: #fff;
  font-weight: 500;
  font-size: 13px;
}

.cms-reviews #comments a.btn-reviews-now:hover {
  background-color: var(--primary-blue-hover);
}

@media (max-width: 468px) {
  .cms-reviews #reviews .woocommerce-Reviews-title {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .cms-reviews #reviews #comments ol.commentlist li .comment-text .devvn_review_mid p:first-child {
    font-size: 13px;
    line-height: 18px;
  }

  .cms-reviews #reviews .devvn_filter_btn {
    margin-bottom: 4px;
  }

  .devvn_prod_cmt {
    padding: 0px 12px;
  }
}

/* === Quick-buy popup === */
.devvn-popup-inner {
  border-radius: var(--radius-lg);
  max-width: 900px;
  overflow: hidden;
}

.devvn-popup-inner .devvn-popup-title {
  background: var(--primary-blue);
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  padding: 14px 20px;
  height: auto;
}

.devvn-popup-inner .devvn-popup-title span {
  white-space: break-spaces;
}

.devvn-popup-inner .devvn-popup-content {
  padding: 24px;
  background-color: var(--surface-page);
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.devvn-popup-inner .devvn-popup-content .devvn-popup-content-left,
.devvn-popup-inner .devvn-popup-content .devvn-popup-content-right {
  float: unset;
  width: auto;
  max-width: 100%;
  padding: 0;
}

.devvn-popup-inner .devvn-popup-img {
  padding: 8px;
  border-radius: var(--radius-md);
  background-color: #fff;
  border: 1px solid var(--border-default);
}

.devvn-popup-inner span.devvn_title {
  color: var(--primary-text) !important;
  font-weight: 600;
}

.devvn-popup-inner span.amount {
  color: var(--accent-danger);
  font-weight: 700;
}

.devvn-popup-inner .quantity .button.minus {
  border: 1px solid var(--border-default);
  border-right: none !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background-color: #fff;
  padding: 0 14px;
  color: var(--second-text);
  font-size: 14px;
}

.devvn-popup-inner .quantity input[type="number"] {
  border: 1px solid var(--border-default);
  border-left: none;
  border-right: none;
  background-color: #fff;
  box-shadow: unset;
  font-size: 14px;
  min-width: 44px;
  color: var(--primary-text);
}

.devvn-popup-inner .quantity .button.plus {
  border: 1px solid var(--border-default);
  border-left: none !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: #fff;
  padding: 0 14px;
  color: var(--second-text);
  font-size: 14px;
}

.devvn-popup-inner .devvn-popup-content-desc {
  color: var(--second-text);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  font-style: normal;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
}

.devvn-popup-inner form#devvn_cusstom_info {
  margin-bottom: 0;
  padding: 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: #fff;
  height: 100%;
  box-shadow: none;
}

.devvn-popup-inner .popup-customer-info .popup-customer-info-title {
  color: var(--primary-text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.devvn-popup-inner .popup-customer-info .popup-customer-info-title::before {
  content: none;
}

.devvn-popup-inner .popup-customer-info .popup-customer-info-radio {
  margin-bottom: 16px;
}

.devvn-popup-inner .popup-customer-info-radio label span:before,
.devvn-popup-inner .popup-customer-info-radio label span:after {
  width: 18px;
  height: 18px;
}

.devvn-popup-inner .popup-customer-info .popup-customer-info-radio label input:checked ~ span:before {
  width: 18px;
  height: 18px;
  border-color: var(--primary-blue);
  background-color: var(--primary-blue);
}

.devvn-popup-inner .popup-customer-info .popup-customer-info-radio label input:checked ~ span:after {
  background: #fff;
  border: 1px solid var(--primary-blue);
  width: 8px;
  height: 8px;
  top: 5px;
  left: 5px;
}

.devvn-popup-inner .popup-customer-info-radio label span {
  padding-left: 24px;
  margin-top: -1px;
  color: var(--primary-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.devvn-popup-inner .popup-customer-info-group :where(input, textarea) {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  min-height: 42px;
  font-size: 14px;
  line-height: 20px;
  color: var(--primary-text);
}

.devvn-popup-inner .popup-customer-info-group :where(input, textarea):focus {
  border-color: var(--primary-blue);
  outline: none;
}

.devvn-popup-inner .popup-customer-info-group {
  margin-bottom: 12px;
}

.devvn-popup-inner .popup_quickbuy_shipping {
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}

.devvn-popup-inner .popup_quickbuy_shipping .popup_quickbuy_shipping_title {
  color: var(--primary-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.devvn-popup-inner .popup_quickbuy_shipping .popup_quickbuy_total_calc {
  color: var(--accent-danger);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
}

.devvn-popup-inner .devvn-order-btn {
  color: #fff;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  border-radius: var(--radius-md);
  background-color: var(--accent-orange);
  min-height: 48px;
  transition: background-color 0.2s ease;
  text-transform: none;
  letter-spacing: 0;
}

.devvn-popup-inner .devvn-order-btn:hover {
  background-color: #d9551a;
}

/* ============================================================
   Quick View Modal v3 — targets .cms-qv-layout (clean div)
   Template: woocommerce/content-single-product-lightbox.php
   ============================================================ */

/* 1 · MFP popup shell — force width */
.mfp-wrap .mfp-container {
  padding: 0 16px !important;
}
.mfp-wrap .mfp-content {
  width: min(900px, 96vw) !important;
  max-width: none !important;
  margin: 0 auto !important;
  vertical-align: middle !important;
}
.product-lightbox.lightbox-content {
  width: 100% !important;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 32px 80px -8px rgba(15,23,42,0.24), 0 0 0 1px rgba(15,23,42,0.06);
  display: block !important;
}

/* 2 · Outer wrapper */
.cms-qv-wrap {
  display: block !important;
  width: 100% !important;
  background: #fff;
}
.cms-qv-product {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  float: none !important;
  width: 100% !important;
}

/* 3 · Two-column flex layout (flex > grid: more browser-resilient) */
.cms-qv-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 500px !important;
  max-height: 86vh !important;
  overflow: hidden !important;
}

/* 4 · Image pane */
.cms-qv-pane--image {
  flex: 0 0 42% !important;
  width: 42% !important;
  min-width: 0 !important;
  background: #f5f6f8 !important;
  border-right: 1px solid var(--border-default) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}
.cms-qv-pane--image .product-gallery-slider {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.cms-qv-pane--image .product-gallery-slider .slide {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cms-qv-pane--image .product-gallery-slider img {
  width: 100% !important;
  height: 100% !important;
  max-height: 420px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 28px !important;
  display: block !important;
}
/* Flickity nav */
.cms-qv-pane--image .flickity-prev-next-button {
  width: 30px !important;
  height: 30px !important;
  background: rgba(255,255,255,.92) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.12) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.cms-qv-pane--image .flickity-prev-next-button.previous { left: 10px !important; }
.cms-qv-pane--image .flickity-prev-next-button.next { right: 10px !important; }
.cms-qv-pane--image .flickity-button-icon {
  width: 10px !important; height: 10px !important;
  left: 30% !important; top: 30% !important;
  fill: #3a3a3a !important;
}
.cms-qv-pane--image .flickity-page-dots {
  bottom: 6px !important;
}
.cms-qv-pane--image .flickity-page-dots .dot {
  width: 6px !important; height: 6px !important;
  background: #c0c4cc !important; opacity: 1 !important;
  margin: 0 3px !important;
  transition: background .2s !important;
}
.cms-qv-pane--image .flickity-page-dots .dot.is-selected {
  background: var(--primary-blue) !important;
}
/* View-full link pinned to bottom of image pane */
.cms-qv-full-link {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 9px 14px !important;
  border-top: 1px solid var(--border-default) !important;
  background: #fff !important;
  color: var(--primary-blue) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background .15s !important;
}
.cms-qv-full-link:hover { background: var(--primary-blue-soft) !important; }
.cms-qv-full-link .material-symbols-outlined { font-size: 13px !important; }

/* 5 · Info pane */
.cms-qv-pane--info {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.cms-qv-info-inner {
  flex: 1 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 22px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #ddd transparent !important;
}
.cms-qv-info-inner::-webkit-scrollbar { width: 4px; }
.cms-qv-info-inner::-webkit-scrollbar-track { background: transparent; }
.cms-qv-info-inner::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* 6 · Title */
.cms-qv-title {
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  color: var(--primary-text) !important;
  margin: 0 !important;
  letter-spacing: -.1px !important;
}
.cms-qv-title a {
  color: inherit !important;
  text-decoration: none !important;
}
.cms-qv-title a:hover { color: var(--primary-blue) !important; }

/* 7 · Price row container */
.cms-qv-price-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Price */
.cms-qv-price-row .price {
  display: block !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--accent-danger) !important;
  letter-spacing: -.5px !important;
}
.cms-qv-price-row .price del {
  display: inline !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--muted-text) !important;
  text-decoration: line-through !important;
  margin-right: 6px !important;
  letter-spacing: 0 !important;
}
.cms-qv-price-row .price del .woocommerce-Price-amount {
  font-size: 13px !important;
  color: var(--muted-text) !important;
}
.cms-qv-price-row .price ins {
  text-decoration: none !important;
  background: transparent !important;
}
.cms-qv-price-row .price ins .woocommerce-Price-amount {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--accent-danger) !important;
}
/* "Từ" prefix */
.cms-qv-price-row .price .cms-price-prefix {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--muted-text) !important;
  letter-spacing: 0 !important;
  margin-right: 3px !important;
}

/* Short description */
.cms-qv-price-row .woocommerce-product-details__short-description {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--second-text) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
  padding: 10px 12px !important;
  background: #fafafa !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
}
.cms-qv-price-row .woocommerce-product-details__short-description p { margin: 0 0 5px !important; }
.cms-qv-price-row .woocommerce-product-details__short-description p:last-child { margin: 0 !important; }
.cms-qv-price-row .woocommerce-product-details__short-description strong { color: var(--primary-text) !important; }

/* Variations table */
.cms-qv-price-row table.variations {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}
.cms-qv-price-row table.variations tr { border: none !important; }
.cms-qv-price-row table.variations td,
.cms-qv-price-row table.variations th {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle !important;
}
.cms-qv-price-row table.variations .label {
  padding-right: 10px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--second-text) !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  width: 1% !important;
}
/* Swatches */
.cms-qv-price-row .thwvsf-wrapper-ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cms-qv-price-row .thwvsf-wrapper-ul .thwvsf-wrapper-item-li.thwvsf-label-li.attr_swatch_design_default {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 5px 13px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--primary-text) !important;
  background: #fff !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s, color .15s !important;
}
.cms-qv-price-row .thwvsf-wrapper-ul .thwvsf-wrapper-item-li.thwvsf-label-li.attr_swatch_design_default:hover {
  border-color: var(--primary-blue) !important;
  background: var(--primary-blue-soft) !important;
}
.cms-qv-price-row .thwvsf-wrapper-ul .thwvsf-wrapper-item-li.thwvsf-label-li.attr_swatch_design_default.thwvsf-selected {
  border-color: var(--primary-blue) !important;
  background: var(--primary-blue) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Add-to-cart form */
.cms-qv-price-row form.cart {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}
/* Qty + button row */
.cms-qv-price-row form.cart > :not(.devvn_buy_now):not(.variations_button) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.cms-qv-price-row form.cart .quantity {
  display: inline-flex !important;
  align-items: stretch !important;
  height: 48px !important;
  flex-shrink: 0 !important;
}
.cms-qv-price-row form.cart .ux-quantity__button,
.cms-qv-price-row form.cart .quantity .button {
  width: 40px !important;
  height: 48px !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 48px !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  border: 1.5px solid #e0e0e0 !important;
  background: #fff !important;
  color: var(--second-text) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s !important;
}
.cms-qv-price-row form.cart .ux-quantity__button:hover,
.cms-qv-price-row form.cart .quantity .button:hover {
  background: #f5f5f5 !important;
  border-color: #bbb !important;
}
.cms-qv-price-row form.cart .ux-quantity__button--minus,
.cms-qv-price-row form.cart .quantity .minus {
  border-right: none !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}
.cms-qv-price-row form.cart .ux-quantity__button--plus,
.cms-qv-price-row form.cart .quantity .plus {
  border-left: none !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}
.cms-qv-price-row form.cart .input-text.qty {
  width: 48px !important;
  height: 48px !important;
  min-width: 0 !important;
  border: 1.5px solid #e0e0e0 !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--primary-text) !important;
  text-align: center !important;
  padding: 0 !important;
}
/* Add to cart */
.cms-qv-price-row form.cart .single_add_to_cart_button {
  flex: 1 1 auto !important;
  height: 48px !important;
  min-height: 0 !important;
  background: var(--primary-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 18px !important;
  transition: background .2s !important;
}
.cms-qv-price-row form.cart .single_add_to_cart_button::before {
  content: "shopping_cart";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  line-height: 1;
  font-variation-settings: "FILL" 1;
  color: #fff;
}
.cms-qv-price-row form.cart .single_add_to_cart_button:hover {
  background: var(--primary-blue-hover) !important;
}
/* Quick-buy button */
.cms-qv-price-row .devvn_buy_now {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 0 !important;
  border-radius: var(--radius-md) !important;
  background: var(--accent-orange) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  border: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: background .15s !important;
}
.cms-qv-price-row .devvn_buy_now:hover { background: #d9551a !important; }

/* Trust strip */
.cms-qv-price-row .cms-qv-trust {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 10px 12px !important;
  background: #fafafa !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
}
.cms-qv-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--second-text) !important;
  white-space: nowrap !important;
}
.cms-qv-trust-item .material-symbols-outlined {
  font-size: 14px !important;
  font-variation-settings: "FILL" 1 !important;
}

/* Shipping notice */
.cms-qv-price-row .cms-free-ship-notice {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--accent-success) !important;
  background: var(--accent-success-bg) !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-pill) !important;
}

/* Hide meta */
.cms-qv-price-row .product_meta { display: none !important; }

/* MFP close button */
.product-lightbox ~ .mfp-close,
.mfp-wrap .mfp-close {
  position: absolute !important;
  top: -10px !important;
  right: -10px !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 18px !important;
  background: #fff !important;
  color: var(--second-text) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.15) !important;
  opacity: 1 !important;
  padding: 0 !important;
  text-align: center !important;
  transition: color .15s, transform .15s !important;
}
.mfp-wrap .mfp-close:hover {
  color: var(--primary-text) !important;
  transform: scale(1.1) !important;
}

/* 8 · Responsive */
@media screen and (max-width: 680px) {
  .mfp-wrap .mfp-container { padding: 0 !important; }
  .mfp-wrap .mfp-content { width: 100vw !important; max-height: 100dvh !important; }
  .product-lightbox.lightbox-content { border-radius: 0 !important; }
  .cms-qv-layout {
    flex-direction: column !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
  }
  .cms-qv-pane--image {
    flex: 0 0 240px !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-default) !important;
  }
  .cms-qv-pane--image .product-gallery-slider img { max-height: 200px !important; padding: 16px !important; }
  .cms-qv-pane--info { flex: 1 1 auto !important; overflow: hidden !important; }
  .cms-qv-title { font-size: 14px !important; }
  .cms-qv-price-row .price { font-size: 20px !important; }
  .cms-qv-price-row .price ins .woocommerce-Price-amount { font-size: 20px !important; }
}

/* ====== Single Product — Pro Redesign ====== */

/* === Urgency banner above rating === */
.product-main .product-info .cms-sp-urgency-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff4ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
}
.product-main .product-info .cms-sp-urgency-top .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 1;
}
.product-main .product-info .cms-sp-urgency-top strong { color: #9a3412; font-weight: 700; }

/* === Cam kết từ Shop === */
.cms-sp-commitment {
  margin: 16px 0;
  padding: 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.cms-sp-commitment-title {
  color: var(--primary-text);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}
.cms-sp-commitment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cms-sp-commitment-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--second-text);
  font-size: 14px;
  line-height: 1.45;
}
.cms-sp-commitment-list li::before { display: none; }
.cms-sp-commitment-list li .material-symbols-outlined {
  color: var(--primary-blue);
  font-size: 18px;
  font-variation-settings: 'FILL' 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.cms-sp-commitment-list li strong { color: var(--primary-text); font-weight: 600; }

/* === Vì sao chọn === */
.cms-sp-why {
  margin: 16px 0;
  padding: 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.cms-sp-why-title {
  color: var(--primary-text);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}
.cms-sp-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}
.cms-sp-why-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--second-text);
  line-height: 1.35;
}
.cms-sp-why-item .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: 'FILL' 1;
  flex-shrink: 0;
}
.cms-sp-why-item .cms-sp-why-text strong { color: var(--primary-text); font-weight: 600; }
.cms-icon-emerald { color: #059669; }
.cms-icon-blue    { color: var(--primary-blue); }
.cms-icon-sky     { color: #0284c7; }
.cms-icon-purple  { color: #7c3aed; }
.cms-icon-orange  { color: #ea6f1f; }
.cms-icon-rose    { color: #e11d48; }

/* === Bundle cards — Amazon-style horizontal grid === */
.cms-sp-bundles { margin: 12px 0; }
.cms-sp-bundles-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-text);
  margin-bottom: 10px;
}
.cms-sp-bundles-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.cms-bundle-card {
  position: relative;
  background: var(--surface-card);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
  font-family: inherit;
  outline: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 110px;
}
.cms-bundle-card:hover {
  border-color: #93c5fd;
}
.cms-bundle-card.cms-bundle-selected {
  border-color: var(--primary-blue);
  border-width: 2px;
  background-color: var(--primary-blue-soft);
  padding: 9.5px 11.5px; /* compensate for the +0.5px border */
}
.cms-bundle-card.cms-bundle-selected::before {
  content: 'check';
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 1;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: var(--primary-blue);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Headline — big deal text (MUA X TẶNG Y) or pkg name */
.cms-bundle-card-headline {
  color: var(--primary-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.2px;
  padding-right: 22px; /* avoid overlapping the check icon when selected */
}
.cms-bundle-card.is-deal .cms-bundle-card-headline {
  color: var(--accent-danger);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.2px;
}
.cms-bundle-card-subtitle {
  font-size: 11px;
  color: var(--muted-text);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 1px;
  min-width: 0;                 /* cho phép co trong flex, không đẩy tràn */
  overflow-wrap: anywhere;      /* chữ quà dài (…/Maxman) tự xuống dòng */
  word-break: break-word;
}
.cms-bundle-card-price {
  color: var(--accent-danger);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 6px;
}
.cms-bundle-card-compare {
  font-size: 11px;
  color: var(--muted-text);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.cms-bundle-card-compare s {
  color: var(--muted-text);
  text-decoration: line-through;
}
.cms-bundle-save-pct {
  background: #fee2e2;
  color: var(--accent-danger);
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  letter-spacing: 0.2px;
}

/* Per-unit equivalence — "Tương đương 233.000đ/chai" */
.cms-bundle-card-perunit {
  font-size: 11px;
  color: var(--muted-text);
  line-height: 1.35;
  margin-top: 2px;
}
.cms-bundle-card-perunit strong {
  color: var(--primary-blue);
  font-weight: 700;
}

/* Savings line — "Tiết kiệm 350.000đ" */
.cms-bundle-card-savings {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--accent-success);
  font-weight: 500;
  line-height: 1.35;
  margin-top: 1px;
}
.cms-bundle-card-savings strong {
  color: var(--accent-success);
  font-weight: 700;
}

/* Help text for "1 chai" card — "Phù hợp khách mới trải nghiệm" */
.cms-bundle-card-help {
  font-size: 11px;
  color: var(--muted-text);
  font-style: italic;
  line-height: 1.4;
  margin-top: 2px;
}
.cms-bundle-card-foot {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed var(--border-default);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.cms-bundle-card-foot .material-symbols-outlined {
  font-size: 15px;
  font-variation-settings: 'FILL' 1;
  flex-shrink: 0;
}

/* Combo · tặng SP khác loại — orange (gift = different product) */
.cms-bundle-card-foot.is-combo-cross,
.cms-bundle-card-foot.is-combo-cross .material-symbols-outlined {
  color: var(--accent-orange);
}

/* Combo · tặng cùng loại — green (gift = same product) */
.cms-bundle-card-foot.is-combo-same {
  color: #15803d;
}
.cms-bundle-card-foot.is-combo-same .material-symbols-outlined {
  color: #16a34a;
}

/* Combo · bulk pack (multi-qty no gift) — blue */
.cms-bundle-card-foot.is-combo-bulk {
  color: var(--primary-blue);
}
.cms-bundle-card-foot.is-combo-bulk .material-symbols-outlined {
  color: var(--primary-blue);
}

/* True single purchase — muted, italic */
.cms-bundle-card-foot.is-single {
  color: var(--muted-text);
  font-weight: 400;
}

/* Same-type combo: subtitle already conveys "Mua X tặng Y" — hide redundant foot */
.cms-bundle-card-foot.is-no-foot {
  display: none !important;
}
.cms-bundle-card-nogift {
  color: var(--muted-text);
  font-weight: 500;
  font-style: italic;
  font-size: 12px;
}

/* Add a tiny "COMBO" pill at the top-right of combo cards (visual cue) */
.cms-bundle-card.is-deal:not(.cms-bundle-selected)::after {
  content: 'Combo';
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--primary-blue-soft);
  color: var(--primary-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 9999px;
  text-transform: uppercase;
  line-height: 1.2;
  z-index: 1;
}

/* Deal cards stand out with a subtle red-tinted gradient */
.cms-bundle-card.is-deal {
  background: linear-gradient(180deg, #fff5f5 0%, #fff 60%);
  border-color: #fecaca;
}
.cms-bundle-card.is-deal:hover {
  border-color: #fca5a5;
}
.cms-bundle-card.is-deal.cms-bundle-selected {
  background: linear-gradient(180deg, #eff6ff 0%, var(--primary-blue-soft) 100%);
  border-color: var(--primary-blue);
}

/* Small inline tag on top-left — sits ABOVE card edge, not over content */
.cms-bundle-tag {
  position: absolute;
  top: -10px;
  left: 10px;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 9999px;
  letter-spacing: 0.4px;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  z-index: 2;
  line-height: 1.3;
}

/* Bump card top padding when a tag is present, so the title sits BELOW
   the badge instead of being overlapped. */
.cms-bundle-card:has(.cms-bundle-tag) {
  padding-top: 18px;
}
.cms-bundle-card:has(.cms-bundle-tag).cms-bundle-selected {
  padding-top: 17.5px;  /* compensate for 0.5px border bump */
}
/* Fallback for browsers without :has() — add a marker class via JS */
.cms-bundle-card.has-tag { padding-top: 18px; }
.cms-bundle-card.has-tag.cms-bundle-selected { padding-top: 17.5px; }
.cms-bundle-tag.cms-tag-hot  { background: var(--accent-orange); }
.cms-bundle-tag.cms-tag-best { background: var(--accent-danger); }
.cms-bundle-tag.cms-tag-save { background: var(--accent-success); }

/* === Khuyến mãi & Quà tặng section (numbered list, TGDD-style) === */
.cms-sp-gifts {
  margin: 0 0 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.cms-sp-gifts-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-default);
}
.cms-sp-gifts-head .material-symbols-outlined {
  color: var(--accent-orange);
  font-size: 22px;
  font-variation-settings: 'FILL' 1;
}
.cms-sp-gifts-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-text);
  flex: 1;
}
.cms-sp-gifts-meta {
  font-size: 12px;
  color: var(--muted-text);
  font-weight: 500;
  background: var(--surface-alt);
  border-radius: 9999px;
  padding: 2px 10px;
}
.cms-gifts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cms-gifts-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cms-gifts-list li::before { display: none; }
.cms-gift-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.cms-gift-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--second-text);
}
.cms-gift-text strong {
  color: var(--primary-text);
  font-weight: 600;
}
.cms-gift-text a {
  color: var(--primary-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 500;
  margin-left: 4px;
}
.cms-gift-text a:hover {
  color: var(--primary-blue-hover);
}
.cms-gift-sub {
  font-size: 12px;
  color: var(--muted-text);
  margin-top: 2px;
  font-style: italic;
}
.cms-gifts-empty {
  font-size: 13px;
  color: var(--muted-text);
  text-align: center;
  font-style: italic;
  padding: 8px 0;
}

/* Flat layout used when there's only one selectable gift group (no numbering) */
.cms-gifts-flat {
  font-size: 14px;
  line-height: 1.5;
  color: var(--second-text);
}
.cms-gifts-flat strong { color: var(--primary-text); font-weight: 600; }

/* Group-based layout — stacked groups, each with its own label + picker */
.cms-gift-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cms-gift-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cms-gift-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cms-gift-group-tag {
  display: inline-flex;
  align-items: center;
  background: var(--primary-blue-soft);
  color: var(--primary-blue);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.2px;
}
.cms-gift-text-fallback {
  font-size: 13px;
  color: var(--second-text);
  font-style: italic;
}

/* Pick counter — shows X/K live as customer picks */
.cms-gift-pick-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-alt);
  color: var(--muted-text);
  transition: background 0.15s ease, color 0.15s ease;
}
.cms-gift-pick-counter.is-full {
  background: #dcfce7;
  color: #15803d;
}
.cms-gift-pick-counter.is-under {
  background: #fef3c7;
  color: #b45309;
}
.cms-gift-pick-counter strong { font-weight: 800; }

/* Disabled thumb when pick limit reached */
.cms-gift-thumb.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--surface-alt);
}
.cms-gift-thumb.is-disabled:hover {
  border-color: var(--border-default);
}

/* Gift picker — roomy horizontal cards with bigger image + full name */
.cms-gift-pick-hint {
  font-size: 12px;
  color: var(--muted-text);
  font-style: italic;
}
.cms-gift-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2 cột giống mockup — đủ rộng trên trang SP */
  gap: 10px;
  margin-top: 6px;
}
@media (max-width: 768px) {
  .cms-gift-picker { grid-template-columns: 1fr; }   /* mobile: 1 cột cho rộng rãi */
}
/* Trong popup "Mua ngay" cột LUÔN hẹp hơn hẳn trang SP (dù màn hình desktop to) vì popup
   chia 2 cột trái/phải — card quà có ảnh 62px + nút +/- nên 2 cột/hàng không đủ chỗ, chữ vỡ
   vụn. Ép LUÔN 1 cột khi ở trong popup, bất kể khổ màn hình (đặc hiệu hơn 2 rule trên nên
   thắng cả ở desktop lẫn mobile). */
.devvn-popup-inner .cms-gift-picker {
  grid-template-columns: 1fr;
}
.cms-gift-thumb {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 36px 10px 10px; /* leave room for top-right icons */
  background: var(--surface-card);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  min-height: 76px;
  margin: 0;
}
.cms-gift-thumb input { display: none; }
/* Bộ đếm số lượng quà (gói "chọn ≥2" — cho phép trùng loại) */
.cms-gift-thumb--qty { cursor: default; align-items: flex-start; }
.cms-gift-thumb--qty.is-picked { border-color: var(--primary-blue); background: var(--primary-blue-soft, #eff6ff); }
.cms-gift-hidden { display: none; }
/* bộ đếm = MỘT khối bo tròn liền mạch [− | số | +] (viền ngoài chung, vạch ngăn ở giữa) */
.cms-gift-stepper { display: inline-flex; align-self: flex-start; align-items: center; margin-top: 8px; border: 1.5px solid var(--border-default); border-radius: 9px; overflow: hidden; background: #fff; }
/* !important để thắng style button mặc định của Flatsome (padding/min-height làm nút bị cao, lệch) */
.cms-gift-step { width: 36px !important; height: 34px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; font-size: 19px !important; line-height: 1 !important; cursor: pointer; color: var(--primary-blue); display: flex; align-items: center; justify-content: center; }
.cms-gift-step-val { width: 48px; height: 34px; display: flex; align-items: center; justify-content: center; border-left: 1.5px solid var(--border-default); border-right: 1.5px solid var(--border-default); font-weight: 800; font-size: 16px; background: #fff; color: var(--primary-text, #0b1f44); }
.cms-gift-step:hover:not(:disabled) { background: var(--primary-blue-soft, #eff6ff) !important; }
.cms-gift-step:disabled { opacity: .4; cursor: not-allowed; }
.cms-gift-thumb-img {
  width: 62px;
  height: 76px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border-default);
  flex-shrink: 0;
}
.cms-gift-thumb-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.cms-gift-thumb-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-text);
  line-height: 1.3;
}
.cms-gift-thumb-sub {
  font-size: 11px;
  color: var(--muted-text);
  font-weight: 400;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cms-gift-thumb:hover {
  border-color: #93c5fd;
}
.cms-gift-thumb.is-picked {
  border-color: var(--primary-blue);
  background: var(--primary-blue-soft);
  box-shadow: 0 0 0 2px rgba(0, 104, 255, 0.1);
}
.cms-gift-thumb.is-picked::after {
  content: 'check';
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'wght' 700;
  position: absolute;
  top: 8px;
  right: 8px;
  color: #fff;
  background: var(--primary-blue);
  font-size: 16px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}
.cms-gift-thumb.is-single { cursor: default; }
.cms-gift-thumb.is-single:hover { border-color: var(--primary-blue); }

/* Display-only mode: pre-included gifts (no choice for customer) */
.cms-gift-picker.is-display-only .cms-gift-thumb {
  cursor: default;
  border-color: var(--border-default);
  background: var(--surface-card);
  box-shadow: none;
}
.cms-gift-picker.is-display-only .cms-gift-thumb:hover {
  border-color: var(--border-default);
}
.cms-gift-picker.is-display-only .cms-gift-thumb::after { display: none; }
.cms-gift-thumb.is-display-only::before {
  content: '✓ Tặng kèm';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-success);
  letter-spacing: 0.2px;
}
.cms-gift-thumb-link {
  position: absolute;
  bottom: 8px;
  right: 8px;
  color: var(--muted-text);
  text-decoration: none !important;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  opacity: 0.8;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cms-gift-thumb-link:hover {
  opacity: 1;
  color: var(--primary-blue);
  border-color: var(--primary-blue);
}
.cms-gift-thumb-link .material-symbols-outlined { font-size: 14px; }

/* Hide the original variation swatches table since bundle cards replace it */
.product-main form.variations_form table.variations {
  display: none !important;
}
.product-main form.variations_form .single_variation_wrap { display: block; }

/* === Scarcity line === */
.cms-sp-scarcity {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 13px;
  color: #9a3412;
  line-height: 1.4;
}
.cms-sp-scarcity .material-symbols-outlined {
  color: #ea580c;
  font-size: 18px;
  font-variation-settings: 'FILL' 1;
  flex-shrink: 0;
}
.cms-sp-scarcity strong { color: #7c2d12; font-weight: 700; }
.cms-sp-scarcity .cms-sp-slots { color: #b91c1c; }

/* === Shipping banner === */
.cms-sp-shipping-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--primary-blue-soft);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 13px;
  color: #1e40af;
  line-height: 1.5;
}
.cms-sp-shipping-banner .material-symbols-outlined {
  color: var(--primary-blue);
  font-size: 18px;
  font-variation-settings: 'FILL' 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.cms-sp-shipping-banner strong { color: #1e3a8a; font-weight: 700; }
.cms-sp-shipping-banner .cms-sp-shipping-night { color: #475569; }
.cms-sp-shipping-banner .cms-sp-shipping-active {
  color: #15803d;
  font-weight: 600;
}

/* === Dược sĩ tư vấn (after cart) === */
.cms-sp-pharmacist {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, #eff6ff, #ecfdf5);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-top: 14px;
}
.cms-sp-pharmacist-avatar {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--primary-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cms-sp-pharmacist-avatar .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 1;
}
.cms-sp-pharmacist-info { flex: 1; min-width: 0; }
.cms-sp-pharmacist-label {
  font-size: 11px;
  color: var(--muted-text);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.cms-sp-pharmacist-name {
  color: var(--primary-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.cms-sp-pharmacist-credential {
  color: var(--second-text);
  font-size: 12px;
}
.cms-sp-pharmacist-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-success);
  color: #fff !important;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  flex-shrink: 0;
}
.cms-sp-pharmacist-cta:hover { background: #15803d; }
.cms-sp-pharmacist-cta .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 1;
}

/* Remove old trust badge grid since Vì Sao section replaces it */
.cms-single-product-after-add-to-cart { display: none !important; }

/* ============================================================
   LANDING COPY — optimized for AIDA/PAS/FAB/BAB conversion
   Styling for hook, before-after table, FAB compare, FAQ, closing CTA.
   ============================================================ */

/* Section wrapper inside the long description (each "chapter" of the landing) */
.product-footer .cms-sp-section,
.entry-content .cms-sp-section,
.tab-panel .cms-sp-section,
.cms-sp-section {
  margin: 28px 0;
  padding: 0;
  scroll-margin-top: 100px;
}
.cms-sp-section + .cms-sp-section {
  border-top: 1px solid var(--border-default);
  padding-top: 24px;
}
.cms-sp-section h2 {
  color: var(--primary-text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.2px;
  margin: 0 0 14px;
  position: relative;
  padding-left: 14px;
}
.cms-sp-section h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: var(--primary-blue);
  border-radius: 2px;
}
.cms-sp-section h3 {
  color: var(--primary-text);
  font-size: 17px;
  font-weight: 700;
  margin: 18px 0 10px;
}
.cms-sp-section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--second-text);
  margin: 0 0 12px;
}
.cms-sp-section p strong { color: var(--primary-text); }

/* Figure / image styling inside content */
.cms-sp-figure {
  margin: 14px 0;
  text-align: center;
}
.cms-sp-figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--primary-blue-gallery);
  display: block;
  margin: 0 auto;
}
.cms-sp-figure--center img {
  max-width: 380px;
}
.cms-sp-figure figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted-text);
  font-style: italic;
  text-align: center;
}

@media (max-width: 640px) {
  .cms-sp-section h2 { font-size: 18px; padding-left: 10px; }
  .cms-sp-section h2::before { width: 3px; }
  .cms-sp-section h3 { font-size: 15px; }
  .cms-sp-section p { font-size: 14px; }
  .cms-sp-figure--center img { max-width: 100%; }
}

/* === BAB STORY: 3-col Before → Arrow → After === */
.cms-sp-baB-story {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin: 16px 0;
}
.cms-sp-baB-before,
.cms-sp-baB-after {
  padding: 18px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  line-height: 1.65;
}
.cms-sp-baB-before {
  background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
  border: 1px solid #fecaca;
}
.cms-sp-baB-after {
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
  border: 1px solid #bbf7d0;
}
.cms-sp-baB-before h4,
.cms-sp-baB-after h4 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
}
.cms-sp-baB-before h4 { color: #b91c1c; }
.cms-sp-baB-after  h4 { color: #15803d; }
.cms-sp-baB-before p,
.cms-sp-baB-after p {
  margin: 0 !important;
  color: var(--primary-text);
}
.cms-sp-baB-after strong { color: #15803d; }
.cms-sp-baB-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 800;
  color: var(--primary-blue);
}
@media (max-width: 640px) {
  .cms-sp-baB-story {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cms-sp-baB-arrow {
    transform: rotate(90deg);
    font-size: 28px;
  }
}

/* === TIMELINE NARRATIVE === */
.cms-sp-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  position: relative;
}
.cms-sp-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--primary-blue);
  border-radius: var(--radius-md);
}
.cms-sp-timeline-item:nth-child(1) { border-left-color: #fbbf24; }
.cms-sp-timeline-item:nth-child(2) { border-left-color: #f97316; }
.cms-sp-timeline-item:nth-child(3) { border-left-color: var(--accent-success); }
.cms-sp-timeline-time {
  flex-shrink: 0;
  min-width: 110px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary-text);
  padding-right: 12px;
  border-right: 1px dashed var(--border-default);
}
.cms-sp-timeline-text {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--second-text);
}
.cms-sp-timeline-text strong { color: var(--primary-text); }
@media (max-width: 640px) {
  .cms-sp-timeline-item { flex-direction: column; gap: 4px; padding: 12px 14px; }
  .cms-sp-timeline-time { border-right: none; padding-right: 0; min-width: 0; color: var(--primary-blue); }
}

/* === REVIEW CARDS === */
.cms-sp-review {
  background: linear-gradient(135deg, #fffbeb 0%, #fff 80%);
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 10px 0;
  position: relative;
}
.cms-sp-review--four-star {
  background: linear-gradient(135deg, #f8fafc 0%, #fff 80%);
  border-color: var(--border-default);
}
.cms-sp-review--three-star {
  background: linear-gradient(135deg, #f3f4f6 0%, #fff 80%);
  border-color: #d1d5db;
}
.cms-sp-review-stars {
  color: #fbbf24;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.cms-sp-review p {
  margin: 0 0 8px !important;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--primary-text);
  font-style: italic;
}
.cms-sp-review-author {
  font-size: 12.5px;
  color: var(--muted-text);
  font-weight: 500;
}

/* === INLINE CTA between blocks (anchor links) === */
.cms-sp-inline-cta {
  margin: 18px 0 0 !important;
  padding: 12px 16px;
  background: linear-gradient(90deg, #eff6ff 0%, #f0fdfa 100%);
  border: 1px dashed var(--primary-blue);
  border-radius: var(--radius-md);
  font-size: 14.5px !important;
  text-align: center;
}
.cms-sp-inline-cta a {
  color: var(--primary-blue) !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
.cms-sp-inline-cta a:hover {
  color: var(--primary-blue-hover) !important;
}

/* === VISUAL PROOF GRID === */
.cms-sp-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.cms-sp-photo {
  margin: 0;
  text-align: center;
}
.cms-sp-photo img {
  width: 100%;
  height: auto;               /* tỉ lệ gốc — KHÔNG cắt ảnh */
  padding: 4px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: #fff;
}
.cms-sp-photo figcaption {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted-text);
  line-height: 1.4;
}
@media (max-width: 640px) {
  .cms-sp-photo-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cms-sp-photo figcaption { font-size: 11.5px; }
}

/* === GALLERY GỌN (trang 307 ngựa thái + 474 tengsu): thumbnail đồng đều, hàng thẳng === */
body.postid-307 .cms-sp-photo img,
body.postid-474 .cms-sp-photo img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}
/* Ảnh dạng tài liệu/chụp màn (bảng đơn, lịch sử mua lại): GIỮ NGUYÊN tỉ lệ, xếp DỌC canh giữa, TO rõ */
.cms-sp-doc { margin: 18px auto; text-align: center; }
.cms-sp-doc img {
  display: block;
  margin: 0 auto;
  height: auto;
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: #fff;
}
.cms-sp-doc--wide img { width: 100%; max-width: 760px; }   /* bảng ngang: rộng để đọc rõ */
.cms-sp-doc--tall img { width: auto; max-width: 100%; max-height: 560px; }  /* bảng dọc: vừa phải */
.cms-sp-doc figcaption {
  margin-top: 6px; font-size: 12.5px; color: var(--muted-text); line-height: 1.4;
}

/* === Ảnh SO SÁNH THẬT/GIẢ: phải TO & RÕ (khách cần đọc chi tiết) === */
#check-that-gia .cms-sp-figure--center img { max-width: 100% !important; }  /* bỏ cap 220px */
#check-that-gia .cms-sp-photo img { aspect-ratio: auto !important; }        /* full ảnh, không ép khung */
#check-that-gia .cms-sp-photo { display: flex; flex-direction: column; }
#check-that-gia .cms-sp-photo-grid { align-items: start; }
/* Desktop: 2 ảnh so sánh CÙNG CHIỀU CAO → hàng thẳng, không cắt chi tiết */
@media (min-width: 769px) {
  #check-that-gia .cms-sp-photo img {
    height: 400px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  #check-that-gia .cms-sp-photo-grid { grid-template-columns: 1fr !important; }  /* 1 cột → ảnh to */
}

/* === TRUST CALLOUT BAR === */
.cms-sp-trust-callout {
  margin: 18px 0;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fee2e2 0%, #fef3c7 100%);
  border: 2px solid #fca5a5;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.6;
  color: #7c2d12;
  text-align: center;
}
.cms-sp-trust-callout strong { color: #991b1b; font-size: 15px; }

/* === STANDALONE PRICE TABLE === */
.cms-sp-price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 14px 0;
  font-size: 14px;
}
.cms-sp-price-table th {
  background: var(--primary-blue-soft);
  color: var(--primary-blue);
  padding: 12px 14px;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--primary-blue-border);
  font-size: 13.5px;
}
.cms-sp-price-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
  line-height: 1.5;
}
.cms-sp-price-table tr:last-child td { border-bottom: none; }
.cms-sp-price-table tr.cms-sp-row-hot {
  background: linear-gradient(90deg, #fff5eb 0%, #fff 100%);
}
.cms-sp-price-table tr.cms-sp-row-hot td strong {
  color: var(--accent-orange);
}
.cms-sp-price-table tr.cms-sp-row-best {
  background: linear-gradient(90deg, #fef2f2 0%, #fff 100%);
}
.cms-sp-price-table tr.cms-sp-row-best td strong {
  color: var(--accent-danger);
}

.cms-sp-tag-light,
.cms-sp-tag-hot,
.cms-sp-tag-best {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 9999px;
  margin-left: 6px;
  text-transform: uppercase;
  vertical-align: middle;
}
.cms-sp-tag-light { background: var(--surface-alt); color: var(--muted-text); }
.cms-sp-tag-hot   { background: var(--accent-orange); color: #fff; }
.cms-sp-tag-best  { background: var(--accent-danger); color: #fff; }

.cms-sp-save {
  color: var(--accent-success);
  font-weight: 700;
  font-size: 12.5px;
  background: var(--accent-success-bg);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ============================================================
   CONVERSION BOOSTERS
   ============================================================ */

/* === 1. Live social proof toast (bottom-left) === */
.cms-pm-sp-toast {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 998;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(11, 31, 68, 0.16);
  padding: 12px 14px;
  padding-right: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  max-width: 360px;
  font-size: 13px;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.cms-pm-sp-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cms-pm-sp-toast[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.cms-pm-sp-toast-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
  flex-shrink: 0;
  animation: cmsPmPulse 2s ease-in-out infinite;
}
@keyframes cmsPmPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.05); }
}
.cms-pm-sp-toast-body {
  flex: 1;
  min-width: 0;
}
.cms-pm-sp-toast-name {
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.cms-pm-sp-toast-name strong { font-weight: 700; }
.cms-pm-sp-toast-meta {
  color: var(--muted-text);
  font-size: 11.5px;
  margin-top: 2px;
}
.cms-pm-sp-toast-time {
  color: var(--accent-success);
  font-weight: 600;
}
.cms-pm-sp-toast-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: var(--muted-text);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.cms-pm-sp-toast-close:hover { color: var(--primary-text); }
@media (max-width: 640px) {
  .cms-pm-sp-toast {
    bottom: 112px;  /* above mobile sticky buy bar (price strip + buttons) */
    left: 8px;
    right: 8px;
    min-width: 0;
    max-width: none;
    font-size: 12px;
  }
}

/* === 2. Sticky desktop CTA bar === */
.cms-pm-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 997;
  background: #fff;
  border-top: 1px solid var(--border-default);
  box-shadow: 0 -4px 20px rgba(11, 31, 68, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.cms-pm-sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cms-pm-sticky-cta[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.cms-pm-sticky-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.cms-pm-sticky-cta-label {
  font-size: 15px;
  color: var(--primary-text);
  font-weight: 600;
}
.cms-pm-sticky-cta-label strong {
  color: var(--accent-danger);
  font-weight: 800;
  font-size: 17px;
}
.cms-pm-sticky-cta-sub {
  font-size: 12.5px;
  color: var(--muted-text);
}
.cms-pm-sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(180deg, #ff7a3d 0%, #f97316 100%);
  color: #fff !important;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.30);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.cms-pm-sticky-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.42);
  color: #fff !important;
}
@media (max-width: 849px) {
  .cms-pm-sticky-cta { display: none !important; }
}

/* === 3. Exit-intent popup === */
.cms-pm-exit-popup {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;  /* CRITICAL: don't block clicks when invisible */
  transition: opacity 0.28s ease;
}
.cms-pm-exit-popup.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.cms-pm-exit-popup[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.cms-pm-exit-popup-bg {
  position: absolute;
  inset: 0;
  background: rgba(11, 31, 68, 0.62);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.cms-pm-exit-popup-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  max-width: 460px;
  width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.30);
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.cms-pm-exit-popup.is-visible .cms-pm-exit-popup-card {
  transform: scale(1);
}
.cms-pm-exit-popup-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--muted-text);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background 0.15s ease;
}
.cms-pm-exit-popup-close:hover {
  background: var(--surface-alt);
  color: var(--primary-text);
}
.cms-pm-exit-popup-badge {
  display: inline-block;
  background: linear-gradient(90deg, #ff5b1f, #f97316);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 9999px;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.cms-pm-exit-popup-title {
  color: var(--primary-text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 12px;
  letter-spacing: -0.3px;
}
.cms-pm-exit-popup-desc {
  color: var(--second-text);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 20px;
}
.cms-pm-exit-popup-desc strong { color: var(--accent-danger); }
.cms-pm-exit-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.cms-pm-exit-popup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  border: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.cms-pm-exit-popup-btn--primary {
  background: #0068ff;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 104, 255, 0.30);
}
.cms-pm-exit-popup-btn--primary:hover {
  background: #0054d6;
  transform: translateY(-1px);
}
.cms-pm-exit-popup-btn--ghost {
  background: transparent;
  color: var(--muted-text);
  border: 1px solid var(--border-default);
}
.cms-pm-exit-popup-btn--ghost:hover {
  background: var(--surface-alt);
  color: var(--primary-text);
}
.cms-pm-exit-popup-foot {
  font-size: 13px;
  color: var(--muted-text);
  margin: 12px 0 0;
}
.cms-pm-exit-popup-foot a {
  color: var(--primary-blue);
  font-weight: 700;
  text-decoration: none !important;
}
@media (max-width: 640px) {
  .cms-pm-exit-popup-card { padding: 24px 20px 18px; }
  .cms-pm-exit-popup-title { font-size: 18px; }
}

@media (max-width: 640px) {
  .cms-sp-price-table th,
  .cms-sp-price-table td { padding: 8px 10px; font-size: 12.5px; }
  .cms-sp-tag-light, .cms-sp-tag-hot, .cms-sp-tag-best { display: none; }
}

/* Hook paragraph at top of short description — bold & emotional */
.cms-sp-hook,
.product-short-description .cms-sp-hook {
  font-size: 15px;
  line-height: 1.6;
  color: var(--primary-text);
  background: linear-gradient(180deg, #fff8e6 0%, #fff 70%);
  border-left: 3px solid var(--accent-orange);
  padding: 10px 12px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 0 0 12px;
}
.cms-sp-hook strong { color: #c2410c; }

/* Quick benefits block under hook */
.cms-sp-quick-benefits {
  background: var(--accent-success-bg);
  border-left: 3px solid var(--accent-success);
  padding: 10px 12px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 14px;
  line-height: 1.7;
  color: #15803d;
  margin: 0 0 14px;
}

/* Pain list — red with ❌ */
.cms-sp-pain {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}
.cms-sp-pain li {
  background: #fef2f2;
  border-left: 3px solid #fecaca;
  padding: 8px 12px;
  margin: 6px 0 !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 14px;
  line-height: 1.5;
  color: #7c2d12;
  list-style: none !important;
}
.cms-sp-pain li::before { display: none !important; content: none !important; }

/* Before-After table (BAB) */
table.cms-sp-baB-table,
table.cms-sp-fab-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 12px 0;
  font-size: 14px;
}
table.cms-sp-baB-table th,
table.cms-sp-fab-table th {
  background: var(--primary-blue-soft);
  color: var(--primary-blue);
  padding: 10px 14px;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--primary-blue-border);
}
table.cms-sp-baB-table th:first-child { background: #fef2f2; color: #b91c1c; }
table.cms-sp-baB-table th:last-child  { background: var(--accent-success-bg); color: #15803d; }
table.cms-sp-baB-table td,
table.cms-sp-fab-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-default);
  vertical-align: top;
  line-height: 1.45;
}
table.cms-sp-baB-table tr:last-child td,
table.cms-sp-fab-table tr:last-child td { border-bottom: none; }
table.cms-sp-baB-table td:first-child {
  color: #991b1b;
  background: #fef2f2;
  width: 45%;
}
table.cms-sp-baB-table td:last-child {
  color: var(--primary-text);
  background: var(--accent-success-bg);
}
table.cms-sp-baB-table td:last-child strong { color: #15803d; }

table.cms-sp-fab-table th:first-child { background: var(--surface-alt); color: var(--primary-text); }
table.cms-sp-fab-table td:first-child {
  background: var(--surface-alt);
  font-weight: 600;
  color: var(--second-text);
}
table.cms-sp-fab-table td:last-child strong { color: var(--primary-blue); }

/* How-to ordered list */
ol.cms-sp-howto {
  counter-reset: step;
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
}
ol.cms-sp-howto li {
  counter-increment: step;
  position: relative;
  padding: 12px 14px 12px 50px;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  margin: 8px 0 !important;
  font-size: 14px;
  line-height: 1.55;
  list-style: none !important;
}
ol.cms-sp-howto li::before {
  content: counter(step);
  position: absolute;
  left: 12px;
  top: 12px;
  width: 28px;
  height: 28px;
  background: var(--primary-blue);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

/* Tip callout box */
.cms-sp-tip {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid var(--accent-warning);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin: 14px 0;
  font-size: 14px;
  color: #78350f;
}
.cms-sp-tip strong { color: #92400e; }
.cms-sp-tip ul { margin: 6px 0 0 16px; }

/* Proof list */
.cms-sp-proof {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 !important;
}
.cms-sp-proof li {
  padding: 8px 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--primary-text);
  border-bottom: 1px dashed var(--border-default);
  list-style: none !important;
}
.cms-sp-proof li:last-child { border-bottom: none; }
.cms-sp-proof li strong { color: var(--primary-blue); }
.cms-sp-proof li::before { display: none !important; content: none !important; }

/* FAQ <details> accordion */
.entry-content details,
.product-footer details {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin: 8px 0;
  padding: 0;
  overflow: hidden;
}
.entry-content details summary,
.product-footer details summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-text);
  background: var(--surface-card);
  position: relative;
  list-style: none;
  transition: background 0.15s ease;
}
.entry-content details summary::-webkit-details-marker { display: none; }
.entry-content details summary::after,
.product-footer details summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--primary-blue);
  font-weight: 300;
  transition: transform 0.2s ease;
  line-height: 1;
}
.entry-content details[open] summary::after,
.product-footer details[open] summary::after {
  content: '−';
}
.entry-content details summary:hover,
.product-footer details summary:hover {
  background: var(--surface-alt);
}
.entry-content details p,
.product-footer details p,
.entry-content details ul,
.product-footer details ul {
  padding: 0 16px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--second-text);
  margin: 0;
}

/* === CUSTOM FAQ ACCORDION (replaces <details>) === */
.cms-pm-faq-item {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin: 8px 0;
  overflow: hidden;
}
.cms-pm-faq-q {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: #fff;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--primary-text);
  line-height: 1.4;
  transition: background 0.15s ease;
  gap: 16px;
}
.cms-pm-faq-q:hover {
  background: var(--surface-alt);
}
.cms-pm-faq-q-text {
  flex: 1;
}
.cms-pm-faq-q-icon {
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--primary-blue);
  line-height: 1;
  width: 24px;
  text-align: center;
  transition: transform 0.2s ease;
}
.cms-pm-faq-q.is-open .cms-pm-faq-q-icon {
  color: var(--primary-blue);
}
.cms-pm-faq-a {
  padding: 0 18px 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--second-text);
  animation: cmsPmFaqFadeIn 0.2s ease;
}
.cms-pm-faq-a[hidden] { display: none !important; }
.cms-pm-faq-a p { margin: 0 0 8px !important; padding: 0 !important; font-size: 14px; color: var(--second-text); }
.cms-pm-faq-a p:last-child { margin: 0 !important; }
.cms-pm-faq-a ul { margin: 8px 0 0 16px !important; padding: 0 !important; }
.cms-pm-faq-a li { margin: 4px 0 !important; }
.cms-pm-faq-a strong { color: var(--primary-text); }
.cms-pm-faq-a a {
  color: var(--primary-blue);
  font-weight: 600;
  text-decoration: none;
}
.cms-pm-faq-a a:hover { text-decoration: underline; }
@keyframes cmsPmFaqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === FORCE-VISIBLE: defeat any conflicting CSS that hides details content === */
.product-footer details:not([open]) > *:not(summary),
.entry-content details:not([open]) > *:not(summary),
.tab-panel details:not([open]) > *:not(summary),
details:not([open]) > *:not(summary) {
  display: none !important;
}
.product-footer details[open] > *,
.entry-content details[open] > *,
.tab-panel details[open] > *,
details[open] > * {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
}
.product-footer details[open] > summary,
.entry-content details[open] > summary,
.tab-panel details[open] > summary,
details[open] > summary {
  /* summary stays as flex/inline-flex regardless */
  display: block !important;
}
/* Ensure summary is fully clickable, no overlaps */
details > summary {
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* The plus/minus indicator must NOT block clicks */
details > summary::after {
  pointer-events: none;
}

/* Closing CTA section */
.cms-sp-closing {
  margin: 24px 0;
  padding: 20px 24px;
  background: linear-gradient(135deg, #fef3c7 0%, #fff4ed 100%);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-lg);
}
.cms-sp-closing h3 {
  color: #b91c1c;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 10px;
}
.cms-sp-closing p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--primary-text);
  margin: 0 0 10px;
}
.cms-sp-closing .cms-pm-price {
  color: var(--accent-danger);
  font-weight: 800;
}
.cms-sp-cta-final {
  margin-top: 16px !important;
  text-align: center;
}
.cms-sp-cta-final .button {
  background: linear-gradient(180deg, #ff7a3d 0%, #f97316 100%);
  color: #fff !important;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none !important;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.30);
  display: inline-block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cms-sp-cta-final .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(249, 115, 22, 0.40);
}

@media (max-width: 640px) {
  .cms-sp-hook { font-size: 14px; }
  table.cms-sp-baB-table, table.cms-sp-fab-table { font-size: 13px; }
  table.cms-sp-baB-table th, table.cms-sp-baB-table td,
  table.cms-sp-fab-table th, table.cms-sp-fab-table td { padding: 8px 10px; }
  .cms-sp-closing { padding: 16px 18px; }
  .cms-sp-closing h3 { font-size: 17px; }
}

/* === Mobile responsive === */
@media (max-width: 768px) {
  .cms-sp-why-grid { grid-template-columns: 1fr; }
  .cms-sp-bundles-list { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .cms-bundle-card { padding: 10px; min-height: 100px; }
  .cms-bundle-card-title { font-size: 13px; }
  .cms-bundle-card-price { font-size: 15px; }
  .cms-sp-pharmacist { flex-wrap: wrap; }
  .cms-sp-pharmacist-cta { width: 100%; justify-content: center; }
}

/* === Hide the default WooCommerce shop_attributes table ===
   Shows "Gói mua / Gói quà tặng" with grey label cells — duplicates info
   already visible in the bundle cards section. Cleaner without it. */
.product-main .woocommerce-product-attributes,
.product-main table.shop_attributes,
.product-footer .woocommerce-product-attributes,
.product-footer table.shop_attributes,
.cms-single-product-custom-tabs-wrapper table.shop_attributes,
.woocommerce-Tabs-panel--additional_information table.shop_attributes {
  display: none !important;
}

/* If you'd rather keep it but FLAT (no grey label bg), use this instead:
   .product-main table.shop_attributes th {
     background: transparent !important;
     font-weight: 600;
   }
   .product-main table.shop_attributes,
   .product-main table.shop_attributes td,
   .product-main table.shop_attributes th {
     border: none !important;
   }
*/

/* ============================================================
   PHARMACITY-INSPIRED RESTYLE
   Visual tokens were swapped in general.css :root.
   Below: targeted overrides that match the medical-ecommerce
   feel — light-blue gallery canvas, bigger title, blue Mua Ngay,
   outline Thêm vào giỏ, info table, 3-col benefit bar, sticky
   mobile buy bar.
   ============================================================ */

/* --- Container softening: card stands out from page bg --- */
.product-main > .row {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-default);
}

/* --- Gallery canvas: Pharmacity light-blue --- */
.product .product-gallery .product-images .flickity-slider .woocommerce-product-gallery__image img {
  background-color: var(--primary-blue-gallery);
  border-radius: var(--radius-lg);
}
.product .product-gallery .product-thumbnails .flickity-slider img {
  background-color: var(--primary-blue-gallery);
}
.product .product-gallery .product-thumbnails .flickity-slider div > a {
  border-radius: var(--radius-md);
}
.product .product-gallery .product-thumbnails .flickity-slider div.is-selected > a {
  border-color: var(--primary-blue);
  border-width: 2px;
  padding: 5px;
}

/* --- Title: BIGGER, deeper navy, Shopee-prominent --- */
.product-main .product-info .product-title {
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: var(--primary-text) !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.2px !important;
}

/* ============================================================
   SHIPPING BLOCK — Shopee-style after price
   ============================================================ */
.cms-pm-shipping-block {
  margin: 14px 0;
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cms-pm-shipping-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.cms-pm-shipping-row + .cms-pm-shipping-row {
  border-top: 1px dashed #bbf7d0;
}
.cms-pm-shipping-row--express {
  background: linear-gradient(90deg, #fff7ed 0%, #fff 100%);
  border-top-color: #fed7aa;
}
.cms-pm-shipping-icon {
  font-size: 22px !important;
  color: #16a34a !important;
  font-variation-settings: 'FILL' 1 !important;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #dcfce7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cms-pm-shipping-icon--orange {
  color: #ea580c !important;
  background: #ffedd5;
}
.cms-pm-shipping-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cms-pm-shipping-label {
  font-size: 12px;
  color: var(--muted-text);
  font-weight: 500;
  line-height: 1.3;
}
.cms-pm-shipping-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-text);
  line-height: 1.3;
}
.cms-pm-shipping-highlight {
  color: #ea580c;
  font-weight: 800;
}
.cms-pm-shipping-note {
  display: block;
  font-size: 11.5px;
  color: var(--muted-text);
  font-weight: 400;
  line-height: 1.4;
  margin-top: 2px;
  font-style: italic;
}

/* Hide the legacy wide "Giao hỏa tốc nội thành" banner (rendered by bundle JS) —
   the info has been moved into the compact shipping block above. */
.product-main .cms-sp-shipping-banner,
.cms-sp-shipping-banner {
  display: none !important;
}
.cms-pm-shipping-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.cms-pm-shipping-tag--free {
  background: var(--accent-success);
  color: #fff;
}
.cms-pm-shipping-tag--express {
  background: #ea580c;
  color: #fff;
  font-size: 12px;
}

/* ============================================================
   RATING ROW — Shopee-style: stars + reviews + sold + report
   Now appears BELOW title (priority 7 instead of 1).
   ============================================================ */
.product-main .product-info .cms-single-product-review-count {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 8px !important;
  padding-bottom: 10px;
  margin: 0 0 12px !important;
  border-bottom: 1px solid var(--border-default);
  font-size: 13.5px;
}
.product-main .product-info .cms-single-product-review-count .cms-single-product-review-count-star-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.product-main .product-info .cms-single-product-review-count .material-symbols-outlined {
  font-size: 17px !important;
  color: var(--accent-star) !important;
}
.product-main .product-info .cms-single-product-review-count .cms-single-product-review-count-text {
  color: var(--primary-blue);
  text-decoration: underline;
  text-decoration-color: rgba(15, 79, 168, 0.3);
  text-underline-offset: 3px;
  font-size: 13.5px;
  font-weight: 500;
}
.cms-pm-rating-sep {
  color: var(--border-strong);
  font-weight: 400;
  margin: 0 2px;
}
.cms-pm-rating-sold {
  color: var(--second-text);
  font-size: 13.5px;
  font-weight: 500;
}
.cms-pm-rating-sold strong {
  color: var(--primary-text);
  font-weight: 700;
  margin-right: 2px;
}

/* Mobile: tighter shipping block */
@media (max-width: 640px) {
  .product-main .product-info .product-title {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
  .cms-pm-shipping-row { padding: 10px 12px; gap: 10px; }
  .cms-pm-shipping-icon { width: 30px; height: 30px; font-size: 18px !important; }
  .cms-pm-shipping-value { font-size: 13px; }
  .cms-pm-shipping-tag { font-size: 10.5px; padding: 3px 8px; }
}

/* --- Badge row above title (Chính hãng / Brand) --- */
.cms-pm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.cms-pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  line-height: 1.2;
}
.cms-pm-badge--authentic {
  background: var(--accent-success);
  color: #fff;
}
.cms-pm-badge--authentic::before {
  content: 'verified';
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 1;
  font-size: 15px;
}
.cms-pm-badge--brand {
  background: var(--surface-alt);
  color: var(--second-text);
  border: 1px solid var(--border-default);
}

/* --- Price box: bigger blue price, cleaner stack --- */
.product-main .product-info .price-wrapper {
  background-color: var(--primary-blue-tint);
  border-color: var(--primary-blue-border);
  padding: 18px 18px 16px;
  gap: 8px;
}
.product-main .product-info .price.product-page-price bdi {
  color: var(--primary-blue);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.product-main .product-info .price.product-page-price span {
  color: var(--primary-blue);
}
.product-main .product-info .price.product-page-price del bdi {
  color: var(--muted-text);
}
.product-main .product-info .price-wrapper .cms-save {
  background-color: var(--accent-success-bg);
  color: var(--accent-success) !important;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.product-main .product-info .price-wrapper p.cms-free-ship-notice {
  color: var(--second-text);
  font-size: 13px;
}
.product-main .product-info .price-wrapper p.cms-free-ship-notice > .material-symbols-outlined {
  color: var(--accent-success);
}

/* --- Variant chips: pill style like Pharmacity --- */
.thwvsf-wrapper-ul .thwvsf-wrapper-item-li.thwvsf-label-li.attr_swatch_design_default {
  border-radius: var(--radius-pill);
  border-color: var(--primary-blue-border);
  background-color: var(--primary-blue-tint);
  color: var(--primary-blue);
  font-weight: 600;
  padding: 7px 16px;
  min-width: 72px;
  text-align: center;
}
.thwvsf-wrapper-ul .thwvsf-wrapper-item-li.thwvsf-label-li.attr_swatch_design_default.thwvsf-selected {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #fff;
}
.thwvsf-wrapper-ul .thwvsf-wrapper-item-li.thwvsf-label-li.attr_swatch_design_default:hover {
  border-color: var(--primary-blue);
  background-color: var(--primary-blue-soft);
}

/* --- CTA buttons — 2 chính, dual-color stack
   - Thêm vào giỏ  = SOLID BLUE  + chữ trắng
   - Mua ngay      = SOLID ORANGE + chữ trắng (with subtitle)        --- */
.product-main .product-info form.cart .single_add_to_cart_button {
  background-color: var(--primary-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md);
  font-size: 15px !important;
  font-weight: 700 !important;
  min-height: 50px;
  letter-spacing: 0;
  box-shadow: 0 2px 6px rgba(15, 79, 168, 0.18) !important;
  text-transform: none !important;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.product-main .product-info form.cart .single_add_to_cart_button:hover {
  background-color: var(--primary-blue-hover) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(15, 79, 168, 0.28) !important;
}
.product-main .product-info form.cart .single_add_to_cart_button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(15, 79, 168, 0.18) !important;
}
.product-main .product-info form.cart .single_add_to_cart_button::before {
  color: #fff !important;
  font-size: 18px !important;
}
.product-main .product-info form.cart .single_add_to_cart_button:hover::before {
  color: #fff !important;
}
.product-main .product-info form.cart .single_add_to_cart_button.loading {
  opacity: 0.85;
  pointer-events: none;
}
.product-main .product-info form.cart .single_add_to_cart_button.added::before {
  content: "check_circle" !important;
  color: #fff !important;
}

/* Mua ngay button when it sits right under the cart row */
.product-main .product-info .devvn_buy_now,
.product-main .product-info a.devvn_buy_now {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #ff7a3d 0%, #f97316 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 20px !important;
  min-height: 58px !important;
  width: 100% !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.30) !important;
  margin-top: 10px !important;
  text-transform: none !important;
  text-align: center;
  line-height: 1.2 !important;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.product-main .product-info .devvn_buy_now:hover {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%) !important;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.42) !important;
  color: #fff !important;
}
.product-main .product-info .devvn_buy_now:active {
  transform: translateY(1px);
}
/* The button often has two lines: main label + small subtitle */
.product-main .product-info .devvn_buy_now span,
.product-main .product-info .devvn_buy_now small {
  display: block !important;
}
.product-main .product-info .devvn_buy_now small,
.product-main .product-info .devvn_buy_now .devvn_buy_now_subtitle {
  font-size: 12px !important;
  font-weight: 500 !important;
  opacity: 0.92;
  margin-top: 2px;
  letter-spacing: 0;
}

/* Mua ngay — blue solid, replacing previous orange */
.devvn_buy_now,
button.devvn_buy_now,
a.devvn_buy_now {
  background-color: var(--primary-blue) !important;
  color: #fff !important;
  border: 1.5px solid var(--primary-blue) !important;
  border-radius: var(--radius-md) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  min-height: 50px;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease;
}
.devvn_buy_now:hover {
  background-color: var(--primary-blue-hover) !important;
  border-color: var(--primary-blue-hover) !important;
}

/* Quantity stepper: pill-ish like Pharmacity */
.product-main .product-info form.cart .ux-quantity__button.ux-quantity__button--minus,
.product-main .product-info form.cart .ux-quantity__button.ux-quantity__button--plus {
  background-color: var(--surface-alt);
  border-color: var(--border-default);
  color: var(--second-text);
  min-height: 50px;
  font-size: 18px;
}
.product-main .product-info form.cart .input-text.qty {
  background-color: var(--surface-card);
  font-weight: 600;
  min-height: 50px;
}

/* Heart favorite button — bigger circular */
.product-main .product-info form.cart .material-symbols-outlined.favorite {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 22px;
}

/* --- Promo banner under CTA (Pharmacity gradient blue) --- */
.cms-pm-promo {
  margin-top: 14px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, #0f4fa8 0%, #1e6bd6 100%);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.cms-pm-promo::before {
  content: 'sell';
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 1;
  font-size: 28px;
  flex-shrink: 0;
  opacity: 0.95;
}
.cms-pm-promo-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.2px;
}
.cms-pm-promo-sub {
  font-size: 13px;
  opacity: 0.92;
  line-height: 1.3;
  margin-top: 2px;
}

/* --- Trust benefit bar: 3 columns, Pharmacity-style --- */
.cms-pm-benefit-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--surface-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-top: 16px;
  padding: 14px 8px;
  text-align: center;
}
.cms-pm-benefit-bar .cms-pm-benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  position: relative;
}
.cms-pm-benefit-bar .cms-pm-benefit-item + .cms-pm-benefit-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 36px;
  background: var(--border-default);
}
.cms-pm-benefit-bar .cms-pm-benefit-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-blue-soft);
  color: var(--primary-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cms-pm-benefit-bar .cms-pm-benefit-icon .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: 'FILL' 1;
}
.cms-pm-benefit-bar .cms-pm-benefit-text {
  font-size: 12px;
  line-height: 1.35;
  color: var(--primary-text);
  font-weight: 600;
  max-width: 100px;
}

/* --- Info table (Quy cách / Thương hiệu / Xuất xứ ...) --- */
.cms-pm-info-table {
  margin-top: 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cms-pm-info-row {
  display: grid;
  grid-template-columns: 34% 66%;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
  font-size: 14px;
  line-height: 1.5;
}
.cms-pm-info-row:last-child { border-bottom: none; }
.cms-pm-info-row .cms-pm-info-label {
  color: var(--muted-text);
  font-weight: 500;
}
.cms-pm-info-row .cms-pm-info-value {
  color: var(--primary-text);
  font-weight: 600;
}

/* --- Product description tabs: refined underline --- */
.cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list {
  gap: 32px;
  border-bottom: 1px solid var(--border-default);
}
.cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list li a {
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--second-text);
  position: relative;
}
.cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list li:hover a {
  color: var(--primary-blue);
  border-bottom-color: transparent;
}
.cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list li.is-active a,
.cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list li:first-child a {
  color: var(--primary-blue);
  border-bottom: 2px solid var(--primary-blue);
}

/* Section title (mô tả sản phẩm, sản phẩm liên quan) */
.product-footer .cms-single-product-related .product-section .product-section-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary-text);
  letter-spacing: -0.3px;
}

/* Related products section bg = page tint */
.product-footer {
  background-color: var(--surface-page);
}

/* --- Mobile sticky buy bar --- */
.cms-pm-sticky-buy {
  display: none;
}
.cms-pm-sticky-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 4px;
  line-height: 1.15;
}
.cms-pm-sticky-info-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--accent-danger, #e11d48);
  letter-spacing: -0.2px;
  flex-shrink: 0;
}
.cms-pm-sticky-info-hint {
  font-size: 11.5px;
  color: var(--muted-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cms-pm-sticky-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .cms-pm-sticky-buy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: #fff;
    padding: 8px 12px 9px;
    border-top: 1px solid var(--border-default);
    box-shadow: 0 -4px 16px rgba(11, 31, 68, 0.12);
  }
  .cms-pm-sticky-info { display: flex; }
  .cms-pm-sticky-info-price { font-size: 16px; }
  .cms-pm-sticky-actions {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 8px;
    width: 100%;
  }
  .cms-pm-sticky-buy .cms-pm-sticky-cart,
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 42px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
  }
  .cms-pm-sticky-btn-label { display: inline; }
  .cms-pm-sticky-buy .cms-pm-sticky-cart {
    background: #fff;
    color: var(--primary-blue);
    border: 1.5px solid var(--primary-blue);
  }
  .cms-pm-sticky-buy .cms-pm-sticky-cart:hover {
    background: var(--primary-blue-soft);
  }
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now {
    background: var(--primary-blue);
    color: #fff;
    border: none;
  }
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now:hover {
    background: var(--primary-blue-hover);
  }
  .cms-pm-sticky-buy .material-symbols-outlined {
    font-size: 20px;
  }

  /* Avoid the page being covered by the sticky bar (with price strip) */
  body.single-product { padding-bottom: 104px; }

  /* Bump up gallery padding on mobile, smaller title */
  .product-main .product-info .product-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  .product-main .product-info .price.product-page-price bdi {
    font-size: 24px;
  }
  .cms-pm-benefit-bar .cms-pm-benefit-text { font-size: 11px; }
  .cms-pm-info-row { font-size: 13px; padding: 10px 12px; }
  .cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    gap: 20px;
    -webkit-overflow-scrolling: touch;
  }
  .cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list li a {
    font-size: 14px;
  }
}

/* ============================================================
   FLASH SALE BOX — Pharmacity signature element
   Orange header with "Flash Sale" + live countdown, blue price body.
   ============================================================ */
.cms-pm-flashsale {
  margin-top: 14px !important;
  margin-bottom: 16px !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  background: var(--primary-blue-tint) !important;
  border: 1px solid var(--primary-blue-border) !important;
}

.cms-pm-flashsale-head {
  background: linear-gradient(90deg, #ff5b1f 0%, #ff7a3d 100%) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  min-height: 50px;
}
/* State: "Đang khuyến mãi" — softer pink/red gradient (no countdown) */
.cms-pm-flashsale.is-promo .cms-pm-flashsale-head {
  background: linear-gradient(90deg, #db2777 0%, #f43f5e 100%) !important;
}
/* State: "Plain" — no header (sale-less product) */
.cms-pm-flashsale.is-plain {
  background: var(--primary-blue-tint) !important;
  border: 1px solid var(--primary-blue-border) !important;
  border-radius: var(--radius-md) !important;
}
.cms-pm-flashsale.is-plain .price-wrapper {
  background: transparent !important;
  border: none !important;
  padding: 14px 16px !important;
  border-radius: var(--radius-md) !important;
}
/* For "promo" state — pill replacing the countdown */
.cms-pm-flashsale-tag-stable {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 9999px;
  backdrop-filter: blur(4px);
}
.cms-pm-flashsale-tag-stable .material-symbols-outlined {
  font-size: 16px !important;
  font-variation-settings: 'FILL' 1 !important;
  color: #ffd966 !important;
}

/* ============================================================
   ƯU ĐÃI COMBO HÔM NAY — combo-focused marketing block
   Replaces the generic Flash Sale on variable products.
   Drives conversion to bigger combo packages with:
     - daily ops cutoff countdown (23:59)
     - 4 trust commitments
     - "Combo bán chạy" recommendation (auto cheapest per-unit)
   ============================================================ */

.cms-pm-combo-offer {
  margin: 0 0 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--primary-blue-border);
  box-shadow: 0 4px 16px rgba(15, 79, 168, 0.08);
}

/* Header — orange→pink gradient with countdown */
.cms-pm-combo-offer-head {
  background: linear-gradient(90deg, #ff5b1f 0%, #f43f5e 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
}
.cms-pm-combo-offer-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-style: italic;
  line-height: 1.2;
}
.cms-pm-combo-offer-title .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: 'FILL' 1;
  color: #fff200;
  font-style: normal;
}

.cms-pm-combo-offer-timer-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.cms-pm-combo-offer-timer-label {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.92;
  text-transform: lowercase;
}
.cms-pm-combo-offer-timer {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Courier New', monospace;
}
.cms-pm-combo-offer-timer > span:not(.cms-pm-combo-offer-timer-sep) {
  background: #1a1a1a;
  color: #fff;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 13px;
  font-weight: 800;
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.cms-pm-combo-offer-timer .cms-pm-combo-offer-timer-sep {
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

/* Body — bullets + recommendation */
.cms-pm-combo-offer-body {
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, #fff8f3 0%, #fff 60%);
}
.cms-pm-combo-offer-pitch {
  font-size: 13px !important;
  color: var(--second-text);
  margin: 0 0 10px !important;
  line-height: 1.45;
}
.cms-pm-combo-offer-pitch strong {
  color: var(--accent-orange);
  font-weight: 700;
}

.cms-pm-combo-offer-benefits {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.cms-pm-combo-offer-benefits li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--primary-text);
}
.cms-pm-combo-offer-benefits li::before,
.cms-pm-combo-offer-benefits li::marker {
  display: none !important;
  content: none !important;
}
.cms-pm-combo-offer-benefits li .material-symbols-outlined {
  font-size: 18px;
  color: var(--accent-success);
  font-variation-settings: 'FILL' 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.cms-pm-combo-offer-benefits li strong {
  color: var(--primary-text);
  font-weight: 700;
}

/* Recommendation row — anchor to scroll to bundles, hover lifts */
.cms-pm-combo-offer-rec {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #fff5f5 0%, #fff 100%);
  border: 1.5px solid #fecaca;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  text-decoration: none !important;
  color: var(--primary-text) !important;
  font-size: 14px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cms-pm-combo-offer-rec:hover {
  border-color: var(--accent-danger);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.15);
  background: linear-gradient(90deg, #fef2f2 0%, #fff5f5 100%);
}
.cms-pm-combo-offer-rec-flame {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.cms-pm-combo-offer-rec-content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  line-height: 1.4;
}
.cms-pm-combo-offer-rec-label {
  color: var(--second-text);
  font-size: 13px;
  font-weight: 500;
}
.cms-pm-combo-offer-rec-name {
  color: var(--accent-danger) !important;
  font-weight: 800 !important;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.cms-pm-combo-offer-rec-sep {
  color: var(--muted-text);
}
.cms-pm-combo-offer-rec-price {
  color: var(--primary-blue) !important;
  font-weight: 800 !important;
  font-size: 15px;
}
.cms-pm-combo-offer-rec-arrow {
  font-size: 18px !important;
  color: var(--accent-danger);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.cms-pm-combo-offer-rec:hover .cms-pm-combo-offer-rec-arrow {
  transform: translateX(3px);
}

/* When the combo offer block is shown, simplify the price box below it */
.price-wrapper.cms-pm-price-plain {
  margin-top: 0 !important;
  padding: 14px 16px !important;
  background: var(--primary-blue-tint) !important;
  border: 1px solid var(--primary-blue-border) !important;
  border-radius: var(--radius-md) !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .cms-pm-combo-offer-head {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cms-pm-combo-offer-title { font-size: 14px; }
  .cms-pm-combo-offer-timer > span:not(.cms-pm-combo-offer-timer-sep) {
    font-size: 12px;
    padding: 4px 6px;
    min-width: 24px;
  }
  .cms-pm-combo-offer-benefits {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cms-pm-combo-offer-rec {
    flex-wrap: wrap;
    padding: 10px 12px;
  }
  .cms-pm-combo-offer-rec-content {
    font-size: 13px;
  }
  .cms-pm-combo-offer-rec-name { font-size: 13px; }
  .cms-pm-combo-offer-rec-price { font-size: 14px; }
}

.cms-pm-flashsale-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-style: italic !important;
}
.cms-pm-flashsale-title .material-symbols-outlined {
  font-size: 22px !important;
  font-variation-settings: 'FILL' 1 !important;
  color: #fff200 !important;
  font-style: normal !important;
}

.cms-pm-flashsale-timer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-family: 'Courier New', monospace;
}
.cms-pm-flashsale-timer > span:not(.cms-pm-timer-sep) {
  background: #1a1a1a !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  min-width: 32px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}
.cms-pm-flashsale-timer .cms-pm-timer-sep {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

/* Inner price-wrapper overrides */
.cms-pm-flashsale .price-wrapper {
  background: transparent !important;
  border: none !important;
  padding: 14px 16px 12px !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Price color = Pharmacity blue, BIG and bold */
.cms-pm-flashsale .price.product-page-price,
.cms-pm-flashsale .price.product-page-price * {
  color: var(--primary-blue) !important;
}
.cms-pm-flashsale .price.product-page-price bdi,
.cms-pm-flashsale .price.product-page-price ins bdi,
.cms-pm-flashsale .price.product-page-price > .woocommerce-Price-amount,
.cms-pm-flashsale .price.product-page-price ins .woocommerce-Price-amount {
  color: var(--primary-blue) !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}
.cms-pm-flashsale .price.product-page-price del bdi,
.cms-pm-flashsale .price.product-page-price del .woocommerce-Price-amount {
  color: var(--muted-text) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
}

.cms-pm-price-unit {
  color: var(--primary-blue) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-left: 2px;
}

/* Gift info — compact inline line under price (no chunky orange box) */
.cms-pm-price-gift {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--accent-orange);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 500;
}
.cms-pm-price-gift[hidden] { display: none !important; }
.cms-pm-price-gift .material-symbols-outlined {
  font-size: 15px !important;
  color: var(--accent-orange);
  font-variation-settings: 'FILL' 1;
  flex-shrink: 0;
}
.cms-pm-price-gift strong {
  color: var(--accent-orange);
  font-weight: 700;
}

/* Hide redundant native WC variation price (Flatsome sometimes shows it below
   the bundle cards / gifts section). Our big top price + bundle cards already
   show the selected price. */
.product-main .woocommerce-variation-price,
.product-main .single_variation .price,
.product-main .single_variation_wrap .single_variation > .price,
.product-main .variations_form .single_variation .woocommerce-variation-price {
  display: none !important;
}

/* Tighten the plain price wrapper overall — less vertical breathing room */
.cms-pm-flashsale.is-plain .price-wrapper {
  padding: 12px 16px !important;
  gap: 3px !important;
}
.cms-pm-flashsale.is-plain .price.product-page-price {
  margin: 0 !important;
  line-height: 1.15 !important;
}
.cms-pm-flashsale.is-plain .cms-pm-price-tax {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.cms-pm-flashsale .cms-save {
  align-self: flex-start !important;
  background-color: var(--accent-success-bg) !important;
  color: var(--accent-success) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-pill) !important;
  margin-left: 8px;
}

.cms-pm-price-tax {
  font-size: 13px !important;
  color: var(--muted-text) !important;
  line-height: 1.45 !important;
  margin: 4px 0 0 !important;
}

.cms-pm-flashsale .cms-free-ship-notice {
  margin-top: 4px !important;
}

.cms-pm-selling-fast {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: linear-gradient(90deg, #ff5b1f, #ff7a3d) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  align-self: flex-start;
  margin-top: 4px;
}
.cms-pm-selling-fast .material-symbols-outlined {
  font-size: 14px !important;
  font-variation-settings: 'FILL' 1 !important;
}

/* ============================================================
   AGGRESSIVE OVERRIDES — beat existing rules + cached CSS
   ============================================================ */

/* Badge row — make absolutely sure pills render correctly */
.product-main .product-info .cms-pm-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
}
.product-main .product-info .cms-pm-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 5px 10px !important;
  border-radius: var(--radius-sm) !important;
  line-height: 1.2 !important;
}
.product-main .product-info .cms-pm-badge--authentic {
  background: var(--accent-success) !important;
  color: #fff !important;
}
.product-main .product-info .cms-pm-badge--authentic::before {
  content: 'verified' !important;
  font-family: 'Material Symbols Outlined' !important;
  font-variation-settings: 'FILL' 1 !important;
  font-size: 15px !important;
}
.product-main .product-info .cms-pm-badge--brand {
  background: var(--surface-alt) !important;
  color: var(--second-text) !important;
  border: 1px solid var(--border-default) !important;
}

/* Gallery canvas: force light-blue Pharmacity bg */
.product .product-gallery .product-images .flickity-slider .woocommerce-product-gallery__image img {
  background-color: var(--primary-blue-gallery) !important;
}
.product .product-gallery .product-thumbnails .flickity-slider img {
  background-color: var(--primary-blue-gallery) !important;
}

/* Title: bigger, navy */
.product-main .product-info .product-title {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--primary-text) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.3px !important;
}

/* CTA buttons — force Pharmacity convention */
.product-main .product-info form.cart .single_add_to_cart_button {
  background-color: #fff !important;
  color: var(--primary-blue) !important;
  border: 1.5px solid var(--primary-blue) !important;
}
.product-main .product-info form.cart .single_add_to_cart_button::before,
.product-main .product-info form.cart .single_add_to_cart_button .material-symbols-outlined {
  color: var(--primary-blue) !important;
}

/* Mobile flash sale stack */
@media (max-width: 768px) {
  .cms-pm-flashsale-head { padding: 8px 12px !important; min-height: 44px; }
  .cms-pm-flashsale-title { font-size: 15px !important; }
  .cms-pm-flashsale-timer > span:not(.cms-pm-timer-sep) {
    padding: 4px 6px !important;
    font-size: 13px !important;
    min-width: 26px !important;
  }
  .cms-pm-flashsale .price.product-page-price bdi,
  .cms-pm-flashsale .price.product-page-price ins bdi,
  .cms-pm-flashsale .price.product-page-price > .woocommerce-Price-amount {
    font-size: 24px !important;
  }
  .cms-pm-price-unit { font-size: 16px !important; }
}

/* ============================================================
   MOBILE COMPRESSION PASS — Tighten spacing, fonts, paddings
   to maximize viewport usage and reduce scroll fatigue.
   Goal: ~30% less vertical scroll → faster reach to bundles/CTA.
   ============================================================ */
@media (max-width: 768px) {
  /* === SECTION SPACING — compress vertical rhythm ~50% === */
  .cms-sp-section { margin: 16px 0 !important; scroll-margin-top: 80px; }
  .cms-sp-section + .cms-sp-section { padding-top: 14px !important; }
  .cms-sp-section h2 {
    font-size: 17px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    padding-left: 9px !important;
  }
  .cms-sp-section h2::before { width: 3px !important; top: 3px !important; bottom: 3px !important; }
  .cms-sp-section h3 { font-size: 15px !important; margin: 12px 0 6px !important; }
  .cms-sp-section p { font-size: 14px !important; line-height: 1.55 !important; margin: 0 0 8px !important; }

  /* === PRODUCT TITLE — tighter, save vertical === */
  .product-main .product-info .product-title {
    font-size: 19px !important;
    line-height: 1.28 !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.2px !important;
  }
  .product-main .product-info .product-short-description {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    max-height: 100px !important;
  }

  /* === HOOK paragraph (excerpt top hero) === */
  .cms-sp-hook { font-size: 13.5px !important; line-height: 1.55 !important; padding: 12px 14px !important; margin: 8px 0 !important; }
  .cms-sp-quick-benefits { padding: 10px 12px !important; font-size: 13px !important; line-height: 1.65 !important; margin: 8px 0 !important; }

  /* === COMMITMENT block (5-item trust list) === */
  .cms-sp-commitment { padding: 12px 14px !important; margin: 12px 0 !important; }
  .cms-sp-commitment-title { font-size: 14px !important; margin-bottom: 8px !important; }
  .cms-sp-commitment-list { gap: 6px !important; }
  .cms-sp-commitment-list li { font-size: 13px !important; line-height: 1.4 !important; gap: 6px !important; }
  .cms-sp-commitment-list li .material-symbols-outlined { font-size: 16px !important; }

  /* === BAB STORY — already stacks 1col on mobile, slim it === */
  .cms-sp-baB-before, .cms-sp-baB-after { padding: 12px 14px !important; font-size: 13.5px !important; line-height: 1.55 !important; }
  .cms-sp-baB-before h4, .cms-sp-baB-after h4 { font-size: 14px !important; margin: 0 0 6px !important; }
  .cms-sp-baB-arrow { font-size: 22px !important; }
  .cms-sp-baB-story { gap: 6px !important; margin: 10px 0 !important; }

  /* === PAIN list === */
  .cms-sp-pain { margin: 8px 0 !important; padding-left: 0 !important; }
  .cms-sp-pain li { font-size: 13.5px !important; line-height: 1.5 !important; margin-bottom: 5px !important; padding-left: 0 !important; }

  /* === TIP box === */
  .cms-sp-tip { padding: 10px 12px !important; font-size: 13px !important; line-height: 1.55 !important; margin: 8px 0 !important; }
  .cms-sp-tip ul { margin: 4px 0 0 14px !important; }
  .cms-sp-tip li { font-size: 13px !important; margin-bottom: 3px !important; }

  /* === TIMELINE — slim card padding === */
  .cms-sp-timeline { gap: 6px !important; margin: 10px 0 !important; }
  .cms-sp-timeline-item { padding: 10px 12px !important; }
  .cms-sp-timeline-time { font-size: 12.5px !important; }
  .cms-sp-timeline-text { font-size: 13.5px !important; line-height: 1.5 !important; }

  /* === REVIEWS === */
  .cms-sp-review { padding: 12px 14px !important; margin: 6px 0 !important; }
  .cms-sp-review p { font-size: 13.5px !important; line-height: 1.5 !important; margin: 0 0 6px !important; }
  .cms-sp-review-stars { font-size: 14px !important; margin-bottom: 4px !important; }
  .cms-sp-review-author { font-size: 11.5px !important; }

  /* === COMPARE TABLE (FAB) === */
  table.cms-sp-fab-table { font-size: 12px !important; }
  table.cms-sp-fab-table th, table.cms-sp-fab-table td { padding: 6px 7px !important; font-size: 12px !important; line-height: 1.35 !important; }

  /* === PRICE TABLE === */
  .cms-sp-price-table th, .cms-sp-price-table td { padding: 6px 7px !important; font-size: 11.5px !important; line-height: 1.35 !important; }
  .cms-sp-price-table td strong { font-size: 12.5px !important; }
  .cms-sp-tag-light, .cms-sp-tag-hot, .cms-sp-tag-best { font-size: 9.5px !important; padding: 1px 5px !important; }

  /* === PHOTO GRID — 2 cols already, tighten === */
  .cms-sp-photo-grid { gap: 6px !important; margin: 8px 0 !important; }
  .cms-sp-photo figcaption { font-size: 11px !important; margin-top: 3px !important; line-height: 1.3 !important; }

  /* === FIGURE inside sections === */
  .cms-sp-figure { margin: 12px 0 !important; }
  /* Mobile: ảnh figure kéo FULL bề ngang container cho rõ (trước bị cap 220px).
     Ảnh landing (≥550px) sẽ phủ kín container; ảnh nhỏ tự nhiên giữ nguyên,
     không bị upscale vỡ nét. */
  .cms-sp-figure--center img,
  .cms-sp-figure img { max-width: 100% !important; height: auto !important; }
  .cms-sp-figure figcaption { font-size: 11.5px !important; margin-top: 4px !important; }

  /* === FAQ DETAILS — custom accordion === */
  .cms-pm-faq-item { margin-bottom: 6px !important; }
  .cms-pm-faq-item summary, .cms-pm-faq-item .cms-pm-faq-item-summary {
    padding: 11px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }
  .cms-pm-faq-item-body { padding: 0 12px 12px !important; font-size: 13px !important; line-height: 1.55 !important; }
  details summary { padding: 10px 12px !important; font-size: 13.5px !important; }
  details > p { font-size: 13px !important; padding: 0 12px 10px !important; }

  /* === INLINE CTA links — smaller === */
  .cms-sp-inline-cta { margin: 8px 0 !important; }
  .cms-sp-inline-cta a { font-size: 13px !important; padding: 8px 14px !important; }

  /* === TRUST CALLOUT === */
  .cms-sp-trust-callout { padding: 10px 12px !important; font-size: 13px !important; margin: 8px 0 !important; line-height: 1.45 !important; }

  /* === CLOSING block === */
  .cms-sp-closing { padding: 14px 16px !important; margin: 16px 0 !important; }
  .cms-sp-closing h3 { font-size: 16px !important; margin: 0 0 8px !important; }
  .cms-sp-closing p { font-size: 13.5px !important; margin: 0 0 6px !important; }
  .cms-sp-closing ul { margin: 6px 0 !important; padding-left: 4px !important; }
  .cms-sp-closing ul li { font-size: 13px !important; line-height: 1.5 !important; }
  .cms-sp-cta-final .button { padding: 12px 22px !important; font-size: 15px !important; }

  /* === BUNDLE CARDS — tighter === */
  .cms-bundle-card { padding: 8px 9px !important; min-height: 86px !important; gap: 1px !important; }
  .cms-bundle-card.cms-bundle-selected { padding: 7.5px 8.5px !important; }
  .cms-bundle-card-title { font-size: 12px !important; line-height: 1.25 !important; }
  .cms-bundle-card-price { font-size: 14px !important; }
  .cms-bundle-card-foot, .cms-bundle-card-sub, .cms-bundle-card-saving { font-size: 10.5px !important; line-height: 1.3 !important; }
  .cms-sp-bundles-list { gap: 6px !important; }

  /* === COMBO OFFER block === */
  .cms-pm-combo-offer { margin: 0 0 12px !important; }
  .cms-pm-combo-offer-head { padding: 8px 12px !important; }
  .cms-pm-combo-offer-body { padding: 12px !important; }

  /* === Variation pickers (Gói mua / Quà tặng) === */
  .variations { margin-bottom: 8px !important; }
  .variations label, .variations th { font-size: 13px !important; padding: 4px 0 !important; }
  .variations .swatch { font-size: 12px !important; padding: 6px 10px !important; min-height: 36px !important; }

  /* === Mobile sticky buy bar — richer (price + savings hint) === */
  body.single-product { padding-bottom: 104px !important; }
  .cms-pm-sticky-buy { box-shadow: 0 -2px 14px rgba(11, 31, 68, 0.14) !important; }
  .cms-pm-sticky-buy .material-symbols-outlined { font-size: 17px !important; }

  /* === Reduce p margins globally inside sections === */
  .cms-sp-section ul { margin: 6px 0 !important; padding-left: 4px !important; }
  .cms-sp-section ul li { margin-bottom: 4px !important; }

  /* === Tighten section borders (lighter on mobile) === */
  .cms-sp-section + .cms-sp-section { border-top-color: #f1f5f9 !important; }

  /* === Hide redundant trailing inline CTAs to declutter === */
  .cms-sp-section .cms-sp-inline-cta:last-child { margin-top: 6px !important; }

  /* === Tabs (custom tab nav) === */
  .cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list { gap: 14px !important; padding: 0 12px !important; }
  .cms-single-product-custom-tabs-wrapper ul.cms-single-product-custom-tabs-list li a { font-size: 13px !important; padding: 10px 0 !important; }

  /* === Page wrapper padding — consolidate from 3 layers (~72px wasted) to 1 layer === */
  body.single-product .shop-container { padding-left: 8px !important; padding-right: 8px !important; }
  .product-main { padding-left: 0 !important; padding-right: 0 !important; }
  .product-main > .row.content-row,
  body.single-product .row.content-row { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .product-main .product-info.summary { padding-left: 8px !important; padding-right: 8px !important; }
  .product-main .product-gallery { padding-left: 8px !important; padding-right: 8px !important; }

  /* === Gallery height cap on mobile (prevent tall hero eating viewport) === */
  .product .product-gallery .product-images .flickity-slider .woocommerce-product-gallery__image img {
    max-height: 340px !important;
    padding: 12px !important;
  }

  /* === Flash sale + Combo offer compress === */
  .cms-pm-flashsale { margin-top: 8px !important; margin-bottom: 12px !important; }
  .cms-pm-combo-offer-title { font-size: 14px !important; }

  /* === Tighten benefit bar text === */
  .cms-pm-benefit-bar { padding: 8px 10px !important; gap: 6px !important; }
  .cms-pm-benefit-bar .cms-pm-benefit-item { gap: 6px !important; }

  /* === Tighten "info-row" (ship/return) === */
  .cms-pm-info-row { padding: 8px 10px !important; font-size: 12.5px !important; }
}

/* === ULTRA-SMALL (iPhone SE / 360w) — extra tight === */
@media (max-width: 380px) {
  .cms-sp-section h2 { font-size: 16px !important; }
  .product-main .product-info .product-title { font-size: 18px !important; }
  .cms-sp-pain li, .cms-sp-section p { font-size: 13.5px !important; }
  .cms-bundle-card { min-height: 82px !important; }
  .cms-bundle-card-title { font-size: 11.5px !important; }
  .cms-bundle-card-price { font-size: 13px !important; }
}

/* ============================================================
   MOBILE — Phase 2: Aggressive compression of WC native reviews
   Native review block was eating 23000px+ on mobile. Compress.
   ============================================================ */
@media (max-width: 768px) {
  /* === product-main / product-info wasted bottom padding === */
  .product-main { padding: 8px 0 12px !important; }
  .product-main .product-info { padding: 8px 12px 16px !important; }

  /* === Native WC review items — aggressive compression === */
  /* Lề ngang 12px cho cả widget đánh giá (kvr-reviews) — cân với nội dung SP.
     Trang đã chuyển sang plugin kvr-reviews; các child .devvn_*/.star_box bên dưới
     không còn render nên không bị thụt đôi. */
  .cms-reviews { padding: 0 12px !important; margin: 16px 0 !important; }
  .cms-reviews #reviews .woocommerce-Reviews-title { font-size: 17px !important; margin-bottom: 10px !important; padding: 0 12px !important; }
  .cms-reviews #comments .star_box { padding: 12px 14px !important; margin: 0 12px 10px !important; }
  .cms-reviews .star-average .woocommerce-product-rating .star_average { font-size: 24px !important; }
  .cms-reviews .star-average .woocommerce-product-rating .devvn-star { font-size: 22px !important; }
  .cms-reviews #reviews .devvn_reviews_filter {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 0 12px !important;
    margin-bottom: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .cms-reviews #reviews .devvn_reviews_filter::-webkit-scrollbar { display: none !important; }
  .cms-reviews #reviews .devvn_filter_btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 11px !important;
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  /* Hide WP native comment pagination (we use "Xem thêm" expand instead) */
  .cms-reviews .woocommerce-pagination,
  .cms-reviews .comments-area .navigation,
  .cms-reviews .comment-pagination,
  .cms-reviews ol.commentlist + .navigation,
  .cms-reviews #comments .page-numbers-wrapper,
  .cms-reviews #comments > .pagination,
  .cms-reviews #comments > .nav-links {
    display: none !important;
  }
  .cms-reviews #comments ol.commentlist li.review { padding: 10px 14px !important; }
  .cms-reviews .comment_container { gap: 4px !important; }
  .cms-reviews strong.woocommerce-review__author { font-size: 13.5px !important; line-height: 16px !important; }
  .cms-reviews .woocommerce-review__published-date { font-size: 11px !important; }
  .cms-reviews .woocommerce-review__verified.verified { font-size: 10px !important; padding: 1px 6px !important; }
  .cms-reviews .devvn_review_mid .description { font-size: 13.5px !important; line-height: 20px !important; }
  .cms-reviews .comment-text { gap: 5px !important; }
  .cms-reviews #comments .star_box.devvn-star-meta { padding: 8px 12px !important; }

  /* === Truncate reviews after 5 — show expand button === */
  .cms-reviews #comments ol.commentlist li.review:nth-child(n+6) {
    display: none;
  }
  .cms-reviews.cms-reviews-expanded #comments ol.commentlist li.review:nth-child(n+6) {
    display: list-item;
  }
  .cms-reviews-show-more-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 10px 12px 6px;
    padding: 12px 16px;
    background: #fff;
    color: var(--primary-blue);
    border: 1.5px solid var(--primary-blue);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
  }
  .cms-reviews-show-more-btn:hover { background: var(--primary-blue-soft); }
  .cms-reviews.cms-reviews-expanded .cms-reviews-show-more-btn { display: none; }

  /* === Truncate long review paragraphs (>4 lines) === */
  .cms-reviews .devvn_review_mid .description {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 100px;
    position: relative;
    transition: max-height 0.3s ease;
  }
  .cms-reviews li.review.cms-rv-expanded .devvn_review_mid .description {
    -webkit-line-clamp: unset;
    max-height: 1000px;
    overflow: visible;
  }
  .cms-rv-read-more {
    display: inline-block;
    margin-top: 4px;
    color: var(--primary-blue);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
  }
  .cms-rv-read-more:hover { text-decoration: underline; }
  .cms-reviews li.review.cms-rv-expanded .cms-rv-read-more::before { content: 'Thu gọn'; }
  .cms-reviews li.review:not(.cms-rv-expanded) .cms-rv-read-more::before { content: 'Xem thêm'; }
}

/* ============================================================
   MOBILE ANCHOR JUMP NAV — sticky pill bar above description
   Lets users skip directly to FAQ / Bảng giá / Reviews etc.
   ============================================================ */
@media (max-width: 768px) {
  /* Reserve scroll offset under sticky anchor nav so hash jumps don't hide */
  html { scroll-padding-top: 56px; }
  .cms-sp-section { scroll-margin-top: 56px !important; }
}
.cms-pm-anchor-nav { display: none; }
@media (max-width: 768px) {
  .cms-pm-anchor-nav {
    display: block;
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
    margin: 0 -12px 12px;
    padding: 6px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: 0 2px 6px rgba(11, 31, 68, 0.04);
  }
  .cms-pm-anchor-nav::-webkit-scrollbar { display: none; }
  .cms-pm-anchor-nav-inner {
    display: inline-flex;
    gap: 6px;
    white-space: nowrap;
    padding-right: 12px;
  }
  .cms-pm-anchor-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-alt);
    color: var(--primary-text);
    border: 1px solid var(--border-default);
    border-radius: 9999px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: all 0.15s ease;
  }
  .cms-pm-anchor-pill:hover, .cms-pm-anchor-pill:focus {
    background: var(--primary-blue-soft);
    color: var(--primary-blue);
    border-color: var(--primary-blue);
  }
  .cms-pm-anchor-pill--cta {
    background: linear-gradient(180deg, #ff7a3d 0%, #f97316 100%);
    color: #fff !important;
    border-color: transparent;
    font-weight: 700;
  }
  .cms-pm-anchor-pill--cta:hover { background: linear-gradient(180deg, #f97316 0%, #ea6f1f 100%) !important; color: #fff !important; }
  .cms-pm-anchor-pill .material-symbols-outlined { font-size: 14px; }
  .cms-pm-anchor-pill.is-active {
    background: var(--primary-blue);
    color: #fff !important;
    border-color: var(--primary-blue);
  }
}

/* ============================================================
   Sticky sidebar — "Sản phẩm mua cùng" follow scroll on desktop
   ============================================================ */
@media (min-width: 992px) {
  .product-footer .container > .row > .col.large-4,
  .product-footer .container > .row > .col.cms-product-tab-sidebar {
    align-self: flex-start;
    position: sticky;
    top: 90px;
    height: -moz-fit-content;
    height: fit-content;
    z-index: 5;
  }
  .product-footer .container > .row {
    align-items: flex-start;
  }
}


/* ════════════════════════════════════════════════════════════════════
   AUTHENTICITY & TRUST COMPONENTS — content audit 2026-06
   Reusable across ALL single products (Zalo chat / check thật-giả /
   tổng kho + đơn hàng / image placeholder).
   ════════════════════════════════════════════════════════════════════ */

/* ---- Labeled image placeholder: user thay bằng ảnh thật ---- */
.cms-sp-imgph{
  border:2px dashed #f59e0b;
  background:repeating-linear-gradient(45deg,#fff7ed,#fff7ed 11px,#ffedd5 11px,#ffedd5 22px);
  border-radius:14px;min-height:150px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  color:#9a3412;font-weight:700;padding:20px;gap:6px;line-height:1.4;
}
.cms-sp-imgph .ico{font-size:32px;line-height:1;}
.cms-sp-imgph small{font-weight:500;color:#b45309;font-size:12px;display:block;}
.cms-sp-imgph-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;}
@media(max-width:600px){.cms-sp-imgph-row{grid-template-columns:1fr;}}

/* ════════ CHECK THẬT – GIẢ ════════ */
.cms-sp-check{display:flex;flex-direction:column;gap:14px;margin:16px 0;}
.cms-sp-check-step{
  display:flex;gap:14px;align-items:flex-start;
  background:#f0fdf4;border:1px solid #bbf7d0;border-left:4px solid #16a34a;
  border-radius:12px;padding:14px 16px;
}
.cms-sp-check-num{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  background:#16a34a;color:#fff;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;
}
.cms-sp-check-body h4{margin:0 0 4px;font-size:16px;color:#15803d;font-weight:800;}
.cms-sp-check-body p{margin:0;font-size:14px;color:#374151;line-height:1.55;}
.cms-sp-vs{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0;
}
.cms-sp-vs-col{border-radius:12px;padding:14px 16px;}
.cms-sp-vs-real{background:#f0fdf4;border:2px solid #16a34a;}
.cms-sp-vs-fake{background:#fef2f2;border:2px solid #ef4444;}
.cms-sp-vs-col h4{margin:0 0 8px;font-size:15px;font-weight:800;}
.cms-sp-vs-real h4{color:#15803d;}
.cms-sp-vs-fake h4{color:#b91c1c;}
.cms-sp-vs-col ul{margin:0;padding-left:18px;}
.cms-sp-vs-col li{font-size:13.5px;margin:5px 0;color:#374151;line-height:1.5;}
@media(max-width:600px){.cms-sp-vs{grid-template-columns:1fr;}}

/* ════════ TỔNG KHO + ĐƠN HÀNG NHIỀU ════════ */
.cms-sp-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0;
}
.cms-sp-stat{
  background:linear-gradient(160deg,#fff7ed,#ffedd5);
  border:1px solid #fed7aa;border-radius:14px;padding:16px 10px;text-align:center;
}
.cms-sp-stat-num{font-size:26px;font-weight:900;color:#ea580c;line-height:1;}
.cms-sp-stat-label{font-size:12.5px;color:#7c2d12;margin-top:6px;font-weight:600;line-height:1.35;}
@media(max-width:600px){.cms-sp-stats{grid-template-columns:1fr 1fr;}.cms-sp-stat-num{font-size:22px;}}

.cms-sp-orders{
  background:#fff;border:1px solid #e5e7eb;border-radius:14px;
  padding:8px 0;margin:14px 0;overflow:hidden;
}
.cms-sp-orders-head{
  display:flex;align-items:center;gap:8px;font-weight:800;color:#15803d;
  font-size:14px;padding:6px 16px 10px;border-bottom:1px solid #f0f0f0;
}
.cms-sp-orders-head .dot{width:9px;height:9px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:cmsLive 1.6s infinite;}
@keyframes cmsLive{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6);}70%{box-shadow:0 0 0 7px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}
.cms-sp-order-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 16px;border-bottom:1px solid #f6f6f6;font-size:13.5px;
}
.cms-sp-order-row:last-child{border-bottom:0;}
.cms-sp-order-row .who{color:#111827;}
.cms-sp-order-row .who b{color:#ea580c;}
.cms-sp-order-row .ago{color:#9ca3af;font-size:12px;white-space:nowrap;}
.cms-sp-order-row .ok{color:#16a34a;font-weight:700;font-size:12px;}

/* ════════ ZALO CHAT MOCKUP ════════ */
.cms-sp-zalo-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;}
@media(max-width:760px){.cms-sp-zalo-wrap{grid-template-columns:1fr;}}
.cms-sp-zalo{
  background:#e7ebf0;border-radius:16px;overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.12);border:1px solid #d4dae2;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.cms-sp-zalo-bar{
  background:linear-gradient(90deg,#0068ff,#0091ff);color:#fff;
  display:flex;align-items:center;gap:10px;padding:11px 14px;
}
.cms-sp-zalo-back{font-size:20px;line-height:1;opacity:.9;}
.cms-sp-zalo-ava{
  width:38px;height:38px;border-radius:50%;background:#fff;color:#0068ff;
  font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;flex:0 0 38px;
}
.cms-sp-zalo-meta{flex:1;min-width:0;}
.cms-sp-zalo-name{font-weight:700;font-size:15px;line-height:1.2;}
.cms-sp-zalo-on{font-size:11.5px;opacity:.9;display:flex;align-items:center;gap:5px;}
.cms-sp-zalo-on::before{content:"";width:7px;height:7px;border-radius:50%;background:#7CFFB2;display:inline-block;}
.cms-sp-zalo-icons{font-size:17px;letter-spacing:8px;opacity:.95;}
.cms-sp-zalo-body{
  padding:14px 12px;display:flex;flex-direction:column;gap:8px;
  background:#e7ebf0;max-height:none;
}
.cms-sp-zalo-day{align-self:center;background:rgba(0,0,0,.07);color:#5b6470;
  font-size:11px;padding:3px 12px;border-radius:20px;margin:2px 0;}
.cms-sp-msg{max-width:80%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;position:relative;word-wrap:break-word;}
.cms-sp-msg .t{display:block;font-size:10.5px;margin-top:3px;opacity:.6;}
/* incoming = khách nhắn (trái, trắng) */
.cms-sp-msg.in{align-self:flex-start;background:#fff;color:#1f2937;border-bottom-left-radius:5px;}
/* outgoing = shop trả lời (phải, xanh Zalo) */
.cms-sp-msg.out{align-self:flex-end;background:#cfe6ff;color:#0b3a66;border-bottom-right-radius:5px;}
.cms-sp-msg.out .t{text-align:right;color:#3b6da3;}
.cms-sp-msg-img{padding:4px;max-width:62%;align-self:flex-start;background:#fff;border-radius:14px;}
.cms-sp-msg-img.out{align-self:flex-end;background:#cfe6ff;}
.cms-sp-msg-img img{width:100%;border-radius:11px;display:block;}
.cms-sp-msg-imgph{
  width:160px;height:120px;border-radius:11px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:4px;
  background:#fff7ed;border:2px dashed #f59e0b;color:#b45309;font-size:11px;font-weight:600;padding:8px;
}
.cms-sp-msg-imgph .ico{font-size:22px;}
.cms-sp-zalo-input{
  display:flex;align-items:center;gap:10px;padding:9px 14px;background:#fff;border-top:1px solid #e3e6ea;
  color:#9aa3ad;font-size:13.5px;
}
.cms-sp-zalo-input .sticker{margin-left:auto;font-size:17px;letter-spacing:6px;color:#b8c0c9;}
.cms-sp-seen{align-self:flex-end;font-size:11px;color:#7a8694;margin-top:-3px;}

/* ════════ KHÁCH MUA LẠI NHIỀU LẦN (repeat-buyer proof) ════════ */
.cms-sp-repeat{background:#fff;border:1px solid #fed7aa;border-radius:14px;padding:6px 0;margin:14px 0;overflow:hidden;box-shadow:0 2px 10px rgba(234,88,12,.06);}
.cms-sp-repeat-head{display:flex;align-items:center;gap:8px;font-weight:800;color:#ea580c;font-size:14.5px;padding:11px 16px;border-bottom:1px solid #fff0e6;background:linear-gradient(90deg,#fff7ed,#fff);}
.cms-sp-repeat-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid #f6f6f6;}
.cms-sp-repeat-row:last-child{border-bottom:0;}
.cms-sp-repeat-row .who{font-size:14px;color:#111827;line-height:1.35;}
.cms-sp-repeat-row .who b{color:#111827;}
.cms-sp-repeat-row .who small{display:block;color:#9ca3af;font-size:12px;margin-top:1px;}
.cms-sp-repeat-dots{display:inline-flex;gap:3px;margin-top:5px;}
.cms-sp-repeat-dots i{width:8px;height:8px;border-radius:50%;background:#16a34a;display:inline-block;}
.cms-sp-repeat-badge{flex:0 0 auto;background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;font-weight:700;font-size:12px;padding:7px 12px;border-radius:22px;white-space:nowrap;display:flex;align-items:center;gap:5px;box-shadow:0 2px 6px rgba(234,88,12,.25);}
.cms-sp-repeat-badge b{font-size:16px;font-weight:900;line-height:1;}
.cms-sp-repeat-foot{padding:11px 16px;font-size:13px;color:#7c2d12;background:#fff7ed;text-align:center;font-weight:600;}
.cms-sp-repeat-foot b{color:#ea580c;}
@media(max-width:600px){.cms-sp-repeat-row .who{font-size:13px;}.cms-sp-repeat-badge{font-size:11px;padding:6px 10px;}.cms-sp-repeat-badge b{font-size:14px;}}

/* ════════════════════════════════════════════════════════════════════
   MOBILE UI FIXES 2026-06-07 — bảng giá tràn / nút CTA to / sticky buy gọn
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  /* (1) BẢNG GIÁ: không tràn viền — fixed layout + cho chữ xuống dòng */
  .cms-sp-price-table{ table-layout:fixed !important; width:100% !important; }
  .cms-sp-price-table th, .cms-sp-price-table td{
    padding:7px 5px !important; font-size:11px !important;
    word-break:break-word; overflow-wrap:anywhere; vertical-align:middle;
  }
  .cms-sp-price-table th:first-child, .cms-sp-price-table td:first-child{ width:26%; }
  .cms-sp-price-table td strong{ font-size:12px !important; }
  .cms-sp-save{
    white-space:normal !important; display:inline-block;
    font-size:10px !important; padding:2px 5px !important; line-height:1.25 !important;
  }

  /* (2) NÚT CTA "Chọn combo": gọn, không phình to */
  .cms-sp-cta-final .button{
    padding:11px 18px !important; font-size:13.5px !important;
    line-height:1.3 !important; max-width:94% !important;
  }
}

@media (max-width: 768px){
  /* (3) STICKY BUY BAR: gộp 1 hàng gọn gàng (giá trái — nút phải) */
  .cms-pm-sticky-buy{
    flex-direction:row !important; align-items:center !important;
    gap:10px !important; padding:7px 12px 8px !important;
  }
  .cms-pm-sticky-info{
    flex:1 1 auto !important; flex-direction:column !important;
    align-items:flex-start !important; gap:0 !important; min-width:0 !important; padding:0 2px !important;
  }
  .cms-pm-sticky-info-price{ font-size:17px !important; line-height:1.1 !important; }
  .cms-pm-sticky-info-hint{ font-size:10.5px !important; line-height:1.2 !important; }
  .cms-pm-sticky-actions{
    width:auto !important; display:flex !important; gap:8px !important; flex-shrink:0 !important;
  }
  .cms-pm-sticky-buy .cms-pm-sticky-cart,
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now{
    height:44px !important; font-size:13.5px !important; border-radius:10px !important;
  }
  .cms-pm-sticky-buy .cms-pm-sticky-cart{ padding:0 13px !important; }      /* Giỏ gọn */
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now{ padding:0 22px !important; }   /* Mua ngay nổi bật */
  /* chừa chỗ cho bar 1 hàng (thấp hơn trước) */
  body.single-product{ padding-bottom:66px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE — CHUẨN HOÁ NHỊP DỌC (2026-06-07): đều 12px, gọn, không lệch
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .cms-sp-section{ margin:12px 0 !important; }
  .cms-sp-section + .cms-sp-section{ padding-top:14px !important; }
  .cms-sp-section h2{ margin:0 0 10px !important; }
  .cms-sp-section h3{ margin:14px 0 6px !important; }
  .cms-sp-section p{ margin:0 0 9px !important; }
  /* mọi khối con cách đều nhau 12px (trước đây 8/14/16 lộn xộn) */
  .cms-sp-tip, .cms-sp-trust-callout, .cms-sp-figure,
  .cms-sp-photo-grid, .cms-sp-imgph-row, .cms-sp-imgph,
  .cms-sp-price-table, table.cms-sp-fab-table, .cms-sp-stats,
  .cms-sp-zalo-wrap, .cms-sp-check, .cms-sp-vs, .cms-sp-timeline,
  .cms-sp-review, .cms-sp-orders, .cms-sp-repeat, .cms-sp-baB-story,
  ol.cms-sp-howto, ul.cms-sp-pain{
    margin:12px 0 !important;
  }
  .cms-sp-inline-cta{ margin:10px 0 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE — LỀ NGANG + CANH THẲNG TIÊU ĐỀ (2026-06-07)
   (B) bớt lề trái-phải panel; (C) tiêu đề & nội dung cùng lề, vạch xanh ở gutter
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* (A) thẻ trắng bọc nội dung (.product-footer > .container) mặc định padding 24px
     → cộng với 12px của .cms-sp-section thành ~36px mỗi bên, cột chữ bị hẹp.
     Giảm padding ngang thẻ về 4px; section vẫn giữ 12px → tổng còn ~16px. */
  .product-footer > .container{ padding-left:4px !important; padding-right:4px !important; }
  .product-footer .woocommerce-tabs.container,
  .product-footer .tabbed-content.container{ padding-left:0 !important; padding-right:0 !important; }
  /* keyfacts/order/deal là box độc lập (không trong .cms-sp-section) chỉ có margin dọc
     → tự inset 12px cho khớp lề 16px với các section. */
  .product-footer .cms-sp-keyfacts, .entry-content .cms-sp-keyfacts,
  .product-footer .cms-sp-order, .entry-content .cms-sp-order,
  .product-footer .cms-sp-deal, .entry-content .cms-sp-deal{
    margin-left:12px !important; margin-right:12px !important;
  }

  /* (B) panel mô tả sát mép hơn — nhường lề cho section quản lý đồng đều */
  #tab-description.entry-content,
  .woocommerce-Tabs-panel--description{ padding-left:0 !important; padding-right:0 !important; }

  /* (C) section tạo lề 12px ĐỀU 2 bên; tiêu đề bỏ thụt, vạch xanh nằm trong gutter */
  .cms-sp-section{ padding-left:12px !important; padding-right:12px !important; }
  .cms-sp-section h2{ padding-left:0 !important; }
  .cms-sp-section h2::before{ left:-9px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE — FIX STICKY FOOTER + HEADER (2026-06-07)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* ---- STICKY BUY BAR: 1 hàng gọn, cao cố định, hết thừa trắng ---- */
  .cms-pm-sticky-buy{
    display:flex !important; flex-direction:row !important; align-items:center !important;
    gap:12px !important; height:60px !important; padding:0 12px !important;
    box-sizing:border-box !important;
  }
  .cms-pm-sticky-info{
    flex:1 1 auto !important; min-width:0 !important;
    display:flex !important; flex-direction:column !important;
    justify-content:center !important; align-items:flex-start !important;
    gap:0 !important; padding:0 !important;
  }
  .cms-pm-sticky-info-hint:empty{ display:none !important; }
  .cms-pm-sticky-info-price{ font-size:18px !important; line-height:1.1 !important; }
  .cms-pm-sticky-actions{
    flex:0 0 auto !important; display:flex !important; gap:8px !important; width:auto !important;
  }
  .cms-pm-sticky-buy .cms-pm-sticky-cart,
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now{ height:42px !important; }
  body.single-product{ padding-bottom:60px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   FIX ANDROID THANH MUA STICKY (2026-06-07)
   Lỗi (hình 1, chỉ Android): font icon Material Symbols (variable 10MB) tải
   chậm → trình duyệt hiện CHỮ ligature thô "add_shopping_cart"/"shopping_bag"
   thay icon. Chuỗi chữ này nở rộng → tràn ngang ở màn ~360px → bóp méo giá &
   cắt nút "Mua ngay". iPhone/PC render kịp nên đúng (hình 2).
   Rào chắn: kẹp khung icon = 1 ô vuông cố định + overflow:hidden → dù font
   CHƯA tải, chữ fallback bị cắt gọn, KHÔNG thể phá layout; khi font tải xong
   icon hiện ra đúng giữa ô. (Kết hợp font-display:block ở fonts.css.)
   ════════════════════════════════════════════════════════════════════ */
.cms-pm-sticky-buy .cms-pm-sticky-cart .material-symbols-outlined,
.cms-pm-sticky-buy .cms-pm-sticky-buy-now .material-symbols-outlined{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:1.35em !important;
  max-width:1.35em !important;
  overflow:hidden !important;
}

/* ════════════════════════════════════════════════════════════════════
   FIX ANDROID THANH MUA STICKY #2 (2026-06-07) — GIÁ BỊ CẮT / SÁT MÉP
   Lỗi: màn Android hẹp (~360px). 2 nút Giỏ+Mua ngay dùng padding cố định rộng
   (13/22px) chiếm gần hết bề ngang → vùng giá co lại → "400.000đ" bị cắt/sát
   mép trái. iPhone (390–430px) rộng hơn nên vừa.
   Fix: bar co giãn theo bề rộng — giá nowrap + cỡ chữ co theo vw (clamp), nút
   gọn padding lại, chống tràn (overflow:hidden) → vừa khít từ 360px trở xuống.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .cms-pm-sticky-buy{
    gap:8px !important;
    padding:0 10px !important;
    overflow:hidden !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .cms-pm-sticky-info{ flex:1 1 auto !important; min-width:0 !important; }
  .cms-pm-sticky-info-price{
    white-space:nowrap !important;
    font-size:clamp(14px, 4.2vw, 18px) !important;
  }
  .cms-pm-sticky-actions{ flex:0 0 auto !important; gap:7px !important; }
  .cms-pm-sticky-buy .cms-pm-sticky-cart,
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now{
    font-size:13px !important;
    white-space:nowrap !important;
  }
  .cms-pm-sticky-buy .cms-pm-sticky-cart{ padding:0 11px !important; }
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now{ padding:0 15px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   FIX BỐ CỤC 2 CỘT TRANG SẢN PHẨM Ở DESKTOP/TABLET (2026-06-07)
   Lỗi (ảnh user): ảnh nằm trái, phần tiêu đề/giá/mua RỚT XUỐNG DƯỚI (cột
   phải trống) — trông như "mất CSS" trên desktop.
   Nguyên nhân: Flatsome chỉ bật cột (.large-5 = 41.66%) ở @media min-width:850px.
   Ở vùng 768–849px — cửa sổ không full màn, hoặc màn Retina (dpr2) khiến bề
   rộng CSS ~784px — header đã chuyển desktop nhưng cột sản phẩm vẫn xếp DỌC.
   Fix: ép 2 cột ngay từ ≥768px (ảnh 42% trái, thông tin chiếm phần còn lại bên
   phải). !important để thắng .col{width:100%} mặc định của Flatsome. Không ảnh
   hưởng điện thoại <768px (vẫn xếp dọc) và tương thích khối sticky-gallery ≥850px.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px){
  .product-main > .row.content-row{
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  .product-main > .row.content-row > .product-gallery{
    flex: 0 0 42% !important;
    max-width: 42% !important;
    width: 42% !important;
  }
  .product-main > .row.content-row > .product-info{
    flex: 1 1 0% !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* ============================================================
   CONVERSION BOXES (thêm 2026-06-20, bảng màu xanh theo yêu cầu)
   Primary #0D47A1 · CTA #1976D2 · Nền #E3F2FD · Chữ #1E293B
   ============================================================ */
.cms-sp-order{margin:24px 0;padding:22px 20px;text-align:center;background:#E3F2FD;border:1.5px solid #1976D2;border-radius:var(--radius-lg,14px);}
.cms-sp-order-title{font-size:19px;font-weight:800;color:#0D47A1;margin:0 0 12px;}
.cms-sp-order-line{font-size:15px;color:#1E293B;margin:5px 0;}
.cms-sp-order-line strong{color:#0D47A1;}
.cms-sp-order-line a{color:#1976D2;font-weight:700;text-decoration:none;}
.cms-sp-order-note{font-size:13px;color:#475569;margin-top:12px;line-height:1.6;}
.cms-sp-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:16px 0 6px;}
.cms-sp-btn-call,.cms-sp-btn-zalo{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;font-size:16px;font-weight:800;border-radius:var(--radius-md,10px);text-decoration:none !important;transition:transform .15s ease,box-shadow .15s ease;}
.cms-sp-btn-call{background:linear-gradient(180deg,#1E88E5,#1565C0);color:#fff !important;box-shadow:0 4px 14px rgba(21,101,192,.35);}
.cms-sp-btn-zalo{background:#fff;color:#1976D2 !important;border:1.5px solid #1976D2;}
.cms-sp-btn-call:hover,.cms-sp-btn-zalo:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(13,71,161,.25);}
.cms-sp-deal{margin:24px 0;padding:24px 20px;text-align:center;color:#fff;background:#0D47A1;border-radius:var(--radius-lg,14px);box-shadow:0 10px 26px rgba(13,71,161,.30);}
.cms-sp-deal-title{font-size:18px;font-weight:800;margin:0 0 14px;color:#fff;}
.cms-sp-deal-line{font-size:14.5px;margin:8px 0;color:#E3F2FD;}
.cms-sp-deal-line strong{color:#fff;}
.cms-sp-deal .cms-sp-cta-row{margin-top:18px;}
.cms-sp-deal .cms-sp-btn-call{background:linear-gradient(180deg,#2196F3,#1565C0);box-shadow:0 4px 14px rgba(0,0,0,.25);}
.cms-sp-deal .cms-sp-btn-zalo{background:transparent;color:#fff !important;border:1.5px dashed rgba(255,255,255,.7);}
@media(max-width:640px){.cms-sp-cta-row{flex-direction:column;}.cms-sp-btn-call,.cms-sp-btn-zalo{width:100%;padding:13px 18px;font-size:15px;}}

/* ============================================================
   NỘI DUNG DẠNG CARD — đồng bộ với box CTA (2026-06-20)
   Mỗi mục nội dung thành thẻ trắng, viền xanh nhạt, bo góc.
   ============================================================ */
.product-footer .cms-sp-section,
.entry-content .cms-sp-section,
.tab-panel .cms-sp-section,
.cms-sp-section{
  background:#fff;
  border:1px solid #dbeafe;
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 2px 12px rgba(13,71,161,.05);
}
.cms-sp-section + .cms-sp-section{ border-top:1px solid #dbeafe; padding-top:18px; }
@media(max-width:640px){ .cms-sp-section{ padding:14px 15px; } }

/* ============================================================
   FIX 2026-06-20: feature-list (KHÔNG đỏ), bảng giá, inline-cta
   ============================================================ */
.cms-sp-feat{ list-style:none; margin:12px 0; padding:0; }
.cms-sp-feat li{ background:#f0fdf4; border-left:3px solid #16a34a; border-radius:8px; padding:11px 14px; margin:0 0 8px; font-size:14.5px; line-height:1.55; color:#1E293B; list-style:none; }
.cms-sp-feat li::before{ display:none !important; content:none !important; }
.cms-sp-feat li strong{ color:#15803d; }
@media(max-width:640px){ .cms-sp-feat li{ font-size:13.5px; padding:9px 11px; } }
.cms-sp-price-table{ box-shadow:0 2px 12px rgba(13,71,161,.06); }
.cms-sp-price-table thead th{ background:#0D47A1 !important; color:#fff !important; }
.cms-sp-price-table tr.cms-sp-row-hot{ background:#fff7ed !important; }
.cms-sp-price-table tr.cms-sp-row-best{ background:#eff6ff !important; }
.cms-sp-inline-cta{ background:#E3F2FD !important; border:1px solid #bfdbfe !important; }
.cms-sp-inline-cta a{ color:#0D47A1 !important; }

/* ============================================================
   WHY BOX REDESIGN (card + icon tròn nổi) — theo mẫu chị 2026-06-20
   ============================================================ */
.product-footer .cms-sp-why,.entry-content .cms-sp-why,.tab-panel .cms-sp-why,.cms-sp-why{background:#f7faff;border:1px solid #e3edfb;border-radius:16px;padding:18px;}
.cms-sp-why .cms-sp-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.cms-sp-why .cms-sp-why-item{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid #eaf0fa;border-radius:12px;padding:14px 15px;box-shadow:0 2px 10px rgba(13,71,161,.06);font-size:13.5px;color:#475569;line-height:1.5;}
.cms-sp-why-ico{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:#EAF2FE;display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;box-shadow:0 2px 7px rgba(13,71,161,.12);}
.cms-sp-why-tx{display:flex;flex-direction:column;gap:3px;}
.cms-sp-why-tx strong{color:#0D47A1 !important;font-size:15px;font-weight:700;}
.cms-sp-why-d{color:#475569;font-size:13px;line-height:1.5;}
.cms-sp-inline-cta#tu-van{background:linear-gradient(135deg,#1E88E5,#1565C0) !important;border:none !important;border-radius:30px !important;padding:16px 22px !important;box-shadow:0 6px 18px rgba(21,101,192,.32);}
.cms-sp-inline-cta#tu-van a{color:#fff !important;font-size:16px;font-weight:800;}
@media(max-width:640px){.cms-sp-why .cms-sp-why-grid{grid-template-columns:1fr;}.cms-sp-why-ico{width:40px;height:40px;font-size:19px;}}

/* ============================================================
   GEO KEY FACTS — khối "Tóm tắt nhanh" đầu trang (2026-06-20)
   ============================================================ */
.cms-sp-keyfacts{background:#EAF2FE;border:1px solid #bfdbfe;border-left:4px solid #0D47A1;border-radius:12px;padding:14px 18px;margin:0 0 18px;}
.cms-sp-kf-title{font-weight:800;color:#0D47A1;font-size:15px;margin-bottom:8px;}
.cms-sp-keyfacts ul{margin:0;padding:0;list-style:none;}
.cms-sp-keyfacts li{font-size:14px;line-height:1.6;color:#1E293B;margin:0 0 4px;padding-left:2px;}
.cms-sp-keyfacts li b{color:#0D47A1;}
@media(max-width:640px){.cms-sp-keyfacts{padding:12px 14px;}.cms-sp-keyfacts li{font-size:13px;}}

/* ════════════════════════════════════════════════════════════════════
   STICKY BUY BAR — REDESIGN "card nổi" (2026-06-20)
   Card bo tròn nổi + viền trên navy + label "Giá ưu đãi" + giá đỏ +
   nút Giỏ viền xanh + nút Mua ngay gradient. Override mọi rule cũ ở trên.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .cms-pm-sticky-buy{
    display:flex !important; flex-direction:row !important; align-items:center !important;
    gap:7px !important;
    position:fixed !important; left:8px !important; right:8px !important;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:999 !important;
    height:auto !important; min-height:60px !important;
    padding:8px 8px 8px 12px !important;
    box-sizing:border-box !important; overflow:hidden !important; max-width:none !important;
    background:#ffffff !important;
    border:1px solid #e9edf5 !important;
    border:1px solid #dbeafe !important;
    border-top:1px solid #dbeafe !important;
    border-radius:18px !important;
    box-shadow:0 10px 30px rgba(11,31,68,.16), 0 2px 8px rgba(11,31,68,.08) !important;
  }

  /* Cụm giá: label "Giá ưu đãi" (xám) + giá (đỏ đậm) */
  .cms-pm-sticky-info{
    flex:1 1 auto !important; min-width:0 !important;
    display:flex !important; flex-direction:column !important;
    justify-content:center !important; align-items:flex-start !important;
    gap:1px !important; padding:0 !important; line-height:1.1 !important;
  }
  .cms-pm-sticky-info::before{
    content:"Giá ưu đãi";
    font-size:11.5px !important; font-weight:600 !important;
    color:#7b8597 !important; letter-spacing:.1px !important; line-height:1.1 !important;
    white-space:nowrap !important;
  }
  .cms-pm-sticky-info-hint{ display:none !important; }
  .cms-pm-sticky-info-price{
    font-size:clamp(15px, 4.2vw, 19px) !important; font-weight:800 !important;
    color:#e11d2a !important; letter-spacing:-.3px !important;
    line-height:1.15 !important; white-space:nowrap !important; overflow:visible !important;
  }

  /* Cụm nút — gọn để LUÔN chừa chỗ cho cụm giá (tránh giá rớt dòng/tràn) */
  .cms-pm-sticky-actions{
    flex:0 0 auto !important; display:flex !important; gap:6px !important;
    width:auto !important; align-items:center !important;
  }
  .cms-pm-sticky-buy .cms-pm-sticky-cart,
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    gap:4px !important; height:42px !important; border-radius:11px !important;
    font-size:13.5px !important; font-weight:800 !important; line-height:1 !important;
    white-space:nowrap !important; text-decoration:none !important; cursor:pointer !important;
    text-transform:none !important; flex:0 0 auto !important;
  }
  /* Nút Giỏ — trắng, viền xanh, icon + chữ navy */
  .cms-pm-sticky-buy .cms-pm-sticky-cart{
    background:#fff !important; color:#0A2A6B !important;
    border:1.6px solid #1565C0 !important; padding:0 10px !important;
  }
  .cms-pm-sticky-buy .cms-pm-sticky-cart .material-symbols-outlined{ color:#1565C0 !important; }
  .cms-pm-sticky-buy .cms-pm-sticky-cart:active{ background:#eef4fe !important; }

  /* Nút Mua ngay — gradient xanh, chữ trắng, đổ bóng */
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now{
    background:linear-gradient(180deg,#2C8AF0 0%,#1657C2 100%) !important;
    color:#fff !important; border:none !important; padding:0 13px !important;
    box-shadow:0 6px 16px rgba(21,87,194,.38) !important;
  }
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now .material-symbols-outlined{ color:#fff !important; }
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now:active{ filter:brightness(.96) !important; }

  .cms-pm-sticky-buy .material-symbols-outlined{
    font-size:18px !important; width:1.1em !important; max-width:1.1em !important;
    flex:0 0 auto !important; overflow:hidden !important;
  }

  /* Chừa chỗ cho card nổi (cao ~62 + đáy 10 + safe-area) */
  body.single-product{ padding-bottom:calc(98px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Ẩn sticky bar khi đang nhìn thấy nút Mua ngay chính (IntersectionObserver gắn class) */
  .cms-pm-sticky-buy.cms-sticky-hidden{ display:none !important; }
}

/* Màn rất hẹp (≤360px): co cực gọn để giá hiện đủ */
@media (max-width: 360px){
  .cms-pm-sticky-buy{ padding:7px 7px 7px 10px !important; gap:6px !important; }
  .cms-pm-sticky-actions{ gap:5px !important; }
  .cms-pm-sticky-buy .cms-pm-sticky-cart{ padding:0 8px !important; }
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now{ padding:0 11px !important; }
  .cms-pm-sticky-buy .cms-pm-sticky-cart,
  .cms-pm-sticky-buy .cms-pm-sticky-buy-now{ font-size:13px !important; height:40px !important; gap:3px !important; }
  .cms-pm-sticky-buy .material-symbols-outlined{ font-size:17px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   POPUP "MUA NGAY / ĐẶT HÀNG NHANH" (devvn) — FIX VỠ LAYOUT MOBILE
   (2026-06-20). Desktop giữ 2 cột; mobile xếp DỌC, swatch thành pill,
   form full width, cuộn dọc vừa màn hình.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .devvn-popup-inner{ max-width:94vw !important; width:94vw !important; }
  .mfp-content .devvn-popup-inner .devvn-popup-title,
  .devvn-popup-inner .devvn-popup-title{ font-size:14px !important; line-height:19px !important; padding:12px 40px 12px 14px !important; }

  /* Nội dung: 1 cột, cuộn dọc trong popup */
  .devvn-popup-inner .devvn-popup-content{
    display:block !important; grid-template-columns:1fr !important;
    padding:14px !important; gap:0 !important;
    max-height:calc(100dvh - 110px) !important; overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .devvn-popup-inner .devvn-popup-content-left,
  .devvn-popup-inner .devvn-popup-content-right{ width:100% !important; max-width:100% !important; float:none !important; }
  .devvn-popup-inner .devvn-popup-content-right{ margin-top:14px !important; }

  /* Cụm sản phẩm: ảnh nhỏ trái + info phải */
  .devvn-popup-inner .devvn-popup-prod{ display:flex !important; gap:12px !important; align-items:flex-start !important; }
  .devvn-popup-inner .devvn-popup-img{ flex:0 0 90px !important; width:90px !important; max-width:90px !important; padding:6px !important; }
  .devvn-popup-inner .devvn-popup-img img{ width:100% !important; height:auto !important; }
  .devvn-popup-inner .devvn-popup-info{ flex:1 1 auto !important; min-width:0 !important; }
  .devvn-popup-inner span.devvn_title{ font-size:13.5px !important; line-height:1.35 !important; }

  /* Bảng biến thể → block, nhãn trên, swatch thành hàng pill tự xuống dòng */
  .devvn-popup-inner table.variations,
  .devvn-popup-inner table.variations tbody,
  .devvn-popup-inner table.variations tr,
  .devvn-popup-inner table.variations th,
  .devvn-popup-inner table.variations td{ display:block !important; width:100% !important; max-width:100% !important; }
  .devvn-popup-inner table.variations th.label{ padding:8px 0 4px !important; font-size:13px !important; font-weight:700 !important; text-align:left !important; }
  .devvn-popup-inner table.variations td.value{ padding:0 !important; }
  .devvn-popup-inner .thwvsf-wrapper-ul{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin:0 !important; padding:0 !important; list-style:none !important; }
  .devvn-popup-inner .thwvsf-wrapper-item-li{ float:none !important; width:auto !important; min-width:0 !important; max-width:none !important; margin:0 !important; }
  .devvn-popup-inner .thwvsf-item-span,
  .devvn-popup-inner .thwvsf-wrapper-item-li .item-span-text{ white-space:nowrap !important; }

  /* Form thông tin: full width, các ô xuống dòng đầy đủ */
  .devvn-popup-inner form#devvn_cusstom_info{ padding:14px !important; height:auto !important; }
  .devvn-popup-inner .popup-customer-info-group{ display:block !important; width:100% !important; margin-bottom:10px !important; }
  .devvn-popup-inner .popup-customer-info-group :where(input, textarea){
    width:100% !important; max-width:100% !important; box-sizing:border-box !important; min-width:0 !important;
  }
  .devvn-popup-inner .devvn-order-btn,
  .devvn-popup-inner button.devvn-order-btn{ width:100% !important; }

  /* Số lượng + nút canh gọn */
  .devvn-popup-inner .devvn-popup-content-desc{ padding-top:12px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   POPUP "MUA NGAY" — DÙNG THẺ CARD "Chọn gói mua" + "Khuyến mãi & Quà tặng"
   giống trang chính (builder cmsBuildBundleUI chạy cho form popup). 2026-06-20.
   Ẩn swatch thô (cards thay thế) + ẩn banner scarcity/shipping cho gọn.
   ════════════════════════════════════════════════════════════════════ */
.devvn-popup-inner form.variations_form table.variations{ display:none !important; }
.devvn-popup-inner form.variations_form .single_variation_wrap{ display:block; }
.devvn-popup-inner .cms-sp-scarcity,
.devvn-popup-inner .cms-sp-shipping-banner{ display:none !important; }
/* Card + quà trong popup: full bề ngang cột */
.devvn-popup-inner .cms-sp-bundles,
.devvn-popup-inner .cms-sp-gifts{ margin:12px 0 0 !important; width:100% !important; }
.devvn-popup-inner .cms-sp-bundles-title{ margin-top:0 !important; }

/* ════════════════════════════════════════════════════════════════════
   CARD GIÁ + MUA HÀNG (.cms-buy-card) — thiết kế lại theo mockup 2026-06-20
   [giá lớn navy + tặng kèm cam] · vạch ngăn · [qty + Thêm vào giỏ] · [Mua ngay]
   JS (init.php cmsBuildBundleUI) gom các phần vào .woocommerce-variation-add-to-cart.
   ════════════════════════════════════════════════════════════════════ */
.product-main .cms-buy-card{
  display:block !important;            /* theme set .woocommerce-variation-add-to-cart = flex row → ép block để hết tràn nút & khoảng trống stretch */
  background:#ffffff !important;
  border:1px solid #d6e8ff !important;
  border-radius:20px !important;
  box-shadow:0 8px 24px rgba(15,76,160,.10) !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:14px 0 !important;
}
/* Khử mọi ảnh hưởng flex-item còn sót lên các phần trong card */
.product-main .cms-buy-card > *{ flex:0 1 auto !important; align-self:auto !important; }
/* --- Section GIÁ (đầu card, nền gradient xanh rất nhạt) — gọn --- */
.product-main .cms-buy-card .cms-pm-price-moved{
  margin:0 !important; padding:clamp(16px,3.6vw,22px) clamp(16px,3.6vw,22px) clamp(12px,2.6vw,16px) !important;
  border:0 !important;
  background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%) !important;
}
.product-main .cms-pm-price-moved .price.product-page-price{
  margin:0 !important; display:block !important; line-height:1.0 !important;
}
.product-main .cms-pm-price-moved .price.product-page-price del{
  display:block; opacity:1; font-weight:500; margin-bottom:4px;
}
.product-main .cms-pm-price-moved .price.product-page-price del .woocommerce-Price-amount{
  font-size:clamp(13px,3vw,15px) !important; font-weight:500 !important; color:#8b96a8 !important;
}
.product-main .cms-pm-price-moved .price.product-page-price ins{ text-decoration:none; }
.product-main .cms-pm-price-moved .price.product-page-price > .woocommerce-Price-amount,
.product-main .cms-pm-price-moved .price.product-page-price ins .woocommerce-Price-amount{
  font-size:clamp(26px,6vw,34px) !important; font-weight:800 !important; color:#073b91 !important;
  letter-spacing:-.8px; line-height:1.0;
}
.product-main .cms-pm-price-moved .cms-save{
  display:inline-block; font-size:11px !important; padding:2px 8px !important;
  margin-left:9px; vertical-align:middle;
}
.product-main .cms-pm-price-moved .cms-pm-price-gift{
  margin:clamp(10px,2.2vw,14px) 0 0 !important; line-height:1.3 !important;
  font-size:clamp(15px,3.4vw,18px) !important; color:#ff4b1f !important; font-weight:700;
  display:flex !important; align-items:center; gap:8px;
}
.product-main .cms-pm-price-moved .cms-pm-price-gift strong{ color:#ff4b1f !important; font-weight:700; }
.product-main .cms-pm-price-moved .cms-pm-price-gift .material-symbols-outlined{
  font-size:clamp(17px,3.6vw,20px) !important; color:#ff4b1f !important; flex:0 0 auto; width:auto; max-width:none;
}
/* --- Section ACTION (nền trắng, tách bằng border-top nhẹ) — gọn --- */
.product-main .cms-buy-card .cms-buy-row{
  display:flex !important; align-items:stretch; gap:clamp(10px,2.5vw,14px);
  padding:clamp(13px,3.2vw,18px) clamp(13px,3.2vw,18px) 0 !important;
  border-top:1px solid #edf4ff !important; background:#fff !important;
  flex-wrap:nowrap;
}
/* Bộ tăng giảm số lượng — 3 ô bằng nhau */
.product-main .cms-buy-card .cms-buy-row .quantity,
.product-main .cms-buy-card .cms-buy-row .ux-quantity{
  flex:0 0 116px !important; margin:0 !important; background:#fff;
  min-height:clamp(46px,11vw,54px); min-width:0;
  border:1.5px solid #cfe0ff !important; border-radius:13px !important; overflow:hidden;
  display:flex !important; align-items:stretch;
}
.product-main .cms-buy-card .cms-buy-row .ux-quantity .qty{
  flex:1 1 0; border:0 !important; box-shadow:none !important; width:auto !important; background:transparent;
  font-size:clamp(16px,3.4vw,18px) !important; font-weight:800; color:#073b91 !important; text-align:center;
  border-left:1.5px solid #e3edff !important; border-right:1.5px solid #e3edff !important; border-radius:0 !important; height:auto; padding:0;
}
.product-main .cms-buy-card .cms-buy-row .ux-quantity__button{
  flex:1 1 0; border:0 !important; background:transparent !important; width:auto !important;
  font-size:clamp(19px,4.2vw,22px) !important; font-weight:700 !important; color:#0b4cb8 !important;
}
/* Nút Thêm vào giỏ hàng — 1 dòng */
.product-main .cms-buy-card .cms-buy-row .single_add_to_cart_button{
  flex:1 1 0 !important; margin:0 !important; min-height:clamp(46px,11vw,54px);
  background:#fff !important; color:#075bd8 !important;
  border:2px solid #0066ff !important; border-radius:13px !important;
  font-weight:700 !important; font-size:clamp(13px,2.9vw,15px) !important; white-space:nowrap;
  display:inline-flex !important; align-items:center; justify-content:center; gap:7px;
  transition:background .15s ease, box-shadow .15s ease !important;
}
.product-main .cms-buy-card .cms-buy-row .single_add_to_cart_button::before{
  content:'shopping_cart'; font-family:'Material Symbols Outlined';
  font-size:clamp(17px,3.6vw,20px); font-weight:normal;
}
.product-main .cms-buy-card .cms-buy-row .single_add_to_cart_button:hover{
  background:#f0f6ff !important; box-shadow:0 6px 16px rgba(0,102,255,.18) !important;
}
/* --- CTA chính "Mua ngay" (ép XANH, thắng rule cam .product-info .devvn_buy_now) — gọn --- */
.product-main .product-info .cms-buy-card .devvn_buy_now,
.product-main .cms-buy-card .devvn_buy_now{
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
  margin:clamp(13px,3vw,18px) clamp(13px,3.2vw,18px) clamp(14px,3.2vw,18px) !important; width:auto !important;
  min-height:clamp(52px,12vw,62px) !important;
  background:linear-gradient(180deg,#0877ff 0%,#0058e6 100%) !important;
  color:#fff !important; border:0 !important; border-radius:13px !important;
  padding:9px 16px !important; text-align:center !important; text-decoration:none !important;
  box-shadow:0 7px 16px rgba(0,91,230,.26) !important; line-height:1.22 !important;
  font-size:clamp(17px,3.8vw,21px) !important; font-weight:800 !important; letter-spacing:.2px;
}
.product-main .product-info .cms-buy-card .devvn_buy_now:hover{
  background:linear-gradient(180deg,#0a82ff 0%,#0062f0 100%) !important;
  box-shadow:0 9px 20px rgba(0,91,230,.34) !important; color:#fff !important;
}
.product-main .cms-buy-card .devvn_buy_now *{ color:#fff !important; }
.product-main .cms-buy-card .devvn_buy_now small,
.product-main .cms-buy-card .devvn_buy_now .devvn_buy_now_subtitle,
.product-main .cms-buy-card .devvn_buy_now span:not(:first-child){
  font-weight:500 !important; font-size:clamp(12px,2.8vw,14px) !important; opacity:.9; letter-spacing:0;
}

/* ════════════════════════════════════════════════════════════════════
   CARD MUA HÀNG — RESPONSIVE MOBILE (≤768px) gọn, hết cảm giác phóng to
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .product-main .cms-buy-card{
    border-radius:20px !important;
    box-shadow:0 7px 20px rgba(15,76,160,.08) !important;
    margin:12px 0 !important;
  }
  /* GIÁ — padding gọn, bỏ khoảng trắng thừa */
  .product-main .cms-buy-card .cms-pm-price-moved{
    padding:18px 18px 16px !important; min-height:0 !important;
  }
  .product-main .cms-pm-price-moved .price.product-page-price del{ margin-bottom:5px !important; }
  .product-main .cms-pm-price-moved .price.product-page-price del .woocommerce-Price-amount{
    font-size:14px !important;
  }
  .product-main .cms-pm-price-moved .price.product-page-price > .woocommerce-Price-amount,
  .product-main .cms-pm-price-moved .price.product-page-price ins .woocommerce-Price-amount{
    font-size:30px !important; font-weight:800 !important; color:#0754B8 !important; letter-spacing:-.6px;
  }
  /* QUÀ TẶNG — vừa phải, icon canh dòng đầu */
  .product-main .cms-pm-price-moved .cms-pm-price-gift{
    margin-top:14px !important; font-size:16px !important; font-weight:700 !important;
    line-height:1.3 !important; align-items:flex-start !important; gap:7px !important;
  }
  .product-main .cms-pm-price-moved .cms-pm-price-gift .material-symbols-outlined{
    font-size:18px !important; margin-top:1px;
  }
  /* ACTION — qty 108px + thêm giỏ cùng 1 hàng, cao 50px */
  .product-main .cms-buy-card .cms-buy-row{
    padding:14px 18px 0 !important; gap:12px !important; flex-wrap:nowrap !important;
  }
  .product-main .cms-buy-card .cms-buy-row .quantity,
  .product-main .cms-buy-card .cms-buy-row .ux-quantity{
    flex:0 0 108px !important; min-width:0 !important; min-height:50px !important; border-radius:12px !important;
  }
  .product-main .cms-buy-card .cms-buy-row .single_add_to_cart_button{
    flex:1 1 0 !important; min-height:50px !important; font-size:13.5px !important; font-weight:700 !important; border-radius:12px !important; gap:6px; white-space:nowrap;
  }
  .product-main .cms-buy-card .cms-buy-row .single_add_to_cart_button::before{ font-size:18px !important; }
  .product-main .cms-buy-card .cms-buy-row .ux-quantity__button{ font-size:20px !important; }
  .product-main .cms-buy-card .cms-buy-row .ux-quantity .qty{ font-size:16px !important; }
  /* MUA NGAY — full width, cao 56px */
  .product-main .product-info .cms-buy-card .devvn_buy_now,
  .product-main .cms-buy-card .devvn_buy_now{
    margin:14px 18px 16px !important; min-height:56px !important; border-radius:12px !important;
    font-size:20px !important; padding:8px 16px !important;
    box-shadow:0 6px 14px rgba(0,91,230,.24) !important;
  }
  .product-main .cms-buy-card .devvn_buy_now small,
  .product-main .cms-buy-card .devvn_buy_now .devvn_buy_now_subtitle,
  .product-main .cms-buy-card .devvn_buy_now span:not(:first-child){ font-size:13px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   TINH CHỈNH PIXEL CARD MUA HÀNG — hết tràn nút + hết khoảng trống thừa
   (override cuối cùng) 2026-06-21
   ════════════════════════════════════════════════════════════════════ */
/* Đoạn giá: bỏ margin/padding/line-height thừa của <p> + span.price */
.product-main .cms-buy-card .price.product-page-price,
.product-main .cms-buy-card .price.product-page-price > .price{
  margin:0 !important; padding:0 !important; min-height:0 !important; line-height:1 !important; display:block !important;
}
.product-main .cms-buy-card .price.product-page-price del{ line-height:1 !important; margin:0 0 6px !important; display:block !important; }
.product-main .cms-buy-card .price.product-page-price ins{ line-height:1 !important; }
.product-main .cms-buy-card .price.product-page-price .woocommerce-Price-amount{ line-height:1 !important; display:inline-block; }
.product-main .cms-buy-card .price.product-page-price .screen-reader-text{
  position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; margin:0 !important;
}
/* Nút Mua ngay: ép rộng đúng trong card (width:auto bị flex tính sai → dùng calc) */
.product-main .product-info .cms-buy-card .devvn_buy_now,
.product-main .cms-buy-card .devvn_buy_now{
  width:calc(100% - 36px) !important; max-width:calc(100% - 36px) !important;
  margin-left:18px !important; margin-right:18px !important; box-sizing:border-box !important;
}
/* Thu khoảng cách dọc cho gọn */
.product-main .cms-buy-card .cms-pm-price-moved{ padding-bottom:12px !important; }
.product-main .cms-buy-card .cms-pm-price-moved .cms-pm-price-gift{ margin-top:12px !important; }
.product-main .cms-buy-card .cms-buy-row{ padding-bottom:0 !important; }

/* FIX cuối: theme set min-width:100% trên .button (Mua ngay & Thêm giỏ) → ghi đè
   width/max-width gây TRÀN. Bỏ min-width để width co đúng trong card. 2026-06-21 */
.product-main .cms-buy-card .devvn_buy_now,
.product-main .cms-buy-card .cms-buy-row .single_add_to_cart_button{
  min-width:0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   FIX qty (dấu + bị cắt) + thu gọn tối đa khối giá. 2026-06-21
   ════════════════════════════════════════════════════════════════════ */
/* Qty: 3 ô -, số, + chia đều, KHÔNG cắt dấu + */
.product-main .cms-buy-card .cms-buy-row .ux-quantity{ flex:0 0 118px !important; min-width:0 !important; }
.product-main .cms-buy-card .cms-buy-row .ux-quantity .screen-reader-text,
.product-main .cms-buy-card .cms-buy-row .ux-quantity label{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important;
}
.product-main .cms-buy-card .cms-buy-row .ux-quantity__button,
.product-main .cms-buy-card .cms-buy-row .ux-quantity .qty{
  flex:1 1 0 !important; min-width:0 !important; width:auto !important; padding:0 !important;
}
/* Khối giá: tiết kiệm tối đa khoảng trống */
.product-main .cms-buy-card .cms-pm-price-moved{ padding:14px 16px !important; }
.product-main .cms-buy-card .price.product-page-price del{ margin-bottom:3px !important; }
.product-main .cms-buy-card .cms-pm-price-moved .cms-pm-price-gift{ margin-top:8px !important; }
.product-main .cms-buy-card .cms-buy-row{ padding-top:12px !important; }
.product-main .cms-buy-card .devvn_buy_now{ margin-top:12px !important; margin-bottom:14px !important; }

/* ════════════════════════════════════════════════════════════════════
   FIX scarcity / shipping banner bị tràn-cắt phải trên màn hẹp. 2026-06-21
   (flex con min-width:auto + border/box-sizing → đẩy rộng quá container)
   ════════════════════════════════════════════════════════════════════ */
.product-main .cms-sp-scarcity,
.product-main .cms-sp-shipping-banner{
  box-sizing:border-box !important;
  width:100% !important; max-width:100% !important; min-width:0 !important;
  margin-left:0 !important; margin-right:0 !important;
  overflow:hidden !important;
}
.product-main .cms-sp-scarcity > *,
.product-main .cms-sp-shipping-banner > *{ min-width:0 !important; }
.product-main .cms-sp-scarcity > span:last-child,
.product-main .cms-sp-shipping-banner > div{ flex:1 1 auto !important; min-width:0 !important; overflow-wrap:anywhere; }

/* ════════════════════════════════════════════════════════════════════
   CHẶN TRÀN NGANG TOÀN TRANG TRÊN MOBILE — hết cảm giác "kéo ra" / cắt mép
   phải các khối full-width (scarcity, banner, card…). 2026-06-21
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  html, body.single-product{ overflow-x:hidden !important; max-width:100% !important; }
  .product-main, .product-main .product-info, .product-footer{ max-width:100% !important; overflow-x:clip; }
}

/* ════════════════════════════════════════════════════════════════════
   BỎ "XEM THÊM" ở mô tả ngắn — hiện full nội dung (trước bị clamp 120px). 2026-06-21
   ════════════════════════════════════════════════════════════════════ */
.product-main .product-info .product-short-description{ max-height:none !important; }
.product-main .product-info .product-short-description::after{ display:none !important; }
.cms-desc-toggle{ display:none !important; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE BUY CARD OVERFLOW GUARD — 2026-06-22
   Chặn box scarcity/giá/quà/nút mua bị kéo rộng khỏi màn hình nhỏ.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  body.single-product .product-main .product-info,
  body.single-product .product-main form.cart,
  body.single-product .product-main .cms-buy-card,
  body.single-product .product-main .cms-buy-card *,
  body.single-product .product-main .cms-sp-scarcity,
  body.single-product .product-main .cms-sp-shipping-banner{
    box-sizing:border-box !important;
    max-width:100% !important;
  }

  body.single-product .product-main form.cart,
  body.single-product .product-main .cms-buy-card{
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  body.single-product .product-main .cms-sp-scarcity{
    display:flex !important;
    align-items:flex-start !important;
    gap:8px !important;
    padding:12px 14px !important;
    white-space:normal !important;
    overflow:hidden !important;
  }

  body.single-product .product-main .cms-sp-scarcity > span:last-child,
  body.single-product .product-main .cms-sp-shipping-banner > div{
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  body.single-product .product-main .cms-buy-card .cms-pm-price-moved{
    padding:14px 16px !important;
    overflow:hidden !important;
  }

  body.single-product .product-main .cms-pm-price-moved .cms-pm-price-gift{
    display:flex !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  body.single-product .product-main .cms-pm-price-moved .cms-pm-price-gift strong{
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }

  body.single-product .product-main .cms-buy-card .cms-buy-row{
    display:grid !important;
    grid-template-columns:minmax(96px, 108px) minmax(0, 1fr) !important;
    gap:10px !important;
    padding:12px 16px 0 !important;
    width:100% !important;
    min-width:0 !important;
  }

  body.single-product .product-main .cms-buy-card .cms-buy-row .quantity,
  body.single-product .product-main .cms-buy-card .cms-buy-row .ux-quantity{
    width:100% !important;
    flex:none !important;
    min-width:0 !important;
    min-height:50px !important;
  }

  body.single-product .product-main .cms-buy-card .cms-buy-row .single_add_to_cart_button{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:0 10px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:13px !important;
    gap:5px !important;
  }

  body.single-product .product-main .product-info .cms-buy-card .devvn_buy_now,
  body.single-product .product-main .cms-buy-card .devvn_buy_now{
    width:calc(100% - 32px) !important;
    max-width:calc(100% - 32px) !important;
    margin-left:16px !important;
    margin-right:16px !important;
    overflow:hidden !important;
  }
}

@media (max-width: 380px){
  body.single-product .product-main .cms-buy-card .cms-buy-row{
    grid-template-columns:96px minmax(0, 1fr) !important;
    gap:8px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  body.single-product .product-main .cms-buy-card .cms-buy-row .single_add_to_cart_button{
    font-size:12.5px !important;
    padding:0 8px !important;
  }
}

/* ===== Popup "Mua ngay": to & rõ hơn trên PC (2026-07-05) ===== */
/* Style cả SELECT cho đẹp bằng input (plugin để select cao 26px/chữ 12px xấu) */
.devvn-popup-inner .popup-customer-info-group select{
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  padding:10px 14px; min-height:46px; height:46px; font-size:15px; line-height:22px;
  color:var(--primary-text); background:#fff; width:100%; box-shadow:none; margin:0;
  font-family:inherit; appearance:auto;
}
.devvn-popup-inner .popup-customer-info-group :where(input,textarea){ min-height:46px; font-size:15px; padding:11px 14px; }
.devvn-popup-inner .cms-qb-label{ display:block; font-size:13.5px; font-weight:700; color:var(--primary-text); margin:0 0 6px; }
.devvn-popup-inner .popup-customer-info-title{ font-size:18px; }

@media (min-width:900px){
  /* 2026-07-08: cột trái 300px quá hẹp cho card "Chọn gói mua"/"Khuyến mãi & Quà tặng"
     (chữ vỡ dòng, nút +/- đè lên tên SP) — nới lên 400px + khổ popup to hơn (960→1140px)
     để bù lại phần cột phải (form) không bị hẹp đi. Cũng ép rộng .mfp-content NGOÀI vì
     max-width của .devvn-popup-inner không tự lớn hơn khung .mfp-content chứa nó. */
  .mfp-wrap .mfp-content:has(.devvn-popup-inner) { width: min(1140px, 94vw) !important; }
  .devvn-popup-inner{ max-width:1140px; }
  .devvn-popup-inner .devvn-popup-content{ grid-template-columns:400px 1fr; gap:28px; padding:28px 30px; }
  /* Tỉnh/Thành phố & Phường/Xã: MỖI cái 1 DÒNG full-width (hết chật) */
  .devvn-popup-inner .popup-customer-info-group:has(.customer-location) > .popup-customer-info-item-2{
    width:100% !important; float:none !important; padding:0 !important; margin:0 0 14px !important;
  }
  .devvn-popup-inner .popup-customer-info-group:has(.customer-location) > .popup-customer-info-item-2:last-child{ margin-bottom:0 !important; }
  .devvn-popup-inner .popup-customer-info-group{ margin-bottom:15px; }
  .devvn-popup-inner .devvn-order-btn{ min-height:52px; font-size:16px; }
}