/* Slate Orchard — màn hình. Điện thoại trước, khổ lớn dùng min-width ở cuối mỗi nhóm. */

@font-face {
	font-family: "Chivo";
	src: url(type/chivo-vn.woff2) format("woff2");
	font-weight: 400 900;
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Chivo";
	src: url(type/chivo-lat.woff2) format("woff2");
	font-weight: 400 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chữ tạm trước khi Chivo tải: họ Arial (Arimo, Liberation Sans cùng số đo). Số đo = Chivo 400 so Arial,
   tính theo tần suất ký tự của chính bài trang chủ; ascent 940 / descent 250 trên 1000 chia cho độ nở. */
@font-face {
	font-family: "ChivoAlt";
	ascent-override: 90.64%;
	descent-override: 24.11%;
	line-gap-override: 0%;
	size-adjust: 103.71%;
	src: local("Arial"), local("Arimo"), local("Liberation Sans");
}

:root {
	/* màu — nền đen ngả lục, ngọc lục từ logo */
	--bg: #06100D;
	--bg-2: #0D1815;
	--bg-3: #14221E;
	--line: #1F302B;
	--line-2: #35493F;
	--txt: #ECF4F0;
	--txt-2: #93A89F;
	--em-hi: #01FAA5;
	--em: #00DBA0;
	--em-lo: #01C59E;
	--em-deep: #0B5A45;
	--coal: #303030;

	--face: "Chivo", "ChivoAlt", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--t-hero: clamp(2rem, 1.25rem + 3.2vw, 3.5rem);
	--t-title: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
	--t-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	--t-h3: 1.25rem;
	--t-lead: 1.125rem;
	--t-read: 1.0625rem;
	--t-body: 1rem;
	--t-btn: .9375rem;
	--t-small: .875rem;
	--w4: 400;
	--w7: 700;
	--w9: 900;
	--ld-head: 1.12;
	--ld-sub: 1.3;
	--ld-body: 1.65;
	--trk: -.02em;

	--u4: 4px; --u8: 8px; --u12: 12px; --u16: 16px; --u20: 20px; --u24: 24px;
	--u32: 32px; --u48: 48px; --u56: 56px; --u64: 64px; --u96: 96px;
	--pill: 999px;

	--glow: 0 0 0 1px rgba(0, 219, 160, .9), 0 6px 22px -8px rgba(0, 219, 160, .55);
	--glow-hi: 0 0 0 1px rgba(1, 250, 165, .95), 0 10px 30px -8px rgba(0, 219, 160, .7);

	--frame: 1120px;
	--col: 720px;
	--edge: 20px;
	--crest-h: 64px;
	--thumb: 112px;
	--tap: 44px;
	--pill-h: 30px;
	--duet-max: 440px;
	--duet-h: 48px;
	--duet-h-top: 40px;
	--crest-act-w: 300px;
	--px8: 8px;
	--px4: 4px;
	--grit-h: 96px;
	--belt-h: 100px;
	--belt-h-s: 80px;
	--fish: 96px;
	--fish-s: 84px;
}

/* ── nền ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--txt); font: var(--w4) var(--t-body)/var(--ld-body) var(--face); }
main { overflow-wrap: break-word; } /* URL dài trong nội dung (trang chủ, bài, trang) không đẩy trang tràn ngang */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--em); text-underline-offset: 3px; }
a:hover { color: var(--em-hi); }
:focus-visible { outline: 2px solid var(--txt); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: var(--w9); letter-spacing: var(--trk); line-height: var(--ld-head); text-wrap: balance; }
h3 { font-size: var(--t-h3); font-weight: var(--w7); line-height: var(--ld-sub); }
p { margin: 0; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rim { width: 100%; max-width: calc(var(--frame) + 2 * var(--edge)); margin-left: auto; margin-right: auto; padding-left: var(--edge); padding-right: var(--edge); }
.hop { position: absolute; left: -9999px; }
.hop:focus { left: var(--u16); top: var(--u8); z-index: 100; background: var(--em); color: var(--bg); padding: var(--u8) var(--u16); border-radius: var(--pill); }

/* ── đầu trang (không dính khi cuộn) ── */
.crest { border-bottom: 1px solid var(--line); }
.crest .rim { height: var(--crest-h); display: flex; align-items: center; gap: var(--u16); }
.crest-logo { flex: none; }
.crest-logo img, .floor-logo img { width: 140px; height: 39px; }
.crest-nav, .crest-act { display: none; }
.fold-key {
	margin-left: auto; display: inline-flex; align-items: center; gap: var(--u8);
	height: var(--tap); padding: 0 var(--u16); border-radius: var(--pill);
	border: 1px solid var(--line-2); background: transparent; color: var(--txt);
	font: var(--w7) var(--t-btn)/1 var(--face); cursor: pointer;
}
.fold-key[aria-expanded="true"] { border-color: var(--em-lo); }
.fold-key .ico-close, .fold-key[aria-expanded="true"] .ico-menu { display: none; }
.fold-key[aria-expanded="true"] .ico-close { display: block; }
.fold { position: fixed; top: var(--crest-h); left: 0; right: 0; bottom: 0; z-index: 10000; background: var(--bg); overflow-y: auto; padding: var(--u24) var(--edge) var(--u48); }
.fold[hidden] { display: none; }
.fold ul { list-style: none; margin: 0 0 var(--u32); padding: 0; }
.fold li { border-bottom: 1px solid var(--line); }
.fold li a { display: flex; justify-content: space-between; align-items: center; padding: var(--u16) 0; color: var(--txt); text-decoration: none; font-size: var(--t-h3); font-weight: var(--w9); letter-spacing: var(--trk); }
.fold li a[aria-current] { color: var(--em); }

/* ── 2 nút của plugin (theme tự vẽ; chọn nút theo thứ tự trong khối) ── */
.duet { min-height: var(--duet-h); margin-top: var(--u24); max-width: var(--duet-max); }
.duet > div { display: flex; gap: var(--u8); }
.duet a {
	flex: 1 1 0; min-width: 0; height: var(--duet-h);
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 var(--u20); border-radius: var(--pill);
	font: var(--w7) var(--t-btn)/1 var(--face); letter-spacing: var(--trk);
	text-decoration: none; white-space: nowrap; overflow: hidden;
}
.duet a > span { overflow: hidden; text-overflow: ellipsis; }
.duet a:nth-child(1) { background: var(--em); color: var(--bg); box-shadow: var(--glow); }
.duet a:nth-child(1):hover { background: var(--em-hi); color: var(--bg); box-shadow: var(--glow-hi); }
.duet a:nth-child(2) { background: var(--coal); color: var(--txt); box-shadow: inset 0 0 0 1px var(--em-lo); }
.duet a:nth-child(2):hover { background: var(--bg-2); color: var(--em-hi); }
.crest-act .duet { margin-top: 0; min-height: var(--duet-h-top); }
.crest-act .duet a { height: var(--duet-h-top); }

/* ── đầu trang chủ: chữ trái, ảnh phải (≥ 900px) ── */
.prow { padding-top: var(--u32); }
.prow-grid { display: grid; gap: var(--u32); }
.prow-grid > * { min-width: 0; }
.dated { color: var(--txt-2); font-size: var(--t-small); font-variant-numeric: tabular-nums; margin-bottom: var(--u12); }
.prow h1 { font-size: var(--t-hero); }
.gist { margin-top: var(--u16); font-size: var(--t-lead); max-width: 62ch; }
.gist strong { font-weight: var(--w4); }
.gist > * + * { margin-top: var(--u12); }

/* khung ảnh vuông góc + 2 vạch góc */
.pane { margin: 0; position: relative; }
.pane img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); background: var(--bg-2); }
.pane p, .pane figure { margin: 0; }
.pane figcaption, .text figcaption { margin-top: var(--u8); color: var(--txt-2); font-size: var(--t-small); }
.ticks { position: relative; }
.ticks::before, .ticks::after { content: ""; position: absolute; width: var(--u16); height: var(--u16); pointer-events: none; }
.ticks::before { top: calc(-1 * var(--u8)); left: calc(-1 * var(--u8)); border-top: 2px solid var(--em); border-left: 2px solid var(--em); }
.ticks::after { bottom: calc(-1 * var(--u8)); right: calc(-1 * var(--u8)); border-bottom: 2px solid var(--em); border-right: 2px solid var(--em); }

/* ── dải điểm ảnh: thưa → dày, chạy vào dải lục thẫm (chứa slider) ── */
.grit {
	--ink: var(--em-deep);
	margin-top: var(--u48);
	height: var(--grit-h);
	background-image:
		conic-gradient(var(--ink) 25%, #0000 0), conic-gradient(var(--ink) 25%, #0000 0),
		conic-gradient(var(--ink) 25%, #0000 0), conic-gradient(var(--ink) 25%, #0000 0 50%, var(--ink) 0 75%, #0000 0),
		conic-gradient(var(--ink) 25%, #0000 0), conic-gradient(var(--ink) 25%, #0000 0 50%, var(--ink) 0 75%, #0000 0),
		conic-gradient(var(--ink) 25%, #0000 0 50%, var(--ink) 0 75%, #0000 0), conic-gradient(var(--ink) 75%, #0000 0),
		conic-gradient(var(--ink) 25%, #0000 0 50%, var(--ink) 0 75%, #0000 0), conic-gradient(var(--ink) 75%, #0000 0),
		conic-gradient(var(--ink) 75%, #0000 0);
	background-size: var(--px8) var(--px8);
	background-repeat: repeat-x;
	background-position: 4px 0, 0 16px, 4px 24px, 0 32px, 4px 40px, 0 48px, 4px 56px, 0 64px, 4px 72px, 0 80px, 4px 88px;
}
.grit-up { transform: scaleY(-1); margin-top: 0; background-color: var(--bg); }
.belt { background: var(--em-deep); min-height: var(--px8); }
.belt-slot { min-height: var(--belt-h-s); display: flex; align-items: center; }
.belt-slot > * { width: 100%; }
.belt-slot a, .belt-slot img { border-radius: 0 !important; } /* khối vuông (plugin mặc định bo 8px) */

/* ── các mục H2 của trang chủ ── */
.stave { padding-top: var(--u56); padding-bottom: var(--u56); border-top: 1px solid var(--line); }
.stave:first-child { border-top: 0; }
.stave h2 { font-size: var(--t-h2); max-width: 22ch; }
.stave-note { margin-top: var(--u8); color: var(--txt-2); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.stave-grid { display: grid; gap: var(--u32); margin-top: var(--u32); }
.stave-grid > * { min-width: 0; }
.stave-text { max-width: var(--col); }
.stave-text > * + * { margin-top: var(--u16); }
.stave-text ul, .stave-text ol { margin-bottom: 0; padding-left: var(--u20); }
.stave-text li + li { margin-top: var(--u8); }
.stave-text li::marker { color: var(--em); }

/* bảng: kẻ mảnh, không sọc */
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-btn); }
th, td { text-align: left; padding: var(--u12) var(--u16); border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--bg-3); color: var(--txt-2); font-weight: var(--w7); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* khối các bước: số lớn + dải điểm ảnh ăn lên từ đáy */
.anvil { background: var(--bg-2); padding: var(--u32) var(--u24) var(--u96); }
.stave-text .anvil ol { list-style: none; margin: 0; padding: 0; counter-reset: stp; display: grid; gap: var(--u24); }
.stave-text .anvil li { counter-increment: stp; display: grid; grid-template-columns: var(--u48) 1fr; gap: var(--u16); margin: 0; }
.anvil li::before { content: counter(stp); font-size: var(--t-h2); font-weight: var(--w9); line-height: 1; color: var(--em); font-variant-numeric: tabular-nums; }
.anvil li > div { min-width: 0; }
.anvil li > div > strong { display: block; font-size: var(--t-h3); line-height: var(--ld-sub); margin-bottom: var(--u4); }
.anvil li p { color: var(--txt-2); }
.anvil li p strong { color: var(--txt); }
.anvil-foot {
	--ink: var(--em-deep);
	position: absolute; left: 0; right: 0; bottom: 0; height: var(--u48);
	background-image: conic-gradient(var(--ink) 25%, #0000 0), conic-gradient(var(--ink) 25%, #0000 0 50%, var(--ink) 0 75%, #0000 0), conic-gradient(var(--ink) 75%, #0000 0), linear-gradient(var(--ink) 0 0);
	background-size: var(--px8) var(--px8), var(--px8) var(--px8), var(--px8) var(--px8), 100% var(--px8);
	background-repeat: repeat-x;
	background-position: 4px 8px, 0 24px, 4px 32px, 0 40px;
}

/* ── danh sách bài: hàng kẻ, ảnh nhỏ trái, cả hàng bấm được ── */
.roll-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--u16); }
.roll-head a { font-weight: var(--w7); text-decoration: none; display: inline-flex; gap: var(--u8); align-items: center; }
.roll { list-style: none; margin: var(--u32) 0 0; padding: 0; border-top: 1px solid var(--line); }
.roll li { position: relative; display: grid; grid-template-columns: var(--thumb) 1fr; gap: var(--u16); padding: var(--u16) 0; border-bottom: 1px solid var(--line); align-items: center; }
.roll li > * { min-width: 0; }
.roll img, .roll-blank { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); background: var(--bg-2); }
.roll-blank { display: block; background-image: conic-gradient(var(--em-deep) 25%, #0000 0 50%, var(--em-deep) 0 75%, #0000 0); background-size: var(--px4) var(--px4); }
.roll h2, .roll h3 { font-size: var(--t-body); font-weight: var(--w7); letter-spacing: 0; line-height: var(--ld-sub); max-width: none; }
.roll h2 a, .roll h3 a { color: var(--txt); text-decoration: none; }
.roll h2 a::after, .roll h3 a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.roll li:hover h2 a, .roll li:hover h3 a { color: var(--em-hi); }
.roll time { display: block; margin-top: var(--u4); color: var(--txt-2); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.roll-cat { color: var(--em); font-size: var(--t-small); font-weight: var(--w7); }

/* ── hỏi đáp: hàng kẻ, dấu + xoay thành × khi mở, đóng hết lúc đầu ── */
.faqs { max-width: 880px; margin-top: var(--u32); border-top: 1px solid var(--line); }
.faqs details { border-bottom: 1px solid var(--line); }
.faqs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--u16); padding: var(--u20) 0; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary h3 { font-size: var(--t-lead); font-weight: var(--w7); letter-spacing: 0; line-height: var(--ld-sub); min-width: 0; }
.faqs summary .ico { margin-top: 2px; color: var(--em); transition: transform .15s; }
.faqs details[open] summary .ico { transform: rotate(45deg); }
.faqs-a { padding-bottom: var(--u24); color: var(--txt-2); max-width: 70ch; }
.faqs-a > * + * { margin-top: var(--u12); }
.faqs-a strong { color: var(--txt); }

/* ── chân trang ── */
.floor { background: var(--bg-2); margin-top: var(--u64); }
.has-fish .floor { padding-bottom: var(--fish-s); } /* catfish cố định đáy trang */
.floor-grid { display: grid; gap: var(--u32); padding-top: var(--u48); padding-bottom: var(--u32); }
.floor-grid > * { min-width: 0; }
.floor p { color: var(--txt-2); font-size: var(--t-small); }
.floor h2 { font-size: var(--t-body); font-weight: var(--w7); letter-spacing: 0; color: var(--txt-2); margin-bottom: var(--u12); }
.floor ul { list-style: none; margin: 0; padding: 0; }
.floor li + li { margin-top: var(--u8); }
.floor li a { color: var(--txt); text-decoration: none; }
.floor li a:hover { color: var(--em-hi); }
.floor-logo { display: inline-block; margin-bottom: var(--u16); }
.floor-line { border-top: 1px solid var(--line); padding-top: var(--u20); padding-bottom: var(--u20); color: var(--txt-2); font-size: var(--t-small); display: flex; flex-wrap: wrap; gap: var(--u8) var(--u24); justify-content: space-between; }

/* ── bài viết, trang, chuyên mục ── */
.breadline { font-size: var(--t-small); color: var(--txt-2); padding-top: var(--u24); }
.breadline ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--u4) var(--u8); }
.breadline li + li::before { content: "/"; margin-right: var(--u8); color: var(--line-2); }
.breadline a { color: var(--txt-2); }
.breadline a:hover { color: var(--em-hi); }
.column { max-width: var(--col); }
.pill { display: inline-flex; align-items: center; height: var(--pill-h); padding: 0 var(--u12); border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--em); font-size: var(--t-small); font-weight: var(--w7); text-decoration: none; margin: var(--u24) 0 var(--u16); }
.column h1 { font-size: var(--t-title); }
.page-h1 { margin-top: var(--u24); }
.byword { margin-top: var(--u16); display: flex; flex-wrap: wrap; gap: var(--u4) var(--u16); color: var(--txt-2); font-size: var(--t-small); }
.byword b { color: var(--txt); font-weight: var(--w7); }
.byword time { font-variant-numeric: tabular-nums; }
.poster { margin: var(--u32) 0 0; }
.poster img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); background: var(--bg-2); }
.text { font-size: var(--t-read); margin-top: var(--u32); overflow-wrap: break-word; }
.text > * + * { margin-top: var(--u20); }
.text h2 { font-size: var(--t-h2); margin-top: var(--u48); }
.text h3 { margin-top: var(--u32); }
.text ul, .text ol { padding-left: var(--u24); margin-bottom: 0; }
.text li + li { margin-top: var(--u8); }
.text li::marker { color: var(--em); font-weight: var(--w7); }
.text figure, .text .wp-caption { margin-left: 0; margin-right: 0; max-width: 100% !important; width: auto !important; }
.text img { border: 1px solid var(--line); }
.text blockquote { margin-left: 0; margin-right: 0; border: 1px solid var(--line); background: var(--bg-2); padding: var(--u20) var(--u24) var(--u20) var(--u32); position: relative; }
.text blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--px8); background-image: conic-gradient(var(--em) 75%, #0000 0); background-size: var(--px4) var(--px4); }
.text blockquote > * + * { margin-top: var(--u12); }
.text .faqs { margin-top: var(--u24); }
.signoff { margin-top: var(--u48); border: 1px solid var(--line); padding: var(--u24); }
.signoff b { display: block; font-size: var(--t-h3); }
.signoff span { color: var(--txt-2); font-size: var(--t-small); }
.signoff p { margin-top: var(--u12); color: var(--txt-2); }
.stave--more { margin-top: var(--u48); }
.intro { color: var(--txt-2); margin-top: var(--u16); max-width: 62ch; }
.pageset { display: flex; flex-wrap: wrap; gap: var(--u8); margin-top: var(--u32); }
.pageset .page-numbers { min-width: var(--tap); height: var(--tap); padding: 0 var(--u12); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--txt); text-decoration: none; font-variant-numeric: tabular-nums; font-weight: var(--w7); }
.pageset .current { border-color: var(--em); color: var(--em); box-shadow: inset 0 -2px 0 var(--em); }
.pageset a.page-numbers:hover { border-color: var(--em-lo); }
.lost-links { list-style: none; margin: var(--u24) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--u8); }
.lost-links a { display: inline-flex; align-items: center; height: var(--tap); padding: 0 var(--u16); border: 1px solid var(--line-2); border-radius: var(--pill); text-decoration: none; font-weight: var(--w7); }
.search-form { display: flex; gap: var(--u8); margin-top: var(--u24); }
.search-form label { flex: 1; }
.search-field { width: 100%; height: var(--tap); padding: 0 var(--u16); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--txt); font: inherit; }
.search-submit { height: var(--tap); padding: 0 var(--u20); border: 0; border-radius: var(--pill); background: var(--em); color: var(--bg); font: var(--w7) var(--t-btn)/1 var(--face); cursor: pointer; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── khổ lớn (đặt cuối file) ── */
@media (min-width: 481px) {
	.has-fish .floor { padding-bottom: var(--fish); }
}
@media (min-width: 768px) {
	.belt-slot { min-height: var(--belt-h); }
}
@media (min-width: 900px) {
	:root { --edge: 24px; --thumb: 136px; }
	.prow { padding-top: var(--u64); }
	.prow-grid--pic { grid-template-columns: 7fr 5fr; align-items: center; gap: var(--u48); }
	.stave { padding-top: var(--u96); padding-bottom: var(--u96); }
	.stave-grid--pic { grid-template-columns: 6fr 5fr; gap: var(--u48); align-items: start; }
	.roll { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--u48); }
	.floor-grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--u48); }
}
@media (min-width: 960px) {
	:root { --crest-h: 72px; }
	.fold-key, .fold { display: none !important; }
	.crest-nav { display: flex; gap: var(--u4); margin-left: var(--u24); }
	.crest-nav a { padding: var(--u8) var(--u16); border-radius: var(--pill); color: var(--txt-2); text-decoration: none; font-size: var(--t-btn); font-weight: var(--w7); }
	.crest-nav a:hover, .crest-nav a[aria-current] { color: var(--txt); background: var(--bg-2); }
	.crest-act { display: block; margin-left: auto; width: var(--crest-act-w); }
}