:root {
  --kraft: #d9c2a0;
  --kraft-2: #cdb28a;
  --paper: #fbf5ea;
  --ink: #4a3426;
  --ink-soft: #7a604c;
  --red: #c4513f;
  --rose: #e48f9f;
  --pink: #f6c1cb;
  --mint: #a9d6c4;
  --yellow: #f4d88a;
  --blue: #a8c4e6;
  --script: "Dancing Script", cursive;
  --hand: "Patrick Hand", "Be Vietnam Pro", cursive;
  --sans: "Be Vietnam Pro", system-ui, sans-serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .14 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V12l22 4 18-7 26 6 20-9 24 8 16-5 28 7 22-10 18 6 30-4 14 8 26-9 22 5 18-6 30 9 20-7 24 4 16-8 28 6 20-3 24 7 18-10 26 8 22-5 16 6 30-8 20 9 24-6 18 4 26-7 22 8 14-5 30 6 20-9 24 7 18-4 28 8 22-9 16 5 26-6 20 8 24-7 18 4 30-6 22 9 16-8 26 6 20-4 24 7 18-9 28 5 22 4 16-7 26 8 20-6 24 5 18-8 30 7 22-4 16 6 26-9 20 8 24-5 18 6 28-7 22 4 16 7 26-8 20 5 24-6 V24Z' fill='%23000'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--kraft); color: var(--ink); font-family: var(--sans); line-height: 1.7; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.script { font-family: var(--script); font-weight: 700; }
.hand { font-family: var(--hand); }
.center { text-align: center; }

#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* ---------- Nền giấy ---------- */
.kraft { background: var(--noise), linear-gradient(135deg, #dcc6a4, #d2b893); }
.paper { background: var(--noise), radial-gradient(circle at 1px 1px, rgba(122,96,76,.18) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--paper); }
.page { position: relative; padding: 96px 16px; }
.page > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.torn::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 24px; background: inherit;
  -webkit-mask: var(--torn) center / 100% 100% no-repeat; mask: var(--torn) center / 100% 100% no-repeat; z-index: 2; }

/* ---------- Washi tape, sticker ---------- */
.tape { position: absolute; width: 110px; height: 30px; opacity: .85; z-index: 3;
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 96% 12%, 100% 25%, 96% 40%, 100% 55%, 96% 70%, 100% 85%, 96% 100%, 0 100%, 4% 88%, 0 74%, 4% 60%, 0 46%, 4% 32%, 0 18%);
  box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tape-pink { background: repeating-linear-gradient(45deg, var(--pink) 0 8px, #fad6dc 8px 16px); }
.tape-mint { background: repeating-linear-gradient(90deg, var(--mint) 0 10px, #c4e5d7 10px 20px); }
.tape-yellow { background: radial-gradient(circle, #fff6 2px, transparent 2.5px) 0 0 / 10px 10px, var(--yellow); }
.tape-blue { background: repeating-linear-gradient(-45deg, var(--blue) 0 6px, #cddcf1 6px 12px); }
.sticker { position: absolute; font-size: 2.4rem; z-index: 2; pointer-events: none; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 4px 6px rgba(0,0,0,.15)); }
.s-flower1 { color: var(--rose); top: 12%; left: 4%; transform: rotate(-12deg); animation: wobble 4s ease-in-out infinite; }
.s-heart1 { color: var(--red); bottom: 10%; right: 5%; font-size: 3rem; transform: rotate(14deg); animation: wobble 3.4s ease-in-out infinite; }
.s-star1 { color: #e9b949; top: 8%; right: 42%; transform: rotate(8deg); animation: wobble 5s ease-in-out infinite; }

/* ---------- Gate ---------- */
.gate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; text-align: center; padding: 24px;
  background: var(--noise), linear-gradient(135deg, #dcc6a4, #cfb48c); transition: opacity 1.1s ease, visibility 1.1s; }
.gate.gone { opacity: 0; visibility: hidden; }
.gate-kicker { font-size: 1.4rem; color: var(--ink-soft); }
.gate-name { font-size: clamp(3.4rem, 13vw, 6.4rem); color: var(--red); line-height: 1.1; margin: 4px 0 40px; }
.gate-hint { margin-top: 36px; font-size: 1.25rem; color: var(--ink-soft); animation: pulse 2s infinite; }

.envelope { position: relative; width: 270px; height: 176px; margin: 0 auto; animation: float 3s ease-in-out infinite; }
.envelope > span { position: absolute; display: block; }
.env-back { inset: 0; background: #b8946a; border-radius: 4px; }
.env-front { inset: 0; z-index: 3; border-radius: 4px; background: var(--noise), linear-gradient(160deg, #e6d2b0, #d5bb92);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.env-flap { inset: 0; z-index: 4; transform-origin: top; background: var(--noise), linear-gradient(#dcc49e, #ccb086);
  clip-path: polygon(0 0, 100% 0, 50% 58%); transition: transform .6s ease; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.env-letter { left: 14px; right: 14px; top: 12px; height: 150px; z-index: 2; background: var(--paper); border-radius: 3px;
  display: grid; place-items: center; font-size: 2.2rem; color: var(--red); transition: transform .8s ease .4s; }
.env-seal { z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0705d, #a23426 70%); color: #f9d6cc; display: grid; place-items: center; font-size: 1.4rem;
  box-shadow: 0 3px 8px rgba(0,0,0,.3), inset 0 0 0 4px rgba(0,0,0,.12); transition: opacity .3s; }
.env-tape { top: -12px; right: -20px; transform: rotate(28deg); }
.envelope.open { animation: none; }
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.envelope.open .env-seal, .envelope.open .env-tape { opacity: 0; }
.envelope.open .env-letter { transform: translateY(-96px); }

/* ---------- Polaroid ---------- */
.pola { position: relative; background: #fffdf8; padding: 10px 10px 0; box-shadow: 0 2px 4px rgba(60,40,20,.15), 0 12px 24px rgba(60,40,20,.18);
  transform: rotate(var(--r, 0deg)); transition: transform .35s ease, box-shadow .35s; }
.pola img { width: 100%; height: auto; background: #eee; }
.pola figcaption, .pola .cap { font-family: var(--hand); font-size: 1.2rem; text-align: center; padding: 8px 4px 10px; color: var(--ink); min-height: 44px; }
.pola .tape { top: -14px; left: 50%; margin-left: -55px; transform: rotate(var(--tr, -4deg)); }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding-top: 72px; overflow: hidden; }
.hero > * { margin: 0; max-width: none; }
.hero-collage { position: relative; height: min(78vh, 640px); }
.hero-collage .pola { position: absolute; width: 46%; }
.hero-collage .pola:nth-child(1) { left: 4%; top: 2%; --r: -7deg; z-index: 1; }
.hero-collage .pola:nth-child(2) { left: 46%; top: 8%; --r: 6deg; z-index: 2; }
.hero-collage .pola:nth-child(3) { left: 22%; top: 40%; --r: -2deg; z-index: 3; width: 50%; }
.hero-collage .pola img { aspect-ratio: 4 / 5; object-fit: cover; }
.hero-text { text-align: center; position: relative; z-index: 2; }
.hero-kicker { font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--ink-soft); transform: rotate(-2deg); }
.hero-name { font-size: clamp(4rem, 11vw, 7.5rem); line-height: 1; color: var(--red); margin: 6px 0; text-shadow: 3px 3px 0 #fff8; }
.hero-age { font-size: clamp(1.4rem, 3.4vw, 2rem); }
.hero-age b { color: var(--red); font-weight: 400; background: linear-gradient(transparent 60%, var(--pink) 60%); padding: 0 4px; }

.ticket { display: flex; margin: 28px auto 0; max-width: 460px; filter: drop-shadow(0 8px 14px rgba(60,40,20,.2)); transform: rotate(-1.5deg); }
.ticket-main { flex: 1; background: #fff6e8; padding: 16px 18px; border-radius: 10px 0 0 10px; border: 2px dashed transparent;
  -webkit-mask: radial-gradient(circle 10px at 100% 50%, transparent 98%, #000) ; mask: radial-gradient(circle 10px at 100% 50%, transparent 98%, #000); }
.ticket-stub { width: 92px; background: var(--red); color: #fff3ea; border-radius: 0 10px 10px 0; border-left: 3px dashed #fff6e8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--hand); font-size: 1.15rem; line-height: 1.2; text-align: center; padding: 8px; }
.ticket-stub small { opacity: .8; margin-top: 4px; }
.ticket-label { font-size: .7rem; letter-spacing: .25em; color: var(--red); font-weight: 600; }
.ticket-title { font-family: var(--hand); font-size: 1.25rem; margin: 2px 0 8px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.countdown div { background: var(--paper); border: 1.5px solid #e8d8bf; border-radius: 8px; padding: 6px 0; }
.countdown span { display: block; font-family: var(--hand); font-size: 1.8rem; line-height: 1.1; color: var(--ink); }
.countdown small { font-size: .72rem; color: var(--ink-soft); }
.countdown.today { display: block; font-family: var(--script); font-size: 2rem; color: var(--red); line-height: 1.3; }

/* ---------- Tiêu đề mục ---------- */
.head { position: relative; text-align: center; margin-bottom: 48px; }
.head-tape { top: -8px; left: 50%; margin-left: -55px; transform: rotate(-3deg); }
.title { display: inline-block; font-size: clamp(2.6rem, 8vw, 4.2rem); color: var(--red); line-height: 1.2; padding: 14px 28px 6px;
  background: #fffaf0; box-shadow: 0 6px 16px rgba(60,40,20,.12); transform: rotate(-1deg); }
.lead { font-size: 1.3rem; color: var(--ink-soft); margin-top: 14px; }

.pill { font-family: var(--hand); font-size: 1.2rem; padding: 8px 22px; border-radius: 999px; background: #fffaf0; border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.pill:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.pill:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pill.big { margin-top: 36px; font-size: 1.35rem; }
.pill:disabled { opacity: .4; cursor: default; }

/* ---------- Tường polaroid ---------- */
.wall { columns: 4 230px; column-gap: 28px; padding-top: 10px; }
.wall .pola { break-inside: avoid; margin-bottom: 34px; cursor: zoom-in; }
.wall .pola:hover { transform: rotate(0deg) scale(1.04); z-index: 5; box-shadow: 0 4px 8px rgba(60,40,20,.2), 0 24px 40px rgba(60,40,20,.25); }

/* ---------- Cuốn sổ ---------- */
/* thư viện để các trang ẩn và bóng đổ nằm ngoài khung sách, cắt đi để trang không bị cuộn ngang */
.book-wrap { max-width: 800px; margin: 0 auto; padding: 10px 0 0; overflow-x: clip; }
.book { cursor: grab; }
.book img { pointer-events: none; -webkit-user-drag: none; }
.face { overflow: hidden; background: var(--noise), var(--paper); padding: 8% 9%; user-select: none; -webkit-user-select: none; }
.face.--left { box-shadow: inset -14px 0 20px -14px rgba(60,40,20,.4); }
.face.--right { box-shadow: inset 14px 0 20px -14px rgba(60,40,20,.4); }
.face.ruled { background: var(--noise), repeating-linear-gradient(transparent 0 29px, #cfdcea 29px 30px), var(--paper); }
.face.cover { background: var(--noise), linear-gradient(135deg, #b5523f, #8f3a2c); color: #fbe6da; display: grid; place-items: center; text-align: center; }
.face.cover .script { font-size: clamp(1.8rem, 4.6vw, 3rem); line-height: 1.15; }
.face.cover .label { background: var(--paper); color: var(--ink); padding: 10px 16px; font-family: var(--hand); font-size: clamp(.9rem, 2vw, 1.15rem); transform: rotate(-2deg); margin-top: 14px; display: inline-block; }
.face .pola { margin: 6% auto 0; width: 88%; --r: -3deg; }
.face .pola img { aspect-ratio: 1; object-fit: cover; }
.face h3 { font-family: var(--script); color: var(--red); font-size: clamp(1.5rem, 3.6vw, 2.4rem); line-height: 1.2; margin-top: 8%; }
.face p { font-family: var(--hand); font-size: clamp(1rem, 2.1vw, 1.35rem); line-height: 30px; margin-top: 10px; }
.face.last { display: grid; place-items: center; }
.face.last .script { font-size: clamp(1.8rem, 4.4vw, 2.8rem); color: var(--red); transform: rotate(-6deg); }
.face .pageno { position: absolute; bottom: 4%; left: 0; right: 0; text-align: center; font-family: var(--hand); color: var(--ink-soft); font-size: .95rem; }
.face .doodle { position: absolute; right: 8%; bottom: 10%; font-size: 2rem; color: var(--rose); transform: rotate(12deg); }
.book.no-flip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.book.no-flip .face { position: relative; aspect-ratio: 380 / 500; }

/* ---------- Album ---------- */
.album { columns: 5 170px; column-gap: 16px; }
.album .pola { break-inside: avoid; margin-bottom: 18px; padding: 7px 7px 20px; cursor: zoom-in; }
.album .pola:hover { transform: rotate(0deg) scale(1.05); z-index: 5; }
.pola.in { animation: drop .6s ease both; }

/* ---------- Ghép ảnh ---------- */
.jig { max-width: 400px; margin: 0 auto; display: grid; gap: 16px; }
.jig-deck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 8px; margin-bottom: -4px; }
.jig-col { position: relative; height: 72px; }
.jig-col .jig-back { position: absolute; left: 0; right: 0; height: 60px; top: calc(var(--i) * 6px); border-radius: 8px; border-width: 3px; }
.jig-col b { position: absolute; left: 50%; top: calc(var(--n) * 6px + 16px); translate: -50% 0; z-index: 1; min-width: 30px; padding: 0 6px; border-radius: 99px; background: #fffdf8; font-family: var(--hand); font-size: 1.2rem; line-height: 1.5; text-align: center; color: var(--red); box-shadow: 0 1px 3px rgba(40,25,10,.3); }
.jig-status { font-size: 1.15rem; color: var(--ink-soft); text-align: center; }
.jig-board { position: relative; aspect-ratio: 8 / 13; background: rgba(255,253,248,.55); border-radius: 14px; box-shadow: 0 0 0 8px #fffdf8, 0 14px 30px rgba(60,40,20,.28); touch-action: none; user-select: none; }
.jig-slot { position: absolute; border-radius: 8px; border: 2px dashed rgba(74,52,38,.22); }
.jig-tile { position: absolute; border-radius: 8px; background-repeat: no-repeat; box-shadow: var(--edge), var(--drop);
  transition: left .25s ease, top .25s ease, width .2s, height .2s, border-radius .2s, box-shadow .2s; cursor: grab; }
.jig-tile.mt { border-top-left-radius: 0; border-top-right-radius: 0; }
.jig-tile.mb { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.jig-tile.ml { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.jig-tile.mr { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.jig-tile.lift { transition: none; z-index: 10; cursor: grabbing; box-shadow: var(--edge), 0 14px 22px rgba(40,25,10,.4); }
.jig-tile.done { transition: transform .5s ease .35s, opacity .5s ease .35s; transform: translateY(-30px) scale(.9); opacity: 0; box-shadow: var(--edge), 0 0 18px #ffd36b; }
.jig-tile.deal { animation: deal .45s ease both; }
.jig-back { border-radius: 6px; border: 2px solid #fffdf8; box-shadow: 0 2px 4px rgba(40,25,10,.3);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.4) 0 16%, transparent 17%), repeating-linear-gradient(45deg, var(--red) 0 6px, #b84a39 6px 12px); }
.jig-win { display: none; text-align: center; }
.jig-win.show { display: block; animation: drop .6s ease; }
.jig-win .script { font-size: 2.4rem; color: var(--red); }
.jig-win .hand { font-size: 1.2rem; color: var(--ink-soft); margin-bottom: 10px; }
.jig-foot { text-align: center; }
@keyframes deal { from { transform: translateY(-60px) rotateY(90deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }

/* ---------- Bánh ---------- */
.cake-section { text-align: center; }
.cake { width: min(440px, 92vw); margin: 10px auto 0; }
.cake svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 22px rgba(60,40,20,.18)); }
.cake .candle { cursor: pointer; }
.cake .flame-g { transition: opacity .45s ease; }
.cake .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .14s infinite alternate; }
.cake .glow { animation: glow 1.6s ease-in-out infinite alternate; }
.cake .candle.out .flame-g { opacity: 0; }
.cake.windy .flame { animation: gust .07s infinite alternate; }
.blow { margin-top: 22px; display: grid; justify-items: center; gap: 12px; }
.mic-meter { width: min(260px, 70vw); height: 12px; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper); overflow: hidden; }
.mic-meter span { display: block; height: 100%; width: calc(var(--lv, 0) * 100%); background: var(--rose); transition: width .08s linear; }
.mic-meter.hit span { background: var(--red); }
.mic-note { font-size: 1.15rem; color: var(--ink-soft); min-height: 1.4em; }
.wish { margin-top: 28px; font-size: 1.6rem; color: var(--red); opacity: 0; transform: translateY(10px); transition: all 1s; }
.wish.show { opacity: 1; transform: none; }

/* ---------- Footer / nhạc / lightbox ---------- */
.footer { position: relative; text-align: center; padding: 70px 16px 100px; }
.footer .big { font-size: clamp(3.4rem, 11vw, 5.6rem); color: var(--red); line-height: 1.2; }
.footer .hand { font-size: 1.35rem; color: var(--ink-soft); }
.music-btn { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 54px; height: 54px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 1.4rem; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.music-btn.playing { animation: spin 4s linear infinite; }

.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(60,40,25,.85); display: grid; place-items: center; padding: 16px; }
.lightbox[hidden] { display: none; }
.lb-pola { background: #fffdf8; padding: 12px 12px 48px; box-shadow: 0 20px 60px rgba(0,0,0,.5); transform: rotate(-1.5deg); }
.lb-pola img { max-width: 86vw; max-height: 78vh; }
.lb-close { position: absolute; top: 10px; right: 16px; font-size: 2.6rem; color: #fff; z-index: 2; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3rem; padding: 12px; color: #fff; z-index: 2; }
.lb-prev { left: 4px; } .lb-next { right: 4px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

@keyframes float { 50% { transform: translateY(-10px) rotate(-1deg); } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes wobble { 50% { rotate: 10deg; } }
@keyframes drop { from { opacity: 0; translate: 0 -20px; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes flicker { to { transform: scale(.94, 1.06) rotate(3deg); } }
@keyframes glow { to { opacity: .55; } }
@keyframes gust { from { transform: skewX(-12deg) scale(.92, .95); } to { transform: skewX(-26deg) scale(.78, .82); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 8px; padding-top: 48px; }
  .hero-collage { height: 112vw; max-height: 560px; }
  .face { padding: 7% 7%; }
  .face p { line-height: 1.45; }
}
@media (max-width: 560px) {
  .wall { columns: 2; column-gap: 14px; }
  .wall .pola { margin-bottom: 20px; padding: 6px 6px 0; }
  .wall .pola .cap { font-size: .95rem; min-height: 30px; padding: 4px 2px 6px; }
  .album { columns: 3; column-gap: 8px; }
  .album .pola { padding: 4px 4px 12px; margin-bottom: 10px; }
  .page { padding: 72px 14px; }
  .sticker { font-size: 1.8rem; }
  .face .pola .cap { display: none; }
  .face .doodle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}