/* Nút tròn nổi nằm phía trên Zalo OA */
#chat-toggle-btn {
  position: fixed;
  bottom: 10px; /* đẩy lên phía trên OA */
  right: 50px;
  width: 60px;
  height: 60px;
  background-color:none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  animation: bounce 1.5s infinite ease-in-out, pulse 3s infinite;
  transition: transform 0.3s ease;
}
.chat-label {
  color: #184785;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;             /* 👈 Giảm khoảng dư thừa chiều cao */
  display: flex;
  align-items: center;        /* 👈 Canh giữa chữ theo chiều cao */
  height: 34px;               /* 👈 Khớp chiều cao icon */
  white-space: nowrap;
  gap: 4px;
  text-align: center; 
}

#chat-toggle-btn:hover {
  transform: scale(1.1);
}

#chat-toggle-btn img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}
/* Khung chat AI */
#chat-widget-container {

  position: fixed;
  bottom: 140px;               /* Vị trí phía trên đáy màn hình */
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 500px;               /* Chiều cao cố định (hoặc auto nếu thích) */
  max-height: 90vh;           /* Chiếm tối đa 90% chiều cao màn hình */
  overflow: hidden;           /* Để không tràn khung */
  z-index: 9998;
  display: none;
  background-color: white;    /* Tùy chọn: màu nền nếu cần */
  border-radius: 12px;        /* Tùy chọn: bo góc đẹp */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); /* đổ bóng nhẹ */
  animation: fadeInUp 0.3s ease;
}

elevenlabs-convai {
  width: 100%;
  height: 100%;
  display: block;
}
#chat-close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #333;
  cursor: pointer;
  z-index: 10000;
  transition: transform 0.2s;
}

#chat-close-btn:hover {
  transform: scale(1.2);
}

/* Animation rung nhẹ */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(3px);
  }
}

/* 💡 Pulse ánh sáng nhẹ */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0px rgba(0, 132, 255, 0.4); }
  50% { box-shadow: 0 0 0px rgba(0, 132, 255, 0.8); }
}

/* Responsive */
@media (max-width: 480px) {
  #chat-widget-container {
	width: 100%;
    bottom: 0;
    left: 0;
    transform: none;
    height: 90vh;              /* Đảm bảo không bị cắt khi trên điện thoại */
    max-height: 90vh;
    border-radius: 0;
  }
  }
 @media (max-width: 480px) {
  .chat-label {
    display: none;
  }
}
}