:root {
    /* ใช้เฉดสีเดิม แต่ปรับค่าความอิ่มสีให้ดูโมเดิร์นขึ้น */
    --primary-yellow: #F4D03F;
    --primary-blue: #3498DB;
    --dark-blue: #2980B9;
    --primary-green: #27AE60;
    --primary-red: #E74C3C;
    --bg-color: #F8F9FA;
    --text-main: #333333;
    --text-muted: #666666;
    --border-color: #E0E0E0;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* --- ตั้งค่าพื้นฐาน (Reset & Base Styles) --- */
* { box-sizing: border-box; margin: 0; padding: 0; 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Prompt', sans-serif;
}

body { display: flex; flex-direction: column; min-height: 100vh; background-color: #f5f7fb; color: #333; 
       font-size: 12px;
}







/* --- กลไกหลัก: ซ่อน Checkbox ตัวควบคุมไว้ไม่ให้เห็น --- */
#menu-control { display: none; }

/* --- 1. Header (ส่วนหัว) --- */
header {

    padding: 15px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky; top: 0; z-index: 100;
    height: 90px;
    background: -webkit-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
    background: -o-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
    background: -moz-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
    background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
}
.logo { font-size: 24px; font-weight: bold; color: #1e3a8a; }

/* ปุ่มเปิดเมนูบนมือถือ (ใช้ <label> แทน <button>) */
.menu-toggle {
    display: none; /* ซ่อนไว้ในหน้าจอเดสก์ท็อป */
    font-size: 28px;
    cursor: pointer;
    margin-right: 15px;
    color: #333;
    user-select: none;
}




/* --- โครงสร้างเนื้อหากลาง (Main Wrapper) --- */
.main-wrapper { display: flex; flex: 1; position: relative; }

/* --- 2. Navigation Bar (แถบเมนูด้านซ้าย) --- */
nav {
    width: 300px;
    background-color: #eaeaea;
    color: #ffffff;
    padding: 15px 10px;
    transition: transform 0.3s ease; /* เอฟเฟกต์เลื่อนนุ่มนวล */
}


/* --- 3. Content (พื้นที่เนื้อหาด้านขวา) --- */
main { flex: 1; padding: 0px; 
       background-color: #eaeaea;
}


/* --- ฉากหลังโปร่งแสงสำหรับกดปิดเมนูบนมือถือ --- */
.overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 90;
}

/* --- 4. Footer (ส่วนท้าย) --- */
footer { background-color: #6c757d; color: #fff; text-align: center; padding: 20px; font-size: 14px;}

/* ==========================================
   Responsive Rules (หน้าจอมือถือ/แท็บเล็ต)
   ========================================== */
@media (max-width: 768px) {
    /* แสดงปุ่มเปิดเมนู (Label) */
    .menu-toggle { display: block; }
    #iconlogo{ display: none; }
    /* ผลักแถบเมนูไปซ่อนด้านซ้ายหน้าจอ (-100%) */
    nav {
        position: fixed;// top: 0; 
        left: 0; height: 100vh; z-index: 99;
        transform: translateX(-100%);
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }

    /* 💡 มนตร์วิเศษของ CSS: เมื่อติ๊กถูกที่ Checkbox ให้ทำสิ่งต่อไปนี้... */

    /* 1. สั่งให้เมนู (nav) เลื่อนสไลด์กลับเข้ามาในจอ */
    #menu-control:checked ~ .main-wrapper nav {
        transform: translateX(0);
    }

    /* 2. สั่งให้ฉากหลังโปร่งแสง (Overlay) แสดงตัวออกมา */
    #menu-control:checked ~ .main-wrapper .overlay {
        display: block;
    }

    main { padding: 0px; }
}


.badge {

    color: white;
    padding: 5px 15px;
    margin: 5px 15px;

    border-radius: 20px;
    font-size: 18px;
    font-weight: 500;
    width: fit-content;
    height: fit-content;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    color: #3E3530;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 2.8em;
}

h3 {
    font-size: 1.6em;
}

p, ul, ol {
    margin-top: 0;
    line-height: 180%;
}

a {
    text-decoration: none;
    color: #3E3530;
}


#content {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 10px;
    box-shadow: var(--card-shadow);
}



#sidebar ul {
    margin: 0px 0px 20px 0px;
    padding: 0;
    list-style: none;
}

#sidebar li {
    margin-bottom: 20px;
    border-bottom: 1px solid #D6D6D6;
    background: #FFFFFF;
}

#sidebar li ul {
    margin: 0px 0px 0px 0px;
    padding-bottom: 30px;
    background: none;
}

#sidebar li li {
    line-height: 30px;
    margin: 0px 30px;
    padding: 0px 0px 0px 0px;
    border-bottom: 1px dotted #D7D7D7;
    background: none;
}

#sidebar li li span {
    display: block;
    margin-top: -20px;
    padding: 0;
    font-size: 11px;
    font-style: italic;
}

#sidebar h2 {
    padding: 10px 0px 10px 30px;
    background: #F6F6F6;
    letter-spacing: -.5px;
    font-size: 1.4em;
    color: #696969;

}

#sidebar p {
    margin: 0 0px;
    padding: 0px 30px 20px 30px;
    text-align: justify;
}

#sidebar a {
    border: none;
    color: #727272;
}

#sidebar li a:hover {
    background-color: #F5F7FA;
    color: var(--primary-blue);
    padding-left: 10px;


}


.post {
    padding-top: 0px;
    //border-bottom: 1px solid #EAEAEA;
}

.post .title {
    clear: both;
    letter-spacing: -1px;
    padding: 10px 10px 0px 40px;
    font-size: 36px;
    color: #0A7A98;
}

.post .title30 {
    clear: both;
    letter-spacing: -1px;
    padding: 10px 10px 0px 40px;
    font-size: 30px;
    color: #0A7A98;
}
.post .title20 {
    clear: both;
    letter-spacing: -1px;
    padding: 10px 10px 0px 30px;
    font-size: 20px;
    color: #0A7A98;
}

.post .title a {
    color: #0A7A98;
    border: none;
}

.post .meta {
    float: right;
    height: 48px;
    text-align: left;
    margin-bottom: 0px;
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-size: 14px;
    font-weight: normal;
}

.post .meta .clip {
    display: inline-block;
    /*width: 156px;*/
    min-width: 405px;
    width: fit-content;
    height: 40px;
    padding: 8px 0px 0px 0px;

    border-radius:25px;
   
    -webkit-box-shadow: 2px 2px 9px -2px rgba(140,138,140,1);
    -moz-box-shadow: 2px 2px 9px -2px rgba(140,138,140,1);
    /*background: url(../../resources/images/img05.jpg) no-repeat left top;*/
    background: url(../../resources/images/user.png) no-repeat left center #27ae5f;
    text-align: center;
    vertical-align: middle;
    color: #FFEEE7;
}

.post .meta .posted {
    padding: 0px 10px 0px 0px;
    text-transform: lowercase;
    /*font-family: Georgia, "Times New Roman", Times, serif;*/
    font-size: 18px;
    font-style: italic;
    color: #415B62;
}

.post .meta a {
}

.post .entry {
    padding: 0 30px 20px 30px;
    padding-bottom: 20px;
    text-align: justify;

}
.post .leaveform {
    padding: 0 100px 20px 80px;
    padding-bottom: 20px;
    text-align: justify;
    font-size: 14px;
}
.links {
    padding-top: 20px;
    font-size: 12px;
    font-weight: bold;
}


/* Calendar */

#calendar {
}

#calendar_wrap {
    padding: 20px;
}

#calendar table {
    width: 100%;
}

#calendar tbody td {
    text-align: center;
}

#calendar #next {
    text-align: right;
}

#actions {
    margin-left: auto;
    margin-right: auto;
    width: 140px;
}

#actions .button {
    display: block;
    padding: 0;
    height: 36px;
    background: url(bg-button.png) no-repeat top left;
}

#actions .button a {
    display: block;
    padding: 0;
}

#actions .button a:link,
#actions .button a:visited,
#actions .button a:hover,
#actions .button a:active {
    color: #696;
    text-decoration: none;
}

#actions .button a span {
    display: block;
    padding: 6px 10px;
    color: #666;
    text-shadow: 1px 1px 1px #fff;
    font-size: 10pt;
    font-weight: bold;
}
.tableSimply{
    border-collapse: collapse;
    text-align: left;  
}
.tableSimply th{
    color: #222;
    background:#eee;
    padding: 5px 5px;
    border-bottom: 2px solid #ccc;
}
.tableSimply td{
    border-bottom: 1px solid #ccc;
    color: #666;
    background: #fff;
    padding: 4px;    
    vertical-align: top;
}
.tableSimply tbody tr:hover td{
    color: #222;
    background: #eee;
}
.tableSimply td a{
    color: #666;
}

#accordion_fr .ui-accordion-content {
    padding: 10px 10px 10px 10px;
}
#accordion{      font-family: /*'Kanit',*/sans-serif;
                 font-size: 12px;
}
select{font-family: /*'Kanit',*/sans-serif;
       font-size: 12px;
}
input[type="button"]:disabled,#actsend:disabled,input[type="button"]:disabled:hover,#actsend:disabled:hover{border:1px solid #cacaca; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:14px;font-family:arial, helvetica, sans-serif; padding: 5px 10px 5px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #ccc;
                                                                                                            background-color: #E6E6E6; background-image: -webkit-gradient(linear, left top, left bottom, from(#E6E6E6), to(#CCCCCC));
                                                                                                            background-image: -webkit-linear-gradient(top, #E6E6E6, #CCCCCC);
                                                                                                            background-image: -moz-linear-gradient(top, #E6E6E6, #CCCCCC);
                                                                                                            background-image: -ms-linear-gradient(top, #E6E6E6, #CCCCCC);
                                                                                                            background-image: -o-linear-gradient(top, #E6E6E6, #CCCCCC);
                                                                                                            background-image: linear-gradient(to bottom, #E6E6E6, #CCCCCC);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#E6E6E6, endColorstr=#CCCCCC);
                                                                                                            cursor: auto;
}

input[type="button"],#actsend{
    border:1px solid #91b41a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:14px;font-family:arial, helvetica, sans-serif; padding: 5px 10px 5px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
    background-color: #b6e026; background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e026), to(#abdc28));
    background-image: -webkit-linear-gradient(top, #b6e026, #abdc28);
    background-image: -moz-linear-gradient(top, #b6e026, #abdc28);
    background-image: -ms-linear-gradient(top, #b6e026, #abdc28);
    background-image: -o-linear-gradient(top, #b6e026, #abdc28);
    background-image: linear-gradient(to bottom, #b6e026, #abdc28);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#b6e026, endColorstr=#abdc28);
    cursor: pointer;
}
input[type="button"]:hover,#actsend:hover{ 
    border:1px solid #718c14;
    background-color: #95b91a; background-image: -webkit-gradient(linear, left top, left bottom, from(#95b91a), to(#8bb41d));
    background-image: -webkit-linear-gradient(top, #95b91a, #8bb41d);
    background-image: -moz-linear-gradient(top, #95b91a, #8bb41d);
    background-image: -ms-linear-gradient(top, #95b91a, #8bb41d);
    background-image: -o-linear-gradient(top, #95b91a, #8bb41d);
    background-image: linear-gradient(to bottom, #95b91a, #8bb41d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#95b91a, endColorstr=#8bb41d);
    cursor: pointer;
}
input[type="submit"]{ 
    border:1px solid #91b41a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:14px;font-family:arial, helvetica, sans-serif; padding: 5px 10px 5px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
    background-color: #b6e026; background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e026), to(#abdc28));
    background-image: -webkit-linear-gradient(top, #b6e026, #abdc28);
    background-image: -moz-linear-gradient(top, #b6e026, #abdc28);
    background-image: -ms-linear-gradient(top, #b6e026, #abdc28);
    background-image: -o-linear-gradient(top, #b6e026, #abdc28);
    background-image: linear-gradient(to bottom, #b6e026, #abdc28);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#b6e026, endColorstr=#abdc28);
    cursor: pointer;
}
input[type="submit"]:hover{ 
    border:1px solid #718c14;
    background-color: #95b91a; background-image: -webkit-gradient(linear, left top, left bottom, from(#95b91a), to(#8bb41d));
    background-image: -webkit-linear-gradient(top, #95b91a, #8bb41d);
    background-image: -moz-linear-gradient(top, #95b91a, #8bb41d);
    background-image: -ms-linear-gradient(top, #95b91a, #8bb41d);
    background-image: -o-linear-gradient(top, #95b91a, #8bb41d);
    background-image: linear-gradient(to bottom, #95b91a, #8bb41d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#95b91a, endColorstr=#8bb41d);
    cursor: pointer;
}

input[type="reset"],#acteditdoc,#actediturl{
    border:1px solid #15aeec; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:14px;font-family:arial, helvetica, sans-serif; padding: 5px 10px 5px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
    background-color: #49c0f0; background-image: -webkit-gradient(linear, left top, left bottom, from(#49c0f0), to(#2CAFE3));
    background-image: -webkit-linear-gradient(top, #49c0f0, #2CAFE3);
    background-image: -moz-linear-gradient(top, #49c0f0, #2CAFE3);
    background-image: -ms-linear-gradient(top, #49c0f0, #2CAFE3);
    background-image: -o-linear-gradient(top, #49c0f0, #2CAFE3);
    background-image: linear-gradient(to bottom, #49c0f0, #2CAFE3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#49c0f0, endColorstr=#2CAFE3);
    cursor: pointer;
}

input[type="reset"]:hover,#acteditdoc:hover,#actediturl:hover{
    border:1px solid #1090c3;
    background-color: #1ab0ec; background-image: -webkit-gradient(linear, left top, left bottom, from(#1ab0ec), to(#1a92c2));
    background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
    background-image: -moz-linear-gradient(top, #1ab0ec, #1a92c2);
    background-image: -ms-linear-gradient(top, #1ab0ec, #1a92c2);
    background-image: -o-linear-gradient(top, #1ab0ec, #1a92c2);
    background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#1ab0ec, endColorstr=#1a92c2);
    cursor: pointer;
}
#box,.box{
    position: relative;
    width: 94%;
    background: #b0e0e6;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 1em 1.5em;
    color: rgba(0,0,0, .8);
    text-shadow: 0 1px 0 #fff;
    /*line-height: 1.5;*/
    margin: 10px auto;
}

#boxgreen,.boxgreen{
    position: relative;
    width: 94%;
    background: #D0F5A9;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 1em 1.5em;
    color: rgba(0,0,0, .8);
    text-shadow: 0 1px 0 #fff;
    /*line-height: 1.5;*/
    margin: 10px auto;
}


/* tables  sort*/

table.tableSimply thead tr .header {
    /*background-image: url('bg.gif');*/
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tableSimply thead tr .headerSortUp {
    background-image: url('asc.gif');
}
table.tableSimply thead tr .headerSortDown {
    background-image: url('desc.gif');
}
table.tableSimply thead tr .headerSortDown, table.tableSimply thead tr .headerSortUp {
    background-color: #b0e0e6;
}