*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",Arial,sans-serif;
}


body{
    background:#eef5fb;
    color:#334155;
}



.container{

    width:100%;

    padding:25px;

}



/* HEADER */

header{

    background:linear-gradient(135deg,#075985,#0284c7);

    color:white;

    padding:25px 35px;

    border-radius:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



header h1{

    font-size:30px;

    font-weight:800;

}



header p{

    margin-top:8px;

}



.back{

    background:white;

    color:#075985;

    padding:12px 25px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

}





/* SEARCH */

.search-box{

    background:white;

    margin-top:20px;

    padding:20px;

    border-radius:15px;

}



.search-box form{

    display:flex;

    gap:15px;

}



.search-box input{

    flex:1;

    height:45px;

    border:1px solid #cbd5e1;

    border-radius:8px;

    padding:0 15px;

    font-size:15px;

}



.search-box button{

    width:120px;

    border:none;

    border-radius:8px;

    background:#075985;

    color:white;

    font-weight:bold;

    cursor:pointer;

}





/* TABLE */

.table-box{

    margin-top:20px;

    background:white;

    border-radius:18px;

    padding:20px;

    overflow:hidden;

}



table{

    width:100%;

    border-collapse:collapse;

}



thead{

    background:#075985;

    color:white;

}



th{

    padding:15px;

    text-align:center;

}



td{

    padding:14px;

    border-bottom:1px solid #e2e8f0;

}



tbody tr:hover{

    background:#f1f5f9;

}



td:nth-child(2){

    font-weight:600;

}





/* BUTTON */

.file{

    background:#16a34a;

    color:white;

    padding:7px 15px;

    border-radius:8px;

    text-decoration:none;

    font-size:14px;

}



.view{

    background:#2563eb;

    color:white;

    padding:7px 18px;

    border-radius:8px;

    text-decoration:none;

    font-weight:bold;

}



.view:hover{

    background:#1d4ed8;

}



.file:hover{

    background:#15803d;

}




.empty{

    text-align:center;

    padding:30px;

    color:#64748b;

}





/* FOOTER */

footer{

    margin-top:25px;

    height:55px;

    background:#075985;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

}





@media(max-width:900px){

    table{

        font-size:13px;

    }


    header{

        flex-direction:column;

        gap:20px;

        text-align:center;

    }


    .search-box form{

        flex-direction:column;

    }

}
/* chỉnh bảng phân cấp */

table th:nth-child(1),
table td:nth-child(1){
    width:60px;
    text-align:center;
}


table th:nth-child(2),
table td:nth-child(2){
    width:55%;
}


table th:nth-child(3),
table td:nth-child(3){
    width:25%;
}



table th:nth-child(4),
table td:nth-child(4){

    width:120px;

    text-align:center;

    white-space:nowrap;

}



table th:nth-child(5),
table td:nth-child(5){

    width:80px;

    text-align:center;

}



.file{

    display:inline-block;

    white-space:nowrap;

    padding:8px 12px;

    background:#16a34a;

    color:white;

    border-radius:8px;

    text-decoration:none;

    font-size:13px;

}



.view{

    white-space:nowrap;

}
html,body{
    min-height:100%;
}


body{

    display:flex;

    flex-direction:column;

}


.container{

    min-height:100vh;

    display:flex;

    flex-direction:column;

}



footer{

    margin-top:auto;

    height:55px;

    background:#075985;

    color:white;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

}