*{box-sizing: border-box;}
@import "https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600&display=swap";
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
html,body{font-family: "Inter","Sarabun",sans-serif;font-weight: 500;font-size: 15px;}
p{margin: 0 0 5px;}
h2{font-size: 22px;margin-bottom: 10px;}
body{background-color: #eee; color: #333; margin: 0; padding: 0;}
#buffet{background-color: #fff; padding: 0; width: 900px; max-width: 100%; margin: 30px auto;border-radius: 7px;overflow: hidden;}
#buffet>div{padding:20px 100px;border-radius: 7px; }
#buffet h1{font-size: 32px; font-weight: 600; margin: 0 0 20px;text-align: center;margin-top: 30px;}
#buffet h1+div{text-align: center;font-size: 16px;font-weight: 500;margin-bottom: 40px;}
#buffet label{display: block; margin: 0 0 1px;}
em{color: red;font-style: normal;font-weight: 600;font-size: 18px;}
#buffet label+p{font-size: 12px;color: #aeb4bd;font-style: italic;margin: 10px 0 5px;}
input[type='text'],input[type='email'],input[type='number']{border: 1px solid #cfd6dd;padding: 0.5rem 0.75rem ;border-radius: 0.5rem;width: 100%;font-size: 16px;font-family: "Inter", "Sarabun",sans-serif;}
input[type='text']:focus,input[type='email']:focus,input[type='number']:focus{border-color: #007bff;outline: 0;box-shadow: none;}
input[type='number']{text-align: center;}
textarea{border: 1px solid #cfd6dd;padding: 0.5rem 0.75rem ;border-radius: 0.5rem;width: 100%;font-size: 16px;font-family: "Inter", "Sarabun",sans-serif;min-height: 100px !important;}
textarea:focus{border-color: #007bff;outline: 0;box-shadow: none;}
.form-group{margin: 0 0 20px;}
table{width: 100%;border-collapse: collapse;border: 1px solid #cfd6dd;border-radius: 7px;overflow: hidden;}
table thead>tr>th{background-color: #f4f6f9;border: 1px solid #cfd6dd;color: #2b404d;padding:  18px;}
table tbody>tr>td{background-color: #f9f9f9;border: 1px solid #cfd6dd;color: #2b404d;padding:  10px 18px}
#buffet tbody>tr>td:last-child{text-align: right}
table thead>tr>th:nth-child(3){width: 1%;white-space: nowrap;}
table tbody>tr>td:nth-child(2){text-align: center;}
table tbody>tr>td:first-child{text-align: center;}
table thead>tr>th{text-align: center;}
#summary{text-align: right;padding: 20px 0;}
#summary input:read-only{background-color: #f1f1f1;color: #000;}
#summary>div>div{display: grid;grid-template-columns:170px 120px 80px;white-space: nowrap; gap: 10px;justify-content: right;align-items: center;margin: 0 0 15px;height: 40px;text-align: left;}
#summary>div{width: 500px;text-align: left;display: inline-block;}
.text-red{color: red;font-size: 14px;}
h2+ul{margin: 0;padding: 0 0 0 35px;}
h2+ul>li{ list-style-type: disc; margin: 0 0 5px; }
#agree{display: flex;align-items: center;font-size: 16px;color: blue;gap: 5px;margin: 30px 0 10px;}
#agree input[type='checkbox']{margin: 0;width: 16px;height: 16px;display: inline-block;margin-top: -2px;}
button[type='submit']{background-color: #007bff;color: white;padding: 12px 40px;border: 0;border-radius: 5px;cursor: pointer;font-size: 20px;transition: .1s all;width: 100%;}
button[type='submit']:hover{background-color: rgb(25, 102, 184);transform: .3s all;}
button[type='button']{background-color: #9f6140;color: white;padding: 10px 15px;border: 0;border-radius: 7px;font-size: 14px;cursor: pointer;transition: .1s all;width: 100%;}
button[type='button']:hover{background-color: #ac5425;transform: .3s all;}
.error{color: red;font-size: 13px;font-weight: 400;margin-top: 5px;}

#btn-booknow{display: inline-block;padding: 12px 40px;border-radius: 4px;text-align: center;font-size: 20px;background: #9f6140;color: #fff;text-decoration: none;}


@media (max-width:992px) {
  body{padding:0;margin:0}
  #buffet{width: 100%;margin: 0;border-radius: 0;}
  #buffet>div{padding: 20px 50px 50px;}
}

@media (max-width:660px) {
  #buffet>div{padding: 20px 30px 50px;} 
  #summary>div{width: 100%;}
  #summary>div>div{display: block;height: initial;position: relative;}
  #summary>div>div input{text-align: left;padding-right: 50px;}
  #summary>div>div span{position: absolute;bottom: 8px;right: 5px;}
  #summary button{margin-top: 5px;}

  table{border: 0;border-radius: 0;}
  table, thead, tbody, th, td, tr {display: block;}
  thead tr { display: none; }
  tr { margin-bottom: 1rem; border: 1px solid #ccc;}
  td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; text-align: right !important; }
  td:before { position: absolute; left: 0; top: 0;white-space: nowrap; font-weight: bold;padding: 10px; }
  td:nth-of-type(1):before { content: "Age"; }
  td:nth-of-type(2):before { content: "Price (THB)"; }
  td:nth-of-type(3):before { content: "Number of Persons"; }
  td:nth-of-type(4):before { content: "Total Price"; }
  td input[type='number']{width: 100px;text-align: left;}
  tbody,thead,tr{border: 0 !important;}
  tr>td:first-child{background: #ffe994;border: 0 !important;}
  #agree{align-items: flex-start;display: grid;grid-template-columns: 20px auto;gap:5px}
  #agree input{margin-top: 4px !important;}
}