/* =============================================================
   THIỆP CƯỚI ONLINE — Xuân Hưng & Hà Du
   Tông màu lấy theo thiệp giấy: hồng sen, hồng phấn, trắng ngà.
   ============================================================= */

:root{
  --rose:        #e5437f;   /* hồng đậm — chữ nhấn */
  --rose-deep:   #c72e66;
  --pink:        #f48fb1;   /* hồng nơ */
  --pink-soft:   #f9c6d8;
  --blush:       #fdeaf1;   /* nền hồng phấn */
  --blush-2:     #fff5f8;
  --cream:       #fffdfc;
  --ink:         #2f2a30;
  --ink-soft:    #6b626c;
  --line:        #f3cfdd;

  --radius:      22px;
  --radius-lg:   34px;
  --shadow:      0 18px 44px -24px rgba(199, 46, 102, .45);
  --shadow-soft: 0 10px 30px -18px rgba(199, 46, 102, .40);

  --font-script: "Dancing Script", "Segoe Script", cursive;
  --font-serif:  "Playfair Display", "Times New Roman", serif;
  --font-body:   "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;

  --wrap: 1080px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -5%, #fff 0%, var(--blush-2) 45%, var(--blush) 100%) fixed;
  line-height:1.7;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100vh; }

img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:var(--rose); }

.script{ font-family:var(--font-script); font-weight:700; }

.wrap{
  width:min(100% - 40px, var(--wrap));
  margin-inline:auto;
}

/* ------------------------------------------------------------
   CÁNH HOA RƠI
   ------------------------------------------------------------ */
#petals{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:6;
}

/* ------------------------------------------------------------
   MÀN MỞ THIỆP
   ------------------------------------------------------------ */
.cover{
  position:fixed; inset:0;
  z-index:50;
  display:grid; place-items:center;
  padding:24px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(30,14,22,.20) 0%, rgba(30,14,22,.02) 22%, rgba(30,14,22,.05) 55%, rgba(30,14,22,.55) 100%),
    url("../assets/images/anhTongHop/anhNen.jpg") center 20% / cover no-repeat;
  transition:opacity .9s ease, visibility .9s;
}
.cover::before,
.cover::after{
  content:""; position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(244,143,177,.45), transparent 70%);
  filter:blur(6px); animation:floatBlob 9s ease-in-out infinite;
  mix-blend-mode:screen;
}
.cover::before{ width:320px; height:320px; top:-90px; left:-80px; }
.cover::after { width:400px; height:400px; bottom:-140px; right:-110px; animation-delay:-4s; }

.cover.is-open{ opacity:0; visibility:hidden; }

.cover__inner{
  position:relative; z-index:2;
  max-width:560px;
  align-self:end;
  padding-bottom:6vh;
  animation:coverIn 1s cubic-bezier(.2,.8,.25,1) both;
}
.cover__ribbon{ animation:swing 4.5s ease-in-out infinite; transform-origin:50% 10%; margin-bottom:-14px; display:flex; justify-content:center; }
.cover__ribbon svg{ filter:drop-shadow(0 12px 18px rgba(229,67,127,.4)); }

.cover__eyebrow{
  font-size:.78rem; letter-spacing:.5em; text-transform:uppercase;
  color:#fff; margin:8px 0 18px; padding-left:.5em;
  text-shadow:0 2px 14px rgba(46,20,32,.55);
}
.cover__names{
  font-size:clamp(2.6rem, 11vw, 4.4rem);
  line-height:1.18; margin:0; color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-shadow:0 4px 24px rgba(46,20,32,.55), 0 1px 0 rgba(46,20,32,.25);
}
.cover__amp{ display:block; animation:beat 1.6s ease-in-out infinite; filter:drop-shadow(0 2px 10px rgba(46,20,32,.4)); }
.cover__date{
  font-family:var(--font-serif);
  font-size:clamp(1rem,4.4vw,1.4rem); letter-spacing:.32em;
  color:#fff; margin:14px 0 26px;
  text-shadow:0 2px 14px rgba(46,20,32,.55);
}
.cover__hint{ font-size:.82rem; color:#fff; opacity:.92; margin-top:16px; text-shadow:0 2px 10px rgba(46,20,32,.6); }

/* ------------------------------------------------------------
   NÚT
   ------------------------------------------------------------ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  border:none; border-radius:999px;
  padding:14px 34px;
  font-size:1rem; font-weight:500; letter-spacing:.06em;
  color:#fff; background:linear-gradient(135deg,var(--pink),var(--rose));
  box-shadow:0 14px 30px -14px rgba(229,67,127,.75);
  transition:transform .25s, box-shadow .25s, filter .25s;
  overflow:hidden;
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);
  animation:shine 3.4s ease-in-out infinite;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 20px 34px -14px rgba(229,67,127,.8); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn--open{ font-size:1.05rem; padding:16px 42px; animation:pulseGlow 2.6s ease-in-out infinite; }
.btn--ghost{
  background:transparent; color:var(--rose);
  border:1.5px solid var(--pink); box-shadow:none;
  margin-top:26px;
}
.btn--ghost::after{ display:none; }
.btn--ghost:hover{ background:var(--rose); color:#fff; border-color:var(--rose); }
.btn--sm{ padding:10px 22px; font-size:.9rem; }

/* ------------------------------------------------------------
   NÚT NHẠC
   ------------------------------------------------------------ */
.music-btn{
  position:fixed; right:16px; bottom:16px; z-index:40;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  border:none; color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--rose));
  box-shadow:0 12px 26px -12px rgba(229,67,127,.9);
  opacity:0; transform:scale(.6); pointer-events:none;
  transition:opacity .5s, transform .5s;
}
.music-btn.is-ready{ opacity:1; transform:scale(1); pointer-events:auto; }
.music-btn.is-playing .music-btn__icon{ animation:spin 4s linear infinite; }
.music-btn:not(.is-playing){ filter:grayscale(.45); }
.music-btn__waves{ position:absolute; inset:0; border-radius:50%; }
.music-btn__waves i{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--pink); opacity:0;
}
.music-btn.is-playing .music-btn__waves i{ animation:ripple 2.4s ease-out infinite; }
.music-btn.is-playing .music-btn__waves i:nth-child(2){ animation-delay:.8s; }
.music-btn.is-playing .music-btn__waves i:nth-child(3){ animation-delay:1.6s; }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.card{ position:relative; z-index:2; }

.hero{
  min-height:100svh;
  display:grid; place-items:center;
  padding:64px 20px 40px;
  position:relative;
  background:
    radial-gradient(70% 55% at 50% 15%, #fff 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--blush-2), var(--blush));
}
.hero__frame{
  position:relative;
  width:min(100% - 8px, 680px);
  text-align:center;
  padding:52px 26px 64px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(4px);
  border:1px solid var(--line);
  border-radius:300px 300px var(--radius-lg) var(--radius-lg); /* dáng vòm như thiệp giấy */
  box-shadow:var(--shadow);
}
.hero__frame::before{
  content:""; position:absolute; inset:12px;
  border:1px solid var(--pink-soft);
  border-radius:290px 290px 24px 24px;
  pointer-events:none;
}
.monogram{ display:flex; justify-content:center; margin-bottom:6px; }
.mono-letter{
  font-family:var(--font-serif); font-size:52px; font-weight:600;
  fill:var(--rose); text-anchor:middle;
}
.mono-letter--2{ fill:var(--pink); font-size:46px; }

.hero__eyebrow{
  font-size:.75rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink-soft); margin:10px 0 20px; padding-left:.4em;
}
.hero__names{
  margin:0; color:var(--rose-deep);
  font-size:clamp(2.4rem,10vw,3.8rem); line-height:1.2;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.hero__hearts{ display:block; margin:-2px 0; }

.hero__date{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:12px; margin-top:22px;
}
.hero__date-side{
  font-family:var(--font-serif); font-size:.92rem; letter-spacing:.08em;
  color:var(--rose); text-transform:uppercase;
  border:1px solid var(--pink-soft); border-radius:999px;
  padding:5px 14px; background:#fff;
}
.hero__date-main{
  font-family:var(--font-serif); font-size:clamp(2rem,9vw,3rem);
  color:var(--rose); letter-spacing:.02em; line-height:1;
}
.hero__lunar{ font-size:.92rem; color:var(--ink-soft); font-style:italic; margin:10px 0 0; }

.scroll-cue{
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid var(--pink);
  border-radius:999px; background:#fff;
}
.scroll-cue span{
  position:absolute; left:50%; top:9px; width:5px; height:5px; border-radius:50%;
  background:var(--rose); transform:translateX(-50%);
  animation:scrollDot 1.8s ease-in-out infinite;
}

/* ------------------------------------------------------------
   SECTION CHUNG
   ------------------------------------------------------------ */
.section{ padding:82px 0; position:relative; }
.section--soft{ background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(253,234,241,.9)); }
.section--quote{ padding:70px 0 60px; text-align:center; }
.section--countdown{ text-align:center; }

.section__title{
  font-family:var(--font-serif);
  font-size:clamp(1.7rem,5.6vw,2.4rem);
  color:var(--rose-deep); text-align:center;
  margin:0 0 8px; font-weight:600;
}
.section__sub{
  text-align:center; color:var(--ink-soft);
  max-width:620px; margin:0 auto 42px; font-size:.98rem;
}

.divider{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:26px; }
.divider i{ display:block; width:min(28vw,120px); height:1px; background:linear-gradient(90deg,transparent,var(--pink)); }
.divider i:last-child{ background:linear-gradient(270deg,transparent,var(--pink)); }

.quote{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(1.15rem,4.4vw,1.55rem);
  color:var(--rose-deep); margin:0 auto 18px; max-width:700px;
}
.quote__sub{ max-width:640px; margin:0 auto; color:var(--ink-soft); }

/* ------------------------------------------------------------
   CÔ DÂU & CHÚ RỂ
   ------------------------------------------------------------ */
.couple{
  display:grid; gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start;
}
.person{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:0 26px 30px; text-align:center;
  box-shadow:var(--shadow-soft);
  transition:transform .4s, box-shadow .4s;
}
.person:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }

.person__photo{
  width:168px; height:168px; margin:-34px auto 14px;
  border-radius:50%; overflow:hidden;
  border:5px solid #fff; background:var(--blush);
  box-shadow:0 12px 26px -14px rgba(229,67,127,.7);
  position:relative;
}
.person__photo img{ width:100%; height:100%; object-fit:cover; }
.person__photo::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px dashed var(--pink-soft);
}
.person__role{
  display:inline-block; font-size:.72rem; letter-spacing:.3em;
  text-transform:uppercase; color:#fff; background:var(--pink);
  padding:4px 14px; border-radius:999px;
}
.person__name{
  font-family:var(--font-script); font-size:2.1rem; font-weight:700;
  color:var(--rose-deep); margin:10px 0 2px; line-height:1.2;
}
.person__quote{ font-style:italic; color:var(--ink-soft); font-size:.94rem; margin:0 0 16px; }

.person__facts{ margin:0; text-align:left; display:grid; gap:12px; }
.fact{
  display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start;
  padding:10px 12px; border-radius:14px; background:var(--blush-2);
  border:1px solid var(--line);
}
.fact__icon{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--rose); border:1px solid var(--line);
}
.fact dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rose); margin:0; }
.fact dd{ margin:2px 0 0; font-size:.95rem; }
.fact dd small{ display:block; color:var(--ink-soft); font-size:.83rem; font-style:italic; }
/* tên bố và tên mẹ cùng cỡ chữ, cùng màu */
.fact__parents span{ display:block; }
.fact--addr dd b{ font-weight:500; }
.addr-tag{
  display:inline-block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  padding:1px 8px; border-radius:999px; margin-right:6px; vertical-align:1px;
}
.addr-tag--old{ background:#f4eef1; color:#8a7a83; }
.addr-tag--new{ background:var(--rose); color:#fff; }

.person__call{
  margin-top:16px; display:inline-flex; gap:8px; align-items:center;
  font-size:.9rem; text-decoration:none; color:var(--rose);
  border:1px solid var(--pink); border-radius:999px; padding:7px 18px;
  transition:background .25s,color .25s;
}
.person__call:hover{ background:var(--rose); color:#fff; }

/* ------------------------------------------------------------
   SỰ KIỆN
   ------------------------------------------------------------ */
.events{ display:grid; gap:26px; grid-template-columns:1fr; }
/* từ tablet trở lên: cố định 2 cột — hàng 1 = 2 bữa cơm thân mật, hàng 2 = Vu Quy & Thành Hôn */
@media (min-width:640px){
  .events{ grid-template-columns:repeat(2,1fr); }
}
.event{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:240px 240px var(--radius) var(--radius);
  padding:44px 24px 32px; text-align:center;
  box-shadow:var(--shadow-soft);
  transition:transform .4s,box-shadow .4s;
  overflow:hidden;
  /* cột dọc để nút chỉ đường luôn nằm sát đáy — 3 thẻ thẳng hàng nhau */
  display:flex; flex-direction:column;
}
.event::before{
  content:""; position:absolute; inset:10px;
  border:1px solid var(--pink-soft);
  border-radius:232px 232px 16px 16px; pointer-events:none;
}
.event:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.event__icon{
  width:60px; height:60px; margin:0 auto 12px; border-radius:50%;
  display:grid; place-items:center; color:var(--rose);
  background:var(--blush); border:1px solid var(--line);
}
.event__name{
  font-family:var(--font-script); font-size:2rem; color:var(--rose-deep);
  margin:0 0 6px; font-weight:700;
}
.event__time{ font-size:.95rem; color:var(--ink-soft); margin:0 0 8px; }
.event__date{
  font-family:var(--font-serif); font-size:clamp(1.5rem,6vw,2rem);
  color:var(--rose); letter-spacing:.04em; margin:0;
}
.event__weekday{
  display:inline-block; align-self:center;   /* không bị kéo giãn trong flex column */
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--rose); border:1px solid var(--pink-soft); border-radius:999px;
  padding:3px 14px; background:var(--blush-2); margin-bottom:6px;
}
.event__lunar{ font-style:italic; font-size:.88rem; color:var(--ink-soft); margin:4px 0 0; text-wrap:balance; }

/* gạch ngăn giữa khối ngày và khối địa điểm */
.event__sep{
  position:relative; display:block;
  width:78px; height:1px; margin:18px auto;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
}
.event__sep::after{
  content:""; position:absolute; left:50%; top:-2px;
  width:5px; height:5px; border-radius:50%; background:var(--rose);
  transform:translateX(-50%);
}

.event__host{ font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.92rem; margin:0 0 5px; }
/* pretty: ngắt dòng tự nhiên, chỉ tránh mồ côi chữ cuối — không cắt giữa tên địa danh */
.event__addr{ font-size:.94rem; margin:0; text-wrap:pretty; }
.event__addr small{
  display:block; font-style:italic; color:var(--ink-soft); margin-top:2px;
  text-wrap:balance;
}
.event__note{
  font-family:var(--font-script); font-size:1.25rem; color:var(--rose);
  margin:16px 0 20px; text-wrap:balance;
  min-height:2.8em;                    /* chừa sẵn 2 dòng để 3 thẻ đều nhau */
  display:flex; align-items:center; justify-content:center;
}
.event__map{
  margin-top:auto; align-self:center;  /* đẩy nút xuống đáy thẻ */
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-size:.92rem; color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--rose));
  padding:10px 24px; border-radius:999px;
  box-shadow:0 12px 24px -14px rgba(229,67,127,.8);
  transition:transform .25s;
}
.event__map:hover{ transform:translateY(-2px); }

/* ------------------------------------------------------------
   BẢN ĐỒ
   ------------------------------------------------------------ */
.mapbox{
  max-width:880px; margin:0 auto;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  overflow:hidden;
}
.mapbox__frame{
  position:relative; width:100%; height:420px;
  background:var(--blush-2);
}
.mapbox__frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;
}
.mapbox__foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
  padding:18px 22px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#fff,var(--blush-2));
  text-align:left;
}
.mapbox__place{ margin:0; font-weight:500; display:flex; align-items:center; gap:8px; color:var(--rose-deep); }
.mapbox__place svg{ flex:none; }
.mapbox__note{ margin:2px 0 0; font-size:.86rem; color:var(--ink-soft); }
.mapbox__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.mapbox__btn{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-size:.92rem; white-space:nowrap;
  color:#fff; background:linear-gradient(135deg,var(--pink),var(--rose));
  padding:10px 22px; border-radius:999px;
  box-shadow:0 12px 24px -14px rgba(229,67,127,.8);
  transition:transform .25s;
}
.mapbox__btn:hover{ transform:translateY(-2px); }
.mapbox__btn--ghost{
  background:#fff; color:var(--rose);
  border:1.5px solid var(--pink); box-shadow:none;
}
.mapbox__btn--ghost:hover{ background:var(--rose); color:#fff; }
.mapbox__missing{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:24px; text-align:center; color:var(--ink-soft); font-size:.92rem;
}

/* ------------------------------------------------------------
   ĐẾM NGƯỢC
   ------------------------------------------------------------ */
.countdown{
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px;
  margin-top:26px;
}
.cd__cell{
  min-width:92px; padding:18px 10px 14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.cd__cell strong{
  display:block; font-family:var(--font-serif);
  font-size:clamp(1.8rem,7vw,2.4rem); color:var(--rose); line-height:1;
}
.cd__cell span{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.cd__cell.is-tick strong{ animation:tick .5s ease; }
.countdown.is-done{ font-family:var(--font-script); font-size:1.6rem; color:var(--rose-deep); }

/* ------------------------------------------------------------
   ALBUM ẢNH
   ------------------------------------------------------------ */
.gallery{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
.gallery__item{
  position:relative; border:none; padding:0; margin:0; background:none; cursor:pointer;
  border-radius:var(--radius); overflow:hidden;
  aspect-ratio:3/4;
  box-shadow:var(--shadow-soft);
}
.gallery__item:nth-child(4n+1){ aspect-ratio:3/4; }
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.25,1), filter .5s;
}
.gallery__item:hover img{ transform:scale(1.08); }
.gallery__item figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 14px 12px;
  color:#fff; font-size:.9rem; text-align:left;
  background:linear-gradient(transparent,rgba(199,46,102,.82));
  transform:translateY(100%); opacity:0;
  transition:transform .4s, opacity .4s;
}
.gallery__item:hover figcaption{ transform:translateY(0); opacity:1; }
@media (hover:none){ .gallery__item figcaption{ transform:translateY(0); opacity:1; } }

/* ------------------------------------------------------------
   VIDEO
   ------------------------------------------------------------ */
.video{
  position:relative; max-width:860px; margin:0 auto;
  border-radius:var(--radius-lg); overflow:hidden;
  border:6px solid #fff; box-shadow:var(--shadow);
  background:#000; aspect-ratio:16/9;
}
.video video{ width:100%; height:100%; object-fit:cover; display:block; }
.video__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(199,46,102,.18); border:none;
  transition:opacity .4s;
}
.video__play span{
  width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center; color:var(--rose);
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  animation:pulseGlow 2.4s ease-in-out infinite;
}
.video.is-playing .video__play{ opacity:0; pointer-events:none; }
.video__missing{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:24px; color:#fff; background:linear-gradient(135deg,var(--pink),var(--rose));
  font-size:.95rem;
}

/* ------------------------------------------------------------
   MỪNG CƯỚI / QR
   ------------------------------------------------------------ */
.gifts{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.gift{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 24px; text-align:center; box-shadow:var(--shadow-soft);
  transition:transform .4s,box-shadow .4s;
}
.gift:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.gift__role{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:#fff; background:var(--pink); padding:4px 14px; border-radius:999px;
}
.gift__name{ font-family:var(--font-script); font-size:1.8rem; color:var(--rose-deep); margin:10px 0 14px; }
.gift__qr{
  width:206px; height:206px; margin:0 auto 14px; padding:10px;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:inset 0 0 0 4px var(--blush-2);
  display:grid; place-items:center; overflow:hidden;
}
.gift__qr img{ width:100%; height:100%; object-fit:contain; }
.gift__qr-missing{ font-size:.85rem; color:var(--ink-soft); padding:16px; }
.gift__bank{ font-size:.92rem; color:var(--ink-soft); margin:0 0 4px; }
.gift__acc{
  font-family:var(--font-serif); font-size:1.2rem; letter-spacing:.08em;
  color:var(--rose); margin:0 0 4px; word-break:break-all;
}
.gift__holder{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 16px; }
.gift__copy{
  border:1px solid var(--pink); background:transparent; color:var(--rose);
  border-radius:999px; padding:9px 22px; font-size:.9rem;
  transition:background .25s,color .25s;
}
.gift__copy:hover{ background:var(--rose); color:#fff; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer{
  padding:74px 0 110px; text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.4),var(--pink-soft));
}
.footer__heading{ font-size:2.6rem; color:var(--rose-deep); margin:0 0 12px; }
.footer__lines p{ margin:2px 0; color:var(--ink-soft); }
.footer__couple{ font-size:2rem; color:var(--rose); margin:24px 0 2px; }
.footer__hashtag{ font-size:.86rem; letter-spacing:.2em; color:var(--ink-soft); margin:0; }

/* ------------------------------------------------------------
   LIGHTBOX
   ------------------------------------------------------------ */
.lightbox{
  position:fixed; inset:0; z-index:60;
  display:none; place-items:center;
  background:rgba(42,20,30,.92);
  padding:20px;
  backdrop-filter:blur(3px);
}
.lightbox.is-open{ display:grid; animation:fadeIn .3s ease; }
.lightbox__figure{ margin:0; max-width:min(96vw,1000px); text-align:center; }
.lightbox__figure img{
  max-height:80svh; width:auto; margin:0 auto; border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  animation:zoomIn .35s cubic-bezier(.2,.8,.25,1);
}
.lightbox__figure figcaption{ color:#fff; margin-top:14px; font-size:.95rem; letter-spacing:.06em; }
.lightbox__close{
  position:absolute; top:14px; right:18px; z-index:2;
  width:44px; height:44px; border-radius:50%; border:none;
  font-size:1.8rem; line-height:1; color:#fff; background:rgba(255,255,255,.14);
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:48px; border-radius:50%; border:none;
  font-size:2rem; line-height:1; color:#fff; background:rgba(255,255,255,.14);
}
.lightbox__nav--prev{ left:12px; }
.lightbox__nav--next{ right:12px; }
.lightbox__close:hover,.lightbox__nav:hover{ background:var(--rose); }

/* ------------------------------------------------------------
   TOAST
   ------------------------------------------------------------ */
.toast{
  position:fixed; left:50%; bottom:86px; transform:translate(-50%,20px);
  z-index:70; padding:11px 22px; border-radius:999px;
  background:var(--rose-deep); color:#fff; font-size:.9rem;
  box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.toast.is-show{ opacity:1; transform:translate(-50%,0); }

/* ------------------------------------------------------------
   HIỆU ỨNG CUỘN
   ------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.8,.25,1), transform .9s cubic-bezier(.2,.8,.25,1); }
.reveal[data-anim="left"] { transform:translateX(-40px); }
.reveal[data-anim="right"]{ transform:translateX(40px); }
.reveal[data-anim="zoom"] { transform:scale(.8); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------ */
@keyframes coverIn{ from{ opacity:0; transform:translateY(26px) scale(.96);} to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes zoomIn{ from{opacity:0; transform:scale(.92)} to{opacity:1; transform:none} }
@keyframes beat{ 0%,100%{transform:scale(1)} 25%{transform:scale(1.18)} 50%{transform:scale(.96)} }
@keyframes swing{ 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
@keyframes floatBlob{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(18px,-22px)} }
@keyframes shine{ 0%,60%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 14px 30px -14px rgba(229,67,127,.75), 0 0 0 0 rgba(229,67,127,.45); }
  70%    { box-shadow:0 14px 30px -14px rgba(229,67,127,.75), 0 0 0 18px rgba(229,67,127,0); }
}
@keyframes ripple{ 0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.9); opacity:0} }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes scrollDot{ 0%{top:9px; opacity:1} 70%{top:26px; opacity:0} 100%{top:9px; opacity:0} }
@keyframes tick{ from{ transform:translateY(-8px); opacity:.3 } to{ transform:none; opacity:1 } }
@keyframes floatHeart{
  from{ transform:translateY(0) scale(.6); opacity:1 }
  to  { transform:translateY(-70vh) scale(1.3); opacity:0 }
}
.heart-burst{
  position:fixed; z-index:55; pointer-events:none; font-size:26px;
  animation:floatHeart 3.2s ease-out forwards;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:720px){
  .section{ padding:62px 0; }
  .hero{ padding:48px 14px 30px; }
  .hero__frame{ padding:44px 18px 64px; border-radius:220px 220px var(--radius) var(--radius); }
  .hero__frame::before{ border-radius:212px 212px 18px 18px; inset:9px; }
  /* ngày tháng: số lớn một dòng, hai thẻ thứ/năm nằm cạnh nhau bên dưới */
  .hero__date{ gap:10px; }
  .hero__date-main{ order:-1; flex-basis:100%; }
  .event{ border-radius:180px 180px var(--radius) var(--radius); padding:36px 18px 26px; }
  .event::before{ border-radius:172px 172px 14px 14px; }
  .person{ padding:0 18px 26px; }
  .person__photo{ width:150px; height:150px; }
  .gallery{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .cd__cell{ min-width:74px; padding:14px 8px 10px; }
  .mapbox__frame{ height:300px; }
  .mapbox__foot{ padding:16px; flex-direction:column; align-items:stretch; text-align:center; }
  /* địa chỉ dài xuống 2 dòng: cho icon chạy cùng dòng chữ thay vì đứng tách bên trái */
  .mapbox__place{ display:block; }
  .mapbox__place svg{ vertical-align:-3px; margin-right:4px; }
  .mapbox__actions{ justify-content:center; }
  .mapbox__btn{ flex:1 1 auto; justify-content:center; }
  .music-btn{ right:12px; bottom:12px; }
  .lightbox__nav{ width:40px; height:40px; font-size:1.6rem; }
  .footer{ padding:60px 0 96px; }
}

@media (min-width:1024px){
  .hero__frame{ padding:64px 40px 72px; }
  .gallery{ grid-template-columns:repeat(3,1fr); gap:18px; }
}

/* In thiệp ra giấy / PDF */
@media print{
  .cover,.music-btn,#petals,.scroll-cue,.btn,.lightbox,.toast,
  .mapbox__frame,.mapbox__actions{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .section{ padding:24px 0; break-inside:avoid; }
}

/* Tôn trọng thiết lập giảm chuyển động của hệ thống */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}