/* ========== Vị trí chung ========== */
#wpfcontact{
  position:fixed;
  bottom:var(--wpf-offset-y,24px);
  z-index:99999;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
#wpfcontact.wpf-right{ right:20px; }
#wpfcontact.wpf-left { left:20px; }

/* Ẩn nút tròn bật/tắt trên desktop (panel luôn mở) */
@media (min-width:641px){
  #wpfcontact .wpf-btn{ display:none !important; }
}

/* ========== Panel: desktop dọc, mobile đổi thành thanh ngang ở dưới ========== */
#wpfcontact .wpf-panel{
  position:absolute;
  bottom:0;
  background:transparent;
  border:0;
  padding:0;
  opacity:1; pointer-events:auto; transform:none;
}
@media (min-width:641px){
  #wpfcontact .wpf-panel{
    display:flex; flex-direction:column; gap:14px;
  }
}

/* ========== ITEM CHUNG ========== */
#wpfcontact .wpf-item{
  position:relative;
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, box-shadow;
}

/* Vòng tròn icon cho mọi item */
#wpfcontact .wpf-ico{
  display:inline-flex; justify-content:center; align-items:center;
  width:48px; height:48px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.85));
  color: var(--wpf-brand, #1482a6); /* màu icon */
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  position:relative;
  isolation:isolate;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Aura nhấp nháy xung quanh icon */
#wpfcontact .wpf-ico::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:inherit;
  background: currentColor;
  opacity:.18;
  filter: blur(8px);
  z-index:-1;
  animation:wpf-pulse 2.2s ease-in-out infinite;
}

/* Hover nhẹ cho icon */
#wpfcontact .wpf-item:hover .wpf-ico{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 26px rgba(0,0,0,.16);
}

/* ========== PHÂN LOẠI: nút Điện thoại dạng viên thuốc như ảnh ========== */
/* nhận diện theo href tel: */
#wpfcontact .wpf-item[href^="tel:"]{
  gap:8px;
}
#wpfcontact .wpf-item[href^="tel:"] .wpf-txt{
  display:inline-block;
  background: var(--wpf-brand, #0a84a4); /* nền xanh ngọc giống ảnh */
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transform-origin:left center;
  animation: wpf-breathe 3.2s ease-in-out infinite;
}

/* các nút KHÁC (Zalo/Messenger/…) chỉ hiện icon tròn, ẩn chữ trên desktop */
@media (min-width:641px){
  #wpfcontact .wpf-item:not([href^="tel:"]) .wpf-txt{ display:none; }
}

/* Hover cho viên thuốc điện thoại */
#wpfcontact .wpf-item[href^="tel:"]:hover .wpf-txt{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.16);
}

/* ========== MOBILE: thanh ngang dưới cùng như trước ========== */
@media (max-width:640px){
  #wpfcontact{ left:0 !important; right:0 !important; bottom:0 !important; width:100%; }
  #wpfcontact .wpf-btn{ display:none !important; }

  #wpfcontact .wpf-panel{
    position:fixed; left:0; right:0; bottom:0;
    display:flex; gap:8px; justify-content:space-around;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));
    background:#fff; border-top:1px solid rgba(0,0,0,.06);
    border-radius:16px 16px 0 0;
    box-shadow: 0 -10px 28px rgba(0,0,0,.16);
    animation: wpf-slide-up .35s ease-out both;
  }
  #wpfcontact .wpf-item{ flex:1 1 0; justify-content:center; }
  #wpfcontact .wpf-ico{ width:36px; height:36px; }
  #wpfcontact .wpf-txt{
    display:block !important;
    font-size:12px; font-weight:700; color:#111;
  }
  /* Viên thuốc điện thoại rút gọn cho mobile: chỉ chữ nhỏ dưới icon */
  #wpfcontact .wpf-item[href^="tel:"] .wpf-txt{
    background:transparent; color:#111;
    padding:0; border-radius:0; box-shadow:none; animation:none;
  }
}

/* ========== Hiệu ứng ========== */
@keyframes wpf-pulse{
  0%,100%{ opacity:.14; transform: scale(1); }
  50%   { opacity:.30; transform: scale(1.06); }
}
@keyframes wpf-breathe{
  0%,100%{ transform: translateY(0); }
  50%   { transform: translateY(-1.5px); }
}
@keyframes wpf-slide-up{
  from{ opacity:0; transform: translateY(12px); }
  to  { opacity:1; transform: translateY(0); }
}