/* Studio Kōzō — bản thử KHÔNG KHÍ cho màn đầu (?look=a|b|c).
   Lớp chữ kiểu igloo: chữ đơn cách nhỏ đặt thẳng trên cảnh ở bốn góc, không khung, không tấm lót.
   Mỗi góc đặt lên một mảng nền YÊN (trời, sương) — tương phản đo bằng tools, phải ≥ 4,5:1.
   HỆ CHỮ (Mike 24/9: "cho kozo ngoại lệ nhưng phải làm đẹp"): một kiểu có chân cho tên studio và chữ
   Nhật (Shippori Mincho), một kiểu đơn cách cho mọi chữ bảng điều khiển (IBM Plex Mono — cùng họ
   igloo dùng). Cả hai miễn phí trên Google Fonts. ĐÚNG BA CỠ: 28 (tên) · 16 (manifesto) · 13 (nhãn).
   MỘT LƯỚI LỀ cho cả bốn góc: --mx ngang, --my dọc. */

:root {
  --mx: clamp(25px, 6.1vw, 125px);     /* 1440 px → 88 · 1920 → 117 · điện thoại → 25 */
  --my: clamp(25px, 7.1vh, 90px);      /* 900 px → 64 */
  --pad: var(--mx);
  --mincho: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-l: 28px; --t-m: 16px; --t-s: 13px;
}
/* A · 霧の杉 — mực ấm trên sương xám (không đen tuyệt đối); nhãn phụ xám trung */
html[data-look="a"] { --bg: #d6d6d1; --ink: #25221f; --ink-2: #403c38; --stone: #9fa09c; --stone-on: #7f817c; --plex: #25221f; }
/* B · 藍 — chữ trắng ngà trên trời chàm */
html[data-look="b"] { --bg: #1d2754; --ink: #eef0f7; --ink-2: #d9ddeb; --stone: #3c4a80; --plex: #f4f2ee; }
/* C · 和紙 — mực nâu trên giấy ngà */
html[data-look="c"] { --bg: #efe8da; --ink: #25221d; --ink-2: #353129; --stone: #c7bfae; --plex: #25221d; }

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}
/* phần 7 (29/9): KHÔNG cuộn thật — đi từng chương (page/buoc.js): không thanh cuộn, không kéo nảy trên điện thoại */
html { scrollbar-width: none; overscroll-behavior: none; }
html::-webkit-scrollbar { display: none; }
html, body { overflow: hidden; }

canvas#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
svg#plex { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; }
html[data-look="b"] svg#plex { mix-blend-mode: screen; }
svg#plex .plex-line { stroke: var(--plex); stroke-width: 1; opacity: 0; }
svg#plex circle { fill: var(--plex); opacity: 0.92; }
svg#plex .plex-num { fill: var(--plex); font-size: 11.5px; letter-spacing: 0.08em; opacity: 0.92; font-family: var(--mono); }
svg#plex g { opacity: 0; }
svg#plex .dim-line, svg#plex .dim-tick { stroke: var(--plex); stroke-width: 0.9; }
svg#plex .dim-num { fill: var(--plex); font-size: 10.5px; letter-spacing: 0.08em; font-family: var(--mono); }

/* ── màn chờ ───────────────────────────────────────────────────────────────── */
.load {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 620ms ease, visibility 0s linear 620ms;
}
.load.done { opacity: 0; visibility: hidden; }
.load-in { width: min(600px, 84vw); }   /* Sếp 25/9: hàng đá nhỏ và nhạt quá — to hơn, rõ hơn, vẫn dịu */
.load-brand { margin: 0 0 22px; font-family: var(--mincho); font-size: 19px; letter-spacing: 0.08em; color: var(--ink); }
.load-wall { display: block; width: 100%; height: auto; }
.load-wall .st { fill: var(--stone); opacity: 0.13; }   /* tảng chưa xếp: bóng mờ — thấy trước hình bức tường sẽ dựng */
.load-wall .st.on { fill: var(--stone-on, var(--stone)); opacity: 1; transition: opacity 240ms ease, fill 240ms ease; }
/* tảng kế tiếp đang được đặt: thở mờ nhẹ (chỉ độ đục — chạy ở luồng vẽ riêng, luồng chính bận dịch mã vẫn không đứng hình) */
.load-wall-w { position: relative; }
.load-dat { position: absolute; background: var(--stone-on, var(--stone)); opacity: 0.13; pointer-events: none; will-change: opacity;
  clip-path: polygon(10% 0, 90% 0, 100% 7%, 100% 93%, 90% 100%, 10% 100%, 0 93%, 0 7%); animation: load-dat 1.5s ease-in-out infinite; }
@keyframes load-dat { 0%, 100% { opacity: 0.13; } 50% { opacity: 0.5; } }
.load.cho .load-dat { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .load-dat { animation: none; opacity: 0.3; } }
.load-read {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 16px 0 0; font-size: 13px; letter-spacing: 0.1em; color: var(--ink-2);
}
.load-num { color: var(--ink); font-size: 14px; }
.load-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* ── MÀN CHỌN TIẾNG (Mike 29/9 lần 3: "load xong mới hỏi"): màn tải (.load-tai) hiện trước; tải xong (.cho) thì màn tải tan,
   màn chọn (.load-chon) hiện. Hai màn chồng cùng một ô lưới, cùng căn giữa màn hình. ──────────────────────────────────── */
.load-in { display: grid; }
.load-chon, .load-tai { grid-area: 1 / 1; align-self: center; }
.load-tai { transition: opacity 300ms ease, visibility 0s linear 0s; }
.load.cho .load-tai { opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
.load-chon { display: grid; justify-items: center; text-align: center; opacity: 0; visibility: hidden; transition: opacity 420ms ease 240ms, visibility 0s linear 660ms; }
.load.cho .load-chon { opacity: 1; visibility: visible; transition: opacity 420ms ease 240ms, visibility 0s linear 0s; }
.chon-ten { margin: 0 0 42px; font-family: var(--mincho); font-weight: 500; font-size: var(--t-l); line-height: 1.2; letter-spacing: 0.06em; color: var(--ink); }
.chon-ten [lang] { margin: 0 0.1em; }
.chon-nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
/* NÚT: một ô rõ ràng — viền mực 1 px, vát hai góc chéo (trên phải + dưới trái, như nút của hubtown và khung vát của chương).
   Viền vát vẽ bằng hai lớp cắt góc chồng nhau (lớp viền, lớp lòng lùi vào 1 px) vì viền CSS thường không đi theo góc vát.
   Rê chuột: lớp màu nhạt (.pick-nen) hiện dần — CHỈ đổi độ đục, nên vẫn mượt cả khi trang đang bận tải ngầm. */
.pick {
  --c: 13px; --ci: 12.6px;
  position: relative; isolation: isolate; box-sizing: border-box;
  min-width: 276px; min-height: 58px; margin: 0; padding: 0 30px; border: 0; border-radius: 0; background: none; cursor: pointer;
  appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--mono); font-size: var(--t-m); font-weight: 500; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); transition: opacity 240ms ease;
}
.pick::before, .pick::after, .pick-nen { content: ""; position: absolute; pointer-events: none; }
.pick::before { inset: 0; z-index: -2; background: var(--pk-vien);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.pick::after, .pick-nen { inset: 1px;
  clip-path: polygon(0 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% 100%, var(--ci) 100%, 0 calc(100% - var(--ci))); }
.pick::after { z-index: -2; background: var(--pk-long); }
.pick-nen { z-index: -1; background: var(--pk-nen); opacity: 0; transition: opacity 260ms ease; will-change: opacity; }
.pick:hover .pick-nen, .pick[aria-pressed="true"] .pick-nen { opacity: 1; }
/* "with sound" nổi hơn: viền 緑青, lòng ánh 緑青 rất nhạt, loa 緑青; rê chuột → 緑青 nhạt */
.pick-on { --pk-vien: var(--r600, var(--ink)); --pk-long: color-mix(in srgb, var(--r100) 42%, var(--bg)); --pk-nen: color-mix(in srgb, var(--r200) 72%, var(--bg)); }
/* "in silence": viền mực, lòng trong; rê chuột → mực nhạt */
.pick-off { --pk-vien: color-mix(in srgb, var(--ink) 62%, transparent); --pk-long: var(--bg); --pk-nen: color-mix(in srgb, var(--ink) 9%, var(--bg)); color: var(--ink-2); }
.pick-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pick-on .pick-i { stroke: var(--r600, currentColor); }
.pick:focus-visible { outline: 2px solid var(--r700, var(--ink)); outline-offset: 5px; }
/* lựa chọn lần trước trong cùng phiên: gạch chân mảnh dưới chữ */
.pick.cu .pick-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.load.da-chon .pick[aria-pressed="false"] { opacity: 0.45; }
.pick-note { margin: 22px 0 0; font-size: var(--t-s); letter-spacing: 0.08em; color: var(--ink-2); }
@media (max-width: 760px) {
  .chon-nut { flex-direction: column; width: min(84vw, 360px); gap: 12px; }
  .pick { min-width: 0; width: 100%; min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .pick, .pick-nen, .load-chon, .load-tai, .load.cho .load-chon, .load.cho .load-tai { transition: none; } }

/* ── lớp chữ màn đầu: bốn góc, một lưới lề ─────────────────────────────────── */
main { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.s1 { position: absolute; inset: 0; }
.s1 p, .s1 h1 { margin: 0; }
.dc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dc-c { white-space: pre-wrap; }
html:not(.ui) .s1 [data-decode] { opacity: 0; }
/* dấu 構 trước tên: hiện SAU chữ (màn mở: giây 5,25, 0,5 s) */
html:not(.ui) .seal { opacity: 0; }

/* lớp màu SƯƠNG PHẲNG giữa màn chờ và cảnh (màn mở, giây 0–1): cảnh hiện ra qua lớp này, không có khung nhảy cứng */
.mist { position: fixed; inset: 0; z-index: 79; background: #c1c2bc; pointer-events: none; }

.c-tl { position: absolute; left: calc(var(--mx) + env(safe-area-inset-left)); top: var(--my); }
.c-tr { position: absolute; right: calc(var(--mx) + env(safe-area-inset-right)); top: var(--my); width: 23ch; text-align: right; }
.c-bl { position: absolute; left: calc(var(--mx) + env(safe-area-inset-left)); bottom: calc(var(--my) + env(safe-area-inset-bottom)); }
.c-br { position: absolute; right: calc(var(--mx) + env(safe-area-inset-right)); bottom: calc(var(--my) + env(safe-area-inset-bottom)); }

/* 28 · tên studio (có chân) */
.logo { font-family: var(--mincho); font-weight: 500; font-size: var(--t-l); line-height: 1; letter-spacing: 0.04em; color: var(--ink); }
/* 13 · mọi nhãn: đơn cách, chữ hoa giãn — chữ Nhật đi cùng họ có chân, cùng cỡ */
.sub, .lbl, .hint, .sound {
  font-family: var(--mono); font-size: var(--t-s); line-height: 1.5; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-2);
}
.sub { margin-top: 14px !important; display: flex; align-items: baseline; gap: 0.8em; }
.ja { font-family: var(--mincho); font-weight: 500; letter-spacing: 0.12em; text-transform: none; }
.lbl { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 12px !important; }
.lbl::before { content: ""; width: 24px; height: 1px; background: var(--ink-2); }
/* 16 · manifesto */
.mani { font-family: var(--mono); font-size: var(--t-m); line-height: 1.6; letter-spacing: 0.01em; color: var(--ink); text-wrap: balance; }
.hint { color: var(--ink); text-transform: none; letter-spacing: 0.08em; }
.sound { margin-top: 10px !important; text-transform: none; letter-spacing: 0.08em; }
.sound .off { color: var(--ink); }
/* "Sound: On/Off" là nút bật tắt thật (giữ nguyên dáng chữ cũ); lớp chữ không nhận chuột nên page.js mở chuột cho nút khi chữ hiện */
.sound-btn { appearance: none; -webkit-appearance: none; background: none; border: 0; border-radius: 0; margin: 0; padding: 2px 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; pointer-events: none; }
.sound-btn:hover [data-tt] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sound-btn:focus-visible { outline: 2px solid var(--r700, var(--ink)); outline-offset: 4px; border-radius: 1px; }
.ch-sound .sound-btn:focus-visible { outline-color: var(--r300); }
.c-br { writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 500; font-size: var(--t-m); letter-spacing: 0.4em; color: var(--ink); line-height: 1; }

/* (vòng kiểm cuối 30/9) bố cục ĐIỆN THOẠI áp cho cả MỌI MÀN DỌC (máy tính bảng dọc 768×1024…): lớp cảnh chọn khung hình theo khổ dọc
   (app.js / viec.js / lienhe.js: portrait = cao > rộng), lớp chữ phải đi cùng — trước đây 768 dọc có cảnh khổ dọc mà chữ khổ ngang
   (cột chương không có màn mờ sau lưng, nhãn nhà 仕事 đè cột chương). Màn tải / màn chọn tiếng giữ nguyên. */
@media (max-width: 760px), (orientation: portrait) {
  .c-tr { top: auto; bottom: calc(var(--my) + 72px); left: calc(var(--mx) + env(safe-area-inset-left)); right: auto; text-align: left; width: 24ch; }
  .lbl { justify-content: flex-start; }
  .c-br { display: none; }
}


/* ── MÀU NHẤN = 緑青 rokushō, MÀU CỦA PHÉP ĐO ──────────────────────────────────
   Một DẢI 10 nấc (page/accent.js). Chỗ nền cố định dùng nấc cố định; chỗ nền đổi theo cảnh
   (chấm – nét – số khi rê chuột, đường dẫn và số của nhãn đo) do scene/tone.js đo điểm ảnh sau nó
   rồi chọn nấc: chữ ≥ 4,5:1, nét ≥ 3:1. Quầng mảnh ngược tông chỉ để đẹp, không tính điểm. */
:root {
  --r50: #EDF9F4; --r100: #D7EEE5; --r200: #B2DDCD; --r300: #8BC8B3; --r400: #62B198;
  --r500: #3E9A80; --r600: #2C7B66; --r700: #236050; --r800: #1D483C; --r900: #19342C;
}
html[data-accent] { --accent: var(--r500); --accent-ink: var(--r700); }

html[data-accent] svg#plex { mix-blend-mode: normal; }
svg#plex line, svg#plex .tone-halo { fill: none; stroke-linecap: round; }
svg#plex .tone-halo { transition: opacity 120ms linear; }
svg#plex stop { transition: stop-color 300ms ease; }
svg#plex circle { transition: fill 300ms ease, stroke 300ms ease; }
html[data-accent] svg#plex .plex-num {
  fill: var(--r100); font-size: 13px; letter-spacing: 0.06em;
  paint-order: stroke; stroke: var(--r900); stroke-width: 3px; stroke-opacity: 0.34; stroke-linejoin: round;
  transition: fill 300ms ease, stroke 300ms ease;
}
html[data-accent] svg#plex g > circle:not(.plex-halo) { fill: var(--r100); }
svg#plex .plex-halo { fill: var(--r100); opacity: 0.22; }
svg#plex .tag-dot { fill: var(--r100); }
svg#plex .tag-ring { fill: none; stroke: var(--r100); stroke-width: 1.1; }

.logo-link { color: inherit; text-decoration: none; pointer-events: auto; display: inline-flex; align-items: center; }
.seal { display: none; }
html[data-accent] .seal { display: inline-block; width: var(--t-l); height: var(--t-l); margin-right: 14px; flex: none; }
.seal svg { display: block; width: 100%; height: 100%; }

/* vạch trước "Scroll down": nền sương sáng → nấc 600 (nét, 4,1:1 trên sương đo được) */
html[data-accent] .hint::before {
  content: ""; display: inline-block; width: 16px; height: 2px; margin-right: 11px;
  background: var(--r600); vertical-align: 0.3em;
}

a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 1px; }
html[data-accent] a:focus-visible { outline-color: var(--r700); }

.lnk { color: var(--ink); text-decoration: underline; text-decoration-color: var(--r600, var(--ink));
  text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lnk:hover, .lnk.is-hover { color: var(--r700, var(--ink)); text-decoration-thickness: 2px; }

.tag { position: absolute; left: 0; top: 0; margin: 0; font-family: var(--mono); font-size: var(--t-s); line-height: 1.6; letter-spacing: 0.1em; white-space: nowrap; }
.tag p { margin: 0; }
.tag-k { color: var(--ink); }
.tag-k span[lang] { font-family: var(--mincho); letter-spacing: 0.08em; }
.tag-v { color: var(--r700); transition: color 300ms ease; }
.tag-k, #tag-batter { text-transform: uppercase; }

/* đồng hồ khung hình (&fps=1): ô nhỏ góc dưới, chữ đơn cách cùng hệ chữ — chỉ để Mike tự xem số thật */
.fps-meter { position: fixed; z-index: 90; right: calc(var(--mx) + 44px); bottom: calc(var(--my) + env(safe-area-inset-bottom)); pointer-events: none;
  font-family: var(--mono); font-size: var(--t-s); letter-spacing: 0.04em; color: var(--ink); line-height: 1.5; text-align: right; }
.fps-meter p { margin: 0; }
.fps-meter canvas { display: block; width: 168px; height: 40px; margin: 4px 0 0 auto; }


/* ── PHẦN 3: lớp giao diện chương (kiểu hubtown, hệ chữ Kōzō) ────────────────────────────────────────────────
   Chữ trắng ngà ánh gỉ đồng trên đêm; cùng ba cỡ của trang (28 · 16 · 13), một kiểu có chân + một kiểu đơn cách.
   Lớp tối sau vùng chữ nằm TRONG ảnh cảnh (post/chuyen.js, KhungEffect) — không tấm lót. */
:root { --n-ink: #e6efeb; --n-ink2: #bccac5; --n-dim: rgba(230, 239, 235, 0.64); --n-mark: var(--r400); --n-line: rgba(215, 238, 229, 0.12); --joe: cubic-bezier(0.2, 0, 0.1, 1); }
svg#khung { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2; opacity: 0; }
svg#khung path { fill: none; stroke: var(--n-line); stroke-width: 2; }
.ch-logo, .chap, .ch, .ch-sound { opacity: 0; }
/* (soát p11a A2/B3) giao diện đi theo nhịp mờ chuyển (độ đục đổi từng khung trong 0,7–1,15 s): mỗi lớp là một lớp ghép riêng — đổi độ
   đục chỉ ghép lại, không tô lại cả khung SVG / chữ mỗi khung (điện thoại ×3 điểm ảnh) */
svg#khung, .ch-logo, .chap, .ch-sound, .s1 .c-tl, .s1 .c-tr, .s1 .c-bl, .s1 .c-br { will-change: opacity; }
.ch-logo {
  position: absolute; left: calc(40px + 36px); top: calc(40px + 26px); display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mincho); font-weight: 500; font-size: var(--t-m); letter-spacing: 0.08em; color: var(--n-ink);
  text-decoration: none; pointer-events: none;
}
.ch-seal { width: 18px; height: 18px; flex: none; }
.ch-seal svg { display: block; width: 100%; height: 100%; }
.ch-logo:focus-visible { outline: 2px solid var(--r300); outline-offset: 5px; }
.chap { position: absolute; left: calc(40px + 36px); top: 50%; transform: translateY(-50%); }
.chap ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 17px; }
.chap li {
  position: relative; display: flex; align-items: baseline; gap: 12px;
  font-family: var(--mono); font-size: var(--t-s); line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: var(--n-dim);
  transform: translateX(calc(var(--in, 1) * 10px - 10px));
}
/* tên chương là liên kết (phần 7): bấm được / Tab tới được khi cột chương đã hiện (.mo) */
.chap a { display: flex; align-items: baseline; gap: 12px; color: inherit; text-decoration: none; pointer-events: none; }
.chap.mo a { pointer-events: auto; }
.chap.mo a:hover { color: var(--n-ink); }
.chap a:focus-visible { outline: 2px solid var(--r300); outline-offset: 5px; }
/* 仕事 / 連絡 chưa mở (soát p7a): mờ hơn, không con trỏ bàn tay, không nhận bấm */
.chap li.chua { opacity: 0.42; cursor: default; pointer-events: none; }
.chap li [lang="ja"] { font-family: var(--mincho); font-weight: 500; letter-spacing: 0.08em; text-transform: none; min-width: 2.3em; }
.chap li.on { color: var(--n-ink); }
.chap li.on [lang="ja"] { color: var(--n-mark); }
/* ô 緑青 của chương đang đứng: nở ra 0,2 s (không nháy) */
.chap li::before { content: ""; position: absolute; left: -20px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: var(--n-mark); transform: scale(0); transition: transform 0.2s var(--joe); }
.chap li.on::before { transform: scale(var(--mk, 0)); }
.ch { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); width: min(680px, 84vw); text-align: center; transition: opacity 0.8s var(--joe); }
.ch-head { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: var(--t-l); line-height: 1.25; letter-spacing: 0.03em; color: var(--n-ink); }
.ch-body { margin: 16px auto 0; max-width: 60ch; font-family: var(--mono); font-size: var(--t-m); line-height: 1.6; color: var(--n-ink2); text-wrap: balance; }
.ch-sound { position: absolute; right: calc(40px + 36px); bottom: calc(40px + 26px); margin: 0; font-size: var(--t-s); letter-spacing: 0.08em; color: rgba(230, 239, 235, 0.74); }
@media (max-width: 760px), (orientation: portrait) {
  .chap, .ch-sound { display: none; }
  .ch-logo { left: 25px; top: 26px; }
  .ch { bottom: 56px; width: calc(100vw - 50px); }
}

/* ── PHẦN 8: chương 仕事 — bản đồ năm công trình (scene/viec.js dựng lớp này). Nhãn năm nhà (tên có chân 16 + năm đơn cách 13),
   THẺ HÌNH VẼ KHÔNG KHUNG, KHÔNG NỀN (nét hình vẽ là nét cọ trong cảnh; lớp tối rất mềm sau thẻ nằm trong ảnh cảnh — KhungEffect
   uCard), số đo là chữ thật, đường dẫn mảnh về đúng nhà. Chỉ hiện khi đang đứng hẳn trong chương (.mo). ── */
.viec-ui { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--joe), visibility 0s 0.5s; }
.viec-ui.mo { opacity: 1; visibility: visible; transition: opacity 0.6s var(--joe); }
.viec-noi { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.viec-noi line { stroke: rgba(178, 221, 205, 0.5); stroke-width: 1; }
.viec-noi .vong, .viec-noi .cham, .viec-noi .dan { opacity: 0; transition: opacity 0.3s var(--joe); }
.viec-noi .vong { fill: none; stroke: #8BC8B3; stroke-width: 1.2; }
.viec-noi .cham { fill: #8BC8B3; }
.viec-noi .dan { fill: none; stroke: rgba(139, 200, 179, 0.7); stroke-width: 1; }
.viec-noi.mo .vong, .viec-noi.mo .cham, .viec-noi.mo .dan { opacity: 1; }
.viec-nhan { position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; text-align: center;
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.7s var(--joe); will-change: transform; }
.viec-ui.mo .viec-nhan.hien { opacity: 1; pointer-events: auto; }
.viec-nhan b { display: block; font-family: var(--mincho); font-weight: 500; font-size: var(--t-m); letter-spacing: 0.03em; color: var(--n-ink); line-height: 1.3; transition: color 0.3s; }
.viec-nhan i { display: block; font-style: normal; font-family: var(--mono); font-size: var(--t-s); letter-spacing: 0.08em; color: rgba(214, 226, 222, 0.82); margin-top: 1px; }
.viec-nhan[data-phia="l"], .viec-nhan[data-phia="tl"] { text-align: right; }
.viec-nhan[data-phia="r"], .viec-nhan[data-phia="tr"] { text-align: left; }
.viec-nhan:hover b { color: #D7EEE5; }
.viec-nhan.on b { color: #B2DDCD; }
.viec-nhan.on i { color: #8BC8B3; }
.viec-nhan:focus-visible { outline: 2px solid var(--r300); outline-offset: 4px; }
.viec-the { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s var(--joe), visibility 0s 0.12s; }
.viec-the.mo { opacity: 1; visibility: visible; transition: opacity 0.3s var(--joe); }
.viec-the .so { font-family: var(--mono); font-size: var(--t-s); letter-spacing: 0.2em; color: #8BC8B3; }
.viec-the h3 { margin: 6px 0 0; font-family: var(--mincho); font-weight: 500; font-size: var(--t-l); line-height: 1.2; letter-spacing: 0.02em; color: var(--n-ink); }
.viec-the .meta { margin: 6px 0 0; font-family: var(--mono); font-size: var(--t-s); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(214, 226, 222, 0.78); }
.viec-the .ve { display: block; width: 100%; margin: 18px 0 16px; }
.viec-the .dong { margin: 0; font-family: var(--mono); font-size: var(--t-m); line-height: 1.6; color: var(--n-ink2); }
.viec-so-lop { position: absolute; inset: 0; pointer-events: none; }
.viec-so { position: absolute; font-family: var(--mono); font-size: var(--t-s); letter-spacing: 0.04em; color: #D7EEE5; white-space: nowrap; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.12s var(--joe); }
.viec-so.mo { transition: opacity 0.25s var(--joe); }
.viec-so.dau { transform: translate(0, -50%); }
.viec-so.mo { opacity: 1; }
#ch-viec .ch-body { max-width: 62ch; transition: color 0.4s; }
#ch-viec .ch-head { transition: color 0.4s; }
html.viec-mothe #ch-viec .ch-head { color: rgba(230, 239, 235, 0.8); }
html.viec-mothe #ch-viec .ch-body { color: rgba(188, 202, 197, 0.8); }
.viec-doc { display: none; }
@media (max-width: 760px), (orientation: portrait) {
  .viec-nhan i { display: none; }
  /* (soát p9a B9) vùng chạm nhãn nhà >= 24 px: đệm trên dưới 3 px (lề âm giữ chữ đúng chỗ) + vùng chạm vô hình 44 px */
  .viec-nhan { padding: 3px 0; margin-top: -3px; }
  .viec-nhan::before { content: ''; position: absolute; inset: -10px -6px; }
  .viec-the .ve { margin: 12px 0 12px; }
  #ch-viec { bottom: 44px; width: calc(100vw - 32px); }
  #ch-viec .ch-head { letter-spacing: 0; }
  html.viec-mothe #ch-viec .ch-body, html.viec-mothe-do #ch-viec .ch-body { display: none; }
  html.viec-mothe #ch-viec .ch-head { color: var(--n-ink); }
}

/* ── PHẦN 9: chương 連絡 — về lại toà thành trong đêm (Mike duyệt ảnh chi tiết phương án C, 29/9). MỘT LƯỚI LỀ với logo, cột chương
   và "Sound": 40 px khung + 36 px ngang / 26 px dọc. Tiêu đề + dẫn ở GÓC TRÊN PHẢI (màn đầu ban ngày cũng đặt chữ ở bốn góc — chuyến
   đi kết thúc ở chỗ nó bắt đầu); form là "ĐƯỜNG MẶT ĐẤT" chạy ngang đáy khung ngay dưới bãi đất (như đường GL của bản vẽ mặt đứng):
   bốn ô là bốn đoạn trên một đường kẻ liền, mỗi ô có vạch mốc ở đầu; dòng chân trang ở GÓC DƯỚI TRÁI, cùng hàng với "Sound".
   Ba cỡ của trang (28 · 16 · 13), một kiểu có chân + một kiểu đơn cách. Lớp tối sau chữ nằm TRONG ảnh cảnh (KhungEffect). ── */
#ch-lienhe { left: 0; right: 0; top: 0; bottom: 0; width: auto; transform: none; text-align: left; visibility: hidden; }
#ch-lienhe .lh-dau { position: absolute; right: calc(40px + 36px); top: calc(40px + 26px); width: 560px; text-align: right; transition: opacity 0.4s var(--joe); }
#ch-lienhe .ch-body { margin: 14px 0 0 auto; max-width: 46ch; text-wrap: pretty; }
.lh-dat { position: absolute; left: calc(40px + 36px); right: calc(40px + 36px); bottom: calc(40px + 94px); margin: 0; --ve: 0; }
.lh-dat .hang { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.25fr 1.25fr auto; gap: 0 34px; align-items: end; }
/* đường mặt đất LIỀN, chạy qua cả khe giữa các ô; kẻ dần từ trái sang khi vừa tới (--ve), rồi các ô mới hiện */
.lh-dat .hang::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(215, 238, 229, 0.3); transform-origin: 0 50%; transform: scaleX(var(--ve)); }
.lh-dat .o { position: relative; display: block; cursor: text; min-width: 0; }
.lh-dat .o::before { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 10px; background: rgba(215, 238, 229, 0.55); transition: height 0.3s var(--joe), background 0.3s; }
.lh-dat .nhan { display: block; padding-left: 12px; font-family: var(--mono); font-size: var(--t-s); line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--n-ink2); transition: color 0.3s; }
.lh-dat input { display: block; width: 100%; height: 42px; margin: 0; padding: 0 0 0 12px; border: 0; border-bottom: 1px solid rgba(215, 238, 229, 0.42); border-radius: 0;
  background: none; outline: none; appearance: none; -webkit-appearance: none; box-shadow: none;
  font-family: var(--mono); font-size: var(--t-m); line-height: 1.5; color: var(--n-ink); caret-color: var(--r300); transition: border-color 0.3s, box-shadow 0.3s; }
.lh-dat input:-webkit-autofill { -webkit-text-fill-color: var(--n-ink); -webkit-box-shadow: 0 0 0 40px #07100d inset; }
/* ô đang gõ (ảnh anh=3): nhãn sáng lên, đường kẻ + vạch mốc thành 緑青 */
.lh-dat .o:focus-within .nhan { color: var(--n-ink); }
.lh-dat input:focus { border-bottom-color: var(--r300); box-shadow: 0 1px 0 0 var(--r300); }
.lh-dat .o:focus-within::before { height: 18px; background: var(--r300); }
/* nút Send: cùng dáng nút màn chọn tiếng (viền 1 px, vát góc trên phải + dưới trái) — bản đêm: viền 緑青 nấc 300; viền vẽ bằng SVG
   (lòng nút trong mờ — cách hai lớp cắt góc của .pick cần lòng đặc) */
.lh-gui { --pk-vien: transparent; --pk-long: rgba(2, 7, 5, 0.38); --pk-nen: rgba(98, 177, 152, 0.16);
  min-width: 176px; min-height: 52px; padding: 0 26px; color: var(--n-ink); font-size: var(--t-m); }
.lh-gui::before { background: none; }
.lh-gui .pick-i { stroke: var(--r300); width: 18px; height: 18px; }
.lh-gui svg.pk-vien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; pointer-events: none; }
.lh-gui svg.pk-vien path { fill: none; stroke: var(--r300); stroke-width: 1; }
.lh-gui:focus-visible { outline: 2px solid var(--r300); outline-offset: 5px; }
/* vừa tới: chỉ có đường mặt đất đang kẻ; ô, nhãn, nút hiện sau cùng (.hien) */
.lh-dat .o, .lh-dat .gui { opacity: 0; transition: opacity 0.6s var(--joe); }
.lh-dat.hien .o, .lh-dat.hien .gui { opacity: 1; }
.lh-dat.hien .o, .lh-dat.hien input, .lh-dat.hien button { pointer-events: auto; }
.lh-dat .o:nth-child(2) { transition-delay: 0.08s; } .lh-dat .o:nth-child(3) { transition-delay: 0.16s; } .lh-dat .o:nth-child(4) { transition-delay: 0.24s; } .lh-dat .gui { transition-delay: 0.32s; }
/* sau khi bấm Send: câu demo ngay dưới đường mặt đất, đầu câu một vạch 緑青 */
.lh-demo { position: absolute; left: 0; top: calc(100% + 14px); margin: 0; font-family: var(--mono); font-size: var(--t-s); line-height: 1.5; letter-spacing: 0.04em; color: var(--n-ink2); opacity: 0; transition: opacity 0.4s var(--joe); }
.lh-dat.sent .lh-demo { opacity: 1; }
/* (soát p10a B1) gửi xong con trỏ sang câu demo (đúng chỗ trong thứ tự Tab) — câu báo, không phải ô bấm: không viền con trỏ */
.lh-demo:focus { outline: none; }
.lh-dat.sent .lh-demo::before { content: ""; display: inline-block; width: 16px; height: 1px; margin-right: 12px; vertical-align: 0.3em; background: var(--r300); }
/* chân trang: góc DƯỚI TRÁI, cùng hàng, cùng cỡ, cùng màu với "Sound" ở góc dưới phải */
.ch-chan { position: absolute; left: calc(40px + 36px); bottom: calc(40px + 26px); margin: 0; font-family: var(--mono); font-size: var(--t-s); line-height: 1.5; letter-spacing: 0.08em; color: rgba(230, 239, 235, 0.74); }
/* (vòng kiểm cuối) khổ ngang hẹp (máy tính bảng ngang 1024…): nhãn "WHERE THE SITE IS" không rơi chữ xuống dòng (dòng nhãn cao thêm
   20 px, đè lên nét sáng của bãi đất) — giãn chữ và khe cột hẹp lại như ở điện thoại */
@media (min-width: 761px) and (max-width: 1239px) and (orientation: landscape) {
  .lh-dat .hang { column-gap: 22px; }
  .lh-dat .nhan { letter-spacing: 0.08em; }
  /* đoạn dẫn không lấn vào toà thành ở giữa màn (toà thành rộng ~0,14 bề cao mỗi bên tâm): cột hẹp lại, nhiều dòng hơn */
  #ch-lienhe .ch-body { max-width: min(46ch, calc(50vw - 76px - 16vh)); }
}
@media (max-width: 760px), (orientation: portrait) {
  /* tiêu đề 連絡 vừa một dòng ở màn 360 (giãn chữ 0; như tiêu đề 仕事) — rơi "have" xuống dòng thì khối chữ cao lên, đè nét sáng sườn đồi */
  #ch-lienhe .ch-head { letter-spacing: 0; }
  #ch-lienhe .lh-dau { left: 25px; right: 25px; width: auto; top: auto; bottom: 300px; text-align: left; }
  #ch-lienhe .ch-body { margin: 12px 0 0; }
  /* (soát p10a A9) chân trang cách khung dưới 16 px — cùng nhịp logo cách khung trên (khung vát ở 11 px): form nâng theo */
  .lh-dat { left: 25px; right: 25px; bottom: 61px; }
  /* nhãn giãn chữ 0,08em (không 0,16em): "WHERE THE SITE IS" (17 ký tự đơn cách × 0,68em ≈ 150 px) vừa một dòng trong cột ~163 px,
     không rơi một chữ xuống dòng */
  .lh-dat .nhan { letter-spacing: 0.08em; padding-left: 8px; }
  .lh-dat .hang { grid-template-columns: 1fr 1fr; gap: 14px 14px; }
  .lh-dat .hang::before { display: none; }
  .lh-dat input { height: 36px; }
  .lh-dat .gui { grid-column: 1 / 3; display: flex; align-items: center; gap: 16px; margin-top: 4px; }
  .lh-gui { width: auto; min-width: 150px; min-height: 48px; }
  /* câu demo đứng CẠNH nút Send (không đẩy form cao thêm sau khi bấm) */
  .lh-demo { left: 168px; right: 0; top: auto; bottom: 0; }
  .ch-chan { left: 25px; bottom: 27px; }
  /* bàn phím ảo bật lên (khung nhìn co lại): form đứng ngay trên bàn phím, tiêu đề nhường chỗ (page/chuong.js đặt --kb và lớp .chat) */
  .lh-dat { transform: translateY(calc(-1 * var(--kb, 0px))); }
  #ch-lienhe.chat .lh-dau, #ch-lienhe.chat .ch-chan { opacity: 0; visibility: hidden; }
}
/* (vòng kiểm cuối) điện thoại hẹp (360…): "WHERE THE SITE IS" / "WHAT IS THERE NOW" vừa một dòng — nhãn rơi chữ xuống dòng làm form cao
   thêm 40 px, đẩy tiêu đề lên đè nét sáng của bãi đất */
@media (max-width: 374px) {
  .lh-dat .hang { column-gap: 10px; }
  .lh-dat .nhan { letter-spacing: 0.03em; }
}

/* ── BẢN ĐỌC CHỮ (B6, 29/9): máy vẽ 3D bằng CPU (SwiftShader, llvmpipe…) hoặc cảnh hỏng — page.js thêm lớp html.doc.
   Không cảnh, không màn mở: mọi chữ của trang thành một cột đọc cuộn thường, chữ tối trên nền giấy. ── */
html.doc, html.doc body { overflow: auto; height: auto; }
html.doc canvas#scene, html.doc svg#plex, html.doc svg#khung, html.doc .mist, html.doc .chap, html.doc .ch-logo, html.doc .ch-sound, html.doc .tag, html.doc .c-br { display: none !important; }
html.doc main { position: static; pointer-events: auto; max-width: 64ch; margin: 0 auto; padding: calc(var(--my) + 24px) 24px 96px; }
html.doc .s1 { position: static; }
html.doc .c-tl, html.doc .c-tr, html.doc .c-bl { position: static; width: auto; text-align: left; }
html.doc .c-tr { margin-top: 48px; }
html.doc .lbl { justify-content: flex-start; }
html.doc .lbl::before { display: none; }
html.doc .c-bl { margin-top: 24px; }
html.doc .hint { display: none; }
html.doc .ch { position: static; transform: none; width: auto; text-align: left; margin-top: 56px; opacity: 1; transition: none; }
html.doc .ch-head { color: var(--ink); }
html.doc .ch-body { color: var(--ink-2); margin-left: 0; }
html.doc .viec-ui { display: none !important; }
html.doc .viec-doc { display: block; margin: 24px 0 0; padding: 0; list-style: none; text-align: left; }
html.doc .viec-doc li { margin: 0 0 20px; font-family: var(--mono); font-size: var(--t-m); line-height: 1.6; color: var(--ink-2); }
html.doc .viec-doc b { display: block; font-family: var(--mincho); font-weight: 500; color: var(--ink); }
/* 連絡 ở bản đọc chữ: tiêu đề, dẫn, form (nhãn thật, ô nhập, Send — vẫn chỉ hiện câu demo) và dòng chân trang, chữ tối trên nền giấy */
html.doc #ch-lienhe { visibility: visible; }
html.doc #ch-lienhe .lh-dau { position: static; width: auto; text-align: left; }
html.doc #ch-lienhe .ch-body { margin: 16px 0 0; max-width: none; }
html.doc .lh-dat { position: static; margin: 32px 0 0; transform: none; --ve: 1; }
html.doc .lh-dat .hang { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
html.doc .lh-dat .hang::before { display: none; }
html.doc .lh-dat .o, html.doc .lh-dat .gui { opacity: 1; pointer-events: auto; }
html.doc .lh-dat input, html.doc .lh-dat button { pointer-events: auto; }
html.doc .lh-dat .gui { grid-column: 1 / 3; }
html.doc .lh-dat .nhan { color: var(--ink-2); }
html.doc .lh-dat input { color: var(--ink); border-bottom-color: var(--ink-2); caret-color: var(--ink); }
html.doc .lh-dat .o::before { background: var(--ink-2); }
html.doc .lh-dat .o:focus-within::before, html.doc .lh-dat input:focus { background: var(--r700); border-bottom-color: var(--r700); box-shadow: 0 1px 0 0 var(--r700); }
html.doc .lh-gui { color: var(--ink); --pk-long: transparent; --pk-nen: color-mix(in srgb, var(--ink) 9%, transparent); }
html.doc .lh-gui svg.pk-vien path, html.doc .lh-gui .pick-i { stroke: var(--ink); }
html.doc .lh-gui:focus-visible { outline-color: var(--r700); }
html.doc .lh-demo { position: static; margin: 16px 0 0; color: var(--ink-2); }
html.doc .lh-dat.sent .lh-demo::before { background: var(--r700); }
html.doc .ch-chan { position: static; margin: 56px 0 0; color: var(--ink-2); }
html.doc .doc-note { margin: 0 0 40px; font-family: var(--mono); font-size: var(--t-s); line-height: 1.6; letter-spacing: 0.04em; color: var(--ink-2); }