/*Bo góc các hộp thoại và viền radius*/
.card-app-modern {
        /* Bo góc 15px theo ý bạn */
        border-radius: 15px !important;
        
        /* Loại bỏ viền mặc định */
        border: none !important;
        
        /* Đổ bóng đậm hơn nhưng vẫn mềm mại (Soft Shadow) */
        /* Thông số: ngang 0, dọc 4px, mờ 12px, độ đậm màu đen 0.1 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
        
        /* Hiệu ứng mượt khi di chuột (nếu dùng trên Desktop) */
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        
        background-color: #ffffff;
    }

    /* Hiệu ứng khi nhấn vào (giống cảm giác chạm trên App) */
    .card-app-modern:active {
        transform: scale(0.98);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    }
    
/*Tiêu đề hiện đại và viền đếm số*/
            .title-modern {
                display: inline-flex;
                align-items: center;
                letter-spacing: 0.1px;
                background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
                padding: 12px 6px;
                border-left: 5px solid #0d6efd;
                /* Vạch màu xanh điểm nhấn */
                border-radius: 8px;
                box-shadow: 0 4px 15px rgba(13, 110, 253, 0.1);
                margin: 0px 0;
            }

            .title-modern i {
                margin-right: 12px;
                font-size: 1.4rem;
            }

            .count-badge {
                background-color: #7b9ed2;
                color: white;
                padding: 2px 10px;
                border-radius: 20px;
                font-size: 0.9rem;
                margin-left: 10px;
                vertical-align: middle;
            }
            
/* Bảng - Container bao quanh bảng để bo góc không bị vỡ */
            .table-responsive-custom {
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
                margin-top: 1rem;
            }

            .custom-table {
                width: 100%;
                border-collapse: collapse;
                background-color: white;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }

            /* Header của bảng */
            .custom-table thead {
                background-color: #0d6efd;
                color: white;
                line-height:1.8;
            }

            .custom-table th {
                padding: 6px;
                text-transform: uppercase;
                font-size: 0.75rem;
                letter-spacing: 0.3px;
                border: none;
            }

            /* Các ô dữ liệu */
            .custom-table td {
                padding: 3px 5px;
                vertical-align: middle;
                color: #444;
                border-bottom: 1px solid #eee;
            }

            /* Hiệu ứng dòng kẻ sọc (Zebra) */
            .custom-table tbody tr:nth-child(even) {
                background-color: #f8f9fa;
            }

            /* Hiệu ứng khi di chuột vào từng dòng */
            .custom-table tbody tr:hover {
                background-color: #f1f4ff;
                transition: background-color 0.2s ease;
                cursor: pointer;
            }

            /* Bo góc cho ô đầu và cuối của header */
            .custom-table thead tr th:first-child {
                border-top-left-radius: 5px;
            }

            .custom-table thead tr th:last-child {
                border-top-right-radius: 5px;
            }