/* ── Cụm nút liên hệ nhanh, góc dưới phải ────────────────────────────────────
   Tách thành file riêng vì đây là một component độc lập, không thuộc hệ motion.
   Nút "lên đầu trang" chỉ hiện sau khi người dùng đã cuộn — hiện sẵn từ đầu là
   vô nghĩa và chỉ che mất nội dung. */
/* Cả cụm chỉ hiện sau khi người dùng cuộn qua hết banner — trên banner thì
   để trống cho ảnh và lời chào, không có gì che góc. */
.social-dock{
  position:fixed;z-index:60;
  opacity:0;visibility:hidden;transform:translateX(18px);
  transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1),visibility 0s linear .45s;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:11px;
}
.social-dock.is-ready{opacity:1;visibility:visible;transform:none;transition-delay:0s}

.dock-btn{
  position:relative;display:grid;place-items:center;
  width:50px;height:50px;padding:0;border:0;border-radius:50%;
  color:#fff;cursor:pointer;text-decoration:none;
  box-shadow:0 6px 18px rgba(9,38,82,.24);
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease;
}
.dock-btn svg{width:24px;height:24px;display:block;position:relative;z-index:2}
.dock-btn:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 12px 26px rgba(9,38,82,.32)}
.dock-btn:focus-visible{outline:3px solid var(--gold,#b18a38);outline-offset:3px}

.dock-zalo{background:#0068ff}
.dock-zalo svg{width:31px;height:31px}
.dock-facebook{background:#1877f2}
.dock-phone{background:var(--magenta,#b72c6a)}
.dock-top{background:var(--navy,#092652)}

/* Vòng sóng lan của nút Zalo: đúng 2 giây một nhịp. */
.dock-zalo::before,.dock-zalo::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#0068ff;opacity:.55;z-index:0;
  animation:dockPulse 2s cubic-bezier(.24,.6,.35,1) infinite;
}
.dock-zalo::after{animation-delay:1s}
@keyframes dockPulse{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.85);opacity:0}
  100%{transform:scale(1.85);opacity:0}
}

/* Nhãn hiện khi rê chuột (chỉ trên thiết bị có chuột thật). */
.dock-tip{
  position:absolute;right:60px;top:50%;transform:translateY(-50%) translateX(6px);
  padding:6px 11px;border-radius:7px;white-space:nowrap;
  background:var(--navy,#092652);color:#fff;
  font:600 12px/1 Inter,sans-serif;letter-spacing:.01em;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s cubic-bezier(.16,1,.3,1);
}
.dock-tip::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left-color:var(--navy,#092652)}
@media (hover:hover) and (pointer:fine){
  .dock-btn:hover .dock-tip,.dock-btn:focus-visible .dock-tip{opacity:1;transform:translateY(-50%)}
}

@media (max-width:760px){
  .social-dock{gap:9px;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
  .dock-btn{width:46px;height:46px}
  .dock-zalo svg{width:28px;height:28px}
  .dock-btn svg{width:22px;height:22px}
  .dock-tip{display:none}
}

/* Trong khung xem trước của CMS thì thu nhỏ lại cho đỡ che nội dung. */
.cms-preview .social-dock{transform:scale(.9);transform-origin:bottom right}