*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: navy;
}
@media (max-width: 768px) {
  .container h1 {
      font-size: 1.3em; /* ลดขนาดฟอนต์สำหรับหน้าจอเล็ก */
  }
  span{
    font-size: 0.9em; /* ลดขนาดฟอนต์สำหรับมือถือ */
  }
  .container .sub_title span{
    font-size: 1em; /* ลดขนาดฟอนต์สำหรับมือถือ */
  }
  .container .back{
    font-size: 0.8em; /* ลดขนาดฟอนต์สำหรับมือถือ */
  }
  .container .work a{
      font-size: 0.7em; /* ลดขนาดฟอนต์สำหรับหน้าจอเล็ก */
  }
}

@media (max-width: 480px) {
  .container h1 {
      font-size: 1.3em; /* ลดขนาดฟอนต์สำหรับหน้าจอเล็ก */
  }
  span{
    font-size: 0.9em; /* ลดขนาดฟอนต์สำหรับมือถือ */
  }
  .container .sub_title span{
    font-size: 1em; /* ลดขนาดฟอนต์สำหรับมือถือ */
  }
  .container .back{
    font-size: 0.8em; /* ลดขนาดฟอนต์สำหรับมือถือ */
  }
  .container .work a{
      font-size: 0.7em; /* ลดขนาดฟอนต์สำหรับหน้าจอเล็ก */
  }
  
}
body{
  margin: 0;
  height: auto;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
  background: rgb(177, 241, 228)
  
}
.container{
  max-width: 900px; /* ขนาดสูงสุด */
  width: 100%; /* ขนาดยืดหยุ่น */
  height: auto; /* ขนาดคงที่ */
  margin: 20px auto; /* จัดกลาง */
  background: #fff;
  padding: 25px 30px;
  padding-top: 10px;
  border-radius: 5px;
  text-align: center;
  display: block;
  
}
.container_dashboard{
  width: 900px; /* ขนาดคงที่ */
  height: auto; /* ขนาดคงที่ */
  margin: auto; /* จัดกลาง */

  background: #fff;
  padding: 30px 30px;
  border-radius: 0.5em;
  text-align: center;
  display: block;
  
}
.container h1{
  border:  1px solid rgb(185, 253, 176);
  color: rgb(24, 92, 7);
  border-radius: 0.5em;
  padding: 10px 15px;
  margin-top: 20px;
  margin-bottom: 20px;
  background: #72e68f;
  font-size: 1.5em;

}
body .container .work{
  border: 1px solid whitesmoke;
  border-radius: 0.5em;
  background: #eef4f5;
  padding: 10px 15px;
  
  width: 100%;
  font-size: 18px;
  width: 80%;
  margin: 15px auto;
 
}

.container .work a{
  color: #42caad;
  
  
}
.container_dashboard .work a{
  color: #42caad;
}
body .container_dashboard .work{
  border: 1px solid whitesmoke;
  border-radius: 0.5em;
  background: #eef4f5;
  padding: 10px 15px;
  
  width: 100%;
  font-size: 18px;
  width: 80%;
  margin: 15px auto;
 
}
.container .sub_title{
  border: 1px solid rgb(249, 250, 244);
  border-radius: 0.5em;
  margin: 20px 0;
  padding: 10px 15px;
  background: #99aef1;
  
}
.container span{
  font-size: 10px;
  color: #f1f5f7;
}

.container_dashboard .sub_title{
  border: 1px solid rgb(249, 250, 244);
  border-radius: 0.5em;
  margin: 20px 0;
  padding: 10px 15px;
  background: #a5bac2;
}
.sub_title span{
  font-size: 20px;
  color: #f1f5f7;
}
body .container_dashboard .dashboard{
  border: 1px solid rgb(240, 220, 39);
  border-radius: 0.5em;
}
body .container_dashboard .dashboard_chem{
  border: 1px solid rgb(240, 79, 39);
  border-radius: 0.5em;
}

.dropbtn {
  
  color: rgb(14, 13, 13);
  padding: 16px;
  font-size: 15px;
  font-family: Kanit, sans-serif;
  color: #42caad;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  box-sizing: border-box;
  
}

.dropdown {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  
  
  
 
  
}

.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;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #a4e7f0;
}

.container .back{
  text-align: center;
}
.container .back a{
 color: #ec5324;
}