/* ==========================================================================
   Cẩm Nang Lexus Việt Nam — components
   V3.1 · "THƯỚC ĐO", dark and lit.

   One rule runs through the whole site and everything else stays quiet. What
   changed from V3: the ground is onyx, type is larger, and every raised
   surface carries a light source — a top edge, a falling sheen, a warm shadow.
   Flat fills were what made the light version read cheap.
   ========================================================================== */

/* ══ Masthead ═════════════════════════════════════════════════════════════ */
.mona-masthead{
	position: sticky;
	inset-block-start: 0;
	z-index: 12;
	background: rgba(11,12,14,0.82);
	backdrop-filter: blur(16px) saturate(1.3);
	border-block-end: var(--tick) solid var(--line);
	transition: transform var(--dur-fast) var(--ease-out);
}
.mona-masthead[data-hidden="true"]{ transform: translateY(-101%); }
.mona-masthead__inner{
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px;
	padding-block: 18px;
}

.mona-wordmark{ display: inline-flex; align-items: baseline; }
.mona-wordmark__a{
	font-family: var(--f-display);
	font-size: clamp(1.15rem, 1.6vw, 1.45rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	color: var(--platinum);
}

.mona-nav{ display: flex; align-items: center; gap: clamp(10px, 1.4vw, 24px); }
.mona-nav__item{ position: relative; display: flex; align-items: center; gap: 2px; }
/* Bốn thứ cộng lại làm hàng nav đọc mờ: mono ở weight 400, cỡ --t-xs, giãn
   cách 0.13em, và --steel — màu vừa đủ AA (5.62:1). Với chữ phụ thì được, với
   điều hướng chính thì không.

   Nay: --silver (8.68:1, AAA), weight 500, cỡ riêng --t-nav, giãn cách hẹp lại
   một chút. Hover vẫn lên --platinum nên vẫn còn khoảng chênh để thấy. Weight
   500 của IBM Plex Mono có trong bộ font đang nạp — không phải weight giả. */
.mona-nav__link{
	display: inline-flex; align-items: center;
	min-block-size: 40px;
	font-family: var(--f-mono);
	font-size: var(--t-nav);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--silver);
	border-block-end: var(--tick) solid transparent;
	transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mona-nav__link:hover{ color: var(--platinum); border-block-end-color: var(--line-strong); }
.mona-nav__link[aria-current="page"]{ color: var(--copper); border-block-end-color: var(--copper); }

/* The caret is a control of its own, beside the link rather than wrapped around
   it — that is the whole point of the pattern: /xe/ stays reachable. It is a
   28px box inside a 40px row, so the two targets do not fight on a trackpad. */
.mona-nav__caret{
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 28px; block-size: 40px;
	padding: 0; border: 0; background: none;
	color: var(--silver);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.mona-nav__caret svg{ inline-size: 13px; block-size: 13px; }
.mona-nav__item:hover .mona-nav__caret,
.mona-nav__caret[aria-expanded="true"]{ color: var(--copper); }
.mona-nav__caret[aria-expanded="true"]{ transform: rotate(180deg); }

@media (max-width: 900px){ .mona-nav{ display: none; } }

/* ══ Dropdown ════════════════════════════════════════════════════════════
   Both panels open with a keyframe, not a transition. A panel toggled with the
   hidden attribute goes display:none, and there is no transition out of that —
   an animation runs the moment the element is displayed, which is exactly the
   moment being animated. */
@keyframes mona-drop{
	from{ opacity: 0; transform: translateY(-8px); }
	to  { opacity: 1; transform: none; }
}

.mona-sub{
	position: absolute;
	inset-block-start: calc(100% + 14px);
	inset-inline-start: -14px;
	z-index: 13;
	min-inline-size: 232px;
	padding-block: 8px;
	background: var(--graphite);
	background-image: var(--sheen);
	box-shadow: var(--edge), var(--shadow);
	border-block-start: 2px solid var(--copper);
	animation: mona-drop 0.24s var(--ease-out) both;
}
.mona-sub[hidden]{ display: none; }
/* The gap between the item and the panel is dead space the pointer has to
   cross; without this bridge the panel closes underneath a mouse that is
   travelling straight at it. */
.mona-sub::before{
	content: "";
	position: absolute;
	inset-block-start: -16px;
	inset-inline: 0;
	block-size: 16px;
}
.mona-sub__list a{
	display: block;
	padding: 11px 20px;
	font-size: var(--t-s);
	color: var(--silver);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mona-sub__list a:hover{ background: var(--slate); color: var(--platinum); }

/* ══ Mega ════════════════════════════════════════════════════════════════ */
.mona-mega{
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 13;
	background: var(--graphite);
	background-image: var(--sheen);
	box-shadow: var(--shadow);
	animation: mona-drop 0.26s var(--ease-out) both;
	/* The panel hangs off a sticky header, so anything past the fold is
	   unreachable — page scroll moves the header, not the panel. Measured: at
	   1180px the grid drops to three columns, three rows, and ran past 800px.
	   Capped and scrolled internally instead, which also holds for whatever
	   this menu grows into later. */
	max-block-size: min(76vh, 660px);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* No border of its own. inset-block-start:100% resolves against the
	   masthead's PADDING box, which sits 1px above its border box — so a border
	   here would land on the exact pixel row the masthead's bottom border
	   already occupies. The masthead draws the separator; this does not. */
}
.mona-mega[hidden]{ display: none; }
.mona-mega__inner{
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(210px, 0.85fr);
	gap: clamp(24px, 3vw, 56px);
	padding-block: clamp(26px, 2.6vw, 40px);
}
.mona-mega__k{ margin-block-end: 18px; }

.mona-mega__grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 20px);
}
.mona-mcard{ display: block; }
.mona-mcard__shot{ --shot: 16 / 9; margin-block-end: 10px; }
.mona-mcard__shot img{ transition: transform 0.5s var(--ease-out); }
.mona-mcard:hover .mona-mcard__shot img{ transform: scale(1.05); }
.mona-mcard__n{
	display: block;
	font-family: var(--f-display);
	font-size: var(--t-m);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--platinum);
	transition: color var(--dur-fast) var(--ease-out);
}
.mona-mcard:hover .mona-mcard__n{ color: var(--copper); }
.mona-mcard__t{ display: block; font-size: var(--t-xs); color: var(--steel); margin-block-start: 2px; }
.mona-mcard__p{ display: block; font-size: var(--t-xs); color: var(--silver); margin-block-start: 5px; }

.mona-mega__rail{ border-inline-start: var(--tick) solid var(--line); padding-inline-start: clamp(20px, 2.4vw, 34px); }
.mona-mega__links{ display: grid; gap: 1px; }
.mona-mega__links a{
	display: block;
	padding-block: 9px;
	font-size: var(--t-s);
	color: var(--silver);
	border-block-end: var(--tick) solid var(--line);
	transition: color var(--dur-fast) var(--ease-out);
}
.mona-mega__links a:hover{ color: var(--copper); }
.mona-mega__note{ margin-block-start: 20px; }

@media (max-width: 1180px){
	.mona-mega__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ══ Hero ═════════════════════════════════════════════════════════════════ */
.mona-hero{
	position: relative;
	padding-block: clamp(52px, 7vw, 104px) clamp(60px, 8vw, 120px);
	overflow: hidden;
}
/* One raking light from the upper right — the room the car is standing in. */
.mona-hero::before{
	content: "";
	position: absolute;
	inset-block-start: -30%;
	inset-inline-end: -14%;
	inline-size: 62vw; block-size: 90vh;
	background: radial-gradient(closest-side, rgba(217,154,91,0.13), transparent 72%);
	pointer-events: none;
}
.mona-hero > *{ position: relative; }

.mona-hero__title{
	/* Not --t-mega. That size is scaled to the full page width, and in a half
	   column it broke the headline into three ragged lines of two words. A
	   split hero needs type sized to its own column. */
	font-size: clamp(2.5rem, 5vw, 4.6rem);
	margin-block: clamp(18px, 2.2vw, 30px) clamp(20px, 2.4vw, 32px);
}
.mona-hero__foot{
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 22px 48px;
	margin-block-start: clamp(28px, 3.4vw, 46px);
}

/* Split hero: what the page is on the left, the object itself on the right.
   The scale runs full width underneath, so it still reads as one instrument
   spanning the page rather than a widget parked in a column. */
.mona-hero__split{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: clamp(28px, 4vw, 68px);
	align-items: center;
}
.mona-hero__say{ min-inline-size: 0; }
.mona-hero__acts{
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 14px clamp(20px, 2.4vw, 34px);
	margin-block-start: clamp(24px, 2.8vw, 36px);
}
.mona-act--quiet{ color: var(--silver); }
.mona-act--quiet:hover{ color: var(--platinum); }

.mona-hero__show{ position: relative; min-inline-size: 0; }
.mona-hero__shot{ --shot: 4 / 3; }

/* Floating facts. They carry car facts — body type, how many versions, how much
   of the range is hybrid — and deliberately no money: the hero is about the
   cars, and the price belongs further down where it is sourced and dated. */
.mona-bub{
	position: absolute;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 20px;
	background: rgba(21,23,27,0.82);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: var(--edge), var(--shadow);
	border-inline-start: 2px solid var(--copper);
}
.mona-bub__k{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--copper);
}
.mona-bub__v{
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.05;
	color: var(--platinum);
}
.mona-bub__v em{ font-style: normal; color: var(--steel); }
.mona-bub__s{ font-size: var(--t-xs); color: var(--silver); }

.mona-bub--a{ inset-block-start: 8%; inset-inline-start: -7%; }
.mona-bub--b{ inset-block-end: 12%; inset-inline-end: -5%; }

@media (max-width: 1040px){
	.mona-hero__split{ grid-template-columns: 1fr; gap: clamp(30px, 5vw, 52px); }
	.mona-hero__shot{ --shot: 16 / 9; }
	.mona-bub--a{ inset-inline-start: 0; }
	.mona-bub--b{ inset-inline-end: 0; }
}
@media (max-width: 620px){
	/* Below this the bubbles cover the car instead of annotating it. */
	.mona-bub{ position: static; margin-block-start: 12px; }
	.mona-hero__show{ display: flex; flex-direction: column; }
}

/* ══ THE SCALE — the signature ════════════════════════════════════════════
   Fourteen versions at their true price. The clustering is not a layout
   accident: ES, NX and RX sit almost on top of each other at the low end, and
   there is a real 1.5 tỷ stretch with nothing in it before GX. Plotting rather
   than listing is what makes that visible. */
.mona-scale{
	margin-block-start: clamp(52px, 6.5vw, 96px);
	--scale-h: clamp(62px, 7.5vw, 104px);
}

.mona-scale__ends{
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 16px;
	margin-block-end: 16px;
}
.mona-scale__end{ display: flex; flex-direction: column; gap: 6px; }
.mona-scale__end--hi{ text-align: end; }
.mona-scale__endk{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
}
.mona-scale__endv{
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 2.6vw, 2.3rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--platinum);
}

.mona-scale__rule{
	position: relative;
	block-size: var(--scale-h);
	border-block-end: var(--tick) solid var(--line-strong);
}
.mona-scale__fill{
	position: absolute;
	inset-block-end: calc(var(--tick) * -1);
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: var(--tick);
	background: linear-gradient(90deg, var(--copper), rgba(217,154,91,0.35));
	box-shadow: 0 0 18px rgba(217,154,91,0.45);
}

.mona-scale__tick{
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: var(--at, 0%);
	inline-size: var(--tick);
	block-size: var(--h, 34%);
	background: var(--steel);
}
/* The first version of each line gets the full tick: that is the number every
   "giá từ" on the site refers to. */
.mona-scale__tick--head{
	block-size: 100%;
	inline-size: 2px;
	background: linear-gradient(180deg, var(--copper), rgba(217,154,91,0.25));
	box-shadow: 0 0 14px rgba(217,154,91,0.4);
}

.mona-scale__names{ position: relative; block-size: 66px; margin-block-start: 12px; }
.mona-scale__name{
	position: absolute;
	inset-inline-start: var(--at, 0%);
	inset-block-start: calc(var(--row, 0) * 31px);
	transform: translateX(-50%);
	font-family: var(--f-display);
	font-size: clamp(1rem, 1.4vw, 1.3rem);
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--platinum);
}
/* The end labels sit ON the ends of the rule, so centring pushes half of each
   past it. These align to the inside edge instead. */
.mona-scale__name--first{ transform: translateX(0); }
.mona-scale__name--first::before{ inset-inline-start: 0; }

.mona-scale__name::before{
	content: "";
	position: absolute;
	inset-block-start: calc((var(--row, 0) * -31px) - 11px);
	inset-inline-start: 50%;
	inline-size: var(--tick);
	block-size: calc(11px + (var(--row, 0) * 31px));
	background: var(--line-strong);
}
@media (max-width: 780px){
	.mona-scale__names{ block-size: 78px; }
	.mona-scale__name{ font-size: 0.9rem; }
}

/* ══ Shots — the light has to land on them ════════════════════════════════ */
.mona-shot{
	position: relative;
	/* Explicit, not inherited from <figure>. The component was only ever used on
	   a figure, so it relied on that element's block display; the moment a card
	   used it on a <span> the box went inline and aspect-ratio stopped applying,
	   which renders as an empty frame rather than an error. */
	display: block;
	overflow: hidden;
	background: var(--graphite);
	aspect-ratio: var(--shot, 2 / 1);
	box-shadow: var(--edge), var(--shadow);
}
/* Hậu duệ, KHÔNG phải con trực tiếp. mona_image() bọc <picture> khi có ảnh
   mobile riêng, và khi đó <img> tụt xuống một cấp — `> img` sẽ ngừng khớp và
   ảnh mất object-fit đúng trên thiết bị mà tấm thứ hai sinh ra để phục vụ. */
.mona-shot img{ inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Sheen over the photograph, not under it: the panel is being lit, not tinted. */
.mona-shot::after{
	content: "";
	position: absolute; inset: 0;
	background: var(--sheen);
	pointer-events: none;
}

/* ══ The rail ═════════════════════════════════════════════════════════════ */
.mona-rail{
	position: fixed;
	inset-inline-start: clamp(16px, 2.6vw, 44px);
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 9;
	block-size: min(56vh, 460px);
	inline-size: 96px;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dur-fast) var(--ease-out);
}
.mona-rail[data-on="true"]{ opacity: 1; }
.mona-rail__line{
	position: absolute; inset-block: 0; inset-inline-start: 0;
	inline-size: var(--rail-w);
	background: var(--line);
}
/* --p is declared here, not left to the var() fallback. GSAP cannot interpolate
   a custom property that has no starting value — the tween silently does
   nothing and the rail stays 0px tall, which looks exactly like "the scroll
   logic never fired". Seeding it is the fix. */
.mona-rail__fill{
	--p: 0%;
	position: absolute; inset-block-start: 0; inset-inline-start: 0;
	inline-size: var(--rail-w);
	block-size: var(--p);
	background: var(--copper);
	box-shadow: 0 0 16px rgba(217,154,91,0.5);
}
.mona-rail__marker{
	--p: 0%;
	position: absolute; inset-inline-start: 0; inset-block-start: var(--p);
	display: flex; align-items: center; gap: 11px;
	transform: translateY(-50%);
}
.mona-rail__dot{
	inline-size: 10px; block-size: 10px;
	margin-inline-start: -4px;
	background: var(--copper);
	box-shadow: 0 0 14px rgba(217,154,91,0.7);
	flex: none;
}
.mona-rail__v{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	font-weight: 500;
	color: var(--platinum);
	white-space: nowrap;
}
@media (max-width: 1180px){ .mona-rail{ display: none; } }

/* ══ Rungs ════════════════════════════════════════════════════════════════ */
.mona-rung{
	padding-block: clamp(64px, 7.5vw, 128px);
	border-block-start: var(--tick) solid var(--line);
}
.mona-rung__head{
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: clamp(14px, 2.4vw, 36px);
	margin-block-end: clamp(26px, 3.2vw, 44px);
}
.mona-rung__idx{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.12em;
	color: var(--steel);
}
.mona-rung__name{ font-size: var(--t-xl); line-height: 1; }
.mona-rung__price{ display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.mona-rung__pk{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
}
.mona-rung__pv{
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 2.6vw, 2.3rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--copper);
	white-space: nowrap;
}

.mona-rung__body{
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.85fr);
	gap: clamp(24px, 3.2vw, 56px);
	align-items: start;
}
.mona-rung__shot{ --shot: 16 / 9; }
.mona-rung__desc{ color: var(--silver); margin-block-end: 28px; }

.mona-vers__row{
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px;
	padding: 14px 12px;
	border-block-start: var(--tick) solid var(--line);
	transition: background var(--dur-fast) var(--ease-out);
}
.mona-vers__row:last-child{ border-block-end: var(--tick) solid var(--line); }
.mona-vers__row:hover{ background: var(--slate); }
.mona-vers__n{ font-size: var(--t-s); color: var(--platinum); }
.mona-vers__p{ font-size: var(--t-s); font-weight: 500; color: var(--silver); white-space: nowrap; }

@media (max-width: 900px){
	.mona-rung__body{ grid-template-columns: 1fr; }
	.mona-rung__head{ grid-template-columns: auto 1fr; row-gap: 12px; }
	.mona-rung__price{ grid-column: 1 / -1; align-items: flex-start; }
}

/* ══ Interstitial ════════════════════════════════════════════════════════
   A full-width breath between the line-up and the comparison. Abstract on
   purpose — no badge, no grille — because a photograph of another maker's car
   on a page about Lexus versions would read as a claim rather than a texture.
   Nothing is ever set on top of it, so it needs no scrim and loses no contrast. */
.mona-strip{
	position: relative;
	overflow: hidden;
	block-size: clamp(220px, 34vw, 460px);
	background: var(--graphite);
	box-shadow: var(--edge);
}
.mona-strip img{
	inline-size: 100%; block-size: 100%;
	object-fit: cover;
	object-position: 50% 46%;
}
/* Fades into the ground at both edges so it reads as part of the page rather
   than a picture dropped onto it. */
.mona-strip::after{
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		var(--onyx) 0%, rgba(11,12,14,0.15) 26%,
		rgba(11,12,14,0.15) 74%, var(--onyx) 100%);
	pointer-events: none;
}

/* ══ Hệ động lực — the powertrain split ═══════════════════════════════════
   Replaces the single-line price comparison that stood here. Same graphite
   band and same warm wash, so the page rhythm is unchanged; what moved is the
   question. A gap inside one model line belongs on the comparison page — the
   home page should answer what the range actually offers.

   Deliberately NOT another horizontal rule. The page already has one signature
   instrument and a second bar would read as the same idea twice; this is a
   column chart, so version count and powertrain land in one read. */
.mona-mix{
	position: relative;
	background: var(--graphite);
	background-image: var(--sheen-warm);
	box-shadow: var(--edge);
	overflow: hidden;
}
.mona-mix::before{
	content: "";
	position: absolute;
	inset-block-start: -40%;
	inset-inline-start: 8%;
	inline-size: 55vw; block-size: 100vh;
	background: radial-gradient(closest-side, rgba(217,154,91,0.14), transparent 70%);
	pointer-events: none;
}
.mona-mix > *{ position: relative; }
.mona-mix__title{ font-size: var(--t-xl); max-inline-size: 22ch; margin-block: 18px clamp(30px, 3.4vw, 52px); }

.mona-mix__say{
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(200px, 0.55fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
	margin-block-end: clamp(46px, 5.5vw, 84px);
}
.mona-mix__say strong{ color: var(--platinum); font-weight: 600; }
.mona-mix__say .mona-lede b.mona-fig{ color: var(--copper); font-weight: 500; }

.mona-key{ display: grid; gap: 14px; }
.mona-key__row{
	display: grid;
	grid-template-columns: 14px 1fr auto;
	align-items: center;
	gap: 14px;
	padding-block-end: 12px;
	border-block-end: var(--tick) solid var(--line);
}
.mona-key__sw{
	inline-size: 14px; block-size: 14px;
	background: var(--slate);
	box-shadow: var(--edge);
}
.mona-key__sw--hy{
	background: linear-gradient(180deg, var(--copper), rgba(217,154,91,0.5));
	box-shadow: 0 0 14px rgba(217,154,91,0.45);
}
.mona-key__k{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--silver);
}
.mona-key__v{
	font-family: var(--f-display);
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	font-weight: 700;
	color: var(--platinum);
	line-height: 1;
}

/* Seven columns, one per line. Baseline-aligned at the bottom so the stacks
   read against a common floor — the whole point is that RX and LX are three
   deep while NX and LS are one. */
.mona-mix__chart{
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: clamp(8px, 1.4vw, 22px);
	align-items: end;
}
.mona-mix__col{ display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
/* column-reverse so the first cell in source order sits at the bottom: the
   cheapest version of each line is the floor of its stack. */
.mona-mix__stack{ display: flex; flex-direction: column-reverse; gap: 6px; }
.mona-mix__cell{
	display: block;
	block-size: clamp(30px, 4.2vw, 58px);
	background: var(--slate);
	box-shadow: var(--edge);
}
.mona-mix__cell--hy{
	background: linear-gradient(180deg, var(--copper), rgba(217,154,91,0.45));
	box-shadow: var(--edge), 0 0 22px -6px rgba(217,154,91,0.55);
}
.mona-mix__lab{
	font-family: var(--f-display);
	font-size: clamp(0.95rem, 1.4vw, 1.3rem);
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	color: var(--platinum);
	padding-block-start: 10px;
	border-block-start: var(--tick) solid var(--line-strong);
}
.mona-mix__lab b{
	display: block;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: none;
	color: var(--steel);
	margin-block-start: 4px;
}

.mona-mix__note{ margin-block-start: clamp(38px, 4.4vw, 64px); max-inline-size: 74ch; }

@media (max-width: 860px){
	.mona-mix__say{ grid-template-columns: 1fr; }
	.mona-key{ grid-template-columns: 1fr 1fr; }
}

/* ══ Thư viện ảnh ═════════════════════════════════════════════════════════
   A rail rather than a grid: seven items is too few for a grid to look
   deliberate and too many for one row. It scrolls natively, so it works with
   no JS at all — nothing here is wired to a script. */
.mona-gal{ padding-block: var(--band); }
.mona-gal__head{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(22px, 3vw, 60px);
	align-items: end;
	margin-block-end: clamp(34px, 4vw, 58px);
}
.mona-gal__title{ font-size: var(--t-xl); margin-block-start: 18px; }
/* The credit line is one sentence, so left-aligned in its own column it reads
   as a stranded paragraph. Pushed to the outer edge it reads as what it is —
   a caption on the rail below. */
.mona-gal__side{
	justify-self: end;
	text-align: end;
	max-inline-size: 40ch;
	display: grid;
	justify-items: end;
	gap: 16px;
}

.mona-gal__rail{
	display: flex;
	gap: clamp(14px, 1.8vw, 28px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-inline: var(--gutter);
	scroll-padding-inline-start: var(--gutter);
	padding-block-end: 18px;
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong) transparent;
}
.mona-gal__rail::-webkit-scrollbar{ block-size: 2px; }
.mona-gal__rail::-webkit-scrollbar-track{ background: var(--line); }
.mona-gal__rail::-webkit-scrollbar-thumb{ background: var(--line-strong); }

.mona-gal__item{
	flex: none;
	inline-size: clamp(266px, 30vw, 430px);
	scroll-snap-align: start;
}
.mona-gal__shot{ --shot: 3 / 2; }
.mona-gal__cap{
	display: block;
	margin-block-start: 13px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	line-height: 1.65;
	color: var(--steel);
}
.mona-gal__cap b{
	display: block;
	font-family: var(--f-display);
	font-size: var(--t-m);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--platinum);
	margin-block-end: 4px;
}
/* The licence is the link, so the attribution requirement is discharged by
   something a reader can actually follow. */
.mona-gal__cap a{ color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }

/* ══ Video ════════════════════════════════════════════════════════════════
   Façade player: the poster is a plain <img> and the <video> is only built on
   click. A home page must not load a decoder, a first frame and a media track
   for something most visitors scroll past. */
.mona-film{ padding-block: 0 var(--band); }
.mona-film__head{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(22px, 3vw, 60px);
	align-items: end;
	margin-block-end: clamp(30px, 3.6vw, 52px);
}
.mona-film__title{ font-size: var(--t-xl); margin-block-start: 18px; }

.mona-film__frame{
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--graphite);
	box-shadow: var(--edge), var(--shadow);
}
.mona-film__media{
	display: block;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	background: var(--graphite);
}
.mona-film__media > img,
.mona-film__frame video{
	inline-size: 100%; block-size: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}
.mona-film__frame::after{
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11,12,14,0.15), rgba(11,12,14,0.62));
	pointer-events: none;
}
/* Once a real video is playing the wash and the poster are gone, so controls
   sit on the footage rather than under a scrim. */
.mona-film__frame[data-playing="true"]::after{ display: none; }

.mona-film__play{
	position: absolute;
	inset-block-end: clamp(20px, 3vw, 44px);
	inset-inline-start: clamp(20px, 3vw, 44px);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	min-block-size: 44px;
	padding: 12px 24px 12px 18px;
	border: 0;
	background: rgba(21,23,27,0.78);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: var(--edge), var(--shadow);
	border-inline-start: 2px solid var(--copper);
	color: var(--platinum);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out);
}
.mona-film__play:hover{ background: rgba(30,33,39,0.88); }
.mona-film__tri{
	inline-size: 0; block-size: 0;
	border-block: 9px solid transparent;
	border-inline-start: 15px solid var(--copper);
	flex: none;
}
.mona-film__plk{
	display: grid;
	gap: 3px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: start;
	line-height: 1.2;
}
.mona-film__plk b{ font-weight: 400; color: var(--steel); letter-spacing: 0.06em; }

/* ══ Bài viết ═════════════════════════════════════════════════════════════
   Rows, not cards. There is no photograph to put on a card that would not be
   another car picture asserting something, and a numbered row list matches the
   instrument voice the rest of the page speaks in. */
.mona-news{
	background: var(--graphite);
	box-shadow: var(--edge-soft);
}
.mona-news__head{
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 20px 40px;
	margin-block-end: clamp(28px, 3.4vw, 48px);
}
.mona-news__title{ font-size: var(--t-xl); margin-block-start: 18px; }

/* Cards, boxed. A row list read as a table of contents; the client asked for
   article boxes, so each item is now a surface of its own — darker than the
   band it sits on, with the same top edge and shadow every raised object on
   this site carries. */
.mona-news__list{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 26px);
}

.mona-post{
	background: var(--onyx);
	background-image: var(--sheen);
	box-shadow: var(--edge), var(--shadow);
}
.mona-post__link{
	display: grid;
	grid-template-rows: auto 1fr;
	block-size: 100%;
}
.mona-post__thumb{ --shot: 16 / 9; }
.mona-post__in{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(18px, 2vw, 26px);
}

.mona-post__meta{
	display: flex; align-items: center; gap: 9px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.08em;
	color: var(--steel);
}
.mona-post__meta i{ font-style: normal; color: var(--line-strong); }
.mona-post__meta b{
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--copper);
}

.mona-post__h{
	font-family: var(--f-display);
	font-size: clamp(1.24rem, 1.75vw, 1.68rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.14;
	letter-spacing: -0.012em;
	color: var(--platinum);
	transition: color var(--dur-fast) var(--ease-out);
	/* Real titles run longer than these three. Three lines, then clip, and the
	   card keeps its shape whatever the editor writes. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* line-clamp clips at the box edge, and Vietnamese stacks a second mark
	   above cap-height — so the FIRST line loses them: "BỐN CHỖ ĐẮT" rendered
	   as "BÔN CHÔ ĐĂT". Only the top line is affected, which is why it reads as
	   a font problem rather than a clipping one. The padding buys the headroom
	   and the margin cancels it, so nothing moves. */
	padding-block-start: 0.2em;
	margin-block-start: calc(12px - 0.2em);
}
.mona-post__link:hover .mona-post__h{ color: var(--copper); }

.mona-post__x{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--t-s);
	line-height: 1.6;
	color: var(--silver);
	/* Same clip, same guard — a lower-case ế or ữ opening the first line. */
	padding-block-start: 0.14em;
	margin-block-start: calc(11px - 0.14em);
}
/* Pushed to the bottom of the card, so the rule sits on a common baseline
   across three cards whose titles are different lengths. */
.mona-post__more{
	margin-block-start: auto;
	padding-block: 18px 2px;
	display: inline-flex; align-items: center; gap: 10px;
	min-block-size: 30px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--copper);
	border-block-end: var(--tick) solid currentColor;
}
.mona-post__more::after{
	content: "\2192";
	transition: transform var(--dur-fast) var(--ease-out);
}
.mona-post__link:hover .mona-post__more::after{ transform: translateX(5px); }

@media (max-width: 1040px){
	.mona-news__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
	.mona-news__list{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
	.mona-gal__head,
	.mona-film__head{ grid-template-columns: 1fr; align-items: start; }
}

/* ══ Source lines ═════════════════════════════════════════════════════════
   Every figure travels with its source and its date. Legible, not fine print. */
.mona-source{ font-size: var(--t-xs); line-height: 1.75; color: var(--silver); max-inline-size: 70ch; }
.mona-source a{ color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }

/* ══ About ════════════════════════════════════════════════════════════════ */
.mona-about{ border-block-start: var(--tick) solid var(--line); }
.mona-about__grid{
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
	gap: clamp(26px, 4vw, 76px);
	align-items: start;
}
.mona-about__title{ font-size: var(--t-xl); }
.mona-about__body p + p{ margin-block-start: 20px; }
.mona-about__body strong{ font-weight: 600; color: var(--platinum); }

/* The single permitted link to the manufacturer's own channel: its own box,
   introduced as theirs, nowhere near a call to action. */
.mona-official{
	margin-block-start: clamp(28px, 3.2vw, 44px);
	border-inline-start: 2px solid var(--copper);
	background: var(--graphite);
	box-shadow: var(--edge-soft);
	padding: 20px 24px;
	font-size: var(--t-s);
	color: var(--silver);
}
.mona-official__k{
	display: block;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--copper);
	margin-block-end: 9px;
}
@media (max-width: 860px){ .mona-about__grid{ grid-template-columns: 1fr; } }

/* ══ Dock cố định ═════════════════════════════════════════════════════════
   Two real controls, so both are wired above the motion gate in main.js — a
   visitor with reduced motion on must still be able to reach the correction
   form and the top of the page. */
.mona-dock{
	position: fixed;
	inset-block-end: clamp(16px, 2.4vw, 30px);
	inset-inline-end: clamp(16px, 2.4vw, 30px);
	z-index: 15;
	display: flex;
	/* column-reverse, not column: the dock is pinned by its BOTTOM edge, so the
	   first child stays put and back-to-top grows upward out of it. In normal
	   column order the stack would shrink from the bottom and the contact button
	   would drop 58px every time back-to-top went away. */
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 10px;
}
/* Square, icon only. The labelled version measured 372px across — a third of a
   phone's width parked over the content on every page. The name survives for
   assistive tech in .mona-sr and for a mouse in the title attribute. */
.mona-dock__b{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	padding: 0;
	border: 0;
	background: rgba(21,23,27,0.86);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: var(--edge), var(--shadow);
	border-inline-start: 2px solid var(--copper);
	color: var(--platinum);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out);
}
.mona-dock__b:hover{ background: rgba(30,33,39,0.94); }
.mona-dock__i{
	inline-size: 20px; block-size: 20px;
	flex: none;
	color: var(--copper);
}

/* Back-to-top is meaningless at the top of the page, so it is not there.
   display, not opacity+visibility: a hidden-but-present button would still hold
   its 48px in the stack. There is no transition on display, and a control that
   appears instantly beats one that leaves a hole. */
.mona-dock__b--top{ display: none; }
.mona-dock[data-on="true"] .mona-dock__b--top{ display: inline-flex; }

/* ══ Footer ═══════════════════════════════════════════════════════════════ */
.mona-footer{
	position: relative;
	overflow: hidden;
	background: var(--graphite);
	box-shadow: var(--edge-soft);
	color: var(--silver);
	padding-block: clamp(56px, 6.5vw, 100px) clamp(30px, 3.4vw, 44px);
}
/* The corner triangle. Same diagonal the boot curtain parts along, so the page
   closes on the shape it opened with. Drawn, not photographed — see the note in
   the markup. */
.mona-footer__tri{
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: min(58vw, 760px);
	block-size: 100%;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	background:
		linear-gradient(212deg, rgba(217,154,91,0.16) 0%, rgba(217,154,91,0.05) 38%, transparent 72%),
		var(--slate);
	pointer-events: none;
}
/* A hairline along the hypotenuse, so the shape reads as an edge rather than a
   smudge. Rotated rather than clipped: a 1px border on a clip-path is not drawn. */
.mona-footer__tri::after{
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 200%;
	block-size: var(--tick);
	background: linear-gradient(90deg, transparent, rgba(217,154,91,0.55));
	transform-origin: left top;
	transform: rotate(var(--tri-a, 52deg));
}
.mona-footer__inner{ position: relative; }

.mona-footer__top{
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
	gap: clamp(28px, 4vw, 80px);
	align-items: start;
	padding-block-end: clamp(34px, 4vw, 56px);
	margin-block-end: clamp(34px, 4vw, 56px);
	border-block-end: var(--tick) solid var(--line);
}
/* min-inline-size:0 on both: a grid child's default min-content floor lets a
   long unbroken string push the track wider than its fraction, and the price
   column plus the source lines are exactly that shape. */
.mona-footer__brand,
.mona-fcol{ min-inline-size: 0; }

.mona-footer__pitch{
	margin-block-start: 18px;
	font-size: var(--t-s);
	line-height: 1.7;
	color: var(--silver);
	max-inline-size: 48ch;
}
.mona-footer__legal{ margin-block-start: 16px; max-inline-size: 52ch; color: var(--steel); }

/* Three figures, restated where the reader leaves. */
.mona-fstat{
	display: grid;
	gap: 0;
	background: rgba(11,12,14,0.5);
	box-shadow: var(--edge);
}
.mona-fstat__row{
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 18px;
	padding: 15px 20px;
}
.mona-fstat__row + .mona-fstat__row{ border-block-start: var(--tick) solid var(--line); }
.mona-fstat__k{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
}
.mona-fstat__v{
	margin: 0;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	font-weight: 500;
	color: var(--platinum);
	white-space: nowrap;
}
.mona-fstat__v span{ color: var(--steel); font-size: var(--t-xs); }

.mona-footer__grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 52px);
	margin-block-end: clamp(34px, 4vw, 58px);
}
.mona-footer__h{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--copper);
	margin-block-end: 15px;
}
.mona-footer__list{ display: grid; gap: 1px; font-size: var(--t-s); }
.mona-footer__list a{
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 14px;
	min-block-size: 32px;
	padding-block: 5px;
	border-block-end: var(--tick) solid transparent;
	transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mona-footer__list a:hover{ color: var(--platinum); border-block-end-color: var(--line-strong); }
/* The price beside each line is the "giá từ" of its cheapest version — the same
   number the model cards use, so the footer cannot disagree with the page. */
.mona-footer__list a b{
	font-weight: 400;
	font-size: var(--t-xs);
	color: var(--steel);
	white-space: nowrap;
}
.mona-footer__list--plain span{
	display: block;
	padding-block: 7px;
	font-size: var(--t-xs);
	line-height: 1.6;
	color: var(--steel);
}
.mona-footer__official{ margin-block-start: 18px; }

.mona-footer__bottom{
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 12px;
	/* Clears the fixed dock, which at full scroll sits exactly here: 48px wide
	   plus up to 30px of inset. Measured — the "cập nhật lần cuối" line was
	   underneath it before. */
	padding-inline-end: 86px;
	padding-block-start: clamp(20px, 2.4vw, 28px);
	border-block-start: var(--tick) solid var(--line);
	font-size: var(--t-xs);
	color: var(--steel);
}
/* "Trang được vận hành bởi", never "Bản quyền thiết kế thuộc về" — the latter
   says MONA built the site FOR a business, the exact misreading to avoid. */
.mona-footer__by a{ color: var(--copper); display: inline-flex; align-items: center; min-block-size: 26px; }
@media (max-width: 1040px){
	.mona-footer__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px){
	.mona-footer__top{ grid-template-columns: 1fr; }
	.mona-footer__tri{ inline-size: 78vw; --tri-a: 64deg; }
}
@media (max-width: 520px){
	.mona-footer__grid{ grid-template-columns: 1fr; }
}

/* ══ Burger ══════════════════════════════════════════════════════════════ */
.mona-burger{
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0; background: none;
	color: var(--platinum);
	cursor: pointer;
}
.mona-burger__bars{ display: block; inline-size: 22px; }
.mona-burger__bars i{
	display: block;
	block-size: var(--tick);
	background: currentColor;
	transition: transform var(--dur-fast) var(--ease-out),
	            opacity var(--dur-fast) var(--ease-out);
}
.mona-burger__bars i + i{ margin-block-start: 6px; }
/* Bars sit at 0, 7 and 14 with a 1px rule and a 6px gap, so the outer two travel
   exactly 7px to meet in the middle. Recompute both numbers together if the gap
   changes — an X that does not close is this rule drifting from the margin. */
.mona-burger[aria-expanded="true"] .mona-burger__bars i:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.mona-burger[aria-expanded="true"] .mona-burger__bars i:nth-child(2){ opacity: 0; }
.mona-burger[aria-expanded="true"] .mona-burger__bars i:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px){ .mona-burger{ display: inline-flex; } }

/* ── Masthead controls ──────────────────────────────────────────────────── */
.mona-mast__act{ display: flex; align-items: center; gap: 4px; }
.mona-iconbtn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border: 0; background: none;
	color: var(--silver);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out);
}
.mona-iconbtn:hover,
.mona-iconbtn[aria-expanded="true"]{ color: var(--copper); }
.mona-iconbtn svg{ inline-size: 19px; block-size: 19px; }

/* ══ Ô tìm kiếm ══════════════════════════════════════════════════════════
   A strip under the masthead rather than a modal: it is one field, and a modal
   would take the whole screen away to ask for a word. */
.mona-find{
	border-block-start: var(--tick) solid var(--line);
	background: var(--graphite);
	box-shadow: var(--edge-soft);
}
.mona-find[hidden]{ display: none; }
.mona-find__form{
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 14px;
}
.mona-find__ico{ inline-size: 19px; block-size: 19px; flex: none; color: var(--copper); }
.mona-find__in{
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 44px;
	border: 0;
	background: none;
	color: var(--platinum);
	font-family: var(--f-body);
	font-size: var(--t-m);
}
.mona-find__in::placeholder{ color: var(--steel); }
/* Safari draws its own clear button on type=search and it lands on the copper
   underline; the field already has an explicit close control. */
.mona-find__in::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; }
.mona-find__in:focus{ outline: none; }
/* The focus ring goes on the row, not the bare input: an outline on a
   borderless field floating in a strip reads as a stray rectangle. */
.mona-find__form:focus-within{ box-shadow: inset 0 -2px 0 var(--copper); }

.mona-find__go{
	flex: none;
	min-block-size: 44px;
	padding-inline: 20px;
	border: 0;
	background: var(--copper);
	color: var(--onyx);
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}
.mona-find__go:hover{ background: var(--copper-lift); }
.mona-find__x{
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 44px; block-size: 44px;
	border: 0; background: none;
	color: var(--steel);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out);
}
.mona-find__x:hover{ color: var(--platinum); }
.mona-find__x svg{ inline-size: 18px; block-size: 18px; }

@media (max-width: 520px){
	/* The submit word costs more than it earns next to a 44px field; Enter and
	   the phone keyboard's own "go" key both still submit. */
	.mona-find__go{ display: none; }
}

/* ══ Drawer ══════════════════════════════════════════════════════════════
   The desktop nav is hidden below 900px, so something has to take its place.
   A panel that slides in over a dimmed page, not a full-screen sheet that
   appears: the drawer keeps the page behind it visible, so it reads as a layer
   on top of where you already are rather than as a jump to a different screen.

   Kept in the DOM and driven by [data-open] rather than the hidden attribute —
   display:none cannot be transitioned, so a hidden panel can only ever appear,
   never arrive. visibility carries the "gone" state instead, and its transition
   is delayed on close so the panel finishes sliding out before it is dropped. */
.mona-drawer{
	position: fixed;
	inset: 0;
	z-index: 20;
	visibility: hidden;
	transition: visibility 0s linear var(--dur-drawer, 0.42s);
}
.mona-drawer[data-open="true"]{
	visibility: visible;
	transition-delay: 0s;
}

.mona-drawer__scrim{
	position: absolute;
	inset: 0;
	background: rgba(11,12,14,0.7);
	backdrop-filter: blur(5px) saturate(0.9);
	opacity: 0;
	transition: opacity var(--dur-drawer, 0.42s) var(--ease-out);
}
.mona-drawer[data-open="true"] .mona-drawer__scrim{ opacity: 1; }

.mona-drawer__panel{
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(400px, 86vw);
	display: flex;
	flex-direction: column;
	background: var(--graphite);
	background-image: var(--sheen);
	border-inline-start: 2px solid var(--copper);
	box-shadow: -30px 0 70px -30px rgba(0,0,0,0.9);
	transform: translateX(101%);
	transition: transform var(--dur-drawer, 0.42s) cubic-bezier(0.22, 1, 0.36, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mona-drawer[data-open="true"] .mona-drawer__panel{ transform: none; }

.mona-drawer__head{
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 18px 18px 18px 26px;
	border-block-end: var(--tick) solid var(--line);
}
.mona-drawer__k{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: var(--track-lab);
	text-transform: uppercase;
	color: var(--steel);
}
.mona-drawer__x{
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 44px; block-size: 44px;
	border: 0; background: none;
	color: var(--silver);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out);
}
.mona-drawer__x:hover{ color: var(--platinum); }
.mona-drawer__x svg{ inline-size: 18px; block-size: 18px; }

.mona-drawer__list{ display: block; padding-block: 8px; }
.mona-drawer__item a{
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 16px 26px;
	border-block-end: var(--tick) solid var(--line);
	transition: background var(--dur-fast) var(--ease-out);
}
.mona-drawer__item a:hover{ background: var(--slate); }
.mona-drawer__item i{
	font-size: var(--t-xs);
	font-style: normal;
	color: var(--copper);
	flex: none;
}
.mona-drawer__item span{
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 6vw, 2rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--platinum);
	/* Condensed display type stacks Vietnamese marks above cap-height. */
	padding-block-start: 0.06em;
}

/* The rows arrive after the panel, one behind the next, so the drawer reads as
   opening rather than as a block of links being switched on. Delay is indexed
   off --i in the markup, so adding a row needs no new rule. */
.mona-drawer__item{
	opacity: 0;
	transform: translateX(18px);
	transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.mona-drawer[data-open="true"] .mona-drawer__item{
	opacity: 1;
	transform: none;
	transition-delay: calc(0.16s + var(--i, 0) * 0.045s);
}

/* ── Cấp con trong drawer ─────────────────────────────────────────────────
   Same link + button split as the desktop nav, for the same reason: tapping
   "Dòng xe" must still open /xe/, and only the caret opens the list. */
.mona-drawer__row{ display: flex; align-items: stretch; }
.mona-drawer__row a{ flex: 1 1 auto; min-inline-size: 0; }
.mona-drawer__row .mona-drawer__caret{ border-block-end: var(--tick) solid var(--line); }
.mona-drawer__caret{
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 56px;
	padding: 0; border: 0; background: none;
	color: var(--steel);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.mona-drawer__caret svg{ inline-size: 16px; block-size: 16px; }
.mona-drawer__caret[aria-expanded="true"]{ color: var(--copper); transform: rotate(180deg); }
/* The item's own border sits on the row's link, so a row with a caret would
   otherwise draw two rules of different lengths side by side. */
.mona-drawer__item--has > .mona-drawer__row > a{ border-block-end: var(--tick) solid var(--line); }

.mona-drawer__sub{ background: rgba(11,12,14,0.45); box-shadow: var(--edge-soft); }
.mona-drawer__sub[hidden]{ display: none; }
.mona-drawer__sub a{
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 14px;
	padding: 12px 26px 12px 58px;
	font-size: var(--t-s);
	color: var(--silver);
	border-block-end: var(--tick) solid var(--line);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mona-drawer__sub a:hover{ background: var(--slate); color: var(--platinum); }
.mona-drawer__sub b{ font-weight: 400; font-size: var(--t-xs); color: var(--steel); white-space: nowrap; }

.mona-drawer__foot{
	margin-block-start: auto;
	padding: 26px;
	border-block-start: var(--tick) solid var(--line);
}
.mona-drawer__note{
	margin-block-start: 18px;
	font-size: var(--t-xs);
	line-height: 1.65;
	color: var(--steel);
}

/* Scroll lock. The padding replaces the scrollbar the lock removes; without it
   the whole page jumps sideways by its width the moment the drawer opens. JS
   measures the real width and writes it to --sbw. */
body[data-locked="true"]{
	overflow: hidden;
	padding-inline-end: var(--sbw, 0px);
}

@media (min-width: 901px){ .mona-drawer{ display: none; } }

@media (prefers-reduced-motion: reduce){
	/* Arrive, do not travel. The panel still appears and still dims the page —
	   what goes is the movement, which is what the setting actually asks for. */
	.mona-drawer,
	.mona-drawer__scrim,
	.mona-drawer__panel,
	.mona-drawer__item{ transition: none; }
	.mona-drawer__panel{ transform: none; }
	.mona-drawer__item{ opacity: 1; transform: none; }
	.mona-drawer:not([data-open="true"]) .mona-drawer__panel{ transform: translateX(101%); }
}

/* ══ Chrome ═══════════════════════════════════════════════════════════════
   Dải kim loại nằm ở --grad-chrome / --grad-chrome-warm trong variables.css,
   kèm số đo tương phản. Ở đây chỉ còn cách gắn nó vào chữ. */
.mona-chrome{
	background: var(--grad-chrome);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* background-clip:text crops to the text box, and Vietnamese marks sit above
	   cap-height — without this, ế and ữ lose their tone marks to the crop. */
	padding-block-start: 0.1em;
	padding-inline: 0.03em;
	margin-inline: -0.03em;
}
.mona-chrome--copper{
	background: var(--grad-chrome-warm);
	-webkit-background-clip: text;
	background-clip: text;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)){
	.mona-chrome{ color: var(--platinum); }
	.mona-chrome--copper{ color: var(--copper); }
}

/* ══ Showroom floor ═══════════════════════════════════════════════════════
   The hero car stands on a reflective floor. -webkit-box-reflect draws it from
   the element already painted — no second <img>, no second request. Firefox
   ignores the property and simply shows no reflection, which is a perfectly
   good page. */
.mona-shot--mirror{ -webkit-box-reflect: below 2px linear-gradient(transparent 62%, rgba(255,255,255,0.26)); }

/* ══ Specular sweep ═══════════════════════════════════════════════════════
   A band of light travelling across the panel once, as it arrives — the way a
   showroom light passes over paint when the car rolls in. Driven by a custom
   property so GSAP can move it; --x is declared here because GSAP cannot
   interpolate a custom property with no starting value. */
.mona-shot::before{
	content: "";
	position: absolute;
	inset-block: -20%;
	inset-inline-start: 0;
	inline-size: 42%;
	z-index: 2;
	pointer-events: none;
	opacity: var(--sweep, 0);
	transform: translateX(var(--x, -60%)) skewX(-14deg);
	background: linear-gradient(100deg,
		transparent 0%, rgba(255,255,255,0.07) 38%,
		rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.07) 62%, transparent 100%);
}
.mona-shot{ --x: -60%; --sweep: 0; }

.mona-scale__note{
	margin-block-start: clamp(20px, 2.4vw, 30px);
	font-size: var(--t-s);
	line-height: 1.65;
	color: var(--steel);
	max-inline-size: 58ch;
}

/* ══ Boot ═════════════════════════════════════════════════════════════════
   The curtain is the site's own idea rather than a spinner. The screen is one
   surface split along a diagonal seam — the same diagonal the spindle silhouette
   is built on — and it parts perpendicular to that seam while a round badge
   lifts away. Nothing counts, nothing spins: the page opens.

   display:none by default. Only .js turns it on — a curtain that no script is
   coming to lift is the worst thing this file could ship. */
.mona-boot{ display: none; }
.js .mona-boot{
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 60;
	align-items: center;
	justify-content: center;
	/* No ground of its own. The two halves ARE the cover, so when they part they
	   reveal the page rather than a second black layer behind them. */
	background: none;
}
.mona-boot[data-done="true"]{ pointer-events: none; }

/* ── The two halves ──────────────────────────────────────────────────────
   Each covers the full viewport and is clipped to one side of the seam, which
   runs corner to corner from top-right to bottom-left. Together they are
   opaque; apart they are gone. Clipping rather than sizing means the seam
   stays exact at every aspect ratio. */
.mona-boot__tri{
	position: absolute;
	inset: 0;
	background-color: var(--onyx);
	will-change: transform;
}
.mona-boot__tri--a{
	clip-path: polygon(0 0, 100% 0, 0 100%);
	background-image: var(--sheen);
}
.mona-boot__tri--b{
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	background-image: var(--sheen-warm);
}

/* ── The badge ───────────────────────────────────────────────────────────
   Sits over the seam, so it reads as one object holding the two halves shut. */
.mona-boot__badge{
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: clamp(136px, 21vw, 192px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: var(--tick) solid var(--line-strong);
	box-shadow: var(--edge), 0 0 70px -20px rgba(217,154,91,0.5);
	will-change: transform, opacity;
}
.js .mona-boot__badge{ opacity: 0; }

/* The travelling arc. A separate element, not a pseudo, because GSAP rotates
   it — a pseudo-element cannot be tweened. */
.mona-boot__ring{
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	background: conic-gradient(from 0deg,
		transparent 0deg, rgba(217,154,91,0.15) 26deg,
		var(--copper) 62deg, rgba(217,154,91,0.15) 98deg, transparent 124deg);
	/* #000 ở đây là điểm dừng ALPHA của mặt nạ, không phải màu thiết kế:
	   trong mask, đen đục = alpha 1 = phần được giữ lại. Đừng token hoá nó
	   thành biến màu — đổi bảng màu không được phép đụng tới mặt nạ. */
	-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
	        mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
	will-change: transform;
}
/* Safari before 15.4 has -webkit-mask but not mask; a browser with neither
   would paint the whole conic disc over the wordmark. Hiding the arc there
   costs an accent and keeps the badge legible. */
@supports not ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))){
	.mona-boot__ring{ display: none; }
}

.mona-boot__mark{
	display: grid;
	justify-items: center;
	gap: 5px;
	text-align: center;
	line-height: 1;
}
.mona-boot__mark b{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: var(--track-lab);
	text-transform: uppercase;
	color: var(--steel);
}
.mona-boot__mark i{
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 3.4vw, 2.2rem);
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--platinum);
	/* Same crop guard as .mona-chrome: a condensed face stacks Vietnamese marks
	   above cap-height and line-height:1 has nowhere to put them. */
	padding-block-start: 0.08em;
}
.js .mona-boot__mark{ opacity: 0; }

@media (prefers-reduced-motion: reduce){
	/* No curtain at all: it exists only to cover an animation that is not
	   going to run. */
	.js .mona-boot{ display: none; }
	.mona-shot::before{ display: none; }
	.mona-shot--mirror{ -webkit-box-reflect: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TRANG CON
   Không có component nào ở đây phát minh lại thứ trang chủ đã có: nền, ánh
   sáng, thước chữ, viền hairline đều là token cũ. Cái mới chỉ là những hình
   trang chủ không cần — bảng, biểu mẫu, văn bản dài, phân trang.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ Breadcrumb ══════════════════════════════════════════════════════════ */
.mona-crumb{ padding-block-start: clamp(20px, 2.4vw, 30px); }
.mona-crumb__list{
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 6px 10px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.08em;
	color: var(--steel);
}
.mona-crumb__list li{ display: flex; align-items: center; gap: 10px; }
.mona-crumb__list li + li::before{ content: "/"; color: var(--line-strong); }
.mona-crumb__list a{ color: var(--steel); transition: color var(--dur-fast) var(--ease-out); }
.mona-crumb__list a:hover{ color: var(--copper); }
.mona-crumb__list [aria-current="page"]{ color: var(--silver); }

/* ══ Page header ═════════════════════════════════════════════════════════ */
.mona-phead{
	position: relative;
	padding-block: clamp(26px, 3.4vw, 48px) clamp(34px, 4.4vw, 66px);
	overflow: hidden;
}
/* Cùng một luồng ánh sáng chếch của hero trang chủ, hạ cường độ — để trang con
   là cùng một căn phòng chứ không phải một chủ đề khác. */
.mona-phead::before{
	content: "";
	position: absolute;
	inset-block-start: -60%;
	inset-inline-end: -10%;
	inline-size: 54vw; block-size: 150%;
	/* Ba chặng, không phải hai. Với hai chặng, closest-side trên một hộp cao và
	   hẹp làm rìa elip hiện thành một đường tròn thấy được — trên hero trang chủ
	   thì hộp đủ cao nên không lộ, ở page header thấp hơn thì lộ ngay. */
	background: radial-gradient(closest-side,
		rgba(217,154,91,0.11), rgba(217,154,91,0.04) 52%, transparent 86%);
	pointer-events: none;
}
.mona-phead > *{ position: relative; }
.mona-phead--tall{ padding-block: clamp(48px, 7vw, 110px) clamp(30px, 4vw, 56px); }
.mona-phead__h{ font-size: clamp(1.85rem, 3.4vw, 3rem); margin-block: 16px 0; }
.mona-phead__lede{ margin-block-start: clamp(16px, 2vw, 24px); }

/* Ba con số đặt ngay dưới tiêu đề. Cùng ngôn ngữ với bảng số ở footer. */
.mona-facts{
	display: flex; flex-wrap: wrap;
	gap: 0;
	margin-block-start: clamp(24px, 3vw, 40px);
	border-block-start: var(--tick) solid var(--line);
}
.mona-facts > div{
	padding: 16px clamp(20px, 2.4vw, 34px) 16px 0;
	margin-inline-end: clamp(20px, 2.4vw, 34px);
	border-inline-end: var(--tick) solid var(--line);
}
.mona-facts > div:last-child{ border-inline-end: 0; margin-inline-end: 0; }
.mona-facts dt{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
}
.mona-facts dd{
	margin: 6px 0 0;
	font-family: var(--f-display);
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--platinum);
}

.mona-sechead{ font-size: clamp(1.6rem, 3vw, 2.4rem); margin-block-end: clamp(20px, 2.4vw, 32px); }
.mona-sechead:not(:first-child){ margin-block-start: clamp(48px, 5.5vw, 80px); }

/* ══ Bảng ════════════════════════════════════════════════════════════════
   Cuộn ngang trong hộp của chính nó, không đẩy cả trang trôi ngang. tabindex
   trên vùng cuộn là bắt buộc: một vùng cuộn không focus được thì bàn phím
   không bao giờ tới được cột cuối. */
.mona-tablewrap{
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong) transparent;
}
.mona-tablewrap:focus-visible{ outline: 2px solid var(--copper); outline-offset: 3px; }
.mona-table{
	inline-size: 100%;
	min-inline-size: 620px;
	border-collapse: collapse;
	text-align: start;
}
.mona-table thead th{
	padding: 14px 16px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
	text-align: start;
	border-block-end: var(--tick) solid var(--line-strong);
	white-space: nowrap;
}
.mona-table__pcol{ text-align: end !important; }
.mona-table td, .mona-table tbody th{ padding: 15px 16px; border-block-end: var(--tick) solid var(--line); }
/* Mỗi dòng xe là một <tbody>: nhóm ngữ nghĩa thật, nên viền đậm ở đây là hàng
   rào có nghĩa chứ không phải vạch trang trí mỗi n dòng. */
.mona-table__grp + .mona-table__grp > tr:first-child > *{ border-block-start: var(--tick) solid var(--line-strong); }
.mona-table tbody tr{ transition: background var(--dur-fast) var(--ease-out); }
.mona-table tbody tr:hover{ background: var(--slate); }
.mona-table__line{
	vertical-align: top;
	inline-size: 1%;
	white-space: nowrap;
	text-align: start;
	font-weight: 400;
}
.mona-table__line a{
	font-family: var(--f-display);
	font-size: var(--t-m);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--platinum);
	transition: color var(--dur-fast) var(--ease-out);
}
.mona-table__line a:hover{ color: var(--copper); }
.mona-table__line b{
	display: block;
	margin-block-start: 3px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	font-weight: 400;
	color: var(--steel);
}
.mona-table__v{ color: var(--platinum); font-size: var(--t-s); }
.mona-table__pw{ inline-size: 1%; white-space: nowrap; }
.mona-table__p{ text-align: end; color: var(--silver); font-size: var(--t-s); white-space: nowrap; }
.mona-table--vs th[scope="row"]{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--steel);
	text-align: start;
}
.mona-table--vs td{ color: var(--platinum); font-size: var(--t-s); }
/* Ô chưa có dữ liệu nói rõ là chưa có, và trông khác hẳn ô có dữ liệu — một
   khoảng trắng im lặng đọc thành "không có gì để nói", không phải "chưa tra". */
.mona-table__na td{ color: var(--steel); font-style: italic; }
.mona-tablenote{ margin-block-start: clamp(18px, 2.2vw, 26px); }

.mona-tag{
	display: inline-flex; align-items: center;
	padding: 4px 10px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	color: var(--steel);
	box-shadow: inset 0 0 0 var(--tick) var(--line-strong);
}
.mona-tag--hy{ color: var(--copper); box-shadow: inset 0 0 0 var(--tick) rgba(217,154,91,0.5); }

/* ══ Hộp ghi chú ═════════════════════════════════════════════════════════ */
.mona-note{
	background: var(--graphite);
	box-shadow: var(--edge-soft);
	border-inline-start: 2px solid var(--line-strong);
	padding: 20px 24px;
	font-size: var(--t-s);
	line-height: 1.7;
	color: var(--silver);
}
.mona-note + .mona-note{ margin-block-start: 16px; }
.mona-note--wide{ margin-block-start: clamp(26px, 3vw, 40px); max-inline-size: 78ch; }
.mona-note--ok{ border-inline-start-color: var(--copper); }
.mona-note__k{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--copper);
	margin-block-end: 9px;
}

.mona-srcbox{
	background: var(--graphite);
	box-shadow: var(--edge-soft);
	padding: clamp(20px, 2.4vw, 30px);
	max-inline-size: 82ch;
}
.mona-srcbox--gap{ border-inline-start: 2px solid var(--steel); }
.mona-srcbox__dl{ display: grid; gap: 0; margin-block-end: 20px; }
.mona-srcbox__dl > div{
	display: grid;
	grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr);
	gap: 16px;
	padding-block: 11px;
	border-block-end: var(--tick) solid var(--line);
}
.mona-srcbox__dl dt{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
}
.mona-srcbox__dl dd{ margin: 0; font-size: var(--t-s); color: var(--platinum); }
.mona-srcbox__dl a{ color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }

/* ══ Văn bản dài ═════════════════════════════════════════════════════════ */
/* Khổ đọc thuộc về KHỐI CHỮ, không thuộc về cột.
   Đặt cap trên wrapper thì nó tính theo cỡ chữ của wrapper (--t-body), trong
   khi đoạn văn bên trong lại là --t-m — đo được cùng một "74ch" ra 725px ở
   trang bài viết và 895px ở trang chữ dài. Cap trên chính khối chữ thì 68ch là
   68ch, bất kể cỡ chữ. Khối không phải để đọc liên tục — .mona-official,
   .mona-prose__acts, .mona-srcbox — không bị bó, nên chúng trải hết cột. */
.mona-prose > p,
.mona-prose > h2,
.mona-prose > ul,
.mona-prose > blockquote{ max-inline-size: 68ch; }
.mona-prose h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-block: clamp(38px, 4.4vw, 62px) 18px; }
.mona-prose h2:first-child{ margin-block-start: 0; }
.mona-prose p{ font-size: var(--t-m); line-height: 1.78; color: var(--silver); }
.mona-prose p + p{ margin-block-start: 18px; }
.mona-prose strong{ color: var(--platinum); font-weight: 600; }
.mona-prose a:not(.mona-act){ color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }
.mona-prose__acts{ display: flex; flex-wrap: wrap; gap: 16px 34px; margin-block-start: clamp(32px, 3.6vw, 48px); }

.mona-bullets{ display: grid; gap: 12px; margin-block-start: 18px; }
.mona-bullets li{
	position: relative;
	padding-inline-start: 22px;
	font-size: var(--t-s);
	line-height: 1.7;
	color: var(--silver);
}
.mona-bullets li::before{
	content: "";
	position: absolute;
	inset-block-start: 0.66em;
	inset-inline-start: 0;
	inline-size: 8px; block-size: var(--tick);
	background: var(--copper);
}
.mona-bullets strong{ color: var(--platinum); font-weight: 600; }

.mona-quote{
	margin: clamp(28px, 3.4vw, 46px) 0;
	padding-inline-start: clamp(20px, 2.4vw, 30px);
	border-inline-start: 2px solid var(--copper);
	font-family: var(--f-display);
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--platinum);
}

/* ── Thẻ trần trong thân bài ─────────────────────────────────────────────
   base.css:47 reset `ul, ol{ margin:0; padding:0; list-style:none }`, và các
   lớp .mona-bullets / .mona-table là thứ dựng lại hình dáng. Nhưng thân bài
   nhận HTML từ trình soạn thảo và từ dây chuyền sinh nội dung, nơi thẻ luôn
   TRẦN — không class nào cả.

   Đo trên /chi-phi-bao-duong-lexus/: 19 <li>, 1 <table> 5 dòng 16 ô, tất cả
   không class. Danh sách vì thế đổ ra thành chữ chạy liền không dấu đầu dòng,
   bảng thì không viền không padding. Không phải lỗi nội dung — lỗi ở chỗ CSS
   chỉ styling thẻ có class.

   Nên styling theo THẺ bên trong .mona-prose, dùng đúng hình dáng của
   .mona-bullets và .mona-table. Ai gõ gì trong wp-admin cũng ra đúng. */

.mona-prose > ul,
.mona-prose > ol{ margin-block: 22px; display: grid; gap: 12px; max-inline-size: 68ch; }

.mona-prose > ul > li,
.mona-prose > ol > li{
	position: relative;
	padding-inline-start: 26px;
	font-size: var(--t-m);
	line-height: 1.78;
	color: var(--silver);
}
.mona-prose > ul > li::before{
	content: "";
	position: absolute;
	inset-block-start: 0.72em;
	inset-inline-start: 0;
	inline-size: 10px; block-size: var(--tick);
	background: var(--copper);
}
/* Số đếm bằng font mono để cột số thẳng hàng, và đồng bộ với mọi con số khác. */
.mona-prose > ol{ counter-reset: mona-ol; }
.mona-prose > ol > li{ counter-increment: mona-ol; }
.mona-prose > ol > li::before{
	content: counter(mona-ol) ".";
	position: absolute;
	inset-inline-start: 0;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	color: var(--copper);
}
.mona-prose li > strong:first-child{ color: var(--platinum); }

.mona-prose h3{
	font-family: var(--f-display);
	font-size: clamp(1.12rem, 1.6vw, 1.34rem);
	line-height: 1.25;
	color: var(--platinum);
	margin-block: clamp(26px, 3vw, 38px) 12px;
	max-inline-size: 68ch;
}

/* Bảng rộng phải tự cuộn trong lòng nó. Cho <table> thành khối cuộn được là
   cách duy nhất khi không chèn thêm được thẻ bọc từ phía CSS — nếu không, cả
   trang trượt ngang trên điện thoại. */
.mona-prose table{
	display: block;
	overflow-x: auto;
	max-inline-size: 100%;
	margin-block: clamp(26px, 3vw, 40px);
	border-collapse: collapse;
	font-size: var(--t-s);
	white-space: normal;
}
.mona-prose table thead th{
	position: sticky;
	inset-block-start: 0;
	background: var(--slate);
	padding: 13px 16px;
	text-align: start;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--copper);
	white-space: nowrap;
}
.mona-prose table td,
.mona-prose table tbody th{
	padding: 15px 16px;
	border-block-end: var(--tick) solid var(--line);
	color: var(--silver);
	line-height: 1.7;
	vertical-align: top;
	min-inline-size: 8ch;
}
.mona-prose table tbody th{ color: var(--platinum); font-weight: 600; text-align: start; }
.mona-prose table tbody tr:hover{ background: var(--graphite); }

/* Bôi đậm dày quá thì mặt chữ loang, đọc mệt hơn là dễ. Giữ nhấn mạnh nhưng
   nhẹ tay hơn khi nó nằm giữa một câu dài. */
.mona-prose p > strong{ font-weight: 600; }


/* ══ Bài viết ════════════════════════════════════════════════════════════ */
.mona-art__head{ padding-block: clamp(20px, 2.6vw, 34px) clamp(26px, 3vw, 40px); }
/* Không chặn bề rộng, và cỡ nhỏ hơn --t-xl.
   Đo được: hộp bị chặn ở 772px (22ch) trong container 1440 trong khi dòng dài
   nhất chỉ 540px — bỏ trống 900px ở cỡ chữ 73,6px. Chặn bề rộng rồi lại để chữ
   to là hai quyết định đánh nhau: chữ to cần nhiều chỗ, mà chỗ thì bị lấy đi.
   Bỏ chặn, hạ cỡ, để chữ dùng hết chiều ngang rồi mới xuống hàng. */
.mona-art__h{
	font-size: clamp(1.85rem, 3.4vw, 3rem);
	margin-block: 16px clamp(18px, 2.2vw, 26px);
}
.mona-art__meta{
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	margin-block-start: clamp(20px, 2.4vw, 30px);
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.08em;
	color: var(--steel);
}
.mona-art__meta i{ font-style: normal; color: var(--line-strong); }
.mona-art__meta b{ font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--copper); }
.mona-art__lead{ --shot: 21 / 9; }
.mona-art__body{ padding-block: clamp(38px, 4.4vw, 66px) 0; }
/* Chỉ ĐOẠN VĂN bị giới hạn khổ đọc. Share và box tác giả là khối, không phải
   dòng chữ để đọc liên tục — bó chúng theo 74ch làm nửa cột dưới trông hụt. */
.mona-art__main > .mona-share,
.mona-art__main > .mona-abox{ max-inline-size: none; }

/* ══ Lưới dòng xe ════════════════════════════════════════════════════════ */
.mona-lgrid{ display: grid; gap: clamp(16px, 2vw, 30px); }
.mona-lcard{ background: var(--graphite); background-image: var(--sheen); box-shadow: var(--edge), var(--shadow); }
.mona-lcard__a{
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(20px, 3vw, 52px);
}
.mona-lcard__shot{ --shot: 16 / 9; }
.mona-lcard__b{ display: block; padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.6vw, 40px) clamp(20px, 2.4vw, 34px) 0; }
.mona-lcard__idx{ display: block; font-size: var(--t-xs); color: var(--copper); }
.mona-lcard__n{
	display: block;
	font-family: var(--f-display);
	font-size: clamp(1.7rem, 3.2vw, 2.6rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--platinum);
	margin-block-start: 8px;
	transition: color var(--dur-fast) var(--ease-out);
}
.mona-lcard__a:hover .mona-lcard__n{ color: var(--copper); }
.mona-lcard__t{
	display: block;
	margin-block-start: 6px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--steel);
}
.mona-lcard__d{ display: block; margin-block-start: 14px; font-size: var(--t-s); color: var(--silver); max-inline-size: 46ch; }
.mona-lcard__p{
	display: flex; align-items: baseline; gap: 12px;
	margin-block-start: 18px;
	padding-block-start: 16px;
	border-block-start: var(--tick) solid var(--line);
}
.mona-lcard__p em{
	font-style: normal;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
}
.mona-lcard__p b{
	font-family: var(--f-display);
	font-size: clamp(1.3rem, 2.2vw, 1.8rem);
	font-weight: 700;
	color: var(--copper);
}
@media (max-width: 820px){
	.mona-lcard__a{ grid-template-columns: 1fr; gap: 0; }
	.mona-lcard__b{ padding: clamp(20px, 4vw, 28px); }
}

/* ══ Hero dòng xe ════════════════════════════════════════════════════════ */
.mona-mhero{ position: relative; padding-block: clamp(24px, 3vw, 40px) clamp(30px, 4vw, 56px); overflow: hidden; }
.mona-mhero::before{
	content: "";
	position: absolute;
	inset-block-start: -40%; inset-inline-end: -12%;
	inline-size: 56vw; block-size: 150%;
	background: radial-gradient(closest-side,
		rgba(217,154,91,0.12), rgba(217,154,91,0.04) 52%, transparent 86%);
	pointer-events: none;
}
.mona-mhero > *{ position: relative; }
.mona-mhero__grid{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(26px, 4vw, 64px);
	align-items: center;
}
.mona-mhero__h{ font-size: clamp(1.85rem, 3.4vw, 3rem); margin-block: 14px clamp(18px, 2.2vw, 26px); }
.mona-mhero__shot{ --shot: 16 / 9; }
@media (max-width: 900px){ .mona-mhero__grid{ grid-template-columns: 1fr; } }

/* ══ Đối chiếu ═══════════════════════════════════════════════════════════ */
.mona-pick{
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px clamp(16px, 2vw, 26px);
	padding: clamp(18px, 2.2vw, 26px);
	background: var(--graphite);
	box-shadow: var(--edge-soft);
	margin-block-end: clamp(34px, 4vw, 56px);
}
.mona-pick__f{ flex: 1 1 240px; min-inline-size: 0; }

.mona-vs{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: clamp(18px, 2.6vw, 42px);
	align-items: center;
	margin-block-end: clamp(34px, 4vw, 56px);
}
.mona-vs__col{ min-inline-size: 0; }
.mona-vs__col--card{
	padding: clamp(22px, 2.6vw, 34px);
	background: var(--graphite);
	background-image: var(--sheen);
	box-shadow: var(--edge), var(--shadow);
	border-inline-start: 2px solid var(--copper);
}
.mona-vs__shot{ --shot: 16 / 9; margin-block-end: 10px; }
/* Caption gắn liền ảnh, không phải chú thích rời. Nó là thứ nói rằng tấm ảnh
   thuộc về DÒNG XE chứ không phải phiên bản — nên khi hai bản được chọn cùng
   một dòng và hai cột dùng chung một tấm, người đọc hiểu vì sao. */
.mona-vs__cap{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.08em;
	color: var(--steel);
	margin-block-end: 16px;
	padding-block-end: 14px;
	border-block-end: var(--tick) solid var(--line);
}
.mona-vs__t{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
	margin-block-end: 14px;
}
.mona-vs__tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 18px; }
.mona-vs__col--card{
	padding: clamp(22px, 2.6vw, 34px);
	background: var(--graphite);
	background-image: var(--sheen);
	box-shadow: var(--edge), var(--shadow);
	border-inline-start: 2px solid var(--copper);
}
.mona-vs__t{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
	margin-block-end: 14px;
}
.mona-vs__tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 18px; }
.mona-vs__n{
	margin-block-start: 16px;
	font-family: var(--f-display);
	font-size: clamp(1.15rem, 2vw, 1.6rem);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--platinum);
}
.mona-vs__p{ margin-block-start: 6px; font-size: var(--t-s); color: var(--silver); }
.mona-vs__mid{ text-align: center; }
.mona-vs__k, .mona-vs__s{
	display: block;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
}
.mona-vs__d{
	display: block;
	margin-block: 10px;
	font-family: var(--f-display);
	font-size: clamp(1.6rem, 3.4vw, 2.8rem);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
@media (max-width: 760px){
	.mona-vs{ grid-template-columns: 1fr; }
	.mona-vs__mid{ order: 3; }
}

/* ══ Ô chọn và địa chỉ đính chính ════════════════════════════════════════ */
/* Không còn biểu mẫu nào trên site. .mona-form__l/i/--sel giờ chỉ phục vụ hai
   ô chọn của trang đối chiếu; phần còn lại của khối form đã gỡ cùng với form
   liên hệ — xem docblock của templates/template-contact.php. */
.mona-contact{
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
}
.mona-form__l{
	display: block;
	margin-block-end: 9px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--silver);
}
.mona-form__i{
	inline-size: 100%;
	min-block-size: 48px;
	padding: 12px 16px;
	border: 0;
	box-shadow: inset 0 0 0 var(--tick) var(--line-strong);
	background: var(--graphite);
	color: var(--platinum);
	font-family: var(--f-body);
	font-size: var(--t-body);
}
.mona-form__i::placeholder{ color: var(--steel); }
.mona-form__i:focus{ outline: none; box-shadow: inset 0 0 0 2px var(--copper); }
.mona-form__i--sel{ appearance: none; padding-inline-end: 40px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23828A97' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center;
}
.mona-btn{
	display: inline-flex; align-items: center; justify-content: center;
	min-block-size: 48px;
	padding-inline: 28px;
	border: 0;
	background: var(--copper);
	color: var(--onyx);
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out);
}
.mona-btn:hover{ background: var(--copper-lift); }
.mona-mailto{
	display: inline-block;
	font-family: var(--f-mono);
	font-size: var(--t-body);
	color: var(--copper);
	border-block-end: var(--tick) solid currentColor;
	padding-block-end: 2px;
	overflow-wrap: anywhere;
}
.mona-mailto:hover{ color: var(--copper-lift); }
.mona-contact__side{ display: grid; gap: 16px; }
@media (max-width: 860px){ .mona-contact{ grid-template-columns: 1fr; } }

/* ══ Ô tìm trên trang kết quả / 404 ══════════════════════════════════════ */
.mona-sform{ display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: clamp(22px, 2.6vw, 32px); max-inline-size: 620px; }
.mona-sform--wide{ max-inline-size: 760px; margin-block-end: clamp(34px, 4vw, 56px); }
.mona-sform__i{
	flex: 1 1 220px;
	min-inline-size: 0;
	min-block-size: 48px;
	padding: 12px 16px;
	border: 0;
	box-shadow: inset 0 0 0 var(--tick) var(--line-strong);
	background: var(--graphite);
	color: var(--platinum);
	font-family: var(--f-body);
	font-size: var(--t-body);
}
.mona-sform__i::placeholder{ color: var(--steel); }
.mona-sform__i:focus{ outline: none; box-shadow: inset 0 0 0 2px var(--copper); }

/* ══ Ô điều hướng của 404 ════════════════════════════════════════════════ */
.mona-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.mona-tiles a{
	display: block;
	block-size: 100%;
	padding: clamp(18px, 2.2vw, 26px);
	background: var(--graphite);
	background-image: var(--sheen);
	box-shadow: var(--edge);
	border-inline-start: 2px solid var(--line-strong);
	transition: border-color var(--dur-fast) var(--ease-out);
}
.mona-tiles a:hover{ border-inline-start-color: var(--copper); }
.mona-tiles b{
	display: block;
	font-family: var(--f-display);
	font-size: var(--t-m);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--platinum);
}
.mona-tiles span{ display: block; margin-block-start: 7px; font-size: var(--t-xs); color: var(--steel); line-height: 1.6; }
@media (max-width: 900px){ .mona-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .mona-tiles{ grid-template-columns: 1fr; } }

/* ══ Phân trang ══════════════════════════════════════════════════════════
   Một component duy nhất cho mọi trang danh sách — dynamic-content.md §2 ghi
   lại một theme từng ship ba kiểu pager khác nhau trong khi component của
   chính nó không có ai gọi. */
/* Các selector dưới đây bám vào class paginate_links() THẬT SỰ phát ra, không
   phải tên trong prototype.

   Prototype viết tay `.mona-pagination__cur` và `.mona-pagination__next`.
   WordPress không bao giờ in hai tên đó: nó in `.page-numbers` cho mọi mục,
   thêm `.current` cho trang đang xem, `.prev`/`.next` cho hai mũi tên, và
   `.dots` cho dấu lược. Quan trọng hơn: mục đang xem là <span>, không phải
   <a> — nên một rule viết cho `a` bỏ sót đúng nó, và trang hiện tại hiện ra
   thành chữ trần không khung.

   Bắc cầu MỘT chiều: style tên của WordPress, và bỏ hẳn tên cũ thay vì giữ cả
   hai. Hai tên cho một thứ là hai thứ sẽ lệch nhau. */
.mona-pagination{
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
	margin-block-start: clamp(38px, 4.4vw, 62px);
	padding-block-start: clamp(24px, 2.8vw, 34px);
	border-block-start: var(--tick) solid var(--line);
}
.mona-pagination .page-numbers{
	display: inline-flex; align-items: center; justify-content: center;
	min-inline-size: 44px; min-block-size: 44px;
	padding-inline: 14px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	color: var(--steel);
	box-shadow: inset 0 0 0 var(--tick) var(--line);
	transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.mona-pagination a.page-numbers:hover{ color: var(--platinum); box-shadow: inset 0 0 0 var(--tick) var(--line-strong); }
.mona-pagination .page-numbers.current{ color: var(--onyx); background: var(--copper); box-shadow: none; font-weight: 600; }
/* Dấu lược giữa các số: là chữ, không phải nút — không khung, không cỡ chạm. */
.mona-pagination .page-numbers.dots{
	box-shadow: none; min-inline-size: 22px; padding-inline: 2px; color: var(--steel);
}
.mona-pagination .page-numbers svg{ inline-size: 18px; block-size: 18px; }

/* ══ Thư viện ảnh (trang riêng) ══════════════════════════════════════════ */
.mona-ggrid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.mona-gitem__shot{ --shot: 3 / 2; }
@media (max-width: 900px){ .mona-ggrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .mona-ggrid{ grid-template-columns: 1fr; } }

/* ══ Danh sách bài viết dạng trang ═══════════════════════════════════════ */
.mona-news__list--page{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1040px){ .mona-news__list--page{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px){ .mona-news__list--page{ grid-template-columns: 1fr; } }

.mona-rel{ border-block-start: var(--tick) solid var(--line); }
.mona-rel__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px){ .mona-rel__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══ Bài viết — cột phụ, chia sẻ, tác giả ════════════════════════════════ */
.mona-art__grid{
	display: grid;
	/* Cột chính nhận phần dư; khổ đọc do .mona-prose giữ, không phải do lưới.
	   Bản trước cho lưới đúng 74ch rồi space-between, và phần dư dồn hết vào
	   GIỮA hai cột — đo được 286px hố ở 1440px, box tác giả hết ở 804 trong khi
	   cột phụ mãi 1090. Một dải trống giữa hai cột đọc thành lỗi lưới; còn mép
	   phải so le của đoạn văn chỉ là chữ chạy hết dòng, chuyện bình thường. */
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
	padding-block: clamp(38px, 4.4vw, 66px) 0;
}
.mona-art__main{ min-inline-size: 0; }
.mona-art__aside{
	min-inline-size: 0;
	/* align-self, và nó là thứ làm sticky chạy được. Lưới đặt align-items:start
	   nên cột phụ co đúng bằng chiều cao khối bên trong — đo được: cột phụ 609px,
	   khối sticky 609px, dư 0px. Một phần tử sticky chỉ trượt được TRONG hộp cha
	   của nó, nên dư 0 nghĩa là nó không bao giờ nhúc nhích, dù computed style
	   vẫn báo position:sticky. Kéo cột phụ cao bằng hàng lưới thì nó có 1181px
	   để trượt. */
	align-self: stretch;
}
/* Cột phụ dính theo màn hình, nhưng chừa chỗ cho header sticky ở trên. */
/* KHÔNG trần chiều cao, KHÔNG cuộn trong cột.
   Bản trước cắt cột ở chiều cao viewport và cho cuộn bên trong: đo ở màn 722px
   thì hộp cao 609px ôm nội dung 791px, nên ô promo mất đúng 182px — cả tiêu đề
   lẫn nút, và chỉ thấy được nếu người đọc biết cuộn BÊN TRONG cột, thứ không ai
   phát hiện ra. Nội dung bị giấu tệ hơn hẳn một cột không dính.

   Nay cột cao hơn màn vẫn dính, nhưng dính BÁM THEO CHIỀU CUỘN — xem
   stickyFollow() trong main.js. `top` do JS điều khiển, không đặt ở đây. */
.mona-sticky{ display: grid; gap: 12px; }
/* Chỉ dính khi JS có mặt — chính JS đặt data-follow và điều khiển `top`.
   Không có JS thì cột nằm yên và cuộn cùng trang: không dính, nhưng cũng không
   giấu gì. Đó là đánh đổi đúng; một cột dính mà đáy không với tới được thì tệ
   hơn một cột không dính. */
.mona-sticky[data-follow]{ position: sticky; }
/* Neo tới tiêu đề phải chừa header sticky, nếu không mục vừa nhảy tới bị che. */
.mona-art__body h2{ scroll-margin-block-start: calc(var(--mast-h, 82px) + 20px); }

/* ── Mục lục ─────────────────────────────────────────────────────────────
   Là danh sách link neo thật, chạy đủ khi không có JS. JS chỉ thêm phần tô
   sáng mục đang đọc — một tiện ích, không phải điều kiện để dùng được. */
.mona-toc{
	background: var(--graphite);
	background-image: var(--sheen);
	box-shadow: var(--edge);
	border-inline-start: 2px solid var(--copper);
	padding: 15px 16px;
}
.mona-toc__k, .mona-sbox__k, .mona-promo__k{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: var(--track-lab);
	text-transform: uppercase;
	color: var(--copper);
	margin-block-end: 14px;
}
.mona-toc__list{ display: grid; gap: 1px; counter-reset: toc; }
.mona-toc__list a{
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-block: 7px;
	font-size: var(--t-s);
	line-height: 1.5;
	color: var(--silver);
	border-block-end: var(--tick) solid var(--line);
	transition: color var(--dur-fast) var(--ease-out);
}
.mona-toc__list li:last-child a{ border-block-end: 0; }
.mona-toc__list a::before{
	counter-increment: toc;
	content: counter(toc, decimal-leading-zero);
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	color: var(--steel);
	flex: none;
}
.mona-toc__list a:hover{ color: var(--platinum); }
.mona-toc__list a[aria-current="true"]{ color: var(--copper); }
.mona-toc__list a[aria-current="true"]::before{ color: var(--copper); }

/* ── Hộp thông tin ───────────────────────────────────────────────────────── */
.mona-sbox{
	background: var(--graphite);
	box-shadow: var(--edge-soft);
	padding: 15px 16px;
}
.mona-sbox__dl{ display: grid; }
.mona-sbox__dl > div{
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 14px;
	padding-block: 10px;
	border-block-end: var(--tick) solid var(--line);
}
.mona-sbox__dl dt{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--steel);
}
.mona-sbox__dl dd{ margin: 0; font-size: var(--t-s); color: var(--platinum); white-space: nowrap; }

/* ── Ô promo ─────────────────────────────────────────────────────────────
   Promo NỘI BỘ. Nhãn ở trên nói rõ nó là của trang này — nếu chỗ này sau đó
   thành quảng cáo trả tiền, nhãn phải đổi thành "Quảng cáo", không được để
   trống. Một ô promo trông y hệt nội dung là cái bẫy cần tránh. */
.mona-promo{
	display: block;
	background: var(--graphite);
	background-image: var(--sheen-warm);
	box-shadow: var(--edge), var(--shadow);
	padding: 15px 16px;
}
.mona-promo__shot{ --shot: 4 / 1; margin-block-end: 10px; }
.mona-promo__shot img{ transition: transform 0.5s var(--ease-out); }
.mona-promo:hover .mona-promo__shot img{ transform: scale(1.05); }
.mona-promo__t{
	display: block;
	font-family: var(--f-display);
	font-size: var(--t-m);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--platinum);
	transition: color var(--dur-fast) var(--ease-out);
}
.mona-promo:hover .mona-promo__t{ color: var(--copper); }
.mona-promo__a{
	display: inline-flex; align-items: center; gap: 10px;
	min-block-size: 30px;
	margin-block-start: 14px;
	padding-block-end: 2px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--copper);
	border-block-end: var(--tick) solid currentColor;
}
.mona-promo__a::after{ content: "\2192"; transition: transform var(--dur-fast) var(--ease-out); }
.mona-promo:hover .mona-promo__a::after{ transform: translateX(5px); }

/* ── Chia sẻ ─────────────────────────────────────────────────────────────── */
.mona-share{
	margin-block-start: clamp(34px, 4vw, 52px);
	padding-block-start: clamp(24px, 2.8vw, 34px);
	border-block-start: var(--tick) solid var(--line);
}
.mona-share__k{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: var(--track-lab);
	text-transform: uppercase;
	color: var(--steel);
	margin-block-end: 14px;
}
.mona-share__row{ display: flex; flex-wrap: wrap; gap: 10px; }
.mona-share__b{
	display: inline-flex; align-items: center; gap: 10px;
	min-block-size: 44px;
	padding-inline: 16px;
	border: 0;
	background: var(--graphite);
	box-shadow: var(--edge-soft), inset 0 0 0 var(--tick) var(--line);
	color: var(--silver);
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.mona-share__b:hover{ color: var(--platinum); background: var(--slate); }
.mona-share__b svg{ inline-size: 16px; block-size: 16px; flex: none; }
.mona-share__b--copy[data-done="true"]{ color: var(--copper); }

/* ── Box tác giả ─────────────────────────────────────────────────────────── */
.mona-abox{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(16px, 2vw, 26px);
	margin-block-start: clamp(28px, 3.2vw, 42px);
	padding: clamp(20px, 2.4vw, 30px);
	background: var(--graphite);
	background-image: var(--sheen);
	box-shadow: var(--edge), var(--shadow);
	border-inline-start: 2px solid var(--copper);
}
/* Monogram, không phải một khuôn mặt. Trang không dựng người viết ảo, nên cũng
   không dựng chân dung ảo cho họ. */
.mona-abox__av{
	display: grid; place-items: center;
	inline-size: 62px; block-size: 62px;
	border-radius: 50%;
	border: var(--tick) solid var(--line-strong);
	font-family: var(--f-display);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--copper);
}
.mona-abox__b{ min-inline-size: 0; }
.mona-abox__k{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: var(--track-lab);
	text-transform: uppercase;
	color: var(--steel);
}
.mona-abox__n{
	margin-block-start: 6px;
	font-family: var(--f-display);
	font-size: var(--t-m);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--platinum);
}
.mona-abox__d{ margin-block-start: 10px; font-size: var(--t-s); line-height: 1.7; color: var(--silver); }
.mona-abox__l{ display: flex; flex-wrap: wrap; gap: 10px 22px; margin-block-start: 16px; }
.mona-abox__l a{
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	color: var(--copper);
	border-block-end: var(--tick) solid currentColor;
	padding-block-end: 2px;
}

@media (max-width: 1040px){
	/* Cột phụ xuống dưới bài. Mục lục dính ở đây là vô nghĩa — nó nằm sau nội
	   dung mà nó dùng để dẫn đường. */
	.mona-art__grid{ grid-template-columns: 1fr; }
	/* [data-follow] chứ không phải .mona-sticky trần: JS đặt data-follow với
	   độ đặc hiệu 0,2,0, còn một selector class trần chỉ 0,1,0 — media query
	   KHÔNG cộng thêm đặc hiệu, nên rule yếu hơn sẽ thua và cột vẫn dính ở khổ
	   mà nó đã nằm dưới bài. */
	.mona-sticky,
	.mona-sticky[data-follow]{ position: static; }
	.mona-sticky{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mona-promo{ grid-column: 1 / -1; }
}
@media (max-width: 620px){
	.mona-sticky{ grid-template-columns: 1fr; }
	.mona-abox{ grid-template-columns: 1fr; }
}

/* ══ Cột phải của trang con ══════════════════════════════════════════════
   Trước đây mọi trang con chỉ có một cột trái; ở container 1440px, đo được
   ~922px bên phải bỏ trống trên page header và một nửa trang trên các trang
   chữ dài. Hai lưới dưới đây đưa số liệu, điều hướng cùng nhóm và mục lục vào
   chỗ đó — lấp bằng thứ có ích chứ không giãn chữ ra cho đầy. */
.mona-phead__grid{
	display: grid;
	/* 300px — CÙNG con số với .mona-pgrid và .mona-art__grid, và đó là cả lý do
	   nó tồn tại. Trước đây là minmax(260px, 340px) nên cột này rộng 340 trong
	   khi cột phụ ở thân trang rộng 300: hai hộp xếp dọc dưới nhau mà mép trái
	   lệch đúng 40px. Ba lưới phải nói cùng một con số, nếu không chúng sẽ trôi
	   khỏi nhau ở lần chỉnh tiếp theo. */
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(26px, 4vw, 68px);
	align-items: start;
}
.mona-phead__panel{ margin-block-start: clamp(18px, 2vw, 26px); }
/* Padding cuối của page header cộng padding đầu của band bên dưới ra ~220px
   trống liền nhau ở 1440px. Hai khoảng thở chồng lên nhau thành một cái hố;
   band đi ngay sau header thì chỉ cần một nửa. */
.mona-phead + .mona-band,
.mona-phead + .mona-mhero{ padding-block-start: clamp(34px, 4vw, 64px); }

.mona-pgrid{
	display: grid;
	/* Cùng lý do với .mona-art__grid — xem ghi chú ở đó. */
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
}
.mona-pgrid__main{ min-inline-size: 0; }
/* Trong lưới hai cột, cột chính ĐÃ là khổ đọc — cap riêng của srcbox (82ch)
   chỉ khiến nó hẹp hơn cột chứa nó thêm một lần nữa. */
.mona-pgrid__main .mona-srcbox{ max-inline-size: none; }

.mona-pgrid__main .mona-sechead:first-child{ margin-block-start: 0; }
/* Tiêu đề trong trang chữ dài cũng là đích của mục lục, nên cũng phải chừa
   header sticky y như trang bài viết. */
.mona-pgrid__main h2{ scroll-margin-block-start: calc(var(--mast-h, 82px) + 20px); }

/* Danh sách link trong hộp cột phụ. */
.mona-slist{ display: grid; gap: 1px; }
.mona-slist a,
.mona-slist span{
	display: block;
	padding-block: 10px;
	font-size: var(--t-s);
	color: var(--silver);
	border-block-end: var(--tick) solid var(--line);
	transition: color var(--dur-fast) var(--ease-out);
}
.mona-slist li:last-child a,
.mona-slist li:last-child span{ border-block-end: 0; }
.mona-slist a:hover{ color: var(--copper); }
.mona-slist [aria-current="page"]{ color: var(--copper); }

/* ══ Thanh vị trí trên thước giá ═════════════════════════════════════════
   Cột "Phiên bản" đo được rộng 608px cho một chuỗi như "ES 250" — phần dư của
   bảng dồn hết vào đó. Thay vì bóp cột lại và để bảng thành một dải hẹp lệch
   trái, chỗ dư nhận một cột mới: mỗi hàng vẽ đúng vị trí của nó trên thước
   2,36–9,70 tỷ. Đây là chữ ký của trang chủ, và số liệu thì đã có sẵn. */
.mona-table__bcol{ inline-size: 34%; }
.mona-table__bar{ inline-size: 34%; }
.mona-bar{ position: relative; display: block; block-size: 18px; }
.mona-bar__t{
	position: absolute;
	inset-block-start: 50%;
	inset-inline: 0;
	block-size: var(--tick);
	background: var(--line-strong);
}
.mona-bar__f{
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	inline-size: var(--at, 0%);
	block-size: var(--tick);
	background: var(--copper);
}
/* Chấm đầu mút: một thanh dài 0% (bản rẻ nhất) sẽ vô hình nếu chỉ có phần tô. */
.mona-bar__f::after{
	content: "";
	position: absolute;
	inset-inline-end: -3px;
	inset-block-start: -3px;
	inline-size: 7px; block-size: 7px;
	background: var(--copper);
	box-shadow: 0 0 10px rgba(217,154,91,0.6);
}

@media (max-width: 1040px){
	.mona-phead__grid{ grid-template-columns: 1fr; }
	.mona-pgrid{ grid-template-columns: 1fr; }
	.mona-pgrid .mona-sticky,
	.mona-pgrid .mona-sticky[data-follow]{ position: static; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LỚP TRANG TRÍ CỦA TRANG CON
   Trang chủ có hero, thước giá, dải ảnh full-bleed, biểu đồ. Trang con trước
   đây chỉ là hộp phẳng xếp cạnh nhau — 5 trang không có một hình nào hiện ra.

   Nguyên tắc: dùng lại đúng mô-típ của trang chủ (đường chéo, vạch thước, chữ
   chrome, ánh xiên), VẼ bằng CSS chứ không nhét ảnh. Kho chỉ có 7 ảnh xe và 1
   ảnh trừu tượng; rải chúng khắp nơi cho đầy thì mỗi tấm thành một khẳng định
   về xe ở chỗ nó không có gì để nói.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Vạch thước ──────────────────────────────────────────────────────────
   Hairline có vạch chia, giọng của một bản vẽ kỹ thuật — cùng ngôn ngữ với
   thước giá ở trang chủ. Dùng làm đường kết của page header. */
.mona-ticks{
	position: relative;
	display: block;
	block-size: 14px;
	margin-block-start: clamp(26px, 3vw, 40px);
	border-block-start: var(--tick) solid var(--line);
}
.mona-ticks::before{
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 7px;
	background-image: repeating-linear-gradient(90deg,
		var(--line-strong) 0 1px, transparent 1px 28px);
}
/* Đoạn đầu sáng lên: cùng cách thước giá ở trang chủ đánh dấu điểm bắt đầu. */
.mona-ticks::after{
	content: "";
	position: absolute;
	inset-block-start: calc(var(--tick) * -1);
	inset-inline-start: 0;
	inline-size: clamp(90px, 12vw, 190px);
	block-size: var(--tick);
	background: linear-gradient(90deg, var(--copper), transparent);
	box-shadow: 0 0 14px rgba(217,154,91,0.45);
}

/* ── Đường chéo góc header ───────────────────────────────────────────────
   Cùng đường chéo của màn khởi động và góc footer, hạ xuống mức gần như không
   thấy — đủ để trang con không phải một khung phẳng, chưa đủ để tranh với chữ. */
.mona-phead::after{
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(44vw, 620px);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	background: linear-gradient(206deg,
		rgba(217,154,91,0.055) 0%, rgba(233,234,238,0.018) 46%, transparent 78%);
	pointer-events: none;
}

/* ── Số thứ tự bóng sau tiêu đề mục ──────────────────────────────────────
   Chữ số viền rỗng, cỡ lớn, nằm sau tiêu đề. Không mang thông tin mới — nó
   đánh nhịp cho một trang toàn chữ, thứ mà trang chủ có sẵn nhờ ảnh. */
.mona-prose,
.mona-pgrid__main{ counter-reset: sec; }
.mona-prose > h2,
.mona-pgrid__main > .mona-sechead{
	position: relative;
	counter-increment: sec;
	isolation: isolate;
}
.mona-prose > h2::before,
.mona-pgrid__main > .mona-sechead::before{
	content: counter(sec, decimal-leading-zero);
	position: absolute;
	z-index: -1;
	inset-block-start: -0.62em;
	inset-inline-start: -0.05em;
	font-family: var(--f-display);
	font-size: 3.1em;
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(217,154,91,0.16);
	pointer-events: none;
}
/* Trình duyệt không có text-stroke sẽ vẽ đặc và đè lên tiêu đề. */
@supports not (-webkit-text-stroke: 1px red){
	.mona-prose > h2::before,
	.mona-pgrid__main > .mona-sechead::before{ display: none; }
}

/* ── Câu tuyên bố ────────────────────────────────────────────────────────
   Một băng chữ lớn cắt ngang trang chữ, đặt trên nền graphite có ánh xiên.
   Dùng cho câu quan trọng nhất của trang. */
.mona-claim{
	position: relative;
	background: var(--graphite);
	background-image: var(--sheen-warm);
	box-shadow: var(--edge);
	padding-block: clamp(48px, 6vw, 92px);
	overflow: hidden;
}
.mona-claim::before{
	content: "";
	position: absolute;
	inset-block-start: -50%;
	inset-inline-start: 6%;
	inline-size: 52vw; block-size: 140%;
	background: radial-gradient(closest-side,
		rgba(217,154,91,0.13), rgba(217,154,91,0.04) 52%, transparent 86%);
	pointer-events: none;
}
.mona-claim > *{ position: relative; }
.mona-claim__t{
	font-family: var(--f-display);
	font-size: clamp(1.6rem, 3.4vw, 3rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.12;
	letter-spacing: var(--track-mega);
	color: var(--platinum);
	max-inline-size: 24ch;
	padding-block-start: 0.05em;
}
.mona-claim__s{
	margin-block-start: clamp(18px, 2.2vw, 26px);
	font-size: var(--t-m);
	line-height: 1.7;
	color: var(--silver);
	max-inline-size: 62ch;
}

/* ── Con số khổng lồ của trang 404 ───────────────────────────────────────── */
/* Bản dẹt của thước giá: không có hai đầu số như ở trang chủ, vì trang bảng
   giá đã in đủ 14 con số ngay bên dưới. Ở đây nó làm việc của một biểu đồ phân
   bố — cho thấy bốn bản đầu chụm lại rồi một quãng dài trống. */
.mona-scale--flat{
	margin-block: 0 clamp(28px, 3.4vw, 44px);
	--scale-h: clamp(44px, 5vw, 68px);
}
.mona-scale--flat .mona-scale__names{ block-size: 62px; }

.mona-huge{
	display: block;
	font-family: var(--f-display);
	font-size: clamp(6rem, 22vw, 17rem);
	font-weight: 700;
	line-height: 0.82;
	letter-spacing: -0.045em;
	margin-block-end: clamp(18px, 2.4vw, 30px);
}

/* ══ Thước có làm nổi một dòng ═══════════════════════════════════════════
   Mờ chứ không giấu: người đọc vẫn thấy dòng đang xem nằm ở đâu so với cả dải,
   đó mới là lý do đặt cái thước ở trang dòng xe. */
.mona-scale__tick--off{ opacity: 0.28; }
.mona-scale__tick--on{
	background: linear-gradient(180deg, var(--copper), rgba(217,154,91,0.4));
	box-shadow: 0 0 16px rgba(217,154,91,0.65);
	inline-size: 2px;
}
.mona-scale__name--off{ color: var(--steel); opacity: 0.5; }
.mona-scale__name--on{ color: var(--copper); }
.mona-scale__name--on::before{ background: var(--copper); }

/* ══ Bậc chênh giá ═══════════════════════════════════════════════════════
   Ba hàng "A → chênh → B". Con số ở giữa, hai đầu là tên bản — đọc được ý ngay
   mà không phải tự trừ hai số trong bảng. */
.mona-steps{ display: grid; gap: clamp(10px, 1.2vw, 16px); }
.mona-steps__i{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
	padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px);
	background: var(--graphite);
	background-image: var(--sheen);
	box-shadow: var(--edge);
	border-inline-start: 2px solid var(--line-strong);
}
.mona-steps__i--sum{ border-inline-start-color: var(--copper); }
.mona-steps__a, .mona-steps__b{
	font-family: var(--f-display);
	font-size: clamp(1rem, 1.6vw, 1.35rem);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--platinum);
	line-height: 1.2;
}
.mona-steps__b{ text-align: end; }
.mona-steps__d{ position: relative; text-align: center; padding-inline: clamp(14px, 2vw, 26px); }
/* Đường nối hai đầu, CHỪA khoảng giữa cho con số — không chạy dưới nó.
   Không dùng một lớp nền che chữ: với background-clip:text, chữ nhìn thấy được
   chính LÀ nền của thẻ, nên bất kỳ lớp nào đặt "phía sau chữ" cũng nằm trên lớp
   nền đó và xoá mất chữ. Đã đo: cả ba con số biến mất hoàn toàn. */
.mona-steps__d::before{
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline: 0;
	block-size: var(--tick);
	background: linear-gradient(90deg,
		transparent 0, var(--line-strong) 12%, var(--line-strong) 28%,
		transparent 32%, transparent 68%,
		var(--line-strong) 72%, var(--line-strong) 88%, transparent 100%);
}
.mona-steps__d b{
	position: relative;
	display: inline-block;
	padding-inline: 12px;
	font-family: var(--f-display);
	font-size: clamp(1.15rem, 2.2vw, 1.8rem);
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 700px){
	.mona-steps__i{ grid-template-columns: 1fr; gap: 10px; text-align: center; }
	.mona-steps__b{ text-align: center; }
	.mona-steps__d::before{ display: none; }
}

/* ══ Câu hỏi thường gặp ══════════════════════════════════════════════════
   <details> gốc: mở đóng được khi không có JS, bàn phím dùng được sẵn, trình
   đọc màn hình hiểu ngay. Tự dựng bằng div thì phải làm lại cả ba thứ đó. */
.mona-faq{ display: grid; gap: 1px; }
.mona-faq__i{ border-block-end: var(--tick) solid var(--line); }
.mona-faq__i:first-child{ border-block-start: var(--tick) solid var(--line); }
.mona-faq__q{
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: clamp(16px, 1.8vw, 22px) 12px;
	cursor: pointer;
	list-style: none;
	font-family: var(--f-display);
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.25;
	color: var(--platinum);
	transition: color var(--dur-fast) var(--ease-out);
	/* Dấu tam giác mặc định của Safari/Firefox, gỡ để dùng dấu của mình. */
	-webkit-appearance: none;
}
.mona-faq__q::-webkit-details-marker{ display: none; }
.mona-faq__q::marker{ content: ""; }
.mona-faq__q:hover{ color: var(--copper); }
.mona-faq__q::after{
	content: "+";
	margin-inline-start: auto;
	font-family: var(--f-mono);
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--copper);
	transition: transform var(--dur-fast) var(--ease-out);
}
details[open] > .mona-faq__q{ color: var(--copper); }
details[open] > .mona-faq__q::after{ content: "−"; }
.mona-faq__a{
	padding: 0 12px clamp(18px, 2vw, 24px);
	font-size: var(--t-s);
	line-height: 1.75;
	color: var(--silver);
	max-inline-size: 72ch;
}
.mona-faq__a b.mona-fig{ color: var(--copper); font-weight: 500; }
.mona-faq__a strong{ color: var(--platinum); font-weight: 600; }

/* ══ Ba phát hiện ════════════════════════════════════════════════════════
   Con số lớn trước, nhãn sau, giải thích cuối — thứ tự đọc của một bảng chỉ số
   chứ không phải của một đoạn văn. Cả ba con số đều là phép trừ trên bảng giá
   ngay phía trên, nên đây là cách đọc lại dữ liệu chứ không phải bình luận. */
.mona-finds{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 26px);
}
.mona-finds__i{
	padding: clamp(22px, 2.6vw, 34px);
	background: var(--graphite);
	background-image: var(--sheen);
	box-shadow: var(--edge), var(--shadow);
	border-block-start: 2px solid var(--copper);
}
.mona-finds__n{
	display: block;
	font-family: var(--f-display);
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	/* Cùng lý do với .mona-chrome: dấu tiếng Việt nằm trên cap-height, mà
	   background-clip cắt đúng hộp chữ. */
	padding-block-start: 0.08em;
}
.mona-finds__k{
	display: block;
	margin-block-start: 14px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: var(--track-lab);
	text-transform: uppercase;
	color: var(--copper);
}
.mona-finds__d{
	display: block;
	margin-block-start: 12px;
	font-size: var(--t-s);
	line-height: 1.7;
	color: var(--silver);
}
@media (max-width: 900px){ .mona-finds{ grid-template-columns: 1fr; } }