/**
 * ====================================================================
 * GIAO DIỆN MÀN HÌNH LỊCH 20/10 FANTASY LUXURY (CALENDAR.CSS)
 * ====================================================================
 * Nâng cấp chuẩn theo ảnh mẫu Fantasy Luxury:
 * 1. Nền vũ trụ tinh vân tím hồng huyền ảo kèm bệ ánh sáng vũ trụ phía dưới.
 * 2. Khung thiệp chính: Bo góc lớn, kính mờ bán trong suốt (frosted glass),
 *    hai lớp viền mảnh màu hồng tím và vàng champagne, ánh sáng viền mềm,
 *    điểm sao kim cương tại 4 góc và 2 điểm tâm viền trên/dưới.
 * 3. Typography bên trái: "Happy" thư pháp bay bổng kèm bướm phát sáng dạ quang,
 *    "VIETNAMESE" in hoa dãn chữ, "Women's Day" nghệ thuật phát sáng,
 *    đường flourish mảnh với trái tim ngọc trai,
 *    dưới là "A DAY TO CELEBRATE YOU" và tên người nhận "My Linh ♡".
 * 4. Tờ lịch bên phải: Thẻ lịch kính mờ tháng 10/2026 nghiêng nhẹ 3D,
 *    cụm hoa hồng Anh góc đỉnh lịch và đóa hồng lớn góc dưới phải,
 *    dải ruy băng lụa tím hồng mềm mại, khoanh tròn ngày 20/10 nét hồng phát sáng.
 * 5. Nút Tiếp tục hình con thoi (pill) trong suốt huyền ảo cân đối ở đáy.
 * 6. Responsive mượt mà trên desktop 1920x1080, laptop 1366x768, mobile 390x844 & 360x800.
 */

/* 1. TOÀN MÀN HÌNH LỊCH */
.calendar-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 45;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.8s;
  transform: scale(0.96);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.calendar-screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.calendar-screen.fade-out,
.calendar-screen.is-transitioning-out {
  opacity: 0 !important;
  transform: scale(0.95) translateY(8px) !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}

/* 2. NỀN TINH VÂN VŨ TRỤ VÀ BỆ ÁNH SÁNG PHÍA SAU KHUNG THIỆP */
.calendar-ambient-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  background: url('../images/cosmic-calendar-bg.webp') center bottom / cover no-repeat;
}

.cal-nebula-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.65;
  pointer-events: none;
}

.cal-nebula-glow.nebula-left {
  top: 10%;
  left: -8%;
  width: 800px;
  height: 750px;
  background: radial-gradient(circle, rgba(175, 35, 185, 0.58) 0%, rgba(105, 15, 125, 0.35) 45%, transparent 75%);
  filter: blur(65px);
  opacity: 0.88;
  animation: calNebulaPulse 9s ease-in-out infinite alternate;
}

.cal-nebula-glow.nebula-right {
  top: 8%;
  right: -8%;
  width: 820px;
  height: 760px;
  background: radial-gradient(circle, rgba(225, 50, 175, 0.55) 0%, rgba(135, 20, 145, 0.32) 48%, transparent 75%);
  filter: blur(65px);
  opacity: 0.88;
  animation: calNebulaPulse 11s ease-in-out infinite alternate-reverse;
}

.cal-nebula-glow.nebula-center {
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
  height: 520px;
  background: radial-gradient(ellipse at 50% 50%, rgba(145, 30, 165, 0.35) 0%, rgba(70, 12, 95, 0.18) 60%, transparent 80%);
}

@keyframes calNebulaPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.55;
  }

  100% {
    transform: scale(1.08);
    opacity: 0.8;
  }
}

/* Bệ ánh sáng vũ trụ huyền ảo phía dưới chân khung thiệp */
.cal-cosmic-stage {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 380px;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.stage-arc {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  transform: rotateX(72deg);
}

.stage-arc.arc-outer {
  width: 1200px;
  height: 480px;
  bottom: -190px;
  border-width: 1.5px;
  border-color: rgba(230, 110, 210, 0.35);
  box-shadow: 0 0 40px rgba(220, 80, 200, 0.38), inset 0 0 30px rgba(180, 50, 170, 0.22);
}

.stage-arc.arc-middle {
  width: 860px;
  height: 350px;
  bottom: -130px;
  border-width: 2px;
  border-color: rgba(255, 160, 230, 0.55);
  box-shadow: 0 0 50px rgba(240, 100, 210, 0.55), inset 0 0 35px rgba(220, 80, 200, 0.32);
}

.stage-arc.arc-inner {
  width: 520px;
  height: 220px;
  bottom: -70px;
  border-width: 2.2px;
  border-color: rgba(255, 205, 245, 0.85);
  box-shadow: 0 0 60px rgba(255, 120, 220, 0.75), inset 0 0 45px rgba(255, 180, 235, 0.45);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 130, 220, 0.22) 0%, rgba(180, 40, 180, 0.1) 50%, transparent 75%);
}

/* 3. BỐ CỤC CHÍNH CÂN ĐỐI KHÔNG TRÀN */
.calendar-main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  margin: 0;
  overflow: hidden;
}

/* KHỐI QUANG CẢNH CHỨA KHUNG THIỆP & NÚT TIẾP TỤC:
   Khung tỷ lệ chuẩn 860px (giống ảnh 2), căn chính giữa màn hình, giữ nguyên phong cách ảnh 1 */
.calendar-scene-viewport {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 880px !important;
  min-width: 880px !important;
  max-width: 880px !important;
  flex-shrink: 0 !important;
  margin: auto;
  box-sizing: border-box;
  transform-origin: center center;
  transform: scale(var(--cal-scale, 1));
  will-change: transform;
}

/* ====================================================================
   4. KHUNG TRANH FANTASY CHUNG BAO QUANH TYPOGRAPHY VÀ LỊCH 20/10
   Bo góc lớn, kính mờ bán trong suốt, kích thước chuẩn 860px như ảnh 2
   nhưng giữ trọn vẹn 100% phong cách vũ trụ tím huyền ảo của ảnh 1
   ==================================================================== */
.fantasy-artwork-frame {
  position: relative;
  width: 860px !important;
  min-width: 860px !important;
  max-width: 860px !important;
  flex-shrink: 0 !important;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 30px 38px 32px;
  border-radius: 30px;
  /* Viền hồng tím và champagne mảnh mai, thanh thoát */
  border: 1.5px solid rgba(255, 215, 235, 0.72);
  /* Ánh sáng viền mềm, chiều sâu huyền ảo, không tạo quầng trắng dày */
  box-shadow: 0 0 35px rgba(220, 90, 190, 0.45),
    0 25px 70px rgba(5, 1, 14, 0.85),
    inset 0 0 28px rgba(255, 180, 225, 0.15);
  overflow: visible;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 30%, rgba(68, 16, 80, 0.38) 0%, rgba(32, 8, 42, 0.52) 65%, rgba(18, 4, 26, 0.72) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow 0.6s ease;
}

/* Lớp 1: Tinh vân nhẹ bên trong khung */
.frame-nebula-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 55% at 85% 80%, rgba(225, 90, 180, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 15% 25%, rgba(160, 60, 220, 0.2) 0%, transparent 60%),
    radial-gradient(circle 50% at 50% 50%, rgba(120, 30, 150, 0.15) 0%, transparent 70%);
  animation: frameNebulaDrift 14s ease-in-out infinite alternate;
}

@keyframes frameNebulaDrift {
  0% {
    opacity: 0.92;
    transform: scale(1);
  }

  100% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* Lớp 2: Kính mờ phản chiếu ánh sáng nhẹ */
.frame-glass-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(172deg,
      rgba(255, 230, 250, 0.25) 0%,
      rgba(255, 200, 240, 0.08) 15%,
      transparent 40%,
      rgba(180, 60, 200, 0.06) 75%,
      rgba(255, 160, 220, 0.15) 100%);
}

/* Lớp 3: Đường viền mỏng thứ hai phía trong màu champagne */
.frame-inner-border {
  position: absolute;
  inset: 7px;
  border-radius: calc(30px - 7px);
  border: 1px solid rgba(255, 230, 210, 0.35);
  box-shadow: inset 0 0 16px rgba(255, 190, 230, 0.12);
  pointer-events: none;
  z-index: 1;
}

/* Lớp 4: Điểm sáng lung linh ở 4 góc khung */
.frame-corner-sparkle {
  position: absolute;
  font-size: 15px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0 10px #ffb8dc, 0 0 20px #ffffff;
  pointer-events: none;
  z-index: 4;
  opacity: 0.92;
  animation: cornerSparkleBlink 3.8s ease-in-out infinite alternate;
}

.frame-corner-sparkle.sparkle-tl {
  top: 12px;
  left: 14px;
  animation-delay: 0s;
}

.frame-corner-sparkle.sparkle-tr {
  top: 12px;
  right: 14px;
  animation-delay: 1.2s;
}

.frame-corner-sparkle.sparkle-bl {
  bottom: 12px;
  left: 14px;
  animation-delay: 2.1s;
}

.frame-corner-sparkle.sparkle-br {
  bottom: 12px;
  right: 14px;
  animation-delay: 0.7s;
}

@keyframes cornerSparkleBlink {
  0% {
    transform: scale(0.85) rotate(0deg);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.2) rotate(18deg);
    opacity: 1;
  }
}

/* Điểm sao kim cương 4 cánh tại chính giữa cạnh trên và cạnh dưới */
.frame-center-sparkle {
  position: absolute;
  line-height: 1;
  color: #ffffff;
  pointer-events: none;
  z-index: 5;
  font-size: 18px;
  text-shadow: 0 0 10px #ffb3d9, 0 0 20px #ffffff, 0 0 30px #f472b6;
  animation: centerStarPulse 3s ease-in-out infinite alternate;
}

.frame-center-sparkle.sparkle-tc {
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.frame-center-sparkle.sparkle-bc {
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 1.5s;
}

@keyframes centerStarPulse {
  0% {
    transform: translateX(-50%) scale(0.9);
    opacity: 0.85;
    filter: drop-shadow(0 0 4px #fff);
  }

  100% {
    transform: translateX(-50%) scale(1.25);
    opacity: 1;
    filter: drop-shadow(0 0 12px #ff85c0);
  }
}

/* KHỐI 2 BÊN CÂN ĐỐI THEO ẢNH 2: TYPOGRAPHY TRÁI (~370px) + LỊCH FANTASY PHẢI (~315px) */
.calendar-dual-stage {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 36px;
  width: 100%;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  flex-wrap: nowrap !important;
}

/* ====================================================================
   5. KHU VỰC LỜI CHÚC 20/10 THƯ PHÁP NGHỆ THUẬT (BÊN TRÁI)
   Kích thước và khoảng cách chuẩn theo ảnh 2, chữ to rõ ràng nổi bật
   ==================================================================== */
.calendar-wish-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 370px !important;
  min-width: 370px !important;
  max-width: 370px !important;
  flex-shrink: 0 !important;
  min-height: 290px;
  padding: 10px 14px;
  box-sizing: border-box;
  background: transparent;
  user-select: none;
  z-index: 3;
}

/* Quầng sáng tinh vân tím hồng mờ ảo dịu nhẹ phía sau chữ */
.wish-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse 65% 60% at 50% 50%,
      rgba(255, 115, 175, 0.28) 0%,
      rgba(186, 104, 255, 0.18) 45%,
      transparent 85%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: wishGlowPulse 5.5s ease-in-out infinite alternate;
}

@keyframes wishGlowPulse {
  0% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.92);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* Hạt sáng li ti bay lượn xung quanh typography */
.wish-sparkles-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.wish-sparkle {
  position: absolute;
  font-size: 11px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0 6px #ffb6c1, 0 0 12px #d8b4fe, 0 0 18px #ffffff;
  animation: wishSparkleFloat 4s ease-in-out infinite alternate;
}

.wish-sparkle.sp-1 {
  top: 4%;
  left: 2%;
  font-size: 14px;
  animation-delay: 0s;
  color: #ffd6e8;
}

.wish-sparkle.sp-2 {
  top: 14%;
  right: 0%;
  font-size: 10px;
  animation-delay: 1.2s;
  color: #fef08a;
}

.wish-sparkle.sp-3 {
  display: none;
}

.wish-sparkle.sp-4 {
  bottom: 10%;
  right: 4%;
  font-size: 11px;
  animation-delay: 0.8s;
  color: #ffccd5;
}

.wish-sparkle.sp-5 {
  top: 0%;
  right: 26%;
  font-size: 13px;
  animation-delay: 1.8s;
  color: #ffffff;
}

.wish-sparkle.sp-6 {
  bottom: 4%;
  left: 4%;
  font-size: 9px;
  animation-delay: 2.9s;
  color: #ffe4e6;
}

@keyframes wishSparkleFloat {
  0% {
    transform: translateY(0) scale(0.85);
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateY(-8px) scale(1.25);
    opacity: 0.6;
  }
}

/* Cánh hoa trôi nhẹ */
.wish-floating-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.wish-petal {
  position: absolute;
  display: block;
  width: 24px;
  height: 14px;
  border-radius: 50% 0 50% 50%;
  background: linear-gradient(135deg, rgba(255, 230, 240, 0.85), rgba(244, 114, 182, 0.7), rgba(192, 132, 252, 0.5));
  box-shadow: 0 0 10px rgba(255, 182, 193, 0.6);
  animation: wishPetalDrift 7s ease-in-out infinite alternate;
}

.wish-petal.petal-tl {
  top: 6px;
  left: 8px;
  transform: rotate(-35deg);
}

.wish-petal.petal-br {
  bottom: 10px;
  right: 12px;
  width: 18px;
  height: 10px;
  transform: rotate(45deg);
  animation-delay: 3s;
}

@keyframes wishPetalDrift {
  0% {
    transform: translateY(0) rotate(-35deg) scale(0.95);
  }

  100% {
    transform: translateY(7px) rotate(-22deg) scale(1.05);
  }
}

/* Khối nội dung Typography chính */
.wish-art-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 1;
  transform: translateY(0);
}

/* Dòng 1: "Happy" thư pháp mềm mại, bay bổng + Bướm phát sáng */
.wish-word-script {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 0.9;
}

.wish-word-script .script-happy {
  display: inline-block;
  font-family: 'Alex Brush', 'Pinyon Script', 'Great Vibes', cursive;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 0.95;
  transform: rotate(-3.5deg);
  background: linear-gradient(95deg,
      #ffffff 0%,
      #ffcde3 30%,
      #ff6fa8 65%,
      #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 110, 185, 0.85)) drop-shadow(0 0 32px rgba(192, 132, 252, 0.5));
  margin-bottom: 2px;
}

.happy-butterfly-flourish {
  position: absolute;
  top: -14px;
  right: -34px;
  width: 86px;
  height: 60px;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255, 120, 185, 0.95)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.8));
  animation: butterflyFlourishFloat 3.5s ease-in-out infinite alternate;
}

.happy-butterfly-flourish svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes butterflyFlourishFloat {
  0% {
    transform: translateY(0) rotate(-2deg) scale(0.98);
  }

  50% {
    transform: translateY(-5px) rotate(3deg) scale(1.03);
  }

  100% {
    transform: translateY(-8px) rotate(-1deg) scale(1);
  }
}

/* Tiêu đề VIETNAMESE */
.wish-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 4px;
  margin-bottom: 2px;
  width: 100%;
}

.title-vietnamese {
  display: block;
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.38em;
  line-height: 1.2;
  color: #fff6eb;
  text-shadow: 0 0 14px rgba(255, 220, 200, 0.85),
    0 0 28px rgba(236, 72, 153, 0.5);
  margin-top: 4px;
  margin-left: 0.38em;
}

/* Tiêu đề Women's Day - TUYỆT ĐỐI NẰM TRÊN MỘT DÒNG DUY NHẤT */
.title-womens-day {
  display: block;
  white-space: nowrap !important;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 47px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.6px;
  line-height: 1.08;
  background: linear-gradient(90deg,
      #ffffff 0%,
      #ffcde3 32%,
      #ff6fa8 68%,
      #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 110, 185, 0.85)) drop-shadow(0 0 32px rgba(192, 132, 252, 0.5));
  margin-top: 4px;
  margin-bottom: 6px;
}

/* Đường cong trang trí mảnh đối xứng kèm trái tim ngọc trai */
.wish-flourish-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 20px;
  margin: 6px auto 12px;
}

.wish-divider-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(255, 180, 220, 0.85));
}

/* 2 Cụm chữ dưới: "A DAY TO CELEBRATE YOU" và "My Linh ♡" */
.wish-tagline,
.wish-dual-subtitle {
  margin: 4px auto 0;
  padding: 0 4px;
  width: 100%;
  max-width: 350px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px;
  box-sizing: border-box;
}

.subtitle-left-message {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  line-height: 1.45;
}

.subtitle-left-message .message-line {
  font-family: 'Cinzel', 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #fce7b0;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(253, 230, 138, 0.75), 0 0 18px rgba(245, 158, 11, 0.45);
}

.subtitle-right-name {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.name-signature-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.name-signature-wrap .name-text {
  font-family: 'Alex Brush', 'Pinyon Script', 'Great Vibes', cursive;
  font-size: 35px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.0;
  white-space: nowrap;
  background: linear-gradient(95deg,
      #ffffff 0%,
      #ffcde3 30%,
      #ff6fa8 65%,
      #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 110, 185, 0.85)) drop-shadow(0 0 28px rgba(192, 132, 252, 0.5));
}

.name-signature-wrap .name-heart {
  font-size: 16px;
  color: #ff5b8f;
  text-shadow: 0 0 8px #ff5b8f, 0 0 14px #ffffff;
  animation: wishHeartPulse 2.4s ease-in-out infinite alternate;
  vertical-align: super;
}

.name-underline-svg {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 16px;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(255, 100, 180, 0.8));
  pointer-events: none;
}

/* ====================================================================
   6. TỜ LỊCH FANTASY THÁNG 10/2026 (BÊN PHẢI)
   Kích thước 295px chuẩn theo ảnh 2, cân xứng hoàn hảo với lời chúc
   ==================================================================== */
.calendar-paper-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  perspective: 1200px;
  flex: 0 0 315px !important;
  width: 315px !important;
  min-width: 315px !important;
  max-width: 315px !important;
  flex-shrink: 0 !important;
}

/* KHỐI 3D LIÊN KẾT ĐỒNG BỘ: RUY BĂNG RỜI, LỊCH KÍNH VÀ CỤM HOA */
.calendar-3d-composite {
  position: relative;
  width: 295px !important;
  min-width: 295px !important;
  max-width: 295px !important;
  flex-shrink: 0 !important;
  transform-style: preserve-3d;
  transform: rotateZ(-7deg) rotateY(4deg) rotateX(3deg);
  animation: calCompositeFloat 6s ease-in-out infinite alternate;
}

@keyframes calCompositeFloat {
  0% {
    transform: rotateZ(-7deg) rotateY(4deg) rotateX(3deg) translateY(0);
  }

  100% {
    transform: rotateZ(-6deg) rotateY(3deg) rotateX(4deg) translateY(-5px);
  }
}

/* Thẻ lịch kính mờ Fantasy nằm giữa trong không gian 3D */
.calendar-paper.magic-scroll {
  position: relative;
  width: 295px !important;
  min-width: 295px !important;
  max-width: 295px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(145deg,
      rgba(80, 24, 98, 0.42) 0%,
      rgba(45, 12, 60, 0.55) 50%,
      rgba(25, 6, 38, 0.72) 100%);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border-radius: 20px 22px 28px 24px;
  padding: 20px 18px 18px;
  box-sizing: border-box;
  border-top: 1.5px solid rgba(255, 255, 255, 0.85);
  border-left: 1.5px solid rgba(255, 255, 255, 0.55);
  border-right: 1px solid rgba(255, 190, 230, 0.3);
  border-bottom: 1px solid rgba(255, 190, 230, 0.2);
  box-shadow: 0 20px 50px rgba(5, 1, 14, 0.8),
    0 0 30px rgba(220, 80, 190, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 20px rgba(255, 160, 220, 0.15);
  user-select: none;
  -webkit-user-select: none;
  z-index: 3;
  transform: translateZ(0);
}

/* DẢI RUY BĂNG LỤA RỜI BÊN TRÁI: Dài bao phủ toàn bộ chiều cao lịch, luồn phía sau không che số */
.calendar-decor-ribbon.ribbon-left {
  position: absolute;
  top: -12px;
  left: -70px;
  width: 175px;
  height: 275px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.95;
  filter: drop-shadow(0 0 16px rgba(217, 70, 239, 0.5));
  transform: translateZ(-15px) rotate(4deg);
}

.calendar-decor-ribbon.ribbon-left .ribbon-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

/* DẢI RUY BĂNG LỤA RỜI BÊN PHẢI: Vòng qua đỉnh phải và uốn lượn sau lịch */
.calendar-decor-ribbon.ribbon-right {
  position: absolute;
  top: -18px;
  right: -52px;
  width: 140px;
  height: 140px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.92;
  filter: drop-shadow(0 0 16px rgba(217, 70, 239, 0.5));
  transform: translateZ(-20px) rotate(-8deg);
}

.calendar-decor-ribbon.ribbon-right .ribbon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Cụm hoa hồng đỉnh lịch: Nằm ở góc trên bên trái của thẻ lịch - Bông kê trên đường viền, cành ở dưới */
.calendar-decor-top-flower {
  position: absolute;
  top: -62px;
  left: 2px;
  width: 138px;
  pointer-events: none;
  z-index: 5;
  transform: translateZ(15px) rotate(-4deg);
  filter: drop-shadow(0 8px 18px rgba(5, 1, 14, 0.75)) drop-shadow(0 0 14px rgba(244, 114, 182, 0.35));
}

.calendar-decor-top-flower .top-rose-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Cụm hoa tím / lilac góc dưới bên trái lịch - Lộ 1 bông hoa lên trên góc lịch, cấm che số */
.calendar-decor-lilac-left {
  position: absolute;
  bottom: -58px;
  left: -52px;
  width: 105px;
  pointer-events: none;
  z-index: 4;
  transform: translateZ(10px) rotate(-4deg);
  filter: drop-shadow(0 8px 16px rgba(5, 1, 14, 0.75));
}

.calendar-decor-lilac-left .lilac-left-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Cụm hoa hồng lớn góc dưới bên phải - Nhích xuống và sang phải để hiện rõ toàn bộ các số 18, 24, 25, 31 */
.calendar-decor-bot-flower {
  position: absolute;
  bottom: -72px;
  right: -46px;
  width: 138px;
  pointer-events: none;
  z-index: 5;
  transform: translateZ(20px) rotate(12deg);
  filter: drop-shadow(0 10px 22px rgba(5, 1, 14, 0.8)) drop-shadow(0 0 18px rgba(244, 114, 182, 0.4));
}

.calendar-decor-bot-flower .bot-rose-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Header lịch */
.calendar-header {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 0px;
  margin-bottom: 2px;
}

.calendar-title-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.calendar-title {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-style: italic;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 0 10px rgba(255, 180, 220, 0.7), 0 0 20px rgba(236, 72, 153, 0.5);
}

.header-sparkle-heart {
  font-size: 1rem;
  color: #ff5b8f;
  filter: drop-shadow(0 0 8px rgba(255, 91, 143, 0.9));
}

.calendar-year-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(255, 230, 245, 0.9);
  text-transform: uppercase;
  margin-top: 1px;
}

/* Bảng ngày */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px 2px;
  margin-top: 6px;
  position: relative;
  z-index: 2;
}

.calendar-weekday {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255, 240, 250, 0.85);
  text-align: center;
  padding: 2px 0 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px dashed rgba(255, 180, 230, 0.25);
  margin-bottom: 2px;
}

.calendar-weekday.weekend {
  color: #ff5b8f;
  font-weight: 700;
}

.calendar-day {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
}

.calendar-day.weekend {
  color: #ff5b8f;
  font-weight: 600;
}

.calendar-day.empty {
  pointer-events: none;
  visibility: hidden;
}

/* Ngày 20 đặc biệt: Vòng sáng hồng neon ôm sát số 20 */
.calendar-day.day-special {
  color: #ffffff;
  font-weight: 700;
  position: relative;
  z-index: 4;
}

.calendar-day.day-special .day-num {
  position: relative;
  z-index: 3;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 15px rgba(255, 50, 120, 0.9);
  transition: color 0.4s ease, transform 0.4s ease;
}

.day-circle-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.day-circle-path {
  fill: rgba(255, 46, 120, 0.32);
  stroke: #ff4d91;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 110;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 8px rgba(255, 46, 120, 1)) drop-shadow(0 0 16px rgba(255, 140, 190, 0.85));
  animation: circleGlowPulse 2s ease-in-out infinite alternate;
}

.calendar-day.day-special.drawing .day-circle-path {
  stroke-dashoffset: 0;
  fill: rgba(255, 46, 120, 0.28);
}

.calendar-day.day-special.marked .day-circle-path {
  stroke-dashoffset: 0;
  fill: rgba(255, 46, 120, 0.35);
  stroke: #ff4d91;
  filter: drop-shadow(0 0 8px rgba(255, 46, 120, 1)) drop-shadow(0 0 18px rgba(255, 130, 180, 0.85));
  animation: circleGlowPulse 1.8s ease-in-out infinite alternate;
}

@keyframes circleGlowPulse {
  0% {
    filter: drop-shadow(0 0 6px rgba(255, 46, 120, 0.85)) drop-shadow(0 0 14px rgba(255, 130, 180, 0.65));
  }

  100% {
    filter: drop-shadow(0 0 12px rgba(255, 46, 120, 1)) drop-shadow(0 0 22px rgba(255, 160, 200, 0.95));
  }
}

.calendar-day.day-special.marked .day-num {
  color: #ffffff;
  animation: dayNumSubtlePop 1.8s ease-in-out infinite alternate;
}

@keyframes dayNumSubtlePop {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

/* ====================================================================
   7. HỆ THỐNG CÁNH HOA BAY TRONG KHÔNG GIAN
   ==================================================================== */
.calendar-petals-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.fantasy-petal {
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 65% 35% 75% 25% / 45% 65% 35% 55%;
  will-change: transform, opacity;
}

.petal-back {
  z-index: 2;
  filter: blur(0.4px) drop-shadow(0 0 5px rgba(255, 150, 190, 0.5));
}

.petal-front {
  z-index: 7;
  filter: drop-shadow(0 2px 6px rgba(35, 10, 45, 0.4)) drop-shadow(0 0 8px rgba(255, 170, 210, 0.65));
}

.petal-1 {
  top: 15px;
  left: -20px;
  width: 18px;
  height: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #ffb6c1 50%, #f472b6 100%);
  animation: petalDrift1 8s ease-in-out infinite;
}

.petal-2 {
  bottom: 25px;
  left: -30px;
  width: 15px;
  height: 20px;
  background: linear-gradient(145deg, #ffffff 10%, #ffd1dc 60%, #e879f9 100%);
  animation: petalDrift2 9.5s ease-in-out infinite 1.5s;
}

.petal-3 {
  top: 40px;
  right: -25px;
  width: 16px;
  height: 22px;
  background: linear-gradient(125deg, #ffffff 0%, #ffaec9 55%, #c084fc 100%);
  animation: petalDrift3 7.8s ease-in-out infinite 0.8s;
}

.petal-4 {
  bottom: 60px;
  right: -15px;
  width: 14px;
  height: 18px;
  background: linear-gradient(135deg, #ffffff 20%, #ffc2d1 70%, #f43f5e 100%);
  animation: petalDrift4 8.6s ease-in-out infinite 2.2s;
}

.petal-5 {
  top: -15px;
  left: 60%;
  width: 12px;
  height: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #ffb8d6 60%, #d946ef 100%);
  animation: petalDrift1 10s ease-in-out infinite 3s;
}

@keyframes petalDrift1 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.9);
    opacity: 0.3;
  }

  30% {
    opacity: 0.85;
  }

  70% {
    opacity: 0.75;
  }

  100% {
    transform: translate(18px, 28px) rotate(80deg) scale(1.05);
    opacity: 0.3;
  }
}

@keyframes petalDrift2 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.35;
  }

  40% {
    opacity: 0.9;
  }

  80% {
    opacity: 0.7;
  }

  100% {
    transform: translate(-22px, 32px) rotate(-90deg) scale(0.92);
    opacity: 0.35;
  }
}

@keyframes petalDrift3 {
  0% {
    transform: translate(0, 0) rotate(15deg) scale(0.95);
    opacity: 0.4;
  }

  50% {
    transform: translate(16px, -18px) rotate(60deg) scale(1.08);
    opacity: 0.85;
  }

  100% {
    transform: translate(28px, -35px) rotate(120deg) scale(0.95);
    opacity: 0.35;
  }
}

@keyframes petalDrift4 {
  0% {
    transform: translate(0, 0) rotate(-20deg) scale(0.9);
    opacity: 0.3;
  }

  50% {
    transform: translate(-14px, 16px) rotate(40deg) scale(1.04);
    opacity: 0.85;
  }

  100% {
    transform: translate(-26px, 34px) rotate(100deg) scale(0.9);
    opacity: 0.3;
  }
}

/* ====================================================================
   8. NÚT TIẾP TỤC CÂN ĐỐI (PILL SHAPE TRANSLUCENT)
   ==================================================================== */
.calendar-bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  z-index: 100;
  position: relative;
  width: 100%;
  pointer-events: auto !important;
}

.calendar-continue-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 42px;
  border-radius: 999px;
  border: 1.4px solid rgba(255, 195, 230, 0.7);
  background: linear-gradient(135deg, rgba(65, 15, 75, 0.65) 0%, rgba(35, 8, 48, 0.8) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  box-shadow: 0 0 25px rgba(220, 75, 180, 0.45),
    0 8px 24px rgba(6, 1, 14, 0.6),
    inset 0 0 14px rgba(255, 180, 225, 0.22);
  cursor: pointer !important;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 101;
  position: relative;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.35s,
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

.calendar-continue-btn .btn-sparkle {
  font-size: 0.95rem;
  color: #ffb8dc;
  text-shadow: 0 0 6px #ff85c0;
}

.calendar-continue-btn.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.calendar-continue-btn.visible:hover {
  border-color: #ff9ec8;
  background: linear-gradient(135deg, rgba(85, 20, 95, 0.8) 0%, rgba(50, 10, 68, 0.92) 100%);
  box-shadow: 0 0 35px rgba(255, 110, 195, 0.68),
    0 10px 28px rgba(6, 1, 14, 0.7),
    inset 0 0 18px rgba(255, 190, 230, 0.35);
  transform: translateY(-2px) scale(1.03);
  color: #ffffff;
}

.calendar-continue-btn.visible:active {
  transform: translateY(0) scale(0.98);
}

/* Hỗ trợ giảm chuyển động (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {

  .calendar-paper.magic-scroll,
  .cal-nebula-glow,
  .frame-nebula-glow,
  .happy-butterfly,
  .calendar-decor-ribbon,
  .calendar-decor-top-flower,
  .calendar-decor-bot-flower,
  .fantasy-petal,
  .wish-ambient-glow,
  .wish-sparkle,
  .wish-petal,
  .divider-heart-badge,
  .frame-corner-sparkle,
  .frame-center-sparkle {
    animation: none !important;
  }

  .day-circle-path {
    transition: stroke-dashoffset 0.4s ease;
  }

  .wish-art-wrapper {
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
}