/* =========================================
   ASN DAC TINH SLIDER
========================================= */

.asn-dac-tinh-slider{
    position:relative;
    width:100%;
}

.asn-dac-tinh-viewport{
    overflow:hidden;
    width:100%;
}

.asn-dac-tinh-track{
    display:flex;
    gap:32px;
    transition:transform .45s ease;
    will-change:transform;
}

.asn-dac-tinh-slide{
    flex:0 0 calc((100% - 160px) / 6);
    min-width:0;
}

.asn-dac-tinh-item{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.asn-dac-tinh-img{
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:20px;
    background:#f5f5f5;
}

.asn-dac-tinh-img img{
    width:100%;
    height:100%!important;
    object-fit:cover;
    display:block;
}

.asn-dac-tinh-title{
    margin:0;
    font-family:Manrope, sans-serif;
    font-size:16px;
    line-height:1.6;
    font-weight:400;
}

.asn-dac-tinh-desc{
    font-size:14px;
    line-height:1.6;
}

/* =========================================
   ASN DAC TINH BUTTON
========================================= */

.asn-dac-tinh-button{
    position:absolute;
    top:25%;

    width:56px;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    overflow:hidden;

    border-radius:100%;
    color:var(--e-global-color-accent);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.20) 0%,
            rgba(255,255,255,0.08) 100%
        );

    border:1px solid rgba(255,255,255,0.36);

    backdrop-filter:
        blur(8px)
        saturate(180%)
        contrast(106%);

    -webkit-backdrop-filter:
        blur(8px)
        saturate(180%)
        contrast(106%);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.45),
        inset 0 -18px 30px rgba(0,0,0,0.16),
        0 10px 30px rgba(0,0,0,0.22);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        transform .25s ease;

    z-index:20;
}

.asn-dac-tinh-button svg{
    position:relative;
    z-index:3;
    width:20px;
    height:20px;
    transition:transform .25s ease;
}

.asn-dac-tinh-button::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;

    background:
        linear-gradient(
            -45deg,
            rgba(255,255,255,0.80) 0%,
            rgba(255,255,255,0.26) 18%,
            rgba(255,255,255,0.10) 38%,
            rgba(255,255,255,0) 58%
        );

    mix-blend-mode:screen;
    opacity:.9;
    pointer-events:none;
}

.asn-dac-tinh-button::after{
    content:"";
    position:absolute;
    inset:-12%;
    border-radius:inherit;

    background:
        radial-gradient(circle at top left, rgba(255,120,120,0.16), transparent 28%),
        radial-gradient(circle at bottom right, rgba(120,180,255,0.16), transparent 28%);

    filter:blur(16px);
    opacity:.75;
    mix-blend-mode:soft-light;
    pointer-events:none;
}

.asn-dac-tinh-button:hover{
    transform:scale(1.04);

    background:
        linear-gradient(
            180deg,
            rgba(255,170,90,0.34),
            rgba(255,170,90,0.22) 60%
        );

    border-color:rgba(255,255,255,0.48);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.52),
        inset 0 -22px 36px rgba(0,0,0,0.18),
        0 18px 42px rgba(0,0,0,0.28);
}

.asn-dac-tinh-button:active{
    transform:translateY(-20%) scale(.96);
}

.asn-dac-tinh-button:active svg{
    transform:scale(1.18);
}

.asn-dac-tinh-prev{
    left:10px;
}

.asn-dac-tinh-next{
    right:10px;
}

.asn-dac-tinh-button.is-hidden{
    display:none;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1024px){
    .asn-dac-tinh-track{
        gap:24px;
    }

    .asn-dac-tinh-slide{
        flex:0 0 calc((100% - 48px) / 3);
    }
}

@media(max-width:767px){
    .asn-dac-tinh-track{
        gap:20px;
    }

    .asn-dac-tinh-slide{
        flex:0 0 calc((100% - 20px) / 2);
    }

    .asn-dac-tinh-button{
        width:46px;
        height:46px;
    }

    .asn-dac-tinh-prev{
        left:-10px;
    }

    .asn-dac-tinh-next{
        right:-10px;
    }
}