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

/* ============ ARCHIVE / SHOP LAYOUT ============ */
.hp-shop {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 16px;
  padding: 0 0 20px; /* bỏ padding-top: breadcrumb margin-bottom đã tạo gap trên, tránh cộng dồn 16+20=36px */
}
@media (max-width: 1080px) {
  .hp-shop { grid-template-columns: 1fr; }
}
/* 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. */
  .hp-shop__sidebar { grid-column: 1; grid-row: 1; }
  .hp-shop__main    { grid-column: 2; grid-row: 1; }
}

.hp-shop__sidebar { align-self: start; } /* bỏ sticky (anh Phát 2026-07-02) */

.hp-shop__main { display: flex; flex-direction: column; gap: 16px; }

.hp-shop__heading {
  background: #fff; border-radius: var(--radius); padding: 20px;
  border: 1px solid var(--line);
}
[data-theme="dark"] .hp-shop__heading { background: var(--bg); }
.hp-shop__heading h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; }
.hp-shop__heading p { margin: 0; color: var(--muted); }

/* Sort bar */
.hp-sort-bar {
  background: #fff; border-radius: var(--radius); padding: 12px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  border: 1px solid var(--line);
}
[data-theme="dark"] .hp-sort-bar { background: var(--bg); }
.hp-sort-bar__label { font-size: 12.5px; color: var(--muted); margin-right: 8px; }
.hp-sort-bar__chip {
  background: var(--bg-2); color: var(--ink-2);
  padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 500;
  cursor: pointer; border: 0; text-decoration: none;
}
.hp-sort-bar__chip:hover { background: var(--red-50); color:var(--red-ink); }
.hp-sort-bar__chip.is-active { background: var(--red); color: #fff; }
.hp-sort-bar__count { margin-left: auto; font-size: 12px; color: var(--muted); }

/* Product grid */
.hp-product-grid {
  /* minmax(0,1fr): cột bằng nhau TUYỆT ĐỐI — tránh 1 cột phình to khi card có
     nội dung dài không wrap (tên SP/spec) đẩy min-width vượt 1fr. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 960px)  { .hp-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .hp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .hp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ============ SINGLE PRODUCT (PDP) ============ */
[data-theme="dark"] .hp-pdp__gallery { background: var(--bg); }
[data-theme="dark"] .hp-pdp__info { background: var(--bg); }
[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) === */
/* ============================================================ */
/* 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à) */
/* 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) {
  /* Hộp quà full-width: text nửa trái, hình quà nửa phải (gọn hơn) */
}

/* Gallery */
/* iPad/mobile: thumbs cuộn ngang, kích thước ổn định (tránh grid 5 cột chen nhỏ → "bể hình") */

/* Trust strip */

/* Info column */

/* Price hero — có khung, padding gọn */
.pph-now .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.pph-was .woocommerce-Price-amount,
.pph-was .woocommerce-Price-currencySymbol {
  color: inherit !important;
  font-size: inherit;
  font-weight: 400 !important;
}

/* Spec chips grid */

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

/* Key info boxes (2 box: short_desc + variation_desc) */

/* Buybar */
[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; }
[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). */   /* 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 */

/* Cam kết bản quyền phần mềm — khối nổi bật */
[data-theme="dark"] .pdp-license-card { background: linear-gradient(180deg, var(--red-50), var(--surface)); border-color: rgba(221, 51, 51, .35); }

/* Hotline card — styled like benefit card */

/* Tabs */

/* 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) {  /* "Mô tả sản phẩm" → chỉ "Mô tả" ở mobile */
  /* !important để đè perf.css (.tab.active .tab-spark{color:var(--red-ink)}) — icon đỏ trên nền đỏ = tàng hình */
}
/* 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) */

/* Description grid */

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

/* Review filter (devvn): pills NGANG, gọn — mặc định plugin để stack dọc full-width */
/* 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). */

/* iPad/tablet: thu gọn card PDP (KHUYẾN MÃI / QUYỀN LỢI / CAM KẾT) — đỡ chiếm diện tích */

/* 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. */
/* Flatsome inline width style trên col — override */

/* Q&A */

/* PDP tab panel padding */

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

.pdp .woocommerce-product-rating,
.pdp .woocommerce-product-details__short-description { display: none; }

/* ============ PDP Description — Xem thêm (clamp = chiều cao sidebar) ============ */
/* 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. */

/* ACF spec table — reset inline style + nice formatting */

/* Spec table — multi-option list (CPU/RAM/SSD có nhiều options) */

/* Ẩn Q&A của devvn-woocommerce-reviews — dùng tab Hỏi & Đáp riêng của theme */

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

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

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

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

/* Button loading state */
@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.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 */
.vat-partial-note { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.5; color:var(--ink-2,#374151); background:var(--red-50,#fdeaea); border:1px solid rgba(212,38,38,.22); border-radius:10px; padding:9px 11px; margin:0 0 10px; }
.vat-partial-note i { color:var(--red,#d42626); margin-top:2px; }
[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) ---- */
.crumbs { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); padding: 12px 0 18px; }
.crumbs a { color: var(--muted); font-weight: 600; cursor: pointer; }
.crumbs a:hover { color:var(--red-ink); }
.crumbs .sep { width: 14px; height: 14px; opacity: .5; }
.crumbs .cur { color: var(--ink); font-weight: 700; }

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

  /* Buybar 2 nút → 2 cột ngang bằng nhau */

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

  /* PDP tabs nav scroll ngang */

  /* Key info box padding */
}

/* -------------------------------------------------------------------
   2f. PDP — Fold / narrow phones ~344px
   ------------------------------------------------------------------- */

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

  /* 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 */
  .hp-shop, .hp-shop__sidebar, .hp-shop__main,
  .hp-shop__heading { max-width: 100%; overflow-x: hidden; }

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

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

/* Lightbox overlay */
@keyframes lb-spin { to { transform: rotate(360deg); } }

/* Related products heading */
/* Đóng khung trắng giống .pdp-tabs-section (cùng kiểu card/tab) */
[data-theme="dark"] .pdp-related { background: var(--surface); }
[data-theme="dark"] .pdp-related__heading { color:var(--red-ink); }
/* Accent đỏ ngắn dưới chữ (thay gạch đỏ full-width cũ) */
/* Hover: accent bar nở rộng (animation nhẹ, không đụng transform reveal) */

/* PDP gallery — video thumbnail */

/* YouTube video lightbox */

/* ============================================================
 * 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)
 * ============================================================ */
.hp-cat-desc { margin: 30px 0 8px; text-align: center; } /* center nút Xem thêm */
.hp-cat-desc__inner {
  max-height: 500px; overflow: hidden; position: relative; text-align: left;
  line-height: 1.75; color: var(--ink-2, #444); font-size: 15px;
}
.hp-cat-desc.is-expanded .hp-cat-desc__inner { max-height: none; }
/* gradient mờ đáy khi đang thu gọn */
.hp-cat-desc:not(.is-expanded):not(.is-short) .hp-cat-desc__inner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(transparent, var(--bg, #fff)); pointer-events: none;
}
.hp-cat-desc__inner h2, .hp-cat-desc__inner h3 { color: var(--ink); }
.hp-cat-desc__inner img { max-width: 100%; height: auto; border-radius: 8px; }
.hp-cat-desc__toggle {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1.5px solid var(--red, #d42626); color: var(--red, #d42626);
  font-weight: 700; font-size: 14px; padding: 9px 22px; border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s;
}
.hp-cat-desc__toggle:hover { background: var(--red, #d42626); color: #fff; }

/* ---- Subcategory chips dưới heading danh mục (2026-07-02) ---- */
.hp-subcats{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.hp-subcat{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:border-color .15s,color .15s,box-shadow .15s}
.hp-subcat:hover{border-color:var(--red);color:var(--red-ink);box-shadow:0 2px 8px rgba(221,51,51,.12)}
.hp-subcat__count{background:var(--bg-2);color:var(--muted);font-size:11px;font-weight:700;border-radius:99px;padding:2px 8px;min-width:24px;text-align:center;line-height:1.4}
.hp-subcat:hover .hp-subcat__count{background:var(--red-50);color:var(--red-ink)}
[data-theme="dark"] .hp-subcat{background:var(--bg)}
@media (max-width:768px){.hp-subcats{flex-wrap:wrap;overflow:visible}}

/* ---- Trang tag redesign (2026-07-02) ---- */
.hp-tag-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--red-ink);text-transform:uppercase;margin-bottom:6px}
.hp-tag-heading .hp-tag-count{margin:4px 0 0;color:var(--muted);font-size:13px}
.hp-subcats__label{display:inline-flex;align-items:center;font-size:12.5px;color:var(--muted);font-weight:600;padding:8px 0;flex-shrink:0}

/* Trang tag sản phẩm: grid full-width không sidebar (2026-07-02) */
.hp-shop--full{grid-template-columns:1fr}

/* ---- Header danh mục v2: chip cột phải, header thấp, SVG watermark nghiêng góc phải (2026-07-02) ---- */
.hp-cat-hero{padding:20px 28px}
.hp-cat-hero__bg{position:absolute;right:-26px;bottom:-48px;width:235px;height:235px;color:var(--red-ink);opacity:.09;filter:blur(2px);transform:rotate(-12deg);pointer-events:none;z-index:0}
.hp-cat-hero--banner .hp-cat-hero__bg{color:#fff;opacity:.12}
.hp-cat-hero__body{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
.hp-cat-hero__info{flex:1 1 340px;min-width:0}
.hp-cat-hero__meta{margin-top:8px}
.hp-cat-hero .hp-subcats{margin:0;justify-content:flex-end;flex:0 1 auto;max-width:48%}
@media (max-width:900px){.hp-cat-hero .hp-subcats{max-width:100%;justify-content:flex-start}}

/* ---- Mô tả danh mục premium (2026-07-02) ---- */
.hp-cat-desc{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px 20px;margin:24px 0 8px;box-shadow:0 6px 24px -12px rgba(15,20,25,.10)}
.hp-cat-desc::before{content:"";position:absolute;top:0;left:28px;width:56px;height:3px;background:linear-gradient(90deg,var(--red),#ff8a8a);border-radius:0 0 3px 3px}
[data-theme="dark"] .hp-cat-desc{background:var(--bg)}
.hp-cat-desc__head{margin-bottom:10px}
.hp-cat-desc__inner{color:var(--ink-2);line-height:1.75;font-size:14px}
.hp-cat-desc__inner h2,.hp-cat-desc__inner h3{color:var(--ink);letter-spacing:-.01em;margin:1.2em 0 .5em}
.hp-cat-desc__inner h2{font-size:19px;padding-left:12px;border-left:3px solid var(--red)}
.hp-cat-desc__inner h3{font-size:16px}
.hp-cat-desc__inner a{color:var(--red-ink);font-weight:600;text-decoration:none}
.hp-cat-desc__inner a:hover{text-decoration:underline}
.hp-cat-desc__inner ul{padding-left:20px}
.hp-cat-desc__inner li{margin:4px 0}
.hp-cat-desc__toggle{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--red-50);color:var(--red-ink);border:1px solid transparent;border-radius:99px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s}
.hp-cat-desc__toggle:hover{border-color:var(--red)}
@media (max-width:768px){.hp-cat-desc{padding:20px 18px 16px;border-radius:12px}.hp-cat-desc::before{left:18px}}

/* 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) {
  .style-v2.woocommerce-Reviews,
  #reviews.woocommerce-Reviews { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ==========================================================================
   FILTER UX — mobile toolbar (Bộ lọc + Sắp xếp sheet) + drawer + chips (2026-08-15)
   ========================================================================== */
.hp-filter-open{display:none}
.hp-sortsheet-open{display:none}
.hp-active-filters{display:none}
@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 */
  .hp-sort-bar{gap:10px;padding:10px 12px}
  .hp-sort-bar__label,.hp-sort-bar__chip{display:none}
  .hp-sort-bar__count{flex-basis:100%;order:5;text-align:center;margin:0;font-size:12px;color:var(--muted,#6b7280)}

  /* Nút Bộ lọc — pill đỏ, icon + nhãn + badge số */
  .hp-filter-open{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;min-height:44px;padding:0 16px;background:var(--red,#d42626);color:#fff;border:0;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 1px 2px rgba(212,38,38,.25)}
  .hp-filter-open i{font-size:15px}
  .hp-filter-open__count{background:#fff;color:var(--red,#d42626);border-radius:99px;padding:1px 7px;font-size:11px;font-weight:800;min-width:18px;text-align:center}

  /* Nút Sắp xếp — mở bottom-sheet */
  .hp-sortsheet-open{display:inline-flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;min-height:44px;padding:0 14px;background:var(--bg-2,#f4f5f7);color:var(--ink,#0f1419);border:1px solid var(--line,#e5e7eb);border-radius:12px;font-size:14px;cursor:pointer;text-align:left}
  .hp-sortsheet-open__lead{color:var(--muted,#6b7280);font-weight:500;flex:0 0 auto}
  .hp-sortsheet-open__val{font-weight:700;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hp-sortsheet-open__caret{font-size:11px;color:var(--muted,#6b7280);flex:0 0 auto;transition:transform .2s}
  body.hp-sortsheet-active .hp-sortsheet-open__caret{transform:rotate(180deg)}

  /* Sidebar -> drawer trượt trái */
  .hp-shop__sidebar{position:fixed;top:0;left:0;height:100dvh;width:min(90vw,360px);background:#fff;z-index:1000;transform:translateX(-100%);transition:transform .28s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 96px;box-shadow:8px 0 30px rgba(0,0,0,.2);visibility:hidden}
  body.hp-filter-drawer-open .hp-shop__sidebar{transform:none;visibility:visible}
  .hp-filter-drawer-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:16px 2px;margin-bottom:6px;background:#fff;border-bottom:1px solid var(--line,#e5e7eb);z-index:2;font-weight:800;font-size:16px;color:var(--ink,#0f1419)}
  .hp-filter-drawer-close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:0;font-size:24px;cursor:pointer;color:var(--ink,#0f1419);line-height:1}
  .hp-filter-backdrop{position:fixed;inset:0;background:rgba(15,20,25,.5);z-index:999;opacity:0;visibility:hidden;transition:opacity .28s}
  body.hp-filter-drawer-open .hp-filter-backdrop{opacity:1;visibility:visible}
  body.hp-filter-drawer-open,body.hp-sortsheet-active{overflow:hidden}
  .hp-filter-apply{position:fixed;left:0;bottom:0;width:min(90vw,360px);padding:12px 16px;background:#fff;border-top:1px solid var(--line,#e5e7eb);z-index:1001;display:none}
  body.hp-filter-drawer-open .hp-filter-apply{display:block}
  .hp-filter-apply button{width:100%;min-height:48px;background:var(--red,#d42626);color:#fff;border:0;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer}
}

/* Bottom-sheet Sắp xếp (mobile) */
.hp-sortsheet-backdrop{position:fixed;inset:0;background:rgba(15,20,25,.5);z-index:1099;opacity:0;visibility:hidden;transition:opacity .25s}
body.hp-sortsheet-active .hp-sortsheet-backdrop{opacity:1;visibility:visible}
.hp-sortsheet{position:fixed;left:0;right:0;bottom:0;z-index:1100;background:#fff;border-radius:18px 18px 0 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:0 -8px 30px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom,0)}
body.hp-sortsheet-active .hp-sortsheet{transform:none}
.hp-sortsheet__grip{width:38px;height:4px;border-radius:99px;background:var(--line,#e5e7eb);margin:10px auto 2px}
.hp-sortsheet__head{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 8px;font-weight:800;font-size:16px;color:var(--ink,#0f1419)}
.hp-sortsheet__close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:0;font-size:24px;line-height:1;color:var(--muted,#6b7280);cursor:pointer}
.hp-sortsheet__list{list-style:none;margin:0;padding:0 8px 14px}
.hp-sortsheet__list li{margin:0}
.hp-sortsheet__list button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0 14px;background:none;border:0;border-radius:12px;font-size:15px;color:var(--ink,#0f1419);cursor:pointer;text-align:left}
.hp-sortsheet__list button:active{background:var(--bg-2,#f4f5f7)}
.hp-sortsheet__list .fa-circle-check{color:var(--red,#d42626);font-size:16px;opacity:0}
.hp-sortsheet__list button.is-active{font-weight:800;color:var(--red,#d42626)}
.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)}
@media (min-width:1081px){.hp-sortsheet,.hp-sortsheet-backdrop{display:none!important}}

/* Chip bộ lọc đang chọn */
.hp-active-filters.has-items{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.hp-active-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;background:var(--bg-2,#f7f8fa);border:1px solid var(--line,#e5e7eb);border-radius:99px;font-size:12.5px;color:var(--ink,#0f1419);cursor:pointer;transition:border-color .15s,color .15s}
.hp-active-chip:hover{border-color:var(--red,#d42626);color:var(--red,#d42626)}
.hp-active-chip .x{font-size:14px;line-height:1;opacity:.65}
.hp-active-clear{font-size:12.5px;color:var(--red,#d42626);cursor:pointer;font-weight:600;background:none;border:0;text-decoration:underline}
/* Empty state */
.hp-filter-empty{text-align:center;padding:44px 20px;color:var(--muted,#6b7280)}
.hp-filter-empty i{font-size:42px;color:var(--line,#d1d5db);margin-bottom:12px;display:block}
.hp-filter-empty h3{margin:0 0 6px;font-size:17px;color:var(--ink,#0f1419)}
.hp-filter-empty button{margin-top:14px;padding:9px 18px;background:var(--red,#d42626);color:#fff;border:0;border-radius:8px;font-weight:700;cursor:pointer}
/* 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)}

@media (min-width:1081px){.hp-filter-drawer-head,.hp-filter-apply,.hp-filter-backdrop{display:none!important}}
.hp-product-grid .hp-filter-empty{grid-column:1/-1}