/*
Theme Name:   xstore-child
Theme URI:    https://xstore.8theme.com
Description:  XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution.
Author:       8theme
Author URI:   https://www.8theme.com
Template:     xstore
Version:      1.0
Text Domain:  xstore-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark
*/


/*
Custom From
*/
.price:before {
    content: "";
}
.woocommerce-variation-price .price:before {
    content: unset!important;
    margin-right: 5px;
}
/*
Add (GST Inc)
*/
/* .woocommerce-variation-price span.price::after {
    content: " (GST Inc)";
    font-size: 1em !important;
} */
/*
Css price
*/
/* span.woocommerce-Price-amount.amount {
    color: black;
    font-size: 22px!important;
    font-weight: 600!important;
} */
/* WooCommerce product grid – cho phép badge tràn ra ngoài */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product .product-thumbnail,
.woocommerce ul.products li.product .sale-wrapper {
  overflow: visible !important;
  position: relative; /* để .onsale absolute bám đúng */
}

/* Một số theme (vd. Flatsome) dùng các wrapper dưới – mở overflow luôn */
.box-image,
.badge-container,
.product-small .box,
.product-small .box-image {
  overflow: visible !important;
  position: relative;
}

/* Bảo đảm badge nổi lên trên ảnh/overlay */
.woocommerce ul.products li.product .onsale {
  z-index: 5; /* cao hơn overlay/ảnh */
}

.etheme-elementor-off-canvas__main span.woocommerce-Price-amount.amount::after {
    content: " "!important;
    font-size: 1em !important;
}

.woocommerce-product-details__short-description p {
    padding-bottom: 5px !important;
}
.rmwp-toggle hr {
    padding-top: 5px !important;
}
/* .price:before {
    content: "Price";
    margin-right: 5px;
} */
.home span.woocommerce-Price-amount.amount::after {
    content: " (GST Inc)";
    font-size: 1em !important;
}
.archive span.woocommerce-Price-amount.amount::after {
    content: " (GST Inc)";
    font-size: 1em !important;
}
.single-product span.woocommerce-Price-amount.amount::after {
    content: " (GST Inc)";
    font-size: 1em !important;
}
.order-total span.woocommerce-Price-amount.amount::after {
    content: " (GST Inc)";
    font-size: 1em !important;
}
#et_price_filter-9 .price:before {
    content: unset!important;
    margin-right: 5px;
}
.woocommerce-variation-price .price:before {
    content: unset!important;
    margin-right: 5px;
}
.rmwp-button-wrap {
    display: inline !important; /* đổi thành block nếu cần */
}
.rmwp-button-wrap button {
    display: inline-block;
}


.woocommerce-variation p {
    margin-bottom: .5rem!important;
    margin-top:.5rem!important;
}
table.variations {
    margin-bottom: 10px !important;
}

hr {
    border-top: 1px solid #00796B;
}
.home span.woocommerce-Price-amount.amount {
    color: black;
    font-size: 15px !important;
    font-weight: 600 !important;
}
.archive span.woocommerce-Price-amount.amount {
    color: black;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.woocommerce-checkout span.woocommerce-Price-amount.amount {
    color: black;
    font-size: 15px !important;
    font-weight: 600 !important;
}
.etheme-elementor-off-canvas__wrapper span.woocommerce-Price-amount.amount {
    color: black;
    font-size: 15px !important;
    font-weight: 600 !important;
}
a.reset_variations {
    display: none;
}
[data-elementor-type="footer"] section.elementor-element-ac48201 {
    width: 100% !important;
    left: 0 !important;
    margin: 0 !important;
    right: 0 !important;
}
.payment_method_eway label {
    width: 500px!important;
}
/*hieu ung sang san pham*/
/* 1. Thiết lập container: Bắt buộc phải có position: relative và overflow: hidden */
.etheme-product-grid-item .etheme-product-grid-image { 
    position: relative;
    overflow: hidden; 
    /* Đảm bảo hình ảnh không bị giật khi hover: */
    transform: translateZ(0); 
}

/* 2. Định nghĩa dải sáng (Phần tử giả lập ::before) */
.etheme-product-grid-item .etheme-product-grid-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Vị trí bắt đầu: ẩn hoàn toàn bên trái */
    z-index: 2; 
    display: block;
    width: 20%; 
    height: 100%;
    
    /* Tạo hiệu ứng gradient màu trắng nghiêng */
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 100% /* Màu trắng sáng 30% độ mờ */
    );
    
    /* Nghiêng 20 độ để có hình dáng động */
    transform: skewX(-20deg);
}

/* 3. Kích hoạt hoạt ảnh khi di chuột */
.etheme-product-grid-item .etheme-product-grid-image:hover::before {
    animation: shineHorizontal 2.5s ease-in-out 0.3s; /* Hoạt ảnh chạy trong 0.7 giây */
}

/* 4. Định nghĩa chuyển động quét ngang */
@keyframes shineHorizontal {
    100% { 
        left: 150%; /* Vị trí kết thúc: quét qua hết và biến mất bên phải */
    }
}
.woocommerce-product-details__short-description p {
    margin-bottom: unset !important;
}

/*hieu ung sang san pham*/

/* 1. Thiết lập container: Quan trọng nhất là position: relative và overflow: hidden */
.product-card-image-wrapper { 
    position: relative;
    overflow: hidden; 
    /* Đảm bảo hình ảnh không bị giật khi hover */
    transform: translateZ(0); 
}

/* 2. Định nghĩa dải sáng (Phần tử giả lập ::before) */
.product-card-image-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Vị trí bắt đầu: Ẩn hoàn toàn bên trái */
    z-index: 2; /* Đảm bảo dải sáng nằm trên hình ảnh */
    display: block;
    width: 20%; /* Chiều rộng của dải sáng */
    height: 100%;
    
    /* Tạo hiệu ứng gradient màu trắng nghiêng */
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 100% /* Màu trắng sáng 30% độ mờ */
    );
    
    /* Nghiêng 20 độ để có hình dáng động */
    transform: skewX(-20deg);
}

/* 3. Kích hoạt hoạt ảnh khi di chuột */
.product-card-image-wrapper:hover::before {
    /* Chạy hoạt ảnh tên 'shineHorizontal', kéo dài 0.7 giây, không lặp lại */
    animation: shineHorizontal 0.7s ease-in-out; 
    /* Bạn có thể thêm '0.3s' delay nếu muốn */
}

/* 4. Định nghĩa chuyển động quét ngang */
@keyframes shineHorizontal {
    100% { 
        left: 120%; /* Vị trí kết thúc: quét qua hết và biến mất bên phải */
        /* Tôi giảm từ 150% xuống 120% vì 150% có thể quá xa */
    }
}
/* BẮT ĐẦU CODE HIỆU ỨNG ÁNH SÁNG CHO ELEMENTOR IMAGE BOX */

/* 1. Thiết lập Container: Áp dụng cho class .elementor-image-box-img */
.elementor-image-box-img { 
    /* Rất quan trọng: Cho phép phần tử giả ::before định vị tương đối */
    position: relative;
    /* Rất quan trọng: Giúp dải sáng không tràn ra ngoài khung ảnh */
    overflow: hidden; 
    /* Tùy chọn: Tăng tốc phần cứng, giúp hoạt ảnh mượt hơn */
    transform: translateZ(0); 
    display: block;
}

/* 2. Định nghĩa Dải sáng (Phần tử giả ::before) */
.elementor-image-box-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Vị trí bắt đầu: Ẩn hoàn toàn bên trái */
    z-index: 2; /* Đảm bảo dải sáng nằm trên hình ảnh */
    display: block;
    width: 20%; /* Chiều rộng của dải sáng */
    height: 100%;
    
    /* Tạo dải màu trắng chuyển màu nghiêng */
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0) 0%, /* Trong suốt ở 0% */
        rgba(255, 255, 255, 0.3) 100% /* Trắng 30% độ mờ ở 100% */
    );
    
    /* Nghiêng -20 độ để có hình dáng động (giống vệt sáng quét) */
    transform: skewX(-20deg);
}

/* 3. Kích hoạt Hoạt ảnh khi Di chuột (Hover) */
.elementor-image-box-img:hover::before {
    /* Chạy hoạt ảnh 'shineHorizontal', kéo dài 0.7 giây, kiểu tốc độ dễ dàng (ease-in-out) */
    animation: shineHorizontal 2s ease-in-out; 
}

/* 4. Định nghĩa Chuyển động (Keyframes) */
@keyframes shineHorizontal {
    100% { 
        /* Vị trí kết thúc: Di chuyển đến 120% (quét qua và biến mất hoàn toàn bên phải) */
        left: 120%; 
    }
}

/* KẾT THÚC CODE HIỆU ỨNG ÁNH SÁNG */
html, body {
  overflow-x: hidden;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product .summary .price del {
  font-size: 12px !important;
}
.onsale {
    border: 2px solid #04683E!important;
    border-radius: 50%!important;
    height: 70px;
    width: 70px;
    background: #04683E;
}
span.onsale.type-square.left.with-percentage {
    font-weight: 900;
    font-size: 18px;
    line-height: 19px;
}
/* --- Base layout --- */
.sale-wrapper { position: relative; display: inline-block; }
.sale-wrapper .onsale{
  position: absolute; /* chỉnh lại top/left cho hợp theme của bạn */
  top: 12px; left: 12px;

  display: flex; align-items: center; justify-content: center;
  width: 70px; height: 70px;
  border-radius: 50% !important;
  background: #04683E;
  border: 2px solid #04683E !important;

  color: #fff; font-weight: 800; line-height: 1; text-transform: uppercase;
  font-size: 12px; letter-spacing: .3px;
  box-shadow: 0 6px 16px rgba(4,104,62,.25);

  cursor: pointer;
  /* Nhịp “thở” + ánh sáng */
  animation: sale-pulse 2.2s ease-in-out infinite;
}

/* Vòng ripple lan tỏa để “nhấp nháy” êm mắt */
.sale-wrapper .onsale::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(4,104,62,.55);
  transform: scale(1);
  opacity: .6;
  animation: sale-ripple 2.6s ease-out infinite;
  pointer-events: none;
}

/* Viền sáng ngoài cùng (glow) */
.sale-wrapper .onsale::after{
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(4,104,62,.0), 0 0 24px 6px rgba(4,104,62,.25);
  animation: sale-glow 2.2s ease-in-out infinite;
  pointer-events: none;
}

/* Hover: pop nhẹ, dừng nhịp để user click */
.sale-wrapper .onsale:hover{
  transform: translateZ(0) scale(1.06);
  box-shadow: 0 8px 22px rgba(4,104,62,.35);
  animation-play-state: paused; /* dừng pulse khi hover */
}
.sale-wrapper .onsale:hover::before,
.sale-wrapper .onsale:hover::after{ animation-play-state: paused; }

/* Giảm chuyển động cho người dùng không thích motion */
@media (prefers-reduced-motion: reduce){
  .sale-wrapper .onsale,
  .sale-wrapper .onsale::before,
  .sale-wrapper .onsale::after{ animation: none !important; }
}

/* --- Keyframes --- */
@keyframes sale-pulse{
  0%,100% { transform: scale(1); box-shadow: 0 6px 16px rgba(4,104,62,.25); }
  50%     { transform: scale(1.07); box-shadow: 0 10px 28px rgba(4,104,62,.35); }
}

@keyframes sale-ripple{
  0%   { transform: scale(1);   opacity: .45; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}

@keyframes sale-glow{
  0%,100% { box-shadow: 0 0 0 0 rgba(4,104,62,.0), 0 0 22px 6px rgba(4,104,62,.22); }
  50%     { box-shadow: 0 0 0 10px rgba(4,104,62,.08), 0 0 30px 10px rgba(4,104,62,.35); }
}

/* Tùy chọn: tinh chỉnh chữ bên trong badge */
.sale-wrapper .onsale.with-percentage{
  /* Ví dụ “Sale 37%” -> nổi bật số % */
}
.sale-wrapper .onsale.with-percentage b,
.sale-wrapper .onsale.with-percentage strong{ font-size: 14px; }