:root {
            --spacing-smaller: 7px;
            --spacing-small: 7px;
            --spacing-medium: 7px;
            --spacing-large: 12px;
            --font-size: 16px;
            --font-size-large: 16px;
            --font-size-larger: 16px;
            --line-height: 20px;
            --line-height-larger: 20px;
            --primary-color: #0d6efd; /* เปลี่ยนเป็นสีน้ำเงิน Bootstrap */
            --text-color-dark: #212529;
            --text-color: #585858;
            --text-color-light: #65727e;
            --border-color: #bebebe;
            --border-color-light: #f1f3f5;
            --input-placeholder: #65727e;
            --input-background: #fff;
            --input-border: #dee2e6;
            --input-border-active: #0d6efd;
            --input-border-invalid: #e44e4e;
            --input-outline-invalid: rgba(219, 138, 138, 0.5);
            --input-color: #495057;
            --input-disabled: #f7f7f7;
            --input-min-height: 45px;
            --options-height: 40dvh;
            --option-background: #f3f4f7;
            --border-radius: 5px;
            --icon-size: 12px;
            --icon-space: 30px;
            --checkbox-size: 18px;
            --checkbox-radius: 4px;
            --checkbox-border: #ced4da;
            --checkbox-background: #fff;
            --checkbox-active: #fff;
            --checkbox-thickness: 2px;
        }

        .multi-select {
            display: flex;
            box-sizing: border-box;
            flex-direction: column;
            position: relative;
            width: 100%;
            user-select: none;
        }

        .multi-select .multi-select-header {
            display: flex;
            align-items: center;
            border: 1px solid var(--input-border);
            border-radius: var(--border-radius);
            padding: var(--spacing-medium) var(--spacing-large);
            padding-right: var(--icon-space);
            overflow: hidden;
            gap: var(--spacing-medium);
            min-height: var(--input-min-height);
            background: #fff;
            cursor: pointer;
        }

        .multi-select .multi-select-header::after {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba3' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
            height: var(--icon-size);
            width: var(--icon-size);
            background-repeat: no-repeat;
            transition: transform 0.2s;
        }

        .multi-select .multi-select-header.multi-select-header-active {
            border-color: var(--input-border-active);
            box-shadow: 0 0 0 0.25 red rgba(13, 110, 253, 0.25);
        }

        .multi-select .multi-select-header.multi-select-header-active::after {
            transform: translateY(-50%) rotate(180deg);
        }

        .multi-select .multi-select-header.multi-select-header-active + .multi-select-options {
            display: flex;
        }

        .multi-select .multi-select-header .multi-select-header-option {
            display: inline-flex;
            align-items: center;
            background-color: var(--option-background);
            font-size: var(--font-size);
            padding: 2px 8px;
            border-radius: 4px;
            margin-right: 4px;
        }

        .multi-select .multi-select-options {
            display: none;
            box-sizing: border-box;
            flex-direction: column;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 999;
            margin-top: 5px;
            padding: 5px;
            background-color: #fff;
            border-radius: var(--border-radius);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            max-height: var(--options-height);
            overflow-y: auto;
        }

        .multi-select .multi-select-options .multi-select-option,
        .multi-select .multi-select-options .multi-select-all {
            display: flex;
            align-items: center;
            padding: 10px var(--spacing-large);
            cursor: pointer;
            border-radius: var(--border-radius);
        }

        .multi-select .multi-select-options .multi-select-option:hover,
        .multi-select .multi-select-options .multi-select-all:hover {
            background-color: var(--option-background);
        }

        /* ส่วนของ Checkbox */
        .multi-select .multi-select-option-radio {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--checkbox-background);
            margin-right: 12px;
            height: var(--checkbox-size);
            width: var(--checkbox-size);
            border: 1px solid var(--checkbox-border);
            border-radius: var(--checkbox-radius);
            flex-shrink: 0;
            position: relative;
        }

        /* เมื่อถูกเลือก */
        .multi-select-selected .multi-select-option-radio {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
        }

        /* เครื่องหมายถูก (After) - ปรับปรุงการจัดวางกลาง */
        .multi-select-selected .multi-select-option-radio::after {
            content: "";
            display: block;
            width: 5px;
            height: 9px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            margin-top: -2px; /* ขยับขึ้นเล็กน้อยเพื่อให้ดูสมดุล */
        }

        .multi-select .multi-select-search {
            padding: 8px;
            border: 1px solid var(--input-border);
            border-radius: var(--border-radius);
            margin: 5px;
            outline: none;
        }