@use "../../abstracts/index" as *;



.sw-dot-default {
    margin-top: 24px;
    display: inline-flex;

    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background-color: var(--white);
        @include transition3;
        opacity: 0.32;
        margin-left: 4px;
        margin-right: 4px;

        &.swiper-pagination-bullet-active {
            opacity: 1;
        }
    }

    &.style-white {
        .swiper-pagination-bullet {
            &.swiper-pagination-bullet-active {
                border: 1px solid var(--white);

                &::before {
                    background-color: var(--white);
                }
            }

            &::before {
                background-color: #FFFFFF99;
            }
        }
    }

    @include res(xl, min) {
        margin-top: 40px;
    }
}

.swiper-box-shadow {
    padding: 20px;
    margin: -20px;
}

.group-btn-slider {
    display: flex;
    align-items: center;
    gap: 12px;

    .sw-dot-default {
        width: auto;
        margin: 0;
    }

    .nav-prev-swiper,
    .nav-next-swiper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        color: var(--secondary);
        border-radius: 99px;
        background: linear-gradient(0deg, #F5F5F5, #F5F5F5),
        radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%) ;
        box-shadow: 0px -3px 0px 0px #E9E9E9 inset,
        0px 1px 0px 0px #FFFFFFB2 inset,
        0px 2.77px 2.21px 0px #0000001F,
        0px 3px 3px 0px #00000024;
        overflow: hidden;
        @include transition3;
        .icon {
            font-size: 24px;
            position: relative;
            z-index: 1;
        }
        &::before {
            position: absolute;
            content: '';
            bottom: 150%;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 99px;
            background: linear-gradient(0deg, #272727, #272727),
            radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%) ;
            box-shadow: 0px -3px 0px 0px #080808 inset,
            0px 1px 0px 0px #FFFFFF4D inset,
            0px 2.77px 2.21px 0px #0000001F,
            0px 3px 3px 0px #00000024;
            @include transition3();
        }
        &:hover {
            color: var(--white);
            &::before {
                bottom: 0;
            }
        }
        &.swiper-button-disabled {
            opacity: 0.32;
            pointer-events: none;
        }
    }

    @include res(md) {
        .nav-prev-swiper,
        .nav-next-swiper {
            width: 44px;
            height: 44px;
        }
    }
}

.btn-thumbs {
    cursor: pointer;
}

.btn-nav-swiper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hover-wrap {
    position: absolute;
    top: 0;
    bottom: 40px;
    z-index: 2;
    overflow: hidden;

    .action {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        opacity: 0;

        &.hover {
            opacity: 1;
        }

        &:not(.hover) {
            opacity: 0;
        }
    }

    &.left {
        right: 50%;
        left: 0;
    }

    &.right {
        right: 0;
        left: 50%;
    }

    @include res(xl) {
        display: none;
    }
}

.slider_effect_fade {
    .swiper-slide {

        &.swiper-slide-active {

            .fade-item {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }

            .scale-item {
                transform: scale(1);
            }

            .width-item {
                width: 100%;
            }
        }
    }

    .fade-item {
        transform: translateY(100px);
        opacity: 0;
        visibility: hidden;
        @include transition3;

        &.fade-box {
            transition-delay: 0.4s;
            transform: translateY(0px);
        }

        &.fade-item-1 {
            transition-delay: 0.5s;
        }

        &.fade-item-2 {
            transition-delay: 0.6s;
        }

        &.fade-item-3 {
            transition-delay: 0.7s;
        }

        &.fade-item-4 {
            transition-delay: 0.8s;
        }
    }

    .scale-item {
        transform: scale(1.2);
        transition: all 0.5s linear;

        &.scale-item-1 {
            transition-delay: 0.3s;
        }
    }

    .width-item {
        width: 1%;
        @include transition3;

        &.width-item-3 {
            transition-delay: 0.7s;
        }
    }
}

/*-- Slick Slide --*/
.slick-list {
    padding: 0 !important;
    /* xóa padding auto */
}

.slick-nav {
    .slick-slide {
        border: 0;

        .text-slide {
            @include transition3;
        }

        &:not(.slick-center) {
            .text-slide {
                color: var(--white-32);
            }
        }
    }
}

.slick-nav {
    perspective: 1000px;

    .slick-slide {
        transition: transform 0.6s, opacity 0.6s;
        transform-origin: center center;
        opacity: 0.4;
        transform: rotateX(0deg) translateZ(0px);

        &:not(.slick-current) {
            transform: rotateX(45deg) translateY(-120px) translateZ(-120px);
        }
    }

    .slick-current {
        opacity: 1;

        +.slick-slide {
            transform: rotateX(45deg) translateY(-120px) translateZ(-120px);
        }
    }

    .slick-current {

        ~.slick-slide:last-child {
            transform: rotateX(-45deg) translateY(120px) translateZ(-120px);
        }
    }
}

.group-slider {
    display: flex;
    gap: 40px;
    align-items: center;
    .swiper-pagination {
        position: relative;
        width: 100%;
        height: 2px;
        bottom: unset;
        top: unset;
        left: unset;
        background: #FFFFFF33;
        // height: 2px;
        // background-color: #FFFFFF33;
        // .swiper-pagination-progressbar-fill {
        //     background-color: var(--brand);
        //     box-shadow: 0px 2px 12px 0px #FD3A25;
        // }
        .swiper-pagination-bullet {
            position: absolute;
            inset: 0;
            width: unset;
            height: unset;
            opacity: 1;
            margin: 0;
            background: transparent;
            &::after {
                position: absolute;
                content: '';
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 0%;
                // background: var(--brand);
                transition: all 1s ease-in-out;
            }
        }
        .swiper-pagination-bullet-active {
            &::after {
                width: 100%;
                background: var(--brand);
            }
        }
    }
    .group-btn-slider {
        display: flex;
        gap: 8px;
        .btn-slider {
            display: flex;
            &:hover .icon {
                color: var(--brand);
            }
        }
        .icon {
            font-size: 24px;
            color: var(--white);
            @include transition3;
           
        }
    }
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 2px;
    background: #FFFFFF33;
    border-radius: 999px;
    overflow: visible;
}

.progress-fill {
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--brand);
    box-shadow: 0px 2px 12px 0px var(--brand);
    transition: width 0.06s linear;
}

.swiper-testimonial_wrap {
    .top-icon {
        font-size: 20px;
        color: var(--brand);
        margin-bottom: 16px;
    }
    .desc {
        margin-bottom: 24px;
        letter-spacing: 0.01em;
    }
    .cite {
        position: relative;
        padding: 8px 16px;
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 28px;
        .line-left {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
        }
        .line {
            display: flex;
            width: 1px;
            height: 16px;
            background-color: var(--neutral-600);
        }
    }
    .group-slider {
        position: relative;
        padding: 24px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &::before {
            position: absolute;
            content: '';
            left: 50%;
            top: 0;
            width: 100%;
            max-width: 1324px;
            transform: translateX(-50%);
            height: 1px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
        }
        .group-btn-slider {
            display: flex;
            gap: 12px;
        }
        .icon {
            color: var(--primary);
        }
        .btn-slider {
            &:hover .icon {
                color: var(--white);
            }
        }
        .testimonials-pagination {
            width: max-content;
            display: flex;
            gap: 4px;
            align-items: center;
            font-weight: 600;
            font-size: 36px;
            line-height: 48px;
            letter-spacing: -0.01px;
            color: var(--neutral-700);
            .swiper-pagination-current {
                color: var(--neutral-400);
            }
        }
    }
}

.testimonial-image {
    padding: 32px;
    border-radius: 40px;
    background: linear-gradient(0deg, var(--neutral-900, #18181B), var(--neutral-900, #18181B)),
    radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%) ;
    box-shadow: 0px 7.77px 2.21px 0px #0000000F,
    0px 3px 3px 0px #0000001A,
    0px -8px 0px 0px #111111 inset,
    0px 4px 0px 0px #FFFFFF1A inset;
    img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 24px;
        border: 0.38px solid #FFFFFF40;
    }
    @include res(md) {
        padding: 16px 12px;
        border-radius: 28px;
    }
}

.progressbar-line {
    position: relative;
    flex-grow: 1;
    height: 2px;
    background-color: #FFFFFF33;
    .progressbar-inner {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        background-color: var(--brand);
        box-shadow: 0px 2px 12px 0px #FD3A25;
        animation: progressbar 2s infinite;
    }
}

@keyframes progressbar {
    0% {
        width: 0;
    }
    50% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}