.slider {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    filter: blur(15px);
    transition: opacity 1s ease, filter 1s ease;
}

.slide.active {
    opacity: 1;
    filter: blur(0);
    z-index: 2;
}

.slice {
    flex: 1;
    background-size: 300% 100%;
    background-repeat: no-repeat;
    transform: skew(-10deg);
    margin-left: -2px;
    transition: transform 1s ease;
}

/* Căn ảnh vào từng lát */
.slice:nth-child(1) { background-position: 0% center; }
.slice:nth-child(2) { background-position: 50% center; }
.slice:nth-child(3) { background-position: 100% center; }

/* Khi ảnh đang rời đi */
.slide.exit {
    opacity: 0;
    filter: blur(15px);
}

.slide.exit .slice:nth-child(1) { transform: skew(-10deg) translateX(-100%); }
.slide.exit .slice:nth-child(2) { transform: skew(-10deg) translateY(100%); }
.slide.exit .slice:nth-child(3) { transform: skew(-10deg) translateX(100%); }

/* Ảnh mới xuất hiện */
.slide.enter .slice:nth-child(1) { transform: skew(-10deg) translateX(100%); }
.slide.enter .slice:nth-child(2) { transform: skew(-10deg) translateY(-100%); }
.slide.enter .slice:nth-child(3) { transform: skew(-10deg) translateX(-100%); }

/* Khi slide đã ổn định */
.slide.active .slice {
    transform: skew(-10deg) translate(0, 0);
}

@media screen and (max-width: 768px) {
    .slider {
        height: 350px;
    }

}