html, body {
    height: 100%;
    margin: 0;
}

body { 
    font-family: 'Kanit', sans-serif; 
    background: #f0f9ff; 
    margin:0; 
    padding:0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* ให้ body สูงเต็มจอ */
}
main {
    flex: 1; /* เนื้อหาตรงกลางยืด */
}

.form-label { font-weight: 200; color: #01050f; }
    

/*หัวเว็บและ footer */
.navbar-spacing {
      padding-left: 5% !important;
      padding-right: 5% !important;
}
.menu-btn {
    color: linear-gradient(90deg,#0ea5e9,#10b981)
}

.menu-btn:hover {
    opacity: 0.95;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(5, 251, 161, 0.2);
}

.menu-btn:active {
    transform: translateY(0);
}

.title-gradient { 
    background: linear-gradient(90deg,#0f172a,#2563eb,#38bdf8); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

.navbar-gradient {
    background: linear-gradient(90deg, #e5f2f8, #a0f5d9);
}

.footer-gradient {
    background: linear-gradient(90deg, #e5f2f8, #9febd1);
    border-radius: 1rem;
}


.thead-custom th {
  background-color: #b9fbe5 !important;
  color: #090909 !important;
   font-weight: 300 !important;
}


/* Card */
.card-custom {
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
}

.card-header {
    font-weight: 600;
    color: #2c3e50;
    background: linear-gradient(90deg, #d2eaf5, #73f4c9) !important;
}

/* Title Gradient */
.title-gradient {
    background: linear-gradient(90deg,#0ea5e9,#10b981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Input focus */
.form-control:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 0.25rem rgba(14,165,233,0.25);
}

/* Buttons */
.btn-primary-custom {
    background: linear-gradient(90deg,#46baf0,#10b981);
    color: #fff;
    font-weight: 600;
    border: none;
}
.btn-primary-custom:hover {
    filter: brightness(1.1);
}
.btn-outline-custom {
    color: #0ea5e9;
    border-color: #0ea5e9;
}
.btn-outline-custom:hover {
    background-color: #0ea5e9;
    color: #fff;
}

/* Modal header */
.modal-header-custom {
    background: linear-gradient(90deg,#0ea5e9,#10b981);
    color: #fff;
}

/* Error message */
.error-message {
    color: #e74c3c;
    font-size: 0.9rem;
    margin-top: 4px;
}

.is-invalid {
    border-color: #e74c3c !important;
}