/* ═══════════════════════════════════════════════════════════════════════
   css/tb1-budget.css — หน้า "ข้อมูลงบประมาณ" (budget.php) · v4.0 · 29 ก.ย. 2569
   มือถือก่อน · โหมดมืด ([data-theme=dark] / html.dark-mode) · ความคมชัดสูง (html.tb1-contrast-high)
   สีข้อมูล (ตรวจตาบอดสีแล้ว): รายรับ #2a78d6 · รายจ่าย #eb6834 · รับ>จ่าย #1baf7a · เงินสะสม #4a3aa7
   แอนิเมชันทำงานเฉพาะเมื่อมี JavaScript (html.bd-js) และผู้ใช้ไม่ได้ตั้งลดการเคลื่อนไหว
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --bd-ink1: #0F172A;
    --bd-ink2: #334155;
    --bd-ink3: #56657A;
    --bd-page: #F4F7FB;
    --bd-card: #FFFFFF;
    --bd-alt: #F1F5F9;
    --bd-line: #E2E8F0;
    --bd-line2: #CBD5E1;
    --bd-navy: #1E3A8A;
    --bd-brand: #1D4ED8;
    --bd-link: #1D4ED8;
    --bd-gold: #B45309;
    --bd-inc: #2a78d6;
    --bd-exp: #eb6834;
    --bd-rem: #1baf7a;
    --bd-acc: #4a3aa7;
    --bd-stu: #5598e7;
    --bd-r1: #104281;
    --bd-r2: #1c5cab;
    --bd-r3: #2a78d6;
    --bd-r4: #5598e7;
    --bd-r5: #86b6ef;
    --bd-r-ink1: #fff;
    --bd-r-ink2: #fff;
    --bd-r-ink3: #fff;
    --bd-r-ink4: #0F172A;
    --bd-r-ink5: #0F172A;
    --bd-warn-ink: #9A3412;
    --bd-ok-ink: #047857;
    --bd-sh: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(30, 58, 138, .07);
    --bd-sh2: 0 4px 12px rgba(30, 58, 138, .08), 0 18px 44px rgba(30, 58, 138, .12);
    --bd-r: 18px;
    --bd-rs: 12px;
    --bd-mw: var(--tb1-page-max-width, 1280px);
    --bd-gut: 16px;
    --bd-fd: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    --bd-fb: var(--tb1-font-body, 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif);
    --bd-ease: cubic-bezier(.22, .8, .24, 1);
}

[data-theme="dark"],
html.dark,
html.dark-mode,
body.dark-mode {
    --bd-ink1: #F1F5F9;
    --bd-ink2: #CBD5E1;
    --bd-ink3: #9FB0C6;
    --bd-page: #0A1322;
    --bd-card: #111C2E;
    --bd-alt: #16233A;
    --bd-line: #22324A;
    --bd-line2: #34465F;
    --bd-link: #93C5FD;
    --bd-gold: #FBBF24;
    --bd-inc: #3987e5;
    --bd-exp: #d95926;
    --bd-rem: #199e70;
    --bd-acc: #9085e9;
    --bd-stu: #6da7ec;
    --bd-r1: #b7d3f6;
    --bd-r2: #86b6ef;
    --bd-r3: #5598e7;
    --bd-r4: #2a78d6;
    --bd-r5: #1c5cab;
    --bd-r-ink1: #0F172A;
    --bd-r-ink2: #0F172A;
    --bd-r-ink3: #0F172A;
    --bd-r-ink4: #fff;
    --bd-r-ink5: #fff;
    --bd-warn-ink: #FDBA74;
    --bd-ok-ink: #6EE7B7;
    --bd-sh: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .28);
    --bd-sh2: 0 6px 18px rgba(0, 0, 0, .35), 0 24px 50px rgba(0, 0, 0, .4);
}

@media (min-width: 640px) {
    :root {
        --bd-gut: 24px;
    }
}

/* ═══ พื้นฐาน ═══ */
.bd-page,
.bd-page *,
.bd-page *::before,
.bd-page *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 132px;
}

body.bd-page {
    margin: 0;
    font-family: var(--bd-fb);
    font-size: 16px;
    line-height: 1.65;
    color: var(--bd-ink1);
    background: var(--bd-page);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* รีเซ็ตแบบน้ำหนักศูนย์ (:where) คลาสของหน้าจึงกำหนดระยะทับได้เสมอ */
:where(.bd-main, .bd-hero) :where(h1, h2, h3, p, ul, ol) {
    margin: 0;
    padding: 0;
}

:where(.bd-main, .bd-hero) :where(ul, ol) {
    list-style: none;
}

:where(.bd-main) figure {
    margin: 0;
}

.bd-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    white-space: nowrap;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bd-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 10000;
    padding: .7rem 1.2rem;
    border-radius: 0 0 12px 12px;
    background: var(--bd-navy);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: top .2s;
}

.bd-skip:focus {
    top: 0;
}

.bd-page :focus-visible {
    outline: 3px solid #F59E0B;
    outline-offset: 2px;
    border-radius: 6px;
}

.bd-main {
    max-width: var(--bd-mw);
    margin: 0 auto;
    padding: 0 var(--bd-gut) 3rem;
    outline: none;
}

.bd-main a {
    color: var(--bd-link);
}

/* ═══ ส่วนหัว ═══ */
.bd-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(120% 90% at 0% 0%, #2563EB 0%, transparent 55%),
        radial-gradient(90% 90% at 100% 20%, #0EA5E9 0%, transparent 50%),
        linear-gradient(135deg, #172554 0%, #1E3A8A 45%, #1D4ED8 100%);
    padding: 2.25rem var(--bd-gut) 6.5rem;
    isolation: isolate;
}

[data-theme="dark"] .bd-hero,
html.dark-mode .bd-hero {
    background:
        radial-gradient(110% 90% at 0% 0%, rgba(37, 99, 235, .45) 0%, transparent 55%),
        radial-gradient(90% 90% at 100% 20%, rgba(14, 165, 233, .28) 0%, transparent 50%),
        linear-gradient(135deg, #060D1A 0%, #0B1A33 50%, #0F2447 100%);
}

.bd-hero-deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.bd-hero-deco .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .5;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%);
}

.bd-hero-deco .o1 {
    width: 340px;
    height: 340px;
    left: -90px;
    top: -120px;
}

.bd-hero-deco .o2 {
    width: 220px;
    height: 220px;
    right: 12%;
    top: -60px;
}

.bd-hero-deco .o3 {
    width: 160px;
    height: 160px;
    left: 38%;
    bottom: -70px;
}

.bd-hero-bars {
    position: absolute;
    right: 3%;
    bottom: 3.6rem;
    width: min(300px, 42vw);
    height: auto;
    opacity: .22;
}

.bd-hero-bars rect {
    fill: #fff;
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.bd-hero-in {
    position: relative;
    max-width: var(--bd-mw);
    margin: 0 auto;
    text-align: center;
}

.bd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .95rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .01em;
    backdrop-filter: blur(6px);
}

.bd-hero h1 {
    margin: .9rem 0 .35rem;
    font-family: var(--bd-fd);
    font-weight: 800;
    font-size: clamp(2rem, 6.5vw, 3.25rem);
    line-height: 1.25;
    letter-spacing: -.01em;
    text-shadow: 0 2px 18px rgba(15, 23, 42, .35);
}

.bd-lead {
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    color: rgba(255, 255, 255, .92);
}

.bd-lead strong {
    color: #FDE68A;
    font-weight: 700;
}

.bd-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem .6rem;
    margin-top: 1rem !important;
}

.bd-hero-meta li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .28);
    font-size: .88rem;
    color: rgba(255, 255, 255, .95);
}

.bd-years {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem;
    margin-top: 1.35rem;
    padding: .3rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .32);
    border: 1px solid rgba(255, 255, 255, .18);
}

.bd-years a {
    min-width: 64px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .9rem;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background .2s, color .2s, transform .2s;
}

.bd-years a:hover {
    background: rgba(255, 255, 255, .16);
}

.bd-years a.is-on {
    background: #fff;
    color: var(--bd-navy);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
}

.bd-years small {
    font-weight: 500;
    font-size: .72rem;
    margin-left: .2rem;
}

.bd-banner {
    max-width: var(--bd-mw);
    margin: 1rem auto 0;
    padding: .8rem 1rem;
    border-radius: 12px;
    background: #FEF3C7;
    color: #78350F;
    font-weight: 600;
    position: relative;
    z-index: 3;
}

/* ═══ ตัวเลขสำคัญ ═══ */
.bd-kpis {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: -4.5rem;
}

@media (min-width: 980px) {
    .bd-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

.bd-kpi {
    position: relative;
    padding: 1rem 1rem 1.05rem;
    border-radius: var(--bd-r);
    background: var(--bd-card);
    border: 1px solid var(--bd-line);
    box-shadow: var(--bd-sh);
    overflow: hidden;
    min-width: 0;
}

.bd-kpi::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--k, var(--bd-inc));
}

.bd-kpi.k-inc {
    --k: var(--bd-inc);
}

.bd-kpi.k-exp {
    --k: var(--bd-exp);
}

.bd-kpi.k-rem {
    --k: var(--bd-rem);
}

.bd-kpi.k-acc {
    --k: var(--bd-acc);
}

.bd-kpi-top {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.bd-kpi-top h2 {
    font-family: var(--bd-fb);
    font-size: .92rem;
    font-weight: 600;
    color: var(--bd-ink2);
    line-height: 1.35;
}

.bd-kpi-ic {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: var(--k);
    font-size: .9rem;
}

.bd-kpi-v {
    margin-top: .55rem !important;
    font-size: clamp(1.15rem, 4.6vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bd-ink1);
    overflow-wrap: anywhere;
}

.bd-kpi-v .bd-num {
    white-space: normal;
}

.bd-kpi-v small {
    font-size: .8rem;
    font-weight: 500;
    color: var(--bd-ink3);
}

.bd-kpi-f {
    margin-top: .45rem !important;
    font-size: .82rem;
    color: var(--bd-ink3);
    line-height: 1.45;
}

.bd-chg {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--bd-alt);
    color: var(--bd-ink1);
    font-weight: 600;
}

.bd-meter {
    height: 8px;
    margin-top: .6rem;
    border-radius: 999px;
    background: var(--bd-alt);
    overflow: hidden;
}

.bd-meter span {
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: 999px;
    background: var(--bd-exp);
    transform-origin: left center;
}

/* ═══ ข้อมูลปัจจุบันจากระบบ ═══ */
.bd-live {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--bd-r);
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--bd-rem) 12%, transparent) 0%, transparent 60%),
        var(--bd-card);
    border: 1px solid color-mix(in srgb, var(--bd-rem) 45%, var(--bd-line));
    box-shadow: var(--bd-sh);
}

.bd-live-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .2rem 1rem;
}

.bd-live-h h2 {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--bd-ink1);
}

.bd-live-h p {
    font-size: .84rem;
    color: var(--bd-ink3);
}

.bd-pulse {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bd-rem);
    flex: none;
}

.bd-pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--bd-rem);
    opacity: 0;
}

.bd-live-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin-top: .75rem !important;
}

@media (min-width: 760px) {
    .bd-live-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.bd-live-stats li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ic k k" "ic v u";
    column-gap: .6rem;
    align-items: center;
    padding: .6rem .75rem;
    border-radius: 12px;
    background: var(--bd-alt);
}

.bd-live-stats li>i {
    grid-area: ic;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bd-rem) 18%, transparent);
    color: var(--bd-ink1);
}

.bd-live-stats .k {
    grid-area: k;
    font-size: .82rem;
    color: var(--bd-ink2);
    font-weight: 600;
}

.bd-live-stats b {
    grid-area: v;
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--bd-ink1);
}

.bd-live-stats small {
    grid-area: u;
    align-self: end;
    font-size: .78rem;
    color: var(--bd-ink3);
}

.bd-live-f {
    margin-top: .6rem !important;
    font-size: .84rem;
    color: var(--bd-ink3);
}

.bd-dot.stu {
    background: var(--bd-stu);
}

.bd-dot.live {
    background: repeating-linear-gradient(135deg, var(--bd-rem) 0 3px, color-mix(in srgb, var(--bd-rem) 45%, transparent) 3px 6px);
}

.bd-col .bar.live {
    background: repeating-linear-gradient(135deg, var(--bd-rem) 0 5px, color-mix(in srgb, var(--bd-rem) 55%, transparent) 5px 10px);
    box-shadow: inset 0 0 0 2px var(--bd-rem);
    opacity: 1;
}

.bd-col.is-live .x {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    bottom: -2.1rem;
    color: var(--bd-ink1);
    font-weight: 700;
}

.bd-col.is-live .x em {
    font-style: normal;
    font-weight: 600;
    font-size: .68rem;
    color: var(--bd-ink3);
}

.bd-col.is-live .v {
    color: var(--bd-ink1);
}

.bd-mini.has-live,
.bd-vcard.has-live {
    padding-bottom: 2.7rem;
}

.bd-tbl tr.is-live th,
.bd-tbl tr.is-live td {
    background: color-mix(in srgb, var(--bd-rem) 10%, transparent);
}

.bd-tbl tr.is-live small {
    display: block;
    font-weight: 500;
}

/* ═══ เมนูหัวข้อ ═══ */
.bd-subnav {
    position: sticky;
    top: var(--bd-top, 56px);
    z-index: 20;
    display: flex;
    gap: .4rem;
    margin: 1.25rem calc(var(--bd-gut) * -1) 0;
    padding: .6rem var(--bd-gut);
    overflow-x: auto;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--bd-page) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bd-line);
}

.bd-subnav::-webkit-scrollbar {
    display: none;
}

.bd-subnav a {
    flex: none;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: .3rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--bd-line2);
    background: var(--bd-card);
    color: var(--bd-ink2) !important;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}

.bd-subnav a:hover {
    border-color: var(--bd-brand);
}

.bd-subnav a.is-on {
    background: var(--bd-navy);
    border-color: var(--bd-navy);
    color: #fff !important;
}

[data-theme="dark"] .bd-subnav a.is-on,
html.dark-mode .bd-subnav a.is-on {
    background: #93C5FD;
    border-color: #93C5FD;
    color: #0A1322 !important;
}

/* ═══ ตัวเลข 2 แหล่ง ═══ */
.bd-compare {
    margin-top: 1.5rem;
    padding: 1.1rem;
    border-radius: var(--bd-r);
    background: var(--bd-card);
    border: 1px solid var(--bd-line);
    border-left: 5px solid var(--bd-gold);
    box-shadow: var(--bd-sh);
}

.bd-private {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .45rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--bd-alt);
    border: 1px solid var(--bd-line2);
    font-size: .76rem;
    font-weight: 600;
    color: var(--bd-ink2);
}

.bd-compare.is-match {
    border-left-color: var(--bd-rem);
}

.bd-compare-h h2 {
    font-family: var(--bd-fd);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--bd-ink1);
}

.bd-compare-h h2 i {
    color: var(--bd-gold);
}

.bd-compare-h p {
    margin-top: .25rem !important;
    color: var(--bd-ink2);
    font-size: .93rem;
}

.bd-compare-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    margin-top: .9rem;
    align-items: stretch;
}

@media (min-width: 760px) {
    .bd-compare-grid {
        grid-template-columns: 1fr auto 1fr;
    }
}

.bd-cmp {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .85rem 1rem;
    border-radius: var(--bd-rs);
    background: var(--bd-alt);
    min-width: 0;
}

.bd-cmp-k {
    font-size: .85rem;
    font-weight: 600;
    color: var(--bd-ink2);
}

.bd-cmp b {
    font-size: clamp(1.25rem, 4vw, 1.6rem);
    color: var(--bd-ink1);
}

.bd-cmp b small {
    font-size: .8rem;
    font-weight: 500;
    color: var(--bd-ink3);
}

.bd-cmp-d {
    font-size: .82rem;
    color: var(--bd-ink3);
    overflow-wrap: anywhere;
}

.bd-cmp-vs {
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bd-ink3);
    line-height: 1;
}

/* ═══ หัวข้อส่วน ═══ */
.bd-sec {
    margin-top: 3rem;
}

.bd-sec-h {
    text-align: center;
    margin-bottom: 1.4rem;
}

.bd-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bd-inc) 12%, transparent);
    color: var(--bd-ink1);
    font-size: .8rem;
    font-weight: 700;
}

.bd-badge i {
    color: var(--bd-inc);
}

.bd-sec-h h2 {
    margin-top: .5rem !important;
    font-family: var(--bd-fd);
    font-size: clamp(1.45rem, 4.5vw, 2rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--bd-ink1);
}

.bd-sec-h p {
    max-width: 720px;
    margin: .35rem auto 0 !important;
    color: var(--bd-ink3);
    font-size: .95rem;
}

/* ═══ การ์ด ═══ */
.bd-card {
    border-radius: var(--bd-r);
    background: var(--bd-card);
    border: 1px solid var(--bd-line);
    box-shadow: var(--bd-sh);
    padding: 1.1rem;
    min-width: 0;
}

.bd-card-h {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.bd-card-h h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bd-ink1);
    line-height: 1.4;
}

.bd-card-h p {
    font-size: .85rem;
    color: var(--bd-ink3);
}

.bd-card-ic {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bd-inc) 12%, transparent);
    color: var(--bd-inc);
}

.bd-card-sum {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    margin: .8rem 0 .2rem;
    padding: .55rem .75rem;
    border-radius: 10px;
    background: var(--bd-alt);
    font-size: .86rem;
    color: var(--bd-ink2);
}

.bd-card-sum b {
    color: var(--bd-ink1);
}

.bd-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 900px) {
    .bd-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bd-cards> :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* ═══ เส้นทางของเงิน ═══ */
.bd-flow-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 1000px) {
    .bd-flow-wrap {
        grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.bd-flow {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr) minmax(0, 1fr);
    height: calc(var(--h) + 2rem);
    padding: 1rem .6rem;
    border-radius: var(--bd-r);
    background: var(--bd-card);
    border: 1px solid var(--bd-line);
    box-shadow: var(--bd-sh);
}

@media (min-width: 640px) {
    .bd-flow {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
        padding: 1rem 1.1rem;
    }
}

.bd-flow-svg {
    width: 100%;
    height: var(--h);
    overflow: visible;
    display: block;
}

.bd-flow-col {
    position: relative;
    height: var(--h);
}

.bd-flow-lb {
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    padding: 0 .5rem;
    transition: opacity .25s;
}

.bd-flow-col.left .bd-flow-lb {
    text-align: right;
}

.bd-flow-lb .nm {
    font-size: .84rem;
    font-weight: 700;
    color: var(--bd-ink1);
}

.bd-flow-lb .am {
    font-size: .8rem;
    color: var(--bd-ink3);
    white-space: normal;
}

@media (min-width: 640px) {
    .bd-flow-lb .nm {
        font-size: .95rem;
    }

    .bd-flow-lb .am {
        font-size: .86rem;
    }
}

.bd-flow .st-inc {
    stop-color: var(--bd-inc);
}

.bd-flow .st-exp {
    stop-color: var(--bd-exp);
}

.bd-flow .st-rem {
    stop-color: var(--bd-rem);
}

.bd-rib {
    fill-opacity: .42;
    transition: fill-opacity .25s;
    cursor: help;
}

.bd-rib.to-exp {
    fill: url(#bdg-exp);
}

.bd-rib.to-rem {
    fill: url(#bdg-rem);
}

.bd-rib:hover {
    fill-opacity: .75;
}

.bd-flow.hl .bd-rib {
    fill-opacity: .12;
}

.bd-flow.hl .bd-rib.on {
    fill-opacity: .78;
}

.bd-flow.hl .bd-flow-lb {
    opacity: .45;
}

.bd-flow.hl .bd-flow-lb.on {
    opacity: 1;
}

.bd-node {
    fill: var(--bd-inc);
}

.bd-node.exp {
    fill: var(--bd-exp);
}

.bd-node.rem {
    fill: var(--bd-rem);
}

.bd-node.over {
    fill: var(--bd-ink3);
}

.bd-spark {
    fill: none;
    stroke: #fff;
    stroke-opacity: 0;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 26;
    pointer-events: none;
}

.bd-insights {
    padding: 1.1rem;
    border-radius: var(--bd-r);
    background: linear-gradient(160deg, color-mix(in srgb, var(--bd-inc) 9%, var(--bd-card)) 0%, var(--bd-card) 70%);
    border: 1px solid var(--bd-line);
    box-shadow: var(--bd-sh);
}

.bd-insights h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--bd-ink1);
    margin-bottom: .7rem !important;
}

.bd-insights h3 i {
    color: var(--bd-gold);
}

.bd-insights li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .65rem 0;
    border-top: 1px dashed var(--bd-line2);
    color: var(--bd-ink2);
    font-size: .94rem;
}

.bd-insights li:first-child {
    border-top: 0;
}

.bd-insights li i {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--bd-inc) 13%, transparent);
    color: var(--bd-inc);
    font-size: .85rem;
    margin-top: .05rem;
}

.bd-insights strong {
    color: var(--bd-ink1);
    font-variant-numeric: tabular-nums;
}

.bd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin-top: .8rem !important;
    font-size: .84rem;
    color: var(--bd-ink2);
}

.bd-legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.bd-dot {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--bd-inc);
    margin-right: .15rem;
}

.bd-dot.exp {
    background: var(--bd-exp);
}

.bd-dot.rem {
    background: var(--bd-rem);
}

.bd-dot.acc {
    background: var(--bd-acc);
}

/* ═══ สัดส่วนแหล่งรายรับ ═══ */
.bd-stack {
    display: flex;
    gap: 2px;
    height: 46px;
    margin: 1rem 0 .9rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bd-card);
}

.bd-stack .seg {
    flex: 0 0 var(--w);
    min-width: 4px;
    display: grid;
    place-items: center;
    background: var(--bd-r3);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    cursor: help;
    transform-origin: left center;
}

.bd-stack .seg:focus-visible {
    outline-offset: -3px;
}

.bd-stack .s1,
.bd-sw.s1 {
    background: var(--bd-r1);
    color: var(--bd-r-ink1);
}

.bd-stack .s2,
.bd-sw.s2 {
    background: var(--bd-r2);
    color: var(--bd-r-ink2);
}

.bd-stack .s3,
.bd-sw.s3 {
    background: var(--bd-r3);
    color: var(--bd-r-ink3);
}

.bd-stack .s4,
.bd-sw.s4 {
    background: var(--bd-r4);
    color: var(--bd-r-ink4);
}

.bd-stack .s5,
.bd-sw.s5 {
    background: var(--bd-r5);
    color: var(--bd-r-ink5);
}

.bd-share-list li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    grid-template-areas: "sw nm pc" "sw am am";
    gap: .1rem .65rem;
    align-items: center;
    padding: .6rem 0;
    border-top: 1px solid var(--bd-line);
}

@media (min-width: 640px) {
    .bd-share-list li {
        grid-template-columns: 14px minmax(0, 1fr) 80px 150px;
        grid-template-areas: "sw nm pc am";
    }
}

.bd-share-list li:first-child {
    border-top: 0;
}

.bd-sw {
    grid-area: sw;
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.bd-share-list .nm {
    grid-area: nm;
    font-weight: 600;
    color: var(--bd-ink1);
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.bd-share-list .nm small {
    font-weight: 400;
    font-size: .8rem;
    color: var(--bd-ink3);
}

.bd-share-list .pc {
    grid-area: pc;
    font-weight: 700;
    text-align: right;
}

.bd-share-list .am {
    grid-area: am;
    text-align: right;
    color: var(--bd-ink2);
    font-size: .9rem;
}

/* ═══ แท่งคู่รายรับ/รายจ่าย ═══ */
.bd-pairs {
    margin-top: .6rem !important;
}

.bd-pair {
    padding: .7rem .2rem;
    border-top: 1px solid var(--bd-line);
    border-radius: 8px;
    outline-offset: 2px;
    cursor: help;
    transition: background .2s;
}

.bd-pair:first-child {
    border-top: 0;
}

.bd-pair:hover {
    background: var(--bd-alt);
}

.bd-pair-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
}

.bd-pair-n {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    font-weight: 600;
    font-size: .93rem;
    color: var(--bd-ink1);
    min-width: 0;
}

.bd-pair-n i {
    color: var(--bd-ink3);
    font-size: .82rem;
    width: 1rem;
    text-align: center;
}

.bd-util {
    flex: none;
    font-size: .78rem;
    font-weight: 700;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--bd-alt);
    color: var(--bd-ink2);
}

.bd-util.is-low {
    color: var(--bd-warn-ink);
    background: color-mix(in srgb, var(--bd-exp) 14%, transparent);
}

.bd-pair-bars {
    display: grid;
    gap: 3px;
    margin: .45rem 0 .35rem;
}

.bd-bar {
    display: block;
    height: 10px;
    width: var(--w);
    min-width: 2px;
    border-radius: 0 5px 5px 0;
    background: var(--bd-inc);
    transform-origin: left center;
}

.bd-bar.exp {
    background: var(--bd-exp);
}

.bd-pair-v {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1rem;
    font-size: .84rem;
    color: var(--bd-ink3);
}

.bd-pair-v b {
    color: var(--bd-ink1);
    font-weight: 600;
}

.bd-pair-v .bd-dot {
    width: 8px;
    height: 8px;
}

/* ═══ ต่อนักเรียน ═══ */
.bd-ps {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

@media (min-width: 760px) {
    .bd-ps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

.bd-ps-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ic k" "ic v" "ic u";
    column-gap: .85rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border-radius: var(--bd-r);
    background: var(--bd-card);
    border: 1px solid var(--bd-line);
    box-shadow: var(--bd-sh);
}

.bd-ps-ic {
    grid-area: ic;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--bd-navy), var(--bd-inc));
    color: #fff;
    font-size: 1.15rem;
}

.bd-ps-tile .k {
    grid-area: k;
    font-size: .88rem;
    color: var(--bd-ink2);
    font-weight: 600;
}

.bd-ps-tile b {
    grid-area: v;
    font-size: 1.55rem;
    line-height: 1.25;
    color: var(--bd-ink1);
}

.bd-ps-tile small {
    grid-area: u;
    font-size: .8rem;
    color: var(--bd-ink3);
}

.bd-minis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 760px) {
    .bd-minis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bd-mini figcaption,
.bd-chart figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem 1rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--bd-ink1);
}

.bd-mini figcaption i,
.bd-chart figcaption i.fa-solid {
    color: var(--bd-inc);
    margin-right: .3rem;
}

.bd-chart figcaption .bd-legend {
    margin: 0 !important;
    font-weight: 500;
}

.bd-cols {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: .6rem;
    height: 170px;
    margin-top: .9rem;
    padding-bottom: .1rem;
    border-bottom: 1px solid var(--bd-line2);
}

.bd-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    position: relative;
}

.bd-col .v {
    font-size: .8rem;
    font-weight: 700;
    color: var(--bd-ink2);
    margin-bottom: .2rem;
}

.bd-col .bar {
    display: block;
    width: min(44px, 100%);
    height: calc(var(--h) * .72);
    min-height: 3px;
    border-radius: 6px 6px 0 0;
    background: var(--bd-inc);
    opacity: .55;
    transform-origin: center bottom;
}

.bd-col .bar.stu {
    background: var(--bd-stu);
}

.bd-col.is-cur .bar {
    opacity: 1;
}

.bd-col.is-cur .v {
    color: var(--bd-ink1);
}

.bd-col .x {
    position: absolute;
    bottom: -1.55rem;
    font-size: .78rem;
    color: var(--bd-ink3);
    font-variant-numeric: tabular-nums;
}

.bd-col.is-cur .x {
    color: var(--bd-ink1);
    font-weight: 700;
}

.bd-mini {
    padding-bottom: 2.1rem;
}

/* ═══ แนวโน้ม ═══ */
.bd-trend-notes {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    margin-bottom: 1rem !important;
}

@media (min-width: 900px) {
    .bd-trend-notes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bd-trend-notes li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .8rem .95rem;
    border-radius: var(--bd-rs);
    background: var(--bd-card);
    border: 1px solid var(--bd-line);
    font-size: .92rem;
    color: var(--bd-ink2);
}

.bd-trend-notes i {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bd-inc) 13%, transparent);
    color: var(--bd-inc);
}

.bd-trend-notes strong {
    color: var(--bd-ink1);
}

.bd-trend {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 900px) {
    .bd-trend {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }
}

.bd-plot {
    position: relative;
    height: 240px;
    margin: 1rem 0 1.7rem 2.2rem;
}

.bd-grid span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--y);
    border-top: 1px solid var(--bd-line);
}

.bd-grid span:first-child {
    border-top-style: dashed;
}

.bd-grid span:last-child {
    border-top: 1px solid var(--bd-line2);
}

.bd-grid em {
    position: absolute;
    right: calc(100% + .4rem);
    top: -.62rem;
    font-style: normal;
    font-size: .75rem;
    color: var(--bd-ink3);
    font-variant-numeric: tabular-nums;
}

.bd-groups {
    position: absolute;
    inset: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: .4rem;
}

.bd-grp {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    text-decoration: none;
    border-radius: 8px;
    transition: background .2s;
}

.bd-grp:hover,
.bd-grp:focus-visible {
    background: color-mix(in srgb, var(--bd-inc) 8%, transparent);
}

.bd-grp .bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
}

.bd-grp .vb {
    position: relative;
    display: block;
    width: min(26px, 40%);
    height: var(--h);
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--bd-inc);
    transform-origin: center bottom;
}

.bd-grp .vb.exp {
    background: var(--bd-exp);
}

.bd-grp.one .vb {
    width: min(40px, 62%);
}

.bd-grp .vb.acc {
    background: var(--bd-acc);
}

.bd-grp .vb em {
    position: absolute;
    left: 50%;
    bottom: calc(100% + .2rem);
    transform: translateX(-50%);
    font-style: normal;
    font-size: .75rem;
    font-weight: 700;
    color: var(--bd-ink2);
    white-space: nowrap;
}

.bd-grp:not(.is-cur) .vb {
    opacity: .72;
}

.bd-grp .x {
    position: absolute;
    bottom: -1.5rem;
    font-size: .8rem;
    color: var(--bd-ink3);
    font-variant-numeric: tabular-nums;
}

.bd-grp.is-cur .x {
    color: var(--bd-ink1);
    font-weight: 700;
}

.bd-grp.is-cur .x::after {
    content: '';
    display: block;
    height: 3px;
    border-radius: 3px;
    background: var(--bd-ink1);
    margin-top: 1px;
}

/* ═══ ความคุ้มค่า ═══ */
.bd-vnotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    margin-bottom: 1rem !important;
}

@media (min-width: 760px) {
    .bd-vnotes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bd-vnotes li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    border-radius: var(--bd-rs);
    background: var(--bd-card);
    border: 1px solid var(--bd-line);
    box-shadow: var(--bd-sh);
    color: var(--bd-ink2);
    font-size: .94rem;
}

.bd-vnotes li>i {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--bd-rem) 16%, transparent);
    color: var(--bd-ink1);
}

.bd-vnotes strong {
    color: var(--bd-ink1);
    font-variant-numeric: tabular-nums;
}

.bd-growth figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem 1rem;
    font-weight: 700;
    color: var(--bd-ink1);
}

.bd-growth figcaption i.fa-solid {
    color: var(--bd-rem);
    margin-right: .3rem;
}

.bd-growth figcaption .bd-legend {
    margin: 0 !important;
    font-weight: 500;
}

.bd-growth-hint {
    margin-top: .2rem !important;
    font-size: .84rem;
    color: var(--bd-ink3);
}

.bd-dot.vref {
    background: var(--bd-exp);
}

.bd-dot.vout {
    background: var(--bd-rem);
}

.bd-glist {
    position: relative;
    margin-top: .8rem !important;
}

.bd-g {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "lb pv" "tr tr" "ft ft";
    gap: .2rem .6rem;
    padding: .55rem .3rem;
    border-top: 1px solid var(--bd-line);
    border-radius: 8px;
    cursor: help;
}

.bd-g:first-child {
    border-top: 0;
}

.bd-g:hover {
    background: var(--bd-alt);
}

@media (min-width: 760px) {
    .bd-g {
        grid-template-columns: 14rem minmax(0, 1fr) 10.5rem;
        grid-template-areas: "lb tr pv" "lb tr ft";
        align-items: center;
    }
}

.bd-g .lb {
    grid-area: lb;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .92rem;
    color: var(--bd-ink1);
}

.bd-g .lb i {
    width: 1.1rem;
    text-align: center;
    color: var(--bd-ink3);
}

.bd-g .pv {
    grid-area: pv;
    text-align: right;
    font-weight: 800;
    color: var(--bd-ink1);
}

.bd-g .pv small {
    font-weight: 600;
    color: var(--bd-ink3);
}

.bd-g .ft {
    grid-area: ft;
    font-size: .8rem;
    color: var(--bd-ink3);
    text-align: left;
}

@media (min-width: 760px) {
    .bd-g .ft {
        text-align: right;
    }
}

.bd-g .track {
    grid-area: tr;
    position: relative;
    display: block;
    height: 14px;
    border-radius: 4px;
    background:
        linear-gradient(to right, transparent calc(var(--ref) - 1px), var(--bd-exp) calc(var(--ref) - 1px), var(--bd-exp) calc(var(--ref) + 1px), transparent calc(var(--ref) + 1px)),
        linear-gradient(to right, transparent calc(var(--zero) - .5px), var(--bd-line2) calc(var(--zero) - .5px), var(--bd-line2) calc(var(--zero) + .5px), transparent calc(var(--zero) + .5px)),
        var(--bd-alt);
}

.bd-g .fill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: var(--a);
    width: calc(var(--b) - var(--a));
    min-width: 2px;
    border-radius: 0 4px 4px 0;
    background: var(--bd-rem);
    transform-origin: left center;
}

.bd-g.k-ref .fill {
    background: var(--bd-exp);
}

.bd-g.is-clip .fill {
    border-radius: 0;
    -webkit-mask: linear-gradient(to left, transparent 0, transparent 6px, #000 6px, #000 9px, transparent 9px, transparent 12px, #000 12px);
    mask: linear-gradient(to left, transparent 0, transparent 6px, #000 6px, #000 9px, transparent 9px, transparent 12px, #000 12px);
}

.bd-gaxis {
    position: relative;
    height: 1.2rem;
    margin: .1rem 0 0 !important;
    font-size: .75rem;
    color: var(--bd-ink3);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 760px) {
    .bd-gaxis {
        margin-left: calc(14rem + .6rem + .3rem) !important;
        margin-right: calc(10.5rem + .6rem + .3rem) !important;
    }
}

.bd-gaxis span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.bd-gaxis span:first-child {
    transform: none;
}

.bd-gaxis span:last-child {
    transform: translateX(-100%);
}

.bd-growth {
    margin-bottom: 1rem;
}

.bd-vgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 700px) {
    .bd-vgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .bd-vgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bd-vcard {
    padding-bottom: 2.1rem;
    display: flex;
    flex-direction: column;
}

.bd-vcard figcaption {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--bd-ink1);
}

.bd-vcard figcaption .t i {
    color: var(--bd-inc);
    margin-right: .25rem;
}

.bd-vchip {
    flex: none;
    padding: .05rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bd-rem) 16%, transparent);
    color: var(--bd-ink1);
    font-size: .82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.bd-vchip.down {
    background: color-mix(in srgb, var(--bd-exp) 15%, transparent);
}

.bd-vcard-big {
    margin-top: .45rem !important;
    font-size: 1.2rem;
    color: var(--bd-ink1);
}

.bd-vcard-big i {
    font-size: .85rem;
    color: var(--bd-ink3);
    margin: 0 .2rem;
}

.bd-vcard-big small {
    font-size: .8rem;
    color: var(--bd-ink3);
}

.bd-vcard-sub {
    margin-top: .15rem !important;
    font-size: .82rem;
    color: var(--bd-ink3);
}

.bd-cols.sm {
    height: 130px;
    margin-top: auto;
    padding-top: .8rem;
}

.bd-cols.sm .v {
    font-size: .72rem;
}

.bd-col .bar.inc {
    background: var(--bd-inc);
}

.bd-col .bar.exp {
    background: var(--bd-exp);
}

.bd-col .bar.st {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: none;
    overflow: hidden;
}

.bd-col .bar.st i {
    display: block;
    min-height: 1px;
}

.bd-col .bar.st i.s1 {
    background: var(--bd-r1);
}

.bd-col .bar.st i.s2 {
    background: var(--bd-r2);
}

.bd-col .bar.st i.s3 {
    background: var(--bd-r3);
}

.bd-col .bar.st i.s4 {
    background: var(--bd-r4);
}

.bd-col .bar.st i.s5 {
    background: var(--bd-r5);
}

.bd-legend.sm {
    margin-top: 1.9rem !important;
    font-size: .78rem;
    gap: .25rem .7rem;
}

.bd-legend.sm .bd-sw {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.bd-vcard .bd-legend.sm+* {
    margin-top: 0;
}

.bd-vtbl td,
.bd-vtbl th {
    white-space: nowrap;
}

.bd-vcave {
    margin-top: 1rem;
}

.bd-vcave summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--bd-ink1);
}

.bd-vcave summary i {
    color: var(--bd-inc);
    margin-right: .3rem;
}

.bd-vcave ul {
    margin-top: .6rem !important;
}

.bd-vcave li {
    position: relative;
    padding: .4rem 0 .4rem 1.1rem;
    border-top: 1px solid var(--bd-line);
    font-size: .9rem;
    color: var(--bd-ink2);
}

.bd-vcave li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bd-rem);
}

.bd-vcave b {
    color: var(--bd-ink1);
}

/* ═══ ตาราง ═══ */
.bd-tbl-card {
    padding: .4rem;
    margin-top: 1rem;
}

.bd-scroll {
    overflow-x: auto;
    border-radius: 12px;
}

.bd-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.bd-tbl caption {
    caption-side: bottom;
    text-align: left;
    padding: .6rem .8rem;
    font-size: .8rem;
    color: var(--bd-ink3);
}

.bd-tbl th,
.bd-tbl td {
    padding: .62rem .8rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--bd-line);
    color: var(--bd-ink1);
}

.bd-tbl thead th {
    position: sticky;
    top: 0;
    background: var(--bd-navy);
    color: #fff;
    font-weight: 700;
    font-size: .86rem;
    white-space: nowrap;
}

[data-theme="dark"] .bd-tbl thead th,
html.dark-mode .bd-tbl thead th {
    background: #1B2B45;
}

.bd-tbl thead th:first-child {
    border-top-left-radius: 10px;
}

.bd-tbl thead th:last-child {
    border-top-right-radius: 10px;
}

.bd-tbl .c-num,
.bd-hist td {
    text-align: right;
    white-space: nowrap;
}

.bd-hist th a {
    font-weight: 700;
}

.bd-tbl tr.is-cur td,
.bd-tbl tr.is-cur th {
    background: color-mix(in srgb, var(--bd-inc) 9%, transparent);
    font-weight: 700;
}

.bd-tbl td.is-diff {
    color: var(--bd-warn-ink);
}

.bd-main-tbl td.c-code,
.bd-main-tbl th.c-code {
    width: 4.2rem;
}

.bd-main-tbl td.c-code {
    color: var(--bd-ink3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bd-main-tbl tr.sec th,
.bd-main-tbl tr.sec td {
    background: var(--bd-alt);
    font-weight: 700;
    color: var(--bd-ink1);
}

.bd-main-tbl tr.hdr td {
    color: var(--bd-ink2);
    font-weight: 600;
}

.bd-main-tbl tr.lv2 .c-name,
.bd-main-tbl tr.hdr.lv2 td:last-child {
    padding-left: 1.8rem;
}

.bd-main-tbl tr.empty td {
    color: var(--bd-ink3);
}

.bd-main-tbl tr.empty .c-num {
    color: var(--bd-ink3);
}

.bd-main-tbl td.neg {
    color: var(--bd-warn-ink);
    font-weight: 600;
}

.bd-main-tbl.compact tr.empty {
    display: none;
}

.bd-main-tbl tfoot tr.tot th,
.bd-main-tbl tfoot tr.tot td {
    background: color-mix(in srgb, var(--bd-inc) 10%, var(--bd-card));
    font-weight: 800;
    font-size: .98rem;
    border-top: 2px solid var(--bd-inc);
}

.bd-main-tbl tfoot tr.rep th,
.bd-main-tbl tfoot tr.rep td {
    font-weight: 600;
    color: var(--bd-ink2);
}

.bd-tbl small {
    font-weight: 400;
    color: var(--bd-ink3);
}

.bd-tbl-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .5rem .8rem;
}

.bd-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 42px;
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--bd-line2);
    background: var(--bd-card);
    color: var(--bd-ink1) !important;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
}

.bd-btn:hover {
    border-color: var(--bd-brand);
    background: var(--bd-alt);
}

.bd-btn:active {
    transform: translateY(1px);
}

.bd-btn[aria-pressed="true"] {
    background: var(--bd-navy);
    border-color: var(--bd-navy);
    color: #fff !important;
}

.bd-btn[hidden] {
    display: none;
}

/* ตารางหลักบนจอเล็ก: แต่ละแถวเป็นบล็อก */
@media (max-width: 639px) {
    .bd-main-tbl thead {
        display: none;
    }

    .bd-main-tbl,
    .bd-main-tbl tbody,
    .bd-main-tbl tfoot,
    .bd-main-tbl tr {
        display: block;
        width: 100%;
    }

    .bd-main-tbl tr {
        display: grid;
        grid-template-columns: 3.4rem minmax(0, 1fr);
        padding: .55rem .5rem;
        border-bottom: 1px solid var(--bd-line);
    }

    .bd-main-tbl th,
    .bd-main-tbl td {
        display: block;
        border: 0;
        padding: .1rem .2rem;
    }

    .bd-main-tbl tr.sec,
    .bd-main-tbl tr.tot,
    .bd-main-tbl tr.rep {
        grid-template-columns: minmax(0, 1fr);
    }

    .bd-main-tbl tr.sec {
        border-radius: 10px;
        background: var(--bd-alt);
        margin-top: .5rem;
    }

    .bd-main-tbl tr.sec th,
    .bd-main-tbl tr.sec td {
        background: transparent;
    }

    .bd-main-tbl .c-code {
        width: auto;
        grid-row: span 4;
    }

    .bd-main-tbl .c-num {
        display: flex;
        justify-content: space-between;
        gap: .6rem;
        text-align: right;
    }

    .bd-main-tbl .c-num::before {
        content: attr(data-label);
        color: var(--bd-ink3);
        font-weight: 500;
        font-size: .82rem;
    }

    .bd-main-tbl tr.sec .c-num,
    .bd-main-tbl tr.tot .c-num,
    .bd-main-tbl tr.rep .c-num {
        grid-column: 1 / -1;
    }

    .bd-main-tbl tr.lv2 .c-name {
        padding-left: .2rem;
    }

    .bd-main-tbl tr.hdr td[colspan] {
        grid-column: 2;
    }

    .bd-main-tbl tr.rep td:empty {
        display: none;
    }

    /* แถวที่ไม่มีตัวเลข: ย่อเหลือบรรทัดเดียว */
    .bd-main-tbl tr.empty .c-num {
        display: none;
    }

    .bd-main-tbl tr.empty .c-code {
        grid-row: auto;
    }

    .bd-main-tbl tr.empty .c-name::after {
        content: ' · ไม่มีตัวเลข';
        color: var(--bd-ink3);
        font-size: .82rem;
    }

    .bd-stack .seg b .u {
        display: none;
    }

    .bd-main-tbl tfoot tr.tot {
        border-radius: 10px;
        background: color-mix(in srgb, var(--bd-inc) 10%, var(--bd-card));
        border-top: 2px solid var(--bd-inc);
    }

    .bd-main-tbl tfoot tr.tot th,
    .bd-main-tbl tfoot tr.tot td {
        background: transparent;
        border-top: 0;
    }
}

/* ═══ ความต้องการ ═══ */
.bd-needs {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
}

@media (min-width: 760px) {
    .bd-needs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bd-need {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border-radius: var(--bd-r);
    background: var(--bd-card);
    border: 1px solid var(--bd-line);
    box-shadow: var(--bd-sh);
    transition: transform .25s var(--bd-ease), box-shadow .25s;
}

.bd-need:hover {
    transform: translateY(-2px);
    box-shadow: var(--bd-sh2);
}

.bd-need-ic {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #F59E0B, #EA580C);
    color: #fff;
    font-size: 1.1rem;
}

.bd-need h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bd-ink1);
    line-height: 1.4;
}

.bd-need p {
    margin-top: .2rem !important;
    font-size: .9rem;
    color: var(--bd-ink2);
}

.bd-projects {
    margin-top: 1rem;
}

.bd-projects h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bd-ink1);
    margin-bottom: .7rem !important;
}

.bd-projects h3 i {
    color: var(--bd-gold);
}

.bd-projects ul {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.bd-projects li {
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--bd-alt);
    border: 1px solid var(--bd-line);
    font-size: .86rem;
    color: var(--bd-ink1);
}

/* ═══ ที่มาของข้อมูล ═══ */
.bd-about h2 {
    font-family: var(--bd-fd);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bd-ink1);
    margin-bottom: .6rem !important;
}

.bd-about h2 i {
    color: var(--bd-inc);
}

.bd-about>ul li {
    position: relative;
    padding: .45rem 0 .45rem 1.1rem;
    font-size: .92rem;
    color: var(--bd-ink2);
    border-top: 1px solid var(--bd-line);
}

.bd-about>ul li:first-child {
    border-top: 0;
}

.bd-about>ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bd-inc);
}

.bd-about>ul b {
    color: var(--bd-ink1);
    margin-right: .3rem;
}

.bd-audit {
    margin-top: 1rem;
    padding: .8rem 1rem;
    border-radius: var(--bd-rs);
    border: 1px dashed var(--bd-line2);
    background: var(--bd-alt);
}

.bd-audit summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--bd-ink1);
}

.bd-audit summary small {
    font-weight: 500;
    color: var(--bd-ink3);
}

.bd-audit ul {
    margin-top: .6rem !important;
}

.bd-audit li {
    display: flex;
    gap: .6rem;
    padding: .45rem 0;
    border-top: 1px solid var(--bd-line);
    font-size: .88rem;
    color: var(--bd-ink2);
}

.bd-audit li b {
    display: block;
    color: var(--bd-ink1);
}

.bd-audit li i {
    margin-top: .2rem;
}

.bd-audit .lv-ok i {
    color: var(--bd-ok-ink);
}

.bd-audit .lv-warn i {
    color: var(--bd-warn-ink);
}

.bd-audit .lv-info i {
    color: var(--bd-inc);
}

.bd-audit-f {
    margin-top: .6rem !important;
    font-size: .84rem;
    color: var(--bd-ink3);
}

/* ═══ กล่องข้อความลอย ═══ */
.bd-tip {
    position: fixed;
    z-index: 9999;
    max-width: min(320px, calc(100vw - 24px));
    padding: .55rem .75rem;
    border-radius: 10px;
    background: #0F172A;
    color: #F8FAFC;
    font-size: .84rem;
    line-height: 1.5;
    white-space: pre-line;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .bd-tip,
html.dark-mode .bd-tip {
    background: #F1F5F9;
    color: #0F172A;
}

/* ═══ แอนิเมชัน (เฉพาะเมื่อมี JS และไม่ได้ตั้งลดการเคลื่อนไหว) ═══ */
@media (prefers-reduced-motion: no-preference) {

    .bd-hero-deco .o1 {
        animation: bdFloat 16s ease-in-out infinite alternate;
    }

    .bd-hero-deco .o2 {
        animation: bdFloat 20s ease-in-out -6s infinite alternate-reverse;
    }

    .bd-hero-deco .o3 {
        animation: bdFloat 24s ease-in-out -3s infinite alternate;
    }

    .bd-js .bd-hero-bars rect {
        animation: bdRise 1.1s var(--bd-ease) both;
        animation-delay: calc(var(--i) * 110ms + .2s);
    }

    .bd-js .bd-hero-in>* {
        animation: bdUp .8s var(--bd-ease) both;
    }

    .bd-js .bd-hero-in>*:nth-child(2) {
        animation-delay: .08s;
    }

    .bd-js .bd-hero-in>*:nth-child(3) {
        animation-delay: .16s;
    }

    .bd-js .bd-hero-in>*:nth-child(4) {
        animation-delay: .24s;
    }

    .bd-js .bd-hero-in>*:nth-child(5) {
        animation-delay: .32s;
    }

    /* เผยทีละส่วนเมื่อเลื่อนถึง */
    .bd-js .bd-rv {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .7s var(--bd-ease), transform .7s var(--bd-ease);
        transition-delay: calc(var(--i, 0) * 90ms);
    }

    .bd-js .bd-rv.is-in,
    .bd-js.bd-ready .bd-rv {
        opacity: 1;
        transform: none;
    }

    .bd-js .bd-rv .bd-bar,
    .bd-js .bd-rv .bd-meter span,
    .bd-js .bd-rv .bd-stack .seg {
        transform: scaleX(0);
        transition: transform 1s var(--bd-ease);
    }

    .bd-js .bd-rv .bd-bar {
        transition-delay: calc(var(--i, 0) * 70ms + .25s);
    }

    .bd-js .bd-rv .bd-pair {
        transition-delay: 0s;
    }

    .bd-js .bd-rv .bd-pair .bd-bar {
        transition-delay: calc(var(--i, 0) * 80ms + .25s);
    }

    .bd-js .bd-rv .bd-bar.exp {
        transition-delay: calc(var(--i, 0) * 80ms + .4s);
    }

    .bd-js .bd-rv .bd-stack .seg {
        transition-delay: calc(var(--i, 0) * 180ms + .2s);
    }

    .bd-js .bd-rv.is-in .bd-bar,
    .bd-js .bd-rv.is-in .bd-meter span,
    .bd-js .bd-rv.is-in .bd-stack .seg,
    .bd-js.bd-ready .bd-rv .bd-bar,
    .bd-js.bd-ready .bd-rv .bd-meter span,
    .bd-js.bd-ready .bd-rv .bd-stack .seg {
        transform: none;
    }

    .bd-js .bd-rv .bd-g .fill {
        transform: scaleX(0);
        transition: transform 1s var(--bd-ease);
        transition-delay: calc(var(--i, 0) * 80ms + .2s);
    }

    .bd-js .bd-rv.is-in .bd-g .fill,
    .bd-js.bd-ready .bd-rv .bd-g .fill {
        transform: none;
    }

    .bd-js .bd-rv .bd-col .bar,
    .bd-js .bd-rv .bd-grp .vb {
        transform: scaleY(0);
        transition: transform .9s var(--bd-ease);
        transition-delay: calc(var(--i, 0) * 110ms + .2s);
    }

    .bd-js .bd-rv .bd-grp .vb.exp {
        transition-delay: calc(var(--i, 0) * 110ms + .32s);
    }

    .bd-js .bd-rv.is-in .bd-col .bar,
    .bd-js .bd-rv.is-in .bd-grp .vb,
    .bd-js.bd-ready .bd-rv .bd-col .bar,
    .bd-js.bd-ready .bd-rv .bd-grp .vb {
        transform: none;
    }

    .bd-js .bd-rv .bd-grp .vb em,
    .bd-js .bd-rv .bd-col .v {
        opacity: 0;
        transition: opacity .5s ease;
        transition-delay: calc(var(--i, 0) * 110ms + .8s);
    }

    .bd-js .bd-rv.is-in .bd-grp .vb em,
    .bd-js .bd-rv.is-in .bd-col .v,
    .bd-js.bd-ready .bd-rv .bd-grp .vb em,
    .bd-js.bd-ready .bd-rv .bd-col .v {
        opacity: 1;
    }

    /* เส้นทางของเงิน: เผยจากซ้ายไปขวา แล้วมีจุดไหลตามเส้น */
    .bd-js .bd-flow .bd-flow-svg {
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1.6s var(--bd-ease) .25s;
    }

    .bd-js .bd-flow.is-in .bd-flow-svg,
    .bd-js.bd-ready .bd-flow .bd-flow-svg {
        clip-path: inset(0 -10px 0 0);
    }

    .bd-js .bd-flow .bd-flow-col.right .bd-flow-lb {
        opacity: 0;
        transition: opacity .6s ease 1.4s;
    }

    .bd-js .bd-flow.is-in .bd-flow-col.right .bd-flow-lb,
    .bd-js.bd-ready .bd-flow .bd-flow-col.right .bd-flow-lb {
        opacity: 1;
    }

    .bd-js .bd-flow.is-in .bd-spark {
        stroke-opacity: .7;
        transition: stroke-opacity .6s ease 1.8s;
        animation: bdFlow 3.2s linear infinite;
        animation-delay: calc(var(--i, 0) * -.4s);
    }

    .bd-js .bd-insights li {
        opacity: 0;
        transform: translateX(14px);
        transition: opacity .6s var(--bd-ease), transform .6s var(--bd-ease);
        transition-delay: calc(var(--i, 0) * 120ms + .3s);
    }

    .bd-js .bd-insights.is-in li,
    .bd-js.bd-ready .bd-insights li {
        opacity: 1;
        transform: none;
    }

    .bd-js .bd-share-list li {
        opacity: 0;
        transition: opacity .5s ease;
        transition-delay: calc(var(--i, 0) * 150ms + .5s);
    }

    .bd-js .bd-rv.is-in .bd-share-list li,
    .bd-js.bd-ready .bd-share-list li {
        opacity: 1;
    }

    .bd-pulse::after {
        animation: bdPulse 2.2s ease-out infinite;
    }

    .bd-kpi,
    .bd-card,
    .bd-ps-tile {
        transition: box-shadow .25s ease, transform .25s var(--bd-ease), opacity .7s var(--bd-ease);
    }

    .bd-kpi:hover,
    .bd-ps-tile:hover {
        box-shadow: var(--bd-sh2);
    }
}

@keyframes bdFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(40px, 26px, 0) scale(1.12);
    }
}

@keyframes bdRise {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes bdUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bdPulse {
    0% {
        transform: scale(.6);
        opacity: .9;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

@keyframes bdFlow {
    to {
        stroke-dashoffset: -56;
    }
}

/* ═══ ความคมชัดสูง ═══
   ไฟล์กลาง (css/tb1-display-scale.css) บังคับตัวอักษรขาว ลิงก์เหลือง พื้นดำ ด้วย !important
   พื้นการ์ดทุกชั้นจึงต้องเป็นดำ (v4.4: เดิมพื้นขาว ตัวอักษรขาวที่ถูกบังคับจึงมองไม่เห็น) */
html.tb1-contrast-high {
    --bd-ink1: #fff;
    --bd-ink2: #fff;
    --bd-ink3: #fff;
    --bd-page: #000;
    --bd-card: #000;
    --bd-alt: #000;
    --bd-line: #fff;
    --bd-line2: #facc15;
    --bd-link: #facc15;
    --bd-sh: none;
    --bd-sh2: none;
}

html.tb1-contrast-high .bd-hero {
    background: #000;
    border-bottom: 2px solid #facc15;
}

html.tb1-contrast-high .bd-page :is(.bd-live, .bd-live-stats li, .bd-chg, .bd-badge, .bd-private, .bd-cmp, .bd-card-sum, .bd-subnav, .bd-subnav a, .bd-years, .bd-eyebrow, .bd-hero-meta li, .bd-kpi-ic, .bd-card-ic, .bd-live-stats li > i, .bd-audit, .bd-tip) {
    background: #000 !important;
    border: 1px solid #fff;
    box-shadow: none !important;
}

html.tb1-contrast-high .bd-page .bd-subnav a.is-on,
html.tb1-contrast-high .bd-page .bd-years a.is-on {
    background: #facc15 !important;
}

html.tb1-contrast-high .bd-page :is(.bd-subnav a.is-on, .bd-years a.is-on),
html.tb1-contrast-high .bd-page :is(.bd-subnav a.is-on, .bd-years a.is-on) * {
    color: #000 !important;
}

html.tb1-contrast-high .bd-hero-deco {
    display: none;
}

html.tb1-contrast-high .bd-kpi,
html.tb1-contrast-high .bd-card,
html.tb1-contrast-high .bd-flow,
html.tb1-contrast-high .bd-insights,
html.tb1-contrast-high .bd-compare,
html.tb1-contrast-high .bd-need,
html.tb1-contrast-high .bd-ps-tile {
    border: 2px solid #000;
    box-shadow: none;
}

html.tb1-contrast-high .bd-bar,
html.tb1-contrast-high .bd-g .fill,
html.tb1-contrast-high .bd-grp .vb,
html.tb1-contrast-high .bd-col .bar,
html.tb1-contrast-high .bd-stack .seg {
    outline: 1px solid #000;
    opacity: 1;
}

html.tb1-contrast-high .bd-rib {
    fill-opacity: .6;
    stroke: #000;
    stroke-width: .3px;
}

/* ═══ พิมพ์ ═══ */
@media print {

    .bd-skip,
    .bd-subnav,
    .bd-hero-deco,
    .bd-years,
    .bd-tbl-tools,
    .bd-audit,
    .bd-tip,
    .tb1-navbar,
    nav.navbar,
    header.tb1-header,
    footer {
        display: none !important;
    }

    body.bd-page {
        background: #fff;
        font-size: 12px;
    }

    .bd-hero {
        padding: 1rem 0 1rem;
        color: #000;
        background: none !important;
    }

    .bd-hero-meta li,
    .bd-eyebrow {
        background: none;
        color: #000;
        border: 1px solid #999;
    }

    .bd-lead,
    .bd-lead strong {
        color: #000;
    }

    .bd-hero h1 {
        text-shadow: none;
    }

    .bd-kpis {
        margin-top: 0;
    }

    .bd-rv,
    .bd-js .bd-rv {
        opacity: 1 !important;
        transform: none !important;
    }

    .bd-kpi,
    .bd-card,
    .bd-flow,
    .bd-insights,
    .bd-compare,
    .bd-need,
    .bd-ps-tile {
        box-shadow: none;
        break-inside: avoid;
    }

    .bd-page * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .bd-flow-svg {
        clip-path: none !important;
    }

    .bd-sec {
        margin-top: 1.5rem;
    }

    .bd-sec-h {
        break-after: avoid;
        page-break-after: avoid;
    }
}