/* Hero — "Thong Kham" (Thai).
   A full-bleed lacquer stage that flows straight out of the dark header, so
   the top of the page reads as one continuous glossy mass — the arrangement
   every Thai reference site uses. It closes on a gold rule and a soft arc
   against the paper below.

   FULL BLEED: the block renders inside .xf2fc726b, so the stage breaks out
   with `calc(50% - 50vw)` and re-contains its own inner. That overflows by the
   scrollbar width, which is harmless ONLY because #page carries overflow-x:
   clip (base.css) — do not remove that guard. */

.x9d6fca17 {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: var(--sn-sp-12);
	padding: var(--sn-sp-12) 0 var(--sn-sp-16);
	background: var(--sn-lacquer-grad);
	border: 0;
	border-bottom: 3px solid transparent;
	border-image: var(--sn-gold-grad) 1;
	border-radius: 0;
	color: color-mix(in srgb, var(--sn-on-chrome) 82%, transparent);
	overflow: hidden;
}

/* Thai lattice: the "phum khao bin" diamond repeated at low opacity. Two
   crossed linear gradients cost nothing and give the lacquer a woven texture
   instead of a flat fill. */
.x9d6fca17::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image:
		repeating-linear-gradient(45deg, rgba(255, 203, 17, .05) 0 1px, transparent 1px 22px),
		repeating-linear-gradient(-45deg, rgba(255, 203, 17, .05) 0 1px, transparent 1px 22px);
}

/* A gold bloom behind the headline, so the stage is not evenly lit. */
.x9d6fca17::after {
	content: '';
	position: absolute;
	left: -10%;
	top: -60%;
	width: 70%;
	height: 160%;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(255, 203, 17, .16), transparent 70%);
}

.x03f73b5d {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sn-container);
	margin: 0 auto;
	padding: 0 var(--sn-sp-4);
}

@media (min-width: 768px) {
	.x03f73b5d {
		padding: 0 var(--sn-sp-6);
	}
}

/* Eyebrow: a gold-foil pill, the loudest small element on the page. */
.x694958e3 {
	display: inline-block;
	margin: 0 0 var(--sn-sp-4);
	padding: var(--sn-sp-1) var(--sn-sp-4);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-gold-grad);
	color: var(--sn-primary-dark);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-xs);
	font-weight: 600;
	letter-spacing: 0;
	box-shadow: var(--sn-glow);
}

.x11ffe0be {
	margin: 0 0 var(--sn-sp-6);
	color: var(--sn-on-chrome);
	font-size: clamp(2rem, 4.8vw, 3.25rem);
	font-weight: 800;
	letter-spacing: 0;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.xe09ca808 {
	max-width: 56ch;
	font-size: var(--sn-fs-md);
	line-height: 1.85;
}

.xe09ca808 > :first-child { margin-top: 0; }
.xe09ca808 > :last-child { margin-bottom: 0; }

/* Non-compact intro: clamped to 3 lines with the toggle (compact clamps to 2
   below) — full walls of intro text looked bad either way. */
.x9d6fca17:not(.x2596740d) .xe09ca808 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.x9d6fca17.is-expanded .xe09ca808 {
	display: block;
	overflow: visible;
}

/* Byline: one quiet line of running text, not a row of chips. */
.x37aed508 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sn-sp-2) var(--sn-sp-3);
	margin-top: var(--sn-sp-8);
	font-size: var(--sn-fs-xs);
	letter-spacing: 0;
	color: color-mix(in srgb, var(--sn-on-chrome) 66%, transparent);
}

.xaf4d1552 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	flex: 0 0 auto;
}

/* Middot between items instead of borders. */
.xaf4d1552 + .xaf4d1552::before {
	content: '·';
	margin-right: var(--sn-sp-1);
	color: color-mix(in srgb, var(--sn-on-chrome) 35%, transparent);
}

.x501c44ea {
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--sn-primary) 45%, transparent);
}

.xaf4d1552 svg {
	width: 13px;
	height: 13px;
	color: var(--sn-primary);
}

.x37aed508 a {
	color: var(--sn-on-chrome);
	font-weight: 700;
	text-decoration: none;
}

.x37aed508 a:hover,
.x37aed508 a:focus {
	color: var(--sn-primary);
}

/* CTA + trust chips variant. */
.x1486a12b {
	margin: var(--sn-sp-8) 0 0;
}

.x94e9f150 {
	list-style: none;
	display: grid;
	gap: var(--sn-sp-3);
	margin: var(--sn-sp-8) 0 0;
	padding: 0;
}

/* Glassy checklist row — the trust element Thai sites put beside the headline. */
.x7fe24aa2 {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	padding: var(--sn-sp-3) var(--sn-sp-4);
	border-radius: var(--sn-radius-sm);
	background: color-mix(in srgb, var(--sn-on-chrome) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--sn-primary) 22%, transparent);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	color: var(--sn-on-chrome);
	line-height: 1.55;
}

/* The icon sits in a filled gold disc — a tick on a dark stage needs the
   disc to be legible at 14px. */
.x7fe24aa2 svg {
	box-sizing: content-box;
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	padding: 5px;
	border-radius: 50%;
	background: var(--sn-gold-grad);
	color: var(--sn-primary-dark);
	box-shadow: 0 2px 10px rgba(255, 203, 17, .35);
}

/* ---------- Media (the hero photograph) ---------- */
/* This market is photo-led: the reference sites all put a large, glossy
   promotional image beside the headline. Unlike the Latin skins, the image
   renders in COMPACT mode too (see render.php). */

.x166867e3 {
	position: relative;
	margin: var(--sn-sp-8) 0 0;
}

.x166867e3 .x64ff3191 {
	width: 100%;
	border-radius: var(--sn-radius);
	border: 2px solid color-mix(in srgb, var(--sn-primary) 55%, transparent);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 203, 17, .18);
}

.x8245ebde {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-1);
	margin-top: var(--sn-sp-3);
	padding: 0;
	background: none;
	border: 0;
	color: var(--sn-primary);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	cursor: pointer;
}

.x8245ebde:hover,
.x8245ebde:focus {
	color: var(--sn-on-chrome);
}

.x8245ebde svg {
	transition: transform .15s ease;
}

.x9d6fca17.is-expanded .x8245ebde svg {
	transform: rotate(180deg);
}

/* ---------- Compact mode ---------- */

.x2596740d {
	padding: var(--sn-sp-8) 0 var(--sn-sp-12);
}

.x2596740d .x11ffe0be {
	font-size: clamp(1.75rem, 4.2vw, 2.75rem);
}

.x2596740d .xe09ca808 {
	font-size: var(--sn-fs-sm);
	line-height: 1.8;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.x2596740d.is-expanded .xe09ca808 {
	display: block;
	overflow: visible;
}

/*
 * Phone budget.
 *
 * The theme has a standing requirement that the first pick in the list below
 * is visible on a 375x667 phone. Two things on this skin ate into that: the
 * lacquer stage is taller than the flat Latin hero, and the sticky action bar
 * takes another 67px off the bottom of the viewport. Measured before this
 * block: only 39px of the first card cleared the bar.
 *
 * So the compact hero is deliberately tight below 768px. If you add anything
 * to the hero, re-measure at 375x667 rather than assuming there is room.
 */
@media (max-width: 767px) {
	.x2596740d {
		padding: var(--sn-sp-6) 0 var(--sn-sp-8);
	}

	.x2596740d .x694958e3 {
		margin-bottom: var(--sn-sp-3);
	}

	.x2596740d .x11ffe0be {
		font-size: 1.625rem;
		margin-bottom: var(--sn-sp-4);
	}

	.x2596740d .x37aed508,
	.x2596740d .x94e9f150 {
		margin-top: var(--sn-sp-4);
	}
}

/* ---------- Facts rail ---------- */

.x856e9809 .x94e9f150 {
	margin: 0;
}

/* When the image takes the right column, the chips drop under the text as a
   row instead (render.php adds --strip). */
.xf09f4321 {
	margin-top: var(--sn-sp-6);
}

@media (min-width: 640px) {
	.xf09f4321 {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
}

/* ---------- Layout ---------- */

@media (min-width: 768px) {
	.x03f73b5d {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		gap: var(--sn-sp-12);
		align-items: center;
	}

	.x369e0b68 {
		min-width: 0;
	}

	.x166867e3 {
		margin: 0;
	}

	.xb6e82eef {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--sn-sp-4) var(--sn-sp-6);
	}

	/* A hero with neither image nor rail keeps one column — a lone 0.85fr
	   gutter would push the headline off-centre for no reason. */
	.x03f73b5d:not(:has(.x166867e3)):not(:has(.x856e9809)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 920px) {
	.x2596740d .x03f73b5d {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--sn-sp-12);
		align-items: start;
	}

	.x2596740d .x856e9809 {
		margin-top: 0;
	}

	.x2596740d .x94e9f150 {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.x166867e3 .x64ff3191 {
		box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
	}
}