/* ============================================================
   Thanh liên hệ nhanh (zs-ctabar)
   - Điện thoại: cố định đáy màn hình.
   - Máy tính: dải pill nổi, cố định giữa đáy màn hình (luôn hiện).
   Viết CSS thuần (không qua Tailwind) để sửa/deploy không cần build lại.
   ============================================================ */

.zs-ctabar {
	--zs-ctabar-cot: 4;
	display: grid;
	grid-template-columns: repeat(var(--zs-ctabar-cot), minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid #e8eef5;
}

.zs-ctabar__nut {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	text-align: center;
	text-decoration: none;
	color: #0347ac;
	font-weight: 700;
	font-size: 0.82rem;
	line-height: 1.25;
}

.zs-ctabar__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: rgba(3, 71, 172, 0.1);
	color: #0347ac;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.zs-ctabar__icon svg {
	width: 22px;
	height: 22px;
}

.zs-ctabar__nut--chinh .zs-ctabar__icon {
	background: #ff0049;
	color: #fff;
	box-shadow: 0 14px 28px -16px rgba(255, 0, 73, 0.9);
}

.zs-ctabar__nut--chinh {
	color: #ff0049;
}

/* Nút dùng logo nguyên bản của kênh (Zalo): bỏ nền tròn, logo chiếm trọn ô. */
.zs-ctabar__nut--logo .zs-ctabar__icon {
	background: none;
	border-radius: 0;
}

.zs-ctabar__nut--logo .zs-ctabar__icon svg {
	width: 100%;
	height: 100%;
	border-radius: 26%;
	box-shadow: 0 10px 22px -14px rgba(0, 104, 255, 0.9);
}

.zs-ctabar__nut--logo:hover .zs-ctabar__icon {
	background: none;
}

.zs-ctabar__nut:hover .zs-ctabar__icon {
	transform: translateY(-2px);
	background: #0347ac;
	color: #fff;
}

.zs-ctabar__nut--chinh:hover .zs-ctabar__icon {
	background: #e00040;
}

.zs-ctabar__nut:focus-visible {
	outline: 2px solid #0347ac;
	outline-offset: 4px;
	border-radius: 1rem;
}

/* ---------- Điện thoại: thanh cố định đáy ---------- */
@media (max-width: 767px) {
	:root {
		--zs-ctabar-h: 68px;
	}

	body {
		padding-bottom: calc(var(--zs-ctabar-h) + env(safe-area-inset-bottom, 0px));
	}

	.zs-ctabar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		gap: 0;
		margin: 0;
		padding: 0.45rem 0.25rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid #e8eef5;
		background: #fff;
		box-shadow: 0 -10px 30px -18px rgba(3, 71, 172, 0.75);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	/* Menu điện thoại đang mở: thanh trượt xuống nhường chỗ. */
	body.zs-menu-dang-mo .zs-ctabar {
		transform: translateY(110%);
		opacity: 0;
		pointer-events: none;
	}

	.zs-ctabar__nut {
		gap: 0.22rem;
		font-size: 0.68rem;
		font-weight: 600;
	}

	.zs-ctabar__icon {
		width: 34px;
		height: 34px;
	}

	.zs-ctabar__icon svg {
		width: 18px;
		height: 18px;
	}

	/* Nút "về đầu trang" leo lên trên bong bóng chat để ba thứ không chồng nhau. */
	[data-zs-totop] {
		bottom: 9.75rem !important;
	}

	/* Bong bóng chat Caresoft nhường chỗ cho thanh (widget đặt vị trí bằng inline style
	   nên phải dùng !important). Class do main.js gắn, chỉ khi widget đang thu nhỏ —
	   lúc khách mở cửa sổ chat thì trả lại nguyên vị trí. */
	#cs-live-chat.zs-nhuong-thanh-cta {
		margin-bottom: 88px !important;
	}

	/* Menu mở thì thanh đã ẩn -> trả bong bóng về sát đáy như cũ. */
	body.zs-menu-dang-mo #cs-live-chat.zs-nhuong-thanh-cta {
		margin-bottom: 20px !important;
	}
}

/* Không in thanh này ra giấy. */
@media print {
	.zs-ctabar {
		display: none;
	}
}

/* ---------- Máy tính: dải pill nổi, luôn hiện giữa đáy màn hình ---------- */
@media (min-width: 768px) {
	:root {
		--zs-ctabar-h: 62px;
	}

	/* Chừa chỗ trong nền pastel của chân trang để thanh không đè dòng credit.
	   (Đệm ở <footer> chứ không ở <body> để không lòi ra dải trắng dưới chân trang.) */
	footer {
		padding-bottom: calc(var(--zs-ctabar-h) + 1.5rem);
	}

	.zs-ctabar {
		position: fixed;
		left: 50%;
		bottom: 20px;
		transform: translateX(-50%);
		z-index: 90;
		width: max-content;
		max-width: calc(100vw - 2rem);
		grid-auto-flow: column;
		grid-template-columns: none;
		gap: 0.25rem;
		margin: 0;
		padding: 0.4rem;
		border: 1px solid #e8eef5;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 20px 45px -22px rgba(3, 71, 172, 0.65), 0 2px 10px rgba(3, 71, 172, 0.06);
	}

	.zs-ctabar__nut {
		flex-direction: row;
		align-items: center;
		gap: 0.55rem;
		padding: 0.25rem 1rem 0.25rem 0.3rem;
		border-radius: 999px;
		font-size: 0.88rem;
		white-space: nowrap;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.zs-ctabar__icon {
		width: 38px;
		height: 38px;
	}

	.zs-ctabar__icon svg {
		width: 19px;
		height: 19px;
	}

	/* Trong dải pill thì cả nút sáng lên, icon đứng yên (nhấc icon lên nhìn rối). */
	.zs-ctabar__nut:hover {
		background: rgba(3, 71, 172, 0.07);
	}

	.zs-ctabar__nut:hover .zs-ctabar__icon {
		transform: none;
	}

	/* Nút hotline là nút chính: nguyên viên thuốc màu hồng thương hiệu. */
	.zs-ctabar__nut--chinh {
		background: #ff0049;
		color: #fff;
	}

	.zs-ctabar__nut--chinh .zs-ctabar__icon {
		background: rgba(255, 255, 255, 0.2);
		color: #fff;
		box-shadow: none;
	}

	.zs-ctabar__nut--chinh:hover {
		background: #e00040;
	}

	.zs-ctabar__nut--chinh:hover .zs-ctabar__icon {
		background: rgba(255, 255, 255, 0.3);
	}

	.zs-ctabar__nut--logo .zs-ctabar__icon svg {
		box-shadow: none;
	}
}