/* =======================================================
   STICKY CONTACT (bottom-right) — Zalo · Hotline
======================================================== */
.sobie-sticky-wrap{
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: 'Mulish', sans-serif;
}

/* ---------- Danh sách bóng ---------- */
.sobie-sticky-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(.85);
  transform-origin: bottom center;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
}
.sobie-sticky-wrap.is-open .sobie-sticky-list{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Hiệu ứng nổi từng bóng (stagger) khi mở */
.sobie-sticky-list li{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
  transition-delay: 0s;
}
.sobie-sticky-wrap.is-open .sobie-sticky-list li{
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.06s * var(--i, 0) + 0.05s);
}

/* ---------- Bong bóng (44px - đồng bộ với toggle) ---------- */
.sobie-bubble{
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sobie-bubble:hover{
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.sobie-bubble:focus-visible{
  outline: 3px solid rgba(10,94,196,.4);
  outline-offset: 2px;
}

.bubble-zalo  { background: #0084ff; }
.bubble-phone { background: #fbbf24; animation: sobie-phone-ring 2.2s infinite; }

/* ---------- Tooltip (chỉ desktop) ---------- */
@media (hover: hover){
  .sobie-bubble[data-tooltip]:hover::after{
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20,20,20,.92);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    animation: sobie-tooltip-in .15s ease forwards;
  }
  .sobie-bubble[data-tooltip]:hover::before{
    content: '';
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: rgba(20,20,20,.92);
    pointer-events: none;
  }
}

/* ---------- Nút toggle chính (44px - khớp với #back-to-top) ---------- */
.sobie-sticky-toggle{
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #0a5ec4;
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
  transition: background .2s ease, transform .35s ease;
}
.sobie-sticky-toggle:hover{ background: #084aa0; }
.sobie-sticky-toggle:focus-visible{
  outline: 3px solid rgba(10,94,196,.4);
  outline-offset: 3px;
}

/* Pulse ring */
.sobie-toggle-pulse{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #0a5ec4;
  opacity: .35;
  animation: sobie-pulse 2.2s ease-out infinite;
  z-index: -1;
}

/* Icon swap */
.sobie-ico{ display: block; }
.sobie-ico-close{ display: none; }
.sobie-sticky-wrap.is-open .sobie-ico-open  { display: none; }
.sobie-sticky-wrap.is-open .sobie-ico-close { display: block; }
.sobie-sticky-wrap.is-open .sobie-sticky-toggle{
  transform: rotate(180deg);
  background: #1a1a1a;
}
.sobie-sticky-wrap.is-open .sobie-toggle-pulse{ animation: none; opacity: 0; }

/* ---------- Animations ---------- */
@keyframes sobie-phone-ring{
  0%, 100%   { transform: rotate(0); }
  10%, 30%   { transform: rotate(8deg); }
  20%, 40%   { transform: rotate(-8deg); }
  50%        { transform: rotate(0); }
}
@keyframes sobie-pulse{
  0%   { transform: scale(1);   opacity: .35; }
  100% { transform: scale(1.7); opacity: 0;   }
}
@keyframes sobie-tooltip-in{
  from { opacity: 0; transform: translate(-4px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}

@media (max-width: 767px){
  /* Mobile: ẩn cụm sticky, đã có "Liên hệ" trong bottom nav */
  .sobie-sticky-wrap{
    display: none !important;
  }
}

/* ---------- Giảm chuyển động cho người nhạy cảm ---------- */
@media (prefers-reduced-motion: reduce){
  .sobie-sticky-toggle,
  .sobie-toggle-pulse,
  .bubble-phone,
  .sobie-sticky-list,
  .sobie-sticky-list li{
    animation: none !important;
    transition: none !important;
  }
}