/* HOTLINE */

.hotline-phone-ring-wrap {

    position: fixed;

    top: 50%;

    left: 0;

    z-index: 999999;

    width: fit-content;

    height: fit-content;
}



.hotline-phone-ring {

    position: relative;

    visibility: visible;

    background-color: transparent;

    width: 110px;

    height: 110px;

    cursor: pointer;

    z-index: 11;

    -webkit-backface-visibility: hidden;

    -webkit-transform: translateZ(0);

    transition: visibility .5s;

    display: block;

}



.hotline-phone-ring-circle {

    width: 110px;

    height: 110px;

    top: 0;

    left: 0;

    position: absolute;

    background-color: transparent;

    border-radius: 100%;

    border: 2px solid rgb(251 4 0);

    -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;

    animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;

    transition: all .5s;

    -webkit-transform-origin: 50% 50%;

    -ms-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

    opacity: 0.5;

}



.hotline-phone-ring-circle-fill {

    width: 80px;

    height: 80px;

    top: 16px;

    left: 16px;

    position: absolute;

    background-color: rgb(251 4 0 / 0.7);

    border-radius: 100%;

    border: 2px solid transparent;

    -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;

    animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;

    transition: all .5s;

    -webkit-transform-origin: 50% 50%;

    -ms-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

}



.hotline-phone-ring-img-circle {

    background-color: rgb(251 4 0);

    width: 50px;

    height: 50px;

    top: 31px;

    left: 31px;

    position: absolute;

    background-size: 20px;

    border-radius: 100%;

    border: 2px solid transparent;

    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;

    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;

    -webkit-transform-origin: 50% 50%;

    -ms-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

}



    .hotline-phone-ring-img-circle .pps-btn-img {

        display: -webkit-box;

        display: -webkit-flex;

        display: -ms-flexbox;

        display: flex;

        position: relative;

        z-index: 10;

    }



        .hotline-phone-ring-img-circle .pps-btn-img img {

            width: 33px;

            height: 33px;

            position: relative;

            z-index: 10;

        }



.hotline-bar {

    position: absolute;

    background: rgb(251 4 0);

    height: 45px;

    width: 165px;

    line-height: 40px;

    border-radius: 3px;

    padding: 0 10px;

    background-size: 100%;

    cursor: pointer;

    transition: all 0.8s;

    -webkit-transition: all 0.8s;

    z-index: 9;

    border-radius: 50px !important;

    top: -15px;

    right: 120px;

}



    .hotline-bar > a {

        color: #fff;

        text-decoration: none;

        font-size: 16px;

        font-weight: bold;

        text-indent: 32px;

        letter-spacing: 1px;

        display: block;

        line-height: 45px;

        font-family: Arial;

    }



        .hotline-bar > a:hover,

        .hotline-bar > a:active {

            color: #fff;

            text-decoration: none;

        }



    .hotline-bar .text-hotline {

        color: #fff;

    }



@-webkit-keyframes phonering-alo-circle-anim {

    0% {

        -webkit-transform: rotate(0) scale(0.5) skew(1deg);

        -webkit-opacity: 0.1;

    }



    30% {

        -webkit-transform: rotate(0) scale(0.7) skew(1deg);

        -webkit-opacity: 0.5;

    }



    100% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        -webkit-opacity: 0.1;

    }

}



@-webkit-keyframes phonering-alo-circle-fill-anim {

    0% {

        -webkit-transform: rotate(0) scale(0.7) skew(1deg);

        opacity: 0.6;

    }



    50% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        opacity: 0.6;

    }



    100% {

        -webkit-transform: rotate(0) scale(0.7) skew(1deg);

        opacity: 0.6;

    }

}



@-webkit-keyframes phonering-alo-circle-img-anim {

    0% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

    }



    10% {

        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);

    }



    20% {

        -webkit-transform: rotate(25deg) scale(1) skew(1deg);

    }



    30% {

        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);

    }



    40% {

        -webkit-transform: rotate(25deg) scale(1) skew(1deg);

    }



    50% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

    }



    100% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

    }

}



.phone.hotline-phone-ring-wrap {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 99;
}


.zalo.hotline-phone-ring-wrap {
    position: fixed;
    top: 35%;
    left: 0;
    z-index: 99;
}


.zalo .hotline-bar {

    background: rgb(2 143 227);

}



.zalo .hotline-phone-ring-circle-fill {

    background-color: rgb(2 143 227 / 0.7);

}



.zalo .hotline-phone-ring-img-circle {

    background: rgb(2 143 227);

}



.zalo .hotline-phone-ring-circle {

    border: 2px solid rgb(2 143 227);

}



.hotline-bar {

    display: none;

}



@media (max-width: 768px) {

    .phone.hotline-phone-ring-wrap {

        display: block;

        bottom: 20%;

        height: fit-content;

        width: fit-content;

    }



    .hotline-bar {

        display: none;

    }



    .hotline-phone-ring-wrap {

        position: fixed;

        bottom: 20%;

        left: 0;

        z-index: 99;

    }



    .zalo.hotline-phone-ring-wrap {
        position: fixed;
        top: 40%;
        left: 0;
        width: fit-content;
        height: fit-content;
    }

}