html{
  background-color: #232323;
}
.navtop{
  height: 45px;
  display: flex;
  background-color: black;
  position: fixed;
width: 100%;
top: 0px;
left: 0px;
z-index: 10;
}
.logonav > img{
  max-width: 100px;
}
.logonav{
  padding: 11px;
background-color: black;
}
.iconnav{
  color: white;
  padding: 10px; 
  font-size: 25px;
}
.rightnav {
      margin-left: auto;
      position: relative;
  }
  .bodyzone{
      padding-top: 45px;
      padding-bottom: 85px;
  }

  

  .notinav{
      font-size: 11px;
font-weight: 400;
background-color: brown;
border-radius: 50px;
padding: 0px;
width: 15px;
height: 15px;
position: absolute;
right: 5px;
top: 5px;
text-align: center;
  }

  .menulist{
      position: fixed;
bottom: 0px;
background-color: #1c1c1c;
width: 100%;
display: flex;
/* height: 50px; */
padding: 8px 8px 15px 8px;

  }
  .menulist>div {
      flex: 1; /* ทำให้กล่องแต่ละอันมีขนาดเท่ากัน */
      padding: 8px;
      color: white;
      text-align: center;
      margin: 0px 5px; /* ระยะห่างระหว่างกล่อง */
      font-size: 20px;
  }

  .bodymunu>div{
      flex: 1; /* ทำให้กล่องแต่ละอันมีขนาดเท่ากัน */
      padding: 8px;
      color: white;
      text-align: center;
      margin: 0px 5px;
  }

  .menulist>div>div{
      background-color: white;
height: 25px;
width: 25px;
margin: auto;
border-radius: 50px;
border: 2px solid white;
  }

  .menulist>div>span{
      font-size: 8px;
padding-top: 3px;
display: block;
  }
  .menulist>div>a>span{
      font-size: 8px;
padding-top: 3px;
display: block;
  }

.binb{
height: 50px;
width: 50px;
background-color: white;
margin: 0px auto;
border-radius: 100px;
}
.muneactive{
position: absolute;
height: 3px !important;
background-color: #ff0000 !important;
border: 0px solid !important;
top: -8px !important;
left: 50%;
transform: translate(-50%, -0%);
width: 0px !important;
transition: width 0.5s ease-in-out;
}

.muneactive.expand{

width: 60px !important;
}

body{
background-color: #000 !important;
font-family: "Mitr", serif;
font-weight: 200;
font-style: normal;
      font-size: 16px;
}


html{

      scrollbar-width: none; /* สำหรับ Firefox */
      -ms-overflow-style: none; /* สำหรับ Internet Explorer และ Edge */

}
 
.body::-webkit-scrollbar {
  display: none; /* สำหรับ Chrome, Safari และ Edge */
}


.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}

@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}