/*
 * Cụm nút liên hệ nổi (template-parts/lien-he-noi.php).
 * - PC (>= 769px): cột 3 nút tròn bên phải, tooltip trượt sang trái khi hover/focus.
 * - Mobile (<= 768px): thanh 3 nút cố định đáy màn hình, nút Gọi nổi bật nền đỏ.
 */

:root {
	--kdnv-lh-do: #d0121b;
	--kdnv-lh-zalo: #0068ff;
	--kdnv-lh-msgr: #7b3fe4;
	--kdnv-lh-chu: #1f2328;
	--kdnv-lh-vien: #e2e4e8;
	--kdnv-lh-focus: #0b57d0;
	--kdnv-lh-cao: 52px;
	--kdnv-lh-nut: 48px;
	--kdnv-lh-cot: 21px;
	/* Đáy cột PC cố định (không đổi theo lúc Subiz nạp muộn để cột không nhảy): ngay trên bong bóng Subiz 70px ở bottom 50px. */
	--kdnv-lh-day: 132px;
}

.kdnv-lien-he,
.kdnv-lien-he *,
.kdnv-lien-he *::before,
.kdnv-lien-he *::after {
	box-sizing: border-box;
}

.kdnv-lien-he a.kdnv-lien-he__nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	font-family: inherit;
}

.kdnv-lien-he a.kdnv-lien-he__nut:hover,
.kdnv-lien-he a.kdnv-lien-he__nut:focus {
	text-decoration: none;
}

.kdnv-lien-he__icon {
	width: 22px;
	height: 22px;
	flex: none;
}

.kdnv-lien-he a.kdnv-lien-he__nut--goi .kdnv-lien-he__icon {
	color: var(--kdnv-lh-do);
}

.kdnv-lien-he a.kdnv-lien-he__nut--zalo .kdnv-lien-he__icon {
	color: var(--kdnv-lh-zalo);
}

.kdnv-lien-he a.kdnv-lien-he__nut--messenger .kdnv-lien-he__icon {
	color: var(--kdnv-lh-msgr);
}

/*
 * Subiz chat (mã nhúng Subiz không sửa): ẩn lời chào tự bật ở mọi khổ (che chân trang/nút đặt hàng) và cho khung
 * .widget-layout (hộp trong suốt 340x191 phủ góc phải) không chặn bấm, chỉ bong bóng nhận chuột.
 * Nếu Subiz đổi tên class: DevTools chạy document.querySelector('[class*="widget-layout"]') và
 * document.querySelector('[class*="widget-preview"]') rồi thay các selector .widget-layout / .widget-preview-* trong tệp này.
 */
body .widget-preview-new-wrapper,
body .widget-preview-wrapper {
	display: none !important;
}

body .widget-layout {
	pointer-events: none;
}

body .widget-layout > * {
	pointer-events: auto;
}

/* Nút cuộn lên đầu trang: đồng bộ ngôn ngữ thiết kế */
.kdnv-totop i {
	width: 40px;
	height: 40px;
	line-height: 38px;
	margin-bottom: 0;
	background: #fff;
	color: #4a4f57;
	border: 1px solid var(--kdnv-lh-vien);
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06);
	transition: border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.kdnv-totop i:hover {
	border-color: var(--kdnv-lh-do);
	color: var(--kdnv-lh-do);
}

/* ===== PC: Cột nút tròn dọc góc phải ===== */
@media (min-width: 769px) {
	.kdnv-lien-he {
		position: fixed;
		right: var(--kdnv-lh-cot);
		bottom: var(--kdnv-lh-day);
		z-index: 999;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.kdnv-lien-he a.kdnv-lien-he__nut {
		position: relative;
		width: var(--kdnv-lh-nut);
		height: var(--kdnv-lh-nut);
		border-radius: 50%;
		background: #fff;
		border: 1px solid var(--kdnv-lh-vien);
		box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06);
		transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
	}

	.kdnv-lien-he a.kdnv-lien-he__nut:hover {
		transform: translateY(-1px);
		box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 6px 16px rgba(16, 24, 40, .10);
	}

	.kdnv-lien-he a.kdnv-lien-he__nut--goi:hover {
		border-color: var(--kdnv-lh-do);
	}

	.kdnv-lien-he a.kdnv-lien-he__nut--zalo:hover {
		border-color: var(--kdnv-lh-zalo);
	}

	.kdnv-lien-he a.kdnv-lien-he__nut--messenger:hover {
		border-color: var(--kdnv-lh-msgr);
	}

	.kdnv-lien-he a.kdnv-lien-he__nut:focus-visible {
		outline: 3px solid var(--kdnv-lh-focus);
		outline-offset: 2px;
	}

	/* Nhãn trượt dạng tooltip bên trái nút */
	.kdnv-lien-he__nhan {
		position: absolute;
		right: calc(100% + 10px);
		top: 50%;
		padding: 7px 12px;
		background: #fff;
		color: var(--kdnv-lh-chu);
		border: 1px solid var(--kdnv-lh-vien);
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		transform: translate(8px, -50%);
		transition: opacity .15s ease, transform .15s ease;
	}

	.kdnv-lien-he a.kdnv-lien-he__nut:hover .kdnv-lien-he__nhan,
	.kdnv-lien-he a.kdnv-lien-he__nut:focus-visible .kdnv-lien-he__nhan {
		opacity: 1;
		transform: translate(0, -50%);
		pointer-events: auto;
	}

	/* Cầu nối vô hình 10px giữa nhãn và nút: rê chuột từ nút sang nhãn không mất hover (WCAG 1.4.13). */
	.kdnv-lien-he__nhan::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 100%;
		width: 12px;
	}

	/* Nút totop nằm ngay trên nút cao nhất của cột, canh thẳng tâm */
	.kdnv-totop i {
		right: calc(var(--kdnv-lh-cot) + (var(--kdnv-lh-nut) - 40px) / 2);
		bottom: calc(var(--kdnv-lh-day) + (3 * var(--kdnv-lh-nut)) + 32px);
	}
}

/* Khổ màn hình trung bình: thu gọn nút để bớt chiếm không gian */
@media (min-width: 769px) and (max-width: 1199px) {
	:root {
		--kdnv-lh-nut: 44px;
	}
}

/* ===== Mobile/Tablet: Thanh cố định đáy màn hình ===== */
/* 768.98px: không có khe giữa hai mốc khi viewport lẻ (zoom 110%/125%). */
@media (max-width: 768.98px) {
	body {
		padding-bottom: var(--kdnv-lien-he-cao-thuc, calc(var(--kdnv-lh-cao) + env(safe-area-inset-bottom)));
	}

	.kdnv-lien-he {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		height: calc(var(--kdnv-lh-cao) + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		border-top: 1px solid var(--kdnv-lh-vien);
		box-shadow: none;
	}

	.kdnv-lien-he a.kdnv-lien-he__nut {
		flex: 1 1 0;
		min-width: 0;
		height: var(--kdnv-lh-cao);
		display: flex;
		flex-direction: row;
		gap: 6px;
		color: var(--kdnv-lh-chu);
		font-size: 13px;
		font-weight: 600;
		line-height: 1.2;
		border-radius: 0;
		border: none;
		box-shadow: none;
	}

	.kdnv-lien-he a.kdnv-lien-he__nut:hover,
	.kdnv-lien-he a.kdnv-lien-he__nut:focus {
		color: var(--kdnv-lh-chu);
	}

	.kdnv-lien-he a.kdnv-lien-he__nut + a.kdnv-lien-he__nut {
		border-left: 1px solid var(--kdnv-lh-vien);
	}

	.kdnv-lien-he a.kdnv-lien-he__nut--goi {
		background: var(--kdnv-lh-do);
		color: #fff;
	}

	.kdnv-lien-he a.kdnv-lien-he__nut--goi:hover,
	.kdnv-lien-he a.kdnv-lien-he__nut--goi:focus {
		background: var(--kdnv-lh-do);
		color: #fff;
	}

	.kdnv-lien-he a.kdnv-lien-he__nut--goi .kdnv-lien-he__icon {
		color: #fff;
	}

	.kdnv-lien-he__icon {
		width: 20px;
		height: 20px;
	}

	/* Reset định dạng tooltip PC thành văn bản hiển thị bình thường */
	.kdnv-lien-he__nhan {
		position: static;
		padding: 0;
		background: transparent;
		color: inherit;
		border: none;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.kdnv-lien-he__pc,
	.kdnv-lien-he__so {
		display: none;
	}

	.kdnv-lien-he a.kdnv-lien-he__nut:focus-visible {
		outline: 3px solid var(--kdnv-lh-focus);
		outline-offset: -3px;
	}

	.kdnv-lien-he a.kdnv-lien-he__nut--goi:focus-visible {
		outline: 3px solid #fff;
		outline-offset: -3px;
		box-shadow: inset 0 0 0 5px var(--kdnv-lh-focus);
	}

	/* Đẩy Subiz, banner cookie và nút totop lên trên thanh đáy */
	body .widget-layout {
		bottom: calc(var(--kdnv-lien-he-cao-thuc, calc(var(--kdnv-lh-cao) + env(safe-area-inset-bottom))) + 12px) !important;
	}

	body .kdnv-dy {
		bottom: calc(var(--kdnv-lien-he-cao-thuc, calc(var(--kdnv-lh-cao) + env(safe-area-inset-bottom))) + 8px) !important;
	}

	.kdnv-totop i {
		right: 25px;
		bottom: calc(var(--kdnv-lien-he-cao-thuc, calc(var(--kdnv-lh-cao) + env(safe-area-inset-bottom))) + 96px);
	}
}

/* Bàn phím ảo mở trên mobile (JS đặt class): ẩn thanh liên hệ */
html.kdnv-lien-he-an .kdnv-lien-he {
	display: none !important;
}

/* Thanh liên hệ cũ còn nằm trong option ihaf_insert_footer của plugin Insert Headers and Footers */
.bottom-contact,
.mobile_toolbar1 {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.kdnv-lien-he a.kdnv-lien-he__nut,
	.kdnv-lien-he__nhan,
	.kdnv-totop i {
		transition: none !important;
	}
}

@media print {
	.kdnv-lien-he {
		display: none !important;
	}
}