/* KMV contact buttons */
.kmv-cb{
	--kmv-cb-size:52px;
	position:fixed; z-index:9990; bottom:var(--kmv-cb-bottom,24px);
	display:flex; flex-direction:column; align-items:flex-end; gap:12px;
	font-family:inherit;
}
.kmv-cb-right{ right:var(--kmv-cb-side,20px); }
.kmv-cb-left{ left:var(--kmv-cb-side,20px); align-items:flex-start; }

.kmv-cb-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; align-items:inherit; }
.kmv-cb-item{ margin:0; padding:0; position:relative; list-style:none; }
.kmv-cb-item a{ position:relative; display:flex; align-items:center; text-decoration:none; }

.kmv-cb-icon{
	position:relative; flex:0 0 var(--kmv-cb-size);
	width:var(--kmv-cb-size); height:var(--kmv-cb-size); border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:var(--kmv-cb-color,#007dbe); color:#fff;
	box-shadow:0 8px 20px rgba(0,0,0,.18), inset 0 0 0 3px rgba(255,255,255,.25);
	transition:transform .2s ease, box-shadow .2s ease;
}
.kmv-cb-icon svg{ width:26px; height:26px; }
.kmv-cb-zalo .kmv-cb-icon svg{ width:34px; height:34px; }
.kmv-cb-item a:hover .kmv-cb-icon{ transform:translateY(-3px) scale(1.04); box-shadow:0 12px 26px rgba(0,0,0,.24), inset 0 0 0 3px rgba(255,255,255,.3); }

.kmv-cb-label{
	position:absolute; top:50%; right:calc(100% + 10px); margin-top:-16px;
	white-space:nowrap; font-size:13.5px; font-weight:600; line-height:1; color:#10233f;
	background:#fff; padding:9px 13px; border-radius:99px;
	box-shadow:0 6px 18px rgba(16,35,63,.16);
	transition:opacity .2s ease, transform .2s ease;
}
.kmv-cb-left .kmv-cb-label{ right:auto; left:calc(100% + 10px); }
.kmv-cb-labels-hover .kmv-cb-label{ opacity:0; visibility:hidden; transform:translateX(8px); pointer-events:none; }
.kmv-cb-left.kmv-cb-labels-hover .kmv-cb-label{ transform:translateX(-8px); }
.kmv-cb-labels-hover .kmv-cb-item a:hover .kmv-cb-label,
.kmv-cb-labels-hover .kmv-cb-item a:focus-visible .kmv-cb-label{ opacity:1; visibility:visible; transform:none; }
.kmv-cb-labels-none .kmv-cb-label{ display:none; }

/* Pulse on the phone button */
.kmv-cb-pulse .kmv-cb-icon::before,
.kmv-cb-pulse .kmv-cb-icon::after{
	content:""; position:absolute; inset:0; border-radius:50%;
	background:var(--kmv-cb-color); opacity:.45; z-index:-1;
	animation:kmv-cb-wave 2s ease-out infinite;
}
.kmv-cb-pulse .kmv-cb-icon::after{ animation-delay:1s; }
.kmv-cb-pulse .kmv-cb-icon svg{ animation:kmv-cb-ring 2s ease-in-out infinite; }
@keyframes kmv-cb-wave{ 0%{ transform:scale(1); opacity:.45; } 100%{ transform:scale(1.9); opacity:0; } }
@keyframes kmv-cb-ring{
	0%,50%,100%{ transform:rotate(0); }
	5%,15%,25%{ transform:rotate(-14deg); }
	10%,20%,30%{ transform:rotate(14deg); }
}

/* Toggle layout */
.kmv-cb-toggle{
	position:relative; display:flex; align-items:center; justify-content:center;
	width:58px; height:58px; margin:0; padding:0; border:0; border-radius:50%; cursor:pointer;
	background:var(--kmv-cb-main,#007dbe); color:#fff;
	box-shadow:0 10px 24px rgba(0,0,0,.22);
	order:2; transition:transform .25s ease;
}
.kmv-cb-toggle svg{ width:26px; height:26px; }
.kmv-cb-toggle::before{
	content:""; position:absolute; inset:0; border-radius:50%; background:inherit; opacity:.4; z-index:-1;
	animation:kmv-cb-wave 2s ease-out infinite;
}
.kmv-cb-toggle-close{ display:none; font-size:30px; line-height:1; font-weight:300; }
.kmv-cb-toggle-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.kmv-cb-layout-toggle .kmv-cb-list{
	opacity:0; visibility:hidden; transform:translateY(12px) scale(.96);
	transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.kmv-cb-layout-toggle.is-open .kmv-cb-list{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.kmv-cb-layout-toggle.is-open .kmv-cb-toggle-open{ display:none; }
.kmv-cb-layout-toggle.is-open .kmv-cb-toggle-close{ display:block; }
.kmv-cb-layout-toggle.is-open .kmv-cb-toggle::before{ animation:none; }
.kmv-cb-layout-toggle.is-open .kmv-cb-label{ opacity:1; visibility:visible; transform:none; }

/* Mobile */
@media (max-width:767px){
	.kmv-cb{ --kmv-cb-size:48px; }
	.kmv-cb-mobile-hide{ display:none !important; }

	/* Thanh liên hệ dạng "dock" nổi, bo góc, nền kính mờ */
	.kmv-cb-mobile-bar{
		left:12px !important; right:12px !important; bottom:calc(10px + env(safe-area-inset-bottom)) !important;
		display:block; padding:6px; border-radius:22px;
		background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
		box-shadow:0 12px 32px rgba(4,26,51,.22), 0 0 0 1px rgba(16,35,63,.06);
	}
	.kmv-cb-mobile-bar .kmv-cb-toggle{ display:none; }
	.kmv-cb-mobile-bar .kmv-cb-list{
		flex-direction:row; gap:6px; opacity:1 !important; visibility:visible !important; transform:none !important;
	}
	.kmv-cb-mobile-bar .kmv-cb-item{ flex:1 1 auto; min-width:0; }   /* rộng theo nội dung, không cắt chữ */
	.kmv-cb-mobile-bar .kmv-cb-item a{
		flex-direction:row !important; justify-content:center; gap:10px; height:52px; padding:0 12px;
		border-radius:16px; background:#f1f6fb; transition:transform .15s ease, background .2s ease;
	}
	.kmv-cb-mobile-bar .kmv-cb-item a:active{ transform:scale(.97); }
	.kmv-cb-mobile-bar .kmv-cb-icon{
		flex:0 0 36px; width:36px; height:36px; border-radius:12px; box-shadow:none;
		background:var(--kmv-cb-color,#007dbe);
	}
	.kmv-cb-mobile-bar .kmv-cb-icon svg{ width:19px; height:19px; }
	.kmv-cb-mobile-bar .kmv-cb-zalo .kmv-cb-icon svg{ width:28px; height:28px; }
	.kmv-cb-mobile-bar .kmv-cb-item a:hover .kmv-cb-icon{ transform:none; box-shadow:none; }
	.kmv-cb-mobile-bar .kmv-cb-label{
		display:block !important; opacity:1 !important; visibility:visible !important; transform:none !important;
		position:static; margin:0; background:none; box-shadow:none; padding:0;
		font-size:14px; font-weight:700; line-height:1.2; color:#10233f;
		min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	}
	/* nút cuối (thường là Hotline) tô màu nổi bật */
	.kmv-cb-mobile-bar .kmv-cb-item:last-child:not(:first-child) a{
		background:linear-gradient(135deg, var(--kmv-cb-color,#007dbe), color-mix(in srgb, var(--kmv-cb-color,#007dbe) 78%, #000));
		box-shadow:0 8px 18px color-mix(in srgb, var(--kmv-cb-color,#007dbe) 35%, transparent);
	}
	.kmv-cb-mobile-bar .kmv-cb-item:last-child:not(:first-child) .kmv-cb-label{ color:#fff; }
	.kmv-cb-mobile-bar .kmv-cb-item:last-child:not(:first-child) .kmv-cb-icon{ background:rgba(255,255,255,.2); }
	.kmv-cb-mobile-bar .kmv-cb-pulse .kmv-cb-icon::before,
	.kmv-cb-mobile-bar .kmv-cb-pulse .kmv-cb-icon::after{ border-radius:12px; background:#fff; animation-name:kmv-cb-wave-sm; }
	body:has(.kmv-cb-mobile-bar){ padding-bottom:84px; }
	body:has(.kmv-cb-mobile-bar) #top-link{ bottom:92px !important; }
	@media (max-width:374px){
		.kmv-cb-mobile-bar .kmv-cb-item a{ gap:8px; padding:0 9px; }
		.kmv-cb-mobile-bar .kmv-cb-icon{ flex-basis:32px; width:32px; height:32px; border-radius:10px; }
		.kmv-cb-mobile-bar .kmv-cb-label{ font-size:13px; }
	}
	@keyframes kmv-cb-wave-sm{ 0%{ transform:scale(1); opacity:.35; } 100%{ transform:scale(1.45); opacity:0; } }
}

@media (prefers-reduced-motion:reduce){
	.kmv-cb *, .kmv-cb *::before, .kmv-cb *::after{ animation:none !important; transition:none !important; }
}

/* Keep Flatsome's "back to top" button on the opposite side */
body:has(.kmv-cb-right) #top-link{ right:auto !important; left:20px !important; }
body:has(.kmv-cb-left) #top-link{ left:auto !important; right:20px !important; }
