/* ==========================================================================
   CUTE LAYER — viền đậm, bóng đổ cứng cho header, nút, popup & hiệu ứng ngày lễ
   Giữ tông màu chính của trang: đen #111 · kem #F7F7F4 · trắng · mint · vàng bơ
   ========================================================================== */

:root {
  --ink: #111111;
  --paper: #FFFFFF;
  --mint: #A7F3D0;
  --mint-deep: #10B981;
  --butter: #FDE68A;
  --butter-deep: #F59E0B;
  --blush: #FFC9D4;
  --bd: 2.5px solid var(--ink);
  --sh: 5px 5px 0 var(--ink);
  --sh-sm: 3px 3px 0 var(--ink);
  --sh-lg: 8px 8px 0 var(--ink);
  --font-hand: 'Pangolin', 'Inter', cursive;
  --bounce: cubic-bezier(.3, 1.8, .5, 1);
}

body {
  background-color: var(--bg-primary);
  background-image: radial-gradient(rgba(17, 17, 17, .09) 1.3px, transparent 1.3px);
  background-size: 22px 22px;
}

::selection { background: var(--butter); color: var(--ink); }

/* ---------- Header ---------- */
.site-header.scrolled {
  background-color: rgba(247, 247, 244, .92);
  border-bottom: var(--bd);
}

.goat-logo-img {
  width: 44px; height: 44px;
  border: var(--bd); background: var(--butter);
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--bounce);
}
.brand-logo-group:hover .goat-logo-img { transform: rotate(-12deg) scale(1.1); }

@media (min-width: 768px) {
  .desktop-nav {
    gap: .25rem; padding: .35rem;
    border: var(--bd); box-shadow: var(--sh-sm);
  }
  .nav-link {
    padding: .35rem .95rem; border-radius: 999px;
    border: 2px solid transparent;
  }
  .nav-link:hover { background: var(--mint); color: var(--ink); }
  .nav-link.active { background: var(--ink); color: var(--paper); }
}

.lang-switcher-container { border: var(--bd); box-shadow: var(--sh-sm); }

.event-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .8rem;
  border: var(--bd); border-radius: 999px;
  background: var(--blush); box-shadow: var(--sh-sm);
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  animation: cuteWiggle 3s ease-in-out infinite;
}
.event-chip:hover { animation-play-state: paused; transform: translate(-2px, -2px); box-shadow: var(--sh); }

.btn-pill-primary {
  border: var(--bd); border-radius: 14px;
  box-shadow: 3px 3px 0 var(--mint-deep);
  transition: transform .12s, box-shadow .12s;
}
.btn-pill-primary:hover { background: var(--ink); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--mint-deep); }
.btn-pill-primary:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--mint-deep); }

/* ---------- Footer ---------- */
/* Chừa chỗ cho 2 nút nổi (Top Donate + Đậu Đậu) để không che chữ ở footer */
.site-footer { border-top: none; padding-top: 1rem; padding-bottom: 110px; background: transparent; }

/* ---------- Nút nổi & popup ---------- */
.floating-donate-btn {
  border: var(--bd);
  background: var(--butter);
  box-shadow: var(--sh-sm);
  border-radius: 16px;
}
.floating-donate-btn:hover { background: var(--butter); transform: translate(-2px, -2px); box-shadow: var(--sh); }

.floating-chatbot-btn { border: var(--bd) !important; box-shadow: var(--sh-sm) !important; }

.donate-modal-card, .chatbot-popup-card {
  border: var(--bd) !important;
  box-shadow: var(--sh-lg) !important;
}
.modal-header-nav { border-bottom: var(--bd); }
.modal-tabs { border: 2px solid var(--ink); background: var(--bg-primary); }
.tab-btn.active { background: var(--ink); color: var(--paper); }
.top-item-card { border: 2px solid var(--ink); box-shadow: var(--sh-sm); }

/* ---------- Ngày phụ nữ (8/3 & 20/10) — chỉ hiện khi PHP bật ---------- */
.petal-rain { position: fixed; inset: 0; z-index: 49; pointer-events: none; overflow: hidden; }
.petal-rain span {
  position: absolute; top: -40px;
  animation-name: petalFall, petalSway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
  opacity: .85;
}

.womens-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem; padding: .9rem 1.25rem;
  border: var(--bd); border-radius: var(--radius-card);
  background: var(--blush); color: var(--ink);
  box-shadow: var(--sh);
  transition: transform .15s, box-shadow .15s;
}
a.womens-banner:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-lg); }
.womens-banner-flowers { font-size: 1.7rem; flex-shrink: 0; animation: cuteWiggle 2.6s ease-in-out infinite; }
.womens-banner-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.womens-banner-text b { font-family: var(--font-display); font-size: 1.15rem; }
.womens-banner-text span { font-family: var(--font-hand); font-size: 1.02rem; }
.womens-banner-cta {
  flex-shrink: 0;
  padding: .45rem .9rem;
  border: var(--bd); border-radius: 12px;
  background: var(--paper); box-shadow: var(--sh-sm);
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
}

/* ---------- Keyframes ---------- */
@keyframes cuteWiggle { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-6deg); } 20% { transform: rotate(6deg); } 30% { transform: rotate(0); } }
@keyframes petalFall { to { top: 105%; } }
@keyframes petalSway { from { transform: translateX(-24px) rotate(-25deg); } to { transform: translateX(24px) rotate(25deg); } }

@media (max-width: 767px) {
  .brand-name { font-size: .92rem; white-space: nowrap; letter-spacing: -.03em; }
  .brand-logo-group { gap: .5rem; }
  .header-right-group { gap: .4rem; }
  .event-chip { padding: .3rem .6rem; }
  .goat-logo-img { width: 38px; height: 38px; }
  .womens-banner { flex-wrap: wrap; }
  .womens-banner-cta { width: 100%; text-align: center; }
}

@media (max-width: 420px) {
  .event-chip span { display: none; }
  .header-status-dot { display: none; }
}