/* ════════════════════════════════════════════════════════════════════
   🎨 X10 Bonus — UI v2 (2026-10-27)
   ธีมสะอาด สว่าง แบบแอปผู้บริหาร · ทับธีมเดิมด้วย body.v2 (ไม่แตะ CSS เดิม)
   ⚠️ ห้ามแก้ตัวเลข/สูตรในไฟล์นี้ — เป็นหน้าตาล้วน
   ════════════════════════════════════════════════════════════════════ */
body.v2 {
  --v2-bg: #f5f6f8;
  --v2-surface: #ffffff;
  --v2-line: #e6e8ec;
  --v2-line-2: #d5d9e0;
  --v2-ink: #111827;
  --v2-ink-2: #4b5563;
  --v2-ink-3: #8a93a3;
  --v2-brand: #1d3f8f;
  --v2-brand-2: #2f5bd3;
  --v2-brand-soft: #eef2fc;
  --v2-pos: #15803d;
  --v2-pos-soft: #ecf8f0;
  --v2-neg: #c62828;
  --v2-neg-soft: #fdf0f0;
  --v2-radius: 14px;
  --sidebar-w: 248px;
  background: var(--v2-bg) !important;
  color: var(--v2-ink);
  font-family: 'IBM Plex Sans Thai', 'Sarabun', 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 14.5px;
}
body.v2 .num, body.v2 [class*="num"] { font-variant-numeric: tabular-nums; }

/* ── Sidebar ─────────────────────────────────────────────── */
body.v2 .app-sidebar {
  background: var(--v2-surface) !important;
  color: var(--v2-ink);
  box-shadow: none !important;
  border-right: 1px solid var(--v2-line);
}
body.v2 .sidebar-brand { background: transparent; border-bottom: 1px solid var(--v2-line); padding: 18px 18px 16px; }
body.v2 .sidebar-brand-logo { background: var(--v2-brand); box-shadow: none; border-radius: 10px; }
body.v2 .sidebar-brand-title { color: var(--v2-ink); font-size: 15px; font-weight: 700; letter-spacing: .3px; }
body.v2 .sidebar-brand-sub { color: var(--v2-ink-3); font-size: 11.5px; }
body.v2 .sidebar-menu { padding: 10px 10px 16px; }
body.v2 .sidebar-section-label {
  color: var(--v2-ink-3); font-size: 11px; letter-spacing: .6px; text-transform: none;
  padding: 16px 10px 6px; font-weight: 600;
}
body.v2 .sidebar-item {
  color: var(--v2-ink-2); border-left: 0; border-radius: 9px; padding: 9px 10px;
  font-size: 14px; font-weight: 500; margin: 1px 0; gap: 10px;
}
body.v2 .sidebar-item:hover { background: #f2f4f7; color: var(--v2-ink); }
body.v2 .sidebar-item.active, body.v2 .sidebar-item.v2-on {
  background: var(--v2-brand-soft) !important; color: var(--v2-brand) !important; font-weight: 650;
}
body.v2 .sidebar-item-icon { font-size: 15px; width: 20px; }
body.v2 .sidebar-divider { background: var(--v2-line); margin: 10px 8px; }
body.v2 .sb-group-body { background: #f7f8fa; border-radius: 9px; margin: 2px 0 4px; }
body.v2 .sb-sub { color: var(--v2-ink-2); border-left: 0; border-radius: 8px; padding: 7px 10px; min-height: 36px; font-size: 13px; }
body.v2 .sb-sub:hover { background: #eef0f4; color: var(--v2-ink); }
body.v2 .sb-sub.active { background: var(--v2-brand-soft); color: var(--v2-brand); }
body.v2 .sb-sub-no { background: #e8ebf1; color: var(--v2-ink-2); }
body.v2 .sidebar-footer { background: transparent; border-top: 1px solid var(--v2-line); color: var(--v2-ink-3); }
body.v2 .v2-sb-count {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--v2-ink-3);
  background: #f1f3f6; border-radius: 999px; padding: 1px 7px;
}
body.v2 .sidebar-item.v2-on .v2-sb-count { background: #dfe6f8; color: var(--v2-brand); }

/* ── Header (แถบบนของหน้า) ───────────────────────────────── */
body.v2 > .main-content > header {
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid var(--v2-line) !important;
  box-shadow: none !important;
}
body.v2 > .main-content > header > .max-w-7xl { padding-top: 14px !important; padding-bottom: 12px !important; }
body.v2 header .brand-logo { display: none !important; }
body.v2 .v2-crumb { font-size: 12px; color: var(--v2-ink-3); font-weight: 500; margin-bottom: 2px; letter-spacing: .2px; }
body.v2 h1.brand-title {
  color: var(--v2-ink) !important; font-size: 22px !important; font-weight: 700 !important;
  letter-spacing: -.01em; background: none !important; -webkit-text-fill-color: currentColor !important;
}
body.v2 .brand-meta { color: var(--v2-ink-3); font-size: 12px; }
body.v2 .header-actions { gap: 6px !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
body.v2 .header-actions .btn-pro {
  background: #fff !important; border: 1px solid var(--v2-line-2) !important; color: var(--v2-ink-2) !important;
  border-radius: 9px !important; box-shadow: none !important; font-weight: 600; min-height: 36px;
}
body.v2 .header-actions .btn-pro:hover { background: #f5f7fa !important; color: var(--v2-ink) !important; transform: none !important; }
body.v2 .header-actions .btn-pro-primary {
  background: var(--v2-brand) !important; border-color: var(--v2-brand) !important; color: #fff !important;
}
body.v2 .header-actions .btn-pro-primary:hover { background: #17357a !important; color: #fff !important; }
body.v2 .header-actions .hdr-group { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
body.v2 .header-actions .hdr-group-label { display: none !important; }
body.v2 .header-actions .btn-divider { background: var(--v2-line) !important; }

/* ── แถบช่วงเวลา ─────────────────────────────────────────── */
body.v2 #filterBar {
  background: var(--v2-bg) !important; border-bottom: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.v2 #filterBar > .max-w-7xl { padding-top: 14px !important; padding-bottom: 2px !important; }
body.v2 .quick-filter-chips {
  background: #fff; border: 1px solid var(--v2-line); border-radius: 11px; padding: 3px !important; gap: 2px !important;
}
body.v2 .quick-chip {
  border: 0 !important; background: transparent !important; color: var(--v2-ink-2) !important;
  font-size: 12.5px !important; padding: 6px 11px !important; border-radius: 8px !important; box-shadow: none !important;
}
body.v2 .quick-chip:hover { background: #f2f4f7 !important; }
body.v2 .quick-chip.active, body.v2 .quick-chip.is-active, body.v2 .quick-chip[aria-pressed="true"] {
  background: var(--v2-brand) !important; color: #fff !important;
}
/* ตัดเส้นคั่นแนวตั้งในแถบช่วงเวลา */
body.v2 #filterBar div[style*="border-left"] { border-left: 0 !important; }
body.v2 #filterBar input[type="date"], body.v2 #filterBar input[type="text"] {
  border: 1px solid var(--v2-line-2) !important; border-radius: 9px !important; background: #fff !important;
  min-height: 34px; font-family: inherit;
}

/* ── พื้นที่เนื้อหา ───────────────────────────────────────── */
body.v2 main.max-w-7xl { padding-top: 14px !important; padding-bottom: 40px !important; }
body.v2 .dash-nav { display: none !important; }
body.v2 .v2-off { display: none !important; }

/* หัวหน้าแต่ละหน้า (ใต้ช่วงเวลา) */
body.v2 #v2PageIntro {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 4px 2px 14px;
}
body.v2 #v2PageIntro .v2-pi-desc { color: var(--v2-ink-2); font-size: 13.5px; max-width: 760px; line-height: 1.55; }
body.v2 #v2PageIntro .v2-pi-jump { display: flex; gap: 6px; flex-wrap: wrap; }
body.v2 .v2-jump {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--v2-ink-2); background: #fff;
  border: 1px solid var(--v2-line); border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap;
}
body.v2 .v2-jump:hover { border-color: var(--v2-brand-2); color: var(--v2-brand); }

/* การ์ด section */
body.v2 .section {
  background: var(--v2-surface) !important; border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important; box-shadow: none !important;
  padding: 22px 24px !important; margin-bottom: 14px !important;
}
body.v2 .deco-wave-bg { background-image: none !important; }
body.v2 .section-header-pro { text-align: left !important; margin-bottom: 18px !important; padding-right: 28px; }
body.v2 .section-header-pro::after { right: 0 !important; left: auto !important; }
body.v2 .sh-eyebrow {
  background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 4px !important;
  color: var(--v2-ink-3) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .3px;
  box-shadow: none !important; display: block !important;
}
body.v2 .section-header-pro h2 { color: var(--v2-ink) !important; font-size: 19px !important; font-weight: 700 !important; }
body.v2 .sh-subtitle { color: var(--v2-ink-2) !important; font-size: 13px !important; text-align: left !important; margin-left: 0 !important; }
body.v2 .section-header-pro .src-line { background: #f6f7f9; border-left-color: var(--v2-line-2); border-radius: 8px; }

body.v2 .card { border-color: var(--v2-line) !important; box-shadow: none !important; border-radius: 12px; }
body.v2 .card:hover { transform: none !important; box-shadow: 0 4px 14px rgba(17,24,39,.06) !important; }

/* ตาราง */
body.v2 thead th {
  background: #f8f9fb !important; color: var(--v2-ink-3) !important; text-transform: none !important;
  letter-spacing: .1px !important; font-size: 12px !important; font-weight: 600 !important; border-bottom: 1px solid var(--v2-line) !important;
}
body.v2 tbody td { border-bottom-color: #f0f1f4 !important; }
body.v2 tbody tr:hover td { background: #fafbfc; }

/* Hero — การ์ดเข้มใบเดียวของหน้า ไม่เต็มขอบจอ */
body.v2 .hero-banner, body.v2.has-sidebar .hero-banner {
  width: auto !important; margin: 0 0 14px !important; border-radius: 18px !important;
  background: linear-gradient(135deg, #142c66 0%, #1d3f8f 60%, #2550b8 100%) !important;
  box-shadow: none !important; padding: 26px 28px 30px !important;
}

/* ปุ่มทั่วไปในเนื้อหา */
body.v2 main button { font-family: inherit; }

/* ── มือถือ ─────────────────────────────────────────────── */
body.v2 #v2Tabs { display: none; }
@media (max-width: 980px) {
  body.v2 .mobile-topbar {
    background: rgba(255,255,255,.96) !important; color: var(--v2-ink) !important;
    box-shadow: none !important; border-bottom: 1px solid var(--v2-line); min-height: 50px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  body.v2 .mobile-menu-btn { color: var(--v2-ink) !important; }
  body.v2 .mobile-title { font-size: 16px; font-weight: 700; }
  body.v2 > .main-content > header { position: static !important; top: auto !important; }
  body.v2 header .brand-info { display: none !important; }
  body.v2 > .main-content > header > .max-w-7xl { padding: 8px 12px !important; }
  body.v2 .header-actions {
    flex-wrap: nowrap !important; overflow-x: auto; width: 100%; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body.v2 .header-actions::-webkit-scrollbar { display: none; }
  body.v2 .header-actions .btn-pro { flex: 0 0 auto; }
  body.v2 .header-actions { justify-content: flex-start !important; }
  body.v2 > .main-content > header > .max-w-7xl > * { width: 100%; }
  body.v2 #filterBar div[style*="border-left"] { margin-left: 0 !important; padding-left: 0 !important; }
  body.v2 #filterBar div[style*="border-left"] > span:first-child { display: none; }
  body.v2 #filterBar input[type="date"] { flex: 1 1 0; min-width: 0; }
  body.v2 #filterBar #villaSearch { width: 100% !important; }
  body.v2 #filterBar div[style*="border-left"]:has(#villaSearch) { flex: 1 1 100%; }
  body.v2 #filterBar div[style*="border-left"]:has(#dateFromInput) { flex: 1 1 100%; }
  body.v2 .header-actions .btn-pro span { display: inline !important; }
  body.v2 .header-actions .hdr-group { display: contents !important; }
  body.v2 #filterBar { position: static !important; }
  body.v2 #filterBar > .max-w-7xl { padding: 10px 12px 0 !important; }
  body.v2 .quick-filter-chips { flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  body.v2 .quick-filter-chips::-webkit-scrollbar { display: none; }
  body.v2 .quick-chip { flex: 0 0 auto; }
  body.v2 .section { padding: 16px 14px !important; border-radius: 12px !important; }
  body.v2 .section-header-pro h2 { font-size: 17px !important; }
  body.v2 .hero-banner, body.v2.has-sidebar .hero-banner { padding: 20px 16px 22px !important; border-radius: 16px !important; }
  body.v2 #v2PageIntro { margin: 2px 0 10px; }
  body.v2 #v2PageIntro .v2-pi-jump { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  body.v2 #v2PageIntro .v2-pi-jump::-webkit-scrollbar { display: none; }
  body.v2 main.max-w-7xl { padding-bottom: 90px !important; }

  /* แถบหัวหน้าเต็ม (← กลับ) ติดใต้แถบบนมือถือ (header ไม่ sticky แล้ว) */
  body.v2 .ip-bar { top: 50px !important; }
  body.v2.sum-open #sumPage .ip-bar { top: auto !important; }

  /* แถบเมนูล่าง */
  body.v2 #v2Tabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
    background: rgba(255,255,255,.97); border-top: 1px solid var(--v2-line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  body.v2 #v2Tabs button {
    font: inherit; background: none; border: 0; color: var(--v2-ink-3); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 10px;
    font-size: 11px; font-weight: 600; min-height: 50px; justify-content: center;
  }
  body.v2 #v2Tabs button .v2-ti { font-size: 19px; line-height: 1.1; filter: grayscale(1); opacity: .75; }
  body.v2 #v2Tabs button.v2-on { color: var(--v2-brand); background: var(--v2-brand-soft); }
  body.v2 #v2Tabs button.v2-on .v2-ti { filter: none; opacity: 1; }
  body.v2.sum-open #v2Tabs { display: none; }
}
@media print {
  body.v2 #v2Tabs, body.v2 #v2PageIntro { display: none !important; }
}

/* ════ หน้า 1 ภาพรวม (v2-overview.js) ════════════════════════════ */
body.v2 .v2-ov { display: block; }
body.v2 .v2-ov-wait { padding: 40px; text-align: center; color: var(--v2-ink-3); background: #fff; border: 1px solid var(--v2-line); border-radius: var(--v2-radius); }
body.v2 .v2-ov-period { color: var(--v2-ink-2); font-size: 13.5px; margin: 0 2px 12px; }
body.v2 .v2-ov-stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
body.v2 .v2-stat { background: #fff; border: 1px solid var(--v2-line); border-radius: var(--v2-radius); padding: 16px 18px; min-width: 0; }
body.v2 .v2-stat.main { border-color: #cfd8ea; }
body.v2 .v2-stat-l { font-size: 13px; color: var(--v2-ink-2); font-weight: 600; }
body.v2 .v2-stat-v { font-size: 26px; font-weight: 700; line-height: 1.25; margin: 4px 0 2px; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
body.v2 .v2-stat.main .v2-stat-v { font-size: 34px; }
body.v2 .v2-stat-s { font-size: 12px; color: var(--v2-ink-3); }
body.v2 .pos { color: var(--v2-pos); }
body.v2 .neg { color: var(--v2-neg); }
body.v2 .zero { color: var(--v2-ink-3); }

body.v2 .v2-card { background: #fff; border: 1px solid var(--v2-line); border-radius: var(--v2-radius); padding: 18px 20px 14px; margin-bottom: 14px; }
body.v2 .v2-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
body.v2 .v2-card-h h3 { font-size: 17px; font-weight: 700; color: var(--v2-ink); margin: 0; }
body.v2 .v2-muted { font-size: 12.5px; color: var(--v2-ink-3); margin-top: 2px; }
body.v2 .v2-seg { display: inline-flex; background: #f1f3f6; border-radius: 10px; padding: 3px; gap: 2px; }
body.v2 .v2-seg button { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: transparent; color: var(--v2-ink-2); padding: 6px 14px; border-radius: 8px; cursor: pointer; }
body.v2 .v2-seg button.on { background: #fff; color: var(--v2-ink); box-shadow: 0 1px 2px rgba(17,24,39,.08); }

/* ตารางแบบใหม่ — เส้นบาง ตัวเลขชิดขวา แถวกดได้ */
body.v2 table.v2-t { width: 100%; border-collapse: collapse; min-width: 0 !important; table-layout: auto; }
body.v2 table.v2-t th {
  background: transparent !important; color: var(--v2-ink-3) !important; font-size: 12px !important; font-weight: 600 !important;
  text-align: left; padding: 8px 10px !important; border-bottom: 1px solid var(--v2-line) !important; white-space: nowrap;
}
body.v2 table.v2-t td { padding: 11px 10px; border-bottom: 1px solid #f0f1f4; vertical-align: middle; font-size: 14px; }
body.v2 table.v2-t .v2-r, body.v2 table.v2-t th.v2-r { text-align: right; }
body.v2 table.v2-t td.v2-r { font-variant-numeric: tabular-nums; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; white-space: nowrap; }
body.v2 table.v2-t .v2-c-amt { text-align: right; font-weight: 700; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; width: 1%; }
body.v2 table.v2-t .v2-c-name { display: table-cell; }
body.v2 table.v2-t .v2-c-name > span:last-child { display: inline-block; vertical-align: middle; }
body.v2 table.v2-t .v2-c-grp { width: 1%; white-space: nowrap; }
body.v2 table.v2-t .v2-c-bar { width: 28%; }
body.v2 .v2-bar { display: block; height: 8px; border-radius: 99px; background: #cbd5e1; }
body.v2 .v2-bar.neg { background: #f3b4b4; }
body.v2 .v2-bar.pos { background: #a7dcb8; }
body.v2 table.v2-t tr.v2-row { cursor: pointer; }
body.v2 table.v2-t tr.v2-row:hover td { background: #f8f9fb; }
body.v2 .v2-caret { display: inline-block; width: 16px; color: var(--v2-ink-3); font-size: 11px; transition: transform .15s; vertical-align: middle; }
body.v2 .v2-caret.on { transform: rotate(90deg); }
body.v2 .v2-ico { display: inline-block; width: 24px; vertical-align: middle; }
body.v2 .v2-sub { display: block; font-size: 12px; color: var(--v2-ink-3); font-weight: 400; margin-top: 1px; }
body.v2 table.v2-t tr.v2-sub-row td { background: #fafbfc; padding-top: 8px; padding-bottom: 8px; font-size: 13.5px; }
body.v2 table.v2-t tr.v2-sub-row .v2-c-amt { font-size: 13.5px; font-weight: 600; }
body.v2 table.v2-t tr.v2-sub-head td { font-size: 12px; color: var(--v2-ink-3); font-weight: 600; padding-left: 42px; }
body.v2 .v2-indent { display: inline-block; padding-left: 32px; }
body.v2 table.v2-t tfoot td { border-top: 2px solid var(--v2-ink); border-bottom: 0; font-weight: 700; padding-top: 12px; }
body.v2 .v2-gtag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
body.v2 .v2-gtag.g1 { background: #eaf1fd; color: #1d4ed8; }
body.v2 .v2-gtag.g2 { background: #e8f6f3; color: #0f766e; }
body.v2 .v2-gtag.g3 { background: #fdeeee; color: #b91c1c; }
body.v2 .v2-gsums { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 13px; }
body.v2 .v2-gsum b { font-variant-numeric: tabular-nums; margin-left: 4px; }

body.v2 .v2-alerts { list-style: none; margin: 0; padding: 0; }
body.v2 .v2-alerts li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #f0f1f4; font-size: 13.5px; }
body.v2 .v2-alerts li:last-child { border-bottom: 0; }
body.v2 .v2-al-no { font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 6px; }
body.v2 .v2-alerts li.red .v2-al-no { background: #fdeeee; color: #b91c1c; }
body.v2 .v2-alerts li.amber .v2-al-no { background: #fdf4e3; color: #a16207; }
body.v2 .v2-al-who { font-size: 12px; color: var(--v2-ink-3); white-space: nowrap; }
body.v2 .v2-ov-more { display: flex; gap: 8px; flex-wrap: wrap; }
body.v2 .v2-link { font: inherit; font-size: 13px; font-weight: 600; color: var(--v2-brand); background: #fff; border: 1px solid var(--v2-line); border-radius: 10px; padding: 9px 14px; cursor: pointer; }
body.v2 .v2-link:hover { border-color: var(--v2-brand-2); }

/* ════ หัว: ปุ่มเดิม 12 ปุ่ม → เมนูเพิ่มเติม ════════════════════ */
body.v2 > .main-content > header > .max-w-7xl { position: relative; }
body.v2 .v2-hdr-quick { display: flex; gap: 6px; align-items: center; }
body.v2 .v2-qbtn { font: inherit; font-size: 13px; font-weight: 600; min-height: 36px; padding: 0 14px; border-radius: 9px; cursor: pointer; border: 1px solid var(--v2-line-2); background: #fff; color: var(--v2-ink-2); white-space: nowrap; }
body.v2 .v2-qbtn:hover { background: #f5f7fa; color: var(--v2-ink); }
body.v2 .v2-qbtn.primary { background: var(--v2-brand); border-color: var(--v2-brand); color: #fff; }
body.v2 .header-actions { display: none !important; }
body.v2.v2-more .header-actions {
  display: flex !important; flex-direction: column; align-items: stretch !important; flex-wrap: nowrap !important;
  position: absolute; right: 16px; top: calc(100% - 6px); z-index: 60; width: 250px;
  background: #fff !important; border: 1px solid var(--v2-line) !important; border-radius: 12px !important;
  padding: 6px !important; box-shadow: 0 12px 32px rgba(17,24,39,.14) !important; gap: 2px !important;
}
body.v2.v2-more .header-actions .btn-pro { justify-content: flex-start !important; border: 0 !important; width: 100%; }
body.v2.v2-more .header-actions .btn-pro span { display: inline !important; }
body.v2.v2-more .header-actions .btn-divider { width: 100% !important; height: 1px !important; margin: 4px 0 !important; }
body.v2.v2-more .header-actions .hdr-group { display: flex !important; flex-direction: column; gap: 2px; }
body.v2.v2-more .header-actions #refreshBtn { display: none !important; }
body.v2 #refreshBtn, body.v2 #refreshIcon { }

@media (max-width: 980px) {
  body.v2 .v2-ov-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  body.v2 .v2-stat { padding: 12px 14px; }
  body.v2 .v2-stat.main { grid-column: 1 / -1; }
  body.v2 .v2-stat-v { font-size: 20px; }
  body.v2 .v2-stat.main .v2-stat-v { font-size: 30px; }
  body.v2 .v2-card { padding: 14px 12px 10px; }
  body.v2 .v2-hide-m { display: none !important; }
  body.v2 table.v2-t td { padding: 10px 6px; }
  body.v2 .v2-indent { padding-left: 22px; }
  body.v2 table.v2-t tr.v2-sub-head td { padding-left: 28px; }
  body.v2 .v2-alerts li { grid-template-columns: auto 1fr; }
  body.v2 .v2-al-who { grid-column: 2; white-space: normal; }
  body.v2 header .v2-hdr-quick { width: 100%; }
  body.v2 header .v2-hdr-quick .v2-qbtn { flex: 1; }
  body.v2.v2-more .header-actions { left: 12px; right: 12px; width: auto; top: 100%; position: absolute; overflow: visible; }
}
@media (min-width: 981px) {
  body.v2 table.v2-t th.v2-r, body.v2 table.v2-t td.v2-r { width: 150px; }
  body.v2 table.v2-t th:last-child, body.v2 table.v2-t td.v2-c-amt { width: 150px; }
}

/* ════ หน้า 2–6 (v2-pages.js) ════════════════════════════════ */
body.v2 #v2DetailBar { display: flex; justify-content: center; margin: 4px 0 16px; }
body.v2 .v2-detail-btn { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--v2-ink-2); background: #fff; border: 1px dashed var(--v2-line-2); border-radius: 12px; padding: 11px 20px; cursor: pointer; width: 100%; }
body.v2 .v2-detail-btn:hover { color: var(--v2-brand); border-color: var(--v2-brand-2); }
body.v2 .v2-filter { display: flex; gap: 8px; flex-wrap: wrap; }
body.v2 .v2-filter input, body.v2 .v2-filter select { font: inherit; font-size: 13.5px; border: 1px solid var(--v2-line-2); border-radius: 9px; padding: 7px 11px; background: #fff; min-height: 36px; }
body.v2 .v2-filter input { width: 240px; }
body.v2 .v2-note { font-size: 12.5px; color: var(--v2-ink-3); margin-top: 10px; line-height: 1.6; }
body.v2 .v2-pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
body.v2 .v2-pill.green { background: var(--v2-pos-soft); color: var(--v2-pos); }
body.v2 .v2-pill.red { background: var(--v2-neg-soft); color: var(--v2-neg); }
body.v2 .v2-pill.amber { background: #fdf4e3; color: #a16207; }
body.v2 .v2-pill.gray { background: #f1f3f6; color: var(--v2-ink-3); }
body.v2 table.v2-t .v2-c-no { width: 44px; text-align: center; font-weight: 700; color: var(--v2-ink-3); font-variant-numeric: tabular-nums; }
body.v2 table.v2-t .v2-c-go { width: 24px; color: var(--v2-ink-3); font-size: 18px; text-align: center; }
body.v2 table.v2-t tr.v2-ref td { opacity: .6; }
body.v2 table.v2-t td.v2-l { text-align: left; white-space: nowrap; color: var(--v2-ink-2); }
body.v2 .v2-why { max-width: 720px; line-height: 1.5; }
body.v2 .v2-more-rows { width: 100%; margin-top: 10px; }
@media (max-width: 980px) {
  body.v2 .v2-filter { width: 100%; }
  body.v2 .v2-filter input { flex: 1 1 140px; width: auto; }
  body.v2 table.v2-t .v2-c-no { width: 30px; }
}

/* ════ รอบ 3: ตารางเดียว + สถานะชัด (v2-ui.js) ═══════════════════ */
/* ป้ายสถานะ */
body.v2 .v2-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 99px; white-space: nowrap; line-height: 1.4; border: 1px solid transparent; }
body.v2 .v2-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
body.v2 .v2-st.red { background: #fdeeee; color: #b42318; border-color: #f7d4d1; }
body.v2 .v2-st.green { background: #ecf8f0; color: #157a3c; border-color: #cdebd8; }
body.v2 .v2-st.amber { background: #fdf4e3; color: #9a5b00; border-color: #f4dfb5; }
body.v2 .v2-st.gray { background: #f2f4f7; color: #667085; border-color: #e4e7ec; }
body.v2 .v2-st.blue { background: #eef3fd; color: #1d4ed8; border-color: #d6e2fb; }
body.v2 .v2-st.g1 { background: #eaf1fd; color: #1d4ed8; }
body.v2 .v2-st.g2 { background: #e8f6f3; color: #0f766e; }
body.v2 .v2-st.g3 { background: #fdeeee; color: #b91c1c; }
body.v2 table.v2-t .v2-c-st { width: 1%; white-space: nowrap; }
body.v2 table.v2-t th.v2-c-st { text-align: left; }
body.v2 .v2-topics { font-size: 13px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
body.v2 .v2-show-m { display: none; }

/* ปุ่มกรองตามสถานะ */
body.v2 .v2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
body.v2 .v2-chip { font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--v2-line-2); background: #fff; color: var(--v2-ink-2); cursor: pointer; }
body.v2 .v2-chip b { font-weight: 700; color: var(--v2-ink); font-variant-numeric: tabular-nums; }
body.v2 .v2-chip i { width: 8px; height: 8px; border-radius: 50%; }
body.v2 .v2-chip.c-red i { background: #d92d20; } body.v2 .v2-chip.c-green i { background: #17a34a; }
body.v2 .v2-chip.c-amber i { background: #e09400; } body.v2 .v2-chip.c-gray i { background: #98a2b3; } body.v2 .v2-chip.c-blue i { background: #2f5bd3; }
body.v2 .v2-chip:hover { border-color: var(--v2-ink-3); }
body.v2 .v2-chip.on { background: var(--v2-ink); border-color: var(--v2-ink); color: #fff; }
body.v2 .v2-chip.on b { color: #fff; }
body.v2 .v2-select { font: inherit; font-size: 13.5px; border: 1px solid var(--v2-line-2); border-radius: 9px; padding: 7px 11px; background: #fff; min-height: 36px; }

/* แผงรายละเอียด */
#v2Drawer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
#v2Drawer .v2-dr-bg { position: absolute; inset: 0; background: rgba(17,24,39,.32); opacity: 0; transition: opacity .18s; }
#v2Drawer .v2-dr { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: #fff; box-shadow: -12px 0 40px rgba(17,24,39,.16); transform: translateX(100%); transition: transform .22s ease; overflow-y: auto; font-family: 'IBM Plex Sans Thai', 'Sarabun', sans-serif; color: #111827; }
#v2Drawer.on { pointer-events: auto; }
#v2Drawer.on .v2-dr-bg { opacity: 1; }
#v2Drawer.on .v2-dr { transform: none; }
#v2Drawer .v2-dr-in { padding: 20px 22px 32px; }
#v2Drawer .v2-dr-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
#v2Drawer .v2-dr-kicker { font-size: 12px; color: #8a93a3; font-weight: 600; }
#v2Drawer h3 { font-size: 19px; font-weight: 700; margin: 2px 0 2px; line-height: 1.35; }
#v2Drawer .v2-dr-x { font: inherit; border: 1px solid #e6e8ec; background: #fff; border-radius: 9px; width: 36px; height: 36px; cursor: pointer; flex: 0 0 auto; color: #4b5563; }
#v2Drawer .v2-dr-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px; padding: 12px 14px; background: #f7f8fa; border-radius: 12px; }
#v2Drawer .v2-dr-amt { font-size: 24px; font-weight: 700; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; }
#v2Drawer .v2-dr-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 2px; font-size: 13.5px; }
#v2Drawer .v2-dr-facts dt { color: #8a93a3; } #v2Drawer .v2-dr-facts dd { margin: 0; font-weight: 600; }
#v2Drawer .v2-dr-sec { margin-top: 16px; }
#v2Drawer .v2-dr-sec-t { font-size: 13px; font-weight: 700; color: #4b5563; margin-bottom: 4px; }
#v2Drawer .v2-dr-t td { padding: 9px 4px; }
#v2Drawer .v2-dr-act { margin-top: 16px; width: 100%; }
#v2Drawer .v2-note { font-size: 12.5px; color: #8a93a3; margin-top: 12px; line-height: 1.6; }
#v2Drawer .v2-muted { font-size: 12.5px; color: #8a93a3; }
#v2Drawer .v2-sub { display: block; font-size: 12px; color: #8a93a3; margin-top: 1px; line-height: 1.5; }
#v2Drawer table.v2-t { width: 100%; border-collapse: collapse; }
#v2Drawer table.v2-t td { border-bottom: 1px solid #f0f1f4; vertical-align: top; font-size: 14px; }
#v2Drawer .v2-c-amt { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; width: 1%; }
#v2Drawer .v2-r { text-align: right; white-space: nowrap; }
#v2Drawer .pos { color: #15803d; } #v2Drawer .neg { color: #c62828; } #v2Drawer .zero { color: #8a93a3; }
#v2Drawer .v2-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 99px; white-space: nowrap; }
#v2Drawer .v2-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#v2Drawer .v2-st.red { background: #fdeeee; color: #b42318; } #v2Drawer .v2-st.green { background: #ecf8f0; color: #157a3c; }
#v2Drawer .v2-st.amber { background: #fdf4e3; color: #9a5b00; } #v2Drawer .v2-st.gray { background: #f2f4f7; color: #667085; }
#v2Drawer .v2-st.blue, #v2Drawer .v2-st.g1 { background: #eef3fd; color: #1d4ed8; } #v2Drawer .v2-st.g2 { background: #e8f6f3; color: #0f766e; } #v2Drawer .v2-st.g3 { background: #fdeeee; color: #b91c1c; }
#v2Drawer .v2-link { font: inherit; font-size: 13px; font-weight: 600; color: #1d3f8f; background: #fff; border: 1px solid #e6e8ec; border-radius: 10px; padding: 9px 14px; cursor: pointer; }
body.v2-dr-open { overflow: hidden; }

@media (max-width: 980px) {
  body.v2 .v2-show-m { display: block; }
  body.v2 .v2-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -2px; margin-right: -2px; padding: 0 2px 2px; }
  body.v2 .v2-chips::-webkit-scrollbar { display: none; }
  body.v2 .v2-chip { flex: 0 0 auto; }
  body.v2 .v2-st { font-size: 11.5px; padding: 2px 8px 2px 7px; }
  body.v2 table.v2-t .v2-c-go { display: none; }
  #v2Drawer .v2-dr { top: auto; left: 0; width: 100vw; max-height: 86vh; border-radius: 18px 18px 0 0; transform: translateY(100%); }
  #v2Drawer .v2-dr-in { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
}