/* Đợt 1: hiệu ứng theo mùa (Tết, Trung thu, Giáng sinh) và bóng bay sinh nhật.
   Chỉ animate transform và opacity; lớp hiệu ứng nằm dưới thanh menu, không bắt chuột; máy bật "giảm chuyển động" thì không rơi/bay. */
.fa-season { position: fixed; inset: 0; z-index: 1010; pointer-events: none; overflow: hidden; }
.fa-season.is-off, .fa-season-banner.is-off { display: none; }
.fs-fall, .fs-rise { position: absolute; will-change: transform; }
.fs-fall { top: -40px; animation: fs-fall var(--d, 14s) linear var(--w, 0s) infinite; }
.fs-rise { bottom: -140px; animation: fs-rise var(--d, 16s) ease-in var(--w, 0s) infinite; }
@keyframes fs-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate3d(var(--dx, 30px), 55vh, 0) rotate(180deg); }
  92% { opacity: 1; }
  100% { transform: translate3d(calc(var(--dx, 30px) * -.4), 112vh, 0) rotate(360deg); opacity: 0; }
}
@keyframes fs-rise {
  0% { transform: translate3d(0, 0, 0) rotate(-4deg); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate3d(var(--dx, 24px), -60vh, 0) rotate(4deg); }
  90% { opacity: 1; }
  100% { transform: translate3d(0, -125vh, 0) rotate(-3deg); opacity: 0; }
}
@keyframes fs-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* Tết: hoa mai 5 cánh vàng */
.fs-mai { width: var(--s, 20px); height: var(--s, 20px); }
.fs-mai i { position: absolute; left: 50%; top: 0; width: 42%; height: 50%; margin-left: -21%; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 30%, #FFE680, #F7C21B 70%); transform-origin: 50% 100%; box-shadow: 0 0 2px rgba(180, 120, 0, .35); }
.fs-mai i:nth-child(2) { transform: rotate(72deg); } .fs-mai i:nth-child(3) { transform: rotate(144deg); }
.fs-mai i:nth-child(4) { transform: rotate(216deg); } .fs-mai i:nth-child(5) { transform: rotate(288deg); }
.fs-mai::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; margin: -13% 0 0 -13%; border-radius: 50%; background: #D9822B; }

/* Đèn lồng (Tết: đỏ có chữ; Trung thu: vàng cam) */
.fs-lantern { position: absolute; top: 56px; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0;
  animation: fs-swing 3.2s ease-in-out infinite alternate; }
.fs-lantern.l1 { left: 3%; } .fs-lantern.l2 { right: 3%; animation-delay: -1.6s; }
.fs-lantern .cord { width: 2px; height: 34px; background: #8E4615; }
.fs-lantern .body { position: relative; width: 50px; height: 58px; border-radius: 45%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #FF6A4D, #D8261C 55%, #9E120E); box-shadow: 0 0 22px 4px rgba(255, 90, 50, .35); }
.fs-lantern .body::before, .fs-lantern .body::after { content: ''; position: absolute; left: 10px; right: 10px; height: 7px; background: #E9B73C; border-radius: 3px; }
.fs-lantern .body::before { top: -3px; } .fs-lantern .body::after { bottom: -3px; }
.fs-lantern .body b { font-family: 'Patrick Hand', cursive; font-weight: 400; color: #FFE08A; font-size: 1rem; }
.fs-lantern .tassel { width: 6px; height: 26px; margin-top: 2px; border-radius: 0 0 3px 3px; background: linear-gradient(#E9B73C, #D8261C); }
.fs-lantern.moon .body { background: radial-gradient(circle at 40% 35%, #FFE59A, #F5A623 55%, #C8671A); box-shadow: 0 0 26px 6px rgba(255, 200, 80, .4); }
.fs-lantern.moon .tassel { background: linear-gradient(#E9B73C, #E8833A); }

/* Trung thu: trăng tròn và đốm sáng bay lên */
.fs-moon { position: absolute; top: 74px; right: 12%; width: 64px; height: 64px; border-radius: 50%; opacity: .75;
  background: radial-gradient(circle at 38% 35%, #FFF8DC, #FFE08A 60%, #F5C35A); box-shadow: 0 0 40px 14px rgba(255, 224, 138, .45); }
.fs-glow { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #FFE59A, rgba(255, 200, 80, 0) 70%); }

/* Giáng sinh: tuyết */
.fs-snow { width: var(--s, 8px); height: var(--s, 8px); border-radius: 50%; opacity: .95;
  background: radial-gradient(circle at 40% 35%, #fff 0 35%, #DCEBFA 70%, #B9D3EE);
  box-shadow: 0 0 0 1px rgba(140, 170, 205, .45), 0 0 8px rgba(160, 195, 235, .8); }

/* Sinh nhật: bóng bay */
.fs-balloon { width: 46px; height: 56px; border-radius: 50% 50% 48% 48%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .7) 0 6%, var(--b, #F28B6B) 30%, var(--b2, #D9482B) 100%); }
.fs-balloon::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 7px; margin-left: -5px;
  background: var(--b2, #D9482B); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fs-balloon .string { position: absolute; left: 50%; top: 100%; width: 1px; height: 70px; background: rgba(120, 90, 60, .55); }
.fs-balloon.c0 { --b: #FF8A7A; --b2: #E0473A; } .fs-balloon.c1 { --b: #FFD36B; --b2: #F0A21B; } .fs-balloon.c2 { --b: #8FD3A8; --b2: #3E9E66; }
.fs-balloon.c3 { --b: #8EC5F0; --b2: #3C83C4; } .fs-balloon.c4 { --b: #D9A8F0; --b2: #9B5CC4; }

/* Dải lời chúc */
.fa-season-banner { position: fixed; z-index: 1045; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem .5rem .9rem; border-radius: 999px; font-size: .92rem;
  color: #fff; background: linear-gradient(135deg, #E8833A, #C8461F); box-shadow: 0 12px 26px -12px rgba(120, 40, 10, .7);
  animation: fs-banner-in .6s var(--fa-ease, ease-out) both; transition: opacity .35s, transform .35s; }
.fa-season-banner.fs-tet { background: linear-gradient(135deg, #D8261C, #A0130E); }
.fa-season-banner.fs-trung-thu { background: linear-gradient(135deg, #F5A623, #C8671A); }
.fa-season-banner.fs-giang-sinh { background: linear-gradient(135deg, #2F6B4F, #1D4A36); }
.fa-season-banner.fs-sinh-nhat { background: linear-gradient(135deg, #E86B8C, #C8466B); }
.fa-season-banner .ic { font-size: 1.2rem; }
.fa-season-banner .msg a { color: #FFE9A8; font-weight: 600; margin-left: .35rem; white-space: nowrap; }
.fa-season-banner .fs-off { flex: none; border: 0; border-radius: 999px; padding: .3rem .75rem; font-size: .8rem; font-weight: 600;
  color: #fff; background: rgba(255, 255, 255, .2); }
.fa-season-banner .fs-off:hover { background: rgba(255, 255, 255, .32); }
.fa-season-banner.is-leaving { opacity: 0; transform: translate(-50%, 12px); }
@keyframes fs-banner-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 575px) {
  .fa-season-banner { border-radius: 18px; font-size: .85rem; bottom: 12px; }
  .fs-lantern, .fs-moon { display: none; } /* màn hình nhỏ: đèn lồng che tiêu đề nên ẩn, chỉ giữ hoa rơi và dải chúc */
  .fs-fall:nth-child(n+11), .fs-rise:nth-child(n+7) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-fall, .fs-rise { display: none; }
  .fs-lantern, .fa-season-banner { animation: none; }
}
.fs-fall.f1 { left: 43%; --d: 13s; --w: -5.1s; --dx: -54px; }
.fs-mai.f1 { --s: 15px; } .fs-snow.f1 { --s: 14px; }
.fs-fall.f2 { left: 70%; --d: 12s; --w: -4.4s; --dx: -53px; }
.fs-mai.f2 { --s: 22px; } .fs-snow.f2 { --s: 9px; }
.fs-fall.f3 { left: 6%; --d: 12s; --w: -5.2s; --dx: -52px; }
.fs-mai.f3 { --s: 17px; } .fs-snow.f3 { --s: 8px; }
.fs-fall.f4 { left: 72%; --d: 17s; --w: -1.0s; --dx: 12px; }
.fs-mai.f4 { --s: 15px; } .fs-snow.f4 { --s: 9px; }
.fs-fall.f5 { left: 82%; --d: 21s; --w: -12.2s; --dx: -53px; }
.fs-mai.f5 { --s: 23px; } .fs-snow.f5 { --s: 12px; }
.fs-fall.f6 { left: 52%; --d: 11s; --w: -10.7s; --dx: -55px; }
.fs-mai.f6 { --s: 22px; } .fs-snow.f6 { --s: 14px; }
.fs-fall.f7 { left: 19%; --d: 15s; --w: -6.3s; --dx: 9px; }
.fs-mai.f7 { --s: 15px; } .fs-snow.f7 { --s: 12px; }
.fs-fall.f8 { left: 41%; --d: 19s; --w: -15.5s; --dx: -37px; }
.fs-mai.f8 { --s: 15px; } .fs-snow.f8 { --s: 12px; }
.fs-fall.f9 { left: 75%; --d: 21s; --w: -3.9s; --dx: -48px; }
.fs-mai.f9 { --s: 22px; } .fs-snow.f9 { --s: 13px; }
.fs-fall.f10 { left: 10%; --d: 20s; --w: -1.2s; --dx: -34px; }
.fs-mai.f10 { --s: 21px; } .fs-snow.f10 { --s: 13px; }
.fs-fall.f11 { left: 70%; --d: 17s; --w: -13.2s; --dx: -1px; }
.fs-mai.f11 { --s: 23px; } .fs-snow.f11 { --s: 11px; }
.fs-fall.f12 { left: 48%; --d: 15s; --w: -3.7s; --dx: -37px; }
.fs-mai.f12 { --s: 17px; } .fs-snow.f12 { --s: 8px; }
.fs-fall.f13 { left: 75%; --d: 15s; --w: -7.9s; --dx: 52px; }
.fs-mai.f13 { --s: 19px; } .fs-snow.f13 { --s: 13px; }
.fs-fall.f14 { left: 59%; --d: 15s; --w: -9.1s; --dx: -51px; }
.fs-mai.f14 { --s: 15px; } .fs-snow.f14 { --s: 12px; }
.fs-fall.f15 { left: 55%; --d: 13s; --w: -9.8s; --dx: -41px; }
.fs-mai.f15 { --s: 21px; } .fs-snow.f15 { --s: 11px; }
.fs-fall.f16 { left: 7%; --d: 21s; --w: -1.6s; --dx: 11px; }
.fs-mai.f16 { --s: 23px; } .fs-snow.f16 { --s: 14px; }
.fs-fall.f17 { left: 42%; --d: 16s; --w: -11.1s; --dx: 16px; }
.fs-mai.f17 { --s: 21px; } .fs-snow.f17 { --s: 12px; }
.fs-fall.f18 { left: 60%; --d: 12s; --w: -10.1s; --dx: 60px; }
.fs-mai.f18 { --s: 18px; } .fs-snow.f18 { --s: 11px; }
.fs-fall.f19 { left: 91%; --d: 21s; --w: -1.4s; --dx: 33px; }
.fs-mai.f19 { --s: 18px; } .fs-snow.f19 { --s: 13px; }
.fs-fall.f20 { left: 75%; --d: 21s; --w: -17.3s; --dx: -24px; }
.fs-mai.f20 { --s: 20px; } .fs-snow.f20 { --s: 13px; }
.fs-rise.f1 { left: 48%; --d: 13s; --w: -12.2s; --dx: 5px; }
.fs-rise.f2 { left: 25%; --d: 22s; --w: -2.6s; --dx: -33px; }
.fs-rise.f3 { left: 31%; --d: 17s; --w: -2.2s; --dx: -9px; }
.fs-rise.f4 { left: 54%; --d: 19s; --w: -17.4s; --dx: 23px; }
.fs-rise.f5 { left: 14%; --d: 15s; --w: -6.7s; --dx: 30px; }
.fs-rise.f6 { left: 39%; --d: 15s; --w: -12.3s; --dx: 30px; }
.fs-rise.f7 { left: 39%; --d: 19s; --w: -18.7s; --dx: 8px; }
.fs-rise.f8 { left: 33%; --d: 15s; --w: -1.2s; --dx: -21px; }