/* =============================================================
   FLOATING BUTTONS — phone CTA, Zalo, back-to-top
   Uses only transform + opacity animations (no layout shifts)
   ============================================================= */

/* Phone button — bottom right */
@keyframes pulse-phone {
  0%, 100% { box-shadow: 0 4px 18px rgba(45,158,68,.45), 0 0 0 0 rgba(45,158,68,.4); }
  50%       { box-shadow: 0 4px 18px rgba(45,158,68,.45), 0 0 0 12px rgba(45,158,68,0); }
}

.float-btn-phone {
  position: fixed; right: 16px; bottom: 24px; z-index: 190;
  display: flex; align-items: center; gap: 9px;
  height: 52px; border-radius: 30px; padding: 0 20px 0 15px;
  background: var(--green); color: #fff;
  font-weight: 700; font-size: .875rem;
  box-shadow: 0 4px 18px rgba(45,158,68,.45);
  animation: pulse-phone 2.4s infinite;
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.float-btn-phone:hover { transform: scale(1.05); box-shadow: 0 6px 24px rgba(45,158,68,.55); color: #fff; }
.float-btn-phone svg   { width: 20px; height: 20px; flex-shrink: 0; }
.float-label { letter-spacing: .01em; }

/* Stacked icon buttons (Zalo + back-to-top) */
.floating-btns {
  position: fixed; right: 16px; bottom: 152px; z-index: 190;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.float-btn {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  transition: transform .2s, box-shadow .2s;
  border: none; cursor: pointer;
}
.float-btn:hover    { transform: scale(1.08); box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.float-btn svg      { width: 20px; height: 20px; flex-shrink: 0; }
.float-btn-zalo     { background: #0068FF; color: #fff; }
.float-btn-top      { background: #fff; color: var(--text-2); box-shadow: 0 2px 10px rgba(0,0,0,.13); }

/* Mobile: collapse phone button to circle */
@media (max-width: 640px) {
  .float-btn-phone {
    width: 52px; height: 52px;
    border-radius: 50%; padding: 0; gap: 0; justify-content: center;
  }
  .float-label { display: none; }
}