@media (max-width: 768px) {

    .table-card-mobile thead {
        display: none;
    }

    .table-card-mobile,
    .table-card-mobile tbody,
    .table-card-mobile tr,
    .table-card-mobile td {
        display: block;
        width: 100%;
        border: none !important;
    }

    .table-card-mobile tr.table-row {
        background: #fff;
        margin-bottom: 16px;
        border-radius: 14px;
        padding: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

    .table-card-mobile td {
        padding: 6px 0;
    }

    /* sembunyikan No */
    .table-card-mobile .td-no {
        display: none;
    }

    /* label */
    .table-card-mobile td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        color: #888;
        display: block;
        margin-bottom: 2px;
    }

    /* hilangkan label aksi */
    .table-card-mobile .td-aksi::before {
        content: "";
    }

    /* nama */
    .table-card-mobile .td-nama {
        margin-bottom: 1px;
    }

    .table-card-mobile .td-nama h6 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 2px;
    }

    /* username */
    /* .table-card-mobile .username-mobile {
        font-size: 12px;
        color: #999;
        display: block;
        margin-bottom: 20px;
    } */
     .table-card-mobile .username-mobile {
    display: none;
}

    /* spacing antar field */
    .table-card-mobile td:not(.td-nama):not(.td-aksi) {
        border-bottom: 1px dashed #f1f1f1;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }

    /* tombol */
    .table-card-mobile .td-aksi {
        margin-top: 1px;
    }

    .table-card-mobile .btn {
        width: 100%;
        border-radius: 8px;
    }
}
@media (max-width: 768px) {

    .card {
        margin-left: 4px;
        margin-right: 4px;
    }

    .card.p-4 {
        padding: 10px !important;
    }
}