.region-container {
            width: 300px;
            background-color: transparent;
            border-radius: 30px;
            text-align: center;
            border: 2px solid #E4E7EC;
        }

        .region-header {
            background-color: #ff6f3d;
            color: white;
            padding: 10px;
            border-radius: 50px;
            font-weight: bold;
        }

        .region-list {
            text-align: start;
            padding: 0;
        }

        .region-list-en {
            color: #B9B9B9;
            font-size: 14px !important;
        }

        .region-list li {
            margin-bottom: 5px;
            font-size: 16px;
        }

        /* CSS (สำหรับหมุดและแผนที่) */
        .map-container {
            position: relative;
            width: 100%;
            max-width: 500px;
            /* กำหนดขนาดของแผนที่ */
            margin: 0 auto;
        }

        .map {
            width: 100%;
            display: block;
        }

        .pin {
            position: absolute;
            width: 24px;
            height: 24px;
            background-color: #21B6A0;
            /* สีส้มสด */
            border-radius: 50% 50% 0 50%;
            /* ทำให้เป็นหมุดแบบปัก */
            transform: translate(-50%, -200px) rotate(45deg);
            /* เริ่มต้นหมุนเล็กน้อย */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            /* เพิ่มเงา */
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .pin::after {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: white;
            border-radius: 50%;
            top: 6px;
            left: 6px;
        }

        .pin.active {
            opacity: 1;
            animation: drop 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
        }

        /* Keyframes สำหรับอนิเมชัน */
        @keyframes drop {
            0% {
                transform: translate(-50%, -200px) rotate(45deg);
                /* เริ่มจากตำแหน่งด้านบนและหมุนเล็กน้อย */
            }

            70% {
                transform: translate(-50%, 10px) rotate(45deg);
                /* พุ่งลงมาเกินไปเล็กน้อย */
            }

            100% {
                transform: translate(-50%, -50%) rotate(45deg);
                /* เข้าสู่ตำแหน่งที่ถูกต้อง */
            }
        }

        /* lg */
@media (min-width: 992px) and (max-width: 1199px) {
    .region-container {
        width: 100%;
        background-color: transparent;
        border-radius: 30px;
        text-align: center;
        border: 2px solid #E4E7EC;
    }
}

/* md */
@media (min-width: 768px) and (max-width: 991px) {
    .region-container {
        width: 100%;
        background-color: transparent;
        border-radius: 30px;
        text-align: center;
        border: 2px solid #E4E7EC;
    }
}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {
    .region-container {
        width: 100%;
        background-color: transparent;
        border-radius: 30px;
        text-align: center;
        border: 2px solid #E4E7EC;
    }
}

/* xs */
@media (max-width: 575.98px) {
    .region-container {
        width: 100%;
        background-color: transparent;
        border-radius: 30px;
        text-align: center;
        border: 2px solid #E4E7EC;
    }
}