.tnstack-fc {
  position: fixed;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 24px;
  pointer-events: none;
}

.tnstack-fc--left {
  left: 20px;
}

.tnstack-fc--right {
  right: 20px;
}

.tnstack-fc__item {
  position: relative;
  width: 56px;
  height: 56px;
  pointer-events: auto;
}

.tnstack-fc__wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  animation: tnstack-fc-ripple 2.4s ease-out infinite;
  animation-delay: var(--tnstack-fc-delay, 0s);
}

.tnstack-fc__wave--2 {
  animation-delay: calc(var(--tnstack-fc-delay, 0s) + 1.2s);
}

.tnstack-fc__item--zalo .tnstack-fc__wave {
  background: rgba(0, 104, 255, 0.45);
}

.tnstack-fc__item--phone .tnstack-fc__wave {
  background: rgba(34, 197, 94, 0.45);
}

.tnstack-fc__item--wa .tnstack-fc__wave {
  background: rgba(37, 211, 102, 0.45);
}

.tnstack-fc__item--fb .tnstack-fc__wave {
  background: rgba(0, 132, 255, 0.45);
}

.tnstack-fc__item--facebook .tnstack-fc__wave {
  background: rgba(24, 119, 242, 0.45);
}

.tnstack-fc__item--tiktok .tnstack-fc__wave {
  background: rgba(0, 0, 0, 0.4);
}

.tnstack-fc__btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.tnstack-fc__btn:hover,
.tnstack-fc__btn:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.tnstack-fc__btn:hover svg {
  color: #fff;
}

.tnstack-fc__btn--zalo {
  background: linear-gradient(135deg, #0068ff 0%, #0050cc 100%);
}

.tnstack-fc__btn--phone {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.tnstack-fc__btn--wa {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.tnstack-fc__btn--fb {
  background: linear-gradient(135deg, #0084ff 0%, #0064e0 100%);
}

.tnstack-fc__btn--facebook {
  background: linear-gradient(135deg, #1877f2 0%, #0c55b8 100%);
}

.tnstack-fc__btn--tiktok {
  background: linear-gradient(135deg, #242424 0%, #000 100%);
}

.tnstack-fc__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  animation: tnstack-fc-shake 2.8s ease-in-out infinite;
  animation-delay: var(--tnstack-fc-delay, 0s);
  will-change: transform;
}

.tnstack-fc__btn:hover .tnstack-fc__icon,
.tnstack-fc__btn:focus-visible .tnstack-fc__icon {
  animation-play-state: paused;
}

.tnstack-fc__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.tnstack-fc__number {
  position: absolute;
  top: 50%;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-50%);
}

.tnstack-fc--right .tnstack-fc__number {
  right: calc(100% + 10px);
}

.tnstack-fc--left .tnstack-fc__number {
  left: calc(100% + 10px);
}

@keyframes tnstack-fc-shake {
  0%,
  78%,
  100% {
    transform: rotate(0deg);
  }

  80% {
    transform: rotate(-7deg);
  }

  84% {
    transform: rotate(7deg);
  }

  88% {
    transform: rotate(-5deg);
  }

  92% {
    transform: rotate(5deg);
  }

  96% {
    transform: rotate(-2deg);
  }
}

@keyframes tnstack-fc-ripple {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }

  70% {
    transform: scale(1.65);
    opacity: 0.15;
  }

  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@media (max-width: 767px) {
  .tnstack-fc {
    bottom: 16px;
    gap: 12px;
  }

  .tnstack-fc--left {
    left: 14px;
  }

  .tnstack-fc--right {
    right: 14px;
  }

  .tnstack-fc__item,
  .tnstack-fc__btn {
    width: 50px;
    height: 50px;
  }

  .tnstack-fc__icon {
    width: 24px;
    height: 24px;
  }

  .tnstack-fc__number {
    padding: 7px 10px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tnstack-fc__icon,
  .tnstack-fc__wave {
    animation: none;
  }
}
