@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800&display=swap');

body{
    margin:0;
    font-family:'Roboto Condensed', Segoe UI, Arial, sans-serif;
    background:#f8fafd ;
    color:#050383;
}

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
}

body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.content{
    flex:1 0 auto;
}

.footer{
    flex-shrink:0;
    margin-top:auto;
}

.login-box{
    width:350px;
    max-width:calc(100% - 30px);
    margin:100px auto;
    background:white;
    padding:30px;
    border-radius:12px;
    box-shadow:0 3px 15px rgba(0,0,0,0.15);
}

.login-box h2{
    text-align:center;
    margin-bottom:20px;
}

.login-box button{
    width:100%;
    margin-top:12px;
}

input,
select{
    width:100%;
    min-height:42px;
    padding:10px;
    margin-top:8px;
    box-sizing:border-box;
    border:1px solid #ddd;
    border-radius:6px;
    font-family:'Roboto Condensed', Segoe UI, Arial, sans-serif;
    font-size:14px;
}

input:focus,
select:focus{
    outline:none;
    border-color:#43a047;
    box-shadow:0 0 0 3px rgba(13,110,253,0.12);
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(90deg, 
        #ff0000, 
        #ff6600,         
        #2b7e2f, 
        #d1d41a, 
        #ecba15, 
        #6610b8, 
        #227ef5, 
        #2b7e2f, 
        #b3c50e,
        #ff0000);
    background-size: 400% 400%;     
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: gradientShift 15s ease infinite;   
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.header:hover {
    animation-duration: 8s;   
}

.logo{
    font-size:22px;
    font-weight:bold;
}

.user-info a{
    color:white;
    text-decoration:none;
}

.menu{
    box-shadow: 0 2px 8px rgba(228, 7, 7, 0.952);       
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    background:#343a40;
    position:fixed;
    top:60px;
    left:0;
    right:0;
    z-index:999;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.menu li a{
    display:block;
    color:rgb(255, 255, 255);
    text-decoration:none;
    padding:9px 16px;
    margin:3px 5px;
    border-radius:5px;
    transition:background .2s ease, opacity .2s ease;
}

.menu li a:hover,
.menu li a.active{
    background: linear-gradient(90deg,
        #ff0844, #bd2a4f, #c50f79, #f06940, #9456f8, #3185ca, #da26cb, #e49b47, #e60b04);
    background-size:400% 400%;
    animation:gradientShift 15s ease infinite;
    color:#fff;
}

.menu li a:hover{
    animation-duration:8s;
}

.content{
    padding:20px;
    margin-top:120px;
}

.content h2{
    margin-top:0;
}

.form-card{
    background:#fff;
    max-width:700px;
    margin:auto;
    padding:25px;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.form-card h3{
    margin-top:0;
}

.form-group{
    margin-bottom:15px;
}

.form-group label{
    display:block;
    margin-bottom:5px;
    font-weight:bold;
}

.form-actions,
.page-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:15px;
}

.filter-box{
    background:white;
    padding:15px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    margin-bottom:20px;
}

.filter-box form{
    display:flex;
    align-items:end;
    gap:12px;
    flex-wrap:wrap;
    width:100%;
}

.filter-item{
    display:flex;
    flex-direction:column;
    min-width:150px;
}

.filter-item label{
    font-weight:bold;
    margin-bottom:5px;
    font-size:13px;
}

.filter-item input,
.filter-item select{
    width:100%;
    margin-top:0;
}

.filter-name{
    min-width:220px;
}

.filter-actions,
.filter-extra-action{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

.filter-extra-action{
    margin-left:auto;
}

.table-container{
    background:white;
    padding:15px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    overflow-x:auto;
}

.table{
    width:100%;
    border-collapse:collapse;
}

.table th{
    background:#025a2a;
    color:white;
    padding:12px;
    text-align:left;
    white-space:nowrap;
}

.table td{
    padding:12px;
    border-bottom:1px solid #eee;
}

.table tr:hover{
    background:#f8f9fa;
}

.table th,
.table td{
    vertical-align:middle;
}

.badge-active{
    background:#198754;
    color:white;
    padding:5px 12px;
    border-radius:20px;
    font-size:13px;
    display:inline-block;
}

.badge-stop{
    background:#dc3545;
    color:white;
    padding:5px 12px;
    border-radius:20px;
    font-size:13px;
    display:inline-block;
}

.role-badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:20px;
    background:#eef3ff;
    color:#43a047;
    font-size:13px;
    font-weight:600;
}

button,
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-add,
.btn-edit,
.btn-back,
.btn-history{
    height:42px;
    min-width:110px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:none;
    border-radius:6px;
    box-sizing:border-box;
    font-family:'Roboto Condensed', Segoe UI, Arial, sans-serif;
    font-size:14px;
    font-weight:600;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
    margin:0;
    vertical-align:middle;
}

button:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-add:hover,
.btn-edit:hover,
.btn-back:hover,
.btn-history:hover{
    opacity:0.9;
}

button,
.btn-primary,
.btn-edit{
    background:#025a2a;
    color:white;
}

.btn-secondary,
.btn-back,
.btn-history{
    background:#170655;
    color:white;
}

.btn-success,
.btn-add{    
    background:linear-gradient(
        90deg,
        #ff0000,
        #ff7f00
    );
    color:white;
}

.btn-danger{
    background:#dc3545;
    color:white;
}

.btn-warning{
    background:#ffc107;
    color:#212529;
}

.table .btn-edit,
.table .btn-history,
.table .btn-back,
.table .btn-danger,
.table .btn-secondary{
    height:34px;
    min-width:70px;
    padding:0 12px;
    font-size:13px;
}

.table .btn-history{
    margin-left:5px;
}

.summary-box{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-bottom:20px;
}

.summary-item{
    background:white;
    padding:15px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.summary-title{
    font-size:13px;
    color:#6c757d;
    margin-bottom:6px;
    font-weight:600;
}

.summary-value{
    font-size:18px;
    font-weight:bold;
}

.alert-working{
    background:#fff3cd;
    color:#856404;
    border:1px solid #ffeeba;
    padding:12px 15px;
    border-radius:8px;
}

.chamcong-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
}

.chamcong-grid .form-card{
    max-width:none;
    margin:0;
}

.footer{
    margin-top:30px;
    padding:20px;
    text-align:center;
}

@media(max-width:768px){

    .header{
        position:static;
        flex-direction:column;
        height:auto;
        padding:10px;
        gap:5px;
    }

    .menu{
        position:static;
        flex-wrap:wrap;
    }

    .menu li{
        flex:1 1 50%;
    }

    .menu li a{
        text-align:center;
        padding:12px 10px;
    }

    .content{
        margin-top:20px;
        padding:15px;
    }

    .filter-box form,
    .form-actions,
    .page-actions,
    .filter-actions,
    .filter-extra-action{
        flex-direction:column;
        align-items:stretch;
        width:100%;
    }

    .filter-item,
    .filter-name,
    .filter-actions,
    .filter-extra-action{
        width:100%;
        min-width:100%;
        margin-left:0;
    }

    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    .btn-add,
    .btn-edit,
    .btn-back,
    .btn-history{
        width:100% !important;
        min-width:100%;
    }

    .table-container{
        overflow-x:auto;
    }

    .table th,
    .table td{
        white-space:nowrap;
        font-size:13px;
    }

    .table .btn-edit,
    .table .btn-history,
    .table .btn-back,
    .table .btn-danger,
    .table .btn-secondary{
        width:auto !important;
        min-width:70px;
    }

    .summary-box,
    .chamcong-grid{
        grid-template-columns:1fr;
    }

    .form-card{
        max-width:100%;
        padding:20px;
    }
}

.revenue-form-card{
    max-width:1100px;
}

.revenue-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:15px;
}

.hidden-field{
    display:none !important;
}

.revenue-total-box{
    margin-top:10px;
    padding:15px;
    border-radius:10px;
    background:#cdf7ea;
    color:#ff0000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
    font-weight:700;
}

.revenue-total-box b{
    font-size:24px;
}

.table small{
    color:#6c757d;
    font-size:12px;
}

@media(max-width:768px){
    .revenue-grid{
        grid-template-columns:1fr;
    }

    .revenue-total-box{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }
}

.revenue-summary-box{
    margin-bottom:20px;
}

.revenue-groups{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:20px;
}

.revenue-group{
    background:white;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    overflow:hidden;
}

.revenue-group summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:15px 18px;
    background:#eef3ff;
    color:#43a047;
}

.revenue-group summary::-webkit-details-marker{
    display:none;
}

.revenue-group summary::before{
    content:'▶';
    font-size:12px;
    transition:transform .2s ease;
}

.revenue-group[open] summary::before{
    transform:rotate(90deg);
}

.revenue-group-main{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    flex:1;
}

.revenue-group-date{
    font-size:18px;
    font-weight:700;
}

.revenue-group-count{
    background:white;
    color:#43a047;
    border-radius:20px;
    padding:5px 12px;
    font-size:13px;
    font-weight:600;
}

.revenue-group-total{
    font-size:22px;
    font-weight:800;
    white-space:nowrap;
}

.revenue-group-subtotal{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    padding:12px 18px;
    border-bottom:1px solid #eee;
    background:#fbfcff;
    font-size:13px;
}

.revenue-group-subtotal span{
    background:#f4f6f9;
    border-radius:20px;
    padding:6px 10px;
}

.revenue-table-container{
    box-shadow:none;
    border-radius:0;
    padding:0;
}

.revenue-table th{
    white-space:nowrap;
}

.revenue-table td{
    vertical-align:top;
    line-height:1.55;
}

.money-total{
    font-size:16px;
    font-weight:800;
    color:#43a047;
    white-space:nowrap;
}

.revenue-total-table{
    margin-top:20px;
}

@media(max-width:768px){
    .revenue-group summary{
        align-items:flex-start;
    }

    .revenue-group-total{
        font-size:18px;
    }

    .revenue-group-subtotal{
        flex-direction:column;
    }
}

.revenue-card-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    padding:15px;
    background:#fbfcff;
}

.revenue-report-card{
    background:white;
    border:1px solid #e9edf5;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 6px rgba(0,0,0,0.06);
}

.revenue-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:14px 15px;
    border-bottom:1px solid #eef1f5;
}

.revenue-card-title{
    font-weight:800;
    margin-bottom:6px;
}

.revenue-card-money{
    color:#43a047;
    font-weight:900;
    font-size:22px;
    white-space:nowrap;
}

.revenue-card-body{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    padding:12px;
}

.revenue-mini-block{
    background:#f8f9fb;
    border-radius:10px;
    padding:10px;
    min-height:120px;
}

.mini-title{
    font-size:13px;
    font-weight:800;
    color:#43a047;
    margin-bottom:8px;
}

.mini-line{
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding:4px 0;
    border-bottom:1px dashed #e1e5ec;
    font-size:13px;
}

.mini-line:last-child{
    border-bottom:none;
}

.mini-line span{
    color:#495057;
}

.mini-line b{
    white-space:nowrap;
}

.mini-note{
    margin-top:6px;
    color:#6c757d;
    font-size:12px;
    line-height:1.4;
}

.mini-empty{
    color:#6c757d;
    font-size:13px;
    padding-top:4px;
}

.revenue-card-footer{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:10px;
    align-items:center;
    padding:10px 15px;
    background:#f8fbff;
    border-top:1px solid #eef1f5;
    font-size:13px;
}

.revenue-card-footer > div{
    min-width:0;
}

.revenue-card-footer b,
.revenue-card-footer small{
    display:block;
}

.footer-label{
    display:block;
    color:#6c757d;
    font-size:12px;
    margin-bottom:2px;
}

.revenue-card-action{
    text-align:right;
}

.revenue-card-action .btn-edit,
.revenue-card-action .btn-history,
.revenue-card-action .btn-back{
    width:auto !important;
    min-width:70px !important;
}

@media(max-width:1200px){
    .revenue-card-list{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){
    .revenue-card-list{
        padding:10px;
    }

    .revenue-card-head{
        flex-direction:column;
    }

    .revenue-card-money{
        font-size:20px;
    }

    .revenue-card-body{
        grid-template-columns:1fr;
    }

    .revenue-mini-block{
        min-height:auto;
    }

    .revenue-card-footer{
        grid-template-columns:1fr;
        align-items:stretch;
    }

    .revenue-card-action{
        text-align:left;
    }

    .revenue-card-action .btn-edit,
    .revenue-card-action .btn-history,
    .revenue-card-action .btn-back{
        width:100% !important;
        min-width:100% !important;
    }
}

body,
input,
select,
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-add,
.btn-edit,
.btn-back,
.btn-history,
.table,
.menu li a{
    font-family:'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
}

body{
    font-size:15px;
}

input,
select{
    font-size:15px;
}

button,
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-add,
.btn-edit,
.btn-back,
.btn-history{
    font-size:15px;
    letter-spacing:.1px;
}

.revenue-day-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:20px;
}

.revenue-day-group{
    background:white;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.10);
    overflow:hidden;
}

.revenue-day-group summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:16px 18px;
    background:#eef3ff;
    color:#43a047;
    user-select:none;
}

.revenue-day-group summary::-webkit-details-marker{
    display:none;
}

.revenue-day-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.revenue-day-arrow{
    font-size:15px;
    transition:transform .2s ease;
    line-height:1;
}

.revenue-day-group[open] .revenue-day-arrow{
    transform:rotate(90deg);
}

.revenue-day-date{
    font-size:21px;
    font-weight:800;
    color:#ff0000;
    white-space:nowrap;
}

.revenue-day-count{
    background:white;
    color:#170655;
    border-radius:20px;
    padding:5px 13px;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
}

.revenue-day-money{
    font-size:25px;
    line-height:1;
    font-weight:900;
    color:#ff0000;
    white-space:nowrap;
}

.revenue-detail-table-wrap{
    box-shadow:none;
    border-radius:0;
    padding:0;
    margin:0;
    border-top:1px solid #dce7ff;
}

.revenue-detail-table th{
    font-size:15px;
    padding:11px 12px;
}

.revenue-detail-table td{
    vertical-align:top;
    line-height:1.55;
    font-size:15px;
    padding:12px;
}

.revenue-detail-table tr:hover{
    background:#fbfcff;
}

.revenue-detail-table small{
    color:#6c757d;
    font-size:13px;
}

.revenue-detail-table .role-badge{
    margin-top:6px;
}

.revenue-detail-table .btn-edit{
    height:34px;
    min-width:68px;
    padding:0 12px;
}

.money-total{
    font-size:17px;
    font-weight:900;
    color:#43a047;
    white-space:nowrap;
}

@media(max-width:768px){
    .revenue-day-group summary{
        align-items:flex-start;
        padding:14px 15px;
    }

    .revenue-day-left{
        flex-wrap:wrap;
        gap:8px;
    }

    .revenue-day-date{
        font-size:18px;
    }

    .revenue-day-money{
        font-size:20px;
    }

    .revenue-day-count{
        font-size:13px;
    }

    .revenue-detail-table th,
    .revenue-detail-table td{
        white-space:nowrap;
        font-size:14px;
    }
}

.revenue-appsheet-detail-wrap{
    overflow-x:auto;
    background:#fff;
}

.revenue-appsheet-detail-table{
    min-width:2200px;
    table-layout:auto;
}

.revenue-appsheet-detail-table th{
    position:sticky;
    top:0;
    z-index:2;
    background:#43a047;
    color:#fff;
    font-size:14px;
    font-weight:800;
    text-transform:none;
    white-space:nowrap;
    padding:10px 11px;
    border-right:1px solid rgba(255,255,255,.18);
}

.revenue-appsheet-detail-table td{
    font-size:14px;
    line-height:1.35;
    white-space:nowrap;
    padding:10px 11px;
    border-right:1px solid #edf0f5;
    vertical-align:middle;
}

.revenue-appsheet-detail-table tr:nth-child(even) td{
    background:#fbfcff;
}

.revenue-appsheet-detail-table tr:hover td{
    background:#eef5ff;
}

.revenue-long-text{
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.revenue-appsheet-detail-table .money-total{
    font-size:15px;
    font-weight:900;
    color:#43a047;
}

.btn-compact{
    height:30px !important;
    min-width:58px !important;
    padding:0 10px !important;
    font-size:13px !important;
}

.revenue-day-group:not([open]){
    border-left:4px solid #43a047;
}

.revenue-day-group[open]{
    border-left:4px solid #198754;
}

.revenue-day-group[open] summary{
    background:#f1f8ff;
    border-bottom:1px solid #dce7ff;
}

@media(max-width:768px){
    .revenue-appsheet-detail-table{
        min-width:1850px;
    }

    .revenue-appsheet-detail-table th,
    .revenue-appsheet-detail-table td{
        font-size:13px;
        padding:9px 10px;
    }
}

.attendance-summary-box{
    margin-bottom:20px;
}

.attendance-day-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:20px;
}

.attendance-day-group{
    background:white;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.10);
    overflow:hidden;
    border-left:4px solid #43a047;
}

.attendance-day-group[open]{
    border-left-color:#198754;
}

.attendance-day-group summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:16px 18px;
    background:#eef3ff;
    color:#43a047;
    user-select:none;
}

.attendance-day-group[open] summary{
    background:#f1f8ff;
    border-bottom:1px solid #dce7ff;
}

.attendance-day-group summary::-webkit-details-marker{
    display:none;
}

.attendance-day-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex-wrap:wrap;
}

.attendance-day-arrow{
    font-size:15px;
    transition:transform .2s ease;
    line-height:1;
}

.attendance-day-group[open] .attendance-day-arrow{
    transform:rotate(90deg);
}

.attendance-day-date{
    font-size:21px;
    font-weight:800;
    color:#ff1717;
    white-space:nowrap;
}

.attendance-day-count{
    background:white;
    color:#170655  ;
    border-radius:20px;
    padding:5px 13px;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
}

.attendance-day-total{
    display:flex;
    align-items:baseline;
    gap:12px;
    white-space:nowrap;
    color:#ff0000;
}

.attendance-day-total span{
    font-size:18px;
    font-weight:800;
}

.attendance-day-total b{
    font-size:25px;
    line-height:1;
    font-weight:900;
}

.attendance-day-subtotal{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    padding:12px 18px;
    border-bottom:1px solid #eee;
    background:#fbfcff;
    font-size:14px;
}

.attendance-day-subtotal span{
    background:#f4f6f9;
    border-radius:20px;
    padding:6px 10px;
}

.attendance-detail-table-wrap{
    box-shadow:none;
    border-radius:0;
    padding:0;
    margin:0;
    overflow-x:auto;
}

.attendance-detail-table{
    min-width:980px;
    table-layout:auto;
}

.attendance-detail-table th{
    position:sticky;
    top:0;
    z-index:2;
    background:#086134;
    color:#fff;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
    padding:10px 11px;
    border-right:1px solid rgba(255,255,255,.18);
}

.attendance-detail-table td{
    font-size:14px;
    line-height:1.35;
    white-space:nowrap;
    padding:10px 11px;
    border-right:1px solid #edf0f5;
    vertical-align:middle;
}

.attendance-detail-table tr:nth-child(even) td{
    background:#fbfcff;
}

.attendance-detail-table tr:hover td{
    background:#eef5ff;
}

.attendance-total-row td{
    font-weight:900;
    background:#f1f3f5 !important;
    color:#212529;
}

.attendance-total-table{
    margin-top:20px;
}

.mobile-scroll-note{
    display:none;
    padding:8px 12px;
    background:#fff7e6;
    color:#8a5a00;
    font-size:13px;
    font-weight:700;
    border-bottom:1px solid #ffe0a3;
}

@media(max-width:768px){
    .attendance-day-group summary{
        align-items:flex-start;
        padding:14px 15px;
        flex-direction:column;
    }

    .attendance-day-left{
        gap:8px;
    }

    .attendance-day-date{
        font-size:18px;
    }

    .attendance-day-count{
        font-size:13px;
    }

    .attendance-day-total{
        width:100%;
        justify-content:space-between;
    }

    .attendance-day-total span{
        font-size:16px;
    }

    .attendance-day-total b{
        font-size:21px;
    }

    .attendance-day-subtotal{
        padding:10px 14px;
        font-size:13px;
        gap:8px;
    }

    .mobile-scroll-note{
        display:block;
    }

    .attendance-detail-table{
        min-width:850px;
    }

    .attendance-detail-table th,
    .attendance-detail-table td{
        font-size:13px;
        padding:9px 10px;
    }

    .attendance-detail-table th:nth-child(3),
    .attendance-detail-table td:nth-child(3){
        position:sticky;
        left:0;
        z-index:3;
    }

    .attendance-detail-table th:nth-child(3){
        background:#43a047;
    }

    .attendance-detail-table td:nth-child(3){
        background:white;
        box-shadow:2px 0 4px rgba(0,0,0,0.05);
    }

    .attendance-detail-table tr:nth-child(even) td:nth-child(3){
        background:#fbfcff;
    }
}

.alert-success{
    background:#e8f5e9;
    color:#1b5e20;
    border:1px solid #c8e6c9;
    padding:12px 15px;
    border-radius:8px;
}

.alert-error{
    background:#fdecea;
    color:#b71c1c;
    border:1px solid #f5c6cb;
    padding:12px 15px;
    border-radius:8px;
}

.chamcong-single{
    max-width:620px;
    margin:0 auto;
}

.chamcong-single .form-card{
    max-width:none;
    margin:0;
}

.login-table{
    min-width:900px;
}

.login-table th,
.login-table td{
    white-space:nowrap;
}

.login-table td:nth-child(6){
    max-width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media(max-width:768px){
    .chamcong-single{
        max-width:100%;
    }

    .login-table{
        min-width:820px;
    }

    .login-table th:nth-child(3),
    .login-table td:nth-child(3){
        position:sticky;
        left:0;
        z-index:3;
    }

    .login-table th:nth-child(3){
        background:#43a047;
    }

    .login-table td:nth-child(3){
        background:white;
        box-shadow:2px 0 4px rgba(0,0,0,0.05);
    }
}

.alert-working,
.alert-success,
.alert-error{
    font-size:16px;
    font-weight:700;
    line-height:1.45;
    margin:0 0 15px 0;
}

.chamcong-single-wide,
.chamcong-single{
    max-width:980px;
}

.chamcong-action-row{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:12px;
    align-items:end;
}

.chamcong-action-row .form-group,
.chamcong-action-row .form-actions{
    margin:0;
}

.chamcong-action-row .chamcong-button-actions{
    align-self:end;
}

.chamcong-action-row .chamcong-button-actions button{
    min-width:140px;
}

.chamcong-action-row-photo{
    grid-template-columns:1fr 1fr 1.4fr auto;
}

.photo-field input[type="file"]{
    padding:8px;
    background:#fff;
}

.attendance-photo{
    width:52px;
    height:52px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid #ddd;
    display:block;
}

.test-attendance-table th,
.test-attendance-table td{
    white-space:nowrap;
}

@media(max-width:768px){
    .chamcong-single-wide,
    .chamcong-single{
        max-width:100%;
    }

    .chamcong-action-row,
    .chamcong-action-row-photo{
        grid-template-columns:1fr;
    }

    .chamcong-action-row .chamcong-button-actions button{
        width:100% !important;
        min-width:100%;
    }

    .attendance-photo{
        width:46px;
        height:46px;
    }
}

.alert-info{
    background:#e3f2fd;
    color:#ff0000;
    border:1px solid #bbdefb;
    padding:12px 15px;
    border-radius:8px;
    font-size:16px;
    font-weight:700;
    line-height:1.45;
    margin:0 0 15px 0;
}

.page-note{
    background:#fff;
    border-left:4px solid #43a047;
    padding:10px 12px;
    border-radius:8px;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
    margin-top:-5px;
    margin-bottom:15px;
}

.page-note code{
    font-family:Consolas, monospace;
    background:#f4f6f9;
    padding:2px 6px;
    border-radius:4px;
}

.btn-cham-vao,
.btn-cham-ra{
    height:48px;
    min-width:170px;
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:none;
    border-radius:8px;
    box-sizing:border-box;
    font-family:'Roboto Condensed', Segoe UI, Arial, sans-serif;
    font-size:17px;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
    margin:0;
    vertical-align:middle;
    color:#fff;
    letter-spacing:.2px;
    box-shadow:0 4px 12px rgba(0,0,0,0.18);
}

.btn-cham-vao{
    background: linear-gradient(to right, 
    #ff0000, 
    #43a047,  
    #d5eb13
                                );
}

.btn-cham-ra{
    background: linear-gradient(to right, 
    #ff0000, 
    #43a047,  
    #d5eb13
                                );
}

.btn-cham-vao:hover,
.btn-cham-ra:hover{
    opacity:.92;
    transform:translateY(-1px);
}

.chamcong-single,
.chamcong-single-wide{
    width:100%;
    max-width:none !important;
    margin:0;
}

.chamcong-single .form-card,
.chamcong-single-wide .form-card{
    width:100%;
    max-width:none;
    margin:0;
}

.chamcong-action-row{
    grid-template-columns:1fr 1fr 190px;
    width:100%;
}

.chamcong-action-row-photo{
    grid-template-columns:1fr 1fr 1.3fr 200px;
}

.chamcong-action-row .chamcong-button-actions button{
    width:100% !important;
    min-width:100%;
}

.photo-compress-note{
    background:#fff8e1;
    border:1px solid #ffe0a3;
    color:#7a4d00;
    padding:10px 14px;
    border-radius:8px;
    font-size:14px;
    margin:0 0 15px 0;
}

@media(max-width:768px){
    .btn-cham-vao,
    .btn-cham-ra{
        width:100% !important;
        min-width:100%;
    }

    .chamcong-action-row,
    .chamcong-action-row-photo{
        grid-template-columns:1fr;
    }
}

textarea{
    width:100%;
    padding:10px;
    margin-top:8px;
    box-sizing:border-box;
    border:1px solid #ddd;
    border-radius:6px;
    font-family:'Roboto Condensed', Segoe UI, Arial, sans-serif;
    font-size:15px;
    resize:vertical;
}

textarea:focus{
    outline:none;
    border-color:#43a047;
    box-shadow:0 0 0 3px rgba(67,160,71,0.12);
}

.alert-success,
.alert-error{
    padding:13px 16px;
    border-radius:10px;
    margin-bottom:15px;
    font-size:17px;
    line-height:1.4;
}

.alert-success{
    background:#d1e7dd;
    color:#0f5132;
    border:1px solid #badbcc;
}

.alert-error{
    background:#f8d7da;
    color:#842029;
    border:1px solid #f5c2c7;
}

.proposal-summary-box{
    grid-template-columns:repeat(3, 1fr);
}

.proposal-summary-small{
    margin-top:-8px;
}

.proposal-create-box,
.proposal-card{
    background:white;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    overflow:hidden;
    margin-bottom:16px;
}

.proposal-create-box > summary,
.proposal-card > summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px;
    background:#eef8f0;
    color:#2e7d32;
    font-weight:800;
}

.proposal-create-box > summary::-webkit-details-marker,
.proposal-card > summary::-webkit-details-marker{
    display:none;
}

.proposal-create-box > summary::before,
.proposal-card > summary::before{
    content:'▶';
    font-size:12px;
    transition:transform .2s ease;
}

.proposal-create-box[open] > summary::before,
.proposal-card[open] > summary::before{
    transform:rotate(90deg);
}

.proposal-form,
.proposal-detail{
    padding:18px;
}

.proposal-form-grid,
.proposal-detail-grid,
.proposal-approval-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
}

.proposal-approval-grid{
    grid-template-columns:repeat(2, 1fr);
    margin-top:15px;
}

.proposal-list{
    display:flex;
    flex-direction:column;
    gap:0;
}

.proposal-summary-main{
    flex:1;
    min-width:0;
}

.proposal-title{
    font-size:19px;
    font-weight:800;
    color:#ff0000;
    margin-bottom:5px;
}

.proposal-meta{
    color:#6c757d;
    font-size:14px;
    font-weight:600;
}

.proposal-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:130px;
    padding:7px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}

.proposal-status-warning{
    background:#fff3cd;
    color:#856404;
}

.proposal-status-success{
    background:#d1e7dd;
    color:#0f5132;
}

.proposal-status-danger{
    background:#f8d7da;
    color:#842029;
}

.proposal-label{
    color:#6c757d;
    font-size:13px;
    font-weight:700;
    margin-bottom:5px;
}

.proposal-value{
    font-size:16px;
    font-weight:800;
    color:#212529;
}

.proposal-value small{
    color:#6c757d;
    font-weight:600;
}

.proposal-content{
    margin-top:16px;
    padding:14px;
    border-radius:10px;
    background:#f8f9fa;
}

.proposal-text{
    line-height:1.55;
    font-size:16px;
}

.proposal-approval-box{
    border:1px solid #eee;
    border-radius:10px;
    padding:14px;
    background:#fff;
}

.proposal-approval-box small{
    display:block;
    margin-top:7px;
    color:#6c757d;
    font-weight:600;
}

.proposal-note,
.proposal-note-small{
    background:#fff3cd;
    color:#856404;
    border:1px solid #ffeeba;
    padding:12px 15px;
    border-radius:10px;
    margin-bottom:15px;
    line-height:1.45;
}

.proposal-note-small{
    margin-top:8px;
    margin-bottom:0;
    font-size:14px;
}

.proposal-decision-form{
    margin-top:16px;
    padding:14px;
    border-radius:10px;
    background:#eef8f0;
    border:1px solid #d6ead8;
}

.boss-decision-form{
    background:#eef3ff;
    border-color:#dbe6ff;
}

.proposal-decision-title{
    font-weight:800;
    margin-bottom:10px;
    color:#2e7d32;
}

.proposal-decision-grid{
    display:grid;
    grid-template-columns:180px 1fr 150px;
    gap:12px;
    align-items:end;
}

.proposal-decision-grid .form-group{
    margin-bottom:0;
}

@media(max-width:768px){
    .proposal-summary-box,
    .proposal-summary-small,
    .proposal-form-grid,
    .proposal-detail-grid,
    .proposal-approval-grid,
    .proposal-decision-grid{
        grid-template-columns:1fr;
    }

    .proposal-card > summary,
    .proposal-create-box > summary{
        align-items:flex-start;
        flex-direction:column;
    }

    .proposal-status{
        width:100%;
        min-width:100%;
    }

    .proposal-title{
        font-size:17px;
    }

    .proposal-form,
    .proposal-detail{
        padding:14px;
    }
}

.proposal-form-grid-4{
    grid-template-columns:repeat(4, 1fr);
}

.proposal-line-table-wrap,
.proposal-detail-table-wrap{
    padding:0;
    box-shadow:none;
    border-radius:8px;
    margin-top:10px;
}

.proposal-line-table th,
.proposal-line-table td,
.proposal-detail-table th,
.proposal-detail-table td{
    white-space:nowrap;
    vertical-align:middle;
}

.proposal-line-table td:nth-child(2),
.proposal-detail-table td:nth-child(2){
    min-width:240px;
}

.proposal-line-table input{
    margin-top:0;
    min-height:38px;
}

.proposal-line-table .btn-remove-line{
    height:38px;
    min-width:68px;
    padding:0 12px;
}

.proposal-amount{
    font-weight:800;
    color:#2e7d32;
    background:#f8f9fa;
}

.proposal-total-line{
    margin-top:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    background:#eef8f0;
    border:1px solid #d6ead8;
    border-radius:10px;
    padding:13px 15px;
    color:#2e7d32;
    font-weight:800;
}

.proposal-total-line b{
    font-size:22px;
}

.proposal-total-row{
    background:#f1f8f2;
    color:#2e7d32;
    font-weight:800;
}

.proposal-total-row td{
    border-bottom:none;
}

@media(max-width:768px){
    .proposal-form-grid-4{
        grid-template-columns:1fr;
    }

    .proposal-line-table-wrap::before,
    .proposal-detail-table-wrap::before{
        content:'Vuốt ngang để xem đầy đủ chi tiết';
        display:block;
        padding:10px 12px;
        font-size:13px;
        font-weight:700;
        color:#6c757d;
        background:#f8f9fa;
        border-bottom:1px solid #eee;
    }

    .proposal-total-line{
        flex-direction:column;
        align-items:flex-start;
    }
}

.proposal-create-box{
    background:transparent;
    box-shadow:none;
    border-radius:0;
    overflow:visible;
    margin-bottom:16px;
}
.proposal-create-box > summary{
    width:max-content;
    min-width:170px;
    height:42px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:6px;
    background:#198754;
    color:white;
    font-weight:700;
    line-height:1;
    box-shadow:none;
}

.proposal-create-box > summary::before{
    display:none;
    content:'';
}

.proposal-create-box[open] > summary{
    margin-bottom:12px;
}

.proposal-create-box .proposal-form{
    background:white;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

@media(max-width:768px){
    .proposal-create-box > summary{
        width:100%;
        min-width:100%;
    }
}

.proposal-history-title{
    margin:18px 0 5px 0;
    font-size:20px;
    font-weight:900;
    color:#212529;
}

.proposal-history-note{
    margin:0 0 12px 0;
    color:#6c757d;
    font-size:14px;
    font-weight:700;
}

.proposal-detail-mobile-list{
    display:none;
}

.proposal-edit-box{
    margin-top:16px;
    border:1px solid #ffe0a3;
    border-radius:10px;
    overflow:hidden;
    background:#fffaf0;
}

.proposal-edit-box > summary{
    cursor:pointer;
    list-style:none;
    padding:13px 15px;
    font-weight:900;
    color:#8a5a00;
    background:#fff3cd;
}

.proposal-edit-box > summary::-webkit-details-marker{
    display:none;
}

.proposal-edit-box > summary::before{
    content:'▶';
    display:inline-block;
    margin-right:8px;
    font-size:12px;
    transition:transform .2s ease;
}

.proposal-edit-box[open] > summary::before{
    transform:rotate(90deg);
}

.proposal-edit-box .proposal-form{
    box-shadow:none;
    border-radius:0;
    margin:0;
}

.proposal-cancel-form{
    margin:0;
    padding:0 18px 18px 18px;
}

@media(max-width:768px){
    .proposal-detail-table-wrap{
        display:none;
    }

    .proposal-detail-mobile-list{
        display:flex;
        flex-direction:column;
        gap:10px;
        margin-top:10px;
    }

    .proposal-mobile-card{
        background:white;
        border:1px solid #e9edf5;
        border-radius:12px;
        padding:12px;
        box-shadow:0 1px 6px rgba(0,0,0,0.06);
    }

    .proposal-mobile-title{
        font-size:16px;
        font-weight:900;
        color:#212529;
        margin-bottom:8px;
        line-height:1.35;
    }

    .proposal-mobile-row{
        display:flex;
        justify-content:space-between;
        gap:12px;
        padding:7px 0;
        border-top:1px dashed #e1e5ec;
        font-size:14px;
    }

    .proposal-mobile-row span{
        color:#6c757d;
        font-weight:700;
    }

    .proposal-mobile-row b{
        text-align:right;
        color:#212529;
        font-weight:900;
    }

    .proposal-mobile-total{
        display:flex;
        justify-content:space-between;
        gap:12px;
        background:#eef8f0;
        border:1px solid #d6ead8;
        color:#2e7d32;
        border-radius:12px;
        padding:13px 14px;
        font-size:16px;
        font-weight:900;
    }

    .proposal-cancel-form{
        padding:0 14px 14px 14px;
    }
}

.user-create-card{
    max-width:1200px;
    margin:0;
}

.create-user-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:14px;
}

.create-cvnv-box{
    background:#f8f9fa;
    border:1px solid #e9ecef;
    border-radius:10px;
    padding:14px;
}

.permission-check-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px 12px;
    margin-top:8px;
}

.check-line{
    display:flex;
    align-items:center;
    gap:8px;
    background:white;
    border:1px solid #e9ecef;
    border-radius:8px;
    padding:8px 10px;
    font-weight:700;
}

.check-line input{
    width:auto;
    min-height:auto;
    margin:0;
}

.permission-table-wrap{
    padding:0;
    margin-top:10px;
}

.permission-table th,
.permission-table td{
    text-align:center;
    white-space:nowrap;
}

.permission-table td:first-child,
.permission-table th:first-child{
    text-align:left;
}

.permission-table input[type="checkbox"]{
    width:18px;
    height:18px;
    min-height:18px;
    margin:0;
    cursor:pointer;
}

.permission-table small{
    color:#6c757d;
    font-weight:600;
}

@media(max-width:768px){
    .user-create-card{
        max-width:100%;
    }

    .create-user-grid,
    .permission-check-grid{
        grid-template-columns:1fr;
    }

    .permission-table-wrap::before{
        content:'Vuốt ngang để xem đầy đủ quyền';
        display:block;
        padding:10px 12px;
        font-size:13px;
        font-weight:700;
        color:#6c757d;
        background:#f8f9fa;
        border-bottom:1px solid #eee;
    }

    .permission-table{
        min-width:820px;
    }
}

.show-password-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
    font-weight:700;
    color:#495057;
}

.show-password-row input[type="checkbox"]{
    width:auto;
    min-height:auto;
    margin:0;
}

.table-action-row{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.inline-delete-form{
    display:inline-flex;
    margin:0;
}

.group-note{
    color:#6c757d;
    font-size:13px;
    font-weight:700;
    margin-top:4px;
}

@media(max-width:768px){
    .show-password-row{
        align-items:center;
    }

    .table-action-row,
    .inline-delete-form{
        width:100%;
    }

    .table-action-row .btn-edit,
    .table-action-row .btn-danger{
        width:100% !important;
        min-width:100% !important;
    }
}

.create-user-grid-4{
    grid-template-columns:repeat(4, 1fr);
}

@media(max-width:768px){
    .create-user-grid-4{
        grid-template-columns:1fr;
    }
}

.task-create-box{
    background:transparent;
    box-shadow:none;
    border-radius:0;
    margin-bottom:16px;
}

.task-create-box > summary{
    width:max-content;
    min-width:170px;
    height:42px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:6px;
    cursor:pointer;
    list-style:none;
}

.task-create-box > summary::-webkit-details-marker{
    display:none;
}

.task-create-box[open] > summary{
    margin-bottom:12px;
}

.task-create-body{
    background:#fff;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    padding:18px;
}

.task-form-grid{
    display:grid;
    grid-template-columns:180px 180px 1fr;
    gap:14px;
}

.task-assignee-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    max-height:360px;
    overflow:auto;
    padding:4px;
}

.task-assignee-item{
    display:flex;
    align-items:flex-start;
    gap:8px;
    border:1px solid #e9ecef;
    border-radius:10px;
    background:#fff;
    padding:10px;
    cursor:pointer;
}

.task-assignee-item input{
    width:auto;
    min-height:auto;
    margin-top:3px;
}

.task-assignee-item span{
    min-width:0;
}

.task-assignee-item b,
.task-assignee-item small{
    display:block;
}

.task-assignee-item small{
    color:#6c757d;
    font-weight:700;
    margin-top:3px;
}

.task-section-title{
    margin:18px 0 12px 0;
}

.task-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.task-card{
    background:white;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.10);
    overflow:hidden;
    border-left:4px solid #025a2a;
}

.task-card summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    background:#f8fbff;
    user-select:none;
}

.task-card summary::-webkit-details-marker{
    display:none;
}

.task-card summary::before{
    content:'▶';
    font-size:13px;
    transition:transform .2s ease;
}

.task-card[open] summary::before{
    transform:rotate(90deg);
}

.task-summary-main{
    flex:1;
    min-width:0;
}

.task-title{
    font-size:20px;
    font-weight:900;
    color:#ff0000;
    margin-bottom:5px;
}

.task-meta{
    color:#6c757d;
    font-size:14px;
    font-weight:700;
}

.task-progress-summary{
    width:260px;
    max-width:35%;
}

.task-progress-text{
    text-align:right;
    font-weight:900;
    margin-bottom:6px;
    color:#212529;
}

.task-progress-text-red{
    color:#dc3545 !important;
}

.task-progress-text-yellow{
    color:#b88700 !important;
}

.task-progress-text-green{
    color:#198754 !important;
}

.task-progress-bar{
    width:100%;
    height:14px;
    background:#e9ecef;
    border-radius:999px;
    overflow:hidden;
}

.task-progress-bar span{
    display:block;
    height:100%;
    border-radius:999px;
}

.task-progress-red{
    background:#dc3545;
}

.task-progress-yellow{
    background:#ffc107;
}

.task-progress-green{
    background:#198754;
}

.task-detail{
    padding:18px;
}

.task-detail-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    margin-bottom:14px;
}

.task-content-box{
    background:#f8f9fa;
    border-radius:10px;
    padding:14px;
    line-height:1.55;
    margin-bottom:14px;
}

.task-receiver-table-wrap{
    padding:0;
    box-shadow:none;
    border-radius:10px;
    margin-bottom:14px;
}

.task-receiver-table th,
.task-receiver-table td{
    white-space:nowrap;
}

.task-complete-box{
    background:#eef8f0;
    border:1px solid #d6ead8;
    border-radius:10px;
    padding:14px;
    margin-top:14px;
}

@media(max-width:1200px){
    .task-assignee-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:768px){
    .task-create-box > summary{
        width:100%;
        min-width:100%;
    }

    .task-create-body{
        padding:14px;
    }

    .task-form-grid,
    .task-detail-grid,
    .task-assignee-grid{
        grid-template-columns:1fr;
    }

    .task-card summary{
        flex-direction:column;
        align-items:flex-start;
    }

    .task-progress-summary{
        width:100%;
        max-width:100%;
    }

    .task-progress-text{
        text-align:left;
    }

    .task-receiver-table-wrap::before{
        content:'Vuốt ngang để xem đầy đủ người nhận việc';
        display:block;
        padding:10px 12px;
        font-size:13px;
        font-weight:700;
        color:#6c757d;
        background:#f8f9fa;
        border-bottom:1px solid #eee;
    }

    .task-receiver-table{
        min-width:900px;
    }
}

.badge-warning{
    background:#ffc107;
    color:#212529;
    padding:5px 12px;
    border-radius:20px;
    font-size:13px;
    display:inline-block;
    font-weight:800;
}

.task-status-grid{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:14px;
}

.task-status-grid .form-group{
    margin-bottom:0;
}

@media(max-width:768px){
    .task-status-grid{
        grid-template-columns:1fr;
    }
}

.footer {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.footer-card {
    width: 100%;
    min-height: 92px;
    background: #1e2229; 
    color: #f1f3f5;      
    border-radius: 0;
    padding: 18px 22px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2); 
    font-weight: 800;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px; 
}

.footer-main {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .5px;
}

.footer-sub,
.footer-copy {
    display: block;
    font-size: 13px; 
    font-weight: 600;
    opacity: .8;     
    line-height: 1.5; 
}

.footer-card a {
    color: #38bdf8; 
    font-weight: 900;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-card a:hover {
    color: #7dd3fc;
}

@media(max-width:768px){
    .footer-card{
        min-height:112px;
        padding:18px 14px;
    }

    .footer-main{
        font-size:16px;
    }

    .footer-sub,
    .footer-copy{
        font-size:13px;
    }
}

.task-create-box{
    margin-top:12px;
}

.revenue-day-arrow{
    width:auto;
    height:auto;
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:0;
    background:transparent;
    color:#198754;
    font-size:18px !important;
    font-weight:900;
    line-height:1;
}

.revenue-day-group[open] .revenue-day-arrow{
    transform:rotate(90deg);
}

@media(max-width:768px){
    .revenue-day-arrow{
        width:auto;
        height:auto;
        min-width:0;
        font-size:19px !important;
    }
}

@media(max-width:768px){
    .proposal-form .proposal-line-table-wrap{
        overflow:visible;
        padding:0;
        background:transparent;
        box-shadow:none;
    }

    .proposal-form .proposal-line-table-wrap::before{
        content:'Nhập chi tiết đề xuất';
        display:block;
        padding:10px 0 6px 0;
        font-size:15px;
        font-weight:900;
        color:#170655;
        background:transparent;
        border:none;
    }

    .proposal-form .proposal-line-table,
    .proposal-form .proposal-line-table thead,
    .proposal-form .proposal-line-table tbody,
    .proposal-form .proposal-line-table tr,
    .proposal-form .proposal-line-table td{
        display:block;
        width:100%;
    }

    .proposal-form .proposal-line-table thead{
        display:none;
    }

    .proposal-form .proposal-line-table tr{
        background:#fff;
        border:1px solid #e9edf5;
        border-radius:14px;
        padding:12px;
        margin-bottom:12px;
        box-shadow:0 1px 6px rgba(0,0,0,.06);
    }

    .proposal-form .proposal-line-table td{
        border-bottom:none;
        padding:6px 0;
        white-space:normal;
    }

    .proposal-form .proposal-line-table td::before{
        display:block;
        margin-bottom:5px;
        font-size:13px;
        font-weight:900;
        color:#170655;
    }

    .proposal-form .proposal-line-table td:nth-child(1)::before{content:'STT';}
    .proposal-form .proposal-line-table td:nth-child(2)::before{content:'Nội dung';}
    .proposal-form .proposal-line-table td:nth-child(3)::before{content:'Số lượng';}
    .proposal-form .proposal-line-table td:nth-child(4)::before{content:'Đơn giá dự kiến';}
    .proposal-form .proposal-line-table td:nth-child(5)::before{content:'Thành tiền';}
    .proposal-form .proposal-line-table td:nth-child(6)::before{content:'Thời gian hoàn thành';}
    .proposal-form .proposal-line-table td:nth-child(7)::before{content:'Thao tác';}

    .proposal-form .proposal-line-table input{
        width:100%;
        min-height:42px;
        margin:0;
    }

    .proposal-form .proposal-line-table .btn-remove-line{
        width:100% !important;
        min-width:100% !important;
    }

    .proposal-form .proposal-line-table .proposal-stt{
        font-size:18px;
        font-weight:900;
        color:#ff0000;
    }
}

.badge-info{
    background:#0dcaf0;
    color:#053642;
    padding:5px 12px;
    border-radius:20px;
    font-size:13px;
    display:inline-block;
    font-weight:800;
}

.badge-muted{
    background:#6c757d;
    color:#fff;
    padding:5px 12px;
    border-radius:20px;
    font-size:13px;
    display:inline-block;
    font-weight:800;
}

.task-badge-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}

.task-row-overdue td{
    background:#fff5f5;
}

.task-overdue-text{
    color:#dc3545;
    font-weight:900;
}

.task-extension-info{
    margin-top:5px;
    font-size:13px;
    font-weight:700;
    white-space:normal;
    line-height:1.35;
}

.task-extension-actions{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:8px;
    min-width:240px;
}

.inline-form{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin:0;
}

.task-reject-extension-form input[type="text"]{
    min-width:180px;
    height:38px;
    padding:0 10px;
}

.task-extend-box,
.task-cancel-box{
    margin-top:14px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid #e9ecef;
    background:#fff;
}

.task-extend-box > summary,
.task-cancel-box > summary{
    list-style:none;
    cursor:pointer;
    width:max-content;
    min-width:130px;
    min-height:42px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    border-radius:8px;
    margin:12px;
}

.task-extend-box > summary{
    background:#ffc107;
    color:#212529;
}

.task-cancel-box > summary{
    background:#dc3545;
    color:#fff;
}

.task-extend-box form,
.task-cancel-box form{
    padding:0 14px 14px 14px;
}

.task-extension-waiting{
    margin-top:12px;
}

@media(max-width:768px){
    .task-extension-actions,
    .inline-form,
    .task-reject-extension-form input[type="text"]{
        width:100%;
    }

    .task-extend-box > summary,
    .task-cancel-box > summary{
        width:calc(100% - 24px);
    }

    .task-receiver-table{
        min-width:1150px;
    }
}

.user-info{
    display:flex;
    align-items:center;
    gap:8px;
    position:relative;
}

.notify-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
}

.notify-bell{
    position:relative;
    width:36px;
    height:36px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff !important;
    text-decoration:none;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.24);
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.notify-bell:hover{
    background:rgba(255,255,255,.26);
}

.notify-count{
    position:absolute;
    top:-6px;
    right:-7px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:99px;
    background:#ff0000;
    color:#fff;
    font-size:11px;
    font-weight:900;
    line-height:20px;
    text-align:center;
    border:2px solid #fff;
}

.notify-dropdown{
    display:none;
    position:absolute;
    top:44px;
    right:0;
    width:330px;
    max-width:calc(100vw - 24px);
    background:#fff;
    color:#212529;
    border-radius:12px;
    box-shadow:0 10px 28px rgba(0,0,0,.25);
    overflow:hidden;
    z-index:1200;
}

.notify-wrap:hover .notify-dropdown{
    display:block;
}

.notify-dropdown-title{
    padding:12px 14px;
    font-weight:900;
    color:#025a2a;
    border-bottom:1px solid #edf0f4;
    background:#f8fafc;
}

.notify-item{
    display:block;
    padding:11px 14px;
    color:#212529 !important;
    text-decoration:none;
    border-bottom:1px solid #edf0f4;
}

.notify-item:hover{
    background:#f4fff7;
}

.notify-item b{
    display:block;
    font-size:14px;
    margin-bottom:3px;
}

.notify-item small{
    display:block;
    color:#6c757d;
    line-height:1.35;
}

.notify-item.is-unread b::before{
    content:'●';
    color:#ff0000;
    margin-right:6px;
    font-size:10px;
    vertical-align:middle;
}

.notify-empty{
    padding:14px;
    color:#6c757d;
    font-weight:700;
}

.notify-view-all{
    display:block;
    padding:11px 14px;
    text-align:center;
    color:#025a2a !important;
    font-weight:900;
    text-decoration:none;
    background:#f8fafc;
}

.notification-page-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin-bottom:14px;
    background:#fff;
    border-radius:12px;
    padding:14px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.notification-page-head > div:last-child{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.notification-list-page{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.notification-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:#fff;
    border-radius:12px;
    padding:14px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    border-left:5px solid #ced4da;
}

.notification-row.is-unread{
    border-left-color:#ff0000;
    background:#fffdf4;
}

.notification-row-main{
    flex:1;
    color:#212529;
    text-decoration:none;
}

.notification-row-title{
    font-size:17px;
    font-weight:900;
    color:#025a2a;
    margin-bottom:5px;
}

.notify-dot{
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#ff0000;
    margin-right:7px;
}

.notification-row-text{
    line-height:1.45;
    color:#495057;
    font-weight:600;
}

.notification-row-time{
    margin-top:6px;
    color:#6c757d;
    font-size:13px;
    font-weight:700;
}

@media(max-width:768px){
    .user-info{
        gap:5px;
        font-size:13px;
    }

    .notify-bell{
        width:32px;
        height:32px;
    }

    .notify-dropdown{
        right:-80px;
        width:300px;
    }

    .notification-page-head,
    .notification-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .notification-page-head > div:last-child,
    .notification-row .btn-history{
        width:100%;
    }
}

.result-count-line{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:4px;
    margin:0 0 8px 0;
    color:#495057;
    font-size:14px;
    font-weight:700;
}

.result-count-line b{
    color:#ff0000;
    font-size:16px;
}

.revenue-total-box{
    position:sticky;
    top:112px;
    z-index:998;
    margin:0 0 15px 0;
    border:1px solid rgba(255,0,0,.12);
    box-shadow:0 6px 18px rgba(0,0,0,.12);
}

.notify-browser-btn{
    width:100%;
    border:0;
    border-top:1px solid #edf0f4;
    background:#fff7df;
    color:#7a5600;
    padding:11px 14px;
    font-family:'Roboto Condensed', Segoe UI, Arial, sans-serif;
    font-weight:900;
    cursor:pointer;
    text-align:center;
}

.notify-browser-btn:hover:not(:disabled){
    background:#ffe7a8;
}

.notify-browser-btn:disabled{
    cursor:not-allowed;
    opacity:.78;
}

.notify-bell.has-new-notify{
    animation:notifyBellPulse 1.2s ease-in-out infinite;
}

@keyframes notifyBellPulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
}

@media(max-width:768px){
    .result-count-line{
        justify-content:flex-start;
        padding-left:2px;
    }

    .revenue-total-box{
        top:105px;
        font-size:16px;
    }
}

.mobile-menu-bar,
.mobile-menu-backdrop,
.mobile-menu-close-li{
    display:none;
}

@media(max-width:768px){
    .mobile-menu-bar{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        background:#343a40;
        padding:8px 12px;
        box-shadow:0 3px 12px rgba(0,0,0,.18);
        border-top:1px solid rgba(255,255,255,.08);
        position:relative;
        z-index:1100;
    }

    .mobile-menu-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        border:0;
        border-radius:8px;
        padding:9px 14px;
        background:linear-gradient(90deg,
            #ff0844, #bd2a4f, #c50f79, #f06940, #9456f8, #3185ca, #da26cb, #e49b47, #e60b04);
        background-size:400% 400%;
        animation:gradientShift 15s ease infinite;
        color:#fff;
        font-family:'Roboto Condensed', Segoe UI, Arial, sans-serif;
        font-size:16px;
        font-weight:900;
        cursor:pointer;
        box-shadow:0 3px 10px rgba(0,0,0,.22);
    }

    .mobile-menu-icon{
        font-size:20px;
        line-height:1;
    }

    .mobile-menu-title{
        color:#fff;
        font-size:15px;
        font-weight:800;
        opacity:.95;
    }

    .mobile-menu-backdrop{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.46);
        opacity:0;
        visibility:hidden;
        transition:opacity .22s ease, visibility .22s ease;
        z-index:1900;
    }

    body.mobile-menu-open .mobile-menu-backdrop{
        opacity:1;
        visibility:visible;
    }

    body.mobile-menu-open{
        overflow:hidden;
    }

    .menu{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:auto !important;
        bottom:0 !important;
        width:min(82vw, 320px);
        max-width:320px;
        height:100vh;
        margin:0 !important;
        padding:12px 12px 18px 12px !important;
        display:flex !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        gap:7px;
        overflow-y:auto;
        background:#343a40;
        border-top:0;
        box-shadow:8px 0 24px rgba(0,0,0,.35);
        z-index:2000;
        transform:translateX(-105%);
        transition:transform .24s ease;
    }

    body.mobile-menu-open .menu{
        transform:translateX(0);
    }

    .mobile-menu-close-li{
        display:block !important;
        flex:0 0 auto !important;
        width:100% !important;
        margin-bottom:4px;
        list-style:none;
    }

    .mobile-menu-close{
        width:100%;
        border:0;
        border-radius:9px;
        padding:11px 12px;
        background:#ffefef;
        color:#b00020;
        font-family:'Roboto Condensed', Segoe UI, Arial, sans-serif;
        font-size:16px;
        font-weight:900;
        text-align:left;
        cursor:pointer;
    }

    .menu li{
        flex:0 0 auto !important;
        width:100% !important;
        list-style:none;
    }

    .menu li a{
        text-align:left !important;
        width:100%;
        box-sizing:border-box;
        margin:0 !important;
        padding:12px 14px !important;
        border-radius:9px;
        font-size:16px;
        font-weight:800;
    }
}

@media(min-width:769px){
    .mobile-menu-bar,
    .mobile-menu-backdrop,
    .mobile-menu-close-li{
        display:none !important;
    }
}

.doanhthu-mobile-card-list{
    display:none;
}

.chamcong-status-card{
    --chamcong-status-title-size:45px;
    --chamcong-status-time-size:18px;
    background:#e8f5e9;
    color:#af061c;
    border:2px solid #9bd3a4;
    border-radius:16px;
    padding:18px 16px;
    margin:0 0 16px 0;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
}

.chamcong-status-title{
    font-size:var(--chamcong-status-title-size);
    font-weight:900;
    line-height:1.05;
    letter-spacing:.5px;
}

.chamcong-status-time{
    margin-top:8px;
    font-size:var(--chamcong-status-time-size);
    font-weight:800;
    line-height:1.35;
}

.chamcong-ca-done{
    text-align:center;
    font-size:24px !important;
    font-weight:900 !important;
}

@media(max-width:768px){
.revenue-detail-table-wrap{
        display:none !important;
    }

    .doanhthu-mobile-card-list{
        display:flex;
        flex-direction:column;
        gap:12px;
        padding:12px;
        background:#f5f7fb;
    }

    .doanhthu-mobile-card{
        background:#fff;
        border-radius:14px;
        border:1px solid #e5eaf2;
        box-shadow:0 3px 12px rgba(0,0,0,.08);
        overflow:hidden;
    }

    .doanhthu-mobile-card-head{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:10px;
        padding:13px 14px;
        border-bottom:1px solid #edf0f5;
        background:#f8fbff;
    }

    .doanhthu-mobile-card-head b{
        display:block;
        font-size:17px;
        font-weight:900;
        color:#050383;
    }

    .doanhthu-mobile-card-head span{
        display:block;
        margin-top:3px;
        font-size:13px;
        font-weight:700;
        color:#5c667a;
    }

    .doanhthu-mobile-card-head strong{
        flex:0 0 auto;
        color:#198754;
        font-size:20px;
        font-weight:900;
        white-space:nowrap;
    }

    .doanhthu-mobile-card-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:1px;
        background:#edf0f5;
    }

    .doanhthu-mobile-card-grid > div{
        background:#fff;
        padding:10px 12px;
        min-width:0;
    }

    .doanhthu-mobile-card-grid span{
        display:block;
        font-size:12px;
        font-weight:800;
        color:#697386;
        margin-bottom:3px;
    }

    .doanhthu-mobile-card-grid b{
        display:block;
        font-size:15px;
        font-weight:900;
        color:#050383;
        line-height:1.3;
        overflow-wrap:anywhere;
    }

    .doanhthu-mobile-card-full{
        grid-column:1 / -1;
    }

    .doanhthu-mobile-card-actions{
        padding:12px;
        display:flex;
        justify-content:flex-end;
        align-items:center;
        gap:8px;
        background:#fff;
    }

    .doanhthu-mobile-card-actions .btn-edit,
    .doanhthu-mobile-card-actions .role-badge,
    .doanhthu-mobile-card-actions .badge-stop{
        width:100% !important;
        min-width:100% !important;
        text-align:center;
    }

    .chamcong-status-card{
        --chamcong-status-title-size:36px;
        --chamcong-status-time-size:18px;
        padding:20px 14px;
        border-radius:18px;
    }

    .chamcong-single .form-card h3{
        text-align:center;
        font-size:24px;
    }

    .btn-cham-vao,
    .btn-cham-ra{
        min-height:56px !important;
        font-size:22px !important;
        border-radius:14px !important;
    }
}

@media(min-width:769px){
    .revenue-detail-table-wrap{
        display:block;
    }

}


/* V60 - Tổng bàn giao do CSS ngoài quản lý, không sticky/fixed */
.revenue-total-mobile{
    display:none !important;
}

.revenue-total-desktop{
    display:flex !important;
    position:static !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    z-index:auto !important;
    margin-top:16px !important;
    margin-bottom:8px !important;
}

@media(max-width:768px){
    .revenue-form-card{
        overflow:visible !important;
    }

    .revenue-total-mobile{
        display:none !important;
    }

    .revenue-total-desktop{
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        margin:16px 0 8px 0 !important;
        padding:14px !important;
        position:static !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        z-index:auto !important;
        border-radius:12px !important;
        box-shadow:0 2px 10px rgba(0,0,0,0.10) !important;
    }

    .revenue-total-desktop span{
        font-size:15px !important;
        font-weight:900 !important;
        white-space:nowrap !important;
    }

    .revenue-total-desktop b{
        font-size:26px !important;
        line-height:1 !important;
        text-align:right !important;
        max-width:60% !important;
        overflow-wrap:anywhere !important;
    }
}


/* V61 - Accessibility: label, focus, screen reader */
.sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0, 0, 0, 0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.login-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.login-field label{
    font-size:14px;
    font-weight:800;
    color:#170655;
}

.login-field input{
    margin-top:0;
}

.login-error{
    margin:0 0 14px 0;
    font-size:15px;
    font-weight:800;
}

.login-submit{
    width:100%;
    margin-top:4px;
}

.show-password-row{
    cursor:pointer;
}

.show-password-row input[type="checkbox"]{
    cursor:pointer;
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
    outline:3px solid #ffbf47;
    outline-offset:3px;
}

.notify-bell:focus-visible,
.mobile-menu-toggle:focus-visible,
.mobile-menu-close:focus-visible{
    outline:3px solid #fff;
    outline-offset:3px;
}

@media(max-width:768px){
    .login-box{
        margin:70px auto;
    }

    .login-field label{
        font-size:15px;
    }
}