/* Font: IBM Plex Mono (OFL, tự host) — raw / typewriter, anh DB 11/11 */
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-vietnamese-500-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Ở đâu OK — phòng tranh đen / trắng. Chữ mono là giọng, ảnh là tác phẩm, khoảng trống là tường. */
:root {
  --bg: #fff;
  --fg: #0b0b0b;
  --mute: #6b6b6b;
  --faint: #b4b4b4;
  --line: #e6e6e6;
  --ph: #f0f0f0;      /* nền giữ chỗ ảnh */
  --panel: #f5f5f4;   /* tường phụ (Người làm) */
  --gut: 16px;
  --measure: 38.4rem; /* ~64 ký tự mono ở 16px */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --font: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #000; --fg: #f2f2f2; --mute: #8f8f8f; --faint: #4d4d4d; --line: #222; --ph: #111; --panel: #0d0d0d; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #000; --fg: #f2f2f2; --mute: #8f8f8f; --faint: #4d4d4d; --line: #222; --ph: #111; --panel: #0d0d0d; color-scheme: dark; }

@media (min-width: 600px) { :root { --gut: 28px; } }
@media (min-width: 1100px) { :root { --gut: 48px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
::selection { background: var(--fg); color: var(--bg); }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
.mute { color: var(--mute); }
.inline { display: inline; margin: 0; }
.skip { position: absolute; left: var(--gut); top: -100px; z-index: 20; background: var(--fg); color: var(--bg); padding: 10px 14px; font-size: 13px; }
.skip:focus { top: 10px; text-decoration: none; }
main:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { font-weight: 500; margin: 0; }
.price .off { opacity: .28; }

/* ảnh hiện dần trên nền xám giữ chỗ (width/height thật → không nhảy bố cục) */
html.js img.fade { opacity: 0; transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
html.js img.fade.in { opacity: 1; }

/* ---- nút: chữ, viền mảnh, chạm thì đảo màu */
button, .btn {
  font: inherit; font-size: 13px; letter-spacing: .02em; color: var(--fg); background: transparent;
  border: 1px solid var(--fg); border-radius: 0; padding: 10px 18px; cursor: pointer;
  display: inline-block; line-height: 1.3; transition: background-color .2s, color .2s;
}
button:hover, .btn:hover, button:focus-visible { background: var(--fg); color: var(--bg); text-decoration: none; }
button.solid { background: var(--fg); color: var(--bg); }
button.solid:hover { background: transparent; color: var(--fg); }
button.link { border: 0; padding: 0; font-size: inherit; letter-spacing: 0; color: inherit; background: none; }
button.link:hover { background: none; color: var(--fg); text-decoration: underline; text-underline-offset: .2em; }

/* ---- trường nhập: chỉ một gạch dưới */
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--fg); background: transparent;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 8px 0; width: 100%; outline: none;
  -webkit-appearance: none; appearance: none; transition: border-color .2s;
}
input:focus, select:focus, textarea:focus { border-bottom-color: var(--fg); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
textarea { resize: vertical; line-height: 1.6; }
select { background: transparent; }
input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; width: auto; accent-color: var(--fg); }
::placeholder { color: var(--faint); opacity: 1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- khung trang */
.top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 18px var(--gut) 0; font-size: 13px; position: relative; z-index: 5;
  view-transition-name: top;
}
.mark { font-weight: 500; }
.top nav { display: flex; gap: 20px; align-items: baseline; color: var(--mute); }
.top nav a:hover, .top nav button:hover { color: var(--fg); }
.who { max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top nav .who:hover { color: var(--fg); }

main { padding: 0 var(--gut); max-width: 760px; margin: 0 auto; min-height: 60vh; }
main.f-wide { max-width: none; }
main.f-bleed { max-width: none; padding: 0; }

.foot {
  padding: clamp(96px, 14vw, 200px) var(--gut) 28px; font-size: 12px; color: var(--mute);
}
.foot-row { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.foot-l, .foot-r { display: flex; gap: 6px 22px; flex-wrap: wrap; align-items: baseline; }
.langs a { color: var(--mute); }
.langs a[aria-current="true"] { color: var(--fg); }
.foot a:hover { color: var(--fg); }
.theme [data-t] { color: var(--mute); }
.theme [data-t].on { color: var(--fg); }
.theme:hover [data-t]:not(.on) { color: var(--fg); }

/* =========================================================== SẢNH */
.hall { padding: clamp(40px, 9vw, 120px) 0 0; }
.title {
  /* tên ngắn: vừa tầm mắt, không chiếm cả màn (Fold mở gần vuông → chặn theo cả chiều cao) */
  font-size: clamp(34px, min(8vw, 6vh), 72px);
  line-height: .96; letter-spacing: -.045em; font-weight: 500; margin: 0 0 0 -.04em;
}
.title a:hover { text-decoration: none; }

/* bộ lọc: một dòng chữ nhỏ dưới một nét kẻ */
.index {
  display: flex; align-items: baseline; gap: 6px 22px; flex-wrap: wrap;
  margin-top: clamp(28px, 5vw, 56px); padding-top: 12px; border-top: 1px solid var(--fg);
  font-size: 13px; position: relative; z-index: 4;
}
.index .count { color: var(--mute); margin-right: auto; font-variant-numeric: tabular-nums; }
.index .filters { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; order: 2; flex-basis: 100%; }
.index .cols-pick { order: 1; }
@media (max-width: 759.98px) { .index .filters .pick:nth-child(-n+2) ul { left: 0; right: auto; } }
@media (min-width: 760px) {
  .index .filters { flex-basis: auto; order: 1; }
  .index .cols-pick { order: 2; margin-left: 10px; }
}
.index details { position: relative; }
.index summary { cursor: pointer; list-style: none; color: var(--fg); white-space: nowrap; }
.index summary::-webkit-details-marker { display: none; }
.index summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.car::after { content: "↓"; display: inline-block; margin-left: .5ch; color: var(--mute); transition: transform .25s var(--ease); }
details[open] > summary .car::after { transform: rotate(180deg); }
.pick ul {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 13em; margin: 0; padding: 6px 0;
  list-style: none; background: var(--bg); border: 1px solid var(--fg); animation: drop .22s var(--ease);
}
.pick li a { display: block; padding: 7px 14px; color: var(--mute); white-space: nowrap; }
.pick li a:hover { color: var(--fg); text-decoration: none; background: var(--ph); }
.pick li a[aria-current] { color: var(--fg); }
.pick li a[aria-current]::before { content: "· "; }
.find form { position: absolute; right: 0; top: calc(100% + 6px); width: min(300px, calc(100vw - 2 * var(--gut))); background: var(--bg); animation: drop .22s var(--ease); }
.find[open] summary { color: var(--mute); }
.find input { font-size: 16px; padding: 8px 0; border-bottom-color: var(--fg); }
.find input::-webkit-search-cancel-button { -webkit-appearance: none; }
.index .q { white-space: nowrap; }
.index .q a { color: var(--mute); padding: 0 .3ch; }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }

/* ---- lưới ô vuông kiểu Instagram: 1 · 2 · 3 ô mỗi hàng (mặc định theo bề ngang, người xem đổi thì nhớ) */
.feed { --cols: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: clamp(6px, 1.3vw, 16px); row-gap: 22px; padding: clamp(28px, 5vw, 56px) 0 0; }
@media (min-width: 600px) { .feed { --cols: 2; } }
@media (min-width: 1024px) { .feed { --cols: 3; row-gap: 30px; } }
html[data-cols="1"] .feed { --cols: 1; }
html[data-cols="2"] .feed { --cols: 2; }
html[data-cols="3"] .feed { --cols: 3; }
html[data-cols="1"] .feed { row-gap: 34px; }
@media (min-width: 900px) { html[data-cols="1"] .feed { max-width: 640px; margin-inline: auto; } }
.tile { display: block; color: inherit; min-width: 0; container-type: inline-size; transition: opacity .5s var(--ease); }
.tile:hover { text-decoration: none; }
.sq { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--ph); }
.sq img, .sq .noimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* dấu nhiều ảnh: hai khung lệch nhau, góc trên phải */
.multi { position: absolute; top: 9px; right: 9px; width: 15px; height: 15px; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .55)); }
.multi::before, .multi::after { content: ""; position: absolute; width: 10px; height: 10px; box-sizing: border-box; }
.multi::before { right: 0; top: 0; border: 1.5px solid #fff; }
.multi::after { left: 0; bottom: 0; background: #fff; }
.cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1ch; padding-top: 9px; font-size: 12px; line-height: 1.45; }
.cap .t { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap .sc { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: baseline; }
.cap .sc .of { color: var(--mute); }
.cap .s { grid-column: 1 / -1; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 190px) {
  .cap { padding-top: 6px; }
  .cap .t { font-size: 11px; }
  .cap .sc { font-size: 11px; }
  .cap .sc .of, .cap .s { display: none; }
  .multi { top: 6px; right: 6px; transform: scale(.8); }
}
.tile:hover .t { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.tile:active .sq { opacity: .82; }
@media (hover: hover) and (pointer: fine) {
  .feed:has(.tile:hover) .tile:not(:hover) { opacity: .5; }
  .tile:hover .sq img.in { transform: scale(1.015); }
}
/* chọn số ô: chữ số, không icon — chỉ hiện khi có JS */
.cols-pick { display: none; gap: .6ch; align-items: baseline; color: var(--faint); }
html.js .cols-pick { display: inline-flex; }
.cols-pick button { color: var(--mute); font-variant-numeric: tabular-nums; padding: 0 .2ch; min-width: 1.6ch; }
.cols-pick button[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }

/* tường trống: một khung chì mảnh treo trên đinh + nhãn */
.works.is-empty { display: flex; justify-content: center; padding-top: clamp(48px, min(14vw, 9vh), 180px); }
/* khung chặn theo cả chiều cao: Fold mở gần vuông / laptop thấp vẫn thấy trọn khung + nhãn trong màn đầu */
.vacant { width: min(300px, 62vw, 28svh); display: grid; }
.vacant::before {
  content: ""; display: block; height: 56px; width: 56%; justify-self: center; background: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 56' preserveAspectRatio='none'%3E%3Ccircle cx='50' cy='3' r='2.4'/%3E%3Cpath d='M50 3 L0 56 M50 3 L100 56' stroke='black' stroke-width='.7' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 56' preserveAspectRatio='none'%3E%3Ccircle cx='50' cy='3' r='2.4'/%3E%3Cpath d='M50 3 L0 56 M50 3 L100 56' stroke='black' stroke-width='.7' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.vacant .ghost { display: block; aspect-ratio: 4 / 5; border: 1px solid var(--faint); background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px)); }
.vacant .label { display: grid; grid-template-columns: 3ch minmax(0, 1fr); column-gap: 1.2ch; padding-top: 14px; font-size: 12px; line-height: 1.5; margin: 0; }
.vacant .label .no { color: var(--mute); font-variant-numeric: tabular-nums; }
.vacant .label .s { grid-column: 2; color: var(--mute); }
.works.is-none { padding-top: clamp(28px, 5vw, 56px); }
.none { padding: 0; font-size: 15px; }
.none p { margin: 0 0 6px; }
.none a { color: var(--mute); text-decoration: underline; text-underline-offset: .2em; }

/* =========================================================== TRANG BÀI */
/* lưới chung: lề / rộng / nhãn / chữ — mọi phần của bài thẳng hàng với nhau */
.cols {
  display: grid;
  grid-template-columns: [full-start] var(--gut) [wide-start label-start text-start] minmax(0, 1fr) [text-end label-end wide-end] var(--gut) [full-end];
}
.cols > * { grid-column: text; }
@media (min-width: 760px) {
  .cols { grid-template-columns: [full-start] var(--gut) [wide-start] minmax(0, 1fr) [label-start text-start] minmax(0, var(--measure)) [text-end label-end] minmax(0, 1fr) [wide-end] var(--gut) [full-end]; }
}
@media (min-width: 1100px) {
  .cols { grid-template-columns: [full-start] var(--gut) [wide-start] minmax(0, 1fr) [label-start] 11rem [label-end] 3rem [text-start] minmax(0, var(--measure)) [text-end] 14rem minmax(0, 1fr) [wide-end] var(--gut) [full-end]; }
}

.ownerbar { font-size: 12px; color: var(--mute); margin: 10px var(--gut) 14px; }
.ownerbar strong { color: var(--fg); font-weight: 500; }

/* dải ảnh + nhãn */
.intro { margin-top: 14px; }
.carousel { position: relative; --ar: 1; }
.carousel.ar-8 { --ar: .8 } .carousel.ar-9 { --ar: .9 } .carousel.ar-10 { --ar: 1 } .carousel.ar-11 { --ar: 1.1 } .carousel.ar-12 { --ar: 1.2 }
.carousel.ar-13 { --ar: 1.3 } .carousel.ar-14 { --ar: 1.4 } .carousel.ar-15 { --ar: 1.5 }
.track {
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; aspect-ratio: var(--ar); background: var(--ph);
  -webkit-overflow-scrolling: touch;
}
.track::-webkit-scrollbar { display: none; }
.track:focus-visible { outline-offset: -3px; }
.slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; position: relative; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide:first-child img { view-transition-name: cover; }
.dots { display: flex; justify-content: center; gap: 5px; margin: 12px 0 0; height: 5px; }
.dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); transition: background-color .25s, transform .25s var(--ease); }
.dots span.on { background: var(--fg); transform: scale(1.15); }
.slide-cap { display: flex; gap: 1.6ch; font-size: 12px; color: var(--mute); margin: 8px var(--gut) 0; min-height: 1.5em; line-height: 1.5; }
.slide-cap .n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.slide-cap .n:empty { display: none; }
.nav {
  position: absolute; top: calc(50% - 40px); width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--fg); font-size: 16px; line-height: 40px; text-align: center;
  opacity: 0; transition: opacity .25s, background-color .2s, color .2s;
}
.nav.prev { left: 14px; } .nav.next { right: 14px; }
.nav[disabled] { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .carousel:hover .nav, .nav:focus-visible { opacity: 1; }
}
.placard { padding: 26px var(--gut) 0; }
.placard .no { font-size: 12px; color: var(--mute); margin: 0 0 10px; font-variant-numeric: tabular-nums; display: flex; gap: 1.4ch; align-items: baseline; }
.placard h1 {
  font-size: clamp(24px, min(6vw, 4.5vh), 48px); line-height: 1.12; letter-spacing: -.035em; font-weight: 500;
  text-wrap: balance; max-width: 16ch; overflow-wrap: anywhere;
}
.p-total { margin: 16px 0 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.p-total .tot { font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; letter-spacing: -.02em; }
.p-total .of { font-size: 13px; font-weight: 400; color: var(--mute); letter-spacing: 0; }
.p-total a:hover { text-decoration: none; }
.p-total a:hover .of { color: var(--fg); }
.tomb { margin-top: 22px; font-size: 13px; line-height: 1.6; display: grid; gap: 10px; }
.tomb p { margin: 0; }
.tomb .maker-l { font-weight: 500; }
.intro.noimg .placard { padding-top: clamp(40px, 10vw, 120px); }
.demo { display: inline-block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); padding: 1px 6px; line-height: 1.5; vertical-align: middle; }
/* màn rộng: dải ảnh bên trái (cao vừa màn), nhãn đặt cạnh chân ảnh */
@media (min-width: 900px) {
  .intro.has-car { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(28px, 4vw, 72px); padding-left: var(--gut); }
  .carousel { width: min(58vw, calc((100svh - 120px) * var(--ar))); }
  .slide-cap { margin-inline: 0; }
  .intro.has-car .placard { padding: 0 var(--gut) 34px 0; }
  .intro.has-car .placard h1 { font-size: clamp(26px, min(3.4vw, 5vh), 52px); }
}

/* chữ: ~64 ký tự một dòng */
.prose { font-size: 15px; line-height: 1.7; margin-top: clamp(48px, 8vw, 112px); }
.prose > * { margin: 0 0 1.15em; }
.prose h2 { font-size: 13px; letter-spacing: .02em; margin: 2.6rem 0 .9rem; line-height: 1.75rem; }
.prose h2::before { content: "— "; color: var(--mute); }
.prose h3 { font-size: 16px; margin: 2rem 0 .6rem; }
.prose ul, .prose ol { padding-left: 2ch; }
.prose ul { list-style: none; }
.prose ul > li::before { content: "–"; display: inline-block; width: 2ch; margin-left: -2ch; color: var(--mute); }
.prose li { margin: .15em 0; }
.prose blockquote { margin: 2em 0; font-size: 18px; line-height: 1.45; letter-spacing: -.015em; text-wrap: pretty; }
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--fg); width: 4ch; margin: 2.6em 0; }
.prose a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.prose strong { font-weight: 500; }
.prose em { font-style: normal; background: linear-gradient(transparent 62%, var(--ph) 62%); }
.prose figure { grid-column: full; margin: 2.4em 0; }
.prose figure img { width: auto; max-height: 92svh; margin: 0 auto; background: var(--ph); }
.prose figure img { width: 100%; }
figcaption { font-size: 12px; color: var(--mute); margin-top: 10px; line-height: 1.5; padding-inline: var(--gut); }
@media (min-width: 760px) {
  .prose figure { grid-column: wide; }
  .prose figure img { width: auto; }
  figcaption { padding-inline: 0; text-align: center; }
  .prose blockquote { grid-column: label-start / text-end; font-size: clamp(18px, 2vw, 26px); margin: 1.6em 0; }
}
@media (min-width: 1100px) {
  .prose h2 { grid-column: label; margin: 2.6rem 0 0; padding-right: 1ch; }
  .prose h2 + * { margin-top: 2.6rem; }
  .prose > :first-child { margin-top: 0; }
}
.prose > :first-child { margin-top: 0; }

/* người làm: tường phụ, tách hẳn khỏi bài — như chú thích tác giả cạnh tác phẩm */
.maker { background: var(--panel); margin-top: clamp(72px, 11vw, 160px); padding: clamp(56px, 9vw, 128px) 0; }
.maker h2 { font-size: 12px; font-weight: 400; color: var(--mute); letter-spacing: .04em; margin: 0 0 18px; line-height: 1.75rem; }
.maker .who-made { font-size: clamp(22px, min(4vw, 4vh), 40px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 clamp(24px, 4vw, 44px); text-wrap: balance; }
.maker .prose { grid-column: full; margin: 0; }
.maker .prose blockquote { font-size: clamp(18px, 2vw, 26px); }
@media (min-width: 1100px) {
  .maker h2 { grid-column: label; margin: 0; padding-top: .55em; }
}

.tags { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--mute); margin: clamp(56px, 8vw, 96px) 0 0; }
.tags a::before { content: "#"; }
.tags a:hover { color: var(--fg); }

/* ---- sổ cảm tưởng */
.guestbook { margin-top: clamp(88px, 12vw, 168px); }
.guestbook h2 { font-size: 13px; padding-top: 12px; border-top: 1px solid var(--fg); margin-bottom: 8px; }
.guestbook h2 .mute { font-weight: 400; margin-left: .6ch; font-variant-numeric: tabular-nums; }
@media (min-width: 1100px) {
  .guestbook h2 { grid-column: label; margin: 0; padding-right: 1ch; }
  .guestbook .gb { border-top: 1px solid var(--fg); padding-top: 4px; }
}
.guestbook ol { list-style: none; padding: 0; margin: 0; }
.guestbook .gb > ol > li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.guestbook li.reply { margin: 14px 0 0 2ch; padding-left: 2ch; border-left: 1px solid var(--line); }
.by { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin: 0 0 4px; }
.by .n { font-weight: 500; font-size: 13px; }
.by time { color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.guestbook .b, .mlist .b { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.guestbook .b a, .mlist .b a { text-decoration: underline; text-underline-offset: .2em; }
.acts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 12px; color: var(--mute); align-items: baseline; }
.acts details { display: contents; }
.acts summary { cursor: pointer; list-style: none; }
.acts summary::-webkit-details-marker { display: none; }
.acts summary:hover { color: var(--fg); text-decoration: underline; }
.acts details[open] > summary { color: var(--fg); }
.acts details[open] > form { flex-basis: 100%; order: 10; }
.cform { display: grid; gap: 10px; margin-top: 22px; justify-items: start; }
.cform textarea { font-size: 15px; border: 1px solid var(--line); padding: 12px 14px; }
.cform textarea:focus { border-color: var(--fg); }
.cform button { font-size: 12px; padding: 8px 16px; }
.gate { font-size: 13px; margin: 22px 0 0; }
.gate a { color: var(--fg); text-decoration: underline; text-underline-offset: .2em; }
.err { font-size: 14px; border-left: 2px solid var(--fg); padding-left: 12px; margin: 0 0 20px; }

/* ---- tác phẩm kế */
.next { margin-top: clamp(96px, 14vw, 200px); }
.next a {
  grid-column: wide; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gut); align-items: end;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.next a:hover { text-decoration: none; }
.next .k { grid-column: 1; font-size: 12px; color: var(--mute); }
.next .t { grid-column: 1; font-size: clamp(26px, min(6vw, 6vh), 64px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; margin-top: 10px; text-wrap: balance; }
.next .s { grid-column: 1; font-size: 12px; color: var(--mute); margin-top: 10px; }
.next .thumb { grid-column: 2; grid-row: 1 / span 3; width: clamp(88px, 20vw, 260px); background: var(--ph); overflow: hidden; align-self: start; margin-top: 14px; }
.next .thumb img { width: 100%; transition: transform 1.2s var(--ease), opacity .9s var(--ease); }
.next a:hover .t { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .next a:hover .thumb img.in { transform: scale(1.03); } }

/* =========================================================== TÀI KHOẢN / GIỚI THIỆU */
.auth { max-width: 380px; padding: clamp(56px, 12vw, 120px) 0 0; }
.auth h1 { font-size: clamp(28px, 6vw, 40px); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 32px; }
.auth form { display: grid; gap: 22px; justify-items: start; }
.auth label, .editor label { display: grid; gap: 2px; width: 100%; }
.auth label span, .editor label > span, .editor .k { font-size: 12px; color: var(--mute); }
.auth button { margin-top: 6px; min-width: 8em; }
.auth p { margin: 22px 0 0; font-size: 14px; }
.auth form p { margin: 0; }
.auth .alt a { color: var(--fg); text-decoration: underline; text-underline-offset: .2em; }
.about { padding: clamp(48px, 10vw, 140px) var(--gut) 0; }
.about .big { text-wrap: balance; }
.about .big { font-size: clamp(34px, min(8vw, 6vh), 72px); line-height: 1.04; letter-spacing: -.045em; margin: 0 0 0 -.04em; font-weight: 500; }
.about p { font-size: 15px; margin: 0; }
.about-body { margin-top: clamp(40px, 7vw, 96px); }
/* giới thiệu: một cột chữ thẳng lề trái với tiêu đề (không căn giữa như trang bài) */
.about-body.cols { display: block; padding-inline: var(--gut); max-width: calc(var(--measure, 40rem) + 2 * var(--gut)); }
.about-body.cols h2 { margin: 2.6rem 0 .9rem; padding: 0; }
.about-body h3 { font-size: 15px; margin: 1.8rem 0 .4rem; }
.about-body a { text-decoration: underline; text-underline-offset: .2em; }
/* danh sách tiêu chí: tên đậm, lời giải thích nhỏ, kẻ mảnh giữa các mục */
.crit { margin: 0 0 1.15em; border-top: 1px solid var(--line); }
.crit > div { padding: 12px 0 13px; border-bottom: 1px solid var(--line); }
.crit dt { font-size: 13px; font-weight: 500; }
.crit dd { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--mute); }
@media (min-width: 760px) { .crit > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 2ch; } .crit dd { margin: 0; } }
/* dòng ký tên dưới tiêu đề */
.tagline { margin: 12px 0 0; font-size: 13px; color: var(--mute); letter-spacing: .02em; }

/* =========================================================== VIẾT BÀI (owner) */
.editor { padding: clamp(32px, 6vw, 72px) 0 0; max-width: 1080px; }
.editor h1 { font-size: clamp(26px, 4.6vw, 44px); letter-spacing: -.03em; line-height: 1.1; margin-bottom: clamp(28px, 5vw, 56px); text-wrap: balance; }
.restore { font-size: 13px; border-left: 2px solid var(--fg); padding: 2px 0 2px 12px; margin: calc(-1 * clamp(14px, 3vw, 36px)) 0 clamp(24px, 4vw, 40px); }
.restore[hidden] { display: none; }
.restore button.link { text-decoration: underline; text-underline-offset: .2em; }
.editor h1 .state { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--mute); vertical-align: middle; margin-left: 1ch; border: 1px solid var(--line); padding: 2px 8px; }
.sec { border: 0; border-top: 1px solid var(--fg); margin: 0; padding: 14px 0 44px; min-width: 0; }
.sec legend { float: left; width: 100%; padding: 0; font-size: 13px; font-weight: 500; margin-bottom: 22px; }
.sec legend .no { color: var(--mute); font-weight: 400; margin-right: 1.2ch; font-variant-numeric: tabular-nums; }
.sec-b { clear: both; }
@media (min-width: 1000px) {
  .sec legend { width: 13rem; margin: 0; }
  .sec-b { clear: none; margin-left: 13rem; }
}
.editor .grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; }
@media (min-width: 720px) { .editor .grid { grid-template-columns: 1fr 1fr; } .editor .span2 { grid-column: span 2; } }
.editor .big input { font-size: clamp(20px, 3vw, 26px); letter-spacing: -.02em; }
.editor label.check { display: flex; gap: 10px; align-items: center; padding-top: 18px; }
.editor label.check span { font-size: 14px; color: var(--fg); }
.imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--gut); }
.slot { display: grid; gap: 10px; justify-items: start; align-content: start; }
.slot .pv { width: 100%; aspect-ratio: 4 / 3; background: var(--ph); overflow: hidden; }
.slot .pv img { width: 100%; height: 100%; object-fit: cover; }
.slot .row { display: flex; gap: 14px; align-items: center; }
.editor label.btn { display: inline-block; width: auto; }
.slot .btn, .gallery-ed .btn { font-size: 12px; padding: 6px 12px; }
.slot button.link { font-size: 12px; color: var(--mute); }
.bar { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 2; }
.bar .btn, .bar button { font-size: 12px; padding: 5px 10px; border-color: var(--line); }
.bar .btn:hover, .bar button:hover { border-color: var(--fg); }
.body-ed textarea { border: 1px solid var(--line); padding: 16px 18px; font-size: 16px; line-height: 1.75; min-height: 420px; }
.body-ed textarea:focus { border-color: var(--fg); }
.body-ed .preview { border: 1px solid var(--line); padding: 18px; margin: 0; display: block; }
.body-ed .preview[hidden] { display: none; }
.body-ed .preview > * { margin: 0 0 1em; }
.body-ed .preview figure img { max-height: 50vh; width: auto; }
.hint { font-size: 12px; margin: 10px 0 0; }
.gallery-ed { display: grid; gap: 14px; justify-items: start; }
.gl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; width: 100%; }
.gl:empty { display: none; }
.gl li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.gl img { width: 96px; height: 72px; object-fit: cover; grid-row: span 2; background: var(--ph); }
.gl .tools { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--mute); }
.status { min-height: 1.4em; font-size: 13px; margin: 0; }
.save {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 14px 0;
  border-top: 1px solid var(--fg); position: sticky; bottom: 0; background: var(--bg); z-index: 3;
}
.save .see { margin-left: auto; font-size: 13px; }
.danger { margin-top: 32px; font-size: 12px; color: var(--mute); }

/* ---- quản lý */
.manage { padding: clamp(32px, 6vw, 72px) 0 0; max-width: 1080px; }
.manage h1 { font-size: clamp(26px, 4.6vw, 44px); letter-spacing: -.03em; margin-bottom: 8px; }
.manage h2 { font-size: 13px; margin: 56px 0 4px; border-top: 1px solid var(--fg); padding-top: 12px; display: flex; justify-content: space-between; gap: 16px; }
.manage h2 .mute { font-weight: 400; margin-left: .6ch; }
.manage h2 a { font-weight: 400; }
.manage table { width: 100%; border-collapse: collapse; font-size: 14px; }
.manage td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.manage td.num { text-align: right; width: 3em; font-variant-numeric: tabular-nums; }
.manage td:last-child { padding-right: 0; }
.manage tr:hover td { background: var(--ph); }
@media (max-width: 600px) { .manage td.mute:not(.num) { display: none; } }
/* nhóm bài: Đang đăng · Nháp · Thùng rác — tab chữ */
.manage .tabs { display: flex; flex-wrap: wrap; gap: 4px 2.4ch; margin: 10px 0 6px; font-size: 13px; }
.manage .tabs a { color: var(--mute); padding: 6px 0; border-bottom: 1px solid transparent; }
.manage .tabs a:hover { color: var(--fg); }
.manage .tabs a[aria-current] { color: var(--fg); border-bottom-color: var(--fg); }
.manage .tabs .n { font-variant-numeric: tabular-nums; margin-left: .4ch; }
.manage td.act { text-align: right; white-space: nowrap; font-size: 13px; }
.manage td.act form + form { margin-left: 2ch; }
.manage td .left { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
.manage .trash-note { margin: 14px 0 0; }
.mlist { list-style: none; padding: 0; margin: 0; }
.mlist li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mlist .by { justify-content: flex-start; flex-wrap: wrap; }
.mlist form { font-size: 12px; color: var(--mute); }

/* ---- bảng điểm: nhãn bảo tàng — tên mục · điểm · thước mảnh · lý do */
.scores { margin-top: clamp(56px, 8vw, 104px); }
.scores h2 { font-size: 13px; padding-top: 12px; border-top: 1px solid var(--fg); margin-bottom: 8px; }
@media (min-width: 1100px) {
  .scores h2 { grid-column: label; margin: 0; padding-right: 1ch; }
  .scores .sc-b { border-top: 1px solid var(--fg); }
}
.sc-total { display: flex; align-items: baseline; gap: 1.6ch; margin: 14px 0 6px; font-size: 12px; }
.sc-total .big { font-size: clamp(34px, 5vw, 52px); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.sc-total .big .of { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--mute); }
.sc-list { margin: 0; }
.sc-list .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5ch; padding: 13px 0 14px; border-bottom: 1px solid var(--line); align-items: baseline; }
.sc-list dt { font-size: 13px; font-weight: 500; }
.sc-list dd { margin: 0; }
.sc-list .v { font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; min-width: 3ch; }
.sc-list .meter { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 7px 0 8px; position: relative; }
.sc-list .meter span { position: absolute; left: 0; top: -.5px; height: 2px; background: var(--fg); }
.meter .w-2{width:16.67%}.meter .w-3{width:25%}.meter .w-4{width:33.33%}.meter .w-5{width:41.67%}.meter .w-6{width:50%}.meter .w-7{width:58.33%}
.meter .w-8{width:66.67%}.meter .w-9{width:75%}.meter .w-10{width:83.33%}.meter .w-11{width:91.67%}.meter .w-12{width:100%}
.sc-list .why { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; color: var(--mute); text-wrap: pretty; }
.credit { margin-top: clamp(40px, 6vw, 72px); font-size: 11px; line-height: 1.6; color: var(--mute); }
.credit > * { margin: 0; }
.credit a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--faint); }
.credit a:hover { color: var(--fg); }

/* ---- ảnh đại diện */
.av { display: inline-block; flex: none; border-radius: 50%; object-fit: cover; background: var(--ph); vertical-align: middle; }
.av-s { width: 24px; height: 24px; }
.av-m { width: 40px; height: 40px; }
.av-l { width: 96px; height: 96px; }
.av.mono { display: inline-grid; place-items: center; border: 1px solid var(--fg); background: transparent; color: var(--fg); font-weight: 500; line-height: 1; }
.av-s.mono { font-size: 11px; } .av-m.mono { font-size: 16px; } .av-l.mono { font-size: 38px; letter-spacing: -.02em; }
.av.gone { border: 1px dashed var(--faint); background: transparent; }
.who-c { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.who-c:hover { text-decoration: none; }
.who-c:hover .n { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.guestbook .by { align-items: center; }
.guestbook .gb .b { padding-left: 33px; }
.guestbook .gb .acts { padding-left: 33px; }
.guestbook li.reply .b, .guestbook li.reply .acts { padding-left: 33px; }

/* ---- profile */
.profile { padding: clamp(48px, 10vw, 112px) 0 0; }
.pf-head { display: flex; gap: clamp(18px, 4vw, 32px); align-items: center; }
.pf-head h1 { font-size: clamp(28px, 6vw, 48px); letter-spacing: -.035em; line-height: 1.08; overflow-wrap: anywhere; }
.pf-head .handle { margin: 6px 0 0; font-size: 13px; }
.profile .bio { font-size: 16px; line-height: 1.6; margin: 28px 0 0; max-width: 38rem; }
.profile .facts { display: flex; flex-wrap: wrap; gap: 4px 2.4ch; font-size: 12px; margin: 18px 0 0; }
.profile .facts a { color: var(--fg); text-decoration: underline; text-underline-offset: .2em; }
.profile h2 { font-size: 13px; margin: clamp(48px, 8vw, 80px) 0 0; padding-top: 12px; border-top: 1px solid var(--fg); }
.pf-list .by { justify-content: space-between; }
.pf-list .by .n { font-weight: 500; }

/* ---- tài khoản */
.account { max-width: 880px; }
.account .state a { color: var(--mute); }
.av-ed { display: grid; gap: 14px; justify-items: start; }
.av-ed .row { display: flex; gap: 16px; align-items: center; font-size: 12px; }
.av-ed .btn { font-size: 12px; padding: 6px 12px; }
.account .grid > span { align-self: end; }
.danger-sec { border-top-color: var(--line); }
.okay { font-size: 14px; border-left: 2px solid var(--fg); padding-left: 12px; margin: 0 0 20px; color: var(--mute); }

/* ---- viết bài: điểm */
.sc-eds { display: grid; gap: 0; }
.sc-live { margin: 0 0 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.sc-live strong { font-size: 22px; font-weight: 500; margin-left: 1ch; }
.sc-ed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 28px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .sc-ed { grid-template-columns: 15rem minmax(0, 1fr); } }
.sc-ed .sc-n > span { font-size: 13px; color: var(--fg); font-weight: 500; }
.sc-ed select { font-variant-numeric: tabular-nums; }
.sc-ed textarea { font-size: 14px; line-height: 1.55; }
.sc-ed.need textarea { border-bottom-color: var(--fg); }
.sc-ed.need .sc-r > span::after { content: " · bắt buộc"; color: var(--fg); }
.gl .cover-on { color: var(--fg); text-decoration: underline; text-underline-offset: .2em; }
.gl li.is-cover img { outline: 2px solid var(--fg); outline-offset: 2px; }
.gallery-ed .slot { margin-top: 18px; width: min(220px, 100%); }

/* ---- quản lý: tiêu chí, demo */
.manage .back { font-size: 12px; margin: 0 0 14px; }
.manage .lead { font-size: 13px; line-height: 1.6; max-width: 40rem; margin: 10px 0 28px; }
.manage .lead strong { font-weight: 500; color: var(--fg); }
.crit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.crit-list li { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; gap: 4px 1.5ch; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.crit-list .no { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.crit-list .rename { display: flex; gap: 1.5ch; align-items: baseline; min-width: 0; }
.crit-list .rename input { font-size: 15px; padding: 4px 0; border-bottom-color: transparent; }
.crit-list .rename input:hover, .crit-list .rename input:focus { border-bottom-color: var(--fg); }
.crit-list .rename button { font-size: 12px; color: var(--mute); }
.crit-list .meta { font-size: 12px; white-space: nowrap; text-align: right; }
.crit-list .tools { grid-column: 2 / -1; display: flex; gap: 2.2ch; font-size: 12px; color: var(--mute); }
@media (min-width: 720px) {
  .crit-list li { grid-template-columns: 3ch minmax(0, 1fr) auto auto; }
  .crit-list .tools { grid-column: auto; }
}
.crit-list .dim { color: var(--line); }
.crit-list li.off .rename input { color: var(--mute); text-decoration: line-through; text-decoration-thickness: 1px; }
.sc-ed[hidden], .sc-none[hidden] { display: none; }
/* Tiêu chí: tick loại áp dụng */
.crit-list .kpick { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 0; font-size: 12px; }
.kpick label { display: inline-flex; cursor: pointer; }
.kpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kpick label span { border: 1px solid var(--line); color: var(--mute); padding: 3px 9px; }
.kpick input:checked + span { border-color: var(--fg); color: var(--fg); }
.kpick input:focus-visible + span { outline: 1px solid var(--fg); outline-offset: 2px; }
.kpick label.hid span { border-style: dashed; }
.kpick button { font-size: 12px; color: var(--mute); }
/* Loại hình: 2 ô tên VI / EN */
.crit-list .rename.two input { flex: 1 1 0; min-width: 0; }
.crit-list .rename.two input[lang=en] { color: var(--mute); }
/* giới thiệu: tiêu chí theo loại */
.crit.by-kind dd { color: var(--fg); }
.crit-add { display: flex; gap: 16px; align-items: end; margin-top: 28px; max-width: 520px; }
.crit-add label { display: grid; gap: 2px; flex: 1; font-size: 12px; }
.demo-clear { margin: 14px 0 0; }
.manage .small { font-size: 13px; }

/* =========================================================== CHUYỂN TRANG (View Transitions, cùng trang web) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .2s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
::view-transition-group(cover) { animation-duration: .6s; animation-timing-function: var(--ease); }
::view-transition-old(cover), ::view-transition-new(cover) { height: 100%; object-fit: cover; overflow: clip; animation-duration: .6s; }
::view-transition-group(top) { animation-duration: .3s; }
html.vt-theme::view-transition-old(root) { animation: none; }
html.vt-theme::view-transition-new(root) { animation: vt-fade .5s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes vt-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tile:hover .sq img.in, .next a:hover .thumb img.in { transform: none; }
  .track { scroll-behavior: auto; }
}
.kinds-ad .crit-add { flex-wrap: wrap; max-width: 680px; }
.kinds-ad .crit-add label { min-width: 11rem; }
.kpick label { position: relative; }
.kpick button[hidden] { display: none; }
/* Loại hình: 2 ô tên đủ rộng, số bài + công cụ xuống hàng dưới */
.kinds-ad .crit-list li { grid-template-columns: 3ch minmax(0, 1fr) auto; }
.kinds-ad .crit-list .rename { grid-column: 2 / -1; }
.kinds-ad .crit-list .tools { grid-column: 2; grid-row: 2; }
.kinds-ad .crit-list .meta { grid-column: 3; grid-row: 2; }

/* ---- màn chạm: nới vùng bấm của chữ nhỏ lên ≥ 24 px mà không đổi bố cục (đệm + lề âm) */
@media (pointer: coarse) {
  .top nav a, .top nav button.link, .mark, .foot a, .foot button.link, .index summary, .index .q a, .none a,
  .acts summary, .acts button.link, .gate a, .auth .alt a, .auth p a, .profile .facts a, .account .state a, .back a, .lead a,
  .manage h2 a, .manage td button.link, .manage td a, .crit-list button.link, .slot button.link, .gl .tools button, .hint a,
  .tags a, .p-total a, .pf-list .n, .save .see, .save button.link, .danger button.link {
    display: inline-block; padding-block: 6px; margin-block: -6px;
  }
  .cols-pick button, .langs a, .crit-list .tools button.link { padding: 6px 8px; margin: -6px -8px; }
  .top nav { gap: 18px; }
}

/* =========================================================== BẢN ĐỒ (OK-7 r2) — MapLibre, style tự viết (map.js), điều khiển kiểu phòng tranh */
.maplibregl-map.maplibregl-map { font-family: var(--font); background: var(--ph); }
.maplibregl-map .maplibregl-ctrl-group { border: 1px solid var(--fg); border-radius: 0; box-shadow: none; background: var(--bg); }
.maplibregl-map .maplibregl-ctrl-group button { width: 32px; height: 32px; background-color: var(--bg); border-radius: 0; padding: 0; }
.maplibregl-map .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.maplibregl-map .maplibregl-ctrl-group button:hover { background-color: var(--ph); }
:root[data-theme="dark"] .maplibregl-map .maplibregl-ctrl-icon { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .maplibregl-map .maplibregl-ctrl-icon { filter: invert(1); } }
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-attrib { font-size: 10px; background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--mute); padding: 1px 6px; }
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-attrib a { color: var(--mute); text-decoration: underline; text-underline-offset: .15em; }
.maplibregl-map .maplibregl-cooperative-gesture-screen { background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--fg); font-size: 13px; }
.atlas { padding: clamp(32px, 6vw, 72px) 0 0; }
.atlas h1 { font-size: clamp(28px, min(4.6vw, 5vh), 44px); letter-spacing: -.03em; line-height: 1.1; }
.m-index { margin-top: clamp(20px, 3vw, 32px); }
.m-kinds { display: inline-flex; flex-wrap: wrap; gap: 4px 2ch; }
.m-kinds button { color: var(--mute); }
.m-kinds button[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.m-wrap { position: relative; margin-top: 14px; isolation: isolate; }
.bigmap { height: clamp(320px, 68svh, 760px); background: var(--ph); }
.minimap { aspect-ratio: 16 / 10; max-height: 52svh; width: 100%; background: var(--ph); }
.m-empty {
  position: absolute; right: 10px; top: 10px; z-index: 4; margin: 0; pointer-events: none; /* góc trên phải: khỏi che nhãn Hoàng Sa / Trường Sa */
  display: grid; grid-template-columns: 3ch auto; column-gap: 1.2ch; font-size: 12px; white-space: nowrap; background: var(--bg); padding: 10px 14px; border: 1px solid var(--faint);
}
.m-empty .no { color: var(--mute); }
/* ghim: chấm tròn màu chữ, viền màu nền; đang chọn có vòng ngoài */
/* thẻ nhỏ khi bấm ghim */
.pin-card { position: absolute; left: 12px; bottom: 28px; z-index: 5; width: min(380px, calc(100% - 24px)); background: var(--bg); border: 1px solid var(--fg); animation: drop .22s var(--ease); }
.pin-card[hidden] { display: none; }
.pin-card a { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; padding: 10px 40px 10px 10px; color: inherit; }
.pin-card a:hover { text-decoration: none; }
.pin-card a:hover .t { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.pin-card img, .pin-card .noimg { width: 88px; height: 88px; object-fit: cover; background: var(--ph); display: block; }
.pin-card .tx { display: grid; align-content: start; gap: 3px; font-size: 12px; min-width: 0; }
.pin-card .t { font-size: 14px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.pin-card .s { color: var(--mute); }
.pin-card .sc { font-variant-numeric: tabular-nums; margin-top: 4px; font-size: 13px; }
.pin-card .sc .of, .m-list .of { color: var(--mute); }
.pin-card .x { position: absolute; top: 4px; right: 4px; border: 0; padding: 0; width: 32px; height: 32px; font-size: 18px; line-height: 32px; background: none; color: var(--mute); }
.pin-card .x:hover { color: var(--fg); background: none; }
/* danh sách dưới bản đồ: nhãn bảo tàng một dòng */
.m-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--fg); max-width: 760px; }
.m-list li[hidden] { display: none; }
.m-list a { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; column-gap: 1.5ch; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.m-list a:hover { text-decoration: none; }
.m-list a:hover .t { text-decoration: underline; text-underline-offset: .2em; }
.m-list .no { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.m-list .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-list .s { grid-column: 2; grid-row: 2; color: var(--mute); font-size: 12px; }
.m-list .sc { grid-column: 3; grid-row: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* trang bài: vị trí */
.where { margin-top: clamp(56px, 8vw, 104px); }
.where h2 { font-size: 13px; padding-top: 12px; border-top: 1px solid var(--fg); margin-bottom: 14px; }
@media (min-width: 1100px) {
  .where h2 { grid-column: label; margin: 0; padding-right: 1ch; }
  .where .w-b { border-top: 1px solid var(--fg); padding-top: 14px; }
}
.where .w-l { display: grid; gap: 4px; font-size: 13px; margin: 12px 0 0; }
.where .go { color: var(--mute); }
.where .go a { color: var(--fg); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
/* màn viết: chọn vị trí */
.loc-ed { display: grid; gap: 12px; }
.loc-find { display: flex; gap: 12px; align-items: end; max-width: 560px; }
.loc-find button { font-size: 12px; padding: 7px 14px; flex: none; }
.loc-res { list-style: none; margin: 0; padding: 0; max-width: 680px; border-top: 1px solid var(--line); }
.loc-res[hidden] { display: none; }
.loc-res li { border-bottom: 1px solid var(--line); }
.loc-res button.link { display: block; width: 100%; text-align: left; padding: 9px 0; font-size: 13px; line-height: 1.45; color: var(--fg); }
.minimap.edit { aspect-ratio: 4 / 3; max-height: 440px; max-width: 680px; cursor: crosshair; }
@media (pointer: coarse) {
  .where .go a, .m-kinds button, .loc-ed .hint button.link { display: inline-block; padding-block: 6px; margin-block: -6px; }
}