/* Call / Zalo / WhatsApp bubbles fixed to the bottom-right corner */
.floating-contacts { position: fixed; z-index: 80; right: 22px; bottom: 22px; display: flex; align-items: center; flex-direction: column; gap: 12px; }
.floating-contact { position: relative; display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border: 2px solid var(--ivory); border-radius: 50%; box-shadow: 0 6px 18px rgba(74,20,10,.22); transition: transform .2s ease, box-shadow .2s ease; }
.floating-contact:hover, .floating-contact:focus-visible { box-shadow: 0 10px 24px rgba(74,20,10,.28); transform: scale(1.08); }
.floating-contact:focus-visible { outline: 3px solid rgba(236,206,132,.75); outline-offset: 2px; }
.floating-contact::before { position: absolute; top: 50%; right: calc(100% + 13px); padding: 6px 10px; border-radius: 5px; background: var(--wine); color: var(--on-wine); content: attr(data-label); font-size: .62rem; font-weight: var(--fw-body); opacity: 0; pointer-events: none; transform: translate(5px,-50%); transition: opacity .18s ease, transform .18s ease; white-space: nowrap; }
.floating-contact:hover::before, .floating-contact:focus-visible::before { opacity: 1; transform: translate(0,-50%); }
.floating-contact svg { display: block; width: 26px; height: 26px; }
.floating-call { border-color: var(--accent); background: var(--wine); color: var(--on-wine); }
.floating-call::after { position: absolute; inset: -2px; z-index: -1; border-radius: 50%; background: var(--wine); content: ""; animation: contact-pulse 1.8s ease-out infinite; }
.floating-call svg { animation: contact-ring 1.8s ease-in-out infinite; }
.floating-zalo { background: #0068ff; color: white; }
.floating-zalo .zalo-mark { width: 38px; height: 38px; }
.floating-whatsapp { background: #25d366; color: white; }
.floating-whatsapp svg { width: 30px; height: 30px; }
@keyframes contact-pulse { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes contact-ring { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }

@media (max-width: 560px) {
  .floating-contacts { right: 14px; bottom: 14px; gap: 10px; }
  .floating-contact { width: 48px; height: 48px; flex-basis: 48px; }
  .floating-contact svg { width: 23px; height: 23px; }
  .floating-zalo .zalo-mark { width: 34px; height: 34px; }
  .floating-whatsapp svg { width: 27px; height: 27px; }
}

@media (hover: none) {
  .floating-contact::before { display: none; }
}