/* ═══════════════════════════════════════════════════════════
   SỔ TAY CỦA CHÚNG MÌNH — Vibe 1: CUỐN NHẬT KÝ GIẤY
   Giấy kem · chữ viết tay · ảnh dán băng dính · lề sổ
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#FBF6EA;
  --paper-2:#F4ECDA;
  --paper-3:#EFE4CD;
  --card:#FFFDF7;
  --ink:#3A3129;
  --ink-2:#6E6055;
  --ink-3:#756757;        /* 5.08:1 trên giấy (trước: #9A8A7B = 3.09:1) */
  --rose:#A8474F;         /* 5.29:1 (trước: #C4737B = 3.20:1) */
  --rose-soft:#E8C6C6;
  --sage:#5E6B52;         /* 5.26:1 (trước: #7C8C6F = 3.34:1) */
  --gold:#8A6420;         /* 4.96:1 (trước: #B98A3C = 2.88:1) */
  --line:#DFD2B8;
  --rule:#D8E3EC;
  --tape:rgba(214,192,140,.55);

  --f-hand:"Playpen Sans", "Comic Sans MS", cursive;
  --f-body:"Lora", Georgia, "Times New Roman", serif;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem; --s6:4.5rem; --s7:6rem;
  --wrap:1120px;
  --ease:cubic-bezier(.34,.72,.28,1);
  --dur:260ms; --dur-slow:640ms;
  --z-nav:100; --z-modal:300;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; color:var(--ink); font-family:var(--f-body);
  font-size:1.04rem; line-height:1.85; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  /* vân giấy: 2 lớp gradient rất nhạt, không cần ảnh ngoài */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(196,115,123,.055), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(124,140,111,.06), transparent 46%),
    repeating-linear-gradient(103deg, rgba(160,140,110,.035) 0 1px, transparent 1px 4px);
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{cursor:pointer; background:none; border:0; font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--f-hand); font-weight:600; margin:0; line-height:1.34}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--rose); outline-offset:3px; border-radius:4px}

.wrap{width:min(100% - 2.2rem, var(--wrap)); margin-inline:auto}
@media (min-width:768px){.wrap{width:min(100% - 4rem, var(--wrap))}}
.skip{position:absolute; left:-9999px; top:0; z-index:999; background:var(--rose); color:#fff; padding:.8rem 1.2rem; font-family:var(--f-hand)}
.skip:focus{left:0; top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- chữ & tiện ích ---------- */
.hand{font-family:var(--f-hand)}
.h-cover{font-family:var(--f-hand); font-size:clamp(2.5rem,7.5vw,4.6rem); line-height:1.2}
.h-sec{font-family:var(--f-hand); font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.28}
.h-entry{font-family:var(--f-hand); font-size:clamp(1.3rem,2.6vw,1.75rem)}
.lead{font-size:clamp(1.02rem,1.5vw,1.12rem); color:var(--ink-2); max-width:60ch}
.tnum{font-variant-numeric:tabular-nums}
section{padding-block:var(--s6)}
@media (min-width:1024px){section{padding-block:var(--s7)}}

.stamp{
  display:inline-block; font-family:var(--f-hand); font-size:.78rem; font-weight:600;
  letter-spacing:.06em; color:var(--rose); border:2px dashed var(--rose-soft);
  border-radius:6px; padding:.3rem .8rem; transform:rotate(-1.5deg);
}
.stamp--sage{color:var(--sage); border-color:#CBD6BF}
.stamp--gold{color:var(--gold); border-color:#E7D3A8}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:50px; padding:.75rem 1.6rem; font-family:var(--f-hand); font-weight:600; font-size:.98rem;
  border:2px solid var(--ink); border-radius:999px; background:var(--card);
  box-shadow:3px 3px 0 rgba(58,49,41,.85);
  transition:transform 140ms var(--ease), box-shadow 140ms var(--ease), background var(--dur) var(--ease);
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(58,49,41,.85); background:#fff}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(58,49,41,.85)}
.btn--rose{background:var(--rose); color:#fff; border-color:#8E4C53}
.btn--rose:hover{background:#8E3A42}  /* chữ trắng 7.4:1 */

.icon{width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.icon--fill{fill:currentColor; stroke:none}

.reveal{opacity:0; transform:translateY(20px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

/* ---------- ảnh dán băng dính ---------- */
.snap{position:relative; background:#fff; padding:.6rem; border-radius:2px;
  box-shadow:0 10px 24px -14px rgba(58,49,41,.5), 0 2px 4px rgba(58,49,41,.12)}
.snap img{width:100%; display:block}
.snap figcaption{
  margin:.8rem .35rem .35rem;
  font-family:var(--f-hand); font-size:.86rem; color:var(--ink-2); text-align:center;
  line-height:1.35;
}
.snap::before{ /* băng dính */
  content:""; position:absolute; top:-.7rem; left:50%; width:5.2rem; height:1.5rem;
  transform:translateX(-50%) rotate(-2.5deg);
  background:var(--tape);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.snap--tape2::before{left:12%; transform:rotate(-8deg)}
.snap--tape2::after{
  content:""; position:absolute; top:-.6rem; right:10%; width:4.4rem; height:1.4rem;
  transform:rotate(7deg); background:var(--tape);
}
.tilt-l{transform:rotate(-1.8deg)} .tilt-r{transform:rotate(1.6deg)}
.tilt-l2{transform:rotate(-3.2deg)} .tilt-r2{transform:rotate(2.8deg)}

/* ---------- thanh điều hướng ---------- */
.hdr{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(251,246,234,.9); backdrop-filter:blur(10px);
  border-bottom:1.5px solid transparent; transition:border-color var(--dur) var(--ease);
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:70px}
.brand{display:flex; align-items:center; gap:.65rem; font-family:var(--f-hand)}
.brand__heart{width:38px; height:38px; flex:none; display:grid; place-items:center; color:var(--rose)}
.brand__name{display:block; font-weight:600; font-size:1.1rem; line-height:1.2}
.brand__sub{display:block; font-family:var(--f-body); font-size:.72rem; color:var(--ink-3); font-style:italic}

.nav{display:none}
@media (min-width:1000px){
  .nav{display:flex; align-items:center; gap:.2rem}
  .nav a{
    font-family:var(--f-hand); font-size:.94rem; padding:.45rem .85rem; border-radius:999px;
    color:var(--ink-2); transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav a:hover{background:var(--paper-3); color:var(--ink)}
  .nav a[aria-current="true"]{background:var(--rose); color:#fff}
}
.burger{display:grid; place-items:center; width:46px; height:46px; border:2px solid var(--ink); border-radius:10px; background:var(--card); box-shadow:2px 2px 0 rgba(58,49,41,.8)}
@media (min-width:1000px){.burger{display:none}}

.drawer{
  position:fixed; inset:0; z-index:200; background:var(--paper); padding:1.3rem;
  display:flex; flex-direction:column; transform:translateY(-102%);
  transition:transform 380ms var(--ease); visibility:hidden;
}
.drawer[data-open="true"]{transform:none; visibility:visible}
.drawer__top{display:flex; justify-content:space-between; align-items:center}
.drawer nav{margin-top:1.8rem; display:grid; gap:.55rem}
.drawer nav a{
  font-family:var(--f-hand); font-size:1.28rem; padding:.7rem 1rem;
  border:2px solid var(--ink); border-radius:12px; background:var(--card);
  box-shadow:3px 3px 0 rgba(58,49,41,.8);
}
.drawer nav a:hover{background:var(--rose-soft)}
.drawer__foot{margin-top:auto; padding-top:1.5rem; font-family:var(--f-hand); color:var(--ink-3); font-size:.9rem}

/* ---------- bìa sổ ---------- */
.cover{padding-block:var(--s5) var(--s6); position:relative}
.cover__grid{display:grid; gap:var(--s4); align-items:center}
@media (min-width:960px){.cover__grid{grid-template-columns:1.05fr .95fr; gap:var(--s5)}}
.cover__label{
  background:var(--card); border:2px solid var(--ink); border-radius:4px;
  padding:1.9rem 1.6rem; position:relative; box-shadow:5px 5px 0 rgba(58,49,41,.16);
}
@media (min-width:600px){.cover__label{padding:2.4rem 2.2rem}}
.cover__label::after{ /* băng dính góc */
  content:""; position:absolute; top:-.75rem; right:1.6rem; width:5rem; height:1.6rem;
  transform:rotate(6deg); background:var(--tape);
}
.cover__label h1{margin-top:.7rem}
.cover__label h1 em{font-style:normal; color:var(--rose)}
.cover__rule{height:2px; background:var(--line); margin:1.4rem 0; border-radius:2px}
.cover__meta{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-family:var(--f-hand); font-size:.92rem; color:var(--ink-2)}
.cover__meta b{color:var(--rose)}
.cover__actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem}
.cover__pile{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.cover__pile .snap:nth-child(1){grid-column:span 2}
.doodle{position:absolute; color:var(--rose); opacity:.5; pointer-events:none}
.doodle--1{top:-1.6rem; left:-1.2rem; width:70px; transform:rotate(-16deg)}
.doodle--2{bottom:-2rem; right:-.6rem; width:86px; color:var(--sage); transform:rotate(9deg)}
@media (max-width:700px){.doodle{display:none}}

/* ---------- mục lục ---------- */
.toc{background:var(--paper-2); border-block:1.5px solid var(--line)}
.toc__box{background:var(--card); border:2px solid var(--ink); border-radius:4px; padding:1.6rem 1.4rem; box-shadow:5px 5px 0 rgba(58,49,41,.14)}
@media (min-width:600px){.toc__box{padding:2rem 2.2rem}}
.toc__list{margin-top:1.4rem; display:grid; gap:.15rem}
.toc__row{display:flex; align-items:baseline; gap:.7rem; padding:.55rem .2rem; border-radius:6px; transition:background var(--dur) var(--ease)}
.toc__row:hover{background:var(--paper-3)}
.toc__n{font-family:var(--f-hand); font-size:.86rem; color:var(--rose); width:2.1rem; flex:none}
.toc__t{font-family:var(--f-hand); font-size:1.06rem}
.toc__dots{flex:1; height:1px; background:repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 7px); transform:translateY(-4px)}
.toc__d{font-size:.88rem; color:var(--ink-3); white-space:nowrap}

/* ---------- các trang nhật ký ---------- */
.entry{position:relative; padding-block:var(--s5)}
.entry + .entry{border-top:1.5px dashed var(--line)}
.entry__grid{display:grid; gap:var(--s4)}
@media (min-width:900px){
  .entry__grid{grid-template-columns:7.5rem 1fr 1fr; gap:var(--s3) var(--s4); align-items:start}
  .entry--flip .entry__media{grid-column:2; grid-row:1}
  .entry--flip .entry__body{grid-column:3; grid-row:1}
}
.entry__date{
  font-family:var(--f-hand); font-size:.92rem; color:var(--rose); line-height:1.4;
  border-left:3px solid var(--rose-soft); padding-left:.8rem;
}
.entry__date b{display:block; font-size:1.5rem; color:var(--ink)}
.entry__body h3{margin-bottom:.8rem}
.entry__body p{color:var(--ink-2)}
.entry__body p + p{margin-top:.9rem}
.margin-note{
  margin-top:1.3rem; font-family:var(--f-hand); font-size:.94rem; color:var(--sage);
  display:flex; gap:.6rem; align-items:flex-start; line-height:1.5;
}
.margin-note svg{flex:none; margin-top:.25rem}
.entry__media{display:grid; gap:1.1rem}
.entry__media--2{grid-template-columns:1fr 1fr; align-items:start}

/* ---------- thư viện ảnh ---------- */
.album{background:var(--paper-2); border-block:1.5px solid var(--line)}
.album__grid{display:grid; gap:1.5rem; margin-top:var(--s4)}
@media (min-width:620px){.album__grid{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.album__grid{grid-template-columns:repeat(4,1fr)}}
.album__grid button{padding:0; display:block; width:100%; text-align:left; background:none; border:0}
.album__grid .snap{transition:transform var(--dur) var(--ease)}
.album__grid button:hover .snap{transform:rotate(0) scale(1.028)}
.album__hint{margin-top:1.6rem; font-family:var(--f-hand); font-size:.92rem; color:var(--ink-3); display:flex; gap:.5rem; align-items:center}

.lb{position:fixed; inset:0; z-index:var(--z-modal); display:none; place-items:center; background:rgba(58,49,41,.94); padding:1.4rem}
.lb[data-open="true"]{display:grid}
.lb__inner{max-width:min(1000px,94vw)}
.lb img{max-width:100%; max-height:78vh; object-fit:contain; background:#fff; padding:.5rem; border-radius:2px}
.lb__cap{margin-top:1rem; text-align:center; font-family:var(--f-hand); color:var(--paper); font-size:1rem}
.lb__close{position:absolute; top:1.1rem; right:1.1rem; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--paper); color:var(--ink)}
.lb__nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:rgba(251,246,234,.9); color:var(--ink)}
.lb__nav--prev{left:1rem} .lb__nav--next{right:1rem}

/* ---------- phim dán trong sổ ---------- */
.reels__grid{display:grid; gap:1.8rem; margin-top:var(--s4)}
@media (min-width:760px){.reels__grid{grid-template-columns:1fr 1fr}}
.reel{
  position:relative; background:#fff; padding:.6rem; border-radius:2px;
  box-shadow:0 12px 28px -16px rgba(58,49,41,.55), 0 2px 4px rgba(58,49,41,.12);
}
.reel::before{content:""; position:absolute; top:-.7rem; left:50%; width:5.4rem; height:1.5rem; transform:translateX(-50%) rotate(-2deg); background:var(--tape)}
.reel--wide{grid-column:1/-1}
.reel__frame{position:relative; background:#2A241E; border-radius:2px; overflow:hidden}
.reel__frame video{width:100%; display:block; background:#2A241E}
.reel__cap{
  margin:.85rem .4rem .35rem;
  font-family:var(--f-hand); font-size:.9rem; color:var(--ink-2); line-height:1.4;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .6rem; justify-content:space-between;
}
.reel__cap span:last-child{color:var(--ink-3); font-size:.8rem; white-space:nowrap}
.reel__perf{ /* lỗ phim hai bên */
  position:absolute; top:0; bottom:0; width:.85rem;
  background-image:repeating-linear-gradient(180deg, transparent 0 .35rem, rgba(251,246,234,.85) .35rem .75rem, transparent .75rem 1.1rem);
  pointer-events:none;
}
.reel__perf--l{left:0} .reel__perf--r{right:0}
.reels__note{margin-top:var(--s3); font-family:var(--f-hand); font-size:.92rem; color:var(--ink-3)}

/* ---------- con số ---------- */
.nums{background:var(--paper-3); border-block:1.5px solid var(--line)}
.nums__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:var(--s4)}
@media (min-width:880px){.nums__grid{grid-template-columns:repeat(4,1fr)}}
.num{
  background:var(--card); border:2px solid var(--ink); border-radius:4px; padding:1.5rem 1.1rem;
  text-align:center; box-shadow:4px 4px 0 rgba(58,49,41,.14); position:relative;
}
.num:nth-child(odd){transform:rotate(-.9deg)} .num:nth-child(even){transform:rotate(.8deg)}
.num__n{font-family:var(--f-hand); font-weight:700; font-size:clamp(1.9rem,4.4vw,2.6rem); color:var(--rose); line-height:1.1}
.num__l{font-family:var(--f-hand); font-size:.88rem; color:var(--ink-2); margin-top:.4rem; line-height:1.4}

/* ---------- lá thư ---------- */
.letter__paper{
  background:var(--card);
  background-image:repeating-linear-gradient(180deg, transparent 0 2.1rem, var(--rule) 2.1rem calc(2.1rem + 1px));
  background-position:0 2.2rem;
  border:2px solid var(--ink); border-radius:4px; padding:2rem 1.4rem;
  box-shadow:6px 6px 0 rgba(58,49,41,.14); position:relative; overflow:hidden;
}
@media (min-width:700px){.letter__paper{padding:2.6rem 3.2rem 2.6rem 4.4rem}}
.letter__paper::before{ /* lề đỏ của vở */
  content:""; position:absolute; top:0; bottom:0; left:2.6rem; width:1.5px; background:var(--rose-soft);
}
@media (max-width:699px){.letter__paper::before{display:none}}
.letter__paper p{font-family:var(--f-hand); font-size:clamp(1rem,2vw,1.16rem); line-height:2.1rem; color:var(--ink)}
.letter__paper p + p{margin-top:2.1rem}
.letter__sign{margin-top:2.1rem; text-align:right; font-family:var(--f-hand); font-size:1.3rem; color:var(--rose)}

/* ---------- chân trang ---------- */
.ftr{background:var(--paper-2); border-top:1.5px solid var(--line); padding-block:var(--s5) var(--s3)}
.ftr__grid{display:grid; gap:var(--s3); align-items:start}
@media (min-width:760px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr h4{font-family:var(--f-hand); font-size:1rem; color:var(--rose)}
.ftr ul{margin-top:.9rem; display:grid; gap:.55rem; font-size:.94rem; color:var(--ink-2)}
.ftr ul a:hover{color:var(--rose)}
.ftr__about p{margin-top:1rem; font-size:.94rem; color:var(--ink-2); max-width:34ch}
.ftr__bottom{margin-top:var(--s4); padding-top:1.3rem; border-top:1.5px dashed var(--line); display:flex; flex-wrap:wrap; gap:.7rem; justify-content:space-between; font-family:var(--f-hand); font-size:.88rem; color:var(--ink-3)}

/* ---------- nút nổi ---------- */
#toTop{
  position:fixed; right:1rem; bottom:1rem; z-index:var(--z-nav);
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--card); color:var(--ink); border:2px solid var(--ink);
  box-shadow:3px 3px 0 rgba(58,49,41,.8); opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform 140ms var(--ease);
}
#toTop.is-on{opacity:1; pointer-events:auto}
#toTop:hover{transform:translate(-2px,-2px)}
@media (min-width:1024px){#toTop{right:1.5rem; bottom:1.5rem}}

/* ---------- địa điểm + trang chi tiết (thêm mới) ---------- */
/* #7 — hai phần này KHÔNG có trong linhanh.html nên phải tự thiết kế. Luật: chỉ
   THÊM rule mới ở dưới đây, không sửa một giá trị nào ở trên. Màu lấy nguyên từ
   biến sẵn có, không bịa màu mới:
     .loc        --sage   #5E6B52  → 5.26:1 trên giấy (--paper), 5.58:1 trên --card
     .loc__note  --ink-3  #756757  → 5.08:1 trên giấy, 5.38:1 trên --card
   Cả hai đều ≥ 4.5:1 nên chữ nhỏ vẫn đạt AA. */

/* dòng địa điểm — dùng chung cho .entry__date (trang chủ) và trang chi tiết.
   overflow-wrap + min-width:0 để địa điểm dài không đẩy vỡ .entry__grid ở 375px. */
.loc{
  display:flex; align-items:flex-start; gap:.42rem;
  margin-top:.5rem; font-family:var(--f-hand); font-size:.84rem; line-height:1.4;
  color:var(--sage); overflow-wrap:break-word;
}
.loc__pin{margin-top:.18em}
.loc__text{min-width:0}
.loc__note{display:block; margin-top:.12rem; font-size:.94em; color:var(--ink-3)}
.loc--page{margin-top:.7rem; font-size:.94rem}

/* tiêu đề trang nhật ký là link sang /ky-niem/<slug> — gạch chân mảnh để thấy là link */
.entry__titlelink{
  text-decoration:underline; text-decoration-thickness:2px;
  text-decoration-color:var(--rose-soft); text-underline-offset:.22em;
  transition:color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.entry__titlelink:hover{color:var(--rose); text-decoration-color:var(--rose)}

/* trang chi tiết một kỷ niệm */
.memory{padding-block:var(--s4) var(--s5)}
.memory__crumb{margin-bottom:var(--s2)}
.memory__back{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  font-family:var(--f-hand); font-size:.95rem; color:var(--rose);
}
.memory__back:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.22em}
.memory__head{max-width:60ch}
.memory__title{margin-top:.7rem}
.memory__date{margin-top:1.3rem; display:inline-block}
.memory__body{margin-top:var(--s4); max-width:64ch}
.memory__media{margin-top:var(--s5)}

.memory__pager{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1.5px dashed var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
}
.memory__pager-link{
  flex:0 1 22rem; min-width:0; display:grid; gap:.3rem;
  background:var(--card); border:2px solid var(--ink); border-radius:4px;
  padding:.9rem 1.1rem; box-shadow:3px 3px 0 rgba(58,49,41,.14);
  transition:transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.memory__pager-link:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(58,49,41,.18)}
.memory__pager-link--next{margin-left:auto; text-align:right}
.memory__pager-label{display:flex; align-items:center; gap:.4rem; font-family:var(--f-hand); font-size:.82rem; color:var(--rose)}
.memory__pager-link--next .memory__pager-label{justify-content:flex-end}
.memory__pager-title{font-family:var(--f-hand); font-size:1.02rem; color:var(--ink); overflow-wrap:break-word}

/* trang 404 — cùng vibe giấy, không phải trang trắng mặc định của Express */
.err{min-height:70vh; display:grid; place-items:center; padding-block:var(--s5)}
.err__box{
  position:relative; max-width:52ch;
  background:var(--card); border:2px solid var(--ink); border-radius:4px;
  padding:1.9rem 1.6rem; box-shadow:5px 5px 0 rgba(58,49,41,.16);
}
@media (min-width:600px){.err__box{padding:2.4rem 2.2rem}}
.err__box::after{ /* băng dính góc, như .cover__label */
  content:""; position:absolute; top:-.75rem; right:1.6rem; width:5rem; height:1.6rem;
  transform:rotate(6deg); background:var(--tape);
}
.err__code{margin-top:.8rem; font-family:var(--f-hand); font-weight:700; font-size:clamp(1.6rem,4.6vw,2.4rem); color:var(--rose); line-height:1.25}
.err__msg{margin-top:1rem; color:var(--ink-2)}
.err__actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem}

/* ---------- #51 — chặn trang trượt ngang ở 320px ----------
   CHỈ THÊM rule, không sửa một giá trị nào ở trên (luật giao diện của CLAUDE.md).

   Đo bằng CDP trên `main`: ở 320px `documentElement.scrollWidth` = 369 > 320. Thủ phạm là
   hai lưới ảnh — `.cover__pile` (bìa) và `.entry__media` (nhật ký). Cả hai là grid item nên
   mặc định mang `min-width:auto`, tức là KHÔNG được co nhỏ hơn min-content của chính nó;
   min-content của chúng lại do các track `1fr 1fr` bên trong quyết định (~351px ở bìa), nên
   ở 320px cái hộp cứ rộng 351px và đẩy cả trang trượt ngang. Các `.snap` bên trong cũng là
   grid item nên cũng cần được phép co, nếu không track vẫn bị sàn min-content giữ lại.

   `min-width:0` chỉ gỡ cái sàn đó. Ảnh đã có `.snap img{width:100%}` nên tự thu nhỏ theo
   track; từ 768px trở lên vị trí mọi phần tử không đổi một pixel nào (đã đo).

   Vì sao không thêm `overflow-x:hidden`: `body` VỐN ĐÃ có nó (dòng 38, nguyên bản), mà
   trang vẫn trượt ngang — đo được `documentElement.scrollWidth` = 369 ở 320px. Che bằng
   overflow chỉ giấu phần tràn chứ không ngăn nó tràn (#51 ghi rõ). */
.cover__pile,
.entry__media,
.cover__pile > .snap,
.entry__media > .snap{min-width:0}