body {

    font-family: "Sarabun", sans-serif !important;

    font-size: 18px;

}



/*font*/

.sarabun-thin {

    font-family: "Sarabun", serif;

    font-weight: 100;

    font-style: normal;

}



.sarabun-extralight {

    font-family: "Sarabun", serif;

    font-weight: 200;

    font-style: normal;

}



.sarabun-light {

    font-family: "Sarabun", serif;

    font-weight: 300;

    font-style: normal;

}



.sarabun-regular {

    font-family: "Sarabun", serif;

    font-weight: 400;

    font-style: normal;

}



.sarabun-medium {

    font-family: "Sarabun", serif;

    font-weight: 500;

    font-style: normal;

}



.sarabun-semibold {

    font-family: "Sarabun", serif;

    font-weight: 600;

    font-style: normal;

}



.sarabun-bold {

    font-family: "Sarabun", serif;

    font-weight: 700;

    font-style: normal;

}



.sarabun-extrabold {

    font-family: "Sarabun", serif;

    font-weight: 800;

    font-style: normal;

}



.sarabun-thin-italic {

    font-family: "Sarabun", serif;

    font-weight: 100;

    font-style: italic;

}



.sarabun-extralight-italic {

    font-family: "Sarabun", serif;

    font-weight: 200;

    font-style: italic;

}



.sarabun-light-italic {

    font-family: "Sarabun", serif;

    font-weight: 300;

    font-style: italic;

}



.sarabun-regular-italic {

    font-family: "Sarabun", serif;

    font-weight: 400;

    font-style: italic;

}



.sarabun-medium-italic {

    font-family: "Sarabun", serif;

    font-weight: 500;

    font-style: italic;

}



.sarabun-semibold-italic {

    font-family: "Sarabun", serif;

    font-weight: 600;

    font-style: italic;

}



.sarabun-bold-italic {

    font-family: "Sarabun", serif;

    font-weight: 700;

    font-style: italic;

}



.sarabun-extrabold-italic {

    font-family: "Sarabun", serif;

    font-weight: 800;

    font-style: italic;

}





.a-nav-link {

    text-align: center;

}



.a-active {

    background: #12c212;

    border-radius: 20px;

    padding: 10px;

}



a .active {

    color: #fff;

    font-weight: bolder;

}



/*txt*/

.txt_required::after {

    content: " *";

    color: #ff0000;

    font-weight: bolder;

}



.btn_main {

    background: #ff8800;

    color: #fff;

    padding: 10px 50px;

    text-transform: uppercase;

}



    .btn_main:hover {

        background: #ff8800;

        color: #fff;

        padding: 10px 50px;

        text-transform: uppercase;

    }



.popup_vdo {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    z-index: 10000;

    background: rgba(0,0,0,0.95);

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    visibility: hidden;

    opacity: 0;

}



    .popup_vdo.active {

        visibility: visible;

        opacity: 1;

    }



    .popup_vdo video {

        position: relative;

        max-width: 1200px;

        outline: none;

    }



.border_input {

    border: 1px solid #d2d6da !important;

    border-radius: 0.375rem !important;

    padding-left: 5px;

}



.close {

    position: absolute;

    top: 30px;

    right: 30px;

    cursor: pointer;

    filter: invert(1);

    max-width: 32px;

}



.border_input {

    border: 1px solid #d2d6da !important;

    border-radius: 0.375rem !important;

}



.modalPopup {

    position: fixed;

    top: 0;

    left: 0;

    text-align: center;

    top: 0;

    left: 0;

    background-color: #fff;

    opacity: 0.8;

    z-index: 5;

    width: 100%;

    height: 100%;

}



    .modalPopup img {

        position: fixed;

        top: 50%;

        left: 50%;

        /* bring your own prefixes */

        transform: translate(-50%, -50%);

    }



.pagination {

    display: flex;

    padding-left: 0;

    list-style: none;

    border-radius: .215rem;

}



    .pagination a:not(:disabled):not(.disabled) {

        cursor: pointer;

    }



    .pagination a {

        transition: background .2s ease-out,border-color 0s ease-out,color .2s ease-out;

    }



    .pagination a {

        position: relative;

        display: inline-flex;

        width: 36px;

        height: 36px;

        color: #76838f;

        background-color: transparent;

        border: 1px solid #e4eaec;

        border-radius: 50% !important;

        align-items: center;

        justify-content: center;

    }



    .pagination span span {

        position: relative;

        display: inline-flex;

        width: 36px;

        height: 36px;

        color: #fff;

        background-color: #1b63e1;

        border: 1px solid #1b63e1;

        border-radius: 50% !important;

        align-items: center;

        justify-content: center;

    }





/* data table */

.dataTable-wrapper .dataTable-container .table thead tr th {

    font-size:14px !important;

    font-weight:bolder !important;

    color:#000 !important;

}

    /* check box*/

    /* custom */



    [class*="acheck-"] tbody tr td input {

    position: absolute !important;

    opacity: 0;

    margin: 0;

}



[class*="acheck-"] tbody tr td {

    padding: 5px 0px;

}





    [class*="acheck-"] tbody tr td label {

        padding-left: 29px !important;

        min-height: 22px;

        line-height: 22px;

        display: inline-block;

        position: relative;

        vertical-align: top;

        margin-bottom: 0;

        font-weight: normal;

        cursor: pointer;

    }



[class*="acheck-"] {

    min-height: 22px;

    margin-top: 6px !important;

    margin-bottom: 6px !important;

    padding-left: 0px;

}



    [class*="acheck-"] tbody tr td input:disabled {

        cursor: default;

    }



    [class*="acheck-"] tbody tr td label::before,

    [class*="acheck-"] tbody tr td input[type="hidden"] + label::before {

        content: "";

        display: inline-block;

        position: absolute;

        width: 22px;

        height: 22px;

        border: 1px solid #D3CFC8;

        border-radius: 0px;

        margin-left: -29px;

        background: #fff;

    }



    [class*="acheck-"] tbody tr td input[type="radio"]:checked + label::after,

    [class*="acheck-"] tbody tr td input[type="radio"]:checked + input[type="hidden"] + label::after {

        /*        content: "";

        display: inline-block;

        position: absolute;

        top: 5px;

        left: 5px;

        height: 12px;

        width: 12px;

        background-color: #ff8800;

        border-radius: 50%;*/

        content: "";

        display: inline-block;

        position: absolute;

        top: 0;

        left: 0;

        width: 7px;

        height: 10px;

        border: solid 2px #fff;

        border-left: none;

        border-top: none;

        transform: translate(7.75px, 4.5px) rotate(45deg);

        -ms-transform: translate(7.75px, 4.5px) rotate(45deg);

    }



    [class*="acheck-"] tbody tr td input[type="checkbox"]:checked + label::after,

    [class*="acheck-"] tbody tr td input[type="checkbox"]:checked + input[type="hidden"] + label::after {

        content: "";

        display: inline-block;

        position: absolute;

        top: 0;

        left: 0;

        width: 7px;

        height: 10px;

        border: solid 2px #707070;

        border-left: none;

        border-top: none;

        transform: translate(7.75px, 4.5px) rotate(45deg);

        -ms-transform: translate(7.75px, 4.5px) rotate(45deg);

    }



    [class*="acheck-"] tbody tr td input[type="radio"] + label::before,

    [class*="acheck-"] tbody tr td input[type="radio"] + input[type="hidden"] + label::before {

        border-radius: 50%;

    }



    [class*="acheck-"] tbody tr td input[type="checkbox"] + label::before,

    [class*="acheck-"] tbody tr td input[type="checkbox"] + input[type="hidden"] + label::before {

        border-radius: 5px;

    }





    [class*="acheck-"] tbody tr td input:not(:checked):not(:disabled):hover + label::before,

    [class*="acheck-"] tbody tr td input:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

        border-width: 2px;

    }



    [class*="acheck-"] tbody tr td input:disabled + label,

    [class*="acheck-"] tbody tr td input:disabled + input[type="hidden"] + label,

    [class*="acheck-"] tbody tr td input:disabled + label::before,

    [class*="acheck-"] tbody tr td input:disabled + input[type="hidden"] + label::before {

        pointer-events: none;

        cursor: default;

        filter: alpha(opacity=65);

        -webkit-box-shadow: none;

        box-shadow: none;

        opacity: .65;

    }



.acheck-default tbody tr td input:not(:checked):not(:disabled):hover + label::before,

.acheck-default tbody tr td input:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #d43f3a;

}



.acheck-default tbody tr td input:checked + label::before,

.acheck-default tbody tr td input:checked + input[type="hidden"] + label::before {

    background-color: #d9534f;

    border-color: #d43f3a;

}



/**/



[class*="icheck-"] {

    min-height: 22px;

    margin-top: 6px !important;

    margin-bottom: 6px !important;

    padding-left: 0px;

}



.icheck-inline {

    display: inline-block;

}



    .icheck-inline + .icheck-inline {

        margin-left: .75rem;

        margin-top: 6px;

    }



[class*="icheck-"] > label {

    padding-left: 29px !important;

    min-height: 22px;

    line-height: 22px;

    display: inline-block;

    position: relative;

    vertical-align: top;

    margin-bottom: 0;

    font-weight: normal;

    cursor: pointer;

}



[class*="icheck-"] > input:first-child {

    position: absolute !important;

    opacity: 0;

    margin: 0;

}



    [class*="icheck-"] > input:first-child:disabled {

        cursor: default;

    }



    [class*="icheck-"] > input:first-child + label::before,

    [class*="icheck-"] > input:first-child + input[type="hidden"] + label::before {

        content: "";

        display: inline-block;

        position: absolute;

        width: 22px;

        height: 22px;

        border: 1px solid #D3CFC8;

        border-radius: 0px;

        margin-left: -29px;

    }



    [class*="icheck-"] > input:first-child:checked + label::after,

    [class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after {

        content: "";

        display: inline-block;

        position: absolute;

        top: 0;

        left: 0;

        width: 7px;

        height: 10px;

        border: solid 2px #fff;

        border-left: none;

        border-top: none;

        transform: translate(7.75px, 4.5px) rotate(45deg);

        -ms-transform: translate(7.75px, 4.5px) rotate(45deg);

    }



[class*="icheck-"] > input[type="radio"]:first-child + label::before,

[class*="icheck-"] > input[type="radio"]:first-child + input[type="hidden"] + label::before {

    border-radius: 50%;

}



[class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + label::before,

[class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-width: 2px;

}



[class*="icheck-"] > input:first-child:disabled + label,

[class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label,

[class*="icheck-"] > input:first-child:disabled + label::before,

[class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label::before {

    pointer-events: none;

    cursor: default;

    filter: alpha(opacity=65);

    -webkit-box-shadow: none;

    box-shadow: none;

    opacity: .65;

}



.icheck-default > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-default > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #adadad;

}



.icheck-default > input:first-child:checked + label::before,

.icheck-default > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #e6e6e6;

    border-color: #adadad;

}



.icheck-default > input:first-child:checked + label::after,

.icheck-default > input:first-child:checked + input[type="hidden"] + label::after {

    border-bottom-color: #333;

    border-right-color: #333;

}



.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #2e6da4;

}



.icheck-primary > input:first-child:checked + label::before,

.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #337ab7;

    border-color: #2e6da4;

}



.icheck-success > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-success > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #4cae4c;

}



.icheck-success > input:first-child:checked + label::before,

.icheck-success > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #5cb85c;

    border-color: #4cae4c;

}



.icheck-info > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-info > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label ::before {

    border-color: #46b8da;

}



.icheck-info > input:first-child:checked + label::before,

.icheck-info > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #5bc0de;

    border-color: #46b8da;

}



.icheck-warning > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-warning > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #eea236;

}



.icheck-warning > input:first-child:checked + label::before,

.icheck-warning > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #f0ad4e;

    border-color: #eea236;

}



.icheck-danger > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-danger > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #d43f3a;

}



.icheck-danger > input:first-child:checked + label::before,

.icheck-danger > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #d9534f;

    border-color: #d43f3a;

}



.icheck-turquoise > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-turquoise > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #1abc9c;

}



.icheck-turquoise > input:first-child:checked + label::before,

.icheck-turquoise > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #1abc9c;

    border-color: #1abc9c;

}



.icheck-emerland > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-emerland > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #2ecc71;

}



.icheck-emerland > input:first-child:checked + label::before,

.icheck-emerland > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #2ecc71;

    border-color: #2ecc71;

}



.icheck-peterriver > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-peterriver > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #3498db;

}



.icheck-peterriver > input:first-child:checked + label::before,

.icheck-peterriver > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #3498db;

    border-color: #3498db;

}



.icheck-amethyst > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-amethyst > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #9b59b6;

}



.icheck-amethyst > input:first-child:checked + label::before,

.icheck-amethyst > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #9b59b6;

    border-color: #9b59b6;

}



.icheck-wetasphalt > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-wetasphalt > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #34495e;

}



.icheck-wetasphalt > input:first-child:checked + label::before,

.icheck-wetasphalt > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #34495e;

    border-color: #34495e;

}



.icheck-greensea > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-greensea > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #16a085;

}



.icheck-greensea > input:first-child:checked + label::before,

.icheck-greensea > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #16a085;

    border-color: #16a085;

}



.icheck-nephritis > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-nephritis > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #27ae60;

}



.icheck-nephritis > input:first-child:checked + label::before,

.icheck-nephritis > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #27ae60;

    border-color: #27ae60;

}



.icheck-belizehole > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-belizehole > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #2980b9;

}



.icheck-belizehole > input:first-child:checked + label::before,

.icheck-belizehole > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #2980b9;

    border-color: #2980b9;

}



.icheck-wisteria > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-wisteria > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #8e44ad;

}



.icheck-wisteria > input:first-child:checked + label::before,

.icheck-wisteria > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #8e44ad;

    border-color: #8e44ad;

}



.icheck-midnightblue > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-midnightblue > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #2c3e50;

}



.icheck-midnightblue > input:first-child:checked + label::before,

.icheck-midnightblue > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #2c3e50;

    border-color: #2c3e50;

}



.icheck-sunflower > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-sunflower > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #f1c40f;

}



.icheck-sunflower > input:first-child:checked + label::before,

.icheck-sunflower > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #f1c40f;

    border-color: #f1c40f;

}



.icheck-carrot > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-carrot > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #e67e22;

}



.icheck-carrot > input:first-child:checked + label::before,

.icheck-carrot > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #e67e22;

    border-color: #e67e22;

}



.icheck-alizarin > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-alizarin > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #e74c3c;

}



.icheck-alizarin > input:first-child:checked + label::before,

.icheck-alizarin > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #e74c3c;

    border-color: #e74c3c;

}



.icheck-clouds > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-clouds > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #ecf0f1;

}



.icheck-clouds > input:first-child:checked + label::before,

.icheck-clouds > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #ecf0f1;

    border-color: #ecf0f1;

}



.icheck-clouds > input:first-child:checked + label::after,

.icheck-clouds > input:first-child:checked + input[type="hidden"] + label::after {

    border-bottom-color: #95a5a6;

    border-right-color: #95a5a6;

}



.icheck-concrete > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-concrete > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #95a5a6;

}



.icheck-concrete > input:first-child:checked + label::before,

.icheck-concrete > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #95a5a6;

    border-color: #95a5a6;

}



.icheck-orange > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-orange > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #f39c12;

}



.icheck-orange > input:first-child:checked + label::before,

.icheck-orange > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #f39c12;

    border-color: #f39c12;

}



.icheck-pumpkin > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-pumpkin > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #d35400;

}



.icheck-pumpkin > input:first-child:checked + label::before,

.icheck-pumpkin > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #d35400;

    border-color: #d35400;

}



.icheck-pomegranate > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-pomegranate > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #c0392b;

}



.icheck-pomegranate > input:first-child:checked + label::before,

.icheck-pomegranate > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #c0392b;

    border-color: #c0392b;

}



.icheck-silver > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-silver > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #bdc3c7;

}



.icheck-silver > input:first-child:checked + label::before,

.icheck-silver > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #bdc3c7;

    border-color: #bdc3c7;

}



.icheck-asbestos > input:first-child:not(:checked):not(:disabled):hover + label::before,

.icheck-asbestos > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {

    border-color: #7f8c8d;

}



.icheck-asbestos > input:first-child:checked + label::before,

.icheck-asbestos > input:first-child:checked + input[type="hidden"] + label::before {

    background-color: #7f8c8d;

    border-color: #7f8c8d;

}

/**/





.backdroup-font {

    font-family: 'IBM Plex Sans Thai', sans-serif;

}



@font-face {

    font-family: custom_font;

    src: url("../fonts/Syncopate-Regular.ttf") format("opentype");

}



@font-face {

    font-family: custom_font-bold;

    src: url("../fonts/Syncopate-Bold.ttf") format("opentype");

}



/* ==================== FF Design System ==================== */



/* --- Common styles --- */

.card {

    border: none;

    border-radius: 0.75rem;

    box-shadow: 0 2px 12px rgba(0,0,0,0.08);

    transition: box-shadow 0.3s ease;

}

.card:hover {

    box-shadow: 0 4px 20px rgba(0,0,0,0.12);

}

h5.mb-0, h5.card-title {

    color: #344767;

    font-weight: 700;

}



/* --- Override legacy table styles ให้เป็นรูปแบบเดียวกัน --- */

.df_border {

    border: none !important;

}

.bg-gray-100.text_header_table {

    background: transparent !important;

    color: inherit !important;

}

.table thead th,

.dataTable-table thead th {

    background-color: #f8f9fa !important;

    font-weight: 600 !important;

    color: #344767 !important;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 12px 16px;

    white-space: nowrap;

}

.table tbody td,

.dataTable-table tbody td {

    padding: 10px 16px;

    vertical-align: middle;

    font-size: 0.9rem;

    color: #495057;

}

.table tbody tr,

.dataTable-table tbody tr {

    border-bottom: 1px solid #f0f0f0;

    transition: background-color 0.15s ease;

}



.sidenav .navbar-brand { font-size: 1rem; }

.footer .copyright { font-size: 0.8rem; color: #8392ab; }



/* --- FF Logo badge --- */

.ff-logo-admin {

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

    background: linear-gradient(135deg, #ff6a00, #e55d00);

    color: #fff; font-weight: 700;

}

.ff-logo-member {

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

    background: linear-gradient(135deg, #348a45, #2d7a3e);

    color: #fff; font-weight: 700;

}



/* ==================== นักวิจัย (Member) = เขียว ==================== */



/* เมนู level แม่ (Data) - สีเทาเมื่อ active/expanded */

.role-member .sidenav .navbar-nav > .nav-item > .nav-link[aria-expanded="true"],

.role-member .sidenav .navbar-nav > .nav-item > .nav-link.active[data-bs-toggle="collapse"] {

    background: rgba(255, 255, 255, 0.12) !important;

    box-shadow: none !important;

}



/* เมนู level ลูก (Report, โครงการ, ...) - สีเขียวเมื่อ active

   ใช้ `.nav` (ul ของ submenu) ไม่ใช่ `.collapse` — เพราะตอน animate Bootstrap เปลี่ยน

   `.collapse`→`.collapsing` ชั่วคราว ถ้า selector อิง `.collapse` จะหลุด → โผล่สีส้ม default แวบนึง */

.role-member .sidenav .navbar-nav .nav-item .nav .nav-item .nav-link.active {

    background: linear-gradient(135deg, #348a45, #2d7a3e) !important;

    border-radius: 0.375rem !important;

    box-shadow: 0 3px 5px rgba(52, 138, 69, 0.3);

    color: #fff !important;

}

.role-member .table thead th,

.role-member .dataTable-table thead th {

    border-bottom: 2px solid #348a45 !important;

}

.role-member .table tbody tr:hover,

.role-member .dataTable-table tbody tr:hover {

    background-color: rgba(52, 138, 69, 0.04) !important;

}

.role-member .btn-success {

    background: linear-gradient(135deg, #348a45, #2d7a3e) !important;

    border: none;

    box-shadow: 0 3px 6px rgba(52, 138, 69, 0.3);

}

.role-member .btn-success:hover {

    box-shadow: 0 5px 12px rgba(52, 138, 69, 0.4);

    transform: translateY(-1px);

}

.role-member .pagination span span {

    background-color: #348a45 !important;

    border-color: #348a45 !important;

}

.role-member .form-control:focus,

.role-member .form-select:focus {

    border-color: #348a45 !important;

    box-shadow: 0 0 0 0.2rem rgba(52, 138, 69, 0.15) !important;

}



/* ==================== ผู้ประสานงาน (Admin) = ส้ม ==================== */



/* เมนู level แม่ (Data) - สีเทาเมื่อ active/expanded */

.role-admin .sidenav .navbar-nav > .nav-item > .nav-link[aria-expanded="true"],

.role-admin .sidenav .navbar-nav > .nav-item > .nav-link.active[data-bs-toggle="collapse"] {

    background: rgba(255, 255, 255, 0.12) !important;

    box-shadow: none !important;

}



/* เมนู level ลูก (Report, โครงการ, ...) - สีส้มเมื่อ active (ดู comment ฝั่ง member เรื่อง .nav vs .collapse) */

.role-admin .sidenav .navbar-nav .nav-item .nav .nav-item .nav-link.active {

    background: linear-gradient(135deg, #ff6a00, #e55d00) !important;

    border-radius: 0.375rem !important;

    box-shadow: 0 3px 5px rgba(255, 106, 0, 0.3);

    color: #fff !important;

}

.role-admin .table thead th,

.role-admin .dataTable-table thead th {

    border-bottom: 2px solid #ff6a00 !important;

}

.role-admin .table tbody tr:hover,

.role-admin .dataTable-table tbody tr:hover {

    background-color: rgba(255, 106, 0, 0.04) !important;

}

.role-admin .btn-success {

    background: linear-gradient(135deg, #ff6a00, #e55d00) !important;

    border: none;

    box-shadow: 0 3px 6px rgba(255, 106, 0, 0.3);

}

.role-admin .btn-success:hover {

    box-shadow: 0 5px 12px rgba(255, 106, 0, 0.4);

    transform: translateY(-1px);

}

/* element สีเขียว (success) อื่นๆ ในฝั่ง admin -> ส้ม:

   icon การ์ด (bg-gradient-success), เงา (shadow-success), แท็บโครงการที่ยังไม่ active (btn-outline-success) */

.role-admin .bg-gradient-success {

    background-image: linear-gradient(195deg, #ff7a18, #e55d00) !important;

}

.role-admin .shadow-success {

    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(255, 106, 0, .4) !important;

}

.role-admin .btn-outline-success {

    color: #e55d00 !important;

    border-color: #ff6a00 !important;

}

.role-admin .btn-outline-success:hover {

    background: linear-gradient(135deg, #ff6a00, #e55d00) !important;

    color: #fff !important;

    border-color: #ff6a00 !important;

}

.role-admin .pagination span span {

    background-color: #ff6a00 !important;

    border-color: #ff6a00 !important;

}

.role-admin .form-control:focus,

.role-admin .form-select:focus {

    border-color: #ff6a00 !important;

    box-shadow: 0 0 0 0.2rem rgba(255, 106, 0, 0.15) !important;

}



/* ===== Admin: form input (textbox + dropdown) กรอบส้ม + ฟอนต์ส้ม + ความสูงเท่ากัน (2026-06-24) =====

   textbox (.form-control) เดิม underline -> ทำเป็นกล่องสูงเท่า dropdown (~42px)

   ใส่ context .input-group-static ให้ specificity สูงพอชนะกฎเดิม (line ~1121) */

.role-admin .form-control,

.role-admin .input-group.input-group-static input.form-control,

.role-admin .input-group.input-group-static select.form-control,

.role-admin .input-group.input-group-static textarea.form-control {

    border: 1px solid #ff6a00 !important;

    border-radius: 6px !important;

    padding: 8px 12px !important;

    min-height: 42px !important;

    color: #e55d00 !important;

    background-color: #fff !important;

    font-size: 0.95rem !important;

    line-height: 1.5 !important;

}

/* select: เว้นที่ขวาให้ลูกศร + ลูกศรส้ม (ทั้งใน/นอก input-group-static) */

.role-admin select.form-control,

.role-admin .input-group.input-group-static select.form-control {

    padding-right: 32px !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ff6a00' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;

    background-position: right 12px center !important;

    background-size: 12px !important;

}

.role-admin .input-group.input-group-static textarea.form-control { min-height: 80px !important; }

.role-admin .form-control::placeholder { color: rgba(229, 93, 0, .45); }



/* textbox (input/textarea) เดิมมี underline ของ Material Dashboard เป็น background-image gradient

   -> ลบทิ้ง ไม่งั้นเห็นเส้นขีดซ้อนในกล่อง (ไม่แตะ select ที่ใช้ background-image ทำลูกศร

   และไม่แตะ box-shadow เพื่อคง focus glow ส้ม) */

.role-admin input.form-control,

.role-admin textarea.form-control,

.role-admin .input-group.input-group-static input.form-control,

.role-admin .input-group.input-group-static textarea.form-control {

    background-image: none !important;

}



/* ฟอร์ม "เพิ่มข้อมูล" (.ff-addrow): ใช้ label สูงคงที่ + control ตรงๆ (ไม่ใช้ input-group-static)

   -> ทุกช่อง input/dropdown เริ่มระดับเดียวกันเสมอ (กันปัญหา Material Dashboard is-filled ทำเหลื่อม)

   คอลัมน์ปุ่มมี label spacer ( ) ให้ปุ่มตรงแนวกับ input */

.ff-addrow .ff-flabel {

    display: block;

    height: 22px;

    margin: 0 0 6px 0;

    padding: 0;

    font-size: 0.875rem;

    line-height: 1.5;

    font-weight: 500;

    white-space: nowrap;

    color: #495057;

}



/* card "Detail" form ที่ label ยาว -> ให้ตัดบรรทัดได้ + สูงคงที่ 2 บรรทัด

   (กันช่องเหลื่อมเมื่อ label สั้น/ยาวต่างกันในแถวเดียวกัน) */

.ff-addrow.ff-wrap .ff-flabel {

    height: auto;

    min-height: 44px;

    white-space: normal;

    display: flex;

    align-items: flex-end;

}



/* dropdown styled-dropdown (เขียว) -> ส้ม + ลูกศรส้ม */

.role-admin .styled-dropdown {

    color: #e55d00 !important;

    border: 1px solid #ff6a00 !important;

    min-height: 42px;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6a00'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;

}

.role-admin .styled-dropdown:hover {

    background-color: #fff6f0 !important;

    box-shadow: 0 0 5px rgba(255, 106, 0, .4) !important;

}



/* dropdown select2 (สังกัด ฯลฯ) -> ส้ม */

.role-admin .select2-container--default .select2-selection--single {

    border-color: #ff6a00 !important;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6a00'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;

}

.role-admin .select2-container--default .select2-selection--single .select2-selection__rendered {

    color: #e55d00 !important;

}



/* ==================== Spacing Improvements ==================== */



/* Sidebar spacing */

.sidenav .navbar-nav > .nav-item {

    margin-bottom: 4px !important;

}

.sidenav .navbar-nav > .nav-item > .nav-link {

    padding: 10px 16px !important;

    margin: 2px 10px !important;

    border-radius: 0.5rem !important;

    font-size: 0.95rem;

}

.sidenav .navbar-nav .nav-item .nav .nav-item .nav-link,

.sidenav .navbar-nav .nav-item .nav .nav-item .nav-link.active {

    padding: 8px 16px 8px 40px !important;

    margin: 2px 10px !important;

    font-size: 0.9rem;

    border-radius: 0.375rem !important;

}



/* Sidebar header (logo + user) */

.sidenav .sidenav-header {

    padding: 20px 16px 10px !important;

}

.sidenav .nav-item.mb-2 {

    margin-bottom: 12px !important;

}



/* Content area - breathing room */

.main-content .container-fluid.py-4 {

    padding-top: 1rem !important;

}

.main-content .navbar.navbar-main {

    margin-top: 1rem !important;

    margin-bottom: 0.5rem;

}



/* Card header spacing */

.card .card-header {

    padding: 20px 24px 12px;

}

.card .card-body {

    padding: 16px 24px 24px;

}



/* Search/filter row spacing */

.card-body .row {

    margin-bottom: 8px;

}



/* Footer spacing */

.footer.py-4 {

    padding-top: 1.5rem !important;

    padding-bottom: 1rem !important;

    margin-top: 1rem;

}



/* Responsive */

@media (max-width: 768px) {

    .table { font-size: 0.85rem; }

    h5 { font-size: 1.1rem; }

    .card .card-header { padding: 16px 16px 8px; }

    .card .card-body { padding: 12px 16px 16px; }

}



/* ==================== Polish & Professional Touch ==================== */



/* Project info card (used in projectDetail, projectReport, projectClose) */

.card h4 {

    color: #1a2a4a;

    font-weight: 700;

    font-size: 1.3rem;

}

.card h5 {

    color: #344767;

    font-weight: 600;

    font-size: 1rem;

    margin-top: 1rem;

}



/* Project detail labels */

.card-body .row .col-md-4,

.card-body .row .col-md-3 {

    margin-bottom: 0.5rem;

}



/* Project menu buttons (รายละเอียดโครงการ, รายงานความก้าวหน้า, ...) */

.btn.btn-success.btn-lg,

.btn.btn-outline-success.btn-lg {

    font-size: 0.9rem !important;

    padding: 10px 16px !important;

    border-radius: 0.5rem !important;

    font-weight: 500;

    transition: all 0.2s ease;

}

.btn.btn-outline-success.btn-lg:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(52, 138, 69, 0.2);

}



/* Review section (admin report review) */

.card h6 {

    font-weight: 600;

    color: #495057;

}



/* File upload area */

.card .input-group {

    margin-bottom: 0.5rem;

}



/* Status dropdown styling */

.form-control.border_input,

select.form-control {

    border: 1px solid #d2d6da !important;

    border-radius: 0.5rem !important;

    padding: 8px 12px;

    font-size: 0.9rem;

    transition: border-color 0.2s ease;

}



/* DropDownList in input-group-static */

.input-group.input-group-static select.form-control {

    margin-top: 6px !important;

    padding: 10px 32px 10px 12px !important;

    appearance: none !important;

    -webkit-appearance: none !important;

    -moz-appearance: none !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;

    background-position: right 12px center !important;

    background-size: 12px !important;

    border: 1px solid #d2d6da !important;

    border-radius: 0.5rem !important;

    cursor: pointer;

}



/* Buttons consistency */

.btn {

    font-size: 0.875rem;

    font-weight: 500;

    border-radius: 0.5rem;

    transition: all 0.2s ease;

    letter-spacing: 0.3px;

}

.btn:hover {

    transform: translateY(-1px);

}

.btn-info {

    background: linear-gradient(135deg, #1b63e1, #1557c0) !important;

    border: none;

    color: #fff !important;

}

.btn-danger {

    background: linear-gradient(135deg, #ea4335, #d33426) !important;

    border: none;

}

.btn-secondary {

    background: linear-gradient(135deg, #8392ab, #6c7b94) !important;

    border: none;

    color: #fff !important;

}



/* Card with timeline icon (report pages) */

.card .material-icons-round,

.card .material-icons {

    font-size: 1.5rem;

}



/* Links in tables */

.table a,

.dataTable-table a {

    font-weight: 500;

    text-decoration: none;

    transition: color 0.2s ease;

}



/* Admin role: orange links */

.role-admin .table a,

.role-admin .dataTable-table a {

    color: #ff6a00;

}

.role-admin .table a:hover,

.role-admin .dataTable-table a:hover {

    color: #e55d00;

    text-decoration: underline;

}



/* Member role: green links */

.role-member .table a,

.role-member .dataTable-table a {

    color: #348a45;

}

.role-member .table a:hover,

.role-member .dataTable-table a:hover {

    color: #2d7a3e;

    text-decoration: underline;

}



/* View buttons in report tables */

.table a[href*="upload"],

.table a[href*="View"] {

    display: inline-block;

    padding: 4px 12px;

    border-radius: 0.375rem;

    font-size: 0.8rem;

    font-weight: 500;

}

.role-admin .table a[href*="upload"] {

    background: rgba(255, 106, 0, 0.1);

    color: #ff6a00;

}

.role-member .table a[href*="upload"] {

    background: rgba(52, 138, 69, 0.1);

    color: #348a45;

}



/* Login page improvements */

.page-header .card {

    backdrop-filter: blur(10px);

    border: 2px solid rgba(255,255,255,0.2);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.page-header .card:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;

}



/* Dashboard status cards */

.card .bg-gradient-warning,

.card .bg-gradient-info,

.card .bg-gradient-primary,

.card .bg-gradient-danger {

    border-radius: 0.75rem;

}



/* Search bar */

.btn[class*="bg-gradient"] {

    border-radius: 0.5rem;

    text-transform: uppercase;

    font-weight: 600;

    letter-spacing: 1px;

}



/* Empty state */

.table tbody:empty::after {

    content: "ไม่มีข้อมูล";

    display: block;

    text-align: center;

    padding: 2rem;

    color: #8392ab;

    font-style: italic;

}



/* Smooth transitions everywhere */

* {

    transition-property: background-color, border-color, box-shadow;

    transition-duration: 0.15s;

    transition-timing-function: ease;

}



/* Print styles */

@media print {

    .sidenav, .navbar, .footer, .btn { display: none !important; }

    .main-content { margin-left: 0 !important; }

}



/* ==================== Fix: Sidebar (2026-06-23) ==================== */



/* 1) FF logo + ชื่อระบบ: ตรงแนวคอลัมน์เดียวกับ avatar/เมนู + จัดกลางแนวตั้ง + ไม่ทับเส้น hr

   (navbar-brand ของ material-dashboard มี padding-left ดันโลโก้เยื้องขวา + ไม่ center แนวตั้ง) */

.sidenav .sidenav-header {

    display: flex;

    align-items: center;

    min-height: 62px;

    padding: 10px 16px 16px !important;

}

.sidenav .sidenav-header .navbar-brand {

    padding-left: 10px !important;

    padding-right: 0 !important;

    width: 100%;

}



/* 2) กันเมนูย่อย "เด้งๆ" ตอนย่อ/ขยาย

   - collapse: transition เฉพาะ height (ไม่ใช่ all)

   - nav-link: transition เฉพาะสี (กัน `* { transition }` ทำ box-shadow/layout เด้งตอน reflow) */

#sidenav-main .collapse,

#sidenav-main .collapsing {

    transition: height 0.3s ease !important;

}

#sidenav-main .navbar-nav .nav-link {

    transition: background-color 0.15s ease, color 0.15s ease !important;

}



/* 3) ตาราง admin (News/Banner/ฯลฯ): จอแคบตารางล้น → ปุ่มขวาสุด (ลบ) ถูกตัด

   ตารางเลื่อนแนวนอนได้อยู่แล้ว (.table-responsive overflow-x:auto) แต่ Mac ซ่อน scrollbar (overlay)

   → style scrollbar ให้เห็นชัด (กลายเป็น classic bar ไม่ใช่ overlay) ผู้ใช้รู้ว่าเลื่อนได้ */

.table-responsive {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;                                  /* Firefox */

    scrollbar-color: rgba(0, 0, 0, .35) rgba(0, 0, 0, .08);

}

.table-responsive::-webkit-scrollbar { height: 10px; }

.table-responsive::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); border-radius: 5px; }

.table-responsive::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .28); border-radius: 5px; }

.table-responsive::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .45); }



/* ปักหมุดคอลัมน์สุดท้าย (ปุ่มจัดการ/ลบ) ให้เห็นเสมอแม้ตารางล้น — กันปัญหา Mac ซ่อน scrollbar

   คอลัมน์อื่นเลื่อนลอดใต้คอลัมน์นี้ได้ปกติ */

.table-responsive .dataTable-table > thead > tr > th:last-child,

.table-responsive .dataTable-table > tbody > tr > td:last-child {

    position: sticky;

    right: 0;

    background-color: #fff;

    z-index: 2;

    box-shadow: -8px 0 10px -8px rgba(0, 0, 0, .15);

}



/* ==================== ตัวเลือก "แสดงผล" (page size) — 2026-06-23 ==================== */

/* label "แสดงผล" บางหน้าใหญ่ 18px -> ลดให้พอดี + ไม่ตก 2 บรรทัด (ทุกหน้าที่มี dropdown นี้) */

.col-md-2:has(select[id$="pageSize"]) { font-size: 0.9rem; }

.col-md-2:has(select[id$="pageSize"]) .col-md-6.text-end { white-space: nowrap; padding-left: 0; }



/* select page size ถูก appearance:none เลยไม่มีลูกศร -> ใส่ลูกศร chevron ให้รู้ว่าเป็น dropdown */

select[id$="pageSize"] {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

    background-repeat: no-repeat;

    background-position: right 8px center;

    background-size: 11px;

    padding-right: 26px !important;

    cursor: pointer;

}