/* ============ bầu trời lời chúc (wishsky.js) ============
   .wish-sky: lớp sao phủ kín #end, nằm dưới thẻ cuối; không chặn vuốt dọc (trang cuộn để đi hành trình).
   .wish-note: tờ đọc lời chúc, gắn vào #end, nằm trên thẻ cuối. Bảng màu theo lá thư (letter.css, mẫu Ngà). */
.wish-sky { position: absolute; inset: 0; touch-action: pan-y; -webkit-tap-highlight-color: transparent; outline: none; user-select: none; -webkit-user-select: none; }
.wish-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.wish-sa { position: absolute; top: 0; left: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.wish-srl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* chữ nhỏ cạnh sao: "Lời chúc của bạn", gợi ý chạm */
.wish-cap { position: absolute; left: 0; top: 0; max-width: min(300px, calc(100vw - 32px)); padding: 2px 8px; pointer-events: none; white-space: nowrap;
  font: italic 400 16px/1.35 "EB Garamond", Georgia, serif; letter-spacing: .01em; color: #F3E4C6;
  text-shadow: 0 0 10px rgba(22,4,10,.9), 0 1px 2px rgba(22,4,10,.8); opacity: 0; transition: opacity 1.2s cubic-bezier(.22,.7,.2,1); }
.wish-cap.on { opacity: .92; }

/* ---------- tờ đọc lời chúc ---------- */
.wish-note {
  --wn-paper: #F4EDE0; --wn-ink: #2E1A17; --wn-wine: #7A1626; --wn-wine-2: #6E0F1C; --wn-gold: #B8914A; --wn-muted: #6B5249;
  position: absolute; left: 0; top: 0; z-index: 30; box-sizing: border-box;
  width: min(340px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: min(470px, calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  display: flex; flex-direction: column; padding: 30px 26px 14px; text-align: center; color: var(--wn-ink);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25 0 0 0 0 .16 0 0 0 0 .08 0 0 0 .32 -.12'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(150,100,40,.13)),
    var(--wn-paper);
  border-radius: 3px; outline: none; isolation: isolate;
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.75), 0 8px 18px -10px rgba(0,0,0,.5), 0 0 60px rgba(255,217,160,.14);
  opacity: 0; transform: translateY(6px); transition: opacity .35s cubic-bezier(.22,.7,.2,1), transform .45s cubic-bezier(.22,.7,.2,1);
  -webkit-user-select: text; user-select: text; touch-action: pan-y;
}
.wish-note[hidden] { display: none; }
.wish-note:focus { outline: none; }
.wish-note.on { opacity: 1; transform: none; }
.wish-note *, .wish-note *::before, .wish-note *::after { box-sizing: border-box; }
/* khung chỉ vàng kép như lá thư */
.wish-note::before { content: ""; position: absolute; inset: 7px; z-index: -1; pointer-events: none; border: 1px solid var(--wn-gold); border-radius: 1px;
  box-shadow: 0 0 0 3px var(--wn-paper), 0 0 0 4px color-mix(in srgb, var(--wn-gold) 45%, transparent); opacity: .85; }
.wn-name { margin: 0; padding: 0 30px; font: 400 34px/1.15 "Pinyon Script", cursive; color: var(--wn-wine); overflow-wrap: anywhere; text-wrap: balance; }
.wn-meta { margin: 6px 0 0; font: 500 12.5px/1.4 "Be Vietnam Pro", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--wn-muted); }
.wn-meta[hidden] { display: none; }
/* gạch ép kim nhỏ có hạt thoi ở giữa */
.wn-rule { position: relative; flex: none; width: 112px; height: 9px; margin: 12px auto 12px; }
.wn-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--wn-gold) 22%, var(--wn-gold) 40%, transparent 44%, transparent 56%, var(--wn-gold) 60%, var(--wn-gold) 78%, transparent); }
.wn-rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; transform: rotate(45deg); background: var(--wn-gold); }
.wn-msg { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -10px; padding: 0 10px 4px;
  font: 400 18px/1.6 "EB Garamond", Georgia, serif; color: var(--wn-ink); white-space: pre-line; overflow-wrap: anywhere; text-align: center; text-wrap: pretty;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--wn-gold) 60%, transparent) transparent; }
.wn-msg:focus-visible { outline: 2px solid var(--wn-gold); outline-offset: 2px; border-radius: 4px; }
.wn-foot { flex: none; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--wn-gold) 30%, transparent); }
.wn-foot[hidden] { display: none; }
.wn-n { font: 500 13px/1 "Be Vietnam Pro", system-ui, sans-serif; letter-spacing: .08em; color: var(--wn-muted); font-variant-numeric: tabular-nums; }
.wish-note button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wn-wine-2); cursor: pointer; transition: background .2s; }
.wish-note button:hover { background: color-mix(in srgb, var(--wn-wine) 8%, transparent); }
.wish-note button:focus-visible { outline: 2px solid var(--wn-gold); outline-offset: 1px; }
.wish-note button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wn-x { position: absolute; top: 9px; right: 9px; }
.wn-foot button { margin: 0 -10px; }

@media (prefers-reduced-motion: reduce) {
  .wish-cap, .wish-note { transition: none !important; }
  .wish-note { transform: none; }
}