﻿
.carousel-container-1 {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-row-1 {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    margin: 10px 0;
}

.carousel-track-1 {
    display: flex;
    gap: 20px;
    animation: scroll-left 200s linear infinite alternate;
}

.carousel-row-1.reverse .carousel-track-1 {
    animation: scroll-right linear infinite;
}

.carousel-item-1 {
    position: relative;
    margin: 0 10px;
    flex: 0 0 auto;
    margin-right: 20px;
    transition: transform 0.3s ease;
}
    .carousel-item-1 img {
        width: auto;
        height: auto;
        max-width:250px;
        max-height: 180px; /* Giới hạn chiều cao */
        object-fit: contain;
        border-radius: 8px;
    }
.carousel-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: none;
    background-color: #0026ff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
}

.carousel-item-1:hover .carousel-btn {
    display: block;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .carousel-item-1 img {
        width: auto;
        height: auto;
        max-width:180px;
        max-height:120px;
    }
    .carousel-btn {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Responsive nhỏ hơn nữa */
@media screen and (max-width: 480px) {
    .carousel-item-1 img {
        width: auto;
        height: auto;
        max-width: 120px;
        max-height: 100px;
    }

    .carousel-btn {
        font-size: 10px;
        padding: 5px 10px;
    }
}

@keyframes scroll-left {
    0% {
        transform: translateX(0); /* bắt đầu từ ngoài màn hình bên phải */
    }

    100% {
        transform: translateX(-100%); /* chạy hết qua trái */
    }
}
@keyframes scroll-right {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}
.fancybox__container {
    max-width: 100vw;
    max-height: 100vh;
    overflow: visible !important;
}

.fancybox__slide img {
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}


