/* Container chính của slider */
.slider-container {
    position: relative;
    /* Đặt vị trí tương đối để các phần tử con (nút điều hướng) có thể định vị tuyệt đối bên trong */
    width: 600px;
    /* Chiều rộng khung slider */
    height: 400px;
    /* Chiều cao khung slider */
    margin: auto;
    /* Căn giữa slider theo chiều ngang */
    overflow: hidden;
    /* Ẩn phần nội dung bị tràn ra ngoài khung */
}

/* Vùng chứa các ảnh */
.slider {
    display: flex;
    /* Sắp xếp các ảnh nằm ngang theo hàng */
    transition: transform 0.5s ease-in-out;
    /* Tạo hiệu ứng trượt mượt mà khi thay đổi transform */
}

/* Các ảnh bên trong slider */
.slider img {
    width: 100%;
    /* Ảnh chiếm toàn bộ chiều rộng của khung chứa */
    height: 100%;
    /* Ảnh chiếm toàn bộ chiều cao của khung chứa */
    object-fit: cover;
    /* Cắt và co ảnh để vừa khung mà không bị méo */
}

/* Các nút điều hướng */
.prev-btn,
.next-btn {
    position: absolute;
    /* Định vị nút theo khung cha (.slider-container) */
    top: 50%;
    /* Đặt vị trí ở giữa theo chiều dọc */
    transform: translateY(-50%);
    /* Căn chỉnh chính xác nút vào giữa */
    background-color: rgba(0, 0, 0, 0.5);
    /* Màu nền đen trong suốt 50% */
    color: white;
    /* Màu chữ trắng */
    border: none;
    /* Loại bỏ viền nút */
    padding: 10px;
    /* Thêm khoảng cách bên trong nút */
    cursor: pointer;
    /* Hiện con trỏ dạng bàn tay khi rê chuột */
    z-index: 10;
    /* Đảm bảo nút nằm trên cùng, không bị ảnh che */
}

.prev-btn {
    left: 10px;
    /* Đặt nút prev (trái) cách lề trái 10px */
}

.next-btn {
    right: 10px;
    /* Đặt nút next (phải) cách lề phải 10px */
}