/* WooCommerce-specific styles cho Hưng Phát Laptop theme.
 * Load có điều kiện chỉ trên WC pages.
 */

/* ============ ARCHIVE / SHOP LAYOUT ============ */
/* DOM là main-trước-sidebar. Desktop đặt cột TƯỜNG MINH (KHÔNG dùng order:-1): main luôn ở
   cột 2 (1fr) kể cả khi sidebar CHƯA parse lúc HTML stream. order:-1 khiến main bị auto-place
   vào cột 1 (290px) lúc chỉ mình nó tồn tại rồi NHẢY sang cột 2 khi sidebar tới → lưới card
   re-layout, CLS 0.40 (desktop, mạng chậm; đo Chrome Slow4G/CPU4x, bimodal). grid-column diệt gốc. */
@media (min-width: 1081px) {
  /* grid-row:1 BẮT BUỘC: DOM là main-trước-sidebar, chỉ gán grid-column thì thuật toán
     auto-place (sparse) đẩy sidebar (cột 1, DOM sau) xuống HÀNG 2 = nằm dưới pagination.
     Ghim cả hai vào hàng 1 → sidebar trái / main phải, cùng hàng. */
} /* bỏ sticky (anh Phát 2026-07-02) */
[data-theme="dark"] .hp-shop__heading { background: var(--bg); }
.hp-page-description table {
  width: 100% !important;
  max-width: 100%;
  table-layout: fixed;
}

/* Sort bar */
[data-theme="dark"] .hp-sort-bar { background: var(--bg); }

/* Product grid */

/* ============ SINGLE PRODUCT (PDP) ============ */
[data-theme="dark"] .hp-pdp__gallery { background: var(--bg); }
[data-theme="dark"] .hp-pdp__info { background: var(--bg); }
.hp-pdp__rating .stars { color: #ffb800; }
[data-theme="dark"] .hp-pdp__option-pill { background: transparent; }

/* Tabs */
[data-theme="dark"] .hp-pdp-tabs { background: var(--bg); }

/* Spec table */

/* Reviews */

/* Cart */
.woocommerce-cart .hp-main { padding: 24px 0; }
.woocommerce-cart-form { background: #fff; border-radius: var(--radius-lg); padding: 20px; border: 1px solid var(--line); }
[data-theme="dark"] .woocommerce-cart-form { background: var(--bg); }
.woocommerce-cart-form table { width: 100%; }
.woocommerce-cart-form th, .woocommerce-cart-form td { padding: 12px; border-bottom: 1px solid var(--line); }
[data-theme="dark"] .cart_totals { background: var(--bg-3); }

/* Checkout 4-step */
[data-theme="dark"] .hp-checkout__step { background: var(--bg); }
[data-theme="dark"] .hp-checkout__sidebar { background: var(--bg); }

/* Form fields */
[data-theme="dark"] .hp-field input, [data-theme="dark"] .hp-field select, [data-theme="dark"] .hp-field textarea { background: var(--bg); }

/* Payment options */

/* ============================================================ */
/* === PDP — Pixel-perfect theo design HPStore (detail.jsx) === */
/* ============================================================ */

.pdp { padding: 0 0 40px; }
.pdp-container { max-width: 1320px; }
.pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 300px;
  gap: 20px;
  margin: 16px 0;
}
.pdp-grid > * { min-width: 0; }
@media (max-width: 1200px) { .pdp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pdp-side { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; } }
/* Hàng card Cam kết / Quyền lợi / Khuyến mãi — auto 3 cột (2 nếu không có quà) */
.pdp-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; align-items: stretch; }
/* iPad/tablet: ép 2 cột + card lẻ cuối trải full-width → hết dư trống phải khi có 3 hộp */
@media (min-width: 561px) and (max-width: 1200px) {
  .pdp-perks { grid-template-columns: repeat(2, 1fr); }
  .pdp-perks > .pdp-side-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Hộp quà full-width: text nửa trái, hình quà nửa phải (gọn hơn) */
  .pdp-perks > .pdp-gift-card:last-child:nth-child(odd) {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head media" "list media";
    column-gap: 28px; align-items: start;
  }
  .pdp-perks > .pdp-gift-card:last-child:nth-child(odd) .psc-title-modern { grid-area: head; }
  .pdp-perks > .pdp-gift-card:last-child:nth-child(odd) .benefit-list-modern { grid-area: list; }
  .pdp-perks > .pdp-gift-card:last-child:nth-child(odd) .gift-grid {
    grid-area: media; align-self: center;
    margin-top: 0; padding-top: 0; border-top: 0;
    border-left: 1px dashed var(--line); padding-left: 24px;
  }
}
@media (max-width: 900px)  { .pdp-grid { grid-template-columns: minmax(0, 1fr); } .pdp-side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .pdp-side { grid-template-columns: 1fr; } }
@media (max-width: 768px)  { .pdp-gallery-card { padding: 0; border-radius: 0; box-shadow: none; border-left: 0; border-right: 0; } }

/* Gallery */
.pdp-gallery-wrap { display: flex; flex-direction: column; gap: 14px; }
.pdp-gallery-card {
  background: #fff; border-radius: 12px;
  padding: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  position: relative;
  border: 1px solid var(--line);
}
.pdp-gallery-card .main {
  aspect-ratio: 1/1; border-radius: 8px;
  background: #fff; overflow: hidden; position: relative;
  padding: 6px;
  display: flex; align-items: center; justify-content: center;
}
.pdp-gallery-card .main img { width: 100%; height: 100%; object-fit: contain; }
.pdp-main-placeholder { font-size: 80px; opacity: .3; }
.pdp-gallery-card .thumbs {
  display: grid; grid-template-columns: repeat(5,1fr);
  gap: 8px; margin-top: 12px;
}
.pdp-gallery-card .thumbs .t {
  aspect-ratio: 1/1; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; overflow: hidden;
  background: #fff; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.pdp-gallery-card .thumbs .t img { width: 100%; height: 100%; object-fit: contain; padding: 0; }
.pdp-gallery-card .thumbs .t.active { border-color: var(--red); }
/* iPad/mobile: thumbs cuộn ngang, kích thước ổn định (tránh grid 5 cột chen nhỏ → "bể hình") */
@media (max-width: 1024px) {
	.pdp-gallery-card .thumbs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
	.pdp-gallery-card .thumbs .t { flex: 0 0 70px; }
}

.pdp-badge-genuine {
  position: absolute; top: 14px; left: 14px;
  background: #1565c0; color: #fff !important;
  padding: 5px 14px; border-radius: 99px;
  font-size: 12px; font-weight: 700; z-index: 2;
  box-shadow: 0 4px 12px rgba(21,101,192,.35);
}
.pdp-badge-hot {
  position: absolute; top: 14px; right: 14px;
  background: linear-gradient(135deg, #ff6b00, var(--red));
  color: #fff !important;
  padding: 5px 14px; border-radius: 99px;
  font-size: 12px; font-weight: 700; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 4px 12px rgba(221,51,51,.35);
}
.pdp-badge-hot[hidden] { display: none !important; }

/* Trust strip */
.pdp-trust-strip {
  background: #fff; border-radius: 12px;
  padding: 14px 18px;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  border: 1px solid var(--line);
}
.pts-item {
  display: flex; gap: 10px; align-items: center;
  padding: 4px 8px;
  border-right: 1px solid var(--line);
}
.pts-item:last-child { border-right: 0; }
.pts-ico {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--red-50); color:var(--red-ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pts-h { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.pts-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.2; }

/* Info column */
.pdp-info {
  background: #fff; border-radius: 12px;
  padding: 22px;
  border: 1px solid var(--line);
}
.pdp-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pdp-brand-tag {
  background: var(--ink); color: #fff !important;
  padding: 4px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pdp-sku {
  font-size: 11.5px; color: var(--muted);
  font-family: ui-monospace, monospace;
}
.pdp-title {
  font-size: 22px; font-weight: 700; line-height: 1.3;
  margin: 0 0 14px; color: var(--ink);
  letter-spacing: -0.005em;
}
.pdp-rating-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pdp-rating-row .stars { color: #f5a524; display: inline-flex; gap: 1px; }
.pdp-rating-row .rating-link { color: var(--ink-2); text-decoration: underline; }
.pdp-rating-row .rating-sep { opacity: .4; }
.pdp-rating-row .rating-sold { color: var(--muted); }
.pdp-rating-row .rating-stock { color: #15803d; font-weight: 600; }

/* Price hero — có khung, padding gọn */
.pdp-price-hero {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  padding: 10px 14px;
  margin: 0 0 12px;
}
.pph-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.pph-label { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pph-now { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color:var(--red-ink); white-space: nowrap; }
.pph-now .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.pph-was {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 400 !important;
  letter-spacing: 0;
  margin-left: 4px;
}
.pph-was .woocommerce-Price-amount,
.pph-was .woocommerce-Price-currencySymbol {
  color: inherit !important;
  font-size: inherit;
  font-weight: 400 !important;
}
.pph-disc { background: var(--red); color: #fff !important; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.pph-installment { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.pph-installment svg { width: 16px; height: 16px; color:var(--red-ink); }
.pph-installment strong { font-weight: 700; color:var(--red-ink); }
@media (max-width: 480px) {
  .pph-now { font-size: 19px; }
  .pph-was { font-size: 12px; margin-left: 0; }
}

/* Spec chips grid */
.pdp-spec-chips {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 18px;
}
.pdp-spec-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}
.pdp-spec-chip.wide { grid-column: 1 / -1; }
.pdp-spec-chip .psc-ic {
  background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 700;
  padding: 4px 8px; border-radius: 4px;
  letter-spacing: 0.04em;
  flex-shrink: 0; min-width: 36px; text-align: center;
}
.pdp-spec-chip .psc-l { font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; line-height: 1; }
.pdp-spec-chip .psc-v { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 2px; }

/* Variant block */
.pdp-variant-block { margin-bottom: 16px; }
.pvb-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 700; margin-bottom: 10px;
}
.pvb-label span:first-child { color: var(--ink); }
.pvb-count { font-size: 11px; color: var(--muted); font-weight: 500; }
.variant-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.variant-card {
  position: relative;
  border: 2px solid var(--line); border-radius: 10px;
  padding: 16px 14px; cursor: pointer;
  background: #fff;
  text-align: center;
  transition: all .15s;
}
.variant-card:hover { border-color: var(--red); }
.variant-card.active {
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 4px 12px rgba(221,51,51,.08);
}
.vc-check { display: none; }
.variant-card.active .vc-check {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: -2px; left: -2px;
  width: 22px; height: 22px;
  border-radius: 9px 0 12px 0;
  background: var(--red); color: #fff;
}
.variant-card.active .vc-check svg { width: 11px; height: 11px; transform: translate(-1px,-1px); }
.vc-body { padding-top: 0; }
.vc-prices {
  /* Giá nhỏ, canh GIỮA, nằm dưới nhãn cấu hình. Có giảm giá thì hiện thêm giá gạch.
     flex-wrap: card ở lưới 2 cột trên mobile khá hẹp, 2 mức giá không đủ 1 dòng thì
     tự xuống hàng thay vì tràn ra ngoài. align-items:baseline để 2 cỡ chữ khác nhau
     vẫn nằm trên cùng đường chân chữ. */
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: center;
  gap: 4px 7px; margin-top: 9px;
}
.vc-was {
  /* 1.7.72: bỏ opacity .85 — nó kéo var(--muted) #6b7280 xuống ~3.6:1 trên nền trắng
     (Lighthouse a11y color-contrast fail trên thẻ biến thể). Giữ var(--muted) để dark mode
     tự đổi #9ca3af; light mode #6b7280 nguyên opacity = 4.83:1 (đạt AA). */
  font-size: 11px; font-weight: 500;
  color: var(--muted); text-decoration: line-through;
  text-decoration-thickness: 1px; opacity: 1;
}
.vc-price {
  font-size: 13.5px; font-weight: 700;
  color:var(--red-ink); letter-spacing: -.01em;
  white-space: nowrap;
}
/* wc_price() bọc số tiền trong <span class="woocommerce-Price-amount amount">, mà rule
   toàn cục ".woocommerce-Price-amount.amount" đặt font-size:1.3em + color:#dd3333 +
   font-weight:700 => nó ĐÈ lên .vc-was/.vc-price. Phải nhắm thẳng thẻ lồng bên trong,
   nếu không giá cũ sẽ ra ĐỎ và to 1.3 lần thay vì xám mờ. */
.vc-was .woocommerce-Price-amount.amount {
  font-size: 1em; font-weight: 500; color: inherit;
}
.vc-price .woocommerce-Price-amount.amount {
  font-size: 1em; font-weight: 700; color: inherit;
}
.vc-label {
  font-size: 12.5px; font-weight: 700; line-height: 1.5;
  color: var(--ink); margin: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Key info boxes (2 box: short_desc + variation_desc) */
.pdp-key-info {
  padding: 14px 18px; margin: 12px 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-2);
  font-size: 13.5px; line-height: 2;
  color: var(--ink);
}
.pdp-key-info ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.pdp-key-info ul li {
  position: relative;
  padding-left: 0;
}
.pdp-key-info--variation ul li::before { display: none; }
.pdp-key-info ul li strong { font-weight: 700; color: var(--ink); }
.pdp-spec-icon { width: 16px; text-align: center; color:var(--red-ink); font-size: 15px; flex-shrink: 0; margin-right: 5px; vertical-align: middle; }
.pdp-key-info--variation { background: #fff; }
.pdp-key-info--side {
  background: #fff;
  padding: 16px 18px;
  margin: 0;
}

/* Buybar */
.pdp-buybar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pdp-buybar .qty {
  display: inline-flex; border: 1.5px solid var(--line); border-radius: 8px;
  overflow: hidden; height: 52px;
}
.pdp-buybar .qty button { width: 38px; background: #fff; border: 0; font-size: 18px; color: var(--ink); cursor: pointer; }
.pdp-buybar .qty input {
  width: 46px; border: 0; text-align: center;
  font: inherit; font-size: 14px; font-weight: 700;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background: #fff; color: var(--ink); appearance: none; -moz-appearance: textfield;
}
.pdp-buybar .qty input::-webkit-outer-spin-button,
.pdp-buybar .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-buy-now {
  width: 100%;
  padding: 16px 20px; height: 52px;
  background: linear-gradient(135deg, var(--red), #b82525);
  color: #fff !important;
  border: 0; border-radius: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 6px 16px rgba(221,51,51,.28);
}
.btn-buy-now:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(221,51,51,.4); color: #fff !important; }
.btn-add-cart {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px;
  padding: 13px;
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink) !important;
  border-radius: 8px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none !important;
}
.btn-add-cart:hover { background: var(--ink); color: #fff !important; }

.btn-call-order {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 13px;
  background: var(--red-50, #fde8e8);
  border: 1.5px solid rgba(221,51,51,.25);
  color: var(--red-600, #c42828) !important;
  border-radius: 8px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .15s; text-decoration: none !important;
}
.btn-call-order:hover { background: rgba(221,51,51,.12); color: var(--red-600, #c42828) !important; }
.btn-call-order strong { font-weight: 700; }
[data-theme="dark"] .btn-call-order,
[data-theme="dark"] .btn-call-order:hover { color: #f87171 !important; }
[data-theme="dark"] .pdp-rating-row .rating-stock { color: #4ade80; }

.btn-text--short { display: none; }
@media (max-width: 480px) {
  .btn-text--full { display: none; }
  .btn-text--short { display: inline; }
}
.btn-add-cart-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 52px;
  padding: 16px 20px;
  background: var(--ink); color: #fff !important;
  border: 0; border-radius: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 6px 16px rgba(20,20,20,.18);
}
.btn-add-cart-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(20,20,20,.26); color: #fff !important; }
[data-theme="dark"] .btn-add-cart-primary {
  background: var(--bg-3);
  color: var(--ink) !important;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
[data-theme="dark"] .btn-add-cart-primary:hover {
  background: var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

/* --- Hết hàng / Ngừng kinh doanh --------------------------------------- *
 * Ẩn/hiện nút theo class .pdp-buybar--oos (KHÔNG dùng [hidden] vì nút display:flex
 * đè lên UA style [hidden]{display:none} khiến không ẩn được). */
.pdp-buybar--oos .btn-add-cart-primary,
.pdp-buybar--oos .btn-buy-now { display: none !important; }
.pdp-buybar:not(.pdp-buybar--oos) .btn-oos { display: none !important; }
.btn-oos {
  grid-column: 1 / -1;                 /* chiếm trọn hàng thay 2 nút Thêm giỏ + Mua ngay */
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 52px; padding: 0 20px;
  background: #f4f5f7; color: #5b6472 !important;
  border: 1.5px solid #e3e6ea; border-radius: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  cursor: not-allowed; user-select: none;
}
.btn-oos i { font-size: 15px; color: #c0392b; opacity: .8; }   /* icon đỏ nhạt: tín hiệu hết hàng */
[data-theme="dark"] .btn-oos {
  background: rgba(255, 255, 255, .05); color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] .btn-oos i { color: #f87171; opacity: .85; }

/* Biến thể hết hàng/ngừng KD: làm mờ nhẹ + giá xám (vẫn chọn được để xem thông tin) */
[data-theme="dark"] .vc-oos-tag { background: rgba(248, 113, 113, .16); color: #f87171; }

/* Side cards */
/* Base flex CHỈ cho desktop (pdp-side là cột 300px) — KHÔNG đè display:grid ở ≤1200 */
@media (min-width: 1201px) { .pdp-side { display: flex; flex-direction: column; gap: 14px; } }
.pdp-side { gap: 14px; }
.pdp-side-card {
  background: #fff; border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
}
.pdp-gift-card { background: #fff; border-color: var(--line); }
.psc-title-modern {
  font-size: 13px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 14px;
}
.ptm-icon-fa { color:var(--red-ink); font-size: 16px; width: 20px; text-align: center; }

/* Cam kết bản quyền phần mềm — khối nổi bật */
.pdp-license-card { background: linear-gradient(180deg, var(--red-50), #fff); border-color: rgba(221, 51, 51, .28); }
.pdp-license-card__head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color:var(--red-ink); margin-bottom: 9px; line-height: 1.3; }
.pdp-license-card__head i { font-size: 17px; flex-shrink: 0; }
.pdp-license-card__body { margin: 0; font-size: 12.5px; line-height: 1.62; color: var(--ink-2); }
.pdp-license-card__body strong { color: var(--ink); font-weight: 700; }
[data-theme="dark"] .pdp-license-card { background: linear-gradient(180deg, var(--red-50), var(--surface)); border-color: rgba(221, 51, 51, .35); }

.gift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.gift-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; background: #fff; border-radius: 5px; }
.gift-img { width: 80px; height: 80px; object-fit: contain; }
.gift-name { font-size: 12px; color: var(--ink); font-weight: 600; margin-top: 2px; }

.benefit-list-modern {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px; color: var(--ink-2); line-height: 1.4;
}
.benefit-list-modern li { display: flex; gap: 8px; align-items: flex-start; }
.bl-check { width: 16px; height: 16px; color: #16a34a; flex-shrink: 0; margin-top: 1px; }
.benefit-list-modern strong { color: var(--ink); font-weight: 700; }

/* Hotline card — styled like benefit card */
.pdp-hotline-card { border-color: var(--line); }

/* Tabs */
.pdp-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.pdp-tabs .tab {
  padding: 13px 22px; font-size: 15.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .035em;
  color: var(--muted); cursor: pointer;
  border: 0; background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .2s ease, border-color .2s ease;
}
.pdp-tabs .tab:hover { color: var(--ink); }
.pdp-tabs .tab.active { color:var(--red-ink); border-color: var(--red); }

/* Mobile: tab dạng NÚT (pill) — icon TRÊN, chữ DƯỚI, 3 nút/hàng (Mô tả/Hiệu năng/Gaming
   hàng 1, Đánh giá/Hỏi&Đáp hàng 2). Bỏ kiểu gạch dưới (không hợp mobile). */
@media (max-width: 600px) {
  .pdp-tabs { flex-wrap: wrap; gap: 8px; border-bottom: 0; margin-bottom: 16px; align-items: stretch; }
  .pdp-tabs .tab {
    flex: 1 1 28%; min-width: 0; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 10px 6px; font-size: 10.5px; line-height: 1.2; letter-spacing: 0; text-align: center;
    white-space: normal;  /* icon TRÊN, chữ DƯỚI — VI vừa 1 dòng; EN dài thì wrap trong pill, KHÔNG tràn ngang (Codex MED) */
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--muted);
  }
  .pdp-tabs .tab .tab-spark { margin: 0; font-size: 12px; opacity: 1; flex-shrink: 0; }
  .pdp-tabs .tab .use-svg { margin: 0; width: 14px; height: 14px; vertical-align: 0; flex-shrink: 0; }
  .pdp-tabs .tab .tab-mob-hide { display: none; }  /* "Mô tả sản phẩm" → chỉ "Mô tả" ở mobile */
  .pdp-tabs .tab.active { background: var(--red); border-color: var(--red); color: #fff; }
  /* !important để đè perf.css (.tab.active .tab-spark{color:var(--red-ink)}) — icon đỏ trên nền đỏ = tàng hình */
  .pdp-tabs .tab.active .tab-spark,
  .pdp-tabs .tab.active .use-svg { color: #fff !important; }
}
@media (max-width: 360px) {
  .pdp-tabs .tab { font-size: 10px; padding: 10px 4px; gap: 3px; }
  .pdp-tabs .tab .tab-spark { font-size: 11px; }
}
/* iPad/tablet (601–1200px): tab dạng PILL giống mobile nhưng cỡ chữ/padding thoải mái (hết dàn thưa) */
@media (min-width: 601px) and (max-width: 1200px) {
  .pdp-tabs { flex-wrap: wrap; gap: 10px; border-bottom: 0; margin-bottom: 18px; align-items: stretch; }
  .pdp-tabs .tab {
    flex: 1 1 30%; min-width: 0; margin: 0;
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 16px; font-size: 14px; line-height: 1.2; letter-spacing: .02em; text-align: center;
    white-space: normal; /* EN dài không tràn ngang (Codex MED) */
    border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: var(--muted);
  }
  .pdp-tabs .tab .tab-spark { margin: 0; font-size: 15px; opacity: 1; flex-shrink: 0; }
  .pdp-tabs .tab .use-svg { margin: 0; width: 16px; height: 16px; vertical-align: 0; flex-shrink: 0; }
  .pdp-tabs .tab.active { background: var(--red); border-color: var(--red); color: #fff; }
  .pdp-tabs .tab.active .tab-spark,
  .pdp-tabs .tab.active .use-svg { color: #fff !important; }
}

/* Description grid */
.desc-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; }
@media (max-width: 900px) { .desc-grid { grid-template-columns: 1fr; } }
.desc-main { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.desc-main p { margin: 0 0 14px; }
.desc-main strong { color: var(--ink); }
.desc-sidebar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 22px;
  align-self: start;
  position: sticky; top: 148px;
}
.desc-sb-title { font-size: 15.5px; font-weight: 700; letter-spacing: 0.035em; text-transform: uppercase; color:var(--red-ink); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin: 0 0 12px; line-height: 1.3; }
.desc-sb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.desc-sb-table td { padding: 9px 4px; vertical-align: top; line-height: 1.45; }
.desc-sb-table td:first-child { color: var(--muted); width: 95px; font-weight: 500; }
.desc-sb-table td:last-child { color: var(--ink); font-weight: 600; }
.desc-sb-table tr { border-bottom: 1px dashed var(--line); }
.desc-sb-table tr:last-child { border-bottom: 0; }

/* Sidebar fallback: Sản phẩm bán chạy (khi sản phẩm không có thông số) */
[data-theme="dark"] .desc-sb-bestsellers .bs-img { background: var(--bg-2); }

/* Reviews */
.reviews-grid { display: grid; grid-template-columns: 240px 1fr; gap: 32px; }
.reviews-grid--full { grid-template-columns: 1fr; }
@media (max-width: 768px) { .reviews-grid { grid-template-columns: 1fr; } }
.reviews-list-col { min-width: 0; }

.reviews-list-col .devvn-woocommerce-reviews { width: 100% !important; max-width: 100% !important; }

/* Review filter (devvn): pills NGANG, gọn — mặc định plugin để stack dọc full-width */
.devvn_reviews_filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.devvn_reviews_filter .devvn_filter_btn {
	width: auto !important; min-width: 0 !important; display: inline-flex !important;
	align-items: center; gap: 5px; padding: 7px 14px; margin: 0 !important;
	white-space: nowrap; float: none !important; text-align: center;
}
/* Plugin devvn ép `.devvn_reviews_filter{flex-direction:column}` ở ≤768px → chip lọc xếp DỌC.
   Ép lại row+wrap (specificity #reviews cao hơn class đơn của plugin). */
@media (max-width: 768px) {
	#reviews .devvn_reviews_filter { flex-direction: row !important; flex-wrap: wrap !important; align-items: center; }
}

/* iPad/tablet: thu gọn card PDP (KHUYẾN MÃI / QUYỀN LỢI / CAM KẾT) — đỡ chiếm diện tích */
@media (max-width: 1024px) {
	.pdp-side-card { padding: 14px 16px; }
	.gift-img { width: 60px; height: 60px; }
	.gift-item { padding: 6px; }
	.gift-grid { gap: 8px; margin-top: 10px; padding-top: 10px; }
	.benefit-list-modern { gap: 8px; font-size: 12.5px; }
	.psc-title-modern { padding-bottom: 9px; margin-bottom: 10px; }
}

/* Related products — shortcode plugin output dùng class Flatsome (row + large-columns-N).
   Theme không load Flatsome nên cần grid mapping custom. */
.pdp .row.large-columns-5 {
  display: grid;
  gap: 16px;
  margin: 16px 0 0;
}
.pdp .row.large-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .pdp .row.medium-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pdp .row.small-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pdp .row > article { min-width: 0; }
/* Flatsome inline width style trên col — override */
.pdp .row > [style*="width"] { width: 100% !important; max-width: 100% !important; flex: unset; }
.ri-head .stars { color: #f5a524; display: inline-flex; gap: 1px; }
.empty-state { padding: 40px 20px; text-align: center; background: var(--bg-2); border-radius: 10px; }
.es-icon { font-size: 40px; margin-bottom: 10px; }
.es-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.es-sub { font-size: 13px; color: var(--muted); max-width: 320px; margin: 0 auto; line-height: 1.5; }

/* Q&A */
.qna-wrap { display: flex; flex-direction: column; gap: 18px; }
.qna-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.qna-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.qna-sub { font-size: 13px; color: var(--muted); }
.qna-list { display: flex; flex-direction: column; gap: 14px; }
.qna-form { background: var(--bg-2); border-radius: 10px; padding: 20px; margin-top: 8px; scroll-margin-top: 144px; }
.qna-form h4 { margin: 0 0 12px; font-size: 15px; color: var(--ink); }
.qna-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); resize: vertical; }
.qna-form-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 14px; flex-wrap: wrap; }
.qna-form-note { font-size: 12px; color: var(--muted); }
.qna-form .btn { background: var(--red); color: #fff !important; padding: 10px 22px; border: 0; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; }
.qna-form .btn:disabled { opacity: .6; cursor: not-allowed; }
.qna-author-input { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); margin-top: 8px; }
.qna-form-msg { margin-top: 10px; padding: 10px 14px; border-radius: 6px; font-size: 13px; }

/* PDP tab panel padding */
.pdp-tabs-section { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.pdp-tab-panel { padding: 4px 0; }

/* Hide Woo default elements em đã rewrite */

.pdp .woocommerce-product-rating,
.pdp .woocommerce-product-details__short-description,
.pdp .cart > .quantity,
.pdp .price,
.pdp form.cart .single_add_to_cart_button:not(.btn-buy-now) { display: none; }

/* ============ PDP Description — Xem thêm (clamp = chiều cao sidebar) ============ */
.desc-main {
  position: relative;
  overflow: hidden;
  transition: max-height .3s ease;
}
/* Constrain media + caption — content WP có thể chứa <img width="2048"> hoặc
   [caption width="2048"] (render thành <div style="width:2058px">) → cần override
   để fit container. Chỉ target MEDIA + CAPTION wrapper, KHÔNG touch text. */
.desc-main img,
.desc-main a img {
  max-width: 100% !important;
  height: auto !important;
}
.desc-main.is-expanded {
  max-height: none !important;
}
.desc-readmore-shade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 60px 0 8px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 70%);
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.desc-main.is-expanded .desc-readmore-shade {
  position: static;
  padding: 12px 0 0;
  background: transparent;
}
.desc-readmore-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: #fff;
  border: 1.5px solid var(--red);
  color:var(--red-ink);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.desc-readmore-btn:hover { background: var(--red); color: #fff; }
.desc-main.is-expanded .desc-readmore-btn svg { transform: rotate(180deg); }

/* ACF spec table — reset inline style + nice formatting */
.desc-sb-acf table { width: 100% !important; border-collapse: collapse; font-size: 13px; }
.desc-sb-acf table tr { border-bottom: 1px dashed var(--line); }
.desc-sb-acf table tr:last-child { border-bottom: 0; }

/* Spec table — multi-option list (CPU/RAM/SSD có nhiều options) */
.desc-sb-table .opts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.desc-sb-table .opts li { padding-left: 12px; position: relative; }
.desc-sb-table .opts li::before { content: '•'; position: absolute; left: 0; color:var(--red-ink); }
.desc-sb-table td { font-size: 12.5px; line-height: 1.5; }

/* Ẩn Q&A của devvn-woocommerce-reviews — dùng tab Hỏi & Đáp riêng của theme */
.hp-devvn-faq-hidden { display: none !important; }

/* ============================================================ */
/* ===  DARK MODE OVERRIDES — woocommerce.css                === */
/* === (Xem barem trong main.css để hiểu quy tắc token)      === */
/* ============================================================ */

/* PDP Gallery */
[data-theme="dark"] .pdp-gallery-card { background: var(--surface); }

/* Long description images — border-radius */
.desc-main img,
.desc-main__inner img,
.pdp-tab-panel img { border-radius: 8px; max-width: 100%; height: auto; }

/* Global WooCommerce image border-radius */
.woocommerce img,
.woocommerce-page img { border-radius: 6px; }

/* PDP Trust strip */
[data-theme="dark"] .pdp-trust-strip { background: var(--surface); }

/* PDP Info column (pixel-perfect layout) */
[data-theme="dark"] .pdp-info { background: var(--surface); }

/* Price hero box */
[data-theme="dark"] .pdp-price-hero { background: var(--surface); }

/* Variant cards */
[data-theme="dark"] .variant-card,
[data-theme="dark"] .variant-card.active { background: var(--surface); }

/* Key info boxes */
[data-theme="dark"] .pdp-key-info--variation,
[data-theme="dark"] .pdp-key-info--side { background: var(--surface); }

/* Qty buttons + input */
[data-theme="dark"] .pdp-buybar .qty button,
[data-theme="dark"] .pdp-buybar .qty input { background: var(--surface); color: var(--ink); }

/* Side cards (gift, benefit, hotline wrapper) */
[data-theme="dark"] .pdp-side-card,
[data-theme="dark"] .pdp-gift-card { background: var(--surface); }
[data-theme="dark"] .gift-item { background: var(--bg-2); }

/* Spec sidebar (description tab) */
[data-theme="dark"] .desc-sidebar { background: var(--surface); }

/* Tab section wrapper */
[data-theme="dark"] .pdp-tabs-section { background: var(--surface); }

/* Q&A items */
[data-theme="dark"] .qa-item { background: var(--surface); }
[data-theme="dark"] .qna-form textarea,
[data-theme="dark"] .qna-author-input { background: var(--bg-3); color: var(--ink); }
[data-theme="dark"] .qa-avatar-q { background: rgba(99,102,241,.18); color: #a5b4fc; }

/* Read-more shade gradient — đổi #fff → var(--surface) */
[data-theme="dark"] .desc-readmore-shade {
  background: linear-gradient(to bottom, rgba(13,17,23,0) 0%, var(--surface) 70%);
}
[data-theme="dark"] .desc-readmore-btn { background: var(--surface); }

/* form fields input/textarea chưa có trong hp-field (devvn review form, etc.) */
[data-theme="dark"] .pdp-buybar .qty { background: var(--surface); }

/* Brand tag — background: var(--ink) flips to #f5f7fa in dark mode */
[data-theme="dark"] .pdp-brand-tag { background: var(--bg-3); color: var(--ink) !important; }

/* Tables inside product description (plain HTML tables from editor) */
[data-theme="dark"] .desc-main__inner table thead tr,
[data-theme="dark"] .desc-main__inner table th { background: var(--bg-3) !important; color: var(--ink) !important; }
[data-theme="dark"] .desc-main__inner table tr:nth-child(odd) { background: var(--bg-2); }
[data-theme="dark"] .desc-main__inner table tr:nth-child(even) { background: var(--bg-3); }
[data-theme="dark"] .desc-main__inner table td,
[data-theme="dark"] .desc-main__inner table th { border-color: var(--line) !important; color: var(--ink); }

/* ============================================================
   CART PAGE
   ============================================================ */

/* Cart layout: form left + totals right */
.woocommerce-cart .hp-main { padding: 24px 0; }
.woocommerce-cart .cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .woocommerce-cart .cart-layout { grid-template-columns: 1fr; } }

/* Cart table */
.woocommerce-cart-form { background: var(--surface); border-radius: var(--radius-lg); padding: 20px; border: 1px solid var(--line); }
.woocommerce-cart-form table { width: 100%; border-collapse: collapse; }
.woocommerce-cart-form th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px 12px; border-bottom: 1px solid var(--line); }
.woocommerce-cart-form td { padding: 14px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink); }
.woocommerce-cart-form .product-thumbnail img { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: var(--bg-2); }
.woocommerce-cart-form .product-name a { color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.woocommerce-cart-form .product-name a:hover { color:var(--red-ink); }
.woocommerce-cart-form .product-remove a { color: var(--muted); font-size: 20px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; }
.woocommerce-cart-form .product-remove a:hover { background: var(--red-50); color:var(--red-ink); }
.woocommerce-cart-form .product-price, .woocommerce-cart-form .product-subtotal { font-weight: 600; color: var(--ink); }
.woocommerce-cart-form .product-subtotal { color:var(--red-ink); font-weight: 700; }

/* Cart qty input */
.woocommerce-cart-form .qty {
  width: 56px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 6px; font: inherit; font-size: 14px; font-weight: 600;
  background: var(--bg-3); color: var(--ink);
}
.woocommerce-cart-form .qty:focus { border-color: var(--red); outline: 0; }

/* Cart actions row */
.woocommerce-cart-form .actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 14px; }
.woocommerce-cart-form .coupon { display: flex; gap: 8px; flex: 1; }
.woocommerce-cart-form .coupon input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px; background: var(--bg-3); color: var(--ink); }
.woocommerce-cart-form .coupon input:focus { border-color: var(--red); outline: 0; }
.woocommerce-cart-form button[name="apply_coupon"],
.woocommerce-cart-form button[name="update_cart"] {
  padding: 9px 18px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-3); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.woocommerce-cart-form button[name="apply_coupon"]:hover,
.woocommerce-cart-form button[name="update_cart"]:hover { border-color: var(--red); color:var(--red-ink); }

/* Cart totals */
.cart_totals table { width: 100%; border-collapse: collapse; }

/* Proceed to checkout — placeholder, definitive rule at bottom */

/* WC notices */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
  padding: 12px 16px; border-radius: 10px; margin-bottom: 16px;
  font-size: 14px; list-style: none; border: 0; border-left: 4px solid;
}
/* Ẩn WC icon ::before — icon font (WooCommerce glyph) đè text trong custom theme */
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { display: none !important; }
.woocommerce-message { background: #f0fdf4; color: #15803d; border-color: #16a34a; }
.woocommerce-error   { background: #fef2f2; color: #b91c1c; border-color: var(--red); }
.woocommerce-info    { background: #eff6ff; color: #1d4ed8; border-color: #3b82f6; }
[data-theme="dark"] .woocommerce-message { background: rgba(22,163,74,.12); color: #4ade80; border-color: #16a34a; }
[data-theme="dark"] .woocommerce-error   { background: rgba(221,51,51,.12); color: #f87171; border-color: var(--red); }
[data-theme="dark"] .woocommerce-info    { background: rgba(59,130,246,.12); color: #93c5fd; border-color: #3b82f6; }

/* Checkout coupon form: input + button cùng 1 hàng */
/* Form coupon ở checkout: WC ẩn sẵn (display:none inline), chỉ bung khi bấm
   "Có mã giảm giá?" → KHÔNG ép display:flex luôn hiện. Chỉ flex-hoá khi WC đã mở
   (jQuery slideDown set inline display:block). */

/* ============================================================
   CHECKOUT — WC native form fields override
   ============================================================ */

/* WC inputs trong billing/shipping form */
.woocommerce-checkout .woocommerce-form-row input.input-text,
.woocommerce-checkout .woocommerce-form-row select,
.woocommerce-checkout .woocommerce-form-row textarea,
.woocommerce-checkout p.form-row input.input-text,
.woocommerce-checkout p.form-row select {
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: 14px;
  width: 100%; transition: border-color .15s, box-shadow .15s;
}
.woocommerce-checkout .woocommerce-form-row input.input-text:focus,
.woocommerce-checkout .woocommerce-form-row select:focus,
.woocommerce-checkout p.form-row input.input-text:focus {
  border-color: var(--red); outline: 0;
  box-shadow: 0 0 0 3px rgba(221,51,51,.12);
}
.woocommerce-checkout .woocommerce-form-row label,
.woocommerce-checkout p.form-row label {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 4px;
}
.woocommerce-checkout .woocommerce-form-row abbr { color:var(--red-ink); }

/* Select2 dark mode */
[data-theme="dark"] .select2-container--default .select2-selection--single {
  background: var(--bg-3); border-color: var(--line); color: var(--ink);
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); }
[data-theme="dark"] .select2-dropdown { background: var(--bg-2); border-color: var(--line); }
[data-theme="dark"] .select2-results__option { color: var(--ink); }
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted { background: var(--red); color: #fff; }
[data-theme="dark"] .select2-search__field { background: var(--bg-3); color: var(--ink); border-color: var(--line); }

/* Place order button */

/* ============================================================
   MY ACCOUNT PAGE
   ============================================================ */

.woocommerce-account .hp-main { padding: 0; }
.woocommerce-account .woocommerce { display: block; }

/* Navigation */
.woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line);
  overflow: hidden;
}
.woocommerce-MyAccount-navigation li a {
  display: block; padding: 12px 18px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--line);
  transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a:hover { background: var(--bg-2); color:var(--red-ink); }
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--red-50); color:var(--red-ink); font-weight: 700;
  border-left: 3px solid var(--red);
}
[data-theme="dark"] .woocommerce-MyAccount-navigation li.is-active a {
  background: rgba(221,51,51,.12); color:var(--red-ink);
}

/* Content area */
.woocommerce-MyAccount-content {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 24px 28px; border: 1px solid var(--line);
}
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 {
  font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 16px;
}
.woocommerce-MyAccount-content p { color: var(--ink-2); font-size: 14px; line-height: 1.6; }

/* Orders table */
.woocommerce-orders-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.woocommerce-orders-table th {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 8px 12px 12px; border-bottom: 2px solid var(--line);
  text-align: left;
}
.woocommerce-orders-table td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
.woocommerce-orders-table tr:last-child td { border-bottom: 0; }
.woocommerce-orders-table .woocommerce-button {
  display: inline-block; padding: 6px 14px;
  border-radius: 6px; background: var(--bg-3);
  color: var(--ink); font-size: 12.5px; font-weight: 600;
  text-decoration: none; transition: background .15s, color .15s;
}
.woocommerce-orders-table .woocommerce-button:hover { background: var(--red); color: #fff; }

/* Address boxes */
.woocommerce-Addresses .woocommerce-Address {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px 22px;
}
.woocommerce-Addresses address { font-style: normal; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.woocommerce-Addresses .edit { margin-top: 12px; display: inline-block; }

/* Edit account / login form fields */
.woocommerce-EditAccountForm .woocommerce-form-row input,
.woocommerce-form--login .woocommerce-form-row input {
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: 14px;
  width: 100%; transition: border-color .15s;
}
.woocommerce-EditAccountForm .woocommerce-form-row input:focus,
.woocommerce-form--login .woocommerce-form-row input:focus {
  border-color: var(--red); outline: 0;
}
.woocommerce-EditAccountForm .woocommerce-form-row label,
.woocommerce-form--login .woocommerce-form-row label {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 4px;
}
.woocommerce-form--login { max-width: 480px; }
.woocommerce-form--login .woocommerce-button,
.woocommerce-EditAccountForm button[type="submit"] {
  padding: 11px 28px; border-radius: 8px; border: 0;
  background: linear-gradient(135deg, var(--red), #b82525);
  color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: box-shadow .2s;
}
.woocommerce-form--login .woocommerce-button:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover { box-shadow: 0 6px 16px rgba(221,51,51,.32); }

/* Status badges */
.woocommerce-orders-table .wc-order-status,
.woocommerce-order-status {
  display: inline-block; padding: 3px 10px;
  border-radius: 100px; font-size: 12px; font-weight: 700;
}
.woocommerce-order-status--processing { background: #dbeafe; color: #1d4ed8; }
.woocommerce-order-status--completed  { background: #dcfce7; color: #15803d; }
.woocommerce-order-status--pending    { background: #fef9c3; color: #854d0e; }
.woocommerce-order-status--cancelled  { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] mark.order-status.processing { background: rgba(29,78,216,.18); color: #93c5fd; }
[data-theme="dark"] mark.order-status.completed  { background: rgba(21,128,61,.18); color: #4ade80; }
[data-theme="dark"] mark.order-status.pending    { background: rgba(133,77,14,.18); color: #fde047; }
[data-theme="dark"] mark.order-status.cancelled  { background: rgba(185,28,28,.18); color: #f87171; }

/* ============================================================
   CART PAGE — 2-col grid layout (WC native structure)
   ============================================================ */

/* WC shortcode wraps in .woocommerce — reset grid, cart-page/.cart-grid handles layout */
.woocommerce-cart .woocommerce {
  display: block;
}

/* Cart form — column 1 */
.woocommerce-cart-form {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--line);
}
[data-theme="dark"] .woocommerce-cart-form { background: var(--bg); }
.woocommerce-cart-form table { width: 100%; border-collapse: collapse; }
.woocommerce-cart-form th {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
  padding: 8px 10px 12px; border-bottom: 1px solid var(--line);
  text-align: left;
}
.woocommerce-cart-form td {
  padding: 14px 10px; border-bottom: 1px solid var(--line);
  vertical-align: middle; color: var(--ink);
}
.woocommerce-cart-form .product-thumbnail img {
  width: 72px; height: 72px; object-fit: contain;
  border-radius: 8px; background: var(--bg-2); display: block;
}
.woocommerce-cart-form .product-name a { color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.woocommerce-cart-form .product-name a:hover { color:var(--red-ink); }
.woocommerce-cart-form .product-remove a {
  color: var(--muted); font-size: 20px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
}
.woocommerce-cart-form .product-remove a:hover { background: var(--red-50); color:var(--red-ink); }
.woocommerce-cart-form .product-subtotal .woocommerce-Price-amount { color:var(--red-ink); font-weight: 700; }

/* Cart qty input in table */
.woocommerce-cart-form .qty,
.woocommerce-cart-form input[type="number"].qty {
  width: 56px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 6px; font: inherit; font-size: 14px; font-weight: 600;
  background: var(--bg-3) !important; color: var(--ink) !important;
}
.woocommerce-cart-form .qty:focus { border-color: var(--red); outline: 0; }

/* Cart actions row */
.woocommerce-cart-form td.actions {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; border-bottom: 0; padding-top: 14px;
}
.woocommerce-cart-form .coupon {
  display: flex; gap: 8px; flex: 1; min-width: 220px;
}
.woocommerce-cart-form .coupon .input-text {
  flex: 1; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; font: inherit; font-size: 14px;
  background: var(--bg-3); color: var(--ink);
}
.woocommerce-cart-form .coupon .input-text:focus { border-color: var(--red); outline: 0; }

/* Cart collaterals — override WooCommerce core float/width */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals { float: none !important; width: auto !important; }
[data-theme="dark"] .cart_totals { background: var(--bg); }
.cart_totals table { width: 100%; border-collapse: collapse; }

/* Proceed to checkout — definitive rule at bottom */

/* ============================================================
   CHECKOUT — Billing/Shipping 2-col + payment
   ============================================================ */

/* WC native form row */
/* ---- Checkout form fields — chuẩn hoá height + spacing ---- */
/* Ẩn label, dùng placeholder */
.woocommerce-checkout .woocommerce-form-row label:not(.woocommerce-form__label-for-checkbox),
.woocommerce-checkout p.form-row > label:not(.woocommerce-form__label-for-checkbox) { display: none; }

/* Spacing — reset margin, để grid gap xử lý */
.woocommerce-checkout .woocommerce-form-row,
.woocommerce-checkout p.form-row { margin: 0 !important; padding: 0; }

/* Tất cả input text — height cố định 44px */
.woocommerce-checkout .woocommerce-form-row input.input-text,
.woocommerce-checkout p.form-row input.input-text {
  display: block; width: 100%; box-sizing: border-box;
  height: 44px; padding: 0 14px;
  background: var(--bg-3) !important; color: var(--ink) !important;
  border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 14px; line-height: 44px;
  transition: border-color .15s, box-shadow .15s;
}
.woocommerce-checkout .woocommerce-form-row input.input-text::placeholder,
.woocommerce-checkout p.form-row input.input-text::placeholder { color: var(--muted); font-size: 13.5px; }
.woocommerce-checkout .woocommerce-form-row input.input-text:focus,
.woocommerce-checkout p.form-row input.input-text:focus {
  border-color: var(--red); outline: 0;
  box-shadow: 0 0 0 3px rgba(221,51,51,.12);
}
.woocommerce-checkout .woocommerce-form-row abbr { color:var(--red-ink); }

/* Ward select — height match Select2 province dropdown */
.woocommerce-checkout p.form-row select#billing_city,
.woocommerce-checkout p.form-row select#shipping_city {
  height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg-3); color: var(--ink); font-size: 14px;
  appearance: auto; width: 100%; box-sizing: border-box;
}
.woocommerce-checkout p.form-row select#billing_city:focus,
.woocommerce-checkout p.form-row select#shipping_city:focus {
  border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(221,51,51,.12);
}
/* State + city fields: thêm gap phía dưới để visual đều với các hàng khác */
.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_state_field,
.woocommerce-checkout #shipping_city_field { margin-bottom: 6px !important; }

/* Ward/district select — disabled khi chưa chọn tỉnh */
.woocommerce-checkout p.form-row select#billing_city:disabled,
.woocommerce-checkout p.form-row select#shipping_city:disabled { opacity: .5; cursor: not-allowed; }
/* Select2 disabled state cho ward */
.woocommerce-checkout #billing_city_field .select2-container--disabled .select2-selection--single,
.woocommerce-checkout #shipping_city_field .select2-container--disabled .select2-selection--single {
  opacity: .5; cursor: not-allowed;
}

/* Select2 override cho VN province dropdown */
.woocommerce-checkout .select2-container { width: 100% !important; }
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 44px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg-3) !important; display: flex; align-items: center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal; color: var(--ink); padding: 0 14px; font-size: 14px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(221,51,51,.12);
}
.select2-dropdown { border: 1.5px solid var(--red); border-radius: 10px; overflow: hidden; }
.select2-results__option--highlighted { background: var(--red) !important; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13.5px;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--red); outline: none; }

/* Select2 — global fallback */
.select2-container--default .select2-selection--single {
  height: 42px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-3) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px; padding: 0 12px; color: var(--ink) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
[data-theme="dark"] .select2-dropdown { background: var(--bg-2); border-color: var(--line); }
[data-theme="dark"] .select2-results__option { color: var(--ink); background: var(--bg-2); }
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted { background: var(--red); color: #fff; }
[data-theme="dark"] .select2-search__field { background: var(--bg-3) !important; color: var(--ink); border-color: var(--line); }

/* Order review table */
.woocommerce-checkout-review-order-table {
  width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 16px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink);
}
.woocommerce-checkout-review-order-table th { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.woocommerce-checkout-review-order-table .order-total td { color:var(--red-ink); font-weight: 700; font-size: 16px; }

/* Payment methods */
[data-theme="dark"] .payment_box { background: var(--bg-3); }

/* Place order button */

/* ============================================================
   PDP — Sticky bar + qty stepper + btn states
   ============================================================ */

.pdp-qty-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.pdp-qty-stepper {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--surface);
}
.pdp-qty-btn {
  width: 38px; height: 40px;
  background: transparent; border: 0;
  font-size: 18px; color: var(--ink); cursor: pointer;
  transition: background .15s, color .15s;
}
.pdp-qty-btn:hover { background: var(--red-50); color:var(--red-ink); }
.pdp-qty-input {
  width: 48px; text-align: center;
  border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 8px 4px; font: inherit; font-size: 15px; font-weight: 700;
  background: var(--surface); color: var(--ink);
  -moz-appearance: textfield;
}
.pdp-qty-input::-webkit-inner-spin-button,
.pdp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-qty-input:focus { outline: none; background: var(--bg-2); }
.pdp-in-stock { color: #16a34a; font-size: 13px; font-weight: 600; }
.pdp-out-stock { color: var(--muted); font-size: 13px; }

/* Button loading state */
.btn-add-cart-primary .btn-spinner,
.btn-buy-now .btn-spinner { display: none; }
.btn-add-cart-primary.loading,
.btn-buy-now.loading { opacity: .65; pointer-events: none; }
.btn-add-cart-primary.loading > svg,
.btn-buy-now.loading > svg { display: none; }
.btn-add-cart-primary.loading .btn-spinner,
.btn-buy-now.loading .btn-spinner {
  display: inline-block;
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: hp-spin 0.7s linear infinite;
}
@keyframes hp-spin { to { transform: rotate(360deg); } }



/* ============================================================
   CART PAGE — div-based grid layout (cart.php rewrite)
   ============================================================ */

/* 5-column grid: [product] [price] [qty] [subtotal] [remove] */
[data-theme="dark"] .hp-cart-items { background: var(--bg); }

/* Product cell: thumb + meta side by side */

/* Price / subtotal */
.hp-cart-row__sub .woocommerce-Price-amount { font-size: 14px; font-weight: 700; color:var(--red-ink); }

/* Qty input in cart */

/* Remove button */

/* Actions row: coupon + update button */
[data-theme="dark"] .hp-cart-actions { background: var(--bg); }

/* Mobile: hide header, stack price into meta */


/* ============================================================
   CHECKOUT — 2-col layout dùng CSS Grid (không dùng float)
   ============================================================ */

/* Ẩn các field không dùng — không chiếm grid space */
.woocommerce-checkout #billing_company_field,
.woocommerce-checkout #shipping_company_field,
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #shipping_country_field,
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #shipping_address_2_field { display: none !important; }

/* Wrap toàn bộ billing fields trong 1 grid 2 cột */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

/* Reset mọi margin/padding trên p.form-row trong grid */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > p { margin: 0 !important; padding: 0; }

/* form-row-first / form-row-last: mỗi cái 1 cột (default) */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  float: none !important; width: auto !important;
  clear: none !important; margin: 0 !important;
}

/* form-row-wide + các field full-width: span 2 cột */
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #billing_phone_field,
.woocommerce-checkout #billing_email_field,
.woocommerce-checkout #shipping_address_1_field,
.woocommerce-checkout #shipping_address_2_field,
.woocommerce-checkout #shipping_phone_field {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last,
  .woocommerce-checkout .form-row-wide { grid-column: 1 / -1; }
}
/* Billing/shipping col2-set: two-column grid */
.woocommerce-checkout .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
@media (max-width: 768px) {
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
}
/* Inside billing column, also use 2-col grid for paired fields */
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_address_1_field,
.woocommerce-checkout #shipping_city_field {
  clear: both;
}

/* ============================================================
   HP STORE NEW DESIGN — Cart, Checkout, Success, My Account
   (from HPStore4Page design system)
   ============================================================ */

/* ---- BTN ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 10px; background: var(--red); color: #fff;
  font-size: 13.5px; font-weight: 600; transition: background .15s, transform .1s, box-shadow .15s;
  white-space: nowrap; border: 0; cursor: pointer;
}
.btn:hover { background: var(--red-600, #c42828); box-shadow: var(--shadow-md); color: #fff; }
.btn:active { transform: scale(.98); }
.btn.large { padding: 14px 22px; font-size: 15px; }
.btn.small { padding: 7px 12px; font-size: 12px; border-radius: 8px; }
.btn.ghost { background: #fff; color:var(--red-ink); border: 1px solid var(--red); }
.btn.ghost:hover { background: var(--red-50); box-shadow: none; color:var(--red-ink); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: #000; }
.btn.outline { background: transparent; color: var(--ink-2); border: 1.5px solid var(--line); }
.btn.outline:hover { background: var(--red-50); border-color: var(--red); color:var(--red-ink); box-shadow: none; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---- CART PAGE ---- */
[data-theme="dark"] .cart-list { background: var(--bg); }
.cart-row .price-cell .now .woocommerce-Price-amount { font-size: 13.5px; }
.cart-row .price-cell .old .woocommerce-Price-amount { font-size: 10.5px; }
.cart-row .sum-cell .woocommerce-Price-amount { font-size: 13.5px; }
[data-theme="dark"] .qty-bx button { background: var(--bg-2); }
[data-theme="dark"] .qty-bx input { background: var(--bg-2); color: var(--ink); }
[data-theme="dark"] .cart-actions { background: var(--bg-3); }
[data-theme="dark"] .extra-card { background: var(--bg); }
[data-theme="dark"] .voucher-row input { background: var(--bg-2); color: var(--ink); }
[data-theme="dark"] .ship-estimator select, [data-theme="dark"] .ship-estimator input { background: var(--bg-2); }
[data-theme="dark"] .upsell-card { background: var(--bg-3); }
[data-theme="dark"] .trust-card { background: var(--bg); }

/* ---- ORDER SUMMARY (sidebar, cart + checkout) ---- */
[data-theme="dark"] .order-summary { background: var(--bg); }

/* Agree checkbox */

/* Policy modal */
[data-theme="dark"] .os-modal-box { background: var(--bg-2); }

/* .wc-proceed-to-checkout no longer used in cart-totals.php — direct .os-cta link instead */

/* BUG-2: .woocommerce-cart-form padding conflicts with .cart-list — reset when both classes present */
.woocommerce-cart-form.cart-list {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[data-theme="dark"] .woocommerce-cart-form.cart-list {
  background: transparent !important;
}

/* ---- CHECKOUT PAGE ---- */
[data-theme="dark"] .ck-step .n { background: var(--bg-2); }
[data-theme="dark"] .ck-block { background: var(--bg); }
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea { background: var(--bg-2); }
[data-theme="dark"] .opt-card { background: var(--bg-2); }

/* Gift wrap panel */

/* VAT panel */
[data-theme="dark"] .vat-partial-note { background:rgba(212,38,38,.12); color:var(--ink,#e5e7eb); }

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- SUCCESS / THANKYOU PAGE ---- */
[data-theme="dark"] .succ-card { background: var(--bg); }
@keyframes succ-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
[data-theme="dark"] .succ-timeline { background: var(--bg-3); }
[data-theme="dark"] .tl-step .dot { background: var(--bg-2); }
[data-theme="dark"] .det-card { background: var(--bg-2); }
[data-theme="dark"] .action-card { background: var(--bg-3); }

/* ---- MY ACCOUNT PAGE ---- */
/* Stats thật thay cho thanh tiến độ hạng giả */
[data-theme="dark"] .acc-nav { background: var(--bg); }
/* Empty notices-wrapper không tạo gap trong flex */
.acc-main > .woocommerce-notices-wrapper:empty { display: none; }
[data-theme="dark"] .stat-card { background: var(--bg); }
[data-theme="dark"] .acc-card { background: var(--bg); }
[data-theme="dark"] .order-tab thead th { background: var(--bg-3); }
[data-theme="dark"] .voucher-mini { background: var(--bg-2); }

/* ---- MY ACCOUNT — WC default content wrapper ---- */

/* WC default content inside .acc-main — wrap dengan card style */
.acc-main .woocommerce-MyAccount-content > *:not(.acc-card) { padding: 0; }
.acc-main .woocommerce-notices-wrapper { margin-bottom: 12px; }

/* Form edit account / edit address */
.acc-main .woocommerce-EditAccountForm,
.acc-main .woocommerce-address-fields {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--line); padding: 24px 28px;
}
[data-theme="dark"] .acc-main .woocommerce-EditAccountForm,
[data-theme="dark"] .acc-main .woocommerce-address-fields,
[data-theme="dark"] .acc-main .edit-account { background: var(--bg); }

.acc-main .woocommerce-EditAccountForm fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin: 20px 0 0; }
.acc-main .woocommerce-EditAccountForm legend { font-weight: 700; padding: 0 8px; font-size: 14px; }
.acc-main .woocommerce-form-row { margin-bottom: 14px; }
.acc-main .woocommerce-form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ink-2); }
.acc-main .woocommerce-form-row input.input-text,
.acc-main .woocommerce-form-row select {
  width: 100%; height: 44px; padding: 0 12px; border-radius: 8px;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: 14px; transition: border-color .15s;
}
.acc-main .woocommerce-form-row input.input-text:focus,
.acc-main .woocommerce-form-row select:focus { border-color: var(--ink); outline: none; }
.acc-main .woocommerce-form-row.form-row-first,
.acc-main .woocommerce-form-row.form-row-last { display: inline-block; width: calc(50% - 6px); }
.acc-main .woocommerce-form-row.form-row-first { margin-right: 10px; }
.acc-main .button.woocommerce-Button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 24px; border-radius: 9px; font-size: 14px; font-weight: 700;
  background: var(--red); color: #fff; border: 0; cursor: pointer;
  transition: background .15s; margin-top: 8px;
}
.acc-main .button.woocommerce-Button:hover { background: var(--red-600); }

/* My addresses */
.acc-main .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acc-main .woocommerce-Address {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--line); padding: 22px 24px;
}
[data-theme="dark"] .acc-main .woocommerce-Address { background: var(--bg); }
.acc-main .woocommerce-Address header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.acc-main .woocommerce-Address header h3 { font-size: 15px; font-weight: 700; margin: 0; }
.acc-main .woocommerce-Address address { font-style: normal; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.acc-main .woocommerce-Address .edit { font-size: 12.5px; font-weight: 700; color:var(--red-ink); }

/* Dashboard */
.acc-main .woocommerce-MyAccount-content p { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); margin-bottom: 10px; }
.acc-main .woocommerce-MyAccount-content p a { color:var(--red-ink); font-weight: 600; }

.acc-main .woocommerce-MyAccount-content > p:first-child {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--line); padding: 20px 24px;
}
[data-theme="dark"] .acc-main > p:first-child,
[data-theme="dark"] .acc-main .woocommerce-MyAccount-content > p:first-child { background: var(--bg); }

@media (max-width: 720px) {
  .acc-main .woocommerce-Addresses { grid-template-columns: 1fr; }
  .acc-main .woocommerce-form-row.form-row-first,
  .acc-main .woocommerce-form-row.form-row-last { display: block; width: 100%; margin-right: 0; }
}

/* ---- BREADCRUMBS (cart/checkout pages) ---- */

/* ---- RESPONSIVE ---- */

/* Dark mode tweaks for new design sections */
[data-theme="dark"] .qty-bx { border-color: var(--line); }
[data-theme="dark"] .succ-orderbox { background: linear-gradient(135deg, rgba(221,51,51,.08), var(--bg)); }
[data-theme="dark"] .os-applied { background: rgba(18,161,80,.1); color: #4ade80; border-color: rgba(18,161,80,.3); }
[data-theme="dark"] .os-applied strong { color: #4ade80; }
[data-theme="dark"] .os-applied .x { color: #4ade80; }
[data-theme="dark"] .ship-result { background: rgba(18,161,80,.1); color: #4ade80; border-color: rgba(18,161,80,.3); }
[data-theme="dark"] .acc-head .who h1 { color: #fff; }

/* ---- MINI CART (cart drawer) strikethrough prices ---- */
.woocommerce-mini-cart-item .mc-qty-price { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.woocommerce-mini-cart-item .mc-qty { color: var(--muted); font-weight: 600; }
.woocommerce-mini-cart-item .mc-price { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.woocommerce-mini-cart-item .mc-now { font-weight: 700; color:var(--red-ink); font-size: 13px; }
.woocommerce-mini-cart-item .mc-old { font-size: 10.5px; color: var(--muted); text-decoration: line-through; }
.woocommerce-mini-cart-item .mc-name { font-weight: 600; font-size: 13px; }
[data-theme="dark"] .woocommerce-mini-cart-item .mc-now { color:var(--red-ink); }

/* ---- BREADCRUMB — style WC woocommerce-breadcrumb like .crumbs ---- */
.woocommerce-breadcrumb {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 12.5px; color: var(--muted); padding: 12px 0 18px; margin: 0; list-style: none;
}
.woocommerce-breadcrumb a { color: var(--muted); font-weight: 600; text-decoration: none; }
.woocommerce-breadcrumb a:hover { color:var(--red-ink); }
.woocommerce-breadcrumb .separator { opacity: .5; }

/* ---- CK-FINAL: place-order bar at bottom of checkout left column ---- */
.ck-final .place .woocommerce-Price-amount { color: #fff !important; font-size: 15px !important; }
.ck-final .place .woocommerce-Price-currencySymbol { color: #fff !important; }

/* ---- DARK MODE — remaining cart/checkout elements ---- */
[data-theme="dark"] .cart-list-head { background: var(--bg-3); }
[data-theme="dark"] .cart-row { border-color: var(--line); }
[data-theme="dark"] .cart-row:hover { background: var(--bg-3); }
[data-theme="dark"] .cart-row .pick { background: var(--bg-2); border-color: var(--line); }
[data-theme="dark"] .cart-row .thumb { background: var(--bg-3); border-color: var(--line); }
[data-theme="dark"] .cart-actions { background: var(--bg-3); border-color: var(--line); }
[data-theme="dark"] .order-summary { background: var(--bg); border-color: var(--line); }
[data-theme="dark"] .os-list { scrollbar-color: var(--line) transparent; }
[data-theme="dark"] .os-totals { border-color: var(--line); }
[data-theme="dark"] .os-totals .row.total { border-color: var(--line); }
[data-theme="dark"] .ck-block { background: var(--bg); border-color: var(--line); }
[data-theme="dark"] .succ-card { background: var(--bg); border-color: var(--line); }
[data-theme="dark"] .qty-bx input { background: var(--bg); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .qty-bx button { background: var(--bg-2); color: var(--ink); }
[data-theme="dark"] .opt-card { background: var(--bg-2); border-color: var(--line); }
[data-theme="dark"] .opt-card.active { background: linear-gradient(135deg, rgba(221,51,51,.12), var(--bg-2)); }
[data-theme="dark"] .woocommerce-breadcrumb a { color: var(--muted); }
[data-theme="dark"] .cart-page-head h1 { color: var(--ink); }
[data-theme="dark"] .os-mini .thumb { background: var(--bg-3); border-color: var(--line); }
[data-theme="dark"] .os-mini .thumb .qb { border-color: var(--bg); }
[data-theme="dark"] .det-card { background: var(--bg-2); border-color: var(--line); }
[data-theme="dark"] .succ-orderbox { border-color: rgba(221,51,51,.3); }
[data-theme="dark"] .woocommerce-checkout p.form-row input.input-text,
[data-theme="dark"] .woocommerce-checkout .woocommerce-form-row input.input-text,
[data-theme="dark"] .woocommerce-checkout p.form-row select { background: var(--bg-2); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .woocommerce-checkout #ship-to-different-address label { color: var(--ink); }

/* ============================================================
   MY ACCOUNT — LOGIN PAGE (logged-out state)
   ============================================================ */
.acc-login-wrap .woocommerce-form--login,
.acc-login-wrap .woocommerce-form-register {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 32px;
  box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
[data-theme="dark"] .acc-login-wrap .woocommerce-form--login,
[data-theme="dark"] .acc-login-wrap .woocommerce-form-register { background: var(--bg); }

/* WooCommerce native form inputs (login/register khi chưa có .acc-login-wrap wrapper) */
[data-theme="dark"] .woocommerce-form-login,
[data-theme="dark"] .woocommerce-form-register { background: var(--bg); }
[data-theme="dark"] .woocommerce input[type="text"],
[data-theme="dark"] .woocommerce input[type="email"],
[data-theme="dark"] .woocommerce input[type="password"],
[data-theme="dark"] .woocommerce input[type="tel"],
[data-theme="dark"] .woocommerce input[type="number"],
[data-theme="dark"] .woocommerce .woocommerce-Input {
  background: var(--bg-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .woocommerce .woocommerce-button:not(.btn):not(.button-primary):not(.hp-login__submit) {
  background: var(--bg-3) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
}

/* ============================================================
   MY ACCOUNT — SỔ ĐỊA CHỈ (my-address.php override)
   ============================================================ */
[data-theme="dark"] .acc-addr-card { background: var(--bg); }
[data-theme="dark"] .acc-addr-head { background: var(--bg-3); }

/* ============================================================
   VIEW ORDER PAGE (view-order.php override)
   ============================================================ */

/* Ẩn WC default mark highlight */

/* Header card */

/* WC order-details section → card style */
.woocommerce-order-details {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--line); overflow: hidden; margin-bottom: 0;
}
[data-theme="dark"] .woocommerce-order-details { background: var(--bg); }
.woocommerce-order-details__title {
  font-size: 15px !important; font-weight: 700 !important; margin: 0 !important;
  padding: 16px 22px !important; border-bottom: 1px solid var(--line);
  color: var(--ink) !important; background: var(--bg-2) !important;
}
[data-theme="dark"] .woocommerce-order-details__title { background: var(--bg-3) !important; }

/* Order items table */
.woocommerce-table--order-details { width: 100%; border-collapse: collapse; }
.woocommerce-table--order-details th,
.woocommerce-table--order-details td { padding: 12px 22px; text-align: left; font-size: 14px; }
.woocommerce-table--order-details thead th {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); background: var(--bg-2);
}
.woocommerce-table--order-details tbody tr { border-top: 1px solid var(--line-2); }
.woocommerce-table--order-details tbody tr:first-child { border-top: 0; }
.woocommerce-table--order-details tfoot tr { border-top: 1px solid var(--line-2); }
.woocommerce-table--order-details tfoot th { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.woocommerce-table--order-details tfoot td { font-size: 13px; color: var(--ink); font-weight: 700; }
.woocommerce-table--order-details tfoot .order-total th,
.woocommerce-table--order-details tfoot .order-total td { font-size: 15px; font-weight: 700; color:var(--red-ink); }
.woocommerce-table--order-details .woocommerce-table__product-name a { color:var(--red-ink); font-weight: 600; }
.woocommerce-table--order-details .product-quantity { color: var(--muted); font-size: 13px; }

/* Địa chỉ trong view-order (order-details-customer.php override) */
.woocommerce-customer-details { margin-bottom: 0; }
[data-theme="dark"] .vw-addr-card { background: var(--bg); }
[data-theme="dark"] .vw-addr-head { background: var(--bg-3); }

/* Order details — override os-mini for full-page context */
.vw-od-body .os-mini .p del.orig .woocommerce-Price-amount.amount { font-size: 1.1em; }

/* Notes section */

/* Order actions (cancel, pay, etc.) */
.woocommerce-order-details + .woocommerce-order-actions,
.woocommerce-customer-details + .woocommerce-order-actions { margin-top: 0; }
.woocommerce-order-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce-order-actions .button { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 700; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; cursor: pointer; transition: all .12s; }
.woocommerce-order-actions .button:hover { background: var(--ink); color: #fff; }

@media (max-width: 640px) {
  .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr !important; }
  .woocommerce-customer-details .woocommerce-column + .woocommerce-column { border-left: 0; border-top: 1px solid var(--line); }
}

/* Orders table — cột đầu flush không padding trái */

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Phase 2 (WooCommerce pages)
   ═══════════════════════════════════════════════════════════════════ */

/* -------------------------------------------------------------------
   2a. MyAccount Orders — table → card tại <= 600px
   ------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Col 1: order # → row1 left */
  /* Col 5: view button → row1 right */
  /* Col 3: status → row2 */
  /* Col 4: total + item count → row3 */
  /* Col 2: date → hidden (info already in header) */

  /* Remove the flush first-child override on mobile */

  /* Pagination buttons full width */
}

/* -------------------------------------------------------------------
   2b. View Order — os-mini stack tại <= 600px
   ------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* View order header card */
  /* Actions */
}

/* -------------------------------------------------------------------
   2c. Cart table → card layout tại <= 640px
   ------------------------------------------------------------------- */
@media (max-width: 640px) {
  .woocommerce-cart-form table,
  .woocommerce-cart-form thead,
  .woocommerce-cart-form tbody,
  .woocommerce-cart-form tr { display: block; }

  .woocommerce-cart-form thead { display: none; }

  .woocommerce-cart-form tr {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 0 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    border-top: 0;
  }
  /* Remove × → top-right, spans full width but align right */
  .woocommerce-cart-form .product-remove {
    grid-column: 2; grid-row: 1;
    text-align: right; padding: 0 0 4px;
    border: 0;
  }
  /* Thumbnail → left, spans rows 1-4 */
  .woocommerce-cart-form .product-thumbnail {
    grid-column: 1; grid-row: 1 / 5;
    padding: 0; border: 0;
  }
  .woocommerce-cart-form .product-thumbnail img {
    width: 80px; height: 80px;
  }
  /* Name */
  .woocommerce-cart-form .product-name {
    grid-column: 2; grid-row: 2;
    padding: 0 0 4px; border: 0;
    font-size: 13.5px;
  }
  /* Unit price */
  .woocommerce-cart-form .product-price {
    grid-column: 2; grid-row: 3;
    padding: 2px 0; border: 0;
    font-size: 13px; color: var(--muted);
  }
  /* Qty + subtotal side by side */
  .woocommerce-cart-form .product-quantity {
    grid-column: 2; grid-row: 4;
    padding: 4px 0 0; border: 0;
    display: flex; align-items: center; gap: 10px;
  }
  .woocommerce-cart-form .product-subtotal {
    grid-column: 2; grid-row: 4;
    padding: 4px 0 0; border: 0;
    margin-left: auto;
    font-size: 14px; font-weight: 700;
  }
  /* Qty + subtotal in one row */
  .woocommerce-cart-form tr {
    grid-template-rows: auto auto auto auto;
  }
  /* Actions row full-width */
  .woocommerce-cart-form .actions {
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    grid-column: 1 / -1;
  }
  .woocommerce-cart-form .coupon { flex-direction: column; }
  .woocommerce-cart-form .coupon input { min-width: 0; }
}

/* -------------------------------------------------------------------
   2d. Checkout — payment grid + form padding tại <= 480px
   ------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   2e. PDP — buybar + variant cards tại <= 480px
   ------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Gallery thumbnails: scroll ngang */
  .pdp-gallery .thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .pdp-gallery .thumbs .t { flex-shrink: 0; }

  /* Buybar 2 nút → 2 cột ngang bằng nhau */
  .pdp-buybar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .btn-buy-now, .btn-add-cart-primary { width: 100%; }

  /* Variant cards grid tối thiểu 2 cột, không tràn */

  /* PDP tabs nav scroll ngang */
  .pdp-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;
  }
  .pdp-tabs-nav a { white-space: nowrap; flex-shrink: 0; }

  /* Key info box padding */
  .pdp-key-info--side { padding: 14px; }
}

/* -------------------------------------------------------------------
   2f. PDP — Fold / narrow phones ~344px
   ------------------------------------------------------------------- */
@media (max-width: 380px) {
  .pdp-info {
    padding: 18px 14px;
  }

  .pdp-kicker {
    gap: 8px;
    flex-wrap: wrap;
  }

  .pdp-title {
    font-size: 19px;
    line-height: 1.25;
    margin-bottom: 12px;
  }

  .pdp-rating-row {
    gap: 6px;
    font-size: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
  }

  .pdp-price-hero {
    padding: 10px 12px;
  }

  .pph-row {
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 4px;
  }

  .pph-label {
    font-size: 13px;
  }

  .pph-now {
    font-size: 18px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.1;
  }

  .pph-was {
    flex: 0 0 calc(100% - 42px);
    margin-left: 42px;
    font-size: 11.5px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .variant-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .variant-card {
    padding: 12px 14px;
  }

  .vc-label {
    font-size: 12px;
    line-height: 1.45;
  }

  .vc-prices { margin-top: 7px; gap: 3px 6px; }
  .vc-was { font-size: 10.5px; }
  .vc-price { font-size: 12.5px; }


  .pdp-key-info {
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.8;
  }

  .pdp-key-info ul {
    gap: 6px;
  }

  .pdp-buybar {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .btn-buy-now,
  .btn-add-cart-primary {
    min-width: 0;
    height: 48px;
    padding: 10px 8px;
    font-size: 12.5px;
    gap: 6px;
    letter-spacing: 0;
  }

  .btn-buy-now svg,
  .btn-add-cart-primary svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .btn-buy-now span,
  .btn-add-cart-primary .btn-text--full,
  .btn-add-cart-primary .btn-text--short {
    white-space: nowrap;
  }

  .btn-call-order {
    padding: 12px 10px;
    font-size: 12.5px;
    gap: 6px;
    text-align: center;
    flex-wrap: wrap;
  }

  .btn-call-order strong {
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------------
   WooCommerce general — table overflow tại <= 640px
   ------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Order detail items table — scroll ngang fallback */
  .woocommerce-table--order-details {
    display: block; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .woocommerce-table--order-details th,
  .woocommerce-table--order-details td { white-space: nowrap; }
  .woocommerce-table--order-details .woocommerce-table__product-name a {
    white-space: normal; min-width: 160px; display: block;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   Z Fold 280px — WooCommerce
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 320px) {
  /* PDP */
  .pdp-buybar { gap: 6px; }
  .btn-buy-now, .btn-add-cart-primary { font-size: 12px; padding: 10px 8px; }
  .variant-cards { grid-template-columns: 1fr; }
  .variant-card { padding: 10px 12px; }
  .pdp-key-info--side { padding: 12px; }

  /* Orders card */

  /* Account cards */

  /* Cart */
  .woocommerce-cart-form tr { grid-template-columns: 70px 1fr; gap: 0 10px; }
  .woocommerce-cart-form .product-thumbnail img { width: 70px; height: 70px; }

  /* Checkout */
}

/* Z Fold 280px — additional overflow containment */
@media (max-width: 320px) {
  /* Shop sidebar + main: prevent filter plugin content from breaking grid */

  /* Cart: contain form and cart items */
  .woocommerce-cart .cart-layout,
  .woocommerce-cart-form,
  .woocommerce-cart-form table { max-width: 100%; overflow-x: hidden; }

  /* PDP tabs + description section */
  .pdp-tabs, .pdp-tabs-content,
  .desc-main-wrap, .desc-main, .desc-main__inner { max-width: 100%; overflow-x: hidden; }

  /* General WC content containment */
  .woocommerce, .woocommerce-page { overflow-x: hidden; }
}

/* ============================================================
 * Dark mode: devvn-woocommerce-reviews plugin
 * Tất cả text trong review tab → ink color cho dark mode.
 * Loại trừ star icons (giữ vàng) + filter pill active + reply link.
 * ============================================================ */

/* Rating bar track — plugin dùng !important → phải match specificity */
[data-theme="dark"] #reviews.devvn-style3 .devvn_scala_rating,
[data-theme="dark"] .devvn_scala_rating { background: var(--bg-3) !important; }

/* Filter chips (5★, 4★, ... Có video, Có ảnh) */
[data-theme="dark"] .devvn_filter_btn:not(.devvn_filter_btn_active) {
  background: var(--bg-3) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .devvn_filter_btn { color: var(--ink) !important; }

/* Review section heading + sub-text */
[data-theme="dark"] .woocommerce-Reviews-title,
[data-theme="dark"] .woocommerce-Reviews .star_box_right_desc,
[data-theme="dark"] .woocommerce-Reviews .star_box_right h3,
[data-theme="dark"] .woocommerce-Reviews .star-average,
[data-theme="dark"] .woocommerce-Reviews .devvn_num_reviews { color: var(--ink) !important; }

/* Review summary box + comment box backgrounds */
[data-theme="dark"] .devvn_review_summary,
[data-theme="dark"] .devvn_cmt_box,
[data-theme="dark"] .comment_container.devvn_review_box,
[data-theme="dark"] .devvn-style3-header-box { background: var(--bg-2) !important; color: var(--ink) !important; }

/* Review item — author name, verified badge, content text */
[data-theme="dark"] .woocommerce-review__author,
[data-theme="dark"] .woocommerce-review__published-date,
[data-theme="dark"] .comment_container .meta,
[data-theme="dark"] .devvn_review_top,
[data-theme="dark"] .devvn_review_mid,
[data-theme="dark"] .devvn_review_bottom,
[data-theme="dark"] .comment-text,
[data-theme="dark"] .commentlist .description,
[data-theme="dark"] .comment_container .description,
[data-theme="dark"] .devvn_cmt_content { color: var(--ink) !important; }

/* Verified "Đã mua hàng" — keep success green */
[data-theme="dark"] .woocommerce-review__verified { color: var(--ok) !important; }

/* Reply link "Trả lời" / "thích" / "Sửa" — giữ link colors theo theme */
[data-theme="dark"] .comment-reply-link,
[data-theme="dark"] .comment-reply-title { color: var(--ink) !important; }

/* "Đánh giá ngay" button — gradient đỏ đã có; chỉ ensure không bị override màu xám */
[data-theme="dark"] .btn-reviews-now { color: #fff !important; }

[data-theme="dark"] .note_review a { color:var(--red-ink) !important; }

/* Review mid — <p> và .description bên trong cũng cần override */
[data-theme="dark"] .devvn_review_mid p,
[data-theme="dark"] .devvn_review_mid .description { color: var(--ink) !important; }

/* Quick tag chips — rgba(0,0,0,.4) vô hình trên dark bg */
[data-theme="dark"] .review_quick_tag span {
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

/* "Xem tất cả N phản hồi" toggle — #555 mất trên dark bg */
[data-theme="dark"] .devvn-style3-toggle-replies { color: var(--muted) !important; }
[data-theme="dark"] .devvn-style3-toggle-replies:hover { color: var(--ink) !important; }

/* ============================================================
 * Cart coupon — nút "Áp dụng" class="btn dark"
 * .btn.dark dùng background:var(--ink) → trắng trong dark mode
 * ============================================================ */
[data-theme="dark"] .btn.dark {
  background: var(--bg-3);
  color: var(--ink) !important;
  border: 1px solid var(--line);
}
[data-theme="dark"] .btn.dark:hover {
  background: var(--line);
  color: var(--ink) !important;
}


/* ============================================================
 * PDP Gallery — cursor + lightbox
 * ============================================================ */
#pdp-main-wrap { cursor: zoom-in; }

/* Lightbox overlay */
.hp-lb {
  position: fixed; inset: 0; z-index: 100020;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .24s ease;
}
.hp-lb.hp-lb--visible { opacity: 1; }
.hp-lb__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.88); backdrop-filter: blur(4px);
}
.hp-lb__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  max-width: 95vw; max-height: 95vh;
}
.hp-lb__img-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.hp-lb__img {
  display: block;
  max-width: min(92vw, 1200px); max-height: 90vh;
  border-radius: 10px; object-fit: contain;
  transition: opacity .18s ease;
  background: #111;
}
.hp-lb__close {
  position: fixed; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; cursor: pointer; z-index: 2;
  background: rgba(255,255,255,.15); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.hp-lb__close:hover { background: rgba(255,255,255,.3); }
.hp-lb__arrow {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff;
  font-size: 32px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; user-select: none;
}
.hp-lb__arrow:hover { background: rgba(255,255,255,.3); }
.hp-lb__counter {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 13px; padding: 4px 14px; border-radius: 20px;
}
.hp-lb__spinner {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
}
.hp-lb__spinner::after {
  content: ''; width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  animation: lb-spin .7s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }

body.hp-lb--open { overflow: hidden; }

@media (max-width: 600px) {
  .hp-lb__arrow { width: 38px; height: 38px; font-size: 24px; }
  .hp-lb__img { max-width: 98vw; max-height: 85vh; border-radius: 6px; }
  .hp-lb__inner { gap: 6px; }
}

/* Related products heading */
/* Đóng khung trắng giống .pdp-tabs-section (cùng kiểu card/tab) */
.pdp-related { margin-top: 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
[data-theme="dark"] .pdp-related { background: var(--surface); }
.pdp-related__heading {
  font-size: 18px; font-weight: 700; color:var(--red-ink);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 22px; padding-bottom: 12px; position: relative;
  border-bottom: 1px solid var(--line);
}
[data-theme="dark"] .pdp-related__heading { color:var(--red-ink); }
/* Accent đỏ ngắn dưới chữ (thay gạch đỏ full-width cũ) */
.pdp-related__heading::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 54px; height: 3px; background: var(--red); border-radius: 2px;
  transition: width .25s ease;
}
/* Hover: accent bar nở rộng (animation nhẹ, không đụng transform reveal) */
.pdp-related__heading:hover::after { width: 88px; }

/* PDP gallery — video thumbnail */
.pdp-gallery-card .thumbs .t--video { cursor: pointer; }
.pdp-gallery-card .thumbs .t--video img { object-fit: cover; padding: 0; }
.pdp-gallery-card .thumbs .t--video .t__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: rgba(0,0,0,.35);
  transition: background .15s;
  pointer-events: none;
}
.pdp-gallery-card .thumbs .t--video:hover .t__play { background: rgba(0,0,0,.55); }
.pdp-gallery-card .thumbs .t--video .t__play svg {
  background: rgba(221,51,51,.95);
  border-radius: 50%;
  padding: 6px;
  width: 32px; height: 32px;
}

/* YouTube video lightbox */
.hp-vlb {
  position: fixed; inset: 0; z-index: 100010;
  opacity: 0; transition: opacity .24s;
  display: flex; align-items: center; justify-content: center;
}
.hp-vlb--visible { opacity: 1; }
.hp-vlb__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.9); }
.hp-vlb__inner {
  position: relative; z-index: 1;
  width: 92vw; max-width: 1280px;
}
.hp-vlb__frame {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.hp-vlb__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.hp-vlb__close {
  position: absolute; top: -42px; right: 0;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.1);
  border: 0; border-radius: 50%;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.hp-vlb__close:hover { background: rgba(255,255,255,.2); }

/* ============================================================
 * Login/Register page — /my-account/ (Hưng Phát redesign)
 * ============================================================ */
/* Hero header (KHÔNG logo — header trang đã có) — đồng bộ barem trang chính sách. */
[data-theme="dark"] .hp-login__card {
  background: var(--bg-2);
  border-color: var(--line);
}
[data-theme="dark"] .hp-login__card--register {
  background: linear-gradient(135deg, rgba(221, 51, 51, .08) 0%, var(--bg-2) 100%);
}
/* Đè nút mặc định WooCommerce (xám) — specificity thấp hơn WC nên phải ép. */
.woocommerce .hp-login__submit {
  background: linear-gradient(135deg, var(--red), #b71c1c) !important;
  color: #fff !important;
  border: 0 !important;
  text-shadow: none !important;
}
.woocommerce .hp-login__submit:hover { background: linear-gradient(135deg, #c42828, #a5121a) !important; }
/* Register = hành động phụ → nền mực (than) on-brand, KHÔNG xanh lệch tông. */

.woocommerce .hp-login__submit--register {
  background: linear-gradient(135deg, #232733, #14181f) !important;
}

.woocommerce .hp-login__submit--register:hover { background: linear-gradient(135deg, #2c3340, #1a1d24) !important; box-shadow: 0 6px 16px -6px rgba(15,20,25,.4) !important; }

/* Benefits — khung trắng nổi trên nền trang + divider mảnh (đồng bộ barem thẻ site). */
[data-theme="dark"] .hp-login__benefits { background: var(--bg-2); }

/* ============================================================
 * Dark mode: red TEXT contrast fix (PDP elements)
 * #d42626 trên --surface (#0d1117) chỉ ~3.3:1 — fail WCAG AA.
 * Override sang #ff5050 (5.3:1 trên #0d1117, 4.7:1 trên #151a21).
 * ============================================================ */
[data-theme="dark"] .phc-phone { color:var(--red-ink) !important; }
[data-theme="dark"] .pdp-tabs .tab.active,
[data-theme="dark"] .hp-pdp-tabs__nav button.is-active { color:var(--red-ink); border-color: var(--red-ink); }
[data-theme="dark"] .desc-sb-title { color:var(--red-ink); }
[data-theme="dark"] .desc-readmore-btn { color:var(--red-ink); border-color: var(--red-ink); }
[data-theme="dark"] .hp-login__benefit i { color:var(--red-ink); }
[data-theme="dark"] .pdp-tabs-section .woocommerce-Price-amount,
[data-theme="dark"] .pdp-tabs-section b,
[data-theme="dark"] .pdp-tabs-section bdi { color:var(--red-ink); }

/* ============================================================
 * A11y: pagination touch target đủ lớn (Lighthouse target-size)
 * .page-numbers mặc định WC quá nhỏ trên mobile.
 * ============================================================ */
/* Dùng !important + selector khớp WC vì WC core đặt min-width:1em/display:block specificity cao */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-pagination ul.page-numbers {
  display: flex !important; flex-wrap: wrap; gap: 8px; border: 0;
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; }
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers,
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
  min-width: 44px !important; min-height: 44px !important;
  padding: 8px 10px !important; box-sizing: border-box;
  display: inline-flex !important; align-items: center; justify-content: center;
}

/* ============================================================
 *  Mô tả danh mục ở cuối trang — read-more (mặc định cao 500px)
 * ============================================================ */ /* center nút Xem thêm */
/* gradient mờ đáy khi đang thu gọn */

/* ---- Subcategory chips dưới heading danh mục (2026-07-02) ---- */
[data-theme="dark"] .hp-subcat{background:var(--bg)}

/* ---- Trang tag redesign (2026-07-02) ---- */

/* Trang tag sản phẩm: grid full-width không sidebar (2026-07-02) */

/* ---- Header danh mục v2: chip cột phải, header thấp, SVG watermark nghiêng góc phải (2026-07-02) ---- */

/* ---- Mô tả danh mục premium (2026-07-02) ---- */
[data-theme="dark"] .hp-cat-desc{background:var(--bg)}

/* Fix pagination hiện bullet đen (2026-07-02): list-style reset vốn nằm trong
   woocommerce-general (đã tắt ở 1.7.9) → reset lại tại theme. */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul{list-style:none;margin:0;padding:0}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-pagination ul.page-numbers li,
nav.woocommerce-pagination ul li{list-style:none}

/* ---- Thu gọn khối phương thức thanh toán checkout (anh Phát 2026-07-02) ----
   WC core css (giữ trên checkout) tô #payment nền tím + payment_box tím đậm + padding to. */
#payment.woocommerce-checkout-payment { background: transparent !important; border-radius: 0; } /* mũi tên tam giác WC */
[data-theme="dark"] #payment div.payment_box { background: var(--bg-3) !important; }

/* ---- QA 2026-07-02: pagination blog archive (hp-pagination chưa từng có CSS màn hình) ---- */
[data-theme="dark"] ul.hp-pagination .page-numbers{background:var(--bg-2)}
[data-theme="dark"] ul.hp-pagination .page-numbers.current{background:var(--red);color:#fff}

/* ---- QA: nút disabled (vd "Cập nhật giỏ") chữ trắng trên nền nhạt → contrast rõ ---- */
.btn:disabled,.btn[disabled],button.btn[disabled]{background:var(--bg-3);color:var(--muted);border-color:var(--line);cursor:not-allowed;box-shadow:none}

/* ---- Select2 (tỉnh/thành checkout) restyle theo hp (anh Phát 2026-07-02) ----
   WC select2.css mặc định: ô search không viền nhìn như khung rời, item thô. */
.select2-container--default .select2-selection--single{height:46px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:44px;padding-left:14px;color:var(--ink);font-size:14px}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:44px}
.select2-container--open .select2-selection--single{border-color:var(--red)}
.select2-dropdown{border:1px solid var(--red);border-radius:10px;box-shadow:0 14px 36px -10px rgba(15,20,25,.22);overflow:hidden;z-index:100020}
.select2-search--dropdown{padding:8px;background:#fff;border-bottom:1px solid var(--line)}
.select2-search--dropdown .select2-search__field{border:1px solid var(--line)!important;border-radius:8px;height:38px;padding:0 12px!important;font:inherit;font-size:13.5px;background:var(--bg-2);outline:none;box-sizing:border-box}
.select2-search--dropdown .select2-search__field:focus{border-color:var(--red)!important;background:#fff}
.select2-results>.select2-results__options{max-height:280px}
.select2-results__option{padding:9px 14px;font-size:13.5px}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected]{background:var(--red);color:#fff}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true]{background:var(--red-50);color:var(--red-ink)}
/* Dark mode (dropdown gắn vào body — vẫn ăn [data-theme] trên html) */
[data-theme="dark"] .select2-dropdown{background:var(--bg-2)}
[data-theme="dark"] .select2-search--dropdown{background:var(--bg-2);border-bottom-color:var(--line)}
[data-theme="dark"] .select2-search--dropdown .select2-search__field{background:var(--bg-3);color:var(--ink)}
[data-theme="dark"] .select2-results__option{color:var(--ink-2)}
[data-theme="dark"] .select2-container--default .select2-selection--single{background:var(--bg-2)}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink)}

/* QA: devvn reviews dark — ol.commentlist hardcode #fafafa trắng lóa (2026-07-02) */
[data-theme="dark"] #reviews ol.commentlist{background:var(--bg-2)!important}
.select2-results__option:empty{display:none} /* option placeholder rỗng hiện thanh đỏ trống */

/* Fix 1.7.99: dark + mobile (<600px) active tab có nền đỏ → chữ TRẮNG (không #ff5050 đỏ/đỏ) */
@media (max-width: 600px) {
	[data-theme="dark"] .pdp-tabs .tab.active { color: #fff; }
	[data-theme="dark"] .pdp-tabs .tab.active .tab-spark,
	[data-theme="dark"] .pdp-tabs .tab.active .use-svg { color: #fff !important; }
}

/* Mobile: giảm padding tổng thể khung tab + phần đánh giá (đỡ chật/bị bóp) — 2026-08-13 */
@media (max-width: 600px) {
  .pdp-tabs-section { padding: 14px; }
  .style-v2.woocommerce-Reviews,
  #reviews.woocommerce-Reviews { padding-left: 0 !important; padding-right: 0 !important; }
  .devvn-style3-header-box { padding: 18px 14px !important; }
}

/* ==========================================================================
   FILTER UX — mobile toolbar (Bộ lọc + Sắp xếp sheet) + drawer + chips (2026-08-15)
   ========================================================================== */
@media (max-width:1080px){
  /* Thanh công cụ 1 hàng gọn: [Bộ lọc] [Sắp xếp ⌄]; ẩn label/chip/count inline */

  /* Nút Bộ lọc — pill đỏ, icon + nhãn + badge số */

  /* Nút Sắp xếp — mở bottom-sheet */

  /* Sidebar -> drawer trượt trái */
}

/* Bottom-sheet Sắp xếp (mobile) */
.hp-sortsheet__list .fa-circle-check{color:var(--red,#d42626);font-size:16px;opacity:0}
.hp-sortsheet__list button.is-active .fa-circle-check{opacity:1}
[data-theme="dark"] .hp-sortsheet{background:var(--bg-2,#151a21)}
[data-theme="dark"] .hp-sortsheet-open{background:var(--bg,#0f141a);border-color:var(--line,#232a33)}

/* Chip bộ lọc đang chọn */
/* Empty state */
/* Dark mode */
[data-theme="dark"] .hp-shop__sidebar{background:var(--bg-2,#151a21)}
[data-theme="dark"] .hp-filter-drawer-head,[data-theme="dark"] .hp-filter-apply{background:var(--bg-2,#151a21)}
[data-theme="dark"] .hp-filter-open__count{background:var(--bg-2,#151a21)}

/* Câu hỏi thường gặp (FAQ per-product) — PDP (2026-08-15) */
.hp-faq{margin:28px 0 8px}
.hp-faq__title{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;color:var(--ink);margin:0 0 16px}
.hp-faq__title i{color:var(--red)}
.hp-faq__list{display:flex;flex-direction:column;gap:10px}
.hp-faq__item{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.hp-faq__q{list-style:none;cursor:pointer;padding:14px 16px;font-weight:600;font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:12px}
.hp-faq__q::-webkit-details-marker{display:none}
.hp-faq__q::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:12px;color:var(--muted);transition:transform .2s;flex:0 0 auto}
.hp-faq__item[open] .hp-faq__q::after{transform:rotate(180deg)}
.hp-faq__item[open] .hp-faq__q{color:var(--red-ink)}
.hp-faq__a{padding:0 16px 15px;color:var(--ink-2);line-height:1.65;font-size:14.5px}
[data-theme="dark"] .hp-faq__item{background:var(--bg-2);border-color:var(--line)}
@media(max-width:600px){.hp-faq__title{font-size:17px}.hp-faq__q{font-size:14px;padding:13px 14px}.hp-faq__a{font-size:14px;padding:0 14px 13px}}