/* Sổ nhật ký kỷ niệm lật từng trang.
   Mọi kích thước trong sổ tính theo em, với 1em = 1/20 bề ngang một trang,
   nên cả cuốn sổ co giãn theo màn hình mà không vỡ bố cục. */

:root {
  --desk: #D3A671;
  --desk-shade: rgba(66, 36, 14, 0.32);
  /* Vân gỗ: nhiễu kéo dài theo chiều ngang, cắt thành từng vòng (thớ gỗ) và sợi mảnh */
  --desk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='400'%3E%3Cfilter id='r' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.028' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.2 0 0 0 0 0.08 0.16 0 0 0 0'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.45' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.16 0 0 0 0 0.06 0.9 0 0 0 -0.4'/%3E%3C/filter%3E%3Crect width='1200' height='400' filter='url(%23r)'/%3E%3Crect width='1200' height='400' filter='url(%23f)'/%3E%3C/svg%3E");
  --paper: #FFFDF1;
  /* Màu chữ tách riêng khỏi màu viền, hình vẽ và nền trang. */
  --text: #000000;
  --text-soft: var(--text);
  --text-accent: var(--text);
  --text-accent-dark: var(--text);
  --text-red: var(--text);
  /* Trái tim luôn đỏ, độc lập với màu chữ và màu xanh của bìa. */
  --heart: #D64550;
  --heart-soft: #FBE0E3;
  --ink: #4E6E59;
  --ink-soft: #738675;
  --wine: #5F8066;
  --wine-dark: #3F624B;
  --red: #B97769;
  --cover: #FFFBC8;
  --cover-spine: #272B27;
  --inside: #EAF1E5;
  --note-yellow: #FFF1A9;
  --note-pink: #F7D5CD;
  --note-blue: #D8EAD9;
  --coupon: #F9E4D8;
  --coupon-blue: #E4F0DF;

  --hand: 'Patrick Hand', 'Comic Sans MS', cursive;
  --script: 'Dancing Script', 'Brush Script MT', cursive;
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Khoảng trống quanh cuốn sổ */
  --side: max(64px, env(safe-area-inset-left), env(safe-area-inset-right));
  --top: 24px;
  --bottom: 24px;
  --vh: 100vh;

  /* Bề ngang một trang: vừa với cả chiều ngang lẫn chiều dọc, tỉ lệ trang 3:4 */
  --pw: min(calc((100vw - 2 * var(--side)) / 2), calc((var(--vh) - var(--top) - var(--bottom)) * 0.75), 460px);
  --ph: calc(var(--pw) * 4 / 3);
}

@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

/* Điện thoại cầm ngang: màn hình thấp nên thu nhỏ khoảng trống tối đa */
@media (max-height: 540px) {
  :root {
    --side: max(56px, env(safe-area-inset-left), env(safe-area-inset-right));
    --top: 10px;
    --bottom: 10px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

/* Mặt bàn gỗ: ánh đèn ở giữa, mép bàn tối dần, khe nối các tấm ván,
   vân gỗ và các tấm ván đậm nhạt xen nhau. */
body,
.rotate {
  background-color: var(--desk);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 50%, var(--desk-shade)),
    radial-gradient(ellipse 60% 55% at 50% 40%, rgba(255, 243, 220, 0.3), transparent),
    repeating-linear-gradient(to bottom, rgba(74, 40, 16, 0.3) 0 1px, rgba(255, 240, 214, 0.18) 1px 2px, transparent 2px 190px),
    var(--desk-grain),
    repeating-linear-gradient(to bottom, rgba(120, 66, 24, 0.07) 0 190px, transparent 190px 380px, rgba(255, 236, 204, 0.08) 380px 570px);
  background-size: auto, auto, auto, 1200px 400px, auto;
}

body {
  overflow: hidden;
  font-family: var(--hand);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; }

/* ---------- Sân khấu và cuốn sổ ---------- */

.stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--top) 0 var(--bottom);
}

.book {
  position: relative;
  flex: none;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  font-size: calc(var(--pw) / 20);
  perspective: calc(var(--pw) * 5);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Bóng của cuốn sổ trên mặt bàn: nửa phải (sổ gấp, bìa trước ở trên), cả cuốn (sổ mở),
   nửa trái (sổ gấp, bìa sau ở trên). app.js chuyển giữa ba bóng đúng lúc tờ giấy
   chạm mặt bàn hoặc nhấc lên, để không có bóng nằm sẵn dưới khoảng bàn trống. */
.desk-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0;
  box-shadow: 0 1.1em 2.2em rgba(66, 36, 14, 0.38), 0 0.2em 0.5em rgba(66, 36, 14, 0.26);
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.desk-shadow--r { left: 50%; right: 0; border-radius: 0 0.4em 0.4em 0; }
.desk-shadow--f { left: 0; right: 0; border-radius: 0.4em; }
.desk-shadow--l { left: 0; right: 50%; border-radius: 0.4em 0 0 0.4em; }

@media (prefers-reduced-motion: reduce) {
  .desk-shadow { transition: none !important; }
}

.leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* Ruột sổ nhỏ hơn bìa một chút để khi gấp kín không lộ viền giấy ở mép ngoài. */
.leaf--paper {
  top: 0.14em;
  width: calc(50% - 0.14em);
  height: calc(100% - 0.28em);
}

/* Mặt trong của hai bìa cũng lùi khỏi mép bìa cứng; nhờ vậy bìa đối diện
   không lộ nền xanh ở các cạnh và góc bo khi cuốn sổ đóng về một phía. */
.leaf--cover > .face.skin-inside { inset: 0.14em; }

.leaf.is-flipped { transform: rotateY(-180deg); }
.leaf.is-turning, .leaf.is-dragging { will-change: transform; }

/* Chỉ thay mặt phẳng bằng các dải khi giấy đang cong; trang gốc vẫn giữ tương tác. */
.leaf.is-curling > .face { visibility: hidden; }
.curl-layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  pointer-events: none;
}
.curl-strip {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.curl-side {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0.05px);
}
.curl-side--back { transform: rotateY(180deg) translateZ(0.05px); }
.curl-side > .curl-copy {
  top: 0;
  right: auto;
  bottom: auto;
  visibility: visible;
  transform: none;
  border-radius: 0;
}
/* Bóng của từng dải là một lớp màu riêng, chỉ đổi opacity: GPU tự pha màu mỗi khung hình,
   không phải vẽ lại chữ và ảnh của cả trang (đổi background thì phải vẽ lại, rất giật trên điện thoại). */
.curl-shading {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgb(35, 27, 20);
  opacity: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0.1px);
  will-change: opacity;
}
.curl-shading--back { transform: rotateY(180deg) translateZ(0.1px); }

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0 0.35em 0.35em 0;
}

.face--back {
  transform: rotateY(180deg);
  border-radius: 0.35em 0 0 0.35em;
}

/* Hai mặt bìa cứng được tách một khoảng cực nhỏ trong không gian 3D.
   Tránh Safari/Chrome đổi lớp hiển thị đột ngột khi bìa đi qua các góc nghiêng. */
.leaf--cover > .face--front {
  transform: translateZ(0.1px);
}

.leaf--cover > .face--back {
  transform: rotateY(180deg) translateZ(0.1px);
}

/* Bóng ở gáy sổ */
.face::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2.4em;
  z-index: 3;
  background: linear-gradient(to right, rgba(54, 77, 59, 0.18), rgba(54, 77, 59, 0));
  pointer-events: none;
}

.face--back::before {
  left: auto;
  right: 0;
  background: linear-gradient(to left, rgba(54, 77, 59, 0.18), rgba(54, 77, 59, 0));
}

/* Mặt ngoài bìa là bìa cứng phẳng, không có nếp gáy */
.face.skin-cover::before { display: none; }

/* Trang giấy hơi tối đi khi đang lật */
.shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: var(--shade, 0);
  pointer-events: none;
  background: linear-gradient(to left, rgba(20, 20, 40, 0.16), rgba(20, 20, 40, 0) 70%);
}

.face--back .shade {
  background: linear-gradient(to right, rgba(20, 20, 40, 0.16), rgba(20, 20, 40, 0) 70%);
}

/* Bìa cứng không cong như giấy nên không tối đi khi lật */
.skin-cover .shade,
.skin-inside .shade { display: none; }

/* ---------- Chất liệu trang ---------- */

.skin-paper {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 1.28em,
      rgba(102, 130, 145, 0.14) 1.28em,
      rgba(102, 130, 145, 0.14) calc(1.28em + 1px)
    ),
    radial-gradient(circle at 18% 12%, rgba(116, 83, 60, 0.035) 0 0.06em, transparent 0.07em),
    radial-gradient(circle at 72% 68%, rgba(116, 83, 60, 0.028) 0 0.05em, transparent 0.06em),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 18%, transparent 82%, rgba(105, 70, 48, 0.04));
  background-size: auto, 1.8em 1.8em, 2.3em 2.3em, auto;
  background-position: 0 0.22em, 0 0, 0 0, 0 0;
}

.skin-inside {
  background-color: var(--inside);
  background-image:
    repeating-linear-gradient(35deg, rgba(120, 83, 58, 0.025) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.32), transparent 45%);
}

.skin-cover {
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-accent: var(--wine);
  --text-accent-dark: var(--wine-dark);
  --text-red: var(--red);
  background-color: var(--cover);
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0.05), transparent 22%, rgba(0, 0, 0, 0.08) 74%, transparent),
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.018) 0 1px, rgba(0, 0, 0, 0.018) 1px 3px);
  color: var(--text);
  box-shadow: inset 0 0 0 0.08em rgba(116, 134, 103, 0.14), inset 0 0 2.4em rgba(94, 112, 80, 0.06);
}

.face.skin-cover {
  /* Cho vòng kim loại nhô qua mép bìa thay vì bị cắt ở gáy. */
  overflow: visible;
  border-radius: 0 1.15em 1.15em 0;
}
.face--back.skin-cover { border-radius: 1.15em 0 0 1.15em; }

.page {
  position: absolute;
  inset: 1.3em 1.1em 1.9em 2.6em;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  overflow: hidden;
  font-size: calc(1em * var(--fit, 1));
  line-height: 1.3;
}

.page > * { flex-shrink: 0; }

.skin-inside .page { left: 1.6em; }

.page--center {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.9em;
}

.page-no {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55em;
  z-index: 2;
  text-align: center;
  font-size: 0.75em;
  color: var(--text-soft);
}

/* ---------- Chữ dùng chung ---------- */

.script {
  font-family: var(--script);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-accent);
}

.h-page { margin: 0; font-size: 1.7em; text-wrap: balance; }
.page-head { display: flex; flex-direction: column; gap: 0.15em; }
.sub { font-size: 0.8em; color: var(--text-soft); }
.mini { font-family: var(--sans); font-size: 0.5em; font-weight: 600; color: var(--text-soft); }
.red { color: var(--text-red); }

.ico {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.heart--outline { stroke: var(--heart); }
.heart--filled { fill: var(--heart); }

.stamp {
  display: inline-block;
  padding: 0.2em 0.45em;
  border: 2px solid var(--red);
  border-radius: 0.2em;
  transform: rotate(var(--rot, -5deg));
  font-family: var(--sans);
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-red);
}

.washi {
  position: absolute;
  top: -0.45em;
  left: 50%;
  width: 3.2em;
  height: 0.9em;
  transform: translateX(-50%) rotate(-5deg);
  background: repeating-linear-gradient(45deg, rgba(239, 185, 180, 0.9) 0 0.25em, rgba(248, 218, 214, 0.9) 0.25em 0.5em);
}

.washi--yellow {
  transform: translateX(-50%) rotate(4deg);
  background: repeating-linear-gradient(45deg, rgba(233, 203, 122, 0.92) 0 0.25em, rgba(244, 226, 170, 0.92) 0.25em 0.5em);
}

.btn-ink {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: max(44px, 2.1em);
  padding: 0 0.9em;
  border: none;
  border-radius: 0.7em 0.25em 0.6em 0.3em / 0.3em 0.6em 0.25em 0.7em;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--hand);
  font-size: 1em;
  cursor: pointer;
  box-shadow: 0.15em 0.15em 0 var(--wine);
}

.btn-ghost {
  min-height: max(36px, 1.9em);
  padding: 0 0.8em;
  border: 2px solid var(--ink);
  border-radius: 0.7em 0.25em 0.6em 0.3em / 0.3em 0.6em 0.25em 0.7em;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--hand);
  font-size: 0.9em;
  cursor: pointer;
}

.btn-ink > *, .btn-ghost > * { pointer-events: none; }

/* ---------- Bìa sổ nhật ký ---------- */

.cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.4em 1.25em 1.3em 2.45em;
}

.cover__spine {
  position: absolute;
  top: 1em;
  height: 24.64em; /* 22 vòng trọn vẹn, không cắt dở vòng cuối. */
  left: -1em;
  width: 1.6em;
  z-index: 5;
  /* Mép bìa ở x=25: phần lớn vòng nằm ngoài, hai đầu luồn vào lỗ x=34.
     Mỗi vòng có bóng, lõi thép tối và vệt sáng mảnh trên cạnh trên. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='28' viewBox='0 0 40 28'%3E%3Cg fill='%23202420' stroke='%23a7a58b' stroke-width='1'%3E%3Crect x='31' y='6' width='6' height='5' rx='1.5'/%3E%3Crect x='31' y='17' width='6' height='5' rx='1.5'/%3E%3C/g%3E%3Cpath d='M34 9 C23 9 5 4 5 14 C5 24 23 19 34 19' fill='none' stroke='%23000000' stroke-opacity='.18' stroke-width='4' transform='translate(0 1.5)'/%3E%3Cpath d='M34 9 C23 9 5 4 5 14 C5 24 23 19 34 19' fill='none' stroke='%23232624' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M33 8.3 C22 8.3 5 3.5 4.4 13 M7 20 C15 22 25 18.4 33 18.4' fill='none' stroke='%23b4b8b2' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 1.6em 1.12em;
  background-repeat: repeat-y;
  pointer-events: none;
}

.cover__top {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 0.48em;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(78, 110, 89, 0.72);
}

.cover__heading {
  width: 100%;
  margin-top: 0.35em;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  text-align: center;
}

.cover__title {
  margin: 0;
  font-family: var(--hand);
  font-size: 2em;
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: 0.01em;
  color: var(--text);
  text-wrap: balance;
}

.cover__names {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.cover-photo {
  position: relative;
  width: 11.2em;
  margin: 0.4em auto;
  padding: 0.5em;
  border: 1px solid rgba(78, 110, 89, 0.42);
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 0 0 0.18em var(--cover),
    0 0 0 0.24em rgba(78, 110, 89, 0.52),
    0 0.28em 0.65em rgba(66, 82, 60, 0.14);
}

.cover-photo__media {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  contain: paint;
  border: 1px solid rgba(78, 110, 89, 0.28);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.72), transparent 38%),
    linear-gradient(145deg, #DCEAD7, #F7E7B7);
}

.cover-photo__media--image {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.cover-photo__art {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.cover-photo__art svg { width: 4.8em; height: 4.8em; }

.cover__footer {
  width: min(15.5em, 100%);
  text-align: center;
}

.cover__quote {
  position: relative;
  padding: 0.65em 0;
  font-family: var(--script);
  font-size: 1.03em;
  font-weight: 700;
  line-height: 1.12;
  color: var(--text);
  text-wrap: balance;
}

.cover__quote::before,
.cover__quote::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(78, 110, 89, 0.34);
}

.cover__quote::before { top: 0; }
.cover__quote::after { bottom: 0; }

.cover__feature {
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.8em;
  align-items: start;
  gap: 0.9em;
}

.tag {
  width: 100%;
  max-width: 12em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
  padding: 0.2em 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  transform: none;
  box-shadow: none;
}

.tag__kicker {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.tag__title {
  margin: 0.05em 0 0;
  text-align: left;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 2.05em;
  line-height: 0.94;
  color: var(--text);
  text-wrap: balance;
}

.tag__row { display: flex; align-items: baseline; gap: 0.4em; }
.tag__key { flex: none; font-family: var(--sans); font-size: 0.55em; color: var(--text-soft); }

.tag__val {
  flex: 1;
  min-width: 0;
  padding: 0 0.1em 0.05em;
  border-bottom: 1px solid rgba(78, 110, 89, 0.28);
  font-size: 0.95em;
  line-height: 1.25;
}

.tag__names {
  font-size: 1.15em;
  letter-spacing: 0.08em;
  color: var(--text);
}

.tag__rule { width: 3.5em; height: 2px; background: rgba(78, 110, 89, 0.38); }
.tag__place { font-size: 0.8em; color: var(--text-soft); text-align: left; }

.cover-card {
  padding: 0.45em 0.45em 0.55em;
  background: #FFFFFF;
  box-shadow: 0 0.25em 0.6em rgba(66, 82, 60, 0.13);
  transform: rotate(1.5deg);
  text-align: center;
  font-family: var(--sans);
  font-size: 0.48em;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}

.cover-card__art {
  min-height: 6.6em;
  display: grid;
  place-items: center;
  margin-bottom: 0.55em;
  background: linear-gradient(145deg, #DCEAD7, #F7E7B7);
}

.cover-card__art svg { width: 3.8em; height: 3.8em; }

.cover__bottom { display: flex; align-items: center; gap: 0.6em; font-size: 0.85em; }
.cover__bottom .ico { width: 1.3em; height: 1.3em; }
.book.is-locked .cover__hint { visibility: hidden; }

/* Mặt ngoài bìa sau: gáy sổ nằm bên phải */
.cover--back { padding: 1.4em 2.45em 1.3em 1.3em; }
.cover__spine--right { left: auto; right: -1em; transform: scaleX(-1); }
.tag--back {
  max-width: 14em;
  align-items: stretch;
  padding: 1.1em;
  border: 1px solid rgba(78, 110, 89, 0.24);
  border-radius: 0.65em;
  background: rgba(255, 255, 255, 0.28);
}

.price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  padding: 0.5em 0.6em 0.4em;
  border-radius: 0.2em;
  background: #FFFDF8;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.price .barcode { width: 9em; height: 3.4em; }

/* ---------- Mục lục (trong bìa trước) ---------- */

.toc { display: flex; flex-direction: column; }

.toc__item {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  width: 100%;
  min-height: 1.9em;
  padding: 0.2em 0;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--hand);
  font-size: 1em;
  color: var(--text);
  cursor: pointer;
}

.toc__item > * { pointer-events: none; }
.toc__leader { flex: 1; min-width: 1em; border-bottom: 2px dotted var(--ink-soft); transform: translateY(-0.25em); }
.toc__item:hover .toc__name { color: var(--text-accent); }

.owner { margin-top: auto; display: flex; flex-direction: column; gap: 0.2em; font-size: 0.85em; }

/* ---------- Trang 1: lời mở đầu ---------- */

.date-line { text-align: right; font-size: 0.85em; }

.opening-mark { display: grid; place-items: center; margin: 0.25em auto 0; }
.opening-mark svg { width: 1.7em; height: 1.7em; }

.essay-head { display: flex; flex-direction: column; align-items: center; gap: 0.2em; text-align: center; }
.essay-head p { max-width: 15em; font-size: 0.9em; color: var(--text-soft); }
.essay-head .essay-head__title { margin: 0; font-size: 1.8em; }
.essay-head .essay-head__lead { font-size: 1.15em; color: var(--text); }

.count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4em; }

.count__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.35em 0.1em 0.3em;
  border: 2px solid var(--ink);
  border-radius: 0.7em 0.25em 0.6em 0.3em / 0.3em 0.6em 0.25em 0.7em;
  background: rgba(255, 255, 255, 0.75);
}

.count__box:nth-child(2) { border-radius: 0.3em 0.7em 0.25em 0.6em / 0.6em 0.25em 0.7em 0.3em; }
.count__box:nth-child(3) { border-radius: 0.6em 0.3em 0.7em 0.25em / 0.25em 0.7em 0.3em 0.6em; }
.count__box:nth-child(4) { border-radius: 0.25em 0.6em 0.3em 0.7em / 0.7em 0.3em 0.6em 0.25em; }
.count__num { font-size: 1.75em; line-height: 1; font-variant-numeric: tabular-nums; }
.count__num.is-accent { color: var(--text-accent); }
.count__unit { font-size: 0.7em; color: var(--text-soft); }

/* ---------- Trang 2, 3: nhật ký ảnh ---------- */

.memos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8em; align-items: start; }
.memo { display: flex; flex-direction: column; align-items: center; gap: 0.45em; min-width: 0; }
.memo:nth-child(2) { margin-top: 2.2em; }

.polaroid {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 7.8em;
  padding: 0.4em 0.4em 0.5em;
  background: #FFFFFF;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 0.3em 0.7em rgba(36, 53, 122, 0.18), 0 1px 2px rgba(36, 53, 122, 0.12);
}

.photo { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #EEE9F4; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* Ảnh chụp màn hình: hiện đủ cả ảnh trên nền trắng thay vì cắt cho vuông */
.photo--contain { background: #FFFFFF; }
.photo--contain img { object-fit: contain; }

/* Ảnh bấm được để xem lớn */
.photo--zoom {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  cursor: zoom-in;
}

/* ---------- Lớp xem ảnh lớn ---------- */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(28, 20, 12, 0.8);
  opacity: 0;
  cursor: zoom-out;
  touch-action: none;
  transition: opacity 0.25s ease;
}

.viewer.is-open { opacity: 1; }

.viewer__frame {
  margin: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: scale(0.94);
  transition: transform 0.25s ease;
}

.viewer.is-open .viewer__frame { transform: none; }

.viewer__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 1200px);
  max-height: calc(var(--vh) * 0.78);
  padding: 10px;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  cursor: zoom-in;
  transform-origin: 50% 50%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.viewer__img.is-animating { transition: transform 0.25s ease; }
.viewer.is-zoomed .viewer__img { cursor: grab; }
.viewer.is-panning .viewer__img { cursor: grabbing; }

.viewer__cap { max-width: min(40em, 92vw); text-align: center; color: var(--paper); transition: opacity 0.2s ease; }
.viewer.is-zoomed .viewer__cap { opacity: 0; }
.viewer__title { margin: 0; font-family: var(--hand); font-size: 20px; line-height: 1.3; }
.viewer__note { margin: 2px 0 0; font-family: var(--hand); font-size: 16px; line-height: 1.4; opacity: 0.85; }

.viewer__close,
.reel__close,
.reader__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(253, 251, 246, 0.92);
  color: var(--text);
  cursor: pointer;
}

.viewer__close svg,
.reel__close svg,
.reader__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

@media (max-height: 540px) {
  .viewer__img { max-height: calc(var(--vh) * 0.72); padding: 6px; }
  .viewer__title { font-size: 16px; }
  .viewer__note { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .viewer, .viewer__frame { transition: none; }
}

/* ---------- Thước phim chiếu toàn màn hình ---------- */

/* Cỡ khung phim tính theo phần chiều cao còn lại sau lời ghi, thanh điều khiển và khoảng trống
   (--chrome), để dải phim, lời ghi và dòng thời gian luôn vừa một màn hình. */
.reel {
  --cap: 116px;
  --chrome: 240px;
  --fh: max(96px, min(calc((var(--vh) - var(--chrome)) / 1.26), 38vw, 360px));
  --fw: calc(var(--fh) * 4 / 3);
  --gap: calc(var(--fh) * 0.07);
  --band: calc(var(--fh) * 0.13);
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #2A2019, #110D0A 72%);
  color: var(--paper);
  opacity: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.35s ease;
}

.reel.is-open { opacity: 1; }
.reel :focus-visible { outline-color: var(--paper); }

.reel__screen {
  position: relative;
  flex: none;
  width: 100%;
  height: calc(var(--fh) + 2 * var(--band));
  overflow: hidden;
  cursor: grab;
}

.reel__screen.is-dragging { cursor: grabbing; }

/* Dải phim: mỗi khung ứng với 8 lỗ răng cưa như phim 35mm */
.reel__track {
  --holes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Crect x='2.6' width='4.8' height='10' rx='1.6' fill='%23EFE4CB'/%3E%3C/svg%3E");
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  gap: var(--gap);
  padding: var(--band) calc(var(--gap) / 2);
  background-color: #0A0807;
  background-image: var(--holes), var(--holes);
  background-size: calc((var(--fw) + var(--gap)) / 8) calc(var(--band) * 0.4);
  background-position: 0 calc(var(--band) * 0.3), 0 calc(100% - var(--band) * 0.3);
  background-repeat: repeat-x;
  will-change: transform;
}

.reel__frame {
  position: relative;
  flex: none;
  width: var(--fw);
  height: var(--fh);
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--fh) * 0.02);
  background: #2A231E;
}

.reel__frame img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.reel__frame--contain { background: #FFFFFF; }
.reel__frame--contain img { object-fit: contain; }

.reel__empty {
  display: grid;
  place-items: center;
  height: 100%;
  background: repeating-linear-gradient(135deg, #322A23 0 12px, #2A231D 12px 24px);
  font-family: var(--hand);
  font-size: max(14px, calc(var(--fh) * 0.075));
  color: rgba(255, 253, 241, 0.55);
}

/* Dấu ngày màu cam như máy ảnh phim */
.reel__stamp {
  position: absolute;
  right: 5%;
  bottom: 5%;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: max(11px, calc(var(--fh) * 0.068));
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #FFA24C;
  text-shadow: 0 0 0.3em rgba(255, 106, 20, 0.85);
}

/* Đoạn dẫn đầu cuộn: chữ thập, vòng tròn và số đếm ngược */
.reel__frame--leader {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(239, 228, 203, 0.2), rgba(239, 228, 203, 0.2)) center / 100% 1px no-repeat,
    linear-gradient(rgba(239, 228, 203, 0.2), rgba(239, 228, 203, 0.2)) center / 1px 100% no-repeat,
    #2B2620;
}

.reel__frame--leader:empty { background: #1C1814; }

.reel__count {
  display: grid;
  place-items: center;
  height: 72%;
  aspect-ratio: 1;
  border: max(2px, calc(var(--fh) * 0.012)) solid rgba(239, 228, 203, 0.75);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--fh) * 0.035) #2B2620, 0 0 0 calc(var(--fh) * 0.045) rgba(239, 228, 203, 0.4);
  font-family: var(--sans);
  font-size: calc(var(--fh) * 0.36);
  font-weight: 700;
  line-height: 1;
  color: rgba(239, 228, 203, 0.92);
}

/* Khung tựa đề và khung "Còn tiếp…" */
.reel__frame--card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--fh) * 0.045);
  padding: calc(var(--fh) * 0.1);
  text-align: center;
  background: radial-gradient(ellipse at 50% 45%, #3D3026, #1A1511 78%);
  box-shadow: inset 0 0 0 calc(var(--fh) * 0.04) #1A1511, inset 0 0 0 calc(var(--fh) * 0.047) rgba(239, 228, 203, 0.32);
}

.reel__card-title {
  margin: 0;
  font-family: var(--script);
  font-size: calc(var(--fh) * 0.15);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--paper);
}

.reel__kicker {
  margin: 0;
  font-family: var(--sans);
  font-size: max(9px, calc(var(--fh) * 0.045));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 253, 241, 0.62);
}

/* Ánh đèn máy chiếu: sáng ở khung giữa, tối dần về hai bên, thỉnh thoảng chớp nhẹ */
.reel__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse calc(var(--fw) * 1.6) 140% at 50% 50%, transparent 32%, rgba(17, 13, 10, 0.58) 64%, rgba(17, 13, 10, 0.95));
  animation: reel-flicker 5s steps(1) infinite;
}

.reel__grain {
  position: absolute;
  inset: -60px;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.2 -1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: reel-grain 0.7s steps(5) infinite;
}

.reel.is-paused .reel__light,
.reel.is-paused .reel__grain { animation-play-state: paused; }

@keyframes reel-flicker {
  0%, 100% { opacity: 1; }
  7% { opacity: 0.9; }
  9% { opacity: 1; }
  48% { opacity: 0.94; }
  50% { opacity: 1; }
  81% { opacity: 0.88; }
  83% { opacity: 1; }
}

@keyframes reel-grain { to { transform: translate(-50px, 30px); } }

.reel__cap {
  flex: none;
  width: min(40em, calc(100% - 32px));
  height: var(--cap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-align: center;
}

.reel__date { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 253, 241, 0.6); }
.reel__title { margin: 0; font-family: var(--script); font-size: 34px; font-weight: 700; line-height: 1.15; color: var(--paper); }

.reel__note {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1.35;
  color: rgba(255, 253, 241, 0.84);
}

.reel__cap.is-new > * { animation: reel-cap 0.6s ease both; }
.reel__cap.is-new > :nth-child(2) { animation-delay: 0.07s; }
.reel__cap.is-new > :nth-child(3) { animation-delay: 0.14s; }

@keyframes reel-cap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Nút chạy / dừng và dòng thời gian, mỗi kỷ niệm là một chấm */
.reel__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(640px, calc(100% - 2 * max(28px, env(safe-area-inset-left), env(safe-area-inset-right))));
  height: 44px;
}

.reel__play {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid rgba(255, 253, 241, 0.5);
  border-radius: 50%;
  background: rgba(255, 253, 241, 0.08);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.reel__play:hover { background: rgba(255, 253, 241, 0.18); }
.reel__play svg { width: 20px; height: 20px; }

.reel__line { position: relative; flex: 1; height: 100%; }

.reel__line::before,
.reel__fill {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: rgba(255, 253, 241, 0.22);
}

.reel__fill { background: rgba(255, 253, 241, 0.85); transform: scaleX(0); transform-origin: left center; }

.reel__dot {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.reel__dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #2A2019;
  box-shadow: 0 0 0 2px rgba(255, 253, 241, 0.7);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.reel__dot:hover::before { transform: scale(1.3); }
.reel__dot.is-on::before { background: var(--paper); transform: scale(1.45); }

@media (max-height: 540px) {
  .reel { --cap: 68px; --chrome: 136px; gap: 8px; padding: 10px 0 8px; }
  .reel__date { font-size: 10px; }
  .reel__title { font-size: 22px; }
  .reel__note { font-size: 15px; -webkit-line-clamp: 1; }
  .reel__bar { height: 34px; }
  .reel__play { width: 34px; height: 34px; }
  .reel__play svg { width: 16px; height: 16px; }
  .reel__close { width: 36px; height: 36px; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion: reduce) {
  .reel { transition: none; }
  .reel__light,
  .reel__grain,
  .reel__cap.is-new > * { animation: none; }
}

.photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em;
  text-align: center;
  background: repeating-linear-gradient(135deg, #F2EEF7 0 0.35em, #EAE4F2 0.35em 0.7em);
  color: var(--text-soft);
  font-size: 0.7em;
}

.polaroid__cap { margin-top: 0.35em; text-align: center; font-size: 0.9em; line-height: 1.15; }
.memo__note { text-align: center; font-size: 0.9em; line-height: 1.25; }
.memo .stamp { font-size: 0.56em; }

/* Dải phim dán cuối trang 3: chạm để chiếu cả cuộn phim. Lỗ răng cưa để lộ màu giấy bên dưới. */
.film-strip {
  align-self: flex-start;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.1em 0.2em 0 0.55em;
  border: none;
  background: none;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.film-strip * { pointer-events: none; }

.film-strip__film {
  --holes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Crect x='2.6' width='4.8' height='10' rx='1.6' fill='%23FFFDF1'/%3E%3C/svg%3E");
  position: relative;
  display: flex;
  gap: 0.26em;
  padding: 0.46em 0.32em;
  border-radius: 0.06em;
  background-color: #2B231D;
  background-image: var(--holes), var(--holes);
  background-size: 0.4em 0.2em;
  background-position: 0.1em 0.13em, 0.1em calc(100% - 0.13em);
  background-repeat: repeat-x;
  box-shadow: 0 0.22em 0.5em rgba(52, 36, 22, 0.3), 0 1px 2px rgba(52, 36, 22, 0.2);
  transform: rotate(-2.5deg);
  transition: transform 0.2s ease;
}

.film-strip:hover .film-strip__film { transform: rotate(-2.5deg) translateY(-0.1em); }

.film-strip__frame {
  width: 2.3em;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.05em;
  background: #6B5546;
}

.film-strip__frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.2) saturate(0.92); }

/* Băng dính dán dọc qua đầu dải phim */
.film-strip .washi {
  top: 50%;
  left: -1em;
  width: 2.5em;
  transform: translateY(-50%) rotate(84deg);
}

.film-strip__label { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15em; min-width: 0; max-width: 6.9em; }
.film-strip__title { font-size: 1.05em; line-height: 1.05; }

.film-strip__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--sans);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-soft);
}

.film-strip__hint svg { width: 1.3em; height: 1.3em; }
.ico-fill { fill: currentColor; }
.ico-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Trang 4: giấy nhớ ---------- */

.sticky {
  display: block;
  width: 100%;
  min-height: 4.5em;
  padding: 0.6em 0.85em 0.7em;
  border: none;
  border-radius: 2px;
  text-align: left;
  font-family: var(--hand);
  font-size: 1em;
  color: var(--text);
  cursor: pointer;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 0.3em 0.7em rgba(36, 53, 122, 0.15);
  transition: transform 0.2s ease;
}

.sticky:hover { transform: rotate(var(--rot, 0deg)) translateY(-0.1em); }
.sticky > * { display: block; pointer-events: none; }
.sticky--yellow { background: var(--note-yellow); }
.sticky--pink { background: var(--note-pink); }
.sticky--blue { background: var(--note-blue); }
.sticky__month { font-size: 1.5em; }
.sticky__text { margin-top: 0.15em; line-height: 1.3; }
.sticky__hint { font-size: 0.7em; color: var(--text-soft); }
.sticky[aria-expanded="true"] .sticky__month { font-size: 0.95em; }
.sticky[aria-expanded="false"] .sticky__text { display: none; }
.sticky[aria-expanded="true"] .sticky__hint { display: none; }

/* ---------- Trang 5: thư tay ---------- */

.page > .letter { flex: 1 1 auto; min-height: 0; }

.letter {
  position: relative;
  overflow: hidden;
  padding: 1.9em 1em 1em;
  background-color: #FFFEFB;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.6em - 1px), #CCD5EE calc(1.6em - 1px), #CCD5EE 1.6em);
  background-position: 0 1.45em;
  transform: rotate(-1deg);
  box-shadow: 0 0.4em 1em rgba(36, 53, 122, 0.16);
  font-size: calc(0.95em * var(--fit, 1));
  line-height: 1.6;
}

.seal {
  position: absolute;
  top: 0.3em;
  left: 50%;
  width: 1.6em;
  height: 1.6em;
  margin-left: -0.8em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--heart-soft);
  box-shadow: 0 0.1em 0.25em rgba(110, 31, 46, 0.3);
}

.seal svg { width: 0.8em; height: 0.8em; }
.letter__para { text-indent: 1.2em; }
.letter__closing { margin-top: 1.6em; text-align: right; }
.letter__sign { text-align: right; font-size: 1.5em; line-height: 1.1; }

/* Cả lá thư chạm vào là mở chữ lớn; dòng gợi ý nằm góc dưới bên trái, đối diện chữ ký */
.page > .letter { cursor: zoom-in; }
.letter__open {
  position: absolute;
  left: 1em;
  bottom: 0.7em;
  padding: 0.3em 0;
  border: none;
  background: none;
  color: var(--text-soft);
  font-family: var(--sans);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  cursor: zoom-in;
}

/* ---------- Đọc thư cỡ chữ lớn ---------- */

.reader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(68px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(68px, env(safe-area-inset-left));
  background: rgba(28, 20, 12, 0.8);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.reader.is-open { opacity: 1; }

/* Giấy kẻ dòng như trong sổ nhưng cỡ chữ cố định; thư dài hơn màn hình thì cuộn,
   background-attachment: local để dòng kẻ cuộn theo chữ */
.reader__paper {
  width: min(36em, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 1.9em 1.4em 1.2em;
  background-attachment: local;
  font-family: var(--hand);
  font-size: 19px;
  color: var(--text);
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.reader.is-open .reader__paper { transform: none; }
.reader__paper:focus { outline: none; }

@media (max-height: 540px) {
  .reader { padding-left: max(60px, env(safe-area-inset-left)); padding-right: max(60px, env(safe-area-inset-right)); }
  .reader__paper { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .reader, .reader__paper { transition: none; }
}

/* ---------- Trang 6: phiếu yêu thương ---------- */

.coupon {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.75em;
  border: 2px dashed var(--red);
  border-radius: 0.45em;
  background: var(--coupon);
}

.coupon--date { border-color: var(--ink); background: var(--coupon-blue); }
.coupon > svg { flex: none; width: 2em; height: 2em; }
.coupon__body { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }

.coupon__title {
  font-family: var(--sans);
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-red);
}

.coupon--date .coupon__title { color: var(--text); }
.coupon__text { font-size: 0.95em; line-height: 1.2; }
.coupon__note { font-size: 0.7em; color: var(--text-soft); }

/* ---------- Trang 7: những cuộc hẹn sắp tới ---------- */

.timetable {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.9em;
}

.timetable th,
.timetable td {
  padding: 0.3em 0.5em;
  border: 1.5px solid var(--ink-soft);
  text-align: left;
  vertical-align: top;
}

.timetable th { font-family: var(--sans); font-size: 0.6em; font-weight: 600; color: var(--text-soft); }
.timetable td:first-child { width: 4.4em; white-space: nowrap; }

.doodle-line { display: flex; align-items: center; gap: 0.4em; font-size: 0.85em; color: var(--text-soft); }
.doodle-line .ico { color: var(--text-accent); }

/* ---------- Trang 8 và bìa sau ---------- */

.end-title { font-size: 1.4em; }
.end-stamp { font-size: 0.75em; border-width: 3px; border-style: double; }
.end-sign { font-size: 1.9em; }

.convert { display: flex; flex-direction: column; gap: 0.25em; font-size: 1.05em; }
.convert__row { display: flex; align-items: baseline; gap: 0.35em; }
.convert__eq { width: 0.8em; flex: none; color: var(--text-soft); }
.convert__num { color: var(--text-accent); font-variant-numeric: tabular-nums; }

.next-milestone {
  margin-top: 0.45em;
  padding: 0.65em 0.8em;
  border: 1px solid rgba(138, 63, 74, 0.35);
  border-radius: 0.35em;
  background: rgba(255, 255, 255, 0.35);
  text-align: center;
  color: var(--text-accent-dark);
}

.back-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6em; }

.close-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05em;
  padding: 0.2em;
  border: none;
  background: none;
  color: var(--text-accent-dark);
  cursor: pointer;
}

.close-hint > * { pointer-events: none; }
.close-hint .script { font-size: 1.25em; color: var(--text-accent-dark); }
.close-hint .ico { width: 2.6em; height: 1.3em; }

.back-quote { font-family: var(--script); font-size: 1.1em; color: var(--text); }

/* ---------- Mảnh giấy câu hỏi trên mặt bàn ---------- */

/* Mảnh giấy câu hỏi và dòng "Lật bìa để đọc" nằm trên mặt bàn,
   nên luôn ở dưới mọi tờ sổ (các tờ có z-index từ 1 trở lên) */
.lock {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 3%;
  width: 44%;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 1.5em 1.1em 1.1em;
  background: var(--note-yellow);
  color: var(--text);
  transform: translateY(-50%) rotate(-2.5deg);
  box-shadow: 0 0.5em 1.2em rgba(66, 36, 14, 0.3);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.lock.is-gone {
  opacity: 0;
  visibility: hidden;
  transform: translate(-25%, -75%) rotate(-16deg);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}

.lock.is-shake { animation: shake 0.45s ease; }

@keyframes shake {
  0%, 100% { transform: translateY(-50%) rotate(-2.5deg); }
  25%, 75% { transform: translate(-0.35em, -50%) rotate(-2.5deg); }
  50% { transform: translate(0.35em, -50%) rotate(-2.5deg); }
}

.lock__intro { font-size: 0.9em; line-height: 1.3; }
.lock__q { font-size: 1.35em; line-height: 1.15; }
.lock__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }

.lock-date {
  flex: 1 1 6em;
  min-width: 5.4em;
  height: max(40px, 2.1em);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18em;
  border-bottom: 2px solid var(--ink);
}

.lock__input {
  width: 2.05em;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-family: var(--hand);
  font-size: max(16px, 1.1em);
  color: var(--text);
}

.lock__input::placeholder { color: rgba(0, 0, 0, 0.48); opacity: 1; }
.lock__input:focus { outline: none; }
.lock-date:focus-within { border-bottom-color: var(--wine-dark); }

.lock-date__slash {
  flex: none;
  font-family: var(--hand);
  font-size: 1.2em;
  color: var(--text);
}

.lock__error { min-height: 1.2em; font-size: 0.8em; color: var(--text-red); }

.desk-hint {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 8%;
  width: 36%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2em;
  padding: 0.5em;
  border: none;
  background: none;
  text-align: right;
  color: var(--text-accent-dark);
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.desk-hint > * { pointer-events: none; }
.desk-hint .script { font-size: 1.6em; color: var(--text-accent-dark); }
.desk-hint .ico { width: 3em; height: 1.5em; }

.book:not(.is-locked):not(.is-open) .desk-hint {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease 0.6s, visibility 0s;
}

/* ---------- Hoa hướng dương: hiện lên bên phải khi gấp bìa sau lại ---------- */

.sunflower {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4em;
  padding: 0.6em 1em 1.1em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.sunflower.is-shown {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}

.sunflower__art { display: block; width: 100%; flex: 1 1 auto; min-height: 0; overflow: visible; }

.sunflower__caption {
  max-width: 15em;
  text-align: center;
  text-wrap: balance;
  font-family: var(--script);
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-accent-dark);
}

.sf-rays { stroke: #F4A92B; stroke-width: 5; stroke-linecap: round; }
.sf-core { fill: #FFC93C; stroke: #F4A92B; stroke-width: 3; }
.sf-grass { transform-box: fill-box; transform-origin: 50% 100%; }
.sf-grass path { fill: #8FC25F; }
.sf-grass .sf-blades { fill: none; stroke: #6FA84A; stroke-width: 3; stroke-linecap: round; }
.sf-stem { fill: none; stroke: #4E8B3A; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sf-leaf path { fill: #6DB24A; stroke: #4E8B3A; stroke-width: 2; stroke-linejoin: round; }
.sf-leaf .sf-vein { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.sf-leaf { transform-box: fill-box; }
.sf-leaf--a { transform-origin: 100% 100%; }
.sf-leaf--b { transform-origin: 0% 100%; }
.sf-petal { transform-box: fill-box; transform-origin: 50% 100%; }
.sf-petal--back { fill: #F2A51C; }
.sf-petal--front { fill: #FFD23F; stroke: #E59A12; stroke-width: 1.2; }
.sf-disc { fill: #5B3418; stroke: #3F230F; stroke-width: 3; transform-box: fill-box; transform-origin: 50% 50%; }
.sf-seeds { fill: #A0652C; transform-box: fill-box; transform-origin: 50% 50%; }

/* Tư thế cuối: mặt hoa nghiêng về phía mặt trời (nén theo hướng mặt trời như đang nhìn lên) */
.sf-face { transform: rotate(-55deg) scale(0.8, 1) rotate(55deg); }

/* Cây đung đưa quanh gốc thân */
.sf-plant { transform-box: view-box; transform-origin: 118px 392px; }

.sunflower.is-blooming .sf-sun { animation: sf-rise 1.6s ease-out 0.2s both; }
.sunflower.is-blooming .sf-rays { animation: sf-spin 40s linear infinite; }
.sunflower.is-blooming .sf-grass { animation: sf-grow-y 0.8s ease-out 0.3s both; }
.sunflower.is-blooming .sf-stem { animation: sf-draw 1.8s ease-out 0.8s both; }
.sunflower.is-blooming .sf-leaf--a { animation: sf-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.9s both; }
.sunflower.is-blooming .sf-leaf--b { animation: sf-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s both; }
.sunflower.is-blooming .sf-disc,
.sunflower.is-blooming .sf-seeds { animation: sf-pop 0.6s ease-out 2.6s both; }
.sunflower.is-blooming .sf-petal { animation: sf-petal 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) calc(2.9s + var(--d, 0s)) both; }
.sunflower.is-blooming .sf-face { animation: sf-turn 2.2s ease-in-out 4.4s both; }
.sunflower.is-blooming .sf-plant { animation: sf-sway 4s ease-in-out 6.8s infinite alternate; }
.sunflower.is-blooming .sunflower__caption { animation: sf-caption 1.2s ease 5.6s both; }

@keyframes sf-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes sf-spin { to { transform: rotate(360deg); } }
@keyframes sf-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes sf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sf-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sf-petal { from { opacity: 0; transform: scale(0.05); } to { opacity: 1; transform: scale(1); } }
@keyframes sf-turn {
  from { transform: rotate(-35deg) scale(1, 1) rotate(35deg); }
  to { transform: rotate(-55deg) scale(0.8, 1) rotate(55deg); }
}
@keyframes sf-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes sf-caption { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sunflower.is-blooming * { animation: none !important; }
}

/* ---------- Nút điều khiển ---------- */

/* Nút bật/tắt âm thanh ở góc trên bên phải */
.sound {
  position: fixed;
  z-index: 40;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(253, 251, 246, 0.92);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(66, 36, 14, 0.24);
  cursor: pointer;
}

.sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound[aria-pressed="true"] .icon-off,
.sound[aria-pressed="false"] .icon-on { display: none; }

@media (max-height: 540px) {
  .sound {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
  }
}

/* Không hiện ra màn hình, chỉ để trình đọc màn hình báo đang ở trang nào */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hướng dẫn xoay ngang trên điện thoại ---------- */

.rotate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left));
  text-align: center;
  font-family: var(--sans);
  color: var(--text-accent-dark);
}

.rotate__phone {
  width: 88px;
  height: 88px;
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: tilt 2.6s ease-in-out infinite;
}

@keyframes tilt {
  0%, 20% { transform: rotate(0deg); }
  45%, 75% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

.rotate__title {
  margin: 6px 0 0;
  max-width: min(14em, 100%);
  font-family: var(--script);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--text-accent);
}

.rotate__text { max-width: min(30ch, 100%); font-size: 15px; line-height: 1.55; }

.rotate__btn {
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 14px 6px 12px 8px / 8px 12px 6px 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--hand);
  font-size: 20px;
  box-shadow: 3px 3px 0 var(--wine);
  cursor: pointer;
}

.rotate__tip { max-width: min(30ch, 100%); font-size: 13px; line-height: 1.5; }

@media (orientation: portrait) and (max-width: 700px) and (pointer: coarse) {
  .rotate { display: flex; }
  .stage, .nav, .sound { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .rotate__phone { animation: none; }
}

.noscript {
  position: fixed;
  inset: auto 16px 16px;
  z-index: 200;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--paper);
  font-family: var(--sans);
  text-align: center;
}