body {

    font-family: 'Sarabun', sans-serif;

    background: #f5f6f8;

    font-size: 15px;

    color: #333;

}

.navbar {

    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);

}

.navbar-brand {

    font-weight: 700;

}

.card {

    border: 0;

    border-radius: 10px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);

}

.card-header {

    font-size: 18px;

    font-weight: 600;

}

.form-control,
.form-select {

    border-radius: 6px;

}

.form-control:focus,
.form-select:focus {

    border-color: #198754;

    box-shadow: 0 0 0 .15rem rgba(25, 135, 84, .20);

}

.btn {

    border-radius: 6px;

}

.table {

    vertical-align: middle;

}

.table thead {

    background: #198754;

    color: #ffffff;

}

.required {

    color: #dc3545;

    font-weight: bold;

}

footer {

    color: #777;

    font-size: 14px;

}

.badge {

    font-size: 13px;

}

img.member-photo {

    max-width: 120px;

    border-radius: 6px;

}

textarea {

    resize: vertical;

}

.dataTables_wrapper .dataTables_filter input {

    margin-left: 5px;

}

.dataTables_wrapper .dataTables_length select {

    margin: 0 5px;

}

.action-btn {

    margin-right: 3px;

}

.login-box {

    max-width: 420px;

    margin: 50px auto;

}

.dashboard-card {

    border-radius: 10px;

    color: #fff;

    padding: 20px;

    margin-bottom: 20px;

}

.dashboard-card h2 {

    margin: 0;

    font-size: 34px;

    font-weight: 700;

}

.dashboard-card p {

    margin: 0;

    font-size: 16px;

}

.bg-blue {

    background: #0d6efd;

}

.bg-green {

    background: #198754;

}

.bg-orange {

    background: #fd7e14;

}

.bg-red {

    background: #dc3545;

}

.upload-note {

    font-size: 13px;

    color: #666;

}

@media (max-width:768px) {

    .table {

        font-size: 14px;

    }

    .card-header {

        font-size: 16px;

    }

    .navbar-brand {

        font-size: 18px;

    }

}