*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: 'oswald', sans-serif;
}

body{
    /* display: flex; เปิดใช้งาน flexbox */
    mix-width: 1200px;
    justify-content:center; /*กึ่งกลางแนวนอน */
    align-items: center; /* กึ่งกลางแนวตั้ง */
    /*min-height: 100vh;  ยืนยันความสูงเต็มหน้าจอ viewport */
}

#container {   
    z-index: 1000; 
    width: 100%;
    height: 80px;
    vertical-align: middle;
    margin: 0px auto;
    padding: 0 6%;
    background: linear-gradient(to right, #257e56, #008046); 
    /* overflow: hidden; */
    /* background-color: #00b38c; */
    /* background: linear-gradient(to right, #79af9791, #217a5288);*/

}    

/* Hamburger icon */
.hamburger-icon 
{
  display: inline-block;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 15%;
  padding-block: 5px black;
  
  filter: drop-shadow(5px 5px 5px rgb(77,76,76));

  @media (min-width:850px)
    { display: none;}    
} 

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #cccccc;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}
/* Style-Navbar---------------- */
nav {
    width: 100%;
    position: relative;
    position: fixed;
    justify-items: center;
    /* padding-bottom: 30px; */
                
        .navbar {
            display: inline-block;
            display: flex;
            justify-content: space-between;            
            /* align-items: center; */
            width: auto;
            height: 100%;             
            background: linear-gradient(to right, #257e56, #008046);                  
            
         /* Logo------------------------ */
         .logo {
            display: inline-block;
            justify-content: flex-start;
            width: auto;
            height: 80%;
            margin-top: 5px;
            margin-left: 5px;
            
            /* box-shadow: 5px 5px 5px rgb(77,76,76); */
                                            
             img{
                float: left;
                height: 100%;
                filter: drop-shadow(5px 5px 5px rgb(77,76,76));
            }
             
        }
    }
}

/* Main-Menu------------- */

/* @media screen ------------------------- */
/* ทำให้หายเมื่อขนาดจอมากกว่า750px------------ */
     
    @media (min-width:850px){
        .menu { 
            display:flex !important; 
        } 
    }          
    
    @media (max-width:850px){
        .navbar {
            flex-direction: column;
            height: 60px;
            padding: 1px 1px;
                    
            .menu {
             z-index: 1000;
             /* flex-direction: column; */
             display: none;
             background: linear-gradient(to right, #79af97, #217a5294);    
             /* background-color: #0f6a94; */
             /* margin-top: 10px; */
             filter: drop-shadow(5px 5px 5px rgb(77, 76, 76));

               li{
                margin-right: auto;
                            
               }
             
            }

        }
    }   

.menu {
    display: flex;
    margin: 5px 20px;
    list-style: none;    
    align-items: center;
    text-shadow: 5px 5px 5px rgb(77,76,76);
      
    li {
        margin-left: 10px;}
    a {
        text-decoration: none;
        color: #ffffff;        
        text-shadow: 5px 5px 5px rgb(75, 80, 76);
        overflow-wrap: break-word;
        padding: 10px 0;
        display: inline-block;
        transition: all ease 0.3s;}

    li:last-child {margin-right: 0;}
    li a:hover {color: #ff8a00;}
}

/* Style-Submenu------------------ */
.navbar ul .submenu {
    list-style: none;
    position: absolute;
    width: 155px;
    background-color: #316a85;
    /* background-color: #8f8f8f; */
    /* background: linear-gradient(to bottom, #218556, #207e52a8); */
    margin-top: -50px;
    opacity: 0;
    z-index: -999;
    transition: all ease 0.5s;
    box-shadow: 5px 5px 5px rgb(77,76,76);
}      

.navbar ul li:hover .submenu
{
    z-index: 99;
    opacity: 1;
    margin-top: 0;
}

#navbar ul .submenu li
{
    margin: 0;
    width: 100%
}

#navbar ul .submenu li a{
    padding: 15px 20px;
    display: inline-block;
    width: 100%;
}


 
/* News-Updates------------------ */
.New-Updates
{
    /* display: inline-block; */
    width: 100%;
    height: 100%;
    background-color: rgb(198, 255, 210);
    overflow: hidden;
    padding-top: 80px;
    padding: 0 65px;
    justify-content: center;
    align-items: center;
    text-align: center;    
    font-family: 'oswald', sans-serif;
    text-shadow: 5px 5px 5px rgb(154, 160, 155);

   
    
        
        .img-rps {
            
        /* vertical-align: middle; */
        /* filter: drop-shadow(5px 5px 5px rgb(77,76,76)); */
        
    }
}

/* Content--------------------- */
#Contents
{
    width: 100%;
    height: 200;
    background-color: #a5d5ff;
    padding-top: 6%;
    font-family: 'oswald', sans-serif;
    text-align: center;
}

/* About----------------------- */
#About
{   
    width: 100%; 
    background-color: #0b3a66;    
    object-fit: cover;
        
    padding: 15px;
        
    align-items: center;
    text-align: center;
    
    font-family: 'oswald', sans-serif;
    /* color: #436380ec */
}

.About{
      display: grid;

        /* สร้าง 3 คอลัมน์ ขนาดเท่ากัน */
        grid-template-columns: 1fr 1fr 1fr;
        /* ใส่ระยะห่างระหว่างช่อง */
        gap: 5px;
        margin-bottom: 15px;
  
}
    @media (max-width: 700px)
{ .About
        {            
            grid-template-columns: 1fr;                      
        }  
}
@media screen (min-width: 400px)
{ .About
    grid-row: inherit;
}
    
   

  .box {
    background-color: #ccccccab;
    padding: 10px;
    border: 2px solid #ccc;
    text-align: center;     
  }
/* CMU SOC CESD Logo */
#CMUSOCCESD-rows 
{   
    width: 100%;
    display: block; /*ใช้ flexbox จัดเรียง */
    /* flex-direction: column;เรียงรูปภาพแนวตั้ง (บนลงล่าง) */       
    justify-content: space-between; /* จัดช่องว่างระหว่างรูปเท่าๆ กัน */
    align-items: center;
    text-align: center;
    gap: 20px; /* ระยะห่างระหว่างรูป */
    vertical-align: middle;
     /*flex: 1; แบ่งพื้นที่เท่าๆ กันทั้ง 3 กล่อง */
    overflow: hidden; /* ป้องกันรูปภาพล้นออกมา */
    background-color: #ccccccab;
}
     
#CMUSOCCESD-rows img 
    {
        width: 80%; /*ปรับขนาดให้เป็น 3 ในส่วนของพื้นที่ */
        height: auto; /* รักษาอัตราส่วนรูปภาพ */
        object-fit: cover; /* ตัดรูปให้พอดีในกรอบกรณีขนาดไม่เท่ากัน */
    }

/* About img to column */
/* Responsive layout - makes a two column-layout instead of four columns */

/* แผนที่ ที่ตั้งศูนย์ */
#Map
{   
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    align-items: center;
    justify-content: center; /* กึ่งกลางแนวนอน */
    background-color: #ccccccab;
}    
    
    .CESDmap{
    /*width: 100%;             กำหนดความกว้าง */
    /* height: 100%;           กำหนดความสูงให้เท่ากัน */
    object-fit: cover;
    border: none;            /* เอาเส้นขอบออก */
    
}
/* @media (max-width:600px)
{
        .CESDmap {
            width: 100%;
            height: 100%;
            padding: 5px;
        } 
}            */


/* ติดต่อเรา contact */
    
.contacts ul li

    {   
        text-align: left;
        list-style: none;
                        
        a { 
            text-decoration: none;
            color: #2c2a2a;        
            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;}
    }

.
/* Style-Footer---------------- */
.footer
{
    text-align: end;
    
    .h6 {
        color: #ffffff;
    }
}