/**
 * ==========================================================
 * WorkPlan Frontend
 * Theme: Default
 * NukeViet 4.5
 * Style: iOS 26
 * ==========================================================
 */


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

.wp-card{
    width:96%;
    max-width:1400px;
    margin:24px auto;

    background:#ffffff;

    border:1px solid rgba(210,218,228,.75);
    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 18px 45px rgba(31,41,55,.10),
        0 4px 12px rgba(31,41,55,.06);
}


/*==========================================================
    HEADER TUẦN
==========================================================*/

.wp-header{
    padding:24px 22px 20px;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #edf4fc 100%
        );

    border-bottom:1px solid #cbd7e5;
}

.wp-title{
    margin:0;

    font-size:29px;
    line-height:1.25;

    font-weight:750;
    letter-spacing:-.5px;

    color:#245a98;

    text-transform:uppercase;
}

.wp-date{
    margin-top:8px;

    font-size:16px;
    line-height:1.4;

    font-weight:650;

    color:#b4232f;
}


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

.wp-table{
    width:100%;

    table-layout:fixed;

    border-collapse:collapse;

    background:#ffffff;
}


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

.wp-table th{
    padding:13px 10px;

    background:#dbe5f0;

    border:1px solid #b9c6d4;

    text-align:center;
    vertical-align:middle;

    font-size:15px;
    line-height:1.3;

    font-weight:700;

    color:#2e4054;

    letter-spacing:.15px;
}

.wp-table th:first-child{
    background:#e3f0df;
    color:#31563a;
}


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

.wp-table td{
    height:110px;

    padding:0;

    border:1px solid #cbd3dc;

    background:#ffffff;

    vertical-align:top;

    color:#273444;

    font-size:15px;
    line-height:1.55;

    box-sizing:border-box;
}


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

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

.wp-day{
    width:10%;
    min-width:85px;

    padding:10px !important;

    background:#f1f8ef !important;

    text-align:center;

    vertical-align:middle !important;
}

.wp-day strong{
    display:block;

    margin:0 0 5px;

    font-size:17px;
    line-height:1.3;

    font-weight:750;

    color:#263238;
}

.wp-day span{
    display:block;

    font-size:14px;
    line-height:1.5;

    color:#667085;
}


/*==========================================================
    CỘT SÁNG / CHIỀU
==========================================================*/

.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:42%;
}


/*==========================================================
    SESSION
==========================================================*/

.wp-session{
    position:relative;

    vertical-align:top !important;

    padding:0 !important;
}


/*
 * Quan trọng:
 *
 * Không đặt display:flex/grid cho <td>.
 *
 * Bên trong chỉ dùng cấu trúc block bình thường.
 */

.wp-session-inner{
    display:block;

    min-height:110px;

    box-sizing:border-box;

    padding:11px 12px 52px;
}

/*==========================================================
    VÙNG NỘI DUNG
==========================================================*/

.wp-session-content{
    display:block;

    width:100%;

    box-sizing:border-box;
}

.wp-content{
    display:block;

    min-height:42px;

    line-height:1.6;

    word-break:break-word;

    white-space:pre-line;

    color:#273444;
}


/*==========================================================
    NGÀY LỄ / NGHỈ
==========================================================*/

.wp-holiday{
    padding:7px 8px;

    color:#c62828;

    font-size:14px;

    line-height:1.5;

    font-weight:700;

    text-align:center;
}


/*==========================================================
    GHI CHÚ
==========================================================*/

.wp-note{
    margin:5px 0;

    padding:5px 9px;

    border-radius:10px;
}

.wp-note-red{
    margin-bottom:6px;

    color:#a61b29;

    font-size:17px;

    line-height:1.55;

    font-weight:700;
}

.wp-note-blue{
    color:#1769aa;

    font-size:16px;

    font-weight:650;
}

.wp-note-yellow{
    background:#fff5bf;

    color:#403500;

    font-weight:650;
}


/*==========================================================
    NGƯỜI TRỰC
==========================================================*/

.wp-duty{
    position:absolute;

    left:12px;
    right:12px;
    bottom:10px;

    padding-top:8px;

    border-top:1px dashed #c7ced7;

    text-align:center;

    color:#c62835;

    font-size:14px;
    line-height:1.4;
    font-weight:700;

    box-sizing:border-box;

    background:transparent;
}
.wp-duty-name{
    font-weight:700;
}


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

.wp-table tbody tr.today td{
    background:#f0f9f2 !important;
}

.wp-table tbody tr.today .wp-day{
    background:#dff3e3 !important;

    border-left:4px solid #34a853 !important;
}

.wp-table tbody tr.today .wp-day strong{
    color:#217a38 !important;
}


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

.wp-table tbody tr{
    transition:background .18s ease;
}

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


/*
 * Không để hover phá màu ngày hiện tại.
 */

.wp-table tbody tr.today:hover td{
    background:#edf8f0 !important;
}


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

.wp-toolbar{
    width:96%;
    max-width:1400px;

    margin:20px auto;

    padding:13px 15px;

    background:#f8fafc;

    border:1px solid #d9e1ea;

    border-radius:18px;

    box-shadow:
        0 8px 24px rgba(31,41,55,.07);

    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:42px;

    padding:0 13px;

    background:#ffffff;

    border:1px solid #cbd5e1;

    border-radius:12px;

    color:#344054;

    font-size:14px;

    outline:none;

    box-sizing:border-box;
}

.wp-toolbar select:focus{
    border-color:#7da5d3;

    box-shadow:
        0 0 0 4px rgba(52,105,180,.10);
}

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

    padding:0 17px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    font-size:14px;
    font-weight:650;
    line-height:1;

    box-shadow:
        0 4px 10px rgba(31,41,55,.09);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

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

    box-shadow:
        0 7px 15px rgba(31,41,55,.13);
}


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

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

    .wp-card{
        width:100%;

        max-width:none;

        margin:10px 0;

        border-radius:18px;

        box-shadow:
            0 10px 28px rgba(31,41,55,.08);
    }

    .wp-header{
        padding:19px 13px 17px;
    }

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

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


    /*----------------------------------------------
        TABLE SCROLL
    ----------------------------------------------*/

    .wp-table{
        display:block;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;
    }

    .wp-table th{
        padding:10px 7px;

        font-size:13px;
    }

    .wp-table td{
        height:105px;

        font-size:13px;
    }


    /*----------------------------------------------
        DAY
    ----------------------------------------------*/

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

    .wp-day{
        min-width:100px;

        padding:9px !important;
    }

    .wp-day strong{
        font-size:15px;
    }

    .wp-day span{
        font-size:12px;
    }


    /*----------------------------------------------
        SESSION
    ----------------------------------------------*/

    .wp-session{
        min-width:300px;
    }

    .wp-session-inner{
        min-height:105px;

        padding:10px 9px 43px;
    }

    .wp-content{
        line-height:1.5;
    }

    .wp-duty{
        left:9px;
        right:9px;
        bottom:8px;

        padding-top:7px;

        font-size:12px;
    }


    /*----------------------------------------------
        TOOLBAR
    ----------------------------------------------*/

    .wp-toolbar{
        width:100%;

        margin:12px 0;

        padding:11px;

        border-radius:16px;
    }

    .wp-toolbar form{
        display:block;
    }

    .wp-toolbar select,
    .wp-toolbar .btn{
        width:100%;

        margin-top:8px;
    }

    .wp-toolbar select,
    .wp-toolbar .btn{
        height:42px;
    }
}


/*==========================================================
    PRINT
==========================================================*/

@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;
        border-radius:0;

        box-shadow:none;
    }

    .wp-header{
        padding:12px;

        background:#fff;

        border-bottom:2px solid #000;
    }

    .wp-title,
    .wp-date{
        color:#000;
    }

    .wp-table{
        width:100%;

        border-collapse:collapse;

        background:#fff;
    }

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

        background:#fff !important;

        color:#000 !important;

        box-shadow:none;
    }

    .wp-duty{
        color:#000;

        border-top:1px dashed #777;
    }

    .wp-day strong,
    .wp-day span{
        color:#000;
    }
}