.bella-zalo {
	position: fixed;
	left: 20px;
	bottom: 24px;
	z-index: 7998;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.bella-messenger {
	position: fixed;
	left: 20px;
	bottom: 90px;
	z-index: 7998;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.bella-zalo:hover,
.bella-zalo:focus {
	text-decoration: none;
}

.bella-messenger:hover,
.bella-messenger:focus {
	text-decoration: none;
}

.bella-zalo__mark {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	/* The Zalo mark is a speech bubble: round, with one squared-off corner
	   standing in for the tail. */
	border-radius: 50% 50% 50% 8px;
	background: linear-gradient(140deg, #0A84FF 0%, #0068FF 55%, #0055D4 100%);
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1;
	box-shadow: 0 10px 26px -8px rgba(0, 104, 255, .65), 0 2px 6px rgba(16, 38, 63, .18);
	transition: transform .25s ease, box-shadow .25s ease;
}

.bella-messenger__mark {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50% 50% 50% 10px;
	background: linear-gradient(140deg, #00B2FF 0%, #0084FF 58%, #0060D9 100%);
	color: #fff;
	line-height: 1;
	box-shadow: 0 10px 26px -8px rgba(0, 132, 255, .65), 0 2px 6px rgba(16, 38, 63, .18);
	transition: transform .25s ease, box-shadow .25s ease;
}

.bella-messenger__icon {
	width: 31px;
	height: 31px;
	display: block;
}

.bella-zalo:hover .bella-zalo__mark,
.bella-zalo:focus-visible .bella-zalo__mark {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 14px 32px -8px rgba(0, 104, 255, .7), 0 2px 8px rgba(16, 38, 63, .2);
}

.bella-messenger:hover .bella-messenger__mark,
.bella-messenger:focus-visible .bella-messenger__mark {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 14px 32px -8px rgba(0, 132, 255, .7), 0 2px 8px rgba(16, 38, 63, .2);
}

/* Halo, so the button is noticed once without ever moving the layout. */
.bella-zalo__mark::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background: rgba(0, 104, 255, .35);
	animation: bella-zalo-pulse 2.4s ease-out infinite;
}

.bella-messenger__mark::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background: rgba(0, 132, 255, .35);
	animation: bella-zalo-pulse 2.4s ease-out infinite;
}

@keyframes bella-zalo-pulse {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

.bella-zalo__label {
	max-width: 40vw;
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	color: #10263F;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 8px 24px -12px rgba(27, 27, 43, .5), inset 0 0 0 1px rgba(27, 27, 43, .08);
	opacity: 0;
	transform: translateX(-8px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}

.bella-messenger__label {
	max-width: 40vw;
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	color: #10263F;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 8px 24px -12px rgba(27, 27, 43, .5), inset 0 0 0 1px rgba(27, 27, 43, .08);
	opacity: 0;
	transform: translateX(-8px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}

.bella-zalo:hover .bella-zalo__label,
.bella-zalo:focus-visible .bella-zalo__label {
	opacity: 1;
	transform: none;
}

.bella-messenger:hover .bella-messenger__label,
.bella-messenger:focus-visible .bella-messenger__label {
	opacity: 1;
	transform: none;
}

@media (max-width: 767px) {
	.bella-zalo {
		left: 14px;
		bottom: 20px;
	}
	.bella-messenger {
		left: 14px;
		bottom: 84px;
	}
	.bella-zalo__mark {
		width: 50px;
		height: 50px;
		font-size: 16px;
	}
	.bella-messenger__mark {
		width: 50px;
		height: 50px;
	}
	.bella-messenger__icon {
		width: 29px;
		height: 29px;
	}
	/* Clear of the home page's fixed call/book bar. */
	body.home .bella-zalo {
		bottom: calc(88px + env(safe-area-inset-bottom));
	}
	body.home .bella-messenger {
		bottom: calc(152px + env(safe-area-inset-bottom));
	}
	/* No hover on touch, so the label would only ever flash on tap. */
	.bella-zalo__label,
	.bella-messenger__label {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bella-zalo__mark,
	.bella-zalo__label,
	.bella-messenger__mark,
	.bella-messenger__label {
		transition: none;
	}
	.bella-zalo__mark::before,
	.bella-messenger__mark::before {
		animation: none;
	}
}