@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@400;500;700&display=swap');
        :root {
            --bs-primary: #c9a46a !mportant; /* Accent Gold - ใช้เป็นสีเน้น/สีพื้นหลังแถบเมนู */
            --bs-primary-rgb: 201, 164, 106 !mportant;
            --bs-body-bg: #fefbf1!mportant; /* Reverted to light Parchment */
            --bs-body-color: #3a2d21 !mportant; /* Ink Dark (High Contrast) */
            --bs-secondary: #6f5f53 !mportant; /* Ink Light - ใช้เป็นสี Hover/Active */
            --bs-secondary-rgb: 111, 95, 83 !mportant;
            --bs-light: #fff !mportant; /* White */
            --bs-card-bg: #ffffff !mportant; /* Card background to white */
            --minimal-border: #e0d8c7 !mportant; /* New: Light, minimal border color */
            --tooltip-bg: #fffbe6 !mportant; /* สีพื้นหลัง Tooltip อ่อนและสว่าง (Pale Yellow/Cream) */
            --tooltip-color: #000000 !mportant; /* สีข้อความ Tooltip เป็นสีดำสนิท */
        }

        body {
            font-family: 'Noto Sans Thai', sans-serif !important;
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
            margin: 0;
            padding: 0;
        }

        /* ---------------------------------
           LAYOUT STYLES
           --------------------------------- */
.pc-view {
    display: unset; /* Consider using display: block/flex/grid for clarity */
}

.tablet-view {
    display: none;
}

.mobile-view {
    display: none;
}

        /* Container for the whole layout: Navbar, Sidebar, and Content */
        .page-container {
            display: flex;
            min-height: 100vh; /* Full viewport height */
            padding-top: 56px; /* Space for the fixed-top navbar */
        }

        /* Sidebar Styling (Remains Primary Gold) */
        .sidebar {
            width: 250px;
            min-width: 250px;
            background-color: #c9a46a !important; /* Use Primary color for the sidebar background */
            /* Minimal Border */
            border-right: 1px solid var(--minimal-border);
            padding: 1rem 0;
            position: fixed;
            top: 56px; /* Below the fixed navbar */
            left: 0;
            bottom: 0;
            overflow-y: auto;
            z-index: 1020; /* Below navbar (1030) */
            transition: all 0.3s ease-in-out; /* เพิ่ม Transition เพื่อความนุ่มนวลในการยุบ */
        }
        
        /* New: Collapsed state for desktop (M-screen and up) */
        .sidebar.collapsed {
            width: 60px; /* ความกว้างที่น้อยที่สุดสำหรับโหมดยุบ (แสดงแค่ไอคอน) */
            min-width: 60px;
            padding: 0.5rem 0;
        }

        /* Main Content Area */
        .main-content {
            margin-left: 250px; /* Default offset */
            padding: 20px;
            flex-grow: 1;
            transition: margin-left 0.3s ease-in-out; /* เพิ่ม Transition เพื่อความนุ่มนวลในการเลื่อน */
        }
        
        /* New: Main content moves when sidebar is collapsed (Desktop only) */
        @media (min-width: 769px) {
 
 .pc-view {
    display: unset; /* Consider using display: block/flex/grid for clarity */
}

.tablet-view {
    display: unset;
}

.mobile-view {
    display: none;
}
           
            
            .main-content.sidebar-collapsed {
                margin-left: 60px;
            }
        }
        
        /* Fixed Navbar Styling (Changed to Light Beige/Parchment for Minimal Contrast) */
        .navbar {
            background-color: #f5eee0 !important;; /* ปรับเป็นสีเบจอ่อน (Light Beige) ให้เข้มกว่าขาว แต่อ่อนกว่า Sidebar (#c9a46a) */
            border-bottom: 1px solid var(--minimal-border); /* เส้นแบ่งบางๆ */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); /* ลดความเข้มของเงา ให้ดูโปร่งขึ้น (Minimal Shadow) */
            z-index: 1030;
        }

        .navbar-brand {
            color: var(--bs-body-color) !important;
            font-weight: bold;
        }

        /* ---------------------------------
           NAVIGATION (TAB) STYLES
           --------------------------------- */

        /* Nav-pills in Sidebar */
        .nav-pills .nav-link {
            color: var(--bs-body-color);
            margin: 0 10px;
            padding: 10px 15px;
            border-radius: 0.25rem;
            transition: all 0.2s ease;
            font-weight: 500;
            display: flex; /* ใช้ flex เพื่อจัดวางไอคอนและข้อความ */
            align-items: center;
        }
        
        .nav-pills .nav-link:hover {
            color: var(--bs-light); /* White text on hover */
            background-color: #917D6E !important; /* Ink Light background on hover */
        }

        /* Active Tab Styling */
        .nav-pills .nav-link.active {
            color: var(--bs-light); /* White text on active */
            background-color: var(--bs-secondary) !important; /* Ink Light background on active */
            /* Simplified active look */
            border: none;
            box-shadow: none;
        }

        /* New: Hide text elements when sidebar is collapsed (Desktop view) */
        .sidebar.collapsed .nav-link {
            text-align: center;
            padding: 10px; /* ลด padding เมื่อยุบ */
            justify-content: center; /* จัดไอคอนไว้ตรงกลาง */
        }
        
        .sidebar.collapsed .nav-link span,
        .sidebar.collapsed h5,
        .sidebar.collapsed hr {
            display: none !important; /* ซ่อนข้อความและหัวข้อ/เส้นแบ่งเมื่อยุบ */
        }

        /* ---------------------------------
           CUSTOM TOOLTIP STYLES (Updated)
           --------------------------------- */
        .tooltip-inner {
            background-color: var(--tooltip-bg); /* พื้นหลังสีอ่อนสว่าง */
            color: var(--tooltip-color); /* ข้อความสีดำ */
            font-size: 0.95rem; /* ตัวอักษรใหญ่ขึ้นเล็กน้อย */
            font-weight: 500;
            border: 1px solid var(--bs-secondary); /* เพิ่มขอบเล็กน้อย */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* เงาให้ดูนุ่มนวล */
            font-family: 'Sarabun', sans-serif;
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem; /* ทำให้เป็นกรอบสี่เหลี่ยมโค้งมน */
        }
        
        /* New: Remove the arrow (ลูกศร) */
        .tooltip .tooltip-arrow {
            display: none;
        }
        
        /* ---------------------------------
           CONTENT CARD STYLES
           --------------------------------- */
        .card {
            /* Softened card look */
            border: 1px solid var(--minimal-border); /* Reduced contrast border */
            box-shadow: 1px 1px 0px 0px rgba(111, 95, 83, 0.05); /* ลดความเข้มของเงา ให้ดูโปร่งขึ้น (Minimal Shadow) */
            margin-bottom: 20px;
            border-radius: 0.5rem;
        }

        .card-header {
            background-color: var(--bs-secondary); /* Use secondary color for card header */
            color: var(--bs-light); /* White text for contrast */
            font-weight: bold;
            border-bottom: 1px solid var(--bs-primary);
            border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
        }

        /* ---------------------------------
           RESPONSIVE DESIGN (Mobile First)
           --------------------------------- */
        @media (max-width: 768px) {
 .pc-view {
    display: none; /* Consider using display: block/flex/grid for clarity */
}

.tablet-view {
    display: none;
}

.mobile-view {
    display: unset;
}            
            
            /* Hide sidebar on small screens and display a toggle button */
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease-in-out;
                z-index: 1025; /* Bring above main content when open */
                width: 200px;
                min-width: 200px;
            }

            .sidebar.show {
                transform: translateX(0);
            }

            .main-content {
                margin-left: 0; /* Remove offset on small screens */
                width: 100%;
            }

            /* Overlay for when sidebar is open */
            .overlay {
                position: fixed;
                top: 56px;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 1024;
                display: none;
            }

            .sidebar.show ~ .overlay {
                display: block;
            }
        }