@import url('fontStyle.css');

html {
  scroll-behavior: smooth;
}
*{
	font-family : styleF4, verdana, helvetica, sans-serif; 
	font-size:1em;
	
}
body{
		max-width: 90vw;
		margin: 0 auto;
		padding:0;
		font-size: 1em;
		color:#CD853F;
		border:0px solid blue;
		background-color: #FFF;
		/*
		color: #222;
		background: linear-gradient(180deg, rgba(92,82,255,1) 0%, rgba(167,167,255,1) 15%, rgba(255,255,255,0) 50%) ;
		background: url("../IMG/banner.jpg") no-repeat fixed center;
		backdrop-filter: blur(5px);
		*/
	}
div#div_top{
	display:block;
	vertical-align:middle;
	padding-left:20px;
	border:0px solid yellow;
	margin:0px;
	padding:2px;
	color:#FFFFFF;
	font-size:0.8em;
	font-weight:bold;
	background-color:#6699FF;
}
div#div_menu{
	display:block;
	border:0px solid pink;
	margin:0px;
	height:80px;
	color:#CCCCCC;
	text-shadow: 1px 1px rgba(204,204,204,1), 1px 1px 1px rgba(102,51,255,1);
	font-size:0.9em;
}
	
div#div_banner{
	display:block;
	border:2px solid #eee;
	margin:0px auto;
	max-width: 90vw;
	height:180px;
	background:#FFFFFF url("../IMG/banner-1.jpg?20250919022425") no-repeat center top;
	background-size: 90vw 180px;
    
}
div#div_container{
	border:0px solid red;
	max-width: 80vw;
	margin: 0 auto;
	padding:2px;
	font-size:0.8em;
}
	#div_container .div-flex{
		display: flex;
		justify-content: center;
		margin:5px auto;
	}
	.div-flex div{
		padding: 2px;
		margin: 5px;
		text-align:center;
	}
	.div-block{
		max-width:99%;
		margin:5px auto;
		display:block;
	}
div#div_footer{
	max-width: 90vw;
	background-color:#6699FF;
	color:#FFF;
	text-align:left;
	font-size:0.7em;
	display: flex;
	justify-content: space-between;
}
	#div_footer div{
		
		/* background-color: lightblue; */
		padding: 10px;
		margin: 5px;
	}
#div_list_result{
	opacity:1;
	cursor:pointer;
	transition:all 1s;
	
}	
	#div_list_result:hover{
		opacity:0.6;
	}
.div-info{
	margin:3px;
	cursor:pointer;
	opacity:1;
	width:30%;
	border: 2px solid #EEEEEE;
	border-radius:5px;
	display:inline-block;
	transition:all 1s;
}
	.div-info:hover{
		opacity:0.6;
		color:#000000;
		border: 2px solid blue;
	}
B{
	font-size:1.5em;
	text-decoration: underline;
	text-underline-position: under;
}	
	
/* TABLE DIV */
div.table{
	display: table; 
	width: 98%; 
	border-collapse: collapse; 
	margin:0 auto;
}
div.th {
  display: table-row-group; 
  background-color: #f2f2f2;
  text-align: center;
  font-weight: bold;
  font-size:1.2em;
}
div.th-cell {
  display: table-cell; 
  padding: 5px 0px;
  border: 1px solid #ccc;
  font-weight: bold;
  text-align: center;
}
div.tr {
  display: table-row; 
  
}
div .td {
  display: table-cell; 
  padding-top:4px;
  vertical-align: top;
  text-align:left;
}
.middle{
	vertical-align:middle;
}
.padding-5{
	padding:5px;
}
.bd{
	border: 1px solid #ccc;
}

/* MENU */
.nav-con {
  display: flex;
  justify-content: space-between;
}
.nav-con a {
  color: black;
  text-decoration: none;
}
.logo a {
  font-size: 1.5rem;
  font-weight: bolder;
}
.menu {
  display: flex;
   float: right;
}
.menu input {
  margin-right: -25px;
  padding: 10px;
  padding-right: 25px;
  background-color: #2e2e2e;
  border: 0px;
  border-radius: 25px;
  color: #cccccc;
  height: 25px;
}

.menu input:focus {
  border: 0px;
  outline: none;
}

.menu button {
  padding: 0 1rem;
  background-color: #2e2e2e;
  border: 0px;
  border-radius: 25px;
  color: #cccccc;
  height: 25px;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* background-color: #333333; */
 
}

.menu li {
  float: left;
}

.menu li a {
  display: block;
  color: #CCC;
  text-align: center;
  padding: 8px;
  text-decoration: none;
  border-top:5px solid #FFF;
}

.menu li a:hover {
  /* background-color: #111111; */
  border-top:5px solid #CCC;
}

a{
	 text-decoration: none;
	 color:#CCCCCC;
}

/* Drop Down */
.dropdown {
        position: relative; /* กำหนดตำแหน่งของเมนูย่อย */
        display: inline-block; /* ทำให้เมนูอยู่ติดกับข้อความอื่น */
		margin-left:5px;
    }
	.m-menu{
		border-top:4px solid #FFFFFF;
		cursor:pointer;
	}
	.m-menu:hover{
		border-top:4px solid #CCCCCC;
	}
	.m-menu a:hover{
		border-top:4px solid #CCCCCC;
	}
    .dropdown-content {
        display: none; /* ซ่อนเมนูไว้ก่อน */
        position: absolute; /* กำหนดตำแหน่งที่แน่นอน */
        background-color: #f9f9f9; /* สีพื้นหลัง */
        min-width: 160px; /* ความกว้างขั้นต่ำ */
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* เงา */
        z-index: 1; /* จัดลำดับชั้นการแสดงผล */
		font-size:0.8em;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block; /* ทำให้แต่ละรายการแสดงเป็นบล็อก */
    }

    .dropdown-content a:hover {
        background-color: #f1f1f1; /* สีพื้นหลังเมื่อโฮเวอร์ */
    }

    /* CSS นี้ใช้ร่วมกับ JavaScript เพื่อแสดงเมนู */
    .dropdown:hover .dropdown-content {
        display: block; /* แสดงเมนูย่อยเมื่อโฮเวอร์ */
    }
	
/* CSS IMG */
.img{
	cursor:pointer;
}
/* Form CSS */
form{
	margin:0px auto;
	border:0px solid red;
	padding:2px;
}
.input{
	pading:2px;
	text-align:left;
	width:99%;
}
	.input:focus{
		background-color: lime;
		border-color: blue;
	}
label{
	font-weight:bold;
	text-align:left;
	display:block;
	margin-top:4px;
	padding:2px;
}
.sbt{ /* Submit button */
	padding:2px 5px;
	background-color:green;
	font-weight:bold;
	color:#FFFFFF;
	cursor:pointer;
	float:right;
}
	.sbt:hover{
		color:green;
		background-color:#CCCCCC;
	}
	
	
/*   MENU ADMIN */
ul#menu-admin {
      list-style: none; /* ลบหัวข้อย่อย */
      margin: 0 auto; /* ลบระยะขอบของ ul */
      padding: 0; /* ลบระยะห่างภายในของ ul */
    }

    ul#menu-admin li {
      margin-bottom: 5px; /* เพิ่มระยะห่างระหว่างรายการเมนู */
	  text-align:left;
    }

    ul#menu-admin li a {
      display: block; /* ทำให้ลิงก์แสดงผลเป็นบล็อก */
      padding: 10px 3px; /* สร้างระยะห่างภายในลิงก์ */
      background-color: #f0f0f0; /* สีพื้นหลังของเมนู */
      color: #333; /* สีตัวอักษร */
      text-decoration: none; /* ลบเส้นใต้ */
    }

    ul#menu-admin li a:hover {
      background-color: #ddd; /* สีพื้นหลังเมื่อโฮเวอร์ */
      color: #000; /* สีตัวอักษรเมื่อโฮเวอร์ */
	  font-weight:bold;
    }
	ul#menu-admin li a:active {
        color: red; /* สีตัวอักษรเมื่อโฮเวอร์ */
    }
fieldset{
	padding:5px 0px;
	border-radius:5px;
	margin-top:5px;
}
	legend{
		font-weight:bold;
	}
		fieldset:hover{
			color:blue;
			border-color:green;
		}