.elementor-9204 .elementor-element.elementor-element-310f070{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-9204 .elementor-element.elementor-element-1c1487a{--display:flex;}.elementor-9204 .elementor-element.elementor-element-1c1487a.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-9204 .elementor-element.elementor-element-454c66b{text-align:center;}.elementor-9204 .elementor-element.elementor-element-2f313e9.elementor-element{--align-self:flex-start;}.elementor-9204 .elementor-element.elementor-element-0162158{--display:flex;}.elementor-9204 .elementor-element.elementor-element-b748dfc.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-9204 .elementor-element.elementor-element-b748dfc.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-9204 .elementor-element.elementor-element-480c986{--display:flex;}@media(min-width:768px){.elementor-9204 .elementor-element.elementor-element-1c1487a{--width:16.504%;}}@media(max-width:1024px){.elementor-9204 .elementor-element.elementor-element-b748dfc.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-9204 .elementor-element.elementor-element-b748dfc.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for woocommerce-products, class: .elementor-element-b748dfc *//* 1. Thiết lập khung chứa ảnh để giấu phần 'Mua ngay' khi chưa hover */
.chitietdanhmucsp .astra-shop-thumbnail-wrap {
    position: relative;
    overflow: hidden; 
    border-radius: 8px; /* Giữ bo góc ảnh giống video */
}

/* 2. Đảm bảo thẻ <a> bao quanh ảnh là khối tương đối */
.chitietdanhmucsp .astra-shop-thumbnail-wrap a.woocommerce-LoopProduct-link {
    display: block;
    position: relative;
}

/* 3. Tạo dải hiệu ứng 'Mua ngay' trượt lên từ cạnh dưới */
.chitietdanhmucsp .astra-shop-thumbnail-wrap a.woocommerce-LoopProduct-link::after {
    content: "MUA NGAY";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Nền đen trong suốt 50% */
    color: #ffffff; /* Chữ trắng */
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase; /* Viết hoa toàn bộ */
    
    /* Trạng thái ẩn mặc định: đẩy xuống dưới hoàn toàn */
    opacity: 0; 
    transform: translateY(100%); 
    transition: all 0.3s ease-in-out; /* Hiệu ứng trượt mượt mà */
    pointer-events: none; /* Tránh việc lớp này cản trở click vào ảnh */
}

/* 4. Hiển thị hiệu ứng khi di chuột (hover) vào vùng ảnh */
.chitietdanhmucsp .astra-shop-thumbnail-wrap:hover a.woocommerce-LoopProduct-link::after {
    opacity: 1;
    transform: translateY(0); /* Trượt lên vị trí gốc */
}/* End custom CSS */