/* Editorial "Kim & Mộc" — Anh Trúc & Hoàng Đăng */
:root {
  --c-ivory: #F6F3E9;
  --c-paper: #FFFDF7;
  --c-ink: #1F2A22;
  --c-ink-soft: #4C574D;
  --c-moss: #47654B;
  --c-moss-deep: #2B4130;
  --c-sage: #66795F;
  --c-champagne: #8A7434;
  --c-line: #DED7C6;
  --c-wash: #EBE7D9;
  --c-kim-soft: #DCC79C;
  --c-kim-pale: #F0E9D6;
  --c-moc-mist: #CBD6C2;
  --c-thuy: #3B6A64;
  --c-kim-line: linear-gradient(90deg, #CDBB8E, #EFE6CD, #A89257);
  --c-error: #8E2F26;
  --c-success: #2E5D45;
  --ff-display: "Playfair Display", Georgia, serif;
  --ff-body: "Be Vietnam Pro", system-ui, sans-serif;
  --fs-display: clamp(3rem, 10.5vw, 6rem);
  --fs-xl: clamp(2.1rem, 6.5vw, 3.6rem);
  --fs-lg: clamp(1.3rem, 3.2vw, 1.85rem);
  --fs-md: 1.0625rem;
  --fs-sm: .875rem;
  --fs-xs: .75rem;
  --section-space: clamp(4.5rem, 12vw, 8.5rem);
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --content: 72rem;
  --narrow: 42rem;
  --radius: 10px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --z-cover: 100;
  --z-float: 60;
  --z-lightbox: 200;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
body {
  margin: 0;
  background: var(--c-ivory);
  color: var(--c-ink-soft);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
section, footer { position: relative; }
section { padding: var(--section-space) 0; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 300;
  transform: translateY(-160%);
  background: var(--c-paper);
  color: var(--c-ink);
  padding: .65rem 1rem;
}
.skip-link:focus { transform: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--gutter), 82rem); }
.center { text-align: center; }
.chapter, .eyebrow {
  margin: 0;
  color: var(--c-moss-deep);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow--light { color: rgba(255, 253, 248, .84); }
.eyebrow--display {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .32em;
  color: var(--c-champagne);
}
.eyebrow--display::before,
.eyebrow--display::after {
  content: "";
  width: 48px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--light.eyebrow--display { color: #F0DFB6; }
/* Đầu chương căn giữa, ngăn bằng hoa văn lá — nhịp thị giác của thiệp giấy. */
.section-head {
  max-width: var(--narrow);
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 7vw, 5rem);
  text-align: center;
}
.section-head h2 {
  margin: .65rem 0 .75rem;
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.08;
}
.section-head h2::after {
  content: "";
  display: block;
  width: 78px;
  margin: 1.15rem auto 0;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='16' viewBox='0 0 78 16'%3E%3Cg fill='none' stroke='%238A7434' stroke-width='1'%3E%3Cpath d='M0 8h27M51 8h27'/%3E%3C/g%3E%3Cg fill='%238A7434'%3E%3Cpath d='M39 8.6c0-3.1 2-5.6 5.2-6.6-.2 3.4-2.1 5.9-5.2 6.6z'/%3E%3Cpath d='M39 8.6c0-3.1-2-5.6-5.2-6.6.2 3.4 2.1 5.9 5.2 6.6z'/%3E%3Ccircle cx='39' cy='11.4' r='1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 78px 16px;
}
.section-head p:last-child { max-width: 54ch; margin-inline: auto; }
.section-head--light h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='16' viewBox='0 0 78 16'%3E%3Cg fill='none' stroke='%23DCC79C' stroke-width='1'%3E%3Cpath d='M0 8h27M51 8h27'/%3E%3C/g%3E%3Cg fill='%23DCC79C'%3E%3Cpath d='M39 8.6c0-3.1 2-5.6 5.2-6.6-.2 3.4-2.1 5.9-5.2 6.6z'/%3E%3Cpath d='M39 8.6c0-3.1-2-5.6-5.2-6.6.2 3.4 2.1 5.9 5.2 6.6z'/%3E%3Ccircle cx='39' cy='11.4' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); }
.section-head--light h2, .section-head--light { color: var(--c-paper); }
.section-head--light .chapter { color: var(--c-moc-mist); }

.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .82rem 1.7rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.btn:active { opacity: .72; }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--c-champagne);
  outline-offset: 3px;
}
.btn--primary { background: var(--c-moss); color: var(--c-paper); }
.btn--primary:hover { background: var(--c-moss-deep); }
.btn--secondary { border-color: var(--c-moss); background: transparent; color: var(--c-moss); }
.btn--secondary:hover { background: rgba(36, 71, 45, .07); }
.btn--light { background: var(--c-paper); color: var(--c-moss-deep); }
.btn--line-light { border-color: rgba(255, 253, 248, .64); color: var(--c-paper); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--c-moss); text-decoration: underline; text-underline-offset: .25em; padding-inline: .5rem; }
.btn--ghost:hover { color: var(--c-moss-deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: .65rem; }
.btn--submit { width: 100%; }

/* Cover */
#cover {
  position: fixed;
  inset: 0;
  z-index: var(--z-cover);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--c-moss-deep);
  text-align: center;
}
.cover-panel {
  position: absolute;
  inset: clamp(1rem, 5vw, 2.5rem);
  border: 1px solid rgba(255, 253, 248, .32);
  border-radius: 18rem 18rem var(--radius) var(--radius);
  background:
    linear-gradient(rgba(246, 243, 233, .90), rgba(240, 236, 223, .95)),
    url("../assets/invite/arch.jpg") center / cover;
  box-shadow: 0 28px 80px rgba(4, 18, 9, .26);
  transform-origin: center;
  transition: transform 700ms var(--ease), opacity 480ms ease;
}
.cover-inner {
  position: relative;
  width: min(calc(100% - 3rem), 38rem);
  padding: 2.25rem 1rem;
  transition: opacity 320ms ease, transform 500ms var(--ease);
}
.cover-inner > * {
  opacity: 0;
  transform: translateY(12px);
  animation: cover-in 520ms var(--ease) forwards;
}
.cover-inner > :nth-child(1) { animation-delay: 100ms; }
.cover-inner > :nth-child(2) { animation-delay: 170ms; }
.cover-inner > :nth-child(3) { animation-delay: 240ms; }
.cover-inner > :nth-child(4) { animation-delay: 310ms; }
.cover-inner > :nth-child(5) { animation-delay: 380ms; }
.cover-inner > :nth-child(6) { animation-delay: 450ms; }
.cover-inner > :nth-child(7) { animation-delay: 520ms; }
@keyframes cover-in { to { opacity: 1; transform: none; } }
/* Logo T–D đã là một dấu hoàn chỉnh nên bỏ vòng tròn cũ quanh chữ AT ⁄ HĐ,
   để dấu đứng một mình cho thoáng. */
.cover-mark {
  margin: 0 auto 1.4rem;
  line-height: 0;
}
.cover-mark img {
  width: auto;
  height: clamp(56px, 8.5vw, 88px);
  margin-inline: auto;
}
.cover-names {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  margin: .8rem auto .65rem;
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: .9;
  overflow-wrap: anywhere;
}
.cover-names em {
  margin: .22em 0 .18em;
  color: var(--c-champagne);
  font-size: .72em;
  font-weight: 500;
}
.cover-date { margin: 1.25rem 0 0; color: var(--c-ink-soft); font-size: var(--fs-sm); }
.cover-date::before {
  content: "";
  display: block;
  width: 78px;
  margin: 0 auto .85rem;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='16' viewBox='0 0 78 16'%3E%3Cg fill='none' stroke='%238A7434' stroke-width='1'%3E%3Cpath d='M0 8h27M51 8h27'/%3E%3C/g%3E%3Cg fill='%238A7434'%3E%3Cpath d='M39 8.6c0-3.1 2-5.6 5.2-6.6-.2 3.4-2.1 5.9-5.2 6.6z'/%3E%3Cpath d='M39 8.6c0-3.1-2-5.6-5.2-6.6.2 3.4 2.1 5.9 5.2 6.6z'/%3E%3Ccircle cx='39' cy='11.4' r='1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 78px 16px;
}
.cover-guest { margin: 1rem 0 0; }
.cover-guest strong { color: var(--c-moss); font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: 500; }
#btnOpen { min-width: 11rem; margin-top: 1.75rem; }
.cover-note { margin: 1.1rem 0 0; color: #6f756e; font-family: var(--ff-display); font-size: var(--fs-md); font-style: italic; }
html.is-open .cover-panel { opacity: 0; transform: scale(1.06); }
html.is-open .cover-inner { opacity: 0; pointer-events: none; transform: translateY(-10px); }
html.is-open #cover { pointer-events: none; }

/* Hero */
#hero {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  align-items: end;
  padding: 0;
  overflow: hidden;
  background: var(--c-moss-deep);
}
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 50% 32%; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 25, 12, .34) 0%, rgba(8, 25, 13, .26) 42%, rgba(8, 24, 12, .88) 100%);
}
.hero-content {
  position: relative;
  width: min(100%, 56rem);
  margin-inline: auto;
  padding: 7rem var(--gutter) max(7.5rem, 16dvh);
  color: var(--c-paper);
  text-align: center;
}
.hero-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: .75rem 0 1.1rem;
  color: var(--c-paper);
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: .88;
}
.hero-names em { margin: .22em 0 .18em; color: var(--c-kim-soft); font-size: .6em; font-weight: 600; align-self: center; }
.hero-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  gap: .35rem;
  font-size: var(--fs-sm);
}
.hero-date::before {
  content: "";
  width: 78px;
  margin-bottom: .85rem;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='16' viewBox='0 0 78 16'%3E%3Cg fill='none' stroke='%23DCC79C' stroke-width='1'%3E%3Cpath d='M0 8h27M51 8h27'/%3E%3C/g%3E%3Cg fill='%23DCC79C'%3E%3Cpath d='M39 8.6c0-3.1 2-5.6 5.2-6.6-.2 3.4-2.1 5.9-5.2 6.6z'/%3E%3Cpath d='M39 8.6c0-3.1-2-5.6-5.2-6.6.2 3.4 2.1 5.9 5.2 6.6z'/%3E%3Ccircle cx='39' cy='11.4' r='1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 78px 16px;
}
.hero-date strong { color: var(--c-paper); font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: 500; }
.hero-date span { color: rgba(255, 253, 248, .92); }
.hero-when {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-kim-soft);
  margin-top: .4rem;
}
.hero-invite { max-width: 34rem; margin: 1.65rem auto 0; }
.hero-invite .btn-row { justify-content: center; }
.hero-invite > p { margin: 0 0 1.15rem; }
.hero-guest { color: var(--c-kim-soft); font-family: var(--ff-display); font-size: var(--fs-lg); font-style: italic; }
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  color: rgba(255, 253, 248, .9);
  font-size: var(--fs-xs);
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Details */
#details { background: var(--c-ivory); }
.detail-layout { display: grid; gap: clamp(2rem, 6vw, 5rem); }
.detail-photo { margin: 0; }
.detail-photo img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; }
.detail-photo figcaption {
  padding-top: .6rem;
  border-top: 1px solid var(--c-line);
  color: var(--c-sage);
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-style: italic;
}
.detail-content { min-width: 0; }
.family-grid { display: grid; gap: 1.5rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--c-line); }
.family-col { min-width: 0; }
.family-name { margin: .28rem 0; color: var(--c-ink); font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: 500; line-height: 1.12; }
.family-addr { margin: .6rem 0 0; color: var(--c-ink-soft); font-size: var(--fs-sm); }
.family-addr:empty { display: none; }
.events-grid { margin-top: 1.75rem; }
.event-card {
  position: relative;
  padding: 1.6rem;
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-moss);
  border-top: 2px solid var(--c-kim-soft);
  background: var(--c-paper);
  box-shadow: 0 1px 2px rgba(20, 32, 26, .04), 0 14px 34px -18px rgba(20, 32, 26, .16);
}
.event-icon { display: none; }
.event-name { margin: 0; color: var(--c-moss-deep); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; }
.event-time { margin: .65rem 0 0; color: var(--c-champagne); font-family: var(--ff-display); font-size: var(--fs-xl); line-height: 1; }
.event-date, .event-lunar, .event-place, .event-addr { margin: .35rem 0 0; }
.event-lunar { color: var(--c-ink-soft); font-size: var(--fs-md); font-variant-numeric: lining-nums; }
.event-place { color: var(--c-ink); font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: 500; }
.event-addr { font-size: var(--fs-sm); }
.event-dir { display: inline-flex; min-height: 44px; align-items: center; margin-top: .75rem; color: var(--c-moss); font-size: var(--fs-sm); font-weight: 600; }
.countdown-card {
  display: grid;
  margin-top: 1rem;
  gap: 1.25rem;
  padding: 1.6rem;
  background: var(--c-moss);
  color: var(--c-paper);
}
.countdown-card .eyebrow { color: var(--c-moc-mist); }
.cd-sub { margin: .25rem 0 0; font-family: var(--ff-display); font-size: var(--fs-md); font-style: italic; }
.cd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.cd-grid div { display: flex; min-width: 0; flex-direction: column; align-items: center; }
.cd-grid span { font-family: var(--ff-display); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; line-height: 1; }
.cd-grid small { margin-top: .35rem; color: rgba(255, 253, 248, .68); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.cd-today { margin: 0; font-family: var(--ff-display); font-size: var(--fs-lg); }
.venue-board { display: grid; margin-top: clamp(3.5rem, 9vw, 6rem); background: var(--c-paper); }
.map-frame { position: relative; min-height: 320px; background: var(--c-wash); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.65) sepia(.12); }
.map-placeholder { position: absolute; inset: 0; display: grid; margin: 0; place-items: center; }
.venue-copy { padding: clamp(1.5rem, 5vw, 3.5rem); }
.venue-copy h3 { margin: .7rem 0; color: var(--c-ink); font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: 500; line-height: 1.02; }
.venue-copy > p { max-width: 46ch; }
.venue-copy > p.chapter { text-align: left; }
.venue-note { color: var(--c-sage); font-family: var(--ff-display); font-size: var(--fs-md); font-style: italic; }
.map-tabs { display: flex; gap: .5rem; margin-top: .75rem; }
.map-tab { min-height: 44px; border: 1px solid var(--c-line); background: transparent; padding: .55rem 1rem; }
.map-tab[aria-selected="true"] { border-color: var(--c-moss); color: var(--c-moss); }

/* Gallery */
#gallery { background: var(--c-moss-deep); padding-bottom: calc(var(--section-space) + 4.5rem + env(safe-area-inset-bottom)); }
.gallery-grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: 2rem; }
.g-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: rgba(255, 253, 248, .07);
  aspect-ratio: 3 / 4;
}
.g-item--wide { grid-column: span 2; aspect-ratio: 3 / 2; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms var(--ease), filter 220ms ease; }
.g-item:hover img { transform: scale(1.025); filter: brightness(.9); }
.g-pad { display: none; order: 1; grid-column: span 2; aspect-ratio: 3 / 2; place-content: center; text-align: center; gap: .5rem; border: 1px solid rgba(220, 199, 156, .4); color: var(--c-kim-soft); font-family: var(--ff-display); font-size: var(--fs-lg); letter-spacing: .1em; }
.g-pad small { display: block; font-family: var(--ff-body); font-size: var(--fs-xs); letter-spacing: .22em; color: var(--c-moc-mist); }
@media (min-width: 768px) { #galleryGrid[data-full] .g-pad { display: grid; } }
#film { margin-top: 4rem; }
#film h3 { color: var(--c-paper); font-family: var(--ff-display); font-size: var(--fs-lg); }
.film-frame { position: relative; overflow: hidden; background: var(--c-ink); aspect-ratio: 16 / 9; }
.film-frame img, .film-frame iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.film-play { position: absolute; inset: 50% auto auto 50%; min-height: 44px; transform: translate(-50%, -50%); border: 1px solid var(--c-paper); background: rgba(21, 51, 31, .8); color: var(--c-paper); padding: .75rem 1.1rem; }

/* Responses */
#responses { background: var(--c-ivory); }
.response-grid { display: grid; gap: 1rem; }
.response-panel { display: flex; flex-direction: column; padding: clamp(1.4rem, 5vw, 2.6rem); background: var(--c-paper); border: 1px solid var(--c-line); }
.response-panel form { display: flex; flex-direction: column; flex: 1; }
.response-panel .btn--submit { margin-top: auto; }
.response-panel--wish { background: var(--c-kim-pale); color: var(--c-ink); border: 1px solid var(--c-champagne); }
.response-panel h3 { margin: .6rem 0; color: var(--c-ink); font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: 500; }
form { margin-top: 1.6rem; }
.field { display: block; margin: 0 0 1.25rem; border: 0; padding: 0; }
.field-label { display: block; margin-bottom: .35rem; color: var(--c-ink); font-size: var(--fs-sm); font-weight: 500; }
.field-label em { color: var(--c-error); font-style: normal; }
.field input[type="text"], .field input[type="tel"], .field input[type="number"], .field textarea {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font-size: 16px; /* chống iOS zoom khi focus — không đổi theo token */
  padding: .72rem .1rem;
}
.field textarea { min-height: 7rem; resize: vertical; }
.pill-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; }
.pill span {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: .55rem .9rem;
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.pill input:checked + span { border-color: var(--c-moss); background: rgba(36, 71, 45, .09); color: var(--c-moss); }
.pill input:focus-visible + span { outline: 3px solid var(--c-champagne); outline-offset: 2px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.form-error, .form-ok { margin: .75rem 0; font-size: var(--fs-sm); }
.form-error { color: var(--c-error); }
.form-ok { color: var(--c-success); }
.form-success { padding: 2rem 0; text-align: center; }
.form-success h3 { color: var(--c-ink); font-family: var(--ff-display); font-size: var(--fs-xl); }
.form-success .btn { margin-top: 1rem; }
.wish-wall { margin-top: clamp(3rem, 8vw, 5rem); }
.wish-list { display: grid; gap: .75rem; }
.wish-card { padding: 1.25rem; border: 1px solid var(--c-line); background: rgba(255, 253, 248, .56); }
.wish-msg { margin: 0; color: var(--c-ink); font-family: var(--ff-display); font-size: var(--fs-lg); font-style: italic; }
.wish-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .7rem 0 0; font-size: var(--fs-sm); }
.wish-meta .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .2rem .6rem; font-size: var(--fs-xs); font-weight: 600; }
.wish-meta .badge--groom { background: var(--c-kim-pale); color: var(--c-champagne); }
.wish-meta .badge--bride { background: #E2EDDE; color: var(--c-moss); }
.wish-empty { text-align: center; }
.wish-skeleton { min-height: 8rem; border: 1px solid var(--c-line); background: linear-gradient(100deg, var(--c-wash) 40%, var(--c-paper) 50%, var(--c-wash) 60%); background-size: 200% 100%; animation: skeleton 1.2s linear infinite; }
@keyframes skeleton { to { background-position: -200% 0; } }

/* Gifts and footer */
#gift { background: var(--c-paper); }
.gift-collapse {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 420ms var(--ease), opacity 320ms ease;
}
.gift-collapse.is-open { max-height: 2400px; opacity: 1; }
.gift-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.gift-card { padding: clamp(1.25rem, 5vw, 2.5rem); border: 1px solid var(--c-line); background: var(--c-ivory); text-align: center; }
.gift-qr-btn { display: block; width: min(16rem, 100%); margin: 1rem auto; border: 0; background: none; padding: 0; }
.gift-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.gift-bank, .gift-owner, .gift-number { margin: .25rem 0; }
.gift-number { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.gift-copy { margin-top: .75rem; }
#footer { padding: clamp(4rem, 12vw, 7rem) 0 calc(4rem + 4.5rem + env(safe-area-inset-bottom)); background: var(--c-moss-deep); color: var(--c-moc-mist); text-align: center; }
.footer-contact a { text-decoration: underline; text-underline-offset: .2em; }
.footer-mark { margin: 0; color: var(--c-kim-soft); font-family: var(--ff-display); letter-spacing: .1em; }
.footer-names { margin: 1rem 0 .4rem; color: var(--c-paper); font-family: var(--ff-display); font-size: var(--fs-display); line-height: 1.05; }
.footer-names em { color: var(--c-kim-soft); font-weight: 400; }
.footer-date, .footer-contact { font-size: var(--fs-sm); }
.footer-quote { margin: 2rem auto; color: var(--c-paper); font-family: var(--ff-display); font-size: var(--fs-lg); font-style: italic; }
.footer-qr { margin: 1.5rem auto; }
.footer-qr img { margin: auto; padding: 5px; background: #fff; }
.footer-qr figcaption { margin-top: .4rem; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; }
.footer-qr figcaption small{display:block;text-transform:none;letter-spacing:0;opacity:.75;margin-top:.35rem}

/* Floating controls and lightbox */
#musicBtn, .float-rsvp {
  position: fixed;
  z-index: var(--z-float);
  min-height: 44px;
  border: 1px solid var(--c-moss);
  background: rgba(255, 253, 248, .94);
  color: var(--c-moss);
  box-shadow: 0 8px 24px rgba(21, 51, 31, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#musicBtn { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); min-width: 44px; border-radius: 50%; font-size: var(--fs-xs); }
.float-rsvp {
  left: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .55rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  background: var(--c-moss);
  color: var(--c-paper);
  border-color: var(--c-moss);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.float-rsvp[data-off] { opacity: 0; pointer-events: none; transform: translateY(140%); }
#lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; padding: 0; background: rgba(7, 15, 9, .96); color: var(--c-paper); z-index: var(--z-lightbox); }
#lightbox::backdrop { background: transparent; }
#lightbox img { position: absolute; inset: 0; width: auto; max-width: 94vw; height: auto; max-height: 88dvh; margin: auto; object-fit: contain; }
.lb-close, .lb-nav { position: absolute; z-index: 2; min-height: 44px; min-width: 44px; border: 1px solid rgba(255, 253, 248, .35); background: rgba(21, 51, 31, .7); color: var(--c-paper); padding: .55rem .8rem; }
.lb-close { top: calc(.75rem + env(safe-area-inset-top)); right: .75rem; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-nav--prev { left: .75rem; }
.lb-nav--next { right: .75rem; }
.lb-counter { position: absolute; right: 0; bottom: calc(1rem + env(safe-area-inset-bottom)); left: 0; margin: 0; text-align: center; }

/* Motion */
.has-js .reveal { opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); transition-delay: var(--d, 0ms); }
.has-js .reveal.is-in { opacity: 1; transform: none; }

/* Stepper (RSVP guest count) */
.stepper { display: flex; align-items: center; gap: .6rem; }
.stepper input[type="number"] { width: 4rem; flex: 0 0 auto; text-align: center; -moz-appearance: textfield; }
.stepper input[type="number"]::-webkit-inner-spin-button,
.stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-moss);
  font-size: 1.1rem;
  line-height: 1;
}
.stepper-btn:hover { background: rgba(36, 71, 45, .07); }
#rsvpDaysLeft { color: var(--c-champagne); font-weight: 600; }

@media (min-width: 600px) {
  .cover-inner { width: min(calc(100% - 4rem), 60rem); }
  .cover-names {
    font-size: clamp(2.5rem, 7vw, 5rem);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: .18em;
    line-height: .9;
    white-space: nowrap;
  }
  .cover-names > span:nth-child(1) { justify-self: end; text-align: right; }
  .cover-names > span:nth-child(3) { justify-self: start; text-align: left; }
  .cover-names em { justify-self: center; align-self: center; margin: 0; }
  .family-grid, .gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .detail-layout { grid-template-columns: minmax(15rem, .78fr) minmax(0, 1.22fr); align-items: start; }
  .detail-photo { position: sticky; top: 2rem; }
  .family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venue-board { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); }
  .response-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch; }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
  .g-item--wide { grid-column: span 2; }
  .wish-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .hero-content { margin-inline: auto; }
  /* Bug 1 fix: 1fr auto 1fr squeezed name columns and wrapped "Anh Trúc" / "Hoàng Đăng"
     onto separate lines at ~1568px. Use content-sized auto columns so each name
     never wraps, and cap the display size so the full line fits at 1024px. */
  .hero-content { width: min(100%, 64rem); }
  .hero-names {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: stretch;
    align-items: baseline;
    column-gap: .35em;
    row-gap: 0;
    line-height: .95;
    font-size: clamp(2.75rem, 4vw, 4.75rem);
  }
  .hero-names > span { white-space: nowrap; }
  .hero-names > span:nth-child(1) { justify-self: end; text-align: right; }
  .hero-names > span:nth-child(3) { justify-self: start; text-align: left; }
  .hero-names em { justify-self: center; align-self: center; margin: 0; white-space: nowrap; }
  .hero-invite { display: grid; grid-template-columns: 1fr; }

  /* Bug 2 fix: countdown lived inside the right column, leaving a huge empty
     ivory gap below it while the left photo column ran much taller. Promote
     countdown-card to a full-width band under both columns, and cap the
     photo height so it stops towering over the right column content. */
  .detail-content { display: contents; }
  .detail-layout {
    grid-template-columns: minmax(15rem, .78fr) minmax(0, 1.22fr);
    grid-template-rows: auto auto;
  }
  /* static: sticky cũ làm ảnh trượt xuống đè band đếm ngược khi cuộn */
  .detail-photo { grid-column: 1; grid-row: 1 / 3; margin: 0; position: static; }
  .family-grid { grid-column: 2; grid-row: 1; }
  /* align-self:start — nếu không, hàng 2 bị ảnh (span 1/3) kéo cao và thẻ tiệc trôi xuống giữa khoảng trống */
  .events-grid { grid-column: 2; grid-row: 2; align-self: start; }
  /* Tên bố mẹ 1 dòng ở desktop ("Ông Nguyễn Hoàng Phượng" đang bị gãy) */
  .family-name { font-size: clamp(1.2rem, 1.35vw, 1.45rem); }
  /* Ảnh trải đúng chiều cao hai hàng bên phải rồi crop, thay vì tự cao 80vh —
     kiểu cũ kéo giãn cả hai hàng và để lại khoảng trắng lớn quanh thẻ tiệc. */
  .detail-photo { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
  .detail-photo img { flex: 1 1 auto; min-height: 0; max-height: none; height: 100%; }
  .countdown-card {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 6vw, 4rem);
  }
  .countdown-card > div:first-child { text-align: left; }
  .cd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
  .cd-grid span { font-size: clamp(2.4rem, 4vw, 4rem); }
}

/* "We are getting married" bị gãy 2 dòng ở mobile — thu gạch và giãn chữ cho vừa 1 dòng */
@media (max-width: 600px) {
  .eyebrow--display { gap: .5rem; font-size: var(--fs-xs); letter-spacing: .2em; }
  .eyebrow--display::before, .eyebrow--display::after { width: 26px; }
}

@media (max-width: 480px) {
  .btn-row .btn { flex: 1 1 auto; }
  .lb-nav { display: none; }
  .cover-panel { inset: .75rem; }
}

@media (min-width: 1280px) {
  #details > .wrap > .section-head,
  #responses > .wrap > .section-head,
  #gift > .wrap > .section-head {
    max-width: 1200px;
    margin-inline: auto;
    text-align: center;
  }
  #details > .wrap > .section-head h2::after,
  #responses > .wrap > .section-head h2::after,
  #gift > .wrap > .section-head h2::after {
    margin-inline: auto;
  }
  #details > .wrap > .section-head p:last-child,
  #responses > .wrap > .section-head p:last-child,
  #gift > .wrap > .section-head p:last-child {
    margin-inline: auto;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .cover-inner { padding-block: .75rem; }
  .cover-mark { width: 52px; height: 52px; margin-bottom: .75rem; }
  .cover-names { font-size: clamp(2.25rem, 8vw, 3.5rem); }
  #btnOpen { margin-top: 1rem; }
  .hero-content { padding-top: 5rem; padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .has-js .reveal, .cover-inner > * { opacity: 1 !important; transform: none !important; }
}