:root {
				--primary: #6366f1; /* ม่วงอมน้ำเงิน */
                --primary-gradient: linear-gradient(135deg,#464de4,#814eff);
				--primary-hover: #4f46e5;
				--bg-body: #f3f4f9;		
				--bg-sidebar: #ffffff;
				--bg-card: #ffffff;
				--bg-card-gradient: #ffffff;
				--text-main: #1f2937;
				--text-muted: #6b7280;
				--border-color: #e5e7eb;
				--sidebar-width: 290px;
				--sidebar-mini-width: 90px;
				--header-height: 70px;
				--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				--bg-menu-hover: #f3f4f6; 
				--danger: #ef4444;
  				--fastlike-accent:#a855f7;
    			--fastlike-accent-hover:#c084fc;
				--selection-bg:#ffffff;
    			--selection-hover:#f5f3ff;
    			--selection-active:#ede9fe;
    			--selection-border:rgba(129,78,255,.18);
    			--selection-shadow:0 10px 30px rgba(15,23,42,.08);
			}

			html.dark {
    			--bg-body:#0b1120;
    			--bg-sidebar:linear-gradient(180deg,#1a1c2e 0%,#141625 100%)!important;
                /*--bg-card:#1e293b!important;*/
				--bg-card:linear-gradient(180deg,#1a1c2e 0%,#141625 100%);
    			--bg-card-a:#0f172a!important;
    			--bg-card-gradient:linear-gradient(180deg,#1a1c2e 0%,#141625 100%);
    			--text-main:#ffffff;
    			--text-muted:rgba(255,255,255,.65);
    			--border-color:rgba(129,78,255,.15);
    			--bg-menu-hover:rgba(129,78,255,.10);
    			--fastlike-accent:#a78bfa;
    			--fastlike-accent-hover:#c4b5fd;
    			--selection-bg:#131a34;
    			--selection-hover:rgba(129,78,255,.10);
    			--selection-active:rgba(129,78,255,.18);
    			--selection-border:rgba(129,78,255,.22);
    			--selection-shadow:0 10px 30px rgba(0,0,0,.35);
			}

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

    			line-height: 1.65;
    			-webkit-font-smoothing: antialiased;
    			text-rendering: optimizeLegibility;
			}

			/* 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;
              	margin: 3px 0px;
				color: var(--text-muted);
				text-decoration: none !important;
				transition: var(--transition);
				font-weight: 400;
				cursor: pointer;
				position: relative;
              	font-size: 13px;
			}

			.custom-menu li.active > a, 
			.custom-menu a:hover {
				background: rgba(99, 102, 241, 0.05);
				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: 16px;
				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: 5px; }
			/* FIX Guest Navbar Full Width */

			body.guest-page .custom-header{
			padding:0 !important;
			}

			body.guest-page .guest-topmenu{
			width:100%;
			}
			.icon-btn {
				background: none;
				border: none;
				color: var(--text-muted);
				font-size: 14px;
				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;
			}
			.update-badge::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    background:rgba(34,197,94,.35);
    animation:updateBadgeRing 1.8s infinite;
}

@keyframes updateBadgeRing{
    0%{
        transform:scale(.8);
        opacity:1;
    }

    100%{
        transform:scale(1.8);
        opacity:0;
    }
}
			/* --- 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-gradient); 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: var(--primary-gradient);
				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-gradient) !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 - แก้ไขให้เหลือ 3 คอลัมน์ */
	.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* เปลี่ยนจาก 4 เป็น 3 */
    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: 20px;
        font-weight: 600;
        color: var(--text-main);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* ป้องกันตัวเลขหรือชื่อยาวเกินล้นการ์ด */
    }

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

    .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; }
	/* Pink Theme - สีชมพูสด */
    .color-pink { background: rgba(236, 72, 153, 0.1) !important; color: #ec4899 !important; }
    .fill-pink { background: #ec4899 !important; }

    /* Yellow Theme - สีเหลืองทอง */
    .color-yellow { background: rgba(234, 179, 8, 0.1) !important; color: #eab308 !important; }
    .fill-yellow { background: #eab308 !important; }

    /* 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:16px;
    border:1px solid rgba(124,58,237,.18);
    box-shadow:0 3px 8px rgba(15,23,42,.08);
    margin-bottom:15px;
    overflow:hidden;
    width:100%;
    max-width:100%;
    transition:box-shadow .25s ease, transform .25s ease;
    }

    .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: 14px;
        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: 20px; 
        width: 100%;
        max-width: 100%;
    }

	/* สไตล์พื้นฐานสำหรับ Wrapper (Duralux Solid Style) */
.stat-icon-wrapper {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-card); /* ใช้สีทึบจากตัวแปรเสมอ */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
}

/* 1. สไตล์กลางสำหรับไอคอน "วิ๊งๆ" */
.shiny-icon {
    position: relative;
    display: inline-block;
    /* การตั้งค่า Animation และเงาวิ่ง */
}

/* 2. สร้างเงาวิ่งพาด (The Shine Layer) - ใช้ร่วมกันทั้งสองไอคอน */
.shiny-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: icon-shine-loop 3s infinite;
}

@keyframes icon-shine-loop {
    0% { left: -100%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

/* สีเขียวเดิม */
.color-green .shiny-icon {
    color: #10b981;
    filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.5));
}
.stat-icon-wrapper.color-green {
    animation: green-pulse 2.5s infinite;
}
@keyframes green-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* สีน้ำเงินใหม่ (#6366f1) */
.color-blue .shiny-icon {
    color: #6366f1;
    filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.5));
}
.stat-icon-wrapper.color-blue {
    animation: blue-pulse 2.5s infinite;
}
@keyframes blue-pulse {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* โครงสร้างหลัก level user (Desktop) */
    .level-pass-card {
        position: relative; overflow: hidden; padding: 25px !important;
        border-radius: 5px !important; min-height: 200px;
        transition: all 0.4s ease; border: none !important;
    }
    .level-bg-icon {
        position: absolute; right: -15px; top: -15px; font-size: 130px;
        transform: rotate(15deg); pointer-events: none; z-index: 1; opacity: 0.15; color: #fff;
    }
    .level-mini-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,0.7); }
    .level-title-text { margin: 10px 0 5px 0; font-size: 30px; font-weight: 600; color: #fff; }
    .sub-text, .progress-sub-text { color: rgba(255,255,255,0.8); font-size: 13px; }
    .level-progress-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.2); border-radius: 10px; margin-top: 15px; overflow: hidden; }
    .level-progress-fill { height: 100%; border-radius: 10px; transition: width 1s ease; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.5); }

    /* --- สีระดับต่างๆ (คงเดิม) --- */
    .level-basic { background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%) !important; }
    .level-starter { background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important; }
    .level-silver { background: linear-gradient(135deg, #94a3b8 0%, #475569 100%) !important; }
    .level-gold { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important; }
    .level-platinum { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; }
    .level-diamond { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%) !important; }
    .level-legend { background: linear-gradient(135deg, #1f2937 0%, #000000 100%) !important; }
    .level-legend .level-progress-fill { background: #fbbf24 !important; }
    .level-exclusive { 
        background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%) !important;
        background-size: 200% 200%;
        animation: exclusiveMove 4s ease infinite;
    }
    @keyframes exclusiveMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

    /* --- ส่วนแก้ไขสำหรับ Mobile: คง Layout เดิมแต่ทำให้กะทัดรัด (Compact) --- */
    @media (max-width: 767px) {
        /* 1. คง Layout การกินพื้นที่ 2 คอลัมน์ไว้เหมือนเดิม */
        .stat-grid { 
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important; 
            gap: 12px !important; 
        }
        
        /* ใบสุดท้ายยังคงกางเต็ม 2 คอลัมน์ */
        .stat-card:last-child { 
            grid-column: span 2 !important; 
        }

        /* 2. ทำให้องค์ประกอบข้างใน "กะทัดรัด" (Compact) ไม่กินพื้นที่แนวตั้ง */
        .level-pass-card {
            padding: 15px !important; /* ลด Padding จาก 25px เหลือ 15px */
            min-height: 120px !important; /* ลดความสูงขั้นต่ำลงให้ดูเพรียว */
            border-radius: 8px !important;
        }

        .level-bg-icon {
            font-size: 80px !important; /* ย่อไอคอนพื้นหลังไม่ให้เทอะทะ */
            right: -10px;
            top: -10px;
        }

        .level-mini-label { 
            font-size: 9px !important; 
        }

        .level-title-text { 
            font-size: 22px !important; /* ลดขนาดชื่อเลเวลลงให้ดูพอดีสายตาในมือถือ */
            margin: 5px 0 !important;
            line-height: 1.1;
        }

        .sub-text { 
            font-size: 11px !important; 
        }

        /* 3. ปรับ Progress Bar ให้ดูเพรียวขึ้น ไม่หนาเตอะ */
        .level-progress-bar { 
            height: 5px !important; 
            margin-top: 10px !important; 
        }

        .progress-sub-text { 
            font-size: 10px !important; 
            margin-top: 6px !important; 
        }
    }

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

    .input-modern, 
    #orderform-category,
    #orderform-service,
    #fields .form-control,
    #fields select,
    #fields input,
	#fields link,
    #fields textarea {
        width: 100% !important;
        height: 46px !important; 
        padding: 10px 15px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(99, 102, 241, 0.2) !important;
        background: rgba(99, 102, 241, 0.05) !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 rgba(99, 102, 241, 0.2);
        background: rgba(99, 102, 241, 0.05) !important;
        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-gradient);
        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);
    }

/* ✅ 1. เคลียร์ระบบ Pagination ทั้งระบบ */
.pagination-container, 
.pagination-wrapper, 
nav[aria-label="Page navigation"], 
.well + nav {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    position: relative !important; /* บังคับให้อยู่ในลำดับปกติ ไม่ให้ลอยทับ */
    margin: 50px 0 !important;
    text-align: center !important;
    top: auto !important;
    right: auto !important;
}

/* ✅ 2. จัดรูปแบบตัวเลขหน้าให้เป็น Solid Duralux */
.pagination {
    display: inline-flex !important; /* ใช้ inline-flex เพื่อให้ text-align: center ทำงาน */
    float: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    gap: 8px !important;
    list-style: none !important;
}

.pagination li a, 
.pagination li span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    background: #ffffff !important; /* พื้นหลังขาวทึบ */
    border: 1px solid #e1e4ed !important;
    color: #4b5563 !important;
    border-radius: 5px !important;
    font-weight: 700;
    text-decoration: none !important;
    transition: 0.2s;
}

.pagination li.active a, 
.pagination li.active span {
    background: var(--primary) !important; 
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* แก้ไขเฉพาะหน้า Orders ให้ตรงแนวตัว O (Scoped) */
/* แนะนำให้ใส่ id="orders-page" ที่ container หลักในหน้า orders.twig */
#orders-page .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* บังคับซ่อนติ๊กถูกในสภาวะปกติ (ห้ามลบ) */
.active-check {
    position: absolute;
    top: -4px;
    right: -4px;
    color: var(--primary);
    font-size: 10px;
    background: var(--bg-card);
    border-radius: 50%;
    display: none !important; /* บังคับซ่อนไว้ก่อน */
}

/* แสดงติ๊กถูกเฉพาะกล่องที่มี class active (ซึ่งถูกสั่งโดย JavaScript) */
.theme-box.active .active-check {
    display: block !important; /* แสดงออกมาเฉพาะอันที่เลือก */
  
  }
/* ================================
   GUEST MODE (ก่อน Login)
================================ */

body.guest-page .app-sidebar,
body.guest-page .sidebar-overlay{
display:none !important;
}

body.guest-page .header-left,
body.guest-page .header-right{
display:none !important;
}

body.guest-page .breadcrumb-nav,
body.guest-page #current-date-time{
display:none !important;
}

/* ขยายพื้นที่ content */

body.guest-page .main-wrapper{
margin-left:0 !important;
width:100% !important;
}

body.guest-page .content-body{
margin-left:0 !important;
padding:0 !important;
}

/* ซ่อน title dashboard */
body.guest-page .content-body > div:first-child{
display:none !important;
}

/* ขนาด font H ทั้งหมด */
/* =========================
   THAI TYPOGRAPHY FIX
========================= */





/* Guest Navbar Dark */

.guest-topmenu{
width:100%;
background:#06031a;
border-bottom:1px solid rgba(140,120,255,.25);
position:relative;
z-index:100;
}

.guest-menu-inner{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
}

.guest-logo img{
height:32px;
}

.guest-menu{
display:flex;
align-items:center;
gap:28px;
list-style:none;
margin:0;
padding:0;
}

.guest-menu a{
color:#d6d9ff;
text-decoration:none;
font-size:15px;
transition:.2s;
}

.guest-menu a:hover{
color:#8a7dff;
}

.btn-register{
background:#6c63ff;
padding:10px 18px;
border-radius:8px;
color:#fff !important;
}

.btn-register:hover{
background:#7b72ff;
}

.guest-mobile-toggle{
display:none;
background:none;
border:none;
color:#fff;
font-size:20px;
cursor:pointer;
}

body.dark-mode .guest-topmenu{
background:#06031a !important;
}

body.dark-mode .guest-menu a{
color:#d6d9ff !important;
}

@media(max-width:768px){

.guest-mobile-toggle{
display:block;
}

.guest-menu{
display:none;
position:absolute;
top:70px;
left:0;
width:100%;
background:#06031a;
flex-direction:column;
padding:20px;
gap:16px;
}

.guest-menu.active{
display:flex;
}

}







/* Card Table (แยกแถว) - ฉบับป้องกันผลกระทบส่วนอื่น */
/* 1. เจาะจงเฉพาะตารางที่มี Class เหล่านี้เท่านั้น */
.table-order, 
.table-drip { 
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
    background-color: transparent !important;
    border: none !important;
}

/* 2. สำหรับคลาส .table ให้ทำงานเฉพาะเมื่ออยู่ในส่วนของเนื้อหา (เช่นใน tbody) 
   เพื่อไม่ให้ไปกระทบโครงสร้าง Layout หรือ Modal */
.table-order tbody td,
.table-drip tbody td,
.main-content .table tbody td { 
    background-color: var(--bg-card) !important;
    color: #696969;
    padding: 15px 20px;
    height: 70px;
    vertical-align: middle;
    border: none !important;
    border-top: none !important;
  	font-size: 13px;
}

/* 3. ทำขอบมน 5px เฉพาะตารางที่กำหนด */
.table-order tbody tr td:first-child,
.table-drip tbody tr td:first-child { 
    border-radius: 5px 0 0 5px;
}

.table-order tbody tr td:last-child,
.table-drip tbody tr td:last-child,
section .table tbody tr td:last-child { 
    border-radius: 0 5px 5px 0;
}
.table-order thead th {
        color: var(--text-muted);
        font-size: 11px;
        letter-spacing: 1px;
        padding: 10px 15px;
        border-bottom: 1px solid var(--border-color);
}


/* 5. ลบเส้นขอบและพื้นหลังของ Container ทุกตัวที่อาจสร้างเส้นสีเทา */
.well, 
.well-float,
.table-responsive {
    background-color: transparent !important;
    border: none !important;         /* ลบขอบทุกด้าน */
    box-shadow: none !important;      /* ลบเงาที่อาจจะทำให้ดูเหมือนมีเส้น */
    padding: 0 !important;
    outline: none !important;        /* ลบเส้นประหรือเส้นเน้น */
}

/* ป้องกันเส้นขอบจาก Bootstrap ที่มักจะติดมากับ table-responsive */
.table-responsive {
    border-width: 0 !important;
}

/* FASTLIKE COMPACT UI */

:root{
    --sidebar-width:250px;
    --header-height:60px;
}

/* Sidebar */
.custom-menu a{
    padding:12px 20px !important;
    font-size:13px !important;
}

.nav-label{
    padding:15px 20px 8px !important;
}

/* Dashboard Card */
.stat-card{
    padding:18px !important;
    border-radius:10px !important;
}

.stat-progress-container{
    margin-top:12px !important;
}

/* Platform Shortcut */
.cat-shortcut-item{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
}

.cat-shortcut-item i{
    font-size:17px !important;
}

/* Alert */
.dynamic-bar-card-direct,
.custom-alert-card{
    padding:10px 12px !important;
}

/* Header */
.custom-header{
    padding:0 20px !important;
}

/* Content */
.content-body{
    padding-left:30px !important;
}

/* Dark Mode */

html.dark .service-legend-btn,
body.dark-mode .service-legend-btn,
[data-theme="dark"] .service-legend-btn{
    color:#a78bfa!important;
}

html.dark .service-legend-btn:hover,
body.dark-mode .service-legend-btn:hover,
[data-theme="dark"] .service-legend-btn:hover{
    color:#c4b5fd!important;

    text-shadow:
        0 0 8px rgba(167,139,250,.45),
        0 0 18px rgba(167,139,250,.20);
}


/* Price rate 1,1000 */
.price-rate-header{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin-bottom:8px!important;
}

.price-rate-header .label-modern{
    margin:0!important;
    font-weight:500!important;
}

.price-rate-pill{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:5px 9px!important;
    border-radius:999px!important;
    background:rgba(168,85,247,.10)!important;
    color:#a855f7!important;
    font-size:11px!important;
    font-weight:700!important;
    white-space:nowrap!important;
}

.price-rate-card{
    position:relative!important;
    display:flex!important;
    align-items:stretch!important;
    gap:0!important;
    padding:14px!important;
    margin-top:5px!important;
    border-radius:16px!important;
    background:linear-gradient(135deg,#ffffff 0%,#fbf8ff 100%)!important;
    border:1px solid rgba(168,85,247,.16)!important;
    box-shadow:
        0 1px 3px rgba(15,23,42,.05),
        0 10px 24px rgba(124,58,237,.08)!important;
    overflow:hidden!important;
}

.price-rate-card::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:
        radial-gradient(circle at 12% 20%,rgba(168,85,247,.12),transparent 28%),
        radial-gradient(circle at 88% 80%,rgba(70,77,228,.10),transparent 30%)!important;
    pointer-events:none!important;
}

.price-rate-item{
    position:relative!important;
    z-index:2!important;
    flex:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    min-width:0!important;
    padding:8px 10px!important;
}

.price-rate-divider{
    position:relative!important;
    z-index:2!important;
    width:1px!important;
    margin:4px 8px!important;
    background:linear-gradient(180deg,transparent,rgba(168,85,247,.34),transparent)!important;
}

.price-rate-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:17px!important;
    box-shadow:0 8px 18px rgba(124,58,237,.12)!important;
}

.price-rate-unit .price-rate-icon{
    background:rgba(168,85,247,.12)!important;
    color:#a855f7!important;
}

.price-rate-1000 .price-rate-icon{
    background:rgba(70,77,228,.12)!important;
    color:#464de4!important;
}

.price-rate-content{
    min-width:0!important;
}

.price-rate-label{
    display:block!important;
    font-size:12px!important;
    font-weight:700!important;
    color:var(--text-muted,#6b7280)!important;
    margin-bottom:5px!important;
}

.price-rate-value{
    display:flex!important;
    align-items:flex-end!important;
    gap:4px!important;
    line-height:1!important;
}



.price-rate-1000 .price-rate-value strong{
    color:var(--text-main,#111827)!important;
}

.price-rate-value small{
    font-size:14px!important;
    font-weight:600!important;
    color:var(--text-muted,#6b7280)!important;
    margin-bottom:2px!important;
}

.price-rate-desc{
    display:block!important;
    margin-top:6px!important;
    font-size:11px!important;
    font-weight:500!important;
    color:var(--text-muted,#9ca3af)!important;
}

/* Dark Mode */
html.dark .price-rate-card,
body.dark-mode .price-rate-card,
[data-theme="dark"] .price-rate-card{
    background:linear-gradient(
        180deg,
        rgba(26,28,46,.98) 0%,
        rgba(20,22,37,.98) 100%
    )!important;
    border:1px solid rgba(129,78,255,.20)!important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.03),
        0 14px 34px rgba(0,0,0,.42),
        0 0 0 1px rgba(129,78,255,.06)!important;
}

html.dark .price-rate-card::before,
body.dark-mode .price-rate-card::before,
[data-theme="dark"] .price-rate-card::before{
    background:
        radial-gradient(circle at 12% 20%,rgba(168,85,247,.16),transparent 30%),
        radial-gradient(circle at 88% 80%,rgba(70,77,228,.14),transparent 32%)!important;
}

html.dark .price-rate-pill,
body.dark-mode .price-rate-pill,
[data-theme="dark"] .price-rate-pill{
    background:rgba(167,139,250,.12)!important;
    color:#a78bfa!important;
}

html.dark .price-rate-divider,
body.dark-mode .price-rate-divider,
[data-theme="dark"] .price-rate-divider{
    background:linear-gradient(180deg,transparent,rgba(167,139,250,.42),transparent)!important;
}

html.dark .price-rate-label,
body.dark-mode .price-rate-label,
[data-theme="dark"] .price-rate-label{
    color:rgba(255,255,255,.60)!important;
}

html.dark .price-rate-desc,
body.dark-mode .price-rate-desc,
[data-theme="dark"] .price-rate-desc{
    color:rgba(255,255,255,.48)!important;
}

html.dark .price-rate-value strong,
body.dark-mode .price-rate-value strong,
[data-theme="dark"] .price-rate-value strong{
    color:#a78bfa!important;
    text-shadow:
        0 0 8px rgba(167,139,250,.25),
        0 0 18px rgba(167,139,250,.12)!important;
}

html.dark .price-rate-1000 .price-rate-value strong,
body.dark-mode .price-rate-1000 .price-rate-value strong,
[data-theme="dark"] .price-rate-1000 .price-rate-value strong{
    color:#ffffff!important;
    text-shadow:none!important;
}

html.dark .price-rate-value small,
body.dark-mode .price-rate-value small,
[data-theme="dark"] .price-rate-value small{
    color:rgba(255,255,255,.60)!important;
}

html.dark .price-rate-unit .price-rate-icon,
body.dark-mode .price-rate-unit .price-rate-icon,
[data-theme="dark"] .price-rate-unit .price-rate-icon{
    background:rgba(167,139,250,.14)!important;
    color:#a78bfa!important;
}

html.dark .price-rate-1000 .price-rate-icon,
body.dark-mode .price-rate-1000 .price-rate-icon,
[data-theme="dark"] .price-rate-1000 .price-rate-icon{
    background:rgba(129,78,255,.14)!important;
    color:#c4b5fd!important;
}

@media(max-width:768px){
    .price-rate-header{
        align-items:flex-start!important;
    }

    .price-rate-pill{
        font-size:10px!important;
        padding:4px 8px!important;
    }

    .price-rate-card{
        padding:12px!important;
        border-radius:14px!important;
    }

    .price-rate-item{
        flex-direction:column!important;
        align-items:center!important;
        gap:8px!important;
        text-align:center!important;
        padding:6px!important;
    }

    .price-rate-icon{
        width:36px!important;
        height:36px!important;
        min-width:36px!important;
        border-radius:12px!important;
        font-size:15px!important;
    }

    .price-rate-label{
        font-size:11px!important;
    }

    .price-rate-value{
        justify-content:center!important;
    }


    .price-rate-divider{
        margin:4px 6px!important;
    }
}



/* ย่อเฉพาะขนาด ไม่เปลี่ยนดีไซน์ */

.price-rate-card{
    padding:10px 14px!important;
    border-radius:14px!important;
}

.price-rate-item{
    gap:10px!important;
    padding:6px 8px!important;
}

.price-rate-divider{
    margin:2px 6px!important;
}

.price-rate-icon{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:12px!important;
    font-size:15px!important;
}

.price-rate-label{
    font-size:11px!important;
    margin-bottom:3px!important;
}

.price-rate-value strong{
    font-size:19px!important;
    line-height:1!important;
}

.price-rate-value small{
    font-size:12px!important;
    margin-bottom:1px!important;
}

.price-rate-desc{
    margin-top:4px!important;
    font-size:10px!important;
}

.price-rate-pill{
    padding:4px 8px!important;
    font-size:10px!important;
}

.price-rate-header{
    margin-bottom:6px!important;
}

@media(max-width:768px){

    .price-rate-card{
        padding:8px 10px!important;
        border-radius:12px!important;
    }

    .price-rate-icon{
        width:30px!important;
        height:30px!important;
        min-width:30px!important;
        border-radius:10px!important;
        font-size:13px!important;
    }

    .price-rate-value strong{
        font-size:16px!important;
    }

    .price-rate-value small{
        font-size:10px!important;
    }

    .price-rate-label{
        font-size:10px!important;
    }

    .price-rate-desc{
        display:none!important;
    }

    .price-rate-pill{
        display:none!important;
    }
}

/* Tab munu Neworder Page */
.order-tabs-header{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:20px!important;
    width:100%!important;
}

.order-tabs-header .nav-tabs-solid{
    flex:1!important;
    min-width:0!important;
}

.nav-tabs-solid{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    gap:18px!important;
    padding:0!important;
    margin:0!important;
    border-bottom:1px solid rgba(70,77,228,.22)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    position:relative!important;
}

.nav-tabs-solid::-webkit-scrollbar{
    display:none!important;
}

.nav-tabs-solid .tab-btn{
    position:relative!important;
    height:50px!important;
    min-width:auto!important;
    padding:0 4px!important;
    margin:0!important;
    border:none!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#6b7280!important;
    font-size:14px!important;
    font-weight:600!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    cursor:pointer!important;
    white-space:nowrap!important;
    transition:color .2s ease,text-shadow .2s ease,opacity .2s ease!important;
    appearance:none!important;
    -webkit-appearance:none!important;
}

.nav-tabs-solid .tab-btn i{
    font-size:16px!important;
    color:inherit!important;
    transition:color .2s ease!important;
}

.nav-tabs-solid .tab-btn span{
    font-size:18px!important;
    line-height:1!important;
}

.nav-tabs-solid .tab-btn:hover{
    color:#464de4!important;
    background:transparent!important;
}

.nav-tabs-solid .tab-btn.active{
    color:#5b5ff5!important;
    background:transparent!important;
    -webkit-text-fill-color:initial!important;
    text-shadow:none!important;
}

.nav-tabs-solid .tab-btn.active i,
.nav-tabs-solid .tab-btn.active span{
    color:#5b5ff5!important;
    -webkit-text-fill-color:initial!important;
    background:none!important;
}

.nav-tabs-solid .tab-btn.active::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:-1px!important;
    height:3px!important;
    border-radius:999px!important;
    background:linear-gradient(135deg, #9497d7, #814eff) !important;
    box-shadow:
        0 0 10px rgba(70,77,228,.35),
        0 0 18px rgba(129,78,255,.25)!important;
}

.order-help-btn{
    flex-shrink:0!important;
    height:50px!important;
    padding:0!important;
    margin:0!important;
    border:none!important;
    background:transparent!important;
    color:#464de4!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    cursor:pointer!important;
    white-space:nowrap!important;
    transition:color .2s ease,opacity .2s ease,transform .2s ease,text-shadow .2s ease!important;
    appearance:none!important;
    -webkit-appearance:none!important;
}

.order-help-btn:hover{
    color:#814eff!important;
    opacity:1!important;
    transform:translateY(-1px)!important;
    text-shadow:
        0 0 8px rgba(70,77,228,.22),
        0 0 14px rgba(129,78,255,.18)!important;
}

.order-help-btn i{
    font-size:15px!important;
    color:inherit!important;
}

/* Dark Mode */
html.dark .nav-tabs-solid,
body.dark-mode .nav-tabs-solid,
[data-theme="dark"] .nav-tabs-solid{
    border-bottom:1px solid rgba(129,78,255,.28)!important;
}

html.dark .nav-tabs-solid .tab-btn,
body.dark-mode .nav-tabs-solid .tab-btn,
[data-theme="dark"] .nav-tabs-solid .tab-btn{
    color:rgba(255,255,255,.46)!important;
    -webkit-text-fill-color:currentColor!important;
}

html.dark .nav-tabs-solid .tab-btn:hover,
body.dark-mode .nav-tabs-solid .tab-btn:hover,
[data-theme="dark"] .nav-tabs-solid .tab-btn:hover{
    color:#a78bfa!important;
}

html.dark .nav-tabs-solid .tab-btn.active,
body.dark-mode .nav-tabs-solid .tab-btn.active,
[data-theme="dark"] .nav-tabs-solid .tab-btn.active{
    background:linear-gradient(135deg,#7c83ff,#b58cff)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
    text-shadow:
        0 0 8px rgba(124,131,255,.32),
        0 0 18px rgba(181,140,255,.20)!important;
}

html.dark .nav-tabs-solid .tab-btn.active i,
body.dark-mode .nav-tabs-solid .tab-btn.active i,
[data-theme="dark"] .nav-tabs-solid .tab-btn.active i{
    background:linear-gradient(135deg,#7c83ff,#b58cff)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
}

html.dark .nav-tabs-solid .tab-btn.active::after,
body.dark-mode .nav-tabs-solid .tab-btn.active::after,
[data-theme="dark"] .nav-tabs-solid .tab-btn.active::after{
    background:linear-gradient(135deg,#7c83ff,#b58cff)!important;
    box-shadow:
        0 0 10px rgba(124,131,255,.45),
        0 0 20px rgba(181,140,255,.30)!important;
}

html.dark .order-help-btn,
body.dark-mode .order-help-btn,
[data-theme="dark"] .order-help-btn{
    color:#a78bfa!important;
}

html.dark .order-help-btn:hover,
body.dark-mode .order-help-btn:hover,
[data-theme="dark"] .order-help-btn:hover{
    color:#c4b5fd!important;
    text-shadow:
        0 0 8px rgba(167,139,250,.45),
        0 0 18px rgba(167,139,250,.25)!important;
}

@media(max-width:768px){
    .card-header-modern{
        padding:16px 16px 0!important;
    }

    .order-tabs-header{
        flex-direction:column!important;
        align-items:stretch!important;
        gap:6px!important;
    }

    .order-help-btn{
        order:-1!important;
        align-self:flex-end!important;
        height:28px!important;
        font-size:12px!important;
        margin-bottom:0!important;
    }

    .order-help-btn i{
        font-size:14px!important;
    }

    .nav-tabs-solid{
        gap:24px!important;
        width:100%!important;
    }

    .nav-tabs-solid .tab-btn{
        height:44px!important;
        font-size:13px!important;
        padding:0 2px!important;
        gap:7px!important;
    }

    .nav-tabs-solid .tab-btn i{
        font-size:16px!important;
    }

    .nav-tabs-solid .tab-btn span{
        font-size:15px!important;
    }
}
/* FIX TAB ACTIVE COLOR - LIGHT MODE ONLY */
.nav-tabs-solid .tab-btn.active,
.nav-tabs-solid .tab-btn.active *,
.nav-tabs-solid .tab-btn.active i,
.nav-tabs-solid .tab-btn.active i::before,
.nav-tabs-solid .tab-btn.active span{
    color:#814eff!important;
    -webkit-text-fill-color:#814eff!important;
    background:none!important;
    text-shadow:none!important;
}




/* =============================================
   FASTLIKE CARD STAT all order , balance
============================================= */
.fastlike-stat-card{
    position:relative!important;
    background:#fff!important;
    border:1px solid rgba(15,23,42,.08)!important;
    border-radius:14px!important;
    padding:18px 20px 16px!important;
    min-height:150px!important;
    overflow:hidden!important;
    box-shadow:
        0 1px 3px rgba(15,23,42,.05),
        0 12px 28px rgba(15,23,42,.08)!important;
}

.fastlike-stat-top{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    margin-bottom:12px!important;
}

.fastlike-stat-icon{
    width:48px!important;
    height:48px!important;
    border-radius:16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:20px!important;
}

.fastlike-stat-icon.green{
    background:linear-gradient(135deg,#dcfce7,#f0fdf4)!important;
    color:#10b981!important;
}

.fastlike-stat-icon.purple{
    background:linear-gradient(135deg,#ede9fe,#faf5ff)!important;
    color:#6366f1!important;
}

.fastlike-stat-menu{
    color:#6b7280!important;
    font-size:16px!important;
}

.fastlike-stat-label{
    font-size:13px!important;
    font-weight:500!important;
    color:#2d3746!important;
    margin-bottom:4px!important;
}

.fastlike-stat-value{
    font-size:27px!important;
    font-weight:700!important;
    color:#2d3746!important;
    line-height:1.1!important;
    margin-bottom:8px!important;
}

.fastlike-stat-growth{
    font-size:12px!important;
    font-weight:600!important;
    color:#10b981!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    position:relative!important;
    z-index:2!important;
}

.fastlike-stat-growth.muted{
    color:#6b7280!important;
}

.fastlike-sparkline{
    position:absolute!important;
    right:18px!important;
    bottom:0!important;
    width:48%!important;
    height:42px!important;
    overflow:visible!important;
}

.fastlike-sparkline path{
    fill:none!important;
    stroke:#a855f7!important;
    stroke-width:2.5!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    filter:drop-shadow(0 3px 4px rgba(168,85,247,.18))!important;
}
.stat-action-link{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    color:var(--primary-gradient)!important;
    font-size:12px!important;
    font-weight:700!important;
    text-decoration:none!important;
    transition:.2s ease!important;
}

.stat-action-link:hover{
    color:#814eff!important;
    transform:translateX(2px)!important;
}
.stat-action-link i{
    font-size:13px!important;
}

/* =========================
   FASTLIKE CARD DARK MODE
========================= */

html.dark .fastlike-stat-card,
body.dark-mode .fastlike-stat-card,
[data-theme="dark"] .fastlike-stat-card{
    background:linear-gradient(
        180deg,
        rgba(26,28,46,.98) 0%,
        rgba(20,22,37,.98) 100%
    )!important;

    border:1px solid rgba(129,78,255,.15)!important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.03),
        0 12px 32px rgba(0,0,0,.45),
        0 0 0 1px rgba(129,78,255,.05)!important;
}

/* Hover */

html.dark .fastlike-stat-card:hover,
body.dark-mode .fastlike-stat-card:hover,
[data-theme="dark"] .fastlike-stat-card:hover{
    transform:translateY(-2px)!important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.04),
        0 20px 40px rgba(0,0,0,.55),
        0 0 0 1px rgba(129,78,255,.12)!important;
}

/* Label */

html.dark .fastlike-stat-label,
body.dark-mode .fastlike-stat-label,
[data-theme="dark"] .fastlike-stat-label{
    color:rgba(255,255,255,.60)!important;
}

/* Value */

html.dark .fastlike-stat-value,
body.dark-mode .fastlike-stat-value,
[data-theme="dark"] .fastlike-stat-value{
    color:#ffffff!important;
}

/* Menu */

html.dark .fastlike-stat-menu,
body.dark-mode .fastlike-stat-menu,
[data-theme="dark"] .fastlike-stat-menu{
    color:rgba(255,255,255,.45)!important;
}

/* Green Icon */

html.dark .fastlike-stat-icon.green,
body.dark-mode .fastlike-stat-icon.green,
[data-theme="dark"] .fastlike-stat-icon.green{
    background:rgba(16,185,129,.12)!important;
    color:#34d399!important;
}

/* Purple Icon */

html.dark .fastlike-stat-icon.purple,
body.dark-mode .fastlike-stat-icon.purple,
[data-theme="dark"] .fastlike-stat-icon.purple{
    background:rgba(129,78,255,.12)!important;
    color:#a78bfa!important;
}

/* Growth Text */

html.dark .fastlike-stat-growth,
body.dark-mode .fastlike-stat-growth,
[data-theme="dark"] .fastlike-stat-growth{
    color:#34d399!important;
}

html.dark .fastlike-stat-growth.muted,
body.dark-mode .fastlike-stat-growth.muted,
[data-theme="dark"] .fastlike-stat-growth.muted{
    color:#a78bfa!important;
}

/* Link */

html.dark .stat-action-link,
body.dark-mode .stat-action-link,
[data-theme="dark"] .stat-action-link{
    color:#a78bfa!important;
}

html.dark .stat-action-link:hover,
body.dark-mode .stat-action-link:hover,
[data-theme="dark"] .stat-action-link:hover{
    color:#c4b5fd!important;
}

/* Sparkline */

html.dark .fastlike-sparkline path,
body.dark-mode .fastlike-sparkline path,
[data-theme="dark"] .fastlike-sparkline path{
    stroke:#a78bfa!important;

    filter:
        drop-shadow(0 0 6px rgba(167,139,250,.35))
        drop-shadow(0 0 12px rgba(167,139,250,.18))!important;
}
@media(max-width:768px){
    .fastlike-stat-card{
        padding:14px!important;
        min-height:132px!important;
    }

    .fastlike-stat-icon{
        width:38px!important;
        height:38px!important;
        border-radius:12px!important;
        font-size:16px!important;
    }

    .fastlike-stat-value{
        font-size:22px!important;
    }

    .fastlike-stat-label{
        font-size:11px!important;
    }

    .fastlike-stat-growth{
        font-size:10px!important;
    }
}


/*=============
ขั้นตอนการสั่งซื้อ
=============*/
.order-help-modal{
    position:fixed!important;
    inset:0!important;
    background:rgba(15,23,42,.52)!important;
    z-index:999999!important;
    display:none;
    align-items:center!important;
    justify-content:center!important;
    padding:20px!important;
    backdrop-filter:blur(6px)!important;
    -webkit-backdrop-filter:blur(6px)!important;
}

.order-help-modal.show{
    display:flex!important;
}

.order-help-box{
    width:100%!important;
    max-width:500px!important;
    background:var(--bg-card,#fff)!important;
    border-radius:18px!important;
    padding:22px!important;
    border:1px solid rgba(129,78,255,.14)!important;
    box-shadow:
        0 12px 34px rgba(15,23,42,.18),
        0 28px 80px rgba(124,58,237,.20)!important;
}

.order-help-header{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    margin-bottom:20px!important;
    padding-bottom:14px!important;
    border-bottom:1px solid rgba(129,78,255,.12)!important;
}

.order-help-header h3{
    margin:0!important;
    font-size:18px!important;
    font-weight:800!important;
    color:var(--text-main,#111827)!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
}

.order-help-header h3 i{
    width:34px!important;
    height:34px!important;
    border-radius:12px!important;
    background:linear-gradient(135deg,#464de4,#814eff)!important;
    color:#fff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:14px!important;
    box-shadow:0 8px 18px rgba(70,77,228,.24)!important;
}

.order-help-header button{
    width:34px!important;
    height:34px!important;
    border-radius:12px!important;
    border:1px solid var(--border-color,#e5e7eb)!important;
    background:var(--bg-body,#f8fafc)!important;
    color:var(--text-muted,#6b7280)!important;
    font-size:22px!important;
    cursor:pointer!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    transition:all .2s ease!important;
}

.order-help-header button:hover{
    color:#ef4444!important;
    background:rgba(239,68,68,.08)!important;
}

.order-help-steps{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    position:relative!important;
}

.order-help-step{
    position:relative!important;
    display:flex!important;
    align-items:flex-start!important;
    gap:14px!important;
    padding:0 0 18px 0!important;
    border-radius:0!important;
    background:transparent!important;
    border:none!important;
    box-shadow:none!important;
}

.order-help-step:last-child{
    padding-bottom:0!important;
}

.order-help-step:not(:last-child)::before{
    content:""!important;
    position:absolute!important;
    left:17px!important;
    top:38px!important;
    width:2px!important;
    height:calc(100% - 20px)!important;
    background:linear-gradient(180deg,#464de4,#814eff)!important;
    opacity:.28!important;
    border-radius:999px!important;
}

.order-help-step span{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:14px!important;
    background:linear-gradient(135deg,#464de4,#814eff)!important;
    color:#fff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:13px!important;
    font-weight:900!important;
    flex-shrink:0!important;
    box-shadow:
        0 6px 16px rgba(70,77,228,.26),
        inset 0 1px 0 rgba(255,255,255,.25)!important;
    position:relative!important;
    z-index:2!important;
}

.order-help-step > div{
    flex:1!important;
    min-width:0!important;
    padding:12px 14px!important;
    border-radius:15px!important;
    background:linear-gradient(
        135deg,
        rgba(70,77,228,.09) 0%,
        rgba(129,78,255,.07) 100%
    )!important;
    border:1px solid rgba(129,78,255,.16)!important;
}

.order-help-step b{
    display:block!important;
    font-size:14px!important;
    font-weight:800!important;
    color:var(--text-main,#111827)!important;
    margin-bottom:5px!important;
}

.order-help-step p{
    margin:0!important;
    font-size:12px!important;
    line-height:1.65!important;
    color:var(--text-muted,#6b7280)!important;
}

/* Dark Mode */
html.dark .order-help-box,
body.dark-mode .order-help-box,
[data-theme="dark"] .order-help-box{
    background:#111827!important;
    border-color:rgba(129,78,255,.24)!important;
}

html.dark .order-help-header,
body.dark-mode .order-help-header,
[data-theme="dark"] .order-help-header{
    border-bottom-color:rgba(129,78,255,.22)!important;
}

html.dark .order-help-header h3,
body.dark-mode .order-help-header h3,
[data-theme="dark"] .order-help-header h3{
    color:#ffffff!important;
}

html.dark .order-help-step > div,
body.dark-mode .order-help-step > div,
[data-theme="dark"] .order-help-step > div{
    background:linear-gradient(
        135deg,
        rgba(70,77,228,.18) 0%,
        rgba(129,78,255,.14) 100%
    )!important;
    border-color:rgba(129,78,255,.28)!important;
}

html.dark .order-help-step b,
body.dark-mode .order-help-step b,
[data-theme="dark"] .order-help-step b{
    color:#ffffff!important;
}

html.dark .order-help-step p,
body.dark-mode .order-help-step p,
[data-theme="dark"] .order-help-step p{
    color:rgba(255,255,255,.70)!important;
}

@media(max-width:768px){
    .order-help-modal{
        padding:14px!important;
    }

    .order-help-box{
        max-width:100%!important;
        border-radius:18px!important;
        padding:18px!important;
    }

    .order-help-header h3{
        font-size:16px!important;
    }

    .order-help-step{
        gap:12px!important;
    }

    .order-help-step > div{
        padding:11px 12px!important;
    }

    .order-help-step b{
        font-size:13px!important;
    }

    .order-help-step p{
        font-size:11px!important;
    }
}




/* สีเลือกแพลตฟอร์ม */
.cat-shortcut-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0;
}

/* สไตล์ไอคอนเริ่มต้น (Squircle) */
.cat-shortcut-item {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: var(--bg-card);
    border: 1.5px solid; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* ตั้งค่าให้ไอคอนดึงสี (color) จากตัวแม่มาใช้ */
.cat-shortcut-item i {
    font-size: 1.4rem;
    color: inherit; /* ดึงสีจาก class แบรนด์มาใส่ที่ไอคอน */
    transition: all 0.3s ease;
}

/* Hover Effect */
.cat-shortcut-item:hover {
    transform: translateY(-5px);
    border: inherit; /* ดึงสีจาก class แบรนด์มาใส่ที่ไอคอน */
}

/* --- กำหนดสีประจำแบรนด์: ค่าเริ่มต้นเป็นพาสเทล / เมื่อเลือก (.selected, .active) หรือ Hover เป็นสีแบรนด์แท้ --- */

/* Everything (ม่วง Indigo) */
.is-everything { background-color: #E0E1F9 !important; color: #4338CA !important; border-color: #C7D2FE !important; }
.is-everything.selected, .is-everything.active, .is-everything:hover { background: #6366f1 !important; color: #fff !important; box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4) !important; border-color: #6366f1 !important; }

/* Instagram (ชมพู-แดง) */
.is-instagram { background-color: #FCE7F3 !important; color: #BE185D !important; border-color: #FBCFE8 !important; }
.is-instagram.selected, .is-instagram.active, .is-instagram:hover { background: #E1306C !important; color: #fff !important; box-shadow: 0 5px 15px rgba(225, 48, 108, 0.4) !important; border-color: #E1306C !important; }

/* Tiktok (ดำ) */
.is-tiktok { background-color: #F3F4F6 !important; color: #1F2937 !important; border-color: #E5E7EB !important; }
.is-tiktok.selected, .is-tiktok.active, .is-tiktok:hover { background: #000000 !important; color: #fff !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; border-color: #000000 !important; }

/* Youtube (แดง) */
.is-youtube { background-color: #FEE2E2 !important; color: #B91C1C !important; border-color: #FCA5A5 !important; }
.is-youtube.selected, .is-youtube.active, .is-youtube:hover { background: #FF0000 !important; color: #fff !important; box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4) !important; border-color: #FF0000 !important; }

/* X / Twitter (ดำ) */
.is-twitter { background-color: #E5E7EB !important; color: #111827 !important; border-color: #D1D5DB !important; }
.is-twitter.selected, .is-twitter.active, .is-twitter:hover { background: #000000 !important; color: #fff !important; border-color: #000000 !important; }

/* Facebook (ฟ้า) */
.is-facebook { background-color: #E0F2FE !important; color: #1D4ED8 !important; border-color: #BAE6FD !important; }
.is-facebook.selected, .is-facebook.active, .is-facebook:hover { background: #1877F2 !important; color: #fff !important; box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4) !important; border-color: #1877F2 !important; }

/* Telegram (ฟ้าสว่าง) */
.is-telegram { background-color: #E0F2FE !important; color: #0369A1 !important; border-color: #7DD3FC !important; }
.is-telegram.selected, .is-telegram.active, .is-telegram:hover { background: #0088cc !important; color: #fff !important; box-shadow: 0 5px 15px rgba(0, 136, 204, 0.3) !important; border-color: #0088cc !important; }

/* Discord (ม่วงน้ำเงิน) */
.is-discord { background-color: #EEF2FF !important; color: #4338CA !important; border-color: #C7D2FE !important; }
.is-discord.selected, .is-discord.active, .is-discord:hover { background: #5865F2 !important; color: #fff !important; box-shadow: 0 5px 15px rgba(88, 101, 242, 0.3) !important; border-color: #5865F2 !important; }

/* Spotify (เขียว) */
.is-spotify { background-color: #DCFCE7 !important; color: #15803D !important; border-color: #BBF7D0 !important; }
.is-spotify.selected, .is-spotify.active, .is-spotify:hover { background: #1DB954 !important; color: #fff !important; box-shadow: 0 5px 15px rgba(29, 185, 84, 0.3) !important; border-color: #1DB954 !important; }

/* Threads (ดำ) */
.is-threads { background-color: #F9FAFB !important; color: #111827 !important; border-color: #E5E7EB !important; }
.is-threads.selected, .is-threads.active, .is-threads:hover { background: #000000 !important; color: #fff !important; border-color: #000000 !important; }

/* Line (เขียวสด) */
.is-line { background-color: #E8FBEF !important; color: #04943F !important; border-color: #A7F3D0 !important; }
.is-line.selected, .is-line.active, .is-line:hover { background: #06C755 !important; color: #fff !important; box-shadow: 0 5px 15px rgba(6, 199, 85, 0.3) !important; border-color: #06C755 !important; }

/* Shopee (ส้ม) */
.is-shopee { background-color: #FFEDD5 !important; color: #C2410C !important; border-color: #FED7AA !important; }
.is-shopee.selected, .is-shopee.active, .is-shopee:hover { background: #EE4D2D !important; color: #fff !important; box-shadow: 0 5px 15px rgba(238, 77, 45, 0.4) !important; border-color: #EE4D2D !important; }

/* Traffic / Website (ฟ้าอมเขียว - ปรับให้พาสเทลเข้มและชัดขึ้น) */
.is-website { 
    background-color: #B2F5F6 !important; /* ปรับพื้นหลังจากสีจางมาก ให้เป็นฟ้าอมเขียวพาสเทลที่ชัดขึ้น */
    color: #006B6F !important;            /* ปรับสีไอคอนให้เข้มขึ้นเพื่อเพิ่มความต่าง (Contrast) */
    border-color: #4ED2D6 !important;       /* ปรับเส้นขอบให้เข้มและคมชัดขึ้น */
}
.is-website.selected, .is-website.active, .is-website:hover { 
    background: #00bec4 !important; 
    color: #fff !important; 
    box-shadow: 0 5px 15px rgba(0, 190, 196, 0.3) !important; 
    border-color: #00bec4 !important; 
}
  
/* Lemon8 (เหลืองเลมอนสด) */
.is-lemon8 { background-color: #FEF9C3 !important; color: #854D0E !important; border-color: #FEF08A !important; }
.is-lemon8.selected, .is-lemon8.active, .is-lemon8:hover { background: #FFEB00 !important; color: #000 !important; box-shadow: 0 5px 15px rgba(255, 235, 0, 0.4) !important; border-color: #FFEB00 !important; }

/* Twitch (ม่วงสด) */
.is-twitch { background-color: #F3E8FF !important; color: #6B21A8 !important; border-color: #E9D5FF !important; }
.is-twitch.selected, .is-twitch.active, .is-twitch:hover { background: #9146FF !important; color: #fff !important; box-shadow: 0 5px 15px rgba(145, 70, 255, 0.4) !important; border-color: #9146FF !important; }

/* More (...) */
.is-more { background-color: #F8FAFC !important; color: #64748b !important; border-color: #e2e8f0 !important; }
.is-more.selected, .is-more.active, .is-more:hover { background: #F1F5F9 !important; color: #475569 !important; border-color: #cbd5e1 !important; }
  
/* --- การจัดการสำหรับหน้าจอมือถือ (ปรับเป็น 6 ปุ่มต่อแถว) --- */
@media (max-width: 767px) {
    .cat-shortcut-grid {
        gap: 6px; /* ลดช่องว่างให้เหลือน้อยที่สุดเพื่อให้ยัด 6 ปุ่มได้ */
        justify-content: space-between; /* กระจายปุ่มให้เต็มพื้นที่ */
    }

    .cat-shortcut-item {
        /* คำนวณ 100% หาร 6 ปุ่ม ลบด้วย gap */
        flex: 0 0 calc(16.66% - 5px); 
        height: 48px;  /* ลดความสูงลงเพื่อให้ดูสมส่วนกับความกว้าง */
        min-width: unset; /* ปลดล็อกขนาดขั้นต่ำ */
        border-radius: 10px; /* ลดความมนลงนิดนึงเพื่อให้เข้ากับขนาดที่เล็กลง */
        border-width: 1px; /* ลดความหนาเส้นขอบ */
    }

    .cat-shortcut-item i {
        font-size: 1rem; /* ย่อขนาดไอคอนลงเหลือ 16px-18px เพื่อไม่ให้เบียดปุ่ม */
    }
}

/* สำหรับมือถือที่จอเล็กมากๆ (เช่น iPhone 5/SE รุ่นเก่า) */
@media (max-width: 320px) {
    .cat-shortcut-grid {
        gap: 4px;
    }
    .cat-shortcut-item {
        flex: 0 0 calc(16.66% - 4px);
        height: 42px;
    }
    .cat-shortcut-item i {
        font-size: 0.9rem;
    }
}

/* เลือกหมวดหมู่ */                                       
 /* 1. สไตล์โครงสร้างกล่อง Select2 (ความสูง, ความมน, พื้นหลัง) */
    .select2-container--default .select2-selection--single {
        height: 48px !important;
        padding: 8px 12px !important;
        border: 1px solid var(--border-color) !important; /* ปรับให้เข้ากับ Duralux Theme */
        border-radius: 12px !important;
        background-color: var(--bg-body); /* ใช้สีทึบแทน rgba เพื่อรองรับ Dark Mode */
        display: flex !important;
        align-items: center !important;
    }

    /* 2. จัดระเบียบตัวหนังสือและลูกศร */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 32px !important;
        padding-left: 5px !important;
        color: var(--text-main) !important;
    }
    .select2-results__option,
    .dropdown-menu > li > a {
        color: var(--text-main) !important;
        background: var(--bg-card);
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 46px !important;
        right: 10px !important;
    }

    /* 3. สไตล์กล่องรายการ (Dropdown) - เน้นความมนและเงาบางๆ */
    .select2-dropdown {
        background-color: var(--bg-card); /* ใช้สีทึบตามข้อตกลงธีม Duralux */
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
        overflow: hidden;
    }

    .select2-results__option {
        padding: 10px 15px !important;
        color: var(--text-main) !important;
    }

    /* 4. ล้างสีฟ้าออกทั้งหมด - แก้ไขจุดพิมพ์ผิด var--(primary) และสลับสีตัวอักษรให้เห็นชัด */
    .select2-container--default .select2-results__option--highlighted[aria-selected],
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
    .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: rgba(99, 102, 241, 0.05); /* แก้ไขโครงสร้างตัวแปรให้ถูกต้อง */
        color: var(--primary) !important; /* เปลี่ยนตัวอักษรเป็นสีขาวเพื่อให้ตัดกับพื้นหลังสีหลักเวลา Hover/Selected */
    }
    
    /* 5. ป้องกันสีฟ้าเวลาเอาเมาส์ไปชี้ (Hover) สำหรับรายการทั่วไป */
    .select2-results__option:hover {
        background: var(--bg-body) !important; /* ใช้สีทึบของบอดี้แทน rgba */
        color: var(--text-main) !important;
    }
    /* จัดการสีพื้นหลังและสีตัวอักษรของรายการใน Dropdown */
    .select2-container .dropdown-menu > li > a {
        background: transparent !important; /* ล้างพื้นหลังสีฟ้าออก */
        color: var(--text-main) !important;       /* บังคับสีตัวอักษร */
        white-space: inherit;
    }

    /* จัดการสถานะ Hover (ตอนเมาส์เลื่อนผ่าน) และตอนเลือก (Active) */
    .select2-container .dropdown-menu > li > a:hover,
    .select2-container .dropdown-menu > li.active > a,
    .select2-container .dropdown-menu > li.selected > a {
        background: transparent !important;
        color: var(--text-main) !important;
    }
.category-icon-container {
  display: flex;
  align-items: center;
  gap: 10px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
  margin-bottom: 8px;
}

.plus-icon-frame {
  width: 20px; /* ปรับขนาดกรอบตามต้องการ */
  height: 20px; /* ปรับขนาดกรอบตามต้องการ */
  border: 1px solid var(--border-color) !important; 
  border-radius: 5px; /* ปรับความมนของมุมตามต้องการ */
  display: flex;
  justify-content: center;
  align-items: center;
}

.plus-icon-frame i {
  font-size: 10px; /* ปรับขนาดไอคอนเครื่องหมายบวกตามต้องการ */
  color: var(--primary); /* ปรับสีไอคอนเครื่องหมายบวกตามต้องการ */
}

.category-label {
  font-size: 13px; /* ปรับขนาดข้อความตามต้องการ */
  color: var(--text-main); /* ปรับสีข้อความตามต้องการ */
}


/* smart-auto-guide */
.smart-auto-guide-container::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(transparent, #6366f1, #a855f7, transparent 40%);
            animation: borderBeam 4s linear infinite;
            transform: translate(-50%, -50%);
            z-index: 0;
        }

        @keyframes borderBeam {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }


/* คำอธิบายสัญลักษณ์บริการ */
.service-desc-toolbar{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    width:100%!important;
    margin:0 0 8px 0!important;
}

.service-desc-toolbar .label-modern{
    margin:0!important;
    padding:0!important;
}

.service-legend-btn{
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important;
    border:none!important;
    background:transparent!important;
    color:var(--fastlike-accent)!important;
    font-size:12px!important;
    font-weight:500!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    white-space:nowrap!important;
    cursor:pointer!important;
}
.service-legend-btn:hover{
    color:var(--fastlike-accent-hover)!important;
    transform:translateY(-1px)!important;
}
.service-legend-btn i{
    font-size:14px!important;
    color:#7c3aed!important;
}

.service-legend-modal{
    position:fixed!important;
    inset:0!important;
    background:rgba(15,23,42,.58)!important;
    display:none!important;
    align-items:center!important;
    justify-content:center!important;
    z-index:999999!important;
    padding:20px!important;
    backdrop-filter:blur(6px)!important;
    -webkit-backdrop-filter:blur(6px)!important;
}

.service-legend-modal.show{
    display:flex!important;
}

.service-legend-box{
    width:100%!important;
    max-width:480px!important;
    max-height:90vh!important;
    background:var(--bg-card,#fff)!important;
    border-radius:22px!important;
    overflow:hidden!important;
    box-shadow:0 20px 60px rgba(15,23,42,.28),0 30px 90px rgba(124,58,237,.18)!important;
}

.service-legend-header{
    background:linear-gradient(135deg,#464de4 0%,#814eff 55%,#7364e6 100%)!important;
    color:#fff!important;
    padding:14px 18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
}

.service-legend-header h3{
    margin:0!important;
    font-size:20px!important;
    font-weight:600!important;
    display:flex!important;
    gap:12px!important;
    align-items:center!important;
    color:#fff!important;
}

.service-legend-header h3 i{
    width:34px!important;
    height:34px!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.95)!important;
    color:#5b4df5!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.service-legend-header button{
    width:34px!important;
    height:34px!important;
    border:none!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.14)!important;
    color:#fff!important;
    font-size:18px!important;
    cursor:pointer!important;
}

.service-legend-body{
    padding:16px!important;
    overflow:auto!important;
    max-height:calc(90vh - 84px)!important;
    background:var(--bg-card,#fff)!important;
}

.legend-item{
    margin:0 0 12px 0!important;
    border-radius:16px!important;
    padding:5px 10px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    border:1px solid transparent!important;
    border-left:6px solid!important;
    box-shadow:0 6px 18px rgba(15,23,42,.05)!important;
}

.legend-item i,
.legend-item .flag{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    background:#fff!important;
    border-radius:50%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:17px!important;
}

.legend-item b{
    display:inline!important;
    font-size:16px!important;
    font-weight:600!important;
}

.legend-item span{
    font-size:14px!important;
    color:#111827!important;
}

.legend-item.red{background:linear-gradient(135deg,#fff5f5,#fff)!important;border-color:rgba(239,68,68,.22)!important;border-left-color:#ef4444!important}
.legend-item.red i,.legend-item.red b{color:#ef4444!important}

.legend-item.cyan{background:linear-gradient(135deg,#ecfeff,#fff)!important;border-color:rgba(6,182,212,.22)!important;border-left-color:#06b6d4!important}
.legend-item.cyan i,.legend-item.cyan b{color:#06b6d4!important}

.legend-item.purple{background:linear-gradient(135deg,#faf5ff,#fff)!important;border-color:rgba(168,85,247,.22)!important;border-left-color:#a855f7!important}
.legend-item.purple i,.legend-item.purple b{color:#7c3aed!important}

.legend-item.blue{background:linear-gradient(135deg,#eff6ff,#fff)!important;border-color:rgba(59,130,246,.22)!important;border-left-color:#3b82f6!important}
.legend-item.blue i,.legend-item.blue b{color:#2563eb!important}

.legend-item.orange{background:linear-gradient(135deg,#fff7ed,#fff)!important;border-color:rgba(245,158,11,.24)!important;border-left-color:#f59e0b!important}
.legend-item.orange b{color:#ea580c!important}

.legend-note{
    padding:14px 16px!important;
    border-radius:16px!important;
    background:rgba(70,77,228,.06)!important;
    border:1px dashed rgba(129,78,255,.28)!important;
    color:var(--text-muted,#4b5563)!important;
    font-size:13px!important;
    line-height:1.7!important;
    display:flex!important;
    gap:10px!important;
}

.legend-note i{
    color:#f59e0b!important;
    font-size:18px!important;
    margin-top:2px!important;
    flex-shrink:0!important;
}

@media(max-width:768px){
    .service-desc-toolbar{
        align-items:flex-start!important;
        gap:6px!important;
    }

    .service-legend-btn{
        font-size:11px!important;
    }

    .service-legend-modal{
        padding:14px!important;
    }

    .service-legend-header{
        padding:16px!important;
    }

    .service-legend-header h3{
        font-size:16px!important;
    }

    .legend-item b{
        font-size:16px!important;
    }

    .legend-item span{
        font-size:12px!important;
    }
}


/* ปุ่ม Toggle ก่อนกดยืนยันคำสั่งซื้อ */
    /* ปรับขนาดปุ่ม Toggle ให้กะทัดรัดและสมดุลกับข้อความ */
    .duralux-toggle { 
        position: relative; 
        display: inline-block; 
        width: 30px;      /* ลดความกว้างลงจาก 36px */
        height: 16px;     /* ลดความสูงลงจาก 20px */
        flex-shrink: 0; 
        margin-top: 1px;  /* ขยับลงมาเล็กน้อยให้ตรงกับบรรทัดแรกของข้อความ */
    }
    
    .duralux-toggle input { opacity: 0; width: 0; height: 0; }
    
    .duralux-slider { 
        position: absolute; 
        cursor: pointer; 
        top: 0; left: 0; right: 0; bottom: 0; 
        background-color: #d1d5db; 
        transition: .3s; 
        border-radius: 16px; /* ปรับให้โค้งรับขนาดใหม่ */
    }
    
    .duralux-slider:before { 
        position: absolute; 
        content: ""; 
        height: 12px;     /* ลดขนาดปุ่มเลื่อนลง */
        width: 12px; 
        left: 2px; 
        bottom: 2px; 
        background-color: #fff; 
        transition: .3s; 
        border-radius: 50%; 
    }
    
    /* ตอนกดเปิดสวิตช์ */
    .duralux-toggle input:checked + .duralux-slider { 
        background-color: var(--primary); 
    }
    
    .duralux-toggle input:checked + .duralux-slider:before { 
        transform: translateX(14px); /* ปรับระยะเลื่อนให้พอดีกับความกว้างใหม่ */
    }


/* ข้อควรรู้ก่อนสั่งซื้อ */
.duralux-notice-container { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.notice-card-solid { background-color: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; }
.notice-card-body { padding: 15px; }
.notice-header-inline { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }

/* กลับมาใช้พื้นหลัง var(--bg-body) ตามเดิม */
.notice-item-box { 
    display: flex; 
    align-items: flex-start; 
    gap: 12px; 
    padding: 12px; 
    background-color: var(--bg-body); /* พื้นหลังเดิมที่ Meen ต้องการ */
    border-radius: 8px; 
    margin-bottom: 8px; 
    color: var(--text-muted); 
    font-size: 13px; 
    line-height: 1.5; 
}

/* ปรับเฉพาะไอคอนให้เป็นวงกลมม่วงตามรูป 01, 02, 03 */
.notice-item-box i { 
    width: 28px;  /* ปรับขนาดให้เล็กลงนิดนึงเพื่อให้เข้ากับกล่องที่มีพื้นหลัง */
    height: 28px;
    background-color: transparent;
    color: rgb(240 109 109);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.3s ease;
}

/* Dark Mode สำหรับไอคอนในกล่อง */
[data-theme="dark"] .notice-item-box i {
    background-color: rgba(167, 139, 250, 0.15);
    color: #c4b5fd;
}

/* กรณีข้อความสำคัญ (รักษาแถบแดงด้านซ้ายไว้) */
.notice-important { 
    border-left: 4px solid #ef4444; 
}

.notice-important i {
    background-color: #fff1f2;
    color: #ef4444;
}

.danger-zone-solid { margin-top: 15px; padding: 15px; background-color: #fff5f5; border: 1px solid #feb2b2; border-radius: 10px; }
[data-theme="dark"] .danger-zone-solid { background-color: #2d1a1a; border-color: #4a2020; }
.danger-title { color: #c53030; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.danger-content { font-size: 12.5px; color: #742a2a; line-height: 1.6; }
[data-theme="dark"] .danger-content { color: #feb2b2; }
.danger-footer { margin-top: 12px; padding: 10px; background-color: #fff; border-radius: 6px; border: 1px dashed #feb2b2; font-size: 12px; color: #742a2a;}
[data-theme="dark"] .danger-footer { background-color: #1a1a1a; }
.notice-footer-bar { background-color: #fffaf0; padding: 12px 15px; border-top: 1px solid #feebc8; font-size: 12.5px; color: #c05621; display: flex; align-items: center; gap: 10px; }
[data-theme="dark"] .notice-footer-bar { background-color: #2d2412; border-top-color: #443212; color: #fbd38d; }



/* เริ่มปุ่มกระดิ่งแจ้งเตือนเรียลไทม์ + Drawer ซ้าย */
.direct-bell-fab{position:fixed!important;left:20px!important;bottom:22px!important;width:50px!important;height:50px!important;border-radius:999px!important;background:linear-gradient(135deg,#464de4,#814eff)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;z-index:999998!important;box-shadow:0 14px 34px rgba(70,77,228,.38)!important;transition:transform .25s ease,box-shadow .25s ease!important;border:1px solid rgba(255,255,255,.22)!important}
.direct-bell-fab:hover{transform:translateY(-3px)!important;box-shadow:0 18px 42px rgba(70,77,228,.46)!important}
.direct-bell-fab i{font-size:22px!important}
.direct-bell-badge{position:absolute!important;top:2px!important;right:2px!important;min-width:21px!important;height:21px!important;padding:0 6px!important;border-radius:999px!important;background:#ef4444!important;color:#fff!important;font-size:11px!important;font-weight:800!important;display:none;align-items:center!important;justify-content:center!important;border:2px solid var(--bg-body,#fff)!important;line-height:1!important}
.direct-bell-pulse{position:absolute!important;inset:-5px!important;border-radius:999px!important;border:1px solid rgba(129,78,255,.35)!important;animation:directBellPulse 1.8s infinite!important;pointer-events:none!important}
@keyframes directBellPulse{0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.18);opacity:0}100%{transform:scale(1.18);opacity:0}}
.direct-notif-modal-overlay{position:fixed!important;top:0!important;left:0!important;width:100%!important;height:100%!important;background:rgba(0,0,0,.55)!important;z-index:999999!important;display:flex!important;align-items:stretch!important;justify-content:flex-start!important;padding:0!important;box-sizing:border-box!important;opacity:0;pointer-events:none;transition:opacity .28s ease!important}
.direct-notif-modal-overlay.show{opacity:1!important;pointer-events:auto!important}
.direct-notif-modal-box{background:var(--bg-body,#fff)!important;width:420px!important;max-width:92vw!important;height:100vh!important;max-height:100vh!important;border-radius:0px!important;box-sizing:border-box!important;padding:22px 18px!important;position:relative!important;transform:translateX(-105%)!important;transition:transform .34s cubic-bezier(.22,1,.36,1)!important;color:var(--text-main,#111827)!important;display:flex!important;flex-direction:column!important;box-shadow:18px 0 50px rgba(0,0,0,.22)!important;border-right:1px solid var(--border-color,rgba(0,0,0,.08))!important}
.direct-notif-modal-overlay.show .direct-notif-modal-box{transform:translateX(0)!important}
.direct-notif-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:12px!important;padding-bottom:12px!important;border-bottom:1px solid var(--border-color,#e5e7eb)!important}
.direct-notif-title{font-size:16px!important;font-weight:800!important;margin:0!important;display:flex!important;align-items:center!important;gap:9px!important;color:var(--text-main,#111827)!important}
.direct-notif-title i{color:var(--primary,#6366f1)!important}
.direct-notif-close{background:var(--bg-card,#f8fafc)!important;border:1px solid var(--border-color,#e5e7eb)!important;width:34px!important;height:34px!important;border-radius:10px!important;font-size:22px!important;color:var(--text-muted,#6b7280)!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
.direct-notif-close:hover{background:rgba(239,68,68,.08)!important;color:#ef4444!important}
.modal-filter-scroll-row::-webkit-scrollbar{display:none}
.modal-history-item{background:var(--bg-card,#f8fafc)!important;border-radius:14px!important;padding:14px!important;margin-bottom:12px!important;text-align:left!important;transition:all .3s ease!important}
.modal-history-item.target-highlight{animation:highlightPulse 2s ease-out!important;z-index:10!important;position:relative!important}
@keyframes highlightPulse{0%{transform:scale(1);border-left-width:4px}15%{transform:scale(1.03);border-left-width:12px}40%{transform:scale(1.03);border-left-width:12px}100%{transform:scale(1);border-left-width:4px}}
.direct-empty-state{background:var(--bg-card,#f8fafc)!important;border:1px dashed var(--border-color,#e5e7eb)!important;border-radius:16px!important;padding:28px 16px!important;text-align:center!important;color:var(--text-muted,#6b7280)!important;font-size:12px!important}

@media(max-width:576px){
    .direct-bell-fab{
        left:16px!important;
        bottom:80px!important;
        width:50px!important;
        height:50px!important;
    }
    .direct-notif-modal-box{
        width:88vw!important;
        max-width:88vw!important;
        border-radius:0!important;
        padding:20px 15px!important;
    }
    .direct-notif-title{
        font-size:15px!important;
    }
}



/* fastlike-welcome-box */
.fastlike-welcome-box{
    margin-bottom:18px;
}

.fastlike-welcome-box h2{
    margin:6px 10px;
    font-size:26px;
    font-weight:600;
    color:var(--text-main,#111827)!important;
    line-height:1.25;
}

.fastlike-welcome-box h2 span{
    display:inline-block;
    animation:fastlikeWave 1.8s ease-in-out infinite;
    transform-origin:70% 70%;
}

.fastlike-welcome-box p{
    margin:0 10px;
    font-size:13px;
    font-weight:400;
    color:var(--text-muted,#6b7280);
    line-height:1.6;
}

@keyframes fastlikeWave{
    0%,100%{transform:rotate(0deg);}
    20%{transform:rotate(14deg);}
    40%{transform:rotate(-8deg);}
    60%{transform:rotate(10deg);}
    80%{transform:rotate(-4deg);}
}

@media(max-width:768px){
    .fastlike-welcome-box{
        margin-bottom:14px;
    }

    .fastlike-welcome-box h2{
        font-size:22px;
    }

    .fastlike-welcome-box p{
        font-size:12px;
    }
}



/* กล่องประกาศระบบ announcement-modal */
/* Modal Overlay & Box (คงเดิม 100%) */
.announcement-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
.announcement-content { background-color: var(--bg-card-a); width: 90%; max-width: 500px; border-radius: 5px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.3); overflow: hidden; animation: modalFadeIn 0.3s ease-out; }
@keyframes modalFadeIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.announcement-body { padding: 30px 20px; text-align: left; color: var(--text-main); background:#FFFFFF !important;}
.announcement-text { text-align: left; margin: 20px 0; font-size: 14px; line-height: 1.6; max-height: 350px; overflow-y: auto; padding-right: 5px; }
.modal-accept-btn { width: 100%; padding: 12px; border: none; border-radius: 10px; background: #7b61ff; color: white; font-weight: 700; font-size: 16px; cursor: pointer; transition: 0.3s; margin-top: 10px; }
.modal-accept-btn:disabled { background: #ccc; cursor: not-allowed; color: #666; }


/* Dropdown */

.select2-dropdown{
    background:var(--selection-bg)!important;
    border:1px solid var(--selection-border)!important;
    border-radius:18px!important;
    overflow:hidden!important;
    box-shadow:var(--selection-shadow)!important;
}

/* รายการ */

.select2-results__option{
    margin:4px 8px!important;
    border-radius:12px!important;
    transition:.15s ease!important;
    background:transparent!important;
}

/* Hover */

.select2-results__option--highlighted{
    background:var(--selection-hover)!important;
    color:var(--text-main)!important;
}

/* Selected */

.select2-results__option[aria-selected="true"]{
    background:var(--selection-active)!important;
    border-left:3px solid #814eff!important;
    color:var(--text-main)!important;
}

/* Search */

.select2-search__field{
    background:transparent!important;
    color:var(--text-main)!important;
}

/* Scroll */

.select2-results__options::-webkit-scrollbar{
    width:6px;
}

.select2-results__options::-webkit-scrollbar-thumb{
    background:rgba(129,78,255,.25);
    border-radius:999px;
}

/* =========================
   Select2 Dark Mode Fix
========================= */

html.dark .select2-results__option,
body.dark-mode .select2-results__option,
[data-theme="dark"] .select2-results__option{
    background:transparent!important;
    color:#f8fafc!important;
}

/* Hover */

html.dark .select2-results__option--highlighted,
body.dark-mode .select2-results__option--highlighted,
[data-theme="dark"] .select2-results__option--highlighted{
    background:rgba(129,78,255,.12)!important;
    color:#ffffff!important;
}

/* Selected */

html.dark .select2-results__option[aria-selected="true"],
body.dark-mode .select2-results__option[aria-selected="true"],
[data-theme="dark"] .select2-results__option[aria-selected="true"]{
    background:rgba(129,78,255,.18)!important;
    color:#ffffff!important;
    border-left:3px solid #814eff!important;
}

/* ป้องกันธีมเดิมย้อมพื้นหลัง */

html.dark .select2-results__option *,
body.dark-mode .select2-results__option *,
[data-theme="dark"] .select2-results__option *{
    color:inherit!important;
    background:transparent!important;
}

/* ไอคอน */

html.dark .select2-results__option img,
body.dark-mode .select2-results__option img,
[data-theme="dark"] .select2-results__option img{
    background:none!important;
}

/* Dropdown */

html.dark .select2-dropdown,
body.dark-mode .select2-dropdown,
[data-theme="dark"] .select2-dropdown{
    background:#131a34!important;
    border:1px solid rgba(129,78,255,.22)!important;
    box-shadow:
        0 10px 30px rgba(0,0,0,.35)!important;
}

:root{
    --selection-bg:#ffffff;
    --selection-item:#ffffff;
    --selection-hover:#f5f3ff;
    --selection-active:#ede9fe;
    --selection-text:#111827;
    --selection-muted:#6b7280;
    --selection-border:rgba(129,78,255,.18);
    --selection-shadow:0 12px 32px rgba(15,23,42,.10);
}

html.dark{
    --selection-bg:#101729;
    --selection-item:#111827;
    --selection-hover:rgba(129,78,255,.16);
    --selection-active:rgba(129,78,255,.24);
    --selection-text:#f8fafc;
    --selection-muted:rgba(255,255,255,.62);
    --selection-border:rgba(129,78,255,.28);
    --selection-shadow:0 14px 36px rgba(0,0,0,.45);
}

.select2-container--default .select2-selection--single{
    height:48px!important;
    padding:8px 12px!important;
    border:1px solid var(--border-color)!important;
    border-radius:12px!important;
    background:var(--bg-body)!important;
    display:flex!important;
    align-items:center!important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:32px!important;
    padding-left:5px!important;
    color:var(--text-main)!important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height:46px!important;
    right:10px!important;
}

.select2-dropdown{
    background:var(--selection-bg)!important;
    border:1px solid var(--selection-border)!important;
    border-radius:16px!important;
    box-shadow:var(--selection-shadow)!important;
    overflow:hidden!important;
}

.select2-results__options{
    padding:8px!important;
    background:var(--selection-bg)!important;
}

.select2-results__option{
    margin:4px 0!important;
    padding:11px 14px!important;
    border-radius:12px!important;
    background:var(--selection-item)!important;
    color:var(--selection-text)!important;
    transition:.16s ease!important;
}

.select2-results__option *,
.select2-results__option span,
.select2-results__option i{
    color:inherit!important;
    background:transparent!important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-results__option:hover{
    background:var(--selection-hover)!important;
    color:var(--selection-text)!important;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[aria-selected="true"]{
    background:var(--selection-active)!important;
    color:var(--selection-text)!important;
    border-left:3px solid #814eff!important;
}

.select2-search__field{
    background:var(--selection-item)!important;
    color:var(--selection-text)!important;
    border:1px solid var(--selection-border)!important;
    border-radius:10px!important;
}

.dropdown-menu > li > a{
    background:transparent!important;
    color:var(--selection-text)!important;
}



/* ================================
   FASTLIKE SIDEBAR 2026
================================ */
.app-sidebar{
    width:260px!important;
    background:#ffffff!important;
    border-right:1px solid rgba(15,23,42,.08)!important;
    box-shadow:8px 0 28px rgba(15,23,42,.04)!important;
    padding:28px 18px 22px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
}

.sidebar-logo{
    display:flex!important;
    align-items:center!important;
    padding:0 8px 28px!important;
}

.sidebar-logo img{
    max-height:42px!important;
    width:auto!important;
}

.nav-label{
    display:none!important;
}

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

.custom-menu li{
    list-style:none!important;
    margin:4px 0!important;
}

.custom-menu li a{
    min-height:42px!important;
    padding:10px 12px!important;
    border-radius:12px!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    text-decoration:none!important;
    color:#667085!important;
    font-size:14px!important;
    font-weight:500!important;
    transition:.2s ease!important;
    position:relative!important;
}

.custom-menu li a:hover{
    background:rgba(129,78,255,.08)!important;
    color:#5b5ff5!important;
}

.custom-menu li.active > a{
    position:relative!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:#814eff!important;
    font-weight:700!important;
}

.custom-menu li.active > a::before{
    display:none!important;
    content:none!important;
}

.custom-menu li.active > a::after{
    content:""!important;
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    bottom:2px!important;
    height:3px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#8077ca,#814eff)!important;
    box-shadow:0 0 10px rgba(129,78,255,.24)!important;
}

.custom-menu li.active > a .menu-icon,
.custom-menu li.active > a span{
    color:#814eff!important;
}

.custom-menu li > a{
    transition:all .2s ease!important;
}

.custom-menu li:not(.active) > a:hover{
    background:rgba(129,78,255,.05)!important;
    border-radius:14px!important;
}

.menu-icon{
    width:20px!important;
    min-width:20px!important;
    text-align:center!important;
    font-size:16px!important;
    color:inherit!important;
}

.chevron{
    margin-left:auto!important;
    font-size:11px!important;
    opacity:.65!important;
}

.sidebar-section-label{
    margin:22px 8px 8px!important;
    font-size:11px!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
    color:#4f46e5!important;
}

.submenu{
    padding-left:14px!important;
    margin:4px 0 8px!important;
}

.submenu li a{
    min-height:36px!important;
    font-size:13px!important;
    padding:8px 12px!important;
    border-radius:10px!important;
}

.shiny-badge{
    margin-left:auto!important;
    border-radius:7px!important;
    padding:4px 7px!important;
    font-size:9px!important;
}

.fastlike-ai-widget{
    margin:26px 2px 0!important;
    border-radius:16px!important;
}

/* Dark Mode */
html.dark .app-sidebar{
    background:#141827!important;
    border-right:1px solid rgba(129,78,255,.16)!important;
    box-shadow:8px 0 28px rgba(0,0,0,.28)!important;
}

html.dark .custom-menu li a{
    color:rgba(255,255,255,.62)!important;
}

html.dark .custom-menu li a:hover{
    background:rgba(129,78,255,.12)!important;
    color:#b58cff!important;
}

html.dark .custom-menu li.active > a{
    background:linear-gradient(135deg,rgba(70,77,228,.22),rgba(129,78,255,.16))!important;
    color:#b58cff!important;
}

html.dark .sidebar-section-label{
    color:#b58cff!important;
}

html.dark .fastlike-ai-widget{
    background:linear-gradient(135deg,rgba(70,77,228,.16),rgba(129,78,255,.12))!important;
    border-color:rgba(129,78,255,.22)!important;
}

html.dark .fastlike-ai-desc{
    color:rgba(255,255,255,.68)!important;
}

/* Mobile */
@media(max-width:991px){
    .app-sidebar{
        width:280px!important;
        transform:translateX(-100%)!important;
        transition:.28s ease!important;
        z-index:99999!important;
    }

    body.sidebar-open .app-sidebar{
        transform:translateX(0)!important;
    }

    .sidebar-overlay{
        background:rgba(15,23,42,.55)!important;
        backdrop-filter:blur(4px)!important;
    }
    
}

.menu-section-title{
    margin:24px 10px 8px!important;
    font-size:11px!important;
    font-weight:500!important;
    letter-spacing:.05em!important;
    text-transform:uppercase!important;
    color: #7a7a7a !important;
    
    list-style:none!important;
    pointer-events:none!important;
}

.sidebar-new-badge{
    margin-left:auto!important;
    padding:3px 7px!important;
    border-radius:8px!important;
    background:linear-gradient(135deg,#464de4,#814eff)!important;
    color:#fff!important;
    font-size:9px!important;
    font-weight:800!important;
}

html.dark .menu-section-title{
    color:#a78bfa!important;
}

/* Smart Profit Planner สไตล์ป้ายวิ๊ง 2026 */
.shiny-badge {
    background: linear-gradient(135deg, #ff4e50, #f9d423); /* สีส้มทองเด่นๆ */
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(255, 78, 80, 0.3);
}

/* เอฟเฟกต์เงาวิ่ง (Glass Shine Animation) */
/* เอฟเฟกต์เงาวิ่งแบบเบา */

.shiny-badge::after{
content:'';
position:absolute;

top:0;
left:-120%;

width:50%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.75),
transparent
);

transform:skewX(-25deg);

animation:shine-loop 5.5s linear infinite;

will-change:transform;
pointer-events:none;
}

/* animation เบากว่าเดิม */

@keyframes shine-loop{

0%{
transform:translateX(0) skewX(-25deg);
opacity:0;
}

8%{
opacity:1;
}

18%{
transform:translateX(320%) skewX(-25deg);
opacity:1;
}

100%{
transform:translateX(320%) skewX(-25deg);
opacity:0;
}

}

/* ปรับให้เข้ากับธีม Active */
li.active .shiny-badge {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}


.app-sidebar{
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
}

.app-sidebar::-webkit-scrollbar{
    display:none!important;
    width:0!important;
}


/* คืนค่า Badge Service ID */

.select2-results__option .service-id,
.select2-results__option .label-id,
.select2-results__option .badge,
.select2-results__option [class*="service-id"],
.select2-results__option [class*="label"]{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    min-width:10px!important;
    height:25px!important;
    padding:0 12px!important;

    border-radius:5px!important;

    background:linear-gradient(
        135deg,
        #464de4,
        #814eff
    )!important;

    color:#ffffff!important;
    font-weight:600!important;
    font-size:11px!important;

    box-shadow:
        0 4px 12px rgba(70,77,228,.18)!important;
}


/* FIX SIDEBAR MINI MODE */
body.sidebar-mini .app-sidebar{
    width:86px!important;
    padding:24px 12px!important;
}

body.sidebar-mini .sidebar-logo{
    justify-content:center!important;
    padding:0 0 28px!important;
}

body.sidebar-mini .sidebar-logo img{
    max-width:46px!important;
    max-height:46px!important;
    object-fit:contain!important;
}

body.sidebar-mini .menu-section-title,
body.sidebar-mini .custom-menu li a span,
body.sidebar-mini .custom-menu li a .chevron,
body.sidebar-mini .shiny-badge,
body.sidebar-mini .sidebar-new-badge,
body.sidebar-mini .fastlike-ai-widget{
    display:none!important;
}

body.sidebar-mini .custom-menu li{
    margin:10px 0!important;
}

body.sidebar-mini .custom-menu li a{
    width:52px!important;
    height:52px!important;
    min-height:52px!important;
    padding:0!important;
    margin:0 auto!important;
    justify-content:center!important;
    border-radius:16px!important;
    gap:0!important;
}

body.sidebar-mini .custom-menu li.active > a{
    background:linear-gradient(135deg,rgba(70,77,228,.14),rgba(129,78,255,.16))!important;
}

body.sidebar-mini .custom-menu li.active > a::before{
    left:-13px!important;
    top:10px!important;
    bottom:10px!important;
}

body.sidebar-mini .menu-icon{
    width:auto!important;
    min-width:0!important;
    font-size:18px!important;
    margin:0!important;
}

body.sidebar-mini .submenu{
    display:none!important;
}





/* โลโก้ตอน Sidebar ย่อ */

body.sidebar-mini .sidebar-logo img{
    content:url("https://storage.perfectcdn.com/01526f/cnyt60tiotwjden6.png")!important;
    width:42px!important;
    height:42px!important;
    object-fit:contain!important;
}


html.dark .modal-content,
body.dark-mode .modal-content,
[data-theme="dark"] .modal-content{
    background:#0f172a!important;
    opacity:1!important;
    border:1px solid rgba(129,78,255,.35)!important;
}

html.dark .modal-body,
body.dark-mode .modal-body,
[data-theme="dark"] .modal-body{
    background:#0f172a!important;
    opacity:1!important;
}

html.dark .modal-footer,
body.dark-mode .modal-footer,
[data-theme="dark"] .modal-footer{
    background:#0f172a!important;
    opacity:1!important;
    border-top:1px solid rgba(129,78,255,.22)!important;
}

html.dark .modal-header,
body.dark-mode .modal-header,
[data-theme="dark"] .modal-header{
    border-bottom:1px solid rgba(129,78,255,.22)!important;
}

html.dark .modal-backdrop,
body.dark-mode .modal-backdrop,
[data-theme="dark"] .modal-backdrop{
    background:#020617!important;
    opacity:.78!important;
}


.well,
.well-float,
.table-responsive,
.table-order,
.table-order tbody{
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
}

/*================
   ตารางออเดอร์
================*/
@media screen and (min-width:481px){

    .table-order{
        border-spacing:0 10px!important;
        border-collapse:separate!important;
    }

    .table-order thead th{
        padding:10px 12px!important;
        font-size:12px!important;
        white-space:nowrap!important;
    }

    .table-order tbody tr{
        height:auto!important;
    }

    .table-order tbody td{
        padding:10px 12px!important;
        height:auto!important;
        vertical-align:middle!important;
        line-height:1.25!important;
    }

    .table-order tbody td:nth-child(1){
        padding-left:16px!important;
        width:105px!important;
    }

    .table-order tbody td:nth-child(2){
        width:165px!important;
        white-space:nowrap!important;
    }

    .table-order tbody td:nth-child(3){
        min-width:230px!important;
        max-width:260px!important;
        width:260px!important;
    }

    .table-order tbody td:nth-child(4){
        min-width:230px!important;
        max-width:260px!important;
        width:260px!important;
    }

    .table-order tbody td:nth-child(5){
        width:120px!important;
        text-align:center!important;
    }

    .table-order tbody td:nth-child(6){
        width:90px!important;
        text-align:center!important;
    }

    .table-order tbody td:nth-child(7){
        width:110px!important;
        text-align:center!important;
        padding-right:16px!important;
    }

    .table-order tbody td:nth-child(3) div,
    .table-order tbody td:nth-child(4) a{
        max-width:230px!important;
    }

    .badge-status-custom{
        padding:7px 14px!important;
        font-size:12px!important;
        border-radius:8px!important;
        white-space:nowrap!important;
    }

    .table-order tbody td:nth-child(7) .font-weight-bold{
        font-size:16px!important;
        line-height:1.2!important;
    }

    .table-order tbody td:nth-child(7) .text-muted{
        font-size:10px!important;
        margin-top:2px!important;
        line-height:1.3!important;
    }
}

@media screen and (min-width:481px){
    .order-action-icon{
        width:34px!important;
        height:34px!important;
        min-width:34px!important;
        border-radius:11px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        text-decoration:none!important;
        color:#fff!important;
        border:1px solid rgba(255,255,255,.10)!important;
        box-shadow:0 5px 14px rgba(15,23,42,.10)!important;
        transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
    }

    .order-action-icon:hover{
        transform:translateY(-1px)!important;
        filter:brightness(1.05)!important;
        box-shadow:0 8px 18px rgba(15,23,42,.14)!important;
    }

    .order-action-icon i{
        font-size:13px!important;
        color:#fff!important;
        line-height:1!important;
    }

    .action-refill{
        background:linear-gradient(135deg,#22c55e,#14b8a6)!important;
    }

    .action-cancel{
        background:linear-gradient(135deg,#ef4444,#f97316)!important;
    }

    .action-repeat{
        background:linear-gradient(135deg,#464de4,#814eff)!important;
    }

    html.dark .order-action-icon{
        box-shadow:0 6px 16px rgba(0,0,0,.28)!important;
        border-color:rgba(255,255,255,.08)!important;
    }
} 
  
  
@media screen and (max-width:480px){
    .well,
    .well-float,
    .table-responsive,
    .table-order,
    .table-order tbody{
        background:transparent!important;
        background-image:none!important;
        border:none!important;
        box-shadow:none!important;
    }

    .table-order{
        border-spacing:0!important;
    }

    .table-order tbody tr{
        background:var(--bg-card-gradient)!important;
        margin-bottom:12px!important;
        border:1px solid var(--border-color)!important;
        border-radius:12px!important;
        overflow:hidden!important;
    }

    .status-info-row{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
        gap:8px!important;
        margin:0 0 14px 0!important;
        padding:0!important;
        width:100%!important;
    }

    .status-info-row::before,
    .status-info-row::after{
        display:none!important;
        content:none!important;
    }

    .status-info-row > div{
        float:none!important;
        position:static!important;
        display:block!important;
        width:auto!important;
        max-width:none!important;
        min-width:0!important;
        flex:none!important;
        padding:0!important;
        margin:0!important;
    }

    .status-card{
        width:100%!important;
        height:100%!important;
        min-height:68px!important;
        padding:10px!important;
        border-radius:10px!important;
        box-sizing:border-box!important;
    }

    .status-card .font-weight-bold{
        font-size:11px!important;
        line-height:1.35!important;
    }

    .status-card .small{
        font-size:9px!important;
        line-height:1.35!important;
        margin-top:3px!important;
    }
    
    @media screen and (max-width:480px){
    .table-order tbody td:last-child{
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:8px!important;
        width:100%!important;
    }

    .order-actions{
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:7px!important;
        width:auto!important;
        z-index:5!important;
    }

    .order-action-icon{
        width:30px!important;
        height:30px!important;
        min-width:30px!important;
        padding:0!important;
        border-radius:10px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        color:#fff!important;
        text-decoration:none!important;
        border:1px solid rgba(255,255,255,.10)!important;
        box-shadow:0 5px 14px rgba(15,23,42,.12)!important;
    }

    .order-action-icon i{
        font-size:12px!important;
        color:#fff!important;
        margin:0!important;
    }

    .action-refill{
        background:linear-gradient(135deg,#22c55e,#14b8a6)!important;
    }

    .action-cancel{
        background:linear-gradient(135deg,#ef4444,#f97316)!important;
    }

    .action-repeat{
        background:linear-gradient(135deg,#464de4,#814eff)!important;
    }

    .table-order tbody td:last-child::after{
        right:0!important;
        top:8px!important;
    }
}