/* =========================================
   AVICO FLOATING CONTACT
========================================= */

.avico-floating-contact{
    position:fixed;
    right:20px;
    top:65%;
    transform:translateY(-50%);
    z-index:999999;
}

/* PANEL */

.avico-floating-contact__panel{
    transition:all .35s ease;
}

.avico-floating-contact.is-collapsed .avico-floating-contact__panel{
    opacity:0;
    visibility:hidden;
    transform:translateX(100px);
    pointer-events:none;
}

/* LIST */

.avico-floating-contact__list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ITEM */

.avico-floating-contact__item{
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
}

/* ICON */

.avico-floating-contact__icon{
    width:60px;
    height:60px;

    border-radius:50%;

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

    overflow:hidden;

    transition:.3s ease;
}

/* HOVER */

.avico-floating-contact__icon:hover{
    transform:translateY(-4px) scale(1.08);
}

/* SVG */

.avico-floating-contact__icon svg{
    width:26px;
    height:26px;
    fill:#fff;
}

/* ZALO */

.avico-floating-contact__item--zalo .avico-floating-contact__icon{
    background:#0084ff;
    box-shadow:0 8px 25px rgba(0,132,255,.35);
}

/* MESSENGER */

.avico-floating-contact__item--messenger .avico-floating-contact__icon{
    background:#1f8cff;
    box-shadow:0 8px 25px rgba(31,140,255,.35);
}

/* PHONE */

.avico-floating-contact__item--phone .avico-floating-contact__icon{
    background:#ff2222;
    box-shadow:0 8px 25px rgba(255,34,34,.40);
}

/* MAP */

.avico-floating-contact__item--map .avico-floating-contact__icon{
    background:#18c24d;
    box-shadow:0 8px 25px rgba(24,194,77,.35);
}

/* ZALO TEXT */

.avico-floating-contact__zalo-text{
    color:#fff;
    font-size:12px;
    font-weight:700;
}

/* ẨN TEXT */

.avico-floating-contact__content{
    display:none;
}

/* =========================================
   FLOATING EFFECT
========================================= */

@keyframes avicoFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

}

.avico-floating-contact__item--zalo .avico-floating-contact__icon{
    animation:avicoFloat 2.5s infinite;
}

.avico-floating-contact__item--messenger .avico-floating-contact__icon{
    animation:avicoFloat 2.5s infinite .3s;
}

.avico-floating-contact__item--phone .avico-floating-contact__icon{
    animation:avicoFloat 2.5s infinite .6s;
}

.avico-floating-contact__item--map .avico-floating-contact__icon{
    animation:avicoFloat 2.5s infinite .9s;
}

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

.avico-floating-contact__toggle{

    width:60px !important;
    height:60px !important;

    margin-top:16px;

    border:none !important;
    border-radius:50% !important;

    background:linear-gradient(
        135deg,
        #ff4d8d,
        #e91e63
    ) !important;

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

    cursor:pointer;

    position:relative;

    box-shadow:
        0 8px 25px rgba(233,30,99,.35);

    transition:.3s ease;
}

/* hover */

.avico-floating-contact__toggle:hover{
    transform:translateY(-4px) scale(1.08);
}

/* Ẩn icon cũ */

.avico-floating-contact__toggle-chat,
.avico-floating-contact__toggle-close{
    display:none !important;
}

/* Dấu X */

.avico-floating-contact__toggle::before{
    content:"✕";

    color:#fff;

    font-size:24px;
    font-weight:700;

    line-height:1;

    transition:.3s ease;
}

/* Thu gọn */

.avico-floating-contact.is-collapsed
.avico-floating-contact__toggle::before{
    content:"☰";
    font-size:24px;
}

/* Glow */

.avico-floating-contact__toggle::after{
    content:"";

    position:absolute;
    inset:0;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.25);

    animation:avicoPulse 2s infinite;
}

@keyframes avicoPulse{

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

    70%{
        transform:scale(1.35);
        opacity:0;
    }

    100%{
        opacity:0;
    }

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    .avico-floating-contact{
        right:12px;
        top:auto;
        bottom:110px;
        transform:none;
    }

    .avico-floating-contact__icon,
    .avico-floating-contact__toggle{
        width:54px;
        height:54px;
    }

}