/* ============================================================
   Maxweb Setting — Nút liên hệ nổi (Hotline & Zalo)
   Phỏng theo bộ "button-contact-vr" của maxweb.vn:
   vòng nền pulse (zoom), icon lắc, nhãn số trượt ra.
   ============================================================ */

/* Khung định vị chung */
.mw-cb {
	position: fixed;
	z-index: 99998;
}
.mw-cb-left  { left: 0; }
.mw-cb-right { right: 0; }

.mw-cb-inner {
	position: relative;
	width: 72px;
	height: 72px;
	cursor: pointer;
}

/* Vòng lan tỏa ngoài cùng */
.mw-cb-ring {
	position: absolute;
	top: 50%; left: 50%;
	width: 72px; height: 72px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: var(--mw-cb-color, #d30220);
	opacity: .13;
	animation: mw-cb-ring 1.15s ease-in-out infinite;
	z-index: 1;
}

/* Vòng nền pulse (giống phone-vr-circle-fill) */
.mw-cb-fill {
	position: absolute;
	top: 50%; left: 50%;
	width: 56px; height: 56px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: var(--mw-cb-color, #d30220);
	opacity: .22;
	animation: mw-cb-zoom 1.15s ease-in-out infinite;
	z-index: 2;
}

/* Icon tròn ở giữa */
.mw-cb-icon {
	position: absolute;
	top: 50%; left: 50%;
	width: 42px; height: 42px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--mw-cb-color, #d30220);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	box-shadow: none;
	text-decoration: none;
}
.mw-cb-icon svg,
.mw-cb-icon img {
	display: block;
	width: 24px;
	height: 24px;
	border: 0;
	background: transparent;
	box-shadow: none;
	object-fit: contain;
}

/* Hotline và Zalo cùng rung nhanh, dứt khoát nhưng vẫn có nhịp nghỉ ngắn. */
.mw-cb-phone .mw-cb-icon svg,
.mw-cb-zalo .mw-cb-icon img {
	animation: mw-cb-shake .68s ease-in-out infinite;
	transform-origin: 50% 50%;
}

/* Nhãn số điện thoại trượt ra (hotline) */
.mw-cb-label {
	position: absolute;
	top: 50%;
	left: 27px;
	transform: translateY(-50%);
	height: 35px;
	line-height: 35px;
	padding: 0 14px 0 47px;
	border-radius: 0 22px 22px 0;
	background: var(--mw-cb-label, #e81a05);
	color: #fff !important;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 18px;
	white-space: nowrap;
	text-decoration: none;
	border: 0;
	z-index: 3;
	box-shadow: none;
}
.mw-cb-right .mw-cb-label {
	left: auto;
	right: 27px;
	padding: 0 47px 0 14px;
	border-radius: 22px 0 0 22px;
}

/* Màu mặc định theo loại (ghi đè bằng biến khi có cấu hình) */
.mw-cb-zalo  { --mw-cb-color: #2196f3; }
.mw-cb-phone { --mw-cb-color: #d71920; }

/* Icon Zalo chính thức do Maxweb cung cấp. */
.mw-cb-zalo .mw-cb-icon img {
	width: 38px;
	height: 34px;
}

/* ---------- Animations ---------- */
@keyframes mw-cb-zoom {
	0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .20; }
	50%      { transform: translate(-50%, -50%) scale(1); opacity: .32; }
}
@keyframes mw-cb-ring {
	0%, 100% { transform: translate(-50%, -50%) scale(.84); opacity: .10; }
	50%      { transform: translate(-50%, -50%) scale(1.08); opacity: .18; }
}
@keyframes mw-cb-shake {
	0%, 58%, 100% { transform: rotate(0) scale(1); }
	10%, 30%, 50% { transform: rotate(-17deg) scale(1.03); }
	20%, 40% { transform: rotate(17deg) scale(1.03); }
}

/* Trên mobile ẩn nhãn số cho gọn */
@media (max-width: 600px) {
	.mw-cb-label { display: none; }
	.mw-cb-inner { width: 64px; height: 64px; }
	.mw-cb-ring  { width: 64px; height: 64px; }
	.mw-cb-fill  { width: 50px; height: 50px; }
	.mw-cb-icon  { width: 40px; height: 40px; }
}