/* ==========================================================================
   LEAP Kit v0.3 — bộ thị giác Direct Response

   Nguyên tắc: mọi hiệu ứng nằm trong file này, block vẫn là block core.
   Người dùng sửa chữ, ảnh, màu bình thường và không phá được bố cục.

   Cách dùng: gắn class vào ô "Lớp CSS bổ sung" của block (mục Nâng cao trong
   sidebar), hoặc viết thẳng vào `className` khi sinh block markup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LUẬT KHI SỬA FILE NÀY

   KHÔNG dùng thuộc tính `margin` viết tắt cho bất kỳ khối nào nằm trực tiếp
   trong section. WordPress căn giữa nội dung bằng `margin-left/right: auto`,
   và rule đó được bọc trong `:where()` nên độ ưu tiên bằng 0 — chỉ cần một
   khai báo `margin: 0 0 1em` là khối bị dạt sang trái. Luôn viết tách:
   `margin-top` và `margin-bottom`.

   Lỗi này đã xảy ra ba lần trong quá trình phát triển: ở nút và ảnh, ở danh
   sách gạch đầu dòng, và ở số nhịp. Nó không báo lỗi, chỉ lệch bố cục.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   0. BIẾN NỘI BỘ
   -------------------------------------------------------------------------- */
:root {
	--leap-brutal: 6px 6px 0 var(--wp--preset--color--leap-heading, #0A0D12);
	--leap-brutal-sm: 4px 4px 0 var(--wp--preset--color--leap-heading, #0A0D12);
	--leap-shadow: 0 4px 24px rgba(10, 21, 28, .08);
	--leap-shadow-lg: 0 18px 50px -12px rgba(10, 13, 18, .28);
	--leap-ring: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--leap-primary) 22%, transparent);
	/* Plugin tính sẵn màu chữ tương phản với màu chính (trắng hay đen tuỳ độ
	   sáng). Mọi chỗ đặt chữ lên nền màu chính phải dùng biến này, đừng viết
	   cứng #fff — thương hiệu dùng màu vàng hay xanh non là chữ trắng biến mất. */
	--leap-on-primary: #fff;
}

/* --------------------------------------------------------------------------
   1. SECTION — tràn hết chiều ngang, nội dung vẫn thu về giữa
   --------------------------------------------------------------------------
   Astra ép `.entry-content > *` về content width. Phần dưới gỡ ràng buộc đó
   cho riêng section LEAP, không dùng thủ thuật 100vw (thủ thuật đó gây thanh
   cuộn ngang trên Windows).
   -------------------------------------------------------------------------- */
.leap-section,
.entry-content > .leap-section,
.entry-content[data-ast-blocks-layout] > .leap-section,
.editor-styles-wrapper .leap-section,
.editor-styles-wrapper > .leap-section,
.wp-site-blocks > .leap-section,
.is-root-container > .leap-section {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

.leap-section {
	position: relative;
	overflow-x: clip;
}

.entry-content > .leap-section > .wp-block-group__inner-container {
	padding-left: 0;
	padding-right: 0;
}

/* Section rộng — dùng cho khối nhiều ảnh hoặc 3 cột, phá nhịp 760px đơn điệu */
.leap-section.is-wide > * {
	max-width: 1120px;
}

/* --- Nền trang trí ------------------------------------------------------- */

/* Chuyển sắc trên nền tối — dùng cho section Landmark Idea và phần chốt */
.leap-section.is-gradient-dark {
	background-image:
		radial-gradient(120% 80% at 50% -20%,
			color-mix(in srgb, var(--wp--preset--color--leap-primary) 26%, transparent) 0%,
			transparent 60%),
		linear-gradient(180deg,
			var(--wp--preset--color--leap-bg-dark-soft, #12161F) 0%,
			var(--wp--preset--color--leap-bg-dark, #0A0D12) 100%);
}

/* Quầng sáng nhẹ phía sau nội dung — dùng trên section nền kem */
.leap-section.is-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(60% 50% at 50% 0%,
		color-mix(in srgb, var(--wp--preset--color--leap-accent) 26%, transparent) 0%,
		transparent 70%);
}

.leap-section.is-glow > * {
	position: relative;
}

/* Kẻ ô mờ — nền kỹ thuật, dùng tiết chế */
.leap-section.is-grid-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image:
		linear-gradient(to right, color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
}

.leap-section.is-grid-bg > * {
	position: relative;
}

/* --- Đường cắt tạo hình giữa hai section --------------------------------- */
.leap-section.has-slant-top {
	clip-path: polygon(0 46px, 100% 0, 100% 100%, 0 100%);
	margin-top: -46px;
	padding-top: calc(var(--wp--preset--spacing--leap-xl) + 46px) !important;
}

.leap-section.has-slant-bottom {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%);
	padding-bottom: calc(var(--wp--preset--spacing--leap-xl) + 46px) !important;
}

.leap-section.has-arc-top {
	border-start-start-radius: 44px;
	border-start-end-radius: 44px;
	margin-top: -44px;
}

/* Padding rút gọn — cho khối chuyển tiếp ngắn */
.leap-section.is-tight {
	padding-top: var(--wp--preset--spacing--leap-lg) !important;
	padding-bottom: var(--wp--preset--spacing--leap-lg) !important;
}

/* --------------------------------------------------------------------------
   2. CHỮ
   -------------------------------------------------------------------------- */
.leap-section :where(h1, h2, h3, h4) {
	text-wrap: balance;
	letter-spacing: -.022em;
}

.leap-section p {
	text-wrap: pretty;
}

.leap-section a:not(.wp-element-button) {
	color: var(--wp--preset--color--leap-primary);
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

/* Nhãn nhỏ phía trên tiêu đề */
.leap-eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 800;
	margin-bottom: .55em !important;
}

/* Nhãn có gạch hai bên — trang trọng hơn eyebrow thường */
.leap-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 800;
	margin-bottom: .7em !important;
}

.leap-kicker::before,
.leap-kicker::after {
	content: "";
	height: 1px;
	width: 34px;
	background: currentColor;
	opacity: .45;
}

/* Nhãn dạng viên thuốc */
.leap-pill {
	display: inline-block;
	padding: 7px 15px;
	border-radius: 99px;
	font-size: var(--wp--preset--font-size--leap-kicker, 13px);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--wp--preset--color--leap-primary-soft);
	color: var(--wp--preset--color--leap-primary-dark);
	margin-bottom: 1em !important;
}

.leap-pill.is-dark {
	background: color-mix(in srgb, var(--wp--preset--color--leap-bg) 12%, transparent);
	color: var(--wp--preset--color--leap-accent);
}

.leap-pill.is-danger {
	background: var(--wp--preset--color--leap-danger-soft);
	color: var(--wp--preset--color--leap-danger);
}

/* --- Cách tô nhấn từ khoá trong tiêu đề ---------------------------------- */

/* Bút dạ vàng — mặc định */
.leap-hl {
	background: linear-gradient(to bottom, transparent 52%,
		color-mix(in srgb, var(--wp--preset--color--leap-accent) 62%, transparent) 52%);
	color: inherit;
	padding: 0 .12em;
}

/* Gạch chân nét vẽ tay */
.leap-hl.is-underline {
	background: none;
	padding: 0;
	box-decoration-break: clone;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c40-6 90-7 196-3' stroke='%23E8552D' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% .34em;
	padding-bottom: .12em;
}

/* Khoanh tròn */
.leap-hl.is-circle {
	background: none;
	padding: .05em .35em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cellipse cx='100' cy='40' rx='95' ry='33' stroke='%23E8552D' stroke-width='4' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

/* Nền đặc — mạnh nhất */
.leap-hl.is-solid {
	background: var(--wp--preset--color--leap-primary);
	color: var(--leap-on-primary, #fff);
	padding: 0 .22em;
	border-radius: 6px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Giá cũ gạch bỏ */
.leap-strike {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--leap-danger);
	color: var(--wp--preset--color--leap-muted);
}

/* --------------------------------------------------------------------------
   3. NÚT
   -------------------------------------------------------------------------- */
.leap-btn-full,
.leap-btn-full .wp-block-button__link {
	width: 100%;
}

.wp-block-button__link {
	line-height: 1.25;
	text-align: center;
	letter-spacing: .01em;
	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

/* Bóng đổ cứng — chữ ký thị giác của direct response */
.leap-btn-brutal .wp-block-button__link {
	box-shadow: var(--leap-brutal-sm);
	border: 2px solid var(--wp--preset--color--leap-heading);
}

.leap-btn-brutal .wp-block-button__link:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--wp--preset--color--leap-heading);
}

/* Quầng sáng — dùng cho nút chính trên nền tối */
.leap-btn-glow .wp-block-button__link {
	box-shadow:
		0 8px 26px color-mix(in srgb, var(--wp--preset--color--leap-primary) 46%, transparent),
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--leap-primary) 30%, transparent);
}

/* Dòng chữ nhỏ ngay dưới nút */
.leap-microcopy {
	margin-top: .8em !important;
}

/* Mũi tên chỉ xuống nút */
.leap-arrow-down {
	text-align: center;
	line-height: 1;
	margin-top: 0 !important;
	margin-bottom: .3em !important;
	color: var(--wp--preset--color--leap-primary);
}

/* Chỉ tự thêm mũi tên khi đoạn văn RỖNG. Nếu markup đã gõ sẵn ▼ thì giữ
   nguyên của markup — nếu không sẽ ra hai mũi tên chồng nhau. */
.leap-arrow-down:empty::after {
	content: "▼";
	font-size: 1.4em;
	display: inline-block;
}

/* Hàng biểu tượng thanh toán dưới nút */
.leap-paylogos {
	gap: 10px 16px;
	opacity: .7;
	margin-top: .9em;
}

.leap-paylogos img {
	max-height: 24px;
	width: auto;
}

/* --------------------------------------------------------------------------
   4. DANH SÁCH
   -------------------------------------------------------------------------- */
.leap-bullets {
	list-style: none;
	padding-left: 0;
	/* KHÔNG đặt margin-left. Rule căn giữa của WordPress dùng :where() nên độ
	   ưu tiên bằng 0 — đặt margin-left sẽ đè mất và danh sách bị dạt trái. */

	/* Màu icon nằm trong MỘT biến. Icon vẽ bằng mask nên đổi biến là đổi màu,
	   không phải sửa file SVG. Trước đây màu xanh nướng cứng trong ảnh SVG nên
	   không đổi được — đó là lý do phải làm lại phần này. */
	--leap-bullet: var(--wp--preset--color--leap-success);
	--leap-bullet-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.leap-bullets li {
	position: relative;
	padding-left: 2.15em;
	margin-bottom: .9em;
	line-height: 1.62;
}

/* Vòng tròn nền */
.leap-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .22em;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--leap-bullet) 15%, transparent);
}

/* Hình icon, tô bằng background-color nên đổi màu được tự do */
.leap-bullets li::after {
	content: "";
	position: absolute;
	left: 0;
	top: .22em;
	width: 1.4em;
	height: 1.4em;
	background-color: var(--leap-bullet);
	-webkit-mask: var(--leap-bullet-glyph) center / .82em no-repeat;
	mask: var(--leap-bullet-glyph) center / .82em no-repeat;
}

/* --- Kiểu icon --- */

/* Dấu X đỏ — dùng cho danh sách nỗi đau, đặt cạnh danh sách tick để đối lập */
.leap-bullets.is-cross {
	--leap-bullet: var(--wp--preset--color--leap-danger);
	--leap-bullet-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

.leap-bullets.is-arrow {
	--leap-bullet: var(--wp--preset--color--leap-primary);
	--leap-bullet-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

.leap-bullets.is-star {
	--leap-bullet: var(--wp--preset--color--leap-accent);
	--leap-bullet-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E");
}

.leap-bullets.is-dot {
	--leap-bullet-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E");
}

/* --- Đổi màu icon: gắn thêm một trong các class này --- */
.leap-bullets.icon-primary  { --leap-bullet: var(--wp--preset--color--leap-primary); }
.leap-bullets.icon-accent   { --leap-bullet: var(--wp--preset--color--leap-accent); }
.leap-bullets.icon-success  { --leap-bullet: var(--wp--preset--color--leap-success); }
.leap-bullets.icon-danger   { --leap-bullet: var(--wp--preset--color--leap-danger); }
.leap-bullets.icon-heading  { --leap-bullet: var(--wp--preset--color--leap-heading); }
.leap-bullets.icon-muted    { --leap-bullet: var(--wp--preset--color--leap-muted); }

/* Vòng tròn đặc, icon trắng — giống kiểu tick xanh đặc trong nhiều sales page */
.leap-bullets.is-filled li::before {
	background-color: var(--leap-bullet);
}

.leap-bullets.is-filled li::after {
	background-color: var(--wp--preset--color--leap-bg, #fff);
}

/* Bỏ hẳn vòng tròn, chỉ còn icon */
.leap-bullets.is-bare li::before {
	background-color: transparent;
}

/* Giãn dòng thoáng hơn — hợp với khối bullets dài, chữ nhiều */
.leap-bullets.is-airy li {
	margin-bottom: 1.35em;
	line-height: 1.72;
}

/* Trên nền tối, vòng tròn cần đậm hơn mới thấy.
   :not(.is-filled) là bắt buộc: ba selector này có độ ưu tiên cao hơn
   .leap-bullets.is-filled, nên nếu không loại trừ thì vòng tròn đặc bị đổi
   thành vòng mờ 30% và icon trắng bên trong gần như biến mất. */
.has-leap-bg-dark-background-color .leap-bullets:not(.is-filled) li::before,
.is-gradient-dark .leap-bullets:not(.is-filled) li::before,
.leap-bullet-box.is-dark .leap-bullets:not(.is-filled) li::before {
	background-color: color-mix(in srgb, var(--leap-bullet) 30%, transparent);
}

/* Vòng đặc trên nền tối: icon lấy màu nền tối chứ không phải màu nền trang,
   nếu không thì tick trắng trên vòng vàng vẫn đọc được nhưng chói. */
.leap-bullet-box.is-dark .leap-bullets.is-filled li::after,
.is-gradient-dark .leap-bullets.is-filled li::after {
	background-color: var(--wp--preset--color--leap-bg-dark);
}

/* Danh sách đánh số khổ lớn */
.leap-bullets.is-number {
	counter-reset: leapnum;
}

.leap-bullets.is-number li {
	padding-left: 2.6em;
	counter-increment: leapnum;
}

.leap-bullets.is-number li::after {
	content: counter(leapnum);
	background: var(--wp--preset--color--leap-primary);
	color: var(--leap-on-primary, #fff);
	font-weight: 800;
	font-size: .82em;
	display: grid;
	place-items: center;
	width: 1.75em;
	height: 1.75em;
	top: .12em;
	border-radius: 50%;
	-webkit-mask: none;
	mask: none;
}

.leap-bullets.is-number li::before {
	background-color: transparent;
}

/* ==========================================================================
   KHỐI BULLETS CÓ NỀN
   --------------------------------------------------------------------------
   Sales page LEAP thường gom mỗi cụm bullets vào một khung nền màu. Khung giúp
   mắt biết cụm bắt đầu và kết thúc ở đâu — quan trọng khi trang có nhiều cụm
   liên tiếp, vì nếu không thì tất cả trôi thành một danh sách dài vô tận.

   Gắn class vào một core/group bọc ngoài core/list.
   ========================================================================== */
.leap-bullet-box {
	background: var(--wp--preset--color--leap-accent-soft);
	border-radius: 16px;
	padding: clamp(22px, 3.2vw, 34px);
}

.leap-bullet-box.is-tint    { background: var(--wp--preset--color--leap-primary-soft); }
.leap-bullet-box.is-plain   { background: var(--wp--preset--color--leap-bg-alt); }
.leap-bullet-box.is-white   { background: var(--wp--preset--color--leap-bg); box-shadow: var(--leap-shadow); }
.leap-bullet-box.is-success { background: var(--wp--preset--color--leap-success-soft); }
.leap-bullet-box.is-danger  { background: var(--wp--preset--color--leap-danger-soft); }

.leap-bullet-box.is-dark {
	background: var(--wp--preset--color--leap-bg-dark-soft);
	color: var(--wp--preset--color--leap-bg);
}

.leap-bullet-box.is-outline {
	background: transparent;
	border: 1px solid var(--wp--preset--color--leap-border);
}

/* Viền màu bên trái — nhấn mạnh hơn */
.leap-bullet-box.has-bar {
	border-left: 5px solid var(--wp--preset--color--leap-primary);
	border-start-start-radius: 6px;
	border-end-start-radius: 6px;
}

/* Tiêu đề nhỏ trong khung */
.leap-bullet-box > :first-child { margin-top: 0; }
.leap-bullet-box > :last-child  { margin-bottom: 0 !important; }
.leap-bullet-box .leap-bullets  { margin-bottom: 0; }

/* Hai cột trên desktop — cho danh sách dài */
@media (min-width: 782px) {
	.leap-bullets.is-two-col {
		column-count: 2;
		column-gap: 2.4em;
	}

	.leap-bullets.is-two-col li {
		break-inside: avoid;
	}
}

/* --------------------------------------------------------------------------
   5. THẺ
   -------------------------------------------------------------------------- */
/* Thẻ luôn có padding và bo góc tối thiểu, kể cả khi markup quên khai. */
.leap-card {
	box-shadow: var(--leap-shadow);
	position: relative;
	padding: clamp(22px, 3vw, 30px);
	border-radius: 16px;
}

/* Markup có khai padding riêng thì rule đó thắng, vì nó là style nội tuyến. */

.leap-card--flat {
	box-shadow: none;
}

.leap-card.is-elevated {
	box-shadow: var(--leap-shadow-lg);
}

/* Bóng cứng + viền dày */
.leap-card.is-brutal {
	box-shadow: var(--leap-brutal);
	border-width: 2px !important;
	border-color: var(--wp--preset--color--leap-heading) !important;
}

/* Vạch màu trên đầu thẻ */
.leap-card.is-accent-top::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--wp--preset--color--leap-primary);
	border-start-start-radius: inherit;
	border-start-end-radius: inherit;
}

/* Thẻ nổi bật giữa các thẻ khác */
.leap-card.is-featured {
	border-width: 2px !important;
	border-color: var(--wp--preset--color--leap-primary) !important;
}

.leap-card.is-featured::after {
	content: "PHỔ BIẾN NHẤT";
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--leap-primary);
	color: var(--leap-on-primary, #fff);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	padding: 5px 13px;
	border-radius: 99px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. HỘP NHẤN MẠNH
   --------------------------------------------------------------------------
   Gắn vào một core/group. Viền trái dày + nền nhạt — dễ đọc lướt.
   -------------------------------------------------------------------------- */
.leap-callout {
	border-left: 5px solid var(--wp--preset--color--leap-primary);
	background: var(--wp--preset--color--leap-primary-soft);
	border-radius: 8px;
	position: relative;
	padding: clamp(18px, 2.6vw, 24px);
}

.leap-callout.is-warning {
	border-left-color: var(--wp--preset--color--leap-accent);
	background: var(--wp--preset--color--leap-accent-soft);
}

.leap-callout.is-danger {
	border-left-color: var(--wp--preset--color--leap-danger);
	background: var(--wp--preset--color--leap-danger-soft);
}

.leap-callout.is-success {
	border-left-color: var(--wp--preset--color--leap-success);
	background: var(--wp--preset--color--leap-success-soft);
}

/* Trích dẫn khổ lớn */
.leap-pullquote {
	position: relative;
	padding-left: 1.6em;
	font-style: italic;
}

.leap-pullquote::before {
	content: "\201C";
	position: absolute;
	left: -.05em;
	top: -.28em;
	font-size: 3.4em;
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--leap-primary) 34%, transparent);
	font-style: normal;
}

/* --------------------------------------------------------------------------
   7. HUY HIỆU · CON DẤU · RUY BĂNG
   -------------------------------------------------------------------------- */
.leap-stamp {
	display: inline-block;
	border: 3px double var(--wp--preset--color--leap-success);
	color: var(--wp--preset--color--leap-success);
	border-radius: 10px;
	padding: 10px 18px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	transform: rotate(-3deg);
	background: color-mix(in srgb, var(--wp--preset--color--leap-success) 6%, #fff);
}

.leap-stamp.is-danger {
	border-color: var(--wp--preset--color--leap-danger);
	color: var(--wp--preset--color--leap-danger);
	background: color-mix(in srgb, var(--wp--preset--color--leap-danger) 6%, #fff);
	transform: rotate(2deg);
}

/* Con dấu bảo đảm hình tròn */
.leap-seal {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	text-align: center;
	line-height: 1.15;
	font-weight: 800;
	color: #fff;
	background: radial-gradient(circle at 32% 28%,
		color-mix(in srgb, var(--wp--preset--color--leap-success) 78%, #fff) 0%,
		var(--wp--preset--color--leap-success) 55%);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--wp--preset--color--leap-success) 22%, transparent),
		var(--leap-shadow);
	margin-inline: auto;
}

.leap-badges {
	gap: 10px 22px;
}

.leap-badges p {
	margin: 0;
	font-weight: 600;
}

:where(.leap-badges p) {
	color: var(--wp--preset--color--leap-muted);
}

/* --------------------------------------------------------------------------
   8. GIÁ VÀ KHỐI ĐẶT HÀNG
   -------------------------------------------------------------------------- */
.leap-offer-table table {
	border-collapse: collapse;
	width: 100%;
}

.leap-offer-table td {
	padding: .9em 0;
	border: 0;
	border-bottom: 1px dashed var(--wp--preset--color--leap-border);
	vertical-align: top;
}

.leap-offer-table td:last-child {
	text-align: right;
	white-space: nowrap;
	font-weight: 700;
	color: var(--wp--preset--color--leap-heading);
}

.leap-offer-table tr:last-child td {
	border-bottom: 0;
	font-size: 1.12em;
	font-weight: 800;
	padding-top: 1.15em;
	border-top: 2px solid var(--wp--preset--color--leap-heading);
}

.leap-price-old {
	text-decoration: line-through;
	text-decoration-color: var(--wp--preset--color--leap-danger);
	text-decoration-thickness: 2px;
	color: var(--wp--preset--color--leap-muted);
}

.leap-price-now {
	font-weight: 800;
}

:where(.leap-price-now) {
	color: var(--wp--preset--color--leap-primary);
}

/* Khối giá lớn */
.leap-price-block {
	text-align: center;
}

.leap-price-block .leap-price-now {
	display: block;
	font-size: clamp(38px, 7vw, 64px);
	line-height: 1.05;
	letter-spacing: -.03em;
}

/* Khung đặt hàng viền đứt — dấu hiệu kinh điển của direct response.
   Có padding và nền MẶC ĐỊNH ngay trong CSS. Nếu chỉ dựa vào markup, chỉ cần
   quên khai padding là chữ dính sát viền — đã xảy ra thật trên trang của khách. */
.leap-orderbox {
	border: 3px dashed var(--wp--preset--color--leap-primary) !important;
	background: var(--wp--preset--color--leap-bg);
	border-radius: 16px;
	position: relative;
	padding: clamp(24px, 4vw, 36px) clamp(20px, 3vw, 30px);
}

.leap-orderbox.is-solid {
	border-style: solid !important;
}

/* --------------------------------------------------------------------------
   9. ẢNH
   -------------------------------------------------------------------------- */
.leap-img-framed img {
	border: 3px solid var(--wp--preset--color--leap-heading);
	border-radius: 10px;
	box-shadow: var(--leap-brutal);
}

.leap-img-tilt img {
	transform: rotate(-1.6deg);
	box-shadow: var(--leap-shadow-lg);
	border-radius: 10px;
}

.leap-img-soft img {
	border-radius: 16px;
	box-shadow: var(--leap-shadow-lg);
}

/* Khung trình duyệt giả — cho ảnh chụp màn hình */
.leap-img-browser {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--leap-shadow-lg);
	border: 1px solid var(--wp--preset--color--leap-border);
	background: #fff;
}

.leap-img-browser::before {
	content: "";
	display: block;
	height: 30px;
	background:
		radial-gradient(circle 5px at 18px 15px, #FF5F57 98%, transparent),
		radial-gradient(circle 5px at 38px 15px, #FEBC2E 98%, transparent),
		radial-gradient(circle 5px at 58px 15px, #28C840 98%, transparent),
		#F2F0ED;
	border-bottom: 1px solid var(--wp--preset--color--leap-border);
}

.leap-img-browser img {
	display: block;
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   10. LỜI CHỨNG THỰC
   -------------------------------------------------------------------------- */
.leap-testimonial {
	background: var(--wp--preset--color--leap-bg);
	border: 1px solid var(--wp--preset--color--leap-border);
	border-radius: 14px;
	padding: clamp(20px, 3vw, 26px);
	box-shadow: var(--leap-shadow);
}

.leap-testimonial .wp-block-media-text__media img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Dòng kết quả nổi bật trong lời chứng thực */
.leap-result {
	display: inline-block;
	background: var(--wp--preset--color--leap-accent-soft);
	border-radius: 6px;
	padding: 5px 11px;
	font-weight: 800;
	color: var(--wp--preset--color--leap-heading);
}

/* Hàng sao đánh giá */
.leap-stars {
	color: var(--wp--preset--color--leap-accent);
	letter-spacing: .12em;
	margin-bottom: .35em !important;
}

/* --------------------------------------------------------------------------
   11. SỐ LIỆU · QUY TRÌNH · SO SÁNH · LOGO
   -------------------------------------------------------------------------- */
.leap-stat__num {
	font-size: clamp(2.4rem, 6vw, 3.6rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.03em;
	margin-bottom: .12em !important;
}

/* Màu mặc định bọc trong :where() nên độ ưu tiên bằng 0 — markup đặt màu khác
   (ví dụ vàng nhấn trên nền tối) sẽ luôn thắng. */
:where(.leap-stat__num) {
	color: var(--wp--preset--color--leap-primary);
}

.leap-step {
	position: relative;
	padding-left: 68px;
}

.leap-step__num {
	position: absolute;
	left: 0;
	top: 0;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 1.15rem;
	background: var(--wp--preset--color--leap-primary);
	color: var(--leap-on-primary, #fff);
	box-shadow: var(--leap-brutal-sm);
}

.leap-compare table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	overflow: hidden;
	border-radius: 12px;
}

.leap-compare th,
.leap-compare td {
	padding: .85em 1em;
	border: 1px solid var(--wp--preset--color--leap-border);
	vertical-align: top;
}

.leap-compare thead th {
	background: var(--wp--preset--color--leap-heading);
	color: #fff;
	font-weight: 800;
}

.leap-compare thead th:last-child {
	background: var(--wp--preset--color--leap-primary);
}

.leap-compare tbody td:first-child {
	color: var(--wp--preset--color--leap-muted);
}

.leap-compare tbody td:last-child {
	font-weight: 700;
	color: var(--wp--preset--color--leap-heading);
	background: color-mix(in srgb, var(--wp--preset--color--leap-primary) 5%, transparent);
}

.leap-logos {
	gap: 16px 36px;
	opacity: .58;
	filter: grayscale(1);
}

.leap-logos img {
	max-height: 34px;
	width: auto;
}

.leap-price-card {
	height: 100%;
}

/* --------------------------------------------------------------------------
   12. ĐẾM NGƯỢC
   -------------------------------------------------------------------------- */
.leap-countdown__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.leap-countdown__unit {
	min-width: 82px;
	padding: 13px 9px;
	border-radius: 12px;
	background: var(--wp--preset--color--leap-bg-dark);
	color: var(--wp--preset--color--leap-bg);
	text-align: center;
	line-height: 1.1;
}

.leap-countdown__num {
	display: block;
	font-size: 2.15rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

.leap-countdown__label {
	display: block;
	margin-top: 5px;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	opacity: .68;
}

.leap-countdown__expired {
	text-align: center;
	font-weight: 800;
	color: var(--wp--preset--color--leap-danger);
}

.leap-countdown.is-light .leap-countdown__unit {
	background: color-mix(in srgb, var(--wp--preset--color--leap-bg) 13%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--leap-bg) 24%, transparent);
}

.leap-countdown.is-danger .leap-countdown__unit {
	background: var(--wp--preset--color--leap-danger);
}

/* --------------------------------------------------------------------------
   13. THANH CTA DÍNH ĐÁY
   -------------------------------------------------------------------------- */
.leap-sticky-cta {
	position: sticky;
	bottom: 0;
	z-index: 20;
	box-shadow: 0 -4px 20px rgba(10, 13, 18, .16);
}

.leap-sticky-cta .wp-block-buttons {
	margin: 0;
}

/* --------------------------------------------------------------------------
   14. MOBILE
   --------------------------------------------------------------------------
   Cỡ chữ đã tự co giãn bằng fluid font size trong theme.json. Phần này chỉ xử
   lý những gì fluid không lo được. Từ WordPress 7.1, chỉnh riêng cho từng
   thiết bị ngay trong sidebar, không cần sửa file này.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.leap-hide-mobile { display: none !important; }

	.leap-section .wp-block-columns { gap: var(--wp--preset--spacing--leap-md); }

	.leap-offer-table td { font-size: .95em; }

	.leap-step { padding-left: 0; padding-top: 62px; }

	.leap-step__num { width: 44px; height: 44px; }

	.leap-seal { width: 108px; height: 108px; font-size: .9em; }

	.leap-section.has-slant-top,
	.leap-section.has-slant-bottom { clip-path: none; margin-top: 0; }

	.leap-compare { overflow-x: auto; }
}

@media (min-width: 782px) {
	.leap-hide-desktop { display: none !important; }
}

/* --------------------------------------------------------------------------
   15. CHUYỂN ĐỘNG
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link { transition: none; }
	.wp-block-button__link:hover { transform: none; }
	.leap-img-tilt img,
	.leap-stamp { transform: none; }
}

/* ==========================================================================
   16. NHỊP TRONG SECTION — phá vỡ tường chữ
   --------------------------------------------------------------------------
   Sales page LEAP rất nhiều chữ. Xen kẽ nền giữa các section chỉ giải quyết
   được nhịp ở tầng ngoài; bên trong một section 400 chữ vẫn là một khối đặc.
   Nhóm class dưới đây tạo nhịp Ở TRONG dòng chữ.

   Nguyên tắc dùng: cứ khoảng 2–3 đoạn văn thì chèn MỘT thiết bị. Chèn dày quá
   thì chính các thiết bị lại trở thành tiếng ồn.
   ========================================================================== */

/* Chữ cái đầu lớn — dùng cho đoạn mở đầu của phần nội dung dài */
.leap-dropcap::first-letter {
	float: left;
	font-size: 3.4em;
	line-height: .82;
	font-weight: 800;
	margin: .06em .12em 0 0;
	color: var(--wp--preset--color--leap-primary);
}

/* Tiêu đề phụ trong section — có vạch màu bên trái.
   Đây là thiết bị hiệu quả nhất: cứ 3–4 đoạn lại một cái, người đọc lướt vẫn
   nắm được mạch lập luận mà không phải đọc hết. */
.leap-minihead {
	position: relative;
	padding-left: 18px;
	margin-top: 1.5em !important;
}

.leap-minihead::before {
	content: "";
	position: absolute;
	left: 0;
	top: .12em;
	bottom: .12em;
	width: 5px;
	border-radius: 3px;
	background: var(--wp--preset--color--leap-primary);
}

/* Gạch chân trang trí dưới tiêu đề section */
.leap-underline-accent {
	position: relative;
	padding-bottom: .42em;
}

.leap-underline-accent::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 64px;
	height: 4px;
	border-radius: 3px;
	background: var(--wp--preset--color--leap-primary);
}

.leap-underline-accent.is-left::after {
	left: 0;
	transform: none;
}

/* Câu dẫn — đoạn đầu tiên sau tiêu đề, to và đậm hơn thân bài */
.leap-lede {
	font-weight: 600;
}

:where(.leap-lede) {
	color: var(--wp--preset--color--leap-heading);
}

/* Lớp đọc lướt: in đậm câu đầu của mỗi đoạn.
   Người lướt trang chỉ đọc phần đậm vẫn hiểu được lập luận. */
.leap-skim p strong:first-child {
	color: var(--wp--preset--color--leap-heading);
}

/* Khối chữ nền màu nhạt — nhẹ hơn hộp callout, dùng để tách một ý ra khỏi mạch */
.leap-note {
	background: var(--wp--preset--color--leap-bg-alt);
	border-radius: 10px;
	padding: 18px 22px !important;
}

.leap-note.is-tint {
	background: var(--wp--preset--color--leap-primary-soft);
}

/* Đoạn có vạch màu bên trái, không nền — nhấn nhẹ nhất */
.leap-marker {
	border-left: 3px solid var(--wp--preset--color--leap-primary);
	padding-left: 16px !important;
}

/* Thụt vào — dùng cho ví dụ, trích dẫn ngắn, phần phụ */
.leap-inset {
	padding-left: 24px;
	border-left: 1px solid var(--wp--preset--color--leap-border);
}

/* Ghi chú lề — nổi ra bên phải trên màn hình rộng, xuống dưới trên mobile */
.leap-sidenote {
	font-size: var(--wp--preset--font-size--leap-small);
	border-left: 3px solid var(--wp--preset--color--leap-accent);
	padding-left: 14px !important;
}

:where(.leap-sidenote) {
	color: var(--wp--preset--color--leap-muted);
}

@media (min-width: 1180px) {
	.leap-section.is-wide .leap-sidenote {
		float: right;
		width: 220px;
		margin: .3em -250px .8em 24px;
		border-left-width: 3px;
	}
}

/* Số nhịp — dấu mốc giữa các đoạn lập luận */
.leap-beat {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 2.2em !important;
	margin-bottom: 1.2em !important;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--leap-kicker);
}

:where(.leap-beat) {
	color: var(--wp--preset--color--leap-primary);
}

.leap-beat::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .3;
}

/* Đường phân cách có hoạ tiết */
.leap-ornament {
	text-align: center;
	margin-top: 2em !important;
	margin-bottom: 2em !important;
	line-height: 1;
}

.leap-ornament::before {
	content: "◆ ◆ ◆";
	letter-spacing: .7em;
	font-size: .62em;
	color: var(--wp--preset--color--leap-primary);
	opacity: .55;
}

/* Chữ chuyển sắc — dùng cho SỐ khổng lồ hoặc một từ trong tiêu đề.
   Đừng dùng cho cả câu dài: chữ chuyển sắc đọc mệt hơn chữ đặc. */
.leap-gradient-text {
	background-image: linear-gradient(96deg,
		var(--wp--preset--color--leap-primary) 0%,
		var(--wp--preset--color--leap-accent) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Tô nhấn chuyển sắc — mềm hơn nền đặc */
.leap-hl.is-gradient {
	background: linear-gradient(96deg,
		color-mix(in srgb, var(--wp--preset--color--leap-accent) 66%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--leap-primary) 30%, transparent) 100%);
	padding: 0 .18em;
	border-radius: 5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ==========================================================================
   17. HIỆU ỨNG MÀU NÂNG CAO
   ========================================================================== */

/* Nền chuyển sắc nhiều điểm — sang hơn gradient một trục */
.leap-section.is-mesh {
	background-image:
		radial-gradient(42% 46% at 14% 12%,
			color-mix(in srgb, var(--wp--preset--color--leap-primary) 20%, transparent) 0%, transparent 62%),
		radial-gradient(38% 42% at 86% 6%,
			color-mix(in srgb, var(--wp--preset--color--leap-accent) 22%, transparent) 0%, transparent 60%),
		radial-gradient(56% 52% at 50% 108%,
			color-mix(in srgb, var(--wp--preset--color--leap-primary) 14%, transparent) 0%, transparent 66%);
}

/* Vệt màu mảnh ở mép trên section — chuyển tiếp tinh tế giữa hai vùng sáng */
.leap-section.has-topline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--leap-primary) 0%,
		var(--wp--preset--color--leap-accent) 50%,
		var(--wp--preset--color--leap-primary) 100%);
}

/* Viền chuyển sắc cho thẻ — làm bằng hai lớp nền, không cần phần tử phụ */
.leap-card.is-gradient-border {
	border: 0 !important;
	background:
		linear-gradient(var(--wp--preset--color--leap-bg), var(--wp--preset--color--leap-bg)) padding-box,
		linear-gradient(135deg,
			var(--wp--preset--color--leap-primary),
			var(--wp--preset--color--leap-accent)) border-box;
	border: 2px solid transparent !important;
}

/* Thẻ trên nền tối — kính mờ */
.leap-card.is-glass {
	background: color-mix(in srgb, var(--wp--preset--color--leap-bg) 8%, transparent) !important;
	border-color: color-mix(in srgb, var(--wp--preset--color--leap-bg) 18%, transparent) !important;
	backdrop-filter: blur(10px);
	box-shadow: none;
}

/* Media & text lật hướng — xen kẽ trái phải cho chuỗi nhiều khối */
.wp-block-media-text.is-reverse {
	direction: rtl;
}

.wp-block-media-text.is-reverse > * {
	direction: ltr;
}

@media (max-width: 781px) {
	.leap-dropcap::first-letter { font-size: 2.8em; }
	.leap-sidenote { float: none !important; width: auto !important; margin-top: 1em !important; margin-bottom: 1em !important; }
	.leap-inset { padding-left: 18px; }
}