/* ================================================================
   Tập San 12A11 — "Đồng Hồ Cát"  ·  Giao diện Scrapbook (Mẫu 3)
   Stylesheet dùng chung cho toàn bộ trang
   ================================================================ */

*,*::before,*::after{box-sizing:border-box}

:root{
  /* Màu chữ đã chỉnh để đạt chuẩn tương phản WCAG AA (>= 4.5).
     Giữ nguyên tông, chỉ tối đi vài phần trăm — đo lại bằng bộ test CSS. */
  --paper:#f6efe2; --paper2:#fffaf0; --ink:#3b3128; --muted:#766a5c;
  --line:#e0d3bd; --red:#c94940; --blue:#3c79ad; --green:#4b7f59;
  --yellow:#f0c04a; --brown:#9d6a2b;
  --tape:rgba(240,192,74,.55);
  --hand:'Patrick Hand',ui-rounded,'Segoe Print',cursive;
  --sans:'Nunito',system-ui,'Segoe UI',sans-serif;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --wrap:1120px;
  --ke:28px;            /* khoảng cách dòng kẻ trên thẻ bài viết */
  --le:38px;            /* vị trí lề đỏ tính từ mép trái */
  --shadow-hard:6px 6px 0 var(--ink);
}

/* Chặn tràn ngang. Nhiều khối trong giao diện này xoay nghiêng (.strip, .polaroid,
   .note, .art) — một khối rộng 100% mà xoay thì hộp bao của nó luôn rộng hơn màn
   hình, sinh ra thanh cuộn ngang và đẩy toàn bộ nội dung lệch khỏi lề.
   Dùng "clip" chứ không phải "hidden": hidden sẽ làm hỏng position:sticky của
   thanh điều hướng trên cùng. */
body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.75;
  background:var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.7),transparent 40%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.018) 0 1px,transparent 1px 26px);
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
/* height:auto là BẮT BUỘC vì mọi thẻ <img> đều khai báo width/height thật
   (để giữ chỗ, tránh nhảy bố cục). Thuộc tính HTML đó được hiểu như CSS
   height cố định; thiếu height:auto thì nó thắng aspect-ratio và mọi ảnh
   trong thẻ danh mục, bức tường, polaroid đều bị kéo cao sai. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
/* Patrick Hand chi co mot do dam (400) — khong de trinh duyet gia lap chu dam */
.logo,.sticker,.hand,.note h3,.letter h3,.letter .sign,.letter .float figcaption,
.strip q,.snap figcaption,.polaroid figcaption,.art .t,.modal-head h3,
footer h2,.lb .cap,.reader-side h4{font-weight:400}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.center{text-align:center}
.mt-40{margin-top:40px}

/* ── Header / Nav ───────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:60;background:rgba(246,239,226,.92);
  backdrop-filter:blur(10px);border-bottom:2px dashed var(--line)}
.bar .wrap{display:flex;align-items:center;gap:20px;height:78px}
.logo{font-family:var(--hand);font-weight:400;font-size:26px;line-height:1;display:flex;align-items:center;gap:10px}
.logo b{background:var(--red);color:#fff;font-family:var(--sans);font-weight:800;font-size:12px;
  padding:4px 9px;border-radius:8px;transform:rotate(-4deg)}
.mainnav{margin-left:auto;display:flex;gap:4px}
.mainnav a{padding:9px 16px;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--muted);transition:.2s}
.mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink)}
.burger{display:none;margin-left:auto;background:#fff;border:2px solid var(--ink);border-radius:12px;
  width:44px;height:44px;font-size:20px;color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.burger:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ── Buttons / stickers ─────────────────────────────────────── */
.sticker{display:inline-block;font-family:var(--hand);font-size:18px;background:var(--yellow);color:#4a3a12;
  padding:4px 16px;border-radius:100px;transform:rotate(-3deg);box-shadow:2px 2px 0 rgba(0,0,0,.15)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:14px;font-weight:700;
  font-size:15px;border:2px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink);
  transition:.15s;cursor:pointer;font-family:inherit;color:var(--ink)}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.red{background:var(--red);color:#fff}
.btn.small{padding:9px 18px;font-size:14px;box-shadow:3px 3px 0 var(--ink)}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{padding:70px 0 40px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
h1{font-size:clamp(34px,5.4vw,60px);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:22px 0 0}
h1 u{text-decoration:none;position:relative;white-space:nowrap;z-index:0}
h1 u::after{content:"";position:absolute;left:-2px;right:-2px;bottom:6px;height:14px;
  background:rgba(217,79,69,.28);border-radius:8px;transform:rotate(-1deg);z-index:-1}
.hand{font-family:var(--hand);font-size:clamp(21px,2.8vw,30px);color:var(--red);display:block;
  margin-top:8px;transform:rotate(-1.5deg)}
.lede{max-width:46ch;color:var(--muted);margin:20px 0 0;font-size:16.5px}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* Trang phụ: hero rút gọn */
.pagehead{padding-block:56px 10px;text-align:center}
.pagehead h1{margin:14px 0 6px}
.pagehead p{color:var(--muted);max-width:60ch;margin:0 auto}
.crumb{font-size:13.5px;color:var(--muted)}
.crumb a:hover{color:var(--red)}

/* ── Polaroid ───────────────────────────────────────────────── */
.polaroid{background:#fff;padding:14px 14px 54px;border-radius:4px;margin:0 8px;
  box-shadow:0 14px 34px -12px rgba(59,49,40,.45);position:relative;transform:rotate(2.2deg);transition:transform .3s}
.polaroid:hover{transform:rotate(0) scale(1.02)}
.polaroid img{aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-family:var(--hand);font-size:19px;color:#5b4e40}
.polaroid::before{content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:120px;height:34px;background:var(--tape);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pin{position:absolute;font-size:26px;top:-14px;right:2px;transform:rotate(14deg)}

/* ── Section heads ──────────────────────────────────────────── */
/* Chỉ đặt lề TRÊN–DƯỚI bằng padding-block. Nếu viết tắt "padding: 74px 0"
   thì selector section.tight (010+thẻ) mạnh hơn .wrap (010) và sẽ xoá luôn
   lề trái/phải 22px của .wrap — làm chữ dính sát mép ở mọi
   <section class="wrap tight">. */
section{padding-block:74px}
section.tight{padding-block:40px}
.shead{text-align:center;margin-bottom:44px}
.shead h2{font-size:clamp(26px,4vw,40px);font-weight:800;margin:8px 0 8px;letter-spacing:-.02em}
.shead p{color:var(--muted);margin:0 auto;max-width:58ch}

/* ── Note cards (danh mục) ──────────────────────────────────── */
.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.notes.three{grid-template-columns:repeat(3,1fr)}
.note{background:var(--paper2);border:2px solid var(--ink);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-hard);transition:.2s;position:relative;
  display:flex;flex-direction:column}
.note:nth-child(odd){transform:rotate(-1.2deg)}
.note:nth-child(even){transform:rotate(1deg)}
.note:hover,.note:focus-visible{transform:rotate(0) translateY(-6px);box-shadow:8px 10px 0 var(--ink)}
.note img{aspect-ratio:4/3;object-fit:cover;border-bottom:2px solid var(--ink);width:100%}
.note .body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.note h3{font-family:var(--hand);font-size:25px;margin:8px 0 4px;line-height:1}
.note p{font-size:14px;color:var(--muted);margin:0}
/* margin-top:auto đẩy dòng này xuống đáy thẻ, nên dù mô tả dài ngắn khác nhau
   thì nút "Đọc →" ở mọi thẻ vẫn nằm đúng cùng một hàng */
.note .go{align-self:flex-start;margin-top:auto;padding-top:14px;font-weight:700;
  font-size:14px;border-bottom:2px solid var(--yellow)}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 10px;border-radius:100px;color:#fff;background:var(--muted)}
.tag.red{background:var(--red)} .tag.blue{background:var(--blue)}
.tag.green{background:var(--green)} .tag.brown{background:var(--brown)}

/* ── Letter (lời ngỏ / lời kết) ─────────────────────────────── */
.letter{max-width:none;margin:34px auto;background:var(--paper2);border:2px solid var(--ink);border-radius:18px;
  padding:48px 60px 44px;box-shadow:8px 8px 0 var(--ink);position:relative}
.letter::before{content:"";position:absolute;top:-18px;left:40px;width:150px;height:36px;
  background:var(--tape);transform:rotate(-4deg)}
.letter h3{font-family:var(--hand);font-size:31px;margin:0 0 6px}
.letter p{margin:14px 0 0;text-align:justify}
.letter .float{float:left;width:min(360px,40%);margin:6px 24px 12px 0;background:#fff;padding:10px 10px 34px;
  box-shadow:0 10px 24px -12px rgba(59,49,40,.5);transform:rotate(-2deg)}
.letter .float figcaption{font-family:var(--hand);font-size:16px;text-align:center;margin-top:6px;color:#6b5c4c}
.letter .sign{font-family:var(--hand);font-size:23px;color:var(--red);text-align:right;
  margin-top:26px;transform:rotate(-2deg);clear:both}
/* Nút đặt bên trong khối thư, ngăn bằng đường kẻ đứt */
.letter-foot{clear:both;margin-top:30px;padding-top:26px;border-top:2px dashed var(--line);
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ── Lời ngỏ / Lời kết: thu gọn trên điện thoại ─────────────────
   Hai bài này dài, để nguyên thì chiếm gần trọn màn hình. Trên máy tính không
   thu gọn vì có đủ chỗ. Chiều cao --cao-thu-gon do site.js tính theo tỉ lệ
   chiều cao thật của từng bài, nên bài dài và bài ngắn cùng lộ ra một phần
   tương đương nhau. Không có JS thì bài hiện đầy đủ như thường. */
.letter-body{position:relative}
.xem-them{display:none}

@media(max-width:700px){
  .letter:not(.mo) .letter-body{max-height:var(--cao-thu-gon,300px);overflow:hidden}
  /* mờ dần ở đáy để thấy rõ là còn nội dung phía dưới */
  .letter:not(.mo) .letter-body::after{content:"";position:absolute;left:0;right:0;bottom:0;
    height:90px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(255,250,240,0),var(--paper2) 85%)}
  .letter:not(.mo) .letter-foot{margin-top:16px;padding-top:16px;border-top:0}

  /* Nút nhẹ, không viền dày không bóng cứng — nó là thao tác phụ, không nên
     nặng ngang mấy nút chính trong trang. */
  .xem-them{display:inline-flex;align-items:center;gap:7px;margin:10px auto 0;
    padding:6px 4px;border:0;background:none;cursor:pointer;
    font-family:inherit;font-weight:700;font-size:14px;color:var(--red);
    border-bottom:2px solid var(--yellow);border-radius:0}
  .xem-them:active{opacity:.6}
  .xem-them .mui{font-size:12px;transition:transform .25s}
  .letter.mo .xem-them .mui{transform:rotate(180deg)}
}

/* ── Quote strip ────────────────────────────────────────────── */
/* Dải trích dẫn nghiêng. KHÔNG xoay cả khối: khối rộng 100% mà xoay thì hộp bao
   của nó luôn rộng hơn màn hình, sinh thanh cuộn ngang và đẩy lệch cả trang.
   Thay vào đó vẽ nền nghiêng bằng một lớp giả to hơn khung, rồi cắt gọn hai bên. */
.strip{position:relative;overflow:hidden;color:var(--paper);padding:60px 0;margin:40px 0;
  isolation:isolate}
.strip::before{content:"";position:absolute;left:-4%;right:-4%;top:-18px;bottom:-18px;
  background:var(--ink);transform:rotate(-.6deg);z-index:-1}
.strip .wrap{text-align:center}
/* Nội dung đã có sẵn dấu nháy cong trong chữ, nên tắt cặp nháy mà trình duyệt
   tự thêm cho thẻ <q>, không thì câu trích dẫn hiện hai lớp nháy. */
.strip q{font-family:var(--hand);font-size:clamp(22px,3.2vw,36px);line-height:1.3;display:block;
  quotes:none}
.strip q::before,.strip q::after{content:none}
.strip span{display:block;margin-top:16px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#c3b6a2}

/* ── Photo wall ─────────────────────────────────────────────── */
.wall{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.wall.four{grid-template-columns:repeat(4,1fr)}
.snap{background:#fff;padding:10px 10px 34px;border-radius:3px;margin:0;
  box-shadow:0 10px 24px -12px rgba(59,49,40,.5);transition:.25s;cursor:zoom-in}
.snap:nth-child(3n){transform:rotate(-2deg)}
.snap:nth-child(3n+1){transform:rotate(1.6deg)}
.snap:nth-child(3n+2){transform:rotate(-.6deg)}
.snap:hover,.snap:focus-visible{transform:rotate(0) scale(1.06);z-index:3;
  box-shadow:0 18px 34px -12px rgba(59,49,40,.55)}
.snap img{aspect-ratio:1/1;object-fit:cover;width:100%;image-rendering:auto}
.snap.tall img{aspect-ratio:3/4}
.snap figcaption{font-family:var(--hand);font-size:16px;text-align:center;margin-top:6px;color:#6b5c4c}
.snap figcaption em{display:block;font-family:var(--sans);font-style:normal;font-size:11.5px;color:var(--muted)}

/* ── Danh sách bài viết (tập san) ───────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:38px}
/* Chỉ trình đọc màn hình nghe thấy, mắt thường không nhìn ra */
.chi-doc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.chip{padding:9px 20px;border-radius:100px;border:2px solid var(--ink);background:#fff;font-weight:700;
  font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink);transition:.15s}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.arts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1150px){.arts{grid-template-columns:repeat(3,1fr)}}
/* ── Thẻ bài viết = cuốn tập nhỏ ────────────────────────────────
   Trang trong: giấy kẻ ngang + lề đỏ + gáy khâu (thuần CSS, không ảnh).
   Bìa: lật mở 1/3 khi rê chuột, lật hẳn + phóng to khi bấm.
   Mọi dòng chữ dùng line-height = --ke để nằm đúng trên dòng kẻ. */
.arts{perspective:1600px}

.art{
  position:relative;min-height:190px;padding:0;border:0;background:none;
  text-align:left;cursor:pointer;font-family:inherit;color:var(--ink);
  transition:transform .6s cubic-bezier(.25,.8,.3,1);
}
.art:nth-child(4n+1){transform:rotate(-.8deg)}
.art:nth-child(4n+3){transform:rotate(.7deg)}
.art[hidden]{display:none}

/* Trang trong — giấy kẻ, gáy vẫn ở bên trái như vở thật */
.art-trang{
  position:absolute;inset:0;border:2px solid var(--ink);border-radius:4px 12px 12px 4px;
  padding:16px 18px 16px calc(var(--le) + 14px);line-height:var(--ke);overflow:hidden;
  background-color:var(--paper2);
  background-image:repeating-linear-gradient(180deg,
    transparent 0 calc(var(--ke) - 1px),
    rgba(63,127,181,.20) calc(var(--ke) - 1px) var(--ke));
  background-position:0 16px;
}
.art-trang::before{               /* lề đỏ dọc */
  content:"";position:absolute;left:var(--le);top:0;bottom:0;width:1.5px;
  background:rgba(217,79,69,.45);
}
.art-trang::after{                /* bóng đọng lại phía gáy khi trang được giở lên */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:linear-gradient(100deg,rgba(59,49,40,.34),transparent 48%);
}
.art:hover .art-trang::after,
.art:focus-visible .art-trang::after,
.art.mo-ra .art-trang::after{opacity:1}
.art-trang .doc{font-family:var(--hand);font-size:20px;color:var(--muted);line-height:var(--ke)}
.art-trang .doc b{display:block;color:var(--red);font-weight:400}

/* Bìa — giở trang như sách thật, bản lề là TOÀN BỘ GÁY BÊN TRÁI.
   Trục xoay thẳng đứng và trùng đúng mép trái, nên cả hai góc trên-trái
   và dưới-trái đều đứng yên; chỉ mép phải nhấc lên và quét sang trái.
   (Nghiêng trục dù chỉ một chút cũng làm góc trên-trái bị bung khỏi gáy.) */
.art-bia{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:0;
  border:2px solid var(--ink);border-radius:4px 12px 12px 4px;
  padding:14px 18px 16px calc(var(--le) + 14px);line-height:var(--ke);
  background:var(--paper2);box-shadow:5px 5px 0 var(--ink);
  transform-origin:0% 50%;                        /* bản lề: trùng đúng mép trái */
  transform:rotateY(0deg);
  backface-visibility:hidden;                     /* qua 90° thì khuất, lộ trang giấy */
  transition:transform .55s cubic-bezier(.3,.8,.35,1),box-shadow .35s;
}
.art-bia::before{                 /* gáy khâu bên trái */
  content:"";position:absolute;left:13px;top:14px;bottom:14px;width:10px;opacity:.5;
  background-image:radial-gradient(circle at 50% 50%,var(--ink) 0 2.5px,transparent 2.6px);
  background-size:10px 22px;background-repeat:repeat-y;
}
.art-bia::after{                  /* mặt giấy hứng sáng dồn về góc dưới-phải đang nhấc */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(130% 130% at 104% 50%,rgba(255,255,255,.6),transparent 58%);
  border-radius:inherit;
}
.art:hover .art-bia,.art:focus-visible .art-bia{
  transform:rotateY(-42deg);                      /* giở hờ khoảng 1/3 */
  box-shadow:-8px 10px 26px -10px rgba(59,49,40,.5);
}
.art:hover .art-bia::after,.art:focus-visible .art-bia::after{opacity:1}

/* Bấm: giở hẳn trang qua bên kia rồi phóng to trước khi mở bài */
.art.mo-ra{transform:rotate(0) scale(1.07);z-index:9;transition:transform .6s cubic-bezier(.25,.8,.3,1)}
.art.mo-ra .art-bia{
  transition:transform .72s cubic-bezier(.3,.75,.3,1);
  transform:rotateY(-150deg);
  box-shadow:-16px 12px 30px -12px rgba(59,49,40,.45);
}

.art .tag{align-self:flex-start;line-height:20px;margin-bottom:4px}
.art .t{display:block;font-family:var(--hand);font-size:23px;line-height:var(--ke);margin:0;
  overflow-wrap:break-word}
.art .by{font-size:13.5px;color:var(--muted);font-style:italic;line-height:var(--ke)}
/* margin-top:auto đẩy dòng này xuống đáy bìa, nên dù tên bài dài 1 hay 2 dòng
   thì "Mở bài viết" ở mọi thẻ vẫn nằm đúng cùng một hàng */
.art .open{font-size:13px;font-weight:700;color:var(--red);line-height:var(--ke);margin-top:auto}

/* Điện thoại & máy tính bảng: không có chuột nên :hover không bao giờ xảy ra.
   Hé sẵn bìa một góc nhỏ để người dùng thấy bên dưới còn trang giấy,
   và bỏ hiệu ứng dính-hover trên ảnh khi chạm. */
@media (hover:none){
  .art-bia{transform:rotateY(-9deg);box-shadow:-3px 6px 14px -6px rgba(59,49,40,.45)}
  .art-bia::after,.art-trang::after{opacity:.45}
  .art:hover .art-bia,.art:focus-visible .art-bia{transform:rotateY(-9deg)}
  .art.mo-ra .art-bia{transform:rotateY(-150deg)}
  .snap:hover,.note:hover,.polaroid:hover,.masonry .snap:hover{transform:none}
  .snap:active{transform:scale(1.02)}
  .btn:hover{transform:none;box-shadow:4px 4px 0 var(--ink)}
  /* Chuẩn vùng chạm tối thiểu 44x44px của iOS/Android */
  .nhac button{width:44px;height:44px}
  .modal-close{width:46px;height:46px}
  .lb .x,.lb .nav{width:48px;height:48px}
  .chip{padding-block:12px}
  .mainnav a{padding:15px 16px}
  .side-list button{padding:13px 11px}
}

/* Máy yếu / người dùng tắt hiệu ứng: không lật, chỉ nhấc nhẹ */
@media (prefers-reduced-motion:reduce){
  .art-bia{transition:none}
  .art:hover .art-bia,.art:focus-visible .art-bia,.art.mo-ra .art-bia{transform:none}
  .art:hover,.art:focus-visible{transform:rotate(0) translateY(-4px)}
}

/* ── Reader modal ─────────────────────────────── */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal[open]{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(40,32,24,.72);backdrop-filter:blur(3px)}
.modal-box{position:relative;width:min(1120px,100%);max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;
  background:var(--paper2);border:2px solid var(--ink);border-radius:18px;
  box-shadow:10px 10px 0 rgba(0,0,0,.35);overflow:hidden}

.modal-head{display:flex;align-items:flex-start;gap:16px;padding:20px 24px 15px;border-bottom:2px dashed var(--line)}
.modal-head h3{font-family:var(--hand);font-size:28px;margin:0;line-height:1.1}
.modal-head .by{font-size:13.5px;color:var(--muted);font-style:italic}
/* Ở khổ hẹp, danh sách bài bên cạnh bị ẩn nên đưa chỉ báo vị trí lên đây,
   không thì người đọc trên điện thoại không biết mình đang ở bài thứ mấy. */
.modal-head .pos-nho{display:none;font-size:12px;font-weight:700;color:var(--muted);
  margin-top:3px;letter-spacing:.04em}
.modal-close{margin-left:auto;flex:0 0 auto;width:42px;height:42px;border-radius:12px;border:2px solid var(--ink);
  background:var(--red);color:#fff;font-size:20px;font-weight:800;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.modal-close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* Than modal: noi dung + danh sach ben canh */
.reader{display:grid;grid-template-columns:1fr 288px;min-height:0;flex:1}
.modal-body{overflow:auto;padding:26px 34px 34px;font-family:var(--serif);font-size:17px;line-height:1.75}

/* Nội dung bài viết đã được tools/gen-baiviet.py chuẩn hoá thành
   .bv (văn xuôi) hoặc .bv.tho (thơ) — hai kiểu căn lề khác nhau. */
.bv{max-width:60ch;margin:0 auto}
.bv p{margin:0 0 .85em}
.bv p:last-child{margin-bottom:0}

/* Văn xuôi: căn đều hai bên, thụt đầu dòng theo lối trình bày tiếng Việt */
.bv:not(.tho) p{text-align:justify;text-indent:1.5em;hyphens:none}

/* Thơ: khối căn giữa trang nhưng các câu vẫn thẳng lề trái với nhau,
   không thụt đầu dòng, không căn đều (câu thơ không được kéo giãn) */
.bv.tho{width:fit-content;max-width:100%;margin:0 auto}
.bv.tho p{text-align:left;text-indent:0;margin-bottom:1.35em}

.modal-body img{margin:16px auto;border-radius:6px}
.modal-body iframe{width:100%;height:58vh;height:58dvh;border:0}
.modal-note{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin-top:22px;
  padding-top:14px;border-top:2px dashed var(--line)}

.reader-side{border-left:2px dashed var(--line);overflow:auto;padding:20px 18px;background:rgba(240,192,74,.07)}
.reader-side h4{font-family:var(--hand);font-size:20px;margin:0 0 4px}
.reader-side .cnt{font-size:12px;color:var(--muted);margin-bottom:12px}
.reader-side ol{list-style:none;margin:0;padding:0;counter-reset:n}
.reader-side li{counter-increment:n}
.reader-side button{width:100%;text-align:left;background:none;border:0;border-radius:10px;cursor:pointer;
  font-family:inherit;color:var(--ink);font-size:14px;line-height:1.35;padding:9px 11px;display:flex;gap:9px;
  transition:.15s}
.reader-side button::before{content:counter(n,decimal-leading-zero);font-size:11px;font-weight:800;
  color:var(--muted);padding-top:2px}
.reader-side button:hover{background:#fff;box-shadow:2px 2px 0 var(--ink)}
.reader-side button em{display:block;font-style:normal;font-size:12px;color:var(--muted)}
.reader-side li[aria-current="true"] button{background:var(--ink);color:var(--paper)}
.reader-side li[aria-current="true"] button::before,
.reader-side li[aria-current="true"] button em{color:#c3b6a2}

/* Thanh dieu huong duoi modal */
.modal-foot{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:2px dashed var(--line);
  background:var(--paper)}
.modal-foot .pos{font-size:13px;color:var(--muted);margin:0 auto;text-align:center}
/* min-width:0 là bắt buộc: mặc định phần tử flex không co nhỏ hơn nội dung,
   nên tên bài dài sẽ đẩy nút tràn ra ngoài mép cửa sổ. */
.modal-foot .btn{padding:10px 16px;font-size:14px;box-shadow:3px 3px 0 var(--ink);
  max-width:42%;min-width:0;overflow:hidden}
.modal-foot .btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-foot .btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}

@media(max-width:900px){
  .reader{grid-template-columns:1fr}
  .reader-side{display:none}
  .modal-foot .pos{display:none}
  .modal-head .pos-nho{display:block}
  .modal-foot{gap:8px;padding:11px 12px}
  .modal-foot .btn{flex:1 1 0;max-width:none;min-width:0;justify-content:center;
    padding:11px 10px;font-size:13.5px}
}

/* ── Lightbox ảnh ───────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;
  background:rgba(30,24,18,.9);padding:24px}
.lb[open]{display:flex}
.lb img{max-width:94vw;max-height:82vh;max-height:82dvh;border:10px solid #fff;border-bottom-width:44px;border-radius:3px;
  box-shadow:0 30px 60px -20px #000}
.lb .cap{position:absolute;bottom:8%;left:0;right:0;text-align:center;font-family:var(--hand);
  font-size:20px;color:#4a3f34;pointer-events:none}
.lb .x,.lb .nav{position:absolute;background:#fff;border:2px solid var(--ink);border-radius:12px;
  width:48px;height:48px;font-size:22px;font-weight:800;cursor:pointer;color:var(--ink)}
.lb .x{top:20px;right:20px}
.lb .nav.prev{left:20px;top:50%;transform:translateY(-50%)}
.lb .nav.next{right:20px;top:50%;transform:translateY(-50%)}

/* ── Footer ─────────────────────────────────────────────────── */
footer{border-top:2px dashed var(--line);padding:52px 0 34px;font-size:14.5px;margin-top:20px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer h2{font-family:var(--hand);font-size:22px;font-weight:400;margin:0 0 10px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:var(--muted)}
footer a:hover{color:var(--red)}
.fbot{margin-top:40px;padding-top:18px;border-top:2px dashed var(--line);display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted)}

/* ── Nút lên đầu trang ──────────────────────────────────────── */
.totop{position:fixed;right:22px;bottom:22px;z-index:70;width:50px;height:50px;border-radius:14px;
  border:2px solid var(--ink);background:var(--yellow);color:var(--ink);font-size:20px;font-weight:800;
  cursor:pointer;box-shadow:4px 4px 0 var(--ink);opacity:0;pointer-events:none;transition:.25s}
.totop.show{opacity:1;pointer-events:auto}
.totop:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}

/* ── Reveal on scroll ───────────────────────────────────────── */
/* Hai dòng này phải cùng tiền tố html.js — nếu chỉ dòng trên có,
   selector ẩn sẽ mạnh hơn selector hiện và nội dung không bao giờ lộ ra. */
html.js .rv{opacity:0;transform:translateY(20px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none}
  *{animation:none !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .notes,.notes.three{grid-template-columns:repeat(2,1fr)}
  .arts{grid-template-columns:repeat(2,1fr)}
  .wall,.wall.four{grid-template-columns:repeat(3,1fr)}
  .fg{grid-template-columns:1fr 1fr}
  .letter{padding:34px 26px}
  .letter .float{float:none;width:auto;margin:0 auto 22px}
  .burger{display:block}
  .mainnav{position:fixed;inset:78px 0 auto 0;flex-direction:column;gap:0;background:var(--paper2);
    border-bottom:2px solid var(--ink);padding:12px;display:none;box-shadow:0 14px 30px -18px rgba(0,0,0,.5)}
  .mainnav.open{display:flex}
  .mainnav a{border-radius:10px;font-size:17px;padding:14px 16px}
}
@media(max-width:600px){
  .bar .wrap{height:68px}
  .mainnav{inset:68px 0 auto 0}
  .logo{font-size:25px}
  /* Giữ tối thiểu 2 cột: một cột làm thẻ quá to, phải cuộn rất dài mới
     xem hết 4 mục lục hoặc 32 bài viết */
  .notes,.notes.three,.arts{grid-template-columns:repeat(2,1fr);gap:14px}
  .note .body{padding:12px 13px 15px}
  .note h3{font-size:21px}
  .note p{font-size:13px}
  .art .t{font-size:20px}
  .art .by{font-size:12.5px}
  /* Thẻ hẹp lại còn ~165px: thu gáy khâu và lề đỏ, không thì riêng phần
     trang trí đã chiếm gần một phần ba bề ngang */
  .arts{--le:24px}
  .art-bia,.art-trang{padding-left:calc(var(--le) + 10px);padding-right:12px}
  .art-bia::before{left:7px;width:8px;background-size:8px 20px}
  .art{min-height:170px}
  .art-trang .doc{font-size:17px}
  .wall,.wall.four{grid-template-columns:repeat(2,1fr)}
  .fg{grid-template-columns:1fr}
  .modal-body{padding:20px 18px 26px;font-size:16.5px}
}

/* ── Nút nhạc nền (chỉ trang chủ) ───────────────────────────── */
.nhac{position:fixed;left:22px;bottom:22px;z-index:70;display:none;align-items:center;gap:10px;
  padding:8px 8px 8px 10px;border-radius:16px;border:2px solid var(--ink);background:var(--yellow);
  box-shadow:4px 4px 0 var(--ink);font-family:var(--sans);max-width:calc(100vw - 44px)}
.nhac.san-sang{display:flex}
.nhac button{width:38px;height:38px;flex:0 0 auto;border-radius:11px;border:2px solid var(--ink);
  background:var(--paper2);color:var(--ink);font-size:16px;cursor:pointer;font-family:inherit;
  display:grid;place-items:center;padding:0}
.nhac button:hover{background:#fff}
.nhac button:active{transform:translate(1px,1px)}
.nhac .ke{display:none}
.nhac.nhieu-bai .ke{display:grid}

/* 3 vạch sóng nhạc khi đang phát */
.song{display:flex;align-items:flex-end;gap:2px;height:15px}
.song i{width:3px;height:5px;background:var(--ink);border-radius:2px}
.nhac.dang-phat .song i{animation:song .9s ease-in-out infinite}
.nhac.dang-phat .song i:nth-child(2){animation-delay:.15s}
.nhac.dang-phat .song i:nth-child(3){animation-delay:.3s}
@keyframes song{0%,100%{height:4px}50%{height:15px}}

.nhac .ten{font-size:12.5px;line-height:1.25;color:#4a3a12;max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nhac .ten b{display:block;font-weight:700}
.nhac .ten span{font-size:11px;opacity:.75}
.nhac input[type=range]{width:74px;accent-color:var(--ink);cursor:pointer;flex:0 0 auto}

@media(max-width:600px){
  .nhac{left:14px;bottom:14px;padding:6px}
  .nhac .ten,.nhac input[type=range]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nhac.dang-phat .song i{animation:none;height:10px}
}

/* ── Bản in / lưu PDF ───────────────────────────────────────── */
@media print{
  html.js .rv{opacity:1 !important;transform:none !important}
  body{background:#fff !important;color:#000;font-size:12pt;line-height:1.5}
  .bar,.totop,.nhac,.chips,.crumb,.cta,.btn,.modal-foot,.reader-side,
  .lb,.strip,.burger,.pin,footer .fg > div:nth-child(4){display:none !important}
  .modal{position:static;display:block;padding:0}
  .modal-bg{display:none}
  .modal-box,.letter,.note,.art,.snap,.polaroid{box-shadow:none !important;border-radius:0;
    transform:none !important;max-height:none}
  .letter::before,.polaroid::before{display:none}
  .modal-box{border:0;width:auto;max-height:none}
  .reader{display:block}
  .modal-body{overflow:visible;padding:0;font-size:12pt}
  section{padding:14pt 0;break-inside:avoid}
  .wrap{max-width:none;padding:0}
  h1,h2,.letter h3,.modal-head h3{break-after:avoid}
  .snap,.note,figure{break-inside:avoid}
  img{max-width:100% !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;word-break:break-all}
  footer{border-top:1px solid #000;margin-top:20pt;padding-top:10pt}
}

/* ── Video YouTube ──────────────────────────────────────────── */
.videos{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.video{background:#fff;border:2px solid var(--ink);border-radius:16px;padding:12px 12px 16px;
  box-shadow:var(--shadow-hard);margin:0}
.video:nth-child(odd){transform:rotate(-.8deg)}
.video:nth-child(even){transform:rotate(.6deg)}
.video .khung{position:relative;aspect-ratio:16/9;background:var(--ink);border-radius:8px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{font-family:var(--hand);font-size:22px;text-align:center;margin-top:10px;color:#4a3f34}
@media(max-width:800px){.videos{grid-template-columns:1fr}}

/* ── Lưới masonry cho trang chi tiết album ──────────────────────
   82% ảnh của lớp là ảnh ngang, dải tỉ lệ 0.56–1.78. Lưới ô đều
   phải cắt trung bình 39% mỗi tấm, nên trang album giữ tỉ lệ gốc. */
.masonry{columns:4;column-gap:22px}
.masonry .snap{break-inside:avoid;width:100%;margin:0 0 22px;display:block}
.masonry .snap img{aspect-ratio:auto;width:100%;height:auto}
.masonry .snap:hover,.masonry .snap:focus-visible{transform:rotate(0) scale(1.03)}
@media(max-width:1000px){.masonry{columns:3}}
@media(max-width:700px){.masonry{columns:2}}
@media(max-width:460px){.masonry{columns:1}}

/* ── Liên kết sang album khác ───────────────────────────────── */
.khac{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.khac .note{box-shadow:4px 4px 0 var(--ink)}
.khac .note:hover,.khac .note:focus-visible{box-shadow:6px 7px 0 var(--ink)}
.khac .note img{aspect-ratio:16/10}
.khac .note .body{padding:12px 14px 16px}
.khac .note h3{font-size:21px;margin:6px 0 2px}
.khac .note .tag{font-size:10px;padding:2px 8px}
@media(max-width:900px){.khac{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.khac{grid-template-columns:1fr}}