/**
 * AT WebKit Pro — Floating contact: Hotline shake + Zalo pulse waves
 */
:root {
	--at-hotline: #ff6a00;
	--at-zalo: #0068ff;
	--at-size: 56px;
}

.at-contact {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	pointer-events: none;
}

.at-contact__btn {
	position: relative;
	width: var(--at-size);
	height: var(--at-size);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	pointer-events: auto;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.at-contact__btn:hover,
.at-contact__btn:focus-visible {
	transform: scale(1.08);
	color: #fff;
	outline: none;
}

.at-contact__icon {
	position: relative;
	z-index: 2;
	display: flex;
	line-height: 0;
}

/* Hotline — orange + shake */
.at-contact__btn--hotline {
	background: radial-gradient(circle at 30% 28%, #ff9a4d, var(--at-hotline) 50%, #e85d00);
	animation: at-shake 1.6s ease-in-out infinite;
}

@keyframes at-shake {
	0%, 100% { transform: rotate(0deg); }
	10% { transform: rotate(-12deg); }
	20% { transform: rotate(12deg); }
	30% { transform: rotate(-10deg); }
	40% { transform: rotate(10deg); }
	50% { transform: rotate(0deg); }
	50.1%, 100% { transform: rotate(0deg); }
}

/* Zalo — blue + expanding pulse rings */
.at-contact__btn--zalo {
	background: radial-gradient(circle at 30% 28%, #4d94ff, var(--at-zalo) 52%, #0054d1);
	overflow: visible;
}

.at-contact__wave {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--at-zalo);
	opacity: 0;
	pointer-events: none;
	animation: at-pulse-wave 2.4s cubic-bezier(0.15, 0.6, 0.3, 1) infinite;
}

.at-contact__wave--1 { animation-delay: 0s; }
.at-contact__wave--2 { animation-delay: 0.8s; }
.at-contact__wave--3 { animation-delay: 1.6s; }

@keyframes at-pulse-wave {
	0% { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(2.15); opacity: 0; }
}

@media (max-width: 781px) {
	:root { --at-size: 52px; }
	.at-contact { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.at-contact__btn--hotline,
	.at-contact__wave { animation: none; }
}