.gpc-floating-buttons {
    text-align: center;
    width: 45px;
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 999
}

.gpc-floating-buttons div a {
    display: block;
    line-height: 45px;
    height: 45px;
    text-indent: -9999px;
    margin: 14px 0;
    background: var(--btn-color) center no-repeat;
    background-size: 70%;
    border-radius: 50%;
    box-shadow: 0 3px 10px #888
}

.gpc-floating-buttons div:first-child a {
    margin-top: 0
}

.gpc-floating-buttons div:last-child a {
    margin-bottom: 0
}

.gpc-floating-buttons div.is-hotline a {
    background-image: url(../images/call.png)
}

.gpc-floating-buttons div.is-sms a {
    background-image: url(../images/mail.png);
    background-size: 60%
}

.gpc-floating-buttons div.is-messenger a {
    background-image: url(../images/messenger.png)
}

.gpc-floating-buttons div.is-zalo a {
    background-image: url(../images/zalo.png);
}

@media (min-width: 992px) {
    .gpc-floating-buttons .has-effect-shake {
        animation: gpc-effect-shake 1s infinite ease-in-out;
    }

    .gpc-floating-buttons .has-effect-radar a {
        position: relative;
    }

    .gpc-floating-buttons .has-effect-radar a::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background-color: var(--btn-color);
        opacity: 0.4;
        animation: gpc-radar 1.8s infinite;
        z-index: -1;
    }
}

/* @media only screen and (max-width:588px) {
    .gpc-floating-buttons {
        display: flex;
        bottom: 0;
        width: 100%;
        left: 0;
        right: auto;
        justify-content: space-evenly;
    }

    .gpc-floating-buttons div {
        width: 100%;
    }

    .gpc-floating-buttons div a {
        background-size: contain;
        border-radius: 0;
        margin: 0;
    }
}
 */
@keyframes gpc-effect-shake {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@keyframes gpc-radar {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}