/* Nút nổi Zalo + Hotline (inc/float-contact.php).
   Xếp DỌC phía trên icon chat Tawk.to, cùng trục giữa với icon đó.
   Đo thực tế (máy tính 1440px): icon Tawk 64px, mép phải cách màn 30px, đáy
   cách 30px; hình "We Are Here!" của Tawk nhô cao thêm ~45px (đỉnh cách đáy
   màn 135px) → cụm đặt đáy 150px; trục giữa icon Tawk cách phải 62px nên
   nút 52px đặt right 26px (đo: cột nút lệch +10px so với khung iframe). */

.tri-fc {
	--tri-fc-size: 52px;
	--tri-fc-red: #e8262b;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 53;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	transition: translate 0.28s ease, bottom 0.28s ease;
}

.tri-fc--tawk {
	right: 26px;
	bottom: 150px;
}

/* Zalo: icon app (ô vuông bo góc xanh, bong bóng trắng). */
.tri-fc__zalo {
	display: block;
	width: var(--tri-fc-size);
	height: var(--tri-fc-size);
	border-radius: 14px;
	box-shadow: 0 8px 22px rgb(0 104 255 / 0.35);
	transition: transform 0.2s ease;
}

.tri-fc__zalo img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Hotline: gọn = nút tròn đỏ; rê chuột / focus thì sổ số sang TRÁI
   (row-reverse + neo phải nên icon đứng yên). */
.tri-fc__phone {
	position: relative;
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	height: var(--tri-fc-size);
	padding: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, #f0444a, #d71920);
	box-shadow: 0 8px 22px rgb(215 25 32 / 0.35);
	color: #fff;
	font-family: var(--wp--preset--font-family--beau-sans, inherit);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: box-shadow 0.2s ease;
}

.tri-fc__ring {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tri-fc-size);
	height: var(--tri-fc-size);
	flex-shrink: 0;
	border-radius: 50%;
	background: #c3141b;
}

.tri-fc__ring svg {
	animation: tri-fc-shake 2.4s ease-in-out infinite;
}

.tri-fc__ring::before,
.tri-fc__ring::after {
	content: "";
	position: absolute;
	inset: -6px;
	border: 2px solid var(--tri-fc-red);
	border-radius: 50%;
	opacity: 0;
	animation: tri-fc-wave 2.4s ease-out infinite;
	pointer-events: none;
}

.tri-fc__ring::after {
	animation-delay: 0.8s;
}

.tri-fc__num {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width 0.32s ease, opacity 0.2s ease, padding 0.32s ease;
}

.tri-fc__phone:hover .tri-fc__num,
.tri-fc__phone:focus-visible .tri-fc__num {
	max-width: 180px;
	padding: 0 6px 0 20px;
	opacity: 1;
}

.tri-fc__zalo:hover,
.tri-fc__zalo:focus-visible {
	transform: translateY(-2px) scale(1.05);
}

.tri-fc__phone:hover,
.tri-fc__phone:focus-visible {
	box-shadow: 0 10px 26px rgb(215 25 32 / 0.45);
}

.tri-fc__phone:focus-visible,
.tri-fc__zalo:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

@keyframes tri-fc-wave {
	0% {
		opacity: 0.7;
		transform: scale(0.85);
	}

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

@keyframes tri-fc-shake {
	0%, 60%, 100% {
		transform: rotate(0);
	}

	65%, 75%, 85% {
		transform: rotate(-14deg);
	}

	70%, 80%, 90% {
		transform: rotate(14deg);
	}
}

/* Menu / bảng chuyên mục điện thoại đang mở → giấu cụm như các nút nổi khác. */
body:has(.tri-drawer.is-open) .tri-fc,
body:has(.tri-sheet.is-open) .tri-fc {
	visibility: hidden;
	pointer-events: none;
}

/* Tablet / điện thoại: icon Tawk nhấc lên trên thanh dưới màn (yOffset 74),
   cụm nút xếp tiếp phía trên. Không có hover → Hotline luôn là nút tròn. */
@media (max-width: 1024px) {
	.tri-fc {
		--tri-fc-size: 48px;
		right: 12px;
		bottom: calc(var(--tri-bottombar-h, 62px) + 12px + env(safe-area-inset-bottom, 0px));
		gap: 10px;
	}

	.tri-fc--tawk {
		right: 20px;
		bottom: calc(var(--tri-bottombar-h, 62px) + 90px + env(safe-area-inset-bottom, 0px));
	}

	body:has(.tri-mobile-bar.is-hidden) .tri-fc {
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	body:has(.tri-mobile-bar.is-hidden) .tri-fc--tawk {
		bottom: calc(90px + env(safe-area-inset-bottom, 0px));
	}

	/* Thanh CTA nổi chiếm cả bề ngang phía trên thanh dưới màn → nhấc cụm lên. */
	body.tri-scta-on .tri-fc {
		translate: 0 -118px;
	}

	.tri-fc__phone .tri-fc__num {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tri-fc__ring svg,
	.tri-fc__ring::before,
	.tri-fc__ring::after,
	.tri-fc__num {
		animation: none;
		transition: none;
	}
}