/* ============================================================
   KHI — POPUP MỪNG SINH NHẬT 1 TUỔI (tháng 8/2026)
   Dang chốt 02/08: hiện sau 2,5 giây · pháo hoa khi bấm nhận ưu đãi.

   Nguyên tắc an toàn:
   · Toàn bộ nằm dưới class do bday-v1.js gắn → JS chết là popup KHÔNG hiện,
     trang vẫn đọc bình thường (không có nguy cơ kẹt màn đen che nội dung).
   · prefers-reduced-motion: bỏ hết chuyển động, chỉ hiện tĩnh.
   · TỰ TẮT sau 31/08/2026 (kiểm trong JS) — không để rác chạy sang tháng sau.
   ============================================================ */

.bdayp { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 20px; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s; }
.bdayp.on { opacity: 1; visibility: visible; }
.bdayp-veil { position: absolute; inset: 0; background: rgba(24,28,20,.58);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

.bdayp-card { position: relative; width: min(460px, 100%); background: var(--cream);
  border-radius: var(--r-lg); overflow: hidden; text-align: center;
  box-shadow: 0 30px 80px rgba(24,28,20,.34);
  transform: translateY(18px) scale(.97); transition: transform .5s var(--ease); }
.bdayp.on .bdayp-card { transform: none; }

/* dải ảnh KV đầu thiệp — dùng đúng ảnh chiến dịch, không vẽ thêm hoa lá */
/* ảnh + chữ là trang trí — KHÔNG bắt chạm (khỏi trông như nút, khỏi dead click).
   Chỉ nút CTA/đóng nhận chạm; chạm chỗ khác bong lên wrap → đóng (xem bday-v1.js). */
.bdayp-kv { display: block; width: 100%; aspect-ratio: 16/7; object-fit: cover; pointer-events: none; }
.bdayp-eyebrow, .bdayp-in h3, .bdayp-in p { pointer-events: none; }

.bdayp-in { padding: 26px 30px 30px; }
.bdayp-eyebrow { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay-text); font-weight: 600; }
.bdayp-in h3 { margin: 10px 0 0; font-size: clamp(1.45rem, 3.6vw, 1.85rem);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.18; color: var(--ink); }
.bdayp-in p { margin: 12px auto 0; max-width: 34ch; color: var(--ink-soft); font-size: .96rem; }
.bdayp-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.bdayp-acts .btn { width: 100%; justify-content: center; }
.bdayp-later { background: none; border: 0; font: inherit; font-size: .9rem; padding: 6px;
  color: var(--ink-faint); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bdayp-later:hover { color: var(--ink); }

/* nút đóng góc phải — luôn có đường thoát rõ ràng, không bẫy khách trong popup */
.bdayp-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(24,28,20,.42); color: #fff; transition: background var(--t); }
.bdayp-x:hover { background: rgba(24,28,20,.72); }
.bdayp-x .ico { width: 18px; height: 18px; }
.bdayp-x:focus-visible, .bdayp-later:focus-visible { outline: 2px solid var(--clay-text); outline-offset: 2px; }

/* lớp pháo hoa — phủ toàn màn, KHÔNG chặn thao tác */
.bdayp-fx { position: fixed; inset: 0; z-index: 95; pointer-events: none; }

@media (max-width: 520px) { .bdayp-in { padding: 22px 20px 24px; } }

@media (prefers-reduced-motion: reduce) {
  .bdayp, .bdayp-card { transition: none; }
  .bdayp.on .bdayp-card { transform: none; }
  .bdayp-fx { display: none; }     /* không bắn pháo hoa cho người ngại chuyển động */
}