/* ===========================
   PROMOTION POPUP
=========================== */

.promo-popup{
    position:fixed;
    left:20px;
    bottom:20px;
    display:none;
    z-index:999999;
    overflow:visible;
}

.promo-popup.show{
    display:block;
}

/* Overlay */

.promo-overlay{
	display: none;
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
    backdrop-filter:blur(3px);
    animation:fadeOverlay .35s ease;
}

/* Popup */

.promo-box{
    position:relative;
    width:320px;
    overflow:visible;
}

.promo-box img{
    display:block;
    width:100%;
    height:auto;
    border-radius:14px;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
}

/* Close */

.promo-close{
    transform: translate(1px,-1px);
	position:absolute;
    top:-16px;
    right:-16px;

    width:40px;
    height:40px;

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

    padding:0;
    margin:0;

    border:none;
    border-radius:50%;

    background:#fff;
    color:#222;

    font-size:30px;
    font-weight:300;
    line-height:1;

    cursor:pointer;
    z-index:99999;

    box-shadow:0 5px 15px rgba(0,0,0,.25);
}

.promo-close:hover{
    background:#222;
    color:#fff;
}

/* Swiper */

.promo-swiper{
    width:100%;
    overflow:hidden;
    border-radius:14px;
}

.promo-swiper .swiper-wrapper{
    width:100%;
}

.promo-swiper .swiper-slide{
    width:100%;
    overflow:hidden;
    flex-shrink:0;
}

.promo-swiper img{
    display:block;
    width:100%;
    height:auto;
    transition:.35s;
}

.promo-swiper a{
    display:block;
}

.promo-swiper a:hover img{
    transform:scale(1.02);
}

/* Pagination */

.promo-pagination{
    bottom:14px !important;
}

.promo-pagination .swiper-pagination-bullet{

    width:10px;
    height:10px;

    background:#ffffff;

    opacity:.45;

    transition:.25s;
}

.promo-pagination .swiper-pagination-bullet-active{

    opacity:1;

    width:26px;

    border-radius:20px;
}

/* Prev Next */

.promo-prev,
.promo-next{

    width:42px;
    height:42px;

    background:rgba(255,255,255,.28);

    border-radius:50%;

    backdrop-filter:blur(8px);

    transition:.3s;
}

.promo-prev:hover,
.promo-next:hover{

    background:#ffffff;
}

.promo-prev:after,
.promo-next:after{

    font-size:18px;
    color:#222;
    font-weight:700;
}

/* Mobile */

@media (max-width:767px){

    .promo-popup{
        left:10px;
        right:10px;
        bottom:90px;   /* tránh che nút liên hệ */
    }

    .promo-box{
        width:100%;
        max-width:none;
    }

    .promo-prev,
    .promo-next{
        display:none;
    }

    .promo-close{
        top:-12px;
        right:-12px;
        width:34px;
        height:34px;
        font-size:22px;
    }

}

/* Animation */

@keyframes popupShow{

    from{

        opacity:0;

        transform:translateY(20px) scale(.92);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

@keyframes fadeOverlay{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}
.promo-tab{
    position:fixed;
    left:20px;
    bottom:20px;

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

    padding:10px 18px;

    border-radius:999px;

    background:#b8924f;
    color:#fff;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    z-index:999998;

    box-shadow:0 8px 20px rgba(0,0,0,.2);

    transition:.3s;
}

.promo-tab{
    position:fixed;
    left:20px;
    bottom:24px;

    width:58px;
    height:58px;

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

    border-radius:50%;

    background:#C8A96A;
    color:#fff;

    font-size:24px;

    cursor:pointer;

    z-index:999998;

    box-shadow:0 8px 24px rgba(0,0,0,.22);

    transition:all .25s ease;
}

.promo-tab.show{
    display:flex;
    animation:promoPulse .5s ease;
}

.promo-tab:hover{
    transform:scale(1.08);
    background:#B8924F;
}

.promo-tab i{
    font-size:22px;
}

@keyframes promoPulse{

    0%{
        transform:scale(.8);
        opacity:0;
    }

    70%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
        opacity:1;
    }

}

@media(max-width:767px){

    .promo-tab{
        left:12px;
        bottom:72px;
        width:54px;
        height:54px;
    }

}
.promo-tab::after{
    content:"";
    position:absolute;
    inset:-6px;
    border:2px solid rgba(200,169,106,.35);
    border-radius:50%;
    animation:ring 2s infinite;
}

@keyframes ring{

    0%{
        transform:scale(1);
        opacity:.8;
    }

    100%{
        transform:scale(1.4);
        opacity:0;
    }

}