.alo-ph-img-circle,
.alo-ph-circle,
.alo-ph-circle-fill {
    position: absolute;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.alo-ph-img-circle {
    width: 30px; height: 30px; top: 35px; left: 35px;
    background: rgba(30,30,30,.1) url(../images/alo.png) no-repeat center center;
    background-size: contain;
    border: 2px solid transparent;
    opacity: .7;
    animation: alo-circle-img-anim 1s infinite ease-in-out;
}
.alo-phone {
    position: fixed; visibility: hidden; background: transparent;
    width: 100px; height: 100px; cursor: pointer; z-index: 999;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    transform: translateZ(0); -webkit-transform: translateZ(0);
    transition: visibility .5s; -webkit-transition: visibility .5s;
}
.alo-phone.alo-show { visibility: visible; }
.alo-phone:hover { opacity: 1; }
.alo-ph-circle {
    width: 100px; height: 100px; top: 0; left: 0;
    background: transparent; border: 2px solid #bfebfc;
    opacity: .1;
    animation: alo-circle-anim 1.2s infinite ease-in-out;
    transition: all .5s;
}
.alo-phone:hover .alo-ph-circle,
.hotline a:hover .alo-ph-circle { border-color: #00aff2; opacity: .5; }
.alo-phone.alo-green:hover .alo-ph-circle,
.hotline a:hover .alo-ph-circle { border-color: #baf5a7; opacity:.5; }
.alo-phone.alo-green .alo-ph-circle { border-color: #bfebfc; opacity:.5; }
.alo-ph-circle-fill {
    width: 60px; height: 60px; top: 20px; left: 20px;
    background: #000; border: 2px solid transparent; opacity: .1;
    animation: alo-circle-fill-anim 2.3s infinite ease-in-out;
    transition: all .5s;
}
.alo-phone:hover .alo-ph-circle-fill,
.hotline a:hover .alo-ph-circle-fill { background:#00aff2; opacity:.75!important; }
.alo-phone.alo-green:hover .alo-ph-circle-fill,
.hotline a:hover .alo-ph-circle-fill { background:#baf5a7; opacity:.75!important;}
.alo-phone.alo-green .alo-ph-circle-fill { background: #ffbc0a; opacity:.75!important; }
.alo-phone:hover .alo-ph-img-circle,
.hotline a:hover .alo-ph-img-circle { background: #00aff2; }
.alo-phone.alo-green.alo-hover .alo-ph-img-circle,
.alo-phone.alo-green:hover .alo-ph-img-circle,
.hotline a:hover .alo-ph-img-circle { background: #04afef; }
/* .alo-phone.alo-green .alo-ph-img-circle { background: #ffbc0a; } */
@keyframes alo-circle-anim {
    0% {transform: rotate(0) scale(.5) skew(1deg); opacity:.1;}
    30%{transform: rotate(0) scale(.7) skew(1deg); opacity:.5;}
    100%{transform: rotate(0) scale(1) skew(1deg); opacity:.1;}
}
@keyframes alo-circle-fill-anim {
    0%,100%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2;}
    50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2;}
}
@keyframes alo-circle-img-anim {
    0%,100%,50%{transform:rotate(0) scale(1) skew(1deg);}
    10%,30%{transform:rotate(-25deg) scale(1) skew(1deg);}
    20%,40%{transform:rotate(25deg) scale(1) skew(1deg);}
}
#alo-fixed { visibility: visible; opacity: 0; position: fixed; right: -100px; top: 100px; }
#alo-fixed.show { right: 10px; visibility: visible; opacity: 1; }
.zalo-chat {
    position: fixed; right: 30px; bottom: 110px; border-radius: 50%; z-index: 50;
    background: #0098da; overflow: hidden;
}
@media only screen and (max-width: 768.5px){
    .zalo-chat { right: 27px; bottom: 200px; }
}
.zalo-chat img,.zalo-chat span{display:inline-block;vertical-align:middle;}
.zalo-chat span {
    color: #fff; font-weight: bold; padding: 0 10px 0 20px; font-size: 18px;
}
.rung { animation: code-pro-rung-lac 1s ease infinite; }
@keyframes code-pro-rung-lac {
    0%,50%,100% {-webkit-transform:rotate(0) scale(1) skew(1deg);}
    10%,30%   {-webkit-transform:rotate(-25deg) scale(1) skew(1deg);}
    20%,40%   {-webkit-transform:rotate(25deg) scale(1) skew(1deg);}
}