/*
 * Nút gọi nổi — cố định góc dưới phải 15px (inc/floating-phone.php).
 * 3 vòng sóng lan ra so le (to dần + mờ dần tới 0), icon điện thoại rung theo nhịp như chuông reo.
 */

.vg-phone-ring {
	--vg-ring-size: 56px;
	--vg-ring-color: var(--vg-color-description-gold);
	--vg-ring-speed: 2.4s;

	position: fixed;
	right: 15px;
	bottom: 15px;
	z-index: 999; /* dưới lightbox Fancybox */
	display: grid;
	place-items: center;
	width: var(--vg-ring-size);
	height: var(--vg-ring-size);
	border-radius: 50%;
	background-color: var(--vg-ring-color);
	box-shadow: 0 6px 16px rgba(22, 45, 82, 0.3);
	color: #fff;
	text-decoration: none;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

.vg-phone-ring:hover,
.vg-phone-ring:focus-visible {
	background-color: var(--vg-color-primary);
	color: #fff;
	transform: scale(1.08);
}

.vg-phone-ring:focus-visible {
	outline: 2px solid var(--vg-color-primary);
	outline-offset: 4px;
}

/* Sóng: cùng kích thước nút, phóng ra 2.4 lần và mờ dần; 3 vòng lệch nhau 1/3 chu kỳ */
.vg-phone-ring__wave {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background-color: var(--vg-ring-color);
	opacity: 0;
	animation: vg-phone-wave var(--vg-ring-speed) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
	pointer-events: none;
}

.vg-phone-ring__wave:nth-child(2) {
	animation-delay: calc(var(--vg-ring-speed) / 3);
}

.vg-phone-ring__wave:nth-child(3) {
	animation-delay: calc(var(--vg-ring-speed) / 3 * 2);
}

@keyframes vg-phone-wave {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(2.4);
	}
}

/* Icon điện thoại (mask theo màu chữ), rung như chuông trong 1/3 đầu chu kỳ rồi nghỉ */
.vg-phone-ring__icon {
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("../icons/phone-calling.svg") center / 24px 24px no-repeat;
	mask: url("../icons/phone-calling.svg") center / 24px 24px no-repeat;
	animation: vg-phone-shake var(--vg-ring-speed) ease-in-out infinite;
}

@keyframes vg-phone-shake {
	0%, 40%, 100% { transform: rotate(0); }
	5%, 15%, 25% { transform: rotate(-18deg); }
	10%, 20%, 30% { transform: rotate(18deg); }
	35% { transform: rotate(-6deg); }
}

/* Đang mở lightbox thì ẩn để không che nút điều hướng */
.with-fancybox .vg-phone-ring {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 689.98px) {
	.vg-phone-ring {
		--vg-ring-size: 50px;
	}

	.vg-phone-ring__icon {
		width: 22px;
		height: 22px;
		-webkit-mask-size: 22px 22px;
		mask-size: 22px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vg-phone-ring__wave,
	.vg-phone-ring__icon {
		animation: none;
	}
}