/* Data Center 43 แฟ้ม — โครงหน้า: ฟอนต์ สีหลัก เมนูด้านข้าง แถบบน
   ใช้ร่วมกันทุกหน้า รวมหน้าแดชบอร์ด (ห้ามตั้งค่าให้แท็กทั่วไป เพื่อไม่ชนกับสไตล์ของแดชบอร์ด) */
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-thai-thai-500-normal.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/ibm-plex-sans-thai-thai-700-normal.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-thai-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-thai-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/ibm-plex-sans-thai-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* สีหลัก: เขียวสาธารณสุข + เหลืองดอกลำดวน (ดอกไม้ประจำจังหวัดศรีสะเกษ) ใช้เหลืองเฉพาะจุดที่ต้องการให้เห็นก่อน */
:root {
  --dc-font: "IBM Plex Sans Thai", "Sarabun", "Noto Sans Thai", "Leelawadee UI", "Tahoma", system-ui, sans-serif;
  --dc-canvas: #f3f6f2; --dc-surface: #ffffff; --dc-surface-2: #f7f9f6;
  --dc-ink: #18241f; --dc-ink-2: #56665e; --dc-line: #d9e2db; --dc-line-2: #e8eee9;
  --dc-forest: #1d6a4a; --dc-forest-ink: #ffffff; --dc-forest-soft: #e3f0e8;
  --dc-rail: #0f3a2a; --dc-rail-2: #164a37; --dc-rail-ink: #e8f1ec; --dc-rail-dim: #9fbcad;
  --dc-lamduan: #f2cf6b; --dc-lamduan-ink: #3d2e00;
  --dc-brick: #b3412c; --dc-brick-soft: #f8e4df; --dc-amber: #8a5a00; --dc-amber-soft: #fbf0d6; --dc-blue: #24566d; --dc-blue-soft: #e5eff4;
  --dc-r: 12px; --dc-r-sm: 8px;
  --dc-sb-w: 264px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dc-canvas: #0e1512; --dc-surface: #151f1a; --dc-surface-2: #1a2620;
    --dc-ink: #e3ece6; --dc-ink-2: #9aaca2; --dc-line: #2b3a33; --dc-line-2: #22302a;
    --dc-forest: #5cc394; --dc-forest-ink: #06231a; --dc-forest-soft: #183a2c;
    --dc-rail: #0a241a; --dc-rail-2: #12342a; --dc-rail-ink: #dfeae4; --dc-rail-dim: #8aa799;
    --dc-lamduan: #e8c35a; --dc-lamduan-ink: #2a1f00;
    --dc-brick: #ff8a75; --dc-brick-soft: #3a1d18; --dc-amber: #f0c060; --dc-amber-soft: #352a12; --dc-blue: #8cc3dd; --dc-blue-soft: #16303b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --dc-canvas: #0e1512; --dc-surface: #151f1a; --dc-surface-2: #1a2620;
  --dc-ink: #e3ece6; --dc-ink-2: #9aaca2; --dc-line: #2b3a33; --dc-line-2: #22302a;
  --dc-forest: #5cc394; --dc-forest-ink: #06231a; --dc-forest-soft: #183a2c;
  --dc-rail: #0a241a; --dc-rail-2: #12342a; --dc-rail-ink: #dfeae4; --dc-rail-dim: #8aa799;
  --dc-lamduan: #e8c35a; --dc-lamduan-ink: #2a1f00;
  --dc-brick: #ff8a75; --dc-brick-soft: #3a1d18; --dc-amber: #f0c060; --dc-amber-soft: #352a12; --dc-blue: #8cc3dd; --dc-blue-soft: #16303b;
  color-scheme: dark;
}

body.dc { margin: 0; background: var(--dc-canvas); color: var(--dc-ink); font: 15px/1.65 var(--dc-font); -webkit-text-size-adjust: 100%; }
body.dc *, body.dc *::before, body.dc *::after { box-sizing: border-box; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--dc-lamduan); color: var(--dc-lamduan-ink); padding: 8px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
body.dc :focus-visible { outline: 3px solid var(--dc-lamduan); outline-offset: 2px; }

/* เครื่องหมายระบบ */
.mark { flex: none; display: block; }
.mark-bg { fill: var(--dc-lamduan); }
.mark-x { fill: #1d6a4a; }
.mark-dot { fill: var(--dc-lamduan); }

/* ---------- โครงหลัก ---------- */
.dc-app { display: grid; grid-template-columns: var(--dc-sb-w) minmax(0, 1fr); min-height: 100vh; }
.dc-main { min-width: 0; display: flex; flex-direction: column; }
.dc-content.wide { max-width: 1320px; }
.dc-content { width: 100%; max-width: 1220px; margin: 0 auto; padding: 24px 28px 40px; flex: 1; position: relative; outline: none; }
.sb-check { position: absolute; opacity: 0; pointer-events: none; }
.sb-scrim { display: none; }

/* ---------- เมนูด้านข้าง ---------- */
.sb { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--dc-rail); color: var(--dc-rail-ink); overflow: hidden; z-index: 30; }
.sb-head { display: flex; align-items: center; gap: 8px; padding: 18px 14px 14px 18px; }
.sb-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; flex: 1; }
.sb-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sb-name b { font-size: 1rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.sb-name small { font-size: .72rem; color: var(--dc-rail-dim); white-space: normal; }
.sb-rail-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--dc-rail-dim); cursor: pointer; }
.sb-rail-btn:hover { background: var(--dc-rail-2); color: var(--dc-rail-ink); }
.sb-nav { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 12px; scrollbar-width: thin; scrollbar-color: var(--dc-rail-dim) transparent;
  /* เมนูยาวกว่าจอ: เงาสว่างที่ขอบบน/ล่างบอกว่ายังเลื่อนได้ (หายเองเมื่อเลื่อนสุด) */
  background:
    linear-gradient(var(--dc-rail) 40%, transparent) top / 100% 34px no-repeat local,
    linear-gradient(transparent, var(--dc-rail) 60%) bottom / 100% 34px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(255, 255, 255, .2), transparent) top / 100% 14px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(255, 255, 255, .2), transparent) bottom / 100% 14px no-repeat scroll; }
.sb-nav::-webkit-scrollbar { width: 8px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--dc-rail-dim); border-radius: 4px; }
.sb-group + .sb-group { margin-top: 14px; }
.sb-glabel { margin: 0 0 4px; padding: 0 12px; font-size: .74rem; color: var(--dc-rail-dim); white-space: nowrap; }
.sb ul { list-style: none; margin: 0; padding: 0; }
.sb-nav a, .sb-acc a, .sb-acc button {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 8px 12px; border-radius: 10px;
  color: var(--dc-rail-ink); text-decoration: none; font: inherit; font-size: .92rem; background: none; border: 0; cursor: pointer; text-align: left;
}
.sb-nav a:hover, .sb-acc a:hover, .sb-acc button:hover { background: var(--dc-rail-2); }
.sb-nav a[aria-current="page"], .sb-acc a[aria-current="page"] { background: rgba(255, 255, 255, .09); font-weight: 600; }
.sb-nav a[aria-current="page"]::before, .sb-acc a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--dc-lamduan); }
.sb-nav a[aria-current="page"] .ic { color: var(--dc-lamduan); }
.ic { flex: none; display: block; }
.sb-l { flex: 1; min-width: 0; }
.sb-l em { font-style: normal; font-size: .72rem; color: var(--dc-lamduan); margin-left: 4px; }
.sb-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--dc-lamduan); color: var(--dc-lamduan-ink); font-size: .75rem; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.sb-foot { border-top: 1px solid rgba(255, 255, 255, .08); padding: 12px; }
.sb-me { display: flex; align-items: center; gap: 12px; padding: 6px 8px 10px; }
.sb-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--dc-rail-2); color: var(--dc-lamduan); font-weight: 700; font-size: .9rem; }
.sb-me .sb-l { display: flex; flex-direction: column; line-height: 1.35; }
.sb-me b { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-me small { font-size: .72rem; color: var(--dc-rail-dim); }
.sb-acc a, .sb-acc button { min-height: 36px; font-size: .84rem; color: var(--dc-rail-dim); }
.sb-acc a:hover, .sb-acc button:hover { color: var(--dc-rail-ink); }
.sb-acc form { margin: 0; }
.sb-acc a.warn .ic { color: var(--dc-lamduan); }

/* จอเตี้ย (โน้ตบุ๊กที่ขยายหน้าจอ 125% ฯลฯ): ย่อระยะ และรวมเมนูบัญชีเป็นแถวไอคอน เพื่อให้เห็นเมนูหลักครบที่สุด */
@media (max-height: 860px) {
  .sb-head { padding: 12px 14px 8px 18px; }
  .sb-nav a { min-height: 36px; padding: 6px 12px; }
  .sb-group + .sb-group { margin-top: 8px; }
  .sb-glabel { margin-bottom: 2px; }
  .sb-foot { padding: 8px 12px; }
  .sb-me { padding: 2px 8px 6px; }
  .sb-av { width: 30px; height: 30px; font-size: .8rem; }
  .sb-acc { display: flex; gap: 4px; }
  .sb-acc li { flex: 1; min-width: 0; }
  .sb-acc a, .sb-acc button { justify-content: center; min-height: 34px; padding: 6px 0; }
  .sb-acc .sb-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ย่อเป็นแถบไอคอน (เดสก์ท็อป) */
@media (min-width: 961px) {
  body.sb-rail { --dc-sb-w: 76px; }
  body.sb-rail .sb-name, body.sb-rail .sb-glabel, body.sb-rail .sb-l, body.sb-rail .sb-me .sb-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.sb-rail .sb-head { flex-direction: column; padding: 16px 0 10px; }
  body.sb-rail .sb-brand { flex: none; }
  body.sb-rail .sb-nav { padding: 6px 10px; }
  body.sb-rail .sb-nav a, body.sb-rail .sb-acc a, body.sb-rail .sb-acc button { justify-content: center; padding: 8px 0; }
  body.sb-rail .sb-badge { position: absolute; top: 2px; right: 4px; min-width: 18px; height: 18px; font-size: .68rem; padding: 0 5px; }
  body.sb-rail .sb-glabel { position: static; width: auto; height: 1px; margin: 8px 6px; clip: auto; background: rgba(255, 255, 255, .1); }
  body.sb-rail .sb-me { justify-content: center; padding: 6px 0 10px; }
}

/* ---------- แถบบน ---------- */
.tb { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 28px; background: color-mix(in srgb, var(--dc-canvas) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--dc-line-2); }
.tb-menu { display: none; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--dc-ink); cursor: pointer; }
.tb-menu:hover { background: var(--dc-line-2); }
.tb-crumb { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tb-crumb span { color: var(--dc-ink-2); font-size: .85rem; }
.tb-crumb span::after { content: "/"; margin-left: 10px; color: var(--dc-line); }
.tb-crumb b { font-size: 1.05rem; font-weight: 600; }
.tb-end { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.tb-date { color: var(--dc-ink-2); font-size: .82rem; }
.tb-scope { font-size: .8rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--dc-forest-soft); color: var(--dc-forest); white-space: nowrap; }

/* ---------- จอเล็ก: เมนูเลื่อนเข้าจากด้านซ้าย ---------- */
@media (max-width: 960px) {
  .dc-app { grid-template-columns: minmax(0, 1fr); }
  .sb { position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, 300px); transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 0 100vmax transparent; }
  .sb-check:checked ~ .dc-app .sb { transform: none; }
  .sb-check:checked + .sb-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(8, 20, 14, .45); }
  .sb-rail-btn { display: none; }
  .tb { padding: 8px 16px; }
  .tb-menu { display: grid; }
  .tb-date { display: none; }
  .dc-content { padding: 18px 16px 32px; }
}
@media (max-width: 520px) { .tb-scope { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; } }
@media (prefers-reduced-motion: reduce) { .sb { transition: none; } }
@media print { .sb, .tb, .skip, .sb-scrim { display: none !important; } .dc-app { display: block; } .dc-content { padding: 0; max-width: none; } }