/* DMCTN Product Card UI – TẠO BỞI BÙI VĂN TĨNH */
:root{
  --dmctn-card-bg:#fff;
  --dmctn-card-border:#e5e7eb;
  --dmctn-card-radius:12px;
  --dmctn-shadow:0 4px 14px rgba(0,0,0,.06);
  --dmctn-title:#111827;
  --dmctn-title-hover:#0ea5a6;
  --dmctn-brand:#0ea5a6;
  --dmctn-price:#ef6c00;
  --dmctn-old:#9ca3af;
  --dmctn-star:#f59e0b;
  --dmctn-ribbon:#ef4444;
}

/* Card khung */
.woocommerce ul.products li.product,
.products li.product{
  background:var(--dmctn-card-bg);
  border:1px solid var(--dmctn-card-border);
  border-radius:var(--dmctn-card-radius);
  box-shadow:var(--dmctn-shadow);
  padding:10px;
  overflow:hidden;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08); }

/* Ảnh vuông đồng nhất + căn giữa */
.woocommerce ul.products li.product img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  background:#fff;
  border-radius:10px;
}

/* Ribbon phần trăm */
.dmctn-ribbon{
  position:absolute;
  top:10px;
  right:-36px;
  width:120px;
  text-align:center;
  line-height:28px;
  background:var(--dmctn-ribbon);
  color:#fff;
  font-weight:600;
  transform:rotate(45deg);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  z-index:9;
  pointer-events:none;
}

/* Title 2 dòng, màu */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.products li.product .woocommerce-loop-product__title{
  color:var(--dmctn-title);
  font-weight:700;
  font-size:15px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
  margin:8px 0 6px;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title{ color:var(--dmctn-title-hover); }

/* Thương hiệu */
.dmctn-brand{ margin-top:2px; font-size:13px; }
.dmctn-brand a{ color:var(--dmctn-brand); text-decoration:none; font-weight:600; }
.dmctn-brand a:hover{ text-decoration:underline; }

/* Giá */
.woocommerce ul.products li.product .price{
  margin-top:6px;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.woocommerce ul.products li.product .price ins{
  text-decoration:none;
  color:var(--dmctn-price);
  font-weight:800;
}
.woocommerce ul.products li.product .price del{
  color:var(--dmctn-old);
  opacity:.9;
}

/* Rating + count */
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .star-rating::before,
.woocommerce ul.products li.product .star-rating span::before{
  color:var(--dmctn-star);
}
.dmctn-rating-count{ color:#6b7280; font-size:12px; margin-left:4px; }

/* Bảo toàn layout huy hiệu khác (giảm giá, new...) */
.woocommerce ul.products li.product .onsale{ display:none; } /* ẩn huy hiệu mặc định để dùng ribbon DMCTN */


/* ===== v2: Fix ảnh không bị cắt & giá xếp dọc (TẠO BỞI BÙI VĂN TĨNH) ===== */
/* Khung ảnh vuông, không crop */
.products li.product .product-thumb,
.woocommerce ul.products li.product .product-thumb,
.products li.product .woocommerce-LoopProduct-link{
  aspect-ratio: 1 / 1;
  display:block;
  background:#fff;
}

/* Ảnh lấp đầy theo tỉ lệ gốc (contain), không bị dãn/cắt */
.products li.product .product-thumb img,
.woocommerce ul.products li.product .product-thumb img,
.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

/* Giá theo cột để không bị chèn */
.woocommerce ul.products li.product .price{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:2px !important;
  margin-top:6px;
  position:relative;
  z-index:10;
}
.woocommerce ul.products li.product .price ins{
  order:1;
  text-decoration:none;
  color:var(--dmctn-price);
  font-weight:800;
  line-height:1.2;
}
.woocommerce ul.products li.product .price del{
  order:2;
  color:var(--dmctn-old);
  line-height:1.1;
  opacity:.95;
  font-size:13px;
}

/* Giới hạn ribbon không đè nội dung dưới */
.dmctn-ribbon{ z-index:8; }


/* ===== v3 FIX ẢNH & GIÁ – TẠO BỞI BÙI VĂN TĨNH ===== */
/* 1) Khung ảnh: flex center + tỉ lệ vuông; chỉ khung ảnh mới ẩn tràn */
.woocommerce ul.products li.product .product-thumb,
.products li.product .product-thumb,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link .wp-post-image:not(.ignore){ /* scope ảnh chính */
  border-radius:10px;
}

.woocommerce ul.products li.product .product-thumb,
.products li.product .product-thumb{
  aspect-ratio:1/1;
  background:#fff;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* 2) Ảnh bên trong: không dãn, không crop */
.woocommerce ul.products li.product .product-thumb img,
.products li.product .product-thumb img,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.products li.product .woocommerce-LoopProduct-link img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* 3) Giá xếp theo hàng dọc (sale trên, gốc dưới) */
.woocommerce ul.products li.product .price{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:3px !important;
  line-height:1.2;
}

.woocommerce ul.products li.product .price ins{
  display:block !important;
  order:1;
  text-decoration:none !important;
  color:var(--dmctn-price);
  font-weight:800;
}

.woocommerce ul.products li.product .price del{
  display:block !important;
  order:2;
  color:var(--dmctn-old);
  font-size:13px;
  opacity:.95;
  margin:0;
}

/* Tránh style cũ đẩy giá về một hàng hoặc float */
.woocommerce ul.products li.product .price *{
  float:none !important;
  white-space:nowrap;
}

/* 4) Đảm bảo overlay gloss không chặn text/giá */
.products li.product .woocommerce-LoopProduct-link{ overflow:visible !important; position:relative; }
.products li.product .product-thumb a{ position:relative; overflow:hidden !important; }
/* ===== /v3 FIX ===== */


/* ===== v4 FIX CỨNG: ẢNH NHỎ HƠN KHUNG + GIÁ THEO CỘT (TẠO BỞI BÙI VĂN TĨNH) ===== */
:root{ --dmctn-thumb-h: 210px; } /* chỉnh độ cao khung ảnh tại đây */

/* Khung ảnh: buộc chiều cao cố định và căn giữa */
.woocommerce ul.products li.product .product-thumb,
.products li.product .product-thumb,
.woocommerce ul.products li.product a.woocommerce-LoopProduct__link{
  height: var(--dmctn-thumb-h) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:#fff;
}

/* Ảnh bên trong KHÔNG vượt khung, không bị dãn */
.woocommerce ul.products li.product .product-thumb img,
.products li.product .product-thumb img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct__link img,
.products li.product a.woocommerce-LoopProduct__link img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height: calc(var(--dmctn-thumb-h) - 4px) !important;
  object-fit:contain !important;
  display:block !important;
}

/* Giá: ép thành CỘT, chống style cũ */
.woocommerce ul.products li.product .price,
.products li.product .price{
  display:grid !important;
  grid-auto-flow: row !important;
  align-content:start !important;
  gap:2px !important;
}

.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price del,
.products li.product .price ins,
.products li.product .price del{
  display:block !important;
  float:none !important;
  clear:both !important;
  margin:0 !important;
  white-space:nowrap !important;
}

.woocommerce ul.products li.product .price ins,
.products li.product .price ins{
  order:1;
  color:var(--dmctn-price);
  text-decoration:none !important;
  font-weight:800;
  line-height:1.2;
}

.woocommerce ul.products li.product .price del,
.products li.product .price del{
  order:2;
  color:var(--dmctn-old);
  font-size:13px;
  opacity:.95;
  line-height:1.1;
}

/* Tránh overflow của link bao toàn card làm đè giá */
.products li.product .woocommerce-LoopProduct-link{ overflow:visible !important; }
/* Chỉ ẩn tràn bên trong khung ảnh */
.products li.product .product-thumb, .products li.product .product-thumb a{ overflow:hidden !important; }
/* ===== /v4 FIX CỨNG ===== */