/*
 * Nút Liên Hệ ★ Thầy Lương Ngọc Bích – Frontend Styles
 * ------------------------------------------------------------------
 * Tested với Astra + Elementor (z-index 99999 nổi trên mọi section).
 * KHÔNG còn nút chính: mọi nút đã bật hiển thị sẵn, xếp dọc cố định.
 * Animation thuần CSS3, không phụ thuộc JS.
 *
 * Hiệu ứng bật/tắt qua class trên .lnb-wrapper:
 *   .lnb-fx-pulse  → sóng lan tỏa (ripple)
 *   .lnb-fx-glow   → nhấp nháy nhẹ (breathing glow, staggered)
 *   .lnb-fx-zoom   → phóng to khi hover
 * ------------------------------------------------------------------ */

/* ── Wrapper ────────────────────────────────────── */
.lnb-wrapper {
	position: fixed;
	bottom: 24px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	pointer-events: none; /* children re-enable */
}

.lnb-pos-right { right: 24px; align-items: flex-end; }
.lnb-pos-left  { left:  24px; align-items: flex-start; }

/* ── Responsive hide helpers ────────────────────── */
@media (max-width: 767px) {
	.lnb-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
	.lnb-hide-desktop { display: none !important; }
}

/* ── Nhóm nút – xếp dọc, hiển thị sẵn ───────────── */
.lnb-group {
	display: flex;
	flex-direction: column-reverse; /* nút đầu (Call) nằm dưới cùng, sát góc */
	gap: 14px;
}

.lnb-pos-right .lnb-group { align-items: flex-end; }
.lnb-pos-left  .lnb-group { align-items: flex-start; }

/* ── Mỗi nút ────────────────────────────────────── */
.lnb-item {
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: auto;
	/* entrance nhẹ khi tải trang, kết thúc ở trạng thái hiển thị */
	animation: lnb-enter 0.4s ease both;
}

/* tooltip nằm bên trái nút (phải) / bên phải nút (trái) */
.lnb-pos-left .lnb-item { flex-direction: row-reverse; }

/* xuất hiện lần lượt cho sống động */
.lnb-item:nth-child(1) { animation-delay: 0.05s; }
.lnb-item:nth-child(2) { animation-delay: 0.10s; }
.lnb-item:nth-child(3) { animation-delay: 0.15s; }
.lnb-item:nth-child(4) { animation-delay: 0.20s; }
.lnb-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes lnb-enter {
	from { opacity: 0; transform: translateY(14px) scale(0.85); }
	to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Tooltip nhãn (hiện khi hover) ──────────────── */
.lnb-tooltip {
	position: relative;
	background: rgba(0, 0, 0, 0.78);
	color: #fff;
	font-size: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
	font-weight: 500;
	line-height: 1.4;
	padding: 5px 10px;
	border-radius: 5px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	user-select: none;
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.lnb-pos-left .lnb-tooltip { transform: translateX(-6px); }

/* mũi tên nhỏ của tooltip */
.lnb-tooltip::after {
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -5px;
	border: 5px solid transparent;
}
.lnb-pos-right .lnb-tooltip::after { right: -10px; border-left-color: rgba(0, 0, 0, 0.78); }
.lnb-pos-left  .lnb-tooltip::after { left:  -10px; border-right-color: rgba(0, 0, 0, 0.78); }

.lnb-item:hover .lnb-tooltip,
.lnb-btn:focus-visible + .lnb-tooltip {
	opacity: 1;
	transform: translateX(0);
}

/* ── Nút (anchor) ───────────────────────────────── */
.lnb-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: transparent;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
	flex-shrink: 0;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* icon: ảnh upload (object-fit cover) hoặc SVG dựng sẵn – đều lấp đầy nút */
.lnb-btn .lnb-svg,
.lnb-btn .lnb-icon-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	pointer-events: none;
}

.lnb-btn:focus-visible {
	outline: 3px solid rgba(0, 0, 0, 0.25);
	outline-offset: 3px;
}

/* ── Vòng sóng lan tỏa (ripple) ─────────────────── */
.lnb-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--lnb-color, #0084ff);
	z-index: -1;
	opacity: 0;
	pointer-events: none;
}

@keyframes lnb-ripple {
	0%   { transform: scale(1);   opacity: 0.5; }
	100% { transform: scale(2.1); opacity: 0;   }
}

/* ── Nhấp nháy nhẹ (breathing glow) ─────────────── */
@keyframes lnb-glow {
	0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); }
	50%      { box-shadow: 0 4px 18px 2px var(--lnb-glow, rgba(0, 132, 255, 0.5)); }
}

/* ════════════════════════════════════════════════
   HIỆU ỨNG BẬT/TẮT THEO CLASS WRAPPER
   ════════════════════════════════════════════════ */

/* ── 1) PULSE / RIPPLE (mọi nút, lệch pha) ──────── */
.lnb-fx-pulse .lnb-item .lnb-btn::after {
	animation: lnb-ripple 2.4s ease-out infinite;
}
.lnb-fx-pulse .lnb-item:nth-child(1) .lnb-btn::after { animation-delay: 0s;   }
.lnb-fx-pulse .lnb-item:nth-child(2) .lnb-btn::after { animation-delay: 0.5s; }
.lnb-fx-pulse .lnb-item:nth-child(3) .lnb-btn::after { animation-delay: 1.0s; }
.lnb-fx-pulse .lnb-item:nth-child(4) .lnb-btn::after { animation-delay: 1.5s; }
.lnb-fx-pulse .lnb-item:nth-child(5) .lnb-btn::after { animation-delay: 2.0s; }

/* nhấn mạnh nút Gọi: ripple nhanh hơn, không phụ thuộc fx_pulse */
.lnb-item.lnb-pulse .lnb-btn::after {
	animation: lnb-ripple 1.6s ease-out infinite;
}

/* ── 2) GLOW / BREATHING (mọi nút, staggered) ───── */
.lnb-fx-glow .lnb-item .lnb-btn {
	animation: lnb-glow 2.6s ease-in-out infinite;
}
.lnb-fx-glow .lnb-item:nth-child(1) .lnb-btn { animation-delay: 0s;    }
.lnb-fx-glow .lnb-item:nth-child(2) .lnb-btn { animation-delay: 0.35s; }
.lnb-fx-glow .lnb-item:nth-child(3) .lnb-btn { animation-delay: 0.7s;  }
.lnb-fx-glow .lnb-item:nth-child(4) .lnb-btn { animation-delay: 1.05s; }
.lnb-fx-glow .lnb-item:nth-child(5) .lnb-btn { animation-delay: 1.4s;  }

/* ── 3) ZOOM HOVER ──────────────────────────────── */
.lnb-fx-zoom .lnb-btn:hover,
.lnb-fx-zoom .lnb-btn:focus-visible {
	transform: scale(1.18);
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.32);
}

/* khi tắt zoom: hover chỉ nâng nhẹ shadow */
.lnb-wrapper:not(.lnb-fx-zoom) .lnb-btn:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* ── Mobile adjustments ─────────────────────────── */
@media (max-width: 767px) {
	.lnb-wrapper {
		/* chừa khoảng dưới nếu có thanh menu sticky mobile */
		bottom: 70px;
	}

	.lnb-pos-right { right: 16px; }
	.lnb-pos-left  { left:  16px; }

	.lnb-group { gap: 12px; }

	.lnb-btn { width: 48px; height: 48px; }

	.lnb-tooltip { font-size: 11px; padding: 4px 8px; }
}

/* ── Tôn trọng prefers-reduced-motion ──────────── */
@media (prefers-reduced-motion: reduce) {
	.lnb-item,
	.lnb-btn,
	.lnb-btn::after {
		animation: none !important;
	}

	.lnb-item { opacity: 1; transform: none; }

	.lnb-tooltip { transition: opacity 0.15s ease !important; }

	.lnb-fx-zoom .lnb-btn:hover { transform: none; }
}