.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-130 .elementor-element.elementor-element-8b1eb7f .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:21px;font-weight:600;color:#000000;}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-wc-archive-products .elementor-products-nothing-found{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-130 .elementor-element.elementor-element-081cd8a.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-130 .elementor-element.elementor-element-081cd8a.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{margin-bottom:0px;}.elementor-130 .elementor-element.elementor-element-081cd8a.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{margin-bottom:0px;}.elementor-130 .elementor-element.elementor-element-081cd8a.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(min-width:768px){.elementor-130 .elementor-element.elementor-element-38dcf3f{width:25%;}.elementor-130 .elementor-element.elementor-element-937c607{width:75%;}}@media(max-width:1024px){.elementor-130 .elementor-element.elementor-element-081cd8a.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-130 .elementor-element.elementor-element-081cd8a.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for wc-archive-products, class: .elementor-element-081cd8a *//* ============================================================
   BIZNEXT BEAUTY – WooCommerce Product Cards
   Dán vào: Appearance > Customize > Additional CSS
   ============================================================ */

/* ── GRID 4 CỘT ── */

/* ── CARD ── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #ffffff !important;
  border: 1px solid #e8f0eb !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 32px rgba(46,139,87,0.14) !important;
}

/* Giới hạn tên sản phẩm */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2{
    font-size:18px;
    line-height:1.4;
    
    display:-webkit-box;
    -webkit-line-clamp:2; /* số dòng hiển thị */
    -webkit-box-orient:vertical;
    
    overflow:hidden;
    text-overflow:ellipsis;
    
    min-height:50px;
    max-height:50px;
}

/* 3 sản phẩm / 1 hàng */
.woocommerce ul.products{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:25px;
}

.woocommerce ul.products li.product{
    width:100% !important;
    margin:0 !important;
    float:none !important;
}

/* Tablet */
@media(max-width:1024px){
    .woocommerce ul.products{
        grid-template-columns:repeat(2,1fr) !important;
    }
}

/* Mobile */
@media(max-width:767px){
    .woocommerce ul.products{
        grid-template-columns:1fr !important;
    }
}

/* ── ẢNH ── */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 20px 16px 12px !important;
  background: #f8fbf9 !important;
  overflow: hidden !important;
}
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: 200px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  margin: 0 !important;
  transition: transform 0.4s ease !important;
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.06) !important;
}

/* ── TIÊU ĐỀ ── */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a2e1e !important;
  line-height: 1.5 !important;
  padding: 12px 16px 4px !important;
  margin: 0 !important;
  min-height: 58px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ── GIÁ ── */
.woocommerce ul.products li.product .price {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 6px 16px 14px !important;
  margin: 0 !important;
}
/* Giá khuyến mãi */
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins bdi {
  text-decoration: none !important;
  background: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #2e8b57 !important;
}
/* Giá gốc gạch ngang */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del bdi {
  font-size: 13px !important;
  color: #a0adb5 !important;
  text-decoration: line-through !important;
  opacity: 1 !important;
}
/* Giá thường (không sale) */
.woocommerce ul.products li.product .price > .woocommerce-Price-amount {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #2e8b57 !important;
}

/* ── BADGE GIẢM GIÁ ── */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: #2e8b57 !important;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 4px 9px !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1.4 !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 2px 8px rgba(46,139,87,0.3) !important;
}

/* ── NÚT THÊM GIỎ HÀNG ── */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 16px 16px !important;
  padding: 11px 16px !important;
  background: #2e8b57 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  width: calc(100% - 32px) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  letter-spacing: 0.2px !important;
  transition: background 0.2s, transform 0.15s !important;
  margin-top: auto !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background: #1a6b3a !important;
  transform: translateY(-1px) !important;
}

/* Icon giỏ hàng trước nút */
.woocommerce ul.products li.product .button::before,
.woocommerce ul.products li.product .add_to_cart_button::before {
  content: '' !important;
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  flex-shrink: 0 !important;
}

/* Trạng thái đã thêm */
.woocommerce ul.products li.product .button.added {
  background: #f0faf5 !important;
  color: #2e8b57 !important;
  border: 1.5px solid #a0d4b8 !important;
}
.woocommerce ul.products li.product .button.added::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%232e8b57' stroke-width='2.2'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}

/* Ẩn "Xem giỏ hàng" sau khi thêm */
.woocommerce ul.products li.product a.added_to_cart.wc-forward {
  display: none !important;
}

/* ── SECTION TITLE ── */
.woocommerce .related h2,
.woocommerce .upsells h2,
.elementor-widget-woocommerce-product-related h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1a2e1e !important;
  text-align: center !important;
  margin-bottom: 28px !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
  .woocommerce ul.products li.product img {
    height: 160px !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2 {
    font-size: 13px !important;
    min-height: 48px !important;
  }
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button {
    font-size: 12.5px !important;
    padding: 9px 12px !important;
    margin: 0 12px 12px !important;
    width: calc(100% - 24px) !important;
  }
}
@media (max-width: 480px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

</style>

/* ── JS: Đổi "Giảm giá" → phần trăm thực tế ── */
/* Thêm đoạn JS này vào Appearance > Customize > Additional CSS
   HOẶC dán vào Custom JavaScript của theme */
/*
document.addEventListener('DOMContentLoaded', function(){
  document.querySelectorAll('.woocommerce ul.products li.product').forEach(function(card){
    var badge = card.querySelector('.onsale');
    if(!badge) return;
    var reg = card.querySelector('.price del bdi, .price del .woocommerce-Price-amount');
    var sale = card.querySelector('.price ins bdi, .price ins .woocommerce-Price-amount');
    if(!reg || !sale) return;
    var rNum = parseFloat(reg.textContent.replace(/[^\d]/g,''));
    var sNum = parseFloat(sale.textContent.replace(/[^\d]/g,''));
    if(rNum > 0){
      var pct = Math.round((1 - sNum/rNum)*100);
      badge.textContent = '-' + pct + '%';
    }
  });
});
*//* End custom CSS */