/* ── Các thành phần tuỳ biến ngoài Tailwind ───────────────────── */

/* ══════════════════════════════════════════════════════════════
   HỆ TRANG TRÍ THIỆP CƯỚI
   Vân giấy, hoa văn ngăn cách, khung viền kép, chữ ánh kim.
   Toàn bộ vẫn nằm trong bảng màu Thủy (xanh/navy) + Kim (trắng/bạc)
   — không có sắc vàng đất / nâu / be (Thổ khắc Thủy).
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Vân giấy mịn: feTurbulence dựng sẵn thành data URI — không thêm request,
     không thêm lớp composite. Dán thẳng lên section chứ KHÔNG làm overlay
     position:fixed: overlay full-screen phải vẽ lại mỗi khung hình khi cuộn. */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
}

.paper {
  background-image: var(--paper-grain);
  background-size: 180px 180px;
}
/* trên nền navy vân giấy tối sẽ mất hút → đảo sang sáng */
.paper-dark {
  background-image: var(--paper-grain);
  background-size: 180px 180px;
  background-blend-mode: overlay;
}

/* ── Quầng sáng mềm đầu/cuối section: xoá cảm giác nền phẳng trơn ── */
.glow-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      58% 42% at 50% 0%,
      rgba(56, 111, 164, 0.07),
      transparent 72%
    ),
    radial-gradient(
      70% 46% at 50% 100%,
      rgba(138, 181, 219, 0.1),
      transparent 72%
    );
}
.glow-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      55% 45% at 50% 0%,
      rgba(138, 181, 219, 0.14),
      transparent 70%
    ),
    radial-gradient(
      80% 55% at 50% 120%,
      rgba(56, 111, 164, 0.3),
      transparent 70%
    );
}

/* ── Hoa văn ngăn cách giữa các phần ── */
.orn-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: #386fa4;
}
.orn-divider .od-line {
  height: 1px;
  flex: 0 1 7.5rem;
  background: linear-gradient(90deg, transparent, rgba(56, 111, 164, 0.5));
}
.orn-divider .od-line + .od-line,
.orn-divider svg + .od-line {
  background: linear-gradient(90deg, rgba(56, 111, 164, 0.5), transparent);
}
.orn-divider svg {
  width: 4.25rem;
  height: auto;
  flex: none;
}
.orn-divider.on-dark {
  color: #8ab5db;
}
.orn-divider.on-dark .od-line {
  background: linear-gradient(90deg, transparent, rgba(138, 181, 219, 0.55));
}
.orn-divider.on-dark svg + .od-line {
  background: linear-gradient(90deg, rgba(138, 181, 219, 0.55), transparent);
}

/* ── Chữ "eyebrow" có gạch ngang hai bên ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}
/* letter-spacing đẻ ra khoảng trắng thừa ở cuối chữ → kéo gạch phải lại cho cân */
.eyebrow::after {
  margin-left: -0.4em;
}
/* Ở khối căn trái (RSVP) chỉ để gạch phía sau — gạch đằng trước sẽ đẩy chữ
   thụt vào, lệch hẳn khỏi mép các dòng bên dưới. */
.eyebrow-end::before {
  display: none;
}

/* ── Khung viền kép kiểu thiệp in ── */
.deco-frame {
  position: relative;
  border: 1px solid rgba(56, 111, 164, 0.3);
}
.deco-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(56, 111, 164, 0.16);
  pointer-events: none;
}
.deco-frame.on-dark {
  border-color: rgba(184, 196, 206, 0.42);
}
.deco-frame.on-dark::before {
  border-color: rgba(184, 196, 206, 0.2);
}

/* dấu thoi 4 góc — chốt khung lại cho ra dáng thiệp in */
.corner-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #386fa4;
  opacity: 0.6;
  transform: rotate(45deg);
  pointer-events: none;
}
.corner-dot.tl {
  top: -4px;
  left: -4px;
}
.corner-dot.tr {
  top: -4px;
  right: -4px;
}
.corner-dot.bl {
  bottom: -4px;
  left: -4px;
}
.corner-dot.br {
  bottom: -4px;
  right: -4px;
}
.on-dark > .corner-dot {
  background: #8ab5db;
}

/* ── Chữ ánh kim (foil stamping): bạc ngả xanh ── */
.foil {
  background: linear-gradient(
    100deg,
    #6f97bd 0%,
    #1e4e77 20%,
    #a6c6e2 40%,
    #386fa4 58%,
    #16436a 76%,
    #7fa6c9 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: foil-shimmer 6s ease-in-out infinite;
}
.foil-light {
  background: linear-gradient(
    100deg,
    #b9d2e8 0%,
    #ffffff 24%,
    #9ec3e4 48%,
    #ffffff 72%,
    #b9d2e8 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: foil-shimmer 6s ease-in-out infinite;
}

@keyframes foil-shimmer {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}

/* ── Huy hiệu monogram (crest) ── */
.crest {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crest-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Dải màu trang phục (dress code) ── */
.swatch {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* ── Nút phụ viền mảnh (thêm vào lịch…) ── */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(184, 196, 206, 0.55);
  border-radius: 9999px;
  padding: 0.55rem 1.15rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #8ab5db;
  cursor: pointer;
  /* transform để dành cho GSAP — chỉ transition màu/viền */
  transition:
    border-color 0.3s,
    background 0.3s,
    color 0.3s;
}
.btn-outline:hover {
  border-color: rgba(184, 196, 206, 0.9);
  background: rgba(255, 255, 255, 0.07);
  color: #dfe6ec;
}

html,
body {
  overscroll-behavior: auto;
  overflow-x: hidden;
}

::selection {
  background: #386fa4;
  color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f8f9fb;
}
::-webkit-scrollbar-thumb {
  background: #d5dde5;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #386fa4;
}

/* ── Thanh tiến trình cuộn ── */
#progress-track {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 2px;
  background: transparent;
}
#progress-bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #386fa4, #8ab5db);
}

/* ── Nav ── */
/* transform do GSAP quản lý (ẩn/hiện khi cuộn) → chỉ transition màu nền */
#nav {
  transition:
    background 0.5s,
    box-shadow 0.5s,
    backdrop-filter 0.5s;
}
#nav.scrolled {
  background: rgba(248, 249, 251, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(11, 23, 36, 0.06);
}
.nav-link {
  position: relative;
  transition: color 0.3s;
}
.nav-link:not(.rounded-full)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1px;
  width: 100%;
  background: #386fa4;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:not(.rounded-full):hover {
  color: #386fa4;
}
.nav-link:not(.rounded-full):hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ── Mask reveal cho tên (giữ nguyên nét chữ script) ── */
/* Dancing Script có đuôi chữ (y, g, ạ…) thò xuống 0.28em dưới baseline,
   trong khi line-box chỉ cao 0.9em → tràn 0.15em. Chừa 0.22em cho chắc.
   LƯU Ý: em ở đây tính theo font-size của chính .mask-line, nên class
   text-6xl/md:text-8xl phải đặt trên .mask-line (xem index.html). */
.mask-line {
  overflow: hidden;
  /* co giãn liên tục thay vì nhảy bậc 60px → 96px: ở 320px màn hình
     chỉ còn ~272px chỗ trống nên 60px là quá chật */
  font-size: clamp(2.75rem, 13vw, 6rem);
  padding-top: 0.1em;
  padding-bottom: 0.22em;
  margin-top: -0.1em;
}

/* ── Gạch chân dưới tiêu đề: ánh bạc chuyển sang xanh (Kim → Thủy) ── */
.line-grow {
  background: linear-gradient(
    90deg,
    rgba(184, 196, 206, 0) 0%,
    #b8c4ce 22%,
    #386fa4 50%,
    #b8c4ce 78%,
    rgba(184, 196, 206, 0) 100%
  );
}
/* trên nền navy thì đảo lại cho nổi */
#events .line-grow {
  background: linear-gradient(
    90deg,
    rgba(184, 196, 206, 0) 0%,
    #8ab5db 30%,
    #dfe6ec 50%,
    #8ab5db 70%,
    rgba(184, 196, 206, 0) 100%
  );
}

/* ── Chữ tách ký tự (SplitText) ── */
.split-title {
  perspective: 600px;
}
.split-title .word {
  display: inline-block;
  white-space: nowrap;
}
.split-title .char {
  display: inline-block;
  will-change: transform, opacity;
}
#quote-text {
  word-break: normal;
  overflow-wrap: break-word;
}
#quote-text .word {
  display: inline-block;
}

/* ── Marquee ── */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  will-change: transform;
}

/* ── Bức tường lời chúc ──────────────────────────────────────────
   Thẻ do JS dựng từ dữ liệu Google Sheet nên toàn bộ style nằm ở đây,
   không nhồi chuỗi class Tailwind vào template chuỗi trong main.js. */
.wish-card {
  position: relative;
  flex: none;
  width: 280px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(56, 111, 164, 0.2);
  border-radius: 2px;
  padding: 1.6rem 1.5rem;
  box-shadow: 0 8px 26px rgba(11, 23, 36, 0.04);
  /* .wish-track mới là thứ chạy keyframes transform; thẻ con nhấc lên khi
     hover là transform riêng của nó nên không tranh chấp với ai. */
  transition:
    border-color 0.4s,
    box-shadow 0.4s,
    transform 0.35s,
    background 0.4s;
}
.wish-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(56, 111, 164, 0.12);
  border-radius: 1px;
  pointer-events: none;
}
.wish-card:hover {
  transform: translateY(-6px);
  border-color: rgba(56, 111, 164, 0.42);
  background: #fff;
  box-shadow: 0 16px 38px rgba(11, 23, 36, 0.08);
}
@media (min-width: 768px) {
  .wish-card {
    width: 320px;
    padding: 1.75rem 1.7rem;
  }
}

.wish-quote {
  display: block;
  margin-bottom: -0.35rem;
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  line-height: 1;
  color: rgba(56, 111, 164, 0.18);
}
.wish-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.75;
  font-style: italic;
  color: rgba(11, 23, 36, 0.78);
  /* lời chúc dài ngắn khác nhau → chốt số dòng cho các thẻ cao bằng nhau */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wish-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(56, 111, 164, 0.12);
  text-align: left;
}
.wish-avatar {
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(56, 111, 164, 0.25);
  background: rgba(56, 111, 164, 0.07);
  color: #386fa4;
  font-family: "Playfair Display", serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wish-name {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #132e4f;
}
.wish-rel {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.65rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(11, 23, 36, 0.38);
}

/* ── Băng chuyền lời chúc chạy liên tục ── */
@keyframes wish-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--scroll-width, calc(-50% - 12px)));
  }
}
.animate-wish-scroll {
  will-change: transform;
  animation: wish-scroll 30s linear infinite;
}
.animate-wish-scroll:hover {
  animation-play-state: paused;
}

/* ── Countdown ── */
.cd-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(56, 111, 164, 0.35);
  border-radius: 0.75rem;
  padding: 1.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.04);
}
.cd-num {
  font-family: "Playfair Display", serif;
  /* 7vw thay vì 5vw: số ngày có thể lên 3 chữ số, ở 320px khung chỉ
     rộng 34px mà "888" ở 28px đã chiếm 39px → tràn */
  font-size: clamp(1.35rem, 7vw, 3rem);
  font-weight: 600;
  color: #8ab5db;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.cd-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(242, 246, 250, 0.6);
}

/* màn hình rất hẹp: bóp padding & giãn chữ cho 4 ô vừa một hàng */
@media (max-width: 400px) {
  .cd-box {
    padding: 0.9rem 0.15rem;
    gap: 0.2rem;
    border-radius: 0.6rem;
  }
  .cd-label {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }
}

/* ── Khung ảnh cô dâu chú rể ── */
.photo-frame {
  position: relative;
  border-radius: 10rem 10rem 0.75rem 0.75rem; /* vòm cổng cưới */
  overflow: hidden;
  border: 1px solid rgba(56, 111, 164, 0.3);
  padding: 0;
  background: transparent;
  box-shadow: 0 10px 40px rgba(11, 23, 36, 0.08);
}
/* vòm ngoài mảnh, lệch ra khỏi khung ảnh — gợi cổng hoa nhà thờ.
   Đặt trên .photo-wrap (bọc ngoài) vì .photo-frame có overflow:hidden. */
.photo-wrap {
  position: relative;
}
.photo-wrap::before {
  content: "";
  position: absolute;
  inset: -0.7rem -0.7rem -0.7rem -0.7rem;
  border: 1px solid rgba(56, 111, 164, 0.18);
  border-radius: 11rem 11rem 1.1rem 1.1rem;
  pointer-events: none;
}
.reveal-img {
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(100% 0 0 0);
}
.reveal-img > * {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.group:hover .reveal-img > * {
  transform: scale(1.05);
}

/* ── Timeline chuyện tình ────────────────────────────────────────
   Mỗi mốc là một tấm thiệp nhỏ viền kép, gắn vào trục giữa bằng huy hiệu
   tròn và một tay nối — cùng ngôn ngữ với khối "Thiệp mời hai họ". */

/* Trục dọc: nhạt dần hai đầu thay vì cắt cụt.
   Canh giữa bằng margin-left chứ KHÔNG bằng -translate-x: GSAP tween scaleY
   lên chính phần tử này và sẽ ghi đè sạch thuộc tính transform. */
#story-line {
  margin-left: -1px;
  background: linear-gradient(
    180deg,
    rgba(56, 111, 164, 0) 0%,
    rgba(56, 111, 164, 0.45) 9%,
    rgba(56, 111, 164, 0.45) 91%,
    rgba(56, 111, 164, 0) 100%
  );
}

/* Dấu thoi chốt hai đầu trục */
.story-cap {
  position: absolute;
  left: 1rem;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: #386fa4;
  opacity: 0.5;
  transform: rotate(45deg);
  pointer-events: none;
}
.story-cap-top {
  top: -4.5px;
}
.story-cap-bottom {
  bottom: -4.5px;
}

/* Huy hiệu tròn trên trục.
   Lệch tâm bằng margin-left, KHÔNG bằng translateX — transform để dành trọn
   cho GSAP (nó tween scale 0 → 1). Trộn hai bên vào cùng một thuộc tính
   chính là nguồn gốc kiểu lỗi "phần tử nhảy lệch ở khung hình đầu". */
.story-dot {
  position: absolute;
  z-index: 10;
  left: 1rem;
  top: 1.1rem;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgba(56, 111, 164, 0.4);
  color: #386fa4;
  /* vòng đệm màu nền để trục dọc không đâm sát vào viền huy hiệu */
  box-shadow:
    0 0 0 5px #edf0f4,
    0 6px 18px rgba(11, 23, 36, 0.08);
  transform: scale(0);
}
.story-dot svg {
  width: 16px;
  height: 16px;
}

/* Tay nối huy hiệu → thẻ (bản dọc, dùng trên điện thoại) */
.story-item::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 2.22rem;
  width: 2.5rem; /* chạm đúng mép trái thẻ (story-item pl-14 = 3.5rem) */
  height: 1px;
  background: rgba(56, 111, 164, 0.3);
}

/* Thẻ nội dung: viền kép, góc gần vuông cho ra dáng thiệp in */
.story-card {
  position: relative;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(56, 111, 164, 0.22);
  border-radius: 2px;
  padding: 1.5rem 1.4rem;
  box-shadow: 0 10px 34px rgba(11, 23, 36, 0.05);
  /* KHÔNG transition-all: .story-body bọc ngoài do GSAP tween x/autoAlpha,
     và transition transform/opacity sẽ tranh quyền ghi với nó. */
  transition:
    border-color 0.4s,
    background 0.4s,
    box-shadow 0.4s;
}
.story-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(56, 111, 164, 0.13);
  border-radius: 1px;
  pointer-events: none;
}
.story-card:hover {
  border-color: rgba(56, 111, 164, 0.45);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 42px rgba(11, 23, 36, 0.09);
}

/* Dòng ngày tháng kiểu thiệp in: THÁNG 03 │ 2021 */
.story-month {
  font-family: "Playfair Display", serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(56, 111, 164, 0.85);
  vertical-align: middle;
}
.story-sep {
  display: inline-block;
  width: 1px;
  height: 0.9rem;
  margin: 0 0.65rem;
  background: rgba(56, 111, 164, 0.3);
  vertical-align: middle;
}
.story-year {
  /* inline-block để hộp gradient của .foil (background-clip: text) có kích
     thước xác định — trên phần tử inline thuần nó dễ bị cắt lệch */
  display: inline-block;
  font-family: "Playfair Display", serif;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.story-title {
  margin-top: 0.55rem;
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  color: #132e4f;
}
.story-rule {
  height: 1px;
  width: 2.5rem;
  margin-top: 0.85rem;
  background: linear-gradient(
    90deg,
    rgba(56, 111, 164, 0.5),
    rgba(56, 111, 164, 0)
  );
}
.story-text {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.75;
  color: rgba(11, 23, 36, 0.62);
}

@media (min-width: 768px) {
  .story-cap {
    left: 50%;
  }
  .story-dot {
    left: 50%;
    width: 44px;
    height: 44px;
    margin-left: -22px;
  }
  .story-dot svg {
    width: 19px;
    height: 19px;
  }
  .story-card {
    padding: 1.75rem 1.9rem;
  }
  .story-title {
    font-size: 1.2rem;
  }
  /* tay nối dọc không dùng nữa — mỗi thẻ tự nối ngang vào trục */
  .story-item::before {
    display: none;
  }
  .story-card::after {
    content: "";
    position: absolute;
    top: 2.47rem;
    width: 1.65rem;
    height: 1px;
    background: rgba(56, 111, 164, 0.3);
  }
  .is-left .story-card::after {
    right: -1.65rem;
  }
  .is-right .story-card::after {
    left: -1.65rem;
  }
  /* mốc nằm bên TRÁI trục → nội dung căn phải, gạch chân phải đảo chiều */
  .is-left .story-rule {
    margin-left: auto;
    background: linear-gradient(
      90deg,
      rgba(56, 111, 164, 0),
      rgba(56, 111, 164, 0.5)
    );
  }
}

/* ── Album (CSS Grid 3 cột x 3 hàng, chiều cao bằng nhau 100%) ── */
#gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  max-width: 64rem;
  margin: 1.5rem auto 0;
  padding: 0 0.5rem;
}
.g-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.35rem;
  border: 1px solid rgba(56, 111, 164, 0.12);
  background: #fff;
  padding: 0.25rem;
  box-shadow: 0 4px 15px rgba(11, 23, 36, 0.03);
  cursor: pointer;
  transition: box-shadow 0.4s ease;
  will-change: transform;
  /* Chiều cao bằng nhau 100% cho mọi ô trong hàng */
  height: 8.5rem;
}
.g-wide {
  grid-column: span 2;
}
.g-item:hover {
  box-shadow: 0 12px 30px rgba(11, 23, 36, 0.08);
}

/* ── Album ảnh cưới (Crossfade hòa quyện mượt mà 100%, tuyệt đối không bị khựng/nháy) ── */
.g-slide {
  position: absolute;
  inset: 0.25rem;
  width: calc(100% - 0.5rem);
  height: calc(100% - 0.5rem);
  object-fit: cover;
  border-radius: 0.25rem;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 2s ease-in-out,
    transform 2.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
.g-slide-active {
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 640px) {
  #gallery-grid {
    gap: 1rem;
    padding: 0 1.5rem;
    margin-top: 2.5rem;
  }
  .g-item {
    border-radius: 0.75rem;
    padding: 0.5rem;
    border-color: rgba(56, 111, 164, 0.15);
    box-shadow: 0 4px 20px rgba(11, 23, 36, 0.04);
    height: 13.5rem;
  }
  .g-slide {
    inset: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    border-radius: 0.5rem;
  }
}

@media (min-width: 1024px) {
  #gallery-grid {
    gap: 1.25rem;
  }
  .g-item {
    height: 17.5rem;
  }
}

/* lightbox */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 23, 36, 0.93);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#lightbox.open {
  pointer-events: auto;
}

.lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}
#lightbox img {
  max-width: 88vw;
  max-height: 82vh;
  border-radius: 0.5rem;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
  user-select: none;
  -webkit-user-drag: none;
}

/* nút điều hướng */
.lb-btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  backdrop-filter: blur(6px);
  cursor: pointer;
  /* KHÔNG transition transform — tránh tranh với GSAP nếu sau này animate */
  transition:
    background 0.25s,
    border-color 0.25s;
}
.lb-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}
.lb-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.lb-prev {
  left: max(1rem, 3vw);
  top: 50%;
  margin-top: -1.375rem;
}
.lb-next {
  right: max(1rem, 3vw);
  top: 50%;
  margin-top: -1.375rem;
}
.lb-close {
  top: 1.25rem;
  right: max(1rem, 3vw);
}

/* bộ đếm */
.lb-count {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Playfair Display", serif;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.lb-count b {
  font-weight: 600;
  color: #fff;
}

/* điện thoại: nút nhỏ hơn, dời xuống dưới cho khỏi che ảnh dọc */
@media (max-width: 640px) {
  .lb-btn {
    width: 2.4rem;
    height: 2.4rem;
  }
  .lb-btn svg {
    width: 1.05rem;
    height: 1.05rem;
  }
  .lb-prev {
    left: 1.25rem;
    top: auto;
    bottom: 1.1rem;
    margin-top: 0;
  }
  .lb-next {
    right: 1.25rem;
    top: auto;
    bottom: 1.1rem;
    margin-top: 0;
  }
  .lb-close {
    top: 1rem;
    right: 1rem;
  }
  .lb-count {
    bottom: 2rem;
  }
  #lightbox img {
    max-height: 72vh;
  }
}

/* ── Sự kiện ── */
#events-grid {
  perspective: 1000px;
}
.event-card {
  position: relative;
  border: 1px solid rgba(184, 196, 206, 0.35);
  border-radius: 1rem;
  padding: 2.5rem 1.75rem 2.25rem;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.02)
  );
  transform-style: preserve-3d;
  /* KHÔNG transition transform ở đây — GSAP giữ quyền ghi transform */
  transition:
    border-color 0.4s,
    background 0.4s,
    box-shadow 0.4s;
}
/* viền trong mảnh — cùng ngôn ngữ với .deco-frame của khối thiệp mời */
.event-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(184, 196, 206, 0.18);
  border-radius: 0.7rem;
  pointer-events: none;
}
.event-card:hover {
  border-color: rgba(184, 196, 206, 0.8);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.04)
  );
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}
/* số thứ tự nghi lễ, chìm sau nội dung */
.event-no {
  position: absolute;
  top: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Playfair Display", serif;
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  color: rgba(184, 196, 206, 0.5);
  pointer-events: none;
}
.event-map {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #8ab5db;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.event-map:hover {
  border-color: #8ab5db;
}

/* ── RSVP ── */
.rsvp-input {
  width: 100%;
  border: 1px solid rgba(184, 196, 206, 0.6);
  border-radius: 0.75rem;
  background: rgba(242, 246, 250, 0.65);
  padding: 0.95rem 1.25rem;
  font-size: 0.9rem;
  color: #0b1724;
  outline: none;
  /* KHÔNG dùng `all` — GSAP giữ quyền ghi opacity/visibility/transform.
     Nếu transition cả 3 thứ đó, form sẽ kẹt ở trạng thái ẩn ban đầu. */
  transition:
    border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  backdrop-filter: blur(4px);
}
.rsvp-input::placeholder {
  color: #8fa0b5;
}
.rsvp-input:focus {
  border-color: #386fa4;
  background: #fff;
  box-shadow:
    0 8px 20px rgba(56, 111, 164, 0.06),
    0 0 0 3px rgba(56, 111, 164, 0.15);
  /* nhấc lên khi focus: làm bằng GSAP (xem main.js) */
}

/* Custom Select Dropdown Arrow */
select.rsvp-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23386FA4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 1rem;
  padding-right: 2.75rem;
  cursor: pointer;
}

/* Premium RSVP Button */
.rsvp-btn {
  background: linear-gradient(135deg, #386fa4, #1e4e77);
  box-shadow: 0 4px 15px rgba(56, 111, 164, 0.2);
  /* transform do GSAP quản lý — chỉ transition bóng đổ */
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.rsvp-btn:hover {
  box-shadow: 0 8px 25px rgba(56, 111, 164, 0.35);
}

/* ── QR mừng cưới ── */
.qr-card {
  border: 1px solid #d5dde5;
  border-radius: 1rem;
  background: #fff;
  padding: 1.25rem;
  text-align: center;
  box-shadow: 0 6px 24px rgba(11, 23, 36, 0.05);
  /* transform do GSAP quản lý — chỉ transition box-shadow */
  transition: box-shadow 0.4s;
}
.qr-card:hover {
  box-shadow: 0 14px 36px rgba(11, 23, 36, 0.1);
}
.qr-ph {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(56, 111, 164, 0.4);
  border-radius: 0.6rem;
  background: #f8f9fb;
}

/* ── Hoạt họa xoay hoa nền ── */
@keyframes spin-floral {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.floral {
  transform-origin: 50% 50%;
  animation: spin-floral 90s linear infinite;
}

/* ── Cánh hoa rơi ── */
.petal {
  position: absolute;
  top: -30px;
  width: 14px;
  height: 14px;
  border-radius: 60% 0 60% 0;
  /* Kim — cánh hoa trắng ngọc trai. Viền bạc + bóng nhẹ để vẫn nổi
     trên nền trắng, đồng thời bật sáng trên các section navy. */
  background: linear-gradient(135deg, #ffffff 35%, #cfd9e2);
  box-shadow: 0 1px 4px rgba(19, 46, 79, 0.13);
  opacity: 0.92;
  will-change: transform;
}

/* ── Tối ưu cho điện thoại ──────────────────────────────────────
   backdrop-filter buộc GPU đọc lại vùng phía sau mỗi frame — rất đắt
   trên GPU di động, nhất là khi nav đang dính lúc cuộn. Thay bằng nền
   đục hơn cho tương phản tương đương mà không tốn gì. */
@media (max-width: 767px), (hover: none) {
  #nav.scrolled {
    backdrop-filter: none;
    background: rgba(248, 249, 251, 0.97);
  }
  #mobile-menu {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(248, 249, 251, 0.92);
  }
  .rsvp-input {
    backdrop-filter: none;
  }
  .lb-btn {
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.16);
  }
  /* marquee không còn phản ứng theo tốc độ cuộn → bỏ layer thừa */
  .marquee-track {
    will-change: auto;
  }
  /* Ẩn thanh cuộn (scrollbar) trên mobile */
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  html,
  body {
    -ms-overflow-style: none !important; /* IE and Edge */
    scrollbar-width: none !important; /* Firefox */
  }
  /* Giảm padding cho thẻ QR trên mobile */
  .qr-card {
    padding: 0.75rem;
    border-radius: 0.75rem;
  }
}

/* ── Giảm chuyển động theo tuỳ chọn hệ thống ── */
@media (prefers-reduced-motion: reduce) {
  .reveal-img {
    clip-path: none !important;
  }
  .story-dot {
    transform: scale(1) !important;
  }
  .g-slide {
    transition: none !important;
  }
}

/* ── Phong bì thư mở thiệp 3D ── */
.perspective-1000 {
  perspective: 1000px;
}
.envelope {
  /* KHÔNG dùng transform-style: preserve-3d ở đây.
     Trong ngữ cảnh preserve-3d, trình duyệt xếp lớp con theo ĐỘ SÂU 3D chứ
     không theo z-index. Nắp thư quay rotateX dương → điểm dưới bật về phía
     người xem (z > 0 với mọi góc 0–180°), nên dù đã hạ z-index xuống 5 nó vẫn
     đè lên lá thư. Bỏ preserve-3d thì z-index có hiệu lực trở lại, mà hiệu ứng
     lật vẫn có chiều sâu vì `perspective` của .perspective-1000 luôn áp cho
     phần tử con — preserve-3d chỉ cần khi phần tử con lại có con 3D lồng nhau. */
  transform-style: flat;
  will-change: transform;
}
#envelope-flap {
  transform-origin: top;
  backface-visibility: visible;
  will-change: transform;
}
#envelope-card {
  will-change: transform;
}
.wax-seal {
  background: radial-gradient(circle, #ac3e31 0%, #8f2f24 70%, #6b2017 100%);
  box-shadow:
    0 6px 15px rgba(172, 62, 49, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  border: 2px solid #7c2a20;
}
.wax-seal::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

/* ── Hiệu ứng gõ từng dấu chấm tuần tự: . -> .. -> ... ── */
@keyframes dotStep1 {
  0%,
  12% {
    opacity: 0;
  }
  15%,
  82% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
  }
}
@keyframes dotStep2 {
  0%,
  32% {
    opacity: 0;
  }
  35%,
  82% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
  }
}
@keyframes dotStep3 {
  0%,
  52% {
    opacity: 0;
  }
  55%,
  82% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
  }
}

.dot-step {
  display: inline-block;
  opacity: 0;
  width: 0.25em;
  text-align: center;
}
.dot-active .dot-1 {
  animation: dotStep1 2.2s infinite ease-in-out;
}
.dot-active .dot-2 {
  animation: dotStep2 2.2s infinite ease-in-out;
}
.dot-active .dot-3 {
  animation: dotStep3 2.2s infinite ease-in-out;
}

/* ── Hamburger Menu Button Animation ── */
.hamburger-inner {
  transition:
    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.3s ease,
    background-color 0.3s ease;
}
#menu-btn.open .hamburger-inner:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  background-color: #386fa4;
}
#menu-btn.open .hamburger-inner:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}
#menu-btn.open .hamburger-inner:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  background-color: #386fa4;
}

/* ── Mobile menu link interactivity ── */
.mob-link {
  transition:
    color 0.3s ease,
    padding-left 0.3s ease;
}
.mob-link:hover,
.mob-link:active {
  color: #386fa4 !important;
  padding-left: 8px;
}

/* ── Co giãn nội dung Hero theo chiều cao màn hình ── */
.hero-scale-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  transform-origin: center center;
}

@media (max-width: 767px) and (max-height: 580px) {
  .hero-scale-wrapper {
    transform: scale(0.9);
  }
}

@media (min-width: 768px) and (max-height: 900px) {
  .hero-scale-wrapper {
    transform: scale(0.92);
  }
}

@media (min-width: 768px) and (max-height: 800px) {
  .hero-scale-wrapper {
    transform: scale(0.84);
  }
}

@media (min-width: 768px) and (max-height: 720px) {
  .hero-scale-wrapper {
    transform: scale(0.76);
  }
}

@media (min-width: 768px) and (max-height: 650px) {
  .hero-scale-wrapper {
    transform: scale(0.68);
  }
}