/* ==========================================================================
   PDP v2 — bản BỐ CỤC (option msb_pdp2_scope = layout), 08/11/2026.
   Dùng cho site đã có khối mua riêng (xiaomihome.vn: plugin mi-smart-order): CHỈ token M3 + cột trái danh mục + phần dưới
   ("Đề xuất dành cho bạn", mô tả liền khổ). KHÔNG có CSS khối mua (giá, Bảo Kim, hậu mãi, combo…) vì trùng tên class với plugin.
   Sinh từ msb-pdp-v2.css mục 1, 5, 6 — sửa ở msb-pdp-v2.css rồi sinh lại.
   ========================================================================== */

/* ===== 1. Token M3 (xiaomimall m3-root.css) ===== */
:root {
  --md-sys-color-primary: #ff6900;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #fff0e5;
  --md-sys-color-on-primary-container: #3e1500;

  --md-sys-color-secondary: #303030;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ffdbcc; /* M3 tone 90 theo thương hiệu, 27/10 (cũ #f3f3f3) */
  --md-sys-color-on-secondary-container: #5d4033; /* M3, 27/10 (cũ #191919) */

  --md-sys-color-tertiary: #5e5e5e;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #e7e7e7;
  --md-sys-color-on-tertiary-container: #191919;

  --md-sys-color-surface: #ffffff;
  --md-sys-color-surface-dim: #f7f7f7;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f7f7;
  --md-sys-color-surface-container: #f3f3f3;
  --md-sys-color-surface-container-high: #e8e8e8;
  --md-sys-color-surface-container-highest: #dbdbdb;
  --md-sys-color-on-surface: #191919;
  --md-sys-color-surface-variant: #eeeeee;
  --md-sys-color-on-surface-variant: #595959;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #e8e8e8;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-success: #198754;
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #d1e7dd;
  --md-sys-color-on-success-container: #084224;

  --md-sys-color-warning: #945300;
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #ffddb8;
  --md-sys-color-on-warning-container: #2f1500;

  --md-sys-color-info: #006399;
  --md-sys-color-on-info: #ffffff;
  --md-sys-color-info-container: #cbe6ff;
  --md-sys-color-on-info-container: #001d32;

  --zalo-color: #0068ff;
  --on-zalo-color: #ffffff;
  --zalo-color-30: rgba(0, 104, 255, 0.3);
  --zalo-shadow-color: rgba(0, 104, 255, 0.08);

  --color-shopee: #ee4d2d;
  --color-shopee-container: #fff0ed;
  --brand-orange-20: rgba(255, 105, 0, 0.2);
  --text-base: var(--md-sys-color-on-surface);

  --md-sys-spacing-none: 0px;
  --md-sys-spacing-xs: 4px;
  --md-sys-spacing-sm: 8px;
  --md-sys-spacing-md: 12px;
  --md-sys-spacing-lg: 16px;
  --md-sys-spacing-xl: 24px;
  --md-sys-spacing-2xl: 32px;
  --md-sys-spacing-3xl: 40px;
  --md-sys-spacing-4xl: 48px;
  --md-sys-spacing-5xl: 64px;

  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-sm: 8px;
  --md-sys-shape-corner-md: 12px;
  --md-sys-shape-corner-lg: 16px;
  --md-sys-shape-corner-xl: 28px;
  --md-sys-shape-corner-full: 9999px;

  --md-sys-elevation-level-0: none;
  --md-sys-elevation-level-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.18);
  --md-sys-elevation-level-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.18);
  --md-sys-elevation-level-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.18);
  --md-sys-elevation-level-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.12), 0px 2px 3px 0px rgba(0, 0, 0, 0.18);
  --md-sys-elevation-level-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.18);

  --md-sys-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-snappy: cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  --md-sys-duration-short: 200ms;
  --md-sys-duration-medium: 300ms;
  --md-sys-duration-long: 500ms;

  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;

  --md-sys-outline-width: 2px;
  --md-sys-outline-offset: -2px;

  --md-sys-font-brand: 'MiSans Latin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --md-sys-typescale-display-large: 400 57px/64px var(--md-sys-font-brand);
  --md-sys-typescale-display-medium: 400 45px/52px var(--md-sys-font-brand);
  --md-sys-typescale-display-small: 400 36px/44px var(--md-sys-font-brand);

  --md-sys-typescale-headline-large: 400 32px/40px var(--md-sys-font-brand);
  --md-sys-typescale-headline-medium: 500 28px/36px var(--md-sys-font-brand);
  --md-sys-typescale-headline-small: 500 24px/32px var(--md-sys-font-brand);

  --md-sys-typescale-title-large: 500 22px/28px var(--md-sys-font-brand);
  --md-sys-typescale-title-medium: 500 16px/24px var(--md-sys-font-brand);
  --md-sys-typescale-title-small: 500 14px/20px var(--md-sys-font-brand);

  --md-sys-typescale-body-large: 400 16px/24px var(--md-sys-font-brand);
  --md-sys-typescale-body-medium: 400 14px/20px var(--md-sys-font-brand);
  --md-sys-typescale-body-small: 400 12px/16px var(--md-sys-font-brand);

  --md-sys-typescale-label-large: 500 14px/20px var(--md-sys-font-brand);
  --md-sys-typescale-label-medium: 500 12px/16px var(--md-sys-font-brand);
  --md-sys-typescale-label-small: 500 11px/16px var(--md-sys-font-brand);

  --md-sys-typescale-price-large: 700 16px/24px var(--md-sys-font-brand);
  --md-sys-typescale-price-medium: 700 14px/20px var(--md-sys-font-brand);
  --md-sys-typescale-price-small: 700 12px/16px var(--md-sys-font-brand);
  --md-sys-typescale-price-del-large: 500 16px/24px var(--md-sys-font-brand);
  --md-sys-typescale-price-del-medium: 500 14px/20px var(--md-sys-font-brand);
  --md-sys-typescale-price-xlarge: 700 24px/32px var(--md-sys-font-brand);
  --md-sys-typescale-price-hero: 700 28px/36px var(--md-sys-font-brand);
  --md-sys-typescale-price-del-small: 500 12px/16px var(--md-sys-font-brand);
}
/* ==========================================================================
   UI-10a Đợt 0 (26/10/2026): token BỔ SUNG, chỉ thêm — không đổi giá trị token có sẵn.
   Chưa selector nào dùng; các đợt sau thay màu ghi cứng bằng var(--token, #giá-trị-cũ).
   ========================================================================== */
:root {
  --md-sys-color-primary-strong: color-mix(in srgb, var(--md-sys-color-primary) 72%, #000);  /* cam đậm cho nền chữ trắng (như CTP bản thường, ~#b84b00, 5,2:1) */
  --md-sys-color-primary-hover: #e65f00;  /* hover nút cam (như CTP) */
  --md-sys-color-sale: color-mix(in srgb, var(--md-sys-color-error) 78%, #000);  /* giá/huy hiệu giảm giá, đạt 4,5:1 cho chữ 12px */
  --md-sys-color-scrim-32: rgba(0, 0, 0, 0.32);  /* màn phủ modal/bảng chọn */
  --md-sys-color-success-strong: var(--md-sys-color-success);  /* icon/chữ thành công nhỏ (site này success đã đủ đậm) */
  --md-sys-color-error-strong: #ba1a1a;  /* chữ/icon lỗi nhỏ, tương phản >= 4,5:1 */
  --md-sys-color-on-surface-muted: #757575;  /* chữ mờ/placeholder/icon, thay #9ca3af (4,6:1 trên trắng) */
}
/* Nút/chữ nhấn cam đậm đạt WCAG AA (caothienphat m3-root.css) */
:root {
  --ctp-brand-bar: #bf4e00;
  --ctp-brand-bar-hover: color-mix(in srgb, var(--ctp-brand-bar), #000 8%);
  --ctp-brand-bar-pressed: color-mix(in srgb, var(--ctp-brand-bar), #000 12%);
  --ctp-brand-bar-text: color-mix(in srgb, var(--ctp-brand-bar) 85%, #000);
}
/* Khoảng cách dùng trong khối PDP (chỉ lớp m3-*) */
.m3-margin-top-md { margin-top: var(--md-sys-spacing-md) !important; }
.m3-margin-top-lg { margin-top: var(--md-sys-spacing-lg) !important; }
.m3-margin-bottom-none { margin-bottom: 0 !important; }

/* ===== 5. Cột trái "Danh mục sản phẩm" (3 cột như caothienphat; trích product.css, chỉ #product-sidebar) ===== */
/* ===== từ product.css ===== */
body.msb-pdp2 #product-sidebar .widget {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-md);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--md-sys-elevation-level-1);
  }
body.msb-pdp2 #product-sidebar .widget-title {
  font: var(--md-sys-typescale-title-medium);
  color: var(--md-sys-color-on-surface);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
  }
body.msb-pdp2 #product-sidebar .is-divider {
  display: none !important;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.cat-item {
  position: relative;
  display: block !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  border: none !important;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.cat-item > a {
  display: block;
  padding: 8px 80px 8px 12px !important;
  background-color: transparent;
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-medium);
  border-radius: var(--md-sys-shape-corner-full);
  transition: all var(--md-sys-duration-short) ease;
  text-decoration: none;
  width: 100%;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.cat-item > a:hover {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.current-cat > a, body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.current-cat-parent > a {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 600;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.cat-item > .count {
  position: absolute;
  top: 10px;
  right: 48px;
  font: var(--md-sys-typescale-label-small);
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-container-highest);
  padding: 2px 8px;
  border-radius: var(--md-sys-shape-corner-full);
  pointer-events: none;
  line-height: normal !important;
  opacity: 1 !important;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.cat-item:not(.has-child) > .count {
  right: 16px;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.cat-item:not(.has-child) > a {
  padding-right: 56px !important;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.cat-item > .toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: transparent;
  color: var(--md-sys-color-on-surface-variant);
  border: none;
  box-shadow: none;
  transition: background var(--md-sys-duration-short) ease;
  z-index: 10;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.cat-item > .toggle:hover {
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.cat-item > .toggle i {
  font-size: 1.2em;
  transition: transform var(--md-sys-duration-short) ease;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.current-cat > .count, body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.current-cat-parent > .count {
  background-color: var(--md-sys-color-primary-strong);
  color: var(--md-sys-color-on-primary);
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.current-cat > .toggle, body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.current-cat-parent > .toggle {
  color: var(--md-sys-color-primary);
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul.children {
  margin: 4px 0 8px 10px !important;
  padding-left: 8px !important;
  border-left: 2px solid var(--md-sys-color-surface-container-high) !important;
  width: calc(100% - 10px) !important;
  display: none;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul > li.cat-item.active > ul.children {
  display: block !important;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul.children > li > a {
  font: var(--md-sys-typescale-body-small);
  padding: 10px 48px 10px 10px !important;
  border-radius: 0 var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md) 0 !important;
  }
body.msb-pdp2 #product-sidebar .widget_product_categories ul.children > li > .count {
  top: 8px;
  right: 16px;
  }
body.msb-pdp2 #product-sidebar .widget_product_tag_cloud .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  }
body.msb-pdp2 #product-sidebar .widget_product_tag_cloud .tagcloud a {
  font: var(--md-sys-typescale-body-small) !important;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  padding: 4px 8px;
  border-radius: var(--md-sys-shape-corner-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--md-sys-duration-short) ease;
  text-transform: capitalize;
  text-decoration: none;
  }
body.msb-pdp2 #product-sidebar .widget_product_tag_cloud .tagcloud a:hover {
  background-color: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-level-1);
  }
@media (prefers-reduced-motion: reduce) {
body.msb-pdp2 .msb-never {
  transition: none !important;
  animation: none !important;
  }
}

/* caothienphat cột trái chỉ có danh mục: ẩn mây thẻ "Thương hiệu" (tag thuộc tính, rất dài) ở trang sản phẩm */
body.msb-pdp2 #product-sidebar .widget_product_tag_cloud { display: none; }

/* ===== 6. Phần dưới: "Đề xuất dành cho bạn" + mô tả liền khổ, nút Xem thêm (trích caothienphat product.css) ===== */
body.msb-pdp2 .product-footer .product-page-sections .product-section {
  border-top: 0px solid transparent;
  }
body.msb-pdp2 .des-full-height {
  height: 100% !important;
  }
body.msb-pdp2 .des-less-height, body.msb-pdp2 .des-full-height {
  position: relative;
  overflow: hidden;
  transition: height var(--md-sys-duration-long) var(--md-sys-motion-standard);
  }
body.msb-pdp2 .custom-readmore, body.msb-pdp2 .custom-readless {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 0;
  z-index: 10;
  }
body.msb-pdp2 .custom-readmore {
  position: absolute;
  bottom: 0;
  left: 0;
  min-height: 200px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--md-sys-color-surface) 65%, var(--md-sys-color-surface) 100%);
  pointer-events: none;
  }
body.msb-pdp2 .custom-readmore a {
  pointer-events: auto;
  }
body.msb-pdp2 .custom-readmore a, body.msb-pdp2 .custom-readless a {
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);
  padding: 0 28px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--md-sys-elevation-level-0);
  transition: all var(--md-sys-duration-short) var(--md-sys-motion-snappy);
  }
body.msb-pdp2 .custom-readmore a:hover, body.msb-pdp2 .custom-readless a:hover {
  transform: translateY(-1px);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-level-1);
  }
body.msb-pdp2 .custom-readmore a:after, body.msb-pdp2 .custom-readless a:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  display: inline-block;
  }
body.msb-pdp2 .custom-readmore a:after {
  border-top: 6px solid currentColor;
  margin-top: 4px;
  }
body.msb-pdp2 .ctp-m3-related-wrap .flickity-viewport {
  padding-top: 1px !important;
  }
body.msb-pdp2 .product-section .row .large-2 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  }
body.msb-pdp2 .product-section .mt {
  font: var(--md-sys-typescale-title-medium) !important;
  text-transform: capitalize !important;
  }
@media (max-width: 768px) {
body.msb-pdp2 .product-section .mt {
  margin-top: var(--md-sys-spacing-lg) !important;
  margin-bottom: 0 !important;
  }
body.msb-pdp2 .product-section .large-10 .entry-content {
  padding-top: var(--md-sys-spacing-lg) !important;
  padding-bottom: 0 !important;
  }
}
@media (min-width: 850px) {
body.msb-pdp2 .product-page-sections .product-section > .row > .large-2.col { display: none; }
body.msb-pdp2 .product-page-sections .product-section > .row > .large-10.col { flex-basis: 100%; max-width: 100%; }
}
body.msb-pdp2 .ctp-m3-related-wrap .row.slider:not(:has(> .flickity-viewport)) {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  }

/* Đo trên caothienphat 08/11: nền #dbdbdb, đệm 16px, bo 12px; tiêu đề 500 20px/32px, cách dưới 10px */
body.msb-pdp2 .ctp-m3-related-wrap { margin: 0 0 var(--md-sys-spacing-lg); padding: 16px; background: #dbdbdb; border: 0; border-radius: 12px; }
body.msb-pdp2 .ctp-m3-related-wrap > .container { padding: 0; }
body.msb-pdp2 .ctp-m3-related-title { font: 500 20px/32px var(--md-sys-font-brand); color: #191919; margin: 0 0 10px; padding: 0; text-transform: none; }

/* ===== 7. Khối "Dịch vụ hậu mãi" giống mistorebacninh (option msb_pdp2_aftersales = yes). Trích từ msb-pdp-v2.css, giới hạn trong #ctp-after-sales-card
   (lớp gốc box-product-promotion đổi thành #ctp-after-sales-card vì JS plugin mi-smart-order gom mọi .box-product-promotion) ===== */
.m3-card-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  }
.m3-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: var(--md-sys-shape-corner-md, 12px);
  padding: var(--md-sys-spacing-lg) var(--md-sys-spacing-lg);
  text-align: start;
  color: var(--md-sys-color-on-surface, #191919);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--md-sys-duration-short, 200ms) var(--md-sys-motion-standard, cubic-bezier(0.2, 0, 0, 1)),
  background-color var(--md-sys-duration-short, 200ms) var(--md-sys-motion-standard, cubic-bezier(0.2, 0, 0, 1)),
  border-color var(--md-sys-duration-short, 200ms) var(--md-sys-motion-standard, cubic-bezier(0.2, 0, 0, 1)),
  transform var(--md-sys-duration-short, 200ms) var(--md-sys-motion-standard, cubic-bezier(0.2, 0, 0, 1));
  }
.m3-card-elevated {
  background-color: var(--md-sys-color-surface-container-low, #f7f7f7);
  box-shadow: var(--md-sys-elevation-level-1);
  border: none;
  }
.m3-card-elevated:hover {
  box-shadow: var(--md-sys-elevation-level-2);
  transform: translateY(-1px);
  }
.m3-card-filled {
  background-color: var(--md-sys-color-surface-container-highest, #e8e8e8);
  box-shadow: var(--md-sys-elevation-level-0, none);
  border: none;
  }
.m3-card-filled:hover {
  box-shadow: var(--md-sys-elevation-level-1);
  }
.m3-card-outlined {
  background-color: var(--md-sys-color-surface, #ffffff);
  border: 1px solid var(--md-sys-color-outline-variant, #e8e8e8);
  box-shadow: var(--md-sys-elevation-level-0, none);
  }
.m3-card-outlined:hover {
  border-color: var(--md-sys-color-outline, #898989);
  box-shadow: var(--md-sys-elevation-level-1);
  }
.m3-card__label {
  font: var(--md-sys-typescale-label-medium, 500 12px/16px var(--md-sys-font-brand));
  color: var(--md-sys-color-on-surface-variant, #757575);
  text-align: start;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  }
.m3-card__title {
  font: var(--md-sys-typescale-title-large, 500 22px/28px var(--md-sys-font-brand));
  color: var(--md-sys-color-on-surface, #191919);
  text-align: start;
  margin: 0 0 8px 0;
  }
.m3-card__body {
  font: var(--md-sys-typescale-body-medium, 400 14px/20px var(--md-sys-font-brand));
  color: var(--md-sys-color-on-surface-variant, #757575);
  text-align: start;
  margin: 0;
  }
#ctp-after-sales-card .ctp-promo-tag {
  display: block;
  margin-top: 6px;
  margin-bottom: 4px;
  clear: both;
  font: var(--md-sys-typescale-label-small);
  color: var(--md-sys-color-error);
  width: fit-content;
  padding: 2px 0px;
  }
#ctp-after-sales-card.ctp-after-sales-card {
  overflow: hidden !important;
  width: 100% !important;
  margin-top: var(--md-sys-spacing-md) !important;
  margin-bottom: var(--md-sys-spacing-lg) !important;
  padding: 0 !important;
  background: var(--md-sys-color-surface) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: var(--md-sys-shape-corner-md) !important;
  box-shadow: var(--md-sys-elevation-level-0) !important;
  transition: box-shadow var(--md-sys-duration-short) var(--md-sys-motion-standard),
  border-color var(--md-sys-duration-short) var(--md-sys-motion-standard) !important;
  }
#ctp-after-sales-card.ctp-after-sales-card:hover {
  box-shadow: var(--md-sys-elevation-level-1) !important;
  border-color: var(--md-sys-color-outline) !important;
  }
#ctp-after-sales-card .box-product-promotion-header {
  background: var(--md-sys-color-surface-container-low) !important;
  color: var(--md-sys-color-on-surface) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--md-sys-spacing-sm) !important;
  padding: var(--md-sys-spacing-sm) var(--md-sys-spacing-md) !important;
  min-height: 40px !important;
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
  }
#ctp-after-sales-card .box-product-promotion-header .ctp-promo-header-icon {
  flex-shrink: 0 !important;
  color: var(--md-sys-color-primary) !important;
  }
#ctp-after-sales-card .box-product-promotion-header p {
  font: var(--md-sys-typescale-title-small) !important;
  color: var(--md-sys-color-on-surface) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  }
#ctp-after-sales-card .ctp-after-sales-collapsible {
  position: relative !important;
  overflow: hidden !important;
  transition: max-height var(--md-sys-duration-medium) var(--md-sys-motion-snappy) !important;
  }
#ctp-after-sales-card .ctp-after-sales-collapsible.ctp-collapsed {
  max-height: 175px !important;
  }
#ctp-after-sales-card .ctp-after-sales-collapsible.ctp-expanded {
  max-height: 800px !important;
  }
#ctp-after-sales-card .ctp-after-sales-fade {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 55px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 60%, var(--md-sys-color-surface) 100%) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity var(--md-sys-duration-short) ease !important;
  }
#ctp-after-sales-card .ctp-after-sales-collapsible.ctp-expanded .ctp-after-sales-fade {
  opacity: 0 !important;
  visibility: hidden !important;
  }
#ctp-after-sales-card .box-product-promotion-content {
  padding: var(--md-sys-spacing-sm) var(--md-sys-spacing-md) var(--md-sys-spacing-xs) var(--md-sys-spacing-md) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  }
#ctp-after-sales-card .box-product-promotion-content .ctp-promo-group {
  margin-top: 6px !important;
  padding-bottom: 3px !important;
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
  }
#ctp-after-sales-card .box-product-promotion-content .ctp-promo-group:first-child {
  margin-top: 0 !important;
  }
#ctp-after-sales-card .box-product-promotion-content .ctp-promo-group .box-product-promotion-detail {
  font: var(--md-sys-typescale-label-medium) !important;
  color: var(--md-sys-color-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  }
#ctp-after-sales-card .box-product-promotion-content .box-product-promotion-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--md-sys-spacing-sm) !important;
  }
#ctp-after-sales-card .box-product-promotion-content .box-product-promotion-detail {
  font: var(--md-sys-typescale-body-small) !important;
  line-height: 1.45 !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  margin: 0 !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  }
#ctp-after-sales-card .box-product-promotion-content .box-product-promotion-detail .ctp-promo-svg-check {
  flex-shrink: 0 !important;
  color: var(--md-sys-color-success) !important;
  margin-right: 2px !important;
  }
#ctp-after-sales-card .box-product-promotion-content .box-product-promotion-detail:has(> .ctp-promo-svg-check) {
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  }
#ctp-after-sales-card .box-product-promotion-content .box-product-promotion-detail > .ctp-promo-svg-check {
  margin-top: calc((1.45em - 13px) / 2) !important;
  }
#ctp-after-sales-card .box-product-promotion-content .box-product-promotion-detail > .ctp-promo-svg-check + span {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  }
#ctp-after-sales-card .box-product-promotion-content .box-product-promotion-detail .ctp-promo-svg-gift {
  flex-shrink: 0 !important;
  color: var(--md-sys-color-primary) !important;
  margin-right: 2px !important;
  }
#ctp-after-sales-card a {
  color: var(--md-sys-color-primary) !important;
  text-decoration: none !important;
  }
#ctp-after-sales-card a:hover {
  text-decoration: underline !important;
  }
#ctp-after-sales-card .ctp-after-sales-footer {
  padding: var(--md-sys-spacing-xs) var(--md-sys-spacing-md) var(--md-sys-spacing-sm) var(--md-sys-spacing-md) !important;
  text-align: center !important;
  position: relative !important;
  z-index: 2 !important;
  background: var(--md-sys-color-surface) !important;
  }
#ctp-after-sales-card .ctp-after-sales-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  font: var(--md-sys-typescale-label-medium) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  background: var(--md-sys-color-surface-container-high) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  cursor: pointer !important;
  transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard) !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  }
#ctp-after-sales-card .ctp-after-sales-toggle-btn:hover {
  background: var(--md-sys-color-surface-container-highest) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-color: var(--md-sys-color-outline) !important;
  }
#ctp-after-sales-card .ctp-after-sales-toggle-btn .ctp-toggle-btn-icon {
  transition: transform 0.25s ease !important;
  flex-shrink: 0 !important;
  }
#ctp-after-sales-card .ctp-after-sales-toggle-btn.is-expanded .ctp-toggle-btn-icon {
  transform: rotate(180deg) !important;
  }
.ctp-after-sales-card { container-type: inline-size; }
.ctp-after-sales-card .ctp-promo-group .alert-color { color: #BA1A1A !important; }
@media (max-width: 549px) {
.ctp-after-sales-card .box-product-promotion-header p {
  font-size: 14px !important;
  font-size: clamp(12px, calc(4.3cqw - 2.2px), 14px) !important;
  }
}
@media (max-width: 549px) {
#ctp-aftersales-mobile-slot .ctp-gallery-actions-bar { margin: 12px 0 0 !important; }
}
#ctp-aftersales-mobile-slot .ctp-gallery-actions-bar .ctp-action-btn { flex: 1 1 auto !important; padding: 0 12px !important; }
@media (max-width: 359px) {
#ctp-aftersales-mobile-slot .ctp-gallery-actions-bar .ctp-action-btn { padding: 0 8px !important; gap: 6px !important; }
}
body.msb-pdp2 #ctp-aftersales-mobile-slot .ctp-after-sales-card { margin-top: var(--md-sys-spacing-xl, 24px) !important; }

/* Ẩn khối hậu mãi của plugin mi-smart-order (Quyền lợi + Chính sách hậu mãi gom từ mô tả ngắn) — thay bằng khối trên */
body.msb-pdp2 .mibn-benefits-below-gallery,
body.msb-pdp2 .mibn-policy-194 { display: none !important; }
/* Khối hậu mãi dưới ảnh (máy tính) */
body.msb-pdp2 .product-gallery #ctp-after-sales-card { margin-top: var(--md-sys-spacing-lg, 16px); }


/* ===== 8. Form "Nhờ chuyên viên gọi lại tư vấn" (inc/08-tu-van-san-pham.php): ô nhập nhãn nổi, ẩn ô bẫy spam — trích caothienphat m3-components.css (08/11/2026) ===== */
.m3-form-title {
  text-align: center;
  font: var(--md-sys-typescale-title-large);
  color: var(--md-sys-color-on-surface);
  margin: 0 0 24px 0;
  }
.m3-form {
  margin: 0 !important;
  }
.m3-form-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  }
.m3-form-horizontal > * {
  flex: 1 1 0%;
  min-width: 0;
  margin: 0;
  }
.m3-honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  z-index: -1;
  }
.m3-text-field {
  position: relative;
  width: 100%;
  }
.m3-text-field input {
  width: 100%;
  height: 48px;
  padding: 16px 16px 0;
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
  background-color: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-xs);
  box-sizing: border-box;
  transition: border-color var(--md-sys-duration-short) ease, border-width var(--md-sys-duration-short) ease;
  outline: none;
  }
.m3-text-field label {
  position: absolute;
  left: 16px;
  top: 12px;
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
  transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard);
  background: var(--m3-field-label-bg, var(--md-sys-color-surface));
  padding: 0 4px;
  }
.m3-text-field input:hover {
  border-color: var(--md-sys-color-on-surface);
  }
.m3-text-field input:focus {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding-left: 15px;
  }
.m3-text-field input:focus ~ label, .m3-text-field input:not(:placeholder-shown) ~ label {
  top: -8px;
  left: 12px;
  font: var(--md-sys-typescale-label-small);
  color: var(--md-sys-color-primary);
  }
.m3-text-field input:not(:focus):not(:placeholder-shown) ~ label {
  color: var(--md-sys-color-on-surface-variant);
  }

/* Dòng "Mã ưu đãi áp dụng" là voucher bốc thăm của caothienphat — site này không có, ẩn để không treo "Đang kiểm tra..." */
body.msb-pdp2 .ctp-consult-card .ctp-voucher-preview-box { display: none !important; }

/* ===== 9. Nút "Nhờ chuyên viên gọi lại tư vấn" + nút M3 (option msb_pdp2_consult = yes) — trích msb-pdp-v2.css ===== */
button.m3-btn, .m3-btn {
  --btn-ellipsis-lines: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 8px 24px !important;
  font: var(--md-sys-typescale-label-large) !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard) !important;
  user-select: none;
  box-sizing: border-box;
  width: auto;
  margin: 0 !important;
  box-shadow: var(--md-sys-elevation-level-0);
  gap: 8px;
  }
.m3-btn-full, .m3-btn-block {
  width: 100% !important;
  }
button.m3-btn span, .m3-btn span {
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--btn-ellipsis-lines);
  display: -webkit-box;
  overflow: hidden;
  }
button.m3-btn:focus, .m3-btn:focus {
  outline: none;
  }
button.m3-btn:focus-visible, .m3-btn:focus-visible {
  outline: 2px solid var(--md-sys-color-primary) !important;
  outline-offset: 2px !important;
  }
button.m3-btn-filled, .m3-btn-filled {
  background-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  box-shadow: var(--md-sys-elevation-level-0) !important;
  border-color: transparent !important;
  }
button.m3-btn-filled:hover, .m3-btn-filled:hover {
  box-shadow: var(--md-sys-elevation-level-1) !important;
  filter: brightness(0.95);
  transform: translateY(-1px);
  }
button.m3-btn-filled:active, .m3-btn-filled:active {
  box-shadow: var(--md-sys-elevation-level-0) !important;
  transform: translateY(0);
  }
button.m3-btn-tonal, .m3-btn-tonal {
  background-color: var(--md-sys-color-primary-container) !important;
  color: var(--md-sys-color-on-primary-container) !important;
  box-shadow: var(--md-sys-elevation-level-0) !important;
  }
button.m3-btn-tonal:hover, .m3-btn-tonal:hover {
  background-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  box-shadow: var(--md-sys-elevation-level-1) !important;
  }
button.m3-btn-outlined, .m3-btn-outlined {
  background: transparent !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  color: var(--md-sys-color-primary) !important;
  }
button.m3-btn-outlined:hover, .m3-btn-outlined:hover {
  background-color: var(--md-sys-color-surface-container-high) !important;
  border-color: var(--md-sys-color-primary) !important;
  }
button.m3-btn-text, .m3-btn-text {
  background-color: transparent !important;
  color: var(--md-sys-color-primary) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 12px !important;
  }
button.m3-btn-text:hover, .m3-btn-text:hover {
  background-color: var(--md-sys-color-surface-variant) !important;
  box-shadow: none !important;
  }
button.m3-btn-elevated, .m3-btn-elevated {
  background-color: var(--md-sys-color-surface-container-low) !important;
  color: var(--md-sys-color-primary) !important;
  box-shadow: var(--md-sys-elevation-level-1) !important;
  }
button.m3-btn-elevated:hover, .m3-btn-elevated:hover {
  box-shadow: var(--md-sys-elevation-level-2) !important;
  background-color: var(--md-sys-color-surface) !important;
  }
.ctp-copy-btn::before, .ctp-bundle-bk-btn::before, button.m3-btn.ctp-consult-submit-btn::before, .ctp-consult-toggle__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-duration-short) var(--md-sys-motion-standard);
  }
.ctp-copy-btn:hover::before, .ctp-bundle-bk-btn:hover::before, button.m3-btn.ctp-consult-submit-btn:not(:disabled):hover::before, .ctp-consult-toggle__btn:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
  }
.ctp-copy-btn:focus-visible::before, .ctp-copy-btn:active::before, .ctp-bundle-bk-btn:focus-visible::before, .ctp-bundle-bk-btn:active::before, button.m3-btn.ctp-consult-submit-btn:not(:disabled):focus-visible::before, button.m3-btn.ctp-consult-submit-btn:not(:disabled):active::before, .ctp-consult-toggle__btn:focus-visible::before, .ctp-consult-toggle__btn:active::before {
  opacity: 0.10;
  }
button.m3-btn.m3-btn-filled.ctp-consult-submit-btn {
  background-color: var(--ctp-brand-bar) !important;
  color: var(--md-sys-color-on-primary) !important;
  height: 48px !important;
  min-height: 48px !important;
  }
button.m3-btn.m3-btn-filled.ctp-consult-submit-btn:hover { background-color: var(--ctp-brand-bar-hover) !important; }
body.msb-pdp2 .ctp-consult-toggle { margin-top: var(--md-sys-spacing-xl, 24px); }
body.msb-pdp2 .ctp-consult-toggle__btn {
  list-style: none;
  cursor: pointer;
  min-height: 48px;
  border-radius: var(--md-sys-shape-corner-md, 12px);
  border: 1.5px solid var(--md-sys-color-primary);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  }
body.msb-pdp2 .ctp-consult-toggle__btn::-webkit-details-marker { display: none; }
body.msb-pdp2 .ctp-consult-toggle__btn:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
body.msb-pdp2 .ctp-consult-toggle__btn svg { color: var(--md-sys-color-primary); }
body.msb-pdp2 .ctp-consult-toggle[open] .ctp-consult-toggle__btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body.msb-pdp2 .ctp-consult-toggle .ctp-consult-card { margin-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
body.msb-pdp2 .ctp-consult-card .ctp-voucher-preview-box { display: none !important; }

/* Ẩn form gọi lại của plugin mi-smart-order (thay bằng form trên) */
body.msb-pdp2 #mibn-smart-order .mibn-callback { display: none !important; }

/* ===== 10. Khối "Nhắn Zalo / Gọi" giống mistorebacninh trong widget plugin (option msb_pdp2_contact = yes) — trích msb-pdp-v2.css, giới hạn trong #msb-contact-block ===== */
#msb-contact-block .ctp-m3-contact {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-sm);
  width: 100%;
  flex-wrap: nowrap;
  }
#msb-contact-block .ctp-m3-contact .zalo-chat-button {
  flex: 1;
  min-width: 0;
  background-color: var(--zalo-color) !important;
  height: 44px !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  overflow: hidden;
  padding: 0 16px !important;
  box-shadow: var(--md-sys-elevation-level-0);
  transition: box-shadow var(--md-sys-duration-short) var(--md-sys-motion-standard),
  filter var(--md-sys-duration-short) var(--md-sys-motion-standard);
  }
#msb-contact-block .ctp-m3-contact .zalo-chat-button:hover {
  box-shadow: var(--md-sys-elevation-level-1);
  filter: brightness(0.96);
  }
#msb-contact-block .ctp-m3-contact .zalo-badge-wrapper {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-sm);
  flex: 1;
  min-width: 0;
  }
#msb-contact-block .ctp-m3-contact .zalo-badge-wrapper svg {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  }
#msb-contact-block .ctp-m3-contact .zalo-chat-text {
  text-transform: none;
  white-space: normal;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: var(--md-sys-typescale-label-large);
  }
#msb-contact-block .ctp-m3-contact .separator {
  flex: 0 0 auto;
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
  }
#msb-contact-block .ctp-m3-contact .call-button-mini {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--md-sys-shape-corner-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-level-0);
  transition: box-shadow var(--md-sys-duration-short) var(--md-sys-motion-standard),
  background-color var(--md-sys-duration-short) var(--md-sys-motion-standard),
  color var(--md-sys-duration-short) var(--md-sys-motion-standard);
  }
#msb-contact-block .ctp-m3-contact .call-button-mini:hover {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-level-1);
  }
#msb-contact-block .ctp-m3-contact .call-button-mini svg, #msb-contact-block .ctp-m3-contact .call-button-mini img {
  width: 20px;
  height: auto;
  fill: currentColor;
  }
@media (max-width: 768px) {
#msb-contact-block .ctp-m3-contact .zalo-chat-text {
  font: var(--md-sys-typescale-label-medium);
  }
#msb-contact-block .ctp-m3-contact .separator {
  display: none;
  }
}
#msb-contact-block .msb-never {
  display: none !important;
  }
#msb-contact-block .msb-never {
  display: none;
  }

#msb-contact-block { margin: var(--md-sys-spacing-md, 12px) 0; }
#msb-contact-block #ctp-zalo-title { margin: 0 !important; color: var(--md-sys-color-on-surface-variant, #444); }
/* Ẩn dòng "Cần tư vấn sản phẩm?…" + khối Zalo/Gọi cũ của plugin (khối trên thay chỗ, JS đặt ngay sau) */
body.msb-pdp2 #mibn-smart-order .mibn-consult-note,
body.msb-pdp2 #mibn-smart-order .mibn-contact { display: none !important; }
/* Nút gọi tròn: lớp m3-icon-btn / m3-icon-btn-filled (nền cam, icon trắng như mistorebacninh) */
#msb-contact-block button.m3-icon-btn, #msb-contact-block .m3-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 10px !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  background-color: transparent !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard) !important;
  margin: 0 !important;
  text-decoration: none;
  }
#msb-contact-block button.m3-icon-btn:hover, #msb-contact-block .m3-icon-btn:hover {
  background-color: var(--md-sys-color-surface-variant) !important;
  color: var(--md-sys-color-on-surface) !important;
  }
#msb-contact-block button.m3-icon-btn:focus-visible, #msb-contact-block .m3-icon-btn:focus-visible {
  outline: 2px solid var(--md-sys-color-primary) !important;
  }
#msb-contact-block button.m3-icon-btn-filled, #msb-contact-block .m3-icon-btn-filled {
  background-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  }
#msb-contact-block button.m3-icon-btn-filled:hover, #msb-contact-block .m3-icon-btn-filled:hover {
  filter: brightness(0.95);
  background-color: var(--md-sys-color-primary) !important;
  }

#msb-contact-block .call-button-mini svg { display: block !important; width: 22px !important; height: 22px !important; fill: currentColor !important; }

/* ===== 11. Khung giá giống mistorebacninh thay khung giá plugin (option msb_pdp2_price = yes, body.msb-price-swapped) — trích msb-pdp-v2.css ===== */
.caothienphat-price-sold-box.ctp-price-card {
  margin: 10px 0 0 0;
  padding: var(--md-sys-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-md);
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-lg);
  box-shadow: var(--md-sys-elevation-level-0);
  container-type: inline-size;
  }
.ctp-price-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-spacing-sm);
  }
.ctp-price-card .price-title {
  margin: 0;
  font: var(--md-sys-typescale-label-large) !important;
  color: var(--md-sys-color-on-surface-variant);
  }
.ctp-price-card .ctp-discount-badge {
  background: var(--md-sys-color-primary-strong, var(--md-sys-color-primary));
  color: var(--md-sys-color-on-primary) !important;
  border: 0;
  border-radius: var(--md-sys-shape-corner-xs);
  padding: 1px 6px;
  font: var(--md-sys-typescale-label-medium);
  }
.ctp-price-card .woocommerce-product-sold {
  margin-inline-start: auto;
  padding: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant) !important;
  font: var(--md-sys-typescale-label-medium);
  }
.ctp-price-sold-wrapper {
  display: block;
  }
.caothienphat-price-sold-box p.price {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--md-sys-spacing-sm);
  font: var(--md-sys-typescale-price-hero);
  color: var(--md-sys-color-primary-strong, var(--md-sys-color-primary));
  font-variant-numeric: tabular-nums;
  }
.ctp-price-card:has(.ctp-final-price:not([hidden])) p.price {
  font: var(--md-sys-typescale-price-xlarge);
  }
.caothienphat-price-sold-box p.price .price, .caothienphat-price-sold-box p.price ins, .caothienphat-price-sold-box p.price .woocommerce-Price-amount {
  font: inherit;
  color: inherit;
  text-decoration: none;
  background: transparent;
  }
.caothienphat-price-sold-box p.price del {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant) !important;
  font: var(--md-sys-typescale-price-del-medium);
  font-weight: 400;
  opacity: 1;
  }
.caothienphat-price-sold-box p.price .woocommerce-Price-currencySymbol {
  font-size: 1em !important; 
  vertical-align: baseline !important;
  }
.caothienphat-price-sold-box p.price del .woocommerce-Price-amount {
  font: inherit;
  color: inherit;
  }
.msb-never {
  display: none !important;
  }
.msb-never {
  flex: 0 0 auto;
  white-space: nowrap;
  }

/* Plugin ẩn mọi .woocommerce-product-sold (!important) — hiện lại "Đã Bán N" trong thẻ giá */
body.msb-pdp2 .ctp-price-card .ctp-price-card__head .woocommerce-product-sold {
  display: inline-flex !important; visibility: visible !important; width: auto !important; height: auto !important;
  overflow: visible !important; padding: revert-layer !important; margin: revert-layer !important;
}
/* Nhóm tiêu đề + giá của plugin: bỏ khung bao ngoài để tiêu đề và thẻ giá đứng riêng như mistorebacninh */
body.msb-price-swapped .product-info .mibn-price-title-group { border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
body.msb-price-swapped .mibn-price-title-group .ctp-price-card { margin-bottom: var(--md-sys-spacing-md, 12px); }

/* ===== 12. Nút Bảo Kim MUA NGAY / TRẢ GÓP 0% (option msb_pdp2_bk, body.msb-bk-on) — trích msb-pdp-v2.css ===== */
.ctp-copy-btn::before, .ctp-bundle-bk-btn::before, button.m3-btn.ctp-consult-submit-btn::before, .ctp-consult-toggle__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-duration-short) var(--md-sys-motion-standard);
  }
.ctp-copy-btn:hover::before, .ctp-bundle-bk-btn:hover::before, button.m3-btn.ctp-consult-submit-btn:not(:disabled):hover::before, .ctp-consult-toggle__btn:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
  }
.ctp-copy-btn:focus-visible::before, .ctp-copy-btn:active::before, .ctp-bundle-bk-btn:focus-visible::before, .ctp-bundle-bk-btn:active::before, button.m3-btn.ctp-consult-submit-btn:not(:disabled):focus-visible::before, button.m3-btn.ctp-consult-submit-btn:not(:disabled):active::before, .ctp-consult-toggle__btn:focus-visible::before, .ctp-consult-toggle__btn:active::before {
  opacity: 0.10;
  }
.ctp-bundle-bk-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: var(--md-sys-spacing-sm) !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  }
.ctp-bundle-bk-btn {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  padding: 4px 10px !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: box-shadow var(--md-sys-duration-short) var(--md-sys-motion-standard),
  background-color var(--md-sys-duration-short) var(--md-sys-motion-standard),
  border-color var(--md-sys-duration-short) var(--md-sys-motion-standard) !important;
  border: none !important;
  box-sizing: border-box !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  outline: none !important;
  }
.ctp-bundle-bk-paynow {
  background-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  box-shadow: var(--md-sys-elevation-level-0) !important;
  }
.ctp-bundle-bk-paynow:hover {
  background-color: var(--md-sys-color-primary) !important;
  box-shadow: var(--md-sys-elevation-level-1) !important;
  filter: brightness(0.96) !important;
  color: var(--md-sys-color-on-primary) !important;
  }
.ctp-bundle-bk-paynow:active {
  box-shadow: var(--md-sys-elevation-level-0) !important;
  }
.ctp-bundle-bk-installment {
  background-color: var(--md-sys-color-primary-container) !important;
  color: var(--md-sys-color-on-primary-container) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  box-shadow: var(--md-sys-elevation-level-0) !important;
  }
.ctp-bundle-bk-installment:hover {
  background-color: var(--md-sys-color-primary-container) !important;
  color: var(--md-sys-color-on-primary-container) !important;
  box-shadow: var(--md-sys-elevation-level-1) !important;
  filter: brightness(0.96) !important;
  border-color: var(--md-sys-color-outline) !important;
  }
.ctp-bundle-bk-installment:active {
  box-shadow: var(--md-sys-elevation-level-0) !important;
  }
.ctp-bk-btn-title {
  font: var(--md-sys-typescale-label-large) !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  width: 100%;
  display: block !important;
  line-height: 1.35 !important;
  }
.ctp-bk-btn-sub {
  font: var(--md-sys-typescale-label-small) !important;
  opacity: 0.92;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  width: 100%;
  margin-top: 1px;
  display: block !important;
  line-height: 1.35 !important;
  }
.ctp-bundle-bk-actions .ctp-bundle-bk-paynow {
  background-color: var(--ctp-brand-bar) !important;
  color: var(--md-sys-color-on-primary) !important;
  }
.ctp-bundle-bk-actions .ctp-bundle-bk-paynow:hover {
  background-color: var(--ctp-brand-bar-hover) !important;
  filter: none !important;
  }
.ctp-bundle-bk-actions .ctp-bundle-bk-paynow:active {
  background-color: var(--ctp-brand-bar-pressed) !important;
  }
.ctp-bundle-bk-actions .ctp-bundle-bk-btn:focus-visible {
  outline: 3px solid var(--md-sys-color-on-surface) !important;
  outline-offset: 2px !important;
  }
.ctp-bundle-bk-actions .ctp-bk-btn-sub {
  font-size: 12px !important;
  opacity: 1 !important;
  }
@media (max-width: 480px) {
.ctp-bundle-bk-actions .ctp-bundle-bk-btn { padding-left: 2px !important; padding-right: 2px !important; }
.ctp-bundle-bk-actions .ctp-bk-btn-sub { letter-spacing: -0.2px; }
}
@media (max-width: 380px) {
.ctp-bundle-bk-actions .ctp-bundle-bk-btn { padding-left: 0 !important; padding-right: 0 !important; }
.ctp-bundle-bk-actions .ctp-bk-btn-sub { letter-spacing: -0.4px; }
}
.ctp-bundle-bk-actions .ctp-bundle-bk-btn {margin:0 !important}
.ctp-bundle-bk-actions { align-items: stretch !important; }
body.msb-pdp2 .ctp-top-bk-actions .ctp-bundle-bk-btn { margin: 0 !important; flex: 1 1 0; min-width: 0; }

/* Nút gốc của Bảo Kim chỉ làm cầu nối ngầm */
body.msb-pdp2 .bk-btn,
body.msb-pdp2 .bk-btn-box,
body.msb-pdp2 .bk-btn-paynow,
body.msb-pdp2 .bk-btn-installment,
body.msb-pdp2 #bk-btn-paynow,
body.msb-pdp2 #bk-btn-installment,
body.msb-pdp2 .bk-promotion {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
body.msb-pdp2 #bk-modal-b2b,
body.msb-pdp2 #bk-modal-payment,
body.msb-pdp2 .bk-modal,
body.msb-pdp2 .bk-modal-content { pointer-events: auto !important; }
/* Bật Bảo Kim: ẩn nút "ĐẶT MUA NGAY – Thanh toán tại nhà" của plugin mi-smart-order */
/* Plugin: .single-product .product-info .mibn-pay-toolbar.mibn-single-order-only { display:flex !important } — viết đè cụ thể hơn */
body.msb-bk-on.single-product .product-info .mibn-pay-toolbar,
body.msb-bk-on.single-product .product-info .mibn-pay-toolbar.mibn-single-order-only { display: none !important; }
body.msb-bk-on .mibn-price-title-group .ctp-top-bk-actions { margin: 0 0 var(--md-sys-spacing-md, 12px) !important; }