.phone-ring,
.phone-zalo{
  position:fixed;
  z-index:1000;
  text-decoration:none;
  font-weight:500;
  transition:.25s;
}

.phone-ring{
  left:20px;
  bottom:20px;
  width:235px;
  height:46px;
  padding:3px;
  display:block;
  line-height:40px;
  border-radius:30px;
  background:#ed1c24;
  color:#fff!important;
  font-size:17px;
  box-shadow:0 0 3px rgba(0,0,0,.5);
}

.phone-ring .phone-circle{
  float:left;
  width:40px;
  height:40px;
  margin-right:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
}

.phone-ring .phone-circle i{
  font-size:25px;
  color:#ed1c24;
}

.phone-ring .phone-text{
  float:left;
}

.phone-ring.pricequote{
  left:243px;
  width:auto;
  padding:3px 20px 3px 3px;
}

.phone-zalo{
  left:20px;
  bottom:80px;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#0068ff;
  color:#fff!important;
}

/* .phone-zalo.animation{
  animation:ring-anim 1s ease-in-out infinite;
} */

.phone-zalo.animation::after{
  animation:sonar-anim 1s ease-in-out infinite;
}

.phone-zalo::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#0068ff;
  z-index:-1;
}
.phone-ring .phone-circle{
    animation:pulse-phone 1.5s infinite;
}

.phone-ring .phone-circle i{
    font-size:25px;
    color:#ed1c24;
    animation:ring-anim 1s ease-in-out infinite;
}
@keyframes sonar-anim{
  0%{
    opacity:1;
    transform:scale(1);
  }
  100%{
    opacity:0;
    transform:scale(3);
  }
}

@keyframes ring-anim{
  0%,50%,100%{
    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);
  }
}
@keyframes pulse-phone{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.08);
    }
    100%{
        transform:scale(1);
    }
}

@media(max-width:992px){

.phone-text {
    display: none;
}
.phone-ring {
    width: auto;
}
.phone-ring .phone-circle {
    margin: 0;
}
}

.phone-zalo{
    position:fixed;
}

.zalo-notify{
    position:absolute;
    top:-5px;
    right:-5px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#ff2d2d;
    color:#fff;
    font-size:10px;
    font-weight:500;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #fff;
}