/* Webvina Button Contact - kiểu "Hiện đại" (1.1.0). Biến: --wvbc-main (màu nút gộp), --wvbc-bottom, --wvbc-scale; --c trên mỗi kênh. */
.wvbc-m {
	position: fixed;
	z-index: 99990;
	bottom: max(16px, var(--wvbc-bottom, 3%));
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	transform: scale(var(--wvbc-scale, 1));
	transform-origin: bottom right;
	font-family: inherit;
	line-height: 1.2;
}

.wvbc-m--right {
	right: 20px;
}

.wvbc-m--left {
	left: 20px;
	align-items: flex-start;
	transform-origin: bottom left;
}

.wvbc-m * {
	box-sizing: border-box;
}

/* Nút gộp */
.wvbc-m__toggle {
	position: relative;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wvbc-main, #2196f3);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease;
}

.wvbc-m__toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .26);
}

.wvbc-m__toggle:focus-visible,
.wvbc-m__item:focus-visible {
	outline: 3px solid #ffbf47;
	outline-offset: 3px;
}

/* Sóng lan toả: 2 vòng nối tiếp */
.wvbc-m__wave,
.wvbc-m__wave::before {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wvbc-main, #2196f3);
	opacity: 0;
	pointer-events: none;
	animation: wvbc-m-wave 2.6s ease-out infinite;
}

.wvbc-m__wave::before {
	content: "";
	animation-delay: 1.3s;
}

@keyframes wvbc-m-wave {
	0% {
		transform: scale(1);
		opacity: .45;
	}
	100% {
		transform: scale(1.75);
		opacity: 0;
	}
}

/* Biểu tượng luân phiên (2 hoặc 3 mặt) */
.wvbc-m__faces {
	position: relative;
	width: 28px;
	height: 28px;
}

.wvbc-m__face,
.wvbc-m__close {
	position: absolute;
	inset: 0;
	width: 28px;
	height: 28px;
	transition: opacity .25s ease, transform .3s ease;
}

.wvbc-m__face {
	opacity: 0;
	animation: wvbc-m-face 9s infinite;
}

.wvbc-m__faces--2 .wvbc-m__face {
	animation-duration: 6s;
}

.wvbc-m__face--0 {
	animation-delay: 0s;
	opacity: 1;
}

.wvbc-m__face--1 {
	animation-delay: 3s;
}

.wvbc-m__face--2 {
	animation-delay: 6s;
}

.wvbc-m__faces--1 .wvbc-m__face {
	animation: none;
	opacity: 1;
}

@keyframes wvbc-m-face {
	0% {
		opacity: 0;
		transform: scale(.6) rotate(-20deg);
	}
	4%,
	30% {
		opacity: 1;
		transform: none;
	}
	34%,
	100% {
		opacity: 0;
		transform: scale(.6) rotate(20deg);
	}
}

.wvbc-m__faces--2 .wvbc-m__face {
	animation-name: wvbc-m-face2;
}

@keyframes wvbc-m-face2 {
	0% {
		opacity: 0;
		transform: scale(.6) rotate(-20deg);
	}
	6%,
	45% {
		opacity: 1;
		transform: none;
	}
	51%,
	100% {
		opacity: 0;
		transform: scale(.6) rotate(20deg);
	}
}

.wvbc-m__toggle .wvbc-m__zalo-text {
	fill: var(--wvbc-main, #2196f3);
}

.wvbc-m__close {
	inset: auto;
	top: 50%;
	left: 50%;
	margin: -14px 0 0 -14px; /* nằm trực tiếp trong nút (không trong khung 28px như biểu tượng luân phiên) */
	opacity: 0;
	transform: rotate(-90deg) scale(.6);
}

/* Đang mở: ẩn biểu tượng luân phiên + sóng, hiện dấu ✕ */
.wvbc-m.is-open .wvbc-m__faces {
	visibility: hidden;
}

.wvbc-m.is-open .wvbc-m__wave {
	display: none;
}

.wvbc-m.is-open .wvbc-m__close {
	opacity: 1;
	transform: none;
}

/* Danh sách kênh */
.wvbc-m__list {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wvbc-m__list[hidden] {
	display: none;
}

.wvbc-m__entry {
	margin: 0;
	opacity: 0;
	transform: translateY(14px) scale(.92);
	transition: opacity .22s ease, transform .28s cubic-bezier(.2, .9, .3, 1.3);
	transition-delay: calc(var(--i, 0) * 45ms);
}

.wvbc-m.is-open .wvbc-m__entry {
	opacity: 1;
	transform: none;
}

.wvbc-m__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 4px 4px 14px;
	border-radius: 999px;
	background: #fff;
	color: #1f2933;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
	transition: transform .2s ease, box-shadow .2s ease;
}

.wvbc-m--left .wvbc-m__item {
	flex-direction: row-reverse;
	padding: 4px 14px 4px 4px;
}

.wvbc-m__item:hover {
	color: #1f2933;
	transform: translateX(-3px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.wvbc-m--left .wvbc-m__item:hover {
	transform: translateX(3px);
}

.wvbc-m__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c, #2196f3);
	color: #fff;
}

.wvbc-m__icon svg {
	width: 22px;
	height: 22px;
}

.wvbc-m__icon .wvbc-m__zalo-text {
	fill: var(--c, #0068ff);
}

/* Tắt hiệu ứng (cài đặt) hoặc hệ điều hành bật giảm chuyển động: chỉ còn biểu tượng đầu, không sóng */
.wvbc-m--still .wvbc-m__wave {
	display: none;
}

.wvbc-m--still .wvbc-m__face {
	animation: none;
	opacity: 0;
}

.wvbc-m--still .wvbc-m__face--0 {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.wvbc-m__wave {
		display: none;
	}
	.wvbc-m__face {
		animation: none;
		opacity: 0;
	}
	.wvbc-m__face--0 {
		opacity: 1;
	}
	.wvbc-m__entry,
	.wvbc-m__toggle,
	.wvbc-m__item {
		transition: none;
	}
}

@media (max-width: 549px) {
	.wvbc-m--right {
		right: 14px;
	}
	.wvbc-m--left {
		left: 14px;
	}
	.wvbc-m__toggle {
		width: 52px;
		height: 52px;
	}
	.wvbc-m__item {
		font-size: 14px;
	}
}

@media (max-width: 849px) {
	.wvbc-m--hide-mobile {
		display: none;
	}
}

@media (min-width: 850px) {
	.wvbc-m--hide-desktop {
		display: none;
	}
}