/* ==========================================================================
   THIỆP CHÚC MỪNG NGÀY PHỤ NỮ VIỆT NAM 20/10 - STYLE.CSS
   Thiết kế cao cấp: Slate Blue Gradient, Quầng sáng ấm áp, Hoa sứ SVG hồng phấn,
   Cánh hoa rơi lả tả, Typography 3D.
   TỐI ƯU TOÀN DIỆN CHO MOBILE, TABLET, DESKTOP & LANDSCAPE.
   ========================================================================== */

/* --- 1. BIẾN TOKENS & THIẾT LẬP CHUNG --- */
:root {
  /* Bảng màu chính */
  --bg-slate-dark: #1f2f3a;
  --bg-slate-light: #2c3e48;
  --bg-slate-deep: #142028;
  --glow-warm-gold: rgba(255, 190, 90, 0.28);
  --glow-coral: rgba(255, 122, 138, 0.22);

  /* Màu chữ & điểm nhấn */
  --color-cream: #fff5ea;
  --color-coral: #ff7a8a;
  --color-coral-light: #ffa4b1;
  --color-coral-dark: #e8596f;
  --color-gold: #ffbe3b;
  --color-gold-light: #fff275;
  --color-pink-soft: #ffb6c1;
  --color-pink-petal: #ffd5dc;
  --color-white: #ffffff;
  --color-text-dim: #c5d3dc;

  /* Phông chữ Google Fonts */
  --font-cursive: 'Dancing Script', cursive;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Hiệu ứng chuyển động */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Easing mượt cho mọi hiệu ứng xuất hiện */
  --rise: 16px;                                /* Quãng trượt lên khi xuất hiện */
  --transition-fast: 0.25s ease;
  --transition-normal: 0.4s ease;
}

/* --- HIỆU ỨNG XUẤT HIỆN DÙNG CHUNG ---
   Chỉ animate opacity + transform (chạy trên GPU, không gây vẽ lại / tính lại bố cục).
   Keyframes chỉ khai báo "from": trạng thái cuối lấy từ style gốc của phần tử.
   Luôn dùng fill-mode both để phần tử giữ trạng thái ẩn trong lúc chờ delay -> không nháy. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(var(--rise)); }
}

@keyframes date-in {
  from { opacity: 0; transform: scale(0.92); }
}

@keyframes flower-in {
  from { opacity: 0; transform: scale(0.88); }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes envelope-shrink {
  to { transform: scale(0.94); }
}

/* --- 2. RESET & BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--bg-slate-dark);
  color: var(--color-cream);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
  /* Hỗ trợ vùng an toàn Safe Area cho tai thỏ và thanh home của iPhone */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Nền gradient cố định: dùng lớp fixed riêng thay cho background-attachment: fixed
   (cái đó buộc trình duyệt vẽ lại cả trang mỗi lần cuộn trên điện thoại).
   Cao 100lvh để không co giãn khi thanh địa chỉ ẩn/hiện. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg-slate-dark);
  background-image:
    radial-gradient(ellipse 65% 55% at 50% 38%, var(--glow-warm-gold) 0%, var(--glow-coral) 40%, rgba(31, 47, 58, 0.95) 75%, var(--bg-slate-deep) 100%),
    linear-gradient(145deg, var(--bg-slate-dark) 0%, var(--bg-slate-light) 100%);
}

/* Chặn zoom khi chạm đúp và tối ưu phản hồi trên mobile */
button, input, a, .polaroid-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* --- 3. LỚP CANVAS & ÁNH SÁNG NỀN --- */
.canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 100lvh: kích thước không đổi khi thanh địa chỉ điện thoại ẩn/hiện -> không phải cấp phát lại canvas */
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
  /* Hiệu ứng hạt chỉ hiện (mờ dần vào) sau khi chữ chính đã xuất hiện xong */
  opacity: 0;
}

body.effects-on .canvas-container {
  opacity: 1;
  animation: fade-in 2s ease-out both;
}

.canvas-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#canvas-sparkles { z-index: 1; }
#canvas-petals { z-index: 2; }
#canvas-interactive { z-index: 3; }

/* Quầng sáng vàng cam ấm ở trung tâm */
.warm-glow-center {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(85vw, 680px);
  height: min(75vw, 600px);
  /* Gradient nhiều nấc mờ dần tới mép thay cho filter: blur (blur rất tốn công vẽ trên điện thoại) */
  background: radial-gradient(closest-side, rgba(255, 180, 80, 0.2) 0%, rgba(255, 150, 105, 0.14) 30%, rgba(255, 110, 130, 0.07) 60%, rgba(255, 110, 130, 0.02) 85%, transparent 100%);
  pointer-events: none;
  z-index: 2;
  animation: pulse-glow 7s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* Lớp Vignette tối mờ bốn góc */
.vignette-overlay {
  position: fixed;
  inset: 0;
  box-shadow: inset 0 0 100px rgba(10, 16, 22, 0.7), inset 0 0 200px rgba(10, 16, 22, 0.5);
  pointer-events: none;
  z-index: 4;
}

/* --- 4. HOA SỨ GÓC (CORNER FLOWERS) & WRAPPER CHỐNG TRÀN --- */
.corner-flowers-wrapper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  /* Nằm dưới nội dung chính (z-index 5) để hoa không đè lên chữ */
  z-index: 4;
}

.corner-flower {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

/* Hoa nở nhẹ (fade + phóng 0.88 -> 1), xong mới đung đưa.
   Cuối flower-in và đầu sway đều là transform gốc nên nối liền, không giật. */
body.card-opened .corner-flower {
  opacity: var(--flower-opacity, 1);
}

/* Vị trí Desktop */
.corner-top-right {
  top: -15px;
  right: -15px;
  width: clamp(200px, 24vw, 360px);
  height: clamp(200px, 24vw, 360px);
  transform-origin: top right;
}

body.card-opened .corner-top-right {
  animation: flower-in 1.2s var(--ease-out) 0.2s both, sway-top-right 6s ease-in-out 1.4s infinite alternate;
}

.corner-bottom-left {
  bottom: -15px;
  left: -15px;
  width: clamp(200px, 24vw, 360px);
  height: clamp(200px, 24vw, 360px);
  transform-origin: bottom left;
}

body.card-opened .corner-bottom-left {
  animation: flower-in 1.2s var(--ease-out) 0.4s both, sway-bottom-left 6.5s ease-in-out 1.6s infinite alternate;
}

.corner-mid-left {
  top: 38%;
  left: -20px;
  width: clamp(120px, 15vw, 220px);
  height: clamp(160px, 20vw, 320px);
  transform-origin: left center;
}

body.card-opened .corner-mid-left {
  animation: flower-in 1.2s var(--ease-out) 0.6s both, sway-mid-left 5.5s ease-in-out 1.8s infinite alternate;
}

@keyframes sway-top-right {
  0% { transform: rotate(0deg) translate(0, 0); }
  100% { transform: rotate(2.5deg) translate(-4px, 4px); }
}

@keyframes sway-bottom-left {
  0% { transform: rotate(0deg) translate(0, 0); }
  100% { transform: rotate(-2.5deg) translate(4px, -4px); }
}

@keyframes sway-mid-left {
  0% { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(3deg) translateY(6px); }
}

/* --- 5. MÀN HÌNH MỞ ĐẦU: PHONG BAO THIỆP (ENVELOPE OVERLAY) --- */
.envelope-overlay {
  position: fixed;
  inset: 0;
  /* Nền gần như đặc nên không cần backdrop-filter (rất nặng khi lớp phủ toàn màn hình mờ dần) */
  background: radial-gradient(circle at center, rgb(35, 52, 65) 0%, rgb(18, 28, 35) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* Chuyển cảnh: phong bì mờ dần + thu nhỏ nhẹ, cùng lúc thiệp chính hiện lên bên dưới (crossfade) */
.envelope-overlay.hide-envelope {
  animation: fade-out 0.8s var(--ease-out) both;
  pointer-events: none;
}

.envelope-card-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(85vw, 380px);
  position: relative;
  text-align: center;
  /* Ẩn cho đến khi font sẵn sàng (.envelope-overlay.is-ready) -> không thấy chữ đổi font */
  opacity: 0;
}

.envelope-overlay.is-ready .envelope-card-box {
  opacity: 1;
  animation: rise-in 1s var(--ease-out) both;
}

.envelope-overlay.hide-envelope .envelope-card-box {
  animation: envelope-shrink 0.8s var(--ease-out) both;
}

.envelope-glow-aura {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 290px);
  height: 230px;
  background: radial-gradient(closest-side, rgba(255, 122, 138, 0.4) 0%, rgba(255, 160, 110, 0.26) 35%, rgba(255, 190, 90, 0.1) 65%, rgba(255, 190, 90, 0.03) 85%, transparent 100%);
  border-radius: 50%;
  animation: pulse-glow 3s infinite alternate;
}

/* Phong bì: 4 lớp màu đặc chồng lên nhau trong cùng một khung.
   Mặt trước che toàn bộ trừ khe chữ V phía trên, nắp phủ khít đúng khe đó
   -> khi đóng, tấm thiệp bị che kín hoàn toàn. */
.envelope-wrapper {
  --env-w: min(78vw, 320px);
  --env-h: calc(var(--env-w) * 0.6);
  --env-side: 22%;   /* Chiều cao mép bên của mặt trước / nắp */
  --env-tip: 62%;    /* Đỉnh nhọn của nắp (tính theo chiều cao phong bì) */
  position: relative;
  width: var(--env-w);
  height: var(--env-h);
  /* Chừa khoảng trống phía trên cho nắp lật lên và thiệp trượt ra */
  margin-top: calc(var(--env-h) * 0.55);
  margin-bottom: clamp(16px, 4vh, 26px);
  perspective: 900px;
}

.envelope-back,
.envelope-front,
.envelope-flap {
  position: absolute;
  left: 0;
  width: 100%;
}

.envelope-back {
  z-index: 1;
  top: 0;
  height: 100%;
  background: #16222a;
  border-radius: 10px;
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.5); /* Bóng tĩnh, rẻ hơn filter: drop-shadow */
}

.envelope-front {
  z-index: 3;
  top: 0;
  height: 100%;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, transparent 45%),
    linear-gradient(180deg, #2a3d4a 0%, #1f2f39 100%);
  border-radius: 0 0 10px 10px;
  clip-path: polygon(0 var(--env-side), 50% 60%, 100% var(--env-side), 100% 100%, 0 100%);
}

.letter-preview {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 6%;
  width: 88%;
  height: calc(100% - 16px);
  background: #fffdf9;
  border-radius: 6px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 8px 0;
  color: #333;
}

.letter-preview-heart {
  font-size: clamp(1.4rem, 4.5vw, 1.8rem);
  animation: heart-beat 1.8s infinite;
}

.letter-preview-text {
  font-size: clamp(0.75rem, 2.8vw, 0.85rem);
  font-weight: 600;
  color: var(--color-coral-dark);
  letter-spacing: 0.5px;
  margin-top: 4px;
  text-align: center;
}

@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

.envelope-seal {
  --seal-size: clamp(56px, 15vw, 68px);
  position: absolute;
  /* Đặt tâm con dấu ngay đỉnh nhọn của nắp */
  top: calc(var(--env-tip) - var(--seal-size) / 2);
  left: calc(50% - var(--seal-size) / 2);
  width: var(--seal-size);
  height: var(--seal-size);
  background: radial-gradient(circle, #ffbe3b 0%, #e8596f 65%, #c8324f 100%);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(232, 89, 111, 0.65), 0 0 0 3px rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: transform 0.3s ease, opacity 0.25s ease;
}

.seal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  color: #fff;
}

.seal-icon { font-size: 0.85rem; }
.seal-text { font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; }

.envelope-flap {
  z-index: 4;
  top: 0;
  height: var(--env-tip);
  background: linear-gradient(180deg, #4a6478 0%, #3a5163 100%);
  border-radius: 10px 10px 0 0;
  /* Mép bên thẳng xuống bằng mặt trước rồi vuốt nhọn về giữa -> phủ kín khe chữ V */
  clip-path: polygon(0 0, 100% 0, 100% calc(var(--env-side) / 0.62), 50% 100%, 0 calc(var(--env-side) / 0.62));
  transform-origin: top center;
  /* Đổi lớp ra sau thiệp đúng lúc nắp dựng đứng (nửa thời gian lật) */
  transition: transform 0.45s ease-in-out, z-index 0s linear 0.22s;
}

/* --- Khi mở --- */
.envelope-wrapper.open-anim .envelope-flap {
  transform: rotateX(180deg);
  z-index: 0;
}

.envelope-wrapper.open-anim .envelope-seal {
  opacity: 0;
  transform: scale(0.6);
}

/* Thiệp trượt lên (vẫn sau mặt trước) cho đến khi ra khỏi phong bì hẳn,
   lúc đó mới chuyển lên lớp trên cùng rồi hạ nhẹ xuống -> không bị "nhảy" lớp */
.envelope-wrapper.open-anim .letter-preview {
  animation: letter-rise 0.9s cubic-bezier(0.33, 1, 0.68, 1) 0.3s both;
}

@keyframes letter-rise {
  0%   { transform: translateY(0);    z-index: 2; }
  65%  { transform: translateY(-88%); z-index: 2; }
  66%  { transform: translateY(-88%); z-index: 6; }
  100% { transform: translateY(-62%); z-index: 6; }
}

.envelope-caption {
  font-size: clamp(0.92rem, 3.5vw, 1.05rem);
  color: var(--color-cream);
  margin-bottom: clamp(14px, 3vh, 20px);
  opacity: 0.95;
  font-weight: 500;
  text-wrap: balance; /* Chia đều 2 dòng, tránh rớt 1 từ lẻ xuống dòng */
}

.btn-open-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #ff7a8a 0%, #ff5277 50%, #f77f6b 100%);
  color: #ffffff;
  border: none;
  border-radius: 50px;
  min-height: 48px;
  padding: 14px clamp(18px, 6vw, 34px);
  font-size: clamp(0.95rem, 4.3vw, 1.12rem);
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(255, 82, 119, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.25);
  transition: all 0.35s var(--ease-spring);
  position: relative;
  overflow: hidden;
  width: auto;
  min-width: min(100%, 300px);
  max-width: 100%;
}

.btn-open-card .btn-icon,
.btn-open-card .btn-sparkle {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Màn hình rất hẹp: bỏ icon trang trí bên phải để chữ đủ chỗ trên 1 dòng */
@media (max-width: 379px) {
  .btn-open-card .btn-sparkle { display: none; }
}

.btn-open-card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 32px rgba(255, 82, 119, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.btn-open-card:active {
  transform: translateY(1px) scale(0.98);
}

.btn-sparkle {
  animation: spin-sparkle 3s linear infinite;
}

@keyframes spin-sparkle {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

.envelope-subnote {
  font-size: clamp(0.76rem, 2.6vw, 0.85rem);
  color: var(--color-text-dim);
  margin-top: clamp(10px, 2vh, 16px);
  text-wrap: balance;
}

/* --- 6. PHẦN THIỆP CHÍNH (HERO CARD) --- */
/* Thiệp chính chưa dựng cho đến khi phong bì đã hiện (.main-content.main-ready):
   font và ảnh của thiệp không tranh băng thông với font của phong bì trên mạng chậm.
   Sau đó thiệp được dựng sẵn ngầm bên dưới phong bì nên lúc mở không phải tính bố cục. */
.main-content {
  display: none;
}

.main-content.main-ready {
  display: block;
}

.main-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 28px);
}

/* Khung Hero tối thiểu 1 màn hình điện thoại (100svh với fallback 100vh).
   Dùng min-height thay vì khóa cứng chiều cao để máy màn thấp không bị cắt mất chữ/nút. */
.hero-card-section {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow-x: clip;
}

.hero-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

/* Hoạt ảnh xuất hiện tuần tự: mỗi phần 1s, nối gối đầu cách nhau 0.18s.
   Ẩn sẵn từ CSS ban đầu (opacity: 0) để không bao giờ hiện lên rồi mới ẩn. */
.animate-item {
  opacity: 0;
}

body.card-opened .animate-item {
  opacity: 1;
  animation: rise-in 1s var(--ease-out) var(--d, 0s) both;
}

body.card-opened #greeting-badge     { --d: 0.05s; }
body.card-opened #title-chucmung     { --d: 0.23s; }
body.card-opened #title-ngayphunu    { --d: 0.41s; }
body.card-opened #title-date-wrapper { --d: 0.59s; animation-name: date-in; animation-duration: 1.1s; }
body.card-opened .divider-ornament   { --d: 0.77s; }
body.card-opened .wish-container     { --d: 0.95s; }
body.card-opened .tags-container     { --d: 1.13s; }
body.card-opened .sender-container   { --d: 1.31s; }
body.card-opened .hero-actions       { --d: 1.49s; }

/* Nhãn gửi tặng cá nhân */
.greeting-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 182, 193, 0.35);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: clamp(0.78rem, 2.5vw, 0.96rem);
  color: var(--color-cream);
  margin-bottom: clamp(2px, 0.8vh, 12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  line-height: 1.3;
}

.greeting-badge strong {
  color: #ffe082;
  font-weight: 700;
}

/* 1. "Chúc Mừng" - Cỡ chữ clamp() theo đúng yêu cầu */
.title-chucmung {
  font-family: var(--font-cursive);
  font-size: clamp(2.2rem, 11vw, 5rem);
  font-weight: 700;
  color: var(--color-cream);
  line-height: 1.05;
  margin-bottom: 0;
  text-shadow: 0 2px 14px rgba(255, 245, 234, 0.4), 0 0 25px rgba(255, 190, 90, 0.3);
  position: relative;
  display: inline-block;
}

.cursive-text {
  background: linear-gradient(120deg, #ffffff 0%, #fff4e0 40%, #ffd494 60%, #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ánh kim chạy trên chữ buộc vẽ lại mỗi khung hình -> chỉ bắt đầu sau khi chuỗi xuất hiện xong */
body.card-opened .cursive-text {
  animation: shine-text 5s linear 2.8s infinite;
}

@keyframes shine-text {
  to { background-position: 200% center; }
}

/* 2. "NGÀY PHỤ NỮ VIỆT NAM" - Cỡ chữ clamp() theo yêu cầu, ngắt dòng thông minh */
.title-ngayphunu {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 4.8vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: clamp(1.5px, 1.2vw, 8px);
  color: var(--color-coral);
  line-height: 1.25;
  margin: clamp(2px, 0.6vh, 10px) 0;
  text-shadow: 0 2px 10px rgba(255, 122, 138, 0.4), 0 0 20px rgba(232, 89, 111, 0.25);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 8px;
  row-gap: 2px;
}

.title-word {
  display: inline-block;
  white-space: nowrap;
}

/* 3. "20-10" - Cỡ chữ clamp(4rem, 24vw, 10rem) */
.title-date-wrapper {
  position: relative;
  display: inline-block;
  margin: clamp(2px, 1vh, 16px) 0;
}

.title-date {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 24vw, 10rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 0.92;
  letter-spacing: clamp(-2px, -0.4vw, 4px);
  user-select: none;
  text-shadow: 
    0 1px 0 #ffd180,
    0 2px 0 #ffbe3b,
    0 3px 0 #fca07a,
    0 4px 0 #f77f6b,
    0 5px 0 #e8596f,
    0 7px 0 #c8324f,
    0 9px 1px rgba(0, 0, 0, 0.25),
    0 14px 24px rgba(0, 0, 0, 0.45),
    0 0 35px rgba(255, 190, 90, 0.45),
    0 0 60px rgba(255, 122, 138, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.card-opened .title-date {
  animation: date-float-glow 4s ease-in-out 2.8s infinite alternate;
}

@keyframes date-float-glow {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

.title-date .dash {
  margin: 0 clamp(2px, 1vw, 10px);
  color: var(--color-coral-light);
}

.date-glow-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(255, 180, 70, 0.28) 0%, rgba(255, 140, 100, 0.18) 35%, rgba(255, 110, 130, 0.07) 65%, rgba(255, 110, 130, 0.02) 85%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* Dải hoa văn phân cách */
.divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(85%, 380px);
  margin: clamp(2px, 0.6vh, 14px) auto;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 182, 193, 0.6), transparent);
}

.divider-flower {
  color: var(--color-coral-light);
  font-size: 0.95rem;
  letter-spacing: 3px;
}

/* 4. Dòng lời chúc: clamp(0.95rem, 3.8vw, 1.25rem), max-width 90%, căn giữa */
.wish-container {
  max-width: 90%;
  margin: clamp(2px, 0.8vh, 16px) auto;
  padding: 0 4px;
}

.wish-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 3.8vw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-cream);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.wish-text span {
  color: #ffe082;
  font-weight: 600;
  border-bottom: 1px dashed rgba(255, 224, 130, 0.6);
  padding-bottom: 1px;
}

/* Các tag chúc mừng nhỏ */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: clamp(2px, 0.6vh, 12px) auto;
  max-width: 92%;
}

.tag-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fce4ec;
  padding: 5px 12px;
  border-radius: 30px;
  font-size: clamp(0.72rem, 2.2vw, 0.84rem);
  font-weight: 500;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.tag-pill:hover {
  background: rgba(255, 122, 138, 0.2);
  border-color: rgba(255, 122, 138, 0.4);
}

/* Chữ ký người gửi */
.sender-container {
  margin: clamp(2px, 0.6vh, 12px) 0;
}

.sender-text {
  font-size: clamp(0.78rem, 2.6vw, 0.98rem);
  color: var(--color-text-dim);
  font-style: italic;
}

.sender-text span {
  color: var(--color-coral-light);
  font-weight: 600;
  font-style: normal;
}

/* Nút hành động ở Hero (Đảm bảo tối thiểu 44px) */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(2px, 0.8vh, 14px);
}

.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 50px;
  font-size: clamp(0.85rem, 3vw, 0.95rem);
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal) var(--ease-spring);
}

.btn-share {
  /* Nền tối gần đặc thay cho backdrop-filter: hoa trang trí phía sau không lộ qua chữ */
  background: rgba(52, 72, 86, 0.92);
  border: 1px solid rgba(255, 182, 193, 0.4);
  color: #fff;
}

.btn-share:hover {
  background: rgba(255, 122, 138, 0.35);
  border-color: rgba(255, 122, 138, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 122, 138, 0.3);
}

.btn-scroll-gallery {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-cream);
}

.btn-scroll-gallery:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  transform: translateY(-2px);
}

.scroll-arrow {
  display: inline-block;
  animation: bounce-arrow 1.6s infinite;
}

@keyframes bounce-arrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* --- 7. KHU VỰC ẢNH: KHOẢNH KHẮC ĐẸP (POLAROID GALLERY) --- */
.gallery-section {
  padding: clamp(36px, 6vw, 70px) 0 30px;
  position: relative;
}

.gallery-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(20px, 4vw, 40px);
  padding: 0 8px;
}

.gallery-tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-coral);
  margin-bottom: 6px;
}

.gallery-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5vw, 2.7rem);
  font-weight: 700;
  color: var(--color-cream);
  margin-bottom: 8px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.gallery-subtitle {
  font-size: clamp(0.88rem, 2.5vw, 1.02rem);
  color: var(--color-text-dim);
  line-height: 1.5;
}

/* Lưới ảnh Polaroid - Mặc định Desktop */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3.5vw, 32px);
  padding: 8px;
  margin-bottom: 20px;
}

/* Thẻ Polaroid */
.polaroid-card {
  background: #ffffff;
  padding: 12px 12px 18px;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  position: relative;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring);
  display: flex;
  flex-direction: column;
  /* Độ nghiêng để trong biến --tilt để hiệu ứng trượt lên giữ nguyên độ nghiêng */
  transform: rotate(var(--tilt, 0deg));
  /* Ẩn cho đến khi cuộn tới (IntersectionObserver thêm class .in-view) */
  opacity: 0;
}

.polaroid-card.in-view {
  opacity: 1;
  animation: card-rise 1s var(--ease-out) var(--d, 0s) both;
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(var(--rise)) rotate(var(--tilt, 0deg)); }
}

/* Băng dính Washi Tape trang trí */
.polaroid-card::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 20px;
  background: rgba(255, 182, 193, 0.65);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  border-left: 2px dashed rgba(255, 255, 255, 0.6);
  border-right: 2px dashed rgba(255, 255, 255, 0.6);
  z-index: 2;
}

/* Độ nghiêng Desktop */
.photo-grid .polaroid-card:nth-child(4n+1) { --tilt: -2.5deg; }
.photo-grid .polaroid-card:nth-child(4n+2) { --tilt: 2.2deg; }
.photo-grid .polaroid-card:nth-child(4n+3) { --tilt: -1.6deg; }
.photo-grid .polaroid-card:nth-child(4n+4) { --tilt: 2.6deg; }

/* Hover trên thiết bị có chuột */
@media (hover: hover) {
  .polaroid-card:hover,
  .polaroid-card:focus-visible {
    transform: translateY(-8px) scale(1.04) rotate(0deg) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 182, 193, 0.35);
    z-index: 10;
    outline: none;
  }
  .polaroid-card:hover .polaroid-img {
    transform: scale(1.05);
  }
}

/* Thiết bị cảm ứng không có hover -> Dùng :active khi bấm */
@media (hover: none) {
  .polaroid-card:active {
    transform: scale(0.97) rotate(0deg) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
  }
}

.polaroid-img-wrapper {
  position: relative;
  width: 100%;
  /* Khung giữ chỗ vuông có nền sẵn -> trang không nhảy bố cục khi ảnh tải xong */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #f6eef1 0%, #eef2f5 100%);
  border-radius: 2px;
}

.polaroid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ảnh dọc trong khung vuông: căn lệch lên trên để không mất khuôn mặt */
  object-position: 50% 30%;
  display: block;
  transition: transform 0.5s var(--ease-smooth);
  opacity: 0;
}

.polaroid-img.is-loaded {
  opacity: 1;
  animation: fade-in 0.9s var(--ease-out) both;
}

.polaroid-caption {
  font-family: var(--font-cursive);
  font-size: clamp(1.2rem, 3.5vw, 1.45rem);
  font-weight: 700;
  color: #3b4b56;
  text-align: center;
  margin-top: 10px;
  line-height: 1.3;
  min-height: 1.5em;
}

/* Placeholder khi chưa có ảnh */
.polaroid-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fce4ec 0%, #fff8e1 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

.placeholder-icon {
  font-size: 2.8rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

.placeholder-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #8c5364;
  line-height: 1.4;
}

.gallery-tip {
  text-align: center;
  color: var(--color-text-dim);
  font-size: 0.84rem;
  margin-top: 10px;
  padding: 0 10px;
}

/* --- 8. MODAL LIGHTBOX XEM ẢNH PHÓNG TO --- */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.lightbox-modal.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 22, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.lightbox-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(92vw, 850px);
  max-height: 85vh;
  max-height: 85svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-media-wrapper {
  background: #ffffff;
  padding: 12px 12px 18px;
  border-radius: 8px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-height: 80vh;
  max-height: 80svh;
  position: relative;
  box-sizing: border-box;
}

.lightbox-img {
  max-width: 100%;
  max-height: min(60vh, 60svh, 550px);
  object-fit: contain;
  border-radius: 4px;
}

.lightbox-caption {
  font-family: var(--font-cursive);
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  color: #2b3a42;
  margin-top: 10px;
  text-align: center;
  line-height: 1.25;
}

.lightbox-counter {
  font-size: 0.8rem;
  color: #7b8b94;
  margin-top: 2px;
}

/* Các nút điều khiển Lightbox (Tối thiểu 44x44px) */
.lightbox-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  min-width: 44px;
  min-height: 44px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
  touch-action: manipulation;
}

.lightbox-btn:hover {
  background: var(--color-coral);
  border-color: var(--color-coral);
  transform: scale(1.08);
}

.lightbox-close {
  position: absolute;
  top: -24px;
  right: -24px;
  z-index: 10;
  font-size: 1.6rem;
  line-height: 1;
}

.lightbox-prev {
  position: absolute;
  left: -65px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  position: absolute;
  right: -65px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .lightbox-close {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.4);
    position: fixed;
  }
  .lightbox-prev {
    left: max(8px, env(safe-area-inset-left));
    background: rgba(0, 0, 0, 0.6);
  }
  .lightbox-next {
    right: max(8px, env(safe-area-inset-right));
    background: rgba(0, 0, 0, 0.6);
  }
}

/* --- 9. MODAL TẠO LINK CHIA SẺ CÁ NHÂN HÓA --- */
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.share-modal.active {
  opacity: 1;
  visibility: visible;
}

.share-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 22, 0.85);
  backdrop-filter: blur(10px);
}

.share-modal-box {
  position: relative;
  z-index: 2;
  background: linear-gradient(145deg, #2b3e4a 0%, #1c2b34 100%);
  border: 1px solid rgba(255, 182, 193, 0.3);
  border-radius: 16px;
  padding: clamp(20px, 4.5vw, 32px);
  width: min(100%, 460px);
  max-height: 88vh;
  max-height: 88svh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 25px rgba(255, 122, 138, 0.2);
}

.share-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--color-text-dim);
  font-size: 1.4rem;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 50%;
  transition: color var(--transition-fast);
}

.share-modal-close:hover { color: #fff; }

.share-modal-header {
  text-align: center;
  margin-bottom: 18px;
}

.share-modal-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 6px;
}

.share-modal-header h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-cream);
  margin-bottom: 4px;
}

.share-modal-header p {
  font-size: 0.85rem;
  color: var(--color-text-dim);
}

.form-group {
  margin-bottom: 14px;
  text-align: left;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-cream);
  margin-bottom: 5px;
}

.form-group input[type="text"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  font-size: 0.95rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.form-group input[type="text"]:focus {
  border-color: var(--color-coral);
  background: rgba(255, 255, 255, 0.12);
}

.share-url-container {
  display: flex;
  gap: 8px;
}

.share-url-container input {
  min-width: 0;
  font-size: 0.82rem !important;
  color: #ffd5dc !important;
}

.btn-copy {
  background: linear-gradient(135deg, var(--color-coral) 0%, #ff5277 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  min-height: 44px;
  padding: 0 16px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transition-fast);
}

.btn-copy:hover { transform: scale(1.03); }

.copy-toast {
  text-align: center;
  font-size: 0.82rem;
  color: #81c784;
  min-height: 1.4em;
  margin-top: 8px;
  font-weight: 600;
}

/* --- 10. NÚT ĐIỀU KHIỂN NHẠC NỀN (FLOATING BOTTOM-RIGHT) --- */
.music-control {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  right: max(18px, env(safe-area-inset-right, 18px));
  z-index: 100;
}

.btn-music-toggle {
  min-width: 46px;
  min-height: 46px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(35, 52, 65, 0.92);
  border: 1.5px solid rgba(255, 182, 193, 0.5);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 122, 138, 0.35);
  transition: all 0.3s var(--ease-spring);
  position: relative;
  touch-action: manipulation;
}

.btn-music-toggle:hover {
  transform: scale(1.08);
  border-color: var(--color-coral);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 122, 138, 0.6);
}

.music-icon {
  font-size: 1.3rem;
  z-index: 2;
}

.music-disc-waves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.music-playing .music-disc-waves { opacity: 1; }
.music-playing .music-icon { animation: rotate-disc 6s linear infinite; }

@keyframes rotate-disc {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- 11. FOOTER --- */
.page-footer {
  text-align: center;
  padding: 30px 16px max(24px, env(safe-area-inset-bottom, 24px));
  color: var(--color-text-dim);
  font-size: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 30px;
}

.footer-love {
  font-size: 0.8rem;
  margin-top: 4px;
  color: rgba(255, 182, 193, 0.85);
}


/* ==========================================================================
   12. TỐI ƯU CHI TIẾT THEO CÁC MÀN HÌNH ĐIỆN THOẠI & TABLET
   ========================================================================== */

/* --- TABLET (768px - 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* --- MOBILE CHUNG (< 768px) --- */
@media (max-width: 768px) {
  /* Thu nhỏ hoa góc còn 35-42% chiều rộng màn hình, đẩy sát mép, giảm độ đậm */
  .corner-flower {
    --flower-opacity: 0.82;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
  }

  .corner-top-right {
    width: clamp(125px, 38vw, 180px);
    height: clamp(125px, 38vw, 180px);
    top: -8px;
    right: -8px;
  }

  .corner-bottom-left {
    width: clamp(125px, 38vw, 180px);
    height: clamp(125px, 38vw, 180px);
    bottom: -8px;
    left: -8px;
  }

  .corner-mid-left {
    width: clamp(80px, 20vw, 120px);
    height: clamp(110px, 25vw, 160px);
    left: -15px;
    top: 45%;
    --flower-opacity: 0.65;
  }

  /* Grid ảnh: 2 cột nếu rộng >= 400px, 1 cột nếu < 400px */
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 4px;
  }

  /* Giảm độ nghiêng polaroid trên mobile (rotate tối đa 1.8deg) để không tràn mép */
  .photo-grid .polaroid-card:nth-child(4n+1) { --tilt: -1.4deg; }
  .photo-grid .polaroid-card:nth-child(4n+2) { --tilt: 1.4deg; }
  .photo-grid .polaroid-card:nth-child(4n+3) { --tilt: -1deg; }
  .photo-grid .polaroid-card:nth-child(4n+4) { --tilt: 1.2deg; }
  
  .polaroid-card {
    padding: 10px 10px 14px;
  }

  .polaroid-caption {
    font-size: 1.15rem;
    margin-top: 8px;
  }

  .music-control {
    bottom: max(14px, env(safe-area-inset-bottom, 14px));
    right: max(14px, env(safe-area-inset-right, 14px));
  }

  .btn-music-toggle {
    width: 46px;
    height: 46px;
  }
}

/* --- ĐIỆN THOẠI RỘNG < 400px --- */
@media (max-width: 399px) {
  .photo-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 330px;
    margin: 0 auto 20px;
  }

  .photo-grid .polaroid-card:nth-child(n) {
    --tilt: 0deg;
  }
}

/* --- MÀN HÌNH RẤT NHỎ (< 380px, ví dụ Android 360px hoặc iPhone SE 375px) --- */
@media (max-width: 380px) {
  /* Ẩn hoa phụ bên trái, chỉ giữ hoa góc trên-phải và dưới-trái */
  .corner-mid-left {
    display: none !important;
  }

  .corner-top-right {
    width: clamp(110px, 35vw, 145px);
    height: clamp(110px, 35vw, 145px);
    --flower-opacity: 0.75;
  }

  .corner-bottom-left {
    width: clamp(110px, 35vw, 145px);
    height: clamp(110px, 35vw, 145px);
    --flower-opacity: 0.75;
  }

  /* Giảm nhẹ letter-spacing tiêu đề */
  .title-ngayphunu {
    letter-spacing: 2px;
  }

  .tag-pill {
    padding: 4px 9px;
    font-size: 0.7rem;
  }

  .btn-action {
    padding: 8px 16px;
    font-size: 0.82rem;
  }
}

/* --- 13. MÀN HÌNH XOAY NGANG (LANDSCAPE) TRÊN ĐIỆN THOẠI (< 500px HEIGHT) --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-card-section {
    padding: 4px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
  }

  .corner-flower {
    width: clamp(70px, 18vh, 110px) !important;
    height: clamp(70px, 18vh, 110px) !important;
    --flower-opacity: 0.65;
  }

  .corner-mid-left {
    display: none !important;
  }

  .greeting-badge {
    padding: 3px 12px;
    font-size: clamp(0.7rem, 3vh, 0.82rem);
    margin: 0;
  }

  .title-chucmung {
    font-size: clamp(1.4rem, 8vh, 2.2rem) !important;
    margin: 0;
    line-height: 1;
  }

  .title-ngayphunu {
    font-size: clamp(0.8rem, 4.5vh, 1.15rem) !important;
    letter-spacing: 2px !important;
    margin: 0;
  }

  .title-date-wrapper {
    margin: 0;
  }

  .title-date {
    font-size: clamp(2.4rem, 16vh, 4rem) !important;
    line-height: 0.85;
  }

  .divider-ornament {
    margin: 1px auto;
  }

  .wish-container {
    margin: 1px auto;
    max-width: 85%;
  }

  .wish-text {
    font-size: clamp(0.78rem, 3.8vh, 0.95rem) !important;
    line-height: 1.35;
  }

  /* Ẩn bớt thẻ tag trong màn hình xoay ngang để thiệp vừa vặn thanh thoát */
  .tags-container {
    display: none !important;
  }

  .sender-container {
    margin: 0;
  }

  .sender-text {
    font-size: clamp(0.72rem, 3vh, 0.85rem);
  }

  .hero-actions {
    margin-top: 2px;
    gap: 8px;
  }

  .btn-action {
    min-height: 38px;
    padding: 6px 16px;
    font-size: 0.8rem;
  }

  .music-control {
    bottom: 10px;
    right: max(10px, env(safe-area-inset-right));
  }

  .btn-music-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}

/* --- 14. PREFERS-REDUCED-MOTION: chỉ fade đơn giản, không trượt / phóng / lặp --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }

  /* Tắt các hiệu ứng lặp trang trí */
  .warm-glow-center,
  .envelope-glow-aura,
  .letter-preview-heart,
  .btn-sparkle,
  .scroll-arrow,
  .music-playing .music-icon,
  body.card-opened .cursive-text,
  body.card-opened .title-date {
    animation: none !important;
  }

  /* Xuất hiện: fade cùng lúc, không delay */
  .envelope-overlay.is-ready .envelope-card-box,
  body.card-opened .animate-item,
  body.card-opened .corner-flower,
  body.effects-on .canvas-container,
  .polaroid-card.in-view,
  .polaroid-img.is-loaded {
    animation: fade-in 0.6s ease both !important;
  }

  .envelope-overlay.hide-envelope {
    animation: fade-out 0.6s ease both !important;
  }

  .envelope-overlay.hide-envelope .envelope-card-box {
    animation: none !important;
  }

  /* Phong bì: thiệp hiện ngay ở vị trí đã mở */
  .envelope-wrapper.open-anim .letter-preview {
    animation: none !important;
    transform: translateY(-62%);
    z-index: 6;
  }
}