/* Slider chính */
.slider-for {
    max-width: 600px;
    margin: 0;
}

.slider-for img {
    width: 100%;
    height: 480px;
    object-fit: cover; /* Đảm bảo ảnh không bị méo */
    border-radius: 8px;
    cursor: pointer;
}

/* Thumbnail dưới */
.slider-nav {
    max-width: 600px;
    margin: 30px 0; /* Khoảng cách giữa slider-for và slider-nav */
    display: flex;
    justify-content: center;
}

/* Kích thước ảnh trong slider-nav */
.slider-nav .slick-slide {
    width: auto;  /* Cho phép tự co giãn kích thước */
    height: 100px;
    margin: 0 5px;
}

.slider-nav img {
    width: 100px;
    height: 100px;
    object-fit: cover;  /* Giữ tỷ lệ ảnh, tránh méo */
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.slider-nav img:hover {
    transform: scale(1.1); /* Hiệu ứng zoom nhẹ khi hover */
}

/* Đổi màu mũi tên */
.slider-for .slick-prev:before,
.slider-for .slick-next:before {
    font-size: 20px;
    color: rgb(28, 83, 123);
}

/* Căn chỉnh vị trí mũi tên */
.slider-for .slick-prev {
    left: -20px;
}
.slider-for .slick-next {
    right: -20px;
}

/* Responsive cho màn hình nhỏ hơn 768px */
@media screen and (max-width: 768px) {
    .slider-for img {
        height: 300px;
        object-fit: cover;
    }
}