:root { --grid-color: #555555; --primary: #4a90e2; --bg-dark: #2c2e33; --donate: #ff4757; }
        * { box-sizing: border-box; }
        body { font-family: 'Sarabun', sans-serif; margin: 0; display: flex; flex-direction: row; height: 100vh; background-color: var(--bg-dark); overflow: hidden; }

        .mobile-header, .sidebar-overlay { display: none; }

        .sidebar { width: 380px; background: #f1f5f9; padding: 25px; box-shadow: 4px 0 15px rgba(0,0,0,0.4); overflow-y: auto; z-index: 30; display: flex; flex-direction: column; gap: 12px; transition: transform 0.3s ease; }
        .header-box { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; margin-bottom: 5px; }
        .sidebar h2 { margin: 0; color: var(--primary); font-size: 18px; }
        
        .header-right { display: flex; align-items: center; gap: 8px; }
        .lang-switch { display: flex; background: #f0f4f8; border-radius: 20px; overflow: hidden; border: 1px solid #ddd; cursor: pointer; }
        .lang-option { padding: 6px 10px; font-size: 11px; font-weight: bold; color: #888; transition: 0.3s; text-align: center; }
        .lang-option.active { background: var(--primary); color: white; }
        
        .donate-btn { background: var(--donate); color: white; border: none; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 5px rgba(255, 71, 87, 0.4); }
        .donate-btn:hover { background: #ff6b81; transform: scale(1.05); }

        .close-sidebar-btn { display: none; background: none; border: none; font-size: 20px; cursor: pointer; color: #888; }
        .group { display: flex; flex-direction: column; gap: 4px; }
        .group label { font-weight: 600; font-size: 13px; color: #555; }
        
        .select2-container--default .select2-selection--single { height: 38px; border-radius: 6px; border: 1px solid #ccc; padding: 4px; font-family: inherit; font-size: 14px; }
        .select2-container { width: 100% !important; }
        .control { padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; font-family: inherit; width: 100%; transition: 0.2s; }
        .control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); }
        .row-flex { display: flex; gap: 10px; }
        
        .btn { padding: 12px; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: bold; transition: 0.3s; margin-top: 5px; flex: 1; text-align: center; display: flex; justify-content: center; align-items: center; }
        .btn-primary { background: var(--primary); }
        .btn-primary:hover { background: #357abd; }
        .btn-success { background: #28a745; }
        .btn-success:hover { background: #218838; }
        .btn-danger { background: #ff4d4d; }

        .preview { flex: 1; padding: 20px; overflow: auto; display: flex; flex-direction: column; align-items: center; position: relative; }
        
        #all-pages {
            zoom: var(--zoom-level, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            width: max-content;
            margin: 0 auto;
        }

        .page-a4 { 
            background: white; width: 210mm; height: 296mm; padding: 15mm; margin-bottom: 20px;
            box-shadow: 0 0 15px rgba(0,0,0,0.5); display: flex; flex-direction: column;
            position: relative; flex-shrink: 0; overflow: hidden;
        }
        .page-legend { margin-top: auto; text-align: center; font-size: 12px; color: #777; padding-top: 10px; border-top: 1px dashed #eee; width: 100%; }

        .zoom-controls { position: fixed; bottom: 25px; right: 25px; z-index: 40; display: flex; flex-direction: column; gap: 10px; }
        .zoom-btn { width: 45px; height: 45px; border-radius: 50%; background: white; color: var(--primary); border: 2px solid var(--primary); box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-size: 20px; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; }
        .zoom-btn:hover { background: var(--primary); color: white; transform: scale(1.1); }

        .grid-container { display: grid; justify-content: center; align-content: start; width: max-content; margin: 0 auto; }
        .cell-unit { display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box; }
        

        .layout-spaced .main-box { border: var(--grid-weight, 2px) solid var(--grid-color); border-radius: 4px; }
        .layout-spaced .pinyin-box { border: 1px solid var(--grid-color); margin-bottom: 4px; border-radius: 4px; }
        .layout-spaced .meaning-box { border: 1px dashed var(--grid-color); margin-top: 4px; border-radius: 4px; }
        
        .layout-connected { border-top: var(--grid-weight, 2px) solid var(--grid-color); border-left: var(--grid-weight, 2px) solid var(--grid-color); }
        .layout-connected .cell-unit { border-right: var(--grid-weight, 2px) solid var(--grid-color); border-bottom: var(--grid-weight, 2px) solid var(--grid-color); }
        .layout-connected .main-box { border: none !important; }
        .layout-connected .pinyin-box { border: none !important; border-bottom: 1px dashed var(--grid-color); margin-bottom: 0 !important; border-radius: 0; }
        .layout-connected .meaning-box { border: none !important; border-top: 1px dashed var(--grid-color); margin-top: 0 !important; border-radius: 0; }
        
        .layout-stripes .cell-unit { border-top: var(--grid-weight, 2px) solid var(--grid-color); border-bottom: var(--grid-weight, 2px) solid var(--grid-color); border-right: var(--grid-weight, 2px) solid var(--grid-color); }
        .layout-stripes .main-box { border: none !important; }
        .layout-stripes .pinyin-box { border: none !important; border-bottom: 1px dashed var(--grid-color); margin-bottom: 0 !important; border-radius: 0; }
        .layout-stripes .meaning-box { border: none !important; border-top: 1px dashed var(--grid-color); margin-top: 0 !important; border-radius: 0; }
        
        .layout-stripes-vert { border-top: var(--grid-weight, 2px) solid var(--grid-color); }
        .layout-stripes-vert .cell-unit { border-bottom: var(--grid-weight, 2px) solid var(--grid-color); border-left: var(--grid-weight, 2px) solid var(--grid-color); border-right: var(--grid-weight, 2px) solid var(--grid-color); margin-left: calc(-1 * var(--grid-weight, 2px)); }
        .layout-stripes-vert .main-box { border: none !important; }
        .layout-stripes-vert .pinyin-box { border: none !important; border-bottom: 1px dashed var(--grid-color); margin-bottom: 0 !important; border-radius: 0; }
        .layout-stripes-vert .meaning-box { border: none !important; border-top: 1px dashed var(--grid-color); margin-top: 0 !important; border-radius: 0; }
        .pinyin-box { width: 100%; height: 22px; display: none; align-items: center; justify-content: center; font-size: 12px; font-family: 'Arial', sans-serif; color: #555; box-sizing: border-box; }
        .show-pinyin .pinyin-box { display: flex; }
        .vowel-highlight { background-color: #e0e0e0; color: #000; font-weight: bold; padding: 0 4px; border-radius: 3px; }
        
        .meaning-box { width: 100%; height: 26px; display: none; align-items: center; justify-content: center; font-size: 10px; color: #d97706; box-sizing: border-box; overflow: hidden; text-align: center; line-height: 1.1; padding: 0 2px; }
        .show-meaning .meaning-box { display: flex; }
        .meaning-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }

        .main-box { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; box-sizing: border-box; }
        .main-box span { position: relative; z-index: 1; pointer-events: none; line-height: 1; text-align: center; }

        /* สไตล์ของตัวอักษรแต่ละประเภท */
        .text-light { color: #d3d3d3; }
        .text-solid { color: #333333; }
        .text-outline { color: transparent; -webkit-text-stroke: 1px #aaaaaa; }

        /* --- Modal Donate Styles --- */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 100; display: none; justify-content: center; align-items: center; opacity: 0; transition: 0.3s; backdrop-filter: blur(3px); }
        .modal-overlay.show { display: flex; opacity: 1; }
        .modal-content { background: white; width: 90%; max-width: 400px; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.2); transform: translateY(-20px); transition: 0.3s; }
        .modal-overlay.show .modal-content { transform: translateY(0); }
        .modal-header { background: #f8f9fa; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
        .modal-header h3 { margin: 0; font-size: 18px; color: #333; display: flex; align-items: center; gap: 8px; }
        .close-modal { background: #eee; border: none; font-size: 16px; cursor: pointer; color: #555; width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: 0.2s; }
        .close-modal:hover { background: #ff4d4d; color: white; }
        
        .modal-tabs { display: flex; border-bottom: 1px solid #eee; background: #fafafa; }
        .tab-btn { flex: 1; padding: 12px 0; border: none; background: none; cursor: pointer; font-size: 13px; font-weight: bold; color: #777; transition: 0.2s; border-bottom: 2px solid transparent; outline: none; }
        .tab-btn:hover { color: var(--primary); }
        .tab-btn.active { color: var(--primary); border-bottom: 2px solid var(--primary); background: white; }
        .tab-pane { display: none; padding: 25px 20px; text-align: center; }
        /* .tab-pane.active { display: block; animation: fadeIn 0.15s; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } */
        .tab-pane.active { display: block; }
        .bank-item { display: flex; align-items: center; padding: 12px; border: 1px solid #eee; border-radius: 10px; margin-bottom: 10px; text-align: left; background: white; transition: 0.2s; justify-content: space-between; }
        .bank-item:hover { border-color: #ddd; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        .bank-logo-wrap { display: flex; align-items: center; gap: 12px; flex: 1; }
        .bank-img { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.05); padding: 2px; }
        .bank-info div { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 2px; }
        .bank-info .acc-name { font-size: 12px; color: #777; font-weight: normal; margin-bottom: 4px; }
        .bank-info span { font-size: 14px; color: var(--primary); font-family: monospace; font-weight: bold; background: #f0f4f8; padding: 2px 6px; border-radius: 4px; }
        .copy-btn { background: #f1f5f9; border: 1px solid #cbd5e1; color: #475569; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 4px; }
        .copy-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }
        .qr-placeholder { width: 220px; height: 220px; background: white; border: 2px solid #eee; margin: 0 auto 10px auto; display: flex; justify-content: center; align-items: center; border-radius: 12px; overflow: hidden; padding: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        .qr-placeholder img { width: 100%; height: 100%; object-fit: contain; }

        .toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-50px); background: #333; color: white; padding: 10px 20px; border-radius: 30px; font-size: 14px; font-weight: bold; opacity: 0; transition: 0.3s; z-index: 1000; pointer-events: none; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
        .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

        @media (max-width: 768px) {
            body { flex-direction: column; }
            .mobile-header { display: flex; justify-content: space-between; align-items: center; background: white; padding: 10px 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; z-index: 20; }
            .mobile-header h2 { margin: 0; font-size: 18px; color: var(--primary); }
            .hamburger { background: none; border: none; font-size: 24px; color: #333; cursor: pointer; padding: 0; }
            .sidebar .header-box { display: none; }
            .close-sidebar-btn { display: block; position: absolute; right: 15px; top: 15px; }
            .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 320px; max-width: 85vw; transform: translateX(-100%); padding-top: 45px; }
            .sidebar.open { transform: translateX(0); }
            .sidebar-overlay { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 25; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
            .sidebar-overlay.open { opacity: 1; pointer-events: auto; }
            .preview { padding: 15px; height: calc(100vh - 55px); }
            .zoom-controls { bottom: 15px; right: 15px; }
            .sidebar-actions .row-flex {
                flex-direction: column !important;
                gap: 8px;
                margin-bottom: 8px !important;
            }
            .sidebar-actions .btn {
                width: 100% !important;
                margin: 0 !important;
                height: 45px !important;
            }

            /* 2. บังคับให้กล่องที่หุ้มปุ่ม Preset ยอมให้ปุ่มเรียงซ้อนกัน (Wrap) */
            .sidebar-section .row-flex {
                flex-wrap: wrap !important;
            }

            /* 3. บังคับปุ่มจัดการ Preset ทุกปุ่มให้กินพื้นที่ 100% และสูงเท่ากันหมด */
            .btn-preset-save, 
            .btn-preset-delete, 
            .btn-preset-action,
            .btn-preset-export,
            .btn-preset-import {
                flex: 0 0 100% !important; /* บังคับกินพื้นที่ 100% */
                max-width: 100% !important; /* ห้ามกว้าง/หดเกินนี้ */
                width: 100% !important;
                height: 45px !important; 
                margin: 0 !important; /* เคลียร์ระยะขอบที่กวนกันออก */
            }
        }

        /* --- Print Styles --- */
        @media print {
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
            body { background: white !important; display: block; overflow: visible; }
            
            /* ซ่อนส่วนที่ไม่เกี่ยวข้อง */
            .sidebar, .mobile-header, .sidebar-overlay, .zoom-controls, .toast, .sidebar-divider, .sidebar-actions, .credit-box { 
                display: none !important; 
            }

            /* ปลดล็อกความกว้าง container ให้ขยายตามเนื้อหา */
            .preview { 
                padding: 0 !important; 
                margin: 0 !important; 
                width: 100% !important; 
                display: block !important;
                overflow: visible !important;
            }

            #all-pages { 
                zoom: 1 !important; 
                transform: none !important; 
                margin: 0 !important; 
                width: 100% !important;
            }

            /* ตั้งค่าหน้ากระดาษ */
            .page-a4, .page-b5 { 
                box-shadow: none !important; 
                margin: 0 !important; 
                border: none !important; 
                page-break-after: always !important; 
                flex-shrink: 0;
            }
        }

        .pdf-exporting body { background: white; flex-direction: column; }
        .pdf-exporting .sidebar, .pdf-exporting .mobile-header, .pdf-exporting .sidebar-overlay, .pdf-exporting .zoom-controls { display: none !important; }
        /* .pdf-exporting .preview { padding: 0 !important; margin: 0 auto; width: 210mm; overflow: hidden; height: auto; } */
        .pdf-exporting .preview { padding: 0 !important; margin: 0 auto; width: max-content !important; overflow: visible !important; height: auto; }
        .pdf-exporting #all-pages { zoom: 1 !important; transform: none !important; margin: 0 auto !important; }
        /* .pdf-exporting .page-a4 { margin: 0 !important; box-shadow: none !important; border: none !important; page-break-after: always; } */
        .pdf-exporting .page-a4, .pdf-exporting .page-b5 { margin: 0 !important; box-shadow: none !important; border: none !important; page-break-after: always; }



         .credit-box { text-align: center; margin-top: 10px; font-size: 11px; color: #888; border-top: 1px solid #eee; padding-top: 15px; } 
        /* เอาเส้นขอบเดิมของ credit-box ออก จะได้ไม่ซ้อนกัน */
        .credit-box {
            border-top: none !important;
            padding-top: 5px !important;
        }
        .credit-box a { color: var(--primary); text-decoration: none; font-weight: bold; }
        /* --- Header Info on Paper --- */
        .paper-header-info {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            width: 100%;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 2px solid #555;
            font-family: 'Sarabun', sans-serif;
        }
        .paper-header-title { font-size: 22px; font-weight: bold; color: #333; }
        .paper-header-details { font-size: 14px; color: #333; display: flex; gap: 15px; }

        /* --- Loading Overlay --- */
        .loading-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.8); z-index: 9999;
            display: none; flex-direction: column; justify-content: center; align-items: center;
            backdrop-filter: blur(5px);
        }
        .spinner {
            width: 50px; height: 50px;
            border: 5px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: var(--primary);
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        /* --- Sidebar Section Cards --- */
        .sidebar-section {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 5px;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: all 0.3s ease;
        }
        /* ตั้งค่าหัวข้อ และจัดตำแหน่งลูกศรให้อยู่ขวาสุด */
        .sidebar-section-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--primary);
            margin: 0 0 5px 0;
            display: flex;
            justify-content: space-between; /* ดันลูกศรไปขวาสุด */
            align-items: center;
            border-bottom: 2px dashed #e2e8f0;
            padding-bottom: 8px;
            cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็นรูปมือ */
            user-select: none;
        }
        .sidebar-section-title .toggle-icon {
            font-size: 12px;
            color: #94a3b8;
            transition: transform 0.3s ease;
        }

        /* --- สถานะตอนพับเก็บ (Collapsed) --- */
        .sidebar-section.collapsed > *:not(.sidebar-section-title) {
            display: none !important; /* ซ่อนเนื้อหาข้างในทั้งหมด */
        }
        .sidebar-section.collapsed .sidebar-section-title {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
            color: #64748b; /* เปลี่ยนสีหัวข้อให้อ่อนลงเวลาพับ */
        }
        .sidebar-section.collapsed .sidebar-section-title .toggle-icon {
            transform: rotate(-90deg); /* หมุนลูกศรชี้ไปทางขวา */
        }
        .sidebar-actions { background: transparent; border: none; box-shadow: none; padding: 0; margin-top: 5px; }
        /* --- Sidebar Divider (เส้นคั่นเมนู) --- */
        /* เส้นคั่น */
        .sidebar-divider { border: 0; border-top: 2px dashed #cbd5e1; margin: 15px 0; width: 100%; }

        /* ขนาดกระดาษต่างๆ */
        .page-a4 { width: 210mm; height: 296mm; }
        .page-a4.landscape { width: 297mm; height: 209mm; }
        .page-b5 { width: 176mm; height: 250mm; }
        .page-b5.landscape { width: 250mm; height: 175mm; }

        /* เลขหน้า */
        .page-numbering {
            position: absolute; bottom: 10mm; right: 15mm;
            font-size: 10px; color: #999; font-family: 'Sarabun', sans-serif;
        }

        /* ปรับปรุง CSS ของ Cell ให้รองรับ Opacity */
        .main-box span, .main-box svg { transition: opacity 0.2s; }
        /* --- Modern Checkbox Labels --- */
        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 14px;
            color: #334155;
            padding: 10px 12px;
            border-radius: 8px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            transition: all 0.2s ease;
            margin-bottom: 2px;
        }
        .checkbox-label:hover {
            background: #f1f5f9;
            border-color: #cbd5e1;
        }
        .checkbox-label input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
            cursor: pointer;
            margin: 0;
        }
        /* --- Preset Action Buttons --- */
        .btn-preset-save { 
            background: #3b82f6; color: white; font-size: 12px; padding: 8px; border-radius: 6px; 
            border: none; cursor: pointer; transition: 0.2s; font-weight: bold; 
            margin-top: -5px; width: 100%; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); 
        }
        .btn-preset-save:hover { background: #2563eb; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(59, 130, 246, 0.4); }

        .btn-preset-action { 
            color: white; font-size: 11px; padding: 8px; border-radius: 6px; 
            border: none; cursor: pointer; transition: 0.2s; font-weight: bold; flex: 1; 
            display: flex; justify-content: center; align-items: center; gap: 4px; 
        }
        .btn-preset-export { background: #8b5cf6; box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3); }
        .btn-preset-export:hover { background: #7c3aed; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(139, 92, 246, 0.4); }

        .btn-preset-import { background: #10b981; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3); }
        .btn-preset-import:hover { background: #059669; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(16, 185, 129, 0.4); }
    
        /* --- Preset Action Buttons (ปุ่มบันทึก/ลบ/ส่งออก) --- */
        .btn-preset-save { 
            background: #3b82f6; color: white; font-size: 13px; border-radius: 6px; 
            border: none; cursor: pointer; transition: 0.2s; font-weight: bold; 
            box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); 
            flex: 1; display: flex; justify-content: center; align-items: center; height: 38px;
        }
        .btn-preset-save:hover { background: #2563eb; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(59, 130, 246, 0.4); }

        .btn-preset-delete {
            background: #ef4444; color: white; font-size: 13px; border-radius: 6px; 
            border: none; cursor: pointer; transition: 0.2s; font-weight: bold; 
            flex: 0 0 60px; display: flex; justify-content: center; align-items: center; height: 38px;
            box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
        }
        .btn-preset-delete:hover { background: #dc2626; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(239, 68, 68, 0.4); }

        .btn-preset-action { 
            color: white; font-size: 12px; border-radius: 6px; 
            border: none; cursor: pointer; transition: 0.2s; font-weight: bold; flex: 1; 
            display: flex; justify-content: center; align-items: center; gap: 4px; height: 36px;
        }
        .btn-preset-export { background: #8b5cf6; box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3); }
        .btn-preset-export:hover { background: #7c3aed; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(139, 92, 246, 0.4); }

        .btn-preset-import { background: #10b981; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3); }
        .btn-preset-import:hover { background: #059669; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(16, 185, 129, 0.4); }


        /* --- ปรับแต่ง Dropdown (Select2) ให้ดูมินิมอลและเป็นสากล --- */
        .select2-results__option {
            font-size: 14px !important;
            color: #333 !important;
            padding: 8px 12px !important;
            border-bottom: none !important; /* เอาเส้นคั่นที่ดูรกตาออก */
        }
        .select2-results__option--highlighted[aria-selected] {
            background-color: #3b82f6 !important; /* โฮเวอร์เป็นสีฟ้าแบบมาตรฐานสากล */
            color: #fff !important;
            font-weight: normal !important;
        }
        .select2-results__group {
            background-color: #fff !important; /* พื้นหลังสีขาวสะอาดตา */
            color: #9ca3af !important; /* หัวข้อสีเทาอ่อน ไม่แย่งความสนใจ */
            font-weight: bold !important;
            font-size: 12px !important;
            padding: 10px 12px 4px 12px !important;
            border-bottom: none !important;
            text-transform: uppercase; /* ทำให้ตัวอักษรภาษาอังกฤษในกลุ่มเป็นพิมพ์ใหญ่ */
            letter-spacing: 0.5px;
        }


        /* --- บังคับให้ปุ่มบันทึกและปุ่มลบสูงเท่ากันและอยู่ในระนาบเดียวกัน --- */
        .row-flex { align-items: center; } /* บังคับให้อยู่กึ่งกลางแนวแกน Y */

        .btn-preset-save, .btn-preset-delete {
            margin-top: 0 !important; /* ลบล้าง margin-top ของเก่าที่ทำให้ปุ่มเบี้ยว */
            height: 38px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-sizing: border-box !important;
            padding: 0 10px !important;
        }

        .btn-preset-save {
            flex: 1 !important;
        }

        .btn-preset-delete {
            flex: 0 0 60px !important;
        }
        .btn-secondary { background: #94a3b8; }
        .btn-secondary:hover { background: #64748b; }