.ylfc-floating-contact {
	position: fixed;
	top: 50%;
	left: clamp(12px, 2vw, 28px);
	z-index: 9990;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transform: translateY(-50%);
}

.ylfc-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 8px 18px rgba(20, 20, 20, .22);
	color: #fff;
	text-decoration: none;
	animation: ylfc-float 4.2s ease-in-out infinite;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.ylfc-button::before {
	position: absolute;
	inset: -4px;
	border: 1px solid currentColor;
	border-radius: inherit;
	content: '';
	opacity: .45;
	pointer-events: none;
	animation: ylfc-pulse 2.8s ease-out infinite;
}

.ylfc-wave {
	position: absolute;
	inset: -4px;
	border: 2px solid currentColor;
	border-radius: inherit;
	content: '';
	opacity: 0;
	pointer-events: none;
	animation: ylfc-wave 2.8s ease-out infinite;
}

.ylfc-button:hover,
.ylfc-button:focus-visible {
	transform: translateX(3px);
	animation-play-state: paused;
	box-shadow: 0 10px 22px rgba(20, 20, 20, .28);
	color: #fff;
	filter: brightness(1.05);
}

.ylfc-button:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .95);
	outline-offset: 3px;
}

.ylfc-button--zalo {
	background: #0678f9;
}

.ylfc-button--messenger {
	background: linear-gradient(145deg, #008cff 0%, #6b35e8 90%);
}

.ylfc-button--hotline {
	background: #df2537;
}

.ylfc-button svg,
.ylfc-custom-icon {
	display: block;
	width: 31px;
	height: 31px;
	max-width: 31px;
	max-height: 31px;
	object-fit: contain;
	object-position: center;
}

.ylfc-custom-icon {
	border: 0;
}

.ylfc-zalo-mark {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 25px;
	border-radius: 8px;
	background: #fff;
	color: #0678f9;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: -.25px;
	line-height: 1;
}

.ylfc-zalo-mark::after {
	position: absolute;
	bottom: -4px;
	left: 7px;
	width: 8px;
	height: 8px;
	background: #fff;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	content: '';
}

.ylfc-button::after {
	position: absolute;
	top: 50%;
	left: calc(100% + 9px);
	padding: 5px 8px;
	border-radius: 4px;
	background: #1e1e1e;
	color: #fff;
	content: attr(aria-label);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) translateX(-4px);
	transition: opacity .2s ease, transform .2s ease;
	white-space: nowrap;
}

.ylfc-button:hover::after,
.ylfc-button:focus-visible::after {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

@media (max-width: 600px) {
	.ylfc-floating-contact {
		left: 12px;
		gap: 10px;
	}

	.ylfc-button {
		width: 48px;
		height: 48px;
	}

	.ylfc-button svg,
	.ylfc-custom-icon,
	.ylfc-zalo-mark {
		width: 28px;
		height: 28px;
	}
}

@keyframes ylfc-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-3px) rotate(-2deg); }
	50% { transform: translateY(-6px) rotate(0deg); }
	75% { transform: translateY(-3px) rotate(2deg); }
}

@keyframes ylfc-pulse {
	0% { opacity: .42; transform: scale(.92); }
	70%, 100% { opacity: 0; transform: scale(1.3); }
}

@keyframes ylfc-wave {
	0% { opacity: .5; transform: scale(.95); }
	70%, 100% { opacity: 0; transform: scale(1.48); }
}

.ylfc-button--zalo { animation-delay: -.2s; }
.ylfc-button--messenger { animation-delay: -.9s; }
.ylfc-button--hotline { animation-delay: -1.6s; }
.ylfc-button--zalo::before,
.ylfc-button--zalo .ylfc-wave { animation-delay: -.2s; }
.ylfc-button--messenger::before,
.ylfc-button--messenger .ylfc-wave { animation-delay: -.9s; }
.ylfc-button--hotline::before,
.ylfc-button--hotline .ylfc-wave { animation-delay: -1.6s; }

@media (prefers-reduced-motion: reduce) {
	.ylfc-button,
	.ylfc-button::before,
	.ylfc-button::after,
	.ylfc-button .ylfc-wave {
		animation: none;
		transition: none;
	}
}