/**
 * TAMI Nút liên hệ nổi — style cụm nút cố định góc phải dưới màn hình.
 *
 * Port từ .tami-float trong prototype tĩnh (app/public/html/index.html).
 * Thứ tự nút: Zalo (nền trắng) → Hotline (nền đỏ) → Lên đầu trang (nền đen).
 */

.tami-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.tami-float__btn {
	position: relative;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
	transition: transform .25s ease, box-shadow .25s ease;
}

.tami-float__btn:hover,
.tami-float__btn:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

.tami-float__btn img {
	display: block;
	width: 30px;
	height: 30px;
}

.tami-float__btn--zalo {
	background: #fff;
}

.tami-float__btn--phone {
	background: #f5222d;
}

.tami-float__btn--top {
	background: #2b2b2b;
}

/* Vòng sóng lan toả quanh 2 nút liên hệ */
.tami-float__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	animation: tamiFloatPulse 1.8s ease-out infinite;
}

.tami-float__btn--zalo .tami-float__ring {
	box-shadow: 0 0 0 0 rgba(0, 104, 255, .45);
}

.tami-float__btn--phone .tami-float__ring {
	box-shadow: 0 0 0 0 rgba(245, 34, 45, .55);
}

@keyframes tamiFloatPulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	70%,
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

/* Nút lên đầu trang: ẩn cho tới khi cuộn đủ xa */
.tami-float__btn--top {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
}

.tami-float__btn--top.is-show {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Trong editor Elementor luôn hiện nút top để còn nhìn thấy mà chỉnh */
.elementor-editor-active .tami-float__btn--top {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (max-width: 767px) {
	.tami-float {
		right: 14px;
		bottom: 14px;
		gap: 10px;
	}

	.tami-float__btn {
		width: 46px;
		height: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tami-float__ring {
		animation: none;
	}
}