/* ════════════════════════════════════════════════════════════════════════════
   fest/fest.css — ป้ายเทศกาล/วันสำคัญ + หน้าต่าง "?" อธิบาย + ของลอย + สีฉากหลังตามเทศกาล (ใช้ร่วมทุกเทศกาล)
   ════════════════════════════════════════════════════════════════════════════ */
/* ป้ายต่อท้ายป้าย LIVE เหนือหัวข้อ · กดได้ทั้งป้าย (มีวง ? ท้ายป้าย) */
.fx-chips{display:inline-flex;flex-wrap:wrap;gap:8px;margin-left:8px;vertical-align:middle}
.fx-chip{--fx:#ffd08a;--fx2:#9650ff;display:inline-flex;align-items:center;gap:7px;padding:4px 5px 4px 11px;border:0;border-radius:99px;cursor:pointer;
  background:linear-gradient(120deg,color-mix(in srgb,var(--fx) 24%,transparent),color-mix(in srgb,var(--fx2) 22%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fx) 50%,transparent);color:color-mix(in srgb,var(--fx) 70%,#fff);
  font:600 12px var(--fm,ui-monospace,monospace);letter-spacing:.06em;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.fx-chip.th{font:600 13px var(--ff,sans-serif);letter-spacing:0}
.fx-chip:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fx) 80%,transparent),0 6px 16px -8px var(--fx)}
.fx-chip:focus-visible{outline:2px solid var(--fx);outline-offset:2px}
.fx-chip .fx-e{font-size:14px;line-height:1}
.fx-chip .fx-q{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--fx) 85%,#fff);color:#1d1330;font:800 12px/1 var(--ff,sans-serif);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--fx) 60%,transparent);animation:fxPing 2.4s ease-out 3}
@keyframes fxPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fx) 60%,transparent)}80%,100%{box-shadow:0 0 0 9px transparent}}
.fx-chip.calm,.fx-chip.formal{--fx:#f4e3b5;--fx2:#c9a24a}

/* สีฉากหลังตามเทศกาล (ธีมที่ไม่มีไฟล์ CSS เฉพาะ) */
.fx-tint .aur i:nth-child(1){background:radial-gradient(circle,color-mix(in srgb,var(--fx-a) 34%,transparent),transparent 65%)}
.fx-tint .aur i:nth-child(2){background:radial-gradient(circle,color-mix(in srgb,var(--fx-b) 34%,transparent),transparent 65%)}
.fx-tint .aur i:nth-child(3){background:radial-gradient(circle,color-mix(in srgb,var(--fx-a) 22%,transparent),transparent 65%)}
.fx-tint h1 .gl{background-image:linear-gradient(95deg,color-mix(in srgb,var(--fx-a) 55%,#fff),var(--fx-a) 45%,color-mix(in srgb,var(--fx-b) 70%,#fff) 75%,var(--fx-a))}

/* ของลอย (อีโมจิ) — ลอยขึ้นหรือโปรยลงช้าๆ ไม่รับคลิก */
.fx-fly{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fx-fly i{position:absolute;left:var(--x);top:0;font-style:normal;font-size:var(--s);line-height:1;opacity:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));
  animation:fxDown var(--d) linear var(--dl) infinite;will-change:transform,opacity}
.fx-fly.up i{animation-name:fxUp}
.fx-fly i.txt{font-family:var(--fd,sans-serif);font-weight:700;color:rgba(255,255,255,.75)}
@keyframes fxDown{0%{transform:translate(0,-12vh) rotate(0);opacity:0}8%{opacity:var(--o)}50%{transform:translate(var(--sw),48vh) rotate(var(--r))}92%{opacity:var(--o)}100%{transform:translate(0,110vh) rotate(calc(var(--r) * 2));opacity:0}}
@keyframes fxUp{0%{transform:translate(0,110vh) scale(.8);opacity:0}10%{opacity:var(--o)}50%{transform:translate(var(--sw),55vh) scale(1)}90%{opacity:var(--o)}100%{transform:translate(0,-12vh) scale(1.05);opacity:0}}

/* วันพระ: พักของเล่นทุกอย่าง (prop ของธีม + ของลอย) */
.fx-calm .hw,.fx-calm .fx-fly{display:none!important}

/* หน้าต่างอธิบายเทศกาล */
.fx-pop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(10,12,48,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fxFade .2s ease}
.fx-pop[hidden]{display:none}
@keyframes fxFade{from{opacity:0}}
.fx-card{--fx:#ffb347;position:relative;width:min(520px,100%);max-height:min(86vh,720px);overflow:auto;border-radius:26px;background:#fff;color:#15183d;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.55);animation:fxPop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes fxPop{from{transform:translateY(14px) scale(.96);opacity:0}}
.fx-hd{position:relative;display:flex;align-items:center;gap:14px;padding:22px 22px 16px;background:linear-gradient(135deg,color-mix(in srgb,var(--fx) 22%,#fff),#fff 70%)}
.fx-badge{flex:none;display:grid;place-items:center;width:62px;height:62px;border-radius:20px;background:color-mix(in srgb,var(--fx) 30%,#fff);font-size:34px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fx) 45%,#fff)}
.fx-hd h3{margin:0;font:700 22px/1.25 var(--fd,sans-serif);color:#15183d}
.fx-hd small{display:block;margin-top:4px;font-size:13.5px;color:#63678a}
.fx-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(21,24,61,.06);color:#15183d;font-size:20px;line-height:1;cursor:pointer}
.fx-x:hover{background:rgba(21,24,61,.12)}
.fx-bd{padding:4px 22px 6px}
.fx-bd p{margin:0 0 12px;font-size:15.5px;line-height:1.72;color:#2e3256}
.fx-bd p.note{display:inline-block;padding:5px 12px;border-radius:99px;background:color-mix(in srgb,var(--fx) 18%,#fff);color:#5a3b06;font-weight:600;font-size:14px}
.fx-ft{display:flex;justify-content:flex-end;padding:8px 22px 20px}
.fx-ok{border:0;border-radius:14px;padding:11px 22px;background:#161c5e;color:#fff;font:600 15px var(--ff,sans-serif);cursor:pointer}
.fx-ok:hover{background:#3439a8}
.fx-more{display:flex;gap:6px;flex-wrap:wrap;padding:0 22px 4px}
.fx-more button{border:0;border-radius:99px;padding:6px 12px;background:#eef0fb;color:#161c5e;font:600 13px var(--ff,sans-serif);cursor:pointer}
.fx-more button.on{background:#161c5e;color:#fff}

@media (max-width:560px){
  .fx-chips{margin:8px 0 0;display:flex}
  .fx-pop{place-items:end center;padding:0}
  .fx-card{width:100%;border-radius:24px 24px 0 0;max-height:88vh}
}
@media (prefers-reduced-motion:reduce){.fx-fly{display:none}.fx-chip .fx-q,.fx-card,.fx-pop{animation:none}}