.elementor-14431 .elementor-element.elementor-element-b925785{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-14431 .elementor-element.elementor-element-4f68251 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-14431 .elementor-element.elementor-element-b925785{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:5px;}}/* Start custom CSS for shortcode, class: .elementor-element-4f68251 *//* ===== FIX ẢNH & TYPOGRAPHY CHUẨN CHO WS247 GALLERY (GIỮ NGUYÊN) ===== */

/* Tỉ lệ khung ảnh: 3/4 (lookbook style), đổi 1/1 nếu bạn muốn vuông */
:root { --ws247-ratio: 3/4; }

/* --- Khóa tỉ lệ ảnh (cả hover) --- */
.woocommerce ul.products li.product .ws247-piew-imgs-container {
  position: relative !important;
  display: block !important;
  aspect-ratio: var(--ws247-ratio) !important;
  overflow: hidden !important;
  line-height: 0 !important;
  margin: 0 0 12px !important;
  z-index: 0 !important;
}

@supports not (aspect-ratio: 1/1) {
  .woocommerce ul.products li.product .ws247-piew-imgs-container::before {
    content: "";
    display: block;
    padding-top: calc(100% / (var(--ws247-ratio))) !important;
  }
}

/* --- Ép tất cả ảnh chính & hover cùng tỉ lệ, crop center --- */
.woocommerce ul.products li.product .ws247-piew-imgs-container > picture,
.woocommerce ul.products li.product .ws247-piew-imgs-container > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 1 !important;
}

.woocommerce ul.products li.product .ws247-piew-imgs-container > picture > img,
.woocommerce ul.products li.product .ws247-piew-imgs-container > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Ẩn ảnh thừa nếu có (plugin render nhiều) */
.woocommerce ul.products li.product .ws247-piew-imgs-container > :is(picture,img):nth-of-type(n+3) {
  display: none !important;
}

/* --- Giữ hover hoạt động, không đè text --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0.6rem !important;
  text-align: center;
  font-family: "archivo", archivo, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* --- Title: đậm 600 --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-weight: 600 !important;
  color: #000 !important;
}

/* --- Giá: xám nhẹ --- */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .amount {
  font-weight: 400 !important;
  color: #555 !important;
}

/* ==== FIX Ô ĐẦU TRỐNG – ÉP VỀ TRÁI, XOÁ GUTTER ẨN, BỎ RULE .first (GIỮ NGUYÊN) ==== */

/* 1) Grid luôn canh trái, full chiều ngang */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* mobile: 2 cột */
  gap: 5px !important;
  justify-content: start !important;
  align-content: start !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Gỡ ảnh hưởng .first/.last */
.woocommerce ul.products li.product,
.woocommerce ul.products li.first,
.woocommerce ul.products li.last,
.woocommerce ul.products > li.product:first-child {
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  width: auto !important;
}

/* 3) Xoá margin-left riêng item đầu nếu theme thêm */
.woocommerce ul.products > li.product:first-child,
.woocommerce ul.products.columns-4 > li.product:first-child,
.woocommerce ul.products.columns-5 > li.product:first-child {
  margin-left: 0 !important;
}

/* 4) Xoá pseudo-clearfix chiếm chỗ trước item đầu */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* 5) Xoá padding/gap của container Elementor bọc bên ngoài */
.elementor-section .elementor-container,
.elementor-section .elementor-container .elementor-column,
.elementor-section .elementor-container .elementor-column > .elementor-widget-wrap,
.elementor-widget-container .woocommerce,
.elementor-widget-container .woocommerce .products {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* 6) Responsive cột (giữ như yêu cầu) */
@media (min-width: 768px)  { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 1440px) { .woocommerce ul.products { grid-template-columns: repeat(5, 1fr) !important; } }

/* 7) Khung ảnh & hover */
.woocommerce ul.products li.product .ws247-piew-imgs-container {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: var(--ws247-ratio) !important;
  overflow: hidden !important;
  line-height: 0 !important;
  margin: 0 0 12px !important;
  background: #f6f6f6;
}
@supports not (aspect-ratio: 1/1) {
  .woocommerce ul.products li.product .ws247-piew-imgs-container::before {
    content: ""; display: block;
    padding-top: calc(100% / (var(--ws247-ratio))) !important;
  }
}
.woocommerce ul.products li.product .ws247-piew-imgs-container img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
  transition: opacity .25s ease; display: block !important;
}
.woocommerce ul.products li.product .ws247-piew-imgs-container img.ws-hover-img { opacity: 0; z-index: 2; }
.woocommerce ul.products li.product:hover .ws247-piew-imgs-container img.ws-hover-img { opacity: 1; }
.woocommerce ul.products li.product:hover .ws247-piew-imgs-container img:not(.ws-hover-img) { opacity: 0; }

/* 8) Ẩn sạch Select options */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.product_type_variable,
.woocommerce ul.products li.product a.ws247_piew_atc,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  display: none !important; visibility: hidden !important; opacity: 0 !important;
  height: 0 !important; margin: 0 !important; padding: 0 !important;
}

/* ===================== FIX: KHÔNG TRÀN CONTAINER/ĐÈ FOOTER (BẢN ÁP DỤNG MỌI TRANG) ===================== */

/* Buộc mọi wrapper chứa danh sách sản phẩm tự ôm chiều cao, không cần id/class riêng */
:where(section, div, article, main, .elementor-section, .elementor-container, .elementor-column,
       .elementor-widget, .elementor-widget-container, .wp-block-group, .wp-block, .entry-content,
       .site-main, .content-area):has(.woocommerce ul.products) {
  display: flow-root !important;   /* tạo BFC → container tự ôm chiều cao */
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;   /* tách layer, tránh đè footer/section dưới */
  z-index: 1 !important;
}

/* Bản thân .woocommerce cũng an toàn */
.woocommerce {
  display: flow-root !important;
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 1 !important;
}

/* Danh sách & phân trang không đè phần sau */
.woocommerce ul.products { float: none !important; margin-bottom: 24px !important; }
.woocommerce-pagination      { position: relative !important; margin-top: 24px !important; z-index: 2 !important; }

/* Footer luôn tách lớp */
footer, .site-footer, .elementor-location-footer {
  clear: both !important;
  position: relative !important;
  z-index: 0 !important;
  overflow: visible !important;
}

/* ====================== FIX KHOẢNG TRẮNG & PAGINATION STYLE (GIỮ NGUYÊN Ý TƯỞNG) ====================== */
.elementor-shortcode > .woocommerce { padding-bottom: 0 !important; }

.woocommerce-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 48px 0 32px;
  background: transparent;
  text-align: center !important;
  z-index: 2 !important;
}

.woocommerce-pagination ul.page-numbers {
  all: unset;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  list-style: none;
}

.woocommerce-pagination .page-numbers {
  all: unset;
  font-family: "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease, transform 0.25s ease;
  line-height: 1;
}

.woocommerce-pagination .page-numbers:hover {
  color: #000;
  transform: translateY(-1px);
}

.woocommerce-pagination .page-numbers.current {
  color: #000;
  font-weight: 500;
}
.woocommerce-pagination .page-numbers.current::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #000;
  margin-top: 3px;
  opacity: 0.9;
}

.woocommerce-pagination .page-numbers.next,
.woocommerce-pagination .page-numbers.prev {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.35);
  font-weight: 300;
  transition: color 0.25s ease, transform 0.25s ease;
}
.woocommerce-pagination .page-numbers.next:hover,
.woocommerce-pagination .page-numbers.prev:hover {
  color: #000;
  transform: translateY(-1px);
}

.woocommerce-pagination .page-numbers,
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .woocommerce-pagination ul.page-numbers { gap: 14px; }
  .woocommerce-pagination .page-numbers { font-size: 12px; }
}/* End custom CSS */