/* ตั้งค่าฟอนต์หลัก */
        body {
            font-family: 'Kanit', sans-serif;
            background-color: #f8f9fa; /* สีพื้นหลังของหน้า */
        }

        /* Container หลักที่ใช้ Flexbox */
        .wrapper {
            display: flex;
            width: 100%;
            align-items: stretch;
        }

        /* ----------------------------------------
           สไตล์ของ Sidebar (เมนูด้านซ้าย)
        ------------------------------------------- */
        #sidebar {
            min-width: 250px;
            max-width: 250px;
            /* นี่คือส่วน "Colorful" และ "อลังการ" ที่แก้ไขเป็น "สีเข้ม"
              ใช้สี Gradient ที่เข้มขึ้น
            */
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            /* background-size: 400% 400%; (ถูกลบ) */
            /* animation: colorful-bg 15s ease infinite; (ถูกลบ) */
            color: #fff;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            min-height: 100vh; /* ให้ Sidebar สูงเต็มจอเสมอ */
        }

        /* Keyframes สำหรับ Animation ของ Gradient (ถูกลบ) */
        /* @keyframes colorful-bg { ... } (ถูกลบ) */

        /* (เพิ่ม) CSS สำหรับการซ่อน/แสดง Sidebar */
        #sidebar.active {
            margin-left: -250px;
        }

        /* (เพิ่ม) สไตล์ปุ่ม Hamburger */
        #sidebarCollapse {
           border: none;
           background: transparent;
           color: #6c757d; /* secondary text */
           font-size: 1.5rem;
           padding: 5px 10px;
        }
        #sidebarCollapse:hover {
           color: #007bff;
        }


        /* หัวข้อของ Sidebar */
        #sidebar .sidebar-header {
            padding: 20px;
            text-align: center;
            font-size: 1.8rem;
            font-weight: 700;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* ลิงก์เมนู */
        #sidebar ul.components {
            padding: 20px 0;
        }

        #sidebar ul li a {
            padding: 15px 30px;
            font-size: 1.1rem;
            display: block;
            color: #fff;
            font-weight: 400;
            transition: all 0.2s;
        }

        /* เวลาเอาเมาส์ชี้ลิงก์ */
        #sidebar ul li a:hover {
            background: rgba(255, 255, 255, 0.2);
            text-decoration: none;
            border-left: 5px solid #fff;
            padding-left: 25px;
        }

        /* เมนูที่ถูกเลือก */
        #sidebar ul li.active > a,
        a[aria-expanded="true"] {
            background: rgba(255, 255, 255, 0.3);
            border-left: 5px solid #fff;
            padding-left: 25px;
        }

        /* ไอคอนในเมนู */
        #sidebar ul li a i {
            margin-right: 15px;
            width: 20px;
            text-align: center;
        }

        /* ----------------------------------------
           สไตล์ของส่วนเนื้อหา (Content)
        ------------------------------------------- */
        #content {
            width: 100%;
            padding: 25px;
            transition: all 0.3s;
        }

        /* การ์ดสรุปข้อมูล (Dashboard Cards) */
        .stat-card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            color: #fff;
        }
        
        /* เพิ่ม effect เวลา hover */
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
        }

        .stat-card .card-body {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .stat-card .icon-circle {
            font-size: 2.5rem;
            opacity: 0.3;
        }

        /* สีของการ์ด */
.bg-card-1 {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white; /* เพิ่มสีตัวอักษรเป็นสีขาวเพื่อให้อ่านง่าย */
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 2. สีเขียว (Green) - เหมือนเดิมจาก .bg-card-2 */
.bg-card-2 {
  background: linear-gradient(135deg, #28a745, #19692c);
  color: white; /* เพิ่มสีตัวอักษรเป็นสีขาวเพื่อให้อ่านง่าย */
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 3. สีเหลือง (Yellow) - นำมาจาก .bg-card-4 เดิม */
.bg-card-3 {
  background: linear-gradient(135deg, #ffc107, #b38600);
  color: #212529; /* สีเหลืองอ่อนควรอ่านกับตัวอักษรสีเข้ม */
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 4. สีแดง (Red) - แทนที่ .bg-card-3 เดิมที่เป็นสีฟ้า */
.bg-card-4 {
  background: linear-gradient(135deg, #dc3545, #b21f2d);
  color: white; /* เพิ่มสีตัวอักษรเป็นสีขาวเพื่อให้อ่านง่าย */
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


        /* การ์ดสำหรับตารางและ Chart */
        .card-main {
            border: none;
            border-radius: 12px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        }

        /* (เพิ่ม) Media Query สำหรับการแสดงผลบนมือถือ */
        @media (max-width: 768px) {
            #sidebar {
                margin-left: -250px; /* ซ่อนเมนูเริ่มต้นบนมือถือ */
            }
            #sidebar.active {
                margin-left: 0; /* แสดงเมนูเมื่อกดปุ่ม */
            }
        }
		
		/* สไตล์สำหรับพื้นหลัง Modal (Overlay) */
        .modal {
            display: none; /* ซ่อนไว้เป็นค่าเริ่มต้น */
            position: fixed; 
            z-index: 1; 
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4); 
        }

        /* สไตล์สำหรับตัวกล่อง Modal */
        .modal-content {
            background-color: #fefefe;
            margin: 10% auto; /* 10% จากด้านบน และอยู่ตรงกลาง */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px; /* จำกัดความกว้างสูงสุด */
            border-radius: 8px;
        }

        /* สไตล์สำหรับปุ่มปิด (X) */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }