/* ==========================================================================
   BÌNH MINH SAPA — CATALOGUE DESIGN SYSTEM · Concept "Ánh Sáng Đầu Tiên / First Light"
   Trải trang (spread) 2:1 = 2 trang vuông 210 × 210 mm  →  spread 420 × 210 mm
   1 đơn vị --u = 1 mm khi in. Mọi vị trí/kích thước dùng mm để bản in = bản xem.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap");

:root {
  /* Màu nền tảng — dùng chung cho cả 4 cuốn */
  --paper: #F3EFE7;      /* Giấy sương  */
  --stone: #E4DDD0;      /* Đá non      */
  --ink: #1E211F;        /* Mực núi     */
  --slate: #474C46;      /* Đá xám      */
  --mute: #6F726B;       /* Chú thích   */
  --dawn: #C9A46A;       /* Vàng rạng đông — màu đường chân trời */
  --night: #15191C;      /* Đêm Sa Pa   */
  --line: rgba(30, 33, 31, .22);

  /* Màu nhấn riêng từng cuốn (ghi đè trong .theme-*) */
  --accent: #C9A46A;
  --accent-soft: #EADFCB;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
}

.theme-travel     { --accent: #5E6B45; --accent-soft: #DCE0CF; } /* Rêu ruộng bậc thang */
.theme-hotel      { --accent: #B9784E; --accent-soft: #EFDCCB; } /* Hồng đào bình minh   */
.theme-restaurant { --accent: #9A4528; --accent-soft: #E9D3C6; } /* Than hồng bếp củi   */
.theme-coffee     { --accent: #687E91; --accent-soft: #DCE3E8; } /* Xanh mây           */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

body {
  background: #CFCAC0;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-feature-settings: "lnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Khung xem trên màn hình ---------- */
.book { width: min(96vw, 1680px); margin: 72px auto 120px; display: flex; flex-direction: column; gap: 56px; }

.spread-meta {
  font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: #55594f; margin-bottom: 10px; display: flex; justify-content: space-between;
}

.spread {
  position: relative; display: flex; width: 100%; aspect-ratio: 2 / 1;
  container-type: inline-size; overflow: hidden; background: var(--paper);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.45);
}
/* Bóng gáy sách — chỉ để xem, không in */
.spread::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 6%; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.07) 47%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.07) 53%, transparent);
  pointer-events: none; z-index: 50;
}

.spread > * { --u: calc(100cqw / 420); }

.page { position: relative; width: 50%; height: 100%; overflow: hidden; }
.page.dark, .spread.dark { background: var(--night); color: var(--paper); }
.page.stone { background: var(--stone); }
.page.accent { background: var(--accent); color: var(--paper); }
.page.soft { background: var(--accent-soft); }

/* Lớp tràn cả trải trang */
.layer { position: absolute; inset: 0; }
.layer.z { z-index: 2; }
.layer.pages { display: flex; }
.layer.pages > .page:not(.soft):not(.stone):not(.dark):not(.accent) { background: transparent; }

/* ---------- Ảnh ---------- */
.img { position: absolute; overflow: hidden; background: var(--stone); }
.img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img.fill { inset: 0; }
.img.box-img {
  left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w, 100) * var(--u)); height: calc(var(--h, 100) * var(--u));
}
.shade-top::after, .shade-bottom::after, .shade-left::after, .shade-right::after, .shade-all::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.shade-top::after    { background: linear-gradient(180deg, rgba(10,12,14,.55), rgba(10,12,14,0) 45%); }
.shade-bottom::after { background: linear-gradient(0deg, rgba(10,12,14,.6), rgba(10,12,14,0) 50%); }
.shade-left::after   { background: linear-gradient(90deg, rgba(10,12,14,.65), rgba(10,12,14,0) 55%); }
.shade-right::after  { background: linear-gradient(270deg, rgba(10,12,14,.6), rgba(10,12,14,0) 55%); }
.shade-all::after    { background: rgba(10,12,14,.38); }
.shade-left-deep::after, .shade-right-deep::after, .shade-deep::after, .shade-veil::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.shade-left-deep::after  { background: linear-gradient(90deg, rgba(10,12,14,.82), rgba(10,12,14,.55) 45%, rgba(10,12,14,.1) 80%); }
.shade-right-deep::after { background: linear-gradient(270deg, rgba(10,12,14,.82), rgba(10,12,14,.55) 45%, rgba(10,12,14,.1) 80%); }
.shade-deep::after       { background: linear-gradient(180deg, rgba(10,12,14,.6), rgba(10,12,14,.74)); }
.shade-veil::after       { background: rgba(243,239,231,.82); }

/* Chữ sáng trên ảnh — bóng mờ giữ độ đọc khi ảnh thật có vùng sáng */
.on-photo { color: var(--paper); text-shadow: 0 0 calc(4 * var(--u)) rgba(10,12,14,.35); }
.on-photo .en, .on-photo .cap, .on-photo .lbl, .on-photo .small { color: rgba(243,239,231,.92); }
.on-photo .tl .t, .on-photo .dayline .t, .panel.dark .tl .t { color: var(--dawn); }
.on-photo .facts dt { color: rgba(243,239,231,.8); }
.on-photo .panel { text-shadow: none; }

/* Tấm nền đặt chữ dày trên ảnh nền */
.panel { background: rgba(243,239,231,.93); color: var(--ink); padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u)); }
.panel.dark { background: rgba(21,25,28,.8); color: var(--paper); }
.panel.dark .en, .panel.dark .cap, .panel.dark .lbl, .panel.dark .small { color: rgba(243,239,231,.9); }
.panel.dark .index, .panel.dark .index li, .panel.dark .ticks li, .panel.dark .tl li { border-color: rgba(243,239,231,.22); }
.panel.dark .index .ds { color: rgba(243,239,231,.85); }
.shade-mist::after   { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243,239,231,.78), rgba(243,239,231,0) 48%); }

/* ---------- Hộp định vị theo mm (lưới 6 cột / trang) ---------- */
.box {
  position: absolute; z-index: 5;
  left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w, 100) * var(--u));
}
.box.from-bottom { top: auto; bottom: calc(var(--b, 0) * var(--u)); }
.box.from-right  { left: auto; right: calc(var(--r, 0) * var(--u)); }
.light { color: var(--paper); }
.light .en, .light .cap, .light .lbl { color: rgba(243,239,231,.88); }

/* ---------- Typography ---------- */
.lbl {
  display: block; font: 600 calc(2.5 * var(--u))/1.3 var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--slate);
}
.lbl.accent { color: var(--accent); }
.hero {
  font: 500 calc(19 * var(--u))/0.96 var(--serif); letter-spacing: -.01em;
}
.hero em, .h1 em, .h2 em { font-style: italic; font-weight: 500; }
.h1 { font: 500 calc(12.5 * var(--u))/1.02 var(--serif); letter-spacing: -.005em; }
.h2 { font: 500 calc(8.4 * var(--u))/1.08 var(--serif); }
.h3 { font: 600 calc(4.8 * var(--u))/1.2 var(--serif); letter-spacing: .005em; }
.lead { font: italic 500 calc(5.2 * var(--u))/1.36 var(--serif); }
.body { font: 400 calc(3.5 * var(--u))/1.6 var(--sans); }
.body p + p { margin-top: calc(2.4 * var(--u)); }
.body strong { font-weight: 600; }
.small { font: 400 calc(3 * var(--u))/1.55 var(--sans); }
.en { display: block; font: italic 500 calc(4 * var(--u))/1.4 var(--serif); color: var(--slate); }
.en.sm { font-size: calc(3.3 * var(--u)); }
.cap { font: 400 calc(2.65 * var(--u))/1.45 var(--sans); color: var(--mute); }
.num { font: 500 calc(30 * var(--u))/0.8 var(--serif); color: var(--accent); }
.num.sm { font-size: calc(14 * var(--u)); }
.quote { font: italic 500 calc(9 * var(--u))/1.18 var(--serif); }
.price { font: 600 calc(4.6 * var(--u))/1 var(--serif); white-space: nowrap; }
.mt1 { margin-top: calc(2 * var(--u)); }  .mt2 { margin-top: calc(4 * var(--u)); }
.mt3 { margin-top: calc(7 * var(--u)); }  .mt4 { margin-top: calc(11 * var(--u)); }
.center { text-align: center; }
.right  { text-align: right; }
.cols2 { column-count: 2; column-gap: calc(6 * var(--u)); }

.rule { display: block; height: calc(.25 * var(--u)); background: currentColor; opacity: .45; width: calc(var(--rw, 18) * var(--u)); }
.rule.dawn { background: var(--dawn); opacity: 1; }
.rule.accent { background: var(--accent); opacity: 1; }

/* ---------- Logo (TẠM — thay bằng file logo chính thức) ---------- */
.mark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: calc(1.2 * var(--u)); color: inherit; }
.mark svg { width: calc(14 * var(--u)); height: auto; stroke: currentColor; fill: none; stroke-width: 1.4; }
.mark .logo { width: calc(18 * var(--u)); height: auto; display: block; }
.mark.lg .logo { width: calc(22 * var(--u)); }
.mark .logo.mono { filter: brightness(0) invert(1); }
.mark .wm { font: 600 calc(4.2 * var(--u))/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; }
.mark .sub { font: 600 calc(1.9 * var(--u))/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; opacity: .75; }
.mark.center { align-items: center; }
.mark.lg svg { width: calc(22 * var(--u)); }
.mark.lg .wm { font-size: calc(6.4 * var(--u)); }

/* ---------- Header / folio ---------- */
.running {
  position: absolute; z-index: 6; top: calc(10 * var(--u));
  font: 600 calc(2.1 * var(--u))/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--mute);
}
.running.l { left: calc(16 * var(--u)); }
.running.r { right: calc(16 * var(--u)); text-align: right; }
.folio {
  position: absolute; z-index: 6; bottom: calc(9 * var(--u));
  font: 500 calc(3.4 * var(--u))/1 var(--serif); color: var(--slate); display: flex; gap: calc(2.5 * var(--u)); align-items: center;
}
.folio::before { content: ""; width: calc(6 * var(--u)); height: calc(.25 * var(--u)); background: var(--dawn); }
.folio.l { left: calc(16 * var(--u)); }
.folio.r { right: calc(16 * var(--u)); flex-direction: row-reverse; }
.light .folio, .folio.light, .running.light { color: rgba(243,239,231,.8); }

/* ---------- Thành phần thông tin ---------- */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--u)) calc(6 * var(--u)); }
.facts.c3 { grid-template-columns: repeat(3, 1fr); }
.facts.c4 { grid-template-columns: repeat(4, 1fr); }
.facts dt { font: 600 calc(2.3 * var(--u))/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.facts dd { font: 500 calc(8.4 * var(--u))/1.05 var(--serif); margin-top: calc(1.2 * var(--u)); }
.facts dd small { display: block; font: 400 calc(2.8 * var(--u))/1.4 var(--sans); color: var(--slate); margin-top: calc(.8 * var(--u)); }
.light .facts dt { color: rgba(243,239,231,.75); }
.light .facts dd small { color: rgba(243,239,231,.85); }

.index { list-style: none; border-top: calc(.25 * var(--u)) solid var(--line); }
.index li {
  display: grid; grid-template-columns: 1fr auto; column-gap: calc(5 * var(--u));
  padding: calc(3.4 * var(--u)) 0; border-bottom: calc(.25 * var(--u)) solid var(--line);
}
.index .nm { font: 600 calc(4.8 * var(--u))/1.15 var(--serif); }
.index .nm .en { display: inline; font-size: calc(3.4 * var(--u)); margin-left: calc(1.5 * var(--u)); }
.index .ds { grid-column: 1 / 2; font: 400 calc(2.95 * var(--u))/1.5 var(--sans); color: var(--slate); margin-top: calc(.8 * var(--u)); }
.index .pr { grid-row: 1 / span 2; grid-column: 2; align-self: start; text-align: right; }
.index .pr small { display: block; font: 400 calc(2.4 * var(--u))/1.3 var(--sans); color: var(--mute); margin-top: calc(.8 * var(--u)); }
.index.roomy li { padding: calc(5.2 * var(--u)) 0; }
.index.roomy .nm { font-size: calc(6 * var(--u)); }
.index.roomy .ds { font-size: calc(3.4 * var(--u)); margin-top: calc(1.8 * var(--u)); }
.light .index, .light .index li { border-color: rgba(243,239,231,.22); }
.light .index .ds { color: rgba(243,239,231,.85); }

.tl { list-style: none; position: relative; }
.tl li { display: grid; grid-template-columns: calc(17 * var(--u)) 1fr; padding: calc(1.9 * var(--u)) 0; border-top: calc(.25 * var(--u)) solid var(--line); }
.tl li:last-child { border-bottom: calc(.25 * var(--u)) solid var(--line); }
.tl .t { font: 600 calc(4.4 * var(--u))/1.05 var(--serif); color: var(--accent); }
.tl .d { font: 400 calc(3 * var(--u))/1.45 var(--sans); }
.tl .d b { display: block; font: 600 calc(3.1 * var(--u))/1.3 var(--sans); margin-bottom: calc(.4 * var(--u)); }
.light .tl li { border-color: rgba(243,239,231,.2); }
.tl.lg li { grid-template-columns: calc(20 * var(--u)) 1fr; padding: calc(3.2 * var(--u)) 0; }
.tl.lg .t { font-size: calc(5.2 * var(--u)); }
.tl.lg .d { font-size: calc(3.45 * var(--u)); }

/* Dải giờ nằm ngang — "Một ngày ở Bình Minh" */
.dayline { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); position: relative; }
.dayline::before { content: ""; position: absolute; left: 0; right: 0; top: calc(9.5 * var(--u)); height: calc(.3 * var(--u)); background: var(--dawn); }
.dayline > div { position: relative; padding-right: calc(5 * var(--u)); }
.dayline .t { font: 500 calc(7 * var(--u))/1 var(--serif); color: var(--accent); display: block; height: calc(9.5 * var(--u)); }
.dayline > div::before { content: ""; position: absolute; top: calc(8.4 * var(--u)); left: 0; width: calc(2.5 * var(--u)); height: calc(2.5 * var(--u)); border-radius: 50%; background: var(--paper); border: calc(.3 * var(--u)) solid var(--dawn); }
.dayline b { display: block; font: 600 calc(3.1 * var(--u))/1.3 var(--sans); margin-top: calc(5 * var(--u)); }
.dayline p { font: 400 calc(2.95 * var(--u))/1.5 var(--sans); color: var(--slate); margin-top: calc(1.2 * var(--u)); }
.dayline .en { font-size: calc(3 * var(--u)); margin-top: calc(.6 * var(--u)); }
.dayline.lg::before { top: calc(12 * var(--u)); }
.dayline.lg .t { font-size: calc(9.5 * var(--u)); height: calc(12 * var(--u)); }
.dayline.lg > div::before { top: calc(10.8 * var(--u)); }
.dayline.lg b { font-size: calc(3.6 * var(--u)); }
.dayline.lg p { font-size: calc(3.3 * var(--u)); }
.dayline.lg .en { font-size: calc(3.5 * var(--u)); }

.steps { list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: calc(20 * var(--u)) 1fr; padding: calc(6 * var(--u)) 0; border-top: calc(.25 * var(--u)) solid rgba(243,239,231,.2); }
.steps li::before { content: "0" counter(s); font: 500 calc(13 * var(--u))/0.85 var(--serif); color: var(--dawn); }
.steps b { display: block; font: 600 calc(6.6 * var(--u))/1.15 var(--serif); }
.steps p { font: 400 calc(3.4 * var(--u))/1.55 var(--sans); opacity: .9; margin-top: calc(1.6 * var(--u)); }

.ticks { list-style: none; }
.ticks li { position: relative; padding: calc(2.4 * var(--u)) 0 calc(2.4 * var(--u)) calc(6 * var(--u)); font: 400 calc(3.5 * var(--u))/1.45 var(--sans); border-bottom: calc(.25 * var(--u)) solid var(--line); break-inside: avoid; }
.ticks li::before { content: ""; position: absolute; left: 0; top: calc(4.6 * var(--u)); width: calc(3.2 * var(--u)); height: calc(.3 * var(--u)); background: var(--accent); }
.ticks li .en { display: inline; font-size: calc(3.2 * var(--u)); margin-left: calc(1 * var(--u)); }
.light .ticks li { border-color: rgba(243,239,231,.2); }

.qr {
  width: calc(var(--s, 26) * var(--u)); height: calc(var(--s, 26) * var(--u));
  border: calc(.3 * var(--u)) dashed currentColor; opacity: .7;
  display: grid; place-items: center; text-align: center;
  font: 500 calc(1.9 * var(--u))/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}

.contact dt { font: 600 calc(2.4 * var(--u))/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .72; margin-top: calc(6 * var(--u)); }
.contact dt:first-child { margin-top: 0; }
.contact dd { font: 500 calc(7.4 * var(--u))/1.15 var(--serif); margin-top: calc(1.2 * var(--u)); }
.contact dd small { display: block; font: 400 calc(2.9 * var(--u))/1.45 var(--sans); opacity: .85; }

/* Dòng kẻ ghi chú (trang Ghi chú hành trình) */
.lines { height: calc(var(--h, 120) * var(--u)); background: repeating-linear-gradient(180deg, transparent 0, transparent calc(8.5 * var(--u)), var(--line) calc(8.5 * var(--u)), var(--line) calc(9 * var(--u))); }

/* Khung ảnh chờ thay (chân dung nhân sự…) */
.ph-frame { position: absolute; display: grid; place-items: center; background: var(--stone); color: var(--mute);
  font: 500 calc(2 * var(--u))/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-align: center; }
.ph-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-frame img[src=""] { display: none; }

/* Khung ưu đãi — đường viền mảnh, không bo góc */
.offer { border-top: calc(.3 * var(--u)) solid var(--accent); padding-top: calc(4 * var(--u)); }
.offer .price { font-size: calc(9 * var(--u)); color: var(--accent); }

.tl .t, .dayline .t, .facts dd, .price, .num, .folio, .contact dd, .steps li::before, .index .pr { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* Điểm đánh số trên ảnh + chú giải */
.pin { position: absolute; z-index: 6; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(10 * var(--u)); height: calc(10 * var(--u)); margin: calc(-5 * var(--u)) 0 0 calc(-5 * var(--u));
  border-radius: 50%; background: var(--dawn); color: var(--night); display: grid; place-items: center;
  font: 600 calc(5 * var(--u))/1 var(--serif); box-shadow: 0 0 0 calc(1.8 * var(--u)) rgba(201,164,106,.4); }
.legend { list-style: none; counter-reset: lg; }
.legend li { counter-increment: lg; display: grid; grid-template-columns: calc(9 * var(--u)) 1fr; padding: calc(2.6 * var(--u)) 0; border-top: calc(.25 * var(--u)) solid rgba(243,239,231,.22); }
.legend li::before { content: counter(lg); width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--dawn); color: var(--night); display: grid; place-items: center; font: 600 calc(3.8 * var(--u))/1 var(--serif); }
.legend li.plain::before { content: "—"; background: none; color: var(--dawn); }
.legend b { display: block; font: 600 calc(3.4 * var(--u))/1.3 var(--sans); }
.legend span { font: 400 calc(2.95 * var(--u))/1.45 var(--sans); opacity: .85; }

/* Bảng so sánh */
.cmp { width: 100%; border-collapse: collapse; font: 400 calc(3 * var(--u))/1.35 var(--sans); }
.cmp th { font: 600 calc(2.3 * var(--u))/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-align: left; color: var(--mute); padding: 0 calc(2 * var(--u)) calc(2.4 * var(--u)) 0; }
.cmp td { padding: calc(3 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u)) 0; border-top: calc(.25 * var(--u)) solid var(--line); vertical-align: top; }
.cmp td:first-child { font: 600 calc(4.4 * var(--u))/1.15 var(--serif); }
.cmp td:first-child small { display: block; font: italic 500 calc(3 * var(--u))/1.3 var(--serif); color: var(--slate); }
.cmp td.n { font: 600 calc(4.4 * var(--u))/1 var(--serif); white-space: nowrap; color: var(--accent); }

/* Nhãn trên ô ảnh ghép */
.tile-cap { position: absolute; left: calc(5 * var(--u)); bottom: calc(5 * var(--u)); right: calc(5 * var(--u)); z-index: 3; color: var(--paper); text-shadow: 0 0 calc(4 * var(--u)) rgba(10,12,14,.5); }
.tile-cap .k { display: block; font: 500 calc(9 * var(--u))/1 var(--serif); color: var(--dawn); }
.tile-cap b { display: block; font: 600 calc(4.6 * var(--u))/1.15 var(--serif); margin-top: calc(1 * var(--u)); }
.tile-cap span { display: block; font: 400 calc(2.7 * var(--u))/1.4 var(--sans); opacity: .9; margin-top: calc(.6 * var(--u)); }

.on-photo .lbl.accent, .panel.dark .lbl.accent { color: var(--dawn); }
.light .dayline p, .light .index .pr small { color: rgba(243,239,231,.85); }
.on-photo .panel:not(.dark) .en, .on-photo .panel:not(.dark) .cap, .on-photo .panel:not(.dark) .small { color: var(--slate); }

.verify { outline: calc(.35 * var(--u)) dashed #D0473A; outline-offset: calc(.6 * var(--u)); }
body.proof-off .verify { outline: none; }

/* ---------- Thanh công cụ chỉnh sửa (không in) ---------- */
.toolbar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1000;
  display: flex; gap: 6px; padding: 6px; background: rgba(21,25,28,.92); border-radius: 999px;
  font: 500 12px/1 var(--sans); box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.toolbar button, .toolbar a {
  border: 0; background: transparent; color: #F3EFE7; padding: 10px 16px; border-radius: 999px;
  cursor: pointer; font: inherit; letter-spacing: .04em; text-decoration: none;
}
.toolbar button:hover, .toolbar a:hover { background: rgba(243,239,231,.12); }
.toolbar button.on { background: #C9A46A; color: #15191C; }
body.editing .spread [contenteditable="true"]:hover { outline: 1px dashed rgba(201,164,106,.9); outline-offset: 2px; }
body.editing .spread [contenteditable="true"]:focus { outline: 1px solid #C9A46A; outline-offset: 2px; }
body.editing .spread img { cursor: copy; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #15191C; color: #F3EFE7; padding: 12px 18px; border-radius: 8px; font: 400 13px/1.4 var(--sans); z-index: 1001; opacity: 0; transition: opacity .25s; pointer-events: none; }
.toast.show { opacity: 1; }

/* ---------- In ấn ---------- */
@page { size: 420mm 210mm; margin: 0; }
@media print {
  body { background: none; }
  .toolbar, .toast, .spread-meta { display: none !important; }
  .book { width: 420mm; margin: 0; gap: 0; display: block; }
  .spread { width: 420mm; height: 210mm; aspect-ratio: auto; box-shadow: none; break-after: page; page-break-after: always; }
  .spread::after { display: none; }
  .verify { outline: none; }
}