/*
 * Cụm nút nổi #f3 (Messenger, Zalo, TikTok, Gọi điện) — toàn site.
 * Thay cho các rule cũ trong style.css (60px, cách mép 80px, PNG + vòng
 * nhấp nháy xanh): nhỏ hơn (40px), sát mép trái, cùng kích thước, bóng nhẹ.
 * Selector "html body #f3" để thắng các rule cũ mà không cần sửa style.css.
 * Mobile (<=768px) vẫn ẩn như quyết định trước đây (tránh che nội dung).
 */
html body #f3 {
  left: 14px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: auto;
}
/* trang JA có thanh liên hệ cố định cao ~63px ở đáy -> nâng cụm nút lên trên */
html body.jh-site #f3 { bottom: 82px; }

html body #f3 > a,
html body #f3 .phone > a {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  overflow: visible;
  box-shadow: 0 2px 6px rgba(14, 24, 38, .18), 0 0 0 2px #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
html body #f3 > a:hover,
html body #f3 .phone > a:hover {
  transform: translateX(3px) scale(1.06);
  box-shadow: 0 6px 14px rgba(14, 24, 38, .25), 0 0 0 2px #fff;
}
html body #f3 > a:focus-visible,
html body #f3 .phone > a:focus-visible { outline: 2px solid #4285f4; outline-offset: 3px; }
html body #f3 > a img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
  border-radius: 50%;
  filter: none;
}

/* Nút gọi: vẽ bằng CSS (ảnh PNG đỏ cũ bị ẩn), màu theo site */
html body #f3 .phone { position: relative; }
html body #f3 .phone > a { background: #16263b; }
html body.jh-cand-site #f3 .phone > a { background: #c24e17; }
html body #f3 .phone i.call {
  position: absolute; inset: 0; width: auto; height: auto;
  background: none !important; animation: none !important;
}
html body #f3 .phone i.call img { opacity: 0; }
html body #f3 .phone i.call::before { display: none !important; }
html body #f3 .phone span { display: none !important; }
html body #f3 .phone > a::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* vòng sóng nhẹ quanh nút gọi (thay vòng xanh 90px nhấp nháy cũ) */
html body #f3 .phone > a::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid currentColor; color: #16263b; opacity: 0;
  animation: f3-ring 2.4s ease-out infinite;
}
html body.jh-cand-site #f3 .phone > a::before { color: #c24e17; }
@keyframes f3-ring {
  0% { transform: scale(.85); opacity: .55; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body #f3 .phone > a::before { animation: none; }
}