.khoibds-fcr {
  position: fixed;
  left: 0;
  bottom: var(--khoibds-fcr-bottom, 5px);
  z-index: 999999;
}

.khoibds-fcr__ring {
  position: relative;
  width: 110px;
  height: 110px;
  visibility: visible;
  background-color: transparent;
  cursor: pointer;
  z-index: 11;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: visibility 0.5s;
  display: block;
}

.khoibds-fcr__circle {
  width: 70px;
  height: 70px;
  top: 15px;
  left: 15px;
  position: absolute;
  background-color: transparent;
  border-radius: 100%;
  border: 2px solid #2196f3;
  -webkit-animation: khoibds-fcr-circle-anim 1.2s infinite ease-in-out;
  animation: khoibds-fcr-circle-anim 1.2s infinite ease-in-out;
  transition: all 0.5s;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 0.5;
}

.khoibds-fcr__circle-fill {
  width: 50px;
  height: 50px;
  top: 25px;
  left: 25px;
  position: absolute;
  background-color: #2196f3;
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-animation: khoibds-fcr-circle-fill-anim 2.3s infinite ease-in-out;
  animation: khoibds-fcr-circle-fill-anim 2.3s infinite ease-in-out;
  transition: all 0.5s;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.khoibds-fcr__img-circle {
  background-color: #2196f3;
  width: 25px;
  height: 25px;
  top: 38px;
  left: 38px;
  position: absolute;
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-animation: khoibds-fcr-circle-img-anim 1s infinite ease-in-out;
  animation: khoibds-fcr-circle-img-anim 1s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.khoibds-fcr__btn-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.khoibds-fcr__btn-img img,
.khoibds-fcr__btn-img svg {
  width: 20px;
  height: 20px;
  display: block;
}

@-webkit-keyframes khoibds-fcr-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;
  }
}

@keyframes khoibds-fcr-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: 0.1;
  }
  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.1;
  }
}

@-webkit-keyframes khoibds-fcr-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;
  }
}

@keyframes khoibds-fcr-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.6;
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.6;
  }
  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.6;
  }
}

@-webkit-keyframes khoibds-fcr-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); }
}

@keyframes khoibds-fcr-circle-img-anim {
  0% { transform: rotate(0) scale(1) skew(1deg); }
  10% { 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); }
  100% { transform: rotate(0) scale(1) skew(1deg); }
}

@media (max-width: 767px) {
  .khoibds-fcr {
    left: 6px;
    bottom: auto !important;
  }

  .khoibds-fcr--phone {
    top: calc(50% - 96px);
  }

  .khoibds-fcr--zalo {
    top: calc(50% - 43px);
  }

  .khoibds-fcr--messenger {
    top: calc(50% + 10px);
  }

  .khoibds-fcr__ring {
    width: 86px;
    height: 86px;
  }

  .khoibds-fcr__circle {
    width: 54px;
    height: 54px;
    top: 16px;
    left: 16px;
  }

  .khoibds-fcr__circle-fill {
    width: 38px;
    height: 38px;
    top: 24px;
    left: 24px;
  }

  .khoibds-fcr__img-circle {
    width: 24px;
    height: 24px;
    top: 31px;
    left: 31px;
  }

  .khoibds-fcr__btn-img img,
  .khoibds-fcr__btn-img svg {
    width: 16px;
    height: 16px;
  }
}