/* Floating contact dock: Facebook / Zalo / hotline, restyled to the warm
   gold brand language and moved to the right edge, stacked in line with
   the "scroll to top" button so the whole right-hand column reads as one
   deliberate group instead of two unrelated floating widgets.

   Facebook/Zalo used to be their own platform-colour logo PNGs sitting
   inside a gold ring — two clashing circles stacked on top of each other.
   footer.php now renders plain white icons instead (no baked-in
   background), styled here exactly like the hotline button: one flat gold
   circle, one white glyph, nothing else. */

:root {
	--kha-float-size: 54px;
	--kha-float-gap: 14px;
	--kha-float-right: 20px;
	--kha-float-base: 20px;
}

.btnchatfacebook a,
.btnchatzalo a {
	position: fixed;
	right: var(--kha-float-right);
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kha-float-size);
	height: var(--kha-float-size);
	border-radius: 50%;
	background: linear-gradient(108deg, #74501f 0%, #a97834 36%, #d8ad58 68%, #8a5d24 100%);
	box-shadow: 0 10px 22px -10px rgba(72, 42, 9, .55);
	color: #fff;
	z-index: 9999;
	transition: transform .2s ease, box-shadow .2s ease;
}

.btnchatfacebook a:hover,
.btnchatzalo a:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -10px rgba(72, 42, 9, .62);
	color: #fff;
}

.btnchatfacebook svg,
.btnchatzalo svg {
	width: 24px;
	height: 24px;
}

.btnchatzalo a {
	bottom: calc(var(--kha-float-base) + var(--kha-float-size) + var(--kha-float-gap) + var(--kha-float-size) + var(--kha-float-gap));
}

.btnchatfacebook a {
	bottom: calc(var(--kha-float-base) + var(--kha-float-size) + var(--kha-float-gap) + (var(--kha-float-size) + var(--kha-float-gap)) * 2);
}

/* Hotline: same gold coin, its own subtle pulse kept (phone CTAs benefit
   from a little motion) but the box itself matches the other two exactly,
   so the stack lines up. */
.hotline-phone-ring {
	position: fixed;
	right: var(--kha-float-right);
	bottom: calc(var(--kha-float-base) + var(--kha-float-size) + var(--kha-float-gap));
	left: auto;
	width: var(--kha-float-size);
	height: var(--kha-float-size);
	overflow: visible;
}

.hotline-phone-ring-circle {
	width: 64px;
	height: 64px;
	top: -5px;
	left: -5px;
	border-color: #cda047;
	opacity: .45;
}

.hotline-phone-ring-circle-fill {
	width: 58px;
	height: 58px;
	top: -2px;
	left: -2px;
	background-color: rgba(167, 122, 58, .55);
}

.hotline-phone-ring-img-circle {
	width: var(--kha-float-size);
	height: var(--kha-float-size);
	top: 0;
	left: 0;
	background: linear-gradient(108deg, #74501f 0%, #a97834 36%, #d8ad58 68%, #8a5d24 100%);
	box-shadow: 0 10px 22px -10px rgba(72, 42, 9, .55);
}

.hotline-phone-ring-img-circle .pps-btn-img i { font-size: 18px; }

/* Scroll-to-top: the theme's default is a narrower rounded-square sized off
   its own padding, so even with a matching right offset it read as
   off-centre under the 54px circles above it. Force it to the exact same
   circle so every element in the stack shares one width and one centre
   line. */
.nevo-scroll-to-top {
	/* The theme's own rule also sets margin-left/right/bottom:20px, which
	   stacks on top of `right` and shifted the whole button further left
	   and down than the other three — reset it so `right`/`bottom` are the
	   only offsets in play. */
	margin: 0 !important;
	right: var(--kha-float-right) !important;
	bottom: var(--kha-float-base) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: var(--kha-float-size) !important;
	height: var(--kha-float-size) !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background-color: #a77a3a !important;
	border-color: #a77a3a !important;
	box-shadow: 0 10px 22px -10px rgba(72, 42, 9, .55);
}

.nevo-scroll-to-top:hover,
.nevo-scroll-to-top:focus {
	background-color: #7b5424 !important;
	border-color: #7b5424 !important;
}

@media (max-width: 767px) {
	:root {
		--kha-float-size: 44px;
		--kha-float-gap: 10px;
		--kha-float-right: 12px;
		--kha-float-base: 16px;
	}

	.btnchatfacebook a,
	.btnchatzalo a {
		right: var(--kha-float-right) !important;
		left: auto !important;
		width: var(--kha-float-size) !important;
		height: var(--kha-float-size) !important;
	}

	.btnchatzalo a {
		bottom: calc(var(--kha-float-base) + var(--kha-float-size) + var(--kha-float-gap) + var(--kha-float-size) + var(--kha-float-gap)) !important;
	}

	.btnchatfacebook a {
		bottom: calc(var(--kha-float-base) + var(--kha-float-size) + var(--kha-float-gap) + (var(--kha-float-size) + var(--kha-float-gap)) * 2) !important;
	}

	.btnchatfacebook svg,
	.btnchatzalo svg {
		width: 21px;
		height: 21px;
	}

	.hotline-phone-ring {
		right: var(--kha-float-right) !important;
		bottom: calc(var(--kha-float-base) + var(--kha-float-size) + var(--kha-float-gap)) !important;
		left: auto !important;
		width: var(--kha-float-size) !important;
		height: var(--kha-float-size) !important;
		transform: none !important;
	}

	.hotline-phone-ring-circle { width: 52px; height: 52px; top: -4px; left: -4px; }
	.hotline-phone-ring-circle-fill { width: 47px; height: 47px; top: -1.5px; left: -1.5px; }
	.hotline-phone-ring-img-circle { width: var(--kha-float-size); height: var(--kha-float-size); }
	.hotline-phone-ring-img-circle .pps-btn-img i { font-size: 15px; }

	.nevo-scroll-to-top {
		right: var(--kha-float-right) !important;
		bottom: var(--kha-float-base) !important;
		width: var(--kha-float-size) !important;
		height: var(--kha-float-size) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hotline-phone-ring-circle,
	.hotline-phone-ring-circle-fill,
	.hotline-phone-ring-img-circle {
		animation: none !important;
	}
}