/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


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


body {
    font-family:
        "Be Vietnam Pro",
        Arial,
        sans-serif;

    background:
        #e8edf1;

    color:
        #334b60;
}


/* =========================================================
   PAGE
========================================================= */

.page-wrapper {
    width: 100%;
    min-height: 100vh;

    padding:
        22px;
}


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

.page-header {
    width: 100%;

    background:
        linear-gradient(
            135deg,
            #344f63 0%,
            #2d5e7c 100%
        );

    border-radius:
        0 0 16px 16px;

    box-shadow:
        0 8px 22px
        rgba(32, 54, 70, 0.16);

    overflow: hidden;
}


.header-content {
    min-height: 112px;

    padding:
        22px 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


.header-text h1 {
    margin: 0 0 8px;

    color:
        #ffffff;

    font-size:
        30px;

    font-weight:
        800;

    letter-spacing:
        0.3px;

    text-transform:
        uppercase;
}


.header-text p {
    margin: 0;

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

    font-size:
        14px;

    font-weight:
        500;

    line-height:
        1.6;
}


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

.btn-back {
    min-width: 180px;

    height: 48px;

    padding:
        0 28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    text-decoration:
        none;

    background:
        #f5f7f9;

    color:
        #3c5365;

    border:
        1px solid
        rgba(255, 255, 255, 0.3);

    border-radius:
        10px;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        0.2s ease;
}


.btn-back:hover {
    background:
        #ffffff;

    color:
        #244e69;

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, 0.12);
}


/* =========================================================
   CONTENT
========================================================= */

.content-wrapper {
    width: 100%;

    margin-top:
        16px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;
}


/* =========================================================
   CARD CHUNG
========================================================= */

.main-card {
    width: 100%;

    background:
        rgba(255, 255, 255, 0.78);

    border:
        1px solid
        #d2dde5;

    border-radius:
        16px;

    overflow:
        hidden;

    box-shadow:
        0 7px 20px
        rgba(39, 59, 75, 0.07);
}


/* =========================================================
   CARD HEADING
========================================================= */

.card-heading {
    min-height: 96px;

    padding:
        22px 28px;

    display:
        flex;

    align-items:
        center;

    border-bottom:
        1px solid
        #d5dfe6;

    background:
        rgba(248, 250, 251, 0.7);
}


.card-heading h2 {
    margin: 0 0 6px;

    color:
        #344d61;

    font-size:
        20px;

    font-weight:
        800;

    letter-spacing:
        0.2px;

    text-transform:
        uppercase;
}


.card-heading p {
    margin: 0;

    color:
        #6d7d89;

    font-size:
        13px;

    line-height:
        1.5;
}


/* =========================================================
   THÔNG TIN CƠ SỞ
========================================================= */

.info-content {
    padding:
        14px 20px 20px;
}


.info-row {
    min-width: 0;

    padding:
        15px 16px;

    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid
        #d7e0e6;

    border-radius:
        10px;
}


.info-row-full {
    margin-bottom:
        12px;
}


.info-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px;

    margin-bottom:
        12px;
}


.info-label {
    margin-bottom:
        8px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #607283;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.3px;
}


.info-label i {
    width: 18px;

    color:
        #3f718e;

    text-align:
        center;

    font-size:
        13px;
}


.info-value {
    color:
        #334c60;

    font-size:
        14px;

    font-weight:
        500;

    line-height:
        1.6;

    word-break:
        break-word;
}


.info-name {
    color:
        #304b60;

    font-size:
        17px;

    font-weight:
        700;
}


.type-badge {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    padding:
        5px 12px;

    background:
        #eaf1f5;

    color:
        #365b72;

    border:
        1px solid
        #d4e0e7;

    border-radius:
        7px;

    font-size:
        13px;

    font-weight:
        600;
}


.facility-code {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    padding:
        5px 12px;

    background:
        #eaf1f5;

    color:
        #315a75;

    border:
        1px solid
        #d4e0e7;

    border-radius:
        7px;

    font-weight:
        700;
}


.note-area {
    color:
        #5f6f7b;

    white-space:
        normal;
}


/* =========================================================
   HỒ SƠ CƠ SỞ
========================================================= */

.document-card {
    padding-bottom:
        12px;
}


/* 5 Ô TRÊN 1 HÀNG */

.document-grid {
    width: 100%;

    padding:
        14px 20px 8px;

    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        10px;
}


/* =========================================================
   DOCUMENT ITEM
========================================================= */

.document-item {
    min-width: 0;

    min-height:
        88px;

    padding:
        12px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    position:
        relative;

    text-decoration:
        none;

    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid
        #d4dee5;

    border-radius:
        10px;

    color:
        inherit;

    transition:
        0.2s ease;
}


.document-item:hover {
    background:
        #ffffff;

    border-color:
        #aebfca;

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 16px
        rgba(43, 67, 84, 0.10);
}


/* =========================================================
   ICON
========================================================= */

.document-icon {
    width: 42px;

    height: 42px;

    flex:
        0 0 42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    font-size:
        18px;
}


.icon-drawing {
    color:
        #286786;

    background:
        #e6f0f5;
}


.icon-report {
    color:
        #c67b19;

    background:
        #f9efdf;
}


.icon-record {
    color:
        #71619a;

    background:
        #ece9f4;
}


.icon-assign {
    color:
        #32766f;

    background:
        #e4f0ee;
}


.icon-file {
    color:
        #ad5b55;

    background:
        #f5e9e8;
}


/* =========================================================
   DOCUMENT INFO
========================================================= */

.document-info {
    min-width: 0;

    flex:
        1;
}


.document-info h3 {
    margin: 0 0 5px;

    padding-right:
        22px;

    color:
        #3a5164;

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1.4;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.document-info p {
    margin: 0;

    color:
        #7b8994;

    font-size:
        10px;

    font-weight:
        500;

    line-height:
        1.5;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


/* =========================================================
   COUNT
========================================================= */

.document-count {
    width: 25px;

    height: 25px;

    position:
        absolute;

    top:
        10px;

    right:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #eef2f5;

    color:
        #4a6375;

    border:
        1px solid
        #d5dfe6;

    border-radius:
        50%;

    font-size:
        11px;

    font-weight:
        700;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1400px) {

    .document-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 900px) {

    .page-wrapper {
        padding:
            14px;
    }


    .header-content {
        min-height:
            auto;

        padding:
            22px;

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .btn-back {
        width:
            100%;
    }


    .info-grid {
        grid-template-columns:
            1fr;
    }


    .document-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 560px) {

    .page-wrapper {
        padding:
            8px;
    }


    .page-header {
        border-radius:
            0 0 12px 12px;
    }


    .header-content {
        padding:
            20px;
    }


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


    .card-heading {
        min-height:
            auto;

        padding:
            18px;
    }


    .card-heading h2 {
        font-size:
            17px;
    }


    .info-content,
    .document-grid {
        padding:
            12px;
    }


    .document-grid {
        grid-template-columns:
            1fr;
    }

}