/* SPA commerce additions */
.cart-link { position: relative; }
[data-cart-count] { display:inline-grid; place-items:center; min-width:22px; height:22px; margin-left:4px; border-radius:999px; background:var(--color-primary); color:#fff; font-size:.78rem; }
.product-catalog { display:grid; gap:42px; }
.category-section { scroll-margin-top:96px; }
.category-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.category-head h3 { font-size:clamp(1.55rem,3vw,2.35rem); }
.btn-ghost { border:1px solid var(--color-border); background:#fff; color:var(--color-primary-dark); cursor:pointer; }
.category-product.is-extra { display:none; }
.category-section.is-expanded .category-product.is-extra { display:block; }
.view-more-bottom { display:flex; justify-content:center; margin:20px 0 8px; }
.search-status { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; margin:0 0 24px; border:1px solid var(--color-border); border-radius:18px; background:var(--color-primary-light); color:var(--color-primary-dark); font-weight:700; }
.search-status .btn { padding:8px 16px; font-size:.9rem; }
@media (max-width:560px){ .search-status { flex-direction:column; align-items:stretch; text-align:center; } }
.product-image-wrap { position:relative; }
.badge { position:absolute; top:10px; left:10px; padding:6px 9px; border-radius:999px; color:#fff; font-size:.74rem; font-weight:900; }
.badge.hot { background:#ff7a1a; }
.badge.sale { left:auto; right:10px; background:var(--color-primary-dark); }
.product-type { color:var(--color-text-secondary); font-size:.86rem; font-weight:700; }
.page-view h1 { font-size:clamp(1.8rem,3.5vw,2.6rem); margin:0 0 24px; }
.product-detail .detail-title { font-size:clamp(1.35rem,2.2vw,2.1rem); line-height:1.18; }
.policy-page article, .checkout-form, .cart-summary, .detail-info { border:1px solid var(--color-border); border-radius:26px; background:rgba(255,255,255,.82); box-shadow:var(--shadow-soft); padding:clamp(20px,4vw,34px); }
.policy-page article { margin-top:24px; scroll-margin-top:96px; }
.policy-toc { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.policy-toc a { padding:12px 16px; border-radius:999px; background:var(--color-primary-light); color:var(--color-primary-dark); font-weight:800; }
.product-detail-grid, .checkout-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(320px,1fr); gap:clamp(24px,5vw,56px); align-items:start; }
.detail-gallery img { width:100%; border-radius:28px; box-shadow:var(--shadow-lift); cursor:zoom-in; }
.detail-gallery span { display:block; margin-top:12px; color:var(--color-text-secondary); }
.detail-info label, .checkout-form { display:grid; gap:12px; }
.detail-info select, .detail-info input, .checkout-form input:not([type="radio"]):not([type="checkbox"]), .checkout-form textarea { width:100%; min-height:48px; border:1px solid var(--color-border); border-radius:14px; padding:12px 14px; background:#fff; }
.detail-actions { display:flex; gap:12px; flex-wrap:wrap; margin:12px 0 24px; }
.checkout-form textarea { min-height:96px; resize:vertical; }
.cart-summary { position:sticky; top:96px; }
.cart-line { display:grid; grid-template-columns:72px 1fr auto auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--color-border); }
.cart-line img { width:72px; height:72px; object-fit:cover; border-radius:14px; }
.cart-line p { margin:3px 0; color:var(--color-text-secondary); }
.qty { display:flex; align-items:center; gap:4px; }
.qty input { width:48px; text-align:center; border:1px solid var(--color-border); border-radius:10px; padding:8px; }
.qty button, .remove { border:1px solid var(--color-border); border-radius:10px; background:#fff; cursor:pointer; min-width:34px; min-height:34px; }
.remove { color:var(--color-primary-dark); font-size:1.3rem; }
.summary-row, .summary-total { display:flex; justify-content:space-between; gap:12px; margin-top:16px; }
.summary-total { padding-top:16px; border-top:1px solid var(--color-border); font-size:1.25rem; font-weight:900; }
#bank-qr { margin-top:18px; text-align:center; }
#bank-qr img { margin:auto; border-radius:18px; }
.empty-cart { padding:24px; text-align:center; }
#order-message { font-weight:800; color:var(--color-primary-dark); }
.checkout-submit { display:flex; flex-direction:column; gap:10px; }
.checkout-submit .btn { width:100%; }
@media (min-width: 861px) { .checkout-grid { grid-template-rows:auto auto; } .checkout-form { grid-column:1; grid-row:1; } .cart-summary { grid-column:2; grid-row:1 / span 2; } .checkout-submit { grid-column:1; grid-row:2; } }
@media (max-width: 860px) { .product-detail-grid, .checkout-grid { grid-template-columns:1fr; } .checkout-grid { display:flex; flex-direction:column; } .checkout-form { order:1; } .cart-summary { position:static; order:2; } .checkout-submit { order:3; } .cart-line { grid-template-columns:60px 1fr; } .qty, .remove { grid-column:2; justify-self:start; } }

/* Cart icon button */
.cart-icon-btn {
  position: relative;
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  color: var(--color-primary);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.cart-icon-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(249,71,133,.45);
  background: var(--color-primary-light);
}
.cart-icon-btn [data-cart-count] {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: .7rem; font-weight: 800;
  display: inline-grid; place-items: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Heading scoped — trang sản phẩm */
.detail-section-title {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  margin: 28px 0 8px;
  letter-spacing: -.01em;
}
.product-detail h2.detail-section-title { font-size: inherit; }

/* Rich text (Markdown / xuống dòng) cho mô tả, thành phần, hướng dẫn */
.rich-text { line-height: 1.6; color: inherit; }
.rich-text p { margin: 0 0 0.7em; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text ul, .rich-text ol { padding-left: 1.3em; margin: 0.4em 0 0.8em; }
.rich-text li { margin-bottom: 0.25em; }
.rich-text strong, .rich-text b { font-weight: 600; }
.rich-text em, .rich-text i { font-style: italic; }
.rich-text a { color: var(--brand, #c51f5a); text-decoration: underline; }
.rich-text h2, .rich-text h3, .rich-text h4 {
  font-size: 1.05em; font-weight: 600; margin: 0.8em 0 0.3em; line-height: 1.3;
}
.rich-text code {
  background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; font-size: .92em;
}
.rich-text blockquote {
  border-left: 3px solid var(--brand, #c51f5a); padding-left: 12px; margin: 0.6em 0; color: #666;
}

/* Heading scoped — trang thanh toán */
.checkout-section-title {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  margin: 20px 0 8px;
  letter-spacing: -.01em;
}
.checkout-page h2.checkout-section-title { font-size: inherit; }
.checkout-form > .checkout-section-title:first-child { margin-top: 0; }

/* Heading scoped — policy */
.policy-article-title {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -.02em;
}
.policy-page h2.policy-article-title { font-size: inherit; }

/* Heading scoped — empty cart */
.empty-cart-title {
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  margin: 0 0 16px;
}
.empty-cart h2.empty-cart-title { font-size: inherit; }

/* Payment option custom radio */
.checkout-form .payment-options {
  display: grid;
  gap: 10px;
  margin: 4px 0 8px;
}
.checkout-form .payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.checkout-form .payment-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.checkout-form .payment-option input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  min-height: 0;
  margin: 0; flex-shrink: 0;
  border: 2px solid #c4c4cf;
  border-radius: 50%;
  background: #fff;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 180ms ease;
}
.checkout-form .payment-option input[type="radio"]:checked {
  border-color: var(--color-primary);
}
.checkout-form .payment-option input[type="radio"]:checked::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Discount code */
.discount-box { margin-top: 18px; padding: 14px; border: 1px dashed var(--color-border); border-radius: 14px; background: rgba(255,255,255,.6); }
.discount-label { display:block; font-weight:800; margin-bottom:8px; color:var(--color-primary-dark); }
.discount-input-row { display:flex; gap:8px; }
.discount-input-row input { flex:1; min-height:42px; border:1px solid var(--color-border); border-radius:12px; padding:10px 12px; background:#fff; text-transform:uppercase; }
.discount-input-row input:disabled { background:#f7f7f9; color:#666; }
.discount-input-row .btn { padding:10px 16px; }
.discount-message { margin:8px 0 0; font-size:.88rem; min-height:1.1em; color:var(--color-text-secondary); }
.discount-message.error { color:#c0392b; }
.discount-message.ok { color:#0a8a4a; }
.summary-row.discount-row strong { color:#0a8a4a; }
.subtotal-strike { color:var(--color-text-secondary); margin-right:8px; font-weight:600; }
.bank-note { margin-top:12px; font-weight:700; color:var(--color-primary-dark); }
.bank-note-secondary { margin-top:6px; font-size:.86rem; color:var(--color-text-secondary); }

/* Order success page */
.order-success .success-container { max-width:680px; margin:auto; text-align:center; padding:clamp(24px,5vw,48px); border:1px solid var(--color-border); border-radius:26px; background:rgba(255,255,255,.9); box-shadow:var(--shadow-soft); }
.order-success .success-icon { display:inline-grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--color-primary-light); color:var(--color-primary-dark); font-size:2.4rem; font-weight:900; margin-bottom:16px; }
.order-success h1 { margin:0 0 12px; }
.order-success .order-id { font-size:1rem; color:var(--color-text-secondary); margin:0 0 16px; }
.order-success .success-thanks { font-size:1.05rem; margin:0 0 18px; }
.order-success .success-note { text-align:left; margin:18px 0; padding:16px 18px; border-radius:16px; background:var(--color-primary-light); border:1px solid rgba(249,71,133,.2); }
.order-success .success-note h3 { margin:0 0 8px; font-size:1.05rem; color:var(--color-primary-dark); }
.order-success .success-note p { margin:6px 0; line-height:1.5; }
.order-success .success-note a { color:var(--color-primary-dark); font-weight:800; text-decoration:underline; }
.order-success .success-contact { margin:18px 0; }
.order-success .success-contact a { color:var(--color-primary-dark); font-weight:800; }
.order-success .btn { margin-top:8px; }

/* Popup / modal thông báo */
.mth-popup { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; }
.mth-popup[hidden] { display:none; }
.mth-popup-overlay { position:absolute; inset:0; background:rgba(20,8,14,.55); backdrop-filter:blur(2px); }
.mth-popup-box { position:relative; width:min(420px,92vw); background:#fff; border-radius:20px; padding:clamp(22px,5vw,30px); text-align:center; box-shadow:var(--shadow-soft); border:1px solid var(--color-border); animation:mthPopupIn .18s ease-out; }
.mth-popup-box:focus { outline:none; }
.mth-popup-box p { margin:0 0 18px; font-size:1.05rem; font-weight:600; line-height:1.5; color:var(--color-text-primary); }
.mth-popup-box .btn { min-width:120px; }
body.popup-open { overflow:hidden; }
@keyframes mthPopupIn { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }