/* ==========================================================================
   Sun Trường Vinh — hệ thống thiết kế

   Bảng màu lấy từ chính bộ phối cảnh dự án: đồng thau và vàng champagne của
   sảnh, đá ngà, gỗ ấm, mảng xanh cảnh quan, và nền mực thẫm của thành Vinh về
   đêm. Sự sang trọng đến từ khoảng trắng, chữ và tiết chế, không đến từ trang
   trí.

   Ba tông vàng, không phải một:
     --stv-gold        #c6a15b  vàng champagne, dùng cho nét, viền, chi tiết
     --stv-gold-text   #805c1e  chữ trên nền sáng (5.7:1 trên ngà, 5.0:1 trên cát)
     --stv-gold-soft   #ddbe86  chữ và liên kết trên nền tối (9.3:1)
   Dùng nhầm --stv-gold cho chữ trên nền ngà sẽ tụt xuống 2.3:1 và trượt WCAG AA.
   --stv-slate-light #65717c là màu của chữ [CHỜ CÔNG BỐ]: nhạt hơn chữ thường
   nhưng vẫn đạt 4.67:1, vì trên dự án này số mục chờ công bố còn nhiều.
   ========================================================================== */

/* ==========================================================================
   Typefaces, self-hosted.

   Served from this origin rather than fonts.googleapis.com. That removes two
   third-party connections (DNS, TLS, then a CSS round trip before the font
   files are even discovered) from the critical path — on a Vietnamese mobile
   connection that is most of a second before any text can paint.

   unicode-range splits Latin from Vietnamese so an English page never
   downloads the Vietnamese glyphs, and vice versa.
   ========================================================================== */

/* --- Cormorant Garamond: display ---------------------------------------- */

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-vietnamese-300-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-vietnamese-400-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-vietnamese-300-italic.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Inter: body -------------------------------------------------------- */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/inter-vietnamese-300-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/inter-latin-300-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-vietnamese-400-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-vietnamese-500-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Size-matched fallbacks --------------------------------------------- */
/*
   font-display: swap paints text immediately in a system font, then swaps.
   That swap moves the text and costs CLS unless the fallback occupies the same
   space. These two faces scale a system font so its x-height matches the web
   font almost exactly — the values below were measured from the actual font
   files, not estimated:

     Cormorant Garamond  x-height 0.3860 em   Times New Roman 0.448 → 86.16%
     Inter               x-height 0.5459 em   Arial           0.519 → 105.18%
*/
@font-face {
	font-family: "Cormorant Fallback";
	src: local("Times New Roman"), local("Times"), local("Liberation Serif");
	size-adjust: 86.16%;
	ascent-override: 107.24%;
	descent-override: 33.31%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 105.18%;
	ascent-override: 92.11%;
	descent-override: 22.93%;
	line-gap-override: 0%;
}



:root {
	/* Colour */
	--stv-ivory: #faf7f1;
	--stv-warm-white: #fdfbf7;
	--stv-sand: #f0e9dc;
	--stv-champagne: #e4d3b4;
	--stv-ink: #14202b;
	--stv-ink-2: #1d2c39;
	--stv-slate: #5d6b78;
	--stv-slate-light: #65717c;
	--stv-jade: #2e5e52;
	--stv-gold: #c6a15b;
	--stv-gold-text: #805c1e;
	--stv-gold-soft: #ddbe86;

	/* Semantic */
	--stv-bg: var(--stv-ivory);
	--stv-surface: var(--stv-warm-white);
	--stv-charcoal: var(--stv-ink);
	--stv-charcoal-soft: var(--stv-ink-2);
	--stv-grey: var(--stv-slate);
	--stv-grey-light: var(--stv-slate-light);
	--stv-green: var(--stv-jade);
	--stv-beige: var(--stv-sand);
	--stv-bronze: var(--stv-gold-text);
	--stv-bronze-light: var(--stv-gold-soft);
	--stv-ink-soft: var(--stv-slate);
	--stv-line: rgba(20, 32, 43, 0.14);
	--stv-line-soft: rgba(20, 32, 43, 0.08);
	--stv-accent: var(--stv-gold-text);

	/* Type */
	--stv-display: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", Georgia, serif;
	--stv-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--stv-step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
	--stv-step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
	--stv-step-1: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
	--stv-step-2: clamp(1.45rem, 1.25rem + 0.95vw, 2rem);
	--stv-step-3: clamp(1.9rem, 1.5rem + 1.9vw, 3rem);
	--stv-step-4: clamp(2.4rem, 1.7rem + 3.2vw, 4.4rem);
	--stv-step-5: clamp(3rem, 1.8rem + 5.4vw, 6.5rem);

	/* Space */
	--stv-gutter: clamp(1.25rem, 5vw, 3.5rem);
	--stv-section: clamp(4.5rem, 9vw, 9.5rem);
	--stv-max: 1560px;
	--stv-measure: 68ch;

	/* Motion */
	--stv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--stv-slow: 900ms;
	--stv-fast: 260ms;

	--stv-header-h: 72px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--stv-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--stv-bg);
	color: var(--stv-ink);
	font-family: var(--stv-body);
	font-size: var(--stv-step-0);
	font-weight: 300;
	line-height: 1.68;
	letter-spacing: 0.005em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
iframe { border: 0; }

a { color: inherit; text-decoration: none; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
	font-family: var(--stv-display);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.012em;
	margin: 0 0 0.5em;
	color: var(--stv-ink);
}

h1 { font-size: var(--stv-step-4); }
h2 { font-size: var(--stv-step-3); }
h3 { font-size: var(--stv-step-2); }
h4 { font-size: var(--stv-step-1); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
li { margin-bottom: 0.35em; }

hr { border: 0; border-top: 1px solid var(--stv-line); margin: var(--stv-section) 0; }

blockquote {
	margin: 2.5rem 0;
	padding-left: 1.75rem;
	border-left: 1px solid var(--stv-champagne);
	font-family: var(--stv-display);
	font-size: var(--stv-step-2);
	font-style: italic;
	line-height: 1.35;
	color: var(--stv-charcoal-soft);
}

::selection { background: var(--stv-champagne); color: var(--stv-charcoal); }

:focus-visible {
	outline: 2px solid var(--stv-bronze);
	outline-offset: 3px;
	border-radius: 1px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.stv-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--stv-charcoal); color: var(--stv-ivory);
	padding: 12px 20px; font-size: 0.85rem;
}
.stv-skip:focus { left: 12px; top: 12px; }

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

.stv-wrap {
	width: 100%;
	max-width: var(--stv-max);
	margin-inline: auto;
	padding-inline: var(--stv-gutter);
}

.stv-wrap--narrow { max-width: 900px; }
.stv-wrap--text { max-width: 760px; }

/* The article header gets more room than the body copy. A long headline needs
   width to read as a headline rather than a stack of fragments, while the
   paragraphs below stay at a comfortable reading measure. */
.stv-wrap--head { max-width: 940px; }

.stv-section { padding-block: var(--stv-section); position: relative; }
.stv-section--tight { padding-block: calc(var(--stv-section) * 0.6); }
.stv-section--dark { background: var(--stv-charcoal); color: var(--stv-ivory); }
.stv-section--dark h1,
.stv-section--dark h2,
.stv-section--dark h3 { color: var(--stv-ivory); }
.stv-section--dark { --stv-line: rgba(246, 243, 237, 0.18); --stv-ink-soft: rgba(246, 243, 237, 0.66); }
.stv-section--surface { background: var(--stv-surface); }
.stv-section--beige { background: var(--stv-beige); }

.stv-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.stv-grid--2 { grid-template-columns: 1fr; }
.stv-grid--3 { grid-template-columns: 1fr; }
.stv-grid--4 { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Section head — the signature hairline + numeral
   -------------------------------------------------------------------------- */

.stv-rule {
	display: block;
	height: 1px;
	width: 100%;
	background: var(--stv-line);
	position: relative;
	margin-bottom: 1.75rem;
}
.stv-rule::before {
	content: "";
	position: absolute;
	left: 0; top: -2px;
	width: 5px; height: 5px;
	background: var(--stv-bronze);
}

.stv-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 62ch; }
.stv-head--center { margin-inline: auto; text-align: center; }
.stv-head--center .stv-rule::before { left: 50%; transform: translateX(-50%); }

.stv-eyebrow {
	font-size: var(--stv-step--1);
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-weight: 400;
	color: var(--stv-ink-soft);
	margin-bottom: 1rem;
}
.stv-eyebrow__num {
	font-family: var(--stv-display);
	font-style: italic;
	font-size: 1.15em;
	letter-spacing: 0;
	color: var(--stv-bronze);
	margin-right: 0.9em;
}

.stv-head__title {
	margin-bottom: 0.4em;
	/* Distribute the lines evenly instead of leaving one orphaned word on the
	   last line. Ignored by browsers that do not support it, which simply get
	   the ordinary greedy wrap. */
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* Long headings step down a size, very long ones step down twice. Measured
   against the 940px header: a 164-character Vietnamese title runs to seven
   lines at the display size, five at the next step and three at the one
   below — three is a headline, seven is a column. */
.stv-head__title.is-long { font-size: var(--stv-step-3); }
.stv-head__title.is-xlong {
	font-size: var(--stv-step-2);
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-wrap: pretty;
}

/* An article headline is set a little tighter than a section heading: it is
   read once, at the top, rather than scanned. */
/*
   A short headline is held to a narrow measure so it reads as a statement. A
   long one is given the whole column: at this size that is roughly 65
   characters a line, so a 164-character press-release title lands in three
   lines instead of seven. Capping it at 40ch would have wasted 300px of the
   header and stacked it back up again.
*/
.stv-head--article { max-width: none; }
.stv-head--article .stv-head__title { max-width: 22ch; }
.stv-head--article .stv-head__title.is-long { max-width: 34ch; }
.stv-head--article .stv-head__title.is-xlong { max-width: none; }
.stv-head--article .stv-head__lede { max-width: 62ch; }
.stv-head__lede {
	font-size: var(--stv-step-1);
	color: var(--stv-ink-soft);
	max-width: 54ch;
	line-height: 1.6;
}
.stv-head--center .stv-head__lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.stv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 48px;
	padding: 0.85em 2em;
	font-family: var(--stv-body);
	font-size: var(--stv-step--1);
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
	transition: background var(--stv-fast) var(--stv-ease),
		color var(--stv-fast) var(--stv-ease),
		border-color var(--stv-fast) var(--stv-ease);
}

.stv-btn--solid { background: var(--stv-charcoal); color: var(--stv-ivory); border-color: var(--stv-charcoal); }
.stv-btn--solid:hover { background: var(--stv-bronze); border-color: var(--stv-bronze); }

.stv-btn--line { border-color: currentColor; color: inherit; }
.stv-btn--line:hover { background: var(--stv-charcoal); color: var(--stv-ivory); border-color: var(--stv-charcoal); }

.stv-btn--quiet { padding-inline: 0.5em; color: inherit; letter-spacing: 0.1em; }
.stv-btn--quiet:hover { color: var(--stv-bronze); }

.stv-section--dark .stv-btn--solid { background: var(--stv-ivory); color: var(--stv-charcoal); border-color: var(--stv-ivory); }
.stv-section--dark .stv-btn--solid:hover { background: var(--stv-bronze-light); border-color: var(--stv-bronze-light); color: var(--stv-charcoal); }

.stv-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-top: 2rem; }

.stv-link {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-size: var(--stv-step--1);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--stv-line);
	transition: border-color var(--stv-fast) var(--stv-ease), color var(--stv-fast) var(--stv-ease);
}
.stv-link:hover { color: var(--stv-bronze); border-color: var(--stv-bronze); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.stv-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--stv-header-h);
	display: flex;
	align-items: center;
	background: var(--stv-ivory);
	border-bottom: 1px solid var(--stv-line-soft);
	transition: background 400ms var(--stv-ease), border-color 400ms var(--stv-ease), color 400ms var(--stv-ease);
}

.has-transparent-header .stv-header {
	background: transparent;
	border-bottom-color: transparent;
	color: var(--stv-ivory);
}
.has-transparent-header .stv-header.is-stuck {
	background: var(--stv-ivory);
	border-bottom-color: var(--stv-line-soft);
	color: var(--stv-charcoal);
}

.stv-header__inner {
	width: 100%;
	max-width: var(--stv-max);
	margin-inline: auto;
	padding-inline: var(--stv-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.stv-brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.stv-brand__mark {
	font-family: var(--stv-display);
	font-size: 1.35rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
}
.stv-brand__sub {
	display: none;
	font-size: 0.62rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: currentColor;
	opacity: 0.6;
}
.stv-brand img { max-height: 34px; width: auto; }

/* Thanh điều hướng ngang.
   
   Chín mục tiếng Việt viết hoa ("PHONG CÁCH SỐNG", "THÔNG TIN DỰ ÁN") rộng hơn
   nhiều so với menu tiếng Anh mà bộ chữ này được đặt ban đầu. Với cỡ chữ và
   giãn chữ cũ, riêng thanh menu đã cần khoảng 950px, cộng logo, số hotline và
   nút CTA thì header cần tới ~1530px — trong khi menu ngang lại được bật từ
   900px. Khoảng giữa hai con số đó là vùng menu tràn ra khỏi header: chữ bị ép,
   xuống dòng, hoặc đẩy nút CTA ra ngoài vùng nhìn thấy. Đúng vùng đó là độ rộng
   của laptop 1366 và 1440 — tức là gần như mọi máy của đội bán hàng.
   
   Ba thay đổi bên dưới, cùng với ngưỡng 1280px ở cuối file, đưa nhu cầu xuống
   khoảng 1140px để menu nằm gọn trong một hàng.
   
   Nếu sau này bạn thêm mục vào menu chính, hãy gom bớt xuống menu con: không có
   cỡ chữ nào cứu được một thanh menu 12 mục tiếng Việt. */
.stv-nav { display: none; }
.stv-nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(0.8rem, 0.25rem + 0.8vw, 1.35rem);
	list-style: none; margin: 0; padding: 0;
}
.stv-nav__item { margin: 0; position: relative; }
.stv-nav__link {
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	padding-block: 0.75rem;
	display: inline-block;
	position: relative;
}

/* Gạch chân: 2px và màu vàng đồng thay cho 1px màu chữ. Trên nền ngà, đây là
   chi tiết làm mục đang xem nổi hẳn lên mà không cần tô nền hay đóng khung. */
.stv-nav__link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0.3rem;
	width: 0; height: 2px;
	background: var(--stv-gold-text);
	transition: width var(--stv-fast) var(--stv-ease);
}
.stv-nav__link:hover::after,
.is-current > .stv-nav__link::after { width: 100%; }

/* Trên header trong suốt, chữ nằm đè lên ảnh hero. Ảnh phối cảnh có vùng sáng
   vùng tối, nên chữ ngà đôi chỗ bị chìm. Vàng champagne cho gạch chân và một
   lớp đổ bóng rất nhẹ giữ cho menu đọc được ở mọi vùng ảnh, mà không biến nó
   thành chữ có viền. */
.has-transparent-header .stv-header:not(.is-stuck) .stv-nav__link {
	text-shadow: 0 1px 14px rgba(10, 16, 22, 0.55);
}
.has-transparent-header .stv-header:not(.is-stuck) .stv-nav__link::after {
	background: var(--stv-gold-soft);
}

/* Mũi tên báo mục có menu con. Vẽ bằng hai cạnh viền thay vì ký tự, vì bộ chữ
   đã cắt bớt bảng ký tự nên không chắc còn glyph mũi tên. */
.stv-nav__item.has-children > .stv-nav__link { padding-right: 0.85rem; }
.stv-nav__item.has-children > .stv-nav__link::before {
	content: "";
	position: absolute;
	right: 0; top: 50%;
	width: 5px; height: 5px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: 0.65;
	transition: transform var(--stv-fast) var(--stv-ease);
}
.stv-nav__item.has-children:hover > .stv-nav__link::before {
	transform: translateY(-20%) rotate(225deg);
}

.stv-nav__sub {
	position: absolute; top: 100%; left: -1.25rem;
	min-width: 240px; padding: 0.6rem 0;
	background: var(--stv-warm-white);
	border: 1px solid var(--stv-line-soft);
	box-shadow: 0 18px 40px rgba(20, 32, 43, 0.13);
	list-style: none; margin: 0;
	opacity: 0; visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--stv-fast) var(--stv-ease), transform var(--stv-fast) var(--stv-ease);
	color: var(--stv-charcoal);
	z-index: 10;
}

/* Cầu nối vô hình giữa mục cha và menu con.
   
   Menu con nằm cách mục cha vài pixel. Không có dải này, chuột đi qua khoảng
   trống đó là hover đứt và menu đóng sập ngay trước khi con trỏ tới nơi — lỗi
   kinh điển của menu sổ xuống, và người dùng chỉ thấy "menu con không bấm được".
   
   Dải này chỉ xuất hiện khi đang hover, nếu không nó sẽ là một vệt vô hình nằm
   thường trực đè lên phần đầu nội dung trang và nuốt mất cú click ở đó. */
.stv-nav__item.has-children:hover::after,
.stv-nav__item.has-children:focus-within::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 14px;
}

.stv-nav__item:hover > .stv-nav__sub,
.stv-nav__item:focus-within > .stv-nav__sub {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.stv-nav__sub .stv-nav__item { width: 100%; }
.stv-nav__sub .stv-nav__link {
	padding: 0.55rem 1.25rem;
	display: block;
	letter-spacing: 0.05em;
	text-transform: none;
	font-size: 0.82rem;
	white-space: normal;
}
.stv-nav__sub .stv-nav__link::after { display: none; }
.stv-nav__sub .stv-nav__link:hover { background: var(--stv-sand); }

/* Menu con của mục cuối cùng dễ tràn ra ngoài mép phải màn hình. */
.stv-nav__list > .stv-nav__item:last-child .stv-nav__sub,
.stv-nav__list > .stv-nav__item:nth-last-child(2) .stv-nav__sub {
	left: auto; right: -1.25rem;
}

.stv-header__actions { display: flex; align-items: center; gap: 1rem; }
.stv-header__phone { display: none; font-size: 0.78rem; letter-spacing: 0.1em; }
.stv-header__cta { display: none; }

.stv-burger {
	width: 44px; height: 44px;
	display: inline-flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 5px;
	background: none; border: 0; cursor: pointer; color: inherit;
	margin-right: -10px;
}
.stv-burger span {
	display: block; width: 22px; height: 1px; background: currentColor;
	transition: transform var(--stv-fast) var(--stv-ease), opacity var(--stv-fast) var(--stv-ease);
}
.stv-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.stv-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.stv-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.stv-drawer {
	position: fixed; inset: 0; z-index: 99;
	background: var(--stv-ivory);
	color: var(--stv-charcoal);
	padding: calc(var(--stv-header-h) + 2rem) var(--stv-gutter) 2rem;
	overflow-y: auto;
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 480ms var(--stv-ease), visibility 480ms;
}
.stv-drawer.is-open { transform: translateY(0); visibility: visible; }
.stv-drawer .stv-nav__list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
.stv-drawer .stv-nav__item { width: 100%; border-bottom: 1px solid var(--stv-line-soft); }
.stv-drawer .stv-nav__link {
	font-family: var(--stv-display);
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	text-transform: none;
	padding: 0.85rem 0;
	width: 100%;
}
.stv-drawer .stv-nav__sub { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: none; padding: 0 0 0.75rem 1rem; min-width: 0; left: auto; right: auto; }
.stv-drawer .stv-nav__item.has-children > .stv-nav__link::before { display: none; }
.stv-drawer .stv-nav__sub .stv-nav__link { font-size: 1rem; padding: 0.35rem 0; }
.stv-drawer__foot { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero — the one bold moment
   -------------------------------------------------------------------------- */

.stv-hero {
	position: relative;
	/* 100vh first for browsers without small-viewport units; 100svh overrides
	   it where supported, so mobile address bars do not clip the hero. */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	color: var(--stv-ivory);
	overflow: hidden;
	background: var(--stv-charcoal);
}

.stv-hero__media { position: absolute; inset: 0; }
.stv-hero__media img,
.stv-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.stv-hero__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(25,24,23,0.5) 0%, rgba(25,24,23,0.08) 38%, rgba(25,24,23,0.72) 100%);
}

.stv-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--stv-max);
	margin-inline: auto;
	padding: 0 var(--stv-gutter) clamp(3.5rem, 8vh, 7rem);
}

.stv-hero__wordmark {
	font-family: var(--stv-display);
	font-size: var(--stv-step-5);
	font-weight: 300;
	line-height: 1;
	margin: 0 0 1.25rem;
	color: var(--stv-ivory);
	letter-spacing: 0.06em;
}

/* The horizon: a hairline set where the outlook sits, repeated as the
   section divider throughout the site. */
.stv-hero__horizon {
	display: block;
	width: min(420px, 60%);
	height: 1px;
	background: linear-gradient(90deg, var(--stv-bronze-light), rgba(224,210,184,0.1));
	margin-bottom: 1.75rem;
}

.stv-hero__lede {
	font-family: var(--stv-display);
	font-size: var(--stv-step-2);
	line-height: 1.25;
	max-width: 20ch;
	margin-bottom: 1rem;
	color: var(--stv-ivory);
}
.stv-hero__place {
	font-size: var(--stv-step--1);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	opacity: 0.78;
	margin-bottom: 2rem;
}
.stv-hero .stv-ctas { margin-top: 0; }
.stv-hero .stv-btn--line { border-color: rgba(246,243,237,0.55); color: var(--stv-ivory); }
.stv-hero .stv-btn--line:hover { background: var(--stv-ivory); color: var(--stv-charcoal); border-color: var(--stv-ivory); }
.stv-hero .stv-btn--solid { background: var(--stv-ivory); color: var(--stv-charcoal); border-color: var(--stv-ivory); }
.stv-hero .stv-btn--solid:hover { background: var(--stv-bronze-light); border-color: var(--stv-bronze-light); }

.stv-hero__scroll {
	position: absolute;
	right: var(--stv-gutter);
	bottom: clamp(3.5rem, 8vh, 7rem);
	display: none;
	writing-mode: vertical-rl;
	font-size: 0.66rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Chapter navigation
   -------------------------------------------------------------------------- */

.stv-chapters { border-top: 1px solid var(--stv-line); padding-top: 1.5rem; }
.stv-chapters__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem 1.5rem;
	list-style: none; margin: 0; padding: 0;
	counter-reset: none;
}
.stv-chapters__item { margin: 0; }
.stv-chapters__item a { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.82rem; }
.stv-chapters__item a:hover { color: var(--stv-bronze); }
.stv-chapters__num { font-family: var(--stv-display); font-style: italic; color: var(--stv-bronze); }
.stv-chapters__label { letter-spacing: 0.08em; }

/* --------------------------------------------------------------------------
   Project facts — "The Essentials"
   -------------------------------------------------------------------------- */

.stv-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--stv-line);
}
.stv-fact {
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--stv-line);
}
.stv-fact__label {
	font-size: var(--stv-step--1);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--stv-ink-soft);
	margin-bottom: 0.5rem;
}
.stv-fact__value {
	font-family: var(--stv-display);
	font-size: var(--stv-step-1);
	line-height: 1.3;
	margin: 0;
}
.stv-fact--pending .stv-fact__value {
	font-family: var(--stv-body);
	font-size: var(--stv-step--1);
	letter-spacing: 0.1em;
	color: var(--stv-grey-light);
}

/* --------------------------------------------------------------------------
   Chapters / editorial split blocks
   -------------------------------------------------------------------------- */

.stv-split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.stv-split__media { position: relative; }
.stv-split__media img { width: 100%; }
.stv-split__body { max-width: 52ch; }
.stv-split__caption {
	margin-top: 0.9rem;
	font-size: var(--stv-step--1);
	color: var(--stv-ink-soft);
	letter-spacing: 0.06em;
}

.stv-prose { max-width: var(--stv-measure); }
.stv-prose p { font-size: var(--stv-step-0); }
.stv-prose > h2 { margin-top: 2.5em; }
.stv-prose > h3 { margin-top: 2em; }
.stv-prose a { border-bottom: 1px solid var(--stv-champagne); }
.stv-prose a:hover { border-color: var(--stv-bronze); color: var(--stv-bronze); }
.stv-prose figure { margin: 2.5rem 0; }
.stv-prose figcaption { font-size: var(--stv-step--1); color: var(--stv-ink-soft); margin-top: 0.6rem; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.stv-card { display: flex; flex-direction: column; }
.stv-card__media { overflow: hidden; margin-bottom: 1.1rem; background: var(--stv-beige); }
.stv-card__media img { width: 100%; transition: transform var(--stv-slow) var(--stv-ease); }
.stv-card:hover .stv-card__media img { transform: scale(1.03); }
.stv-card__eyebrow {
	font-size: var(--stv-step--1);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--stv-ink-soft);
	margin-bottom: 0.5rem;
}
.stv-card__title {
	font-size: var(--stv-step-2);
	margin-bottom: 0.35em;
	text-wrap: balance;
	overflow-wrap: break-word;
}
.stv-card__title.is-long { font-size: var(--stv-step-1); }
.stv-card__title.is-xlong { font-size: var(--stv-step-1); line-height: 1.25; }
.stv-card__title a:hover { color: var(--stv-bronze); }
.stv-card__meta { font-size: var(--stv-step--1); color: var(--stv-ink-soft); letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.stv-card__text { color: var(--stv-ink-soft); margin-bottom: 1rem; }
.stv-card__foot { margin-top: auto; padding-top: 0.5rem; }

.stv-badge {
	display: inline-block;
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	padding: 0.35em 0.85em;
	border: 1px solid var(--stv-line);
	color: var(--stv-ink-soft);
}
.stv-badge--pending { border-style: dashed; }

/* Placeholder image block */
.stv-img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background:
		repeating-linear-gradient(135deg, rgba(154,116,67,0.045) 0 12px, transparent 12px 24px),
		var(--stv-beige);
	border: 1px solid var(--stv-line-soft);
}
.stv-img__mark {
	font-family: var(--stv-display);
	font-size: 1.5rem;
	letter-spacing: 0.3em;
	color: rgba(25, 24, 23, 0.22);
}

/* --------------------------------------------------------------------------
   Wellness pillars
   -------------------------------------------------------------------------- */

.stv-pillars { display: grid; gap: 0; border-top: 1px solid var(--stv-line); }
.stv-pillar {
	display: grid;
	gap: 0.4rem 2.5rem;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--stv-line);
}
.stv-pillar__name {
	font-family: var(--stv-display);
	font-size: var(--stv-step-2);
	margin: 0;
	color: var(--stv-green);
}
.stv-section--dark .stv-pillar__name { color: var(--stv-bronze-light); }
.stv-pillar__text { margin: 0; color: var(--stv-ink-soft); max-width: 58ch; }
.stv-pillar__media { margin: 1rem 0 0; }
.stv-pillar__media img { width: 100%; }
@media (min-width: 600px) {
	.stv-pillar--has-image { grid-template-columns: 200px 1fr 220px; }
	.stv-pillar--has-image .stv-pillar__media { margin: 0; }
}
@media (min-width: 900px) {
	.stv-pillar--has-image { grid-template-columns: 260px 1fr 280px; }
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.stv-filters {
	display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
	list-style: none; margin: 0 0 2.5rem; padding: 0 0 1rem;
	border-bottom: 1px solid var(--stv-line);
}
.stv-filters li { margin: 0; }
.stv-filters button {
	background: none; border: 0; cursor: pointer;
	font-family: var(--stv-body);
	font-size: var(--stv-step--1);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stv-ink-soft);
	padding: 0.4rem 0;
	border-bottom: 1px solid transparent;
}
.stv-filters button:hover { color: var(--stv-ink); }
.stv-filters button[aria-pressed="true"] { color: var(--stv-ink); border-bottom-color: var(--stv-bronze); }

.stv-gallery { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.stv-gallery__item { margin: 0; position: relative; }
.stv-gallery__item.is-hidden { display: none; }
.stv-gallery__btn {
	display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
	overflow: hidden;
}
.stv-gallery__btn img { width: 100%; transition: transform var(--stv-slow) var(--stv-ease); }
.stv-gallery__btn:hover img { transform: scale(1.035); }
.stv-gallery__cap {
	margin-top: 0.6rem;
	font-size: var(--stv-step--1);
	color: var(--stv-ink-soft);
}

/* Lightbox */
.stv-lightbox {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(15, 14, 13, 0.96);
	display: none;
	align-items: center; justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
}
.stv-lightbox.is-open { display: flex; }
.stv-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.stv-lightbox__figure img { max-height: 80vh; max-height: 80svh; width: auto; margin-inline: auto; }
.stv-lightbox__cap { color: rgba(246,243,237,0.75); font-size: var(--stv-step--1); margin-top: 1rem; }
.stv-lightbox__btn {
	position: absolute;
	background: none; border: 1px solid rgba(246,243,237,0.35);
	color: var(--stv-ivory);
	width: 48px; height: 48px;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.1rem;
}
.stv-lightbox__btn:hover { border-color: var(--stv-ivory); }
.stv-lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.stv-lightbox__prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.stv-lightbox__next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.stv-lightbox__count {
	position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%);
	color: rgba(246,243,237,0.6); font-size: 0.75rem; letter-spacing: 0.2em;
}

/* --------------------------------------------------------------------------
   Floor plan
   -------------------------------------------------------------------------- */

.stv-floorplan { background: var(--stv-warm-white); border: 1px solid var(--stv-line-soft); padding: clamp(1rem, 3vw, 2rem); }
.stv-floorplan__frame { overflow: hidden; background: var(--stv-ivory); cursor: zoom-in; }
.stv-floorplan__frame img { width: 100%; transition: transform 400ms var(--stv-ease); transform-origin: center; }
.stv-floorplan__frame.is-zoomed img { transform: scale(1.9); cursor: zoom-out; }
.stv-floorplan__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

.stv-spec { border-top: 1px solid var(--stv-line); margin: 0; }
.stv-spec__row { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--stv-line-soft); }
.stv-spec__key { color: var(--stv-ink-soft); font-size: var(--stv-step--1); letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.stv-spec__val { margin: 0; text-align: right; }

/* --------------------------------------------------------------------------
   Distance table
   -------------------------------------------------------------------------- */

/* Specification table --------------------------------------------------- */

.stv-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.stv-spectable {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	min-width: 560px;
}
.stv-spectable th,
.stv-spectable td {
	padding: 1rem 1.25rem 1rem 0;
	border-bottom: 1px solid var(--stv-line-soft);
	vertical-align: top;
}
.stv-spectable thead th {
	font-weight: 400;
	font-size: var(--stv-step--1);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--stv-ink-soft);
	border-bottom-color: var(--stv-line);
	white-space: nowrap;
}
.stv-spectable tbody th {
	font-weight: 400;
	font-size: var(--stv-step--1);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--stv-ink-soft);
	width: 30%;
}
.stv-spectable tbody td:first-of-type {
	font-family: var(--stv-display);
	font-size: var(--stv-step-1);
	line-height: 1.35;
}
.stv-spectable td:last-child {
	font-size: var(--stv-step--1);
	color: var(--stv-ink-soft);
	white-space: nowrap;
}
.stv-spectable tr.is-pending td:first-of-type {
	font-family: var(--stv-body);
	font-size: var(--stv-step--1);
	letter-spacing: 0.1em;
	color: var(--stv-grey-light);
}

.stv-factmeta {
	font-size: var(--stv-step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stv-ink-soft);
	margin-top: 1.5rem;
}
.stv-factgroup { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.stv-factgroup__name {
	font-size: var(--stv-step-1);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-family: var(--stv-body);
	font-weight: 400;
	color: var(--stv-ink-soft);
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--stv-line);
}

.stv-updated {
	margin-top: 1.5rem;
	font-size: var(--stv-step--1);
	color: var(--stv-ink-soft);
	font-style: italic;
}

/* FAQ -------------------------------------------------------------------- */

.stv-faq { border-top: 1px solid var(--stv-line); }
.stv-faq__item { border-bottom: 1px solid var(--stv-line); }
.stv-faq__q {
	list-style: none;
	cursor: pointer;
	padding: 1.4rem 2.5rem 1.4rem 0;
	position: relative;
}
.stv-faq__q::-webkit-details-marker { display: none; }
.stv-faq__q h3 {
	margin: 0;
	font-size: var(--stv-step-1);
	line-height: 1.35;
	text-wrap: balance;
}
.stv-faq__q::after {
	content: "+";
	position: absolute;
	right: 0; top: 1.3rem;
	font-family: var(--stv-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--stv-bronze);
	transition: transform var(--stv-fast) var(--stv-ease);
}
.stv-faq__item[open] .stv-faq__q::after { content: "–"; }
.stv-faq__q:hover h3 { color: var(--stv-bronze); }
.stv-faq__a { padding: 0 2.5rem 1.6rem 0; color: var(--stv-ink-soft); }
.stv-faq__a p:last-child { margin-bottom: 0; }

.stv-distances { width: 100%; border-collapse: collapse; }
.stv-distances th,
.stv-distances td { text-align: left; padding: 1rem 0.75rem 1rem 0; border-bottom: 1px solid var(--stv-line-soft); }
.stv-distances th {
	font-weight: 400; font-size: var(--stv-step--1);
	text-transform: uppercase; letter-spacing: 0.18em; color: var(--stv-ink-soft);
	border-bottom-color: var(--stv-line);
}
.stv-distances td:last-child, .stv-distances th:last-child { text-align: right; padding-right: 0; }
.stv-distances .is-pending { color: var(--stv-grey-light); font-size: var(--stv-step--1); letter-spacing: 0.08em; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.stv-form { max-width: 640px; }
.stv-form--compact { max-width: 460px; }
.stv-form__title { font-size: var(--stv-step-2); margin-bottom: 0.4em; }
.stv-form__intro { color: var(--stv-ink-soft); margin-bottom: 1.75rem; }
.stv-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.stv-form__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }

.stv-field { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.stv-field--full { grid-column: 1 / -1; }
.stv-field label {
	font-size: var(--stv-step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stv-ink-soft);
}
.stv-req { color: var(--stv-bronze); }

.stv-field input[type="text"],
.stv-field input[type="tel"],
.stv-field input[type="email"],
.stv-field select,
.stv-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 0;
	font-family: var(--stv-body);
	font-size: 1rem;
	color: var(--stv-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--stv-line);
	border-radius: 0;
	transition: border-color var(--stv-fast) var(--stv-ease);
	appearance: none;
}
.stv-field textarea { min-height: 96px; resize: vertical; padding-top: 0.5rem; }
.stv-field select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 8px center, right 3px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 22px;
}
.stv-field input:focus,
.stv-field select:focus,
.stv-field textarea:focus { outline: none; border-bottom-color: var(--stv-bronze); }
.stv-field.has-error input,
.stv-field.has-error select,
.stv-field.has-error textarea { border-bottom-color: #b3261e; }
.stv-field__error { color: #b3261e; font-size: var(--stv-step--1); text-transform: none; letter-spacing: 0; }

.stv-field--consent { flex-direction: row; margin-top: 1.75rem; }
.stv-field--consent label {
	display: flex; gap: 0.75rem; align-items: flex-start;
	text-transform: none; letter-spacing: 0; font-size: 0.86rem;
	line-height: 1.55; color: var(--stv-ink-soft); cursor: pointer;
}
.stv-field--consent input { margin-top: 0.3rem; accent-color: var(--stv-bronze); width: 18px; height: 18px; flex-shrink: 0; }
.stv-field--consent a { border-bottom: 1px solid var(--stv-champagne); }

.stv-form__actions { margin-top: 2rem; }
.stv-form__status { margin-top: 1rem; font-size: 0.9rem; min-height: 1.2em; }
.stv-form__status.is-ok { color: var(--stv-green); }
.stv-form__status.is-error { color: #b3261e; }
.stv-form.is-sending .stv-btn--solid { opacity: 0.6; pointer-events: none; }

.stv-section--dark .stv-field input,
.stv-section--dark .stv-field select,
.stv-section--dark .stv-field textarea { color: var(--stv-ivory); border-bottom-color: rgba(246,243,237,0.28); }
.stv-section--dark .stv-field input:focus,
.stv-section--dark .stv-field textarea:focus { border-bottom-color: var(--stv-bronze-light); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.stv-footer { background: var(--stv-charcoal); color: rgba(246,243,237,0.78); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.stv-footer a:hover { color: var(--stv-bronze-light); }
.stv-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.stv-footer__brand .stv-brand__mark { color: var(--stv-ivory); font-size: 1.5rem; }
.stv-footer__tag { margin-top: 1rem; max-width: 34ch; font-size: 0.9rem; }
.stv-footer h3 {
	font-family: var(--stv-body);
	font-size: var(--stv-step--1);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: rgba(246,243,237,0.5);
	margin-bottom: 1.1rem;
	font-weight: 400;
}
.stv-footer ul { list-style: none; margin: 0; padding: 0; }
.stv-footer li { margin-bottom: 0.55rem; font-size: 0.92rem; }
.stv-footer__bottom {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(246,243,237,0.14);
	display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
	font-size: 0.78rem; color: rgba(246,243,237,0.5);
}
.stv-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.stv-footer__note { max-width: 70ch; font-size: 0.78rem; line-height: 1.6; color: rgba(246,243,237,0.45); margin-top: 1rem; }
.stv-social { display: flex; gap: 1.25rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.stv-social a { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Floating contact + mobile action bar
   -------------------------------------------------------------------------- */

.stv-floating { display: none; }

.stv-mobilebar {
	position: fixed; inset: auto 0 0 0; z-index: 95;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: var(--stv-charcoal);
	border-top: 1px solid rgba(246,243,237,0.14);
	padding-bottom: env(safe-area-inset-bottom);
}
.stv-mobilebar a {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 3px; min-height: 56px; padding: 0.5rem 0.25rem;
	color: rgba(246,243,237,0.85);
	font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.stv-mobilebar a:last-child { background: var(--stv-bronze); color: var(--stv-charcoal); }
.stv-mobilebar svg { width: 17px; height: 17px; }

body { padding-bottom: 0; }
/* Chừa chỗ cho thanh thao tác cố định dưới đáy. Ngưỡng này phải khớp với ngưỡng
   ẩn thanh đó (1280px), nếu không thanh sẽ che mất phần cuối chân trang ở dải
   900–1279px. */
@media (max-width: 1023px) {
	body.has-mobilebar { padding-bottom: 64px; }
}

/* --------------------------------------------------------------------------
   Breadcrumbs, pagination, misc
   -------------------------------------------------------------------------- */

.stv-breadcrumbs { font-size: var(--stv-step--1); color: var(--stv-ink-soft); letter-spacing: 0.06em; margin-bottom: 1.5rem; }
.stv-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.stv-breadcrumbs li { margin: 0; }
.stv-breadcrumbs li + li::before { content: "—"; margin-right: 0.5rem; opacity: 0.5; }
.stv-breadcrumbs a:hover { color: var(--stv-bronze); }

.stv-pagination ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 3rem 0 0; padding: 0; justify-content: center; }
.stv-pagination li { margin: 0; }
.stv-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 0.75rem;
	border: 1px solid var(--stv-line); font-size: 0.85rem;
}
.stv-pagination .current { background: var(--stv-charcoal); color: var(--stv-ivory); border-color: var(--stv-charcoal); }

.stv-postnav {
	display: grid;
	gap: 1.5rem;
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--stv-line);
}
.stv-postnav__item { display: block; }
.stv-postnav__item .stv-eyebrow { margin-bottom: 0.4rem; }
.stv-postnav__title {
	font-family: var(--stv-display);
	font-size: var(--stv-step-1);
	line-height: 1.25;
}
.stv-postnav__item:hover .stv-postnav__title { color: var(--stv-bronze); }
@media (min-width: 600px) {
	.stv-postnav { grid-template-columns: 1fr 1fr; }
	.stv-postnav__item--next { text-align: right; }
}

.stv-note {
	font-size: var(--stv-step--1);
	color: var(--stv-ink-soft);
	border-left: 1px solid var(--stv-champagne);
	padding-left: 1rem;
	line-height: 1.6;
}

.stv-404 { min-height: 70vh; min-height: 70svh; display: flex; align-items: center; }
.stv-404__code { font-family: var(--stv-display); font-size: var(--stv-step-5); line-height: 1; color: var(--stv-champagne); margin-bottom: 1rem; }

.stv-search-form { display: flex; gap: 0.75rem; align-items: flex-end; max-width: 480px; }
.stv-search-form input[type="search"] {
	flex: 1; min-height: 48px; padding: 0.6rem 0; border: 0;
	border-bottom: 1px solid var(--stv-line); background: transparent;
	font-family: var(--stv-body); font-size: 1rem; color: inherit;
}
.stv-search-form input[type="search"]:focus { outline: none; border-bottom-color: var(--stv-bronze); }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--stv-slow) var(--stv-ease), transform var(--stv-slow) var(--stv-ease);
	will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }

/* The hero curtain: the plate rises into view once, on load. */
.stv-hero__media { clip-path: inset(0 0 0 0); }
.stv-hero.is-ready .stv-hero__wordmark { animation: stv-letter 1400ms var(--stv-ease) both; }
.stv-hero.is-ready .stv-hero__horizon { animation: stv-horizon 1200ms var(--stv-ease) 500ms both; }

@keyframes stv-letter {
	from { opacity: 0; letter-spacing: 0.3em; }
	to { opacity: 1; letter-spacing: 0.06em; }
}
@keyframes stv-horizon {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
.stv-hero__horizon { transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { opacity: 1; transform: none; }
	.stv-card:hover .stv-card__media img,
	.stv-gallery__btn:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Breakpoints — each one exists because the layout needs it, not because
   a device is that wide.
   -------------------------------------------------------------------------- */

/* Two columns become possible for cards and form fields. */
@media (min-width: 600px) {
	.stv-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.stv-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.stv-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.stv-form__grid { grid-template-columns: repeat(2, 1fr); }
	.stv-gallery { grid-template-columns: repeat(2, 1fr); }
	.stv-facts { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
	.stv-brand__sub { display: block; }
	.stv-chapters__list { grid-template-columns: repeat(3, 1fr); }
	.stv-pillar { grid-template-columns: 200px 1fr; align-items: baseline; }
}

/* Bố cục rộng: hai cột, lưới ba, chân trang bốn cột. Những quy tắc này KHÔNG
   liên quan tới thanh menu và phải giữ nguyên ở 900px — máy tính bảng nằm ngang
   vẫn cần bố cục hai cột. Phần điều hướng được tách xuống dưới, ở ngưỡng riêng. */
@media (min-width: 900px) {
	.stv-hero__scroll { display: block; }
	.stv-split { grid-template-columns: 1fr 1fr; }
	.stv-split--wide-media { grid-template-columns: 1.25fr 1fr; }
	.stv-split--reverse .stv-split__media { order: 2; }
	.stv-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.stv-gallery { grid-template-columns: repeat(3, 1fr); }
	.stv-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
	.stv-facts { grid-template-columns: repeat(3, 1fr); }
	.stv-chapters__list { grid-template-columns: repeat(5, 1fr); }
	.stv-pillar { grid-template-columns: 260px 1fr; }
}

/* Four-up card grids and a wider editorial measure. */
@media (min-width: 1200px) {
	.stv-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.stv-gallery { grid-template-columns: repeat(3, 1fr); }
	.stv-facts { grid-template-columns: repeat(3, 1fr); }
}

/* Very large screens: stop the measure from stretching, add air instead. */
@media (min-width: 1800px) {
	:root { --stv-max: 1680px; --stv-gutter: 5rem; }
	.stv-gallery { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   Điều hướng trên màn hình lớn — bố cục hai hàng

   Chín mục tiếng Việt viết hoa cần khoảng 770px chỉ riêng thanh menu. Nhét
   chúng vào cùng một hàng với logo, số hotline và nút CTA thì cần tới ~1350px,
   nên bản trước phải nâng ngưỡng hiển thị lên 1280px. Nhưng như thế lại sinh ra
   một lỗi khác: màn 1366px ở mức phóng to 125% của Windows chỉ còn ~1093px bề
   rộng thực, và menu ngang biến mất trên đúng những máy cần nó nhất.

   Cách xử lý đúng không phải là ẩn menu đi mà là cho nó một hàng riêng. Từ
   1024px trở lên: hàng trên là logo, hotline và nút CTA; hàng dưới là menu trải
   hết bề ngang. Menu có gần như toàn bộ bề rộng khung nhìn nên luôn đủ chỗ, và
   không còn ngưỡng nào khiến nó biến mất.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	:root { --stv-header-h: 124px; }

	.stv-header__inner {
		flex-wrap: wrap;
		align-content: center;
		row-gap: 0;
	}

	.stv-brand { order: 1; }
	.stv-header__actions { order: 2; margin-left: auto; }

	.stv-nav {
		order: 3;
		display: block;
		flex-basis: 100%;
		margin-top: 0.55rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--stv-line-soft);
	}
	/* Menu căn giữa, khoảng cách đều nhau.
	   
	   Đã thử cách giãn đều hai đầu (space-between) trong một khung 1140px, nhưng
	   khi tổng bề rộng chữ chỉ khoảng 700px thì các mục bị kéo ra sát hai mép
	   khung, nhìn rời rạc chứ không thành một cụm. Căn giữa với khoảng cách
	   bằng nhau là cách đọc ra "cân đối" đúng nhất, và giữ nguyên hình khối dù
	   sau này thêm hay bớt mục. */
	.stv-nav__list {
		justify-content: center;
		gap: clamp(1.1rem, 0.5rem + 1.15vw, 2.2rem);
		width: 100%;
	}
	.stv-nav__link { padding-block: 0.5rem; }

	/* Trên nền hero tối, đường kẻ phân cách phải là màu sáng mờ, không phải
	   đường kẻ tối mặc định — nếu không nó biến mất hoàn toàn. */
	.has-transparent-header .stv-header:not(.is-stuck) .stv-nav {
		border-top-color: rgba(250, 247, 241, 0.22);
	}

	.stv-burger { display: none; }
	.stv-drawer { display: none; }
	.stv-mobilebar { display: none; }
	.stv-header__phone { display: inline-flex; }
	.stv-header__cta { display: inline-flex; }

	/* Cột kênh liên hệ nổi bên phải thay cho thanh thao tác dưới đáy. Hai thứ
	   này phải đổi cùng một ngưỡng, nếu không sẽ có lúc hiện cả hai. */
	.stv-floating {
		display: flex; flex-direction: column; gap: 0.5rem;
		position: fixed; right: 20px; bottom: 24px; z-index: 90;
	}
	.stv-floating a {
		display: flex; align-items: center; justify-content: center;
		width: 46px; height: 46px;
		background: var(--stv-charcoal); color: var(--stv-ivory);
		border: 1px solid rgba(246,243,237,0.2);
		transition: background var(--stv-fast) var(--stv-ease);
	}
	.stv-floating a:hover { background: var(--stv-bronze); color: var(--stv-charcoal); }
	.stv-floating svg { width: 19px; height: 19px; }
}

@media print {
	.stv-header, .stv-mobilebar, .stv-floating, .stv-form, .stv-drawer { display: none !important; }
	body { background: #fff; color: #000; }
}