/**
 * ==========================================================
 * WorkPlan Frontend
 * Theme: Default
 * NukeViet 4.5
 * ==========================================================
 */


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

.wp-card{
    margin:20px auto;
    max-width:96%;
    background:#fff;
    border:1px solid #cfd8e3;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}


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

.wp-header{
    padding:16px 20px;
    text-align:center;
    background:#eef5fc;
    border-bottom:3px solid #0f5ca8;
}

.wp-title{
    margin:0;
    font-size:30px;
    font-weight:700;
    color:#0f5ca8;
    text-transform:uppercase;
}

.wp-date{
    margin-top:8px;
    font-size:17px;
    font-weight:bold;
    color:#c00000;
}


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

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

.wp-table th{
    background:#dbe8f7;
    border:1px solid #7d8c9b;
    padding:12px 10px;
    text-align:center;
    font-size:17px;
    font-weight:bold;
}

.wp-table td{
    border:1px solid #8b8b8b;
    padding:10px;
    vertical-align:top;
    background:#fff;
    height:105px;
}


/*==========================================================
    CỘT THỨ
==========================================================*/

.wp-table th:first-child,
.wp-table td:first-child{
    width:16%;
    background:#eef8ea;
}

.wp-day{
    width:10%;
    min-width:85px;
    background:#edf8e9 !important;

    text-align:center;
    vertical-align:middle;   /* giữa theo chiều dọc */
}
.wp-day strong{
    display:block;
    margin:0 0 6px;
    font-size:18px;
    font-weight:700;
    color:#222;
    text-align:center;
}

.wp-day span{
    display:block;
    margin:0;
    font-size:15px;
    line-height:1.5;
    color:#444;
    text-align:center;
}


/*==========================================================
    CỘT NỘI DUNG
==========================================================*/

.wp-table th:nth-child(2),
.wp-table td:nth-child(2),
.wp-table th:nth-child(3),
.wp-table td:nth-child(3){
    width:44.5%;
}

.wp-content{
    line-height:1.6;
    min-height:42px;
    word-break:break-word;
    white-space:pre-line;
}

.wp-holiday{
    color:#cc0000;
    font-weight:bold;
    text-align:center;
    font-size:15px;
    padding:6px 0;
}
.wp-note{
    margin:4px 0;
    padding:4px 8px;
    border-radius:3px;
}

.wp-note-red{
    color:#8b0000;
    font-size:18px;
    font-weight:700;
    line-height:1.6;
    margin-bottom:6px;
}

.wp-note-blue{
    color:#0066cc;
    font-weight:bold;
    font-size:18px;
}

.wp-note-yellow{
    background:#fff6b8;
    color:#000;
    font-weight:bold;
}
/*==========================================================
    NGƯỜI TRỰC
==========================================================*/

.wp-duty{
    margin-top:10px;
    padding-top:8px;
    border-top:1px dashed #cfcfcf;
    text-align:center;
    color:#d10000;
    font-weight:bold;
    font-size:14px;
}


/*==========================================================
    NGÀY HIỆN TẠI
==========================================================*/

tr.today td{
    background:#edf9ee;
}

tr.today .wp-day{
    background:#d9f2dc !important;
    border-left:5px solid #3fa652;
}

tr.today .wp-day strong{
    color:#1d6e31;
}

tr.today:hover td{
    background:#e7f7e9;
}


/*==========================================================
    HOVER
==========================================================*/

.wp-table tbody tr:hover td{
    background:#f8fbff;
}


/*==========================================================
    TOOLBAR
==========================================================*/

.wp-toolbar{
    width:96%;
    margin:18px auto;
    padding:12px 15px;
    background:#f8fbff;
    border:1px solid #d9e2ec;
    border-radius:6px;
    text-align:center;
}

.wp-toolbar form{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.wp-toolbar select{
    width:330px;
    height:38px;
}

.wp-toolbar .btn{
    min-width:120px;
}


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

@media only screen and (max-width:768px){

    .wp-card{
        max-width:100%;
        margin:10px 0;
    }

    .wp-title{
        font-size:22px;
    }

    .wp-date{
        font-size:14px;
    }

    .wp-table{
        display:block;
        overflow-x:auto;
    }

    .wp-table td{
        height:auto;
        min-height:80px;
        font-size:14px;
    }

    .wp-table th:first-child,
    .wp-table td:first-child{
        width:110px;
    }

    .wp-toolbar{
        width:100%;
        margin:12px 0;
    }

    .wp-toolbar form{
        display:block;
    }

    .wp-toolbar select,
    .wp-toolbar .btn{
        width:100%;
        margin-top:8px;
    }

}
@media print {

    body{
        background:#fff;
    }

    .wp-toolbar,
    .navbar,
    .footer,
    .header,
    .breadcrumb{
        display:none !important;
    }

    .wp-card{
        width:100%;
        max-width:100%;
        margin:0;
        border:none;
        box-shadow:none;
    }

    .wp-table{
        width:100%;
    }

    .wp-table td,
    .wp-table th{
        border:1px solid #000;
    }
}