/* ========================================================
   TÙY CHỈNH THANH CUỘN (SCROLLBAR)
   Giúp giao diện mượt mà và đỡ thô hơn thanh cuộn mặc định
   ======================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* ========================================================
   TÙY CHỈNH Ô NHẬP SỐ (INPUT NUMBER)
   Ẩn đi 2 mũi tên tăng/giảm mặc định của trình duyệt
   ======================================================== */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] {
    -moz-appearance: textfield; /* Dành cho Firefox */
}

/* ========================================================
   HIỆU ỨNG ANIMATION CHO MODAL VÀ CÁC THÀNH PHẦN
   ======================================================== */
/* Lớp CSS này có thể gán vào Modal bằng JS khi mở lên */
.modal-enter {
    opacity: 0;
    transform: scale(0.95);
}
.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 250ms ease-out, transform 250ms ease-out;
}

/* Hiệu ứng nhịp đập nhẹ cho các thông báo quan trọng (ví dụ: đang bù bài) */
@keyframes softPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}
.animate-soft-pulse {
    animation: softPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Khóa cuộn trang khi Modal đang mở */
body.modal-open {
    overflow: hidden;
}