/* Pxl CTA Bar — gọi + Zalo (sticky hoặc inline). Chỉ enqueue khi theme dùng khối. */

.pxl-cta-bar {
	--cta-gold: #d4b896;
	--cta-ink: #1a1410;
	box-sizing: border-box;
}

.pxl-cta-bar *,
.pxl-cta-bar *::before,
.pxl-cta-bar *::after {
	box-sizing: border-box;
}

.pxl-cta-bar--fixed {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: linear-gradient(180deg, rgba(11, 9, 7, 0.85) 0%, rgba(11, 9, 7, 0.98) 100%);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border-top: 1.5px solid var(--cta-gold);
	box-shadow:
		0 -2px 0 rgba(244, 216, 122, 0.25) inset,
		0 -20px 60px -10px rgba(0, 0, 0, 0.8),
		0 -4px 30px -8px rgba(232, 201, 136, 0.4);
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}

.pxl-cta-bar--fixed::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cta-gold), transparent);
	opacity: 0.6;
}

.pxl-cta-bar--inline {
	position: relative;
	padding: 16px 0 8px;
}

.pxl-cta-pair {
	max-width: 780px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	position: relative;
}

.pxl-cta-pair[data-count="1"] {
	grid-template-columns: 1fr;
	max-width: 420px;
}

.pxl-cta-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-decoration: none;
	color: var(--cta-ink);
	padding: 18px 22px;
	border-radius: 14px;
	background: linear-gradient(180deg, #f4d87a 0%, #e0b95c 50%, #b68b3f 100%);
	border: 1.5px solid #f4d87a;
	transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow:
		0 0 30px -4px rgba(232, 201, 136, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 6px 18px -4px rgba(232, 201, 136, 0.45);
}

.pxl-cta-btn .circ {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1.5px solid var(--cta-ink);
	display: grid;
	place-items: center;
	color: var(--cta-ink);
	transition: 0.3s;
	flex: 0 0 42px;
	background: rgba(26, 20, 16, 0.08);
}

.pxl-cta-btn .lbl {
	font-family: "Be Vietnam Pro", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--cta-ink);
	text-transform: uppercase;
	line-height: 1;
}

.pxl-cta-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow:
		0 0 40px -2px rgba(244, 216, 122, 0.8),
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 10px 24px -4px rgba(232, 201, 136, 0.55);
}

.pxl-cta-btn-zalo {
	background: linear-gradient(180deg, #3d8bff 0%, #0068ff 100%);
	border-color: #3d8bff;
	color: #fff;
	box-shadow:
		0 0 30px -4px rgba(61, 139, 255, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		0 6px 18px -4px rgba(61, 139, 255, 0.45);
}

.pxl-cta-btn-zalo .circ {
	border-color: #fff;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.pxl-cta-btn-zalo .lbl {
	color: #fff;
}

.pxl-cta-btn-zalo:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow:
		0 0 40px -2px rgba(61, 139, 255, 0.85),
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 10px 24px -4px rgba(61, 139, 255, 0.55);
}

/* Chừa đáy nội dung khi sticky (body class từ theme landing). */
body.fs-landing-single:has(.pxl-cta-bar--fixed) {
	padding-bottom: 100px;
}

@media (max-width: 560px) {
	.pxl-cta-btn {
		padding: 14px 12px;
		gap: 10px;
	}

	.pxl-cta-btn .lbl {
		font-size: 13px;
		letter-spacing: 0.14em;
	}

	.pxl-cta-btn .circ {
		width: 36px;
		height: 36px;
		flex: 0 0 36px;
	}

	body.fs-landing-single:has(.pxl-cta-bar--fixed) {
		padding-bottom: 96px;
	}
}