/* =========================================================
   BỘ 3 NÚT LIÊN HỆ: GỌI – ZALO – MESSENGER
   Chỉ chứa giao diện + hiệu ứng, không cần JavaScript.
   ========================================================= */

.km-floating-contact {
  position: fixed;
  right: 20px;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.km-contact-fab {
  width: 58px;
  height: 58px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  animation: kmFabFloat 3.2s ease-in-out infinite;
}

.km-contact-fab:nth-child(2) { animation-delay: .45s; }
.km-contact-fab:nth-child(3) { animation-delay: .9s; }

.km-contact-fab::before,
.km-contact-fab::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Vòng sóng lan ra */
.km-contact-fab::before {
  inset: 4px;
  border: 2px solid currentColor;
  opacity: 0;
  animation: kmFabRipple 2.4s ease-out infinite;
}

/* Vòng nền mờ bên ngoài */
.km-contact-fab::after {
  inset: -7px;
  background: currentColor;
  opacity: .075;
}

.km-fab-core {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 25px rgba(18, 29, 49, .20);
  transition: transform .2s ease, box-shadow .2s ease;
}

.km-contact-fab:hover .km-fab-core,
.km-contact-fab:focus-visible .km-fab-core {
  transform: scale(1.08);
  box-shadow: 0 14px 32px rgba(18, 29, 49, .26);
}

.km-fab-icon {
  display: grid;
  place-items: center;
}

.km-fab-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Nút gọi */
.km-fab-phone { color: #22bd67; }
.km-fab-phone .km-fab-core {
  background: linear-gradient(145deg, #2fce78, #13a958);
  border: 2px solid #0c9348;
}
.km-fab-phone .km-fab-icon {
  width: 25px;
  height: 25px;
  animation: kmContactShake 5.2s ease-in-out infinite;
}

/* Nút Zalo */
.km-fab-zalo { color: #0878ff; }
.km-fab-zalo .km-fab-core {
  background: #fff;
  border: 2px solid #0878ff;
}
.km-fab-zalo .km-fab-icon {
  width: 34px;
  height: 34px;
  animation: kmContactShake 5.2s ease-in-out .65s infinite;
}

/* Nút Messenger */
.km-fab-messenger { color: #7055ff; }
.km-fab-messenger .km-fab-core {
  background: #fff;
  border: 2px solid #6c63ff;
}
.km-fab-messenger .km-fab-icon {
  width: 32px;
  height: 32px;
  animation: kmContactShake 5.2s ease-in-out 1.3s infinite;
}

/* Chữ hiện khi rê chuột trên máy tính */
.km-fab-tooltip {
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  min-width: max-content;
  padding: 7px 11px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font: 700 11px/1.2 Arial, sans-serif;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transition: .2s ease;
  pointer-events: none;
}

.km-fab-tooltip::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #111827;
  transform: translateY(-50%) rotate(45deg);
}

.km-contact-fab:hover .km-fab-tooltip,
.km-contact-fab:focus-visible .km-fab-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

@keyframes kmFabRipple {
  0% { transform: scale(.78); opacity: .52; }
  75%, 100% { transform: scale(1.42); opacity: 0; }
}

@keyframes kmFabFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes kmContactShake {
  0%, 74%, 100% { transform: rotate(0deg) scale(1); }
  78% { transform: rotate(-10deg) scale(1.07); }
  81% { transform: rotate(10deg) scale(1.07); }
  84% { transform: rotate(-7deg) scale(1.05); }
  87% { transform: rotate(7deg) scale(1.05); }
  90% { transform: rotate(0deg) scale(1); }
}

@media (max-width: 600px) {
  .km-floating-contact {
    right: 12px;
    bottom: max(16px, env(safe-area-inset-bottom));
    gap: 10px;
  }

  .km-contact-fab {
    width: 52px;
    height: 52px;
  }

  .km-fab-core {
    width: 46px;
    height: 46px;
  }

  .km-fab-tooltip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .km-contact-fab,
  .km-contact-fab::before,
  .km-fab-icon {
    animation: none !important;
  }
}