/* CONTACT BAR */

.floating-contact{
    position:fixed;
    right:15px;
    bottom:120px;
    z-index:9999;

    background:#fff;
    border-radius:10px;
    padding:8px 0;

    box-shadow:0 4px 20px rgba(0,0,0,.12);
}

.contact-btn{
    display:flex;
    flex-direction:column;
    align-items:center;

    width:74px;
    padding:10px 6px;

    text-decoration:none;
    color:#444;

    transition:.3s;
}

.contact-btn:hover{
    background:#f5f5f5;
}

.contact-btn img{
    width:42px;
    height:42px;

    border-radius:50%;
    object-fit:cover;
}

.contact-btn span{
    margin-top:5px;
    font-size:12px;
    text-align:center;
    line-height:1.2;
}

@media (max-width: 768px) {

    .floating-contact{
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;

        padding: 0 !important;

        border-radius: 0 !important;

        background: #fff !important;

        box-shadow: 0 -4px 20px rgba(0,0,0,.12) !important;

        z-index: 99999 !important;
    }

    .contact-btn{
        width: 100% !important;

        padding: 10px 5px !important;

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

        border-right: 1px solid #eee;
    }

    .contact-btn:last-child{
        border-right: none;
    }

    .contact-btn img{
        width: 30px !important;
        height: 30px !important;
    }

    .contact-btn span{
        font-size: 11px !important;
        margin-top: 4px !important;
    }

    .back-to-top{
        bottom: 75px !important;
        right: 15px !important;
    }
    @media (max-width: 768px) {

    .contact-btn:nth-child(2) img {
        animation: phone-ring 2s infinite;
        transform-origin: center;
    }

    @keyframes phone-ring {

        0%, 90%, 100% {
            transform: rotate(0deg);
        }

        92% {
            transform: rotate(-10deg);
        }

        94% {
            transform: rotate(10deg);
        }

        96% {
            transform: rotate(-10deg);
        }

        98% {
            transform: rotate(10deg);
        }
    }

}
@media (max-width: 768px) {

    .contact-btn:nth-child(2) img {
        border-radius: 50%;
        animation: phone-attention 3s ease-in-out infinite;
    }

    @keyframes phone-attention {

        0%,
        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(0, 122, 255, 0);
        }

        50% {
            transform: scale(1.08);
            box-shadow: 0 0 0 8px rgba(0, 122, 255, 0.15);
        }
    }

}
}

/* BACK TO TOP */
.back-to-top{
    position:fixed;
    right:25px;
    bottom:35px;
    border: none;
    outline: none;

    width:46px;
    height:46px;

    border-radius:50%;


    background:#002aff;
    color:#fff;

    text-decoration:none;

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

    font-size:22px;

    box-shadow:0 5px 15px rgba(35,64,212,.35);

    z-index:9999;

    transition:.3s;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;
}

/* Khi hiện */

.back-to-top.show{
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover{
    transform:translateY(-3px);
}