:root {
  --bg-dark: #02040a; /* Đen nhám chiều sâu vũ trụ xanh đen */
  --bg-base: #050814;
  --neon-gold: #ffb703;
  --neon-blue: #00f5ff;
  --neon-purple: #8338ec;
  --gold-accent: #d4af37; /* Vàng hoàng kim */
  --sapphire-glow: #00a2ff; /* Xanh sapphire phát sáng quý phái */
  --text-primary: #ffffff;
  --text-secondary: #b0c4de; /* Màu thép xanh nhạt sang trọng */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  overflow-x: hidden;
  width: 100vw;
  min-height: 100vh;
}

/* Page Containers */
.page-container {
  display: none;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.page-container.active {
  display: block;
}

/* Animations */
@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(var(--radius)) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(var(--avatar-scale, 1));
  }
  50% {
    transform: translateY(-20px) scale(var(--avatar-scale, 1));
  }
}

@keyframes running-glow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shadow-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(0, 162, 255, 0.4); }
  50% { box-shadow: 0 0 22px rgba(0, 162, 255, 0.7), 0 0 10px rgba(255, 183, 3, 0.3); }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 30px 10px rgba(0, 162, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 60px 20px rgba(0, 162, 255, 0.4);
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flyInFromLeft {
  0% {
    transform: translate(-60vw, 20vh) scale(0.1);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes starRiseAndFlicker {
  0% {
    transform: translateY(110vh) scale(0.5);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.2;
  }
  85% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-20vh) scale(1.3);
    opacity: 0;
  }
}

/* Neon Glow Blobs */
.glow-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.65;
  z-index: 0;
  pointer-events: none;
  width: 45vw;
  height: 45vw;
  animation: floatBlob 20s infinite alternate;
}

.glow-gold {
  background: var(--neon-gold);
  top: -10vw;
  left: -10vw;
}

.glow-blue {
  background: var(--neon-blue);
  bottom: 10vw;
  right: -10vw;
  animation-duration: 25s;
  animation-direction: alternate-reverse;
}

.glow-purple {
  background: var(--neon-purple);
  top: 35vw;
  left: 25vw;
  animation-duration: 22s;
}

@keyframes floatBlob {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5vw, 5vw) scale(1.1); }
}

/* Canvas Particles */
#particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 15;
  pointer-events: none;
}

/* TRANG 1: EXTERIOR - THIỆP MỜI */
.energy-orb-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  z-index: 1;
  pointer-events: none;
}

.energy-orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 223, 0, 0.18) 35%, rgba(255, 165, 0, 0.08) 65%, transparent 85%);
  filter: blur(25px);
  animation: pulse-glow-orb 5s infinite ease-in-out;
}

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

.energy-orb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 223, 0, 0.22) 50%, transparent 80%);
  filter: blur(12px);
}

.invitation-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 420px;
  z-index: 10;
  text-align: center;
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}

.invitation-wrapper.zooming {
  transform: translate(-50%, -50%) scale(35);
  opacity: 0;
  pointer-events: none;
}

.invitation-card-inner {
  position: relative;
  width: 100%;
  border-radius: 20px;
  padding: 3px;
  background: linear-gradient(135deg, #ffd700, #ffffff, #ffa500, #ffd700);
  box-shadow: 0 0 40px 10px rgba(255, 223, 0, 0.45), 0 0 75px 20px rgba(255, 165, 0, 0.25), 0 0 100px 35px rgba(255, 255, 255, 0.25), 0 15px 40px rgba(0, 0, 0, 0.9);
  animation: pulse-glow-aura 4s infinite ease-in-out;
  overflow: hidden;
  cursor: pointer;
}

@keyframes pulse-glow-aura {
  0%, 100% {
    box-shadow: 0 0 40px 10px rgba(255, 223, 0, 0.45), 0 0 75px 20px rgba(255, 165, 0, 0.25), 0 0 100px 35px rgba(255, 255, 255, 0.25), 0 15px 40px rgba(0, 0, 0, 0.9);
  }
  50% {
    box-shadow: 0 0 60px 20px rgba(255, 223, 0, 0.7), 0 0 110px 40px rgba(255, 165, 0, 0.45), 0 0 160px 60px rgba(255, 255, 255, 0.45), 0 15px 40px rgba(0, 0, 0, 0.9);
  }
}

.invitation-glow-frame {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 80%);
  z-index: 2;
  pointer-events: none;
}

.invitation-poster-img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
  z-index: 2;
  opacity: 1;
}

.click-instruction {
  font-family: 'Montserrat', sans-serif;
  color: var(--gold-accent);
  font-size: 12px;
  letter-spacing: 2px;
  margin-top: 30px;
  opacity: 0.7;
  line-height: 1.5;
  animation: fadeIn 1.5s ease-out;
}

/* TRANG 2: INTERIOR - SỔ LƯU BÚT ORBIT */
.btn-return-wrapper {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(0, 162, 255, 0.4);
  background-color: transparent;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 162, 255, 0.3);
  transition: transform 0.2s ease;
}

.btn-return-wrapper:hover {
  transform: scale(1.1);
}

.btn-return-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.45);
  display: block;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.btn-return-wrapper:hover .btn-return-img {
  opacity: 1;
}

/* Nút âm thanh cao cấp ở góc phải */
.btn-audio-control {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(5, 12, 28, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: var(--gold-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-audio-control:hover {
  transform: scale(1.1);
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.5);
}

.btn-audio-control.playing .audio-icon {
  animation: rotate-music 6s linear infinite;
}

@keyframes rotate-music {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.audio-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

/* Sóng nhạc nhấp nhô */
.music-waves {
  position: absolute;
  bottom: 2px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}

.music-waves .stroke {
  width: 2px;
  height: 2px;
  background-color: var(--gold-accent);
  border-radius: 1px;
  animation: none;
}

.btn-audio-control.playing .music-waves .stroke {
  animation: bounce-wave 1.2s ease-in-out infinite alternate;
}

.btn-audio-control.playing .music-waves .stroke:nth-child(1) { animation-delay: 0.1s; height: 8px; }
.btn-audio-control.playing .music-waves .stroke:nth-child(2) { animation-delay: 0.4s; height: 10px; }
.btn-audio-control.playing .music-waves .stroke:nth-child(3) { animation-delay: 0.2s; height: 7px; }
.btn-audio-control.playing .music-waves .stroke:nth-child(4) { animation-delay: 0.5s; height: 9px; }

@keyframes bounce-wave {
  0% { height: 2px; }
  100% { height: 12px; }
}

.main-space-container {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  background-color: #030611;
  overflow: hidden;
  position: relative;
  z-index: 20;
}

/* Sidebar Panel */
.sidebar-panel {
  width: 30%;
  min-width: 360px;
  height: 100%;
  background: rgba(8, 16, 32, 0.88);
  border-right: 1px solid rgba(0, 162, 255, 0.2);
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 10;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
}

.sidebar-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid #ffdf00;
  box-shadow: 0 0 25px rgba(0, 162, 255, 0.4);
  object-fit: contain;
  background-color: #040918;
  padding: 5px;
  margin-bottom: 16px;
  animation: logo-pulse-glow 3s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes logo-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 223, 0, 0.4), 0 0 25px rgba(0, 162, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 223, 0, 0.8), 0 0 50px rgba(0, 162, 255, 0.5);
  }
}

.sidebar-title {
  font-family: 'Playfair Display', serif;
  color: var(--gold-accent);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.sidebar-thankyou {
  color: #a8bccc;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 300;
}

.sidebar-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 162, 255, 0.3), transparent);
  margin-bottom: 24px;
}

/* Form Styles */
.inline-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
}

.input-label {
  color: #8ecae6;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.input-field {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 162, 255, 0.25);
  color: white;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: all 0.3s ease;
}

.input-field:focus {
  border-color: #00a2ff;
  box-shadow: 0 0 10px rgba(0, 162, 255, 0.3);
}

.textarea-field {
  resize: none;
}

/* Buttons */
.btn-submit-wish {
  flex-grow: 1;
  height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  background: linear-gradient(120deg, #00d2ff, #0077b6, #ffb703, #00d2ff);
  background-size: 300% 300%;
  animation: running-glow 6s ease infinite, shadow-glow 4s ease infinite alternate;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.btn-submit-wish:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 119, 182, 0.5);
}

.btn-submit-wish:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-upload-trigger {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(0, 162, 255, 0.3);
  background: rgba(0, 162, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #00a2ff;
  flex-shrink: 0;
  transition: all 0.3s;
}

.btn-upload-trigger:hover {
  background: rgba(0, 162, 255, 0.1);
  border-color: rgba(0, 162, 255, 0.6);
}

/* Image Preview */
.image-preview-container {
  position: relative;
  width: 100%;
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.image-preview {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

/* Success Box */
.success-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 25px 20px;
  background: rgba(0, 162, 255, 0.05);
  border: 1px dashed #00a2ff;
  border-radius: 12px;
  width: 100%;
  animation: fadeIn 0.5s ease-out;
}

.success-icon {
  color: #00a2ff;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 8px #00a2ff);
}

.success-text {
  color: #e0e0e0;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

.btn-send-more {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #00a2ff;
  color: #00a2ff;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-send-more:hover {
  background: rgba(0, 162, 255, 0.1);
}

/* WISHES ORBIT PANEL (RIGHT) */
.wishes-panel {
  flex-grow: 1;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.orbit-glow-bg {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,162,255,0.08) 0%, rgba(8,15,30,0) 70%);
  animation: pulse-glow 8s infinite ease-in-out;
  pointer-events: none;
}

.stars-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.star {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: starRiseAndFlicker 9s infinite linear;
}

/* Center Avatar Styles */
.center-avatar-wrapper {
  position: relative;
  z-index: 20;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  padding: 6px;
  background: linear-gradient(45deg, var(--sapphire-glow), #004080);
  box-shadow: 0 0 45px rgba(0, 162, 255, 0.45);
  animation: float 6s infinite ease-in-out;
  transform: scale(var(--avatar-scale, 1));
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #000;
  background-color: #000;
}

.center-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Floating wishes orbit */
.orbit-wishes-container {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.orbit-wish-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
}

/* Di chuột vào card sẽ tạm dừng xoay toàn bộ quỹ đạo của card đó và đưa nó lên trên cùng */
.orbit-wish-item:hover {
  animation-play-state: paused !important;
  z-index: 9999 !important;
}

.wish-glass-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: rgba(8, 16, 32, 0.75);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(212, 175, 55, 0.05);
  padding: 14px 18px;
  min-width: 180px;
  max-width: 260px;
  pointer-events: auto;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  animation: wish-float-bounce 6s ease-in-out infinite alternate;
  animation-delay: var(--float-delay, 0s);
  overflow: hidden;
}

/* Vệt sáng phản quang quét chéo mặt kính khi di chuột qua */
.wish-glass-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 30%;
  height: 200%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(30deg);
  transition: all 0.8s ease;
  pointer-events: none;
  z-index: 5;
}

.wish-glass-card:hover::after {
  left: 130%;
  transition: all 0.8s ease;
}

/* Hover: Phóng to, phát sáng vàng hoàng kim, tạm dừng lắc lư */
.wish-glass-card:hover {
  transform: scale(1.12) translateZ(30px);
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9), 0 0 25px rgba(212, 175, 55, 0.35), inset 0 0 20px rgba(0, 162, 255, 0.15);
  animation-play-state: paused;
  background: rgba(12, 24, 48, 0.85);
}

@keyframes wish-float-bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

.wish-glass-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.wish-glass-card:hover img {
  transform: scale(1.02);
}

.wish-message {
  font-size: 13px;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 8px;
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: 1.6;
}

.wish-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: auto;
}

.btn-heart-wish {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #888888;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-heart-wish:hover {
  background: rgba(255, 71, 87, 0.1);
  border-color: rgba(255, 71, 87, 0.4);
  color: #ff4757;
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(255, 71, 87, 0.3);
}

.btn-heart-wish.liked {
  color: #ff4757;
  background: rgba(255, 71, 87, 0.08);
  border-color: rgba(255, 71, 87, 0.5);
  box-shadow: 0 0 15px rgba(255, 71, 87, 0.4);
  animation: heart-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heart-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.btn-heart-wish svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.btn-heart-wish:hover svg {
  animation: heart-beat 0.6s infinite alternate;
}

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

.wish-author {
  font-size: 11px;
  color: var(--sapphire-glow);
  text-align: right;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* RESPONSIVE LAYOUT */
@media (max-width: 900px) {
  .main-space-container {
    flex-direction: column;
    overflow-y: auto;
  }
  
  .sidebar-panel {
    width: 100%;
    min-width: 100%;
    height: auto;
    padding: 30px 20px;
    border-right: none;
    border-bottom: 1px solid rgba(0, 162, 255, 0.2);
  }
  
  .wishes-panel {
    height: 480px;
    width: 100%;
    padding: 40px 0;
  }
  
  .center-avatar-wrapper {
    width: 240px;
    height: 240px;
    box-shadow: 0 0 25px rgba(0, 162, 255, 0.3);
  }
}

/* --- BẢN GIAO HƯỞNG TRI ÂN: MOVIES 1, 2, 3 --- */

/* Movie 1: Transitions */
.slide-out-left {
  animation: slideOutLeft 1.2s cubic-bezier(0.8, 0, 0.2, 1) forwards !important;
}

.slide-out-right {
  animation: slideOutRight 1.2s cubic-bezier(0.8, 0, 0.2, 1) forwards !important;
}

.fade-to-black {
  animation: fadeToBlack 2s ease-in-out forwards !important;
}

.avatar-pulse-zoom {
  animation: pulseThenZoom 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes slideOutLeft {
  to { transform: translateX(-150%); opacity: 0; }
}

@keyframes slideOutRight {
  to { transform: translateX(150%); opacity: 0; }
}

@keyframes fadeToBlack {
  to { background-color: #000; opacity: 0; visibility: hidden; }
}

@keyframes pulseThenZoom {
  0% { box-shadow: 0 0 30px rgba(0, 210, 255, 0.5); transform: scale(1); opacity: 1; }
  20% { box-shadow: 0 0 80px rgba(0, 210, 255, 0.8); transform: scale(1.05); opacity: 1; }
  40% { box-shadow: 0 0 30px rgba(0, 210, 255, 0.5); transform: scale(1); opacity: 1; }
  60% { box-shadow: 0 0 100px rgba(0, 210, 255, 1); transform: scale(1.1); opacity: 1; }
  80% { box-shadow: 0 0 150px rgba(0, 210, 255, 1); transform: scale(2.5); opacity: 0.8; }
  100% { transform: scale(5); opacity: 0; }
}

/* Movie 2: Lời cám ơn phong cách Cinematic (Awwwards) */
#page-movie2 {
  background: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
  z-index: 900;
}

.movie2-content {
  max-width: 1200px;
}

.karaoke-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cinematic-line-wrapper {
  overflow: hidden;
  margin-bottom: 15px; /* Khoảng cách giữa các dòng */
}

.cinematic-line {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 3.2vw, 3.2rem); /* Auto size để không bao giờ bị nhảy dòng */
  font-weight: 300; /* Mỏng, tinh tế (Sophisticated) */
  line-height: 1.1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  transform-origin: left bottom;
  will-change: transform, opacity, filter;
  white-space: nowrap; /* Cấm nhảy dòng tuyệt đối */
}

/* Đánh bóng tên Sếp Michael */
.michael-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-style: italic;
  color: var(--neon-gold);
  letter-spacing: 5px;
}

@media (max-width: 900px) {
  .cinematic-line { font-size: 1.6rem; letter-spacing: 1px; }
  .cinematic-line-wrapper { margin-bottom: 10px; }
}

/* Movie 3: Scrapbook Gallery (Horizontal Slider) */
#page-movie3 {
  background: #151515 url('https://www.transparenttextures.com/patterns/cubes.png');
  position: relative;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100vw;
  height: 100vh;
}

.scrapbook-header-3d {
  position: fixed;
  top: 0;
  padding-top: 40px;
  padding-bottom: 30px;
  width: 100%;
  text-align: center;
  z-index: 50;
  pointer-events: none;
}

/* Lớp phủ che tin nhắn độc lập, không bị ảnh hưởng bởi GSAP zoom của tiêu đề */
.scrapbook-top-mask {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100vw;
  height: 220px;
  background: #151515 url('https://www.transparenttextures.com/patterns/cubes.png');
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  z-index: 40; /* Nằm dưới tiêu đề (50) nhưng trên tin nhắn */
  pointer-events: none;
}

.scrapbook-title {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(3rem, 6vw, 6rem);
  color: var(--neon-gold);
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 2px 2px 4px rgba(0,0,0,0.8);
  margin-bottom: 5px;
  line-height: 1;
}

.scrapbook-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.7rem, 1.2vw, 1.2rem);
  color: #e0e0e0;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 300;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.river-timeline {
  width: 100vw;
  padding: 160px 5vw 50px 5vw; /* Đẩy padding-top xuống thấp hơn tiêu đề */
  column-count: 5; /* Masonry chuẩn: 5 cột */
  column-gap: 20px;
  width: 100%;
}

@media (max-width: 1200px) { .river-timeline { column-count: 4; } }
@media (max-width: 900px) { .river-timeline { column-count: 3; } }
@media (max-width: 600px) { 
  .river-timeline { column-count: 2; } 
  .editorial-avatar-img { height: 35vh; max-width: 80vw; }
  .cinematic-line { font-size: 1.1rem; letter-spacing: 0.5px; }
  .editorial-bg-text { font-size: 20vw; bottom: 25%; }
}

/* === TƯƠNG TÁC 3D VÀ HIỆU ỨNG === */
.gallery-panel, .typo-art-panel {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 20px;
  width: 100%;
  display: inline-flex;
  cursor: pointer; /* Cho phép click */
  transition: scale 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, filter 0.4s ease;
}

.gallery-panel:hover, .typo-art-panel:hover {
  scale: 1.05; /* Phình to khi hover */
  z-index: 100;
  filter: brightness(1.1);
}

.gallery-panel.expanded, .typo-art-panel.expanded {
  scale: 1.6 !important; /* Phóng to 1.6 lần khi click */
  z-index: 9999 !important;
  box-shadow: 0 50px 100px rgba(0,0,0,0.9), 0 0 50px rgba(255,215,0,0.2) !important;
}

.gallery-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Kính mờ (Frosted Glass) tối hơn để tăng độ tương phản rõ nét 100% cho ảnh và chữ */
  background: linear-gradient(135deg, rgba(15, 15, 20, 0.65), rgba(5, 5, 10, 0.4));
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
  /* Viền siêu mảnh tinh tế */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* Hắt sáng nhẹ từ trên xuống */
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px; /* Bo góc mượt mà kiểu Apple */
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  /* Typography Layout */
  padding: 15px; /* Giảm 1/2 padding */
}

/* Magnetic Hover Effect - Viền sáng lên khi rà chuột */
.gallery-panel:hover {
  box-shadow: 0 25px 50px rgba(0, 255, 204, 0.15); /* Bóng xanh ngọc hắt ra */
  border-top: 1px solid rgba(0, 255, 204, 0.4); /* Viền trên sáng lên */
}

/* Dấu ngoặc kép khổng lồ mờ (Typography Background) */
.gallery-panel::after {
  content: '"';
  position: absolute;
  top: -15px;
  left: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 7.5rem; /* Giảm 1/2 */
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  z-index: 0;
  pointer-events: none;
}

/* Nội dung bên trong thẻ */
.gallery-img-container {
  width: calc(100% + 30px); /* Bù trừ padding mới */
  margin: -15px -15px 10px -15px;
  flex-grow: 1; /* Cho phép ảnh dãn ra nếu không đủ chữ */
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.2); /* Lót nền tối phòng khi contain bị hở viền */
}

.gallery-img {
  width: 100%;
  height: auto; /* Chiều cao tự nhiên theo tỷ lệ ảnh gốc, không bao giờ bị cắt */
  display: block;
  transition: transform 0.8s ease;
}

/* Zoom ảnh nghệ thuật khi hover vào thẻ */
.gallery-panel:hover .gallery-img {
  transform: scale(1.05);
}

.gallery-text-container {
  z-index: 1; /* Nổi lên trên nền ngoặc kép */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 0; 
}

.gallery-msg {
  font-family: 'Playfair Display', serif;
  font-size: 0.8rem; /* Giảm 1/2 size chữ */
  line-height: 1.4;
  color: #fff;
  font-style: italic;
  margin-bottom: 10px;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8); /* Giữ chữ nét trên mọi nền */
  font-weight: 400;
  letter-spacing: 0.5px;
}

.gallery-author {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  color: #ddd;
  font-weight: 600;
  letter-spacing: 1px;
}

/* === SẢN PHẨM MỚI: TYPOGRAPHY ART PANEL (Dành riêng cho Lời chúc không ảnh) === */
.typo-art-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 25px 15px; /* Giảm padding để phù hợp panel nhỏ */
  text-align: center;
  z-index: 5;
}

.typo-art-msg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px; /* Giảm gap chữ */
  margin-bottom: 15px;
  line-height: 1.2;
}

.typo-word-sans {
  font-family: 'Playfair Display', serif;
  font-size: clamp(0.7rem, 1vw, 1.1rem); /* Càng nhỏ lại để phù hợp cột hẹp */
  font-weight: 400;
  font-style: italic;
  color: #dddddd; /* Trắng xám hơi chìm để làm nền */
  text-transform: lowercase; /* Ép chữ thường */
  letter-spacing: 0px;
}

.typo-word-serif {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 1.4vw, 1.5rem); /* Thu gọn chữ Vàng */
  font-weight: 800; /* Đậm, mạ vàng */
  font-style: normal;
  color: var(--neon-gold);
  text-transform: uppercase; /* Ép chữ HOA */
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4); /* Lấp lánh nhẹ */
}

.typo-art-author {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem; /* Thu nhỏ tác giả */
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
  position: relative;
  display: inline-block;
  padding-top: 10px;
}

.typo-art-author::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--neon-gold);
}

.polaroid-card:hover {
  box-shadow: 0 15px 40px rgba(255,215,0,0.4);
}

.polaroid-img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  filter: sepia(0.15) contrast(1.1);
}

.polaroid-msg {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #222;
  line-height: 1.6;
  margin-bottom: 15px;
}

.polaroid-author {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #777;
  text-align: right;
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
}

.tape {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 90px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  border-left: 2px dashed rgba(0,0,0,0.1);
  border-right: 2px dashed rgba(0,0,0,0.1);
  z-index: 2;
  backdrop-filter: blur(2px);
}

/* === EDITORIAL MAGAZINE OPTION 1 === */
.editorial-avatar-container { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100vh; pointer-events: none; z-index: 40; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; perspective: 1000px; }
.editorial-bg-text { position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); font-family: 'Playfair Display', serif; font-size: 25vw; font-weight: 900; color: rgba(255, 215, 0, 0.05); white-space: nowrap; letter-spacing: -0.05em; z-index: 1; text-transform: uppercase; line-height: 0.8; mix-blend-mode: overlay; text-shadow: 0 10px 50px rgba(0,0,0,0.5); }
.editorial-avatar-img { position: relative; z-index: 2; height: 85vh; width: auto; object-fit: contain; filter: drop-shadow(0 40px 80px rgba(0,0,0,0.9)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.2)); transform-style: preserve-3d; transition: transform 0.1s ease-out; transform-origin: center bottom; }
.gallery-panel, .typo-art-panel { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, opacity 0.4s ease !important; /* Overriding previous transitions to allow physics push */ }
.card-repelled { box-shadow: 0 30px 60px rgba(0,0,0,0.5); border-color: rgba(255, 215, 0, 0.5); }