:root {
				--primary: #6366f1; /* ม่วงอมน้ำเงิน */
				--primary-hover: #4f46e5;
				--bg-body: #f3f4f9;
				--bg-sidebar: #ffffff;
				--bg-card: #ffffff;
				--text-main: #1f2937;
				--text-muted: #6b7280;
				--border-color: #e5e7eb;
				--sidebar-width: 260px;
				--sidebar-mini-width: 80px;
				--header-height: 70px;
				--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				--bg-menu-hover: #f3f4f6; 
				--danger: #ef4444;
			}

			html.dark {
				--bg-body: #0f172a;
				--bg-sidebar: #1e293b;
				--bg-card: #1e293b;
				--text-main: #f1f5f9;
				--text-muted: #94a3b8;
				--border-color: #334155;
				--bg-menu-hover: #2d3748;
			}

			body {
				font-family: 'Inter', sans-serif;
				background-color: var(--bg-body);
				color: var(--text-main);
				margin: 0;
				overflow-x: hidden;
				transition: var(--transition);
			}

			/* Layout Structure */
			.app-container {
				display: flex;
				min-height: 100vh;
			}

			/* Sidebar Styling */
			.app-sidebar {
				width: var(--sidebar-width);
				background: var(--bg-sidebar);
				border-right: 1px solid var(--border-color);
				position: fixed;
				height: 100vh;
				z-index: 1100;
				transition: var(--transition);
				overflow-y: auto;
				scrollbar-width: thin;
			}

			.sidebar-logo {
				height: var(--header-height);
				display: flex;
				align-items: center;
				padding: 0 25px;
				font-weight: 800;
				font-size: 22px;
				letter-spacing: -0.5px;
				color: var(--text-main);
				text-decoration: none !important;
				white-space: nowrap;
				overflow: hidden;
			}

			.nav-label {
				padding: 20px 25px 10px;
				font-size: 11px;
				font-weight: 700;
				color: var(--text-muted);
				text-transform: uppercase;
				letter-spacing: 1px;
			}

			nav.navbar { display: none !important; }

			.custom-menu {
				list-style: none;
				padding: 0; 
				margin: 0;
			}

			.custom-menu li { margin-bottom: 2px; position: relative; }

			.custom-menu a {
				display: flex;
				align-items: center;
				padding: 12px 25px; 
				color: var(--text-muted);
				text-decoration: none !important;
				transition: var(--transition);
				font-weight: 500;
				cursor: pointer;
				position: relative; 
			}

			.custom-menu li.active > a, 
			.custom-menu a:hover {
				background: var(--bg-menu-hover);
				color: var(--primary);
			}

			.custom-menu li.active > a::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 4px; 
				background: var(--primary);
				border-radius: 0 4px 4px 0;
			}

			.custom-menu i.menu-icon {
				margin-right: 12px;
				font-size: 18px;
				width: 20px;
				text-align: center;
				transition: var(--transition);
			}

			.custom-menu .chevron {
				margin-left: auto;
				font-size: 10px;
				transition: transform 0.3s;
			}

			.custom-menu li.open > a .chevron {
				transform: rotate(90deg);
			}

			/* Submenu Styling */
			.submenu {
				list-style: none;
				padding: 5px 0 5px 35px;
				display: none;
				transition: var(--transition);
			}

			.custom-menu li.open > .submenu {
				display: block;
			}

			.submenu a {
				padding: 8px 15px;
				font-size: 13px;
			}

			.submenu a::before {
				display: none; 
			}

			/* Mini Sidebar Classes */
			body.sidebar-mini .app-sidebar {
				width: var(--sidebar-mini-width);
			}

			body.sidebar-mini .sidebar-logo span,
			body.sidebar-mini .nav-label,
			body.sidebar-mini .custom-menu span,
			body.sidebar-mini .chevron,
			body.sidebar-mini .download-center-box {
				display: none;
			}

			body.sidebar-mini .sidebar-logo {
				padding: 0;
				justify-content: center;
			}

			body.sidebar-mini .custom-menu a {
				justify-content: center;
				padding: 12px 0;
			}

			body.sidebar-mini .custom-menu i.menu-icon {
				margin-right: 0;
			}

			/* Sidebar Overlay for Mobile */
			.sidebar-overlay {
				display: none;
				position: fixed;
				top: 0; left: 0; width: 100%; height: 100%;
				background: rgba(0, 0, 0, 0.5);
				z-index: 1050;
				backdrop-filter: blur(2px);
			}

			body.sidebar-open .sidebar-overlay {
				display: block;
			}

			/* Main Content Area */
			.main-wrapper {
				flex: 1;
				margin-left: var(--sidebar-width);
				transition: var(--transition);
				width: calc(100% - var(--sidebar-width));
			}

			body.sidebar-mini .main-wrapper {
				margin-left: var(--sidebar-mini-width);
				width: calc(100% - var(--sidebar-mini-width));
			}

			/* Custom Top Header */
			.custom-header {
				height: var(--header-height);
				background: var(--bg-card);
				border-bottom: 1px solid var(--border-color);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30px;
				position: sticky;
				top: 0;
				z-index: 1000;
			}

			.header-left { display: flex; align-items: center; gap: 20px; }
			.header-right { display: flex; align-items: center; gap: 10px; }

			.icon-btn {
				background: none;
				border: none;
				color: var(--text-muted);
				font-size: 18px;
				cursor: pointer;
				padding: 4px;
				border-radius: 50%;
				transition: var(--transition);
				display: flex;
				align-items: center;
				justify-content: center;
				width: 35px;
				height: 35px;
			}

			.icon-btn:hover {
				background: rgba(0,0,0,0.05);
				color: var(--primary);
			}

			html.dark .icon-btn:hover { background: rgba(255,255,255,0.1); }

			/* --- Notification Badge Styling --- */
			.update-btn-wrapper {
				position: relative;
				display: inline-block;
			}
			.update-badge {
				position: absolute;
				top: 2px;
				right: 2px;
				background: #22c55e; 
				color: #ffffff;
				font-size: 10px;
				font-weight: 700;
				min-width: 16px;
				height: 16px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2px solid var(--bg-card);
				z-index: 5;
				pointer-events: none;
			}

			/* --- User Profile & Balance Dropdown Modern Styling --- */
			.user-profile-wrapper, .balance-dropdown-wrapper {
				position: relative;
				margin-left: 10px;
			}

			.profile-trigger, .balance-trigger {
				cursor: pointer;
				display: flex;
				align-items: center;
			}

			.profile-dropdown, .balance-dropdown {
				position: absolute;
				top: calc(100% + 15px);
				right: 0;
				width: 280px;
				background: var(--bg-card);
				border-radius: 5px; 
				box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
				border: 1px solid var(--border-color);
				padding: 8px;
				display: none;
				z-index: 2000;
				animation: dropdownFade 0.25s ease;
				overflow: hidden;
			}

			.balance-dropdown { width: 260px; }

			@keyframes dropdownFade {
				from { opacity: 0; transform: translateY(10px); }
				to { opacity: 1; transform: translateY(0); }
			}

			.profile-dropdown.show, .balance-dropdown.show { display: block; }

			.dropdown-user-info, .dropdown-balance-info {
				display: flex;
				align-items: center; 
				gap: 12px; 
				padding: 12px;
				border-bottom: 1px solid var(--border-color);
				margin-bottom: 8px;
			}

			.dropdown-avatar {
				width: 48px; 
				height: 48px; 
				border-radius: 12px; 
				object-fit: cover;
				background: var(--bg-menu-hover);
			}

			.dropdown-user-details h5 {
				margin: 0; 
				font-size: 15px; 
				font-weight: 700; 
				color: var(--text-main);
			}

			.dropdown-user-details p {
				margin: 0; 
				font-size: 12px; 
				color: var(--text-muted);
			}

			.dropdown-btn-settings {
				display: flex; 
				align-items: center; 
				gap: 10px;
				padding: 10px 12px; 
				background: transparent;
				color: var(--text-main); 
				font-size: 14px; 
				font-weight: 500;
				border-radius: 8px;
				text-decoration: none !important; 
				transition: var(--transition);
				margin-bottom: 4px;
			}

			.dropdown-btn-settings:hover { 
				background: var(--bg-menu-hover); 
				color: var(--primary);
			}

			.theme-selection-grid { 
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 8px; 
				padding: 8px;
				border-top: 1px solid var(--border-color);
				margin: 8px 0;
			}
			.theme-option { text-align: center; }
			.theme-option p { font-size: 11px; margin-bottom: 5px; color: var(--text-muted); font-weight: 600; }
			
			.theme-box {
				height: 40px; 
				border-radius: 10px; 
				border: 1px solid var(--border-color);
				cursor: pointer; 
				display: flex; 
				align-items: center; 
				justify-content: center;
				transition: var(--transition); 
				background: var(--bg-menu-hover); 
				position: relative;
			}
			.theme-box:hover { border-color: var(--primary); }
			.theme-box.active { 
				border-color: var(--primary); 
				background: var(--bg-card);
				box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1);
			}
			
			.active-check { 
				position: absolute; 
				top: -4px;
				right: -4px; 
				color: var(--primary); 
				font-size: 10px; 
				background: var(--bg-card);
				border-radius: 50%;
				display: none; 
			}
			.theme-box.active .active-check { display: block; }

			.btn-logout {
				display: block; 
				width: calc(100% - 16px); 
				margin: 8px;
				padding: 10px; 
				background: transparent;
				color: var(--danger) !important; 
				border: 1px solid #fee2e2; 
				border-radius: 8px;
				text-align: center; 
				font-weight: 700; 
				font-size: 14px;
				text-decoration: none !important; 
				transition: var(--transition);
			}

			.btn-logout:hover { 
				background: var(--danger);
				color: #ffffff !important;
				border-color: var(--danger);
			}

			.btn-primary-dropdown {
				display: block; width: calc(100% - 24px); margin: 0 12px 12px;
				padding: 10px; background: var(--primary); color: white !important;
				text-align: center; border-radius: 8px; text-decoration: none !important;
				font-weight: 600; font-size: 14px; transition: var(--transition);
			}
			.btn-primary-dropdown:hover { background: var(--primary-hover); }

			.content-body { padding: 25px; }

			.breadcrumb-nav a {
				color: var(--text-muted);
				text-decoration: none !important;
				transition: color 0.2s;
			}
			.breadcrumb-nav a:hover {
				color: var(--primary);
			}
			.breadcrumb-nav .separator {
				margin: 0 4px;
				color: #cbd5e1;
			}
			.breadcrumb-nav .active-page {
				color: var(--text-main);
				font-weight: 600;
			}

			.modal-overlay {
				display: none;
				position: fixed;
				top: 0; left: 0; width: 100%; height: 100%;
				background: rgba(0, 0, 0, 0.1); 
				z-index: 9999;
				backdrop-filter: blur(1px);
				opacity: 0;
				transition: opacity 0.2s ease;
			}
			.modal-overlay.show { display: block; opacity: 1; }

			.modal-container {
				position: absolute;
				top: 75px; 
				right: 140px; 
				background: var(--bg-card);
				width: 500px;
				max-width: calc(100vw - 40px);
				max-height: calc(85vh - 75px);
				border-radius: 5px;
				box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
				display: flex;
				flex-direction: column;
				transform: translateY(-10px);
				transition: transform 0.3s ease;
				border: 1px solid var(--border-color);
			}
			.modal-overlay.show .modal-container { transform: translateY(0); }

			.modal-header {
				padding: 20px 25px;
				border-bottom: 1px solid var(--border-color);
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; }

			.modal-close-btn {
				position: absolute !important;
				top: 15px;
				right: 15px;
				z-index: 10;
			}

			.modal-body {
				padding: 25px;
				overflow-y: auto;
				flex: 1;
			}

			.loading-box { text-align: center; padding: 50px; }

			@media (max-width: 991px) {
				.modal-container { right: 20px; left: 20px; width: auto; max-width: none; }
				.app-sidebar { transform: translateX(-100%); width: var(--sidebar-width) !important; }
				.main-wrapper { margin-left: 0 !important; width: 100% !important; }
				body.sidebar-open .app-sidebar { transform: translateX(0); }
				body.sidebar-mini .app-sidebar { transform: translateX(-100%); }
				.profile-dropdown, .balance-dropdown { width: 280px; right: -10px; }
			}

			#notify-wrapper {
				position: fixed;
				top: 20px;
				right: 20px;
				z-index: 9999;
				border-radius: 8px;
				border: none;
				box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
			}

			.badge {
				background-color: var(--primary) !important;
				border-radius: 6px; 
				padding: 5px 12px;
				cursor: pointer;
				transition: var(--transition);
				font-weight: 600;
			}

			.badge:hover { opacity: 0.9; transform: translateY(-1px); }

			.download-center-box {
				margin: 20px; padding: 20px; 
				background: rgba(99, 102, 241, 0.05); 
				border-radius: 12px; margin-top: auto; text-align: center;
				transition: var(--transition);
			}
/* พื้นหลังหน้าเว็บหลัก */
    .container-fluid { 
        padding: 30px; 
        background-color: var(--bg-body) !important; 
    }

    /* 1. ระยะห่างของ Status Info Boxes (ด้านบน) */
    .status-info-row {
        margin-bottom: 35px; /* เว้นระยะตามภาพตัวอย่าง */
    }

    .status-card {
        background: var(--bg-card) !important; /* ทึบ 100% ขาวในโหมดสว่าง / มืดในโหมด Dark */
        border: 1px solid var(--border-color);
        border-left: 4px solid;
        border-radius: 8px;
        padding: 18px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* เงาแบบหน้าสั่งซื้อ */
    }

    /* 2. จัดระเบียบส่วน Filter & Search */
    .search-filter-row {
        margin-bottom: 30px;
        align-items: center;
    }

    .nav-pills { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin-bottom: 0; }
    .nav-pills li a {
        background: var(--bg-card) !important; /* ทึบ 100% */
        border: 1px solid var(--border-color);
        color: var(--text-muted);
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        display: block;
        transition: var(--transition);
    }
    .nav-pills li.active a {
        background: var(--primary) !important;
        color: #ffffff !important;
        border-color: var(--primary);
    }

    /* 3. Search Bar: ทึบ 100% และเปลี่ยนสีตามโหมด */
    .search-container-box { display: flex; align-items: center; justify-content: flex-end; }
    .search-label-text { color: var(--text-muted); font-weight: 600; margin-right: 12px; white-space: nowrap; }
    .search-input-white {
        border: 1px solid var(--border-color) !important;
        border-radius: 10px !important;
        padding: 10px 15px !important;
        background: var(--bg-card) !important; /* ทึบ 100% */
        color: var(--text-main) !important; /* ตัวหนังสือเปลี่ยนสีตามโหมด */
        width: 100%;
        max-width: 300px;
        height: 42px;
        box-shadow: none;
    }

    /* 4. ตารางแบบการ์ดทึบ 100% (Solid Card Table) */
    .well-float {
        background: var(--bg-card) !important; /* ทึบ 100% ไม่โปร่งแสง */
        border-radius: var(--radius-duralux);
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        overflow: hidden;
        padding: 0;
    }

    .table { width: 100%; margin-bottom: 0; border-collapse: collapse; }
    .table thead th {
        background: var(--bg-body) !important; /* พื้นหลังหัวตาราง */
        color: var(--text-muted);
        font-size: 11px;
        text-transform: uppercase;
        font-weight: 700;
        padding: 18px 20px;
        border-bottom: 1px solid var(--border-color);
        text-align: left;
    }
    .table tbody td {
        padding: 18px 20px;
        border-bottom: 1px solid var(--border-color);
        vertical-align: middle;
        color: var(--text-main) !important; /* ป้องกันตัวหนังสือสีขาวบนพื้นขาว */
        font-size: 13px;
    }
    .table tbody tr:hover { background-color: var(--bg-menu-hover); }

    /* Badge สถานะ */
    .badge-status-custom {
        padding: 6px 12px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 11px;
        background: rgba(99, 102, 241, 0.1);
        color: var(--primary);
    }
    /* สไตล์ปุ่มคัดลอก ID */
    .btn-copy-id {
        background: none;
        border: none;
        color: var(--text-muted);
        margin-left: 8px;
        cursor: pointer;
        padding: 2px;
        font-size: 14px;
        transition: var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* สไตล์ปุ่มคัดลอกแบบ Solid */
    .btn-copy-id:hover i {
        color: var(--primary) !important;
        transform: scale(1.1);
    }
    .btn-copy-id i.copy-success {
        color: #22c55e !important; /* สีเขียวเมื่อคัดลอกสำเร็จ */
    }
/* 🟢 แก้ไขพื้นฐานเพื่อป้องกันการล้นของหน้าจออย่างสมบูรณ์ */
    .new-order-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        overflow-x: hidden; /* ป้องกันการเลื่อนไปทางขวา */
        box-sizing: border-box;
        position: relative;
    }

    /* บังคับให้ทุก element ภายใน wrapper คำนวณขนาดแบบ border-box */
    .new-order-wrapper *, 
    .new-order-wrapper *:before, 
    .new-order-wrapper *:after {
        box-sizing: border-box;
    }

    /* 1. Stat Cards Grid */
    .stat-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 30px;
        width: 100%;
    }

    .stat-card {
        background: var(--bg-card);
        border-radius: 12px;
        padding: 25px;
        border: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        transition: var(--transition);
        min-width: 0; /* ยอมให้ย่อขนาดได้ใน Flex/Grid */
        overflow: hidden; /* ป้องกันเนื้อหาภายในดันการ์ดให้กว้างเกิน */
    }

    .stat-card:hover { transform: translateY(-3px); }

    .stat-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .stat-icon-wrapper {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .stat-value {
        font-size: 24px;
        font-weight: 800;
        color: var(--text-main);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* ป้องกันตัวเลขหรือชื่อยาวเกินล้นการ์ด */
    }

    .stat-label {
        font-size: 13px;
        color: var(--text-muted);
        font-weight: 500;
    }

    .stat-progress-container {
        margin-top: 20px;
        width: 100%;
    }

    .stat-progress-info {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        margin-bottom: 6px;
        color: var(--text-muted);
    }

    .progress-bar-custom {
        height: 4px;
        background: #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
    }

    .progress-fill { height: 100%; border-radius: 10px; }

    /* Theme Colors */
    .color-blue { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
    .fill-blue { background: #6366f1; }
    .color-orange { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
    .fill-orange { background: #f59e0b; }
    .color-green { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
    .fill-green { background: #22c55e; }
    .color-red { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
    .fill-red { background: #ef4444; }

    /* 2. Two-Column Layout */
    .order-content-layout {
        display: flex;
        gap: 25px;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
    }

    .form-side { 
        flex: 1.5; 
        min-width: 0; /* ป้องกันการดันความกว้างออกด้านข้าง */
        max-width: 100%;
    }
    .info-side { 
        flex: 1; 
        position: sticky; 
        top: 95px; 
        min-width: 0; 
        max-width: 100%;
    }

    .card-modern {
        background: var(--bg-card);
        border-radius: 12px;
        border: 1px solid var(--border-color);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        margin-bottom: 25px;
        overflow: hidden;
        width: 100%;
        max-width: 100%; /* ล็อคไม่ให้กว้างเกิน parent */
    }

    .card-header-modern {
        padding: 20px 25px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .card-header-modern h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-main);
    }

    .header-plus-icon {
        background: var(--primary);
        color: white;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        flex-shrink: 0;
    }

    .card-body-modern { 
        padding: 25px; 
        width: 100%;
        max-width: 100%;
    }

    /* --- Unified Select & Input Styling --- */
    .form-group-modern { 
        margin-bottom: 20px; 
        width: 100%;
        max-width: 100%;
    }
    .label-modern {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-main);
        margin-bottom: 8px;
    }

    .input-modern, 
    #orderform-category,
    #orderform-service,
    #fields .form-control,
    #fields select,
    #fields input,
    #fields textarea {
        width: 100% !important;
        height: 40px !important; 
        padding: 10px 15px !important;
        border-radius: 10px !important;
        border: 1px solid var(--border-color) !important;
        background: var(--bg-card) !important;
        color: var(--text-main) !important;
        font-size: 12px !important;
        transition: var(--transition) !important;
        box-shadow: none !important;
    }

    #fields textarea { height: auto !important; min-height: 120px !important; }

    .input-modern:focus, 
    #orderform-category:focus,
    #orderform-service:focus,
    #fields .form-control:focus {
        outline: none !important;
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
    }

    #fields .checkbox label {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 12px !important;
        color: var(--text-muted) !important;
        font-weight: 500 !important;
        gap: 10px;
        cursor: pointer;
        max-width: 100%;
        word-break: break-word;
    }

    #fields .checkbox input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        flex-shrink: 0;
        accent-color: var(--primary);
        position: static !important;
    }

    .description-box-style {
        width: 100%;
        padding: 15px;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        background: var(--bg-menu-hover);
        color: var(--text-muted);
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 20px;
        word-wrap: break-word; /* บังคับตัดคำที่ยาวเกิน */
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .charge-form-box {
        background: rgba(99, 102, 241, 0.04);
        border: 1px solid rgba(99, 102, 241, 0.2);
        border-radius: 10px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        margin-bottom: 25px;
        flex-wrap: wrap; /* ป้องกันการล้นในหน้าจอที่แคบมากๆ */
        gap: 10px;
        width: 100%;
    }

    .charge-form-label { font-size: 14px; font-weight: 700; color: var(--text-main); }
    .charge-form-value { font-size: 26px; font-weight: 800; color: var(--primary); }

    .btn-submit-modern {
        width: 100%;
        height: 52px;
        background: var(--primary);
        color: #ffffff !important;
        border: none;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
    }

    .btn-submit-modern:disabled {
        background: #cbd5e1;
        cursor: not-allowed;
        box-shadow: none;
        opacity: 0.7;
    }

    .btn-submit-modern:hover:not(:disabled) {
        background: var(--primary-hover);
        transform: translateY(-2px);
    }

    .terms-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        cursor: pointer;
        margin: 20px 0;
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.5;
        max-width: 100%;
    }

    .terms-wrapper input { 
        width: 18px !important; 
        height: 18px !important; 
        accent-color: var(--primary); 
        flex-shrink: 0;
        margin: 0 !important;
    }

    /* Alert Styling */
    .alert-modern {
        border-radius: 12px;
        border: none;
        padding: 25px;
        margin-bottom: 25px;
        position: relative;
        width: 100%;
        max-width: 100%;
    }

    .alert-modern .close {
        position: absolute;
        top: 15px;
        right: 15px;
        opacity: 0.5;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }

    .alert-modern h4 {
        margin-top: 0;
        margin-bottom: 15px;
        font-weight: 700;
        font-size: 1.1rem;
    }

    .alert-details-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px 20px;
        font-size: 13px;
        line-height: 1.5;
        width: 100%;
    }

    .alert-detail-item {
        word-break: break-all; /* ป้องกัน Link ดึงหน้าจอให้ล้น */
        overflow-wrap: break-word;
    }

    .alert-detail-item strong {
        color: rgba(0,0,0,0.7);
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* --- Category Shortcut Styling --- */
    .cat-shortcut-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* ปรับให้ column ไม่ดันกว้างเกิน parent */
        gap: 12px;
        margin-bottom: 15px;
        margin-top: 10px;
        width: 100%;
        max-width: 100%;
    }

    .cat-shortcut-item {
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 12px 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.25s ease;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-main);
        min-width: 0; /* สำคัญ: ยอมให้หดตัวได้ */
        overflow: hidden;
    }

    .cat-shortcut-item span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cat-shortcut-item i {
        font-size: 16px;
        color: var(--primary);
        width: 18px;
        text-align: center;
        flex-shrink: 0;
    }

    .cat-shortcut-item:hover, .cat-shortcut-item.active {
        background: var(--primary);
        border-color: var(--primary);
        color: #ffffff !important;
        box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
    }

    .cat-shortcut-item:hover i, .cat-shortcut-item.active i {
        color: #ffffff !important;
    }

    /* --- 🟢 ปรับปรุง Responsive โดยไม่ย้ายตำแหน่งของ Elements --- */
    @media (max-width: 1199px) {
        .order-content-layout { flex-direction: column; }
        .info-side { 
            position: static; 
            width: 100%; 
        }
        .cat-shortcut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 767px) {
        .stat-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 10px;
            margin-bottom: 20px;
        }
        .stat-card { padding: 15px; }
        .stat-value { font-size: 18px; }
        .stat-label { font-size: 11px; }
        .stat-icon-wrapper { width: 35px; height: 35px; font-size: 14px; }
        
        .alert-modern { padding: 15px; }
        .alert-details-grid { grid-template-columns: 1fr; }
        
        .cat-shortcut-grid { 
            grid-template-columns: repeat(2, minmax(0, 1fr)); 
            gap: 8px; 
        }
        .cat-shortcut-item { padding: 10px 8px; font-size: 12px; }

        .charge-form-box { padding: 15px; }
        .charge-form-value { font-size: 20px; }

        .card-body-modern { padding: 15px; } /* ลด padding ภายในการ์ดเพื่อให้มีพื้นที่เพิ่มขึ้น */
    }

    @media (max-width: 480px) {
        /* บังคับให้ขนาดคงที่เพื่อไม่ให้มีอะไรผลักหน้าจอ */
        .new-order-wrapper { padding: 0 5px; } 
    }
	/* 1. ✅ แก้ไขจุดที่เหลื่อม: ปรับ Container ให้ตรงกับหัวข้อ Orders */
    .container-fluid { 
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        padding-left: 0 !important;   /* ล้างค่าซ้ายเพื่อให้ตรงกับตัว O */
        padding-right: 0 !important;  /* ล้างค่าขวาเพื่อให้ขยายสุด */
        background-color: var(--bg-body) !important; 
        width: 100% !important;
        max-width: 100% !important;
    }
  	/* 2. ✅ แก้ไข thead ให้เหมือนภาพตัวอย่าง 100% */
    .table thead th {
        background-color: #ffffff !important;
        color: #495057 !important; /* สีฟอนต์เข้ม */
        font-size: 11px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important; /* ตัวพิมพ์ใหญ่ทั้งหมด */
        letter-spacing: 0.5px;
        padding: 15px 20px !important;
        border-bottom: 1px solid var(--border-color) !important;
        vertical-align: middle;
        position: relative;
    }

    /* สไตล์ป้ายสถานะ Badge (คงเดิม) */
    .badge-status-custom {
        padding: 6px 14px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 11px;
        display: inline-block;
        white-space: nowrap;
    }
    .st-completed { background: #e1f7ed !important; color: #17d18a !important; }
    .st-pending { background: #f3f0ff !important; color: #7b61ff !important; }
    .st-inprogress { background: #e8f2ff !important; color: #5d78ff !important; }
    .st-processing { background: #fff4e5 !important; color: #ffa800 !important; }
    .st-canceled { background: #ffe8e8 !important; color: #ff4d4d !important; }
    .st-partial { background: #f1f3f5 !important; color: #95aac9 !important; }

    /* Progress Bar (คงเดิม) */
    .progress-mini { 
        width: 100%; background-color: var(--bg-body); border-radius: 10px; height: 6px; 
        overflow: hidden; margin-top: 8px; border: 1px solid var(--border-color);
    }
    .progress-fill { height: 100%; background: var(--primary); transition: 0.5s; }
    .pct-text { font-size: 10px; font-weight: 800; color: var(--primary); display: block; margin-top: 4px; }

    /* สไตล์การ์ดตาราง Solid 100% (ขยายเต็มหน้าจอ) */
    .well-float {
        background: var(--bg-card) !important; 
        border-radius: 12px; 
        border: 1px solid var(--border-color); 
        box-shadow: 0 10px 30px rgba(0,0,0,0.03); 
        overflow: hidden; 
        padding: 0;
        width: 100% !important; 
        margin-bottom: 25px;
    }

    .table thead th {
        background: #f8f9fa !important; 
        color: #7a7a7a !important;
        font-size: 12px;
        font-weight: 700;
        padding: 15px 20px !important;
        border-bottom: 1px solid var(--border-color);
    }

    /* ✅ ตัวแก้ปัญหาเลขหน้ากระโดด (Double Lock) */
.pagination-wrapper-global {
    display: flex !important;
    justify-content: center !important; /* จัดกึ่งกลางแนวนอน */
    align-items: center !important;
    width: 100% !important;
    margin-top: 40px !important;    /* เว้นระยะห่างจากตารางด้านบน */
    margin-bottom: 40px !important;
    clear: both !important;         /* กันเหนียวสำหรับระบบ Float */
    float: none !important;         /* บังคับไม่ให้ลอย */
}

/* ปรับแต่งปุ่มเลขหน้าให้ดูเป็น Solid Style และไม่ซ้อนทับ */
.pagination { 
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 10px !important; /* ระยะห่างระหว่างตัวเลข */
}

.pagination li {
    margin: 0 !important;
}

.pagination li a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 10px !important;
    font-weight: 700;
    text-decoration: none !important;
    transition: 0.2s;
}

/* สีเมื่อเลือกหน้าปัจจุบัน */
.pagination li.active a {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}