/* ==========================================================================
   Đá Sân Vườn Việt — component

   Một file. Không bundle riêng cho trang chủ: docblock của
   Mona_Enqueue::context() ghi lại cái giá của lần chia trước — năm rule nằm
   trong bundle chỉ-trang-chủ và render không style ở mọi trang khác.

   Thứ tự: chrome → hero → băng chạy → dải 1..10 → mảnh dùng lại → footer → dock.
   Một mã màu cứng ở file này là bug; thêm token vào variables.css rồi var().
   ========================================================================== */

/* ══ Dải tiện ích ══════════════════════════════════════════════════════════
   Nằm TRÊN header và cuộn đi cùng trang, không dính. Chỉ mang địa chỉ liên hệ
   của chính ấn phẩm và lối vào các trang thông tin.

   Dải này trước đây mang lời công bố; chủ site yêu cầu đổi. Ghi chú về cái giá
   của quyết định đó nằm trong index.html ngay tại khối markup. */
.mona-topbar {
	background: var(--ink);
	color: var(--on-dark-soft);
	font-size: var(--t-micro);
	line-height: 1.5;
}
.mona-topbar__in {
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px;
	padding-block: 6px;
}
.mona-topbar__mail {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 30px; color: var(--sand); font-weight: 600;
	transition: color var(--dur) var(--ease-2);
}
.mona-topbar__mail svg { flex: none; }
.mona-topbar__mail:hover { color: var(--on-dark); }

.mona-topbar__nav { margin-left: auto; }
.mona-topbar__nav { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.mona-topbar__nav a {
	display: inline-flex; align-items: center; min-height: 30px;
	color: var(--on-dark-soft);
	transition: color var(--dur) var(--ease-2);
}
.mona-topbar__nav a:hover { color: var(--sand); }

@media (max-width: 620px) {
	/* Ở màn hẹp email xuống dòng riêng và ba liên kết dồn lại — vẫn đọc được,
	   và không đẩy dải cao thêm quá một dòng. */
	.mona-topbar__nav { margin-left: 0; gap: 2px 16px; }
}

/* ══ Header ════════════════════════════════════════════════════════════════*/
.mona-header {
	position: sticky; top: 0; z-index: 60;
	background: var(--veil);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow var(--dur) var(--ease-2), border-color var(--dur) var(--ease-2);
}
.mona-header.is-scrolled { box-shadow: var(--sh-card); border-color: var(--line-2); }

/* Măng-sét MỘT hàng gọn: tên · nav · icon tìm kiếm.
   Trước đây hai hàng vì ô tìm kiếm mở rộng chiếm ~300px nên nav không đủ chỗ trên
   cùng hàng (đo được: nav cần 699px, chỉ còn 619px). Nay ô tìm kiếm thu về một
   icon mở popup, nav thừa chỗ để nằm cùng hàng — header còn một hàng ~60px, cuộn
   không chiếm nhiều màn. Đi kèm: scroll-padding-top trong base.css hạ theo. */
.mona-header__in {
	display: flex; align-items: center; flex-wrap: nowrap;
	gap: clamp(12px, 1.6vw, 32px);
	padding-block: 10px;
}

.mona-brand { display: inline-flex; align-items: center; gap: 11px; flex: none; order: 1; }
.mona-brand__mark { color: var(--moss); flex: none; }
.mona-brand__t { display: grid; line-height: 1.2; }
.mona-brand__t b { font-family: var(--f-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em; }
.mona-brand__t small { color: var(--ink-2); font-size: var(--t-micro); }
/* The tagline is dropped in the one-row header to keep the masthead narrow — it
   still shows in the footer's larger .mona-brand--lg. */
.mona-header .mona-brand__t small { display: none; }

/* Tìm kiếm = icon mở popup. <details> nên mở được cả khi tắt JS; main.js chỉ
   thêm: focus vào ô nhập khi mở, Esc, và chạm ra ngoài để đóng. */
.mona-search-d { flex: none; order: 3; position: relative; }
.mona-search-btn {
	list-style: none; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 40px; block-size: 40px; border-radius: var(--r-s);
	color: var(--ink-2);
	transition: background var(--dur) var(--ease-2), color var(--dur) var(--ease-2);
}
.mona-search-btn::-webkit-details-marker { display: none; }
.mona-search-btn::marker { content: ""; }
.mona-search-btn:hover,
.mona-search-d[open] .mona-search-btn { background: var(--moss-wash); color: var(--moss); }
.mona-search-pop {
	position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
	z-index: 80; inline-size: min(92vw, 420px);
	padding: 12px; background: var(--card);
	border: 1px solid var(--line-2); border-radius: var(--r-m); box-shadow: var(--sh-lift);
}
.mona-search {
	display: flex; align-items: center; gap: 7px;
	min-height: var(--tap); padding: 0 12px;
	background: var(--ground-2); border: 1px solid var(--line-2); border-radius: var(--r-s);
	color: var(--ink-2);
	transition: border-color var(--dur) var(--ease-2);
}
.mona-search:focus-within { border-color: var(--moss); }
.mona-search input {
	border: 0; background: none; outline: none; flex: 1 1 auto; min-inline-size: 0;
	font: inherit; font-size: var(--t-small); color: var(--ink);
}
.mona-search .mona-btn { flex: none; }

/* ══ Điều hướng desktop ════════════════════════════════════════════════════*/
/* Nav fills the space between brand (left) and search (right) and centres its
   items there, so the menu reads as balanced rather than shoved to one side. */
.mona-nav {
	order: 2; flex: 1 1 auto; min-width: 0;
}
.mona-nav__l { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0 clamp(4px, 0.7vw, 15px); }
.mona-nav__i { position: relative; display: flex; align-items: center; }

/* ⚠️ position: static cho riêng mục mega. Panel mega dùng `position: absolute;
   inset-inline: 0` để tràn hết bề ngang header — nhưng khối chứa của nó là tổ
   tiên ĐƯỢC ĐỊNH VỊ gần nhất, và .mona-nav__i ở trên là `relative`. Đo được
   panel rộng đúng 159px, tức bằng cái <li>, thay vì 1745px.
   .mona-header là `sticky` nên nó tạo khối chứa; bỏ định vị ở <li> là panel
   neo đúng vào header. */
.mona-nav__i--mega { position: static; }

.mona-nav__t {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: var(--tap); padding-inline: 2px;
	font-size: var(--t-small); font-weight: 500; color: var(--ink-2);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color var(--dur) var(--ease-2), border-color var(--dur) var(--ease-2);
}
.mona-nav__t:hover, .mona-nav__i:hover > .mona-nav__t,
.mona-nav__i:focus-within > .mona-nav__t { color: var(--moss); border-bottom-color: var(--moss); }

/* Mục đang xem.

   Không rule nào ở đây — theme lẫn prototype — từng style trạng thái này, nên
   menu chưa bao giờ sáng dù PHP đã gắn class đúng. `dynamic-content.md` §8 ghi
   nhầm nguyên nhân là thiếu filter; thiếu là thiếu CSS.

   Nặng hơn hover một bậc (600 so với 500) để khi đang rê chuột lên mục khác vẫn
   phân biệt được mình đang ở đâu. Gạch chân là tín hiệu KHÔNG bằng màu —
   WCAG 1.4.1 — và `aria-current="page"` lo phần đọc màn hình.

   Mục cấp 1 sáng cả khi đang đọc một bài trong chuyên mục đó, không chỉ trên
   trang lưu trữ: `mona_nav_is_current()` kiểm `has_category()`. Chỉ sáng đúng
   trang lưu trữ là lỗi menu phổ biến nhất. */
.mona-nav__i.is-current > .mona-nav__t {
	color: var(--moss); border-bottom-color: var(--moss); font-weight: 600;
}
.mona-topbar__nav a.is-current { color: var(--sand); font-weight: 600; }
.mona-mobile__link.is-current { color: var(--moss); font-weight: 600; }
.mona-mobile__foot a.is-current { color: var(--moss); font-weight: 600; }

/* Nút mở menu con — CHỈ tồn tại khi có JS.
   Không có JS thì nó là nút chết: panel mở bằng :hover/:focus-within của CSS,
   nút không làm gì thêm. Liên kết cha vẫn dẫn tới trang chuyên mục, nên đường
   vào nội dung không mất. Đây là cùng một bài học với nút "lên đầu trang" và
   với burger: đừng để lại một control không nối vào đâu. */
.mona-nav__x {
	display: none;
	align-items: center; justify-content: center;
	inline-size: 26px; min-height: var(--tap);
	color: var(--ink-2); flex: none;
	transition: transform var(--dur) var(--ease), color var(--dur) var(--ease-2);
}
.js .mona-nav__x { display: inline-flex; }
.mona-nav__x:hover { color: var(--moss); }
.mona-nav__x[aria-expanded="true"] { transform: rotate(180deg); color: var(--moss); }

/* ── Menu con ──────────────────────────────────────────────────────────────
   Mở bằng CSS khi rê chuột hoặc khi tiêu điểm bàn phím vào trong mục, và bằng
   .is-open khi JS bật/tắt. Ba đường cùng dẫn tới một trạng thái, nên tắt JS
   vẫn dùng được bằng chuột lẫn bàn phím. */
.mona-sub {
	position: absolute; inset-block-start: calc(100% - 2px); inset-inline-start: -14px;
	z-index: 80; inline-size: max-content; max-inline-size: min(94vw, 380px);
	padding: 10px;
	background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-m);
	box-shadow: var(--sh-lift);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity var(--dur) var(--ease-2), transform var(--dur) var(--ease), visibility var(--dur);
}
.mona-nav__i--sub:hover > .mona-sub,
.mona-nav__i--sub:focus-within > .mona-sub,
.mona-sub.is-open { opacity: 1; visibility: visible; transform: none; }

.mona-sub a {
	display: block; padding: 9px 11px; border-radius: var(--r-s);
	font-size: var(--t-small); line-height: 1.45; color: var(--ink);
	transition: background var(--dur) var(--ease-2), color var(--dur) var(--ease-2);
}
.mona-sub li a:hover { background: var(--moss-wash); color: var(--moss); }
.mona-sub__all {
	display: flex !important; align-items: center; gap: 7px;
	margin-top: 6px; padding-top: 11px; border-top: 1px solid var(--line);
	font-weight: 600; color: var(--moss) !important; border-radius: 0 !important;
}
.mona-sub__all:hover { background: none !important; }
.mona-sub__all svg { transition: transform var(--dur) var(--ease); }
.mona-sub__all:hover svg { transform: translateX(4px); }

/* ── Mega menu ─────────────────────────────────────────────────────────────
   <details> nên không cần JS. summary bỏ dấu tam giác mặc định. Panel tràn hết
   bề ngang header: .mona-header là sticky nên nó chính là khối chứa cho
   position:absolute ở đây. */
.mona-mega-d > summary { list-style: none; cursor: pointer; }
.mona-mega-d > summary::-webkit-details-marker { display: none; }
.mona-mega-d > summary::marker { content: ""; }
.mona-mega-d[open] > summary { color: var(--moss); border-bottom-color: var(--moss); }
.mona-mega-d[open] > summary svg { transform: rotate(180deg); }
.mona-mega-d > summary svg { transition: transform var(--dur) var(--ease); }

.mona-mega {
	position: absolute; inset-inline: 0; inset-block-start: 100%;
	z-index: 75;
	background: var(--card);
	border-block: 1px solid var(--line-2);
	box-shadow: var(--sh-lift);
	max-block-size: calc(100dvh - 160px); overflow-y: auto;
}
.mona-mega__in {
	display: grid; grid-template-columns: 1fr clamp(230px, 20vw, 300px);
	gap: clamp(20px, 2.4vw, 40px);
	padding-block: clamp(22px, 2.2vw, 34px);
}
.mona-mega__cols {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(14px, 1.4vw, 26px);
}
@media (max-width: 1180px) { .mona-mega__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mona-mega__h {
	display: flex; align-items: baseline; gap: 7px;
	padding-bottom: 8px; margin-bottom: 6px;
	border-bottom: 1px solid var(--line-2);
	font-family: var(--f-display); font-weight: 600; font-size: var(--t-card);
	color: var(--ink);
}
.mona-mega__h:hover { color: var(--moss); }
.mona-mega__h i {
	font-style: normal; font-size: var(--t-micro); font-weight: 700;
	color: var(--ochre); font-variant-numeric: tabular-nums;
}
.mona-mega__h--gap { margin-top: 18px; }
.mona-mega__c a:not(.mona-mega__h) {
	display: block; padding-block: 6px;
	font-size: var(--t-small); line-height: 1.45; color: var(--ink-2);
	transition: color var(--dur) var(--ease-2);
}
.mona-mega__c a:not(.mona-mega__h):hover { color: var(--moss); }

.mona-mega__feat { border-left: 1px solid var(--line); padding-left: clamp(16px, 1.6vw, 28px); }
.mona-mega__lbl {
	display: block; margin-bottom: 10px;
	font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ochre);
}
.mona-mega__card { display: block; margin-bottom: 14px; }
.mona-mega__card img {
	inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: var(--r-s); border: 1px solid var(--line);
	transition: transform .5s var(--ease);
}
.mona-mega__card:hover img { transform: scale(1.03); }
.mona-mega__card b {
	display: block; margin-top: 8px;
	font-family: var(--f-display); font-weight: 600; font-size: var(--t-card);
}
.mona-mega__card:hover b { color: var(--moss); }
.mona-mega__card em { display: block; margin-top: 2px; font-style: normal; font-size: var(--t-micro); color: var(--ink-2); }

.mona-mega__bar {
	grid-column: 1 / -1;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
	padding-top: 16px; border-top: 1px solid var(--line);
	font-size: var(--t-micro);
}
.mona-mega__bar a { font-weight: 600; color: var(--moss); min-height: 26px; display: inline-flex; align-items: center; }
.mona-mega__bar span { margin-left: auto; color: var(--ink-2); }
@media (max-width: 760px) { .mona-mega__bar span { margin-left: 0; } }

/* ══ Menu mobile ═══════════════════════════════════════════════════════════
   <details> + <summary>, KHÔNG phải <button> + JS.

   Bản trước dùng <button data-burger> và đo được đúng cái bẫy đã sửa cho nút
   "lên đầu trang": khi script bị chặn, burger vẫn hiện, vẫn nằm trong thứ tự
   tab, bấm không làm gì — mà lần này thứ chết là TOÀN BỘ điều hướng ở màn hẹp.
   <details> đóng/mở được bằng chính trình duyệt. */
.mona-mobile { display: none; order: 2; margin-left: auto; position: static; }

.mona-burger {
	list-style: none; cursor: pointer;
	inline-size: var(--tap); block-size: var(--tap);
	display: grid; place-items: center;
	border: 1px solid var(--line-2); border-radius: var(--r-s);
}
.mona-burger::-webkit-details-marker { display: none; }
.mona-burger::marker { content: ""; }
.mona-burger__b { display: grid; gap: 5px; inline-size: 20px; }
.mona-burger__b i {
	display: block; block-size: 2px; background: var(--ink); border-radius: 2px;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease-2);
}
.mona-mobile[open] .mona-burger__b i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mona-mobile[open] .mona-burger__b i:nth-child(2) { opacity: 0; }
.mona-mobile[open] .mona-burger__b i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mona-mobile__panel {
	position: absolute; inset-inline: 0; inset-block-start: 100%;
	z-index: 75;
	background: var(--card); border-top: 1px solid var(--line-2);
	box-shadow: var(--sh-lift);
	max-block-size: calc(100dvh - 64px); overflow-y: auto;
	padding-block: 16px 26px;
	overscroll-behavior: contain;   /* cuộn hết panel thì KHÔNG kéo theo trang nền */
}

.mona-mobile__search {
	display: flex; align-items: center; gap: 8px;
	min-height: var(--tap); padding: 0 14px; margin-bottom: 14px;
	background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--r-s);
	color: var(--ink-2);
}
.mona-mobile__search:focus-within { border-color: var(--moss); }
.mona-mobile__search input {
	border: 0; background: none; outline: none; inline-size: 100%;
	font: inherit; font-size: var(--t-small); color: var(--ink);
}

/* Mỗi chuyên mục là một <details> lồng bên trong: bung được từng mục mà không
   cần một dòng JS nào. */
.mona-acc > summary,
.mona-mobile__link {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; gap: 10px;
	min-height: 50px; padding-inline: 2px;
	border-bottom: 1px solid var(--line);
	font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.mona-acc > summary::-webkit-details-marker { display: none; }
.mona-acc > summary::marker { content: ""; }
.mona-acc > summary::after {
	content: ""; margin-left: auto; flex: none;
	inline-size: 9px; block-size: 9px;
	border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--dur) var(--ease);
}
.mona-acc[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.mona-acc[open] > summary { color: var(--moss); }
.mona-acc > summary i, .mona-mobile__link i {
	margin-left: auto; font-style: normal;
	font-size: var(--t-micro); font-weight: 700; color: var(--ochre);
	font-variant-numeric: tabular-nums;
}
.mona-acc > summary i { margin-left: auto; }
.mona-acc > summary::after { margin-left: 10px; }

.mona-acc ul { padding: 6px 0 12px 2px; }
.mona-acc ul a {
	display: block; min-height: 42px; padding: 10px 12px;
	border-radius: var(--r-s);
	font-size: var(--t-small); line-height: 1.45; color: var(--ink-2);
}
.mona-acc ul a:hover { background: var(--moss-wash); color: var(--moss); }
.mona-acc__all { font-weight: 600; color: var(--moss) !important; }

.mona-mobile__foot {
	display: flex; flex-wrap: wrap; gap: 4px 18px;
	margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2);
}
.mona-mobile__foot a {
	display: inline-flex; align-items: center; min-height: 34px;
	font-size: var(--t-small); color: var(--ink-2);
}
.mona-mobile__foot a:hover { color: var(--moss); }
.mona-mobile__say { margin-top: 12px; font-size: var(--t-micro); color: var(--ink-2); }

html.is-locked, html.is-locked body { overflow: hidden; }

/* Điểm gãy 1080: dưới mức này bảy mục điều hướng tiếng Việt không còn nằm trên
   một hàng mà không co chữ xuống dưới ngưỡng đọc được. Bản trước đặt 960 và đo
   ở 1024 thì hàng nav đã tràn sang dòng thứ hai. */
@media (max-width: 1200px) {
	.mona-nav, .mona-search-d { display: none; }
	.mona-mobile { display: block; }
	.mona-header__in { padding-block: 11px; }
}
@media (min-width: 1201px) { .mona-mobile { display: none; } }

/* ══ Hero ══════════════════════════════════════════════════════════════════
   Cột chữ RỘNG HƠN cột ảnh (1.02fr / .98fr) — ngược với hero của trang bán
   hàng. Trên một ấn phẩm, luận điểm là thứ phải thắng, ảnh chỉ xác nhận. */
.mona-hero {
	position: relative; isolation: isolate;
	padding-block: clamp(40px, 4.8vw, 82px) clamp(46px, 5.2vw, 90px);
	overflow: hidden;
}
/* Quầng sáng rêu rất nhạt sau cột chữ — thứ duy nhất trên trang không phải nội
   dung. Nó tồn tại để hero không phải một khối phẳng, và nó nằm dưới z-index
   của mọi thứ khác nên không bao giờ chạm vào tương phản chữ. */
.mona-hero__glow {
	position: absolute; z-index: -1;
	inline-size: 62vw; block-size: 62vw; max-inline-size: 780px; max-block-size: 780px;
	inset-block-start: -26%; inset-inline-start: -14%;
	background: radial-gradient(circle, var(--moss-wash) 0%, transparent 68%);
	pointer-events: none;
}
.mona-hero__in {
	display: grid; grid-template-columns: 1.02fr .98fr;
	gap: clamp(26px, 3.4vw, 56px); align-items: center;
}
.mona-hero h1 {
	font-size: var(--t-hero);
	/* Ngắt dòng do CSS lo, KHÔNG dùng <br>. Một <br> trong h1 làm textContent
	   dính hai chữ ở chỗ xuống dòng (vd "sân vườnchọn"), và đó là chuỗi mà trình
	   đọc màn hình cùng mọi công cụ trích tiêu đề nhìn thấy. */
	max-inline-size: 15ch;
	text-wrap: balance;
}
.mona-hero__lede {
	margin-top: 16px; max-inline-size: 54ch;
	font-size: clamp(1rem, .96rem + .22vw, 1.14rem); color: var(--ink-2);
}
.mona-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.mona-stats {
	display: flex; flex-wrap: wrap; gap: 10px 26px;
	margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2);
	font-size: var(--t-small); color: var(--ink-2);
}
.mona-stats b {
	font-family: var(--f-display); font-size: 1.34rem; font-weight: 700;
	color: var(--ink); margin-right: 6px;
}

.mona-hero__media { position: relative; }
.mona-hero__shot { margin: 0; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-lift); }
.mona-hero__shot img {
	inline-size: 100%; aspect-ratio: 16 / 11; object-fit: cover;
	/* Ảnh cao hơn khung một chút để parallax còn chỗ trôi mà không hở mép. */
	scale: 1.12;
}
/* Thẻ mẫu đá gối lên mép ảnh — mô-típ MONA dùng ở cả hai dự án trước. */
.mona-hero__chip {
	position: absolute; margin: 0;
	inset-block-end: -22px; inset-inline-start: -18px;
	inline-size: min(58%, 268px);
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--r-m); padding: 9px; box-shadow: var(--sh-lift);
}
.mona-hero__chip img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-s); }
.mona-hero__chip figcaption { margin-top: 8px; font-size: var(--t-micro); color: var(--ink-2); line-height: 1.5; }
.mona-hero__chip b { color: var(--ink); }

@media (max-width: 900px) {
	.mona-hero__in { grid-template-columns: 1fr; }
	.mona-hero__media { order: -1; margin-bottom: 26px; }
	.mona-hero__shot img { aspect-ratio: 16 / 9; }
	.mona-hero__chip { inset-block-end: -18px; inset-inline-start: auto; inset-inline-end: 10px; inline-size: min(64%, 240px); }
}
@media (max-width: 560px) {
	.mona-hero__chip { position: static; inline-size: 100%; margin-top: 12px; box-shadow: none; }
	.mona-hero__media { margin-bottom: 0; }
}

/* ══ Băng chạy ═════════════════════════════════════════════════════════════
   aria-hidden trong markup: nội dung ở đây lặp lại nhãn chuyên mục đã có ở
   header, nên với trình đọc màn hình nó là tiếng ồn. */
.mona-marquee {
	border-block: 1px solid var(--line-2);
	background: var(--ground-2);
	padding-block: 11px; overflow: hidden;
}
.mona-marquee__t {
	display: flex; align-items: center; gap: 18px;
	inline-size: max-content;
	animation: mona-run 38s linear infinite;
}
.mona-marquee__t span {
	font-family: var(--f-display); font-size: var(--t-small); font-weight: 600;
	color: var(--ink-2); white-space: nowrap;
}
.mona-marquee__t i { color: var(--ochre); font-style: normal; }
@keyframes mona-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mona-marquee__t { animation: none; } }

/* ══ Bạn đang cần làm gì ═══════════════════════════════════════════════════*/
.mona-tasks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1040px) { .mona-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .mona-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .mona-tasks { grid-template-columns: 1fr; } }

.mona-task { display: block; block-size: 100%; }
.mona-task__media {
	display: block; overflow: hidden; border-radius: var(--r-m);
	border: 1px solid var(--line); position: relative;
}
.mona-task__media img {
	inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	transition: transform .6s var(--ease);
}
.mona-task:hover .mona-task__media img { transform: scale(1.06); }
.mona-task__b { display: block; padding-top: 12px; }
.mona-task__b b {
	display: block; font-family: var(--f-display); font-weight: 600; font-size: var(--t-card);
	transition: color var(--dur) var(--ease-2);
}
.mona-task__b em {
	display: block; margin-top: 4px; font-style: normal;
	font-size: var(--t-micro); color: var(--ink-2); line-height: 1.5;
}
.mona-task:hover .mona-task__b b { color: var(--moss); }

/* ══ Bảng tra vật liệu ═════════════════════════════════════════════════════
   Thẻ dữ liệu CÓ ảnh mẫu đá. Bản đầu cố tình không ảnh, vì lúc đó kho ảnh chỉ
   có 21 tấm và không tấm nào chụp đúng từng loại đá — dán ảnh phong cảnh lên
   một loại đá là chú thích sai, media-assets.md cấm. Sau khi rà đủ 20 trang của
   site thì có 58 ảnh, trong đó có đúng ảnh bề mặt bazan, cấu tạo hạt sa thạch,
   phân cỡ sỏi. Giờ mỗi thẻ mang ảnh đúng loại của nó.

   Viền trái đậm là dấu hiệu "đây là một mục tra cứu" chứ không phải một thẻ bài
   viết — hai loại thẻ này nằm cách nhau vài dải, phải khác nhau ngay từ liếc
   mắt đầu. */
.mona-spec {
	block-size: 100%; display: flex; flex-direction: column;
	background: var(--card); border: 1px solid var(--line);
	border-left: 3px solid var(--moss); border-radius: var(--r-s);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease-2), box-shadow var(--dur) var(--ease-2),
	            transform var(--dur) var(--ease);
}
.mona-spec:hover { box-shadow: var(--sh-card); transform: translateY(-2px); }
.mona-spec__media { display: block; overflow: hidden; }
.mona-spec__media img {
	inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	transition: transform .6s var(--ease);
}
.mona-spec:hover .mona-spec__media img { transform: scale(1.05); }
.mona-spec__b { padding: clamp(15px, 1.5vw, 20px); flex: 1; display: flex; flex-direction: column; }
.mona-spec h3 { font-size: var(--t-h3); }
/* Đo được 21px ở 390px — dưới sàn 24px của WCAG 2.2. Đây là liên kết đứng riêng
   làm tiêu đề thẻ, không nằm trong câu, nên không được miễn theo ngoại lệ
   inline. inline-block + đệm dọc đưa nó lên 25px mà không đổi bố cục. */
.mona-spec h3 a { display: inline-block; padding-block: 2px; }
.mona-spec h3 a:hover { color: var(--moss); }
.mona-spec dl {
	margin: 12px 0 0; display: grid; gap: 7px;
	padding-block: 12px; border-block: 1px solid var(--line);
	font-size: var(--t-small);
}
.mona-spec dl > div { display: flex; gap: 10px; align-items: baseline; }
.mona-spec dt {
	flex: none; inline-size: 8.5em; color: var(--ink-2);
	font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
}
.mona-spec dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mona-spec__b > p { margin-top: 12px; font-size: var(--t-small); color: var(--ink-2); }
.mona-spec__b > p b { color: var(--ink); }

/* ══ Mặt cắt cấu tạo ═══════════════════════════════════════════════════════*/
.mona-section-cut {
	display: grid; grid-template-columns: 1.15fr .85fr;
	gap: clamp(24px, 3vw, 48px); align-items: start;
}
@media (max-width: 980px) { .mona-section-cut { grid-template-columns: 1fr; } }

.mona-cut { margin: 0; }
.mona-cut svg {
	inline-size: 100%; block-size: auto;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
	padding: 10px;
}
.mona-cut figcaption {
	margin-top: 12px; font-size: var(--t-micro); color: var(--ink-2); line-height: 1.6;
	max-inline-size: 62ch;
}

.mona-steps { counter-reset: s; display: grid; gap: 14px; }
.mona-steps li {
	counter-increment: s;
	display: grid; grid-template-columns: auto 1fr; gap: 4px 13px;
	padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
}
.mona-steps li::before {
	content: counter(s, decimal-leading-zero);
	grid-row: span 2;
	font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
	color: var(--ochre); font-variant-numeric: tabular-nums;
}
.mona-steps b { font-family: var(--f-display); font-weight: 600; font-size: var(--t-card); }
.mona-steps span { font-size: var(--t-small); color: var(--ink-2); }

.mona-cut__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.mona-cut__imgs figure { margin: 0; }
.mona-cut__imgs img {
	inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--r-s); border: 1px solid var(--line);
}
.mona-cut__imgs figcaption { margin-top: 7px; font-size: var(--t-micro); color: var(--ink-2); }

/* ══ Đường ray quy trình ═══════════════════════════════════════════════════
   Tràn ra mép màn ở bên phải để lộ rõ "còn nữa" — một ray dừng đúng mép
   container trông như một lưới bị cắt, không như một thứ cuộn được.
   scroll-snap giữ thẻ luôn dừng ở mép trái. */
/* Ray nằm TRONG .mona-container và chỉ tràn về bên phải.

   Bản đầu để ray tràn cả hai mép màn hình, đệm trái tính bằng
   `calc((100vw - var(--container)) / 2 + var(--gutter))`. Hai lỗi, cả hai chỉ
   lộ ra khi đo:

   1. scroll-snap kéo ray tự cuộn sang phải đúng bằng phần đệm ngay lúc tải —
      mốc snap của thẻ đầu nằm ở mép vùng cuộn, không phải sau đệm. Đo được
      scrollLeft = 331px, thẻ đầu ở x=0 trong khi tiêu đề dải ở x=323.
   2. Sửa bằng scroll-padding thì hết tự cuộn, nhưng vẫn lệch 8px: `100vw` TÍNH
      CẢ thanh cuộn dọc, còn `.mona-container` căn theo clientWidth thì không.
      Ở màn đo được: 100vw = 1745 nhưng clientWidth = 1730.

   Nằm trong container thì mép trái khớp tuyệt đối, không phải tính gì. Tràn
   phải bằng đúng một gutter vẫn đủ cắt ngang thẻ cuối để lộ "còn nữa". */
.mona-rail {
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	margin-inline-end: calc(-1 * var(--gutter));
	padding-inline-end: var(--gutter);
	padding-block: 6px 18px;
	scrollbar-width: thin;
}
.mona-rail:focus-visible { outline-offset: -3px; }
.mona-rail__t { display: flex; gap: clamp(14px, 1.5vw, 22px); inline-size: max-content; }
.mona-rail__t > li { inline-size: clamp(230px, 25vw, 288px); scroll-snap-align: start; }

.mona-rail__nav { display: flex; gap: 8px; }
.mona-rail__nav button {
	inline-size: var(--tap); block-size: var(--tap);
	display: grid; place-items: center;
	border: 1px solid var(--line-2); border-radius: var(--r-s); color: var(--ink);
	transition: background var(--dur) var(--ease-2), border-color var(--dur) var(--ease-2), opacity var(--dur) var(--ease-2);
}
.mona-rail__nav button:hover:not(:disabled) { background: var(--moss); border-color: var(--moss); color: var(--card); }
.mona-rail__nav button:disabled { opacity: .35; cursor: default; }

.mona-step { block-size: 100%; }
.mona-step figure { margin: 0 0 12px; overflow: hidden; border-radius: var(--r-m); border: 1px solid var(--line); }
.mona-step img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.mona-step:hover img { transform: scale(1.05); }
.mona-step b {
	display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem;
	color: var(--ochre); font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 6px;
}
.mona-step h3 { font-size: var(--t-card); font-weight: 600; margin-bottom: 6px; }
.mona-step p { font-size: var(--t-small); color: var(--ink-2); }

/* ══ Bảng giá ══════════════════════════════════════════════════════════════*/
.mona-price {
	display: grid; grid-template-columns: 1.6fr .8fr;
	gap: clamp(22px, 2.6vw, 42px); align-items: start;
}
@media (max-width: 980px) { .mona-price { grid-template-columns: 1fr; } }

/* Bảng rộng cuộn TRONG khung của nó, không đẩy cả trang cuộn ngang. */
.mona-price__table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mona-price table { inline-size: 100%; min-inline-size: 560px; border-collapse: collapse; }
.mona-price th, .mona-price td {
	text-align: left; padding: 11px 14px 11px 0;
	border-bottom: 1px solid var(--line-dark);
	font-size: var(--t-small); vertical-align: baseline;
}
.mona-price thead th {
	font-family: var(--f-body); font-weight: 600; font-size: var(--t-micro);
	text-transform: uppercase; letter-spacing: .09em; color: var(--sand);
	border-bottom-color: var(--sand);
}
.mona-price tbody th { font-weight: 600; color: var(--on-dark); white-space: nowrap; }
.mona-price td { color: var(--on-dark-soft); }
.mona-price td:nth-child(3) { color: var(--on-dark); font-weight: 600; white-space: nowrap; }
.mona-price tbody tr { transition: background var(--dur) var(--ease-2); }
.mona-price tbody tr:hover { background: var(--tint-dark); }
.mona-price tbody tr:last-child th, .mona-price tbody tr:last-child td { border-bottom: 0; }

.mona-price__side figure { margin: 0 0 14px; overflow: hidden; border-radius: var(--r-s); }
.mona-price__side img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mona-price__src {
	font-size: var(--t-micro); line-height: 1.6; color: var(--on-dark-soft);
	padding-left: 12px; border-left: 2px solid var(--sand);
}
.mona-price__src b { color: var(--sand); }
.mona-price__note { margin-top: 12px; font-size: var(--t-micro); line-height: 1.6; color: var(--on-dark-soft); }

/* ══ Dải ảnh tràn viền ═════════════════════════════════════════════════════
   Ảnh phủ kín dải, chữ nằm trong một thẻ đặc để tương phản không phụ thuộc vào
   chỗ sáng chỗ tối của ảnh. Đặt chữ trắng thẳng lên ảnh là cách nhanh nhất để
   một trang trượt kiểm tra tương phản ở đúng một tấm ảnh sáng. */
.mona-feature {
	position: relative; isolation: isolate;
	padding-block: clamp(72px, 9vw, 148px);
	overflow: hidden;
	background: var(--ink);
}
.mona-feature__media { position: absolute; inset: 0; margin: 0; z-index: -1; }
.mona-feature__media img {
	inline-size: 100%; block-size: 100%; object-fit: cover;
	/* Cao hơn khung để parallax còn chỗ trôi mà không hở mép. */
	scale: 1.18;
	opacity: .82;
}
.mona-feature__in { display: flex; justify-content: flex-end; }
.mona-feature__card {
	inline-size: min(100%, 468px);
	background: var(--card); border-radius: var(--r-l);
	padding: clamp(22px, 2.4vw, 34px);
	box-shadow: var(--sh-lift);
}
.mona-feature__card h2 { font-size: var(--t-h2); }
.mona-feature__card p { margin: 12px 0 16px; font-size: var(--t-small); color: var(--ink-2); }
@media (max-width: 760px) { .mona-feature__in { justify-content: flex-start; } }

/* ══ Thẻ bài viết — dùng lại ở dải cẩm nang trụ và dải mới cập nhật ════════*/
.mona-card {
	block-size: 100%; display: flex; flex-direction: column;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease-2), box-shadow var(--dur) var(--ease-2),
	            transform var(--dur) var(--ease);
}
.mona-card:hover { border-color: var(--line-2); box-shadow: var(--sh-card); transform: translateY(-3px); }
.mona-card__media { display: block; overflow: hidden; }
.mona-card__media img {
	inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	transition: transform .6s var(--ease);
}
.mona-card:hover .mona-card__media img { transform: scale(1.05); }
.mona-card__b { padding: clamp(13px, 1.3vw, 18px); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.mona-card__b h3 { font-size: var(--t-card); font-weight: 600; }
/* Tiêu đề gọn một dòng đo được 19–20px ở khoảng 560–1024px — dưới sàn 24px của
   WCAG 2.2. Ở 1440 nó qua sàn chỉ vì tiêu đề dài ra hai dòng, tức là đang phụ
   thuộc vào độ dài chữ; đổi một tiêu đề là hỏng. Đệm dọc làm nó đạt sàn bất kể
   dài ngắn. */
.mona-card__b h3 a { display: inline-block; padding-block: 3px; }
.mona-card__b h3 a:hover { color: var(--moss); }
.mona-card__b p { font-size: var(--t-small); color: var(--ink-2); }
.mona-card__meta { font-size: var(--t-micro) !important; margin-top: auto; }
.mona-card .mona-chip { align-self: flex-start; }

/* Biến thể hàng ngang cho dải "mới cập nhật": ảnh trái, chữ phải. Cùng một thẻ,
   khác bố cục — không nhân bản component.

   ⚠️ CHỮ quyết định chiều cao thẻ, không phải ảnh. Bản đầu đặt
   `aspect-ratio: 1/1` lên ảnh: ở thẻ rộng 676px, ảnh 270px kéo chiều cao thẻ
   lên đúng 270px trong khi phần chữ chỉ cần ~120px, để lại một mảng trống nửa
   thẻ. Ảnh giờ phủ theo chiều cao mà chữ đặt ra (`block-size: 100%` +
   `object-fit: cover`), và min-block-size giữ cho thẻ không mỏng dính khi tiêu
   đề chỉ một dòng. */
@media (min-width: 561px) {
	.mona-card--row { flex-direction: row; min-block-size: 158px; }
	.mona-card--row .mona-card__media { flex: none; inline-size: 32%; }
	.mona-card--row .mona-card__media img { block-size: 100%; inline-size: 100%; aspect-ratio: auto; }
	.mona-card--row .mona-card__b { justify-content: center; }
	.mona-card--row .mona-card__meta { margin-top: 0; }
}

/* ══ Mới cập nhật ══════════════════════════════════════════════════════════*/
.mona-latest {
	display: grid; grid-template-columns: 1.55fr .85fr;
	gap: clamp(22px, 2.6vw, 40px); align-items: start;
}
@media (max-width: 1040px) { .mona-latest { grid-template-columns: 1fr; } }

/* MỘT cột, không phải hai. Ở hai cột, thẻ chỉ rộng ~330px nên ảnh còn 132px và
   cột chữ còn ~180px — đo được tiêu đề tiếng Việt gãy bốn dòng trong khi ô ảnh
   thì trống trải. Một cột cho thẻ rộng ~700px: ảnh 280px, chữ 420px, tiêu đề
   gọn hai dòng. */
.mona-latest__main { grid-template-columns: 1fr; }

.mona-latest__list {
	padding: clamp(16px, 1.7vw, 24px);
	background: var(--ground-2); border-radius: var(--r-m); border: 1px solid var(--line);
}
.mona-latest__list h3 {
	font-size: var(--t-h3);
	padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--line-2);
}
.mona-latest__list a { display: grid; gap: 3px; padding-block: 12px; border-bottom: 1px solid var(--line-2); }
.mona-latest__list li:last-child a { border-bottom: 0; }
.mona-latest__list span { font-size: var(--t-small); font-weight: 500; }
.mona-latest__list em { font-style: normal; font-size: var(--t-micro); color: var(--ochre); font-weight: 600; }
.mona-latest__list a:hover span { color: var(--moss); }

/* ══ Khảm ảnh ══════════════════════════════════════════════════════════════
   Lưới 4 cột với hai ô phá nhịp: một ô rộng gấp đôi, một ô cao gấp đôi. Đây là
   dải duy nhất trên trang không có chữ dẫn dài — nó để mắt nghỉ giữa hai dải
   đặc chữ. Nhãn nằm đè lên ảnh, trên một lớp phủ tối đặc để tương phản không
   phụ thuộc chỗ sáng chỗ tối của từng tấm. */
.mona-mosaic {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 172px; gap: clamp(10px, 1.1vw, 16px);
}
.mona-mosaic--wide { grid-column: span 2; }
.mona-mosaic--tall { grid-row: span 2; }
.mona-mosaic li { min-width: 0; }
.mona-mosaic a {
	position: relative; display: block; block-size: 100%;
	overflow: hidden; border-radius: var(--r-m); border: 1px solid var(--line);
}
.mona-mosaic img {
	inline-size: 100%; block-size: 100%; object-fit: cover;
	transition: transform .7s var(--ease);
}
.mona-mosaic a:hover img { transform: scale(1.06); }
.mona-mosaic span {
	position: absolute; inset-inline: 0; inset-block-end: 0;
	padding: 22px 12px 10px;
	font-size: var(--t-micro); font-weight: 600; color: var(--on-dark);
	background: linear-gradient(to top, var(--ink) 4%, transparent 100%);
}
@media (max-width: 900px) {
	.mona-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 154px; }
	/* Ở 2 cột, một ô "rộng gấp đôi" chiếm trọn hàng và phá nhịp thay vì tạo
	   nhịp — nên bỏ cả hai modifier, để lưới trở lại đều. */
	.mona-mosaic--wide { grid-column: auto; }
	.mona-mosaic--tall { grid-row: auto; }
}
@media (max-width: 480px) { .mona-mosaic { grid-auto-rows: 132px; } }

/* ══ Ban biên tập ══════════════════════════════════════════════════════════
   Bản trước là hai hộp có chữ lồng "NP"/"KO" rồi một hàng bốn cột đánh số —
   trung thực nhưng rỗng: nó không nói thêm được gì về người viết, và là dải
   yếu nhất trang.

   Bản này thay chữ lồng bằng SỐ NĂM NGHỀ đặt lớn (dữ liệu thật, đọc được
   ngay), và thêm danh sách bài THẬT của từng người — tra từ /author/<slug>/ và
   datePublished trên site. Vừa dày thông tin hơn vừa là liên kết nội bộ thật. */
.mona-ed-wrap {
	display: grid; grid-template-columns: 1.32fr .68fr;
	gap: clamp(26px, 3.2vw, 56px); align-items: start;
}
@media (max-width: 1040px) { .mona-ed-wrap { grid-template-columns: 1fr; } }

.mona-ed-list { display: grid; gap: clamp(22px, 2.4vw, 34px); }
.mona-ed {
	display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2vw, 30px);
	padding-bottom: clamp(22px, 2.4vw, 34px);
	border-bottom: 1px solid var(--line-dark);
}
.mona-ed:last-child { padding-bottom: 0; border-bottom: 0; }

/* Số năm nghề — thay chỗ của ảnh chân dung. Đặt trên nền nhạt để nó là một
   khối đặc, không phải chữ trôi nổi. */
.mona-ed__yrs {
	/* align-self: start — nếu không, ô này là grid item và bị KÉO CAO hết chiều
	   cao của cả khối tác giả (đo được ~250px cho một con số hai chữ). Nó phải
	   là một khối đặc gọn, không phải một cột dọc rỗng. */
	align-self: start;
	inline-size: clamp(84px, 8vw, 104px); flex: none;
	display: grid; place-items: center; gap: 2px;
	padding: 16px 8px 14px; border-radius: var(--r-m);
	background: var(--tint-dark); border: 1px solid var(--line-dark);
	text-align: center;
}
.mona-ed__yrs b {
	font-family: var(--f-display); font-weight: 700; line-height: 1;
	font-size: clamp(2rem, 1.4rem + 1.5vw, 2.7rem);
	color: var(--sand); font-variant-numeric: tabular-nums;
}
.mona-ed__yrs span { font-size: var(--t-micro); color: var(--on-dark-soft); line-height: 1.25; }

.mona-ed__b { min-width: 0; }
.mona-ed h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
.mona-ed__role {
	margin-top: 5px; font-size: var(--t-micro); font-weight: 600;
	color: var(--moss-lift); line-height: 1.5;
}
.mona-ed__bio { margin-top: 11px; font-size: var(--t-small); color: var(--on-dark-soft); max-inline-size: 62ch; }

.mona-ed__work { margin-top: 16px; }
.mona-ed__count {
	display: block; margin-bottom: 6px;
	font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--sand);
}
.mona-ed__work a {
	display: flex; align-items: baseline; gap: 12px;
	padding-block: 8px; border-bottom: 1px solid var(--line-dark);
	font-size: var(--t-small); color: var(--on-dark);
	transition: color var(--dur) var(--ease-2);
}
.mona-ed__work li:last-child a { border-bottom: 0; }
.mona-ed__work a:hover { color: var(--sand); }
.mona-ed__work em {
	margin-left: auto; flex: none; font-style: normal;
	font-size: var(--t-micro); color: var(--on-dark-soft); font-variant-numeric: tabular-nums;
}

/* ── Quy trình kiểm chứng ──────────────────────────────────────────────────
   Đường dọc nối các bước thay cho bốn cột rời: quy trình có thứ tự, và một
   hàng bốn ô ngang không nói được điều đó. */
.mona-verify__shot { margin: 0 0 20px; }
.mona-verify__shot img {
	inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-m);
}
.mona-verify__shot figcaption {
	margin-top: 9px; font-size: var(--t-micro); color: var(--on-dark-soft); line-height: 1.55;
}

.mona-trail { counter-reset: v; display: grid; gap: 0; }
.mona-trail li {
	counter-increment: v; position: relative;
	padding-left: 40px; padding-bottom: 18px;
}
.mona-trail li:last-child { padding-bottom: 0; }
.mona-trail li::before {
	content: counter(v, decimal-leading-zero);
	position: absolute; inset-inline-start: 0; inset-block-start: 0;
	inline-size: 26px; block-size: 26px;
	display: grid; place-items: center; border-radius: 50%;
	background: var(--sand); color: var(--ink);
	font-family: var(--f-display); font-weight: 700; font-size: .74rem;
	font-variant-numeric: tabular-nums;
}
/* Đường nối chạy từ dưới viên số này tới viên số kế tiếp. */
.mona-trail li::after {
	content: ""; position: absolute;
	inset-inline-start: 12.5px; inset-block: 30px 0;
	inline-size: 1px; background: var(--line-dark);
}
.mona-trail li:last-child::after { display: none; }
.mona-trail h3 { font-size: var(--t-card); font-weight: 600; }
.mona-trail p { margin-top: 4px; font-size: var(--t-small); color: var(--on-dark-soft); }

.mona-verify__note {
	margin-top: 20px; padding-left: 14px; border-left: 2px solid var(--moss-lift);
	font-size: var(--t-micro); line-height: 1.6; color: var(--on-dark-soft);
}

/* ══ Góp ý ═════════════════════════════════════════════════════════════════
   Nền SÁNG. Lúc dải này còn --dark thì nó, dải ban biên tập ngay trên và footer
   ngay dưới cùng một màu nền: đo được 2.292px liên tục, 21% chiều cao trang.
   Ba dải dính thành một khối và mọi đường ranh đọc thành lỗi render. Xem thêm
   comment trong index.html. */
.mona-contact {
	display: grid; grid-template-columns: 1.15fr .85fr;
	gap: clamp(22px, 3vw, 52px); align-items: start;
}
@media (max-width: 860px) { .mona-contact { grid-template-columns: 1fr; } }
.mona-contact h2 { font-size: var(--t-h2); max-inline-size: 20ch; }
.mona-contact > div > p { margin-top: 14px; margin-bottom: 22px; color: var(--ink-2); max-inline-size: 54ch; }
.mona-contact__list {
	display: grid; gap: 11px;
	padding-left: 16px; border-left: 2px solid var(--line-2);
	font-size: var(--t-small); color: var(--ink-2);
}
.mona-contact__list li { position: relative; }
.mona-contact__list li::before {
	content: ""; position: absolute; left: -21px; top: .62em;
	inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--moss);
}

/* ══ Footer ════════════════════════════════════════════════════════════════
   Nền TỐI, không phải nền cát nhạt.

   Bản trước dùng --ground-2 và đặt gần như mọi thứ ở --t-small: đọc thì được
   nhưng nó tan vào dải phía trên và không đóng lại được trang. Chân trang của
   một ấn phẩm là chỗ cuối cùng nói site này là ai và KHÔNG phải là ai — nó cần
   sức nặng, không phải sự lịch sự.

   Ba thứ tạo sức nặng ở đây, không phải một: nền tối, khối thương hiệu to hẳn
   lên với câu công bố ở cỡ đọc được, và tên ấn phẩm đặt ở cỡ lớn phía dưới. */
.mona-footer {
	background: var(--ink); color: var(--on-dark);
	padding-block: clamp(48px, 5.4vw, 84px) 22px;
	overflow: hidden;   /* tên cỡ lớn cắt gọn theo mép */
}

.mona-footer__top {
	display: grid; grid-template-columns: 1.5fr 1fr 1fr;
	gap: clamp(28px, 3.4vw, 60px);
	padding-bottom: clamp(28px, 3.2vw, 46px);
}
@media (max-width: 900px) { .mona-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .mona-footer__top { grid-template-columns: 1fr; } }

.mona-brand--lg .mona-brand__mark { color: var(--moss-lift); }
.mona-brand--lg .mona-brand__t b { font-size: 1.3rem; color: var(--on-dark); }
.mona-brand--lg .mona-brand__t small { color: var(--on-dark-soft); font-size: var(--t-small); }

/* Câu công bố ở --t-small chứ không phải --t-micro: đây là câu quan trọng nhất
   trong footer, nó không được nhỏ hơn danh sách liên kết bên cạnh. */
.mona-footer__say {
	margin-top: 18px; max-inline-size: 46ch;
	font-size: var(--t-small); line-height: 1.65; color: var(--on-dark-soft);
}
.mona-footer__say b { color: var(--on-dark); }

.mona-footer__mail {
	display: inline-flex; align-items: center; gap: 12px;
	margin-top: 20px; padding: 12px 18px 12px 14px;
	border: 1px solid var(--line-dark); border-radius: var(--r-s);
	background: var(--tint-dark); min-height: var(--tap);
	transition: border-color var(--dur) var(--ease-2), background var(--dur) var(--ease-2);
}
.mona-footer__mail:hover { border-color: var(--sand); background: transparent; }
.mona-footer__mail svg { flex: none; color: var(--sand); }
.mona-footer__mail span {
	display: grid; line-height: 1.35;
	font-size: var(--t-small); font-weight: 600;
}
.mona-footer__mail em {
	font-style: normal; font-size: var(--t-micro); font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--sand);
}

.mona-footer h2 {
	font-family: var(--f-body); font-size: var(--t-micro); font-weight: 700;
	text-transform: uppercase; letter-spacing: .13em; color: var(--sand);
	padding-bottom: 10px; margin-bottom: 4px;
	border-bottom: 1px solid var(--line-dark);
}
.mona-footer__h2b { margin-top: 26px; }
.mona-footer__col a {
	display: flex; align-items: center; min-height: 38px;
	font-size: var(--t-small); color: var(--on-dark-soft);
	transition: color var(--dur) var(--ease-2);
}
.mona-footer__col a:hover { color: var(--on-dark); }

/* Số bài mỗi chuyên mục — dữ liệu thật, đếm 03/09/2026. Nó biến một cột liên
   kết thành một cột có thông tin. */
.mona-footer__cats i {
	margin-left: auto; font-style: normal;
	font-size: var(--t-micro); font-weight: 700; color: var(--sand);
	font-variant-numeric: tabular-nums;
	min-inline-size: 2ch; text-align: right;
}

/* Tên ấn phẩm ở cỡ lớn. Trang trí, aria-hidden trong markup vì nó lặp lại tên
   đã có ở khối thương hiệu. Không mang chữ nào cần đọc nên không ràng buộc
   tương phản — nhưng vẫn giữ đủ mờ để không cạnh tranh với dòng ký tên. */
.mona-footer__mark {
	font-family: var(--f-display); font-weight: 700;
	/* Cỡ lấy từ --mark-size, đặt cạnh --container trong variables.css để hai
	   giá trị không bao giờ lệch nhau. Tỉ lệ ĐO bằng scrollWidth: 6,62px bề
	   rộng cho mỗi px cỡ chữ.

	   ⚠️ Lần đầu tôi ước tỉ lệ này bằng cách đọc toạ độ trên ảnh chụp và ra
	   5,97 — lệch 11%, đủ để chữ tràn ra ngoài container và bị cắt cụt. Đo
	   bằng scrollWidth, đừng đọc bằng mắt. */
	font-size: min(11vw, var(--mark-size)); line-height: .92;
	letter-spacing: -.03em; white-space: nowrap;
	color: var(--on-dark); opacity: .07;
	margin-block: clamp(2px, .6vw, 8px) clamp(10px, 1.6vw, 22px);
	user-select: none;
}

.mona-sign {
	display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
	padding-top: 18px; border-top: 1px solid var(--line-dark);
	font-size: var(--t-micro); color: var(--on-dark-soft); line-height: 1.6;
}
.mona-sign a { color: var(--sand); font-weight: 600; }

/* ══ Dock ══════════════════════════════════════════════════════════════════
   Hai nút. Không nút gọi, không Zalo — satellite-sites.md § Contact. */
.mona-dock {
	position: fixed; right: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px);
	z-index: 70; display: grid; gap: 9px;
}
.mona-dock a, .mona-dock button {
	inline-size: var(--tap); block-size: var(--tap);
	display: grid; place-items: center; border-radius: var(--r-s);
	background: var(--veil-card); border: 1px solid var(--line-2); color: var(--ink);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: var(--sh-dock);
	transition: background var(--dur) var(--ease-2), color var(--dur) var(--ease-2),
	            opacity var(--dur) var(--ease-2), transform var(--dur) var(--ease);
}
.mona-dock a:hover, .mona-dock button:hover { background: var(--moss); color: var(--card); border-color: var(--moss); }

/* Nút lên đầu chỉ tồn tại khi đã cuộn.

   ⚠️ Rule ẩn KHÔNG được đặt dưới .js. Bản đầu viết `.js .mona-dock__top{...}`
   và đo được đúng cái nó định tránh: khi script bị chặn, .js không bao giờ
   xuất hiện, rule ẩn không áp dụng, nên nút hiện đầy đủ và bấm không làm gì —
   một nút chết. Trạng thái ẩn là mặc định; chỉ .js + .is-on mới mở nó ra.

   visibility chứ không chỉ opacity: pointer-events:none chặn chuột nhưng KHÔNG
   đưa nút ra khỏi thứ tự tab, nên người dùng bàn phím vẫn dừng ở một nút vô
   hình. */
.mona-dock__top { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; }
.js .mona-dock__top.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }


/* ══════════════════════════════════════════════════════════════════════════
   TRANG CON — component chung cho chuyên mục, bài viết, trang tĩnh, tìm kiếm,
   404. Tất cả nằm trong CÙNG main.css: Mona_Enqueue::context() trả về rỗng có
   chủ ý, và docblock của nó ghi lại cái giá của lần chia bundle trước — năm
   rule nằm trong bundle chỉ-trang-chủ rồi render không style ở mọi trang khác.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ Đầu trang ═════════════════════════════════════════════════════════════*/
.mona-phead {
	padding-block: clamp(26px, 3vw, 46px) clamp(24px, 2.8vw, 40px);
	border-bottom: 1px solid var(--line);
}
.mona-phead--page { background: var(--card); }
.mona-phead--post { background: var(--card); padding-bottom: clamp(20px, 2.2vw, 32px); }
.mona-phead h1 {
	font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.85rem);
	max-inline-size: 24ch; text-wrap: balance;
}
.mona-phead--post h1 { max-inline-size: 26ch; margin-top: 10px; }
.mona-phead__lede {
	margin-top: 14px; max-inline-size: 62ch;
	font-size: clamp(.99rem, .95rem + .2vw, 1.1rem); color: var(--ink-2);
}
.mona-phead__count {
	margin-top: 16px; font-size: var(--t-micro); color: var(--ink-2);
	text-transform: uppercase; letter-spacing: .09em; font-weight: 600;
}
.mona-phead__count b { color: var(--ochre); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.mona-phead .mona-btn { margin-top: 20px; }
.mona-phead--404 { text-align: left; }

/* ── Đường dẫn ─────────────────────────────────────────────────────────────*/
.mona-crumb { margin-bottom: 14px; }
.mona-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mona-crumb li { display: flex; align-items: center; gap: 8px; font-size: var(--t-micro); color: var(--ink-2); }
.mona-crumb li + li::before {
	content: ""; inline-size: 5px; block-size: 5px; flex: none;
	border-right: 1.5px solid var(--line-2); border-top: 1.5px solid var(--line-2);
	transform: rotate(45deg);
}
.mona-crumb a { display: inline-flex; align-items: center; min-height: 26px; }
.mona-crumb a:hover { color: var(--moss); }
.mona-crumb [aria-current] { color: var(--ink); font-weight: 600; }

/* ══ Bố cục hai cột dùng chung ═════════════════════════════════════════════*/
.mona-listing, .mona-post__in {
	display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 340px);
	gap: clamp(26px, 3vw, 54px); align-items: start;
}
@media (max-width: 980px) {
	.mona-listing, .mona-post__in { grid-template-columns: 1fr; }
}

.mona-side { display: grid; gap: clamp(14px, 1.6vw, 22px); }
/* Cột phụ dính khi cuộn — chỉ ở desktop, và chỉ khi nó thấp hơn khung nhìn.
   scroll-padding của header đã tính, nên dùng lại cùng con số. */
@media (min-width: 981px) {
	.mona-side--sticky { position: sticky; inset-block-start: 88px; }
}
.mona-side__b {
	padding: clamp(16px, 1.7vw, 22px);
	background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
}
.mona-side__b--moss { background: var(--moss-wash); border-color: transparent; }
.mona-side__b h2 {
	font-family: var(--f-body); font-size: var(--t-micro); font-weight: 700;
	text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2);
	padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line-2);
}
.mona-side__b p { font-size: var(--t-small); color: var(--ink-2); margin-top: 8px; }
.mona-side__b p b { color: var(--ink); font-size: var(--t-card); }
.mona-side__b .mona-more { margin-top: 6px; }
.mona-side__src {
	margin-top: 10px !important; padding-left: 10px;
	border-left: 2px solid var(--ochre);
	font-size: var(--t-micro) !important; line-height: 1.55;
}
.mona-side__shot { margin: 0; }
.mona-side__shot img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-s); }

.mona-side__cats a, .mona-side__list a {
	display: flex; align-items: center; gap: 10px; min-height: 40px;
	padding-block: 6px; border-bottom: 1px solid var(--line);
	font-size: var(--t-small); color: var(--ink);
}
.mona-side__cats li:last-child a, .mona-side__list li:last-child a { border-bottom: 0; }
.mona-side__cats a:hover, .mona-side__list a:hover { color: var(--moss); }
.mona-side__cats i {
	margin-left: auto; font-style: normal; font-size: var(--t-micro);
	font-weight: 700; color: var(--ochre); font-variant-numeric: tabular-nums;
}
.mona-side__list [aria-current] { color: var(--moss); font-weight: 600; }
.mona-side__no { display: grid; gap: 7px; margin-top: 10px; font-size: var(--t-small); color: var(--ink-2); }
.mona-side__no li { position: relative; padding-left: 18px; }
.mona-side__no li::before {
	content: ""; position: absolute; left: 0; top: .58em;
	inline-size: 9px; block-size: 2px; background: var(--moss);
}

.mona-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.mona-tags a {
	display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px;
	background: var(--ground-2); border-radius: var(--r-full);
	font-size: var(--t-micro); font-weight: 600; color: var(--ink-2);
	transition: background var(--dur) var(--ease-2), color var(--dur) var(--ease-2);
}
.mona-tags a:hover { background: var(--moss); color: var(--card); }

/* ══ Phân trang ════════════════════════════════════════════════════════════*/
.mona-pager {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
	gap: 8px 14px; margin-top: clamp(26px, 3vw, 44px);
	padding-top: clamp(20px, 2.2vw, 30px); border-top: 1px solid var(--line-2);
}
.mona-pager ol { display: flex; gap: 6px; }
.mona-pager a {
	display: inline-flex; align-items: center; justify-content: center;
	min-inline-size: var(--tap); min-height: var(--tap); padding-inline: 12px;
	border: 1px solid var(--line-2); border-radius: var(--r-s);
	font-size: var(--t-small); font-weight: 600; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.mona-pager a:hover { border-color: var(--moss); color: var(--moss); }
.mona-pager [aria-current] { background: var(--moss); border-color: var(--moss); color: var(--card); }
.mona-pager .is-off { opacity: .4; pointer-events: none; }

/* ══ Trạng thái rỗng ═══════════════════════════════════════════════════════
   dynamic-content.md: một danh sách rỗng KHÔNG được ra trang trắng. Khối này
   mang `hidden` trong markup vì mẫu đang ở trạng thái có kết quả — lúc port,
   PHP quyết định hiện cái nào. */
.mona-empty {
	padding: clamp(28px, 3.4vw, 52px);
	background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--r-m);
	text-align: center;
}
.mona-empty h2 { font-size: var(--t-h3); }
.mona-empty p { margin: 10px auto 18px; max-inline-size: 52ch; font-size: var(--t-small); color: var(--ink-2); }
.mona-empty__x { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ══ Bài viết ══════════════════════════════════════════════════════════════*/
.mona-byline {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
	margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.mona-byline__who { display: grid; line-height: 1.3; }
.mona-byline__who b { font-family: var(--f-display); font-weight: 600; font-size: var(--t-card); }
.mona-byline__who em { font-style: normal; font-size: var(--t-micro); color: var(--ochre); font-weight: 600; }
.mona-byline__d { display: flex; align-items: center; gap: 8px; font-size: var(--t-micro); color: var(--ink-2); }
.mona-byline__d i { color: var(--line-2); font-style: normal; }

.mona-post__hero { margin: 0; padding-block: clamp(18px, 2vw, 30px) 0; background: var(--card); }
.mona-post__hero img {
	inline-size: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--r-m);
}
.mona-post__hero figcaption {
	margin-top: 10px; font-size: var(--t-micro); color: var(--ink-2); max-inline-size: 68ch;
}
.mona-post__in { padding-block: clamp(28px, 3.4vw, 56px); }
.mona-post__body { min-width: 0; }

/* ── Mục lục ───────────────────────────────────────────────────────────────*/
.mona-toc {
	padding: clamp(16px, 1.7vw, 22px);
	background: var(--ground-2); border-radius: var(--r-m);
	margin-bottom: clamp(22px, 2.4vw, 34px);
}
.mona-toc h2 {
	font-family: var(--f-body); font-size: var(--t-micro); font-weight: 700;
	text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); margin-bottom: 6px;
}
.mona-toc ol { counter-reset: t; }
.mona-toc li { counter-increment: t; }
.mona-toc a {
	display: flex; gap: 10px; min-height: 38px; align-items: center;
	font-size: var(--t-small); color: var(--ink);
	border-bottom: 1px solid var(--line-2);
}
.mona-toc li:last-child a { border-bottom: 0; }
.mona-toc a::before {
	content: counter(t, decimal-leading-zero);
	color: var(--ochre); font-weight: 700; font-variant-numeric: tabular-nums; flex: none;
}
.mona-toc a:hover { color: var(--moss); }

/* ── Thân bài ──────────────────────────────────────────────────────────────
   Đây là nơi biên tập viên gõ nội dung, nên mọi thẻ HTML thô phải có kiểu sẵn:
   không thể trông chờ mỗi bài đều được bọc class đúng. */
.mona-prose > * + * { margin-top: 1.1em; }
.mona-prose h2 {
	font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem);
	margin-top: 1.9em; scroll-margin-top: 88px;
}
.mona-prose h3 { font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem); margin-top: 1.5em; scroll-margin-top: 88px; }
.mona-prose p, .mona-prose ul, .mona-prose ol { max-inline-size: var(--measure); }
.mona-prose p { color: var(--ink-2); }
.mona-prose strong, .mona-prose b { color: var(--ink); font-weight: 600; }
.mona-prose a:not(.mona-btn):not(.mona-more) {
	color: var(--moss); font-weight: 500;
	border-bottom: 1px solid var(--line-2);
}
.mona-prose a:not(.mona-btn):not(.mona-more):hover { border-bottom-color: var(--moss); }
.mona-prose ul, .mona-prose ol { display: grid; gap: 9px; }
.mona-prose ul li, .mona-prose ol li { position: relative; padding-left: 22px; font-size: var(--t-body); color: var(--ink-2); }
.mona-prose ul li::before {
	content: ""; position: absolute; left: 2px; top: .62em;
	inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--moss);
}
.mona-prose ol { counter-reset: p; }
.mona-prose ol li { counter-increment: p; }
.mona-prose ol li::before {
	content: counter(p) "."; position: absolute; left: 0; top: 0;
	color: var(--ochre); font-weight: 700; font-variant-numeric: tabular-nums;
}
.mona-prose figure { margin: 1.8em 0; }
.mona-prose figure img {
	inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: var(--r-m); border: 1px solid var(--line);
}
.mona-prose figcaption { margin-top: 9px; font-size: var(--t-micro); color: var(--ink-2); line-height: 1.55; }

/* Bảng trong bài cuộn TRONG khung của nó, không đẩy cả trang cuộn ngang. */
.mona-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.8em 0; }
.mona-table table { inline-size: 100%; min-inline-size: 520px; border-collapse: collapse; }
.mona-table caption {
	text-align: left; padding-bottom: 10px;
	font-size: var(--t-micro); color: var(--ink-2);
}
.mona-table th, .mona-table td {
	text-align: left; padding: 11px 14px 11px 0;
	border-bottom: 1px solid var(--line); font-size: var(--t-small); vertical-align: baseline;
}
.mona-table thead th {
	font-family: var(--f-body); font-weight: 600; font-size: var(--t-micro);
	text-transform: uppercase; letter-spacing: .08em; color: var(--ochre);
	border-bottom-color: var(--line-2);
}
.mona-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.mona-table td { color: var(--ink-2); }

/* Hộp giới hạn — dùng cho mọi chỗ bài phải nói "đây là chỗ bài dừng lại". */
.mona-note {
	margin: 1.8em 0; padding: clamp(16px, 1.7vw, 22px);
	background: var(--ochre-wash); border-radius: var(--r-m);
	border-left: 3px solid var(--ochre);
}
.mona-note b { display: block; font-family: var(--f-display); font-size: var(--t-card); }
.mona-note p { margin-top: 6px; font-size: var(--t-small); color: var(--ink-2); max-inline-size: none; }

/* ── FAQ ───────────────────────────────────────────────────────────────────
   <details> nên mở/đóng được khi tắt JS. Node FAQPage thì MONA SEO in, theme
   không dựng schema cạnh tranh. */
.mona-faq { margin-top: clamp(28px, 3vw, 44px); }
.mona-faq > h2 { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); margin-bottom: 14px; }
.mona-faq details { border-bottom: 1px solid var(--line-2); }
.mona-faq summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; gap: 14px; min-height: 56px; padding-block: 10px;
	font-family: var(--f-display); font-weight: 600; font-size: var(--t-card); color: var(--ink);
}
.mona-faq summary::-webkit-details-marker { display: none; }
.mona-faq summary::marker { content: ""; }
.mona-faq summary::after {
	content: ""; margin-left: auto; flex: none;
	inline-size: 10px; block-size: 10px;
	border-right: 2px solid var(--ochre); border-bottom: 2px solid var(--ochre);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--dur) var(--ease);
}
.mona-faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.mona-faq details[open] summary { color: var(--moss); }
.mona-faq details p { padding-bottom: 16px; font-size: var(--t-small); color: var(--ink-2); max-inline-size: var(--measure); }

/* ── Hộp tác giả ───────────────────────────────────────────────────────────*/
.mona-authorbox {
	display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 1.8vw, 26px);
	margin-top: clamp(28px, 3vw, 44px); padding: clamp(18px, 2vw, 28px);
	background: var(--ground-2); border-radius: var(--r-m);
}
.mona-authorbox__lbl {
	display: block; margin-bottom: 4px;
	font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ink-2);
}
.mona-authorbox h2 { font-size: var(--t-h3); }
.mona-authorbox p { margin-top: 8px; font-size: var(--t-small); color: var(--ink-2); }
.mona-authorbox .mona-more { margin-top: 8px; }
@media (max-width: 520px) { .mona-authorbox { grid-template-columns: 1fr; } }

/* Biến thể sáng của ô "năm nghề" và của khối kiểm chứng — cùng component với
   dải tối ở trang chủ, chỉ đổi bảng màu. Không nhân bản component. */
.mona-ed__yrs--light { background: var(--card); border-color: var(--line-2); }
.mona-ed__yrs--light b { color: var(--ochre); }
.mona-ed__yrs--light span { color: var(--ink-2); }
.mona-ed-list--light .mona-ed { border-bottom-color: var(--line-2); }
.mona-ed-list--light .mona-ed__role { color: var(--moss); }
.mona-ed-list--light .mona-ed__bio { color: var(--ink-2); }
.mona-ed-list--light .mona-ed__count { color: var(--ochre); }
.mona-ed-list--light .mona-ed__work a { color: var(--ink); border-bottom-color: var(--line); }
.mona-ed-list--light .mona-ed__work a:hover { color: var(--moss); }
.mona-ed-list--light .mona-ed__work em { color: var(--ink-2); }
.mona-verify--light .mona-verify__shot figcaption { color: var(--ink-2); }
.mona-verify--light .mona-trail li::before { background: var(--moss); color: var(--card); }
.mona-verify--light .mona-trail li::after { background: var(--line-2); }
.mona-verify--light .mona-trail h2 { font-size: var(--t-card); }
.mona-verify--light .mona-trail p { color: var(--ink-2); }
.mona-verify--light .mona-verify__note { border-left-color: var(--moss); color: var(--ink-2); }
.mona-verify--light .mona-verify__note a { color: var(--moss); font-weight: 600; }

/* ── Bài trước / bài sau ───────────────────────────────────────────────────*/
.mona-prevnext {
	display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
	margin-top: clamp(24px, 2.6vw, 38px);
}
@media (max-width: 620px) { .mona-prevnext { grid-template-columns: 1fr; } }
.mona-prevnext__a {
	display: grid; gap: 6px; padding: clamp(14px, 1.5vw, 20px);
	background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
	transition: border-color var(--dur) var(--ease-2), transform var(--dur) var(--ease);
}
.mona-prevnext__a:hover { border-color: var(--moss); transform: translateY(-2px); }
.mona-prevnext__a em {
	font-style: normal; font-size: var(--t-micro); font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ochre);
}
.mona-prevnext__a b { font-family: var(--f-display); font-weight: 600; font-size: var(--t-card); }
.mona-prevnext__a--next { text-align: right; }

/* ══ Tìm kiếm ══════════════════════════════════════════════════════════════*/
.mona-bigsearch {
	display: flex; align-items: center; gap: 10px;
	margin-top: 20px; padding: 6px 6px 6px 16px;
	max-inline-size: 560px;
	background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-m);
	color: var(--ink-2);
}
.mona-bigsearch:focus-within { border-color: var(--moss); }
.mona-bigsearch input {
	flex: 1; min-inline-size: 0; border: 0; background: none; outline: none;
	font: inherit; font-size: var(--t-body); color: var(--ink); min-height: var(--tap);
}
/* The submit button sits inside the box — cancel the `.mona-phead .mona-btn`
   top margin (meant for the standalone CTA button in a page header), which would
   otherwise shove it 20px down and off-centre inside the field. Selector carries
   the extra `.mona-phead` so it outranks that rule regardless of source order. */
.mona-bigsearch .mona-btn { flex: none; }
.mona-phead .mona-bigsearch .mona-btn { margin-top: 0; }

/* Search results reuse the card grid (image + chip + title + excerpt), so only
   the query highlight needs styling on top of it. */
.mona-card mark { background: var(--ochre-wash); color: var(--ink); padding: 0 2px; border-radius: 3px; }

/* Thẻ bài trên trang chuyên mục dùng h2 thay h3 — cùng component, khác cấp
   tiêu đề, nên cỡ chữ phải khai lại cho khớp. */
.mona-card__b h2 { font-size: var(--t-card); font-weight: 600; }
.mona-card__b h2 a { display: inline-block; padding-block: 3px; }
.mona-card__b h2 a:hover { color: var(--moss); }

/* ══ Màn lớn — nới lưới ════════════════════════════════════════════════════
   Container rộng ra thì thẻ tự to theo. Chỉ hai chỗ đáng THÊM cột thay vì
   phóng to thẻ: khảm ảnh (ảnh 6 ô nhỏ đọc tốt hơn 4 ô to) và đường ray quy
   trình (thẻ quá rộng thì mất cảm giác "còn nữa" ở mép phải). */
@media (min-width: 1920px) {
	.mona-mosaic { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 198px; }
	.mona-rail__t > li { inline-size: clamp(288px, 18vw, 330px); }
}
@media (min-width: 2400px) {
	.mona-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 224px; }
	.mona-rail__t > li { inline-size: clamp(330px, 16vw, 380px); }
}

/* ── Màn hình tải ─────────────────────────────────────────────────────
   Tiến trình lấy từ tài nguyên tải THẬT (PerformanceObserver + readyState
   + document.fonts + từng <img>.complete + sự kiện load), không hẹn giờ.

   Mọi quy tắc nằm dưới `.js`: trình duyệt không chạy JS sẽ không bao giờ
   bị màn này che nội dung. Logic đặt inline trong <head> (header.php) chứ
   không nằm ở main.js, vì một file JS lỗi mạng sẽ để lại màn che vĩnh viễn. */
.mona-loader { display: none; }

.js .mona-loader {
	display: grid; place-content: center; justify-items: center; gap: 20px;
	position: fixed; inset: 0; z-index: 200;
	background: var(--ground);
	transition: opacity .5s ease, visibility .5s ease;
}
/* Khoá cuộn trong lúc tải, trả lại ngay khi xong. */
.js.is-loading body { overflow: hidden; }
.js.is-loaded .mona-loader { opacity: 0; visibility: hidden; pointer-events: none; }

.mona-loader__mark { color: var(--ink); }
/* Ba lớp đá xếp chồng, sáng dần theo nhịp — chỉ là trang trí, không biểu thị %. */
.mona-loader__mark path { animation: mona-loader-rise 1.5s ease-in-out infinite; }
.mona-loader__mark path:nth-child(2) { animation-delay: .18s; }
.mona-loader__mark path:nth-child(3) { animation-delay: .36s; }
@keyframes mona-loader-rise {
	0%, 100% { opacity: .25; transform: translateY(2px); }
	45%      { opacity: 1;   transform: translateY(0); }
}

.mona-loader__bar {
	inline-size: min(56vw, 240px); block-size: 3px;
	background: var(--line); border-radius: 999px; overflow: hidden;
}
.mona-loader__fill {
	display: block; block-size: 100%; inline-size: 0;
	background: var(--moss); border-radius: inherit;
}
.mona-loader__pct {
	margin: 0; font-size: var(--t-micro); color: var(--ink-2);
	font-variant-numeric: tabular-nums; letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
	.js .mona-loader { transition: none; }
	.mona-loader__mark path { animation: none; opacity: 1; transform: none; }
}