/* Floating contact buttons shared by every public layout (partials/contact-fab). */
.contact-fab {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* App-icon style (rounded, no ring) so both buttons read as familiar chat/call icons; the radius
   matches the official Zalo icon and keeps the focus outline on the contour. */
.contact-fab a {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: background-color .15s ease, filter .15s ease;
}
.contact-fab a:focus-visible { outline: 3px solid #1c69d4; outline-offset: 3px; }
.contact-fab .contact-fab-zalo { background: none; }
.contact-fab-zalo img { display: block; width: 100%; height: 100%; }
.contact-fab-zalo:hover { filter: brightness(.92); }
/* Site accent blue (--blue in the v2 theme; literal because this sheet also loads on the older layout). */
.contact-fab-call { background: #1c69d4; }
.contact-fab-call:hover { background: #1556ab; }

/* Nút nổi che góc phải dưới màn hình: chừa cột phải cho chữ trong footer thay vì đệm thêm khoảng trống
   dưới footer. Một nút (cao ~68px) chỉ chạm hàng cuối; hai nút (trang chủ trên điện thoại) chạm cả hàng liên hệ.
   Zalo only floats on the homepage; the call button only shows on touch devices. */
body:has(> .contact-fab .contact-fab-zalo) > footer .footer-meta { padding-right: 76px; }

/* Mouse-driven desktops cannot place calls; the hotline is shown in the header there. */
@media (hover: hover) and (pointer: fine) {
  .contact-fab .contact-fab-call { display: none; }
}
@media (hover: none), (pointer: coarse) {
  body:has(> .contact-fab) > footer .footer-meta { padding-right: 76px; }
  body:has(> .contact-fab .contact-fab-zalo) > footer :is(.footer-top, .footer-meta) { padding-right: 76px; }
}
@media (prefers-reduced-motion: reduce) { .contact-fab a { transition: none; } }
@media print { .contact-fab { display: none; } }