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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* อย่างน้อยเท่ากับความสูงจอ */
}

main {
    flex: 1; /* ดัน footer ลงไปล่าง */
}

/* @media (max-width: 768px) {
    .navbar .position-absolute {
        position: static !important;
        transform: none !important;
        text-align: center;
        margin-top: 10px;
        z-index: 999;
    }
} */

#footer {
    width: 100%;
    background-color: #f8f9fa;
    padding: 40px 0;
    font-family: Arial, sans-serif;
    position: relative;
}

.footer-content {
    text-align: center;
}

.footer-logo img {
    height: 75px;
    margin: 0 10px;
}

.footer-text {
    font-size: 14px;
    color: #6c757d;
    margin-left: 5px;
}

.social-icons img {
    max-height: 35px;
    margin: 0 5px;
    transition: transform 0.3s ease-in-out;
}

.social-icons img:hover {
    transform: scale(1.1);
}

.footer-widget {
    text-align: left;
    font-size: 14px;
    margin-top: 30px;
}

.footer-title {
    font-size: 16px;
    font-weight: bold;
    color: #09254f;
    margin-bottom: 15px;
    padding-left: 10px;
}

.footer-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.footer-icon {
    width: 35px;
    color: #28a745; /* Green success color */
    text-align: center;
    font-size: 16px;
}

.footer-text {
    width: 100%;
}

/* COPY From source AR_detect */
.resized-image {
    width: 500px;  /* Adjust to your desired width */
    height: auto;  /* Keeps the aspect ratio */
}

.resized-image-jasper {
    width: 10px;  /* Adjust to your desired width */
    height: auto;  /* Keeps the aspect ratio */
}

.navbar-brand img {
    margin-right: 10px;  /* Adds space between the logo and text */
}

.container {
    max-width: 800px; /* Centralized layout */
}

.cme-box {
    background-color: #f8f9fa; /* Light gray */
    border-left: 5px solid #0a315a; /* Blue highlight */
    padding: 15px;
    max-width: 400px;
}

.text-primary {
    color: #0d2239;
}

.shadow-sm {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}

.table-bordered {
    border: 1px solid #ddd;
}

.table th, .table td {
    padding: 10px;
    border: 1px solid #686868;
}

.table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Flatpickr Calendar Customization */
.flatpickr-calendar {
    transform: scale(0.95);
    position: top right;
}

.flatpickr-calendar .flatpickr-months {
    display: none; /* ซ่อนเดือน/ปี */
}