/* =========================================================
   PUBLIC.CSS
   CƠ SỞ DỮ LIỆU QUẢN LÝ CHẤT LƯỢNG
========================================================= */


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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

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

body{
    font-family:"Segoe UI",Tahoma,Arial,sans-serif;

    font-size:15px;

    font-weight:400;

    color:#174f70;

    background:#edf5fb;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;
}

a{
    color:inherit;
}

button,
input{
    font-family:inherit;
}


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

.top-header{
    width:100%;

    height:78px;

    padding:0 32px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:#fff;

    border-bottom:1px solid #d4e1ea;

    box-shadow:0 1px 5px rgba(0,60,100,.06);
}

.brand{
    height:100%;

    display:flex;

    align-items:center;

    gap:14px;

    min-width:0;
}

.logo{
    width:50px;

    height:50px;

    object-fit:contain;

    flex-shrink:0;
}

.brand-info{
    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.brand-info h1{
    color:#075985;

    font-size:25px;

    line-height:1.15;

    font-weight:700;

    white-space:nowrap;
}

.brand-info p{
    margin-top:4px;

    color:#5b788b;

    font-size:13px;

    line-height:1.2;

    font-weight:400;

    white-space:nowrap;
}

.admin-button{
    height:40px;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    background:#075985;

    color:#fff;

    border-radius:8px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

    transition:.15s;
}

.admin-button:hover{
    background:#064b70;
}


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

.page-layout{
    width:100%;

    min-height:calc(100vh - 78px);

    display:flex;

    align-items:stretch;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{
    width:255px;

    min-width:255px;

    flex:0 0 255px;

    background:#075985;

    color:#fff;
}

.sidebar-menu{
    width:100%;

    padding:12px 10px;
}

.sidebar-item{
    width:100%;

    height:46px;

    margin:0 0 5px;

    padding:0 14px;

    display:flex;

    align-items:center;

    gap:12px;

    color:#dcecf5;

    text-decoration:none;

    border-radius:7px;

    font-size:15px;

    font-weight:500;

    white-space:nowrap;

    overflow:hidden;

    transition:.15s;
}

.sidebar-item i{
    width:20px;

    min-width:20px;

    text-align:center;
}

.sidebar-item span{
    white-space:nowrap;
}

.sidebar-item:hover{
    background:#0879aa;

    color:#fff;
}

.sidebar-item.active{
    background:#0b8fc5;

    color:#fff;
}


/* =========================================================
   MAIN
========================================================= */

.main-content{
    flex:1;

    min-width:0;

    width:calc(100% - 255px);

    padding:24px 28px 22px;

    background:#edf5fb;
}


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

.page-heading{
    width:100%;

    margin-bottom:17px;
}

.page-heading h2{
    color:#075985;

    font-size:30px;

    line-height:1.2;

    font-weight:700;
}

.page-heading p{
    margin-top:5px;

    color:#607d8d;

    font-size:15px;

    line-height:1.3;

    font-weight:400;
}


/* =========================================================
   6 THỐNG KÊ
========================================================= */

.statistics{
    width:100%;

    display:grid;

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

    gap:14px;

    margin-bottom:18px;
}

.stat-card{
    width:100%;

    height:132px;

    min-width:0;

    padding:15px 12px;

    display:flex;

    align-items:center;

    gap:11px;

    background:#fff;

    border:1px solid #cbdde9;

    border-left-width:5px;

    border-radius:9px;

    box-shadow:0 3px 10px rgba(25,75,105,.07);

    overflow:hidden;
}


/* MÀU */

.blue-card{
    border-left-color:#0786c1;
}

.green-card{
    border-left-color:#10a35b;
}

.orange-card{
    border-left-color:#e88905;
}

.purple-card{
    border-left-color:#7650c8;
}

.cyan-card{
    border-left-color:#0796aa;
}

.red-card{
    border-left-color:#dc343d;
}


/* ICON */

.stat-icon{
    width:51px;

    min-width:51px;

    height:51px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    font-size:20px;
}

.blue-card .stat-icon{
    color:#0786c1;

    background:#e1f3fb;
}

.green-card .stat-icon{
    color:#10a35b;

    background:#e1f5e9;
}

.orange-card .stat-icon{
    color:#e88905;

    background:#fff0d9;
}

.purple-card .stat-icon{
    color:#7650c8;

    background:#eee8fb;
}

.cyan-card .stat-icon{
    color:#0796aa;

    background:#e0f5f7;
}

.red-card .stat-icon{
    color:#dc343d;

    background:#fde5e6;
}


/* NỘI DUNG */

.stat-info{
    min-width:0;
}

.stat-info h3{
    color:#3d5d70;

    font-size:11px;

    line-height:1.3;

    font-weight:600;

    white-space:nowrap;
}

.stat-info strong{
    display:block;

    margin-top:4px;

    font-size:34px;

    line-height:1;

    font-weight:750;
}

.stat-info span{
    display:block;

    margin-top:5px;

    color:#78909d;

    font-size:12px;

    font-weight:400;
}

.blue-card .stat-info strong{
    color:#0786c1;
}

.green-card .stat-info strong{
    color:#10a35b;
}

.orange-card .stat-info strong{
    color:#d87900;
}

.purple-card .stat-info strong{
    color:#7650c8;
}

.cyan-card .stat-info strong{
    color:#07889a;
}

.red-card .stat-info strong{
    color:#d62e38;
}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.dashboard-grid{
    width:100%;

    display:grid;

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

    gap:18px;

    margin-bottom:18px;

    align-items:stretch;
}

.dashboard-grid > .dashboard-box{
    width:100%;

    height:400px;

    min-height:400px;

    background:#fff;

    border:1px solid #cbdde9;

    border-radius:9px;

    overflow:hidden;

    box-shadow:0 3px 10px rgba(25,75,105,.07);
}


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

.box-header{
    width:100%;

    height:65px;

    min-height:65px;

    padding:10px 15px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:#fff;

    border-bottom:1px solid #dbe6ed;
}

.box-title{
    min-width:0;

    display:flex;

    align-items:center;

    gap:11px;
}

.box-title-icon{
    width:41px;

    min-width:41px;

    height:41px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    color:#fff;

    font-size:17px;
}

.blue-bg{
    background:#0786c1;
}

.purple-bg{
    background:#7650c8;
}

.red-bg{
    background:#dc343d;
}

.box-title h2{
    color:#075985;

    font-size:17px;

    line-height:1.2;

    font-weight:700;

    white-space:nowrap;
}

.box-title p{
    margin-top:3px;

    color:#8295a2;

    font-size:11px;

    line-height:1.2;

    font-weight:400;
}


/* =========================================================
   THÔNG BÁO
========================================================= */

.notice-list{
    width:100%;

    height:calc(360px - 65px) !important;

    padding:3px 8px 3px 10px;
    overflow-y:auto;
    overflow-x:hidden;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;

    scrollbar-color:#72b2cc #edf4f8;
}

.notice-list::-webkit-scrollbar{
    width:7px;
}

.notice-list::-webkit-scrollbar-track{
    background:#edf4f8;
}

.notice-list::-webkit-scrollbar-thumb{
    background:#72b2cc;

    border-radius:10px;
}

.notice-item{
    width:100%;

    height:60px;

    min-height:60px;

    padding:6px;

    display:flex;

    align-items:center;

    gap:9px;

    text-decoration:none;

    border-bottom:1px solid #dce7ee;

    transition:.12s;
}

.notice-item:hover{
    background:#f2f8fc;
}

.notice-number{
    width:28px;

    min-width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#087eae;

    color:#fff;

    border-radius:5px;

    font-size:12px;

    font-weight:700;
}

.pdf-icon{
    width:35px;

    min-width:35px;

    height:37px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff1f2;

    border:1px solid #fecdd3;

    color:#ef3340;

    border-radius:6px;
}

.notice-content{
    flex:1;

    min-width:0;
}

.notice-name{
    color:#174d6c;

    font-size:13px;

    line-height:1.3;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.notice-description{
    margin-top:3px;

    color:#8b9ca7;

    font-size:10px;

    line-height:1.2;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.notice-open{
    width:29px;

    min-width:29px;

    height:29px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#edf7fc;

    color:#087eae;

    border-radius:6px;
}


/* =========================================================
   6 MODULE
========================================================= */

.module-grid{
    width:100%;

    height:220px;

    padding:13px;

    display:grid;

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

    grid-template-rows:
        repeat(2,91px);

    gap:10px;

    overflow:hidden;
}

.module-item{
    width:100%;

    height:91px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:7px;

    border-radius:8px;

    text-decoration:none;

    border:1px solid;

    transition:.15s;
}

.module-item:hover{
    transform:translateY(-1px);
}

.module-item i{
    font-size:19px;
}

.module-item span{
    font-size:12px;

    line-height:1.2;

    font-weight:600;

    white-space:nowrap;
}

.module-blue{
    background:#edf8fd;

    border-color:#b9deef;

    color:#0786c1;
}

.module-green{
    background:#f1faf5;

    border-color:#c4e8d2;

    color:#12a05a;
}

.module-orange{
    background:#fff9ee;

    border-color:#f2d7a7;

    color:#d87900;
}

.module-purple{
    background:#f8f5fd;

    border-color:#ddd2f3;

    color:#7650c8;
}

.module-cyan{
    background:#effafb;

    border-color:#c7e8ec;

    color:#0796aa;
}

.module-red{
    background:#fff5f5;

    border-color:#efcccc;

    color:#dc343d;
}


/* =========================================================
   BOTTOM GRID
   AI + PCCC

   2 KHUNG BẰNG NHAU
========================================================= */

.bottom-grid{
    width:100%;

    display:grid;

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

    gap:18px;

    margin-top:18px;

    align-items:stretch;
}


/* =========================================================
   KHUNG NGOÀI
========================================================= */

.bottom-grid > .dashboard-box{
    width:100%;

    height:190px;

    min-height:190px;

    max-height:190px;

    margin:0;

    padding:0;

    background:#fff;

    border:1px solid #cbdde9;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 3px 10px rgba(25,75,105,.07);
}


/* =========================================================
   HEADER AI + PCCC
========================================================= */

.bottom-grid .box-header{
    width:100%;

    height:62px;

    min-height:62px;

    padding:9px 15px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    background:#fff;

    border-bottom:1px solid #dbe6ed;
}

.bottom-grid .box-title{
    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;
}

.bottom-grid .box-title-icon{
    width:40px;

    min-width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    color:#fff;

    font-size:17px;
}

.bottom-grid .box-title h2{
    margin:0;

    color:#075985;

    font-size:17px;

    line-height:1.2;

    font-weight:700;

    white-space:nowrap;
}

.bottom-grid .box-title p{
    margin:3px 0 0;

    color:#8295a2;

    font-size:11px;

    line-height:1.2;

    font-weight:400;
}


/* =========================================================
   AI LIST
========================================================= */

.bottom-grid .ai-list{
    width:100%;

    height:128px;

    padding:12px;

    display:grid;

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

    gap:10px;

    align-items:center;
}


/* =========================================================
   Ô OLLAMA + CHATGPT
========================================================= */

.bottom-grid .ai-item{
    width:100%;

    height:78px;

    min-height:78px;

    margin:0;

    padding:11px;

    display:flex;

    align-items:center;

    gap:10px;

    background:#faf8ff;

    border:1px solid #ddd4f1;

    border-radius:9px;

    text-decoration:none;

    color:#4e3481;

    overflow:hidden;

    transition:.15s;
}

.bottom-grid .ai-item:hover{
    background:#f4effc;

    border-color:#cdbfe8;

    transform:translateY(-1px);
}

.bottom-grid .ai-icon{
    width:40px;

    min-width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eee9fa;

    color:#7650c8;

    border-radius:8px;

    font-size:16px;
}

.bottom-grid .ai-item strong{
    display:block;

    color:#4e3481;

    font-size:14px;

    line-height:1.3;

    font-weight:650;

    white-space:nowrap;
}

.bottom-grid .ai-item span{
    display:block;

    margin-top:3px;

    color:#8799a5;

    font-size:11px;

    line-height:1.2;

    font-weight:400;

    white-space:nowrap;
}


/* =========================================================
   PCCC
========================================================= */

.bottom-grid .pccc-link{
    width:calc(100% - 28px);

    height:94px;

    min-height:94px;

    margin:14px;

    padding:12px 14px;

    display:flex;

    align-items:center;

    gap:12px;

    background:#fff7f7;

    border:1px solid #efcccc;

    border-radius:9px;

    color:#b91c1c;

    text-decoration:none;

    transition:.15s;
}

.bottom-grid .pccc-link:hover{
    background:#fff1f1;

    border-color:#e6b9b9;

    transform:translateY(-1px);
}

.bottom-grid .pccc-icon{
    width:44px;

    min-width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fee7e7;

    color:#dc343d;

    border-radius:9px;

    font-size:19px;
}

.bottom-grid .pccc-text{
    flex:1;

    min-width:0;
}

.bottom-grid .pccc-text strong{
    display:block;

    color:#b91c1c;

    font-size:14px;

    line-height:1.3;

    font-weight:650;

    white-space:nowrap;
}

.bottom-grid .pccc-text span{
    display:block;

    margin-top:4px;

    color:#8d7474;

    font-size:11px;

    line-height:1.25;

    font-weight:400;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


/* Mũi tên dùng icon <i> trong HTML,
   không tạo thêm mũi tên bằng CSS */

.bottom-grid .pccc-link::after{
    content:none !important;
}

.bottom-grid .pccc-link > i{
    margin-left:auto;

    color:#dc343d;

    font-size:18px;
}


/* =========================================================
   FOOTER
========================================================= */

footer{
    width:100%;

    margin-top:0;

    padding:14px;

    text-align:center;

    background:#075985;

    color:#d9edf7;

    font-size:12px;

    line-height:1.4;

    font-weight:400;
}


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

@media(max-width:1450px){

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

}


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

@media(max-width:1100px){

    .sidebar{
        width:225px;

        min-width:225px;

        flex-basis:225px;
    }

    .main-content{
        width:calc(100% - 225px);
    }

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

}


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

@media(max-width:900px){

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

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

}


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

@media(max-width:800px){

    .top-header{
        height:auto;

        min-height:78px;

        padding:12px 18px;

        flex-wrap:wrap;

        gap:10px;
    }

    .brand{
        width:100%;
    }

    .brand-info h1{
        font-size:21px;
    }

    .brand-info p{
        font-size:11px;
    }

    .admin-button{
        width:100%;
    }

    .page-layout{
        flex-direction:column;
    }

    .sidebar{
        width:100%;

        min-width:100%;

        flex-basis:auto;
    }

    .sidebar-menu{
        display:grid;

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

        gap:5px;
    }

    .sidebar-item{
        margin-bottom:0;
    }

    .main-content{
        width:100%;

        padding:18px 12px 20px;
    }

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

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

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

    .bottom-grid > .dashboard-box{
        height:190px;

        min-height:190px;

        max-height:190px;
    }

}


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

@media(max-width:600px){

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

    .sidebar-menu{
        grid-template-columns:1fr;
    }

    .module-grid{
        grid-template-columns:
            repeat(2,1fr);

        grid-template-rows:
            repeat(3,91px);

        height:auto;
    }

    .module-item{
        height:91px;
    }

    .bottom-grid .ai-list{
        grid-template-columns:1fr;

        height:auto;
    }

    .bottom-grid > .dashboard-box{
        height:auto;

        min-height:190px;

        max-height:none;
    }

    .bottom-grid .ai-item{
        width:100%;
    }

}


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

@media(max-width:480px){

    .top-header{
        padding:10px 12px;
    }

    .brand-info h1{
        font-size:18px;
    }

    .brand-info p{
        font-size:10px;
    }

    .page-heading h2{
        font-size:24px;
    }

    .page-heading p{
        font-size:13px;
    }

    .box-title h2{
        font-size:15px;
    }

    .box-title p{
        font-size:10px;
    }

    .bottom-grid .pccc-link{
        width:calc(100% - 20px);

        margin:10px;

        padding:10px;
    }

}