/* =========================================================
   WST HOME SLIDER V4
   Next: phải -> trái
   Prev: trái -> phải
   3D nhẹ: perspective + rotateY + scale
   ========================================================= */

.wst_home_slider {
    --wst-slider-height: clamp(420px, 43vw, 720px);
    --wst-slider-white: #fff;
    --wst-slider-glass: rgba(12, 19, 31, .30);
    --wst-slider-line: rgba(255, 255, 255, .38);
    --wst-slider-ease: cubic-bezier(.22, 1, .36, 1);
    --wst-slider-transition: .92s;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #080d15;
    color: var(--wst-slider-white);
}

.wst_home_slider_viewport {
    position: relative;
    width: 100%;
    height: var(--wst-slider-height);
    overflow: hidden;
    isolation: isolate;
    perspective: 1400px;
    perspective-origin: center center;
    touch-action: pan-y;
    user-select: none;
}

.wst_home_slider_track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Slide base */
.wst_home_slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform:
        translate3d(0, 0, 0)
        rotateY(0deg)
        scale(1);
    transform-origin: center center;
    backface-visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;
}

.wst_home_slide.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.wst_home_slide.is-leaving {
    z-index: 3;
    visibility: visible;
    pointer-events: none;
}

.wst_home_slide.is-entering {
    z-index: 4;
    visibility: visible;
}

/* =========================================================
   NEXT
   Ảnh mới: phải -> trái
   Ảnh cũ: trung tâm -> trái
   ========================================================= */
.wst_home_slide.is-entering-next {
    animation:
        wstSlideEnterFromRight
        var(--wst-slider-transition)
        var(--wst-slider-ease)
        both;
}

.wst_home_slide.is-leaving-next {
    animation:
        wstSlideLeaveToLeft
        var(--wst-slider-transition)
        var(--wst-slider-ease)
        both;
}

@keyframes wstSlideEnterFromRight {
    0% {
        opacity: .35;
        transform:
            translate3d(100%, 0, -80px)
            rotateY(-4deg)
            scale(.985);
    }

    55% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            rotateY(0deg)
            scale(1);
    }
}

@keyframes wstSlideLeaveToLeft {
    0% {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            rotateY(0deg)
            scale(1);
    }

    100% {
        opacity: .22;
        transform:
            translate3d(-38%, 0, -110px)
            rotateY(3.5deg)
            scale(.985);
    }
}

/* =========================================================
   PREV
   Ảnh mới: trái -> phải
   Ảnh cũ: trung tâm -> phải
   ========================================================= */
.wst_home_slide.is-entering-prev {
    animation:
        wstSlideEnterFromLeft
        var(--wst-slider-transition)
        var(--wst-slider-ease)
        both;
}

.wst_home_slide.is-leaving-prev {
    animation:
        wstSlideLeaveToRight
        var(--wst-slider-transition)
        var(--wst-slider-ease)
        both;
}

@keyframes wstSlideEnterFromLeft {
    0% {
        opacity: .35;
        transform:
            translate3d(-100%, 0, -80px)
            rotateY(4deg)
            scale(.985);
    }

    55% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            rotateY(0deg)
            scale(1);
    }
}

@keyframes wstSlideLeaveToRight {
    0% {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            rotateY(0deg)
            scale(1);
    }

    100% {
        opacity: .22;
        transform:
            translate3d(38%, 0, -110px)
            rotateY(-3.5deg)
            scale(.985);
    }
}

/* Image */
.wst_home_slide_link,
.wst_home_slide_picture {
    display: block;
    width: 100%;
    height: 100%;
}

.wst_home_slide_picture {
    overflow: hidden;
}

.wst_home_slide_picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.045);
    transition:
        transform 7.4s cubic-bezier(.18,.7,.2,1),
        filter .8s ease;
    will-change: transform;
}

.wst_home_slide.is-active .wst_home_slide_picture img {
    transform: scale(1.01);
}

.wst_home_slide.is-entering .wst_home_slide_picture img {
    animation: wstSliderImageDepth .95s var(--wst-slider-ease) both;
}

@keyframes wstSliderImageDepth {
    0% {
        transform: scale(1.075);
        filter: brightness(.90) contrast(.98);
    }

    100% {
        transform: scale(1.015);
        filter: brightness(1) contrast(1);
    }
}

/* Shade */
.wst_home_slide_shade {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(3, 9, 18, .18), transparent 34%),
        linear-gradient(0deg, rgba(3, 9, 18, .30), transparent 36%);
}

/* 3D highlight edge */
.wst_home_slide::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: 90px;
    pointer-events: none;
    opacity: 0;
    filter: blur(10px);
}

.wst_home_slide.is-entering-next::after {
    left: 0;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,0)
    );
    animation: wstEdgeGlow .7s ease-out both;
}

.wst_home_slide.is-entering-prev::after {
    right: 0;
    background: linear-gradient(
        270deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,0)
    );
    animation: wstEdgeGlow .7s ease-out both;
}

@keyframes wstEdgeGlow {
    0% {
        opacity: 0;
    }

    35% {
        opacity: .9;
    }

    100% {
        opacity: 0;
    }
}

/* Caption */
.wst_home_slide_caption {
    position: absolute;
    z-index: 6;
    left: clamp(22px, 5vw, 84px);
    bottom: clamp(78px, 10vw, 126px);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: min(520px, 70vw);
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: translate3d(0, 16px, 0);
}

.wst_home_slide.is-active .wst_home_slide_caption {
    animation: wstCaptionIn .65s .24s var(--wst-slider-ease) both;
}

@keyframes wstCaptionIn {
    from {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.wst_home_slide_caption_line {
    display: block;
    width: 34px;
    height: 1px;
    background: currentColor;
}

/* Arrow */
.wst_home_slider_arrow {
    position: absolute;
    z-index: 10;
    top: 50%;
    display: grid;
    place-items: center;
    width: clamp(46px, 4vw, 58px);
    height: clamp(46px, 4vw, 58px);
    padding: 0;
    border: 1px solid var(--wst-slider-line);
    border-radius: 999px;
    color: #fff;
    background: var(--wst-slider-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateY(-50%);
    cursor: pointer;
    transition:
        background .28s ease,
        border-color .28s ease,
        transform .28s var(--wst-slider-ease),
        box-shadow .28s ease;
}

.wst_home_slider_arrow:hover {
    background: rgba(255,255,255,.94);
    border-color: rgba(255,255,255,.96);
    color: #111827;
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
}

.wst_home_slider_arrow:focus-visible,
.wst_home_slider_center:focus-visible,
.wst_home_slider_dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.wst_home_slider_arrow--prev {
    left: clamp(16px, 3vw, 52px);
}

.wst_home_slider_arrow--next {
    right: clamp(16px, 3vw, 52px);
}

.wst_home_slider_arrow--prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.wst_home_slider_arrow--next:hover {
    transform: translateY(-50%) translateX(3px);
}

.wst_home_slider_arrow_icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    transition: transform .32s var(--wst-slider-ease);
}

.wst_home_slider_arrow:hover .wst_home_slider_arrow_icon {
    transform: scale(1.08);
}

.wst_home_slider_arrow svg {
    width: 100%;
    height: 100%;
}

/* Controls */
.wst_home_slider_controls {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: clamp(20px, 3vw, 38px);
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 58px;
    padding: 7px 9px 7px 18px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    background: rgba(7,13,23,.34);
    box-shadow: 0 14px 50px rgba(0,0,0,.20);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

.wst_home_slider_counter {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 62px;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.wst_home_slider_counter_sep {
    display: block;
    width: 20px;
    height: 1px;
    background: rgba(255,255,255,.48);
}

.wst_home_slider_dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wst_home_slider_dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.wst_home_slider_dot span {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    transition:
        width .34s var(--wst-slider-ease),
        background .34s ease,
        transform .34s var(--wst-slider-ease);
}

.wst_home_slider_dot:hover span {
    transform: scale(1.35);
    background: #fff;
}

.wst_home_slider_dot.is-active {
    width: 34px;
}

.wst_home_slider_dot.is-active span {
    width: 22px;
    background: #fff;
}

.wst_home_slider_center {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #111827;
    background: transparent;
    cursor: pointer;
    transition: transform .3s var(--wst-slider-ease);
}

.wst_home_slider_center:hover {
    transform: scale(1.08);
}

.wst_home_slider_center_ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.18));
}

.wst_home_slider_center_ring_bg,
.wst_home_slider_center_ring_progress {
    fill: none;
    stroke-width: 2;
}

.wst_home_slider_center_ring_bg {
    stroke: rgba(255,255,255,.30);
}

.wst_home_slider_center_ring_progress {
    stroke: #fff;
    stroke-linecap: round;
    stroke-dasharray: 125.664;
    stroke-dashoffset: 125.664;
}

.wst_home_slider_center_core {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    box-shadow: 0 5px 18px rgba(0,0,0,.18);
}

.wst_home_slider_center_core::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: inherit;
    opacity: 0;
}

.wst_home_slider.is-playing .wst_home_slider_center_core::after {
    animation: wstHomeSliderPulse 2.2s ease-out infinite;
}

.wst_home_slider_center_core svg {
    position: absolute;
    width: 17px;
    height: 17px;
    transition:
        opacity .2s ease,
        transform .3s var(--wst-slider-ease);
}

.wst_home_slider_icon_play {
    opacity: 0;
    transform: scale(.65);
}

.wst_home_slider.is-paused .wst_home_slider_icon_pause {
    opacity: 0;
    transform: scale(.65);
}

.wst_home_slider.is-paused .wst_home_slider_icon_play {
    opacity: 1;
    transform: scale(1);
}

.wst_home_slider_progress {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: rgba(255,255,255,.16);
}

.wst_home_slider_progress span {
    display: block;
    width: 0;
    height: 100%;
    background: rgba(255,255,255,.9);
    transform-origin: left center;
}

@keyframes wstHomeSliderPulse {
    0% {
        opacity: .55;
        transform: scale(.86);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* Responsive */
@media (max-width: 1023px) {
    .wst_home_slider {
        --wst-slider-height: clamp(400px, 61vw, 620px);
    }

    .wst_home_slider_viewport {
        perspective: 1100px;
    }

    .wst_home_slider_arrow {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 767px) {
    .wst_home_slider {
        --wst-slider-height: clamp(430px, 116vw, 610px);
        --wst-slider-transition: .70s;
    }

    .wst_home_slider_viewport {
        perspective: 850px;
    }

    .wst_home_slider_arrow {
        top: auto;
        bottom: 22px;
        width: 42px;
        height: 42px;
        transform: none;
    }

    .wst_home_slider_arrow--prev {
        left: 16px;
    }

    .wst_home_slider_arrow--next {
        right: 16px;
    }

    .wst_home_slider_arrow--prev:hover,
    .wst_home_slider_arrow--next:hover {
        transform: none;
    }

    .wst_home_slider_controls {
        bottom: 16px;
        gap: 10px;
        min-height: 50px;
        padding: 5px 7px 5px 12px;
    }

    .wst_home_slider_counter {
        display: none;
    }

    .wst_home_slider_dots {
        gap: 3px;
    }

    .wst_home_slider_dot {
        width: 17px;
        height: 20px;
    }

    .wst_home_slider_dot.is-active {
        width: 28px;
    }

    .wst_home_slider_dot.is-active span {
        width: 18px;
    }

    .wst_home_slider_center {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .wst_home_slider_center_core {
        width: 30px;
        height: 30px;
    }

    .wst_home_slide_caption {
        left: 20px;
        right: 20px;
        bottom: 82px;
        max-width: none;
        justify-content: center;
        text-align: center;
    }

    @keyframes wstSlideEnterFromRight {
        0% {
            opacity: .45;
            transform:
                translate3d(100%, 0, -45px)
                rotateY(-2deg)
                scale(.99);
        }

        100% {
            opacity: 1;
            transform:
                translate3d(0, 0, 0)
                rotateY(0deg)
                scale(1);
        }
    }

    @keyframes wstSlideEnterFromLeft {
        0% {
            opacity: .45;
            transform:
                translate3d(-100%, 0, -45px)
                rotateY(2deg)
                scale(.99);
        }

        100% {
            opacity: 1;
            transform:
                translate3d(0, 0, 0)
                rotateY(0deg)
                scale(1);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .wst_home_slide.is-entering-next,
    .wst_home_slide.is-leaving-next,
    .wst_home_slide.is-entering-prev,
    .wst_home_slide.is-leaving-prev,
    .wst_home_slide.is-entering .wst_home_slide_picture img,
    .wst_home_slide.is-active .wst_home_slide_caption {
        animation-duration: .25s !important;
    }

    .wst_home_slide_picture img {
        transition-duration: .25s !important;
    }

    .wst_home_slider_center_core::after {
        display: none;
    }
}

/* =========================================================
   V6 FINAL OVERRIDE
   3D chỉ dùng trong lúc slide xuất hiện / rời đi.
   Khi hiển thị xong, slide trở về trạng thái phẳng hoàn toàn.
   ========================================================= */

.wst_home_slide.is-active:not(.is-entering):not(.is-leaving) {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
}

.wst_home_slide.is-active:not(.is-entering):not(.is-leaving) .wst_home_slide_picture img {
    transform: scale(1);
    filter: none;
    transition: none;
}

.wst_home_slider_viewport {
    perspective: 1400px;
    perspective-origin: center center;
}

.wst_home_slider_track {
    transform-style: preserve-3d;
}

.wst_home_slide {
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* NEXT: ảnh mới từ phải sang trái */
.wst_home_slide.is-entering-next {
    animation: wstV6EnterFromRight .90s cubic-bezier(.22,1,.36,1) both;
}

.wst_home_slide.is-leaving-next {
    animation: wstV6LeaveToLeft .90s cubic-bezier(.22,1,.36,1) both;
}

@keyframes wstV6EnterFromRight {
    0% {
        opacity: .38;
        transform: translate3d(100%,0,-88px) rotateY(-5deg) scale(.986);
    }
    55% {
        opacity: 1;
        transform: translate3d(38%,0,-28px) rotateY(-1.8deg) scale(.994);
    }
    100% {
        opacity: 1;
        transform: translate3d(0,0,0) rotateY(0deg) scale(1);
    }
}

@keyframes wstV6LeaveToLeft {
    0% {
        opacity: 1;
        transform: translate3d(0,0,0) rotateY(0deg) scale(1);
    }
    55% {
        opacity: .82;
        transform: translate3d(-28%,0,-32px) rotateY(1.6deg) scale(.994);
    }
    100% {
        opacity: 0;
        transform: translate3d(-100%,0,-88px) rotateY(4deg) scale(.986);
    }
}

/* PREV: ảnh mới từ trái sang phải */
.wst_home_slide.is-entering-prev {
    animation: wstV6EnterFromLeft .90s cubic-bezier(.22,1,.36,1) both;
}

.wst_home_slide.is-leaving-prev {
    animation: wstV6LeaveToRight .90s cubic-bezier(.22,1,.36,1) both;
}

@keyframes wstV6EnterFromLeft {
    0% {
        opacity: .38;
        transform: translate3d(-100%,0,-88px) rotateY(5deg) scale(.986);
    }
    55% {
        opacity: 1;
        transform: translate3d(-38%,0,-28px) rotateY(1.8deg) scale(.994);
    }
    100% {
        opacity: 1;
        transform: translate3d(0,0,0) rotateY(0deg) scale(1);
    }
}

@keyframes wstV6LeaveToRight {
    0% {
        opacity: 1;
        transform: translate3d(0,0,0) rotateY(0deg) scale(1);
    }
    55% {
        opacity: .82;
        transform: translate3d(28%,0,-32px) rotateY(-1.6deg) scale(.994);
    }
    100% {
        opacity: 0;
        transform: translate3d(100%,0,-88px) rotateY(-4deg) scale(.986);
    }
}

/* Ảnh chỉ zoom nhẹ khi đang đi vào, sau đó về phẳng */
.wst_home_slide.is-entering .wst_home_slide_picture img {
    animation: wstV6ImageAppear .90s cubic-bezier(.22,1,.36,1) both;
}

@keyframes wstV6ImageAppear {
    0% {
        transform: scale(1.045);
        filter: brightness(.94) contrast(.99);
    }
    100% {
        transform: scale(1);
        filter: none;
    }
}

.wst_home_slide.is-active:not(.is-entering) .wst_home_slide_picture img {
    transform: scale(1);
    filter: none;
    transition: none;
}

/* Đảm bảo button luôn nhận click */
.wst_home_slider_arrow {
    z-index: 30;
    pointer-events: auto;
}

.wst_home_slider_arrow_icon,
.wst_home_slider_arrow svg,
.wst_home_slider_arrow svg * {
    pointer-events: none;
}

/* Mobile: giảm 3D */
@media (max-width: 767px) {
    .wst_home_slider_viewport {
        perspective: 900px;
    }

    .wst_home_slide.is-entering-next {
        animation: wstV6EnterFromRightMobile .72s cubic-bezier(.22,1,.36,1) both;
    }

    .wst_home_slide.is-leaving-next {
        animation: wstV6LeaveToLeftMobile .72s cubic-bezier(.22,1,.36,1) both;
    }

    .wst_home_slide.is-entering-prev {
        animation: wstV6EnterFromLeftMobile .72s cubic-bezier(.22,1,.36,1) both;
    }

    .wst_home_slide.is-leaving-prev {
        animation: wstV6LeaveToRightMobile .72s cubic-bezier(.22,1,.36,1) both;
    }

    .wst_home_slide.is-entering .wst_home_slide_picture img {
        animation-duration: .72s;
    }
}

@keyframes wstV6EnterFromRightMobile {
    0% { opacity:.48; transform:translate3d(100%,0,-34px) rotateY(-2deg) scale(.993); }
    100% { opacity:1; transform:translate3d(0,0,0) rotateY(0deg) scale(1); }
}

@keyframes wstV6LeaveToLeftMobile {
    0% { opacity:1; transform:translate3d(0,0,0) rotateY(0deg) scale(1); }
    100% { opacity:0; transform:translate3d(-100%,0,-34px) rotateY(1.8deg) scale(.993); }
}

@keyframes wstV6EnterFromLeftMobile {
    0% { opacity:.48; transform:translate3d(-100%,0,-34px) rotateY(2deg) scale(.993); }
    100% { opacity:1; transform:translate3d(0,0,0) rotateY(0deg) scale(1); }
}

@keyframes wstV6LeaveToRightMobile {
    0% { opacity:1; transform:translate3d(0,0,0) rotateY(0deg) scale(1); }
    100% { opacity:0; transform:translate3d(100%,0,-34px) rotateY(-1.8deg) scale(.993); }
}

@media (prefers-reduced-motion: reduce) {
    .wst_home_slide.is-entering-next,
    .wst_home_slide.is-leaving-next,
    .wst_home_slide.is-entering-prev,
    .wst_home_slide.is-leaving-prev,
    .wst_home_slide.is-entering .wst_home_slide_picture img {
        animation-duration: .25s !important;
    }
}