.box-about
    {
        width: 100%;
        margin: 0  auto;
        text-align: center;
        justify-items: center;        
    }
    
    .habouts{
        padding: 10px;
        h1{font-size: 2rem;}}

    .contents{
                max-width: 1170px;
                margin: 0 auto;
                padding: 20px;
                border-radius: 20px;
                background: #e0e0e085;
                box-shadow:  20px 20px 32px #bebebe,
                      -20px -20px 32px #ffffff;}

        h1{ text-align: justify;
            text-justify: inter-word; /* ช่วยให้การเว้นวรรคดูเป็นธรรมชาติขึ้น */
            font-family: "Prompt", sans-serif;
            font-style: normal;
            font-size: 18px;}
    

    .about
    {             
        width: 100%;               
        background-color: rgba(24, 82, 136, 0.342);
        /* border-radius: 30px; */
        justify-items: center;
        
    }

.invisible
    {   display: flex;
        flex-wrap: wrap;
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        gap: 30px;
        padding: 30px;
        box-sizing: border-box;}

.invisible > div { 
    flex: 1 1 350px; /* จังหวะหน้าจอกว้าง จะพยายามแบ่งคอลัมน์ */}

/* ✨ ส่วนที่เพิ่ม: เมื่อจอแคบกว่า 400px ให้ซ้อนกันเป็น 3 แถว */


@media (max-width: 400px) {
    .invisible > div {
        flex: 1 1 100%; /* บังคับกว้างเต็มจอทุกลูก */
    }
    
    .invisible {
        padding: 15px; /* (ทางเลือก) ลด padding ลงหน่อยเพื่อให้เนื้อหาบนมือถือไม่ดูแคบไป */
        gap: 20px;     /* (ทางเลือก) ลดระยะห่างระหว่างแถวลงเล็กน้อย */
    }
}
    .box
    {   
        width: 100%;
        height: 100%; /* สำคัญ: ไม่ให้ล้น */
        box-sizing: border-box; /* สำคัญ: padding ไม่ทำล้น */
        /* background-color: #ffffff9c; */
        padding: 10px;
        /* border: 2px solid #ccc; */
        /* border-radius: 30px; */
        /* text-align: left; */
        object-fit: contain;

        font-family: "Prompt", sans-serif;
        font-style: normal;
        
                   
        img
        {   width: 100%;
            margin: 0 auto;
            object-fit: cover;}   
        
    }
    
    

.About-logo{    
    /* max-width: 300px; */
    /* max-height: 300px; */
    justify-self: center;
    text-align: center;

    ul {text-align: center;}
    ul li{text-align: center;
    list-style: none; 
        filter: greenscale(0%); /* ทำให้ภาพเป็นขาวดำในตอนแรก */ 
        transition: filter 0.6s ease;/* เพิ่ม transition เพื่อให้การเปลี่ยนสีมีความนุ่มนวล */}
        
        img{border-radius: 10px;}
        img:hover{  border-radius: 10px;
                    transform: scale(1.1); /* ขยายขนาด 10% */
                    /* background-color: green; เปลี่ยนเป็นสีเขียว */}}

.map{   
        width: 100%;
        height: 100%;
        font-family: "Prompt", sans-serif;
        font-style: normal;}

        .fmap{ height: 300px; border-radius=: 30px;}
            

        iframe{ width: 100%; height: 100%; border: none; object-fit: contain; margin: 0 auto;}

.contacts{  
            max-height: 100%;

            font-family: "Prompt", sans-serif;
            font-style: normal;}

.contacts ul li{    text-align: left;
                    list-style: none;
                        
                    a{  text-decoration: none;
                        color: #2c2a2a; 
                        font-family: "Prompt", sans-serif;
                        font-style: normal;       
                        text-shadow: 5px 5px 5px rgb(75, 80, 76);
                        overflow-wrap: break-word;
                        padding: 10px 0;
                        display: inline-block;
                        transition: all ease 0.3s;}
            
                    a:hover{   color: #a36c2e;
                                /* transform: scale(1.1); ขยายขนาด 10% */
                                /* background-color: green; เปลี่ยนเป็นสีเขียว */}}