:root {
    --green-950: #073b2a;
    --green-900: #0a4d36;
    --green-800: #146447;
    --green-700: #1f7a55;
    --green-100: #e5f3eb;
    --green-50: #f3f9f5;
    --gold: #caa85e;
    --ink: #23312b;
}

body {
    color: var(--ink);
    background: #f7f9f8;
    font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
    line-height: 1.75;
}

a { color: var(--green-800); }
a:hover { color: var(--green-950); }

.utility-bar {
    color: #dcebe4;
    background: var(--green-950);
    font-size: .86rem;
}

.utility-bar a { color: #fff; text-decoration: none; }
.brand-header { background: #fff; border-bottom: 1px solid #d9e4de; }
.brand-logo { width: min(980px, 100%); max-height: 120px; object-fit: contain; object-position: left center; }

.main-navbar {
    background: linear-gradient(105deg, var(--green-900), var(--green-700));
    box-shadow: 0 4px 18px rgb(7 59 42 / 14%);
}

.main-navbar .nav-link { color: rgb(255 255 255 / 82%); padding: .9rem 1rem !important; }
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active { color: #fff; background: rgb(255 255 255 / 12%); }

.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(110deg, rgb(7 59 42 / 96%), rgb(31 122 85 / 84%)), url("../images/hero-01.jpg") center/cover;
}

.hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    right: -100px;
    top: -130px;
}

.hero-content { position: relative; z-index: 1; padding-block: clamp(4rem, 9vw, 8rem); }
.eyebrow { color: #d7e8b1; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.display-title { font-size: clamp(2.1rem, 5vw, 4.2rem); line-height: 1.2; font-weight: 800; }

.section-kicker { color: var(--green-700); font-weight: 700; letter-spacing: .05em; }
.section-title { color: var(--green-950); font-weight: 800; }
.section-space { padding-block: clamp(3rem, 7vw, 6rem); }

.info-card,
.news-card,
.content-panel {
    background: #fff;
    border: 1px solid #dfe9e3;
    border-radius: 1rem;
    box-shadow: 0 12px 35px rgb(7 59 42 / 7%);
}

.info-card { height: 100%; padding: 1.5rem; transition: transform .2s ease, box-shadow .2s ease; }
.info-card:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgb(7 59 42 / 12%); }
.info-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .8rem; color: #fff; background: var(--green-700); font-size: 1.35rem; }

.news-image { aspect-ratio: 16 / 10; object-fit: cover; background: var(--green-100); }
.news-card {
    position: relative;
    overflow: hidden;
    height: 100%;
}
.news-card .card-body { padding: 1.35rem; }

.page-banner { color: #fff; background: linear-gradient(115deg, var(--green-950), var(--green-700)); padding-block: 3.5rem; }
.page-banner h1 { font-weight: 800; }
.sidebar-nav .list-group-item { padding: .9rem 1rem; border-color: #dfe9e3; }
.sidebar-nav .list-group-item.active { background: var(--green-800); border-color: var(--green-800); }
.content-panel { padding: clamp(1.25rem, 4vw, 2.5rem); }

.metric-number { color: var(--green-800); font-size: 2rem; font-weight: 800; }
.document-list a { text-decoration: none; }
.document-list li { margin-bottom: .75rem; }
.document-group { padding: 1rem 1.25rem; background: var(--green-50); border-left: 4px solid var(--green-700); border-radius: .4rem; }

.chart-panel {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #dfe9e3;
    border-radius: .8rem;
}

.chart-container {
    position: relative;
    min-height: 340px;
}

.chart-container-wide {
    min-height: 420px;
}

.stat-filter {
    padding: 1rem;
    background: var(--green-50);
    border: 1px solid #d5e7dc;
    border-radius: .8rem;
}

/* เว้นระยะด้านบนเมื่อกลับมาที่กราฟหลังส่งตัวกรอง เพื่อไม่ให้เมนู sticky บังหัวข้อ */
.statistics-panel {
    scroll-margin-top: 5.5rem;
}

.anchor-section {
    scroll-margin-top: 4.5rem;
}

.pagination .page-link {
    color: var(--green-800);
    border-color: #d5e7dc;
}

.pagination .page-item.active .page-link {
    color: #fff;
    background: var(--green-800);
    border-color: var(--green-800);
}

.site-footer { color: #e6f2ec; background: var(--green-950); }
.footer-mark { width: min(360px, 100%); max-height: 70px; object-fit: contain; object-position: left center; }
.skip-link { position: fixed; z-index: 9999; top: 1rem; left: 1rem; padding: .7rem 1rem; background: #fff; }

@media (max-width: 575.98px) {
    .brand-logo { max-height: 85px; }
    .utility-bar span { display: none; }
}