/* CSS cho nút hỗ trợ */
#animation {
  position: fixed;
  bottom: 40px;
  right: 55px;
  z-index: 999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
  animation: animate 2s infinite;
  overflow: visible; /* Cho phép phần tử con vượt ra ngoài */
}

/* Hover vào thì hiển thị dòng chữ: "Bạn cần hỗ trợ?" */
#animation:hover span {
  opacity: 1; /* Hiển thị phần tử */
  transform: translateY(-130%); /* Di chuyển phần tử lên trên */
}

/* Đặt văn bản ẩn mặc định */
#animation span {
  position: absolute;
  top: 20; /* Đặt phần tử ở trên nút */
  transform: translateX(-30%);
  background-color: rgba(0, 0, 0, 0.8);
  padding: 5px 10px;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0; /* Ẩn phần tử ban đầu */
  transition: opacity 0.3s, transform 0.3s; /* Áp dụng hiệu ứng chuyển đổi */
}

/* Hoạt ảnh */
@keyframes animate {
  0%, 100% {
      background: rgb(130, 255, 238);
      box-shadow: 0 0 10px #f00;
  }
  50% {
      background: #ff0;
      box-shadow: 0 0 10px #ff0;
  }
}
@media only screen and (max-width: 600px) {
  #animation{
    width: 45px;
    height: 45px;
    bottom: 10px;
    right: 10px;
    
  }
/* Đặt văn bản ẩn mặc định */
#animation span {
  position: absolute;
  top: 20; /* Đặt phần tử ở trên nút */
  transform: translateX(-30%);
  right: 0px;
}
}