/* Nhận tin – newsletter/signup: dải một dòng, khối gọn, thư tay, bản tin xưởng; chế độ thành viên có danh sách quyền lợi.
 * Không có ô nhập (đăng ký qua Zalo OA hoặc email của khách). Chỉ dùng biến --vh-*. Mobile trước. */

.vh-nl {
	display: grid;
	gap: 16px;
	padding: var(--vh-card-pad);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-card);
	color: var(--vh-color-text);
}

.vh-alt .vh-nl {
	background: var(--vh-color-bg);
}

.vh-nl__text {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.vh-nl__eyebrow {
	margin: 0;
}

.vh-nl__title {
	margin: 0;
	font-family: var(--vh-font-heading);
	font-size: var(--vh-fs-h3);
	font-weight: var(--vh-fw-heading);
	line-height: var(--vh-lh-heading);
}

.vh-nl__lead {
	margin: 0;
	color: var(--vh-color-muted);
}

.vh-nl__benefits {
	margin-top: 4px;
}

.vh-nl__act {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.vh-nl__btns .vh-btn {
	flex: 1 1 auto;
}

.vh-nl__note {
	margin: 0;
	color: var(--vh-color-muted);
}

/* Dải một dòng: chữ trái, nút phải trên máy tính. */
@media (min-width: 1024px) {
	.vh-nl--band {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 32px;
		padding: 24px 32px;
	}

	.vh-nl--band .vh-nl__act {
		justify-items: end;
		max-width: 520px;
	}

	.vh-nl--band .vh-nl__note {
		text-align: right;
	}

	.vh-nl__btns .vh-btn {
		flex: 0 0 auto;
	}
}

/* Khối gọn: viền mảnh, không nền. */
.vh-nl--inline {
	max-width: 720px;
	margin-inline: auto;
	border: 1px solid var(--vh-color-border);
	background: transparent;
	text-align: center;
}

.vh-nl--inline .vh-nl__btns {
	justify-content: center;
}

/* Thư tay: giấy nền nhạt, đường kẻ trên dưới, tiêu đề nghiêng theo font của mẫu. */
.vh-nl--letter {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(24px, 4vw, 40px);
	border-top: 3px double var(--vh-color-border-strong);
	border-bottom: 3px double var(--vh-color-border-strong);
	border-radius: 0;
	background: var(--vh-color-surface-2, var(--vh-color-surface));
	text-align: center;
}

.vh-nl--letter .vh-nl__title {
	font-size: var(--vh-fs-h2);
}

.vh-nl--letter .vh-nl__btns {
	justify-content: center;
}

/* Bản tin xưởng: chữ in đậm, viền dày màu chữ, nhãn mono. */
.vh-nl--zine {
	border: var(--vh-border-width, 2px) solid var(--vh-color-text);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-bg);
}

.vh-nl--zine .vh-nl__eyebrow {
	font-family: var(--vh-font-accent, var(--vh-font-body));
	letter-spacing: var(--vh-ls-label, 0.08em);
	text-transform: uppercase;
}

.vh-nl--zine .vh-nl__title {
	font-size: var(--vh-fs-h2);
	text-transform: var(--vh-label-transform, none);
}

@media (min-width: 1024px) {
	.vh-nl--zine {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: 32px;
	}
}

/* Dải tối (options.bg = deep): khối trong suốt, viền nhạt. */
.vh-deep .vh-nl {
	border-color: color-mix(in srgb, currentColor 28%, transparent);
	background: transparent;
	color: inherit;
}

.vh-deep .vh-nl__lead,
.vh-deep .vh-nl__note {
	color: var(--vh-color-muted-on-deep);
}