/* Tùy chỉnh riêng: hiển thị đẹp trên điện thoại màn hình nhỏ (iPhone 15/16...) */
@media (max-width: 640px) {
  /* Câu chuyện tình yêu: ảnh trên, chữ dưới */
  .tld-story__item,
  .tld-story__item:nth-child(even) {
    flex-direction: column;
  }
  .tld-story__img-box {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .tld-story__img {
    object-position: center 25%;
  }
  .tld-story__img-box::after {
    background: linear-gradient(180deg, transparent 80%, rgba(8, 28, 54, 0.15) 100%);
  }
  .tld-story__content {
    padding: 20px 20px 24px;
  }
}

/* Thông tin hôn lễ: nhãn NHÀ TRAI / NHÀ GÁI luôn cùng hàng, dù số dòng khác nhau */
.tld-family__grid {
  align-items: start;
}

/* Hộp mừng cưới: mỗi mã QR là một thẻ (nhãn Chú rể / Cô dâu + nút tải mã) */
.tld-qr__grid {
  max-width: 640px;
  gap: 22px;
  align-items: stretch;
}
.tld-qr__card {
  max-width: 300px;
  background: linear-gradient(180deg, #fffdf8 0%, #faf7ee 100%);
  border: 1px solid var(--tld-gold-pale);
  border-radius: 22px;
  padding: 26px 20px 28px;
  box-shadow: var(--tld-shadow-sm);
}
.tld-qr__head {
  margin-bottom: 16px;
}
.tld-qr__label {
  font-family: var(--tld-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  padding-left: 0.28em;
  color: var(--tld-navy);
}
.tld-qr__box {
  width: 100%;
  padding: 8px;
  background: #fff !important;
  border: 1px solid var(--tld-navy-line) !important;
  border-radius: 16px !important;
  margin-bottom: 22px;
}
.tld-qr__box img {
  max-width: none;
  border-radius: 10px;
}
.tld-qr__copy-btn {
  text-decoration: none;
}
@media (max-width: 640px) {
  .tld-qr__grid {
    max-width: 100%;
    gap: 10px;
    padding: 0 12px;
  }
  .tld-qr__card {
    padding: 18px 10px 20px;
    border-radius: 18px;
  }
  .tld-qr__copy-btn {
    padding: 9px 12px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}

/* ============================================================
   Hiệu ứng cánh hoa hồng rơi (chỉ hiện sau khi mở thiệp)
   ============================================================ */
.rose-petals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 99;
  display: none; /* ngoài phong bì chỉ có hiệu ứng trái tim, chưa hiện cánh hoa */
}
/* Chỉ hiện sau khi mở thiệp (template gắn class này vào <body> khi mở) */
body.suji-envelope-revealed .rose-petals {
  display: block;
}
.rose-petal {
  position: absolute;
  top: -30px;
  will-change: transform, opacity;
  animation: rosePetalFall linear infinite;
}
.rose-petal__inner {
  width: 100%;
  height: 100%;
  border-radius: 50% 0 50% 50%;
  background: linear-gradient(135deg, rgba(255,192,203,.85) 0%, rgba(244,143,177,.8) 60%, rgba(225,112,148,.65) 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transform: rotate(45deg);
  animation: rosePetalSway 4s ease-in-out infinite alternate;
}
.rose-petal--pink .rose-petal__inner  { background: linear-gradient(135deg, rgba(255,182,193,.9) 0%, rgba(240,128,158,.8) 65%, rgba(216,85,120,.7) 100%); }
.rose-petal--light .rose-petal__inner { background: linear-gradient(135deg, rgba(255,228,233,.9) 0%, rgba(255,182,193,.8) 60%, rgba(244,143,177,.65) 100%); }
.rose-petal--soft .rose-petal__inner  { background: linear-gradient(135deg, rgba(255,205,215,.85) 0%, rgba(248,160,185,.75) 70%, rgba(220,100,135,.6) 100%); }

@keyframes rosePetalFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: .45; }
  85%  { opacity: .38; }
  100% { transform: translate3d(60px, 108vh, 0) rotate(320deg); opacity: 0; }
}
@keyframes rosePetalSway {
  0%   { transform: rotate(20deg) scale(.95); }
  100% { transform: rotate(65deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .rose-petals { display: none; }
}