/* 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: đúng icon bong bóng của Zalo OA như therealielts.vn (Logo.svg của
   widget Zalo — khung trắng viền xanh, đuôi chat, chữ "Zalo"), không bóng. */
.tri-fc__zalo {
	display: block;
	width: var(--tri-fc-size);
	height: var(--tri-fc-size);
	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: var(--tri-fs-5);
	font-weight: var(--tri-fw-bold);
	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));
	}

	/* Icon Tawk KHÔNG dời theo thanh dưới (yOffset cố định 74px) → khi thanh
	   tự ẩn, cụm Zalo / Gọi phải đứng yên phía trên Tawk; tụt xuống như cũ là
	   đè lên icon chat ~48px. */
	body:has(.tri-mobile-bar.is-hidden) .tri-fc--tawk {
		bottom: calc(var(--tri-bottombar-h, 62px) + 90px + env(safe-area-inset-bottom, 0px));
	}

	/* Thẻ CTA nổi đã chừa cột phải (03-hero.css) → cụm không cần nhấc lên. */

	.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,
	.tri-fc__toggle-on,
	.tri-fc__toggle::before,
	.tri-fc__toggle::after {
		animation: none;
		transition: none;
	}
}

/* Zalo OA (như therealielts.vn): bong bóng chat 60px của Zalo nằm TRONG SUỐT
   đè lên icon Zalo app → giữ giao diện, bấm là mở khung chat. SDK đặt sẵn
   inline position:fixed bottom/right 52px → ghi đè để nằm đúng ô nút. Khung
   mở (.is-open do script trong inc/float-contact.php) mới hiện; vị trí
   khung mở do script đặt: ngang bên trái icon, không vượt mép trên màn. */
.tri-fc__zalo-oa {
	position: relative;
	width: var(--tri-fc-size);
	height: var(--tri-fc-size);
}

.tri-fc__zalo-oa .zalo-chat-widget {
	position: absolute !important;
	top: auto !important;
	left: auto !important;
	right: calc((var(--tri-fc-size) - 60px) / 2) !important;
	bottom: calc((var(--tri-fc-size) - 60px) / 2) !important;
	z-index: 1 !important;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.tri-fc__zalo-oa.is-open .zalo-chat-widget {
	opacity: 1;
}

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

/* Bề rộng / cao tối đa của khung mở do script tính theo chỗ trống. */

/* ── Điện thoại / tablet: gom cụm vào MỘT nút — 06/10/2026 ───────────────
   Thay 3 nút xếp chồng + bong bóng Tawk + hình "We Are Here!" (đè lên nhau,
   lấn nội dung) bằng một nút cam trên thanh dưới màn. Bấm → sổ Zalo / Gọi /
   Chat tư vấn kèm nhãn chữ bên trái; bấm lại, chạm ra ngoài hoặc Esc = thu
   (script trong inc/float-contact.php). Máy tính: .tri-fc__items là
   display:contents nên cụm như cũ; nút gom + nút chat ẩn. */
.tri-fc__items {
	display: contents;
}

.tri-fc__toggle,
.tri-fc__chat {
	display: none;
}

@media (max-width: 1024px) {
	.tri-fc,
	.tri-fc--tawk {
		right: 12px;
		bottom: calc(var(--tri-bottombar-h, 62px) + 12px + env(safe-area-inset-bottom, 0px));
		/* Icon sổ ra bám mép phải, cùng trục với nút Tư vấn. */
		align-items: flex-end;
		gap: 14px;
	}

	/* Không còn bong bóng Tawk cố định → cụm đi theo thanh dưới màn. */
	body:has(.tri-mobile-bar.is-hidden) .tri-fc,
	body:has(.tri-mobile-bar.is-hidden) .tri-fc--tawk {
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	/* Sổ từ trên xuống: Hotline, Zalo, Tawk, rồi nút Tư vấn. */
	.tri-fc__phone {
		order: 1;
	}

	.tri-fc__zalo,
	.tri-fc__zalo-oa {
		order: 2;
	}

	.tri-fc__chat {
		order: 3;
	}

	.tri-fc__items {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		visibility: hidden;
		opacity: 0;
		transform: translateY(12px);
		pointer-events: none;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.tri-fc.is-open .tri-fc__items {
		visibility: visible;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.tri-fc__chat {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--tri-fc-size);
		height: var(--tri-fc-size);
		padding: 0;
		border: 0;
		border-radius: 50%;
		/* Màu nút widget Tawk (min-widget.css: --tawk-header-background-color). */
		background: #03a84e;
		box-shadow: 0 8px 22px rgb(3 168 78 / 0.35);
		color: var(--wp--preset--color--white);
		cursor: pointer;
	}

	.tri-fc__toggle {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--orange);
		box-shadow: 0 8px 22px transparent;
		box-shadow: 0 8px 22px color-mix(in srgb, var(--wp--preset--color--orange) 40%, transparent);
		color: var(--wp--preset--color--white);
		cursor: pointer;
		transition: background-color 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}

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

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

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

	.tri-fc__toggle-off {
		display: none;
	}

	.tri-fc.is-open .tri-fc__toggle {
		background: var(--wp--preset--color--navy);
		box-shadow: 0 8px 22px transparent;
		box-shadow: 0 8px 22px color-mix(in srgb, var(--wp--preset--color--navy) 35%, transparent);
	}

	.tri-fc.is-open .tri-fc__toggle-on {
		display: none;
		animation: none;
	}

	.tri-fc.is-open .tri-fc__toggle::before,
	.tri-fc.is-open .tri-fc__toggle::after {
		animation: none;
		opacity: 0;
	}

	.tri-fc.is-open .tri-fc__toggle-off {
		display: block;
	}

	.tri-fc__toggle:focus-visible,
	.tri-fc__chat:focus-visible {
		outline: 3px solid var(--wp--preset--color--white);
		outline-offset: 2px;
	}

	/* Nhãn chữ bên trái mỗi nút khi cụm mở — biết nút nào là gì. */
	.tri-fc [data-tri-label] {
		position: relative;
	}

	.tri-fc.is-open [data-tri-label]::before {
		content: attr(data-tri-label);
		position: absolute;
		top: 50%;
		right: calc(100% + 10px);
		padding: 6px 12px;
		border-radius: 999px;
		background: var(--wp--preset--color--white);
		box-shadow: 0 4px 14px transparent;
		box-shadow: 0 4px 14px color-mix(in srgb, var(--wp--preset--color--navy) 18%, transparent);
		color: var(--wp--preset--color--navy);
		font-family: var(--wp--preset--font-family--beau-sans, inherit);
		font-weight: var(--tri-fw-bold);
		line-height: var(--tri-lh-title);
		white-space: nowrap;
		transform: translateY(-50%);
		pointer-events: none;
	}
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
	.tri-fc__items,
	.tri-fc.is-open .tri-fc__items,
	.tri-fc__toggle {
		transition: none;
	}
}

/* ── Điện thoại / tablet — 08/10/2026 ─────────────────────────────────────
   Ẩn nút cam nổi (che chữ, mũi tên mở thẻ; trùng việc với nút "Tư vấn" thanh dưới).
   Nút "Tư vấn" giữa thanh dưới (data-tri-fc-open) mở cụm: Zalo + Chat tư vấn (Tawk)
   xếp dọc ngay trên nút đó, giữa màn. Gọi điện đã có "Hotline" ở thanh dưới → ẩn ở cụm. */
@media (max-width: 1024px) {
	body:has([data-tri-fc-open]) .tri-fc__toggle {
		display: none;
	}

	body:has([data-tri-fc-open]) .tri-fc,
	body:has([data-tri-fc-open]) .tri-fc--tawk,
	body:has([data-tri-fc-open]):has(.tri-mobile-bar.is-hidden) .tri-fc,
	body:has([data-tri-fc-open]):has(.tri-mobile-bar.is-hidden) .tri-fc--tawk {
		right: 50%;
		bottom: calc(var(--tri-bottombar-h, 62px) + 34px + env(safe-area-inset-bottom, 0px));
		transform: translateX(50%);
	}

	body:has([data-tri-fc-open]) .tri-fc__phone {
		display: none;
	}

	/* Thanh dưới màn tắt hẳn (không còn trong trang): nút Tư vấn đứng góc phải dưới.
	   Cụm đang đóng không được nuốt chạm — chỉ nút Tư vấn nhận. */
	body:not(:has(.tri-mobile-bar)) .tri-fc,
	body:not(:has(.tri-mobile-bar)) .tri-fc--tawk {
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		transform: none;
	}

	body:not(:has(.tri-mobile-bar)) .tri-fc:not(.is-open) {
		pointer-events: none;
	}

	body:not(:has(.tri-mobile-bar)) .tri-fc:not(.is-open) .tri-fc__toggle {
		pointer-events: auto;
	}
}

/* Lỗi 12/10/2026 (user: mở 3–4 thẻ Lộ trình thì thẻ cuối không bấm được, "có 1 thẻ div"): cụm
   đang ĐÓNG thì các nút ẩn bằng visibility nhưng vẫn chiếm chỗ → khung .tri-fc 48×110px vô hình
   giữa màn (ngay trên nút "Tư vấn" thanh dưới) nuốt mọi cú chạm vào nội dung cuộn qua đó. Khung
   không nhận chạm khi đóng; mở ra thì .tri-fc__items tự bật lại pointer-events (luật trên). */
@media (max-width: 1024px) {
	body:has([data-tri-fc-open]) .tri-fc:not(.is-open) {
		pointer-events: none;
	}
}

/* ── Điện thoại / tablet không có thanh dưới màn — 16/10/2026 (user) ──────────────────────
   3 icon (Hotline, Zalo, Tawk) LUÔN sổ sẵn, không nhãn chữ; nút tai nghe ĐỎ, nhích lên ~60px
   so với góc dưới. Bấm tai nghe = thu gọn / mở lại (script inc/float-contact.php, luon()),
   nút giữ hình tai nghe cả khi đang mở. Có thanh dưới màn thì giữ kiểu cũ ở trên. */
@media (max-width: 1024px) {
	body:not(:has(.tri-mobile-bar)) .tri-fc,
	body:not(:has(.tri-mobile-bar)) .tri-fc--tawk {
		bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}

	body:not(:has(.tri-mobile-bar)) .tri-fc [data-tri-label]::before {
		content: none;
	}

	body:not(:has(.tri-mobile-bar)) .tri-fc__toggle,
	body:not(:has(.tri-mobile-bar)) .tri-fc.is-open .tri-fc__toggle {
		background: var(--wp--preset--color--red);
		box-shadow: 0 8px 22px color-mix(in srgb, var(--wp--preset--color--red) 40%, transparent);
	}

	body:not(:has(.tri-mobile-bar)) .tri-fc__toggle::before,
	body:not(:has(.tri-mobile-bar)) .tri-fc__toggle::after {
		border-color: var(--wp--preset--color--red);
	}

	body:not(:has(.tri-mobile-bar)) .tri-fc.is-open .tri-fc__toggle-on {
		display: block;
	}

	body:not(:has(.tri-mobile-bar)) .tri-fc.is-open .tri-fc__toggle-off {
		display: none;
	}
}