/* 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}

/* Just me, nothing special — 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; }
.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; }

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: 24px; margin: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.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 {
  /* chữ chạy đúng bề ngang tường: 16 ký tự mono ≈ 9.3em */
  font-size: min(calc((100vw - 2 * var(--gut)) / 9.3), 132px);
  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 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); } }

/* ---- tác phẩm: treo lệch hàng kiểu salon, nhịp 5 */
.works { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 72px; padding: clamp(48px, 9vw, 120px) 0 0; }
.work { display: block; color: inherit; transition: opacity .5s var(--ease); }
.work:hover { text-decoration: none; }
.frame { display: block; position: relative; overflow: hidden; background: var(--ph); }
.frame img { width: 100%; height: auto; }
.frame .noimg { display: block; aspect-ratio: 4 / 5; }
.work .label {
  display: grid; grid-template-columns: 3ch minmax(0, 1fr); column-gap: 1.2ch; padding-top: 12px; font-size: 12px; line-height: 1.5;
}
.label .no { color: var(--mute); grid-row: span 2; font-variant-numeric: tabular-nums; padding-top: 2px; }
.label .t { font-size: 15px; font-weight: 500; line-height: 1.35; }
.label .s { color: var(--mute); }
.work:hover .t { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.work:active .frame { opacity: .82; }

/* điện thoại: một cột, bề rộng xen kẽ, ảnh đầu mỗi nhịp tràn mép */
@media (max-width: 759.98px) {
  .work:nth-child(5n + 1) { margin-inline: calc(-1 * var(--gut)); }
  .work:nth-child(5n + 1) .label { padding-inline: var(--gut); }
  .work:nth-child(5n + 2) { width: 74%; justify-self: end; }
  .work:nth-child(5n + 3) { width: 88%; }
  .work:nth-child(5n + 4) { width: 66%; margin-left: 14%; }
  .work:nth-child(5n + 5) { width: 92%; justify-self: end; }
}
/* màn rộng: lưới 12 cột, mỗi ô đặt lệch — to / nhỏ / tụt xuống */
@media (min-width: 760px) {
  .works { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(72px, 9vw, 150px); align-items: start; }
  .work:nth-child(5n + 1) { grid-column: 1 / span 7; }
  .work.port:nth-child(5n + 1) { grid-column: 1 / span 6; }
  .work:nth-child(5n + 2) { grid-column: 9 / span 4; margin-top: clamp(80px, 16vw, 260px); }
  .work:nth-child(5n + 3) { grid-column: 2 / span 4; }
  .work:nth-child(5n + 4) { grid-column: 7 / span 6; margin-top: clamp(48px, 10vw, 180px); }
  .work.port:nth-child(5n + 4) { grid-column: 8 / span 4; }
  .work:nth-child(5n + 5) { grid-column: 4 / span 6; }
  .work.port:nth-child(5n + 5) { grid-column: 5 / span 4; }
}
@media (hover: hover) and (pointer: fine) {
  .works:has(.work:hover) .work:not(:hover) { opacity: .38; }
  .work:hover .frame img.in { transform: scale(1.012); }
}

/* 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(72px, 14vw, 180px); }
.vacant { width: min(300px, 62vw); 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; }
.none { padding: 10vh 0 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; }

/* ảnh bìa + nhãn */
.hero { margin: 0; background: var(--ph); }
.hero img { width: 100%; max-height: 82svh; object-fit: cover; view-transition-name: cover; }
.intro { margin-top: 14px; }
.placard { padding: 26px var(--gut) 0; }
.placard .no { font-size: 12px; color: var(--mute); margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.placard h1 {
  font-size: clamp(30px, 8.2vw, 76px); line-height: 1.08; letter-spacing: -.035em; font-weight: 500;
  text-wrap: balance; max-width: 16ch; overflow-wrap: anywhere;
}
.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); }

/* tranh đứng: tranh bên trái sát mép, nhãn đặt cạnh chân tranh */
@media (min-width: 840px) {
  .intro.port { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(28px, 4vw, 72px); }
  .intro.port .hero { background: none; }
  .intro.port .hero img { width: auto; max-width: 60vw; max-height: calc(100svh - 64px); object-fit: contain; background: var(--ph); }
  .intro.port .placard { padding: 0 var(--gut) 4px 0; }
  .intro.port .placard h1 { font-size: clamp(30px, 4.6vw, 68px); }
}
/* tranh ngang: tràn ngang, nhãn chia hai bên ở dưới */
@media (min-width: 840px) {
  .intro.land .hero img { max-height: 88svh; }
  .intro.land .placard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16em, 22em); column-gap: 48px; align-items: end; padding-top: 32px; }
  .intro.land .placard .no { grid-column: 1 / -1; }
  .intro.land .tomb { margin: 0; padding-bottom: 6px; }
}

/* chữ: ~64 ký tự một dòng */
.prose { font-size: 16px; line-height: 1.75; 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: 2.2em 0; font-size: 21px; 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, .plates .one { grid-column: full; margin: 2.4em 0; }
.prose figure img, .plates .one 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, .plates .one { 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(22px, 2.5vw, 32px); 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(28px, 5.2vw, 56px); 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(22px, 2.6vw, 32px); }
@media (min-width: 1100px) {
  .maker h2 { grid-column: label; margin: 0; padding-top: .55em; }
}

/* ảnh trong bài: ảnh lẻ tràn, ảnh đôi cao bằng nhau */
.plates { margin-top: clamp(72px, 11vw, 160px); row-gap: clamp(40px, 7vw, 112px); }
.plates .one { margin: 0; }
.plates .one figure { margin: 0; }
.plates .two { grid-column: full; display: flex; gap: 6px; align-items: flex-start; }
.plates .two figure { margin: 0; flex: 1 1 0; min-width: 0; }
.plates .two img { width: 100%; background: var(--ph); }
.plates .two figcaption { padding-inline: var(--gut) 0; }
.plates .two figure + figure figcaption { padding-inline: 0 var(--gut); }
@media (min-width: 760px) {
  .plates .two { grid-column: wide; gap: var(--gut); }
  .plates .two figcaption, .plates .two figure + figure figcaption { padding: 0; text-align: left; }
}
.plates .two .ar-5{flex-grow:5}.plates .two .ar-6{flex-grow:6}.plates .two .ar-7{flex-grow:7}.plates .two .ar-8{flex-grow:8}.plates .two .ar-9{flex-grow:9}.plates .two .ar-10{flex-grow:10}.plates .two .ar-11{flex-grow:11}.plates .two .ar-12{flex-grow:12}
.plates .two .ar-13{flex-grow:13}.plates .two .ar-14{flex-grow:14}.plates .two .ar-15{flex-grow:15}.plates .two .ar-16{flex-grow:16}.plates .two .ar-17{flex-grow:17}.plates .two .ar-18{flex-grow:18}.plates .two .ar-19{flex-grow:19}.plates .two .ar-20{flex-grow:20}

.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, 6vw, 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) 0 0; }
.about .big { font-size: min(calc((100vw - 2 * var(--gut)) / 6.4), 120px); line-height: 1.04; letter-spacing: -.045em; margin: 0 0 clamp(32px, 6vw, 64px) -.04em; font-weight: 500; }
.about p { font-size: 15px; margin: 0; }

/* =========================================================== 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; }
.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; } }
.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); }

/* =========================================================== 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; }
  .work:hover .frame img.in, .next a:hover .thumb img.in { transform: none; }
}