/* ==========================================================
   HongHa UI2026
   Module : Promotion Banner Slider
   Version: V2
   3 VISIBLE - MOVE 1
   Không dùng chung với Flash Sale
   ========================================================== */


/* ==========================================================
   CONTAINER
   ========================================================== */

.hh-promotion-banner{
    width:100%;
    margin:8px 0 8px;
}
/* ==========================================================
   SLIDER
   ========================================================== */

.hh-promotion-banner-slider{
    position:relative;
    width:100%;    
}


/* ==========================================================
   VIEWPORT
   ========================================================== */

.hh-promotion-banner-viewport{

    width:100%;

    overflow:hidden;

    position:relative;

    border-radius:1px;

}


/* ==========================================================
   TRACK
   ========================================================== */

.hh-promotion-banner-track{

    display:flex;

    flex-wrap:nowrap;

    gap:14px;

    width:100%;

    transition:
        transform .45s ease;

    will-change:
        transform;

}


/* ==========================================================
   SLIDE
   DESKTOP: 3 BANNER
   MOVE: 1 BANNER
   ========================================================== */

.hh-promotion-banner-slide{

    flex:
        0 0 calc((100% - 28px) / 3);

    width:
        calc((100% - 28px) / 3);

    min-width:0;

    cursor:pointer;

    position:relative;

    overflow:hidden;

    border-radius:1px;

}


/* ==========================================================
   IMAGE
   ========================================================== */

.hh-promotion-banner-slide img{

    display:block;

    width:100%;

    height:150px;

    max-width:100%;

    border-radius:1px;

    transition:
        transform .35s ease;

}


/* ==========================================================
   HOVER ZOOM
   ========================================================== */

.hh-promotion-banner-slide:hover img{

    transform:
        scale(1.04);

}


/* ==========================================================
   BUTTON
   ========================================================== */

.hh-promotion-banner-btn{

    position:absolute;

    top:50%;

    transform:
        translateY(-50%);

    width:42px;

    height:42px;

    border:0;

    border-radius:50%;

    background:#fff;

    color:#555;

    box-shadow:
        0 5px 18px rgba(0,0,0,.16);

    cursor:pointer;

    z-index:10;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}


.hh-promotion-banner-btn:hover{

    background:#d70018;

    color:#fff;

    transform:
        translateY(-50%)
        scale(1.06);

}


.hh-promotion-banner-prev{

    left:10px;

}


.hh-promotion-banner-next{

    right:10px;

}


/* ==========================================================
   DISABLED
   ========================================================== */

.hh-promotion-banner-btn.is-disabled{

    opacity:.35;

}


/* ==========================================================
   DOTS
   NẰM BÊN DƯỚI BANNER
   ========================================================== */

.hh-promotion-banner-dots{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    width:100%;

    margin-top:10px;

    min-height:10px;

}


/* ==========================================================
   DOT
   ========================================================== */

.hh-promotion-banner-dot{

    display:block;

    width:8px;

    height:8px;

    padding:0;

    margin:0;

    border:0;

    border-radius:50%;

    background:#ccc;

    cursor:pointer;

    transition:
        width .2s ease,
        background .2s ease,
        transform .2s ease;

}


/* ==========================================================
   ACTIVE DOT
   JS dùng .is-active
   ========================================================== */

.hh-promotion-banner-dot.is-active{

    width:22px;

    border-radius:10px;

    background:#d70018;

}


/* ==========================================================
   TABLET
   2 BANNER
   ========================================================== */

@media (max-width:900px){

    .hh-promotion-banner-track{

        gap:14px;

    }

    .hh-promotion-banner-slide{

        flex:
            0 0 calc((100% - 14px) / 2);

        width:
            calc((100% - 14px) / 2);

    }

}


/* ==========================================================
   MOBILE
   1 BANNER
   ========================================================== */

@media (max-width:600px){

    .hh-promotion-banner-slide{

        flex:
            0 0 100%;

        width:100%;

    }


    .hh-promotion-banner-btn{

        width:34px;

        height:34px;

    }


    .hh-promotion-banner-prev{

        left:8px;

    }


    .hh-promotion-banner-next{

        right:8px;

    }

}