/* =========================================================================
   FIX LỖI NÚT PLAY/PAUSE BỊ ĐEN NGÒM
   ========================================================================= */
.controls-row .play-pause-btn {
    background: transparent !important;       
    background-color: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    width: 65px !important;
    height: 65px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ép hình ảnh con bên trong nút không được ăn theo bộ lọc làm đen toàn bộ */
.controls-row .play-pause-btn .ui-icon-img,
.controls-row .play-pause-btn img {
    width: 48px !important;                   
    height: 48px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    
    /* 🔥 FIX CORE: Khôi phục màu sắc gốc của file icon để không bị nhuộm đen nguyên khối */
    filter: none !important; 
    -webkit-filter: none !important;
}

/* =========================================================================
   FIX LỖI THANH TIẾN TRÌNH BỊ NHẢY RA GIỮA (0%) & CHUẨN HÓA THEO THEME.CSS
   ========================================================================= */
.progress-bar {
    position: relative;
    width: 100% !important;
    height: 4px !important;
    background-color: var(--progress-bg) !important; /* 🌟 CHUẨN HÓA: Đổi #e0e0e0 thành màu xám e9ecef của hệ thống */
    border-radius: 2px !important;
    cursor: pointer !important;
    margin-bottom: 8px !important;
    touch-action: none; /* Ngăn trình duyệt cuộn màn hình khi ngón tay đang giữ kéo trượt thanh nhạc */
}

.progress-current {
    position: absolute;
    top: 0;
    left: 0;
    height: 100% !important;
    background-color: var(--progress-current) !important; /* 🌟 CHUẨN HÓA: Đổi #000000 thành màu đen thanh lịch 1a1a1a của theme */
    border-radius: 2px 0 0 2px !important;
    
    /* 🔥 MỞ KHÓA KÉO TRƯỢT: Loại bỏ hoàn toàn !important tại đây để JavaScript có quyền thay đổi độ dài khi kéo đi kéo lại */
    width: 0%; 
    
    transition: none !important; 
    pointer-events: none !important; /* Lực chạm ngón tay xuyên thấu qua vệt màu để tính tọa độ chuẩn */
}

.progress-dot {
    position: absolute;
    top: 50% !important;
    
    /* 🔥 MỞ KHÓA KÉO TRƯỢT: Loại bỏ !important tại đây để chấm tròn có thể tự do dịch chuyển chạy theo ngón tay */
    left: 0%; 
    
    width: 12px !important;
    height: 12px !important;
    background-color: var(--progress-current) !important; /* 🌟 CHUẨN HÓA: Đổi #000000 thành màu đen 1a1a1a đồng bộ với thanh trượt */
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transition: none !important; 
    pointer-events: none !important; /* Chạm trúng chấm đen vẫn tính tọa độ mượt mà của thanh nền */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}


/* ==========================================================================
   HIỆU ỨNG TƯƠNG TÁC PHẢN HỒI (ACTIVE STATES TRÊN MOBILE THÊM VÀO)
   ========================================================================== */

/* Phản hồi khi chạm tay vào nút Đăng xuất */
.logout-btn:active {
    opacity: 0.5;
}

/* Đổi nền tối hơn một chút khi ngón tay bấm giữ nút Hợp đồng / Gia hạn */
.action-btn:active {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Phản hồi khi chạm vào dải nút nhạc: Trộn bài, Tua bài, Trái tim */
.control-icon:active, .song-icons span:active {
    opacity: 0.4;
    transform: scale(0.92);
}