/* AUTO-GENERATED by build.sh — do not edit.
   Source of truth: helios-design-theme/assets/css/core.css
   Edit the theme copy and re-run ./build.sh. */
/* ===========================================================================
   Helios Design — Core primitives

   Every shared `.hl-*` class used by BOTH the theme templates and the
   helios-design-widgets Elementor widgets. Widget CSS files add only what is
   unique to that widget and assume everything here already exists.

   Owned by the theme. build.sh copies this file (and tokens.css) into
   helios-design-widgets/assets/css/fallback/ so the plugin can register the
   same handles when it runs on a different theme — there is one source, never
   two hand-maintained copies.

   Handle: hl-core   Depends: hl-tokens
   ======================================================================== */

/* ---------------------------------------------------------------------------
   Box model

   This lives here and not only in the theme's style.css on purpose. The slide
   sets `height:100dvh` and then adds its own padding, so with the default
   `content-box` every slide is one viewport PLUS 266px of padding and the scroll
   snap lands mid-slide on every step. The widgets must not depend on a reset
   that ships in a different package — hl-core is what they declare as their
   dependency, so the reset belongs here.
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   Grain overlay — rendered once for the whole document.
   ------------------------------------------------------------------------ */
.hl-grain {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	background-image: var(--hl-grain);
	opacity: .16;
	mix-blend-mode: overlay;
}

/* ---------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------ */
.hl-wrap       { width: 100%; max-width: var(--hl-wrap);      margin-inline: auto; }
.hl-wrap--wide { max-width: var(--hl-wrap-wide); }
.hl-wrap--prose{ max-width: var(--hl-wrap-prose); }
.hl-pad        { padding-inline: var(--hl-pad); }

/* A conventional (non-deck) section rhythm. */
.hl-section { padding-block: clamp(56px, 9vw, 120px); }
.hl-section--ink   { background: var(--hl-ink); }
.hl-section--ink-2 { background: var(--hl-ink-2); }
.hl-section--ink-3 { background: var(--hl-ink-3); }

/* ---------------------------------------------------------------------------
   Type primitives
   ------------------------------------------------------------------------ */
.hl-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 26px;
	font-family: var(--hl-f-body);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--hl-sun);
}
.hl-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 38px;
	height: 1px;
	background: var(--hl-sun);
	opacity: .55;
}
.hl-eyebrow--plain::before { display: none; }

.hl-display {
	font-family: var(--hl-f-display);
	font-size: clamp(2.9rem, 8.4vw, 7.6rem);
	font-weight: 400;
	line-height: .94;
	letter-spacing: -.01em;
	margin: 0 0 30px;
}
.hl-display em {
	font-style: italic;
	color: var(--hl-sun);
}

.hl-h2 {
	font-family: var(--hl-f-display);
	font-size: clamp(2rem, 4.6vw, 4rem);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -.01em;
	margin: 0;
}

.hl-h3 {
	font-family: var(--hl-f-display);
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	font-weight: 400;
	line-height: 1.16;
	margin: 0;
}

.hl-lead {
	max-width: 46ch;
	margin: 0;
	font-size: clamp(.95rem, 1.15vw, 1.08rem);
	font-weight: 300;
	line-height: 1.85;
	color: var(--hl-cream-dim);
}

.hl-tiny {
	font-size: .66rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--hl-cream-faint);
}

.hl-dim   { color: var(--hl-cream-dim); }
.hl-faint { color: var(--hl-cream-faint); }
.hl-sun   { color: var(--hl-sun); }

/* Section head shared by every reel / grid section. */
.hl-sec-head {
	width: 100%;
	max-width: var(--hl-wrap);
	margin: 0 auto 46px;
}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */
.hl-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 15px 30px;
	border: 1px solid var(--hl-sun);
	border-radius: 999px;
	background: var(--hl-sun);
	color: var(--hl-btn-ink);
	font-family: var(--hl-f-body);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .18em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	transition: .45s var(--hl-ease);
}
.hl-btn:hover,
.hl-btn:focus-visible {
	background: var(--hl-sun-hot);
	border-color: var(--hl-sun-hot);
	color: var(--hl-btn-ink);
	transform: translateY(-2px);
	box-shadow: var(--hl-shadow-btn);
}

/* Secondary. No glow: the shadow is reserved for one primary CTA per slide. */
.hl-btn--ghost {
	background: none;
	border-color: var(--hl-line);
	color: var(--hl-cream);
}
.hl-btn--ghost:hover,
.hl-btn--ghost:focus-visible {
	background: rgba(242, 234, 224, .06);
	border-color: var(--hl-cream);
	color: var(--hl-cream);
	box-shadow: none;
}

/* Hotline pill used in the brand bar. */
.hl-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px;
	border: 1px solid var(--hl-line);
	border-radius: 999px;
	font-family: var(--hl-f-body);
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hl-cream);
	transition: .4s var(--hl-ease);
}
.hl-pill:hover {
	background: var(--hl-cream);
	border-color: var(--hl-cream);
	color: var(--hl-ink);
}

/* Inline "read more" arrow link. */
.hl-go {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hl-sun);
	transition: gap .4s var(--hl-ease), color .4s var(--hl-ease);
}

/* ---------------------------------------------------------------------------
   Media slot
   One custom property (--hl-img) swaps a real asset in; without it the slot
   falls back to an art-directed gradient so the layout still reads.
   ------------------------------------------------------------------------ */
.hl-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--hl-img, var(--hl-media-fallback));
	background-size: cover;
	background-position: center;
	transform: scale(1.06);
	transition: transform 12s var(--hl-ease);
}
.hl-media--video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.is-active .hl-media { transform: scale(1); }

.hl-scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hl-scrim);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Reveal on activation
   Disabled wholesale under prefers-reduced-motion (bottom of this file).
   ------------------------------------------------------------------------ */
[data-hl-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 1s var(--hl-ease), transform 1.1s var(--hl-ease);
	transition-delay: var(--hl-d, 0s);
}
.is-active [data-hl-reveal],
.hl-revealed [data-hl-reveal],
[data-hl-reveal].hl-revealed {
	opacity: 1;
	transform: none;
}

[data-hl-reveal="line"] {
	opacity: 1;
	transform: none;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.4s var(--hl-ease);
	transition-delay: var(--hl-d, 0s);
}
.is-active [data-hl-reveal="line"],
[data-hl-reveal="line"].hl-revealed {
	clip-path: inset(0 0 0 0);
}

/* ---------------------------------------------------------------------------
   Horizontal reel
   Its own x-scroll container inside the vertical deck. The slide must keep
   `min-width:0` on children or a wide reel stretches the page (see
   design/DESIGN-helios-design.md §5).
   ------------------------------------------------------------------------ */
.hl-reel-head {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-end;
	justify-content: space-between;
	max-width: 100%;
	margin-bottom: 34px;
	padding-inline: var(--hl-pad);
}

.hl-reel-nav {
	display: flex;
	gap: 8px;
	align-items: center;
}
.hl-reel-nav .hl-btn { margin-right: 8px; }
.hl-reel-nav button {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--hl-line);
	border-radius: 50%;
	background: none;
	color: var(--hl-cream);
	transition: .4s var(--hl-ease);
}
.hl-reel-nav button:hover {
	border-color: var(--hl-sun);
	color: var(--hl-sun);
}
.hl-reel-nav button[disabled] {
	opacity: .3;
	cursor: default;
}

.hl-reel {
	display: flex;
	gap: 20px;
	width: 100%;
	max-width: 100%;
	padding: 6px var(--hl-pad);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.hl-reel::-webkit-scrollbar { display: none; }
.hl-reel > * { scroll-snap-align: center; }

/* ---------------------------------------------------------------------------
   Project card (reel + grid)
   ------------------------------------------------------------------------ */
.hl-card {
	position: relative;
	flex: 0 0 clamp(260px, 26vw, 400px);
	height: clamp(260px, calc(100vh - 500px), 540px);
	min-height: 260px;
	overflow: hidden;
	border-radius: var(--hl-radius);
	isolation: isolate;
	color: var(--hl-cream);
	transition: transform .6s var(--hl-ease);
}
.hl-card .hl-media {
	z-index: 0;
	transform: scale(1.04);
	transition: transform 1.4s var(--hl-ease);
}
.hl-card:hover .hl-media,
.hl-card:focus-visible .hl-media { transform: scale(1.1); }
.hl-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--hl-scrim-card);
}
.hl-card:hover,
.hl-card:focus-visible { transform: translateY(-8px); }

.hl-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 26px;
}
.hl-card__body h3 {
	margin: 0 0 8px;
	font-family: var(--hl-f-display);
	font-weight: 400;
	font-size: 1.68rem;
	line-height: 1.12;
}
.hl-card__loc {
	margin: 0;
	font-size: .8rem;
	color: var(--hl-cream-dim);
}
.hl-card .hl-go {
	margin-top: 18px;
	opacity: 0;
	transform: translateY(6px);
	transition: .5s var(--hl-ease);
}
.hl-card:hover .hl-go,
.hl-card:focus-visible .hl-go {
	opacity: 1;
	transform: none;
}

/* Meta chips */
.hl-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin-top: 14px;
	padding: 0;
	list-style: none;
}
.hl-meta span,
.hl-meta li {
	padding: 5px 11px;
	border: 1px solid var(--hl-line);
	border-radius: 999px;
	font-size: .6rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hl-cream-dim);
	backdrop-filter: blur(3px);
}
.hl-meta .hl-meta__hl,
.hl-meta li.hl-meta__hl {
	border-color: var(--hl-sun);
	color: var(--hl-sun);
}

/* ---------------------------------------------------------------------------
   Filter chips (project archive / style filter)
   ------------------------------------------------------------------------ */
.hl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}
.hl-chip {
	padding: 9px 18px;
	border: 1px solid var(--hl-line);
	border-radius: 999px;
	background: none;
	color: var(--hl-cream-dim);
	font-size: .64rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: .4s var(--hl-ease);
}
.hl-chip:hover { border-color: var(--hl-cream); color: var(--hl-cream); }
.hl-chip[aria-pressed="true"] {
	background: var(--hl-sun);
	border-color: var(--hl-sun);
	color: var(--hl-btn-ink);
}

/* ---------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------ */
.hl-form { display: grid; gap: 16px; }
.hl-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.hl-field {
	position: relative;
	display: grid;
	gap: 7px;
}
.hl-field label {
	font-size: .62rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hl-cream-faint);
}
.hl-field input,
.hl-field select,
.hl-field textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--hl-line);
	border-radius: 2px;
	background: rgba(242, 234, 224, .04);
	color: var(--hl-cream);
	font-family: var(--hl-f-body);
	font-size: .92rem;
	font-weight: 300;
	transition: .35s var(--hl-ease);
}
.hl-field textarea { min-height: 88px; resize: vertical; }
.hl-field select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--hl-sun) 50%),
		linear-gradient(135deg, var(--hl-sun) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
.hl-field select option {
	background: var(--hl-ink-2);
	color: var(--hl-cream);
}
.hl-field :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--hl-sun);
	background: rgba(217, 154, 78, .07);
}
/* Reserve the error slot so validation text never shifts the layout. */
.hl-field__err {
	min-height: 1em;
	font-size: .66rem;
	color: var(--hl-error);
}
.hl-form__note {
	margin: 0;
	font-size: .7rem;
	line-height: 1.7;
	color: var(--hl-cream-faint);
}

/* Below 720px a two-up row leaves ~167px per field on a 390px phone, which is
   too narrow for a phone number and for the "Loại hình" select's own options.
   Stack them. */
@media (max-width: 720px) {
	.hl-form__row { grid-template-columns: 1fr; }
}

.hl-form-ok {
	display: none;
	padding: 26px;
	border: 1px solid var(--hl-sun);
	border-radius: var(--hl-radius);
	background: rgba(217, 154, 78, .10);
}
.hl-form-ok.is-shown {
	display: block;
	animation: hl-pop .6s var(--hl-ease);
}
.hl-form-ok h3 {
	margin: 0 0 8px;
	font-size: 1.6rem;
	color: var(--hl-sun);
}
.hl-form-ok p {
	margin: 0;
	font-size: .86rem;
	line-height: 1.7;
	color: var(--hl-cream-dim);
}
@keyframes hl-pop { from { opacity: 0; transform: translateY(14px); } }

/* Honeypot: hidden from sight, still submitted by bots. */
.hl-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Empty state — shown when a dynamic widget has no content yet, so the client
   sees why a section is blank instead of an unexplained gap.
   ------------------------------------------------------------------------ */
.hl-empty {
	padding: 34px;
	border: 1px dashed var(--hl-line);
	border-radius: var(--hl-radius);
	color: var(--hl-cream-faint);
	font-size: .84rem;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Reduced motion — kill everything the design uses for delight, keep it usable
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	html { scroll-behavior: auto; }
	[data-hl-reveal] { opacity: 1; transform: none; }
	[data-hl-reveal="line"] { clip-path: none; }
	.hl-media { transform: none; }
}

/* ---------------------------------------------------------------------------
   Widget colour bridge

   Every helios-design-widgets widget puts `.hl-w` on its root element, and its
   Elementor colour controls write CSS custom properties onto that same element
   (see Helios_Widget_Base::add_color_var_control).

   Mapping the variables to properties in ONE place here, rather than emitting a
   `selectors` rule per element per widget, means:
     - the generated Elementor CSS stays tiny (one declaration, not twenty),
     - one control restyles every element that references the variable,
     - clearing a control falls back to the design token instead of forcing an
       inline override on every instance.
   ------------------------------------------------------------------------ */

.hl-w { background-color: var(--hl-w-bg, transparent); }

.hl-w :is(h1, h2, h3, h4, .hl-display, .hl-h2, .hl-h3),
.hl-w .hl-card__body h3,
.hl-w blockquote {
	color: var(--hl-w-heading, var(--hl-cream));
}

.hl-w p,
.hl-w .hl-lead,
.hl-w li,
.hl-w dd,
.hl-w figcaption {
	color: var(--hl-w-body, var(--hl-cream-dim));
}

.hl-w .hl-eyebrow,
.hl-w .hl-tiny,
.hl-w .hl-field label,
.hl-w dt {
	color: var(--hl-w-label, var(--hl-sun));
}
.hl-w .hl-eyebrow::before { background: var(--hl-w-label, var(--hl-sun)); }
.hl-w .hl-tiny,
.hl-w .hl-field label,
.hl-w dt { color: var(--hl-w-label-muted, var(--hl-cream-faint)); }

.hl-w .hl-go,
.hl-w .hl-icon,
.hl-w .hl-accent,
.hl-w .hl-display em {
	color: var(--hl-w-accent, var(--hl-sun));
}

.hl-w a:not(.hl-btn):not(.hl-card):not(.hl-pcard):hover {
	color: var(--hl-w-accent, var(--hl-sun-hot));
}

.hl-w .hl-btn {
	background-color: var(--hl-w-btn-bg, var(--hl-sun));
	border-color: var(--hl-w-btn-bg, var(--hl-sun));
	color: var(--hl-w-btn-text, var(--hl-btn-ink));
}
.hl-w .hl-btn:hover,
.hl-w .hl-btn:focus-visible {
	background-color: var(--hl-w-btn-hover-bg, var(--hl-sun-hot));
	border-color: var(--hl-w-btn-hover-bg, var(--hl-sun-hot));
	color: var(--hl-w-btn-hover-text, var(--hl-btn-ink));
}
.hl-w .hl-btn--ghost {
	background-color: transparent;
	border-color: var(--hl-w-border, var(--hl-line));
	color: var(--hl-w-heading, var(--hl-cream));
}
.hl-w .hl-btn--ghost:hover,
.hl-w .hl-btn--ghost:focus-visible {
	background-color: rgba(242, 234, 224, .06);
	border-color: var(--hl-w-heading, var(--hl-cream));
	color: var(--hl-w-heading, var(--hl-cream));
}

.hl-w .hl-meta span,
.hl-w .hl-meta li,
.hl-w .hl-chip,
.hl-w .hl-reel-nav button,
.hl-w .hl-field :is(input, select, textarea),
.hl-w .hl-pcard,
.hl-w .hl-empty {
	border-color: var(--hl-w-border, var(--hl-line));
}
.hl-w .hl-meta .hl-meta__hl { border-color: var(--hl-w-accent, var(--hl-sun)); color: var(--hl-w-accent, var(--hl-sun)); }