/**
 * ==========================================================================
 * [DPS STYLESHEET] - 2026-10-16 - Dev: DPS
 * Mục đích: CSS cho Unified Navigation & Contact Bar (Hệ thống điều hướng & liên hệ đồng nhất)
 *           - Mobile (<= 768px): Bottom Navigation Bar 5 nút chuẩn UX
 *           - Desktop (> 768px): Floating Contact Dock ở góc phải dưới
 *           - Triệt tiêu hoàn toàn nút AnyContact (wacu) trên toàn bộ hệ thống
 * ==========================================================================
 */

/* ==========================================================================
   1. Triệt Tiêu Nút Nổi AnyContact & Handheld Footer Bar Cũ
   ========================================================================== */
.wacu-widget,
.wacu-widget-trigger,
.wacu-widget__button,
.wacu-btn,
.call-now-button,
.freshio-handheld-footer-bar {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	opacity: 0 !important;
	height: 0 !important;
	width: 0 !important;
	overflow: hidden !important;
}

/* ==========================================================================
   2. CẤU TRÚC MOBILE BOTTOM BAR (Chỉ hiển thị <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
	/* Bù khoảng đệm để nội dung không bị che */
	body {
		padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
	}

	.ksf-desktop-contact-dock {
		display: none !important;
	}

	.ksf-mobile-bottom-bar {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
		padding-bottom: env(safe-area-inset-bottom, 0px) !important;
		background: #ffffff !important;
		border-top: 1px solid #e2e8f0 !important;
		box-shadow: 0 -3px 12px rgba(15, 23, 42, 0.08) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-around !important;
		z-index: 9998 !important;
		box-sizing: border-box !important;
		-webkit-backdrop-filter: blur(12px) !important;
		backdrop-filter: blur(12px) !important;
	}

	.ksf-bottom-bar-item {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 1 !important;
		height: 56px !important;
		text-decoration: none !important;
		color: #64748b !important;
		position: relative !important;
		transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
		-webkit-tap-highlight-color: transparent !important;
		padding: 4px 2px !important;
		box-sizing: border-box !important;
	}

	.ksf-bottom-bar-item:active {
		transform: scale(0.92) !important;
	}

	.ksf-bottom-bar-item.is-active {
		color: #008848 !important;
	}

	.ksf-bottom-bar-item.is-active .ksf-bottom-bar-label {
		font-weight: 700 !important;
		color: #008848 !important;
	}

	.ksf-bottom-bar-icon {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
		width: 26px !important;
		height: 26px !important;
		flex-shrink: 0 !important;
	}

	.ksf-bottom-bar-label {
		font-size: 10px !important;
		font-weight: 600 !important;
		line-height: 1.15 !important;
		margin-top: 2px !important;
		white-space: nowrap !important;
		letter-spacing: -0.2px !important;
		color: inherit !important;
		transition: color 0.15s ease !important;
	}

	/* Zalo Circle Wrapper & Logo Chữ Zalo Mobile */
	.ksf-bottom-bar-item.ksf-item-zalo .ksf-zalo-circle-wrap {
		width: 25px !important;
		height: 25px !important;
		border-radius: 50% !important;
		background: #ffffff !important;
		border: 1.5px solid #0068ff !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: 0 2px 5px rgba(0, 104, 255, 0.25) !important;
		box-sizing: border-box !important;
		padding: 2px !important;
	}

	.ksf-bottom-bar-item.ksf-item-zalo .ksf-zalo-img {
		width: 18px !important;
		height: auto !important;
		max-height: 10px !important;
		object-fit: contain !important;
		display: block !important;
	}

	.ksf-bottom-bar-item.ksf-item-zalo .ksf-bottom-bar-label {
		color: #0068ff !important;
		font-weight: 700 !important;
	}

	/* Hotline Badge Mobile */
	.ksf-bottom-bar-item.ksf-item-hotline .ksf-hotline-badge {
		width: 24px !important;
		height: 24px !important;
		background: #e11d48 !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		color: #ffffff !important;
		box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35) !important;
	}

	.ksf-bottom-bar-item.ksf-item-hotline .ksf-bottom-bar-label {
		color: #e11d48 !important;
		font-weight: 700 !important;
	}

	/* Cart Badge Mobile */
	.ksf-bottom-bar-cart-badge {
		position: absolute !important;
		top: -3px !important;
		right: -7px !important;
		background: #e11d48 !important;
		color: #ffffff !important;
		font-size: 9.5px !important;
		font-weight: 800 !important;
		min-width: 17px !important;
		height: 17px !important;
		line-height: 15px !important;
		border-radius: 10px !important;
		text-align: center !important;
		padding: 0 4px !important;
		box-sizing: border-box !important;
		border: 1.5px solid #ffffff !important;
		display: none !important;
		box-shadow: 0 2px 5px rgba(225, 29, 72, 0.4) !important;
	}

	.ksf-bottom-bar-cart-badge.has-items {
		display: inline-block !important;
	}
}

/* ==========================================================================
   3. CẤU TRÚC DESKTOP FLOATING CONTACT DOCK (Chỉ hiển thị > 768px)
   ========================================================================== */
@media (min-width: 769px) {
	.ksf-mobile-bottom-bar {
		display: none !important;
	}

	.ksf-desktop-contact-dock {
		position: fixed !important;
		bottom: 30px !important;
		right: 24px !important;
		z-index: 99999 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-end !important;
		gap: 12px !important;
		pointer-events: none !important;
	}

	.ksf-dock-item {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		position: relative !important;
		text-decoration: none !important;
		cursor: pointer !important;
		outline: none !important;
		border: none !important;
		background: transparent !important;
		padding: 0 !important;
		pointer-events: auto !important;
		transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	}

	.ksf-dock-item:hover {
		transform: scale(1.05) !important;
	}

	.ksf-dock-item:active {
		transform: scale(0.95) !important;
	}

	/* Nhãn Hover Text */
	.ksf-dock-label {
		background: #0f172a !important;
		color: #ffffff !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		padding: 7px 14px !important;
		border-radius: 20px !important;
		white-space: nowrap !important;
		margin-right: 10px !important;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transform: translateX(12px) !important;
		transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	}

	.ksf-dock-item:hover .ksf-dock-label {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateX(0) !important;
	}

	/* Nút Tròn Icon */
	.ksf-dock-icon {
		width: 48px !important;
		height: 48px !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18) !important;
		flex-shrink: 0 !important;
		transition: box-shadow 0.2s ease !important;
	}

	/* Nút Hotline Đỏ + Hiệu ứng Sóng Lan Tỏa */
	.ksf-dock-hotline .ksf-dock-icon {
		background: linear-gradient(135deg, #e11d48, #be123c) !important;
		animation: ksfDockPulse 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
	}

	.ksf-dock-hotline .ksf-dock-label {
		background: #be123c !important;
	}

	@keyframes ksfDockPulse {
		0% {
			box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7), 0 4px 16px rgba(15, 23, 42, 0.18);
		}
		70% {
			box-shadow: 0 0 0 16px rgba(225, 29, 72, 0), 0 4px 16px rgba(15, 23, 42, 0.18);
		}
		100% {
			box-shadow: 0 0 0 0 rgba(225, 29, 72, 0), 0 4px 16px rgba(15, 23, 42, 0.18);
		}
	}

	/* Nút Zalo Logo Chữ Trong Vòng Tròn Desktop */
	.ksf-dock-zalo .ksf-dock-icon {
		width: 48px !important;
		height: 48px !important;
		border-radius: 50% !important;
		background: #ffffff !important;
		border: 2px solid #0068ff !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: 0 4px 16px rgba(0, 104, 255, 0.25) !important;
		box-sizing: border-box !important;
		padding: 4px !important;
		transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	}

	.ksf-dock-zalo .ksf-dock-icon img {
		width: 34px !important;
		height: auto !important;
		max-height: 16px !important;
		object-fit: contain !important;
		display: block !important;
		transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease !important;
	}

	.ksf-dock-zalo:hover .ksf-dock-icon {
		background: #0068ff !important;
		transform: scale(1.08) !important;
		box-shadow: 0 6px 20px rgba(0, 104, 255, 0.45) !important;
	}

	.ksf-dock-zalo:hover .ksf-dock-icon img {
		filter: brightness(0) invert(1) !important;
	}

	.ksf-dock-zalo .ksf-dock-label {
		background: #0068ff !important;
	}

	/* Nút Messenger Gradient */
	.ksf-dock-messenger .ksf-dock-icon {
		background: linear-gradient(135deg, #0084ff, #00c6ff) !important;
	}

	.ksf-dock-messenger .ksf-dock-label {
		background: #0084ff !important;
	}

	/* Nút Back to Top */
	.ksf-dock-backtotop {
		opacity: 0 !important;
		visibility: hidden !important;
		transform: translateY(12px) scale(0.85) !important;
		transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
	}

	.ksf-dock-backtotop.is-visible {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(0) scale(1) !important;
	}

	.ksf-dock-backtotop .ksf-dock-icon {
		width: 42px !important;
		height: 42px !important;
		background: #ffffff !important;
		color: #334155 !important;
		border: 1px solid #e2e8f0 !important;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
	}

	.ksf-dock-backtotop:hover .ksf-dock-icon {
		background: #008848 !important;
		color: #ffffff !important;
		border-color: #008848 !important;
	}
}