.gpc-floating-buttons {
    text-align: center;
    z-index: 999
}

.gpc-floating-buttons__group {
	z-index: 999;
}

.gpc-floating-buttons__group.is-left {
    width: 45px;
    position: fixed;
    bottom: 80px;
    left: 20px;
}

.gpc-floating-buttons__group.is-right {
    width: 45px;
    position: fixed;
    bottom: 80px;
    right: 20px;
}

.gpc-floating-buttons .gpc-floating-buttons__item a {
    display: block;
    line-height: 45px;
    text-indent: -9999px;
    margin: 0;
    background: #40A578 center no-repeat;
    background-size: 70%;
    border-radius: 50%;
    box-shadow: 0 3px 10px #888;
    width: 45px;
    height: 45px;
    /* animation: gpc-effect-shake 1.5s infinite ease-in-out; */
}

.gpc-floating-buttons .gpc-floating-buttons__item + .gpc-floating-buttons__item a {
    margin-top: 14px
}

.gpc-floating-buttons .gpc-floating-buttons__item.is-type-phone a {
    background-image: url(../images/call.png)
}

.gpc-floating-buttons .gpc-floating-buttons__item.is-type-email a {
    background-image: url(../images/mail.png);
    background-color: #ff6600;
    background-size: 60%
}

.gpc-floating-buttons .gpc-floating-buttons__item.is-type-messenger a {
    background-color: #0084ff;
    background-image: url(../images/messenger.png)
}

.gpc-floating-buttons .gpc-floating-buttons__item.is-type-facebook a {
    background-color: #0084ff;
    background-image: url(../images/facebook.png)
}

.gpc-floating-buttons .gpc-floating-buttons__item.is-type-zalo a {
    background-image: url(../images/zalo.png);
    background-color: #0084FF;
}

.gpc-floating-buttons .gpc-floating-buttons__item.is-type-youtube a {
    background-image: url(../images/youtube.png);
    background-color: #FF0000;
}

.gpc-floating-buttons .gpc-floating-buttons__item.is-type-instagram a {
    background-image: url(../images/instagram.png);
    background-color: #9b6954;
}

.gpc-floating-buttons .gpc-floating-buttons__item.is-type-tiktok a {
    background-image: url(../images/tiktok.png);
    background-color: #212121;
}

@media (min-width: 992px) {
    .gpc-floating-buttons__group.has-effect-shake-desktop .gpc-floating-buttons__item {
        animation: gpc-effect-shake 1.5s infinite ease-in-out;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .gpc-floating-buttons__group.has-effect-shake-tablet .gpc-floating-buttons__item {
        animation: gpc-effect-shake 1.5s infinite ease-in-out;
    }
}
@media (max-width: 767px) {
    .gpc-floating-buttons__group.has-effect-shake-mobile .gpc-floating-buttons__item {
        animation: gpc-effect-shake 1.5s infinite ease-in-out;
    }
}

@media only screen and (max-width:588px) {
    .gpc-floating-buttons.mobile-fixed {
        --columns: 5;
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .gpc-floating-buttons.mobile-fixed .is-left,
    .gpc-floating-buttons.mobile-fixed.reverse-order-on-mobile .is-right {
        --cols: 3;
        grid-column: 1 / calc(var(--cols) + 1);
    }

    .gpc-floating-buttons.mobile-fixed .is-right,
    .gpc-floating-buttons.mobile-fixed.reverse-order-on-mobile .is-left {
        --cols: 2;
        grid-column: calc(var(--columns) - var(--cols) + 1) / -1;
    }

    .gpc-floating-buttons.mobile-fixed.reverse-order-on-mobile .is-left {
        order: 2;
    }

    .gpc-floating-buttons.mobile-fixed .gpc-floating-buttons__group {
        display: flex;
        flex-direction: row;
        align-items: space-evenly;
    }

    .gpc-floating-buttons.mobile-fixed .gpc-floating-buttons__group .gpc-floating-buttons__item {
        width: 100%;
    }

    .gpc-floating-buttons.mobile-fixed .gpc-floating-buttons__group .gpc-floating-buttons__item a {
        width: 100%;
    }

    .gpc-floating-buttons.mobile-fixed .gpc-floating-buttons__item + .gpc-floating-buttons__item a {
        margin-top: 0
    }

    .gpc-floating-buttons.mobile-fixed > * {
        width: auto;
        position: unset;
        flex-grow: 1;
    }

    .gpc-floating-buttons.mobile-fixed > * a {
        background-size: contain;
        border-radius: 0;
        margin: 0;
    }
}

@keyframes gpc-effect-shake {
    0% { transform: rotate(0) scale(1) skew(1deg) }
    10% { transform: rotate(-25deg) scale(1) skew(1deg) }
    15% { transform: rotate(25deg) scale(1) skew(1deg) }
    20% { transform: rotate(-25deg) scale(1) skew(1deg) }
    30% { transform: rotate(25deg) scale(1) skew(1deg) }
    40% { transform: rotate(-25deg) scale(1) skew(1deg) }
    50% { transform: rotate(0) scale(1) skew(1deg) }
}