/* ==========================================================================
   Thiệp cưới Thanh Loan & Đắc Ánh — 29.11.2026
   Bảng màu lấy từ bộ thiệp giấy: hồng phấn, đỏ rượu vang, trắng ngà
   ========================================================================== */

:root {
  /* palette */
  --blush: #f3cdc8;
  --blush-soft: #f8e2de;
  --blush-tint: #fbf1ee;
  --paper: #fdfaf7;
  --cream: #f7f1ea;
  --wine: #7a1b29;
  --wine-deep: #5e121e;
  --wine-soft: #a04a55;
  --ink: #3b2b2c;
  --ink-soft: #6d5a58;
  --gold: #c2a06a;

  /* type — chọn theo khả năng dựng ĐỦ glyph tiếng Việt 2 dấu (ề ấ ế ệ ợ ữ).
     Lora: đã kiểm chứng render liền mạch, không tách dấu.
     Playfair Display: tiêu đề, đủ glyph. Dancing Script: script, đủ glyph.
     CẢNH BÁO: KHÔNG dùng EB Garamond / Cormorant Garamond cho thân bài —
     chúng thiếu glyph precomposed nên dấu bị tách rời ("niề m", "Rấ t"). */
  --f-display: "Playfair Display", "Lora", Georgia, serif;
  --f-serif: "Lora", Georgia, "Times New Roman", serif;
  --f-script: "Dancing Script", "Lora", cursive;
  --f-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* metrics */
  --wrap: 1100px;
  --wrap-narrow: 720px;
  --radius: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --shadow-sm: 0 4px 18px rgba(122, 27, 41, 0.07);
  --shadow-md: 0 14px 44px rgba(122, 27, 41, 0.11);
  --shadow-lg: 0 30px 70px rgba(90, 18, 30, 0.18);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.72;
  /* KHÔNG dùng -webkit-font-smoothing: antialiased (làm nét serif mảnh nhạt
     trên macOS/iOS). Cũng KHÔNG dùng text-rendering: optimizeLegibility vì nó
     bật shaping/ligature tuỳ engine, dễ làm dấu tiếng Việt khác nhau giữa
     các trình duyệt. */
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 500; line-height: 1.2; }

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   BÌA THIỆP / ENVELOPE
   ========================================================================== */
.cover {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 90% at 50% 0%, #fdf6f3 0%, #f8e6e2 45%, #f0cfc9 100%);
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}

.cover[hidden] { display: none; }

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

/* hạt giấy / vân nền */
.cover__paper {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 38%),
    radial-gradient(circle at 82% 76%, rgba(255, 255, 255, 0.7) 0%, transparent 42%);
  pointer-events: none;
}

/* cánh hoa rơi */
.cover__florals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.petal {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 60% 0 60% 0;
  background: linear-gradient(135deg, #fbe4e0, #e9a9a5);
  opacity: 0.65;
  animation: drift 16s linear infinite;
}

.p1 { left: 8%;  top: -6%; animation-delay: 0s; }
.p2 { left: 24%; top: -6%; animation-delay: 3.4s; width: 10px; height: 10px; }
.p3 { left: 45%; top: -6%; animation-delay: 6.1s; }
.p4 { left: 63%; top: -6%; animation-delay: 1.8s; width: 18px; height: 18px; }
.p5 { left: 79%; top: -6%; animation-delay: 8.4s; width: 11px; height: 11px; }
.p6 { left: 92%; top: -6%; animation-delay: 4.9s; }

@keyframes drift {
  0%   { transform: translate3d(0, -8vh, 0) rotate(0deg); }
  50%  { transform: translate3d(26px, 50vh, 0) rotate(180deg); }
  100% { transform: translate3d(-16px, 108vh, 0) rotate(360deg); }
}

.cover__card {
  position: relative;
  z-index: 3;
  width: min(430px, 100%);
  padding: 40px 30px 34px;
  text-align: center;
  background: linear-gradient(170deg, #fffdfb 0%, #fdf3f0 60%, #fbe9e5 100%);
  border: 1px solid rgba(122, 27, 41, 0.13);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), inset 0 0 0 6px rgba(255, 255, 255, 0.55);
  animation: cardIn 1.1s var(--ease) both;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.cover__guest-label {
  margin-top: 16px;
  font-family: var(--f-sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cover__guest {
  margin-top: 4px;
  font-family: var(--f-serif);
  font-size: 1.42rem;
  font-style: italic;
  color: var(--wine);
  word-break: break-word;
}

.cover__names {
  margin: 24px 0 0;
  font-size: clamp(1.6rem, 7.2vw, 2.15rem);
  letter-spacing: 0.01em;
  color: var(--wine);
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.35;
}

.cover__names em {
  display: block;
  font-family: var(--f-script);
  font-style: normal;
  font-size: 1.5rem;
  text-transform: none;
  color: var(--wine-soft);
  margin: 2px 0;
}

.cover__date {
  margin-top: 14px;
  font-family: var(--f-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--wine);
}

.cover__sub {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- phong bì minh hoạ (chỉ desktop) ---------- */
.env {
  position: absolute;
  z-index: 1;
  right: max(3vw, 12px);
  bottom: 0;
  width: 300px;
  height: 210px;
  opacity: 0;
  transform: translateY(40px);
  animation: envIn 1.2s 0.35s var(--ease) forwards;
}

@keyframes envIn { to { opacity: 0.95; transform: none; } }

.env__back,
.env__front,
.env__flap,
.env__letter {
  position: absolute;
  inset: 0;
}

.env__back {
  background: linear-gradient(160deg, #f9d8d3, #eec3bd);
  border-radius: 3px;
  box-shadow: 0 20px 40px rgba(122, 27, 41, 0.16);
}

.env__letter {
  background: #fffdfb;
  border-radius: 2px;
  inset: 14px 22px 46px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 0 26px;
  box-shadow: 0 6px 16px rgba(122, 27, 41, 0.08);
}

.env__letter-date {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--wine);
}

.env__letter-line {
  display: block;
  height: 1px;
  background: rgba(122, 27, 41, 0.18);
}

.env__letter-line--short { width: 62%; }

.env__front {
  inset: auto 0 0 0;
  height: 112px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #f7d3ce, #f1c6c0);
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 -2px 12px rgba(122, 27, 41, 0.07);
}

.env__flap {
  inset: 0 0 auto 0;
  height: 118px;
  background: linear-gradient(180deg, #fae0db, #f2cbc6);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 3px 3px 0 0;
}

.env__seal {
  position: absolute;
  left: 50%;
  top: 96px;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #97313f, var(--wine) 62%, var(--wine-deep));
  color: #f6dcd7;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 6px 14px rgba(94, 18, 30, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

@media (max-width: 1023px) {
  .env { display: none; }
}

@media (min-width: 1024px) {
  .cover { place-items: center start; padding-left: max(8vw, 60px); }
  .cover__card { margin-top: -10px; }
}

/* ==========================================================================
   THÀNH PHẦN CHUNG
   ========================================================================== */
.wrap {
  width: min(var(--wrap), 100% - 44px);
  margin-inline: auto;
}

.wrap--narrow { width: min(var(--wrap-narrow), 100% - 44px); }

.eyebrow {
  font-family: var(--f-sans);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--wine-soft);
}

.eyebrow--wine { color: var(--wine); }
.eyebrow--light { color: rgba(253, 245, 242, 0.88); }

.script-title {
  margin-top: 6px;
  font-family: var(--f-script);
  font-size: clamp(2rem, 8vw, 2.85rem);
  font-weight: 400;
  color: var(--wine);
  line-height: 1.15;
}

.script-title--light { color: #fdf1ee; }

.section__title {
  margin-top: 4px;
  font-size: clamp(1.45rem, 5.6vw, 2rem);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--wine);
}

.lede {
  margin-top: 14px;
  font-size: 1.03rem;
  color: var(--ink-soft);
  font-style: italic;
}

.body-text {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 1rem;
}

.body-text--center { text-align: center; margin-inline: auto; max-width: 46ch; }

.rule {
  width: min(240px, 60%);
  height: 1px;
  margin: 22px auto;
  background: linear-gradient(90deg, transparent, rgba(122, 27, 41, 0.35), transparent);
}

.rule--short { width: 62px; margin: 12px auto 10px; }
.rule--faint { background: linear-gradient(90deg, transparent, rgba(253, 241, 238, 0.4), transparent); }

.section {
  position: relative;
  padding: clamp(56px, 11vw, 100px) 0;
  text-align: center;
}

/* ==========================================================================
   TOPBAR
   ========================================================================== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px max(16px, 3vw);
  padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(253, 250, 247, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(122, 27, 41, 0.08);
  transform: translateY(-102%);
  transition: transform 0.55s var(--ease);
}

.topbar.is-visible { transform: none; }

.topbar__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  gap: clamp(10px, 2.2vw, 26px);
}

.topbar__nav a {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}

.topbar__nav a:hover,
.topbar__nav a.is-active {
  color: var(--wine);
  border-bottom-color: var(--wine-soft);
}

.topbar__cta {
  padding: 8px 15px !important;
  border-radius: 999px;
  background: var(--wine);
  color: #fdf3f0 !important;
  border-bottom: none !important;
  box-shadow: 0 4px 14px rgba(122, 27, 41, 0.25);
}

.topbar__cta:hover { background: var(--wine-deep); }

@media (max-width: 720px) {
  .topbar__nav a:not(.topbar__cta) { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 96px 20px 84px;
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -1; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  animation: slowZoom 22s ease-out both;
}

@keyframes slowZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(58, 14, 22, 0.42) 0%, rgba(58, 14, 22, 0.16) 34%, rgba(58, 14, 22, 0.58) 100%),
    radial-gradient(90% 60% at 50% 42%, rgba(58, 14, 22, 0.02), rgba(58, 14, 22, 0.3));
}

/* --------------------------------------------------------------------------
   HERO cho bản STUDIO (thiep-studio.html)
   Ảnh studio có phông trắng nên scrim mặc định quá nhẹ: chữ trắng trên nền
   trắng sẽ gần như biến mất.
   Cách xử lý: KHÔNG phủ tối toàn ảnh (sẽ làm mất chất studio sáng),
   chỉ làm tối CỤC BỘ ngay sau khối chữ + tối nhẹ ở đáy để chữ trắng đọc được
   mà hai bên ảnh vẫn sáng, vẫn thấy rõ phông trắng của studio.
   -------------------------------------------------------------------------- */
.hero--studio .hero__media img { object-position: 50% 36%; }

.hero--studio .hero__scrim {
  background:
    /* tối nhẹ ở đáy cho scroll-cue, và rất nhẹ ở đỉnh cho topbar */
    linear-gradient(180deg, rgba(58, 14, 22, 0.3) 0%, rgba(58, 14, 22, 0.06) 26%, rgba(58, 14, 22, 0.44) 100%),
    /* vùng tối cục bộ đúng sau khối chữ, tan dần ra mép nên ảnh vẫn sáng */
    radial-gradient(52% 42% at 50% 46%, rgba(58, 14, 22, 0.52) 0%, rgba(58, 14, 22, 0.34) 46%, rgba(58, 14, 22, 0) 78%);
}

.hero--studio .hero__names { text-shadow: 0 3px 34px rgba(45, 10, 17, 0.72), 0 1px 3px rgba(45, 10, 17, 0.5); }

.hero--studio .hero__script { color: #fdebe7; text-shadow: 0 2px 16px rgba(45, 10, 17, 0.6); }

.hero--studio .hero__date {
  background: rgba(46, 11, 18, 0.34);
  border-color: rgba(253, 246, 243, 0.52);
}

.hero__content {
  position: relative;
  text-align: center;
  color: #fdf6f3;
  max-width: 660px;
}

.hero__script {
  margin-top: 12px;
  font-family: var(--f-script);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  color: rgba(253, 233, 228, 0.95);
  line-height: 1.2;
}

.hero__names {
  margin-top: 2px;
  font-size: clamp(2.05rem, 9.5vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.28;
  text-shadow: 0 3px 30px rgba(58, 14, 22, 0.4);
}

.hero__names em {
  display: block;
  font-family: var(--f-script);
  font-style: normal;
  font-size: 0.52em;
  text-transform: none;
  color: #f6cfc7;
  margin: 4px 0;
}

.hero__date {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 12px 22px;
  border: 1px solid rgba(253, 246, 243, 0.42);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  background: rgba(58, 14, 22, 0.16);
}

.hero__date-num {
  font-family: var(--f-display);
  font-size: 2.05rem;
  line-height: 1;
  color: #fdf6f3;
}

.hero__date-sep {
  width: 1px;
  height: 30px;
  background: rgba(253, 246, 243, 0.38);
}

.hero__date-body { display: grid; text-align: left; line-height: 1.35; }

.hero__date-body strong {
  font-family: var(--f-sans);
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.2em;
}

.hero__date-body small {
  font-family: var(--f-sans);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.8;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom));
  margin-left: -13px;
  width: 26px;
  height: 42px;
  border: 1px solid rgba(253, 246, 243, 0.45);
  border-radius: 999px;
  display: grid;
  place-items: start center;
  padding-top: 7px;
}

.scroll-cue span {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: rgba(253, 246, 243, 0.9);
  animation: cue 1.9s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50%      { transform: translateY(13px); opacity: 0.2; }
}

/* ==========================================================================
   LỜI NGỎ
   ========================================================================== */
.section--intro { background: linear-gradient(180deg, var(--paper), var(--blush-tint)); }

.intro__names { margin-top: 22px; display: grid; justify-items: center; gap: 4px; }

.intro__name {
  font-family: var(--f-display);
  font-size: clamp(1.22rem, 4.6vw, 1.62rem);
  color: var(--wine);
  letter-spacing: 0.01em;
}

.intro__rings { color: var(--wine-soft); line-height: 1; opacity: 0.85; }

.intro__photo {
  margin: 30px auto 0;
  width: min(460px, 100%);
  padding: 10px;
  background: #fffdfb;
  border: 1px solid rgba(122, 27, 41, 0.1);
  box-shadow: var(--shadow-md);
}

.intro__photo img {
  width: 100%;
  height: clamp(300px, 62vw, 480px);
  object-fit: cover;
  object-position: 50% 40%;
}

/* --------------------------------------------------------------------------
   Ảnh Lời ngỏ của bản STUDIO (thiep-studio.html)
   Ảnh ở đây là ảnh toàn thân (dáng đứng + cụm hoa dưới chân). Khung mặc định
   cắt ngang đùi làm mất đúng cái đẹp của tấm ảnh, nên khung được cao hơn và
   canh giữa để thấy trọn dáng đứng mà vẫn không tràn layout.
   -------------------------------------------------------------------------- */
.intro__photo--studio img {
  height: clamp(360px, 74vw, 600px);
  object-position: 50% 50%;
}

/* ==========================================================================
   CÔ DÂU & CHÚ RỄ
   ========================================================================== */
.section--couple { background: var(--paper); }

.couple {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.person { padding: 8px 0; }

.person__side {
  font-family: var(--f-sans);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--wine-soft);
}

.person__parent {
  margin-top: 8px;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.person__parent strong { color: var(--ink); font-weight: 600; letter-spacing: 0.02em; }

.person__place {
  font-size: 0.86rem;
  color: var(--ink-soft);
  opacity: 0.85;
}

.person__divider {
  display: grid;
  place-items: center;
  margin: 16px auto;
  width: 90px;
  height: 1px;
  background: rgba(122, 27, 41, 0.16);
  position: relative;
}

.person__divider span {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--wine-soft);
  border-radius: 50%;
  background: var(--paper);
}

.person__role {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wine-soft);
}

/* Tên hiển thị trên MỘT hàng — không ngắt dòng nhân tạo */
.person__name {
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 4.1vw, 1.5rem);
  color: var(--wine);
  line-height: 1.3;
  white-space: nowrap;
}

/* Tên gọi in nghiêng, giữ nét duyên như thiệp giấy */
.person__name em {
  font-style: italic;
  font-weight: 400;
}

.couple__amp {
  font-family: var(--f-script);
  font-size: 2.4rem;
  color: var(--wine-soft);
  opacity: 0.75;
  line-height: 1;
}

@media (min-width: 760px) {
  .couple {
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 0;
    margin-top: 18px;
  }
  .person { padding: 0 26px; }
  .couple__amp { align-self: center; font-size: 3rem; }
}

/* ==========================================================================
   THIỆP GIẤY
   ========================================================================== */
.section--stationery { background: linear-gradient(180deg, var(--blush-tint), var(--paper)); }

.stationery {
  display: grid;
  gap: 26px;
  margin-top: 22px;
  align-items: center;
  text-align: left;
}

@media (min-width: 860px) {
  .stationery { grid-template-columns: 1.05fr 1fr; gap: 44px; }
}

.stationery__figure {
  margin: 0;
  padding: 9px;
  background: #fffdfb;
  border: 1px solid rgba(122, 27, 41, 0.1);
  box-shadow: var(--shadow-md);
}

.stationery__figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.stationery__kicker {
  font-family: var(--f-sans);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wine);
}

.stationery__text .body-text { margin-top: 12px; }

.stationery__text .btn--ghost { margin-top: 20px; }

/* ==========================================================================
   SỰ KIỆN
   ========================================================================== */
.section--events {
  background: linear-gradient(180deg, var(--blush-tint), #f6ded9 78%, var(--blush-tint));
}

.events {
  display: grid;
  gap: 18px;
  margin-top: 10px;
  text-align: left;
}

@media (min-width: 860px) {
  .events { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.event {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 26px 24px;
  background: #fffdfb;
  border: 1px solid rgba(122, 27, 41, 0.1);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.event::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--blush), var(--wine-soft));
}

.event__cal {
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 62px;
  padding: 8px 4px 7px;
  border: 1px solid rgba(122, 27, 41, 0.3);
  border-radius: 2px;
  background: linear-gradient(180deg, #fdf6f3, #f9e7e3);
}

.event__cal-day {
  font-family: var(--f-display);
  font-size: 1.62rem;
  line-height: 1;
  color: var(--wine);
}

.event__cal-month {
  font-family: var(--f-sans);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: var(--wine);
}

.event__cal-year {
  font-family: var(--f-sans);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.event__kicker {
  font-family: var(--f-sans);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wine-soft);
  line-height: 1.8;
}

.event__title {
  margin-top: 4px;
  font-size: clamp(1.2rem, 4.4vw, 1.5rem);
  color: var(--wine);
}

.event__line {
  margin-top: 6px;
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.event__line strong { color: var(--ink); font-weight: 600; }

.event__line--strong {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wine);
}

.event__lunar {
  margin-top: 8px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0.8;
}

/* biến thể thiệp đỏ rượu */
.event--wine {
  background: linear-gradient(155deg, #82202e, var(--wine) 55%, #671321);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fdf3f0;
  box-shadow: 0 18px 40px rgba(94, 18, 30, 0.26);
}

.event--wine::before { background: linear-gradient(180deg, #f6cfc7, rgba(246, 207, 199, 0.35)); }
.event--wine .event__kicker { color: rgba(253, 233, 228, 0.8); }
.event--wine .event__title { color: #fffdfb; }
.event--wine .event__line { color: rgba(253, 237, 233, 0.9); }
.event--wine .event__line strong { color: #fffdfb; }
.event--wine .event__line--strong { color: #f6cfc7; }
.event--wine .event__lunar { color: rgba(250, 225, 220, 0.72); }

.event--wine .event__cal {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.09);
}

.event--wine .event__cal-day { color: #fffdfb; }
.event--wine .event__cal-month { color: #f6cfc7; }
.event--wine .event__cal-year { color: rgba(253, 237, 233, 0.8); }

/* ---------- countdown ---------- */
.countdown {
  margin-top: 34px;
  padding: 24px 16px 22px;
  background: rgba(255, 253, 251, 0.7);
  border: 1px solid rgba(122, 27, 41, 0.1);
  backdrop-filter: blur(8px);
}

.countdown__label {
  font-family: var(--f-sans);
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--wine-soft);
}

.countdown__grid {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 6vw, 40px);
  margin-top: 12px;
}

.cd { display: grid; justify-items: center; min-width: 48px; }

.cd__num {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  color: var(--wine);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.cd__unit {
  font-family: var(--f-sans);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ==========================================================================
   LỊCH
   ========================================================================== */
.section--calendar { background: var(--paper); }

.calendar {
  margin-top: 18px;
  padding: 20px 14px 16px;
  background: #fffdfb;
  border: 1px solid rgba(122, 27, 41, 0.1);
  box-shadow: var(--shadow-sm);
}

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.calendar__dow {
  font-family: var(--f-sans);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-soft);
  padding-bottom: 6px;
}

.calendar__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: var(--f-serif);
  font-size: 0.98rem;
  color: var(--ink-soft);
  border-radius: 50%;
}

.calendar__day--muted { opacity: 0.28; }

.calendar__day--today {
  box-shadow: inset 0 0 0 1px var(--blush);
  color: var(--wine);
}

.calendar__day--wed {
  background: radial-gradient(circle at 35% 30%, #a83b48, var(--wine) 70%);
  color: #fff6f3;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(122, 27, 41, 0.3);
  animation: pulseDay 2.8s ease-in-out infinite;
}

@keyframes pulseDay {
  0%, 100% { box-shadow: 0 6px 16px rgba(122, 27, 41, 0.3); }
  50%      { box-shadow: 0 6px 22px rgba(122, 27, 41, 0.55); }
}

.calendar__note {
  margin-top: 14px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* ==========================================================================
   NÚT
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.btn:active { transform: translateY(1px); }

.btn--open {
  margin-top: 22px;
  background: var(--wine);
  color: #fdf3f0;
  box-shadow: 0 8px 24px rgba(122, 27, 41, 0.28);
}

.btn--open:hover { background: var(--wine-deep); box-shadow: 0 12px 30px rgba(122, 27, 41, 0.36); }

.btn--solid {
  background: var(--wine);
  color: #fdf3f0;
  box-shadow: 0 8px 22px rgba(122, 27, 41, 0.22);
}

.btn--solid:hover { background: var(--wine-deep); }

.btn--ghost {
  margin-top: 22px;
  background: transparent;
  color: var(--wine);
  border-color: rgba(122, 27, 41, 0.28);
}

.btn--ghost:hover { background: rgba(122, 27, 41, 0.06); border-color: var(--wine-soft); }

.btn--wide { width: 100%; }

.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================================
   BẢN ĐỒ
   ========================================================================== */
.section--map { background: linear-gradient(180deg, var(--paper), var(--cream)); }

.map {
  margin-top: 22px;
  border: 1px solid rgba(122, 27, 41, 0.12);
  padding: 8px;
  background: #fffdfb;
  box-shadow: var(--shadow-sm);
}

.map iframe {
  width: 100%;
  height: clamp(240px, 46vw, 380px);
  border: 0;
  display: block;
  filter: saturate(0.9) contrast(1.02);
}

.map__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.map__actions .btn--ghost { margin-top: 0; }

/* ==========================================================================
   ALBUM
   ========================================================================== */
.section--album { background: var(--cream); }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 18px;
}

/* 8 ảnh: 2 cột = 4 hàng kín, 4 cột = 2 hàng kín — không bao giờ hở ô */
@media (min-width: 780px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}

.shot {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: var(--blush-soft);
  overflow: hidden;
  cursor: zoom-in;
  /* mọi ô cùng tỉ lệ => lưới luôn kín, không có lỗ hổng */
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  box-shadow: var(--shadow-sm);
}

.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transition: transform 0.75s var(--ease), filter 0.5s;
}

.shot:hover img { transform: scale(1.055); filter: brightness(1.03); }

.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: grid;
  place-items: center;
  padding: 54px 16px;
  background: rgba(38, 10, 15, 0.94);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease both;
}

.lightbox[hidden] { display: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox img {
  max-width: 100%;
  max-height: calc(100svh - 120px);
  object-fit: contain;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(253, 246, 243, 0.32);
  border-radius: 50%;
  background: rgba(253, 246, 243, 0.08);
  color: #fdf6f3;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}

.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(253, 246, 243, 0.2); border-color: rgba(253, 246, 243, 0.6); }

.lightbox__close { top: 14px; right: 14px; font-size: 1.7rem; }
.lightbox__nav--prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 10px; top: 50%; transform: translateY(-50%); }

@media (min-width: 760px) {
  .lightbox__nav--prev { left: 26px; }
  .lightbox__nav--next { right: 26px; }
}

/* ==========================================================================
   FORM
   ========================================================================== */
.section--rsvp { background: linear-gradient(180deg, var(--blush-tint), var(--paper)); }

.form {
  margin-top: 26px;
  text-align: left;
  display: grid;
  gap: 16px;
}

.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }

.field label,
.field legend {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0;
}

.field label span { color: var(--wine-soft); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(122, 27, 41, 0.16);
  border-radius: 2px;
  background: #fffdfb;
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.25s, box-shadow 0.25s;
  appearance: none;
}

.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--wine-soft) 50%),
                    linear-gradient(135deg, var(--wine-soft) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field textarea { resize: vertical; min-height: 88px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--wine-soft);
  box-shadow: 0 0 0 3px rgba(122, 27, 41, 0.08);
}

.field input::placeholder,
.field textarea::placeholder { color: rgba(109, 90, 88, 0.5); }

.field.has-error input,
.field.has-error textarea {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.08);
}

/* pills radio */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }

.pill { position: relative; }

.pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.pill span {
  display: block;
  padding: 10px 16px;
  border: 1px solid rgba(122, 27, 41, 0.18);
  border-radius: 999px;
  background: #fffdfb;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.22s var(--ease);
}

.pill input:checked + span {
  background: var(--wine);
  border-color: var(--wine);
  color: #fdf3f0;
  box-shadow: 0 6px 16px rgba(122, 27, 41, 0.22);
}

.pill input:focus-visible + span { outline: 2px solid var(--wine); outline-offset: 3px; }

#guestCountField.is-hidden { display: none; }

.form__status {
  min-height: 1.2em;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--wine);
  text-align: center;
}

.form__status.is-error { color: #b3261e; }

/* thanks */
.thanks {
  margin-top: 26px;
  padding: 30px 22px;
  border: 1px solid rgba(122, 27, 41, 0.14);
  background: #fffdfb;
  text-align: center;
  box-shadow: var(--shadow-sm);
  animation: cardIn 0.6s var(--ease) both;
}

.thanks[hidden] { display: none; }

.thanks__mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wine);
  color: #fdf3f0;
  font-size: 1.2rem;
}

.thanks h4 { font-size: 1.3rem; color: var(--wine); }

.thanks p { margin-top: 8px; color: var(--ink-soft); font-size: 0.95rem; }

/* ==========================================================================
   SỔ LƯU BÚT — chỉ còn form gửi
   Danh sách lời chúc KHÔNG hiển thị công khai trên thiệp nữa; khách xem ở
   trang nội bộ xem-loi-chuc-8a41d2.html (style riêng: css/viewer.css).
   ========================================================================== */
.section--wishes { background: var(--paper); }

.form--wish { gap: 14px; }

/* ghi chú riêng tư dưới form gửi lời chúc */
.form__note {
  margin-top: 18px;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-align: center;
}

.form__note strong { color: var(--wine); font-weight: 600; }

/* ==========================================================================
   MỪNG CƯỚI (QR)
   ========================================================================== */
.section--gift { background: linear-gradient(180deg, var(--paper), var(--blush-tint)); }

.gift {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

@media (min-width: 720px) {
  .gift { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.gift__card {
  padding: 24px 20px 22px;
  background: #fffdfb;
  border: 1px solid rgba(122, 27, 41, 0.11);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.gift__side {
  font-family: var(--f-sans);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wine-soft);
}

.gift__name {
  margin-top: 3px;
  font-family: var(--f-display);
  font-size: 1.24rem;
  color: var(--wine);
  font-weight: 500;
}

.gift__qr {
  margin: 16px auto 0;
  width: min(210px, 72%);
  padding: 9px;
  background: #fff;
  border: 1px solid rgba(122, 27, 41, 0.13);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(122, 27, 41, 0.07);
}

.gift__qr img {
  width: 100%;
  height: auto;
  display: block;
}

.gift__info {
  margin: 16px 0 0;
  display: grid;
  gap: 7px;
  font-size: 0.9rem;
}

.gift__info > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(122, 27, 41, 0.13);
}

.gift__info > div:last-child { border-bottom: 0; padding-bottom: 0; }

.gift__info dt {
  font-family: var(--f-sans);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.85;
  white-space: nowrap;
}

.gift__info dd {
  margin: 0;
  text-align: right;
  color: var(--ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.gift__info dd.gift__bank,
.gift__info dd.gift__acc {
  font-style: italic;
  font-weight: 400;
  color: rgba(109, 90, 88, 0.72);
}

.gift__note {
  margin-top: 20px;
  text-align: center;
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(109, 90, 88, 0.85);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  position: relative;
  padding: clamp(56px, 11vw, 96px) 20px calc(56px + env(safe-area-inset-bottom));
  text-align: center;
  color: #fdf3f0;
  background:
    radial-gradient(120% 80% at 50% 0%, #8c2735 0%, var(--wine) 45%, var(--wine-deep) 100%);
}

.footer__inner { max-width: 560px; margin-inline: auto; }

.footer__names {
  margin-top: 18px;
  font-family: var(--f-display);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer__date {
  margin-top: 4px;
  font-family: var(--f-sans);
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  color: rgba(253, 233, 228, 0.8);
}

.footer__note {
  font-size: 0.92rem;
  font-style: italic;
  color: rgba(253, 237, 233, 0.78);
  max-width: 38ch;
  margin-inline: auto;
}

/* ==========================================================================
   FAB
   ========================================================================== */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 320;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 17px;
  border-radius: 999px;
  background: var(--wine);
  color: #fdf3f0;
  font-family: var(--f-sans);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(94, 18, 30, 0.34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all 0.45s var(--ease);
}

.fab.is-visible { opacity: 1; visibility: visible; transform: none; }

@media (min-width: 721px) {
  .fab { display: none; }
}

/* ==========================================================================
   NHẠC NỀN — nút BONG BÓNG (bubble) tròn, góc PHẢI dưới

   Trên mobile nút "Xác nhận" (.fab) cũng ở góc phải dưới, nên bubble được
   đẩy LÊN TRÊN nó để không đè nhau. Trên desktop .fab bị ẩn => bubble về sát đáy.

   LƯU Ý (đã gặp lỗi thật): icon phải có width/height viết thẳng trong markup.
   Nếu chỉ dựa vào CSS mà file CSS bị cache cũ / tải lỗi, icon <svg> sẽ phình
   to bằng cả khung chữ — đúng lỗi đã thấy trên máy người dùng.
   ========================================================================== */
.music-bubble {
  position: fixed;
  right: 16px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 321;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;

  border: 1px solid rgba(122, 27, 41, 0.16);
  border-radius: 50%;
  background: rgba(253, 250, 247, 0.94);
  backdrop-filter: blur(10px) saturate(1.15);
  color: var(--wine);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(94, 18, 30, 0.2);

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
              background 0.3s var(--ease), color 0.3s var(--ease);
}

.music-bubble.is-visible { opacity: 1; visibility: visible; transform: none; }

.music-bubble:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }

/* đang phát: đặc màu rượu vang */
.music-bubble[data-state="on"] {
  background: var(--wine);
  border-color: var(--wine);
  color: #fdf3f0;
}

/* đang tải: nhấp nháy nhẹ */
.music-bubble[data-state="loading"] { animation: bubblePulse 1.1s ease-in-out infinite; }

@keyframes bubblePulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* không phát được: mờ nhưng VẪN bấm lại được */
.music-bubble[data-state="error"] { opacity: 0.6; }

/* icon loa — kích thước viết cả trong attribute để CSS lỗi vẫn không vỡ */
.music-bubble__icon { display: block; width: 20px; height: 20px; flex: none; }

.music-bubble__icon .wave { opacity: 0.3; transition: opacity 0.3s var(--ease); }

.music-bubble[data-state="on"] .music-bubble__icon .wave { opacity: 1; }

/* ẩn hẳn phần chữ thừa nếu còn sót từ bản cũ */
.music-bubble__text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* desktop: .fab bị ẩn nên bubble xuống sát đáy */
@media (min-width: 721px) {
  .music-bubble { bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* player YouTube ẩn: 1px, KHÔNG display:none (YouTube cần phần tử có kích
   thước thật để phát tiếng), cũng không visibility:hidden. */
.yt-hidden {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   TINH CHỈNH TYPOGRAPHY TIẾNG VIỆT
   Đã test so sánh trực tiếp: Cormorant Garamond quá mảnh ở 17px và dấu bị nhạt;
   Great Vibes vẽ dấu rất mỏng; EB Garamond thiếu glyph precomposed cho chữ hai
   dấu nên dấu bị TÁCH RỜI, sinh khoảng trống ("niề m", "Rấ t", "tiế p").
   => Chọn Lora cho thân bài (đủ glyph, nét đậm rõ) + Dancing Script cho script. Đồng thời: nhãn in hoa dưới ~11px cộng
   letter-spacing quá rộng khiến dấu (ắ ộ ữ ạ ẫ) chồng/vỡ nét — nên nâng cỡ
   tối thiểu và siết khoảng chữ.
   ========================================================================== */

/* Nhãn nhỏ: tăng cỡ tối thiểu, giảm tracking */
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
}

.topbar__nav a {
  font-size: 0.72rem;
  letter-spacing: 0.11em;
}

.cover__guest-label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}

.cover__date { letter-spacing: 0.24em; }

.cover__sub {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.env__letter-date {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
}

.person__side,
.person__role {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}

.event__kicker {
  font-size: 0.66rem;
  letter-spacing: 0.15em;
}

.event__cal-month { font-size: 0.56rem; letter-spacing: 0.1em; }
.event__cal-year { font-size: 0.6rem; letter-spacing: 0.08em; }

.event__line--strong {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.countdown__label {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
}

.cd__unit {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.calendar__dow {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

.stationery__kicker {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.gift__side {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}

.gift__info dt {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.wish-count__txt {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.wish__time {
  font-size: 0.64rem;
  letter-spacing: 0.06em;
}

.footer__date {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
}

.fab {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.btn {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.field label,
.field legend {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.hero__date-body strong { letter-spacing: 0.16em; }

.hero__date-body small {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
}

/* Script: Dancing Script có x-height nhỏ hơn Great Vibes -> nâng cỡ nhẹ */
.script-title { font-size: clamp(2.2rem, 8.5vw, 3.1rem); }

.cover__names em { font-size: 1.72rem; }

.hero__script { font-size: clamp(1.65rem, 6.4vw, 2.35rem); }

.hero__names em { font-size: 0.56em; }

.couple__amp { font-size: 2.6rem; }

@media (min-width: 760px) {
  .couple__amp { font-size: 3.2rem; }
}

/* Lora đậm hơn EB Garamond nên giữ màu phụ, không cần tăng độ đậm thêm */
.person__place,
.event__lunar,
.body-text,
.calendar__note {
  color: var(--ink-soft);
}

/* ==========================================================================
   HIỆU ỨNG XUẤT HIỆN
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}