/* =============================================
   MUA SẮM VUI - UTILITIES
   Helper Classes · @keyframes Animations
   ============================================= */

/* ── Spacing helpers ── */
.px-16 { padding-left: 16px; padding-right: 16px }
.py-16 { padding-top: 16px; padding-bottom: 16px }
.mb-8 { margin-bottom: 8px }
.mb-16 { margin-bottom: 16px }
.mt-16 { margin-top: 16px }

/* ── Typography helpers ── */
.text-center { text-align: center }
.text-sm { font-size: 12px }
.text-muted { color: var(--text-muted) }
.text-accent { color: var(--accent) }
.text-danger { color: var(--red) }
.text-success { color: var(--green) }
.text-warning { color: var(--orange) }

/* ── Flexbox helpers ── */
.flex { display: flex }
.flex-between { display: flex; justify-content: space-between; align-items: center }
.gap-8 { gap: 8px }
.gap-12 { gap: 12px }

/* ── Visibility ── */
.hidden { display: none !important }

/* ── Keyframes ── */
@keyframes bounce {
    to { transform: translateY(-8px) }
}
@keyframes load {
    to { width: 100% }
}
@keyframes notif-pop {
    0% { transform: scale(0) }
    60% { transform: scale(1.2) }
    100% { transform: scale(1) }
}
@keyframes help-pulse {
    0%, 100% { box-shadow: 0 3px 10px rgba(74,108,247,0.35) }
    50% { box-shadow: 0 3px 18px rgba(74,108,247,0.6) }
}
@keyframes glow-p {
    0%, 100% { filter: brightness(1) }
    50% { filter: brightness(1.2) }
}
@keyframes legend-shine {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 4px rgba(245,158,11,0.4)) }
    50% { filter: brightness(1.2) drop-shadow(0 0 8px rgba(245,158,11,0.6)) }
}
@keyframes fire-d {
    to { transform: translateY(-1px) scale(1.15) }
}
@keyframes sp-spin {
    to { transform: rotate(360deg) }
}
@keyframes shimmer {
    0% { background-position: 200% 0 }
    100% { background-position: -200% 0 }
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0 }
    to { transform: translateY(0); opacity: 1 }
}