* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #eef3f8;

    color:
        #31485b;
}

.page-wrapper {
    width: 100%;
    padding:
        34px 36px 50px;
}


/* =========================================
   HEADER
========================================= */

.page-header {
    width: 100%;

    background:
        linear-gradient(
            110deg,
            #205a7b,
            #1777aa
        );

    border-radius:
        18px;

    padding:
        28px 40px;

    box-shadow:
        0 8px 22px
        rgba(31, 79, 109, 0.16);

    margin-bottom:
        24px;
}

.header-content {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;
}

.page-header h1 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        30px;

    font-weight:
        800;

    letter-spacing:
        0.4px;
}

.page-header p {
    margin:
        10px 0 0;

    color:
        rgba(255, 255, 255, 0.9);

    font-size:
        15px;
}


/* =========================================
   NÚT QUAY LẠI
========================================= */

.btn-back {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-width:
        185px;

    padding:
        14px 22px;

    border-radius:
        12px;

    background:
        #ffffff;

    color:
        #31516a;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        0.2s;
}

.btn-back:hover {
    transform:
        translateY(-1px);

    background:
        #f4f7fa;
}


/* =========================================
   TÌM KIẾM
========================================= */

.search-box {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        18px 20px;

    background:
        #ffffff;

    border-radius:
        16px;

    margin-bottom:
        24px;

    box-shadow:
        0 4px 16px
        rgba(33, 72, 104, 0.08);
}

.search-box input {
    flex:
        1;

    height:
        46px;

    border:
        1px solid #c8d4df;

    border-radius:
        10px;

    padding:
        0 15px;

    font-size:
        14px;

    outline:
        none;

    color:
        #334e63;
}

.search-box input:focus {
    border-color:
        #2875b9;

    box-shadow:
        0 0 0 3px
        rgba(40, 117, 185, 0.1);
}

.search-box button {
    height:
        46px;

    min-width:
        145px;

    border:
        none;

    border-radius:
        10px;

    background:
        #2f63b7;

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        0.2s;
}

.search-box button:hover {
    background:
        #24539f;
}


/* =========================================
   KHUNG DANH SÁCH
========================================= */

.document-section {
    width:
        100%;

    background:
        #ffffff;

    border-radius:
        18px;

    padding:
        0 20px 20px;

    overflow:
        hidden;

    box-shadow:
        0 5px 18px
        rgba(35, 73, 105, 0.09);
}

.document-section-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        20px 2px;

    border-bottom:
        1px solid #dbe3ea;
}

.document-section-header span {
    display:
        block;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    color:
        #708092;

    margin-bottom:
        5px;
}

.document-section-header h2 {
    margin:
        0;

    font-size:
        22px;

    color:
        #344f65;
}

.document-total {
    min-width:
        100px;

    padding:
        11px 16px;

    text-align:
        center;

    border-radius:
        10px;

    background:
        #edf2f6;

    color:
        #40576b;

    font-size:
        13px;

    font-weight:
        700;
}


/* =========================================
   TABLE
========================================= */

.table-wrapper {
    width:
        100%;

    overflow-x:
        auto;
}

table {
    width:
        100%;

    border-collapse:
        collapse;

    margin-top:
        0;
}

thead {
    background:
        #235d7d;
}

thead th {
    padding:
        15px 12px;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    text-align:
        center;

    letter-spacing:
        0.2px;
}

tbody tr {
    border-bottom:
        1px solid #d9e2e9;
}

tbody tr:last-child {
    border-bottom:
        none;
}

tbody tr:hover {
    background:
        #f6f9fb;
}

tbody td {
    padding:
        16px 12px;

    font-size:
        14px;

    color:
        #405669;
}

.col-stt {
    width:
        80px;
}

.col-date {
    width:
        180px;
}

.col-action {
    width:
        150px;
}

.text-center {
    text-align:
        center;
}

.document-name {
    font-weight:
        600;

    color:
        #365269;
}

.note {
    color:
        #7c8994;

    font-style:
        italic;
}


/* =========================================
   NÚT XEM
========================================= */

.btn-view {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-width:
        88px;

    padding:
        10px 17px;

    background:
        #315f9f;

    color:
        #ffffff;

    text-decoration:
        none;

    border-radius:
        9px;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        0.2s;
}

.btn-view:hover {
    background:
        #234a80;

    transform:
        translateY(-1px);
}

.no-file {
    color:
        #9aa5ae;

    font-size:
        13px;

    font-style:
        italic;
}

.empty {
    padding:
        35px;

    text-align:
        center;

    color:
        #8a97a3;

    font-style:
        italic;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .page-wrapper {
        padding:
            18px 14px 30px;
    }

    .page-header {
        padding:
            25px 22px;
    }

    .header-content {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .page-header h1 {
        font-size:
            23px;
    }

    .btn-back {
        width:
            100%;
    }

    .search-box {
        flex-direction:
            column;
    }

    .search-box input,
    .search-box button {
        width:
            100%;
    }

    .document-section {
        padding:
            0 10px 15px;
    }

}