/* =========================================================
 *  Ảnh hover cho card sản phẩm
 *  Áp dụng: .pd-rel-card, .product_item (marquee), .product_box
 *  Rê chuột vào card -> ảnh đại diện đổi sang ảnh hover (cross-fade).
 * ========================================================= */
.pd-rel-card .pd-rel-img,
.product_item .box_img,
.product_box .box_img {
    position: relative;
    overflow: hidden;
}

.product_box .box_img {
    padding-bottom: 66.6667%;
}

.product_box .box_img img {
    width: auto;
    height: auto;
}

.hover-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .5s ease;
    z-index: 2;
    pointer-events: none;
    background-size: contain;
}

/* ảnh mặc định mờ đi khi hover (ảnh sản phẩm là PNG nền trong suốt) */
.pd-rel-card .pd-rel-img img,
.product_item .box_img img,
.product_box .box_img img {
    transition: opacity .5s ease;
}
.pd-rel-card:hover .pd-rel-img img,
.product_item:hover .box_img img,
.product_box:hover .box_img img {
    opacity: 0;
}

.pd-rel-card:hover .hover-img,
.product_item:hover .hover-img,
.product_box:hover .hover-img {
    opacity: 1;
}
@media only screen and (max-width: 767px) {
    .hover-img {
        background-size: 60% auto;
    }

    /* Danh sách sản phẩm (trang danh mục): khoảng cách giữa 2 cột trên mobile */
    .container-product-list > .inner-list {
        column-gap: 15px;
    }

    /* frontend.css (mobile, ~dòng 9068) bóp ảnh sản phẩm còn
       max-width:80%/max-height:84% trong khi desktop là 95%/95%
       -> ảnh trông nhỏ hẳn so với card trên mobile. Nới lại gần
       bằng desktop. */
    .product_box .box_img img {
        max-width: 92%;
        max-height: 92%;
    }
}