/* ==========================================================================
   dm-cta — DistrictM CTA Block (2 buttons)
   Tương thích Flatsome UX Builder · Mobile-first · Dark/Light mode
   ========================================================================== */

/* ------------------------------------------------------------------
   Block wrapper
   ------------------------------------------------------------------ */
.dm-cta {
	padding: 48px 24px;
	width: 100%;
	box-sizing: border-box;
}

/* Nền sáng (mặc định) */
.dm-cta--bg-light {
	background-color: #f7f7f7;
}

/* Nền tối */
.dm-cta--bg-dark {
	background-color: #1a1a1a;
	color: #ffffff;
}

/* Không nền (trong suốt — dùng khi Flatsome section đã có màu) */
.dm-cta--bg-none {
	background: transparent;
}

/* ------------------------------------------------------------------
   Inner container — giới hạn độ rộng
   ------------------------------------------------------------------ */
.dm-cta__inner {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* Căn giữa */
.dm-cta--align-center .dm-cta__inner {
	text-align: center;
}

/* Căn trái */
.dm-cta--align-left .dm-cta__inner {
	text-align: left;
	margin-left: 0;
}

/* Căn phải */
.dm-cta--align-right .dm-cta__inner {
	text-align: right;
	margin-right: 0;
	margin-left: auto;
}

/* ------------------------------------------------------------------
   Heading
   ------------------------------------------------------------------ */
.dm-cta__heading {
	font-size: clamp(1.375rem, 3.5vw, 2rem); /* 22px → 32px */
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}

.dm-cta--bg-dark .dm-cta__heading {
	color: #ffffff;
}

/* ------------------------------------------------------------------
   Subtext
   ------------------------------------------------------------------ */
.dm-cta__subtext {
	font-size: clamp(0.9375rem, 2vw, 1.0625rem); /* 15px → 17px */
	line-height: 1.6;
	margin: 0 0 28px;
	opacity: 0.8;
}

.dm-cta--bg-dark .dm-cta__subtext {
	color: #e0e0e0;
}

/* ------------------------------------------------------------------
   Button group
   ------------------------------------------------------------------ */
.dm-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dm-cta--align-center .dm-cta__buttons {
	justify-content: center;
}
.dm-cta--align-left .dm-cta__buttons {
	justify-content: flex-start;
}
.dm-cta--align-right .dm-cta__buttons {
	justify-content: flex-end;
}

/* ------------------------------------------------------------------
   Button base
   ------------------------------------------------------------------ */
.dm-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	border-radius: 4px;
	font-size: 0.9375rem;   /* 15px */
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Màu: primary (nền đặc, trắng chữ)
   Dùng màu accent của DistrictM — đổi biến nếu theme có CSS variable
   ------------------------------------------------------------------ */
.dm-cta__btn--primary {
	background-color: var(--color-primary, #111111);
	color: #ffffff;
	border: 2px solid transparent;
}
.dm-cta__btn--primary:hover,
.dm-cta__btn--primary:focus-visible {
	background-color: var(--color-primary-dark, #333333);
	color: #ffffff;
}

/* ------------------------------------------------------------------
   Màu: outline (viền, nền trong suốt)
   ------------------------------------------------------------------ */
.dm-cta__btn--outline {
	background-color: transparent;
	color: var(--color-primary, #111111);
	border: 2px solid var(--color-primary, #111111);
}
.dm-cta__btn--outline:hover,
.dm-cta__btn--outline:focus-visible {
	background-color: var(--color-primary, #111111);
	color: #ffffff;
}

/* Outline trên nền tối */
.dm-cta--bg-dark .dm-cta__btn--outline {
	color: #ffffff;
	border-color: #ffffff;
}
.dm-cta--bg-dark .dm-cta__btn--outline:hover,
.dm-cta--bg-dark .dm-cta__btn--outline:focus-visible {
	background-color: #ffffff;
	color: #111111;
}

/* ------------------------------------------------------------------
   Màu: dark (nền tối, chữ trắng — dùng trên section sáng)
   ------------------------------------------------------------------ */
.dm-cta__btn--dark {
	background-color: #111111;
	color: #ffffff;
	border: 2px solid transparent;
}
.dm-cta__btn--dark:hover,
.dm-cta__btn--dark:focus-visible {
	background-color: #333333;
	color: #ffffff;
}

/* ------------------------------------------------------------------
   Màu: light (nền trắng, chữ tối — dùng trên section tối)
   ------------------------------------------------------------------ */
.dm-cta__btn--light {
	background-color: #ffffff;
	color: #111111;
	border: 2px solid transparent;
}
.dm-cta__btn--light:hover,
.dm-cta__btn--light:focus-visible {
	background-color: #f0f0f0;
	color: #111111;
}

/* ------------------------------------------------------------------
   Responsive — mobile: 2 nút xếp cột, full-width
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
	.dm-cta {
		padding: 36px 20px;
	}

	.dm-cta__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.dm-cta__btn {
		width: 100%;
		padding: 15px 20px;
	}
}