/* รูปแบบใหม่ของ Version 3 ใช้ร่วมกับ Bootstrap และสีประจำเว็บไซต์เดิม */
:root {
    --bs-body-font-family: 'Sarabun', Tahoma, sans-serif;
    --bs-body-color: #23312b;
    --bs-primary: #146447;
    --bs-success: #1f7a55;
    --bs-border-color: #e0e9e4;
}

body {
    font-family: 'Sarabun', Tahoma, sans-serif;
    background: #f5f8f6;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { line-height: 1.45; letter-spacing: -.025em; }
a { text-underline-offset: .25em; }
:focus-visible { outline: 3px solid #caa85e; outline-offset: 4px; }
.container { max-width: 1240px; }
.utility-bar { font-size: .78rem; background: #073b2a; }
.brand-header { border: 0; }
.brand-header .container { padding-block: 1.2rem !important; }
.brand-logo { width: min(680px, 100%); max-height: 84px; }
.main-navbar { background: #fff; border-block: 1px solid #e0e9e4; box-shadow: 0 5px 15px #073b2a06; }
.main-navbar .navbar-brand { color: var(--green-900); letter-spacing: -.04em; font-size: 1.5rem; }
.main-navbar .nav-link { color: #55685d; border-radius: .65rem; padding: .6rem 1rem !important; font-weight: 600; font-size: .94rem; }
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active { color: var(--green-900); background: #eaf4ed; }
.navbar-toggler { border-color: #c7d8ce; }
.navbar-toggler-icon { filter: brightness(0) saturate(100%) invert(27%) sepia(20%) saturate(1347%) hue-rotate(105deg); }

/* จัด Hero เป็นสองส่วน พร้อมภาพใบไม้ซึ่งไม่รับการคลิกทับปุ่ม */
.hero { margin: 1.5rem auto 0; width: calc(100% - 3rem); max-width: 1440px; border-radius: 2rem; background: radial-gradient(ellipse at 100% 0%, #247a56 0%, #0a4d36 45%, #073b2a 100%); }
.hero-content { padding-block: clamp(3rem, 6vw, 6rem); padding-inline: clamp(1.5rem, 5vw, 4rem); }
.hero::after { pointer-events: none; width: 580px; height: 580px; right: -180px; top: -250px; }
.display-title { font-size: clamp(2.2rem, 4.1vw, 3.8rem); font-weight: 700; line-height: 1.4; letter-spacing: -.04em; }
.hero .lead { width: 100%; max-width: 530px; color: #d6e9de; font-size: 1.08rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .76rem; letter-spacing: .13em; }
.eyebrow::before { content: ''; width: 1.5rem; height: 2px; background: currentColor; }
.hero-art { position: relative; min-height: 340px; display: grid; place-items: center; pointer-events: none; }
.hero-art-orbit { position: absolute; inset: 0; border: 1px solid #ffffff20; border-radius: 50%; background: #ffffff04; }
.hero-art-orbit::after { content: ''; position: absolute; inset: 25px; border: 1px dashed #ffffff20; border-radius: 50%; }
.hero-leaf { position: relative; width: 85%; max-width: 330px; filter: drop-shadow(0 20px 25px #001d1940); }
.hero-art-caption { position: absolute; top: 12px; left: 8px; color: #d6e9de; padding: .65rem 1rem; background: #0a4d36; border: 1px solid #ffffff20; border-radius: 100px; font-size: .75rem; }
.hero-status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: #b9d98b; border-radius: 50%; }
.hero-art-label { position: absolute; bottom: 12px; right: 0; padding: 1rem 1.5rem; background: #f0f6e9; border-radius: 1rem; color: #146447; font-size: .85rem; box-shadow: 0 14px 35px #001d1920; }
.hero-art-label strong { font-size: 1.15rem; }

.btn { border-radius: .75rem; font-weight: 600; padding: .65rem 1.15rem; transition: background-color .2s, box-shadow .2s; }
.btn-lg { font-size: .98rem; padding: .9rem 1.4rem; }
.btn-success { --bs-btn-bg: #146447; --bs-btn-border-color: #146447; --bs-btn-hover-bg: #073b2a; --bs-btn-hover-border-color: #073b2a; }
.btn-outline-success { --bs-btn-color: #146447; --bs-btn-border-color: #c4d9cc; --bs-btn-hover-bg: #146447; --bs-btn-hover-border-color: #146447; }
.section-space { padding-block: clamp(2.8rem, 5vw, 4.8rem); }
.section-kicker { font-size: .8rem; letter-spacing: .06em; }
.section-title { font-weight: 700; }
.info-card, .news-card, .content-panel { border: 1px solid #e0e9e4; box-shadow: 0 4px 20px #073b2a04; border-radius: 1.25rem; }
.info-card { padding: 1.8rem; }
.info-card:hover { box-shadow: 0 14px 32px #073b2a0a; }
.info-icon { background: #e5f3eb; color: #146447; border-radius: 1rem; width: 3.5rem; height: 3.5rem; }
.news-card { position: relative; isolation: isolate; }
.news-card .card-body { padding: 1.6rem; }
.news-card h2, .news-card h3 { line-height: 1.65; }
.news-card .small { color: #718479 !important; font-size: .78rem; }
.news-card a { font-weight: 600; text-decoration: none; }
.news-image { aspect-ratio: 16/10; }

/* ทุกหน้าภายในใช้แบนเนอร์แบบกระชับและเมนูข้างแบบแยกรายการ */
.page-banner { background: #eaf3ed; color: #073b2a; border-bottom: 1px solid #dce9e1; padding-block: 2.8rem; }
.page-banner .eyebrow { color: #48745a; }
.page-banner h1 { font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 700; max-width: 1000px; }
.page-banner .lead { color: #587263; font-size: 1rem; max-width: 750px; }
.sidebar-nav { gap: .45rem; }
.sidebar-nav .list-group-item { border: 1px solid transparent; border-radius: .85rem !important; padding: 1rem 1.2rem; background: transparent; color: #597062; }
.sidebar-nav .list-group-item:hover { background: #eaf3ed; color: #073b2a; }
.sidebar-nav .list-group-item.active { color: #fff; background: #146447; border-color: #146447; box-shadow: 0 7px 18px #14644715; }
.sidebar-nav small { opacity: .75; font-size: .76rem; }
.content-panel { padding: clamp(1.25rem, 3vw, 2.4rem); }
.submenu-content-target { scroll-margin-top: 5.5rem; }
.submenu-content-target:focus { outline: none; }
.content-panel > .section-title { font-size: 1.65rem; }
.document-group { border: 1px solid #e0e9e4; border-left: 3px solid #caa85e; background: #f8faf8; padding: 1.25rem; border-radius: .85rem; }
.document-list { padding-left: 1.3rem; }
.document-list li { padding-block: .2rem; }
.document-list a:hover { text-decoration: underline; }
.stat-filter { padding: 1.3rem; background: #f3f7f4; border: 1px solid #e0e9e4; border-radius: 1rem; }
.form-label { font-size: .86rem; color: #395c48; }
.form-select { border-color: #d6e3da; border-radius: .65rem; min-height: 44px; }
.form-select:focus { border-color: #659f7c; box-shadow: 0 0 0 .2rem #1f7a5515; }
.chart-panel { border-radius: 1rem; padding: 1.25rem; }
.chart-panel h3 { font-size: 1.05rem; }
.table { --bs-table-striped-bg: #f3f7f4; --bs-table-border-color: #e6eee9; font-size: .94rem; }
.table thead th { color: #48745a; font-size: .8rem; padding-block: 1rem; }
.pagination { gap: .4rem; }
.pagination .page-link { border-radius: .65rem !important; font-size: .95rem; padding: .6rem 1rem; }
.site-footer { border-top: 4px solid #caa85e; background: #073b2a; }
.site-footer .small { color: #b6ccbf; }
.footer-mark { max-width: 280px; }

@media (max-width: 991.98px) {
    /* แสดงเนื้อหาก่อนเมนูย่อยบนมือถือและแท็บเล็ตตามจุดเปลี่ยนเลย์เอาต์ Bootstrap */
    .row > aside.col-lg-4 {
        order: 2;
    }

    .row > aside.col-lg-4 + .col-lg-8 {
        order: 1;
    }

    .main-navbar .navbar-nav { padding-block: .8rem; gap: .3rem; }
    .hero { width: calc(100% - 1.5rem); border-radius: 1.5rem; }
    .hero-art { min-height: 260px; max-width: 350px; margin: auto; }
    .hero-leaf { max-width: 250px; }
}

@media (max-width: 575.98px) {
    .brand-logo { max-height: 65px; }
    .brand-header .container { padding-block: .75rem !important; }
    .hero-content { padding-block: 2.5rem; }
    .hero-art { min-height: 230px; }
    .hero .btn { flex: 1; white-space: nowrap; }
    .page-banner { padding-block: 2rem; }
    .chart-panel { padding: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}