@font-face {
    font-family: "Anuphan";
    src: url("../fonts/anuphan/Anuphan-Variable.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bs-font-sans-serif: "Anuphan", sans-serif;
    --bs-font-monospace: "Anuphan", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-primary: #2357a5;
    --bs-primary-rgb: 35, 87, 165;
    --bs-link-color: #2357a5;
    --bs-link-color-rgb: 35, 87, 165;
    --bs-link-hover-color: #173d77;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f7fb;
    color: #22344c;
    font-family: var(--bs-body-font-family);
    line-height: 1.75;
}
main { flex: 1; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { line-height: 1.5; font-weight: 600; }
a { overflow-wrap: anywhere; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid #5793eb; outline-offset: 3px; }
.navbar { box-shadow: 0 2px 14px #233f6706; }
.navbar-brand { font-size: 1rem; }
.navbar-brand img { object-fit: contain; }
.navbar .nav-link { border-radius: .6rem; padding-inline: .75rem; }
.navbar .nav-link.active { color: #2357a5; background: #edf3fd; font-weight: 600; }
.navbar .nav-admin-item { align-self: center; margin-left: .65rem; padding-left: .65rem; border-left: 1px solid var(--theme-border, #dce5f1); }
.navbar .nav-admin-link { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-width: 44px; min-height: 44px; padding: .5rem; color: var(--theme-primary, #2357a5); background: var(--theme-surface, #f5f7fb); transition: background-color .18s ease, color .18s ease; }
.navbar .nav-admin-link:hover, .navbar .nav-admin-link:focus-visible { color: var(--theme-deep, #143c78); background: var(--theme-tint, #eaf0f8); }
.navbar .nav-admin-link svg { flex-shrink: 0; }
@media (max-width: 991.98px) {
    .navbar .nav-admin-item { align-self: stretch; margin: .5rem 0 0; padding: .5rem 0 0; border-left: 0; border-top: 1px solid var(--theme-border, #dce5f1); }
    .navbar .nav-admin-link { display: flex; justify-content: flex-start; padding-inline: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .navbar .nav-admin-link { transition: none; } }
.hero {
    background: linear-gradient(125deg, #143c78, #256eaf);
    color: #fff;
    border-radius: 1.5rem;
    padding: clamp(1.5rem, 5vw, 4rem);
}
.hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.5; text-wrap: balance; }
.hero .badge { white-space: normal; line-height: 1.6; padding: .45rem .8rem; font-weight: 500; }
.card { border: 1px solid #e3e9f2; border-radius: 1rem; box-shadow: 0 4px 20px #233f6710; }
.card-body { padding: clamp(1.1rem, 3vw, 1.75rem); }
.card.table-responsive { overflow: auto; }
.table { --bs-table-color: #22344c; --bs-table-hover-bg: #f1f5fc; }
.table td, .table th { padding: .9rem 1rem; vertical-align: middle; }
.table th { background: #eef3fa; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.table td { overflow-wrap: anywhere; }
.btn { border-radius: .65rem; padding: .6rem 1rem; font-weight: 500; }
.btn-sm { padding: .4rem .75rem; }
.btn-primary {
    --bs-btn-bg: #2357a5;
    --bs-btn-border-color: #2357a5;
    --bs-btn-hover-bg: #173d77;
    --bs-btn-hover-border-color: #173d77;
    --bs-btn-active-bg: #173d77;
    --bs-btn-active-border-color: #173d77;
}
.btn-outline-primary {
    --bs-btn-color: #2357a5;
    --bs-btn-border-color: #2357a5;
    --bs-btn-hover-bg: #2357a5;
    --bs-btn-hover-border-color: #2357a5;
    --bs-btn-active-bg: #2357a5;
    --bs-btn-active-border-color: #2357a5;
}
.form-control, .form-select { min-height: 44px; border-color: #cfd9e7; border-radius: .65rem; }
.form-control:focus, .form-select:focus { border-color: #6b97d8; box-shadow: 0 0 0 .2rem #2357a51a; }
.form-label { font-weight: 500; }
.badge { line-height: 1.5; }
.conference-cover { width: 100%; height: auto; border-radius: 1rem; }
.home-guide-number { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: #edf3fd; color: #2357a5; font-weight: 600; }
.home-guide-card a { text-decoration: none; font-weight: 500; }
.public-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    width: fit-content;
    max-width: 100%;
    padding: .375rem;
    border: 1px solid #dce5f1;
    border-radius: 1rem;
    background: #eaf0f8;
    box-shadow: inset 0 1px 0 #ffffffb3;
}
.public-subnav .public-subnav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-height: 50px;
    padding: .65rem 1rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    background: transparent;
    color: #475d78;
    font-size: .925rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.public-subnav-icon { flex: 0 0 20px; color: #5578a6; }
.public-subnav .public-subnav-link:hover { color: #173d77; background: #fff; box-shadow: 0 2px 6px #233f670d; }
.public-subnav .public-subnav-link.active { color: #fff; background: #2357a5; border-color: #2357a5; box-shadow: 0 3px 8px #2357a52b; font-weight: 600; }
.public-subnav .public-subnav-link.active:hover { background: #1c4b92; }
.public-subnav-link.active .public-subnav-icon { color: inherit; }
.public-subnav .public-subnav-link:focus-visible { outline: 3px solid #5793eb; outline-offset: 2px; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .public-subnav .public-subnav-link { transition: none; } }
@media (max-width: 575.98px) {
    .public-subnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .public-subnav .public-subnav-link { justify-content: flex-start; min-height: 52px; padding: .65rem .75rem; font-size: .875rem; text-align: left; }
    .public-subnav .public-subnav-link:first-child:nth-last-child(3) { grid-column: 1 / -1; }
}
.guide-aside .list-group-item { background: transparent; font-size: .9rem; border-color: #e3e9f2; padding: .8rem 1rem; }
.guide-aside [aria-current="location"] { color: #2357a5; background: #edf3fd; font-weight: 600; }
.guide-section { scroll-margin-top: 100px; }
.guide-section summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; font-weight: 600; cursor: pointer; list-style: none; }
.guide-section summary::-webkit-details-marker { display: none; }
.guide-section summary::after { content: '+'; color: #2357a5; font-size: 1.3rem; }
.guide-section[open] summary::after { content: '−'; }
.guide-content { overflow-wrap: anywhere; line-height: 1.9; }
.guide-content .container { padding-inline: 0; }
.guide-content img { max-width: 100%; height: auto; }
.guide-content .calendar_item_time { display: none; }
.guide-content .table-responsive { overflow-x: auto; }
@media (min-width: 992px) { .guide-aside { position: sticky; top: 95px; } }
@media (max-width: 575.98px) { .guide-section summary { padding: 1rem; } .guide-content .table td { padding: .65rem; font-size: .85rem; } }
.thai-datepicker .modal-dialog { max-width: 420px; }
.thai-calendar-controls { display: grid; grid-template-columns: 40px minmax(0, 1fr) 90px 40px; gap: .4rem; }
.thai-calendar-controls .btn { padding: .25rem; font-size: 1.4rem; }
.thai-calendar-controls .form-control, .thai-calendar-controls .form-select { padding-left: .5rem; }
.thai-calendar-weekdays, .thai-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; text-align: center; }
.thai-calendar-weekdays { color: #64748b; font-size: .85rem; margin-bottom: .5rem; }
.thai-calendar-day { min-height: 42px; border: 1px solid transparent; border-radius: .6rem; background: #fff; color: #22344c; }
.thai-calendar-day:hover { background: #edf3fd; }
.thai-calendar-day[aria-current="date"] { border-color: #2357a5; }
.thai-calendar-day[aria-pressed="true"] { background: #2357a5; color: #fff; }
.pagination { flex-wrap: wrap; gap: .25rem; }
.static-content .container { padding-inline: 0; }
.static-content .list-group { gap: .4rem; }
.static-content .list-group-item { border: 1px solid #e3e9f2; border-radius: .65rem; padding: .8rem 1rem; }
.static-content .list-group-item.active { background: #2357a5; border-color: #2357a5; }
.static-content .tab-content { padding-left: .75rem; }
.static-content .tab-pane p:has(> b) { margin-top: 1.4rem; color: #173d77; }
.static-content .tab-pane > p:first-child { margin-top: 0; }
.static-content .intro_image img { border-radius: .65rem; }

@media (max-width: 991.98px) {
    .navbar-collapse { padding-block: .75rem; }
    .static-content [role="tablist"] { flex-direction: row; overflow-x: auto; padding: .2rem .2rem .75rem; margin-bottom: 1rem; }
    .static-content [role="tablist"] .list-group-item { flex: 0 0 200px; margin: 0; font-size: .9rem; }
    .static-content .tab-content { padding-left: 0; }
}
@media (max-width: 575.98px) {
    .navbar-brand { font-size: .9rem; }
    .navbar-brand img { width: 30px; height: 34px; }
    .hero .btn { flex: 1 1 100%; }
    .table td, .table th { padding: .75rem; }
    .table-responsive .table { min-width: 600px; }
}
@media print {
    nav, footer, .no-print { display: none !important; }
    body { display: block; background: #fff; }
    .card { box-shadow: none; }
    .table-responsive { overflow: visible; }
}

/* A compact language switch shares the active theme and remains touch-friendly. */
.nav-language-item { display: flex; align-items: center; padding: .25rem .4rem; }
.language-switch { display: inline-flex; gap: .15rem; padding: .2rem; border: 1px solid var(--bs-border-color); border-radius: .8rem; background: var(--bs-tertiary-bg); }
.language-choice { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; border-radius: .6rem; color: var(--bs-secondary-color); font-weight: 600; text-decoration: none; }
.language-choice:hover, .language-choice:focus-visible { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.language-choice.active { color: white; background: var(--bs-primary); box-shadow: 0 2px 6px #00000012; }
@media (max-width: 991.98px) { .nav-language-item { padding: .65rem 0; } }