/* ==================================================
   product.min.css
   Tách nguyên bản từ customs.min.css
   CSS dành cho Product Detail:
   1. Ảnh chính sản phẩm
   2. Ảnh phụ dạng slider / vuốt ngang
================================================== */


/**========================================**/
/**======Hiển thị Ảnh chính/phụ Product====**/
/**========================================**/

.product-gallery {
    max-width: 500px;
}

.main-image {
    border: 1px solid #eee;
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
    min-height:500px; 
    display:flex; 
    align-items:center; 
    justify-content:center;

}

.main-image img {
    width: 100%;
    transition: transform 0.1s ease;
    transform-origin: center;
    max-height:100%; width:auto; 
    object-fit:contain;
}

/* zoom nhẹ */
.main-image:hover img {
    transform: scale(1.15);
}

.thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom:8px;
    cursor: grab;
    user-select: none;
    scrollbar-width:thin;
    scrollbar-color:#666 #ececec;
    -webkit-overflow-scrolling: touch;
}

.thumbnails.active {
    cursor: grabbing;
}

/* Chrome Edge */
.thumbnails::-webkit-scrollbar{
    height:8px;
}

.thumbnails::-webkit-scrollbar-track{
    background:#ececec;
    border-radius:20px;
}

.thumbnails::-webkit-scrollbar-thumb{
    background:#666;
    border-radius:20px;
}

.thumbnails::-webkit-scrollbar-thumb:hover{
    background:#444;
}

.thumbnails::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.35);
}

.thumbnails img {
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
    object-fit: cover;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
}