/* ==========================================================================
   product-image.css
   Chuan hoa khung anh san pham (trang danh sach + trang chi tiet)

   - Ti le khung: 3:4 = 133.375% (1067 / 800), lay theo
     Configure::read('Products.image.dimensions') trong config/configs.php
   - Anh duoc timthumb cat day khung (zc=1) nen moi anh hien cung mot co,
     khong con vien trang do (zc=2) tao ra.
   - Neu doi dimensions trong config, chi can doi lai --product-img-ratio.
   ========================================================================== */

:root {
    --product-img-ratio: 133.375%;
}

/* --------------------------------------------------------------------------
   1. Card san pham (element c_product, c_product_flash)
   -------------------------------------------------------------------------- */

/* Khung anh chinh: ti le co dinh, moi card cao bang nhau */
.item_product .thumb .front,
.item_product .thumb > a {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 133.375%;
    padding-top: var(--product-img-ratio);
    overflow: hidden;
}

/* Anh lat khi hover phu dung khung cua anh chinh */
.item_product .thumb .back {
    height: 100%;
    overflow: hidden;
}

.item_product .thumb .front > a,
.item_product .thumb .back > a {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.item_product .thumb .front img,
.item_product .thumb .back img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* c_product_flash: the <a> nam truc tiep trong .thumb */
.item_product .thumb > a > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* --------------------------------------------------------------------------
   2. Gallery trang chi tiet san pham (smoothproducts)
   -------------------------------------------------------------------------- */

.product-detail .sp-wrap {
    align-items: flex-start;
}

/* Khung anh lon: ti le co dinh, khong phu thuoc chieu cao JS tinh inline */
.product-detail .sp-large {
    /* flex-basis phai la 0%, khong duoc auto: anh ben trong la position:absolute
       nen kich thuoc noi tai cua .sp-large bang 0 va no se bi co lai */
    flex: 1 1 0%;
    min-width: 0;
    width: auto !important;
    height: auto !important;
}

.product-detail .sp-large > a {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 133.375%;
    padding-top: var(--product-img-ratio);
    overflow: hidden;
}

.product-detail .sp-large > a > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* Thumbnail: moi o mot co, anh khong bi keo gian */
.product-detail .sp-thumbs a,
.product-detail .sp-thumbs a:link,
.product-detail .sp-thumbs a:visited {
    position: relative;
    display: block;
    float: none !important;
    width: 100% !important;
    height: 0 !important;
    padding-top: 133.375%;
    padding-top: var(--product-img-ratio);
    margin: 0 0 8px !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6e6e6;
    opacity: .55;
}

.product-detail .sp-thumbs a:hover {
    opacity: 1;
    border-color: #0d4675;
}

.product-detail .sp-thumbs a.sp-current {
    border-color: #0d4675;
}

/* Go bo min-height/min-width lam anh thumbnail bi keo dai */
.product-detail .sp-thumbs img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    object-fit: cover;
    object-position: center;
}

/* --- Desktop: cot thumbnail doc ben trai anh lon --- */
@media (min-width: 768px) {
    .product-detail .sp-thumbs.sp-thumbs-desktop {
        flex: 0 0 96px;
        width: 96px !important;
        margin-right: 10px;
        padding: 0 !important;
    }

    .product-detail .sp-thumbs.sp-thumbs-desktop a,
    .product-detail .sp-thumbs.sp-thumbs-desktop a:first-child {
        margin: 0 0 8px !important;
    }
}

/* --- Mobile: anh lon o tren, dai thumbnail cuon ngang o duoi --- */
@media (max-width: 767.98px) {
    .product-detail .sp-wrap {
        flex-direction: column !important;
        align-items: stretch;
    }

    .product-detail .sp-large {
        flex: 0 0 auto;
        width: 100% !important;
    }

    .product-detail .sp-thumbs.sp-thumbs-mobile {
        display: flex !important;
        flex-wrap: nowrap;
        width: 100% !important;
        max-width: 100%;
        margin: 8px 0 0 !important;
        padding-bottom: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .product-detail .sp-thumbs.sp-thumbs-mobile a {
        flex: 0 0 64px;
        width: 64px !important;
        height: 85px !important;
        padding-top: 0 !important;
        margin: 0 8px 0 0 !important;
    }

    .product-detail .sp-thumbs.sp-thumbs-mobile a:last-child {
        margin-right: 0 !important;
    }
}