.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__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;
	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__btn:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
	animation-play-state: paused;
}

.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__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
}

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

@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;
	}
}

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