/* wrap */

 .ring-wrap {
     position: fixed;
     bottom: 0;
     right: 0;
     z-index: 999999;
 }


 /* Mess */

 .mess-ring {
     position: relative;
     visibility: visible;
     background-color: transparent;
     width: 110px;
     height: 65px;
     cursor: pointer;
     z-index: 11;
     -webkit-backface-visibility: hidden;
     -webkit-transform: translateZ(0);
     transition: visibility .5s;
     left: -10px;
     bottom: 15px;
     display: block;
 }

 .mess-ring-circle {
     width: 90px;
     height: 90px;
     top: 17px;
     left: 17px;
     position: absolute;
     background-color: transparent;
     border-radius: 100%;
     border: 2px solid #0084fed8;
     -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;
 }

 .mess-ring-circle-fill {
     width: 70px;
     height: 70px;
     top: 27px;
     left: 27px;
     position: absolute;
     background-color: #0084fed8;
     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%;
 }

 .mess-ring-img-circle {
     background-color: #0084fe;
     width: 50px;
     height: 50px;
     top: 37px;
     left: 37px;
     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;
 }

 .mess-ring-img-circle .pps-btn-img {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }

 .mess-ring-img-circle .pps-btn-img img {
     width: 45px;
     height: 45px;
 }


 /* zalo	 */

 .zalo-ring {
     position: relative;
     visibility: visible;
     background-color: transparent;
     width: 110px;
     height: 65px;
     cursor: pointer;
     z-index: 11;
     -webkit-backface-visibility: hidden;
     -webkit-transform: translateZ(0);
     transition: visibility .5s;
     left: -10px;
     bottom: 10px;
     display: block;
 }

 .zalo-ring-circle {
     width: 90px;
     height: 90px;
     top: 17px;
     left: 17px;
     position: absolute;
     background-color: transparent;
     border-radius: 100%;
     border: 2px solid #00abd3d8;
     -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;
 }

 .zalo-ring-circle-fill {
     width: 70px;
     height: 70px;
     top: 27px;
     left: 27px;
     position: absolute;
     background-color: #00abd3d8;
     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%;
 }

 .zalo-ring-img-circle {
     background-color: #00abd3;
     width: 50px;
     height: 50px;
     top: 37px;
     left: 37px;
     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;
 }

 .zalo-ring-img-circle .pps-btn-img {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }

 .zalo-ring-img-circle .pps-btn-img img {
     width: 45px;
     height: 45px;
 }

 /* Whatsapp*/

 .whatsapp-ring {
     position: relative;
     visibility: visible;
     background-color: transparent;
     width: 110px;
     height: 65px;
     cursor: pointer;
     z-index: 11;
     -webkit-backface-visibility: hidden;
     -webkit-transform: translateZ(0);
     transition: visibility .5s;
     left: -10px;
     bottom: 10px;
     display: block;
 }

 .whatsapp-ring-circle {
     width: 90px;
     height: 90px;
     top: 17px;
     left: 17px;
     position: absolute;
     background-color: transparent;
     border-radius: 100%;
     border: 2px solid #44e25abf;
     -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;
 }

 .whatsapp-ring-circle-fill {
     width: 70px;
     height: 70px;
     top: 27px;
     left: 27px;
     position: absolute;
     background-color: #44e25abf;
     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%;
 }

 .whatsapp-ring-img-circle {
     background-color: #44e25a;
     width: 50px;
     height: 50px;
     top: 37px;
     left: 37px;
     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;
 }

 .whatsapp-ring-img-circle .pps-btn-img {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }

 .whatsapp-ring-img-circle .pps-btn-img img {
     width: 45px;
     height: 45px;
 }


 /* Hotline	 */

 .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;
     left: -8px;
     bottom: 0;
     display: block;
 }

 .hotline-phone-ring-circle {
     width: 90px;
     height: 90px;
     top: 17px;
     left: 17px;
     position: absolute;
     background-color: transparent;
     border-radius: 100%;
     border: 2px solid #ff1313d8;
     -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: 70px;
     height: 70px;
     top: 27px;
     left: 27px;
     position: absolute;
     background-color: #ff1313d8;
     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: #e00000;
     width: 50px;
     height: 50px;
     top: 37px;
     left: 37px;
     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;
 }

 .hotline-phone-ring-img-circle .pps-btn-img {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }

 .hotline-phone-ring-img-circle .pps-btn-img img {
     width: 30px;
     height: 30px;
 }

 .hotline-bar {
     position: absolute;
     background: #ff1313d8;
     height: 37px;
     width: 220px;
     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;
     box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 10%);
     border-radius: 50px !important;
     /* width: 175px !important; */
     right: 30px;
     bottom: 30px;
 }

 .hotline-bar>a {
     color: #fff;
     text-decoration: none;
     font-size: 20px;
     font-weight: bold;
     text-indent: 10px;
     display: block;
     letter-spacing: 1px;
     line-height: 38px;
     font-family: Arial;
 }

 .hotline-bar>a:hover,
 .hotline-bar>a:active {
     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);
     }
 }

 @media (max-width: 768px) {
     .ring-wrap {
         z-index: 99;
     }

     /*  hotline  */
     .hotline-bar {
         /* display: none !important; */
         bottom: 37px;
         width: 190px;
         right: 50px;
     }

     .hotline-bar>a {
         text-indent: 5px;
     }

     .hotline-phone-ring {
         left: -8px;
     }

     /* 	mess */
     .mess-ring {
         bottom: 0px;
     }

     .mess-ring-circle {
         width: 85px;
         height: 85px;
         top: 11px;
         left: 11px;
     }

     .mess-ring-circle-fill {
         width: 55px;
         height: 55px;
         top: 26px;
         left: 26px;
     }

     .mess-ring-img-circle {
         width: 40px;
         height: 40px;
         top: 34px;
         left: 34px;
     }

     .mess-ring-img-circle .pps-btn-img img {
         width: 30px;
         height: 30px;
     }

     /* 	zalo */
     .zalo-ring {
         bottom: 0px;
     }

     .zalo-ring-circle {
         width: 85px;
         height: 85px;
         top: 11px;
         left: 11px;
     }

     .zalo-ring-circle-fill {
         width: 55px;
         height: 55px;
         top: 26px;
         left: 26px;
     }

     .zalo-ring-img-circle {
         width: 40px;
         height: 40px;
         top: 34px;
         left: 34px;
     }

     .zalo-ring-img-circle .pps-btn-img img {
         width: 30px;
         height: 30px;
     }

     /* 	whatsapp */
     .whatsapp-ring {
         bottom: 0px;
     }

     .whatsapp-ring-circle {
         width: 85px;
         height: 85px;
         top: 11px;
         left: 11px;
     }

     .whatsapp-ring-circle-fill {
         width: 55px;
         height: 55px;
         top: 26px;
         left: 26px;
     }

     .whatsapp-ring-img-circle {
         width: 40px;
         height: 40px;
         top: 34px;
         left: 34px;
     }

     .whatsapp-ring-img-circle .pps-btn-img img {
         width: 30px;
         height: 30px;
     }

     /* 	hotline */
     .hotline-phone-ring-circle {
         width: 85px;
         height: 85px;
         top: 11px;
         left: 11px;
     }

     .hotline-phone-ring-circle-fill {
         width: 55px;
         height: 55px;
         top: 26px;
         left: 26px;
     }

     .hotline-phone-ring-img-circle {
         width: 40px;
         height: 40px;
         top: 34px;
         left: 34px;
     }

     .hotline-phone-ring-img-circle .pps-btn-img img {
         width: 30px;
         height: 30px;
     }
 }