@media(max-width:768px){

    body{
        font-size:14px;
        background:#f3f7fc;
    }

    .container{
        padding:10px;
    }

    /* HEADER MOBILE */
    .topbar{
        padding:12px 10px;
    }

    .topbar-inner{
        display:flex;
        flex-direction:column;
        gap:12px;
        align-items:center;
    }

    .brand{
        font-size:22px;
        text-align:center;
        line-height:1.3;
    }

    /* MENU MOBILE */
    .menu{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

    .menu a{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:38px;
        padding:10px 6px;
        border-radius:18px;
        font-size:15px;
        color:#fff;
        text-align:center;
        white-space:nowrap;
        text-decoration:none;
    }

    .menu a:nth-child(1){background:#2563eb;}
    .menu a:nth-child(2){background:#16a34a;}
    .menu a:nth-child(3){background:#9333ea;}
    .menu a:nth-child(4){background:#f59e0b;}
    .menu a:nth-child(5){background:#dc2626;}

    /* THỐNG KÊ */
    .grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:10px;
        margin-bottom:12px;
    }

    .stat{
        min-height:86px;
        padding:12px;
        border-radius:14px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
        gap:6px;
        font-size:14px;
        line-height:1.25;
    }

    .stat b{
        font-size:20px;
        color:#dc2626;
        line-height:1.1;
    }

    .grid .stat:first-child{
        align-items:center !important;
        text-align:center !important;
    }

    .grid .stat:first-child b{
        width:100%;
        text-align:center;
        display:block;
        font-size:30px;
    }

    .stat a,
    a[href*="export_excel"]{
        width:100%;
        margin-top:4px;
        padding:9px 8px;
        border-radius:10px;
        font-size:13px;
        background:#16a34a !important;
        color:#fff !important;
        text-align:center;
        text-decoration:none;
    }

    /* CARD MOBILE */
    .card{
        margin:12px 6px 18px;
        padding:20px 16px !important;
        border-radius:16px;
        overflow:hidden;
    }

    .card h2,
    .card h3{
        font-size:24px;
        line-height:1.25;
        margin-bottom:14px;
    }

    /* FORM LỌC TRANG CHỦ */
    .top-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        align-items:stretch !important;
        margin-bottom:10px;
    }

    .top-actions > *{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        flex:none !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    .top-actions input,
    .top-actions select{
        grid-column:1 / -1 !important;
        height:42px !important;
        padding:9px 10px !important;
        font-size:13px !important;
        border-radius:10px !important;
    }

    .top-actions button,
    .top-actions a,
    .top-actions .btn,
    .top-actions .btn.green,
    .top-actions .btn.gray,
    .top-actions .btn-report,
    .top-actions .btn-home{
        grid-column:auto !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        height:auto !important;
        min-height:44px !important;
        padding:10px 6px !important;
        border-radius:12px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        font-size:14px !important;
        line-height:1.2 !important;
        white-space:normal !important;
        text-decoration:none !important;
        color:#fff !important;
    }

    .top-actions button{
        background:#2563eb !important;
    }

    .top-actions .btn.green{
        background:#16a34a !important;
    }

    .top-actions .btn-report{
        background:#7c3aed !important;
    }

    .top-actions .btn-home{
        background:#0f766e !important;
    }

    .top-actions .btn.gray{
        background:#6b7280 !important;
    }

    /* FORM CHUNG */
    .form-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .field{
        width:100%;
        margin-bottom:0;
    }

    .field label{
        display:block;
        font-size:15px;
        line-height:1.3;
        margin-bottom:6px;
    }

    .field input,
    .field select,
    .field textarea,
    input,
    select,
    textarea{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:46px;
        padding:11px 12px !important;
        font-size:15px !important;
        border-radius:10px !important;
    }

    textarea{
        min-height:90px;
        height:auto;
    }

    .form-grid button,
    .card button,
    .card .btn{
        min-height:35px;
        padding:11px 10px !important;
        font-size:15px !important;
        border-radius:10px !important;
        margin-bottom:10px;
    }

    .card button[type="submit"],
    .form-grid button[type="submit"]{
        background:#2563eb !important;
        color:#fff !important;
        opacity:1 !important;
        min-height:48px;
        box-shadow:0 6px 16px rgba(37,99,235,.25);
    }

    .card button[type="submit"]:disabled,
    .form-grid button[type="submit"]:disabled{
        background:#94a3b8 !important;
        color:#fff !important;
        opacity:1 !important;
    }

    .field[style]{
        grid-column:auto !important;
    }

    input[type="date"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="text"],
    input[type="password"]{
        appearance:auto;
        -webkit-appearance:none;
    }

    /* TABLE MOBILE */
    .table-wrap{
        width:100%;
        max-height:70vh;
        overflow-y:auto;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        border:1px solid #ddd;
        border-radius:10px;
    }

    table{
        min-width:1550px;
        font-size:14px;
    }

    th,
    td{
        padding:6px 7px;
        white-space:nowrap;
    }

    th{
        font-size:14px !important;
    }

    table thead th{
        position:sticky;
        top:0;
        background:#eaf2ff;
        z-index:2;
    }

    .card .table-wrap table{
        min-width:720px;
    }

    /* BADGE */
    .badge{
        font-size:11px;
        padding:4px 7px;
        border-radius:10px;
        white-space:normal;
    }

    .badge.overdue{
        font-size:11px;
        padding:4px 7px;
    }

    /* NÚT THAO TÁC */
    .action-col{
        min-width:250px;
        white-space:nowrap;
    }

    .action-col .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        margin:2px;
        padding:7px 9px !important;
        font-size:12px !important;
        border-radius:8px;
        min-width:54px;
        color:#fff !important;
        text-decoration:none;
    }

    .action-col .btn:first-child{
        background:#16a34a !important;
    }

    .action-col .btn.orange{
        background:#f97316 !important;
    }

    .action-col .btn.purple{
        background:#7c3aed !important;
    }

    .action-col .btn.red{
        background:#dc2626 !important;
    }

    /* LOGIN MOBILE */
    .login-container{
        width:calc(100% - 28px);
        max-width:420px;
        margin:28px auto;
        background:#fff;
        padding:22px 18px !important;
        border-radius:18px;
        box-shadow:0 10px 30px rgba(15,23,42,.08);
    }

    .login-container h2{
        text-align:center;
        font-size:24px;
        margin-bottom:12px;
    }

    .login-container .field{
        margin-bottom:14px;
    }

    .login-form .field{
        margin-bottom:16px;
    }

    .login-container button,
    .login-form button{
        width:100%;
        min-height:46px;
        margin-top:18px;
        background:#16a34a !important;
        font-size:15px;
    }

    .login-extra{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        margin:10px 0 18px;
    }

    .remember-wrap{
        display:flex;
        align-items:center;
        gap:6px;
        font-size:13px;
    }

    .remember-wrap input[type="checkbox"]{
        width:16px !important;
        height:16px !important;
        min-width:16px;
        margin:0;
    }

    .forgot-link{
        color:#2563eb;
        font-size:14px;
    }

    /* CODE / PRE */
    .card code,
    .card pre{
        display:block;
        max-width:100%;
        white-space:pre-wrap;
        word-break:break-all;
        overflow-wrap:anywhere;
        font-size:13px;
        line-height:1.45;
    }

    /* FOOTER */
    .footer{
        font-size:12px;
        padding:12px;
    }
}

/* CSS CHUNG NGOÀI MOBILE */

.btn.blue{
    background:#2563eb;
}

.btn.blue:hover{
    background:#1d4ed8;
}

.btn.contract{
    background:#0f766e !important;
    color:#fff !important;
}

.btn-back-home{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:10px;
    background:#dc2626;
    color:#fff !important;
    font-size:15px;
    text-decoration:none;
    transition:0.2s;
    border:none;
}

.btn-back-home:hover{
    background:#b91c1c;
    color:#fff !important;
}