body {
  /* background: linear-gradient(135deg, #6ec6ff 0%, #2196f3 100%); */
  /* background-color: DodgerBlue; */
  /* background-color: royalblue; */
  background: linear-gradient(135deg, DodgerBlue 0%, royalblue 100%);
  height: 100vh;
  overflow: hidden;
}


/* .top-ctn{
  background-color: cornflowerblue;
}
.top-ctn section {
  text-align: center;
  margin: auto;
  padding: 15px 0 10px 0;
  color: white;
  border-bottom: 3px solid steelblue;
} */


.i-container {
  margin: auto;
  max-width: 700px;
}
.card {
  background: rgba(255,255,255,0.95);
  border: none;
}
.card-header {
  /* background: linear-gradient(90deg, #2196f3 60%, cornflowerblue 100%); */
  background: royalblue;
  border-radius: 0; /* เพิ่มบรรทัดนี้ */
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px 0 rgba(33,150,243,0.08);
  margin: -0.5rem -0.5rem 1rem -0.5rem; /* เพิ่มบรรทัดนี้ (ปรับค่าตาม padding ของ .card) */
}
.form-control {
  background: #f4faff;
  border: 1px solid #b3e5fc;
  border-radius: 8px;
  transition: border-color 0.2s;
}
.form-control:focus {
  border-color: #2196f3;
  box-shadow: 0 0 0 0.15rem rgba(33,150,243,.15);
}
.btn-primary {
  /* background: linear-gradient(90deg, #2196f3 60%, #6ec6ff 100%); */
  /* background: linear-gradient(90deg, DodgerBlue 0%, royalblue 100%); */
  background: royalblue;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.2s;
}
.btn-primary:hover {
  filter: brightness(1.15);
}