/* =========================================================
   birthday.css — Banner + modal "Chúc mừng sinh nhật" ở Cổng nhân
   viên, hiện đúng ngày sinh nhật của tài khoản đang đăng nhập. Lấy gần
   như nguyên văn CSS từ mẫu HTML người dùng cung cấp, chỉ đổi tên class
   sang tiền tố `bday-` để không đụng tên chung của các phần khác.
   ========================================================= */

/* ---- Banner (đặt trong widget-area của trang chủ Cổng nhân viên) ---- */
.bday-banner {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  background: linear-gradient(135deg, #ffe9f1, #ffd6e6);
  border: 1px solid #ffb6c1;
  border-radius: 18px;
  padding: 18px 16px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(255, 105, 180, 0.25);
  position: relative;
  overflow: hidden;
  animation: bdayPopIn 0.5s ease-out;
}

.bday-banner::before,
.bday-banner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.35;
}
.bday-banner::before { width: 90px; height: 90px; background: #ffc1da; top: -30px; left: -30px; }
.bday-banner::after { width: 120px; height: 120px; background: #ffd8e6; bottom: -50px; right: -40px; }

.bday-banner .bday-emoji {
  font-size: 32px;
  position: relative;
  z-index: 1;
  animation: bdayBounce 1.8s infinite;
  display: inline-block;
}

.bday-banner h2 {
  font-size: 18px;
  color: #c2185b;
  margin: 8px 0 4px;
  position: relative;
  z-index: 1;
}

.bday-banner p {
  font-size: 14px;
  color: #7a3b52;
  margin: 0;
  position: relative;
  z-index: 1;
  line-height: 1.5;
}

.bday-banner .bday-from {
  font-size: 12px;
  font-style: italic;
  color: #a64d79;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}

.bday-banner .bday-btn-view {
  margin-top: 12px;
  background: #e91e63;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(233, 30, 99, 0.35);
  font-family: inherit;
}
.bday-banner .bday-btn-view:active { transform: scale(0.97); }

@keyframes bdayPopIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes bdayBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---- Modal chúc mừng ---- */
.bday-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  padding: 20px;
  animation: bdayFadeIn 0.25s ease;
}
.bday-modal-backdrop.show { display: flex; }

.bday-modal-box {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  background: #fff;
  border-radius: 22px;
  padding: 26px 22px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  position: relative;
  animation: bdayPopIn 0.35s ease-out;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.bday-modal-box .bday-big-emoji {
  font-size: 62px;
  display: block;
  animation: bdayBounce 1.6s infinite;
}

.bday-modal-box h2 {
  font-size: 22px;
  color: #c2185b;
  margin: 10px 0 4px;
}

.bday-modal-box .bday-modal-name {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 4px 0 12px;
}

.bday-modal-box .bday-modal-msg {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

.bday-modal-box .bday-btn-close {
  background: linear-gradient(135deg, #e91e63, #ff6090);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(233, 30, 99, 0.4);
  width: 100%;
  font-family: inherit;
}
.bday-modal-box .bday-btn-close:active { transform: scale(0.97); }

@keyframes bdayFadeIn { from { opacity: 0; } to { opacity: 1; } }