/* ==========================================================================
   Base — reset, document, type defaults, motion contract
   ========================================================================== */

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
	margin: 0;
	background: var(--onyx);
	color: var(--platinum);
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: anywhere;
	overflow-x: hidden;
}

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

h1, h2, h3, h4{
	font-family: var(--f-display);
	font-weight: 700;
	line-height: var(--lh-display);
	letter-spacing: var(--track-mega);
	text-transform: uppercase;
	margin: 0;
	/* Balances the lines instead of leaving one word stranded on the last one.
	   A headline that breaks "Giá Lexus, nói rõ / nguồn" is a typographic defect,
	   not a wrapping accident. Browsers without it just wrap normally. */
	text-wrap: balance;
	/* Vietnamese marks sit above cap-height and a condensed face at mega size
	   leaves them nowhere to go. */
	padding-block-start: 0.05em;
}

p{ margin: 0; }
/* figure carries a UA default of `1em 40px`. Every shot on the page is a
   <figure>, so without this the full-bleed bands are inset 40px on each side
   and every photograph sits 40px narrower than the column it was measured for
   — an inset nothing in the design asks for and nothing reports. */
figure{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; }

/* Figures are always mono and always tabular. A price list whose digits do not
   line up is not a price list. */
.mona-fig{
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: -0.02em;
}

/* ── Focus ─────────────────────────────────────────────────────────────── */
:focus-visible{ outline: 2px solid var(--copper); outline-offset: 3px; }
:focus:not(:focus-visible){ outline: none; }

.mona-skip{
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--copper); color: var(--onyx);
	padding: 13px 20px; font-weight: 600;
}
.mona-skip:focus{ left: 14px; top: 14px; }

/* .screen-reader-text là tên WordPress core dùng (get_search_form, walker
   phân trang, comment form). Cùng một reset với .mona-sr, nên gộp selector —
   giữ hai bản sao là cách chúng lặng lẽ thôi khớp nhau. */
.mona-sr,
.screen-reader-text{
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Keeps a phrase on one line so a headline breaks where it reads best rather
   than wherever the box runs out. The splitter wraps every word in an
   inline-block, which switches text-wrap:balance off — so the break has to be
   decided in the markup. Released on very narrow screens, where holding the
   phrase together would overflow instead. */
.mona-nb{ white-space: nowrap; }
@media (max-width: 400px){ .mona-nb{ white-space: normal; } }

/* ── Layout ────────────────────────────────────────────────────────────── */
.mona-container{
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.mona-band{ padding-block: var(--band); }

/* ── Labels ────────────────────────────────────────────────────────────
   Mono, letterspaced, small. This is the instrument's own voice: every label
   on the page reads like a caption on a technical drawing. */
.mona-label{
	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-label--accent{ color: var(--copper); }

.mona-lede{
	font-size: var(--t-m);
	line-height: 1.7;
	color: var(--silver);
	max-inline-size: 62ch;
}

/* ── Links that act like controls ──────────────────────────────────────── */
.mona-act{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-block-size: 44px;
	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;
	padding-block-end: 2px;
}
.mona-act::after{
	content: "→";
	transition: transform var(--dur-fast) var(--ease-out);
}
.mona-act:hover::after{ transform: translateX(5px); }


/* ── Grain ──────────────────────────────────────────────────────────────
   A flat dark fill bands on gradients and reads as a cheap dark theme. A very
   light noise layer gives the ground tooth, costs no request, and is the other
   half of making the surfaces look lit. */
.mona-grain{
	position: fixed;
	inset: 0;
	z-index: 40;
	pointer-events: none;
	opacity: 0.22;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ── Motion contract ─────────────────────────────────────────────────────
   THE RULE: nothing is hidden unless JS is present to reveal it again.

   Every reveal rule sits under .js, written onto <html> by a synchronous script
   in <head>. With JS off, GSAP missing, or the script throwing, the page renders
   complete. Hiding in the base layer and trusting JS to unhide is how a page
   ships blank to anyone whose bundle failed. */
.js [data-reveal]{ opacity: 0; will-change: opacity, transform; }

.js [data-line] > span > span{
	display: inline-block;
	transform: translateY(106%);
	will-change: transform;
}
/* The mask needs headroom or it shears the tone marks off ế, ộ and ữ. The
   padding is cancelled by the negative margin, so nothing moves. */
.js [data-line] > span{
	display: block;
	overflow: hidden;
	padding-block-start: 0.22em;
	margin-block-start: -0.22em;
}

.js [data-mask]{ clip-path: inset(0 0 100% 0); }
.js [data-draw]{ transform: scaleX(0); transform-origin: left center; }
.js [data-tick]{ opacity: 0; transform: translateY(-8px); }

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	.js [data-reveal],
	.js [data-line] > span > span,
	.js [data-mask],
	.js [data-draw],
	.js [data-tick]{
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
		animation: none !important;
	}
	*, *::before, *::after{
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}


/* ==========================================================================
   Output của WordPress core — prototype chưa bao giờ phải style những thứ này
   ========================================================================== */

/* Core in .screen-reader-text ở những chỗ không đi qua markup của theme.
   Trạng thái focus thì phải nhìn thấy được: đây là link "bỏ qua" của core. */
.screen-reader-text:focus{
	position: fixed !important; inset-block-start: 16px; inset-inline-start: 16px;
	width: auto; height: auto; clip: auto; z-index: 100;
	padding: 13px 20px;
	background: var(--copper); color: var(--onyx);
	font-weight: 600;
}

/* Căn ảnh do trình soạn thảo chèn. */
.alignleft{ float: left; margin: 0 24px 20px 0; }
.alignright{ float: right; margin: 0 0 20px 24px; }
.aligncenter{ display: block; margin-inline: auto; }
.alignwide, .alignfull{ max-width: none; }
.wp-caption{ max-width: 100%; }
.wp-caption-text,
.wp-element-caption{
	margin-block-start: 10px;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	color: var(--steel);
	text-align: center;
}

/* WordPress theme review đòi hai class này tồn tại; ở đây chúng không có vai
   trò thị giác nào — site không dùng sticky post và không mở bình luận. */
.sticky, .bypostauthor{ /* stylelint-disable-line block-no-empty */ }

/* Thanh admin đè lên masthead. Masthead là position:sticky với
   inset-block-start:0, nên phải đẩy nó xuống đúng chiều cao thanh admin —
   chỉ ảnh hưởng người đang đăng nhập. */
body.admin-bar .mona-masthead{ inset-block-start: 32px; }
@media screen and (max-width: 782px){
	body.admin-bar .mona-masthead{ inset-block-start: 46px; }
}