.x3sales-contact {
  position: fixed;
  z-index: 999;
}

.x3sales-contact-item {
  margin-bottom: 10px;
}

.contact-link {
  position: relative;
  display: block;
  max-height: 50px;
  cursor: pointer;
}

.contact-link img {
  width: 50px;
  height: 50px;
  border-radius: 99px;
  transition: box-shadow 0.3s ease;
}

.contact-link img:hover {
  box-shadow: 0px 0px 10px #888888;
}

.contact-link .contact-content {
  color: #fff;
  font-weight: 500;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  background-color: #a3de22;
  padding: 5px 15px 5px 42px;
  border-radius: 99px;
  z-index: -1;
  width: 0;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.repair .contact-link .contact-content {
  background-color: #fec70c;
}

.zalo .contact-link .contact-content {
  background-color: #0180c7;
}

.messenger .contact-link .contact-content {
  background-color: #0083ff;
}

.contact-link .contact-content.active {
  width: max-content;
  opacity: 1;
}