/* --- CSS TỔNG THỂ --- */
.section-slider { max-width: 1400px; margin: 50px auto; padding: 0 50px; }
.slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.slider-header .title { font-family: 'Montserrat', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-size: clamp(28px, 5vw, 50px); font-weight: 900;
            text-transform: uppercase; letter-spacing: 6px;
            background: linear-gradient(to bottom, #e2e2e2 0%, #ffffff 20%, #9a9b9c 45%, #f1f1f1 55%, #6a6c70 80%, #b1b3b6 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.8)); }
.view-all { color: #007bff; text-decoration: none; font-size: 14px; }

.css-carousel { 
    position: relative; 
    touch-action: pan-y; /* Cho phép cuộn trang dọc, ưu tiên vuốt ngang cho JS */
}
.css-carousel input { display: none; }

.carousel-window { 
    overflow: hidden; 
    width: 100%; 
    cursor: grab; 
    user-select: none; 
    -webkit-user-select: none;
}
.carousel-track {
    display: flex;
    gap: 15px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
    will-change: transform;
    /* Ngăn chặn việc bôi đen nội dung khi đang kéo chuột */
    user-select: none; 
    -webkit-user-select: none;
}

.carousel-window {
    overflow: hidden;
    cursor: grab; /* Hiển thị bàn tay mở */
}

.carousel-window:active {
    cursor: grabbing; /* Hiển thị bàn tay nắm lại khi nhấn giữ */
}

/* Chặn kéo ảnh mặc định của trình duyệt để JS chạy đúng */
.card img {
    pointer-events: none; 
    user-drag: none;
    -webkit-user-drag: none;
}
.carousel-window:active { cursor: grabbing; }

.carousel-track { 
    display: flex; 
    gap: 15px; 
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Mượt hơn ease-in-out */
    width: 100%;
    will-change: transform;
}

/* Chặn việc kéo ảnh làm gián đoạn vuốt */
.card img { 
    width: 100%; 
    height: 400px; 
    object-fit: cover; 
    border-radius: 5px; 
    transition: 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    pointer-events: none; /* Quan trọng: để sự kiện chạm xuyên qua ảnh vào track */
}

.card { 
    flex: 0 0 calc(20% - 12px); /* Sửa lại 20% để hiện đúng 5 cái */
    max-width: calc(20% - 12px);
    text-align: center; 
    box-sizing: border-box;
}

.card a { text-decoration: none; color: inherit; display: block; }
.card img:hover { transform: scale(1.05); }
.card p { font-size: 14px; margin-top: 10px; font-weight: bold; }

/* --- MŨI TÊN --- */
.arrow { 
    position: absolute; 
    top: 40%; 
    transform: translateY(-50%); 
    width: 45px; 
    height: 60%; 
    background: linear-gradient(to bottom, #e2e2e2 0%, #ffffff 20%, #9a9b9c 45%, #f1f1f1 55%, #6a6c70 80%, #b1b3b6 100%); 
	
    color: #0F0F0F; 
    font-size: 360%; 
    cursor: pointer; 
    z-index: 999; 
    display: none; 
    align-items: center;        
    justify-content: center;    
    transition: all 0.3s ease;
    border-radius: 4px;         
}

.arrow:hover { background-color: #333; }
.prev { left: -70px; } 
.next { right: -70px; }

#p1:checked ~ .p1-arr,
#p2:checked ~ .p2-arr { display: flex !important; }

/* --- LOGIC TRƯỢT --- */
#p1:checked ~ .carousel-window .carousel-track { transform: translateX(0); }
#p2:checked ~ .carousel-window .carousel-track { transform: translateX(calc(-100% - 15px)); }