/* css นี้ใช้ของเว็บ Thaichefs.com โดย อ. พิพัศน์ นิยมศิลป์ 11-09-2023*/
        /* ใช้กำหนด มาร์จินของหน้า*/
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
/* กล่องกรอบใน*/
.container {
    margin: 2 2px;
    /*ระยะห่างระหว่างกรอบovdกับpadding*/max-width: 100%;
    padding: 10;
   /* border: 1px solid red; แสดงสีเพื่อให้เข้าใจเรื่อง */
    /*ระยะห่างระหว่างpaddingกับcontent*/border-radius:2rem ;
    -webkit-border-radius:;
    -moz-border-radius:;
    -ms-border-radius:;
    -o-border-radius:;
}
.header {
    padding: 5px;
    display: flex;                /* ให้ไปแสดงผลด้านขวา */
    justify-content: space-between;/*สั่งแยกการแสดงผล */
    background-color: rgb(255, 255, 255);
    align-items: center;
    text-decoration: none;
     /*border: 1px solid red; แสดงสีเพื่อให้เข้าใจเรื่อง */
}
.center {
    margin: auto;  /*ระยะขอบ ผลักอัตโนมัติ*/
    width: 95%;   /*ความกว้าง 50%*/
    border: 1px solid rgb(251, 251, 252);   /*ความหนา รูปแบบ สีของขอบ*/
    padding: 1%;  /*ขยายขอบด้านใน*/
    background-color: rgba(248, 249, 250, 0.849); 
    border-radius: 10px;
 }
          /* Navigator*/
.nav {
    margin: 0 0;
    padding: 3rem;
    Display: flex;
    justify-content: space-between;
    /*border: 1px solid red; แสดงสีเพื่อให้เข้าใจเรื่อง */
}

.nav-wrapper {
    Display: flex;
    column-gap: .5rem;/*สั่งให้ <div> แยกออกจากัน จำนวนตามค่าที่ให้ */
    margin:3 3;
    padding: 10px 10px;
    justify-content: space-between;
    background-color: rgb(252, 252, 252);
    /*border: 1px solid yellow; แสดงสีเพื่อให้เข้าใจเรื่อง */
}
/*Menu name button-h in nav bar if width less than 450 will not show*//*
@media screen and (max-width: 460px) {
    .nav-wrapper {display: none;} 
} */
.nav-btn {
    Display: flex;
    column-gap: .5rem;/*สั่งให้ <div> แยกออกจากัน จำนวนตามค่าที่ให้ */
    margin: 5 5;
    padding: 10px 35px;
    justify-content: space-between;
    background-color: rgb(254, 254, 254); 
    /*border: 1px solid red; แสดงสีเพื่อให้เข้าใจเรื่อง */
}
.logo {
    background-color: rgb(248, 250, 248);
    margin: 2rem 0;

}
.logo a {
    align-items: center;
    font-size: 2rem;
    color: antiquewhite;
    text-decoration: none;
    padding: 3ren ;

}

.menu {
    list-style: none;
    align-items: center;
}
.menu ul {
    margin: 0 1rem;
}

.menu li a {
    color: antiquewhite;
    text-decoration: none;
}
.menu-img img {
    width: 100%;
    height: 30px;
    object-fit: cover;
    padding: 0rem;
    border-radius: 10px;
}
.news-con {
    margin: 0rem 0;
    display: flex;
}
.news-info {
    width: 100%;
    padding: 0;
}
.news-info h3 {
    text-shadow: 2px 2px #a09f9f;
    font-size: 2rem;
    color:rgb(54, 11, 199);
}
.news-info p {
    font: size 1rem; ;
    margin: 1rem 0;
    color:rgb(54, 11, 199);
}
.news-img img {
    width: 100%;
    height: 100px;
    /*object-fit: cover;*/
    padding: 0rem;
    border-radius: 10px;
}
.news-info .news-btn {
    display: inline-block;
    background-color: rgb(246, 247, 246);
    color: antiquewhite;
    padding: .5rem 1rem;
    border-radius: 5px;

    text-decoration: none;
}
/* Articles*/
.blog-con{
    
    margin: 2rem 0;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
}
@media screen and (max-width: 700px) {
    .blog-con {
        grid-template-columns:1fr 1fr;
        grid-gap: 0;
    }
}
@media screen and (max-width: 450px) {
    .blog-con {
        grid-template-columns:1fr;
        grid-gap: 0;
    }
}
.blog-title {
    
    margin: 2rem 0;
    margin-bottom: 2rem 0;
}
.blog-item {
    margin: 2rem 0;
}
.blog-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius:  10px;
}
.blog-item img-x {
    width: 50px;
    height: 50px;
    align-items: center;
    border-radius:  .5px;
    -webkit-border-radius:  .5px;
    -moz-border-radius:  .5px;
    -ms-border-radius:  .5px;
    -o-border-radius:  .5px;
}
.blog-info h4 {
    text-shadow: 2px 2px #caaeae;
    font-size: 2rem;
    color:rgb(54, 11, 199);
}
.blog-info h3 {
    font-size: 1rem;
    text-shadow: 2px 2px #caaeae;  
    color:rgb(54, 11, 199);
}
.blog-info p {
    font-size: ;
    margin: 1rem 0;
    color:rgb(54, 11, 199);
   
}

.p-list {
    white-space: pre-line; /* จะแสดงผลขึ้นบรรทัดใหม่เมื่อพบ \n */
}

.blog-btn {
    display: inline-block;
    background-color:rgb(54, 11, 199);
    color: antiquewhite;
    padding: .5rem 1rem;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;
    text-decoration: none;
}

.blog-btn p1{
    font-size: ;
    margin: 1rem 0;
    color:rgb(251, 251, 252);
}
.head {
      list-style: none;
    align-items: center;
}
.head-btn {
    display: inline-block;
    background-color:rgb(248, 247, 250);
    color: rgb(54, 11, 199);
    padding: .5rem 1rem;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;
    text-decoration: none;
    justify-content: space-between;
}

/* footer*/

.footer {
    margin: 0 0;
    padding: 0px;
    color: #27187c;
    background-color:rgb(254, 253, 254);;
    align-items: center;
    /* border: 1px solid red; แสดงสีเพื่อให้เข้าใจเรื่อง */
}
.footer div {
    padding: 3%;
    color: rgb(54, 11, 199);
}

/*@media screen and (min-width: 520px) {
    .blog-con {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 0;
        display: grid 1fr 1fr 1fr;
    }
}
*/
.register
{
    font-size: 100%;
    background-color: #f8f8f8;
    margin: 5px;
    text-align: center;
    border: 1px solid #b8c4de;
    border-bottom: none;
    border-radius: 5px;
    padding: 30px 30px;

}
A:link {
    text-decoration:none;
    }
A:visited {
    text-decoration:none;
    }

.form, .content {
    width: 95%;
    margin: 5px auto;
    padding: 10px;
    border: 1px solid#c1bbf7;
    background-color: rgb(228, 233, 243); /* พื้นหลังของ form */
   border-radius:5px 5px 5px 5px ;
}

.centered {  
    position: fixed;  
    top: 57%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
   }
/* กำหนดหน้าจอ ตัวบนถ้าลดต่ำกว่า เท่านี้ ให้แสดงผลเท่าเลขตัวล่าง*/
@media screen and (max-width: 300px) {
    .form {width: 300px;
    } 
}
@media screen and (min-width: 300px) {
    .form {width: 300px;
    } 
}
.input-group {
    margin: 10px 20px ;
}
.input-group label{
    display: block;
    text-align: left;
    margin: 10px;
}
.input-group input{
    height: 30px;
    width: 100%;
    padding: 5px 10px;
    font-size: 16px;
    color: rgb(23, 4, 133);
    border-radius:5px ;
    border: 1px solid rgb(87, 123, 241);

    
}
.button{
    display: inline-block;
    background-color:rgb(249, 248, 253);
    color: rgb(7, 11, 124);
    text-decoration: none;    
    padding: .5rem 1rem;
    text-align: center;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;

}
.btn-form {
    padding: 10px;
    font-size: 15px;
    color: rgb(13, 16, 155);
    background:rgb(197, 218, 247);
    border: none;
    border-radius: 5px;
    text-decoration: none;
    box-shadow: 2px 2px #a69c9c;

}
.btom-form {
    margin: 0 0;
    padding: 0px;
    display: flex;                /* ให้ไปแสดงผลด้านขวา */
    justify-content: space-between;/*สั่งแยกการแสดงผล */
    align-items: center;
}
.error {
    width: 92%;
    margin: 0px auto;
    padding: 0px;
    border: 1px solid #a94442;
    color: #a94442;
    background: #f2dede;
    border-radius: 5px;
    text-align: left;
}
.success {
    color: #3c763d;
    background: #dff0d8;
    border: solid #3c763d;
    margin-bottom: 20px;

}
/*ต่อไปนี้ ใช้กับกลุ่ม converter */
/*เป็นการเพิ่มสีสัน ปรับลักษณะให้กับ ปุ่ม*/
/*input[type=submit] {  
  width: 50%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 5px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}*/
.input[type=number] {
    width: 100px;

    font-size: 18;
    background-color: #eefc76a8;
    color: rgb(182, 8, 8);
    padding: 5px 5px;
    margin: 0 0;
    border:1px;
    border-radius: 5px;
}
/*ส่วนนีจะทำงานเมื่อมีการคลิกที่ช่องกรอกข้อมูล*/
.input[type=text]:focus {
  width: 100%;
  border: 2px solid #8a0202;
  color: rgb(250, 237, 163);
}

/*ส่วนที่เป็นกรอบครอบส่วนการแสดงผลทั้งหมด*/
/*div {
  border-radius: 5px;
  background-color: #CCFF66;
  padding: 20px;
  width: 450px
}*/
.convert {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid red; แสดงสีเพื่อให้เข้าใจเรื่อง 
}

.input,
select {
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    font-size: 16px;
    color:rgb(127, 4, 4);
}

.button-A {
    display: inline-block;
    background-color:rgb(127, 4, 4);
    color: rgb(252, 251, 253);
    padding: .5rem 1rem;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;

}
/*ใช้ที่ convert & head*/
.button-h {
    display: inline-block;
    background-color:rgb(249, 248, 253);
    color: rgb(30, 10, 146);
    text-decoration: none;    
    padding: .5rem 1rem;
    text-align: center;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;

}
/*ใช้ที่ convert & head*/

h1,
h2,
h3 {
    color:rgb(54, 11, 199); /*สีตัวอักษร ชื่อ form */
}

.outputBox {
    border: 2px solid #333;
    border-radius: 5px;
    padding: 10px;
    margin-top: 5px;
    width: 80%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.output {
    font-size: 18px;
    color:rgb(54, 11, 199);
}
.show {
    margin: 0 0;
    padding: .5rem;
    width: 80%;
    max-width: 300px;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;
    border: 1px solid rgb(123, 3, 3); /*แสดงสีเพื่อให้เข้าใจเรื่อง  */ 
}
.convert-BT { /*ไว้ใช้เวลาต้องการรู้ว่าขอเขตถึงขนาดใหน */
    margin: 0 0;
    padding: 0px;
    padding: 0rem;
    width: 100%;
    max-width: 500px;
    justify-content: space-between;/*สั่งแยกการแสดงผล */
    background-color:rgb(254, 253, 254);;
    align-items: center;
    /*border: 1px solid red; แสดงสีเพื่อให้เข้าใจเรื่อง */
}

.login .input{
    font-weight: Bold;
    font-size: 20;
    color:rgb(44, 16, 184);
    align-items: center;
    display: flex;  
}
.pwb {
    font-weight: Bold;
    font-size: 22;
    color:rgb(44, 16, 184);
    align-items: center;
}
.banner {
    margin: 5rem 5rem;
    margin-bottom: 1rem 3rem;
}
.banner-img img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    padding: 5rem;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
/* จบการใช้กับกลุ่ม converter*/
/*@media screen and (min-width: 450px) {
    .button-h {
        grid-template-columns:1fr 1fr 1fr;
        grid-gap: 0;
    }
}
/*เมื่อหน้าจอเหลือ 750 nav bar จะหายไปปุ่ม menu จะขึ้นมาแทนที่*/


/*@media screen and (min-width: 450px) {
    .menu {
        grid-template-columns: repeat(6) 1fr;
        grid-gap: 0;
    }
}*/
/* News*/


  
  /*.dropdown-content a:hover {
    background-color: #f1f1f1;
    text-decoration-color: #f9f9f9;
  }*/
    

  /*.dropdown:hover .dropbtn {
    background-color: #3a8ed8;
    
  }*/