/* ธีมเดียวกับ Sahathai Careers (ค่าจาก sahathai-careers.pages.dev 24 ต.ค. 2569) */
:root {
  --red: #D4232A; --red-dark: #A81B21; --red-soft: #FDEDEE; --red-border: #F5C6C8;
  --bg: #F6F5F2; --card: #FFFFFF; --ink: #1F2328; --ink-2: #5A6069; --ink-3: #8A9099; --line: #E7E5E0;
  --green: #1E8E4E; --green-soft: #E7F5EC; --amber: #B97D10; --amber-soft: #FCF3E0;
  --blue: #2563EB; --blue-soft: #E8EFFD;
  --radius: 14px; --shadow: 0 1px 3px rgba(20,20,30,.06), 0 6px 20px rgba(20,20,30,.05);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: Sarabun, Prompt, system-ui, sans-serif; background: var(--bg); color: var(--ink);
       font-size: 15px; line-height: 1.55; min-height: 100vh; }
h1, h2, h3, h4 { font-family: Prompt, Sarabun, sans-serif; }
button { font-family: inherit; cursor: pointer; border: none; background: none; font-size: inherit; color: inherit; }
a { color: inherit; }
input, select, textarea { font-family: inherit; font-size: 15px; color: var(--ink); background: #fff;
       border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; width: 100%; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(212,35,42,.12); }
label { font-size: 13px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 4px; }
[hidden] { display: none !important; }

/* ส่วนหัว */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--red); color: #fff; box-shadow: 0 2px 10px rgba(168,27,33,.25); }
.topbar-in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; position: relative; }
.logo-badge { width: 38px; height: 38px; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.logo-badge img { width: 100%; height: 100%; object-fit: cover; }
.brand-t { line-height: 1.15; min-width: 0; }
.brand-t b { font-family: Prompt; font-size: 16px; display: block; }
.brand-t span { font-size: 11px; opacity: .85; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode-btn, .me-btn { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 7px 14px;
       border-radius: 99px; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.mode-btn { margin-left: auto; }
.mode-btn:not([hidden]) + .me-btn { margin-left: 0; }
.mode-btn:hover, .me-btn:hover { background: rgba(255,255,255,.26); }
.me-btn { margin-left: auto; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.mode-menu { display: none; position: absolute; right: 16px; top: 54px; background: #fff; color: var(--ink); border-radius: 12px;
       box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 8px; min-width: 220px; z-index: 60; }
.mode-menu.on { display: block; }
.mode-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--red-dark); }
.mode-menu button:hover { background: var(--red-soft); }
.me-info { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 13px; color: var(--ink-2); }
.me-info b { display: block; color: var(--ink); font-size: 14px; }

.subnav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 58px; z-index: 40; overflow-x: auto; }
.subnav-in { max-width: 1100px; margin: 0 auto; display: flex; padding: 0 10px; min-width: max-content; }
.subnav button { padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); border-bottom: 2.5px solid transparent; white-space: nowrap; }
.subnav button.on { color: var(--red); border-bottom-color: var(--red); }

.app { max-width: 1100px; margin: 0 auto; padding: 16px; min-height: calc(100vh - 110px); }
.loading { text-align: center; color: var(--ink-3); padding: 60px 0; }

/* ชิ้นส่วนเดียวกับ Careers */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; }
.card h3 { font-size: 16px; margin-bottom: 10px; }
.muted { color: var(--ink-2); font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > * { min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--red); color: #fff; font-weight: 600;
       padding: 10px 20px; border-radius: 11px; font-size: 14.5px; transition: .15s; text-decoration: none; }
.btn:hover { background: var(--red-dark); }
.btn.sec { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn.sec:hover { border-color: var(--ink-3); }
.btn.ghost { background: var(--red-soft); color: var(--red); }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.b-gray { background: #EEEDEA; color: var(--ink-2); }
.b-green { background: var(--green-soft); color: var(--green); }
.b-amber { background: var(--amber-soft); color: var(--amber); }
.b-blue { background: var(--blue-soft); color: var(--blue); }
.b-red { background: var(--red-soft); color: var(--red); }
.hero { background: linear-gradient(135deg, var(--red) 0%, #B01E24 100%); border-radius: 18px; color: #fff; padding: 22px 20px; margin-bottom: 16px; }
.hero h2 { font-size: 21px; margin-bottom: 2px; }
.hero p { font-size: 13px; opacity: .9; }
.hero-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.hero-nums div { background: rgba(255,255,255,.14); border-radius: 12px; padding: 10px 12px; }
.hero-nums b { display: block; font-family: Prompt; font-size: 24px; line-height: 1.2; }
.hero-nums span { font-size: 12px; opacity: .9; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { border: 1.5px solid var(--line); border-radius: 99px; padding: 6px 15px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: #fff; }
.chip.on { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { background: #F1EFEB; text-align: left; padding: 8px 10px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.tbl td { border-bottom: 1px solid var(--line); padding: 9px 10px; vertical-align: top; }
.tbl td.n, .tbl th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: #FBFAF8; }
.tbl tr.sum td { font-weight: 700; background: #FBFAF8; }
.tbl input { padding: 6px 8px; font-size: 14px; }
.tbl input.num { width: 72px; text-align: right; }
.sec-title { font-family: Prompt; font-weight: 600; font-size: 15px; margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.sec-title .grow { flex: 1; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kpis.kpis4 { grid-template-columns: repeat(4, 1fr); }
.doc .kpi { box-shadow: none; border: 1px solid var(--line); }
.kpi { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.kpi b { font-size: 24px; font-family: Prompt; color: var(--ink); display: block; line-height: 1.2; }
.kpi b.red { color: var(--red); } .kpi b.green { color: var(--green); } .kpi b.amber { color: var(--amber); }
.kpi span { display: block; font-size: 12px; color: var(--ink-2); }
.note { font-size: 12.5px; color: var(--ink-2); }
.field-mb { margin-bottom: 10px; }
.list-item { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.list-item .dt { font-family: Prompt; font-weight: 600; color: var(--red); min-width: 74px; font-size: 13px; }
.list-item .grow { flex: 1; min-width: 0; }
.empty { color: var(--ink-3); text-align: center; padding: 18px 0; font-size: 13.5px; }

/* ติ๊กเลือกแผนก */
.chk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 10px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink); margin: 0; cursor: pointer; }
.chk input { width: auto; }

/* ใบขอ */
.list-item.click { cursor: pointer; }
.list-item.click:hover { border-color: var(--red-border); }
.cnt { display: inline-block; background: var(--red); color: #fff; border-radius: 99px; font-size: 11px; padding: 0 7px; margin-left: 3px; line-height: 18px; }
.doc-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.doc-head h2 { font-size: 20px; }
.doc-no { font-family: Prompt; font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.doc-sec { margin-bottom: 12px; }
.doc-sec-t { font-family: Prompt; font-weight: 600; font-size: 14.5px; color: var(--red-dark); margin-bottom: 6px; }
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; }
.kv > div { display: flex; gap: 8px; font-size: 13.5px; border-bottom: 1px dotted var(--line); padding: 4px 0; }
.kv span { color: var(--ink-2); min-width: 130px; flex: 0 0 auto; }
.kv b { font-weight: 500; white-space: pre-wrap; word-break: break-word; }
.kv.wide { grid-template-columns: 1fr; }
.signs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; text-align: center; font-size: 13px; }
.sign-line { border-bottom: 1px solid var(--ink); min-height: 34px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; font-weight: 600; }

/* หน้าเข้าสู่ระบบ */
.login-box { max-width: 380px; margin: 30px auto; }
.login-box .hero { text-align: center; }
.err { color: var(--red); font-size: 13px; margin-top: 8px; min-height: 18px; }

/* หน้าต่าง */
.modal-wrap { position: fixed; inset: 0; z-index: 300; background: rgba(30,30,35,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: #fff; border-radius: 14px; padding: 18px; width: 100%; max-width: 520px; box-shadow: 0 10px 40px rgba(0,0,0,.3); max-height: 90vh; overflow-y: auto; }
.modal-box h3 { font-size: 17px; margin-bottom: 12px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: #1F2328; color: #fff;
         padding: 10px 18px; border-radius: 11px; font-size: 14px; opacity: 0; pointer-events: none; transition: .2s; z-index: 400; max-width: 90vw; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { background: var(--red-dark); }

@media (max-width: 720px) {
  .hero-nums { grid-template-columns: repeat(2, 1fr); }
  .kpis, .kpis.kpis4 { grid-template-columns: repeat(2, 1fr); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .brand-t span { display: none; }
  .mode-btn { padding: 7px 10px; }
  .hide-sm { display: none; }
  .chk-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  .signs { grid-template-columns: repeat(2, 1fr); }
}
@media print {
  .topbar, .subnav, .no-print, .toast { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid var(--line); }
  .app { padding: 0; max-width: none; }
  .doc { border: none; padding: 0; }
  .kv { grid-template-columns: repeat(2, 1fr); }
  .signs { grid-template-columns: repeat(4, 1fr); }
  @page { size: A4; margin: 14mm; }
}

/* ===== ภาพรวมอัตรากำลังคน (แดชบอร์ด 24 ต.ค. 2569) ===== */
.app:has(> .ov) { max-width: 1320px; }
.ov { --sh: 0 2px 4px rgba(40,20,20,.05), 0 8px 20px rgba(40,20,20,.08); }
.ov .sr, .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ov button:focus-visible, .ov select:focus-visible, .ov input:focus-visible, .ov tr:focus-visible, .ov-drawer button:focus-visible { outline: 3px solid #1D4FC4; outline-offset: 2px; }
.ov-band { background: var(--red); color: #fff; border-radius: 22px; padding: 22px 24px 64px; }
.ov-band-in { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ov-eyebrow { font-size: 12px; letter-spacing: .08em; opacity: .8; font-weight: 600; }
.ov-band h1 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 2px 0 4px; }
.ov-scope { font-size: 15px; opacity: .92; }
.ov-date { text-align: right; display: flex; flex-direction: column; font-size: 13px; opacity: .95; }
.ov-date b { font-family: Prompt; font-size: 18px; }
.ov-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; }
.ov-fld { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.ov-fld.grow { flex: 1 1 260px; }
.ov-fld label { font-size: 12.5px; font-weight: 600; }
.ov-band .ov-fld select, .ov-band .ov-fld input { border: none; min-height: 44px; border-radius: 12px; padding: 0 12px; width: 100%; }
.ov-clear { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.7); color: #fff; font-weight: 600; }
.ov-clear:hover { background: rgba(255,255,255,.12); }
.ov-note { flex-basis: 100%; font-size: 12.5px; opacity: .85; }
.ov-main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: -44px; padding: 0 12px; }
.ov-card { background: #fff; border-radius: 18px; box-shadow: var(--sh); padding: 18px; grid-column: span 3; min-width: 0; }
.ov-card.span3 { grid-column: span 3; } .ov-card.span4 { grid-column: span 4; } .ov-card.span5 { grid-column: span 5; } .ov-card.span12 { grid-column: 1 / -1; }
.ov-kpi { display: flex; gap: 14px; align-items: flex-start; }
.ov-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ov-kpi.over .ov-ico { background: var(--amber-soft); color: var(--amber); }
.ov-k { font-family: Prompt; font-weight: 600; font-size: 15px; }
.ov-ks { font-size: 12.5px; color: var(--ink-2); }
.ov-ks.light { color: rgba(255,255,255,.75); margin-top: 8px; }
.ov-v { font-family: Prompt; font-size: 34px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.ov-v small { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.ov-kpi.short .ov-v { color: #B4232A; } .ov-kpi.over .ov-v { color: #8A5A00; }
.ov-warn { background: var(--amber-soft); color: #7A5200; font-weight: 600; padding: 12px 18px; }
.ov-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ov-h h2 { font-size: 17px; font-weight: 600; }
.ov-h > span { font-size: 12.5px; color: var(--ink-2); }
.ov-dark { background: #7E1318; color: #fff; }
.ov-dark .ov-h > span { color: rgba(255,255,255,.75); }
.ov-bar { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) 32px; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 5px 4px; border-radius: 8px; color: #fff; min-height: 32px; }
.ov-bar:hover { background: rgba(255,255,255,.08); }
.ov-bar .lbl { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-bar .lbl i { font-style: normal; opacity: .7; font-size: 12px; }
.ov-bar .trk { height: 14px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; }
.ov-bar .trk span { display: block; height: 100%; background: #F5C6C8; border-radius: 99px; min-width: 6px; }
.ov-bar .val { font-family: Prompt; font-weight: 700; text-align: right; }
.ov-axis { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) 32px; gap: 10px; font-size: 11.5px; color: rgba(255,255,255,.7); padding: 4px 4px 0; }
.ov-axis .tk { display: flex; justify-content: space-between; }
.ov-leg { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.ov-leg i, .ov-share i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ov-cols { display: grid; grid-template-columns: 38px minmax(0, 1fr); height: 210px; gap: 6px; }
.ov-cols .ax { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--ink-3); text-align: right; padding-bottom: 22px; }
.ov-cols .plot { display: grid; gap: 8px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent calc(50% - 1px), #F0EEEA calc(50% - 1px), #F0EEEA 50%); }
.ov-cols .grp { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.ov-cols .bars { display: flex; gap: 4px; align-items: flex-end; height: calc(100% - 22px); width: 100%; justify-content: center; }
.ov-cols .b { width: 40%; max-width: 26px; border-radius: 6px 6px 0 0; position: relative; min-height: 2px; }
.ov-cols .b.t { background: #F5C6C8; } .ov-cols .b.c { background: var(--red); }
.ov-cols .b em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.ov-cols .grp > b { font-size: 12px; height: 22px; line-height: 22px; font-family: Prompt; }
.ov-donut { width: 150px; height: 150px; border-radius: 50%; margin: 6px auto 14px; display: flex; align-items: center; justify-content: center; }
.ov-donut > div { width: 98px; height: 98px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ov-donut b { font-family: Prompt; font-size: 22px; } .ov-donut span { font-size: 11.5px; color: var(--ink-2); }
.ov-share > div { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; font-size: 13px; padding: 3px 0; align-items: center; }
.ov-share em { font-style: normal; color: var(--ink-2); min-width: 44px; text-align: right; }
.ovp { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.p-short { background: var(--red-soft); color: #B4232A; } .p-over { background: var(--amber-soft); color: #8A5A00; }
.p-ok { background: var(--green-soft); color: #17703D; } .p-na { background: #EFEEEB; color: #4A5058; } .p-info { background: var(--blue-soft); color: #1D4FC4; }
.ov-fu { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #F0EEEA; }
.ov-fu .ovp { justify-content: center; }
.ov-fu b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-fu span { font-size: 12.5px; color: var(--ink-2); }
.ov-link { color: var(--red-dark); font-weight: 600; font-size: 13.5px; min-height: 36px; padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; }
.ov-more { margin-top: 10px; color: var(--red-dark); font-weight: 600; min-height: 40px; }
.ov-stc { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #F0EEEA; font-size: 15px; }
.ov-stc i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.ov-stc i.p-short { background: var(--red); } .ov-stc i.p-over { background: var(--amber); } .ov-stc i.p-ok { background: var(--green); } .ov-stc i.p-na { background: var(--ink-3); }
.ov-stc b { font-family: Prompt; font-size: 22px; background: none; }
.ov-stc + .ov-ks { margin-top: 10px; }
.ov-mv { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #F0EEEA; font-size: 14.5px; }
.ov-mv span { color: var(--ink-2); } .ov-mv b { font-family: Prompt; font-weight: 600; }
.ov-tf { display: flex; gap: 12px; flex-wrap: wrap; }
.ov-tf .ov-fld select, .ov-tf .ov-fld input { min-height: 44px; border-radius: 12px; }
.ov-h.wrap { align-items: flex-end; }
.ov-tbl { max-height: 640px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.ov-tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ov-tbl th { position: sticky; top: 0; background: #FBFAF8; z-index: 1; text-align: left; font-weight: 600; font-size: 13px; color: var(--ink-2); padding: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ov-tbl th > button, .ov-tbl th:not(:has(button)) { display: flex; gap: 4px; align-items: center; width: 100%; padding: 12px; min-height: 44px; font-weight: 600; color: inherit; }
.ov-tbl th:not(:has(button)) { display: table-cell; }
.ov-tbl th.n > button { justify-content: flex-end; }
.ov-tbl th button span { color: var(--ink-3); font-size: 11px; }
.ov-tbl td { padding: 10px 12px; border-bottom: 1px solid #F0EEEA; vertical-align: middle; }
.ov-tbl td.n, .ov-tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
.ov-tbl tbody tr { cursor: pointer; } .ov-tbl tbody tr:hover { background: #FDF7F7; }
.ov-tbl .co, .ov-mcard .co { display: inline-block; font-size: 11px; font-weight: 700; color: var(--red-dark); background: var(--red-soft); border-radius: 6px; padding: 1px 6px; margin-right: 6px; }
.ovt { display: inline-block; font-size: 12.5px; background: #F3F2EF; border-radius: 8px; padding: 2px 8px; margin: 2px 4px 2px 0; white-space: nowrap; }
.ovt.note { color: var(--ink-2); }
.ovdash { color: var(--ink-3); font-size: 13px; }
.ov-foot { font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.ov-empty { color: var(--ink-2); padding: 22px; text-align: center; }
.ov-empty.light { color: rgba(255,255,255,.8); }
.ov-mcards { display: none; }
.ov-err { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 60px; }
.ov-band.sk { min-height: 150px; }
.skl { height: 14px; border-radius: 8px; background: linear-gradient(90deg, #EEE 25%, #F7F7F7 50%, #EEE 75%); background-size: 200% 100%; animation: ovsk 1.2s infinite; margin: 8px 0; }
.ov-band .skl { background: rgba(255,255,255,.25); }
.skl.w20 { width: 20%; } .skl.w30 { width: 30%; } .skl.w40 { width: 40%; } .skl.w60 { width: 60%; } .skl.tall { height: 34px; }
@keyframes ovsk { to { background-position: -200% 0; } }
/* แผงรายละเอียด */
.ov-scrim { position: fixed; inset: 0; background: rgba(20,10,10,.45); z-index: 300; }
.ov-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: #fff; z-index: 301; overflow-y: auto; box-shadow: -10px 0 40px rgba(0,0,0,.2); animation: ovin .18s ease-out; }
@keyframes ovin { from { transform: translateX(30px); opacity: .4; } }
.ov-dh { background: var(--red); color: #fff; padding: 22px 24px 52px; display: flex; justify-content: space-between; gap: 12px; }
.ov-dh .co { font-size: 13px; opacity: .85; }
.ov-dh h2 { font-size: 24px; font-weight: 700; margin: 2px 0 8px; }
.ov-dh .ovp { background: #fff; }
.ov-x { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.6); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ov-db { padding: 0 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.ov-dn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: -36px; }
.ov-dn > div { background: #fff; border-radius: 16px; padding: 12px 6px; text-align: center; box-shadow: 0 2px 4px rgba(40,20,20,.05), 0 8px 20px rgba(40,20,20,.10); }
.ov-dn b { display: block; font-family: Prompt; font-size: 26px; line-height: 1.1; } .ov-dn b.r { color: #B4232A; } .ov-dn b.a { color: #8A5A00; }
.ov-dn span { font-size: 12.5px; color: var(--ink-2); }
.ov-db section { display: flex; flex-direction: column; gap: 6px; }
.ov-db h3 { font-size: 16px; font-weight: 600; }
.ov-db .box { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.ov-db .notefull { background: #FBFAF8; white-space: pre-wrap; font-size: 15px; display: block; }
.ov-db .kv2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; }
.ov-db .kv2 > span { color: var(--ink-2); } .ov-db .kv2 > b { font-weight: 500; }
.kvr { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 4px 0; }
.kvr > span { font-family: Prompt; font-weight: 600; color: var(--red-dark); font-size: 13px; }
.kvr > b { font-weight: 500; } .kvr i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.ov-req { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 0; border-bottom: 1px solid #F0EEEA; }
.ov-req:last-child { border-bottom: 0; }
.ov-dact { display: flex; gap: 10px; flex-wrap: wrap; }
.ov-dact .btn { min-height: 44px; }
@media (max-width: 1100px) {
  .ov-card.span3 { grid-column: span 6; } .ov-card.span4, .ov-card.span5 { grid-column: span 6; }
}
@media (max-width: 720px) {
  .ov-band { border-radius: 18px; padding: 18px 16px 56px; }
  .ov-band h1 { font-size: 23px; }
  .ov-date { text-align: left; }
  .ov-fld { min-width: 0; flex: 1 1 100%; }
  .ov-main { padding: 0 6px; gap: 12px; }
  .ov-card, .ov-card.span3, .ov-card.span4, .ov-card.span5 { grid-column: 1 / -1; }
  .ov-kpi { grid-column: span 6 !important; flex-direction: column; gap: 8px; padding: 14px; }
  .ov-ico { width: 40px; height: 40px; } .ov-ico svg { width: 20px; height: 20px; }
  .ov-v { font-size: 26px; }
  .ov-tbl { display: none; }
  .ov-mcards { display: flex; flex-direction: column; gap: 10px; }
  .ov-mcard { display: flex; flex-direction: column; gap: 8px; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; width: 100%; }
  .ov-mcard .t { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
  .ov-mcard .nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 12px; color: var(--ink-2); }
  .ov-mcard .nums b { display: block; font-family: Prompt; font-size: 18px; color: var(--ink); }
  .ov-fu { grid-template-columns: 86px minmax(0, 1fr); } .ov-fu .ov-link { grid-column: 2; justify-self: start; }
}
.ov-band .ov-fld label { color: #fff; }
.ov-tbl td:first-child { min-width: 240px; }
.ov-tbl td:last-child .ov-link { white-space: nowrap; }
.ov-tbl td:nth-child(7) { min-width: 180px; }