/* ═══════════════════════════════════════════════════════════════
     * LIGHT MODE LOCK — prevent OS/browser dark mode breaking the UI
     * ═══════════════════════════════════════════════════════════════
     * แอปออกแบบเพื่อ light mode เท่านั้น ถ้าปล่อยให้ Chrome/Edge บนมือถือ
     * หรือ Windows/Mac ใน OS dark mode auto-invert สี → ตัวหนังสือจะจาง
     * เพราะ design tokens (--text, --fg, --surface) เป็นชุด light อย่างเดียว
     */
    :root,
    html,
    body {
      color-scheme: light !important;
      -webkit-color-scheme: light !important;
      forced-color-adjust: none;
    }

    /* Form controls มัก inherit OS theme (เช่น iOS Safari, Android Chrome)
     * บังคับให้ใช้สีของแอปเสมอ — ป้องกันช่อง input ดำมืดอ่านไม่ออก */
    input,
    textarea,
    select,
    button,
    optgroup,
    option {
      color-scheme: light !important;
      forced-color-adjust: none;
    }

    /* WebKit (iOS/Safari) บางทีตั้ง -webkit-text-fill-color ทับ — รีเซ็ต */
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
      -webkit-text-fill-color: initial;
      caret-color: auto;
    }

    /* Chrome mobile "Auto Dark Theme" จะใส่ filter invert บางจุด — ปิดเสมอ */
    html {
      -webkit-text-size-adjust: 100%;
    }

    :root {
      /* ── Existing (do not remove — used widely) ── */
      --bg: #f6f7f8;
      --surface: #fff;
      --surface2: #fafbfc;
      --text: #1a1a2a;
      --text2: #4b5563;
      --muted: #9ca3af;
      --border: #e5e7eb;
      --accent: #3b82f6;
      --accent-bg: #eff6ff;
      --red: #ef4444;
      --red-bg: #fef2f2;
      --green: #22c55e;
      --green-bg: #f0fdf4;
      --yellow: #f59e0b;
      --yellow-bg: #fffbeb;
      --sidebar-bg: #1a1a2e;
      --sidebar-w: 220px;
      --r: 8px;
      --sh: 0 1px 3px rgba(0, 0, 0, .08);
      /* แบรนด์ navy/gold เป็นค่าคงที่ (= hex เดิมเป๊ะ, theme ไม่ override) — รวม hardcode ~322 จุด */
      --brand-navy: #0f2a52;
      --brand-gold: #c8a96a;
      /* หัว modal ทุกตัว = ไล่สี navy เดียวกับแบนเนอร์หน้าสรุปลูกค้า (.cp-header) */
      --modal-head: linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);

      /* ── Canonical KDP Design System tokens (aliases of the above) ── */
      --surface-3: #f3f4f6;
      --border-soft: #f0f1f3;
      --border-2: #e5e7eb;
      --fg: var(--text);
      --fg-2: var(--text2);
      --fg-3: #374151;
      --muted-2: #6b7280;
      --fg-invert: #ffffff;

      --brand: var(--accent);
      --brand-hover: #2563eb;
      --brand-soft: var(--accent-bg);
      --brand-ink: #60a5fa;

      --navy: var(--sidebar-bg);
      --navy-2: #16213e;
      --navy-3: #0f172a;

      --danger: var(--red);
      --danger-bg: var(--red-bg);
      --danger-border: #fca5a5;
      --success: var(--green);
      --success-bg: var(--green-bg);
      --warning: var(--yellow);
      --warning-bg: var(--yellow-bg);
      --warning-ink: #92400e;
      --warning-strong: #ea580c;
      --violet: #7c3aed;
      --violet-bg: #faf5ff;
      --violet-2: #8b5cf6;
      --violet-2-bg: #faf5ff;
      --rose: #f43f5e;
      --rose-bg: #fff1f2;
      --teal: #14b8a6;
      --teal-bg: #f0fdfa;

      /* Status chip pairs */
      --st-normal: var(--success);
      --st-normal-bg: var(--success-bg);
      --st-overdue: var(--danger);
      --st-overdue-bg: var(--danger-bg);
      --st-court: var(--warning);
      --st-court-bg: var(--warning-bg);
      --st-closed: var(--muted-2);
      --st-closed-bg: #f3f4f6;

      /* Typography */
      --font-sans: 'Sarabun', 'Helvetica Neue', Arial, sans-serif;
      --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
      --font-print: 'TH Sarabun New', 'Sarabun', serif;

      /* Radii + shadows */
      --r-sm: 5px;
      --r-md: 10px;
      --r-lg: 12px;
      --r-pill: 9999px;
      --sh-1: var(--sh);
      --sh-2: 0 1px 4px rgba(0, 0, 0, .06);
      --sh-3: 0 4px 12px rgba(0, 0, 0, .10);
      --sh-4: 0 4px 16px rgba(0, 0, 0, .08);

      /* Gradients */
      --grad-login-hero: linear-gradient(145deg, #1e3a6e 0%, #1a1a2e 60%, #0f172a 100%);
      --grad-login-glow: radial-gradient(ellipse at 30% 50%, rgba(59, 130, 246, .25) 0%, transparent 65%);
      --grad-hero-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Sarabun', sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.5;
      overflow-x: hidden;
    }
    html { overflow-x: hidden; }

    input,
    select,
    textarea,
    button {
      font-family: inherit;
      font-size: 13px;
    }

    .hidden {
      display: none !important;
    }

    a {
      color: var(--accent);
      text-decoration: none;
    }

    /* ── LAYOUT (redesigned: no sidebar, single top-nav) ── */
    /* top nav = 2 rows: 54px toprow + 46px nav = 100px total */
    :root { --nav-h: 100px; }
    /* navbar is position:fixed — push app content below it */
    .app { margin-top: var(--nav-h); min-height: calc(100vh - var(--nav-h)); background: #f4f5f7; }
    .main { /* compat stub */ }
    .content { padding: 20px 24px; }
    /* Customer profile: flex column, full viewport below header */
    #pg-customer { flex-direction: column; height: calc(100vh - var(--nav-h)); overflow: hidden; }

    /* PAGE VISIBILITY — controlled by go() via style.display only
       No .page.active rule — eliminates all CSS specificity conflicts */
    .page { display: none; }

    /* ─── View Transitions — page crossfade (native, no dep; JS-gated สำหรับ reduced-motion) ─── */
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: .22s; }
    /* app-shell: header นิ่งตอนสลับหน้า — ตั้งชื่อ VT → หลุดจาก root crossfade, morph อยู่กับที่ (เนื้อหาเฟดอย่างเดียว) */
    #kd-topnav { view-transition-name: kdp-topnav; }

    /* ─── Top progress bar — แถบบางบนสุดตอนรอ API (perceived speed; native, no dep) ─── */
    #kdp-progress {
      position: fixed; top: 0; left: 0; right: 0; height: 3px;
      z-index: 9999; pointer-events: none; opacity: 0;
      transition: opacity .25s var(--ease-smooth);
    }
    #kdp-progress.on { opacity: 1; }
    #kdp-progress::before {
      content: ''; display: block; height: 100%; width: 45%;
      background: linear-gradient(90deg, transparent, var(--brand-gold, #c8a96a), #efd9a3, transparent);
      box-shadow: 0 0 8px rgba(200, 169, 106, .6);
      animation: kdpProgSweep 1.1s ease-in-out infinite;
    }
    @keyframes kdpProgSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(360%); } }
    @media (prefers-reduced-motion: reduce) {
      #kdp-progress::before { animation: none; width: 100%; opacity: .55; }
    }

    /* ─── ตัวเลขเรียงตรงคอลัมน์ทั้งแอป (เงิน/งวด/วันที่) — tabular-nums ไม่กระทบตัวอักษร ─── */
    table, .ket-stats, .dsx-stats,
    [class*="kpi"], [class*="-val"], [class*="-amount"],
    [class*="-total"], [class*="-num"], .num, .money, .amount {
      font-variant-numeric: tabular-nums;
    }

    /* ─── Skeleton loaders — โครงเทา shimmer ตอนโหลดลิสต์ (perceived speed) ─── */
    .sk-bar {
      height: 12px; border-radius: 6px;
      background: linear-gradient(90deg, #e9edf3 25%, #f3f6fa 50%, #e9edf3 75%);
      background-size: 200% 100%;
      animation: kdpSk 1.3s var(--ease-in-out, ease) infinite;
    }
    @keyframes kdpSk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    tr.sk-row td { padding: 13px 14px !important; }
    tr.sk-row { animation: none !important; }     /* กัน entrance stagger ของตารางมาเล่นทับ skeleton */
    .nwq-sk {
      background: #fff; border: 1px solid var(--tb-line, #e8edf7);
      border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
    }

    /* ─── Undo toast (deferred delete) ─── */
    .kdp-undo {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(18px);
      z-index: 10000; background: #1f2d44; color: #fff; padding: 12px 8px 12px 18px;
      border-radius: 12px; display: flex; align-items: center; gap: 12px;
      box-shadow: 0 10px 34px rgba(5, 15, 35, .4); font-size: 14px; font-weight: 600;
      opacity: 0; pointer-events: none; overflow: hidden; max-width: 90vw;
      transition: opacity .25s var(--ease-smooth), transform .25s var(--ease-spring);
    }
    .kdp-undo.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
    .kdp-undo-btn {
      background: none; border: none; color: var(--brand-gold, #c8a96a); font-weight: 800;
      font-size: 14px; cursor: pointer; padding: 5px 12px; border-radius: 7px; font-family: inherit; white-space: nowrap;
    }
    .kdp-undo-btn:hover { background: rgba(255, 255, 255, .14); }
    .kdp-undo-bar {
      position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
      background: var(--brand-gold, #c8a96a); transform-origin: left; animation: kdpUndoBar 5s linear forwards;
    }
    @keyframes kdpUndoBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

    /* ─── Offline / connection-lost banner ─── */
    #kdp-offline {
      position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
      background: linear-gradient(90deg, #b45309, #d97706); color: #fff;
      text-align: center; padding: 8px 14px; font-size: 13px; font-weight: 700;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
      transform: translateY(-100%); transition: transform .3s var(--ease-spring);
    }
    #kdp-offline.on { transform: translateY(0); }

    /* ─── Baht-to-text hint ใต้ช่องเงิน ─── */
    .baht-hint { font-size: 11px; color: var(--brand-gold, #a07d3a); font-weight: 700; margin-top: 3px; min-height: 13px; letter-spacing: .01em; }

    /* ─── Sparkline ประวัติจ่าย (โปรไฟล์ลูกค้า) ─── */
    .cp-cc-spark { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
    .cp-cc-spark .cp-spark { display: block; height: 26px; opacity: .9; }
    .cp-cc-spark-lbl { font-size: 10px; color: var(--muted); font-weight: 600; white-space: nowrap; }

    /* ─── ยอดรวมที่กรอง (live totals) — ตารางบัญชี ─── */
    .acct-totals {
      display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
      padding: 8px 14px; margin-bottom: 8px; border-radius: 10px;
      background: var(--surface2, #f7f9ff); border: 1px solid var(--tb-line, #e8edf7);
      font-size: 12.5px; color: var(--muted, #667); font-variant-numeric: tabular-nums;
    }
    .acct-totals b { color: var(--tb-navy, #1f2d44); font-weight: 800; }
    .acct-totals i { color: var(--brand-gold, #c8a96a); }

    /* ─── Success check overlay (รับเงินสำเร็จ) — SVG stroke draw ─── */
    #_okCheck { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .2s; }
    #_okCheck.on { opacity: 1; }
    .okc-card { background: rgba(255, 255, 255, .97); border-radius: 18px; padding: 26px 34px; text-align: center; box-shadow: 0 18px 50px rgba(5, 15, 35, .28); transform: scale(.9); transition: transform .25s var(--ease-spring); }
    #_okCheck.on .okc-card { transform: scale(1); }
    .okc-svg { width: 64px; height: 64px; display: block; margin: 0 auto 10px; }
    .okc-circle { stroke: #16a34a; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; }
    .okc-check { stroke: #16a34a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; }
    #_okCheck.on .okc-circle { animation: okcCircle .45s ease forwards; }
    #_okCheck.on .okc-check { animation: okcCheck .35s .35s ease forwards; }
    @keyframes okcCircle { to { stroke-dashoffset: 0; } }
    @keyframes okcCheck { to { stroke-dashoffset: 0; } }
    .okc-msg { font-size: 16px; font-weight: 800; color: #1f2d44; }
    .okc-sub { font-size: 12px; color: var(--muted, #889); margin-top: 3px; }
    @media (prefers-reduced-motion: reduce) {
      #_okCheck.on .okc-circle, #_okCheck.on .okc-check { animation: none; stroke-dashoffset: 0; }
      .okc-card { transition: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .sk-bar { animation: none; }
      .kdp-undo-bar { animation: none; }
      .kdp-undo, #kdp-offline { transition: opacity .01ms; }
    }
    @media (prefers-reduced-motion: reduce) {
      ::view-transition-group(*),
      ::view-transition-old(*),
      ::view-transition-new(*) { animation: none !important; }
    }

    /* ── Assessment modal (global — must NOT be inside any .page) ── */
    #col-assess-modal {
      position: fixed; inset: 0; background: rgba(5,15,35,.55);
      z-index: 700; display: none; align-items: flex-start; justify-content: center;
      backdrop-filter: blur(4px); padding: 16px; overflow-y: auto;
    }
    #col-assess-modal.on { display: flex; }
    .ca-card { background: #fff; border-radius: 16px; width: 100%; max-width: 780px; margin: auto; box-shadow: 0 28px 80px rgba(5,15,35,.35); display: flex; flex-direction: column; overflow: hidden; }
    .ca-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; position: relative; background: var(--modal-head); }
    .ca-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brand-gold) 30%, #efd9a3 52%, var(--brand-gold) 72%, transparent); }
    .ca-head-title { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; font-family: 'Cinzel','Sarabun',serif; letter-spacing: .02em; }
    .ca-head-title i { font-size: 18px; color: var(--brand-gold); }
    .ca-close { background: rgba(255,255,255,.18); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background .15s; }
    .ca-close:hover { background: rgba(255,255,255,.35); }
    .ca-body { padding: 22px; overflow-y: auto; max-height: 80vh; }
    .ca-loading { text-align: center; padding: 48px 20px; color: #96a5bc; font-size: 15px; }
    .ca-loading i { font-size: 28px; margin-bottom: 10px; display: block; color: var(--brand-gold); }
    .ca-error { text-align: center; padding: 40px 20px; color: #dc2626; font-size: 14px; }
    .ca-error i { font-size: 28px; margin-bottom: 10px; display: block; }
    .ca-input-row { background: #f7f9ff; border-radius: 10px; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; font-size: 13px; color: #374a65; }
    .ca-input-item { display: flex; flex-direction: column; gap: 2px; }
    .ca-input-label { font-size: 11px; font-weight: 700; color: #96a5bc; text-transform: uppercase; letter-spacing: .06em; }
    .ca-input-val { font-weight: 600; color: #1f2d44; }
    .ca-section-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #96a5bc; border-bottom: 1px solid #edf1f7; padding-bottom: 7px; margin: 20px 0 14px; }
    .ca-section-hd:first-of-type { margin-top: 0; }
    .ca-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; margin-bottom: 4px; }
    .ca-kpi { background: #f7f9ff; border-radius: 10px; padding: 12px 14px; border: 1px solid #e8edf7; display: flex; flex-direction: column; gap: 4px; }
    .ca-kpi-label { font-size: 11px; color: #96a5bc; font-weight: 600; }
    .ca-kpi-val { font-size: 17px; font-weight: 800; color: #1f2d44; }
    .ca-kpi-sub { font-size: 11px; color: #96a5bc; }
    .ca-kpi.highlight { background: linear-gradient(135deg, #faf7f0, #f4ecda); border-color: #e7d6b5; }
    .ca-kpi.highlight .ca-kpi-val { color: var(--brand-navy); font-family: 'Cinzel','Sarabun',serif; }
    .ca-auction-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 10px; }
    .ca-aucbox { border-radius: 10px; padding: 12px 14px; border: 1px solid #e8edf7; display: flex; flex-direction: column; gap: 4px; }
    .ca-aucbox-label { font-size: 11px; font-weight: 700; color: #96a5bc; }
    .ca-aucbox-val { font-size: 15px; font-weight: 800; }
    .ca-aucbox-pct { font-size: 11px; color: #96a5bc; }
    .ca-ltv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .ca-ltv-table th { text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 700; color: #96a5bc; text-transform: uppercase; letter-spacing: .07em; border-bottom: 2px solid #edf1f7; background: #f7f9ff; }
    .ca-ltv-table td { padding: 10px 12px; border-bottom: 1px solid #f0f3f8; vertical-align: middle; }
    .ca-ltv-table tr:last-child td { border-bottom: none; }
    .ca-ltv-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
    .ca-coverage-ok { color: #15803d; }
    .ca-coverage-no { color: #dc2626; }
    .ca-risk-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
    .ca-risk-bar-wrap { flex: 1; height: 10px; background: #edf1f7; border-radius: 5px; overflow: hidden; }
    .ca-risk-bar { height: 100%; border-radius: 5px; transition: width .5s; }
    .ca-risk-label { font-size: 13px; font-weight: 700; min-width: 60px; }
    .ca-risk-score { font-size: 22px; font-weight: 900; min-width: 42px; text-align: right; }
    .ca-links-grid { display: flex; flex-wrap: wrap; gap: 8px; }
    .ca-link-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid #e8edf7; color: #374a65; background: #f7f9ff; transition: background .15s, border-color .15s; }
    .ca-link-btn:hover { background: #edf1f7; border-color: #d0d7e8; }
    .ca-link-btn.primary { background: var(--brand-navy); color: var(--brand-gold); border-color: var(--brand-navy); }
    .ca-link-btn.primary:hover { background: #1a3d6e; }
    .ca-treasury-note { font-size: 12px; color: #96a5bc; margin-top: 10px; font-style: italic; }
    .ca-led-direct { margin-top: 10px; }
    .col-btn-assess { background: linear-gradient(135deg, #a07d3a, var(--brand-gold) 60%, #e3c785) !important; color: #0a1e3d !important; border: none !important; font-weight: 700 !important; }
    .col-btn-assess:hover { filter: brightness(1.07); }

    /* ══════════════════════════════════════
       TOP NAV BAR — Two-tier premium design
       ══════════════════════════════════════ */
    #kd-topnav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 500;
      background: #091b35;
      border-top: 3px solid var(--brand-gold);
      box-shadow: 0 4px 24px rgba(5,15,35,.55);
      font-family: 'Sarabun', sans-serif;
      color: #fff;
    }

    /* ── Row 1: Brand + User ──
     * overflow:visible — เหรียญโลโก้ล้นขอบแถวเล็กน้อย + halo + dropdown ผู้ใช้
     * (เดิม overflow:hidden จะ clip ทั้ง halo และเมนูผู้ใช้) */
    .kdt-toprow {
      display: flex; align-items: center; height: 54px;
      padding: 0 20px 0 16px;
      border-bottom: 1px solid rgba(255,255,255,.055);
      overflow: visible;
    }
    .kdt-toprow-spacer { flex: 1; }

    /* ════ GOLD MEDALLION CREST (2026-06-05) — โลโก้ตราม้าทองทรงเหรียญ ════
     * วงกลม 60px (ตราบริษัทเป็นวงกลมอยู่แล้ว) + วงแหวนทองซ้อน 2 ชั้น
     * + รัศมีเรืองทองด้านหลัง + ประกายวิ่งผ่านตอน hover */
    .kdp-logo-wrap {
      width: 60px; height: 60px; border-radius: 50%;
      margin: -3px 0;                 /* ล้นแถวบน-ล่างข้างละ 3px = เด่นโดยไม่ดันเลย์เอาต์ */
      position: relative; z-index: 6;
      background: transparent;        /* เลิกวงแหวนทองปลอม — ใช้วงแหวนของโลโก้เองแยกจากแถบนาวี */
      box-shadow:
        0 0 16px rgba(200, 169, 106, .42),   /* เหลือแค่ glow ทองนุ่ม ๆ ให้เหรียญลอยจากพื้นนาวี */
        0 4px 14px rgba(5, 15, 35, .5);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; overflow: hidden;
    }
    .kdp-logo-img {
      height: 60px; width: 60px; object-fit: contain;   /* เต็มวง = วงแหวนทองของโลโก้เป็นขอบเอง */
      border-radius: 50%;
    }
    /* ประกายทองวิ่งผ่านเหรียญตลอดเวลา (วน) — เร่งจังหวะตอน hover */
    .kdp-logo-wrap::after {
      content: ''; position: absolute; inset: 0; border-radius: 50%;
      background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.04) 32%, rgba(255,255,255,.16) 42%, rgba(255,255,255,.50) 50%, rgba(255,255,255,.16) 58%, rgba(255,255,255,.04) 68%, transparent 82%);
      background-size: 280% 100%; background-position: 200% 0;
      animation: kdpLogoShine 4.2s cubic-bezier(.45,0,.25,1) infinite;
      pointer-events: none; mix-blend-mode: screen;
    }
    .kdt-brand:hover .kdp-logo-wrap::after { animation-duration: 1.8s; }
    @keyframes kdpLogoShine {
      0%   { background-position: 200% 0; }
      55%  { background-position: -80% 0; }
      100% { background-position: -80% 0; }   /* หยุดนิ่งช่วงท้ายก่อนวนรอบใหม่ */
    }
    @media (prefers-reduced-motion: reduce) {
      .kdp-logo-wrap::after { animation: none; }
    }

    /* Brand link */
    .kdt-brand {
      display: flex; align-items: center; gap: 13px; cursor: pointer;
      padding: 4px 18px 4px 0; flex-shrink: 1; min-width: 0; text-decoration: none;
      border-right: 1px solid rgba(200,169,106,.2);
      position: relative;
      transition: opacity .15s;
    }
    /* halo รัศมีทองนุ่ม ๆ หลังเหรียญ (ไม่บังคลิก) */
    .kdt-brand::before {
      content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
      width: 92px; height: 92px; border-radius: 50%;
      background: radial-gradient(circle, rgba(200, 169, 106, .30) 0%, rgba(200, 169, 106, .10) 45%, transparent 70%);
      pointer-events: none;
    }
    .kdt-brand:hover { opacity: .92; }
    .kdp-brand-text { display: flex; flex-direction: column; line-height: 1.3; position: relative; }
    .kdp-brand-th {
      font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap;
      letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; max-width: 55vw;
      text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
    }
    .kdp-brand-en { font-size: 10px; color: #e3c785; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; margin-top: 2px; }

    /* User area */
    .kdt-user {
      display: flex; align-items: center; gap: 14px; flex-shrink: 0; position: relative;
    }
    .kdp-clock { font-size: 11px; color: rgba(255,255,255,.38); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
    .kdt-userbox {
      display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(200,169,106,.28);
      border-radius: 6px; color: rgba(255,255,255,.88); font-size: 12.5px; font-weight: 600;
      cursor: pointer; font-family: 'Sarabun', sans-serif;
      transition: background .15s, border-color .15s;
    }
    .kdt-userbox:hover { background: rgba(200,169,106,.12); border-color: rgba(200,169,106,.55); }
    .kdt-uname { font-size: 12.5px; }
    #kdt-user-menu {
      position: absolute; top: calc(100% + 8px); right: 0;
      background: #fff; border: 1px solid #dde3ec;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(5,15,35,.2); min-width: 170px;
      padding: 5px 0; display: none; z-index: 400;
      overflow: hidden;
    }
    #kdt-user-menu.open { display: block; }
    #kdt-user-menu button {
      display: flex; width: 100%; align-items: center; gap: 10px;
      padding: 10px 16px; background: none; border: none;
      font-size: 13px; font-family: 'Sarabun', sans-serif; color: #1f2a44; cursor: pointer;
      transition: background .12s;
    }
    #kdt-user-menu button:hover { background: #fff1f0; color: #b91c1c; }

    /* ── Row 2: Navigation tabs ── */
    .kdt-nav {
      display: flex; align-items: stretch; height: 46px;
      padding: 0 8px; overflow-x: auto; scrollbar-width: none; gap: 0;
    }
    .kdt-nav::-webkit-scrollbar { display: none; }
    .kdt-nav-item {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0 18px; height: 100%; border: none; background: none;
      color: rgba(255,255,255,.5); font-size: 14px; font-weight: 500;
      cursor: pointer; white-space: nowrap; font-family: 'Sarabun', sans-serif;
      position: relative; transition: color .14s;
      border-bottom: 2px solid transparent;
    }
    .kdt-nav-item:hover { color: rgba(255,255,255,.88); background: rgba(255,255,255,.04); }
    .kdt-nav-item.on {
      color: var(--brand-gold); font-weight: 700;
      border-bottom-color: var(--brand-gold);
      background: rgba(200,169,106,.06);
    }

    /* ── Dropdown ── */
    .kdt-dropdown { position: relative; height: 100%; display: flex; align-items: center; }
    .kdt-drop-btn { height: 100%; border-radius: 0; }
    .kdt-drop-menu {
      position: fixed;
      background: #fff; border: 1px solid #dde3ec;
      border-radius: 0 0 8px 8px;
      box-shadow: 0 10px 30px rgba(5,15,35,.18); min-width: 190px;
      padding: 6px 0; display: none; z-index: 1000;
    }
    .kdt-drop-menu.open { display: block; }
    .kdt-drop-menu button {
      display: flex; width: 100%; align-items: center; text-align: left;
      padding: 11px 18px; background: none; border: none;
      font-size: 14px; font-family: 'Sarabun', sans-serif; color: #1f2a44; cursor: pointer;
      border-left: 3px solid transparent; transition: all .12s;
    }
    .kdt-drop-menu button:hover { background: #f3f6fb; color: var(--brand-navy); border-left-color: var(--brand-gold); }
    .kdt-drop-menu button.on { background: #fdf8ee; color: var(--brand-navy); font-weight: 600; border-left-color: var(--brand-gold); }
    .kdt-drop-label { padding: 7px 18px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #a0aec0; font-weight: 700; pointer-events: none; }
    .kdt-drop-hr { border: none; border-top: 1px solid #eef1f5; margin: 4px 0; }

    /* ── Misc ── */
    #kdtNavBadge {
      display: none; background: #ef4444; color: #fff; font-size: 9px; font-weight: 700;
      border-radius: 8px; padding: 1px 5px; min-width: 15px; text-align: center; line-height: 1.4;
    }
    #kdtBellDot { display: none; }
    @media (max-width: 900px) { .kdp-brand-en, .kdp-clock { display: none; } }
    @media (max-width: 640px) {
      /* nav row hidden on mobile (ket-theme.css), only toprow 44px */
      :root { --nav-h: 44px; }
      .kdt-toprow { padding: 0 10px; height: 44px; }
      .kdt-nav { height: 36px; padding: 0 4px; }
      .kdt-nav-item { padding: 0 10px; font-size: 12px; }
      .kdt-uname { display: none; }
      .kdp-logo-wrap { width: 42px; height: 42px; border-radius: 50%; margin: 0; }
      .kdp-logo-img { height: 38px; width: 38px; }
      .kdt-brand::before { display: none; }
    }

    /* ── Sidebar removed ── */
    .sidebar, .sidebar.open, aside.sidebar { display: none !important; }

    .kpi {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 18px 20px;
      box-shadow: var(--sh);
    }

    /* ── CARD ── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      box-shadow: var(--sh);
      margin-bottom: 20px;
    }

    /* ── TABLE ── */
    .tbl-wrap {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th {
      text-align: left;
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .3px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      white-space: normal;
      word-break: break-word;
      max-width: 150px;
    }

    td {
      padding: 8px 10px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 13px;
      white-space: normal;
      word-break: break-word;
      max-width: 150px;
      overflow-wrap: break-word;
    }

    tr:hover td {
      background: #fafbfc;
    }

    tr.clickable {
      cursor: pointer;
    }

    tr.clickable:hover td {
      background: var(--accent-bg);
    }

    td[onclick*="openCustomerProfile"]:hover {
      color: var(--accent) !important;
      text-decoration: underline;
    }

    /* ── BADGES ── */
    .badge-s {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 600;
    }

    .b-normal {
      background: var(--green-bg);
      color: var(--green);
    }

    .b-overdue {
      background: var(--red-bg);
      color: var(--red);
    }

    .b-court {
      background: var(--yellow-bg);
      color: #92400e;
    }

    .b-closed {
      background: #f3f4f6;
      color: #6b7280;
    }

    .b-dormant {
      background: #ede9fe;
      color: #6d28d9;
    }

    .b-interest {
      background: #ecfeff;
      color: #0891b2;
      border: 1px solid #cffafe;
    }

    .b-daily {
      background: #fef3c7;
      color: #854d0e;
      border: 1px solid #fde68a;
    }

    .b-personal {
      background: var(--accent-bg);
      color: var(--accent);
    }

    .b-company {
      background: #faf5ff;
      color: #7c3aed;
    }

    .b-ever-court {
      background: #fef3c7;
      color: #92400e;
      font-size: 10px;
      padding: 1px 6px;
      margin-left: 4px;
    }

    .search-bar input {
      flex: 1;
      padding: 9px 14px;
      border: 1px solid var(--border);
      border-radius: 6px;
      outline: none;
      background: var(--surface);
    }

    .search-bar input:focus {
      border-color: var(--accent);
    }

    .search-bar select {
      padding: 9px 14px;
      border: 1px solid var(--border);
      border-radius: 6px;
      outline: none;
      background: var(--surface);
      min-width: 140px;
    }

    /* ── MODAL ── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 500;
      align-items: flex-start;
      justify-content: center;
      padding: 30px;
      overflow-y: auto;
    }

    .modal-overlay.open {
      display: flex;
    }

    .modal-box {
      background: var(--surface);
      width: 100%;
      max-width: 960px;
      border-radius: var(--r);
      overflow: hidden;
      margin-top: 20px;
    }

    .modal-hd {
      padding: 16px 24px;
      background: var(--modal-head);
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .modal-hd h2 {
      font-size: 16px;
      font-weight: 600;
    }

    .modal-hd .sub {
      font-size: 12px;
      opacity: .7;
      margin-top: 2px;
    }

    .modal-close {
      background: none;
      border: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      opacity: .7;
    }

    .modal-close:hover {
      opacity: 1;
    }

    .modal-tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
    }

    .modal-tab {
      padding: 12px 20px;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      background: none;
      border-top: none;
      border-left: none;
      border-right: none;
    }

    .modal-tab.on {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }

    .modal-content {
      padding: 24px;
      max-height: 65vh;
      overflow-y: auto;
    }

    .tab-content {
      display: none;
    }

    .tab-content.on {
      display: block;
    }

    /* ── FORM GRID ── */
    .fg {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 20px;
    }

    .fg.col2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .fg.col1 {
      grid-template-columns: 1fr;
    }

    .ff {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .ff.span2 {
      grid-column: span 2;
    }

    .ff.span3 {
      grid-column: span 3;
    }

    .ff label {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
    }

    .ff input,
    .ff select,
    .ff textarea {
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 5px;
      outline: none;
      background: var(--surface);
    }

    .ff input:focus,
    .ff select:focus,
    .ff textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(15, 42, 82, 0.12);
    }

    .ff input:disabled,
    .ff select:disabled,
    .ff textarea:disabled {
      background: var(--surface2);
      color: var(--muted);
      cursor: not-allowed;
    }

    .ff input[readonly] {
      background: var(--surface2);
      color: var(--text2);
    }

    .section-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
      margin: 20px 0 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-title:first-child {
      margin-top: 0;
    }

    /* ── BUTTONS ── */
    .btn {
      padding: 8px 18px;
      border: none;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
    }

    .btn-primary:hover {
      opacity: .9;
    }

    .btn-danger {
      background: var(--red);
      color: #fff;
    }

    .btn-outline {
      background: none;
      border: 1px solid var(--border);
      color: var(--text2);
    }

    .btn-outline:hover {
      background: var(--surface2);
    }

    .btn-sm {
      padding: 5px 12px;
      font-size: 12px;
    }

    .btn-group {
      display: flex;
      gap: 8px;
      margin-top: 16px;
    }

    .area-stats span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .area-body.open {
      display: block;
    }

    .fu-result-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 600;
    }

    .fu-contacted {
      background: #f0fdf4;
      color: #16a34a;
    }

    .fu-no-contact {
      background: #fef2f2;
      color: #dc2626;
    }

    .fu-promised {
      background: #fffbeb;
      color: #d97706;
    }

    .fu-rejected {
      background: #fdf4ff;
      color: #9333ea;
    }

    .fu-none {
      background: #f3f4f6;
      color: #9ca3af;
    }

    .fu-timeline {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .fu-timeline-item {
      display: flex;
      gap: 14px;
      position: relative;
      padding-bottom: 16px;
    }

    .fu-timeline-item:last-child {
      padding-bottom: 0;
    }

    .fu-timeline-item:not(:last-child)::before {
      content: '';
      position: absolute;
      left: 15px;
      top: 32px;
      bottom: 0;
      width: 2px;
      background: var(--border);
    }

    .fu-dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }

    .fu-dot-contacted {
      background: #f0fdf4;
      color: var(--green);
      border: 2px solid var(--green);
    }

    .fu-dot-no-contact {
      background: #fef2f2;
      color: var(--red);
      border: 2px solid var(--red);
    }

    .fu-dot-promised {
      background: #fffbeb;
      color: var(--yellow);
      border: 2px solid var(--yellow);
    }

    .fu-dot-rejected {
      background: #fdf4ff;
      color: #9333ea;
      border: 2px solid #9333ea;
    }

    .fu-dot-default {
      background: var(--surface2);
      color: var(--muted);
      border: 2px solid var(--border);
    }

    .fu-body {
      flex: 1;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
    }

    .fu-body-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
    }

    .fu-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
    }

    .fu-response {
      margin-top: 6px;
      font-size: 13px;
      color: var(--text2);
      border-left: 3px solid var(--accent);
      padding-left: 8px;
    }

    .fu-promise-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--yellow-bg);
      color: var(--yellow);
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 6px;
      margin-top: 5px;
    }

    .fu-ftab.on {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    /* Standard tables (Summary, Payments, etc.) - Compact & Fitting */
    .tbl-wrap table th {
      padding: 10px 12px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--muted);
      border-bottom: 2px solid var(--border);
      text-align: left;
    }

    .tbl-wrap table td {
      padding: 10px 12px;
      font-size: 13.5px;
      border-bottom: 1px solid var(--border-soft, #f0f0f0);
      line-height: 1.4;
      vertical-align: middle;
    }

    /* Specialized Search Results handled in Panoramic section */
    .tbl-wrap tr.clickable:hover td {
      background: rgba(8, 145, 170, 0.05) !important;
    }

    .fu-view-btn {
      flex: 1;
      min-width: 130px;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--muted);
      transition: all .15s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
    }

    .fu-view-btn:hover {
      color: var(--text);
    }

    .fu-view-btn.on {
      background: #fff;
      color: var(--text);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    }

    .fu-view-btn i {
      font-size: 13px;
    }

    .fu-view-badge {
      font-size: 10px;
      font-weight: 700;
      background: var(--red);
      color: #fff;
      padding: 1px 7px;
      border-radius: 9px;
      min-width: 18px;
      display: none;
    }

    .fu-view-btn.has-count .fu-view-badge {
      display: inline-block;
    }

    .fu-view-btn.on .fu-view-badge {
      background: var(--accent);
    }

    .fu-view.on {
      display: block;
    }

    /* Area view toolbar */
    .fu-area-toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .fu-area-summary {
      font-size: 12px;
      color: var(--muted);
    }

    /* Area cards (consistent with worklist) */
    .fu-area-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
    }

    .fu-area-card.has-overdue {
      border-color: rgba(220, 38, 38, .3);
    }

    .fu-area-hd {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      user-select: none;
    }

    .fu-area-card.has-overdue .fu-area-hd {
      background: #fef2f2;
    }

    .fu-area-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .fu-area-card.has-overdue .fu-area-icon {
      background: var(--red);
    }

    .fu-area-info {
      flex: 1;
      min-width: 0;
    }

    .fu-area-name {
      font-weight: 700;
      font-size: 15px;
    }

    .fu-area-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    .fu-area-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 10px;
    }

    .fu-area-badge.overdue {
      background: var(--red);
      color: #fff;
    }

    .fu-area-badge.normal {
      background: #dcfce7;
      color: #15803d;
    }

    .fu-area-toggle {
      color: var(--muted);
      transition: transform .2s;
      font-size: 11px;
    }

    .fu-area-body {
      display: none;
      border-top: 1px solid var(--border);
    }

    .fu-area-body.open {
      display: block;
    }

    /* History feed */
    .fu-hist-toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .fu-hist-toolbar select,
    .fu-hist-toolbar input {
      padding: 7px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 12px;
      background: var(--surface);
    }

    .fu-hist-toolbar input {
      flex: 1;
      min-width: 160px;
      max-width: 260px;
    }

    .fu-hist-count {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
    }

    .fu-hist-item {
      padding: 13px 16px;
      border-bottom: 1px solid var(--border);
      display: grid;
      grid-template-columns: 42px 1fr auto;
      gap: 12px;
      background: var(--surface);
      align-items: start;
    }

    .fu-hist-item:last-child {
      border-bottom: none;
    }

    .fu-hist-item:hover {
      background: var(--bg2);
    }

    .fu-hist-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    .fu-hist-icon.contacted {
      background: #dcfce7;
      color: #15803d;
    }

    .fu-hist-icon.no-contact {
      background: #fef2f2;
      color: #dc2626;
    }

    .fu-hist-icon.promised {
      background: #fef3c7;
      color: #a16207;
    }

    .fu-hist-icon.rejected {
      background: #fae8ff;
      color: #86198f;
    }

    .fu-hist-icon.default {
      background: var(--bg2);
      color: var(--muted);
    }

    .fu-hist-body {
      min-width: 0;
    }

    .fu-hist-row1 {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
    }

    .fu-hist-cno {
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
    }

    .fu-hist-name {
      font-weight: 600;
      cursor: pointer;
    }

    .fu-hist-name:hover {
      text-decoration: underline;
    }

    .fu-hist-result {
      font-size: 11px;
      font-weight: 700;
      padding: 1px 8px;
      border-radius: 8px;
    }

    .fu-hist-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 3px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .fu-hist-resp {
      font-size: 12px;
      color: var(--text);
      margin-top: 4px;
      font-style: italic;
    }

    .fu-hist-promise {
      font-size: 11px;
      font-weight: 700;
      color: #a16207;
      margin-top: 3px;
    }

    .fu-hist-actions {
      flex-shrink: 0;
    }

    /* My Tasks */
    .fu-mytasks-hint {
      padding: 10px 14px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      margin-bottom: 12px;
      font-size: 12px;
      color: #1e40af;
    }

    .fu-mytasks-group {
      margin-bottom: 18px;
    }

    .fu-mytasks-group-hd {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 8px;
      padding: 6px 10px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .fu-mytasks-group-hd.urgent {
      background: #fef2f2;
      color: #dc2626;
    }

    .fu-mytasks-group-hd.promise {
      background: #fef3c7;
      color: #a16207;
    }

    .fu-mytasks-group-hd.recent {
      background: #eff6ff;
      color: #1e40af;
    }

    /* ═══ ENHANCED FOLLOW-UP MODAL ═══ */
    .fu-ctx-card {
      padding: 14px 16px;
      background: linear-gradient(135deg, #f8fafc, #eff6ff);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 14px;
    }

    .fu-ctx-name {
      font-size: 16px;
      font-weight: 700;
    }

    .fu-ctx-cno {
      color: var(--accent);
      font-weight: 600;
      font-size: 13px;
    }

    .fu-ctx-stats {
      display: flex;
      gap: 14px;
      margin-top: 8px;
      flex-wrap: wrap;
      font-size: 13px;
    }

    .fu-ctx-stat-lbl {
      font-size: 11px;
      color: var(--muted);
      margin-right: 4px;
    }

    .fu-ctx-stat-val {
      font-weight: 700;
    }

    .fu-ctx-stat-val.red {
      color: #dc2626;
    }

    .fu-ctx-actions {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .fu-ctx-btn {
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      border: 1.5px solid;
      background: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      text-decoration: none;
    }

    .fu-ctx-btn.call {
      border-color: #16a34a;
      color: #16a34a;
    }

    .fu-ctx-btn.call:hover {
      background: #f0fdf4;
    }

    .fu-ctx-btn.line {
      border-color: #06c755;
      color: #06c755;
    }

    .fu-ctx-btn.line:hover {
      background: #ecfdf5;
    }

    .fu-ctx-btn.sms {
      border-color: var(--accent);
      color: var(--accent);
    }

    .fu-ctx-btn.sms:hover {
      background: #eff6ff;
    }

    .fu-ctx-last {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed var(--border);
      font-size: 12px;
      color: var(--muted);
    }

    .fu-quick-results {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 14px;
    }

    .fu-quick-btn {
      padding: 12px 8px;
      border-radius: 8px;
      border: 2px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      transition: all .15s;
    }

    .fu-quick-btn i {
      font-size: 16px;
    }

    .fu-quick-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .fu-quick-btn.on.contacted {
      border-color: #16a34a;
      background: #f0fdf4;
      color: #15803d;
    }

    .fu-quick-btn.on.no-contact {
      border-color: #dc2626;
      background: #fef2f2;
      color: #b91c1c;
    }

    .fu-quick-btn.on.promised {
      border-color: #a16207;
      background: #fef3c7;
      color: #854d0e;
    }

    .fu-quick-btn.on.rejected {
      border-color: #86198f;
      background: #fae8ff;
      color: #701a75;
    }

    .fu-promise-presets {
      display: flex;
      gap: 6px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }

    .fu-promise-preset {
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
      background: var(--surface);
    }

    .fu-promise-preset:hover {
      background: var(--bg2);
      border-color: var(--accent);
      color: var(--accent);
    }

    @media(max-width:600px) {
      .fu-view-btn {
        min-width: 0;
        padding: 9px 8px;
        font-size: 12px;
      }

      .fu-quick-results {
        grid-template-columns: repeat(2, 1fr);
      }

      .fu-ctx-stats {
        gap: 10px;
        font-size: 12px;
      }
    }

    .nw-filter-bar input,
    .nw-filter-bar select {
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 13px;
      background: var(--surface);
      color: var(--text);
    }

    .nw-filter-bar input {
      flex: 1;
      min-width: 180px;
    }

    .nw-section-hd i:first-child {
      font-size: 14px;
    }

    .nw-promise-pop {
      position: fixed;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 140px;
    }

    .nw-promise-pop button {
      padding: 6px 12px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--surface);
      font-size: 12px;
      cursor: pointer;
      text-align: left;
    }

    .nw-promise-pop button:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    .nw-card.sev-critical {
      border-left: 4px solid #dc2626;
    }

    .nw-card.sev-warning {
      border-left: 4px solid #f59e0b;
    }

    .nw-card.sev-today {
      border-left: 4px solid #7c3aed;
    }

    .nw-card.sev-promise {
      border-left: 4px solid #dc2626;
    }

    .nw-card.sev-upcoming {
      border-left: 4px solid #2563eb;
    }

    .nw-btn-fu {
      background: var(--accent);
      border: none;
      color: #fff;
      border-radius: 7px;
      padding: 5px 11px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .nw-btn-fu:hover {
      opacity: .88;
    }

    .nw-empty {
      text-align: center;
      padding: 28px;
      color: var(--muted);
      font-size: 13px;
    }

    .fu2-stat i {
      font-size: 14px;
      flex-shrink: 0;
    }

    .fu2-stat.urgent {
      background: #fef2f2;
      color: #dc2626;
      border-color: #fecaca;
    }

    .fu2-stat.overdue {
      background: #fff7ed;
      color: #c2410c;
      border-color: #fed7aa;
    }

    .fu2-stat.amount {
      background: #f5f3ff;
      color: #7c3aed;
      border-color: #e9d5ff;
      cursor: default;
    }

    .fu2-stat.amount:hover {
      transform: none;
      box-shadow: none;
    }

    .fu2-stat.upcoming {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #bfdbfe;
    }

    .fu2-search-wrap i {
      color: var(--muted);
      font-size: 12px;
      flex-shrink: 0;
    }

    .fu2-search-wrap input {
      flex: 1;
      border: none;
      background: transparent;
      padding: 9px 0;
      font-size: 13px;
      color: var(--text);
      outline: none;
    }

    .fu2-filterrow select {
      padding: 9px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 13px;
      background: var(--surface);
      color: var(--text);
    }

    .fu-views.fu2-tabbar .fu-view-btn {
      border-radius: 0;
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      flex: none;
      min-width: 0;
      gap: 6px;
    }

    .fu-views.fu2-tabbar .fu-view-btn:hover {
      color: var(--text);
      background: rgba(0, 0, 0, .03);
    }

    .fu-views.fu2-tabbar .fu-view-btn.on {
      color: var(--accent);
      border-bottom-color: var(--accent);
      background: transparent;
      box-shadow: none;
    }

    .fu-views.fu2-tabbar .fu-view-badge {
      display: none;
    }

    .fu-views.fu2-tabbar .fu-view-btn.has-count .fu-view-badge {
      display: inline-block;
    }

    .fu-views.fu2-tabbar .fu-view-btn.on .fu-view-badge {
      background: var(--accent);
    }

    /* Section Labels */
    .fu2-sec {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px 8px;
      margin-top: 16px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    .fu2-sec:first-child {
      margin-top: 12px;
    }

    .fu2-sec-badge {
      font-size: 11px;
      font-weight: 800;
      color: #fff;
      padding: 2px 9px;
      border-radius: 10px;
    }

    /* Card list container */
    .fu2-card-list {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 4px;
    }

    /* Cards */
    .fu2-card {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      border-left: 4px solid transparent;
      background: var(--surface);
      transition: background .12s;
    }

    .fu2-card:last-child {
      border-bottom: none;
    }

    .fu2-card:hover {
      background: var(--bg2);
    }

    .fu2-card.sev-critical,
    .fu2-card.sev-promise {
      border-left-color: #dc2626;
    }

    .fu2-card.sev-warning {
      border-left-color: #f59e0b;
    }

    .fu2-card.sev-today {
      border-left-color: #7c3aed;
    }

    .fu2-card.sev-upcoming {
      border-left-color: #2563eb;
    }

    .fu2-badge {
      width: 52px;
      height: 52px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      text-align: center;
    }

    .fu2-badge-num {
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
    }

    .fu2-badge-lbl {
      font-size: 10px;
      font-weight: 700;
      margin-top: 1px;
    }

    .fu2-body {
      flex: 1;
      min-width: 0;
    }

    .fu2-row1 {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }

    .fu2-name {
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fu2-name:hover {
      text-decoration: underline;
    }

    .fu2-nick {
      color: var(--muted);
      font-weight: 400;
      font-size: 12px;
      margin-left: 3px;
    }

    .fu2-phone-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #f0fdf4;
      color: #16a34a;
      border: 1.5px solid #16a34a;
      border-radius: 7px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      text-decoration: none;
      flex-shrink: 0;
    }

    .fu2-phone-btn:hover {
      background: #dcfce7;
    }

    .fu2-row2 {
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 12px;
      color: var(--muted);
      flex-wrap: wrap;
      margin-bottom: 4px;
    }

    .fu2-cno {
      color: var(--accent);
      font-weight: 700;
      cursor: pointer;
    }

    .fu2-cno:hover {
      text-decoration: underline;
    }

    .fu2-type-tag {
      padding: 1px 7px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 700;
      background: var(--bg2);
      color: var(--text);
    }

    .fu2-row3 {
      font-size: 13px;
      margin-bottom: 4px;
    }

    .fu2-row4 {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }

    .fu2-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      position: relative;
    }

    .fu2-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 7px;
      padding: 5px 11px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: border-color .12s, color .12s, background .12s;
    }

    .fu2-btn:hover {
      background: var(--bg2);
      border-color: var(--accent);
      color: var(--accent);
    }

    .fu2-btn.primary {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    .fu2-btn.primary:hover {
      opacity: .88;
    }

    /* Compact rows */
    .fu2-compact {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      font-size: 13px;
      flex-wrap: wrap;
      transition: background .12s;
    }

    .fu2-compact:last-child {
      border-bottom: none;
    }

    .fu2-compact:hover {
      background: var(--bg2);
    }

    .fu2-compact-cno {
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      font-size: 12px;
      flex-shrink: 0;
      min-width: 85px;
    }

    .fu2-compact-name {
      flex: 1;
      font-weight: 600;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 100px;
    }

    .fu2-compact-amt {
      font-weight: 700;
      min-width: 80px;
      text-align: right;
      flex-shrink: 0;
    }

    .fu2-compact-date {
      color: var(--muted);
      font-size: 12px;
      flex-shrink: 0;
    }

    .fu2-compact-tag {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 6px;
      flex-shrink: 0;
    }

    .fu2-compact-actions {
      flex-shrink: 0;
      margin-left: auto;
    }

    /* KPI: นัดวันนี้ */
    .fu2-stat.promise {
      background: #f5f3ff;
      color: #7c3aed;
      border-color: #ddd6fe;
    }

    @media(max-width:600px) {

      .fu-views.fu2-tabbar .fu-view-btn {
        padding: 9px 10px;
        font-size: 11px;
      }

      .fu2-card {
        flex-wrap: wrap;
      }

      .fu2-actions {
        width: 100%;
        margin-top: 4px;
      }

      .fu2-compact-date,
      .fu2-compact-actions {
        display: none;
      }
    }

    /* ══════════ FOLLOW-UP HUB v3 — appointment & notification ══════════ */
    /* promise row (inside card) */
    .nw-promise-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 6px;
      padding: 5px 10px;
      border-radius: 7px;
    }

    .nw-promise-row.p-overdue {
      background: #fef2f2;
      color: #dc2626;
      border-left: 3px solid #dc2626;
    }

    .nw-promise-row.p-today {
      background: #f5f3ff;
      color: #7c3aed;
      border-left: 3px solid #7c3aed;
    }

    .nw-promise-row.p-upcoming {
      background: #eff6ff;
      color: #1d4ed8;
      border-left: 3px solid #1d4ed8;
    }

    .nw-promise-row i {
      flex-shrink: 0;
    }

    /* notification banner */
    #nw-promise-banner {
      margin-bottom: 10px;
    }

    .nw-banner.urgent {
      background: #fef2f2;
      border: 1px solid #fca5a5;
      color: #991b1b;
    }

    .nw-banner.info {
      background: #f5f3ff;
      border: 1px solid #ddd6fe;
      color: #5b21b6;
    }

    .nw-banner i.bi {
      font-size: 16px;
      flex-shrink: 0;
    }

    /* appointment popover */
    .nw-promise-pop {
      position: fixed;
      z-index: 9999;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
      padding: 14px 16px;
      min-width: 272px;
    }

    .nw-pp-hd {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
      border-bottom: 1px solid var(--border-soft);
      padding-bottom: 8px;
    }

    .nw-pp-hd i {
      color: #7c3aed;
    }

    .nw-pp-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 10px;
    }

    .nw-pp-chip {
      padding: 5px 11px;
      border-radius: 8px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all .1s;
      font-family: inherit;
    }

    .nw-pp-chip:hover,
    .nw-pp-chip.sel {
      background: #7c3aed;
      border-color: #7c3aed;
      color: #fff;
    }

    .nw-pp-row {
      margin-bottom: 8px;
    }

    .nw-pp-row label {
      font-size: 11px;
      color: var(--muted);
      display: block;
      margin-bottom: 3px;
    }

    .nw-pp-row input {
      width: 100%;
      box-sizing: border-box;
      padding: 7px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 13px;
      background: var(--surface);
      font-family: inherit;
    }

    .nw-pp-row input:focus {
      border-color: #7c3aed;
      outline: none;
    }

    .nw-pp-confirm {
      width: 100%;
      padding: 9px;
      background: #7c3aed;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: inherit;
    }

    .nw-pp-confirm:hover {
      background: #6d28d9;
    }

    /* ── Renewal / Expiring Soon ── */
    .renewal-panel {
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 10px;
      background: linear-gradient(135deg,#fff7ed,#ffedd5);
      border: 1.5px solid #fb923c;
    }
    .renewal-panel.expired {
      background: linear-gradient(135deg,#fef2f2,#fee2e2);
      border-color: #ef4444;
    }
    .renewal-panel-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }
    .renewal-panel-title {
      font-size: 13px;
      font-weight: 700;
      color: #c2410c;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .renewal-badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
    }
    .renewal-badge.green { background:#dcfce7;color:#166534; }
    .renewal-badge.yellow { background:#fef9c3;color:#854d0e; }
    .renewal-badge.red { background:#fee2e2;color:#991b1b; }
    .renewal-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
      gap: 8px;
      margin-bottom: 10px;
    }
    .renewal-stat {
      background:#fff;
      border-radius:8px;
      padding:8px 12px;
      border:1px solid #fed7aa;
    }
    .renewal-stat-label { font-size:10px;color:#9a3412;font-weight:600;margin-bottom:2px; }
    .renewal-stat-val { font-size:15px;font-weight:800;color:#c2410c; }
    .expiring-days-badge.red { background:#fee2e2;color:#991b1b; }
    .expiring-days-badge.green { background:#dcfce7;color:#166534; }

    /* appointment tab */
    .nw-appt-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      transition: background .12s;
    }

    .nw-appt-card:last-child {
      border-bottom: none;
    }

    .nw-appt-card:hover {
      background: var(--bg2);
    }

    .nw-appt-chip {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-weight: 800;
    }

    .nw-appt-chip .ch-n {
      font-size: 20px;
      line-height: 1;
    }

    .nw-appt-chip .ch-m {
      font-size: 10px;
      font-weight: 700;
      margin-top: 1px;
    }

    .nw-appt-chip.overdue {
      background: #fef2f2;
      color: #dc2626;
    }

    .nw-appt-chip.today {
      background: #f5f3ff;
      color: #7c3aed;
    }

    .nw-appt-chip.upcoming {
      background: #eff6ff;
      color: #1d4ed8;
    }

    .nw-appt-info {
      flex: 1;
      min-width: 0;
    }

    .nw-appt-name {
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .nw-appt-name:hover {
      text-decoration: underline;
    }

    .nw-appt-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    .nw-appt-status {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 9px;
      border-radius: 6px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .nw-appt-status.overdue {
      background: #fef2f2;
      color: #dc2626;
    }

    .nw-appt-status.today {
      background: #f5f3ff;
      color: #7c3aed;
    }

    .nw-appt-status.upcoming {
      background: #eff6ff;
      color: #1d4ed8;
    }

    .nw-appt-acts {
      display: flex;
      gap: 5px;
      flex-shrink: 0;
    }

    @media(max-width:600px) {
      .nw-appt-card {
        flex-wrap: wrap;
      }

      .nw-appt-acts {
        width: 100%;
        margin-top: 4px;
      }
    }

    .nw-ov-header span {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nw-ov-chev.up {
      transform: rotate(0deg);
    }

    .nw-ov-chev.down {
      transform: rotate(-180deg);
    }

    .nw-ov-chip.red {
      background: #fef2f2;
      border-color: #fecaca;
    }

    .nw-ov-chip.gray {
      background: #f9fafb;
      border-color: #e5e7eb;
    }

    .nw-ov-chip.purple {
      background: #f5f3ff;
      border-color: #ddd6fe;
    }

    .nw-ov-chip.red .nw-ov-cn {
      color: #dc2626;
    }

    .nw-ov-chip.gray .nw-ov-cn {
      color: #6b7280;
    }

    .nw-ov-chip.purple .nw-ov-cn {
      color: #7c3aed;
    }

    .nw-ov-bar-seg.red {
      background: #dc2626;
    }

    .nw-ov-bar-seg.blue {
      background: #3b82f6;
    }

    .nw-ov-bar-seg.green {
      background: #22c55e;
    }

    .nw-ov-bl.red::before {
      background: #dc2626;
    }

    .nw-ov-bl.blue::before {
      background: #3b82f6;
    }

    .nw-ov-bl.green::before {
      background: #22c55e;
    }

    .fu2-stat i {
      font-size: 12px;
    }

    /* ── Section Labels: ชิดกว่า ── */
    .fu2-sec {
      padding: 6px 12px 4px;
      margin-top: 8px;
      font-size: 11px;
    }

    .fu2-sec:first-child {
      margin-top: 8px;
    }

    .fu2-sec-badge {
      font-size: 10px;
      padding: 1px 7px;
    }

    /* ── Cards: ย่อ padding, badge, 2 แถวพอ ── */
    .fu2-card {
      padding: 8px 12px;
      gap: 10px;
    }

    .fu2-badge {
      width: 38px;
      height: 38px;
      border-radius: 8px;
    }

    .fu2-badge-num {
      font-size: 17px;
    }

    .fu2-badge-lbl {
      font-size: 9px;
    }

    /* row1: ชื่อ + phone อยู่แถวเดียวกัน */
    .fu2-row1 {
      margin-bottom: 2px;
    }

    .fu2-name {
      font-size: 13px;
    }

    .fu2-row2 {
      margin-bottom: 2px;
      font-size: 11px;
    }

    /* row3 (ยอดหนี้): เล็กลง */
    .fu2-row3 {
      font-size: 12px;
      margin-bottom: 2px;
    }

    /* row4 (ติดตามล่าสุด): ซ่อนข้อความยาว แสดงแค่ icon + วันที่ */
    .fu2-row4 {
      font-size: 11px;
      margin-bottom: 6px;
    }

    /* actions: เล็กลง */
    .fu2-actions {
      gap: 4px;
    }

    .fu2-btn {
      padding: 4px 8px;
      font-size: 11px;
    }

    .fu2-phone-btn {
      padding: 3px 8px;
      font-size: 11px;
    }

    /* ── Tab bar: เล็กลง ── */
    .fu-views.fu2-tabbar .fu-view-btn {
      padding: 8px 12px;
      font-size: 12px;
    }

    /* ── History: ชิดขึ้น ── */
    .fu-hist-item {
      padding: 8px 12px;
      gap: 10px;
    }

    .fu-hist-icon {
      width: 30px;
      height: 30px;
      font-size: 12px;
    }

    /* ── My Tasks: ชิดขึ้น ── */
    .fu-mytasks-group {
      margin-bottom: 12px;
    }

    .fu-mytasks-group-hd {
      padding: 4px 8px;
      font-size: 11px;
    }

    /* ── Appointment cards: เล็กลง ── */
    .nw-appt-card {
      padding: 8px 12px;
      gap: 10px;
    }

    .nw-appt-chip {
      width: 40px;
      height: 40px;
      border-radius: 8px;
    }

    .nw-appt-chip .ch-n {
      font-size: 16px;
    }

    .nw-appt-chip .ch-m {
      font-size: 9px;
    }

    .nw-appt-name {
      font-size: 13px;
    }

    /* ── Empty states: เล็กลง ── */
    .nw-empty {
      padding: 18px;
      font-size: 12px;
    }

    /* ── Compact rows: เดิมมีอยู่แล้ว แต่ย่อเพิ่ม ── */
    .fu2-compact {
      padding: 7px 12px;
      gap: 8px;
    }

    /* Tabbed Section */
    /* ═══════════════════════════════════════════════════════════
     * CONTRACT REGISTRY (ทะเบียนสัญญา) — premium navy + gold redesign
     * Glass cards on the corporate mesh; navy masthead with gold
     * accents, matching the notifications / collateral premium pages.
     * Redesigned 2026-06-02 (ui-ux-pro-max).
     * ═══════════════════════════════════════════════════════════ */
    /* ════ ทะเบียนสัญญา — Luxury Navy·Gold (full-bleed, สอดคล้อง dsx-/col-) ════ */
    #pg-accounts { --acx-px: clamp(16px, 3.6vw, 44px); padding: 0 !important; background: transparent !important; }

    .acct-tab-section {
      display: flex;
      flex-direction: column;
      gap: 0;
      background: transparent;
      min-height: calc(100vh - var(--tb-header-h, 100px));
    }

    /* ── Masthead: full-bleed navy hero + animated gold hairline ──
     * NO overflow:hidden — มันจะตัด .acct-export-menu (dropdown ส่งออก CSV)
     * ที่ absolute อยู่ใน masthead; ::before(inset:0)/::after(bottom:0) ไม่ล้นอยู่แล้ว */
    .acct-mast {
      position: relative;
      padding: 26px var(--acx-px) 24px;
      background: linear-gradient(158deg, #08192e 0%, var(--brand-navy) 56%, #15315e 100%);
      color: #fff;
      z-index: 20;
    }
    .acct-mast::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 58% 92% at 88% 24%, rgba(200, 169, 106, .14) 0%, transparent 60%);
    }
    .acct-mast::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
      background: linear-gradient(90deg, transparent, var(--brand-gold) 26%, #efd9a3 50%, var(--brand-gold) 74%, transparent);
      background-size: 200% 100%;
      animation: acxGold 9s linear infinite;
    }
    @keyframes acxGold { to { background-position: 200% 0; } }

    .acct-mast-inner {
      position: relative;
      display: flex;
      align-items: center;
      gap: 18px 20px;
      flex-wrap: wrap;
    }

    .acct-eyebrow {
      font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
      color: var(--tb-gold); font-weight: 700;
      display: inline-flex; align-items: center; gap: 9px; margin-bottom: 7px;
    }
    .acct-eyebrow::before { content: ''; width: 24px; height: 1px; background: linear-gradient(90deg, var(--tb-gold), transparent); }

    .acct-mast-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }

    .acct-mast-emblem {
      width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
      display: grid; place-items: center;
      background: linear-gradient(160deg, rgba(200, 169, 106, .30), rgba(200, 169, 106, .08));
      border: 1px solid rgba(200, 169, 106, .42);
      color: var(--tb-gold);
      font-size: 20px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .acct-mast-tt {
      font-family: 'Cinzel', 'Sarabun', serif;
      font-size: clamp(21px, 2.6vw, 27px);
      font-weight: 700; letter-spacing: .02em; line-height: 1.15;
      text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
    }
    .acct-mast-tt b { color: #e3c785; font-weight: 700; }
    .acct-mast-sub { font-size: 12.5px; color: rgba(255, 255, 255, .62); margin-top: 5px; letter-spacing: .2px; }

    /* segmented person / company toggle */
    .acct-seg {
      display: inline-flex; gap: 3px; padding: 4px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 12px;
    }
    .acct-seg-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 9px 18px; border: none; border-radius: 8px;
      background: transparent; color: #c3d0e6;
      font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
      transition: background .18s var(--ease-smooth), color .18s var(--ease-smooth);
      white-space: nowrap;
    }
    .acct-seg-btn:hover { color: #fff; background: rgba(255, 255, 255, .06); }
    .acct-seg-btn.on {
      background: linear-gradient(180deg, #f4ecda, #e6d2a4);
      color: var(--tb-navy); font-weight: 700;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .6);
    }

    .acct-mast-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }

    .acct-mast-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px; border-radius: 10px; cursor: pointer;
      font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em;
      background: linear-gradient(180deg, #d8b86f, var(--brand-gold));
      color: var(--tb-navy); border: 1px solid rgba(200, 169, 106, .55);
      box-shadow: 0 4px 14px rgba(200, 169, 106, .30), inset 0 1px 0 rgba(255, 255, 255, .42);
      transition: filter .15s, transform .12s, box-shadow .15s;
    }
    .acct-mast-cta:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(200, 169, 106, .42); }
    .acct-mast-cta:active { transform: scale(.97); }

    .acct-ghost {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 15px; border-radius: 10px; cursor: pointer;
      font-family: inherit; font-size: 13px; font-weight: 600;
      background: rgba(255, 255, 255, .08); color: #e6edf7;
      border: 1px solid rgba(255, 255, 255, .16);
      transition: background .15s, border-color .15s, color .15s;
    }
    .acct-ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(200, 169, 106, .5); color: #fff; }

    /* export dropdown — JS-controlled toggle (.open class); see acctToggleExport() */
    .acct-export { position: relative; }
    .acct-export-menu {
      display: none; position: absolute; right: 0; top: calc(100% + 6px);
      min-width: 198px; z-index: 60;
      background: #fff; border: 1px solid var(--tb-line);
      border-radius: 12px; padding: 6px;
      box-shadow: 0 14px 40px rgba(10, 25, 55, .28);
      /* symmetric open/close: เปิดเด้งเข้า ปิดเฟดออก (allow-discrete = display หน่วงจน transition จบ).
         เบราว์เซอร์เก่าไม่รองรับ → instant (เท่าพฤติกรรมเดิม) */
      opacity: 0; transform: scale(.96) translateY(-4px); transform-origin: top right;
      transition: opacity var(--dur-s) var(--ease-smooth),
                  transform var(--dur-s) var(--ease-spring),
                  display var(--dur-s) allow-discrete;
    }
    .acct-export.open .acct-export-menu {
      display: block; opacity: 1; transform: scale(1) translateY(0);
    }
    @starting-style {
      .acct-export.open .acct-export-menu { opacity: 0; transform: scale(.96) translateY(-4px); }
    }
    .acct-export-menu button {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 11px 12px; min-height: 40px; border: none; background: none; border-radius: 8px;
      font-family: inherit; font-size: 13px; font-weight: 600; color: var(--tb-text);
      cursor: pointer; text-align: left;
    }
    .acct-export-menu button:hover { background: var(--tb-gold-soft); color: var(--tb-navy); }
    .acct-export-menu button:focus-visible {
      outline: 2px solid var(--tb-gold); outline-offset: -2px; background: var(--tb-gold-soft);
    }
    .acct-export-menu button i { color: var(--tb-gold-deep); width: 16px; text-align: center; }

    .acct-tab-content {
      display: flex;
      flex-direction: column;
      gap: 14px;
      width: 100%;
      padding: 22px var(--acx-px) 60px;
      box-sizing: border-box;
    }

    /* ── KPI cards: liquid-glass with gold hover accent ── */
    .acct-kpi-row {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
    }

    .acct-kpi {
      position: relative;
      background: var(--glass-bg);
      -webkit-backdrop-filter: var(--glass-blur);
      backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-border);
      border-radius: 14px;
      padding: 15px 16px 15px 18px;
      display: flex;
      align-items: center;
      gap: 13px;
      box-shadow: var(--glass-sh);
      overflow: hidden;
      transition: transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth), border-color .2s var(--ease-smooth);
    }

    .acct-kpi::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--tb-gold), var(--tb-gold-deep));
      opacity: 0;
      transition: opacity .2s var(--ease-smooth);
    }

    .acct-kpi[onclick] {
      cursor: pointer;
    }

    .acct-kpi[onclick]:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(15, 42, 82, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
      border-color: rgba(200, 169, 106, .45);
    }

    .acct-kpi[onclick]:hover::before { opacity: 1; }

    .acct-kpi-ico {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      background: linear-gradient(135deg, #faf7f0, #f4ecda);
      border: 1px solid #e7d6b5;
      color: var(--tb-navy);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    }
    .acct-kpi-ico.k-red   { background: var(--tb-red-bg);   border-color: var(--tb-red-bd);   color: var(--tb-red); }
    .acct-kpi-ico.k-amber { background: var(--tb-amber-bg); border-color: var(--tb-amber-bd); color: #8a5a00; }
    .acct-kpi-ico.k-green { background: var(--tb-green-bg); border-color: var(--tb-green-bd); color: var(--tb-green); }
    .acct-kpi-ico.k-muted { background: var(--tb-bg);       border-color: var(--tb-line);     color: var(--tb-muted); }

    .acct-kpi-val {
      font-family: 'Cinzel', 'Sarabun', serif;
      font-size: 22px;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: .01em;
      color: var(--tb-navy);
      font-variant-numeric: tabular-nums;
    }
    .acct-kpi-val.v-red   { color: #b91c1c; }
    .acct-kpi-val.v-amber { color: #8a5a00; }
    .acct-kpi-val.v-green { color: var(--tb-green); }
    .acct-kpi-val.v-muted { color: var(--tb-muted); }

    .acct-kpi-lbl {
      font-size: 10.5px;
      color: var(--tb-muted);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-top: 3px;
    }

    .acct-kpi-sub {
      font-size: 10px;
      color: var(--tb-faint);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media(max-width:1100px) {
      .acct-kpi-row {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media(max-width:768px) {
      .acct-kpi-row {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ── Glass panel wrapping the toolbar + table ── */
    .acct-panel {
      background: var(--glass-bg);
      -webkit-backdrop-filter: var(--glass-blur);
      backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      box-shadow: var(--glass-sh);
      overflow: hidden;
    }

    /* ── Toolbar: section title + live count + search + filter ── */
    .acct-filter-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px 16px;
      flex-wrap: wrap;
      padding: 15px 18px;
      border-bottom: 1px solid rgba(15, 42, 82, .07);
      background: rgba(255, 255, 255, .34);
    }

    .acct-filter-bar h3 {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -.2px;
      color: var(--tb-navy);
      margin: 0;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .acct-filter-bar h3 i { color: var(--tb-gold-deep); }

    .acct-sec-count {
      font-size: 11px;
      font-weight: 700;
      color: #6b4e16;
      background: var(--tb-gold-soft);
      border: 1px solid var(--tb-amber-bd);
      padding: 2px 9px;
      border-radius: 20px;
      font-variant-numeric: tabular-nums;
    }

    .acct-filter-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .acct-search-wrap {
      position: relative;
    }

    .acct-search-wrap input {
      padding: 10px 14px 10px 38px;
      border: 1px solid var(--tb-line);
      border-radius: 10px;
      font-size: 13px;
      width: 300px;
      max-width: 52vw;
      background: rgba(255, 255, 255, .7);
      color: var(--tb-text);
      outline: none;
      font-family: inherit;
      transition: border-color .18s, box-shadow .18s, background .18s;
    }

    .acct-search-wrap input:focus {
      border-color: var(--tb-navy);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(15, 42, 82, .08);
    }

    .acct-search-wrap input::placeholder { color: var(--tb-faint); }

    .acct-search-wrap i {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--tb-gold-deep);
      font-size: 13px;
    }

    .btn-outline:hover,
    .kdp-btn-outline:hover {
      background: rgba(255, 255, 255, .15) !important;
      border-color: var(--lg-border) !important;
      color: #fff !important;
    }

    /* ── Legal & Enforcement luxury dark overrides ── */
    #pg-legal,
    #pg-enforcement {
      background: #e8eef6 !important;
      /* ponytail: #f7f8fa → #e8eef6 ให้เห็นชัดว่าโค้ดใหม่มาแล้ว (โทนฟ้าเทาเข้าธีม navy) */
    }

    /* Legal Center */
    .lgc-body {
      background: transparent !important;
    }
    .lgc-card {
      /* ponytail: ตัด backdrop-filter:blur — re-blur ทุกเฟรมตอน scroll รายการคดี = แลค (แพทเทิร์นเดียวกับรายชื่อลูกค้า) + bg ทึบ */
      background: rgba(17, 32, 60, .95) !important;
      border: 1px solid var(--lg-border) !important;
      box-shadow: var(--lg-shadow) !important;
    }
    .lgc-tbl tbody td {
      color: var(--lg-text) !important;
      border-top: 1px solid var(--lg-border-soft) !important;
    }
    .lgc-tbl tbody tr:nth-child(even) td {
      background: rgba(255, 255, 255, 0.02) !important;
    }
    .lgc-tbl tbody tr:hover td {
      background: rgba(var(--lg-tint), 0.1) !important;
    }
    .lgc-tile {
      background: rgba(8, 22, 43, 0.6) !important;
      border-color: var(--lg-border-soft) !important;
    }
    .lgc-tile.on {
      background: rgba(var(--lg-tint), 0.2) !important;
      border-color: rgba(var(--lg-tint), 0.8) !important;
    }

    /* ponytail: ลบบล็อก "Enforcement Center" dark-override ทั้งก้อน —
       เล็งคลาสที่ตายแล้ว (.enf-card*, .enf-month-nav* จาก layout 2 คอลัมน์เก่า)
       + ทับ v4 ทำ date-head/date-select เป็นตัวอักษรสีอ่อนบนพื้นอ่อน (มองไม่เห็น).
       v4 tile (light theme) สไตล์ตัวเองครบแล้วใน <style> ของ pg-enforcement */

    /* ═══ Reduced motion ═══ */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
      }
    }

    .acct-filter-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 10px 14px;
      font-size: 12.5px;
      font-weight: 600;
      border: 1px solid var(--tb-line);
      border-radius: 10px;
      background: rgba(255, 255, 255, .7);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      cursor: pointer;
      color: var(--tb-text-2);
      font-family: inherit;
      transition: background .18s, border-color .18s, color .18s;
    }

    .acct-filter-btn:hover {
      background: #fff;
      border-color: var(--tb-navy-soft);
      color: var(--tb-navy);
    }

    select.acct-filter-btn { color: var(--tb-text); }

    .acct-filter-btn i { font-size: 12px; color: var(--tb-gold-deep); }

    /* ── Premium ledger table: sticky gold header, internal scroll ── */
    .acct-table-wrap {
      overflow: auto;
      max-height: calc(100vh - 360px);
      min-height: 240px;
    }

    .acct-table-wrap table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    .acct-table-wrap thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      text-align: left;
      padding: 11px 14px !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      color: var(--tb-navy) !important;
      text-transform: uppercase !important;
      letter-spacing: .04em !important;
      background: linear-gradient(180deg, #f3f5f9, #eef1f6) !important;
      border-bottom: 1.5px solid var(--tb-line) !important;
      white-space: nowrap;
    }

    .acct-table-wrap tbody td {
      padding: 12px 14px !important;
      font-size: 13px;
      border-bottom: 1px solid var(--tb-line-soft);
      white-space: nowrap;
      color: var(--tb-text);
    }

    .acct-table-wrap tbody tr {
      cursor: pointer;
      transition: background .15s var(--ease-smooth);
    }

    .acct-table-wrap tbody tr:nth-child(even) td { background: rgba(250, 251, 253, .5); }
    .acct-table-wrap tbody tr:hover td { background: rgba(244, 236, 218, .55); }
    .acct-table-wrap tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--tb-gold); }

    /* right-align money columns (ยอดกู้ / ชำระแล้ว / คงเหลือ), center งวดค้าง */
    .acct-table-wrap td:nth-child(6),
    .acct-table-wrap td:nth-child(7),
    .acct-table-wrap td:nth-child(8) { text-align: right; font-variant-numeric: tabular-nums; }
    .acct-panel .acct-table-wrap thead th:nth-child(6),
    .acct-panel .acct-table-wrap thead th:nth-child(7),
    .acct-panel .acct-table-wrap thead th:nth-child(8) { text-align: right !important; }
    .acct-table-wrap td:nth-child(9) { text-align: center; }
    .acct-panel .acct-table-wrap thead th:nth-child(9) { text-align: center !important; }

    .acct-table-wrap tbody tr.ever-court-row td { background: rgba(247, 236, 255, .5); }
    .acct-table-wrap tbody tr.ever-court-row:hover td { background: rgba(237, 224, 255, .7); }

    /* ═══ iOS spring entrance — บัญชีสินเชื่อทั้งหมด (B: ต่อยอดจาก dashboard, reuse keyframe dsxIosRow) ═══
       transform/opacity ล้วน · animate ~24 แถวแรก (chunk 1 = 100 แถว) · เล่นทุก loadList = ข้อมูลใหม่ (search debounced) */
    #pg-accounts .acct-table-wrap tbody tr { animation: dsxIosRow .5s cubic-bezier(.34,1.4,.64,1) backwards;
      transition: background .15s var(--ease-smooth), transform .18s cubic-bezier(.34,1.4,.64,1); }
    #pg-accounts .acct-table-wrap tbody tr:nth-child(1){animation-delay:0s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(2){animation-delay:.03s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(3){animation-delay:.06s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(4){animation-delay:.09s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(5){animation-delay:.12s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(6){animation-delay:.15s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(7){animation-delay:.18s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(8){animation-delay:.21s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(9){animation-delay:.24s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(10){animation-delay:.27s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(11){animation-delay:.30s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(12){animation-delay:.33s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(n+13){animation-delay:.36s}
    #pg-accounts .acct-table-wrap tbody tr:nth-child(n+25){animation:none}
    #pg-accounts .acct-table-wrap tbody tr:hover { transform: translateY(-1px); }
    @media (prefers-reduced-motion: reduce){
      #pg-accounts .acct-table-wrap tbody tr { animation:none !important; }
      #pg-accounts .acct-table-wrap tbody tr:hover { transform:none !important; }
    }

    /* On tablet/phone: natural page scroll instead of the desktop internal scroll */
    @media (max-width: 900px) {
      .acct-table-wrap { max-height: none; min-height: 0; overflow-x: auto; }
      .acct-mast { padding: 18px var(--acx-px) 16px; }
      .acct-mast-actions { width: 100%; margin-left: 0; }
      .acct-tab-content { padding: 16px var(--acx-px) 48px; }
    }

    /* Reduced motion: kill gold shimmer + hover lift (a11y house rule) */
    @media (prefers-reduced-motion: reduce) {
      .acct-mast::after { animation: none; }
      .acct-kpi, .acct-kpi[onclick]:hover { transition: none; transform: none; }
    }

    /* Toolbar reflow: stack title above full-width search/filter on small screens */
    @media (max-width: 768px) {
      .acct-filter-bar { flex-direction: column; align-items: stretch; }
      .acct-filter-actions { width: 100%; }
      .acct-search-wrap { flex: 1 1 auto; }
      .acct-search-wrap input { width: 100%; max-width: none; }
      /* touch targets >=44px (WCAG 2.5.5) */
      .acct-seg-btn, .acct-mast-cta, .acct-ghost { min-height: 44px; }
    }

    .acct-pagination .page-btn.on {
      background: var(--tb-navy);
      color: var(--tb-gold);
      border-color: var(--tb-navy);
    }

    .ntab.on {
      background: var(--accent);
      color: #fff;
    }

    .ntab:not(.on) .ntab-badge {
      background: var(--red);
      color: #fff;
    }

    .ntab-content.on {
      display: block;
    }

    /* ── COMPANY FINANCE TABS ── */
    .cf-tab {
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      background: none;
      color: var(--muted);
      border-bottom: 2px solid var(--border);
      transition: .15s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .cf-tab:hover {
      color: var(--text);
    }

    .cf-tab.on {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }

    @media(max-width:768px) {
      #cf-kpi-row {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }

    @media(max-width:500px) {
      #cf-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    .search-box-enhanced input[type="text"] {
      flex: 1;
      padding: 12px 16px 12px 42px;
      border: 2px solid var(--border);
      border-radius: 10px;
      font-size: 14px;
      outline: none;
      background: var(--surface2);
      transition: border-color .2s, background .2s;
    }

    .search-box-enhanced input[type="text"]:focus {
      border-color: var(--accent);
      background: #fff;
    }

    .search-box-enhanced select {
      padding: 12px 14px;
      border: 2px solid var(--border);
      border-radius: 10px;
      font-size: 13px;
      outline: none;
      background: var(--surface2);
      min-width: 150px;
      transition: border-color .2s;
    }

    .search-box-enhanced select:focus {
      border-color: var(--accent);
    }

    .search-input-wrap i {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-size: 14px;
      pointer-events: none;
    }

    .area-tile-name i {
      color: var(--accent);
      font-size: 14px;
    }

    .area-tile-bar>div {
      height: 100%;
    }

    .view-toggle button {
      padding: 6px 12px;
      border: none;
      background: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      transition: .15s;
    }

    .view-toggle button.active {
      background: var(--accent);
      color: #fff;
    }

    .audit-filter-bar input,
    .audit-filter-bar select {
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 13px;
      background: var(--surface);
    }

    .db-fchip.on {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    /* ── PRINT STYLES ── */
    @media print {
      body {
        background: #fff !important;
        font-size: 12px;
      }

      .sidebar,
      .topbar,
      .modal-overlay,
      .btn,
      button,
      .search-bar,
      .area-hd .fu-btn,
      #trackSummary,
      .s-nav,
      .s-footer,
      .audit-filter-bar,
      .ntab-bar,
      .fu-views,
      .fu-area-toolbar,
      .fu-hist-toolbar,
      .fu-mytasks-hint,
      .nw-filter-bar,
      .nw-kpi-strip,
      .fu-area-card .fu-area-toggle,
      .fu-area-card .btn,
      .nw-card-actions {
        display: none !important;
      }

      .main {
        margin-left: 0 !important;
      }

      .content {
        padding: 0 !important;
      }

      .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
      }

      .area-body,
      .fu-area-body {
        display: block !important;
      }

      .fu-area-card {
        break-inside: avoid;
        border: 1px solid #ddd !important;
      }

      .fu-view:not(.on) {
        display: none !important;
      }

      .no-print {
        display: none !important;
      }

      table {
        font-size: 11px;
      }

      th,
      td {
        padding: 5px 8px !important;
      }

      @page {
        margin: 15mm;
        size: A4;
      }
    }

    .form-section h3 {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* ══════════════════════════════════════════════════════════════════
   NEW CONTRACT — FULL PAGE REDESIGN
   ══════════════════════════════════════════════════════════════════ */
    #pg-newcontract {
      position: relative;
    }

    .nc-page {
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }

    /* ── Left: Form ── */
    .nc-form {
      flex: 1;
      min-width: 0;
    }

    /* ── Compact rows: บีบฟอร์มให้จบในจอเดียว ── */
    .nc-row2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      align-items: stretch;
      margin-bottom: 14px;
    }

    .nc-row2 .nc-card {
      margin-bottom: 0;
    }

    .nc-row2 .ncg {
      grid-template-columns: repeat(2, 1fr);
    }

    .nc-row3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      align-items: start;
      margin-bottom: 14px;
    }

    .nc-row3 .nc-card {
      margin-bottom: 0;
    }

    .nc-row3 .ncg,
    .nc-row3 .ncg.g3 {
      grid-template-columns: 1fr;
    }

    .nc-row3 .nf.s2,
    .nc-row3 .nf.s3,
    .nc-row3 .nf.s4 {
      grid-column: span 1;
    }

    /* Section card */
    .nc-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 14px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
      transition: box-shadow .2s;
    }

    .nc-card:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    }

    .nc-card-hd {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    .nc-card-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex-shrink: 0;
    }

    .nc-card-icon.blue {
      background: #eff6ff;
      color: var(--accent);
    }

    .nc-card-icon.green {
      background: #f0fdf4;
      color: var(--green);
    }

    .nc-card-icon.yellow {
      background: #fffbeb;
      color: var(--yellow);
    }

    .nc-card-icon.purple {
      background: #f5f3ff;
      color: #7c3aed;
    }

    .nc-card-icon.rose {
      background: #fff1f2;
      color: #e11d48;
    }

    .nc-card-icon.teal {
      background: #f0fdfa;
      color: #0d9488;
    }

    .nc-card-title {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--text);
    }

    /* ซ่อนคำบรรยายใต้หัวการ์ด — ประหยัดความสูง ให้ฟอร์มจบในจอเดียว */
    .nc-card-sub {
      display: none;
      font-size: 11px;
      color: var(--muted);
      margin-top: 1px;
    }

    /* ── ID Card reader CTA (เสียบบัตร → กรอกอัตโนมัติ) ── */
    /* รูปจากชิปบัตร — โชว์หลังอ่านสำเร็จ ไว้เทียบหน้าลูกค้าตัวจริง */
    .nc-idcard-photo {
      width: 46px;
      height: 56px;
      object-fit: cover;
      border-radius: 8px;
      border: 2px solid var(--gold, var(--brand-gold));
      background: #fff;
      flex: none;
    }
    /* รูปบัตรในอวตารหน้าโปรไฟล์ลูกค้า — แทน initials เมื่อมีรูป */
    .cp-avatar img.cp-avatar-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
      display: block;
    }
    .nc-idcard-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      padding: 9px 14px;
      margin-bottom: 12px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--brand-navy) 0%, #1c3d6e 100%);
      border: 1px solid rgba(200, 169, 106, .35);
      box-shadow: 0 2px 10px rgba(15, 42, 82, .18);
    }

    .nc-idcard-cta.compact {
      padding: 10px 14px;
      margin: 4px 0 14px;
      background: linear-gradient(135deg, #1c3d6e 0%, #25517e 100%);
    }

    .nc-idcard-cta-info {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .nc-idcard-cta-info > i {
      font-size: 18px;
      color: var(--brand-gold);
      flex-shrink: 0;
    }

    .nc-idcard-cta-title {
      font-size: 12.5px;
      font-weight: 800;
      color: #fff;
      line-height: 1.25;
    }

    .nc-idcard-cta.compact .nc-idcard-cta-title {
      font-size: 12.5px;
    }

    .nc-idcard-cta-sub {
      font-size: 11px;
      color: #d7e2f2;
      margin-top: 2px;
      line-height: 1.3;
    }

    .nc-idcard-cta-sub.ok {
      color: #86efac;
    }

    .nc-idcard-cta-sub.warn {
      color: #fcd34d;
    }

    .nc-idcard-cta-sub.err {
      color: #fca5a5;
    }

    .nc-idcard-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      padding: 8px 16px;
      border: none;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--brand-gold) 0%, #b8975a 100%);
      color: #1a1205;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 800;
      cursor: pointer;
      transition: transform .12s, box-shadow .12s, opacity .12s;
      box-shadow: 0 2px 8px rgba(200, 169, 106, .35);
    }

    .nc-idcard-cta-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(200, 169, 106, .5);
    }

    .nc-idcard-cta-btn:active {
      transform: translateY(0);
    }

    .nc-idcard-cta-btn:disabled {
      opacity: .6;
      cursor: wait;
      transform: none;
    }

    /* Field grid */
    .ncg {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .ncg.g2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .ncg.g3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .ncg.g5 {
      grid-template-columns: repeat(5, 1fr);
    }

    .nf {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .nf.s2 {
      grid-column: span 2;
    }

    .nf.s3 {
      grid-column: span 3;
    }

    .nf.s4 {
      grid-column: span 4;
    }

    .nf.s5 {
      grid-column: span 5;
    }

    .nf label {
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .nf input,
    .nf select,
    .nf textarea {
      padding: 7px 10px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      font-size: 13px;
      outline: none;
      background: var(--surface);
      transition: all .2s;
      font-family: inherit;
    }

    .nf input:focus,
    .nf select:focus,
    .nf textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }

    .nf input[readonly] {
      background: var(--surface2);
      color: var(--text2);
      cursor: default;
    }

    /* textarea สูงเท่า input ปกติ — ลากขยายแนวตั้งได้อย่างเดียว (กันลากแนวนอนทำ grid พัง) */
    .nf textarea {
      resize: vertical;
      min-height: 34px;
    }

    /* ── Inline validation — กรอบแดง + ข้อความใต้ช่อง (แทน alert) ── */
    .nf.nf-err input,
    .nf.nf-err select,
    .nf.nf-err textarea {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(220, 38, 38, .08);
    }

    .nf-err-msg {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--red);
      line-height: 1.3;
    }

    /* hint ใต้ช่องเลขบัตร — ✓ checksum ผ่าน / ✗ ไม่ผ่าน */
    .nf-hint {
      font-size: 10.5px;
      font-weight: 600;
      line-height: 1.3;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .nf-hint.ok {
      color: var(--green);
    }

    .nf-hint.err {
      color: var(--red);
    }

    /* ── focus ring สำหรับคีย์บอร์ด (ไม่โผล่ตอนคลิกเมาส์) ── */
    .nc-chip-btn:focus-visible,
    .nc-lender-btn:focus-visible,
    .nc-fee-btn:focus-visible,
    .nc-calc-btn:focus-visible,
    .nc-idcard-cta-btn:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    /* ── คำใบ้คีย์ลัดใต้ปุ่มบันทึก ── */
    .nc-kbd-hint {
      text-align: center;
      font-size: 10px;
      color: var(--muted);
    }

    .nc-kbd-hint kbd {
      font-family: inherit;
      background: var(--surface);
      border: 1px solid var(--border);
      border-bottom-width: 2px;
      border-radius: 4px;
      padding: 1px 5px;
      font-size: 9.5px;
      font-weight: 700;
    }

    .nf-req label::after {
      content: ' *';
      color: var(--red);
    }

    /* Calc method toggle buttons — segmented แถวเดียว (คำอธิบายอยู่ใน tooltip) */
    .nc-calc-methods {
      display: flex;
      gap: 0;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .nc-calc-btn {
      flex: 1;
      padding: 9px 8px;
      border: none;
      background: var(--surface);
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: all .2s;
      border-right: 1px solid var(--border);
      position: relative;
    }

    .nc-calc-btn:last-child {
      border-right: none;
    }

    .nc-calc-btn:hover {
      background: var(--surface2);
    }

    .nc-calc-btn.on {
      background: linear-gradient(135deg, #eff6ff, #e0f2fe);
      border-color: var(--accent);
      box-shadow: inset 0 -3px 0 var(--accent);
    }

    .nc-calc-btn .cb-icon {
      font-size: 13px;
      color: var(--muted);
      transition: color .2s;
    }

    .nc-calc-btn.on .cb-icon {
      color: var(--accent);
    }

    .nc-calc-btn .cb-name {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
    }

    /* ซ่อนคำอธิบายในปุ่ม — ย้ายไป title tooltip แล้ว */
    .nc-calc-btn .cb-desc {
      display: none;
      font-size: 10px;
      color: var(--muted);
      line-height: 1.3;
    }

    .nc-calc-btn.on .cb-name {
      color: var(--accent);
    }

    .nc-calc-btn .cb-check {
      display: none;
      position: absolute;
      top: 6px;
      right: 8px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-size: 9px;
      align-items: center;
      justify-content: center;
    }

    /* layout แถวเดียวไม่มีที่ให้ check ลอย — สถานะ on ใช้พื้นหลัง+ขีดล่างแทน */
    .nc-calc-btn.on .cb-check {
      display: none;
    }

    /* Lender toggle (อยู่ใน .nc-opt-chips) */
    .nc-lender-btn {
      padding: 6px 14px;
      border: 1.5px solid var(--border);
      border-radius: 20px;
      background: var(--surface);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      transition: all .15s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nc-lender-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .nc-lender-btn.on {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    .nc-lender-btn i {
      font-size: 11px;
    }

    /* Fee buttons */
    .nc-fee-btn {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--text2);
      transition: .15s;
    }

    .nc-fee-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .nc-fee-btn.on {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    .nc-fee-result {
      margin-left: auto;
      font-size: 12px;
      font-weight: 700;
      color: var(--green);
      line-height: 1.5;
    }

    /* Option rows — label คอลัมน์ซ้ายกว้างเท่ากัน chips ตรงแนวเดียวกันทุกแถว */
    .nc-opts {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }

    .nc-opt {
      display: grid;
      grid-template-columns: 96px 1fr;
      align-items: center;
      gap: 10px;
    }

    .nc-opt-lbl {
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      line-height: 1.3;
    }

    .nc-opt-chips {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      min-width: 0;
    }

    .nc-chip-btn {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--text2);
      transition: .15s;
    }

    .nc-chip-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .nc-chip-btn.on {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    /* Collapsible card */
    .nc-card.collapsible .nc-card-hd {
      cursor: pointer;
      user-select: none;
    }

    /* การ์ดที่พับอยู่ — ตัดเส้นใต้/ระยะห่างหัวการ์ด ให้เตี้ยสุด */
    .nc-card.collapsed .nc-card-hd {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    /* hover การ์ดที่พับ — บอกชัดว่ากดขยายได้ */
    .nc-card.collapsible.collapsed:hover {
      border-color: var(--accent);
    }

    .nc-card.collapsible.collapsed:hover .nc-card-chevron {
      color: var(--accent);
    }

    .nc-card-chevron {
      margin-left: auto;
      font-size: 11px;
      color: var(--muted);
      transition: transform .2s;
    }

    .nc-card-chevron.open {
      transform: rotate(180deg);
    }

    .nc-card-body {
      overflow: hidden;
    }

    .nc-card.collapsed .nc-card-body {
      display: none;
    }

    /* Co-borrower toggle */
    .nc-co-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      margin-top: 10px;
      background: var(--surface2);
      border: 1.5px dashed var(--border);
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      user-select: none;
      transition: .15s;
    }

    .nc-co-toggle:hover {
      border-color: var(--accent);
      background: var(--accent-bg);
    }

    .nc-co-chevron {
      margin-left: auto;
      font-size: 10px;
      color: var(--muted);
      transition: transform .2s;
    }

    .nc-co-chevron.open {
      transform: rotate(180deg);
    }

    .nc-co-section {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }

    /* Sub-section label */
    .nc-sec {
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 12px 0 8px;
    }

    .nc-sec:first-child {
      margin-top: 0;
    }

    .nc-sec::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* ── Right: Sticky Sidebar ── */
    .nc-sidebar {
      width: 340px;
      flex-shrink: 0;
      position: sticky;
      top: 20px;
    }

    .nc-sidebar-inner {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
    }

    /* Sidebar header */
    .nc-side-hd {
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
      padding: 14px 18px;
      position: relative;
      overflow: hidden;
    }

    .nc-side-hd::before {
      content: '';
      position: absolute;
      right: -20px;
      top: -20px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: rgba(37, 99, 235, .15);
      pointer-events: none;
    }

    .nc-side-hd-title {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nc-side-hd-cno {
      font-size: 11px;
      color: rgba(255, 255, 255, .4);
      margin-top: 4px;
    }

    /* Calculator display */
    .nc-calc-display {
      padding: 14px 18px;
    }

    .nc-calc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .nc-calc-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .nc-calc-item.full {
      grid-column: 1/-1;
      text-align: center;
      padding: 10px 0;
      background: linear-gradient(135deg, #eff6ff, #f0fdf4);
      border-radius: 10px;
      margin-bottom: 2px;
    }

    .nc-calc-item .ci-lbl {
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .nc-calc-item .ci-val {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }

    .nc-calc-item.full .ci-val {
      font-size: 22px;
      color: var(--accent);
    }

    .nc-calc-item .ci-val.v-int {
      color: var(--yellow);
    }

    .nc-calc-item .ci-val.v-total {
      color: var(--text);
    }

    .nc-calc-item .ci-val.v-net {
      color: var(--green);
    }

    .nc-calc-item .ci-val.v-fee {
      color: var(--red);
    }

    /* Summary in sidebar */
    .nc-side-summary {
      padding: 10px 18px;
      border-top: 1px solid var(--border);
      font-size: 12px;
      line-height: 1.9;
    }

    .nc-side-summary .ss-row {
      display: flex;
      justify-content: space-between;
    }

    .nc-side-summary .ss-k {
      color: var(--muted);
      font-weight: 600;
    }

    .nc-side-summary .ss-v {
      font-weight: 700;
      color: var(--text);
    }

    /* Action buttons */
    .nc-actions {
      padding: 12px 18px;
      border-top: 1px solid var(--border);
      background: var(--surface2);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .nc-actions .btn {
      width: 100%;
      justify-content: center;
      padding: 10px;
      font-size: 13px;
    }

    /* Success overlay */
    .nc-done-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
    }

    .nc-done-overlay.on {
      display: flex;
    }

    .nc-done-box {
      background: #fff;
      border-radius: 16px;
      padding: 48px 40px;
      text-align: center;
      max-width: 440px;
      width: 90%;
      box-shadow: 0 25px 60px rgba(0, 0, 0, .2);
      animation: ncPop .4s cubic-bezier(.175, .885, .32, 1.275);
    }

    @keyframes ncPop {
      0% {
        transform: scale(.8);
        opacity: 0
      }

      100% {
        transform: scale(1);
        opacity: 1
      }
    }

    .nc-done-icon {
      width: 72px;
      height: 72px;
      background: var(--green-bg);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: var(--green);
      margin: 0 auto 18px;
    }

    .nc-done-box h3 {
      font-size: 20px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
    }

    .nc-done-box p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.8;
      margin-bottom: 20px;
    }

    .nc-done-acts {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* Responsive */
    @media(max-width:900px) {
      .nc-row3 {
        grid-template-columns: 1fr;
      }
    }

    @media(max-width:1024px) {
      .nc-page {
        flex-direction: column;
      }

      .nc-sidebar {
        width: 100%;
        position: static;
      }

      .nc-sidebar-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .nc-side-hd {
        grid-column: 1/-1;
      }

      .nc-actions {
        grid-column: 1/-1;
        flex-direction: row;
      }
    }

    @media(max-width:640px) {

      .nc-row2 {
        grid-template-columns: 1fr;
      }

      .ncg,
      .ncg.g2,
      .ncg.g5,
      .nc-row2 .ncg {
        grid-template-columns: repeat(2, 1fr);
      }

      .nf.s3,
      .nf.s4,
      .nf.s5 {
        grid-column: span 2;
      }

      .nc-sidebar-inner {
        grid-template-columns: 1fr;
      }
    }

    @media(max-width:480px) {
      .nc-calc-methods {
        flex-direction: column;
      }

      .nc-calc-btn {
        border-right: none;
        border-bottom: 1px solid var(--border);
      }

      .nc-calc-btn:last-child {
        border-bottom: none;
      }
    }

    /* ══════════════════════════════════════════════════════════════════
   CUSTOMER 360 PROFILE PAGE
   ══════════════════════════════════════════════════════════════════ */

    /* Header card */
    .cp-header {
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
      border-radius: 14px;
      padding: 28px 32px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    }

    .cp-header::before {
      content: '';
      position: absolute;
      right: -40px;
      top: -40px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: rgba(37, 99, 235, .12);
      pointer-events: none;
    }

    .cp-header::after {
      content: '';
      position: absolute;
      right: 80px;
      bottom: -60px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(37, 99, 235, .06);
      pointer-events: none;
    }

    .cp-header-top {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      position: relative;
      z-index: 1;
    }

    .cp-avatar {
      width: 72px;
      height: 72px;
      border-radius: 18px;
      flex-shrink: 0;
      background: rgba(37, 99, 235, .2);
      border: 2px solid rgba(255, 255, 255, .15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: rgba(255, 255, 255, .7);
      font-weight: 700;
    }

    .cp-info {
      flex: 1;
      min-width: 0;
    }

    .cp-name {
      font-size: 22px;
      font-weight: 700;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .cp-nick {
      font-size: 14px;
      color: rgba(255, 255, 255, .4);
      font-weight: 400;
    }

    .cp-meta {
      display: flex;
      gap: 18px;
      margin-top: 8px;
      flex-wrap: wrap;
    }

    .cp-meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: rgba(255, 255, 255, .5);
    }

    .cp-meta-item i {
      font-size: 11px;
      width: 14px;
      text-align: center;
    }

    .cp-meta-item a {
      color: rgba(255, 255, 255, .7);
    }

    .cp-header-actions {
      display: flex;
      gap: 8px;
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      align-self: flex-start;
    }

    .cp-header-actions .btn {
      padding: 8px 16px;
      font-size: 12px;
      border-radius: 8px;
    }

    /* KPI strip */
    .cp-kpi-strip {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }

    .cp-kpi {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px 18px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
      transition: box-shadow .2s;
    }

    .cp-kpi:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    }

    .cp-kpi-val {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .cp-kpi-lbl {
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .cp-kpi-val.blue {
      color: var(--accent);
    }

    .cp-kpi-val.green {
      color: var(--green);
    }

    .cp-kpi-val.red {
      color: var(--red);
    }

    .cp-kpi-val.yellow {
      color: var(--yellow);
    }

    /* Tabs */
    .cp-tabs {
      display: flex;
      gap: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px 10px 0 0;
      overflow-x: auto;
      border-bottom: none;
    }

    .cp-tab {
      padding: 12px 20px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      border: none;
      background: none;
      white-space: nowrap;
      border-bottom: 2.5px solid transparent;
      transition: all .15s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .cp-tab:hover {
      color: var(--text);
      background: var(--surface2);
    }

    .cp-tab.on {
      color: var(--accent);
      border-bottom-color: var(--accent);
      background: var(--surface);
    }

    .cp-tab .badge {
      background: var(--surface2);
      color: var(--muted);
      font-size: 10px;
      padding: 1px 7px;
      border-radius: 10px;
      font-weight: 700;
      min-width: 18px;
      text-align: center;
    }

    .cp-tab.on .badge {
      background: var(--accent-bg);
      color: var(--accent);
    }

    /* Tab body */
    /* 2-column body layout */
    .cp-body {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      border-top: 1px solid #d8dde6;
    }

    .cp-left {
      width: 320px;
      flex-shrink: 0;
      background: #fff;
      border-right: 1px solid #d8dde6;
      overflow-y: auto;
    }

    .cp-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #f4f5f7;
    }

    .cp-left-panel {
      border-bottom: 1px solid #e6eaf2;
      padding: 16px 20px;
    }

    .cp-left-panel-hd {
      font-size: 11px;
      font-weight: 700;
      color: #5b6b85;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .cp-left-panel-hd a {
      font-size: 11px;
      color: var(--brand-navy);
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      cursor: pointer;
      text-decoration: none;
    }

    .cp-sum-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .cp-sum-cell {
      padding: 10px 12px;
      background: #f4f5f7;
      border: 1px solid #e6eaf2;
      border-radius: 3px;
    }

    .cp-sum-k {
      font-size: 11px;
      color: #5b6b85;
      font-weight: 600;
    }

    .cp-sum-v {
      font-size: 16px;
      font-weight: 700;
      color: var(--brand-navy);
      font-variant-numeric: tabular-nums;
      margin-top: 3px;
      letter-spacing: -.01em;
    }

    .cp-sum-v.danger {
      color: #c92a2a;
    }

    .cp-sum-sub {
      font-size: 11px;
      color: #5b6b85;
      margin-top: 2px;
    }

    .cp-left-field {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 6px 0;
      font-size: 12px;
      gap: 8px;
    }

    .cp-left-field-k {
      color: #5b6b85;
      flex-shrink: 0;
    }

    .cp-left-field-v {
      color: #1f2a44;
      font-weight: 500;
      text-align: right;
      word-break: break-word;
    }

    .cp-left-field-v.mono {
      font-family: ui-monospace, 'SF Mono', monospace;
      font-variant-numeric: tabular-nums;
    }

    /* Status tags in banner */
    .cp-tags {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .cp-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 9px;
      border-radius: 3px;
      font-size: 11px;
      font-weight: 700;
    }

    .cp-tag.overdue {
      background: #fdecec;
      color: #9b1a1a;
      border: 1px solid #f3c5c5;
    }

    .cp-tag.court {
      background: #fff0f0;
      color: #7f1d1d;
      border: 1px solid #fca5a5;
    }

    .cp-tag.normal {
      background: #e8f6ee;
      color: #0a7a3b;
      border: 1px solid #bfe2cc;
    }

    .cp-tag.info {
      background: #e7eefc;
      color: #1d4ed8;
      border: 1px solid #bcd0f4;
    }

    .cp-tag.gold {
      background: #fdf3dc;
      color: #8a5a00;
      border: 1px solid #e7cb87;
    }

    /* tabs/body inside right column */
    .cp-right .cp-tabs {
      border-top: none;
    }

    .cp-right .cp-tab-body {
      border-radius: 0;
      border-left: none;
      border-right: none;
      box-shadow: none;
      flex: 1;
      overflow-y: auto;
      min-height: 0;
    }

    .cp-tab-body {
      background: var(--surface);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 10px 10px;
      padding: 0;
      min-height: 400px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    }

    .cp-panel {
      display: none;
      padding: 24px;
      animation: cpFade .2s ease;
    }

    .cp-panel.on {
      display: block;
    }

    @keyframes cpFade {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    /* Contract cards */
    .cp-contract {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px 20px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all .15s;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
    }

    .cp-contract:hover {
      border-color: var(--accent);
      box-shadow: 0 2px 12px rgba(37, 99, 235, .08);
    }

    .cp-contract:last-child {
      margin-bottom: 0;
    }

    .cp-cc-top {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .cp-cc-no {
      font-weight: 700;
      color: var(--accent);
      font-size: 14px;
    }

    .cp-cc-badge {
      padding: 2px 10px;
      border-radius: 12px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .cp-cc-badge.normal {
      background: #f0fdf4;
      color: var(--green);
    }

    .cp-cc-badge.overdue {
      background: #fef2f2;
      color: var(--red);
    }

    .cp-cc-badge.court {
      background: #fffbeb;
      color: var(--yellow);
    }

    .cp-cc-badge.closed {
      background: var(--surface2);
      color: var(--muted);
    }

    .cp-cc-badge.writeoff {
      background: #f3e8ff;
      color: #7c3aed;
    }

    .cp-error-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
      border-radius: 8px;
      padding: 10px 16px;
      margin: 8px 0;
      font-size: 13px;
      font-weight: 600;
    }

    .cp-cc-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .cp-cc-meta span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .cp-cc-amounts {
      text-align: right;
    }

    .cp-cc-loan {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
    }

    .cp-cc-debt {
      font-size: 12px;
      font-weight: 600;
      margin-top: 2px;
    }

    .cp-cc-progress {
      width: 140px;
      height: 5px;
      background: var(--surface2);
      border-radius: 3px;
      margin-top: 6px;
      overflow: hidden;
    }

    .cp-cc-progress-fill {
      height: 100%;
      border-radius: 3px;
      transition: width .3s;
    }

    /* Payment history table */
    .cp-pay-table {
      width: 100%;
      border-collapse: separate; border-spacing: 0;   /* แทน collapse → sticky th ขอบล่างไม่หายตอน scroll */
      font-size: 12px;
    }

    .cp-pay-table th {
      text-align: left;
      padding: 10px 12px;
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 2px solid var(--border);
      background: var(--surface2);
      position: sticky; top: 0; z-index: 1;   /* หัวตารางติดบนตอนเลื่อนใน .cp-tab-body (scroll container) */
    }

    .cp-pay-table td {
      padding: 9px 12px;
      border-bottom: 1px solid var(--border);
    }

    .cp-pay-table tr:hover {
      background: var(--surface2);
    }

    .cp-pay-table .cno-link {
      color: var(--accent);
      font-weight: 600;
      cursor: pointer;
    }

    .cp-pay-table .cno-link:hover {
      text-decoration: underline;
    }

    /* Timeline */
    .cp-timeline {
      position: relative;
      padding-left: 28px;
    }

    .cp-timeline::before {
      content: '';
      position: absolute;
      left: 9px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--border);
    }

    .cp-tl-item {
      position: relative;
      padding-bottom: 20px;
    }

    .cp-tl-item:last-child {
      padding-bottom: 0;
    }

    .cp-tl-dot {
      position: absolute;
      left: -28px;
      top: 2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      color: #fff;
      z-index: 1;
    }

    .cp-tl-dot.blue {
      background: var(--accent);
    }

    .cp-tl-dot.green {
      background: var(--green);
    }

    .cp-tl-dot.red {
      background: var(--red);
    }

    .cp-tl-dot.gray {
      background: #9ca3af;
    }

    .cp-tl-dot.yellow {
      background: var(--yellow);
    }

    .cp-tl-date {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 3px;
    }

    .cp-tl-contract {
      font-size: 10px;
      color: var(--accent);
      font-weight: 600;
    }

    .cp-tl-body {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.7;
    }

    .cp-tl-body .method {
      font-weight: 700;
      color: var(--text);
    }

    .cp-tl-body .result-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 1px 8px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 700;
    }

    .cp-tl-body .result-tag.contacted {
      background: #eff6ff;
      color: var(--accent);
    }

    .cp-tl-body .result-tag.promised {
      background: #f0fdf4;
      color: var(--green);
    }

    .cp-tl-body .result-tag.rejected {
      background: #fef2f2;
      color: var(--red);
    }

    .cp-tl-body .result-tag.nocontact {
      background: #f3f4f6;
      color: #6b7280;
    }

    .cp-tl-body .response {
      color: var(--text2);
      font-style: italic;
      margin-top: 4px;
    }

    .cp-tl-body .promise {
      color: var(--accent);
      font-weight: 600;
      margin-top: 2px;
    }

    .cp-tl-body .note {
      color: var(--muted);
      margin-top: 2px;
    }

    /* Info grid (personal info tab) */
    .cp-info-section {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px 22px;
      margin-bottom: 14px;
    }

    .cp-info-section-hd {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
    }

    .cp-info-section-hd i {
      color: var(--accent);
      width: 16px;
      text-align: center;
    }

    .cp-info-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .cp-info-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .cp-info-item.s2 {
      grid-column: span 2;
    }

    .cp-info-item.s4 {
      grid-column: span 4;
    }

    .cp-info-lbl {
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .cp-info-val {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      word-break: break-word;
    }

    .cp-info-val.muted {
      color: var(--muted);
      font-style: italic;
    }

    /* Collateral cards */
    .cp-asset {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px 20px;
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
    }

    .cp-asset-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: #eff6ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      font-size: 16px;
    }

    .cp-asset-no {
      font-weight: 700;
      color: var(--text);
      font-size: 13px;
    }

    .cp-asset-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    .cp-asset-loc {
      font-size: 12px;
      color: var(--text2);
      margin-top: 4px;
    }

    /* Activity log */
    .cp-activity {
      font-size: 12px;
      border-bottom: 1px solid var(--border);
      padding: 10px 0;
      display: grid;
      grid-template-columns: 140px 100px 1fr;
      gap: 8px;
    }

    .cp-activity:last-child {
      border-bottom: none;
    }

    .cp-activity-time {
      color: var(--muted);
      font-size: 11px;
    }

    .cp-activity-user {
      font-weight: 600;
      color: var(--text2);
    }

    .cp-activity-desc {
      color: var(--text);
    }

    /* Empty state */
    .cp-empty {
      text-align: center;
      padding: 48px 20px;
      color: var(--muted);
    }

    .cp-empty i {
      font-size: 36px;
      opacity: .3;
      margin-bottom: 12px;
      display: block;
    }

    .cp-empty p {
      font-size: 13px;
    }

    /* Back button */
    .cp-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--surface);
      transition: all .15s;
      margin-bottom: 16px;
    }

    .cp-back:hover {
      color: var(--accent);
      border-color: var(--accent);
    }

    /* Responsive */
    @media(max-width:900px) {
      .cp-kpi-strip {
        grid-template-columns: repeat(3, 1fr);
      }

      .cp-info-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .cp-info-item.s4 {
        grid-column: span 2;
      }

      .cp-contract {
        grid-template-columns: 1fr;
      }

      .cp-cc-amounts {
        text-align: left;
      }
    }

    /* ── CUSTOMER PAGE — TABLET (≤ 768px) ── */
    @media(max-width:768px) {
      /* Header compact */
      .cp-header { padding: 14px 16px; border-radius: 10px; margin-bottom: 12px; }
      .cp-avatar { width: 52px; height: 52px; border-radius: 12px; font-size: 20px; }
      .cp-name { font-size: 17px; }
      .cp-meta { gap: 10px; margin-top: 6px; }
      .cp-header-actions { width: 100%; gap: 6px; }
      .cp-header-actions .btn {
        flex: 1; font-size: 11px; padding: 7px 10px;
        text-align: center; justify-content: center; display: flex; align-items: center; gap: 4px;
      }

      /* KPI strip: 3 col */
      .cp-kpi-strip { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
      .cp-kpi { padding: 10px 8px; }
      .cp-kpi-val { font-size: 17px; }
      .cp-kpi-lbl { font-size: 9px; }

      /* Stack body vertically */
      .cp-body {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: visible;
        border-top: none;
      }

      /* Left panel: full width, no side border */
      .cp-left {
        width: 100%;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid #d8dde6;
      }

      /* Right panel: full width + enough height */
      .cp-right { width: 100%; min-height: 60vh; }

      /* Tab body scrolls */
      .cp-right .cp-tab-body { flex: none; overflow-y: visible; min-height: 50vh; }
      .cp-panel { padding: 16px; }

      /* Tabs: compact */
      .cp-tab { padding: 10px 12px; font-size: 11px; gap: 4px; }
    }

    /* ── CUSTOMER PAGE — MOBILE (≤ 640px) ── */
    @media(max-width:640px) {
      /* Account for nav height (80px on mobile) */
      #pg-customer {
        height: auto;
        min-height: calc(100vh - var(--nav-h));
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
      }

      .cp-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }

      /* Compact header further */
      .cp-header { padding: 12px 14px; margin-bottom: 10px; }
      .cp-header-top { flex-direction: column; gap: 10px; }
      .cp-avatar { width: 44px; height: 44px; font-size: 16px; border-radius: 10px; }
      .cp-name { font-size: 15px; }
      .cp-meta { flex-direction: row; flex-wrap: wrap; gap: 8px; }
      .cp-meta-item { font-size: 11px; }

      /* Back button tighter */
      .cp-back { margin-bottom: 10px; }

      /* Tabs: compact */
      .cp-tab { padding: 9px 10px; font-size: 10px; }
      .cp-tab i { font-size: 13px; }
    }

    /* ── CUSTOMER PAGE — TINY (≤ 400px) ── */
    @media(max-width:400px) {
      .cp-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
      .cp-kpi { padding: 8px 6px; }
      .cp-kpi-val { font-size: 14px; }
      .cp-panel { padding: 12px; }
      /* Hide tab labels, icon only */
      .cp-tab-lbl { display: none; }
      .cp-tab .badge { margin-left: 0; }
      .cp-tab { padding: 10px 8px; gap: 2px; }
      .cp-tab i { font-size: 15px; }
    }

    /* ── PAY SOURCE TABS ── */
    .pay-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 16px;
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }

    .pay-tab {
      flex: 1;
      padding: 8px;
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      background: var(--surface2);
      color: var(--muted);
      border: none;
    }

    .pay-tab.on {
      background: var(--accent);
      color: #fff;
    }

    /* ── RESPONSIVE ── */
    @media(max-width:768px) {
      .sidebar {
        display: none;
      }

      .main {
        margin-left: 0;
      }

      .fg {
        grid-template-columns: 1fr;
      }

      .fg .span2,
      .fg .span3 {
        grid-column: span 1;
      }

      #pg-notifications>div:first-child {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    .legal-tab.on {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
      font-weight: 600;
    }

    /* ─── TAX & ACCOUNTING REPORT ─── */
    .tx-toolbar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .tx-toolbar select {
      padding: 8px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 13px;
      background: #fff;
    }

    .tx-toolbar .tx-year-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
    }

    .tx-tabs {
      display: flex;
      gap: 4px;
      background: var(--bg2);
      border-radius: 10px;
      padding: 4px;
      margin-bottom: 20px;
    }

    .tx-tab {
      padding: 9px 20px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--muted);
      transition: all .15s;
    }

    .tx-tab.on {
      background: #fff;
      color: var(--text);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    }

    .tx-panel {
      display: none;
    }

    .tx-panel.on {
      display: block;
    }

    .tx-kpi-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 22px;
    }

    .tx-kpi {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 20px;
    }

    .tx-kpi-label {
      font-size: 11px;
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 4px;
    }

    .tx-kpi-val {
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
    }

    .tx-kpi-sub {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    .tx-kpi.green .tx-kpi-val {
      color: var(--green);
    }

    .tx-kpi.blue .tx-kpi-val {
      color: var(--accent);
    }

    .tx-kpi.red .tx-kpi-val {
      color: var(--red);
    }

    .tx-kpi.amber .tx-kpi-val {
      color: #d97706;
    }

    .tx-section {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 18px;
    }

    .tx-section-hd {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tx-section-hd i {
      color: var(--accent);
    }

    .tx-tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .tx-tbl th {
      text-align: left;
      padding: 10px 12px;
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 2px solid var(--border);
    }

    .tx-tbl td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--bg2);
    }

    .tx-tbl tr:last-child td {
      border-bottom: none;
    }

    .tx-tbl .tx-total-row td {
      font-weight: 800;
      border-top: 2px solid var(--text);
      background: var(--bg2);
    }

    .tx-tbl .num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .tx-wht-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all .15s;
    }

    .tx-wht-card:hover {
      border-color: var(--accent);
      box-shadow: 0 2px 8px rgba(37, 99, 235, .1);
    }

    .tx-wht-name {
      font-weight: 700;
      font-size: 14px;
    }

    .tx-wht-meta {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
    }

    .tx-wht-amt {
      font-size: 16px;
      font-weight: 800;
      color: var(--accent);
      text-align: right;
    }

    .tx-wht-cnt {
      font-size: 11px;
      color: var(--muted);
      text-align: right;
    }

    /* ── P&L Statement ── */
    .pl-statement {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 32px 36px;
      max-width: 720px;
      margin: 0 auto 24px;
      font-size: 13.5px;
      line-height: 1.6;
    }

    .pl-header {
      text-align: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 2px solid var(--text);
    }

    .pl-company {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }

    .pl-title {
      font-size: 18px;
      font-weight: 800;
      margin: 4px 0 2px;
      color: var(--accent);
    }

    .pl-subtitle {
      font-size: 12px;
      color: var(--muted);
    }

    .pl-section-hd {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--muted);
      margin: 6px 0 4px;
      padding-top: 8px;
      border-top: 1px dashed var(--border);
    }

    .pl-line {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px solid var(--bg2);
    }

    .pl-line.pl-sub {
      font-size: 12.5px;
      color: var(--muted);
      border-bottom: none;
      padding: 2px 0;
    }

    .pl-line.pl-total-rev {
      font-weight: 700;
      border-bottom: 2px solid var(--green);
      padding-top: 8px;
      margin-top: 4px;
      font-size: 14px;
    }

    .pl-line.pl-total-exp {
      font-weight: 700;
      border-bottom: 2px solid var(--red);
      padding-top: 8px;
      margin-top: 4px;
      font-size: 14px;
    }

    .pl-amt {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      min-width: 140px;
      text-align: right;
    }

    .pl-amt.pl-muted {
      color: var(--muted);
      font-weight: 400;
    }

    .pl-amt.pl-red {
      color: var(--red);
    }

    .pl-net {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 16px 0 8px;
      padding: 14px 18px;
      background: var(--bg2);
      border-radius: 8px;
      font-size: 15px;
      font-weight: 800;
      border-top: 3px solid var(--green);
    }

    .pl-footer {
      font-size: 11px;
      color: var(--muted);
      margin-top: 24px;
      padding-top: 12px;
      border-top: 1px dashed var(--border);
      text-align: center;
    }

    /* ── Daily Ledger ── */
    .ldg-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 16px;
    }

    .ldg-title {
      font-size: 18px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ldg-nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ldg-nav-btn {
      padding: 7px 12px !important;
    }

    .ldg-date-pick {
      padding: 7px 12px;
      border: 2px solid var(--border);
      border-radius: 8px;
      font-size: 13px;
      background: var(--surface);
      color: var(--text);
      outline: none;
    }

    .ldg-tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 13.5px;
    }

    .ldg-tbl thead th {
      background: var(--bg2);
      padding: 10px 14px;
      text-align: left;
      font-weight: 700;
      font-size: 12px;
      color: var(--muted);
      border-bottom: 2px solid var(--border);
      position: sticky;
      top: 0;
    }

    .ldg-tbl tbody tr {
      border-bottom: 1px solid var(--bg2);
    }

    .ldg-tbl tbody tr:hover {
      background: var(--bg2);
    }

    .ldg-tbl td {
      padding: 10px 14px;
      vertical-align: middle;
    }

    .ldg-tbl tfoot td {
      padding: 12px 14px;
      font-weight: 700;
      font-size: 14px;
      border-top: 2px solid var(--border);
      background: var(--bg2);
    }

    .ldg-income {
      color: var(--green);
      font-weight: 600;
    }

    .ldg-expense {
      color: var(--red);
      font-weight: 600;
    }

    .ldg-balance-pos {
      color: var(--green);
      font-weight: 700;
    }

    .ldg-balance-neg {
      color: var(--red);
      font-weight: 700;
    }

    .ldg-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
    }

    .ldg-tag-income {
      background: #dcfce7;
      color: #16a34a;
    }

    .ldg-tag-expense {
      background: #fee2e2;
      color: #dc2626;
    }

    .ldg-shortcut {
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg2);
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s;
    }

    .ldg-shortcut:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    @media (max-width: 640px) {
      .ldg-header {
        flex-direction: column;
        align-items: stretch;
      }
    }

    .tx-pl-line .label {
      color: var(--muted);
    }

    .tx-pl-line .val {
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .tx-pl-line.total {
      border-top: 2px solid var(--text);
      font-weight: 800;
      font-size: 14px;
      padding-top: 10px;
      margin-top: 4px;
    }

    .tx-pl-line.total .label {
      color: var(--text);
    }

    .tx-print-50t {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 30px;
      max-width: 800px;
      margin: 0 auto;
    }

    .tx-print-50t h3 {
      text-align: center;
      font-size: 16px;
      margin-bottom: 4px;
    }

    .tx-print-50t .tx-50t-sub {
      text-align: center;
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 20px;
    }

    .tx-print-50t .tx-50t-row {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 4px;
      margin-bottom: 6px;
      font-size: 13px;
    }

    .tx-print-50t .tx-50t-row .lbl {
      font-weight: 600;
      color: var(--muted);
    }

    .tx-50t-back {
      margin-bottom: 16px;
    }

    .tx-search {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
    }

    .tx-search input {
      flex: 1;
      padding: 9px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 13px;
    }

    .tx-port-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 18px;
    }

    .tx-port-card {
      background: var(--bg2);
      border-radius: 10px;
      padding: 14px;
      text-align: center;
    }

    .tx-port-card .num {
      font-size: 20px;
      font-weight: 800;
    }

    .tx-port-card .lbl {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    /* tx income 2-col grid */
    .tx-income-grids {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 4px;
    }

    @media(max-width:900px) {
      .tx-kpi-row {
        grid-template-columns: repeat(2, 1fr);
      }

      .tx-port-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .tx-income-grids {
        grid-template-columns: 1fr;
      }
    }

    @media(max-width:640px) {
      .tx-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
      }
      .tx-tab { white-space: nowrap; }
    }

    @media print {

      .tx-toolbar,
      .tx-tabs,
      .tx-50t-back,
      .tx-search,
      .no-print {
        display: none !important;
      }

      .tx-print-50t {
        border: none;
        box-shadow: none;
        padding: 0;
      }
    }

    /* ═══ CLOSED ACCOUNT BANNER ═══ */
    .closed-banner {
      display: none;
      align-items: center;
      gap: 10px;
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      border-radius: 8px;
      padding: 10px 16px;
      margin: 0 0 14px;
      font-size: 13px;
    }

    .closed-banner.show {
      display: flex;
    }

    .closed-banner .cb-icon {
      font-size: 20px;
      color: #16a34a;
      flex-shrink: 0;
    }

    .closed-banner .cb-title {
      font-weight: 700;
      color: #15803d;
      font-size: 14px;
    }

    .closed-banner .cb-reason {
      color: #166534;
      font-size: 12px;
      margin-top: 2px;
    }

    .closed-banner .cb-ref {
      margin-left: auto;
      font-size: 11px;
      color: #166534;
      background: #dcfce7;
      padding: 2px 10px;
      border-radius: 20px;
      white-space: nowrap;
    }

    /* ไฮไลท์งวดสุดท้าย (ปิดบัญชี) */
    tr.closing-row {
      background: #f0fdf4 !important;
      border-top: 2px solid #86efac !important;
    }

    tr.closing-row td {
      font-weight: 600;
    }

    .close-note-badge {
      display: inline-block;
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
      border-radius: 10px;
      padding: 1px 8px;
      font-size: 11px;
      font-weight: 700;
      margin-left: 4px;
    }

    .close-reason-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: var(--surface2);
      border: 1.5px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      text-align: left;
      transition: border-color .15s, background .15s;
    }

    .close-reason-btn:hover {
      border-color: #16a34a;
      background: #f0fdf4;
      color: #15803d;
    }

    /* ═══ USER MANAGEMENT PAGE ═══ */
    .um-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .um-table-wrap {
      overflow-x: auto;
    }

    .um-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .um-table thead tr {
      background: var(--sidebar-bg);
      color: #fff;
    }

    .um-table th {
      padding: 10px 14px;
      font-weight: 600;
      text-align: left;
      white-space: nowrap;
    }

    .um-table tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background .1s;
    }

    .um-table tbody tr:hover {
      background: var(--surface2);
    }

    .um-table td {
      padding: 10px 14px;
      vertical-align: middle;
    }

    .um-badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
    }

    .um-badge.admin {
      background: #eff6ff;
      color: #2563eb;
    }

    .um-badge.staff {
      background: #f0fdf4;
      color: #16a34a;
    }

    .um-badge.inactive {
      background: #f5f5f5;
      color: #888;
    }

    .um-actions {
      display: flex;
      gap: 6px;
    }

    /* ═══ CUSTOMER EDIT MODAL ═══ */
    .ce-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 2000;
      align-items: center;
      justify-content: center;
    }

    .ce-modal-overlay.open {
      display: flex;
    }

    .ce-modal {
      background: var(--surface);
      border-radius: 12px;
      width: 100%;
      max-width: 640px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    }

    .ce-modal-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      background: var(--modal-head);
      color: #fff;
      border-bottom: 2px solid rgba(200, 169, 106, .45);
      font-weight: 700;
      font-size: 15px;
    }

    .ce-modal-body {
      padding: 22px;
    }

    .ce-section-hd {
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 18px 0 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
    }

    .ce-section-hd:first-child {
      margin-top: 0;
    }

    .ce-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .ce-grid .s2 {
      grid-column: span 2;
    }

    .ce-field label {
      display: block;
      font-size: 11px;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 4px;
    }

    .ce-field input,
    .ce-field select,
    .ce-field textarea {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 7px;
      font-size: 13px;
      background: var(--bg);
      font-family: inherit;
    }

    .ce-field textarea {
      resize: vertical;
      min-height: 60px;
    }

    .ce-modal-ft {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      padding: 16px 22px;
      border-top: 1px solid var(--border);
    }

    /* ═══ MOBILE RESPONSIVE ═══ */
    @media (max-width: 768px) {
      :root {
        --sidebar-w: 0px;
      }

      .sidebar {
        transform: translateX(-248px);
        width: 248px;
        transition: transform .25s ease;
        z-index: 200;
      }

      .sidebar.open {
        transform: translateX(0);
      }

      .sidebar-overlay.open {
        display: block;
      }

      .main {
        margin-left: 0;
      }

      .topbar {
        padding: 12px 16px;
      }

      .content {
        padding: 14px 16px;
      }

      .cp-kpi-strip {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .cp-header-top {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
      }

      .cp-tabs {
        gap: 4px;
        flex-wrap: wrap;
      }

      .cp-tab {
        font-size: 12px;
        padding: 8px 10px !important;
      }

      table {
        font-size: 12px;
      }

      .ce-grid {
        grid-template-columns: 1fr;
      }

      .ce-grid .s2 {
        grid-column: span 1;
      }

      .ce-modal {
        max-width: 100%;
        margin: 0 10px;
      }

      /* ซ่อน columns ที่ไม่สำคัญบน mobile */
      .tbl-wrap table th:nth-child(n+6),
      .tbl-wrap table td:nth-child(n+6) {
        display: none;
      }

      .um-table th:nth-child(n+5),
      .um-table td:nth-child(n+5) {
        display: none;
      }

      /* ป้องกัน horizontal overflow ทั้งหน้า */
      .page, .content, .app, .card, .card-body {
        max-width: 100%;
        overflow-x: hidden;
      }
      .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      th, td { min-width: 0 !important; }
    }

    @media (max-width: 480px) {

      .topbar h1 {
        font-size: 14px;
      }

      .content { padding: 10px 12px; }
    }

    @media (max-width: 360px) {
      .content { padding: 8px 10px; }
      .kdt-nav-item { padding: 0 7px; font-size: 11px; }
    }

    .srch-chip {
      border: 1px solid #dbe5f3;
      background: rgba(255, 255, 255, .9);
      color: #334155;
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s ease;
      font-family: inherit;
    }

    .srch-chip:hover {
      border-color: rgba(37, 99, 235, .35);
      color: var(--accent);
      transform: translateY(-1px);
    }

    .srch-bar input[type="text"] {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-size: 14px;
      padding: 10px 0;
      color: var(--text);
      min-width: 0;
    }

    .srch-bar input[type="text"]::placeholder {
      color: #bbb;
    }

    .srch-bar select {
      border: none;
      outline: none;
      background: transparent;
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      padding: 7px 8px;
      cursor: pointer;
      min-width: 0;
    }

    .srch-chip .dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-right: 5px;
      vertical-align: middle;
    }

    .srch-chip.on {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
      box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
    }

    .srch-chip.on .dot {
      filter: brightness(2);
    }

    .srch-chip.ever-court.on {
      background: #7c3aed;
      border-color: #7c3aed;
    }

    .srch-recent-chip {
      padding: 4px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface2);
      color: var(--text);
      font-size: 11px;
      cursor: pointer;
      font-family: inherit;
      transition: .15s;
    }

    .srch-recent-chip:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    mark.srch-hl {
      background: #fef3c7;
      color: #92400e;
      padding: 0 2px;
      border-radius: 3px;
      font-weight: 700;
    }

    /* ── Results section ── */
    .srch-results {
      margin-top: 22px;
    }

    .srch-results .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 18px 44px rgba(15, 23, 42, .05);
    }

    .srch-results .card-hd {
      padding: 16px 20px;
      font-size: 14px;
      font-weight: 700;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    @media(max-width:900px) {

      .srch-bar select {
        flex: 0 0 auto;
      }
    }

    @media(max-width:480px) {

      .srch-chip {
        width: auto;
        text-align: center;
      }
    }

    /* ─── FINANCE HUB ─── */
    .fin-nav {
      display: flex;
      gap: 4px;
      margin-bottom: 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 6px;
    }

    .fin-tab-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 10px 8px;
      border: none;
      border-radius: 8px;
      background: transparent;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      transition: all .15s;
      font-family: inherit;
    }

    .fin-tab-btn i {
      font-size: 16px;
    }

    .fin-tab-btn:hover {
      background: var(--bg2);
      color: var(--text);
    }

    .fin-tab-btn.on {
      background: var(--accent);
      color: #fff;
    }

    .fin-panel {
      display: none;
    }

    .fin-panel.on {
      display: block;
    }

    /* Bank / Receipts table */
    .fin-tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .fin-tbl thead th {
      background: var(--sidebar-bg);
      color: #fff;
      padding: 10px 12px;
      text-align: left;
      font-size: 12px;
      font-weight: 600;
    }

    .fin-tbl tbody tr {
      border-bottom: 1px solid var(--bg2);
    }

    .fin-tbl tbody tr:hover {
      background: var(--bg2);
    }

    .fin-tbl td {
      padding: 9px 12px;
      vertical-align: middle;
    }

    .fin-tbl .num {
      text-align: right;
    }

    /* Pager */
    .fin-pager {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    .fin-pager button {
      padding: 5px 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface);
      cursor: pointer;
      font-size: 12px;
    }

    .fin-pager button.on {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    .fin-pager button:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    /* Tax simplified */
    .fin-tax-month-tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .fin-tax-month-tbl th {
      background: #1e3a5f;
      color: #fff;
      padding: 8px 12px;
      text-align: center;
      font-size: 12px;
    }

    .fin-tax-month-tbl td {
      padding: 8px 12px;
      border-bottom: 1px solid var(--bg2);
      text-align: right;
    }

    .fin-tax-month-tbl td:first-child {
      text-align: left;
    }

    @media (max-width: 640px) {
      .fin-nav {
        flex-wrap: wrap;
      }

      .fin-tab-btn {
        min-width: 48%;
        font-size: 11px;
      }
    }

    /* ═══ CUSTOMER RISK DASHBOARD ═══ */
    .cp-risk-dash {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 20px;
      margin: 12px 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .cp-risk-dash-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    .cp-risk-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .cp-risk-stat {
      flex: 1;
      min-width: 110px;
      background: var(--bg2);
      border-radius: 10px;
      padding: 12px 14px;
      text-align: center;
    }

    .cp-risk-stat-val {
      font-size: 22px;
      font-weight: 800;
    }

    .cp-risk-stat-lbl {
      font-size: 11px;
      color: var(--muted);
      margin-top: 3px;
    }

    .cp-risk-alert {
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .cp-risk-alert.high {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fca5a5;
    }

    .cp-risk-alert.medium {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    .cp-risk-alert.low {
      background: #f0fdf4;
      color: #16a34a;
      border: 1px solid #86efac;
    }

    .cp-pay-bar-wrap {
      margin-top: 4px;
    }

    .cp-pay-bar-label {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .cp-pay-bar-track {
      height: 8px;
      background: #f3f4f6;
      border-radius: 4px;
      overflow: hidden;
    }

    .cp-pay-bar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width .4s;
    }

    /* ═══ NEW CONTRACT: RETURNING CUSTOMER BANNER ═══ */
    .nc-returning-banner {
      display: none;
      border-radius: 10px;
      padding: 12px 16px;
      margin: 10px 0 0;
      font-size: 13px;
      gap: 10px;
      align-items: flex-start;
    }

    .nc-returning-banner.show {
      display: flex;
    }

    .nc-returning-banner.warning {
      background: #fffbeb;
      border: 1.5px solid #fde68a;
      color: #92400e;
    }

    .nc-returning-banner.danger {
      background: #fef2f2;
      border: 1.5px solid #fca5a5;
      color: #991b1b;
    }

    .nc-returning-banner.info {
      background: #eff6ff;
      border: 1.5px solid #93c5fd;
      color: #1e40af;
    }

    .nc-returning-banner .nrb-icon {
      font-size: 18px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .nc-returning-banner .nrb-body {
      flex: 1;
    }

    .nc-returning-banner .nrb-title {
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 4px;
    }

    .nc-returning-banner .nrb-detail {
      font-size: 12px;
      opacity: .85;
      line-height: 1.5;
    }

    .nc-returning-banner .nrb-actions {
      margin-top: 8px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .nrb-btn {
      padding: 4px 12px;
      border-radius: 6px;
      border: 1.5px solid currentColor;
      background: transparent;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: inherit;
    }

    .nrb-btn:hover {
      opacity: .7;
    }

    /* ═══════════════════════════════════════════════════════════════
       COMPREHENSIVE RESPONSIVE — iPad / Android Tablet / iOS / MacBook
       ═══════════════════════════════════════════════════════════════ */

    /* ── iOS Safe Area + Touch Optimization ── */
    @supports(padding: env(safe-area-inset-top)) {
      .topbar {
        padding-top: calc(16px + env(safe-area-inset-top));
      }

      .sidebar {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
      }

      .modal-overlay {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
      }
    }

    /* Touch-friendly: minimum tap targets */
    @media (pointer: coarse) {

      button,
      .s-item,
      .modal-tab,
      .acct-tab-btn,
      .cp-tab,
      .pay-tab,
      .fin-tab-btn,
      .ntab-btn {
        min-height: 44px;
      }

      input,
      select,
      textarea {
        min-height: 44px;
        font-size: 16px !important;
        /* ป้องกัน iOS zoom เมื่อกด input */
      }

      .s-item {
        padding: 12px 18px;
      }

      .modal-tab {
        padding: 14px 16px;
      }
    }

    /* Smooth scrolling for all */
    * {
      -webkit-overflow-scrolling: touch;
    }

    /* ── TABLET: iPad / Android Tablet (768px - 1024px) ── */
    @media (min-width: 769px) and (max-width: 1024px) {
      :root {
        --sidebar-w: 200px;
      }

      .content {
        padding: 18px 20px;
      }

      .topbar {
        padding: 14px 20px;
      }

      .acct-kpi-row {
        grid-template-columns: repeat(3, 1fr);
      }

      /* Modal */
      .modal-overlay {
        padding: 20px;
      }

      .modal-box {
        max-width: 90vw;
      }

      .modal-content {
        max-height: 70vh;
      }

      /* Detail page info */
      .cp-info-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      /* New contract */
      .nc-page {
        flex-direction: column;
      }

      .nc-sidebar {
        width: 100%;
        position: static;
      }

      .nc-sidebar-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .nc-side-hd {
        grid-column: 1/-1;
      }

      /* Table scroll hint */
      .tbl-wrap {
        position: relative;
      }

      .tbl-wrap::after {
        content: '→';
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        transition: opacity .3s;
        font-size: 20px;
        color: var(--muted);
        pointer-events: none;
      }

      .tbl-wrap:hover::after {
        opacity: .5;
      }

      /* Tabs scroll horizontal */
      .modal-tabs,
      .acct-tab-header,
      .fin-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .modal-tabs::-webkit-scrollbar,
      .acct-tab-header::-webkit-scrollbar {
        height: 0;
      }
    }

    /* ── MOBILE: Phone (≤ 768px) — เสริมจาก block เดิม ── */
    @media (max-width: 768px) {

      /* Modal: full screen on mobile */
      .modal-overlay {
        padding: 0;
        align-items: stretch;
      }

      .modal-box {
        max-width: 100%;
        border-radius: 0;
        margin-top: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      .modal-content {
        max-height: none;
        flex: 1;
        padding: 16px;
        overflow-y: auto;
      }

      .modal-hd {
        padding: 14px 16px;
      }

      .modal-hd h2 {
        font-size: 14px;
      }

      /* Tabs: horizontal scroll */
      .modal-tabs,
      .acct-tab-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
      }

      .modal-tabs::-webkit-scrollbar,
      .acct-tab-header::-webkit-scrollbar {
        height: 0;
      }

      .modal-tab {
        white-space: nowrap;
        font-size: 12px;
        padding: 12px 14px;
      }

      /* Info grids */
      .cp-info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
      }

      .cp-info-item.s4 {
        grid-column: span 2;
      }

      .cp-kpi-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
      }

      /* Form grid */
      .fg {
        grid-template-columns: 1fr !important;
      }

      .fg .s2,
      .fg .s3 {
        grid-column: span 1 !important;
      }

      .ce-grid {
        grid-template-columns: 1fr !important;
      }

      .ce-grid .s2 {
        grid-column: span 1 !important;
      }

      /* Finance nav */
      .fin-nav {
        flex-wrap: wrap;
        gap: 4px;
      }

      .fin-tab-btn {
        min-width: 45%;
        font-size: 11px;
        padding: 10px 8px;
      }

      /* Button sizes */
      .btn,
      .btn-sm {
        padding: 10px 16px;
        font-size: 13px;
      }

      /* สมุดรายวัน / bank ledger cards */
      .cp-contract {
        grid-template-columns: 1fr !important;
      }

      /* ตาราง: scroll แนวนอนได้ทุกตาราง */
      .card:has(table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      table {
        min-width: 600px;
      }

      .fin-tbl {
        min-width: 500px;
      }

      /* Touch-friendly: ขยายพื้นที่กดให้ใหญ่ขึ้น */
      td {
        padding: 10px 8px;
      }

      input,
      select,
      textarea {
        font-size: 16px !important;
      }

      .srch-bar input {
        min-width: 100%;
      }

      /* ปิด sidebar เมื่อกดเมนู */
      .s-item {
        padding: 12px 16px;
        font-size: 14px;
      }

      /* Ledger entry cards */
      .tx-kpi-row {
        flex-wrap: wrap;
        gap: 8px;
      }

      .tx-kpi {
        min-width: calc(50% - 8px);
      }

      .nf label {
        font-size: 12px;
      }

      .cp-actions .btn {
        font-size: 11px;
        padding: 8px 12px;
      }
    }

    /* ── SMALL PHONE (≤ 480px) ── */
    @media (max-width: 480px) {
      .cp-info-grid {
        grid-template-columns: 1fr !important;
      }

      .cp-info-item.s2,
      .cp-info-item.s4 {
        grid-column: span 1 !important;
      }

      .cp-kpi-strip {
        grid-template-columns: 1fr 1fr !important;
      }

      .acct-kpi-row {
        grid-template-columns: 1fr 1fr !important;
      }

      /* หัวข้อ topbar */
      .topbar h1 {
        font-size: 13px;
      }

      /* ซ่อน columns เพิ่ม */
      .tbl-wrap table th:nth-child(n+4),
      .tbl-wrap table td:nth-child(n+4) {
        display: none;
      }

      .srch-bar input {
        width: 100%;
        font-size: 14px;
      }

      .srch-bar select {
        width: 100%;
        font-size: 13px;
      }

      /* ช่องทางชำระ dropdown */
      #ap-method {
        font-size: 12px;
      }

      /* ปุ่ม action บน mobile */
      .btn-group {
        flex-direction: column;
      }

      .btn-group .btn {
        width: 100%;
        text-align: center;
      }

      /* Finance tab buttons */
      .fin-tab-btn {
        min-width: 100%;
        font-size: 12px;
      }

      /* ตาราง payment: scroll แนวนอนได้ */
      #dt-pay .card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      #dt-pay table {
        min-width: 700px;
      }
    }

    /* ─── DIGITAL CARD (การ์ดดิจิทัล — ตารางงวดแบบการ์ดเครื่องแม่) ─── */
    #dt-sum-card .dtc-head {
      display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;
      background: linear-gradient(158deg, #08192e, var(--brand-navy) 56%, #15315e);
      border-radius: 12px; padding: 14px 18px; margin-bottom: 12px;
    }
    #dt-sum-card .dtc-title { color: #f5ead2; font-weight: 800; font-size: 16px; letter-spacing: .5px; }
    #dt-sum-card .dtc-sub { color: #9fb3d1; font-size: 12px; margin-top: 3px; }
    #dt-sum-card .dtc-rate { color: var(--brand-gold); font-size: 11.5px; font-weight: 700; text-align: right; white-space: nowrap; }
    #dt-sum-card .dtc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
    #dt-sum-card .dtc-stat { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; background: #fff; }
    #dt-sum-card .dtc-stat .k { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .4px; }
    #dt-sum-card .dtc-stat .v { font-size: 16px; font-weight: 800; margin-top: 2px; }
    #dt-sum-card .dtc-stat .n { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
    #dt-sum-card .dtc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    #dt-sum-card .dtc-table th {
      position: sticky; top: 0; z-index: 1;
      background: linear-gradient(180deg, #f3f5f9, #eef1f6);
      color: var(--brand-navy); text-transform: uppercase; font-size: 10.5px; letter-spacing: .5px;
      padding: 8px 10px; border-bottom: 2px solid var(--brand-gold); text-align: left;
    }
    #dt-sum-card .dtc-table td { padding: 6px 10px; border-bottom: 1px solid #f1f3f7; }
    #dt-sum-card .dtc-table tr.st-late td { background: #fffbeb; }
    #dt-sum-card .dtc-table tr.st-partial td { background: #fff7ed; }
    #dt-sum-card .dtc-table tr.st-overdue td { background: #fef2f2; }
    #dt-sum-card .dtc-table tr.st-future td { color: #9ca3af; background: #fafafa; }
    #dt-sum-card .dtc-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }

    /* ── LANDSCAPE PHONE ── */
    @media (max-height: 500px) and (orientation: landscape) {
      .modal-content {
        max-height: 60vh;
      }

      .sidebar {
        height: 100vh;
        overflow-y: auto;
      }
    }

    .sidebar-overlay.open {
      display: block;
    }

    @media (max-width: 768px) {

      /* ── Sidebar: off-canvas, shown by hamburger ── */
      .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        z-index: 100;
        transition: left .25s ease;
        overflow-y: auto;
      }

      .sidebar.open {
        left: 0;
      }

      .sidebar .s-collapse-btn {
        display: none;
      }

      /* ── Main content ── */
      .app {
        padding-top: 50px;
      }

      .main {
        margin-left: 0 !important;
      }

      .main>.topbar {
        display: none;
      }

      /* hide desktop topbar, use mobile-header */
      .content {
        margin-left: 0 !important;
        padding: 12px 10px;
      }

      .acct-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
      }

      /* ── Table: scroll horizontal ── */
      .acct-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .acct-table-wrap table {
        min-width: 700px;
        font-size: 12px;
      }

      .acct-table-wrap th,
      .acct-table-wrap td {
        padding: 6px 8px;
        white-space: nowrap;
      }

      .fu2-filterrow select,
      .nw-filter-bar select {
        width: 100%;
      }

      .acct-filter-bar {
        flex-direction: column;
        gap: 8px;
      }

      .acct-filter-actions {
        flex-wrap: wrap;
        gap: 6px;
      }

      .fu-views.fu2-tabbar .fu-view-btn {
        flex: none;
        white-space: nowrap;
        font-size: 11px;
        padding: 8px 10px;
      }

      /* ── Cards: full width ── */
      .fu2-card {
        flex-wrap: wrap;
      }

      .fu2-actions {
        width: 100%;
        margin-top: 4px;
        opacity: 1 !important;
      }

      /* ── Modal: full screen ── */
      .modal-overlay {
        padding: 0;
        align-items: stretch;
      }

      .modal-box {
        max-width: 100% !important;
        width: 100%;
        margin-top: 0;
        border-radius: 0;
        min-height: 100vh;
      }

      .modal-content {
        max-height: none;
        padding: 16px;
      }

      .modal-hd {
        padding: 12px 16px;
      }

      .modal-tabs {
        overflow-x: auto;
      }

      /* ── Forms ── */
      .fg {
        grid-template-columns: 1fr !important;
      }

      .fg.col2 {
        grid-template-columns: 1fr !important;
      }

      .fu-quick-results {
        grid-template-columns: repeat(2, 1fr);
      }

      /* ── History / My Tasks ── */
      .fu-hist-item {
        grid-template-columns: 36px 1fr;
      }

      .fu-hist-actions {
        display: none;
      }

      .fu-mytasks-hint {
        font-size: 11px;
      }

      /* ── Compact rows ── */
      .fu2-compact-date,
      .nw-compact-date {
        display: none;
      }

      .fu2-compact-actions {
        margin-left: 0;
      }

      /* ── Appointments ── */
      .nw-appt-card {
        flex-wrap: wrap;
      }

      .nw-appt-acts {
        width: 100%;
        margin-top: 4px;
      }

      /* ── Buttons / Actions ── */
      .fu2-actions {
        opacity: 1 !important;
      }

      .fu2-phone-btn {
        padding: 3px 6px;
        font-size: 10px;
      }

      /* ── Page padding ── */
      body {
        font-size: 13px;
      }
    }

    /* ── Small phones (≤400px) ── */
    @media (max-width: 400px) {

      .acct-kpi-row {
        grid-template-columns: 1fr !important;
      }

      .fu2-card {
        padding: 6px 8px;
      }

      .fu2-name {
        font-size: 12px;
      }

      .fu2-badge {
        width: 32px;
        height: 32px;
      }

      .fu2-badge-num {
        font-size: 14px;
      }

      .content {
        padding: 8px 6px;
      }
    }

    /* ── iPad / Tablet (768px - 1024px) ── */
    @media (min-width: 769px) and (max-width: 1024px) {

      /* Sidebar: แสดงแต่ย่อ */
      .sidebar {
        width: 200px;
      }

      .sidebar .s-brand {
        padding: 12px 12px 10px;
      }

      .sidebar .s-brand-name {
        font-size: 13px;
      }

      .sidebar .s-brand-sub {
        font-size: 9px;
      }

      .sidebar .s-item {
        padding: 8px 12px;
        font-size: 12px;
      }

      .sidebar .s-lbl {
        font-size: 11px;
      }

      .sidebar .s-sep {
        font-size: 9px;
        padding: 6px 12px 2px;
      }

      /* Content area */
      .main {
        margin-left: 200px;
      }

      /* Tables: scroll ได้ */
      .acct-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .acct-table-wrap table {
        min-width: 600px;
        font-size: 12px;
      }

      .acct-kpi-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px;
      }

      /* Cards: หาย hover opacity */
      .fu2-actions {
        opacity: 1 !important;
      }

      /* Modals: 90% กว้าง */
      .modal-box {
        max-width: 90vw !important;
      }
    }

    /* ── LARGE DESKTOP / MacBook Pro (≥1440px) ── */
    @media (min-width: 1440px) {
      .content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 24px 40px;
      }

      .modal-box {
        max-width: 1100px;
      }
    }
  
    /* ══ KDP DESIGN SYSTEM — Navy & Gold Premium Theme */
    :root {
      --gold: var(--brand-gold);
      --gold-light: #e6cda1;
      --gold-dark: #b8935a;
      --navy: #071628;
      --navy-light: #1a1a2e;
      --navy-mid: #0f2341;
      --blue-accent: #3b82f6;
      --blue-bg: #eff6ff;
      --red-accent: #ef4444;
      --red-bg: #fef2f2;
      --green-accent: #22c55e;
      --green-bg: #f0fdf4;
      --yellow-accent: #f59e0b;
      --yellow-bg: #fffbeb;
      --purple-accent: #7c3aed;
      --purple-bg: #faf5ff;
      --gray-50: #f8fafc;
      --gray-100: #f1f5f9;
      --gray-200: #e2e8f0;
      --gray-300: #cbd5e1;
      --gray-400: #94a3b8;
      --gray-500: #64748b;
      --gray-600: #475569;
      --gray-700: #334155;
      --gray-800: #1e293b;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-xl: 20px;
      --radius-full: 9999px;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
      --shadow-md: 0 2px 8px rgba(0,0,0,.08);
      --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
      --shadow-xl: 0 20px 50px rgba(0,0,0,.18);
      --transition: .18s ease;
    }
    .kdp-hero h1 { margin:0 0 4px; font-size:22px; font-weight:700; display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
    .kdp-hero h1 i { color: var(--gold); }
    .kdp-hero p { margin:0 0 14px; color:var(--gray-300); font-size:13px; position:relative; z-index:1; }
    .kdp-hero .kdp-search-box input {
      flex:1; border:none; padding:13px 18px; font-size:15px; outline:none;
      color:var(--gray-800); min-width:0; font-family:inherit;
    }
    .kdp-filter-bar h3 { font-size:14px; font-weight:700; color:var(--gray-700); margin:0; display:flex; align-items:center; gap:6px; }
    .kdp-search-wrap i { color:var(--gray-400); font-size:13px; }
    .kdp-search-wrap input { border:none; background:transparent; padding:8px 0; font-size:13px; outline:none; min-width:160px; font-family:inherit; color:var(--gray-700); }
    .kdp-chip.on { background:var(--navy); color:#fff; border-color:var(--navy); }
    .kdp-chip .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
    .kdp-table-wrap table { width:100%; border-collapse:collapse; font-size:13px; }
    .kdp-table-wrap th { padding:10px 14px; text-align:left; font-weight:700; font-size:11px; text-transform:uppercase; color:var(--gray-500); background:var(--gray-50); border-bottom:2px solid var(--border); white-space:nowrap; }
    .kdp-table-wrap td { padding:11px 14px; border-bottom:1px solid var(--border); color:var(--gray-700); }
    .kdp-table-wrap tr:last-child td { border-bottom:none; }
    .kdp-table-wrap tr:hover td { background:var(--gray-50); }
    .kdp-section-title i { color:var(--gold); }
    .kdp-tab.active { background:var(--surface); color:var(--gray-800); box-shadow:var(--shadow-sm); }
    /* Responsive */
    @media (max-width: 768px) {
      .kdp-hero h1 { font-size:18px; }
    }

  
    /* ── Page section hero classes (for cof, tax, fin, usr, bank, line, calc) ── */
    .cof-hero, .tax-hero, .fin-hero, .usr-hero, .bank-hero, .line-hero, .calc-hero {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
      border-radius: var(--radius-lg);
      padding: 24px 28px;
      margin-bottom: 20px;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .cof-hero h2, .tax-hero h2, .fin-hero h2, .usr-hero h2, .bank-hero h2, .line-hero h2, .calc-hero h2 {
      margin: 0 0 4px;
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .cof-hero h2 i, .tax-hero h2 i, .fin-hero h2 i, .usr-hero h2 i, .bank-hero h2 i, .line-hero h2 i, .calc-hero h2 i {
      color: var(--gold);
    }
    .cof-hero p, .tax-hero p, .fin-hero p, .usr-hero p, .bank-hero p, .line-hero p, .calc-hero p,
    .cof-summary {
      margin: 0 0 14px;
      color: var(--gray-300);
      font-size: 13px;
    }
    @media (max-width: 768px) {
      .cof-hero, .tax-hero, .fin-hero, .usr-hero, .bank-hero, .line-hero, .calc-hero {
        padding: 18px 16px;
      }
    }

    /* ═══════════════════════════════════════════════════════════════
       iPad / TABLET FIT (769–1024px) — "จัดให้พอดี" ไม่ปรับดีไซน์ (2026-06-23)
       มือถือใช้ mShell (?ui=mobile) / ≤640 = tabbar; ช่วง 769–1024 เลย ≤768
       ไปแล้วเลยตกลง layout เดสก์ท็อปที่ออกแบบสำหรับจอกว้าง. บล็อกนี้แค่
       คืนพื้นที่ขอบ + กัน media/โมดัลล้นจอ — ไม่แตะสี/คอมโพเนนต์/กริดข้อมูล
       ═══════════════════════════════════════════════════════════════ */
    @media (min-width: 769px) and (max-width: 1024px) {
      .content { padding: 16px; }
      /* media ในเนื้อหาห้ามล้นกรอบ (รูปหลักทรัพย์/แผนที่/แคนวาส) */
      .content img, .content video, .content canvas { max-width: 100%; height: auto; }
      /* โมดัลกว้างเกิน → จำกัดให้พอดีจอ + เว้นขอบ (กันชนขอบ iPad) — cap เท่านั้น ไม่ขยาย */
      .modal-box, .ca-card { max-width: min(92vw, 820px) !important; }
    }