/* Hallmark · refine pass · Claude Code 26/09/2026 · site hiện có, editorial · ivory / forest / gold (token của presentation.css, không đổi)
 * Phạm vi: hierarchy đầu mục · reveal · chuyển mục & trạng thái active · hover/active/focus/disabled · vùng chạm
 *          · chuỗi đo trụ điện · gallery & trình xem ảnh · chồng lớp trên iPhone/iPad · reduced-motion
 * Motion primitives: hiện đầu mục một lần · nhấn nút 1px · zoom ảnh bằng nút — 3
 * Pre-emit critique: P4 H5 E4 S4 R5 V3 (V thấp có chủ đích: giữ nguyên cấu trúc 11 mục, không redesign)
 * Nạp cuối cùng trong index.html. Bỏ link này là trả CSS về trước lượt sửa (JS vẫn chạy).
 */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-micro:120ms;
  --dur-short:220ms;
  --dur-long:420ms;
  /* Sơ đồ mặt bằng: giữ sắc cam đất và nâu của bản cũ, chỉ làm sáng nền ô trụ để chữ mực đạt tương phản */
  --pole-fill:#efc6ba;
  --pole-line:#a8543f;
  --measure-line:#8a764c;
  --measure-ink:#694f2c;
}

/* 1 · Đầu mục: số chương và câu hỏi cùng một dòng, tiêu đề ngay bên dưới trong cùng cột.
   Thay kiểu "số La Mã bên trái / tiêu đề bên phải" ở màn rộng; iPhone vốn đã xếp dọc nên giữ cùng nhịp. */
.head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:0;row-gap:10px;margin-bottom:24px}
.head>div{display:contents}
.head .num{grid-column:1;grid-row:1;width:auto;min-width:0;padding:0;border:0;font-size:15px;font-weight:700;line-height:1.65;letter-spacing:.08em;color:var(--gold)}
.head .num::after{content:"";display:inline-block;width:20px;height:1px;margin:0 12px;vertical-align:middle;background:currentColor}
.head .eyebrow{grid-column:2;grid-row:1;min-width:0}
.head h2{grid-column:1/-1;grid-row:2;margin:0}
h2{text-wrap:balance}

/* 2 · Reveal: chỉ phần đầu mục (số, câu hỏi, tiêu đề, dẫn nhập) hiện nhẹ một lần khi vào màn hình.
   Nội dung, ảnh, bảng, nút luôn hiển thị — không phụ thuộc script hay hiệu ứng. */
.reveal{transition:none}
.js .reveal.waiting{opacity:1;transform:none}
.reveal>.head,.reveal>.head+.lead{transition:opacity var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out)}
.reveal>.head+.lead{transition-delay:60ms}
.js .reveal.waiting>.head,.js .reveal.waiting>.head+.lead{opacity:0;transform:translateY(12px)}
.presenting .reveal.waiting>.head,.presenting .reveal.waiting>.head+.lead{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.js .reveal.waiting>.head,.js .reveal.waiting>.head+.lead{opacity:1;transform:none}}
@media print{.js .reveal.waiting>*{opacity:1!important;transform:none!important}}

/* 3 · Thanh đầu trang: vùng chạm 44px, mục đang xem có trạng thái rõ */
header>a{display:inline-block;padding-block:8px}
header nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
header nav a[aria-current]{color:var(--accent);border-bottom-color:var(--gold)}
.contents-list a[aria-current]{border-color:var(--accent);background:var(--paper)}
.contents-list a[aria-current]>span:first-child{color:var(--accent)}

/* 4 · Nút: hover chỉ khi có chuột, nhấn 1px, disabled rõ; viền focus hiện ngay, không animate */
.btn,.tabs button,.menu-button,.present-toggle,.chapter-status button,.viewer-tools button,.close-menu{transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
:is(.btn,.tabs button,.menu-button,.present-toggle,.chapter-status button,.viewer-tools button,.close-menu):active:not(:disabled){transform:translateY(1px)}
button:disabled{cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
  .btn:not(.ghost):not(:disabled):hover{background:var(--white);border-color:var(--white);color:var(--on-accent)}
  .btn.ghost:hover{background:var(--paper)}
  .tabs button[aria-pressed=false]:hover,.menu-button:hover,.present-toggle[aria-pressed=false]:hover{border-color:var(--accent);color:var(--accent)}
  .chapter-status button:not(:disabled):hover,.viewer-tools button:not(:disabled):hover{background:var(--soft-gold)}
  header nav a:hover,summary:hover{color:var(--accent)}
  .contents-list a:hover{background:var(--paper)}
}
textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* Ảnh nằm trong dải cuộn ngang: vẽ viền focus vào trong để không bị khung cuộn cắt mất */
.image-open:focus-visible{outline-offset:-3px}

/* 5 · Nút dài không bị cắt ở 320px: cho xuống dòng cân đối thay vì tràn khỏi khung */
.btn{max-width:100%}
@media (max-width:399px){.btn{white-space:normal;text-wrap:balance;text-align:center;padding-inline:16px}}
@media (max-width:359px){.btn{font-size:15px}}

/* 6 · Vùng chạm nhỏ */
.concept-plan-open{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.card .brand-strip{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}

/* 7 · Mặt bằng: chuỗi đo 7–2–13 m vẽ thành thước đo mép đường, tách hẳn khỏi các gian 7–7–8 m (ô nét đứt) */
.siteplan .frontage-measure-label{margin:14px 0 4px;color:var(--measure-ink);font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.5}
.siteplan .frontage-measure{margin:0 0 6px;border:0;border-radius:0;background:transparent;overflow:visible;font-size:12px}
.siteplan .frontage-measure span{align-items:flex-end;min-height:30px;padding:2px 2px 6px;border:0;border-bottom:2px solid var(--measure-line);border-left:1px solid var(--measure-line);color:var(--measure-ink);white-space:nowrap}
.siteplan .frontage-measure span:last-child{border-right:1px solid var(--measure-line)}
.siteplan .frontage-measure .m2{background:repeating-linear-gradient(135deg,var(--pole-fill) 0 4px,transparent 4px 8px);color:var(--white)}
.siteplan .pole-key{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:1px solid var(--pole-line);background:repeating-linear-gradient(135deg,var(--pole-fill) 0 3px,transparent 3px 6px)}
@media (max-width:540px){.siteplan .frontage-measure{font-size:11px}.siteplan .frontage-measure span{padding-inline:1px}}

/* 8 · Dải ảnh sản phẩm: trên máy dùng chuột, xếp lưới để không có ảnh bị khuất mà không cuộn ngang được.
   iPhone/iPad giữ dải vuốt ngang có scroll-snap như cũ. */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .photo-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));overflow:visible;scroll-snap-type:none}
  .photo-strip figure{flex:none;min-width:0}
}

/* 9 · Trình xem ảnh: thanh công cụ / ảnh / chú thích là ba hàng riêng — không hàng nào đè lên ảnh.
   "Vừa màn hình" luôn thấy trọn ảnh ở mọi hướng màn hình. */
.image-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.image-viewer .viewer-tools,.image-viewer .viewer-stage,.image-viewer .viewer-caption{position:relative;inset:auto}
.image-viewer .viewer-stage{min-height:0;overflow:hidden}
.image-viewer .viewer-stage img{position:absolute;inset:0;margin:auto;max-width:calc(100% - 24px);max-height:calc(100% - 24px)}
.image-viewer .viewer-stage.is-stepping img{transition:transform var(--dur-short) var(--ease-out)}
.viewer-tools output{min-width:4.5ch;text-align:center;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){.image-viewer[open]{animation:nv-viewer-in var(--dur-short) var(--ease-out)}}
@keyframes nv-viewer-in{from{opacity:0}}

/* 10 · Chế độ Trình bày: vùng vuốt không đè lên thanh vị trí chương trên iPhone; ẩn khi dùng chuột (không vuốt được) */
@media (hover:hover) and (pointer:fine){.presenting .swipe-guide{display:none}}
@media (max-width:479px){
  .presenting .swipe-guide{left:8px;right:8px;max-width:none;min-height:48px;bottom:calc(84px + env(safe-area-inset-bottom))}
  .presenting footer{padding-bottom:170px}
}

/* 11 · Tương phản chữ nhỏ trong demo mô phỏng */
.platform-track{color:var(--muted)}