.elementor-8683 .elementor-element.elementor-element-6912a9d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-7%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-8683 .elementor-element.elementor-element-6912a9d:not(.elementor-motion-effects-element-type-background), .elementor-8683 .elementor-element.elementor-element-6912a9d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://jkmaterials.vn/wp-content/uploads/2025/11/bannernew3.jpg");}.elementor-8683 .elementor-element.elementor-element-cad1808 > .elementor-widget-container{margin:10% 0% 8% 0%;padding:0% 0% 0% 0%;}.elementor-8683 .elementor-element.elementor-element-cad1808{text-align:center;}.elementor-8683 .elementor-element.elementor-element-cad1808 .elementor-heading-title{text-transform:uppercase;color:#FFFFFF;}.elementor-8683 .elementor-element.elementor-element-499437b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8683 .elementor-element.elementor-element-36ad29a.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-8683 .elementor-element.elementor-element-36ad29a.elementor-wc-products .attachment-woocommerce_thumbnail{margin-bottom:0px;}.elementor-8683 .elementor-element.elementor-element-36ad29a.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-8683 .elementor-element.elementor-element-d005523{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8683 .elementor-element.elementor-element-90051c3{text-align:center;}.elementor-8683 .elementor-element.elementor-element-d922eb3{--display:flex;--min-height:0px;--justify-content:center;}.elementor-8683 .elementor-element.elementor-element-3b42e2e{--e-image-carousel-slides-to-show:8;}.elementor-8683 .elementor-element.elementor-element-3b42e2e > .elementor-widget-container{margin:0% 0% 0% 0%;padding:0% 0% 0% 0%;}.elementor-8683 .elementor-element.elementor-element-3b42e2e.elementor-element{--align-self:center;}.elementor-8683 .elementor-element.elementor-element-3b42e2e .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-style:solid;border-width:1px 1px 1px 1px;border-color:#CCCCCC;}@media(min-width:768px){.elementor-8683 .elementor-element.elementor-element-d922eb3{--content-width:100%;}}@media(max-width:1024px){.elementor-8683 .elementor-element.elementor-element-36ad29a.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-8683 .elementor-element.elementor-element-36ad29a.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for woocommerce-products, class: .elementor-element-36ad29a *//* ========================================================== */
/* == CODE TỔNG HỢP HIỆU ỨNG SẢN PHẨM (Elementor/Astra) == */
/* ========================================================== */

/* 1. KHUNG VIỀN, BÓNG VÀ CĂN CHỈNH CHO CẢ ITEM */
li.product {
    /* Thêm một chút đệm (padding) để tạo khoảng thở */
    padding: 15px; 
    
    /* Thêm viền mờ mặc định */
    border: 1px solid #eee; 
    
    /* Bo góc nhẹ cho đẹp hơn */
    border-radius: 5px; 

    /* Hiệu ứng chuyển động mượt cho viền và bóng */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    
    /* Bắt buộc phải có để định vị cho các thành phần con */
    position: relative;
}

/* KHI DI CHUỘT: Thêm viền xanh và đổ bóng */
li.product:hover {
    /* Đổi màu viền sang xanh */
    border-color: blue; 
    
    /* Thêm hiệu ứng đổ bóng */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* 2. HIỆU ỨNG ZOOM ẢNH */
.astra-shop-thumbnail-wrap {
    overflow: hidden; /* Che phần ảnh bị zoom thừa */
    position: relative; /* Quan trọng: Để chứa nút 'View' */
}
.astra-shop-thumbnail-wrap img {
    transition: transform 0.3s ease;
}
/* KHI DI CHUỘT: Phóng to ảnh */
li.product:hover .astra-shop-thumbnail-wrap img {
    transform: scale(1.1);
}


/* 3. NÚT "VIEW" XUẤT HIỆN Ở GIỮA (Bản cập nhật) */
.astra-shop-thumbnail-wrap::after {
    content: "View"; /* Chữ "View" */
    position: absolute;
    
    /* Căn ra giữa */
    top: 50%;
    left: 50%;

    /* Style cho nút (to hơn) */
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 16px; 
    font-weight: bold;
    padding: 8px 16px; 
    border-radius: 3px;
    
    /* Ẩn đi lúc đầu và căn lại cho chính xác */
    opacity: 0;
    transform: translate(-50%, -50%) translateY(10px);
    
    transition: all 0.3s ease;
}

/* KHI DI CHUỘT: Cho nút "View" hiện ra */
li.product:hover .astra-shop-thumbnail-wrap::after {
    opacity: 1;
    /* Di chuyển về vị trí chính giữa */
    transform: translate(-50%, -50%) translateY(0);
}


/* 4. HIỆU ỨNG TIÊU ĐỀ (RUNG VÀ ĐỔI MÀU) */
h2.woocommerce-loop-product__title {
    transition: color 0.3s ease;
}
/* KHI DI CHUỘT: Đổi màu và rung tiêu đề */
li.product:hover h2.woocommerce-loop-product__title {
    color: blue; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
    animation: shake 0.3s;
}

/* Định nghĩa chuyển động 'shake' */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  50% { transform: translateX(1px); }
  75% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

/* ========================================================== */
/* == HẾT CODE TỔNG HỢP == */
/* ========================================================== *//* End custom CSS */