/* =========================================================
   WOOCOMMERCE — SHOP / CATEGORY ARCHIVE (Flatsome markup THẬT)
   Viết lại toàn bộ theo view-source thật của trang category
   (không phải ul.products li.product như bản cũ — Flatsome
   dùng div.products.row > div.product-small.col.product):

     .products.row (grid, Flatsome tự set cột qua large-columns-4...)
       > .product-small.col.has-hover.product   (item — KHÔNG style, chỉ là ô grid)
           > .col-inner                          (★ khung card gắn Ở ĐÂY)
               > .badge-container...             (chứa .dx-product__tag nếu sale — xem ghi chú #5)
               > .product-small.box
                   > .box-image > .image-zoom > a > img
                            + .image-tools × 3 (rỗng — ẩn, xem ghi chú #1)
                   > .box-text.box-text-products
                       > .title-wrapper > p.category + p.product-title > a
                       > .price-wrapper > span.price .amount (+ del/ins nếu sale)
                       > .add-to-cart-button > a.add_to_cart_button

   ⚠️ GHI CHÚ #1 — .image-tools rỗng:
   3 div .image-tools trong markup thật hiện KHÔNG chứa gì (wishlist/
   compare chưa bật ở site này). Ẩn hẳn bằng display:none thay vì bỏ
   qua, để tránh 3 vùng vô hình nằm đè lên ảnh (Flatsome CSS gốc định
   vị chúng bằng position:absolute) gây click nhầm vùng ảnh/link sản
   phẩm. Nếu sau này bật wishlist/compare, phải xoá rule display:none
   này trước rồi mới style riêng cho từng icon.

   ⚠️ GHI CHÚ #2 — khung card gắn trên .col-inner, KHÔNG phải trên
   .product-small.box hay .product-small.product:
   .product-small.product (ô ngoài cùng) là đơn vị grid — Flatsome set
   width/gutter/float lên chính nó qua large-columns-4/medium-columns-3;
   thêm border/shadow trực tiếp lên đây có nguy cơ ăn theo margin âm
   mà Flatsome dùng cho gutter, làm lệch lưới. .product-small.box là
   lớp con bên trong .col-inner — nếu style khung ở đây thì .col-inner
   (nếu Flatsome có thêm padding/hover riêng sau update theme) sẽ tạo
   ra khung lồng khung. .col-inner là điểm trung gian ổn định nhất —
   ĐỒNG THỜI .col-inner cần position:relative vì .badge-container
   (position:absolute, class utility "absolute left top" của Flatsome)
   ghim góc theo nó (xem ghi chú #5).

   ⚠️ GHI CHÚ #3 — nút Add to cart chuyển thành icon tròn, 2 trạng
   thái AJAX thật của WooCommerce PHẢI xử lý riêng, không thì vỡ giao
   diện lúc bấm:
     - .add_to_cart_button.loading  → WC core tự chèn ký tự spinner
       qua ::after (font-family WooCommerce). Ẩn icon giỏ hàng CSS của
       mình lúc này (::before), hiện spinner core thay vào, không thì
       2 icon đè lên nhau.
     - .added_to_cart (link "View cart") → WC tự chèn thêm 1 thẻ <a>
       MỚI ngay sau nút, cùng cấp trong .add-to-cart-button, sau khi
       thêm giỏ AJAX thành công. Không style thì nó hiện ra dạng link
       xanh mặc định trình duyệt, lệch tông với icon tròn bên cạnh.

   ⚠️ GHI CHÚ #4 — không có .page-title / breadcrumb ở trang category
   hay trang shop chính: xác nhận từ 2 view-source thật (category
   "Family & Kids" và post-type-archive "Shop") — sau <header> luôn là
   .category-page-row > .shop-container > (.term-description nếu là
   category, KHÔNG có nếu là trang Shop gốc) rồi tới .products luôn,
   KHÔNG có wrapper page-title nào. Phần style tiêu đề trang trong bản
   cũ trỏ vào .woocommerce-shop .page-title là style chết, bỏ hẳn.

   ⚠️ GHI CHÚ #5 — BUG ĐÃ GẶP: badge "Sale" thật KHÔNG dùng
   span.onsale (mặc định WooCommerce) mà site này có hook custom đổi
   thành span.dx-product__tag, nằm trong .badge-container:
     <div class="badge-container absolute left top z-1">
       <span class="dx-product__tag">Sale</span>
     </div>
   Class "dx-product__tag" KHÔNG phải style chết — nó đang được style
   thật bởi dx-product-card-css (product-card.css, enqueue trong
   <head>), vốn viết cho 1 component .dx-product KHÁC (card.php,
   component đó mới thật sự không nơi nào gọi tới). Rule gốc ở đó:
     .dx-product__tag{ position:absolute; top:14px; left:14px; ... }
   .badge-container (class utility "absolute left top z-1" của
   Flatsome) ĐÃ là position:absolute để ghim góc trên-trái .col-inner.
   Nếu để .dx-product__tag tự ý absolute thêm 1 lớp nữa bên trong, nó
   sẽ định vị theo chính .badge-container — mà .badge-container không
   có kích thước cố định (dễ co về 0×0 vì con bên trong lại absolute),
   khiến vị trí cuối cùng của badge không ổn định giữa các sản phẩm.
   FIX: viết đè CHỈ trong phạm vi .badge-container .dx-product__tag
   (2 class lồng nhau, đặc hiệu hơn rule gốc 1 class) — ép về
   position:static, để .badge-container lo việc ghim góc, span chỉ
   cần margin để tạo khoảng đệm. KHÔNG sửa product-card.css (tránh ảnh
   hưởng chỗ khác nếu class này còn dùng ở nơi khác).
   ========================================================= */

.dx-scope .shop-container{
  padding-block: 40px 80px;
}

/* ---------- Mô tả danh mục (.term-description — chỉ có ở trang category) ---------- */
.dx-scope .term-description{
  color: var(--dx-muted);
  font-size: 14px;
  line-height: 1.8;
  max-width: 780px;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--dx-ink);
}
.dx-scope .term-description p{
  margin: 0 0 10px;
}
.dx-scope .term-description p:last-child{
  margin-bottom: 0;
}

/* ---------- Thanh sắp xếp / bộ đếm kết quả (nếu bật) ---------- */
.dx-scope .woocommerce-result-count,
.dx-scope .woocommerce-ordering select{
  font-family: var(--dx-font-mono);
  font-size: 13px;
  color: var(--dx-muted);
  background: var(--dx-charcoal);
  border: 1px solid var(--dx-ink);
}
.dx-scope .woocommerce-ordering select{
  padding: 8px 12px;
  border-radius: var(--dx-radius-sm);
}

/* ---------- KHUNG CARD — gắn trên .col-inner (xem ghi chú #2) ---------- */
.dx-scope :is(.products, .related) .product-small.product .col-inner{
  position: relative; /* bắt buộc — .badge-container ghim góc theo đây */
  height: 100%;
  background: var(--dx-charcoal) !important;
  border: 1px solid var(--dx-ink) !important;
  border-radius: var(--dx-radius-md) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px -10px rgba(0,0,0,.6) !important;
  transition: border-color .4s var(--dx-ease), transform .4s var(--dx-ease), box-shadow .4s var(--dx-ease);
}
.dx-scope :is(.products, .related) .product-small.product:hover .col-inner{
  /* ĐÃ BỎ transform:translateY(-6px) — lý do: card tự nhô lên trong khi
     các ô lưới bên cạnh đứng yên tạo cảm giác "giật" hàng khi rê chuột
     qua nhiều sản phẩm liên tiếp, đặc biệt rõ khi các card cao thấp
     không đều (tên dài bị wrap 2 dòng vs tên ngắn 1 dòng). Giữ lại viền
     sáng lên + đổ bóng sâu hơn để vẫn có cảm giác "nổi bật" khi hover,
     nhưng không còn dịch chuyển vị trí — êm hơn, không ảnh hưởng UX. */
  border-color: var(--dx-gold-dim) !important;
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(201,162,74,.15) !important;
}

/* Reset MỌI nền/viền/bo góc của lớp con để không lồng khung */
.dx-scope :is(.products, .related) .product-small.product .product-small.box,
.dx-scope :is(.products, .related) .product-small.product .box-image,
.dx-scope :is(.products, .related) .product-small.product .box-text-products{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Ẩn 3 vùng image-tools rỗng (xem ghi chú #1) */
.dx-scope :is(.products, .related) .image-tools{
  display: none !important;
}

/* ---------- Ảnh sản phẩm + hiệu ứng "quét laser" khi hover ---------- */
.dx-scope :is(.products, .related) .box-image{
  position: relative;
}
.dx-scope :is(.products, .related) .image-zoom{
  position: relative;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
}
.dx-scope :is(.products, .related) .image-zoom img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .6s var(--dx-ease);
}
.dx-scope :is(.products, .related) .product-small.product:hover .image-zoom img{
  transform: scale(1.06);
}
.dx-scope :is(.products, .related) .image-zoom::after{
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -10%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--dx-gold-light), transparent);
  box-shadow: 0 0 16px 2px rgba(231,205,134,.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 2;
}
.dx-scope :is(.products, .related) .product-small.product:hover .image-zoom::after{
  opacity: 1;
  animation: dx-laser-sweep 1.1s var(--dx-ease);
}
@keyframes dx-laser-sweep{
  from{ top: -4%; }
  to{ top: 104%; }
}

/* ---------- Badge giảm giá — class THẬT là .dx-product__tag, không
   phải .onsale (xem ghi chú #5). .badge-container đã lo việc ghim góc,
   ở đây chỉ việc "de-absolute" span con và tô style. ---------- */
.dx-scope .badge-container{
  z-index: 3;
  margin: 0 !important;
}
.dx-scope .badge-container .dx-product__tag{
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: inline-block !important;
  margin: 6px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: var(--dx-gold-light) !important;
  font-family: var(--dx-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px !important;
  border: 1px solid var(--dx-gold) !important;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.7) !important;
  padding: 6px 16px !important;
  line-height: 1.6;
}

/* ---------- Vùng chữ: category / tên / giá / nút ---------- */
.dx-scope :is(.products, .related) .box-text-products{
  display: flex;
  flex-wrap: wrap;
  padding: 18px 20px 20px !important;
}

.dx-scope :is(.products, .related) .title-wrapper{
  flex: 0 0 100%;
  margin-bottom: 16px;
}
.dx-scope :is(.products, .related) p.category.product-cat{
  font-family: var(--dx-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--dx-muted-2);
  opacity: 1 !important;
  margin: 0 0 6px;
}
.dx-scope :is(.products, .related) p.name.product-title{
  margin: 0;
}
.dx-scope :is(.products, .related) p.name.product-title a{
  font-family: var(--dx-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: color-mix(in srgb, var(--dx-ivory) 80%, var(--dx-black));
  transition: color .3s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dx-scope :is(.products, .related) .product-small.product:hover p.name.product-title a{
  color: var(--dx-gold-light);
}

/* Hàng dưới: giá (trái) + nút icon (phải) — cùng 1 hàng nhờ flex-wrap
   ở .box-text-products, không cần sửa PHP thêm div bọc */
.dx-scope :is(.products, .related) .price-wrapper{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--dx-ink);
}
.dx-scope :is(.products, .related) .price-wrapper .amount{
  font-family: var(--dx-font-mono) !important;
  font-size: 16px !important;
  color: var(--dx-gold) !important;
}
.dx-scope :is(.products, .related) .price-wrapper .amount *{
  color: var(--dx-gold) !important;
}
/* Giá sale — markup thật: <del>...</del> <span class="screen-reader-text">
   ...</span><ins>...</ins><span class="screen-reader-text">...</span>
   2 span screen-reader-text đã được ẩn sẵn bởi CSS core WordPress
   (wp-block-library-inline-css, clip-path), không cần đụng tới. */
.dx-scope :is(.products, .related) .price-wrapper del,
.dx-scope :is(.products, .related) .price-wrapper del *{
  color: var(--dx-muted-2) !important;
  font-size: 12px !important;
  opacity: 1 !important;
}
.dx-scope :is(.products, .related) .price-wrapper ins{
  text-decoration: none !important;
}

/* Nhãn "From" trước giá thấp nhất (biến thể) */
.dx-scope :is(.products, .related) .price-wrapper .dx-price-from{
  font-family: var(--dx-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--dx-muted-2);
  margin-right: 6px;
}
.dx-scope :is(.products, .related) .price-wrapper del{
  margin-right: 6px;
}

.dx-scope :is(.products, .related) .add-to-cart-button{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--dx-ink);
}

/* ---------- Nút "Add to cart" → icon tròn ---------- */
.dx-scope :is(.products, .related) a.add_to_cart_button{
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid var(--dx-ink) !important;
  box-shadow: none !important;
  /* Ẩn chữ "Add to cart" khỏi mắt nhưng vẫn giữ cho screen reader/
     aria-label đọc được, không xoá text khỏi DOM (không sửa PHP) */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden;
  transition: background .3s, border-color .3s;
}
.dx-scope :is(.products, .related) a.add_to_cart_button::before{
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background-color: var(--dx-ivory);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='9' cy='20' r='1.4'/><circle cx='17' cy='20' r='1.4'/><path d='M2.5 3h2l2.2 11.4a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.6L20.5 7H6'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='9' cy='20' r='1.4'/><circle cx='17' cy='20' r='1.4'/><path d='M2.5 3h2l2.2 11.4a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.6L20.5 7H6'/></svg>") no-repeat center / contain;
  transition: background-color .3s;
}
.dx-scope :is(.products, .related) a.add_to_cart_button:hover{
  background: var(--dx-gold) !important;
  border-color: var(--dx-gold) !important;
}
.dx-scope :is(.products, .related) a.add_to_cart_button:hover::before{
  background-color: var(--dx-black);
}

/* Trạng thái .loading — WC core tự chèn spinner qua ::after, phải ẩn
   icon ::before của mình đi lúc này, không thì 2 icon đè nhau (ghi chú #3) */
.dx-scope :is(.products, .related) a.add_to_cart_button.loading::before{
  opacity: 0;
}
.dx-scope :is(.products, .related) a.add_to_cart_button.loading::after{
  color: var(--dx-ivory) !important;
  font-size: 14px !important;
  opacity: .8;
}

/* Trạng thái .added — nút giỏ đổi màu nhẹ báo đã thêm thành công */
.dx-scope :is(.products, .related) a.add_to_cart_button.added{
  border-color: var(--dx-gold-dim) !important;
}

/* Link "View cart" mà WC tự chèn thêm SAU nút khi AJAX thành công
   (thẻ <a class="added_to_cart"> mới, cùng cấp trong .add-to-cart-button) */
.dx-scope :is(.products, .related) a.added_to_cart{
  font-family: var(--dx-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--dx-gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  white-space: nowrap;
}
/* ---------- Đánh giá sao trên card ----------
   Markup: .price-wrapper > .star-rating.star-rating--inline (chỉ có khi sản phẩm
   đã có đánh giá). Đặt tuyệt đối ở góc phải hàng nhãn danh mục để KHÔNG làm đổi
   chiều cao / vị trí hàng giá giữa các card. */
.dx-scope :is(.products, .related) .box-text-products{
  position: relative;
}
.dx-scope :is(.products, .related) .star-rating{
  position: absolute !important;
  top: 19px;
  right: 20px;
  float: none !important;
  margin: 0 !important;
  font-size: 12px !important;
}
.dx-scope :is(.products, .related) .star-rating::before{
  color: var(--dx-ink) !important;   /* sao rỗng */
}
.dx-scope :is(.products, .related) .star-rating span::before{
  color: var(--dx-gold) !important;  /* sao đầy */
}

/* Tên danh mục dài: cắt bằng "…", không tràn, không chồng lên sao */
.dx-scope :is(.products, .related) p.category.product-cat{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dx-scope :is(.products, .related) .box-text-products:has(.star-rating) p.category.product-cat{
  max-width: calc(100% - 84px); /* chừa chỗ cho 5 sao ở góc phải */
}

/* FIX: tên danh mục nowrap làm .title-wrapper (flex item) phình rộng hơn card */
.dx-scope :is(.products, .related) .title-wrapper{ min-width: 0; }

/* Mobile: thu padding + cỡ chữ để chữ có chỗ thở, nút giỏ nhỏ lại cho cân */
@media (max-width: 549px){
  .dx-scope :is(.products, .related) .box-text-products{ padding: 12px 12px 14px !important; }
  .dx-scope :is(.products, .related) .title-wrapper{ margin-bottom: 12px; }
  .dx-scope :is(.products, .related) p.category.product-cat{
    font-size: 10px;
    letter-spacing: .06em;
  }
  .dx-scope :is(.products, .related) .box-text-products:has(.star-rating) p.category.product-cat{
    max-width: calc(100% - 70px);
  }
  .dx-scope :is(.products, .related) .star-rating{
    top: 13px;
    right: 12px;
    font-size: 11px !important;
  }
  .dx-scope :is(.products, .related) p.name.product-title a{
    font-size: 14px;
    line-height: 1.35;
  }
  .dx-scope :is(.products, .related) .price-wrapper{ padding-top: 12px; }
  .dx-scope :is(.products, .related) .price-wrapper .amount{ font-size: 15px !important; }
  .dx-scope :is(.products, .related) .add-to-cart-button{ padding-top: 12px; }
  .dx-scope :is(.products, .related) a.add_to_cart_button{
    width: 36px !important;
    height: 36px !important;
  }
}

/* =========================================================
   THIẾT BỊ CẢM ỨNG (điện thoại/tablet, không có chuột)
   Trên cảm ứng :hover chỉ chạy lúc chạm rồi trang chuyển đi ngay, nên hiệu ứng bị
   cắt nửa chừng và còn "dính" sau khi chạm. Ở đây: (1) trả hover về trạng thái
   gốc, (2) thay bằng phản hồi tức thì khi đang chạm (:active), không animation dài.
   Desktop (có chuột) không bị ảnh hưởng.
   ========================================================= */
@media (hover: none){

  /* 1) Gỡ hover của desktop */
  .dx-scope :is(.products, .related) .product-small.product:hover .col-inner{
    border-color: var(--dx-ink) !important;
    box-shadow: 0 4px 20px -10px rgba(0,0,0,.6) !important;
  }
  .dx-scope :is(.products, .related) .product-small.product:hover .image-zoom img{
    transform: none;
  }
  .dx-scope :is(.products, .related) .product-small.product:hover .image-zoom::after{
    opacity: 0;
    animation: none;
  }
  .dx-scope :is(.products, .related) .product-small.product:hover p.name.product-title a{
    color: color-mix(in srgb, var(--dx-ivory) 80%, var(--dx-black));
  }
  .dx-scope :is(.products, .related) a.add_to_cart_button:not(.added):hover{
    background: transparent !important;
    border-color: var(--dx-ink) !important;
  }
  .dx-scope :is(.products, .related) a.add_to_cart_button:hover::before{
    background-color: var(--dx-ivory);
  }

  /* 2) Phản hồi khi chạm: viền sáng + quầng sáng, đổi tức thì */
  .dx-scope :is(.products, .related) a{
    -webkit-tap-highlight-color: transparent;
  }
  .dx-scope :is(.products, .related) .product-small.product .col-inner{
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  .dx-scope :is(.products, .related) .image-zoom img{
    transition: filter .18s ease;
  }
  .dx-scope :is(.products, .related) .product-small.product:has(.box-image a:active, .title-wrapper a:active) .col-inner{
    border-color: var(--dx-gold) !important;
    box-shadow: 0 0 0 1px rgba(201,162,74,.55), 0 0 26px -4px rgba(201,162,74,.5) !important;
    transform: scale(.985);
  }
  .dx-scope :is(.products, .related) .product-small.product:has(.box-image a:active, .title-wrapper a:active) .image-zoom img{
    filter: brightness(1.08);
  }
  .dx-scope :is(.products, .related) .product-small.product:has(.box-image a:active, .title-wrapper a:active) p.name.product-title a{
    color: var(--dx-gold-light);
  }

  /* Nút giỏ: đổi nền vàng + nhún khi chạm */
  .dx-scope :is(.products, .related) a.add_to_cart_button{
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .dx-scope :is(.products, .related) a.add_to_cart_button:active{
    background: var(--dx-gold) !important;
    border-color: var(--dx-gold) !important;
    transform: scale(.92);
  }
  .dx-scope :is(.products, .related) a.add_to_cart_button:active::before{
    background-color: var(--dx-black);
  }
}

/* ---- Cảm ứng nâng cao ---- */

/* 1) Quét laser 1 lần khi card cuộn vào tầm nhìn (class .dx-scanned do main.js gắn) */
@media (hover: none) and (prefers-reduced-motion: no-preference){
  .dx-scope :is(.products, .related) .product-small.product.dx-scanned .image-zoom::after{
    opacity: 1;
    animation: dx-laser-sweep 1.1s var(--dx-ease) 1 forwards;
  }
  .dx-scope :is(.products, .related) .product-small.product:nth-child(even).dx-scanned .image-zoom::after{
    animation-delay: .15s;
  }
}

/* 2) Ánh sáng nở ra đúng chỗ ngón tay (--tx/--ty do main.js gắn lúc pointerdown) */
@media (hover: none){
  .dx-scope :is(.products, .related) .product-small.product:has(.box-image a:active, .title-wrapper a:active) .col-inner{
    background-image: radial-gradient(circle at var(--tx, 50%) var(--ty, 50%), rgba(201,162,74,.24), transparent 62%) !important;
  }
}