body {
    -webkit-font-smoothing: antialiased;
}

.page-bg {
    background-color: #fbe7ef;
    background-image:
        radial-gradient(900px 420px at 5% -10%, #fdd9e7 0%, transparent 60%),
        radial-gradient(760px 400px at 98% 0%, #ece0fb 0%, transparent 62%),
        radial-gradient(700px 500px at 50% 108%, #fcdce9 0%, transparent 60%);
}

.no-bar::-webkit-scrollbar {
    display: none;
}

.no-bar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.card-img {
    transition: transform .55s cubic-bezier(.2,.7,.3,1);
}

.group:hover .card-img {
    transform: scale(1.06);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #f0a2c1;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* Router có <FocusOnNavigate Selector="h1" /> tự đưa focus vào h1 sau mỗi lần chuyển trang để hỗ trợ
   đọc màn hình — giữ hành vi này cho accessibility, chỉ ẩn khung viền focus mặc định của trình duyệt
   vẽ lên tiêu đề (h1 không phải phần tử tương tác nên không cần hiện outline như nút/link/input). */
h1:focus {
    outline: none;
}

/* Icon sóng âm biểu thị có giọng giới thiệu — cùng thiết kế với obs-overlay.html (donate voice),
   dùng lại cho Player: badge tĩnh ở thẻ danh sách, animate khi đang phát ở trang chi tiết. */
.voice-wave {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.voice-wave span {
    display: block;
    width: 2.5px;
    border-radius: 2px;
    background: currentColor;
}

.voice-wave.is-playing span {
    animation: voice-wave-anim .8s ease-in-out infinite alternate;
}

.voice-wave span:nth-child(1) { height: 4px; animation-delay: 0s; }
.voice-wave span:nth-child(2) { height: 9px; animation-delay: .15s; }
.voice-wave span:nth-child(3) { height: 6px; animation-delay: .3s; }
.voice-wave span:nth-child(4) { height: 10px; animation-delay: .1s; }
.voice-wave span:nth-child(5) { height: 5px; animation-delay: .25s; }

@keyframes voice-wave-anim {
    from { transform: scaleY(1); }
    to { transform: scaleY(1.8); }
}