/* =========================================================
   Trải nghiệm người nhận: màn chào, nhạc, hướng dẫn, sticker
   ========================================================= */

/* ---------- Không cho chọn chữ / kính lúp khi chạm giữ trên điện thoại ---------- */
body.reading .stage, body.reading .scene, .env, .env *, .packet, .seal, .welcome, .sticker {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
body.reading .env, body.reading .packet, body.reading .seal { touch-action: none; }
body.reading-experience .experience { -webkit-user-select: text; user-select: text; }

/* ---------- Dòng hướng dẫn: nổi bật, dễ đọc trên mọi nền ---------- */
.hint {
  left: 50%; right: auto; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding: 12px 22px; border-radius: 999px;
  background: rgba(255, 250, 240, .96); color: #33261f;
  border: 1px solid rgba(158, 59, 51, .28);
  box-shadow: 0 12px 30px rgba(40, 25, 15, .28), 0 0 0 6px rgba(255, 250, 240, .25);
  font: 500 15.5px/1.45 var(--ui); text-align: center;
  animation: hint-bob 2.4s ease-in-out infinite;
}
.hint:empty { display: none; }
.hint b { color: var(--wine); font-weight: 600; }
@keyframes hint-bob { 50% { transform: translate(-50%, -4px); } }
@media (max-width: 600px) { .hint { font-size: 15px; padding: 11px 18px; } }

/* ---------- Màn chào ---------- */
body.welcoming { overflow: hidden; }
.welcome {
  position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; overflow: hidden;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px)); text-align: center;
  color: #3a2c24; background: var(--wb, #efe3cf); animation: wl-in .6s ease both;
}
.welcome.preview { position: absolute; z-index: auto; animation: none; border-radius: 14px; }
.bd-theme.theme-ivory { --wb: radial-gradient(circle at 50% 28%, #fff8ea, #efe3cf 55%, #dccab0); }
.bd-theme.theme-burgundy { --wb: radial-gradient(circle at 50% 28%, #8e2134, #57101e 60%, #2f0810); color: #fbeee0; }
.bd-theme.theme-baroque { --wb: radial-gradient(circle at 50% 28%, #fff4d6, #e6cf91 55%, #b3934b); }
.bd-theme.theme-sage { --wb: radial-gradient(circle at 50% 28%, #f4f7ec, #cbd8bd 55%, #8fa384); }
.bd-night { --wb: radial-gradient(circle at 20% 30%, #fff 1px, transparent 1.5px) 0 0/90px 90px, radial-gradient(circle at 70% 60%, #fff8 1px, transparent 1.5px) 0 0/130px 130px, radial-gradient(circle at 50% 22%, #2e3d72, #121a38 60%, #070b1c); color: #f6eedc; }
.bd-blush { --wb: radial-gradient(circle at 50% 25%, #fff1f2, #f8c9d1 55%, #ec9fb1); }
.bd-gold { --wb: radial-gradient(circle at 50% 25%, #fffaf0, #f2d78e 55%, #d4a640); }
.bd-mint { --wb: radial-gradient(circle at 50% 25%, #f5fffa, #c7eadb 55%, #8fcab2); }
.bd-photo { --wb: #1b1512; color: #fff8ee; }
.welcome-photo { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(16px) brightness(.5) saturate(1.1); transform: scale(1.08); }
.welcome-glow { position: absolute; width: 140vmax; height: 140vmax; left: 50%; top: 42%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 240, 210, .35), transparent 45%); animation: breathe 6s ease-in-out infinite; pointer-events: none; }
.welcome-card { position: relative; max-width: 600px; }
.welcome-badge { width: 112px; height: 112px; margin: 0 auto 22px; position: relative; display: grid; place-items: center; animation: wl-pop .9s cubic-bezier(.2, 1.4, .4, 1) .1s both; }
.welcome-badge .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed currentColor; opacity: .45; animation: wl-spin 18s linear infinite; }
.welcome-badge b { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font: 40px/1 var(--serif); background: rgba(255, 255, 255, .55); box-shadow: 0 10px 30px rgba(60, 30, 15, .2), inset 0 0 0 1px rgba(255, 255, 255, .6); color: var(--wine); }
.bd-night .welcome-badge b, .bd-photo .welcome-badge b, .bd-theme.theme-burgundy .welcome-badge b { background: rgba(255, 255, 255, .14); color: #ffe3b3; }
.welcome-kicker { font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .78; margin: 0; animation: wl-up .7s .25s both; }
.welcome-title { font: 500 clamp(34px, 7vw, 66px)/1.08 var(--serif); letter-spacing: -.02em; margin: 14px 0 16px; text-wrap: balance; }
.welcome-title .ww { display: inline-block; animation: wl-word .7s cubic-bezier(.2, .8, .3, 1) both; }
.welcome-note { font: italic clamp(16px, 2.4vw, 20px)/1.6 var(--serif); opacity: .88; max-width: 460px; margin: 0 auto 30px; animation: wl-up .8s 1s both; }
.welcome-loading { display: flex; gap: 10px; justify-content: center; align-items: center; font-size: 14px; opacity: .8; margin: 0; }
.welcome-loading .dots { display: inline-flex; gap: 5px; }
.welcome-loading .dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: wl-dot .9s ease-in-out infinite alternate; }
.welcome-loading .dots i:nth-child(2) { animation-delay: .2s; } .welcome-loading .dots i:nth-child(3) { animation-delay: .4s; }
.welcome-open { display: none; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 17px 34px; background: var(--wine); color: #fff; font: 600 18px var(--ui); box-shadow: 0 16px 34px rgba(120, 30, 25, .35); cursor: pointer; animation: wl-up .6s both, wl-pulse 2.2s 1s ease-in-out infinite; }
.welcome-open.ready, .welcome.preview .welcome-open { display: inline-flex; }
.welcome-open i { font-style: normal; font-size: 22px; }
.welcome-open:hover { background: var(--wine-dark); }
.welcome-music { font-size: 13px; opacity: .75; margin: 18px 0 0; }
.welcome.leaving { animation: wl-out .85s cubic-bezier(.6, 0, .4, 1) forwards; pointer-events: none; }
@keyframes wl-in { from { opacity: 0; } }
@keyframes wl-out { to { opacity: 0; transform: scale(1.08); filter: blur(8px); } }
@keyframes wl-pop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
@keyframes wl-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes wl-word { from { opacity: 0; transform: translateY(.5em); filter: blur(4px); } }
@keyframes wl-spin { to { transform: rotate(360deg); } }
@keyframes wl-dot { to { opacity: .2; transform: translateY(-3px); } }
@keyframes wl-pulse { 50% { box-shadow: 0 16px 34px rgba(120, 30, 25, .35), 0 0 0 12px rgba(158, 59, 51, .12); } }

/* Thanh nhạc nhỏ, luôn chừa chỗ cho lá thư. */
.music-dock { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 45; width: min(360px, calc(100vw - 24px)); box-sizing: border-box; padding: 10px 12px 7px; border: 1px solid #ffffff25; border-radius: 18px; background: #272a27; color: #fff9ed; box-shadow: 0 8px 28px #0004; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s; }
.music-dock.shown { visibility: visible; opacity: 1; pointer-events: auto; }
.md-bar { display: flex; align-items: center; gap: 10px; }
.md-disc { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: repeating-radial-gradient(#41483e 0 2px,#222820 3px 5px); color: #d9e7ad; }
.music-dock.playing .md-disc { animation: wl-spin 12s linear infinite; }
.md-meta { flex: 1; min-width: 0; }
.md-title { display: block; overflow: hidden; font: 500 13px var(--ui); white-space: nowrap; }
.md-track { display: inline-flex; min-width: 200%; animation: md-scroll 24s linear infinite; }
.md-track > span { box-sizing: border-box; flex: 1 0 auto; padding-right: 32px; }
.music-dock:hover .md-track, .music-dock:focus-within .md-track { animation-play-state: paused; }
.md-subtitle { display: block; font: 10px var(--ui); color: #c6cdbd; margin-top: 4px; }
.md-btn { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #e3edc9; color: #253027; font-size: 13px; cursor: pointer; }
.md-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.md-btn.ghost { background: transparent; color: #fff9ed; font-size: 24px; }
.md-timeline { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.md-progress { flex: 1; height: 2px; overflow: hidden; background: #ffffff30; border-radius: 3px; }
.md-progress-fill { display: block; height: 100%; background: #d6e6ad; transition: width .4s linear; }
.md-time { font: 9px var(--ui); color: #c6cdbd; font-variant-numeric: tabular-nums; }
.md-video-panel { position: absolute; right: 0; bottom: calc(100% + 10px); padding: 8px; width: 216px; box-sizing: border-box; border-radius: 14px; background: #272a27; box-shadow: 0 8px 28px #0004; }
.md-video-heading { display: flex; align-items: center; justify-content: space-between; font: 11px var(--ui); }
.md-frame { width: 200px; height: 200px; background: #000; }
.md-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.music-dock.collapsed .md-video-panel { display: none; }
body.has-music-bar:not(.reading-experience) .hint { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
body.has-music-bar.reading-experience .reader-bar { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
@keyframes md-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .md-track, .music-dock.playing .md-disc { animation: none; } }

/* Thẻ nhạc trong giao diện đọc */
.music-card .music-toggle { margin-top: 2px; }
.music-card.spinning .record { animation: wl-spin 4s linear infinite; }
.music-card.yt-preview iframe { width: 100%; min-height: 200px; aspect-ratio: 16/9; border: 0; border-radius: 6px; margin-top: 8px; }

/* Gợi ý cài app sau khi đọc */
#installCta { background: var(--wine); border-color: var(--wine); color: #fff; }

/* ---------- Sticker trên phong bì ---------- */
.sticker-layer { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.sticker { position: absolute; width: 64px; height: 64px; display: grid; place-items: center; transform-origin: center;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 5px rgba(0, 0, 0, .25)); }
.st-emoji { font: 46px/1 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.st-pack svg { width: 60px; height: 60px; display: block; }
.st-img { width: 72px; height: 72px; object-fit: contain; pointer-events: none; }
.stickers-editing .sticker-layer .sticker { pointer-events: auto; cursor: grab; touch-action: none; }
.stickers-editing .sticker.selected { outline: 2px dashed var(--wine); outline-offset: 6px; border-radius: 8px; }
.st-handle { position: absolute; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--wine); color: #fff; font: 600 14px/1 var(--ui); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); cursor: pointer; filter: none; }
.st-handle.del { top: -16px; right: -16px; }
.st-handle.rot { bottom: -16px; right: -16px; cursor: nwse-resize; background: var(--ink); touch-action: none; }

/* ---------- Kiểu phong bì ---------- */
.env-front.t-post:before { content: ''; position: absolute; inset: 10px; border: 1.5px solid rgba(210, 59, 47, .55); border-radius: 3px; pointer-events: none; }
.post-code { position: absolute; right: 30px; bottom: 22px; display: flex; gap: 4px; }
.post-code i { width: 17px; height: 22px; border: 1.5px solid #d23b2f; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.t-post .addr-to .name, .t-post .addr-to .line { border-bottom-color: rgba(210, 59, 47, .55); }
.t-window .addr-to { background: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(240, 244, 248, .55)); border: 1px solid rgba(60, 70, 90, .18); border-radius: 8px; padding: 12px 16px 6px; box-shadow: inset 0 1px 8px rgba(0, 0, 0, .08); left: 40%; top: 138px; }
.env-front.t-gold:before { content: ''; position: absolute; inset: 9px; border: 2px solid #c9a24a; border-radius: 3px; box-shadow: inset 0 0 0 4px rgba(201, 162, 74, .2), 0 0 0 1px rgba(255, 255, 255, .4); pointer-events: none; }
.env-back.t-gold .flap-out { background-image: linear-gradient(180deg, rgba(201, 162, 74, .35), transparent 30%); }

/* ---------- Cách bày ảnh mới ---------- */
.photo-board.layout-filmstrip, .photo-board.layout-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.photo-board::-webkit-scrollbar { display: none; }
.layout-filmstrip { gap: 10px; padding: 22px 12px; border-radius: 4px; background:
  repeating-linear-gradient(90deg, #efe6d6 0 9px, transparent 9px 22px) 0 7px / 100% 8px no-repeat local,
  repeating-linear-gradient(90deg, #efe6d6 0 9px, transparent 9px 22px) 0 calc(100% - 7px) / 100% 8px no-repeat local, #1f1c1a; }
.layout-filmstrip .polaroid { flex: 0 0 min(72%, 250px); scroll-snap-align: center; padding: 0; background: transparent; box-shadow: none; transform: none; }
.layout-filmstrip .polaroid img { aspect-ratio: 4/3; filter: sepia(.15) contrast(1.05); }
.layout-filmstrip .polaroid figcaption { color: #efe6d6; font-size: 13px; min-height: 30px; padding: 6px 0 0; }
.layout-stack { display: grid; place-items: center; padding: 30px 20px 10px; }
.layout-stack .polaroid { grid-area: 1 / 1; width: min(280px, 82%); transition: transform .38s ease, opacity .38s; }
.layout-stack .polaroid:nth-child(1) { z-index: 6; transform: rotate(-2deg); }
.layout-stack .polaroid:nth-child(2) { z-index: 5; transform: rotate(5deg) translate(10px, 4px); }
.layout-stack .polaroid:nth-child(3) { z-index: 4; transform: rotate(-7deg) translate(-10px, 6px); }
.layout-stack .polaroid:nth-child(n+4) { z-index: 3; transform: rotate(3deg) translate(6px, 8px); }
.layout-stack .polaroid.flying { transform: translateX(120%) rotate(22deg); opacity: 0; }
.stack-hint { grid-area: 2 / 1; margin: 18px 0 0; font-size: 12px; opacity: .7; }
.layout-scrapbook { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; padding: 34px 22px 26px; border-radius: 6px;
  background: radial-gradient(rgba(120, 90, 60, .14) 1px, transparent 1.4px) 0 0 / 16px 16px, #f7f0e1; box-shadow: inset 0 0 0 1px rgba(120, 90, 60, .12), 0 10px 26px rgba(48, 33, 22, .12); }
.layout-scrapbook .polaroid { padding: 8px 8px 0; }
.layout-scrapbook .polaroid:nth-child(odd) { margin-top: 14px; }
.layout-scrapbook .tape { position: absolute; top: -11px; left: 50%; width: 74px; height: 22px; transform: translateX(-50%) rotate(-5deg); background: rgba(241, 214, 139, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); z-index: 2; }
.layout-scrapbook .polaroid:nth-child(even) .tape { transform: translateX(-50%) rotate(6deg); background: rgba(186, 214, 226, .8); }
.layout-scrapbook .polaroid figcaption { font-size: 14px; }
.layout-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 8px 0; }
.layout-grid .polaroid { padding: 0; transform: none; border-radius: 12px; overflow: hidden; position: relative; }
.layout-grid .polaroid img { aspect-ratio: 1; }
.layout-grid .polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 0; min-height: 0; padding: 18px 8px 8px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.carousel-wrap { position: relative; }
.layout-carousel { gap: 16px; padding: 16px 4px; }
.layout-carousel .polaroid { flex: 0 0 84%; scroll-snap-align: center; transform: none; }
.cr-nav { position: absolute; top: 45%; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 250, 240, .95); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); }
.cr-nav.prev { left: -8px; } .cr-nav.next { right: -8px; }

/* ---------- Màn chờ tĩnh khi vừa mở link thư ---------- */
.boot-splash { display: none; }
.boot-reading .boot-splash { display: grid; place-content: center; justify-items: center; gap: 14px; position: fixed; inset: 0; z-index: 34; background: radial-gradient(circle at 50% 35%, #fff8ea, #efe3cf 60%, #dccab0); color: #5c4c40; font: 500 14px 'Be Vietnam Pro', system-ui, sans-serif; }
.bs-env { font-size: 54px; animation: bs-float 1.6s ease-in-out infinite; }
@keyframes bs-float { 50% { transform: translateY(-8px) rotate(-4deg); } }

/* Cho phép cuộn dòng cuối lên trên ô video nổi. */
body.youtube-visible .experience { padding-bottom: 340px; }
@media (min-width: 900px) { .music-dock { left: auto; right: 18px; transform: none; width: 310px; } }

/* =========================================================
   Bày ảnh theo số lượng (tối đa 20 ảnh)
   n-s: 1-4 ảnh · n-m: 5-9 ảnh · n-l: 10-20 ảnh
   ========================================================= */
.photo-pager { position: relative; min-width: 0; }
.photo-pager > .photo-board { position: relative; }
.pager-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.pager-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent, #77523f) 35%, transparent); background: var(--paper, #fffaf0); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .08); }
.pager-label { min-width: 8em; text-align: center; font: 500 12px var(--mono); letter-spacing: .05em; color: var(--muted, #8b7460); }

/* Ruy-băng: nhiều dây, mỗi dây 4 tấm treo so le, lướt ngang */
.photo-board.layout-ribbon.multi { display: flex; gap: 24px; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 34px 4px 8px; }
.photo-board.layout-ribbon.multi::before { display: none; }
.ribbon-strand { position: relative; flex: 0 0 100%; scroll-snap-align: center; display: grid; padding-top: 6px; }
.ribbon-strand::before { content: ''; position: absolute; top: -34px; bottom: 0; left: calc(50% - 15px); width: 30px; border-radius: 2px; background: linear-gradient(90deg, #4a1424, #9c3143 45%, #631529 80%, #b7535c); box-shadow: 3px 0 6px #34132333; }
.theme-baroque .ribbon-strand::before { background: linear-gradient(90deg, #665528, #baa16a, #735f33); }
.theme-sage .ribbon-strand::before { background: linear-gradient(90deg, #56684d, #93a680, #657557); }
.ribbon-strand::before { z-index: 0; }
.ribbon-strand .polaroid { width: 45%; z-index: 1; }
.ribbon-strand .polaroid:nth-child(odd) { justify-self: start; }
.ribbon-strand .polaroid:nth-child(even) { justify-self: end; margin-top: -32%; }
/* Kẹp gỗ giữ ảnh vào dải ruy-băng */
.ribbon-strand .polaroid::after { content: ""; position: absolute; top: -10px; width: 9px; height: 26px; border-radius: 3px; background: linear-gradient(90deg, #b58a5a, #d9b384 50%, #a77b4c); box-shadow: 0 2px 3px rgba(0, 0, 0, .25); }
.ribbon-strand .polaroid:nth-child(odd)::after { right: 8px; }
.ribbon-strand .polaroid:nth-child(even)::after { left: 8px; }
.ribbon-strand .polaroid figcaption { font-size: 13px; min-height: 34px; padding: 8px 0; }

/* Album ghép: từ 5 ảnh thành lưới 3 cột, ảnh đầu to gấp đôi */
.layout-collage.n-m, .layout-collage.n-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.layout-collage.n-m .polaroid, .layout-collage.n-l .polaroid { padding: 5px 5px 0; margin: 0; }
.layout-collage.n-m .polaroid:first-child, .layout-collage.n-l .polaroid:first-child { grid-column: span 2; grid-row: span 2; margin: 0; }
.layout-collage.n-m .polaroid img, .layout-collage.n-l .polaroid img, .layout-collage.n-m .polaroid:first-child img, .layout-collage.n-l .polaroid:first-child img { aspect-ratio: 1; }
.layout-collage.n-m .polaroid figcaption, .layout-collage.n-l .polaroid figcaption { font-size: 11px; min-height: 26px; padding: 5px 0; }
.layout-collage.n-m .polaroid:nth-child(3n), .layout-collage.n-l .polaroid:nth-child(3n) { margin-top: 0; }
.more-tile { position: relative; border: 0; padding: 0; border-radius: 4px; overflow: hidden; cursor: pointer; background: #1b1512; aspect-ratio: 1; align-self: start; }
.more-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .45; display: block; }
.more-tile span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 600 26px var(--serif); }

/* Cuộn phim: nhiều khung thì khung nhỏ lại */
.layout-filmstrip.n-m .polaroid { flex-basis: min(58%, 220px); }
.layout-filmstrip.n-l .polaroid { flex-basis: min(46%, 180px); }

/* Xấp ảnh: chỉ hiện vài lớp trên cùng cho nhẹ */
.layout-stack .polaroid:nth-child(n+6) { opacity: 0; pointer-events: none; }

/* Sổ lưu bút: mỗi trang 4 ảnh, lật ngang */
.photo-board.layout-scrapbook.multi { display: flex; gap: 16px; padding: 0; background: none; box-shadow: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.scrap-page { flex: 0 0 100%; scroll-snap-align: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; padding: 34px 22px 26px; border-radius: 6px;
  background: radial-gradient(rgba(120, 90, 60, .14) 1px, transparent 1.4px) 0 0 / 16px 16px, #f7f0e1; box-shadow: inset 0 0 0 1px rgba(120, 90, 60, .12); }

/* Lưới: số cột tăng theo số ảnh */
.layout-grid.n-s { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layout-grid.n-m { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.layout-grid.n-l { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.layout-grid.n-l .polaroid figcaption { font-size: 10.5px; padding: 14px 6px 6px; }
.layout-grid.collapsed .extra { display: none; }
.grid-more { display: flex; margin: 12px auto 0; }
@media (max-width: 700px) { .layout-grid.n-l { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Trình xem ảnh lớn: lướt qua lại */
.photo-dialog.gallery { width: min(920px, 96vw); padding: 12px 12px 16px; }
.pg-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pg-count { font: 500 13px var(--mono); color: #7a6655; }
.pg-stage { position: relative; display: grid; place-items: center; }
.pg-stage img { display: block; max-width: 100%; max-height: 74dvh; object-fit: contain; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.pg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 250, 240, .94); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); }
.pg-nav.prev { left: 6px; } .pg-nav.next { right: 6px; }
.photo-dialog.gallery > p { text-align: center; font: 17px var(--hand); margin: 12px 0 0; min-height: 1em; }

/* Receiver controls occupy their own space, never the letter surface. */
body.reading:not(.reading-experience) .caption {
  position: relative; top: auto; flex: none; padding: 18px 16px 8px;
}
body.reading:not(.reading-experience) .scene { min-height: 0; }
body.reading:not(.reading-experience) .hint {
  position: relative; inset: auto; transform: none; animation: none;
  flex: none; box-sizing: border-box; margin: 12px 16px 24px;
  max-width: calc(100% - 32px);
}
body.reading .md-video-panel {
  position: static; margin: 0 auto 8px; box-shadow: none; padding: 0; width: 100px;
}
body.reading.has-music-bar .layout { margin-right: 0; }
body.reading.youtube-visible .experience { padding-bottom: 40px; }
body.reading.has-music-bar.reading-experience .reader-bar { padding-bottom: 22px; }
@media (max-width: 899px) {
  body.reading.has-music-bar { overflow: hidden; }
  body.reading.has-music-bar .layout {
    position: fixed; top: var(--topbar); left: 0; right: 0;
    bottom: calc(var(--music-height, 80px) + 24px + env(safe-area-inset-bottom, 0px));
    min-height: 0; margin: 0; overflow: auto; overscroll-behavior: contain;
    display: block;
  }
  body.reading.has-music-bar:not(.reading-experience) .stage {
    height: calc(100dvh - var(--topbar) - var(--music-height, 80px) - 24px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 340px !important;
  }
  body.reading.has-music-bar.reading-experience .stage { min-height: 100%; }

}

/* Compact receiver video; controls stay outside the 100px picture. */
body.reading .md-frame { width: 100px; height: 100px; }
body.reading .music-dock.is-yt:not(.collapsed) {
  display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 6px 12px;
}
body.reading .music-dock.is-yt:not(.collapsed) .md-video-panel { margin: 0; }
body.reading .music-dock.is-yt:not(.collapsed) .md-bar {
  flex-direction: column; justify-content: center; min-width: 0; text-align: center;
}
body.reading .music-dock.is-yt:not(.collapsed) .md-meta { flex: none; width: 100%; }
body.reading .music-dock.is-yt:not(.collapsed) .md-disc { display: none; }
body.reading .music-dock.is-yt:not(.collapsed) .md-timeline { grid-column: 1 / -1; margin: 0; }

/* Desktop: continue the letter background behind the player, with a small cream rim. */
@media (min-width: 900px) {
  body.reading.has-music-bar:not(.reading-experience) .stage { padding-right: 46px; }
  body.reading.has-music-bar.reading-experience .experience { padding-right: 46px; }
  body.reading .music-dock { box-shadow: 0 0 0 8px #f3ecdd, 0 10px 30px #0003; }
}
/* Mobile: one slim row, a 33px video and independently usable controls. */
@media (max-width: 899px) {
  body.reading .music-dock { padding: 6px 8px; border-radius: 12px; }
  body.reading .music-dock.is-yt:not(.collapsed) {
    grid-template-columns: 33px minmax(0, 1fr) 24px; gap: 4px 8px;
  }
  body.reading .music-dock.is-yt:not(.collapsed) .md-video-panel { display: contents; }
  body.reading .md-frame { grid-column: 1; grid-row: 1; width: 33px; height: 33px; }
  body.reading .md-video-heading { grid-column: 3; grid-row: 1; }
  body.reading .md-video-heading > span { display: none; }
  body.reading .md-video-heading .md-btn { width: 24px; height: 33px; font-size: 20px; }
  body.reading .music-dock.is-yt:not(.collapsed) .md-bar {
    grid-column: 2; grid-row: 1; flex-direction: row; text-align: left; gap: 8px;
  }
  body.reading .music-dock.is-yt:not(.collapsed) .md-meta { flex: 1; width: auto; }
  body.reading .music-dock .md-subtitle { display: none; }
  body.reading .music-dock .md-play { width: 33px; height: 33px; }
  body.reading .music-dock.is-yt:not(.collapsed) .md-timeline { grid-row: 2; }
}

/* Keep the chosen welcome setting throughout opening and reading. */
.welcome.receiver-backdrop {
  z-index: 0; pointer-events: none; animation: none;
}
.welcome.receiver-backdrop .welcome-card { display: none; }
body.reading.keep-welcome .layout { position: relative; z-index: 1; }
body.reading.keep-welcome #stage,
body.reading.keep-welcome .experience { background: transparent; }
body.reading.keep-welcome #stage::before,
body.reading.keep-welcome .experience::before,
body.reading.keep-welcome .desk-light { display: none; }
body.reading.keep-welcome .caption,
body.reading.keep-welcome .experience-hero,
body.reading.keep-welcome .experience-footer { color: var(--receiver-text, #3a2c24); }
body.reading.keep-welcome .reader-bar { background: rgba(255,250,240,.8); }
@media (max-width: 899px) {
  body.reading.keep-welcome.has-music-bar .layout { position: fixed; }
}