*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: "Prompt", sans-serif;
    font-style: normal;
}

/* Go to News */

.news-bar{width: 100%;}              

.newsinvis{ 
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    margin: 0 auto;

    /* The core crystal effect properties */
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px); /* The blurring effect */
    -webkit-backdrop-filter: blur(5px); /* Vendor prefix for compatibility */
    border: 1px solid rgba(255, 255, 255, 0.3);

    padding: 20px;
    align-items: center;
    
}

.main-news{width: 100%; padding-bottom: 15px;}

    .cesd-news{ display: flex; 
                width: 100%; 
                /* จัดตำแหน่งชิดด้านบน (บนสุด) */ 
                gap: 10px;
                align-items: center;
    
            img{height: 3vh}
    
            h1{font-size: 3vh; color: #883ec4; text-shadow: 5px 5px 5px rgba(77, 76, 76, 0.459);}
        }

    .News-Updates { 
                    display: flex;            
                    height: 100%;
                    gap: 10px;
                    align-items: center;

                h1 { font-family: "Prompt", sans-serif;
                     font-style: normal;
                     font-weight: bold; 
                     font-size: 1rem;
                     text-shadow: 5px 5px 5px rgba(77, 76, 76, 0.459);}

                h2 { font-family: "Prompt", sans-serif;
                     font-style: normal;
                     text-wrap: wrap;
                     font-weight: 1rem; 
                     text-shadow: 5px 5px 5px rgba(77, 76, 76, 0.459);} 
    }

.tonews{ 
         
        h1 {    font-family: "Prompt", sans-serif;
                font-style: normal; 
                font-weight: 500;  
                font-size: 2vh;
                border-radius: 10xp;}}
            
    .botton { 
        
        width: 100%; 
        justify-items: end;  
        /* padding: 5px 10px;  */
        border-radius: 15px;
        /* display: inline-block; เพิ่มเพื่อให้ขนาดพอดีกับปุ่ม */
        transition: 0.3s;      /* เพิ่มเพื่อให้สีเปลี่ยนแบบนุ่มนวล */
}

/* จัดการลิสต์และลิงก์ข้างใน */
    .botton li { 
        justify-content: end;
        /* white-space: nowrap;  */
        background-color: rgb(127, 219, 255);
        list-style: none;
        padding: 10px;
        border-radius: 25px;
    a { text-decoration: none;}
}


/* แก้ไขจุดที่ Hover ไม่ทำงาน */
.botton li:hover {transform: scale(1.1);
    background-color: #ff8a00; /* เปลี่ยนสีพื้นหลังตรงๆ */
    /* หรือถ้าจะใช้ filter ต้องเป็นแบบนี้: filter: brightness(1.1); */
}

/* news-updates...... */
.news-updates {width: 100%; margin: 0 auto; background-color: rgba(6, 65, 88, 0.377);}
        
.invisible{display: grid;
           max-width: 1170px;
           height: 100%;
           grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
           /* grid-template-columns: repeat(auto-fit, minmax(0, 350px));  */
           gap: 30px;}
        

.newsbox {         
            padding: 15px;
            border-radius: 30px;
            background: linear-gradient(145deg, #cacaca98, #f0f0f0b2);
            box-shadow:  7px 7px 14px #afafafa2,
             -7px -7px 14px #ffffffc9;
         ul
         list-style: none;
         a{text-decoration: none;}
img {
  width: 100%;       /* ให้รูปขยายเต็มพื้นที่ช่องของตัวเอง */
  /* height: auto;กำหนดความสูงที่ต้องการ */
  object-fit: contain; 
  /* ทำภาพให้เต็มช่องโดยไม่บิดเบี้ยว (crop ส่วนเกิน) หรือใช้ object-fit: cover; ถ้าต้องการให้เห็นภาพทั้งหมด}*/
}}  
.newsbox:hover {transform: scale(1.1);}