/* แก้ไขปัญหาสีตัวหนังสือสีขาวใน sidebar - ใช้ specificity สูงสุด */
html body.skin-blue .sidebar a,
html body.skin-blue .sidebar-menu a,
html body.skin-blue .sidebar-menu li a,
html body.skin-blue .sidebar-menu > li > a,
html body.skin-blue .sidebar-menu > li > a > span {
    color: #333 !important; /* เปลี่ยนจากสีขาวเป็นสีเทาเข้ม */
}

html body.skin-blue .sidebar a:hover,
html body.skin-blue .sidebar-menu a:hover,
html body.skin-blue .sidebar-menu li a:hover,
html body.skin-blue .sidebar-menu > li > a:hover,
html body.skin-blue .sidebar-menu > li > a:hover > span {
    color: #000 !important; /* สีเมื่อ hover */
    text-decoration: none;
}

html body.skin-blue .treeview-menu > li > a,
html body.skin-blue .sidebar-menu .treeview-menu > li > a,
html body.skin-blue .sidebar-menu .treeview-menu > li > a > span {
    color: #555 !important; /* สีตัวหนังสือใน submenu */
}

html body.skin-blue .treeview-menu > li.active > a,
html body.skin-blue .treeview-menu > li > a:hover,
html body.skin-blue .sidebar-menu .treeview-menu > li.active > a,
html body.skin-blue .sidebar-menu .treeview-menu > li > a:hover,
html body.skin-blue .sidebar-menu .treeview-menu > li.active > a > span,
html body.skin-blue .sidebar-menu .treeview-menu > li > a:hover > span {
    color: #000 !important; /* สีเมื่อ active หรือ hover */
    background-color: #f0f0f0 !important;
}

/* เพิ่มเส้นขอบให้เห็นชัดเจน */
html body.skin-blue .sidebar-menu > li > a {
    border-bottom: 1px solid #ddd !important; /* เส้นขอบด้านล่าง */
    border-left: 3px solid transparent !important; /* เส้นขอบด้านซ้าย */
}

html body.skin-blue .sidebar-menu > li.active > a {
    border-left-color: #3c8dbc !important; /* เส้นขอบด้านซ้ายเมื่อ active */
    background-color: #f8f9fa !important;
}

html body.skin-blue .sidebar-menu > li > .treeview-menu {
    border-left: 3px solid #ccc !important; /* เส้นขอบด้านซ้ายของ submenu */
    margin-left: 10px !important;
    background-color: #f8f9fa !important;
}

html body.skin-blue .sidebar-menu > li > .treeview-menu > li > a {
    border-bottom: 1px solid #eee !important; /* เส้นขอบสำหรับ submenu items */
    padding: 8px 15px !important;
}

/* ปรับปรุงสีพื้นหลังของ sidebar */
html body.skin-blue .main-sidebar,
html body.skin-blue .left-side {
    background-color: #f8f9fa !important; /* พื้นหลังสีอ่อน */
}

/* ปรับสีของ header ใน sidebar */
html body.skin-blue .sidebar-menu > li.header {
    color: #666 !important;
    background: #e9ecef !important;
    font-weight: bold !important;
}

/* แก้ไขสีตัวหนังสือใน user panel */
html body.skin-blue .user-panel > .info,
html body.skin-blue .user-panel > .info > a {
    color: #333 !important;
}

/* แก้ไขสีตัวหนังสือใน sidebar form */
html body.skin-blue .sidebar-form input[type="text"] {
    color: #333 !important;
    background-color: #fff !important;
}

/* แก้ไขสีตัวหนังสือใน sidebar form เมื่อ focus */
html body.skin-blue .sidebar-form input[type="text"]:focus {
    color: #333 !important;
    background-color: #fff !important;
}

/* แก้ไขสีตัวหนังสือใน sidebar form button */
html body.skin-blue .sidebar-form .btn {
    color: #333 !important;
}

/* แก้ไขปัญหาสีตัวหนังสือสีขาวใน sidebar - ใช้ specificity สูงสุดและครอบคลุมทุกกรณี */
html body.skin-blue .sidebar *,
html body.skin-blue .sidebar-menu *,
html body.skin-blue .sidebar-menu li *,
html body.skin-blue .sidebar-menu > li *,
html body.skin-blue .sidebar-menu > li > a *,
html body.skin-blue .sidebar-menu > li > a > span,
html body.skin-blue .sidebar-menu > li > a > i,
html body.skin-blue .sidebar-menu > li > a > .fa,
html body.skin-blue .sidebar-menu > li > a > .glyphicon,
html body.skin-blue .sidebar-menu > li > a > .ion {
    color: #333 !important; /* เปลี่ยนจากสีขาวเป็นสีเทาเข้ม */
}

html body.skin-blue .treeview-menu *,
html body.skin-blue .sidebar-menu .treeview-menu *,
html body.skin-blue .sidebar-menu .treeview-menu > li *,
html body.skin-blue .sidebar-menu .treeview-menu > li > a *,
html body.skin-blue .sidebar-menu .treeview-menu > li > a > span,
html body.skin-blue .sidebar-menu .treeview-menu > li > a > i,
html body.skin-blue .sidebar-menu .treeview-menu > li > a > .fa,
html body.skin-blue .sidebar-menu .treeview-menu > li > a > .glyphicon,
html body.skin-blue .sidebar-menu .treeview-menu > li > a > .ion {
    color: #555 !important; /* สีตัวหนังสือใน submenu */
}

/* แก้ไขสีเมื่อ hover และ active */
html body.skin-blue .sidebar *:hover,
html body.skin-blue .sidebar-menu *:hover,
html body.skin-blue .sidebar-menu li *:hover,
html body.skin-blue .sidebar-menu > li *:hover,
html body.skin-blue .sidebar-menu > li > a:hover *,
html body.skin-blue .sidebar-menu > li > a:hover > span,
html body.skin-blue .sidebar-menu > li > a:hover > i,
html body.skin-blue .sidebar-menu > li > a:hover > .fa,
html body.skin-blue .sidebar-menu > li > a:hover > .glyphicon,
html body.skin-blue .sidebar-menu > li > a:hover > .ion {
    color: #000 !important; /* สีเมื่อ hover */
}

html body.skin-blue .treeview-menu *:hover,
html body.skin-blue .sidebar-menu .treeview-menu *:hover,
html body.skin-blue .sidebar-menu .treeview-menu > li *:hover,
html body.skin-blue .sidebar-menu .treeview-menu > li > a:hover *,
html body.skin-blue .sidebar-menu .treeview-menu > li > a:hover > span,
html body.skin-blue .sidebar-menu .treeview-menu > li > a:hover > i,
html body.skin-blue .sidebar-menu .treeview-menu > li > a:hover > .fa,
html body.skin-blue .sidebar-menu .treeview-menu > li > a:hover > .glyphicon,
html body.skin-blue .sidebar-menu .treeview-menu > li > a:hover > .ion {
    color: #000 !important; /* สีเมื่อ hover ใน submenu */
}

/* แก้ไขสีเมื่อ active */
html body.skin-blue .sidebar-menu > li.active *,
html body.skin-blue .sidebar-menu > li.active > a *,
html body.skin-blue .sidebar-menu > li.active > a > span,
html body.skin-blue .sidebar-menu > li.active > a > i,
html body.skin-blue .sidebar-menu > li.active > a > .fa,
html body.skin-blue .sidebar-menu > li.active > a > .glyphicon,
html body.skin-blue .sidebar-menu > li.active > a > .ion {
    color: #000 !important; /* สีเมื่อ active */
}

html body.skin-blue .sidebar-menu .treeview-menu > li.active *,
html body.skin-blue .sidebar-menu .treeview-menu > li.active > a *,
html body.skin-blue .sidebar-menu .treeview-menu > li.active > a > span,
html body.skin-blue .sidebar-menu .treeview-menu > li.active > a > i,
html body.skin-blue .sidebar-menu .treeview-menu > li.active > a > .fa,
html body.skin-blue .sidebar-menu .treeview-menu > li.active > a > .glyphicon,
html body.skin-blue .sidebar-menu .treeview-menu > li.active > a > .ion {
    color: #000 !important; /* สีเมื่อ active ใน submenu */
}