/* CHXN component: floating contact shortcuts (Messenger / Zalo / Hotline)
   — bottom-right corner, every page. Markup lives in footer.php, right
   alongside the flying cart / quick view overlays (same "always in the
   DOM, positioned fixed" pattern). No JS of its own: plain links, and the
   Zalo one's href already matches what business-logic.php's own
   "devvn_fix_zalome" script scans the page for on its own. */

.chxn-fab-cluster {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 890;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.chxn-fab {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	transition: transform .15s ease;
}
.chxn-fab:hover {
	transform: scale(1.08);
}
.chxn-fab-messenger {
	background: linear-gradient(135deg, #00b2ff, #006aff);
}
.chxn-fab-zalo {
	background: #0068ff;
}
.chxn-fab-hotline {
	background: var(--chxn-green);
	animation: chxn-fab-pulse 2.2s ease-in-out infinite;
}
@keyframes chxn-fab-pulse {
	0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .22), 0 0 0 0 rgba(18, 107, 72, .45); }
	50% { box-shadow: 0 6px 18px rgba(0, 0, 0, .22), 0 0 0 8px rgba(18, 107, 72, 0); }
}

/* label shown on hover, to the left of the button (desktop only — with no
   hover state on touch devices, it would otherwise just sit invisible and
   unreachable there). */
.chxn-fab-tooltip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	background: var(--chxn-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	padding: 7px 12px;
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease;
}
.chxn-fab-tooltip::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: var(--chxn-ink);
}
@media (min-width: 851px) {
	.chxn-fab:hover .chxn-fab-tooltip {
		opacity: 1;
		visibility: visible;
	}
}
@media (max-width: 850px) {
	.chxn-fab-cluster {
		right: 14px;
		bottom: 14px;
		gap: 10px;
	}
	.chxn-fab {
		width: 46px;
		height: 46px;
	}
}