/* =====================================================================
 * Nút liên hệ nổi (góc phải, trên nút lên đầu trang #top-link)
 *   Ban đầu chỉ có NÚT TỔNG (bong bóng chat, nhấp nháy) → bấm mở ra các nút Gọi / Zalo / WhatsApp…
 *   Bấm lại / bấm ra ngoài / phím Esc → đóng.
 * Màu nút = màu nhận diện từng ứng dụng; nút tổng & Gọi dùng biến :root.
 * ===================================================================== */
.hgfc {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 998;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	transition: bottom .3s;
}
/* Khi nút lên đầu trang hiện → đẩy cột nút lên trên nó */
body:has(#top-link.is-show) .hgfc { bottom: 86px; }

/* ---------- Danh sách nút liên hệ (ẩn cho tới khi mở) ---------- */
.hgfc-list { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hgfc-list .hgfc-btn {
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(.6);
	pointer-events: none;
	transition: opacity .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), visibility .2s, box-shadow .25s;
}
.hgfc.is-open .hgfc-list .hgfc-btn { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
/* Mở: nút gần nút tổng hiện trước, lần lượt lên trên */
.hgfc.is-open .hgfc-list .hgfc-btn:nth-last-child(1) { transition-delay: 0s; }
.hgfc.is-open .hgfc-list .hgfc-btn:nth-last-child(2) { transition-delay: .05s; }
.hgfc.is-open .hgfc-list .hgfc-btn:nth-last-child(3) { transition-delay: .1s; }
.hgfc.is-open .hgfc-list .hgfc-btn:nth-last-child(4) { transition-delay: .15s; }
.hgfc.is-open .hgfc-list .hgfc-btn:nth-last-child(5) { transition-delay: .2s; }

/* ---------- Nút chung ---------- */
.hgfc-btn,
.hgfc-toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 50%;
	background: var(--green-natural);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
	color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
}
.hgfc.is-open .hgfc-list .hgfc-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 22px rgba(0, 0, 0, .24); }
.hgfc-toggle:focus { outline: none !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .18) !important; } /* bỏ viền chấm khi bấm chuột */
.hgfc-btn:focus-visible, .hgfc-toggle:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 3px; }

.hgfc-ico { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.hgfc-ico svg { width: 26px; height: 26px; }
.hgfc-zalo { font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.hgfc-btn.has-img { background: #fff; overflow: hidden; }
.hgfc-img { width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 50%; }

/* Màu từng loại */
.hgfc-btn.is-phone     { background: var(--green-natural); }
.hgfc-btn.is-zalo      { background: #0068FF; }
.hgfc-btn.is-whatsapp  { background: #25D366; }
.hgfc-btn.is-messenger { background: linear-gradient(45deg, #0A7CFF, #A033FF 70%, #FF5C87); }
.hgfc-btn.is-email     { background: var(--hg-primary); }
.hgfc-btn.is-link      { background: var(--hg-button); }

/* ---------- Nút tổng ---------- */
.hgfc-toggle { isolation: isolate; background: var(--hg-button) !important; transition: transform .25s, background-color .25s; }
.hgfc-toggle:hover { transform: scale(1.06); }
.hgfc-toggle svg { position: absolute; width: 26px; height: 26px; transition: opacity .2s, transform .3s; }
.hgfc-i-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.hgfc.is-open .hgfc-toggle { background: var(--hg-primary) !important; }
.hgfc.is-open .hgfc-i-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.hgfc.is-open .hgfc-i-close { opacity: 1; transform: none; }

/* Sóng tỏa ra quanh nút tổng (chỉ khi đang đóng) */
.hgfc-toggle::before,
.hgfc-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--hg-button);
	animation: hgfcPulse 2.4s ease-out infinite;
}
.hgfc-toggle::after { animation-delay: 1.2s; }
.hgfc.is-open .hgfc-toggle::before,
.hgfc.is-open .hgfc-toggle::after { animation: none; opacity: 0; }
/* Bong bóng chat lắc nhẹ mời bấm */
.hgfc:not(.is-open) .hgfc-i-chat { animation: hgfcShake 3s ease-in-out infinite; }

@keyframes hgfcPulse {
	0%   { transform: scale(1);   opacity: .5; }
	100% { transform: scale(1.75); opacity: 0; }
}
@keyframes hgfcShake {
	0%, 50%, 100% { transform: rotate(0); }
	5%, 15%, 25%  { transform: rotate(-12deg); }
	10%, 20%, 30% { transform: rotate(12deg); }
}

/* ---------- Chữ gợi ý khi rê chuột (máy tính) ---------- */
.hgfc-tip {
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--hg-text);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translate(6px, -50%);
	transition: opacity .2s, transform .2s, visibility .2s;
	pointer-events: none;
}
.hgfc-tip::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border: 5px solid transparent; border-left-color: var(--hg-text); }
@media (hover: hover) {
	.hgfc-btn:hover .hgfc-tip,
	.hgfc:not(.is-open) .hgfc-toggle:hover .hgfc-tip { opacity: 1; visibility: visible; transform: translate(0, -50%); }
}

/* ---------- Điện thoại ---------- */
@media (max-width: 549px) {
	.hgfc { right: 14px; bottom: 14px; gap: 10px; }
	.hgfc-list { gap: 10px; }
	body:has(#top-link.is-show) .hgfc { bottom: 72px; }
	.hgfc-btn, .hgfc-toggle { width: 46px; height: 46px; }
	.hgfc-ico svg, .hgfc-toggle svg { width: 23px; height: 23px; }
	.hgfc-zalo { font-size: 13px; }
}