:root {

    --green-border: #4CAF50; /* สีเขียวหลักสำหรับขอบ */

    --green-text: #4CAF50; /* สีเขียวหลักสำหรับข้อความ */

    --light-green-bg: #F0FFF0; /* สีเขียวอ่อนสำหรับพื้นหลัง */

}



.styled-dropdown {

    /* รีเซ็ตลักษณะเริ่มต้นของ Dropdown */

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    /* การจัดรูปแบบปุ่มให้คล้ายกับรูปภาพ */

    display: inline-block;

    padding: 8px 40px 8px 20px; /* เพิ่ม padding ขวาให้มีที่ว่างสำหรับลูกศร */

    width: auto;

    cursor: pointer;

    font-size: 16px;

    font-weight: 500;

    text-align: left;

    line-height: 1.5;

    /* สีและขอบตามรูปภาพ */

    color: var(--green-text);

    background-color: white; /* พื้นหลังสีขาวตามตัวอย่าง */

    border: 1px solid var(--green-border);

    border-radius: 4px !important; /* มุมโค้งมนเล็กน้อย */

    /* เพิ่ม Transition เพื่อให้เกิดความสวยงามเมื่อ Hover */

    transition: all 0.3s ease;

    /* ตำแหน่งที่ใช้ในการวางลูกศร (Relative positioning) */

    position: relative;

    /* ลบขอบเขตของ Focus ออกไปเพื่อใช้ Box Shadow แทน */

    outline: none;

    width: 100%;

}



    /* สไตล์เมื่อนำเมาส์ไปชี้ (Hover) */

    .styled-dropdown:hover {

        background-color: var(--light-green-bg); /* เปลี่ยนพื้นหลังเป็นเขียวอ่อนเมื่อชี้ */

        box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* เพิ่มเงาให้ดูเด่นขึ้น */

    }



/* ---------------------------------------------------- */

/* การเพิ่มลูกศรลงที่กำหนดเอง (Custom Dropdown Arrow)  */

/* ---------------------------------------------------- */



.styled-dropdown {

    /* ใช้ Background Image เป็นวิธีที่ดีที่สุดสำหรับ Cross-Browser */

    /* หรือใช้โค้ดด้านล่างเพื่อเพิ่มลูกศรด้วย CSS Pseudo-element (ต้องใช้กับ Tag อื่นที่ไม่ใช่ <select> โดยตรง) */

}



/* เนื่องจาก DropdownList/Select Tag ไม่รองรับ ::after/::before ได้ดี

   เราจะใช้การวางภาพพื้นหลัง (Background Image) เพื่อสร้างลูกศรสีเขียว */

.styled-dropdown {

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234CAF50'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: right 10px center; /* วางลูกศรไว้ทางขวา ห่าง 10px */

    background-size: 16px; /* ขนาดลูกศร */

}



    /* แก้ไขเฉพาะ Internet Explorer (IE) */

    .styled-dropdown::-ms-expand {

        display: none;

    }





/* 1. ตัวแปรสีเดิมของคุณ */

:root {

    --green-border: #4CAF50;

    --green-text: #4CAF50;

    --light-green-bg: #F0FFF0;

}



/* ---------------------------------------------------- */

/* ปรับแต่งตัวกล่อง Select2 (State ปกติ) */

/* ---------------------------------------------------- */



/* กรอบหลัก */

.select2-container--default .select2-selection--single {

    background-color: white;

    border: 1px solid var(--green-border) !important; /* บังคับใช้สีเขียว */

    border-radius: 4px;

    height: auto !important; /* ปล่อยความสูงอิสระตาม padding */

    padding: 6px 0; /* padding บนล่าง (ซ้ายขวาจะถูกจัดการโดย element ลูก) */

    outline: none;

    transition: all 0.3s ease;

    /* ใส่ลูกศร SVG ของคุณ */

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234CAF50'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: right 10px center;

    background-size: 16px;

}



    /* ข้อความข้างใน */

    .select2-container--default .select2-selection--single .select2-selection__rendered {

        color: var(--green-text) !important;

        font-size: 16px;

        font-weight: 500;

        line-height: 1.5 !important;

        padding-left: 20px; /* ระยะห่างจากซ้าย */

        padding-right: 40px; /* เว้นที่ทางขวาให้ลูกศร */

    }



    /* ---------------------------------------------------- */

    /* ซ่อนลูกศรเดิมของ Select2 (เพราะเราใช้ SVG แล้ว) */

    /* ---------------------------------------------------- */

    .select2-container--default .select2-selection--single .select2-selection__arrow {

        display: none;

    }



    .select2-container--default .select2-selection--single .select2-selection__rendered {

        text-align: left !important;

        padding-left: 15px !important; /* ระยะห่างจากขอบซ้าย */

    }



    /* ---------------------------------------------------- */

    /* เอฟเฟกต์ตอน Hover และ Focus */

    /* ---------------------------------------------------- */

    .select2-container--default .select2-selection--single:hover,

    .select2-container--open .select2-selection--single {

        background-color: var(--light-green-bg);

        box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);

    }



/* ---------------------------------------------------- */

/* ปรับแต่งตัวรายการที่ Drop ลงมา (Dropdown List) */

/* ---------------------------------------------------- */



/* กรอบของรายการที่ตกลงมา */

.select2-dropdown {

    border: 1px solid var(--green-border) !important;

    border-radius: 4px;

    overflow: hidden;

}



/* ช่องค้นหา (Search Box) ด้านใน */

.select2-search__field {

    border: 1px solid #ddd !important;

    border-radius: 4px;

}



    .select2-search__field:focus {

        border-color: var(--green-border) !important;

    }



/* รายการแต่ละตัว (Options) */

.select2-results__option {

    padding: 8px 20px;

    color: #333;

}



/* รายการที่ถูก Highlight (ตอนเอาเมาส์ชี้) */

.select2-container--default .select2-results__option--highlighted[aria-selected] {

    background-color: var(--light-green-bg) !important;

    color: var(--green-text) !important;

}



/* รายการที่ถูกเลือกอยู่แล้ว */

.select2-container--default .select2-results__option[aria-selected=true] {

    background-color: #e8f5e9 !important; /* เขียวจางๆ */

}