/*
 * Hero "B" (offer card) + text lockup for landing pages whose content carries `.kn-hero--b`.
 * Loaded only on those pages (inc/hero-lockup.php).
 *
 * Lockup fonts: three SIL OFL 1.1 families subset to the characters of the lockup lines only
 * (assets/fonts/lockup/, licence texts in licenses/). Changing a lockup line means re-subsetting
 * the font, otherwise the new glyphs fall back to the next family in the stack.
 *
 * Lockup sizes are in em of `.kn-lockup` font-size (12px in the head, 10.5px in the price tag and
 * on phones), so one number scales the whole block. Everything else is on the 8px grid.
 * The Gravity Forms block inside `.kn-form-card` is styled by its own classes; nothing here
 * reaches into the form.
 */

@font-face {
	font-family: 'Great Vibes';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lockup/great-vibes-lockup-vi.woff2') format('woff2');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lockup/montserrat-400-lockup-vi.woff2') format('woff2');
}
@font-face {
	font-family: 'Fjalla One';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lockup/fjalla-one-lockup-vi.woff2') format('woff2');
}

/* ---------- section ---------- */
.kn-hero {
	box-sizing: border-box;
	background-color: var(--kn-primary);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.kn-hero .kn-lockup p,
.kn-cta-lockup .kn-lockup p,
.kn-lockup.kn-cta-tag p,
.kn-hero .kn-hero__price,
.kn-hero .kn-hero__note {
	margin: 0;
}

/* The model photo is cut straight at both sides; fade 8% of each edge into the background. */
.kn-hero .kn-hero__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* ---------- >=992px: two columns (lockup + photo | offer card) ---------- */
.kn-hero--b .kn-hero__inner {
	box-sizing: content-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 48px;
	max-width: 1170px;
	margin: 0 auto;
	padding: 24px 32px 0;
}
.kn-hero--b .kn-hero__head {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 8px;
	text-align: center;
}
.kn-hero--b .kn-hero__head .kn-lockup {
	font-size: 12px;
}
.kn-hero--b .kn-hero__media {
	grid-column: 1;
	grid-row: 2;
	align-self: end;
}
.kn-hero--b .kn-hero__form {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	display: flex;
	flex-direction: column;
	margin: 40px 0 24px;
	border-radius: 16px;
	background-color: var(--kn-primary);
}
/* Price tag rides the top edge of the card: half inside, half outside. */
.kn-hero--b .kn-hero__tag {
	align-self: center;
	width: auto;
	margin-top: -2.75em;
	font-size: 10.5px;
}
.kn-hero--b .kn-hero__price {
	margin-top: 16px;
	padding: 0 24px;
	color: #f7cd8b;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	text-align: center;
	text-wrap: balance;
}
.kn-hero--b .kn-form-card {
	box-sizing: border-box;
	padding: 32px 24px;
	border-radius: 16px;
	background-color: var(--kn-primary);
}
.kn-hero--b .kn-hero__note {
	margin-top: -8px;
	padding: 0 24px 24px;
	color: var(--base-3);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	text-align: center;
	text-wrap: balance;
}

/* ---------- <=991px: one column, lockup -> photo -> card ---------- */
@media (max-width: 991px) {
	.kn-hero--b .kn-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		padding: 24px 24px 0;
	}
	.kn-hero--b .kn-hero__head,
	.kn-hero--b .kn-hero__media,
	.kn-hero--b .kn-hero__form {
		grid-column: 1;
		grid-row: auto;
		width: 75%;
		justify-self: center;
	}
	/* mask-image makes the photo a stacking context, so it would paint over the price badge that rides the card edge:
	   lift the card above it. The photo file ends in a straight cut; in one column that edge is visible, so fade the
	   bottom 18% into the background and tuck it under the card. */
	.kn-hero--b .kn-hero__form {
		position: relative;
		z-index: 1;
		margin-top: 8px;
	}
	.kn-hero--b .kn-hero__media {
		margin-bottom: -40px;
	}
	.kn-hero--b .kn-hero__img {
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
			linear-gradient(to bottom, #000 82%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
			linear-gradient(to bottom, #000 82%, transparent 100%);
		mask-composite: intersect;
	}
}

/* ---------- <=767px: phones ---------- */
@media (max-width: 767px) {
	.kn-hero--b .kn-hero__inner {
		padding: 24px 16px 0;
	}
	.kn-hero--b .kn-hero__head,
	.kn-hero--b .kn-hero__media,
	.kn-hero--b .kn-hero__form {
		width: 100%;
	}
	.kn-hero--b .kn-hero__head .kn-lockup {
		font-size: 10.5px;
	}
}

/* ---------- lockup ---------- */
.kn-lockup {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 32em;
	max-width: 100%;
	font-size: 16px;
	font-style: normal;
	text-align: center;
}
.kn-lockup .kn-lockup__script {
	color: var(--base-3);
	font-family: 'Great Vibes', cursive;
	font-size: 6.5em;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.05em;
	white-space: nowrap;
	-webkit-text-stroke: 0.012em var(--base-3);
	filter: drop-shadow(0 0 0.02em var(--kn-primary-dark)) drop-shadow(0 0.02em 0.06em var(--kn-primary-dark));
}
.kn-lockup .kn-lockup__line {
	color: var(--base-3);
	font-family: 'Montserrat', sans-serif;
	font-size: 3.5em;
	font-weight: 400;
	line-height: 1.1;
	white-space: nowrap;
	filter: drop-shadow(0 0.02em 0.05em var(--kn-primary-dark));
}
.kn-lockup .kn-lockup__brand {
	background-image: linear-gradient(90deg, #a17d3f 0%, #f7cd8b 26%, #fecf7e 53%, #f7cd8b 82%, #a17d3f 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: 'Fjalla One', sans-serif;
	font-size: 7em;
	font-weight: 400;
	line-height: 1.12;
	white-space: nowrap;
}

/* Price tag: gift box (inline SVG) + one text block "ƯU ĐÃI 2999K/BUỔI"; label and price are inline spans of it,
   and the price stays one text node, so the visible string reads as a single phrase. */
.kn-lockup .kn-lockup__badge {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.375em 1.5em 0.375em 0;
	border: 0.125em solid var(--kn-primary-bg);
	border-radius: 1em;
	background-color: var(--base-3);
	box-shadow: 0 0 1em var(--kn-primary-bg);
	color: var(--kn-primary);
	font-family: 'Fjalla One', sans-serif;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	-webkit-text-stroke: 0.04em currentColor;
}
.kn-lockup .kn-lockup__gift {
	box-sizing: content-box;
	display: block;
	flex: none;
	width: 4em;
	height: 4em;
	margin-left: -1.25em;
	border: 0.125em solid var(--kn-primary-bg);
	border-radius: 0.5em;
	overflow: hidden;
}
.kn-lockup .kn-lockup__gift .gb-shape,
.kn-lockup .kn-lockup__gift svg {
	display: block;
	width: 100%;
	height: 100%;
}
.kn-lockup .kn-lockup__gift-bg {
	fill: var(--kn-primary);
}
.kn-lockup .kn-lockup__gift-fg {
	fill: var(--base-3);
}
.kn-lockup .kn-lockup__text {
	display: flex;
	align-items: center;
	gap: 0.75em;
}
.kn-lockup .kn-lockup__label {
	width: min-content;
	font-size: 1.375em;
	line-height: 1.05;
	text-align: left;
	white-space: normal;
}
/* Price: large number and smaller unit share one baseline; both spans stay inside .kn-lockup__price so the badge keeps one flex item. */
.kn-lockup .kn-lockup__price {
	font-size: 1em;
	line-height: 1;
}
.kn-lockup .kn-lockup__num {
	font-size: 4.5em;
	line-height: 1;
}
.kn-lockup .kn-lockup__unit {
	font-size: 2.5em;
	line-height: 1;
	letter-spacing: 0.06em;
}

/* ---------- closing call-to-action: same lockup above the form card, price tag riding the card's top edge ---------- */
.kn-cta-lockup {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.kn-cta-lockup .kn-lockup {
	font-size: 12px;
}
/* The column is a flex column with a 20px gap; pull the card up by the gap plus part of the tag height.
   2em (not 2.75em) inside the card leaves about 9px between the tag and the first field (card padding 30px). */
.kn-lockup.kn-cta-tag {
	position: relative;
	z-index: 2;
	align-self: center;
	width: auto;
	margin-bottom: calc(-20px - 2em);
	font-size: 10.5px;
}
/* The tag's glow reaches ~10px below its box, so the card needs extra top padding for the first field to breathe. */
#dang-ky-ngay .gb-element-k09c37f7b {
	padding-top: 54px; /* block default 30px + 24px */
}
/* The group photo file ends in a straight cut; fade its bottom 20% into the background. */
#dang-ky-ngay img.kn-pg-img {
	-webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
@media (max-width: 767px) {
	.kn-cta-lockup .kn-lockup {
		font-size: 10.5px;
	}
}