/* ==========================================================================
   FPT360 - Nút nổi Hotline & Zalo
   ========================================================================== */

.fpt-nn {
	position: fixed;
	/* Nâng lên trên nút đổi tỉnh "📍 ĐÀ NẴNG" (fpt360-tinh-noi) ở góc dưới */
	bottom: 90px;
	z-index: 99991;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.fpt-nn.fpt-nn-phai { right: 18px; align-items: flex-end; }
.fpt-nn.fpt-nn-trai { left: 18px;  align-items: flex-start; }

/* --- Nút tròn --- */
.fpt-nn-nut {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	transition: transform .2s ease, width .25s ease;
}
.fpt-nn-nut:hover { transform: scale(1.06); }

.fpt-nn-hotline { background: #ef4444; }
.fpt-nn-zalo    { background: #0068ff; }

.fpt-nn-icon {
	position: relative;
	z-index: 2;
	width: 56px;
	min-width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Nhãn chữ --- */
.fpt-nn-label {
	position: relative;
	z-index: 2;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width .25s ease, opacity .2s ease, padding .25s ease;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Hiện nhãn khi hover (desktop) hoặc luôn hiện nếu bật tuỳ chọn nhãn */
@media (min-width: 769px) {
	.fpt-nn:not(.fpt-nn-khong-nhan) .fpt-nn-nut:hover {
		width: auto;
		border-radius: 40px;
		padding-right: 20px;
	}
	.fpt-nn:not(.fpt-nn-khong-nhan) .fpt-nn-nut:hover .fpt-nn-label {
		max-width: 220px;
		opacity: 1;
		padding-left: 4px;
	}
	.fpt-nn.fpt-nn-trai:not(.fpt-nn-khong-nhan) .fpt-nn-nut:hover {
		padding-right: 0;
		padding-left: 20px;
	}
}

/* --- Hiệu ứng sóng lan --- */
.fpt-nn-song {
	position: absolute;
	top: 0; left: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	z-index: 1;
	animation: fpt-nn-song 1.8s infinite;
}
.fpt-nn-hotline .fpt-nn-song { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
.fpt-nn-zalo    .fpt-nn-song { box-shadow: 0 0 0 0 rgba(0, 104, 255, .55); }

@keyframes fpt-nn-song {
	0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, .35); }
	70%  { box-shadow: 0 0 0 16px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
.fpt-nn-hotline .fpt-nn-song { animation-name: fpt-nn-song-red; }
.fpt-nn-zalo    .fpt-nn-song { animation-name: fpt-nn-song-blue; }
@keyframes fpt-nn-song-red {
	0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
	70%  { box-shadow: 0 0 0 18px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes fpt-nn-song-blue {
	0%   { box-shadow: 0 0 0 0 rgba(0, 104, 255, .55); }
	70%  { box-shadow: 0 0 0 18px rgba(0, 104, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 104, 255, 0); }
}

/* Rung nhẹ icon điện thoại */
.fpt-nn-hotline .fpt-nn-icon svg { animation: fpt-nn-rung 1s infinite; transform-origin: center; }
@keyframes fpt-nn-rung {
	0%,100% { transform: rotate(0); }
	10%,30% { transform: rotate(-12deg); }
	20%,40% { transform: rotate(12deg); }
	50%     { transform: rotate(0); }
}

/* --- Mobile --- */
@media (max-width: 768px) {
	.fpt-nn { bottom: 82px; gap: 12px; }
	.fpt-nn.fpt-nn-phai { right: 12px; }
	.fpt-nn.fpt-nn-trai { left: 12px; }
	.fpt-nn-nut, .fpt-nn-icon, .fpt-nn-song { width: 52px; height: 52px; min-width: 52px; }
	.fpt-nn-label { display: none; }
}

@media (prefers-