@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/kanit/kanit-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Sarabun';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/sarabun/sarabun-regular.ttf') format('truetype');
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: 'Sarabun','Kanit','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*background-color: rgb(248 249 250);*/
    background-color: #fdfdfd;
    color: #444;
}

/* Bootstrap Colors Override */
:root {
    --bs-primary: #bde0fe; /* Pastel Blue */
    --bs-secondary: #ffc8dd; /* Pastel Pink */
    --bs-success: #a8e6cf; /* Pastel Mint */
    --bs-info: #cdeffd;
    --bs-warning: #ffe5b4;
    --bs-danger: #ffb3ba;
    --bs-dark: #444;
    --bs-light: #fdfdfd;
}
/* Navbar */
.navbar {
    background: linear-gradient(90deg, #bde0fe, #ffc8dd);
}

.navbar-brand {
    font-weight: 600;
    color: #444 !important;
}

.nav-link {
    color: #444 !important;
    transition: 0.2s;
}

    .nav-link:hover {
        color: #ff70a6 !important;
    }

/* ปรับปุ่มทุกแบบให้เป็นโทน Pastel */

/* Primary */
.btn-primary {
    background-color: #bde0fe;
    border-color: #bde0fe;
    color: #444;
}

    .btn-primary:hover {
        background-color: #a2d2ff;
        border-color: #a2d2ff;
    }

/* Secondary */
.btn-secondary {
    background-color: #ffc8dd;
    border-color: #ffc8dd;
    color: #444;
}

    .btn-secondary:hover {
        background-color: #ffb3c6;
        border-color: #ffb3c6;
    }

/* Success */
.btn-success {
    background-color: #a8e6cf;
    border-color: #a8e6cf;
    color: #444;
}

    .btn-success:hover {
        background-color: #94d7bb;
        border-color: #94d7bb;
    }

/* Danger */
.btn-danger {
    background-color: #ffb3ba;
    border-color: #ffb3ba;
    color: #444;
}

    .btn-danger:hover {
        background-color: #ff9aa2;
        border-color: #ff9aa2;
    }

/* Warning */
.btn-warning {
    background-color: #ffe5b4;
    border-color: #ffe5b4;
    color: #444;
}

    .btn-warning:hover {
        background-color: #ffd79a;
        border-color: #ffd79a;
    }

/* Info */
.btn-info {
    background-color: #cdeffd;
    border-color: #cdeffd;
    color: #444;
}

    .btn-info:hover {
        background-color: #b3e6fc;
        border-color: #b3e6fc;
    }

/* Dark (Pastel Version) */
.btn-dark {
    background-color: #cdb4db;
    border-color: #cdb4db;
    color: #444;
}

    .btn-dark:hover {
        background-color: #b89bc7;
        border-color: #b89bc7;
    }

/* Outline Primary */
.btn-outline-primary {
    color: #bde0fe;
    border-color: #bde0fe;
}

    .btn-outline-primary:hover {
        background-color: #bde0fe;
        color: #444;
        border-color: #bde0fe;
    }

/* Outline Secondary */
.btn-outline-secondary {
    color: #ffc8dd;
    border-color: #ffc8dd;
}

    .btn-outline-secondary:hover {
        background-color: #ffc8dd;
        color: #444;
        border-color: #ffc8dd;
    }

/* Outline Success */
.btn-outline-success {
    color: #a8e6cf;
    border-color: #a8e6cf;
}

    .btn-outline-success:hover {
        background-color: #a8e6cf;
        color: #444;
        border-color: #a8e6cf;
    }

/* Outline Danger */
.btn-outline-danger {
    color: #ffb3ba;
    border-color: #ffb3ba;
}

    .btn-outline-danger:hover {
        background-color: #ffb3ba;
        color: #444;
        border-color: #ffb3ba;
    }

/* Outline Warning */
.btn-outline-warning {
    color: #ffe5b4;
    border-color: #ffe5b4;
}

    .btn-outline-warning:hover {
        background-color: #ffe5b4;
        color: #444;
        border-color: #ffe5b4;
    }

/* Outline Info */
.btn-outline-info {
    color: #cdeffd;
    border-color: #cdeffd;
}

    .btn-outline-info:hover {
        background-color: #cdeffd;
        color: #444;
        border-color: #cdeffd;
    }

/* Outline Dark (Pastel Version) */
.btn-outline-dark {
    color: #cdb4db;
    border-color: #cdb4db;
}

    .btn-outline-dark:hover {
        background-color: #cdb4db;
        color: #444;
        border-color: #cdb4db;
    }
    
/* Card */
.card {
    border-radius: 1rem;
    border: none;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.06);
}

.card-header {
    background: linear-gradient(90deg, #cdb4db, #ffc8dd);
    color: #444;
    font-weight: 600;
}

.card-body {
    background-color: #ffffff;
}


/* Card Footer - Pastel Theme */
.card-footer {
    background: #fdfdfd; /* พื้นหลังอ่อน */
    border-top: 1px solid #eee; /* เส้นบางๆ */
    color: #555;
}

    /* ถ้าอยากใช้ Gradient อ่อนๆ แบบ header */
    .card-footer.pastel {
        background: linear-gradient(90deg, #fdfdfd, #fce7f3); /* ขาวอมชมพู */
        color: #444;
    }
/* Footer */
.footer {
    background: #cdb4db;
    color: #444;
    padding: 20px 0;
    text-align: center;
}

    .footer a {
        color: #ff70a6;
        text-decoration: none;
    }

        .footer a:hover {
            text-decoration: underline;
        }

.alert {
    position: fixed;
    top: 4rem;
    margin-top: 0.5rem;
    z-index: 50;
}

.footer[b-lcgbenmjoc] {
    line-height: 25px;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
}

.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399FF;
}

.autocomplete-group {
    padding: 2px 5px;
}

    .autocomplete-group strong {
        display: block;
        border-bottom: 1px solid #000;
    }

.navbar-brand img {
    object-fit: contain;
}