:root {
        /* --- Ivory + Brass identity (ตามรูปตัวอย่าง) ------------- */
        --brand-ink: #2B2519;

        --sage-950:#241B0C;
        --sage-900:#453518;
        --sage-800:#5D4720;
        --sage-700:#7A5D28;
        --sage-600:#957230;
        --sage-500:#B08A3E;
        --sage-400:#CBA95F;
        --sage-300:#DEC488;
        --sage-200:#EBD9B0;
        --sage-100:#F5EAD2;
        --sage-50:#FBF6E9;
        --sage-mint:#B08A3E;

        /* ชื่อ --gold* เดิมคงไว้ ทุก rule/inline style เดิมใช้งานได้ปกติ */
        --gold: #B08A3E;
        --gold-light: #DEC488;
        --gold-dark: #7A5D28;
        --gold-soft: #F5EAD2;
        --ivory: #FAF6EE;
        --cream: #FAF6EE;
        --line:  #EDE4D3;
        --head:  #F2E7CE;

        /* สีเสริมที่ใช้ในธีมสว่าง */
        --panel: #FFFDF8;
        --muted: #9A8C71;
      }
      html { scroll-behavior: smooth; }
      body {
        font-family: 'IBM Plex Sans Thai', 'Inter', -apple-system, sans-serif;
        letter-spacing: -0.005em;
        background:
          radial-gradient(1200px 520px at 6% -12%, rgba(176,138,62,0.09), transparent 62%),
          radial-gradient(1000px 520px at 100% 0%, rgba(222,196,136,0.14), transparent 58%),
          #FAF6EE;
        -webkit-font-smoothing: antialiased;
      }
      ::-webkit-scrollbar { width: 10px; height: 10px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: #E0D4B8; border-radius: 999px; }
      ::-webkit-scrollbar-thumb:hover { background: var(--gold); }
      table, .font-mono { font-family: 'Inter', 'IBM Plex Sans Thai', monospace; }
      .card-elevate { transition: transform .18s ease, box-shadow .18s ease; }
      .card-elevate:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(122,93,40,0.26); }
      #journal-book-filters button, [id^="tab-btn-"] { transition: all .2s cubic-bezier(.4,0,.2,1); }
      .biz-type-card:has(input:checked) {
        border-color: var(--gold);
        background: linear-gradient(135deg, #FAF6EC 0%, #EFE8D8 100%);
        box-shadow: 0 4px 14px -4px rgba(122,93,40,0.32);
      }
      .fa-choice-card { transition: all .15s ease; }
      .fa-choice-card:has(input:checked) {
        border-color: var(--gold);
        background: linear-gradient(135deg, #FBF6E9 0%, #F1E3C0 100%);
        box-shadow: 0 4px 14px -4px rgba(122,93,40,0.35);
      }
      /* ---------- ระดับที่ 1: แถบหัวโมดัล / พื้นตกแต่ง — ครีมอ่อน เส้นบาง ---------- */
      .gold-grad {
        background: linear-gradient(180deg, #FDFAF2 0%, #F4EAD6 100%) !important;
        color: #7A5D28 !important;
        border: 1px solid rgba(176,138,62,.35) !important;
        box-shadow: none !important;
      }

      /* ---------- ระดับที่ 2: ปุ่มกดจริง — ครีมเข้มขึ้น ขอบทองหนา ตัวหนา ----------
         ยังเป็นครีมเหมือนพื้นหลัง แต่หนักพอให้แยกออกจากปุ่มรอง (ยกเลิก/ล้างค่า)
         ที่เป็นขอบเทาบางบนพื้นขาว */
      button.gold-grad, a.gold-grad, label.gold-grad,
      input[type="submit"].gold-grad, input[type="button"].gold-grad {
        background: linear-gradient(180deg, #F7EDD8 0%, #EADCBB 100%) !important;
        color: #5E4720 !important;
        border: 1.5px solid #B08A3E !important;
        font-weight: 800 !important;
        letter-spacing: .01em;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
                    0 3px 0 -1px rgba(176,138,62,.28),
                    0 10px 20px -14px rgba(94,71,32,.75) !important;
      }
      button.gold-grad:hover, a.gold-grad:hover, label.gold-grad:hover {
        background: linear-gradient(180deg, #F2E4C7 0%, #E2D0A6 100%) !important;
        border-color: #8C6C25 !important;
        color: #4A3818 !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
                    0 3px 0 -1px rgba(140,108,37,.40),
                    0 12px 24px -14px rgba(94,71,32,.85) !important;
      }
      button.gold-grad:active, a.gold-grad:active {
        transform: translateY(1px) scale(.985);
        box-shadow: inset 0 2px 4px rgba(122,93,40,.22) !important;
      }
      button.gold-grad:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(176,138,62,.35) !important;
      }
      /* ปุ่มครีมบนพื้นครีม: filter brightness เดิมไม่เห็นผล ปิดทิ้ง */
      .gold-grad.hover\:brightness-110:hover { filter: none; }
      .gold-text-grad { background: linear-gradient(135deg, #B08A3E, #6F5522); -webkit-background-clip: text; background-clip: text; color: transparent; }
      .gold-border { border-color: var(--gold) !important; }
      .company-card { transition: all .2s ease; }
      .company-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -14px rgba(122,93,40,0.32); border-color: var(--gold); }
      /* ========================================== */
      /* SIDEBAR: เมนูข้าง — เห็นทุกเมนูทันที ไม่ต้องคลิกกาง */
      /* ========================================== */
      /* 🔑 ของเดิมต้องคลิกถึงจะกาง ทำให้หาเมนูยาก
         ตอนนี้กางไว้ตั้งแต่แรก (nav-group-open) แต่ยังพับได้ถ้าอยากประหยัดที่ */
      .nav-group { border-radius: .75rem; }
      .nav-group-header {
        cursor: pointer;
        color: #A3947A;
        user-select: none;
      }
      .nav-group-header:hover { color: var(--gold-dark); background: rgba(176,138,62,.07); }

      .nav-submenu {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
      }
      .nav-group.nav-group-open .nav-submenu { max-height: 620px; opacity: 1; }

      .nav-group .chevron { transition: transform .25s ease; color: #CFC0A0; opacity: .8; }
      .nav-group.nav-group-open .chevron { transform: rotate(180deg); color: var(--gold-dark); }


      /* เส้นคั่นก่อนปุ่มตั้งค่า */
      .nav-divider {
        height: 1px;
        margin: .55rem .5rem;
        background: linear-gradient(90deg, transparent, var(--line), transparent);
      }

      /* ---- ปุ่มเมนูแต่ละอัน ---- */
      .nav-link {
        color: #6E6553;
        position: relative;
      }
      .nav-link:hover { background: #F6EEDD; color: var(--gold-dark); }
      .nav-link .nav-ico {
        display: inline-flex;
        width: 17px; height: 17px;
        align-items: center; justify-content: center;
        opacity: .55;
        transition: opacity .18s ease;
      }
      .nav-link .nav-ico svg { width: 100%; height: 100%; }
      .nav-link:hover .nav-ico { opacity: .95; }

      /* 🎯 เมนูที่เปิดอยู่ — แถบทองด้านซ้าย เห็นชัดว่าอยู่ตรงไหน */
      .nav-link.gold-grad,
      .nav-link[class*="gold-grad"] {
        color: #fff;
      }
      .nav-link.gold-grad .nav-ico { opacity: .95; }
      .nav-link.gold-grad::before {
        content: "";
        position: absolute;
        left: -0.7rem; top: 50%;
        width: 3px; height: 60%;
        border-radius: 999px;
        background: var(--gold-dark);
        transform: translateY(-50%);
      }

      /* จอเตี้ย — ลดช่องไฟลงหน่อยให้เห็นเมนูครบโดยไม่ต้องเลื่อน */
      @media (max-height: 820px) {
        .nav-link { padding-top: .32rem; padding-bottom: .32rem; font-size: 12.5px; }
        .nav-group-header { padding-top: .25rem; padding-bottom: .25rem; }
      }

      /* ========================================== */
      /* SIDEBAR / TOPBAR: Light Ivory Theme (matches Login page tone) */
      /* ========================================== */
      .app-sidebar-light {
        background: #FFFFFF;
        border: 1px solid var(--line);
        border-radius: 1.35rem;
        color: #554E40;
        margin: .85rem 0 .85rem .85rem;
        padding: 1rem .7rem !important;
        top: calc(68px + .85rem) !important;
        height: calc(100vh - 68px - 1.7rem) !important;
        box-shadow: 0 20px 44px -30px rgba(90,70,30,.45), inset 0 1px 0 #fff;
      }
      /* ไอคอน PNG เป็นภาพเข้ม อยู่บนพื้นสว่างได้เลย ไม่ต้องกลับสี */
      .app-sidebar-light nav img { filter: none; opacity:.55; }
      .app-sidebar-light nav button:hover img { opacity:.95; }
      .app-sidebar-light [id^="tab-btn-"].gold-grad img { filter: none; opacity:.9; }
      .app-sidebar-light .nav-group-header { color: #A3947A !important; }
      .app-sidebar-light .nav-group-header:hover { color: var(--gold-dark) !important; }
      .app-sidebar-light .nav-group.nav-group-open .chevron { color: var(--gold-dark); }
      .app-sidebar-light [id^="tab-btn-"] {
        color: #6E6553 !important;
      }
      .app-sidebar-light [id^="tab-btn-"]:hover {
        background: #F6EEDD !important;
        color: var(--gold-dark) !important;
      }
      /* switchTab() ใส่ .gold-grad ให้เมนูที่เปิดอยู่ -> เม็ดยาสีครีมทอง */
      .app-sidebar-light [id^="tab-btn-"].gold-grad,
      .app-sidebar-light [id^="tab-btn-"].bg-white\/10,
      .app-sidebar-light [id^="tab-btn-"].active-tab {
        background: #F3E7CD !important;
        color: #6B5320 !important;
        border: 1px solid rgba(176,138,62,.35) !important;
        box-shadow: 0 8px 18px -12px rgba(122,93,40,.55) !important;
      }

      /* The topbar is the same surface as the rail below it: the header
         ends on #6B5B3F and the sidebar gradient starts on #6B5B3F, so the
         two read as one continuous piece of chrome. */
      .app-topbar-light {
        position: relative;
        background: #FFFFFF;
        border-bottom: 1px solid var(--line);
        color: #3C372C;
      }
      /* เส้นคั่นใต้แถบบน — เส้นเดียวสม่ำเสมอ ไม่จางหัวท้าย */
      .app-topbar-light::after {
        content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
        pointer-events:none;
        background: rgba(176,138,62,0.22);
      }

      /* --- brand: ที่เดียวที่วางโลโก้ ------------- */
      .topbar-brand { display:flex; align-items:center; gap:.65rem; min-width:0; }
      /* โลโก้บนแถบบน = แผ่นครีม + ไอคอนเครื่องคิดเลขกับสมุดบัญชีสีทอง (SVG ใน shell/topbar-sidebar.html)
         รูปทรงล้อโลโก้จริง assets/logo-cleantax.png แต่วาดใหม่ให้คมที่ขนาดเล็ก */
      .topbar-brand .tb-mark {
        width:2.35rem; height:2.35rem; border-radius:.75rem; flex:0 0 auto;
        display:flex; align-items:center; justify-content:center;
        background:linear-gradient(180deg,#FFFDF8,#F4EAD4);
        border:1px solid #E6D6AE;
        box-shadow:0 8px 18px -12px rgba(122,93,40,.6);
      }
      .topbar-brand .tb-mark svg { width:1.5rem; height:1.5rem; display:block; }
      .topbar-brand .tb-name { color:#2B2519; font-weight:800; letter-spacing:-.01em; line-height:1.15; }
      .topbar-brand .tb-name em { font-style:normal; font-weight:500; color:#A5822F; }
      .topbar-brand .tb-sub { font-size:10px; color:#A3947A; }

      .app-topbar-light .tb-label { color:#B08A3E; }
      .app-topbar-light .tb-value { color:#3C372C; }
      .app-topbar-light .tb-div   { border-left:1px solid var(--line); }

      .app-topbar-light .topbar-chip {
        background: #F8F2E4;
        border: 1px solid #E9DDC2;
        color: #6B5320;
        transition: all .18s cubic-bezier(.4,0,.2,1);
      }
      .app-topbar-light .topbar-chip:hover {
        background: linear-gradient(135deg,#E7D3A2,#CBA95F);
        border-color: rgba(176,138,62,0.85);
        color: #3B2C0C;
        transform: translateY(-1px);
        box-shadow: 0 10px 20px -12px rgba(122,93,40,.85);
      }
      .app-topbar-light .topbar-chip:active { transform: translateY(0); }
      .app-topbar-light .topbar-chip-danger {
        background: #FCF2EF;
        border-color: #F0DCD4;
        color: #9A3B2C;
      }
      .app-topbar-light .topbar-chip-danger:hover {
        background: linear-gradient(135deg,#E9A79C,#C2564A);
        border-color: rgba(194,86,74,0.85);
        color: #FFF6F4;
      }

      /* ==========================================================
         TABLES: brass head band + soft striping, like the mockup
         ========================================================== */
      #app-screen thead th[class*="bg-stone-"],
      #app-screen thead tr[class*="bg-stone-"] th,
      #app-screen thead[class*="bg-stone-"] th {
        background-color: var(--head) !important;
        color: #6B5320 !important;
      }
      /* striping only touches cells that carry no colour of their own,
         so semantic row highlights (rose / emerald / sky) stay intact */
      #app-screen tbody tr:nth-child(even) > td:not([class*="bg-"]) {
        background-color: rgba(250,246,238,0.75);
      }

      /* date / month inputs read as clean white chips */
      #app-screen input[type="date"],
      #app-screen input[type="month"] {
        background:#FFFFFF;
        border:1px solid var(--line);
      }
      /* ========================================== */
      /* CONTACT COMBOBOX: Dropdown เลือกลูกค้า/เจ้าหนี้ (แทน datalist เดิม) */
      /* ========================================== */
      .contact-combo-wrap { position: relative; }
      .contact-combo-list {
        position: absolute;
        z-index: 40;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        max-height: 252px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid #EDE4D3;
        border-radius: 0.9rem;
        box-shadow: 0 18px 38px -14px rgba(122,93,40,0.34), 0 3px 10px rgba(20,17,12,0.06);
        padding: 6px;
      }
      .contact-combo-list.hidden { display: none; }
      .contact-combo-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 0.6rem;
        font-size: 0.87rem;
        color: #3C372C;
        cursor: pointer;
        line-height: 1.3;
      }
      .contact-combo-item .cc-dot {
        flex: none;
        width: 6px; height: 6px;
        border-radius: 999px;
        background: var(--gold-light);
        opacity: .6;
      }
      .contact-combo-item:hover,
      .contact-combo-item.active {
        background: linear-gradient(90deg, rgba(176,138,62,0.16), rgba(176,138,62,0.03));
        color: var(--gold-dark);
      }
      .contact-combo-item:hover .cc-dot,
      .contact-combo-item.active .cc-dot { opacity: 1; background: var(--gold); }
      .contact-combo-item mark {
        background: transparent;
        color: var(--gold-dark);
        font-weight: 700;
        padding: 0;
      }
      .contact-combo-empty {
        padding: 10px 12px;
        font-size: 0.8rem;
        color: #A3947A;
        font-style: italic;
      }
      .contact-combo-chevron {
        position: absolute;
        right: 0.8rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #C6B694;
        transition: transform .2s ease, color .2s ease;
      }
      .contact-combo-wrap:focus-within .contact-combo-chevron { color: var(--gold); transform: translateY(-50%) rotate(180deg); }
      /* ========================================== */
      /* PRINT MODE: ใบกำกับภาษีขาย (Sales Invoice)   */
      /* ========================================== */
      #invoice-print-view, #wht-print-view, #receipt-print-view, #journal-print-view, #journal-voucher-print-view, #expense-bill-print-view, #expense-payment-print-view, #payslip-print-view, #wht-pdf-print-view, #cndn-print-view, #sr-print-view, #quotation-print-view, #po-print-view, #abb-print-view, #abb-slip-print-view, #vat-print-view, #bulk-print-view { display: none; }

      /* ==========================================================
         📄 เอกสารพิมพ์ — ดันลายเซ็นไปอยู่ล่างสุดของหน้าเสมอ
         ==========================================================
         ปัญหาเดิม: ลายเซ็นต่อท้ายเนื้อหาเลย เอกสารสั้นลายเซ็นก็ลอยอยู่กลางหน้า
                   เอกสารยาวก็ชิดเนื้อหา ตำแหน่งไม่นิ่งสักใบ
         วิธีแก้:  ทำตัวครอบเป็น flex column สูงเต็มหน้า
                   แล้วให้บล็อกลายเซ็น margin-top:auto → ถูกดันลงล่างสุด
                   เนื้อหาสั้นหรือยาว ลายเซ็นก็อยู่ที่เดิมเสมอ */
      /* ⚠️ ต้องใช้ !important เพราะ openDocPreview() ตั้ง clone.style.display='block'
         เป็น inline style ซึ่งชนะ CSS ภายนอกเสมอ ยกเว้นเจอ !important
         ถ้าไม่ใส่ ตัวครอบจะเป็น block → margin-top:auto ไม่ทำงาน ลายเซ็นไม่ลงล่าง */
      .dpv-paper > .doc-page {
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
        min-height: calc(297mm - (12mm + 24px) * 2);
      }
      .doc-sign {
        margin-top: auto !important;   /* ทับ margin-top เดิมที่ตั้งไว้เป็นตัวเลข */
        /* ✍️ 60px = ที่ว่างขั้นต่ำเหนือเส้นลงนาม เผื่อรูปลายเซ็น (สูงสุด 52px) ที่ลอยอยู่เหนือเส้น
           รูปลายเซ็นเป็น position:absolute จึงไม่กินที่เอง ต้องกันที่ให้ตรงนี้แทน
           ไม่งั้นเอกสารที่เนื้อหายาวจนเต็มหน้า ลายเซ็นจะไปทับตารางยอดรวมด้านบน
           หมายเหตุ: บล็อกนี้ถูกดันไปก้นกระดาษด้วย margin-top:auto อยู่แล้ว
                     padding เพิ่มจึงไปกินที่ว่างด้านบน ไม่ได้ดันเนื้อหาให้ล้นหน้า */
        padding-top: 60px;
        page-break-inside: avoid;      /* ห้ามหั่นลายเซ็นคนละหน้า */
        break-inside: avoid;
      }
      /* เนื้อหาส่วนสุดท้ายก่อนลายเซ็น เว้นระยะขั้นต่ำไว้ไม่ให้ติดกันเกินไป */
      .doc-sign > div { padding-top: 4px; }

      @media print {
        /* ==========================================================
           🖨️ ทำไมไม่ใช้ position:fixed อีกแล้ว (เคยใช้ แล้วลายเซ็นไม่ลงล่างสุดเวลาพิมพ์จริง)
           ----------------------------------------------------------
           ของเดิมซ่อนทุกอย่างด้วย visibility:hidden — ซึ่ง "ยังกินที่อยู่ในหน้า"
           หน้าเอกสารเลยต้อง position:fixed เพื่อหนีออกมาจาก flow ของแอปที่ซ่อนไว้

           ปัญหา: Chrome คิดขนาดของ element ที่ position:fixed จาก viewport ของ "หน้าจอ"
                  ไม่ใช่ขนาดหน้ากระดาษ min-height ที่ตั้งเป็น mm จึงไม่ได้สูงเต็ม A4 จริง
                  → margin-top:auto ของลายเซ็นดันไปได้แค่ก้นกล่องที่สูงเท่าจอ ไม่ใช่ก้นกระดาษ
                  → แถมกล่องล้นออกนอกพื้นที่พิมพ์ ได้หน้าเปล่าตามมาอีกหน้า
                  บนจอ (โหมดพรีวิว) ไม่เจอ เพราะพรีวิวไม่ได้ใช้ position:fixed

           วิธีที่ถูก: ซ่อนพี่น้องของ body ด้วย display:none (ไม่กินที่จริงๆ)
                     แล้วให้เอกสารอยู่ใน flow ปกติ เบราว์เซอร์จะคิดความสูงจากหน้ากระดาษให้เอง
                     showPrintView() จะย้ายหน้าที่จะพิมพ์ขึ้นมาเป็นลูกตรงของ <body> ให้ก่อน
           ========================================================== */
        body > *:not(.active-print) { display: none !important; }
        /* 🧾 กระดาษขาวเสมอ — พื้นครีมของตัวแอป (body) ห้ามติดไปกับเอกสาร
           (ปกติเบราว์เซอร์ไม่พิมพ์พื้นหลังอยู่แล้ว แต่ถ้าผู้ใช้เปิด "กราฟิกพื้นหลัง" ไว้
            พอขอบ @page เป็น 0 พื้นครีมจะเต็มทั้งแผ่น แทนที่จะอยู่แค่ในกรอบเหมือนเดิม) */
        html, body { background: #fff !important; }

        #invoice-print-view.active-print, #wht-print-view.active-print, #receipt-print-view.active-print, #journal-print-view.active-print,
        #expense-bill-print-view.active-print, #expense-payment-print-view.active-print, #payslip-print-view.active-print,
        #wht-pdf-print-view.active-print, #cndn-print-view.active-print, #sr-print-view.active-print,
        #quotation-print-view.active-print, #po-print-view.active-print, #vat-print-view.active-print, #journal-voucher-print-view.active-print,
        #abb-print-view.active-print {
          display: block !important;
          box-sizing: border-box;
          width: 100%;
          margin: 0;
          padding: 24px; font-size: 13px; color: #111;
        }
        /* 📄 เอกสารหน้าเดียว: ตัวครอบสูงเต็มหน้ากระดาษ เพื่อให้ .doc-sign ถูกดันไปล่างสุด
           (รายงานหลายหน้าอย่างสมุดรายวัน / ภาษีซื้อ-ขาย / ฟอร์ม 50 ทวิ ไม่เอา ปล่อยให้ไหลตามเนื้อหา)
           ⚠️ ต้องเขียน id นำหน้าด้วย เพราะ rule ด้านบนคือ #id.active-print (1,1,0)
              ถ้าเขียนแค่ .doc-page (0,1,0) จะแพ้ specificity แล้วได้ display:block
              ต่อให้ใส่ !important ทั้งคู่ก็ยังแพ้ เพราะ !important เท่ากันแล้ววัดกันที่ specificity */
        #invoice-print-view.doc-page.active-print, #wht-print-view.doc-page.active-print, #receipt-print-view.doc-page.active-print, #expense-bill-print-view.doc-page.active-print, #expense-payment-print-view.doc-page.active-print, #payslip-print-view.doc-page.active-print, #cndn-print-view.doc-page.active-print, #sr-print-view.doc-page.active-print, #quotation-print-view.doc-page.active-print, #po-print-view.doc-page.active-print, #journal-voucher-print-view.doc-page.active-print, #abb-print-view.doc-page.active-print {
          display: flex !important;
          flex-direction: column;
          min-height: calc(297mm - 24mm);   /* 297mm หัก @page margin บน-ล่าง 12mm×2 */
        }
        /* ฟอร์มทางการ 50 ทวิ เป็นภาพเต็มหน้า ไม่ต้องมี padding ซ้อนอีก */
        #wht-pdf-print-view.active-print { padding: 0 !important; }
        /* 🧾 สลิป 80 มม. (ขายสด) — กว้างเท่าม้วนกระดาษ ความยาวกระดาษ js/53-cash-sale.js ตั้งตามเนื้อหาจริงตอนสั่งพิมพ์
           ไม่อยู่ในกลุ่มเอกสาร A4 ข้างบน (ห้ามได้ padding 24px / ความสูงเต็มหน้า A4) */
        #abb-slip-print-view.active-print {
          display: block !important; box-sizing: border-box; width: 80mm; margin: 0;
          padding: 3mm 4mm 5mm !important; color: #000;
        }

        /* 🗂️ พิมพ์หลายใบในครั้งเดียว (48-bulk-docs.js) — ตัวครอบไม่มีขอบ แต่ละใบคือ 1 หน้ากระดาษ
           ใบละแผ่นใช้กฎเดียวกับเอกสารหน้าเดียวข้างบน (flex สูงเต็มหน้า ลายเซ็นลงล่างสุด)
           ⚠️ หักความสูงไว้ 2px — ถ้าสูงพอดีเป๊ะ เศษทศนิยมตอนแปลง mm→px ทำให้ล้นไปหน้าถัดไปนิดเดียว
              แล้ว break-after ดันใบถัดไปขึ้นหน้าใหม่อีก = ได้หน้าเปล่าคั่นระหว่างทุกใบ */
        #bulk-print-view.active-print {
          display: block !important;
          width: 100%;
          margin: 0; padding: 0 !important;
        }
        #bulk-print-view.active-print > .bulk-page {
          display: flex !important;
          flex-direction: column;
          box-sizing: border-box;
          width: 100%;
          min-height: calc(297mm - 24mm - 2px);
          margin: 0;
          padding: 24px; font-size: 13px; color: #111;
          break-after: page; page-break-after: always;
        }
        #bulk-print-view.active-print > .bulk-page:last-child { break-after: auto; page-break-after: auto; }
        @page { size: A4; margin: 12mm; }
        /* 🙈 หัว/ท้ายกระดาษที่เบราว์เซอร์พิมพ์ติดมาเอง (วันเวลา · ชื่อแท็บ · URL · เลขหน้า)
           ----------------------------------------------------------
           Chrome/Edge วาดของพวกนี้ลงใน "ขอบกระดาษ" (@page margin) → ตั้งขอบเป็น 0 = ไม่มีที่ให้วาด
           แล้วย้ายระยะขอบ 12mm มาเป็น padding ของเอกสารแทน กระดาษจึงออกมาหน้าตาเท่าเดิม
             padding ใหม่ = 12mm (ขอบกระดาษเดิม) + 24px (padding เดิม)
             ความสูงเต็มหน้าเผื่อไว้ 2px กันเศษทศนิยม mm→px ล้นเป็นหน้าเปล่า (เหตุผลเดียวกับกองกระดาษข้างบน)
           box-decoration-break: clone = เอกสารยาวหลายหน้า ทุกหน้าได้ขอบบน-ล่างครบ
             (ไม่มี clone จะได้ขอบแค่หัวหน้าแรกกับท้ายหน้าสุดท้าย หน้ากลางๆ ชิดขอบกระดาษจนเครื่องพิมพ์ตัดหาย)
           เบราว์เซอร์ที่ยังไม่รองรับ clone (เช่น Safari) ข้ามทั้งก้อนนี้ → ใช้ขอบ 12mm แบบเดิม
             (ปิดหัว/ท้ายกระดาษเองได้ที่ช่อง "หัวกระดาษและท้ายกระดาษ" ในหน้าต่างพิมพ์) */
        @supports (box-decoration-break: clone) {
          @page { margin: 0; }
          #invoice-print-view.active-print, #wht-print-view.active-print, #receipt-print-view.active-print, #journal-print-view.active-print,
          #expense-bill-print-view.active-print, #expense-payment-print-view.active-print, #payslip-print-view.active-print,
          #wht-pdf-print-view.active-print, #cndn-print-view.active-print, #sr-print-view.active-print,
          #quotation-print-view.active-print, #po-print-view.active-print, #vat-print-view.active-print, #journal-voucher-print-view.active-print,
        #abb-print-view.active-print {
            padding: calc(12mm + 24px);
            box-decoration-break: clone;
          }
          #invoice-print-view.doc-page.active-print, #wht-print-view.doc-page.active-print, #receipt-print-view.doc-page.active-print, #expense-bill-print-view.doc-page.active-print, #expense-payment-print-view.doc-page.active-print, #payslip-print-view.doc-page.active-print, #cndn-print-view.doc-page.active-print, #sr-print-view.doc-page.active-print, #quotation-print-view.doc-page.active-print, #po-print-view.doc-page.active-print, #journal-voucher-print-view.doc-page.active-print, #abb-print-view.doc-page.active-print {
            min-height: calc(297mm - 2px);
          }
          /* ฟอร์ม 50 ทวิ (ภาพเต็มหน้า) padding เดิมเป็น 0 → ได้แค่ขอบกระดาษ 12mm */
          #wht-pdf-print-view.active-print { padding: 12mm !important; }
          #bulk-print-view.active-print > .bulk-page {
            min-height: calc(297mm - 2px);
            padding: calc(12mm + 24px);
            box-decoration-break: clone;
          }
        }
        /* 👁️ กันเหนียว: กรอบดูตัวอย่างต้องไม่หลุดไปติดในกระดาษ
           (ปกติโดนซ่อนอยู่แล้วเพราะพ่อแม่มันเป็นพี่น้องของ body ที่ถูก display:none) */
        #doc-preview-modal { display: none !important; }
      }

      /* ==========================================================
         👁️  DOCUMENT PREVIEW MODAL
         กดปุ่ม "ลูกตา" ทุกจุดในระบบ -> เปิดกรอบนี้ดูเอกสารก่อน
         แล้วค่อยเลือก "พิมพ์เอกสาร" หรือ "ยกเลิก"
         ========================================================== */
      #doc-preview-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
      #doc-preview-modal.dpv-open { display: block; }

      .dpv-backdrop {
        position: absolute; inset: 0;
        background:
          radial-gradient(1100px 620px at 50% -8%, rgba(122,93,40,.55), transparent 62%),
          rgba(25,23,18,.80);
        backdrop-filter: blur(7px) saturate(115%);
        -webkit-backdrop-filter: blur(7px) saturate(115%);
        animation: dpvFade .22s ease both;
      }
      .dpv-shell {
        position: absolute; inset: 0;
        display: flex; flex-direction: column;
        padding: 16px 16px 12px;
        animation: dpvRise .3s cubic-bezier(.22,1,.36,1) both;
      }
      @keyframes dpvFade { from { opacity: 0 } to { opacity: 1 } }
      @keyframes dpvRise { from { opacity: 0; transform: translateY(16px) scale(.985) } to { opacity: 1; transform: none } }
      @keyframes dpvPaperIn { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }

      /* ---------- แถบเครื่องมือด้านบน ---------- */
      .dpv-bar {
        flex: 0 0 auto;
        display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
        background: #FFFFFF;
        border: 1px solid rgba(176,138,62,.45);
        border-radius: 18px;
        padding: 10px 12px 10px 14px;
        box-shadow: 0 22px 46px -20px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.9);
      }
      .dpv-bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 260px; }
      .dpv-badge {
        flex: 0 0 auto;
        width: 42px; height: 42px; border-radius: 13px;
        display: flex; align-items: center; justify-content: center;
        background: #FBF6E9;
        color: #7A5D28;
        box-shadow: 0 8px 18px -8px rgba(122,93,40,.9), inset 0 1px 0 rgba(255,255,255,.45);
      }
      .dpv-badge svg { width: 22px; height: 22px; }
      .dpv-titles { min-width: 0; }
      .dpv-title {
        font-size: .98rem; font-weight: 800; color: #3C372C; line-height: 1.25;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .dpv-sub {
        font-size: .74rem; color: #8E836C; margin-top: 2px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }

      /* ---------- ปุ่มย่อ/ขยาย ---------- */
      .dpv-zoom {
        display: flex; align-items: center; gap: 4px;
        background: #F5EFE4; border: 1px solid #EDE4D3;
        border-radius: 999px; padding: 3px;
      }
      .dpv-zbtn {
        border: 0; background: transparent; cursor: pointer;
        min-width: 30px; height: 30px; padding: 0 9px;
        border-radius: 999px; color: #6E6553;
        font-size: .8rem; font-weight: 800; line-height: 1;
        display: inline-flex; align-items: center; justify-content: center;
        transition: background .16s ease, color .16s ease, transform .12s ease;
      }
      .dpv-zbtn:hover { background: #fff; color: var(--gold-dark); box-shadow: 0 2px 8px -3px rgba(122,93,40,.4); }
      .dpv-zbtn:active { transform: scale(.92); }
      .dpv-zlabel {
        min-width: 46px; text-align: center;
        font-size: .74rem; font-weight: 800; color: #6E6553;
        font-variant-numeric: tabular-nums;
      }

      /* ---------- ปุ่มหลัก ยกเลิก / พิมพ์ ---------- */
      .dpv-bar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
      .dpv-btn {
        border: 0; cursor: pointer;
        display: inline-flex; align-items: center; gap: 7px;
        padding: 10px 18px; border-radius: 13px;
        font-size: .86rem; font-weight: 800; letter-spacing: -.01em;
        transition: transform .14s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
        white-space: nowrap;
      }
      .dpv-btn svg { width: 17px; height: 17px; }
      .dpv-btn:active { transform: scale(.96); }
      .dpv-btn-ghost {
        background: transparent; color: #8E836C;
        box-shadow: inset 0 0 0 1.5px #EDE4D3;
      }
      .dpv-btn-ghost:hover { background: #F5EFE4; color: #544E43; box-shadow: inset 0 0 0 1.5px #DCCFB6; }
      .dpv-btn-print {
        background: linear-gradient(180deg, #F7EDD8 0%, #EADCBB 100%);
        color: #5E4720;
        font-weight: 900;
        box-shadow: inset 0 0 0 1.5px #B08A3E, inset 0 1px 0 rgba(255,255,255,.85), 0 10px 24px -14px rgba(94,71,32,.8);
      }
      .dpv-btn-print:hover { background: linear-gradient(180deg,#F2E4C7,#E2D0A6); color:#4A3818; box-shadow: inset 0 0 0 1.5px #8C6C25, inset 0 1px 0 rgba(255,255,255,.9), 0 12px 26px -14px rgba(94,71,32,.9); }

      /* ---------- เวทีกระดาษ ---------- */
      .dpv-stage {
        flex: 1 1 auto; overflow: auto;
        margin-top: 14px; padding: 4px 0 22px;
      }
      .dpv-stage::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }
      .dpv-stage::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45); }
      .dpv-paper-wrap {
        display: flex;
        justify-content: center;
        align-items: flex-start;   /* กันไม่ให้ flex ยืดกระดาษตามความสูงกล่อง */
        margin: 0 auto;
      }
      .dpv-paper {
        width: 210mm; min-height: 297mm; box-sizing: border-box;
        background: #fff; color: #111;
        font-size: 13px;
        padding: calc(12mm + 24px);
        border-radius: 4px;
        box-shadow: 0 34px 70px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.07);
        transform-origin: top center;
        transform: scale(var(--dpv-scale, 1));
        animation: dpvPaperIn .34s cubic-bezier(.22,1,.36,1) both;
      }

      /* ---------- โหมดไฟล์ PDF (หนังสือรับรองหัก ณ ที่จ่ายแบบทางการ) ---------- */
      /* วาดหน้า PDF เป็น canvas ลงบนกระดาษใบเดียวกัน ระยะขอบเท่ากับตอนพิมพ์จริง */
      .dpv-paper.dpv-paper-pdf { padding: 12mm; }
      .dpv-paper canvas { display: block; width: 100%; height: auto; }
      .dpv-paper canvas + canvas { margin-top: 10mm; }

      /* ---------- โหมดหลายใบ (48-bulk-docs.js) — กองกระดาษ แผ่นละ 1 ใบ ---------- */
      /* ตัว .dpv-paper กลายเป็นแค่ที่วางกอง (โปร่งใส ไม่มีขอบ) ส่วนหน้าตากระดาษย้ายไปอยู่ที่แต่ละแผ่น
         ค่าขอบ/เงา/ขนาดตัวอักษรต้องตรงกับ .dpv-paper ข้างบน ไม่งั้นพรีวิวหลายใบจะหน้าตาไม่เหมือนทีละใบ */
      .dpv-paper.dpv-paper-bulk {
        background: transparent; box-shadow: none; border-radius: 0; padding: 0;
      }
      .dpv-paper-bulk .bulk-page {
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
        width: 210mm; min-height: 297mm;
        padding: calc(12mm + 24px);
        background: #fff; color: #111; font-size: 13px;
        border-radius: 4px;
        box-shadow: 0 34px 70px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.07);
      }
      .dpv-paper-bulk .bulk-page + .bulk-page { margin-top: 10mm; }
      .dpv-loading {
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 14px; min-height: 240mm; text-align: center;
        color: #8E836C; font-size: .9rem; font-weight: 700;
      }
      .dpv-spinner {
        width: 38px; height: 38px; border-radius: 50%;
        border: 3px solid #F5EAD2; border-top-color: var(--gold);
        animation: dpvSpin .8s linear infinite;
      }
      @keyframes dpvSpin { to { transform: rotate(360deg); } }
      .dpv-loading-sub { font-size: .76rem; font-weight: 500; color: #B9AC92; max-width: 340px; line-height: 1.6; }

      /* ---------- แถบล่าง ---------- */
      .dpv-foot {
        flex: 0 0 auto;
        display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
        padding-top: 8px;
        font-size: .72rem; color: rgba(255,255,255,.62);
      }
      .dpv-kbd {
        display: inline-block; padding: 1px 6px; margin: 0 2px;
        border-radius: 6px; background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.22);
        font-weight: 700; font-size: .68rem; color: rgba(255,255,255,.85);
      }
      .dpv-link {
        color: rgba(255,255,255,.86); text-decoration: none; font-weight: 700;
        padding: 4px 12px; border-radius: 999px;
        border: 1px solid rgba(255,255,255,.24);
        transition: background .18s ease, color .18s ease;
      }
      .dpv-link:hover { background: rgba(255,255,255,.16); color: #fff; }

      /* ---------- ปุ่มลูกตาในตาราง ---------- */
      .btn-eye {
        display: inline-flex; align-items: center; justify-content: center;
        transition: transform .14s ease, background .18s ease, color .18s ease;
      }
      .btn-eye:hover { transform: translateY(-1px) scale(1.06); }
      .btn-eye:active { transform: scale(.92); }
      .btn-eye svg { width: 18px; height: 18px; }

      /* ---------- มือถือ / จอแคบ ---------- */
      @media (max-width: 640px) {
        .dpv-shell { padding: 10px 10px 8px; }
        .dpv-bar { border-radius: 15px; padding: 9px 10px; gap: 9px; }
        .dpv-badge { width: 36px; height: 36px; border-radius: 11px; }
        .dpv-badge svg { width: 19px; height: 19px; }
        .dpv-title { font-size: .86rem; }
        .dpv-sub { font-size: .68rem; }
        .dpv-bar-right { width: 100%; margin-left: 0; }
        .dpv-btn { flex: 1 1 0; justify-content: center; padding: 11px 12px; font-size: .82rem; }
        .dpv-zoom { order: 3; }
      }

      /* ==========================================================
         🏳️ HERO BANNER หัวแท็บ — การ์ดขาวไล่เป็นครีม เล่นกับสีพื้นเว็บ
         ========================================================== */
      .hero-card {
        position: relative;
        overflow: hidden;
        border-radius: 1.25rem;
        background: #FFFFFF;              /* พื้นขาวเรียบ ไม่ไล่สี */
        border: 1px solid var(--line);
        box-shadow: 0 1px 2px rgba(60,55,44,.05);
      }
      /* เส้นทองสีเดียวด้านซ้าย — บางกว่าเดิม ให้เป็นแค่ตัวคั่นสายตา ไม่ใช่ของตกแต่ง */
      .hero-card::before {
        content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
        background: var(--gold);
      }
      .hero-card > * { position: relative; z-index: 1; }
      .hero-eyebrow { color: var(--gold); letter-spacing:.16em; }
      .hero-title   { color: var(--brand-ink); }
      .hero-sub     { color: #8E836C; }
      .hero-label   { color: #A3947A; }
      .hero-input {
        background:#FFFFFF; border:1px solid var(--line); color:#3C372C;
        border-radius:.75rem;
      }
      .hero-input:focus { outline:none; box-shadow:0 0 0 3px rgba(176,138,62,.22); }
      .hero-btn {
        background:#FBF6E9; border:1px solid #E9DDC2; color:#7A5D28;
        transition: all .18s ease;
      }
      .hero-btn:hover { background:#F3E7CD; border-color:var(--gold); }
      .hero-badge {
        background:#FBF6E9; border:1px solid #E9DDC2; color:#7A5D28;
      }

      /* ==========================================================
         🧾 แถบยอดรวมท้ายงบ (P&L / BS) — ครีมกลืนกับหัวรายงาน
         ========================================================== */
      .rpt-total {
        background: #FBF6E9;
        border: 1px solid rgba(176,138,62,.28);
        color: #7A5D28;
        box-shadow: inset 0 1px 0 #fff;
      }

      /* ==========================================================
         MODERN TOGGLE SWITCH  (ใช้แทน checkbox ทั้งระบบ)
         โครงสร้าง HTML:
           <label class="sw sw-amber">
             <input type="checkbox" id="xxx" onchange="...">
             <span class="sw-track"><span class="sw-thumb"></span></span>
             <span>ข้อความกำกับ</span>
           </label>
         หมายเหตุ: input ตัวจริงยังอยู่ครบ (id / onchange / .checked ใช้ได้เหมือนเดิม)
         ========================================================== */
      .sw {
        position: relative;
        --sw-w: 48px;
        --sw-h: 27px;
        --sw-pad: 3px;
        --sw-on-1: var(--gold-light);
        --sw-on-2: var(--gold-dark);
        --sw-glow: rgba(176,138,62,.26);
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }
      /* ป้ายข้อความยาวหลายบรรทัด ให้สวิตช์ชิดบน */
      .sw.sw-top { align-items: flex-start; }
      .sw.sw-top > .sw-track { margin-top: 1px; }

      /* ซ่อน checkbox จริงไว้ แต่ยังทำงาน/โฟกัสได้ปกติ */
      .sw > input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0; height: 0;
        margin: 0; padding: 0;
        pointer-events: none;
      }

      /* ---------- ราง ---------- */
      .sw-track {
        position: relative;
        flex: 0 0 auto;
        width: var(--sw-w);
        height: var(--sw-h);
        border-radius: 999px;
        background: linear-gradient(180deg, #EFE8DA 0%, #E2D9C6 100%);
        box-shadow:
          inset 0 2px 4px rgba(20,17,12,.16),
          inset 0 -1px 0 rgba(255,255,255,.7),
          0 0 0 0 var(--sw-glow);
        transition:
          background .35s cubic-bezier(.4,0,.2,1),
          box-shadow .35s cubic-bezier(.4,0,.2,1);
      }
      /* แสงสะท้อนแบบกระจก โผล่ตอนเปิด */
      .sw-track::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: linear-gradient(118deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 42%, rgba(255,255,255,0) 62%);
        opacity: 0;
        transition: opacity .4s ease;
        pointer-events: none;
      }
      .sw:hover > .sw-track {
        box-shadow:
          inset 0 2px 4px rgba(20,17,12,.16),
          inset 0 -1px 0 rgba(255,255,255,.7),
          0 0 0 5px rgba(20,17,12,.055);
      }

      /* ---------- ลูกบอล ---------- */
      .sw-thumb {
        position: absolute;
        top: var(--sw-pad);
        left: var(--sw-pad);
        width: calc(var(--sw-h) - var(--sw-pad) * 2);
        height: calc(var(--sw-h) - var(--sw-pad) * 2);
        border-radius: 999px;
        background: linear-gradient(180deg, #ffffff 0%, #f3f0e8 100%);
        box-shadow:
          0 2px 6px rgba(20,17,12,.30),
          0 1px 1px rgba(20,17,12,.10);
        transition:
          transform .38s cubic-bezier(.34,1.42,.5,1),
          width .2s cubic-bezier(.4,0,.2,1);
      }
      /* เครื่องหมายถูกจิ๋วในลูกบอล */
      .sw-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 9px; height: 5px;
        border-left: 2.2px solid var(--sw-on-2);
        border-bottom: 2.2px solid var(--sw-on-2);
        border-radius: 1px;
        transform: translateY(-1px) rotate(-45deg) scale(.15);
        opacity: 0;
        transition:
          transform .34s cubic-bezier(.34,1.56,.64,1) .07s,
          opacity .18s ease .07s;
      }

      /* ---------- สถานะ: เปิด ---------- */
      .sw > input:checked ~ .sw-track {
        background: linear-gradient(135deg, var(--sw-on-1) 0%, var(--sw-on-2) 100%);
        box-shadow:
          inset 0 1px 2px rgba(0,0,0,.16),
          inset 0 -1px 0 rgba(255,255,255,.22),
          0 0 0 5px var(--sw-glow);
      }
      .sw > input:checked ~ .sw-track::before { opacity: 1; }
      .sw > input:checked ~ .sw-track .sw-thumb {
        transform: translateX(calc(var(--sw-w) - var(--sw-h)));
      }
      .sw > input:checked ~ .sw-track .sw-thumb::after {
        opacity: 1;
        transform: translateY(-1px) rotate(-45deg) scale(1);
      }

      /* ---------- กดค้าง: ลูกบอลยืดแบบ iOS ---------- */
      .sw:active > .sw-track .sw-thumb {
        width: calc(var(--sw-h) - var(--sw-pad) * 2 + 7px);
      }
      .sw:active > input:checked ~ .sw-track .sw-thumb {
        transform: translateX(calc(var(--sw-w) - var(--sw-h) - 7px));
      }

      /* ---------- โฟกัสด้วยคีย์บอร์ด ---------- */
      .sw > input:focus-visible ~ .sw-track {
        outline: 2px solid var(--sw-on-2);
        outline-offset: 3px;
      }

      /* ---------- ปิดใช้งาน ---------- */
      .sw > input:disabled ~ .sw-track { opacity: .45; }
      .sw:has(input:disabled) { cursor: not-allowed; opacity: .65; }

      /* ---------- ขนาดเล็ก (ใช้ในตาราง) ---------- */
      .sw.sw-sm {
        --sw-w: 38px;
        --sw-h: 21px;
        --sw-pad: 2.5px;
        gap: .4rem;
      }
      .sw.sw-sm .sw-thumb::after {
        width: 7px; height: 4px;
        border-left-width: 2px; border-bottom-width: 2px;
      }

      /* ---------- ชุดสีตามโซนงาน ---------- */
      /* ---------- สีสวิตช์: ใช้ชุดทองเหลืองชุดเดียวทั้งระบบ ----------
         ชื่อคลาสเดิม (sw-amber / sw-cyan / sw-sky / sw-emerald / sw-rose)
         ยังใช้ได้ทุกที่ ไม่ต้องแก้ markup แต่สีออกมาเหมือนกันหมด */
      .sw,
      .sw-gold, .sw-amber, .sw-cyan, .sw-sky, .sw-emerald, .sw-rose {
        --sw-on-1: var(--gold-light);
        --sw-on-2: var(--gold-dark);
        --sw-glow: rgba(176,138,62,.28);
      }

      /* ---------- เคารพการตั้งค่าลดการเคลื่อนไหวของเครื่อง ---------- */
      @media (prefers-reduced-motion: reduce) {
        .sw-track, .sw-thumb, .sw-thumb::after, .sw-track::before { transition-duration: .01ms !important; }
      }

      /* ==========================================================
         📐 ตารางบรรทัดเอกสาร (ใบแจ้งหนี้ / ใบรับสินค้า / บิลค่าใช้จ่าย)
         ปัญหาเดิม: ใช้ w-1/4 + w-1/2 + w-1/6*3 รวมกันได้ 125% เบราว์เซอร์
         เลยบีบคอลัมน์ "ราคา/หน่วย" จนพิมพ์ตัวเลขแล้วมองไม่เห็น
         แก้: บังคับ table-layout:fixed แล้วคุมความกว้างผ่าน <colgroup>
         ========================================================== */
      .doc-lines-table { table-layout: fixed; width: 100%; }
      .doc-lines-table th,
      .doc-lines-table td { overflow: hidden; }
      .doc-lines-table input,
      .doc-lines-table select { min-width: 0; }

      /* ใบแจ้งหนี้ขาย — โหมดธุรกิจบริการ (ไม่มีคอลัมน์สินค้า) */
      #inv-lines-table .lc-prod  { width: 0; }
      #inv-lines-table .lc-desc  { width: 42%; }
      #inv-lines-table .lc-qty   { width: 13%; }
      #inv-lines-table .lc-price { width: 19%; }
      #inv-lines-table .lc-amt   { width: 19%; }
      #inv-lines-table .lc-del   { width: 46px; }
      /* ใบแจ้งหนี้ขาย — โหมดซื้อมาขายไป (โผล่คอลัมน์สินค้าในสต๊อก) */
      #inv-lines-table.has-product .lc-prod  { width: 22%; }
      #inv-lines-table.has-product .lc-desc  { width: 22%; }
      #inv-lines-table.has-product .lc-qty   { width: 12%; }
      #inv-lines-table.has-product .lc-price { width: 19%; }
      #inv-lines-table.has-product .lc-amt   { width: 19%; }

      /* ใบรับสินค้าเข้า */
      #gr-lines-table .lc-prod { width: 36%; }
      #gr-lines-table .lc-qty  { width: 16%; }
      #gr-lines-table .lc-cost { width: 21%; }
      #gr-lines-table .lc-amt  { width: 21%; }
      #gr-lines-table .lc-del  { width: 46px; }

      /* บิลค่าใช้จ่าย */
      #exp-lines-table .lc-desc { width: 26%; }
      #exp-lines-table .lc-acc  { width: 24%; }
      #exp-lines-table .lc-vat  { width: 66px; }
      #exp-lines-table .lc-amt  { width: 18%; }
      #exp-lines-table .lc-tot  { width: 18%; }
      #exp-lines-table .lc-del  { width: 44px; }

      /* ---------- ช่องกรอกตัวเลขแบบสะอาด: ตัดลูกศร spinner ทิ้ง ----------
         spinner ของ input[type=number] กินความกว้างไปเกือบ 20px ต่อช่อง
         พอคอลัมน์แคบอยู่แล้วเลยเหลือที่โชว์ตัวเลขแค่ 2-3 หลัก */
      input.num-clean::-webkit-outer-spin-button,
      input.num-clean::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
      input.num-clean { -moz-appearance: textfield; appearance: textfield;
        font-variant-numeric: tabular-nums; letter-spacing: .01em; }

      /* ==========================================================
         📦 หน้าสต๊อกสินค้า — ปุ่มสลับหัวข้อย่อย + ป้ายสถานะ
         ========================================================== */
      .inv-pill {
        display: inline-flex; align-items: center; gap: .45rem;
        padding: .6rem 1.1rem; border-radius: 999px;
        font-weight: 800; font-size: .85rem; white-space: nowrap;
        color: #6E6553; background: transparent;
        border: 1px solid transparent;
        transition: all .22s cubic-bezier(.4,0,.2,1);
        cursor: pointer;
      }
      .inv-pill:hover { background: #F6EEDD; color: var(--gold-dark); }
      .inv-pill.active {
        background: linear-gradient(180deg, #F7EDD8 0%, #EADCBB 100%);
        color: #5E4720;
        border: 1.5px solid #B08A3E;
        font-weight: 900;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 18px -14px rgba(94,71,32,.7);
      }
      .inv-pill .inv-pill-count {
        font-size: .68rem; font-weight: 900; line-height: 1;
        padding: .2rem .45rem; border-radius: 999px;
        background: rgba(0,0,0,.07);
      }
      .inv-pill.active .inv-pill-count { background: rgba(255,255,255,.25); }

      .stk-badge {
        display: inline-flex; align-items: center; gap: .3rem;
        padding: .2rem .6rem; border-radius: 999px;
        font-size: .68rem; font-weight: 900; white-space: nowrap;
        border: 1px solid transparent;
      }
      .stk-ok    { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
      .stk-low   { background:#fffbeb; color:#b45309; border-color:#fde68a; }
      .stk-out   { background:#f5f5f4; color:#78716c; border-color:#e7e5e4; }
      .stk-neg   { background:#fff1f2; color:#be123c; border-color:#fecdd3; }
      .stk-off   { background:#f8fafc; color:#94a3b8; border-color:#e2e8f0; }

      /* ปุ่มจัดการในตาราง — มีทั้งไอคอนและข้อความ ไม่ต้องเดาว่าปุ่มไหนทำอะไร */
      .row-act {
        display: inline-flex; align-items: center; gap: .3rem;
        padding: .35rem .6rem; border-radius: .6rem;
        font-size: .72rem; font-weight: 800; white-space: nowrap;
        background: #FBF8F2; color: #6E6553;
        border: 1px solid var(--line);
        transition: all .18s ease;
      }
      .row-act:hover { transform: translateY(-1px); }
      .row-act-edit:hover { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
      .row-act-card:hover { background:#f0f9ff; color:#0369a1; border-color:#bae6fd; }
      .row-act-lock:hover { background:#fffbeb; color:#b45309; border-color:#fde68a; }
      .row-act-del:hover  { background:#fff1f2; color:#be123c; border-color:#fecdd3; }

      /* ==========================================================
         📱 ตารางบนมือถือ — แปลงแต่ละแถวเป็นการ์ดแทนการเลื่อนซ้ายขวา
         ใช้กับตารางที่ใส่ class="resp-table" และ td มี data-label
         ========================================================== */
      @media (max-width: 640px) {
        .resp-table { min-width: 0 !important; }
        .resp-table thead { display: none; }
        .resp-table, .resp-table tbody, .resp-table tr, .resp-table td { display: block; width: 100%; }
        .resp-table tbody { border: 0; }
        .resp-table tr {
          border: 1px solid var(--line); border-radius: 1rem;
          margin-bottom: .7rem; background: #fff; overflow: hidden;
        }
        .resp-table td {
          display: flex; align-items: center; justify-content: space-between; gap: 1rem;
          padding: .5rem 1rem !important; text-align: right !important;
          border: 0; border-bottom: 1px solid #f5f5f4;
        }
        .resp-table td:last-child { border-bottom: 0; }
        .resp-table td::before {
          content: attr(data-label); flex: 0 0 auto;
          font-size: .68rem; font-weight: 800; letter-spacing: .04em;
          color: #a8a29e; text-transform: uppercase; text-align: left;
        }
        /* เซลล์หัวการ์ด (ชื่อสินค้า) กับแถวปุ่ม ไม่ต้องมีป้ายกำกับ */
        .resp-table td.rt-head, .resp-table td.rt-full {
          display: block; text-align: left !important; background: #fafaf9;
        }
        .resp-table td.rt-head::before, .resp-table td.rt-full::before { content: none; }
        .resp-table td[colspan] { display: block; text-align: center !important; }
        .resp-table td[colspan]::before { content: none; }
      }

      /* การ์ดขั้นตอนเริ่มต้นใช้งาน */
      .inv-step {
        position: relative; padding: 1.15rem 1.15rem 1.15rem 3.4rem;
        border-radius: 1rem; background: #fff;
        border: 1px solid var(--line);
      }
      .inv-step::before {
        content: attr(data-step);
        position: absolute; left: 1.05rem; top: 1.1rem;
        width: 1.7rem; height: 1.7rem; border-radius: 999px;
        display: flex; align-items: center; justify-content: center;
        font-size: .8rem; font-weight: 900; color: #3B2C0C;
        background: linear-gradient(135deg, #E7D3A2 0%, #CBA95F 45%, #A8862F 100%);
      }
      /* ==========================================================
         🪟 MODAL: ให้เลื่อนขึ้นไปบนสุดได้เสมอ (ใช้ร่วมกันทุกหน้าต่างในระบบ)
         ----------------------------------------------------------
         ปัญหาเดิม: overlay ใช้ flex + items-center เพื่อจัดกล่องไว้กึ่งกลางแนวตั้ง
         พอเนื้อหาในฟอร์มสูงเกินจอ เบราว์เซอร์จะดันกล่องล้นออกไป "ทั้งบนและล่าง"
         เท่าๆ กัน แต่ scroll ได้เฉพาะฝั่งล่าง ส่วนที่ล้นด้านบน (หัวข้อ/ปุ่มปิด)
         จึงถูกตัดหายและเลื่อนขึ้นไปหาไม่ได้เลย — เป็นข้อจำกัดของ flexbox โดยตรง

         วิธีแก้: เปลี่ยนไปให้กล่องข้างในใช้ margin แนวตั้งเป็น auto แทน
           • จอสูงพอ   → auto margin เฉลี่ยบน-ล่างเท่ากัน = อยู่กึ่งกลางเหมือนเดิมเป๊ะ
           • เนื้อหาล้น → auto margin กลายเป็น 0 เอง = เริ่มจากขอบบน เลื่อนได้สุดทั้งสองทาง
         (ตามสเปก flexbox: auto margin จะกินพื้นที่ว่างก่อน align-items เสมอ
          และเมื่อพื้นที่ว่างติดลบ auto margin จะถูกคิดเป็น 0)

         หมายเหตุ: เขียนเป็นกฎกลางไว้ที่นี่ที่เดียว modal ที่สร้างใหม่ในอนาคต
         ถ้าใช้โครง "fixed inset-0 flex items-center justify-center p-4" แบบเดิม
         จะได้พฤติกรรมนี้อัตโนมัติ ไม่ต้องไปแก้ทีละหน้าต่าง
         ========================================================== */
      .fixed.inset-0.flex.items-center {
        overflow-y: auto;                 /* เผื่อหน้าต่างที่ยังไม่ได้ใส่ overflow มาแต่แรก */
        overscroll-behavior: contain;     /* กันการ scroll ทะลุไปเลื่อนหน้าเบื้องหลัง */
      }
      .fixed.inset-0.flex.items-center > * {
        margin-top: auto !important;
        margin-bottom: auto !important;
      }
      /* ระยะขอบบน-ล่างตอนเนื้อหาล้นจอ ได้จาก p-4 ของตัว overlay เองอยู่แล้ว
         (ห้ามใช้ ::before/::after เป็นตัวคั่น เพราะ overlay เป็น flex แนวนอน
          pseudo-element จะกลายเป็นแถบซ้าย-ขวา ไม่ใช่บน-ล่าง) */


      /* ======================================================================
         🔔 ระบบแจ้งเตือน (Toast) — แทน uiAlert() ของเบราว์เซอร์
         uiAlert() บล็อกทั้งหน้าจอ ต้องกดปิดทุกครั้ง และหน้าตาเป็นของ OS
         ไม่ใช่ของแบรนด์เรา คนคีย์เอกสารวันละ 50 ใบต้องกดปิด 50 ครั้งฟรีๆ
         ====================================================================== */
      #ui-toast-wrap {
        position: fixed; z-index: 9999; right: 1rem; bottom: 1rem;
        display: flex; flex-direction: column-reverse; gap: .6rem;
        max-width: min(26rem, calc(100vw - 2rem)); pointer-events: none;
      }
      @media (max-width: 640px) {
        #ui-toast-wrap { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
      }
      .ui-toast {
        pointer-events: auto; position: relative; overflow: hidden;
        display: flex; gap: .7rem; align-items: flex-start;
        background: #fff; border: 1px solid #E7E5E4; border-left-width: 4px;
        border-radius: 1rem; padding: .85rem 1rem .85rem .9rem;
        box-shadow: 0 10px 30px -8px rgba(59,44,12,.28), 0 2px 6px rgba(0,0,0,.05);
        animation: uiToastIn .28s cubic-bezier(.2,.9,.3,1.3);
        font-family: inherit;
      }
      .ui-toast.leaving { animation: uiToastOut .22s ease-in forwards; }
      @keyframes uiToastIn  { from { opacity:0; transform: translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
      @keyframes uiToastOut { to   { opacity:0; transform: translateX(28px) scale(.97); } }
      .ui-toast-success { border-left-color:#059669; }
      .ui-toast-error   { border-left-color:#E11D48; }
      .ui-toast-warn    { border-left-color:#D97706; }
      .ui-toast-info    { border-left-color:#0891B2; }
      .ui-toast-ic.success { color:#059669; } .ui-toast-ic.error { color:#E11D48; }
      .ui-toast-ic.warn    { color:#D97706; } .ui-toast-ic.info  { color:#0891B2; }
      .ui-toast-body   { flex:1; min-width:0; }
      .ui-toast-title  { font-weight:800; color:#3B2C0C; font-size:.875rem; line-height:1.35; }
      .ui-toast-msg    { color:#57534E; font-size:.8rem; line-height:1.5; margin-top:.15rem; white-space:pre-line; word-break:break-word; }
      .ui-toast-detail { margin-top:.4rem; font-size:.7rem; color:#A8A29E; word-break:break-all; display:none; }
      .ui-toast-detail.show { display:block; }
      .ui-toast-more   { margin-top:.35rem; font-size:.7rem; font-weight:700; color:#A8A29E; text-decoration:underline; cursor:pointer; }
      .ui-toast-act    { margin-top:.55rem; font-size:.75rem; font-weight:800; padding:.3rem .8rem; border-radius:.6rem;
                         border:1px solid #E7E5E4; background:#FAFAF9; color:#3B2C0C; cursor:pointer; }
      .ui-toast-act:hover { background:#F5F5F4; }
      .ui-toast-x      { color:#D6D3D1; font-size:1.15rem; line-height:1; cursor:pointer; padding:0 .1rem; }
      .ui-toast-x:hover{ color:#78716C; }
      .ui-toast-bar    { position:absolute; left:0; bottom:0; height:2px; background:currentColor; opacity:.35; width:100%;
                         transform-origin:left; animation: uiToastBar linear forwards; }
      @keyframes uiToastBar { to { transform: scaleX(0); } }

      /* 🚦 ไฮไลต์ช่องกรอกที่ผิด — เดิมเด้ง alert อย่างเดียว ผู้ใช้หาไม่เจอว่าช่องไหน */
      .ui-invalid {
        border-color:#F43F5E !important; background:#FFF1F2 !important;
        box-shadow: 0 0 0 3px rgba(244,63,94,.12) !important;
        animation: uiShake .32s;
      }
      @keyframes uiShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
      /* ช่องเลือกแบบพิมพ์ค้นหาได้ */
      /* แถบแบ่งหน้า */
      .ui-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
      .ui-pager-info { font-size: 11px; font-weight: 700; color: #A8A29E; }
      .ui-pager-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
      .ui-pg { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px; border: 1px solid #E7E5E4; background: #fff;
               font-size: 12px; font-weight: 800; color: #57534E; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; justify-content: center; }
      .ui-pg:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-dark); }
      .ui-pg:disabled { opacity: .35; cursor: not-allowed; }
      .ui-pg.on { background: var(--gold); border-color: var(--gold); color: #3B2C0C; }
      .ui-pg-dots { padding: 0 4px; font-weight: 800; color: #D6D3D1; }
      .ui-pg-size { height: 32px; border: 1px solid #E7E5E4; border-radius: 9px; background: #fff; font-size: 12px; font-weight: 700; color: #57534E; padding: 0 6px; }

      .ui-ss { position: relative; }
      .ui-ss-native { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; padding: 0 !important; border: 0 !important; pointer-events: none !important; }
      .ui-ss-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #A8A29E; display: flex; }
      /* ลอยอยู่ที่ระดับ body ด้วย position:fixed เพื่อไม่ให้โดนกรอบตาราง/โมดัลที่มี overflow ตัดทิ้ง */
      .ui-ss-list { position: fixed; z-index: 9999; max-height: 260px; overflow-y: auto;
                    background: #fff; border: 1px solid #E7E5E4; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 4px; }
      .ui-ss-opt { padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #44403C; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .ui-ss-opt:hover, .ui-ss-opt.on { background: #F6EEDD; color: var(--gold-dark); }
      .ui-ss-opt.sel { font-weight: 800; }
      .ui-ss-none { padding: 14px 10px; text-align: center; font-size: 12px; font-weight: 700; color: #A8A29E; }
      .ui-ss-hit { background: #FDE68A; border-radius: 3px; }
      .ui-fold-head { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; user-select:none; }
      .ui-fold-head:hover { color: var(--gold-dark); }
      .ui-fold-meta { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:0; text-transform:none; }
      .ui-fold-badge { display:flex; align-items:center; gap:4px; color:#A8A29E; }
      .ui-fold-dot { width:6px; height:6px; border-radius:9999px; background:#E11D48; display:inline-block; }
      .ui-fold-ic { color:#A8A29E; display:inline-flex; }
      [data-fold][data-folded="1"] { padding-bottom: 2px; }
      .ui-section-invalid { outline: 2px solid #E11D48; outline-offset: 3px; border-radius: 12px; background: #FFF1F2; }
      .ui-field-msg { color:#E11D48; font-size:.7rem; font-weight:700; margin-top:.25rem; display:flex; gap:.25rem; align-items:center; }

      /* 🔍 ช่องค้นหาเมนู */
      #nav-search-box { position:relative; margin-bottom:.5rem; }
      #nav-search-box input {
        width:100%; padding:.5rem .75rem .5rem 2rem; border-radius:.75rem; font-size:.8rem; font-weight:600;
        border:1px solid rgba(196,164,90,.28); background:rgba(255,255,255,.7); color:#3B2C0C; outline:none;
      }
      #nav-search-box input:focus { border-color:rgba(196,164,90,.7); background:#fff; }
      #nav-search-box .ic { position:absolute; left:.6rem; top:50%; transform:translateY(-50%); color:#B7AA8C; pointer-events:none; }
      .nav-hit-none { display:none !important; }
      #nav-search-empty { font-size:.75rem; color:#A8A29E; font-weight:600; padding:.6rem .5rem; display:none; }

      /* 📖 ปุ่มคำอธิบายศัพท์บัญชี */
      .ui-help-dot {
        display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:.25rem;
        border-radius:9999px; background:#EFE7D4; color:#8A7A55; font-size:10px; font-weight:900; cursor:pointer;
        vertical-align:middle; border:1px solid rgba(196,164,90,.35); color:#8A7A55; line-height:1;
      }
      .ui-help-dot:hover { background:#E4D8BA; }

      /* ▸/▾ ของ <details> — เราวาดลูกศรเองในข้อความแล้ว จึงต้องปิดสามเหลี่ยมของเบราว์เซอร์
         ไม่งั้นจะได้ลูกศรซ้อนกันสองอัน (Chrome ใช้ list-style ได้ แต่ Safari ต้องใช้ -webkit-) */
      summary.list-none { list-style: none; }
      summary.list-none::-webkit-details-marker { display: none; }
      summary.list-none::marker { content: ""; }

      /* ##########################################################################
         📱 RESPONSIVE — มือถือ (<640px) · iPad (640–1023px)
         ##########################################################################
         กติกาของบล็อกนี้ทั้งหมด: **ห้ามมีกฎไหนมีผลที่ ≥1024px**
         ทุกกฎอยู่ใน @media ที่มี max-width ปิดหัวไว้เสมอ
         จอเดสก์ท็อปจึงไม่ได้รับ CSS แม้แต่บรรทัดเดียวจากส่วนนี้

         ช่วงจอที่ใช้ทั้งไฟล์ (ตรงกับ breakpoint ของ Tailwind เป๊ะ)
           มือถือ   max-width: 639.98px
           iPad     min-width: 640px  และ  max-width: 1023.98px
           ลิ้นชัก   max-width: 1023.98px   (มือถือ + iPad ใช้เมนูแบบเดียวกัน)
         ########################################################################## */

      /* ==========================================================
         0️⃣ ขอบจอที่โดนบัง — รอยบากบน / แถบขีดล่างของ iPhone
         ----------------------------------------------------------
         env() จะมีค่าจริงก็ต่อเมื่อ <meta viewport> มี viewport-fit=cover
         (ใส่ไว้แล้วใน 00-head.html) ถ้าไม่มีจะได้ 0px เสมอ ซึ่งก็ไม่พัง
         ========================================================== */
      :root {
        --safe-b: env(safe-area-inset-bottom, 0px);
        --safe-l: env(safe-area-inset-left, 0px);
        --safe-r: env(safe-area-inset-right, 0px);
      }
      @media (max-width: 1023.98px) {
        /* แนวนอนบน iPhone: รอยบากกินขอบซ้าย/ขวา แถบบนต้องถอยให้พ้น */
        .app-topbar-light {
          padding-left: calc(1rem + var(--safe-l));
          padding-right: calc(1rem + var(--safe-r));
        }
      }
      @media (max-width: 639.98px) {
        /* แจ้งเตือนลอยล่าง — เดิม bottom:.75rem ตรงกับตำแหน่งแถบขีดพอดี */
        #ui-toast-wrap { bottom: calc(.75rem + var(--safe-b)); }
      }

      /* ==========================================================
         1️⃣ ลิ้นชักเมนู (<1024px)
         ----------------------------------------------------------
         ของเดิม: <aside> เป็น hidden lg:flex + มีแถบแท็บมือถืออีกชุด
                  แถบนั้นเป็นลูกของ .flex.items-start ตัวเดียวกับ <main>
                  ⇒ ต่ำกว่า 1024px มันไปยืน "ข้าง" เนื้อหา กินไป 316px
                    เหลือให้ <main> แค่ 32px (วัดจริงที่ 390px)
                  ⇒ แถมมีเมนูแค่ 15 จาก 26 ปลายทาง อีก 11 แท็บเข้าไม่ถึงเลย
         ตอนนี้: ใช้ <aside> ตัวเดิมนั่นแหละ แต่ต่ำกว่า 1024px ทำเป็นลิ้นชัก
                 position:fixed ⇒ หลุดออกจาก flex row ⇒ <main> ได้เต็มความกว้าง
                 และได้เมนูครบ 26 ปลายทางเท่าเดสก์ท็อป
         ========================================================== */
      @media (max-width: 1023.98px) {
        .nav-drawer {
          position: fixed;
          top: 68px;                      /* ความสูงแถบบน (h-[68px]) */
          left: 0;
          bottom: 0;
          z-index: 45;                    /* ต่ำกว่า modal (50) สูงกว่าเนื้อหา */
          /* !important เพราะ Tailwind Play CDN แทรก <style> ของมันไว้ "หลัง" app.css
             คลาส w-64 (0,1,0) จึงชนะกฎนี้ที่ specificity เท่ากัน ถ้าไม่กำกับไว้ */
          width: min(20rem, 86vw) !important;
          max-width: none;
          margin: 0 !important;           /* ล้าง margin การ์ดของ .app-sidebar-light */
          height: auto;
          border-radius: 0 1.25rem 1.25rem 0;
          border-left: 0;
          padding: 1rem .7rem calc(1rem + var(--safe-b)) calc(.7rem + var(--safe-l)) !important;
          overflow-y: auto;
          overscroll-behavior: contain;
          transform: translateX(-102%);
          visibility: hidden;             /* กันโฟกัสหลุดเข้าไปตอนปิดอยู่ */
          transition: transform .26s cubic-bezier(.22,1,.36,1), visibility .26s;
          box-shadow: 0 24px 60px -20px rgba(59,44,12,.55);
        }
        .nav-drawer.is-open { transform: none; visibility: visible; }

        .nav-drawer-backdrop {
          position: fixed; inset: 68px 0 0 0; z-index: 44;
          background: rgba(25,23,18,.45);
          opacity: 0; visibility: hidden; pointer-events: none;
          transition: opacity .26s ease, visibility .26s;
        }
        .nav-drawer-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

        /* ล็อกไม่ให้หน้าเบื้องหลังเลื่อนตามตอนลิ้นชักเปิด */
        body.nav-drawer-open { overflow: hidden; }

        /* เมนูในลิ้นชัก — นิ้วกดต้องได้ 44px และช่องค้นหาต้อง 16px กัน iOS ซูม */
        .nav-drawer .nav-link,
        .nav-drawer [id^="tab-btn-"] { min-height: 44px; }
        .nav-drawer .nav-group-header { min-height: 40px; }
        .nav-drawer #nav-search-box input { font-size: 16px; padding-top: .6rem; padding-bottom: .6rem; }
      }

      /* ==========================================================
         2️⃣ ช่องกรอกบนมือถือต้อง ≥16px
         ----------------------------------------------------------
         iOS Safari จะ "ซูมหน้าจอเอง" ทุกครั้งที่โฟกัสช่องที่ฟอนต์เล็กกว่า 16px
         แล้วไม่ซูมกลับ ⇒ คีย์เอกสารทีละใบกลายเป็นเลื่อนจอไปมาทั้งวัน
         ในระบบนี้มี 171 จาก 370 ช่องที่ใช้ text-xs/text-sm
         แก้ที่นี่ที่เดียวแทนการไล่แก้ทีละช่อง และไม่แตะจอ ≥640px เลย
         ========================================================== */
      @media (max-width: 639.98px) {
        input, select, textarea { font-size: 16px !important; }
        /* ช่องกรอกในตารางบรรทัดสินค้า เตี้ยไปจะกดยาก */
        input:not([type="checkbox"]):not([type="radio"]),
        select { min-height: 42px; }
      }

      /* ==========================================================
         3️⃣ ตารางบนมือถือ (<640px) — แถวละการ์ด
         ----------------------------------------------------------
         โครงการ์ดพื้นฐาน (.resp-table) มีอยู่แล้วด้านบนของไฟล์นี้
         ส่วนนี้เพิ่ม "โชว์ 3–4 ช่องสำคัญ ที่เหลือกดกาง" ตามที่ต้องการ
           td.rt-head → หัวการ์ด (เลขที่/วันที่) กดเพื่อกาง-พับ
           td ธรรมดา  → ช่องสำคัญ โชว์ตลอด
           td.rt-more → ช่องรอง ซ่อนไว้จนกว่าจะกางการ์ด
           td.rt-full → แถวปุ่มจัดการ เต็มความกว้าง
         คลาสพวกนี้ js/47-responsive.js เป็นคนเติมให้จาก data-rt ที่ <th>
         ========================================================== */
      @media (max-width: 639.98px) {
        /* ตารางบางอันใช้ whitespace-nowrap เพื่อกันคอลัมน์ยุบบนเดสก์ท็อป
           พอเป็นการ์ดต้องปล่อยให้ตัดบรรทัดได้ ไม่งั้นชื่อคู่ค้ายาวๆ ทะลุการ์ด */
        .resp-table { white-space: normal; }

        /* ทำแถวเป็นคอลัมน์ เพื่อ "จัดลำดับ" ในการ์ดได้โดยไม่ต้องย้ายคอลัมน์จริง
           หัวการ์ดขึ้นก่อนเสมอ แถวปุ่มลงล่างสุดเสมอ ไม่ว่าคอลัมน์นั้นจะอยู่ที่เท่าไหร่ */
        .resp-table tr { display: flex; flex-direction: column; }
        .resp-table td.rt-head { order: -1; }
        .resp-table td.rt-full { order: 99; }

        .resp-table td.rt-more { display: none; }
        .resp-table tr.rt-open td.rt-more { display: flex; }

        /* แถวรวมท้ายตาราง (ภาษีซื้อ/ขาย) — ชิดขวาให้อ่านเป็นยอดรวม */
        .resp-table tfoot td { justify-content: flex-end; text-align: right !important; }

        .resp-table td.rt-head {
          cursor: pointer; position: relative;
          padding-right: 2.6rem !important;
          font-weight: 800; color: #3B2C0C;
        }
        /* ลูกศรบอกว่ากดกางได้ — แถวที่ไม่มีช่องรองจะไม่มีลูกศร (rt-noexp) */
        .resp-table tr:not(.rt-noexp) td.rt-head::after {
          content: ""; position: absolute; right: 1rem; top: 50%;
          width: .5rem; height: .5rem; margin-top: -.35rem;
          border-right: 2px solid #B7AA8C; border-bottom: 2px solid #B7AA8C;
          transform: rotate(45deg); transition: transform .2s;
        }
        .resp-table tr.rt-open td.rt-head::after { transform: rotate(-135deg); margin-top: -.1rem; }

        /* ตัวเลขเงิน: ชิดขวา ตรงหลัก ไม่ตัดบรรทัด */
        .resp-table td.rt-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
        .resp-table td.rt-money::before { font-variant-numeric: normal; }

        /* แถวปุ่มจัดการ — ปุ่มเรียงเต็มแถว กดง่าย */
        .resp-table td.rt-full { padding: .65rem 1rem !important; background: #FCFBF7; }
        .resp-table td.rt-full > * { display: flex; flex-wrap: wrap; gap: .45rem; }
        .resp-table td.rt-full .row-act { min-height: 44px; flex: 1 1 auto; justify-content: center; }
      }

      /* ==========================================================
         4️⃣ ตารางบน iPad (640–1023px) — เลื่อนได้ + หัวค้าง + คอลัมน์แรกค้าง
         ----------------------------------------------------------
         ตารางเอกสาร 8–11 คอลัมน์ ถ้าปล่อย w-full บนจอ 768px จะถูกบีบจนตัดคำ
         จึงบังคับความกว้างขั้นต่ำแล้วให้เลื่อนซ้ายขวาในกรอบตัวเองแทน
         พร้อมตรึงหัวตาราง (ไม่งั้นเลื่อนลงไปแล้วไม่รู้ว่าคอลัมน์ไหนคืออะไร)
         และตรึงคอลัมน์แรก (เลขที่เอกสาร) ไว้ให้เห็นตลอดตอนเลื่อนขวา

         ⚠️ ไม่ใช้ min-w-[...] ของ Tailwind เพราะคลาสนั้นมีผลที่ ≥1024px ด้วย
            (จอเดสก์ท็อป 1024px พอดีจะเกิดแถบเลื่อนใหม่ที่เมื่อก่อนไม่มี)
            ตั้งเป็น --tbl-min ในนี้แทน ปรับรายตารางได้ที่ style="--tbl-min:…"
         ========================================================== */
      @media (min-width: 640px) and (max-width: 1023.98px) {
        .tbl-scroll {
          max-height: 72vh;
          overflow: auto;
          overscroll-behavior: contain;
          -webkit-overflow-scrolling: touch;
        }
        .tbl-scroll > table { min-width: var(--tbl-min, 820px); }

        /* หัวตารางค้าง — ต้องทึบ ไม่งั้นแถวข้างหลังทะลุขึ้นมา
           สีตั้งต้นคือ stone-50/70 ผสมกับพื้นขาวแล้ว ตารางที่หัวสีอื่นส่งค่าผ่าน --th-bg */
        .tbl-scroll > table > thead > tr > th {
          position: sticky; top: 0; z-index: 3;
          background-color: var(--th-bg, #FCFCFB);
        }
        /* :where() = specificity 0 ⇒ แถวไหนมีสีของตัวเอง (bg-rose-50 ฯลฯ) ชนะเสมอ
           มีไว้แค่ให้แถวที่ "ไม่มีสี" กลายเป็นขาวทึบ คอลัมน์ที่ตรึงไว้จะได้ไม่โปร่ง */
        :where(.tbl-scroll > table > tbody > tr) { background-color: #fff; }
        .tbl-scroll > table > tbody > tr > td:first-child:not([colspan]) {
          position: sticky; left: 0; z-index: 2;
          background-color: inherit;      /* ตามสีแถว แถวไหนไฮไลต์ก็ไฮไลต์ตาม */
        }
        .tbl-scroll > table > thead > tr > th:first-child { left: 0; z-index: 4; }
        /* แถวคู่มีลายทางจางๆ ที่เป็นสีโปร่ง (rgba .75) — คอลัมน์ที่ตรึงไว้ต้องทึบ
           ไม่งั้นเลื่อนขวาแล้วจะเห็นคอลัมน์อื่นวิ่งทะลุอยู่ข้างหลัง
           ค่านี้คือสีลายทางผสมพื้นขาวแล้ว จึงหน้าตาเหมือนเดิมเป๊ะ
           :not([class*="bg-"]) = แถวที่มีสีไฮไลต์ของตัวเองไม่โดนทับ */
        #app-screen .tbl-scroll > table > tbody > tr:nth-child(even):not([class*="bg-"]) > td:first-child:not([colspan]) {
          background-color: #FBF8F2;
        }
        .tbl-scroll > table > tbody > tr > td:first-child:not([colspan])::after,
        .tbl-scroll > table > thead > tr > th:first-child::after {
          content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
          background: rgba(176,138,62,.18);
        }
      }

      /* ==========================================================
         5️⃣ Modal บนมือถือ — เต็มจอ + ปุ่มบันทึก/ยกเลิกติดขอบล่าง
         ----------------------------------------------------------
         เขียนกฎกลางที่เดียวเหมือนกฎ margin:auto ด้านบน จับทุกหน้าต่าง
         ที่ใช้โครง "fixed inset-0 flex items-center justify-center p-4"
         (ทั้ง 31 หน้าต่างในระบบใช้โครงนี้) ⇒ ไม่ต้องไล่แก้ทีละไฟล์
         ========================================================== */
      @media (max-width: 639.98px) {
        /* ⚠️ ยกเว้น 3 ตัวที่บังเอิญใช้โครงคลาสเดียวกัน แต่ไม่ใช่ฟอร์มกรอกเอกสาร
             #boot-gate          จอ "กำลังตรวจสอบสิทธิ์" — ถ้าโดนกฎนี้ โลโก้จะยืดเต็มจอ
             #ui-confirm-modal   กล่องยืนยัน ใช่/ไม่ใช่ — กล่องเล็กกลางจอเหมาะกว่าเต็มจอ
             #ui-glossary-modal  คำอธิบายศัพท์บัญชีสั้นๆ — เหตุผลเดียวกัน */
        .fixed.inset-0.flex.items-center:not(#boot-gate):not(#ui-confirm-modal):not(#ui-glossary-modal) { padding: 0 !important; }
        .fixed.inset-0.flex.items-center:not(#boot-gate):not(#ui-confirm-modal):not(#ui-glossary-modal) > * {
          margin: 0 !important;           /* ทับกฎ margin:auto ด้านบน */
          width: 100% !important;
          max-width: none !important;
          min-height: 100vh;
          min-height: 100dvh;             /* กันแถบ URL ของ Safari กินที่ */
          border-radius: 0 !important;
          border-left: 0 !important;
          border-right: 0 !important;
        }
        /* แถวปุ่มท้ายฟอร์ม — js/47-responsive.js เป็นคนติดคลาส modal-foot ให้
           ไม่ต้องแก้ HTML 31 ไฟล์ และรูปแบบแถวปุ่มของแต่ละหน้าต่างก็ไม่เหมือนกัน */
        .modal-foot {
          position: sticky; bottom: 0; z-index: 5;
          background: #fff;
          margin-left: -1.5rem !important;
          margin-right: -1.5rem !important;
          margin-bottom: -1.5rem !important;
          padding: .7rem 1.5rem calc(.7rem + var(--safe-b)) !important;
          border-top: 1px solid var(--line);
          box-shadow: 0 -10px 22px -16px rgba(59,44,12,.6);
        }
        .modal-foot > button { flex: 1 1 0; min-height: 46px; }
        /* หน้าต่างที่ตัวการ์ดไม่มี p-6 (แบ่งเป็นส่วนๆ เอง) ไม่ต้องดึงขอบออก */
        .modal-foot.modal-foot-flush {
          margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important;
          padding-left: 1rem !important; padding-right: 1rem !important;
        }
      }

      /* ==========================================================
         6️⃣ แถบตัวกรอง / ค้นหา / ช่วงวันที่ — เรียงลงบนมือถือ
         ----------------------------------------------------------
         บนเดสก์ท็อปเรียงแนวนอน พอมาจอ 390px ได้ช่องแคบๆ 2 ช่องต่อบรรทัด
         อ่านยากและกดยาก ⇒ ต่ำกว่า 640px ให้ทุกช่องกว้างเต็มแถว
         ========================================================== */
      @media (max-width: 639.98px) {
        .filter-bar { flex-direction: column; align-items: stretch; }
        .filter-bar > * { width: 100%; }
        .filter-bar button { min-height: 44px; }
      }

      /* ==========================================================
         7️⃣ ขนาดที่นิ้วกดได้ 44×44 (<640px)
         ----------------------------------------------------------
         ทั้งระบบไม่มีฟังก์ชันไหนที่ต้อง hover ถึงจะเห็น (ตรวจแล้ว 0 จุด)
         ที่เหลือคือเรื่อง "เล็กเกินกด" ล้วนๆ
         ========================================================== */
      @media (max-width: 639.98px) {
        .row-act { min-height: 44px; padding: .5rem .8rem; font-size: .78rem; }
        .btn-eye { min-width: 44px; min-height: 44px; }
        .ui-toast-x { padding: .5rem; margin: -.5rem; }
        /* แถบแบ่งหน้า */
        .ui-pager button, .ui-pager a { min-width: 40px; min-height: 40px; }
      }

      /* ==========================================================
         8️⃣ หัวแท็บ (hero) และการ์ดต่างๆ — ลดระยะขอบบนจอแคบ
         ========================================================== */
      @media (max-width: 639.98px) {
        .hero-card { border-radius: 1rem; }
        #app-screen main { padding-left: calc(.75rem + var(--safe-l)); padding-right: calc(.75rem + var(--safe-r)); }
      }

      /* ==========================================================
         9️⃣ ติ๊กเลือกเอกสารหลายใบ แล้วพิมพ์/ดาวน์โหลดทีเดียว (48-bulk-docs.js)
         ----------------------------------------------------------
         ช่องติ๊กอยู่ "ในช่องแรก" ของแถว (ช่องเลขที่/วันที่) ไม่ได้แยกเป็นคอลัมน์ใหม่ เพราะ
           · iPad ตรึงคอลัมน์แรกไว้ตอนเลื่อนขวา → ช่องติ๊กติดไปกับเลขที่เอกสารเสมอ
           · มือถือช่องแรกคือหัวการ์ด → แตะช่องติ๊ก = เลือก · แตะที่อื่นบนหัว = กาง/พับการ์ดเหมือนเดิม
             (47-responsive.js ข้ามการกาง-พับเมื่อแตะโดน input อยู่แล้ว)
           · ไม่ต้องไล่แก้ colspan ของแถวว่าง / แถวยอดรวมท้ายตาราง
         ========================================================== */
      .bulk-cell { display: flex; align-items: flex-start; gap: .7rem; }
      .bulk-cell-center { display: inline-flex; align-items: center; gap: .6rem; }
      .bulk-check, .bulk-check-all {
        width: 17px; height: 17px; flex: 0 0 17px;
        margin: .1rem 0 0; cursor: pointer;
        accent-color: #B08A3E;
      }
      .bulk-cell-center .bulk-check, .bulk-cell-center .bulk-check-all { margin-top: 0; }
      .bulk-check:disabled { cursor: not-allowed; opacity: .35; }
      .bulk-check-all[hidden], .bulk-bar[hidden] { display: none !important; }
      .bulk-check-ph { display: inline-block; width: 17px; flex: 0 0 17px; }
      /* แถวที่ติ๊กไว้ — ทาที่ทุกช่อง ไม่ใช่ที่ tr เพราะคอลัมน์แรกบน iPad/หัวการ์ดมือถือตั้งพื้นทึบของตัวเองไว้ */
      tr.bulk-row-on > td { background-color: #FFF8E8 !important; }

      /* แถบเครื่องมือใต้ตาราง — ลอยติดขอบล่างจอขณะเลื่อนดูรายการยาวๆ */
      .bulk-bar {
        position: sticky; bottom: 12px; z-index: 6;
        margin-top: 12px;
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
        gap: .6rem 1rem;
        padding: .65rem .7rem .65rem 1.1rem;
        border-radius: 1rem;
        background: rgba(43, 37, 25, .95);
        color: #fff;
        box-shadow: 0 18px 40px -16px rgba(43, 37, 25, .65), inset 0 0 0 1px rgba(255, 255, 255, .06);
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        animation: bulkBarIn .22s cubic-bezier(.22, 1, .36, 1) both;
      }
      @keyframes bulkBarIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
      .bulk-bar-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; font-size: .84rem; font-weight: 700; }
      .bulk-bar-count b { color: #F2D48A; font-weight: 900; font-size: 1rem; }
      .bulk-bar-link {
        background: none; border: 0; padding: .2rem 0; cursor: pointer;
        color: rgba(255, 255, 255, .72); font-size: .78rem; font-weight: 800;
        text-decoration: underline; text-underline-offset: 3px;
      }
      .bulk-bar-link:hover { color: #fff; }
      .bulk-bar-go {
        display: inline-flex; align-items: center; gap: .5rem;
        border: 0; cursor: pointer;
        padding: .6rem .75rem .6rem 1rem; border-radius: .8rem;
        font-size: .86rem; font-weight: 900; color: #3B2C0C;
        background: linear-gradient(180deg, #F7E3AE 0%, #E6C678 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
        transition: filter .15s ease, transform .1s ease;
      }
      .bulk-bar-go:hover { filter: brightness(1.05); }
      .bulk-bar-go:active { transform: scale(.97); }
      .bulk-bar-go:disabled { opacity: .6; cursor: progress; }
      .bulk-bar-n {
        min-width: 1.6rem; padding: .05rem .45rem; border-radius: 999px;
        background: rgba(59, 44, 12, .14); font-size: .78rem; text-align: center;
      }

      /* หน้าต่าง 50 ทวิ หลายใบ — สูงกว่าหน้าต่างทั่วไป (z-50) แต่ต่ำกว่ากล่องยืนยัน/แจ้งเตือน (9998+) */
      .bulk-wht-modal, .bulk-pdf-modal { z-index: 9000; }
      .bulk-prog { display: flex; flex-direction: column; gap: .9rem; }
      .bulk-prog-row { display: flex; align-items: center; gap: .9rem; }
      .bulk-spin { width: 30px; height: 30px; flex: 0 0 30px; }
      .bulk-prog-title { font-weight: 900; color: #292524; }
      .bulk-prog-sub { font-size: .76rem; font-weight: 600; color: #78716c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .bulk-meter { height: 8px; border-radius: 999px; background: #F5EFE4; overflow: hidden; }
      .bulk-meter > span {
        display: block; height: 100%; width: 0; border-radius: inherit;
        background: linear-gradient(90deg, #D9B865, #B08A3E); transition: width .35s ease;
      }
      .bulk-prog-note { font-size: .74rem; font-weight: 600; color: #a8a29e; line-height: 1.6; }
      .bulk-ask { border: 1px solid #FDE68A; background: #FFFBEB; border-radius: .9rem; padding: .85rem 1rem; }
      .bulk-ask-title { display: flex; align-items: center; gap: .45rem; font-weight: 900; color: #92400E; font-size: .88rem; }
      .bulk-ask-who { font-size: .78rem; font-weight: 700; color: #57534e; margin-top: .25rem; }
      .bulk-ask-list { margin: .5rem 0 .6rem 1.1rem; list-style: disc; font-size: .78rem; font-weight: 600; color: #78350F; line-height: 1.6; }
      .bulk-ask-all { display: flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 700; color: #57534e; cursor: pointer; }
      .bulk-ask-all input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: #B08A3E; }

      .bulk-res-head { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: .9rem; }
      .bulk-res-head.ok { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
      .bulk-res-head.bad { background: #FFF1F2; color: #BE123C; border: 1px solid #FECDD3; }
      .bulk-res-title { font-weight: 900; font-size: 1rem; }
      .bulk-res-sub { font-size: .76rem; font-weight: 700; opacity: .8; margin-top: .1rem; }
      .bulk-res-why { margin-top: .7rem; font-size: .78rem; font-weight: 600; color: #9f1239; background: #FFF1F2; border-radius: .7rem; padding: .55rem .8rem; line-height: 1.6; }
      .bulk-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; margin-top: 1rem; }
      .bulk-dl {
        display: flex; align-items: flex-start; gap: .65rem; text-align: left;
        padding: .8rem .9rem; border-radius: .9rem; cursor: pointer;
        background: #fff; color: #44403c; border: 1.5px solid #EDE4D3;
        transition: border-color .15s ease, background .15s ease, transform .1s ease;
      }
      .bulk-dl:hover { border-color: #B08A3E; background: #FFFCF4; }
      .bulk-dl:active { transform: scale(.98); }
      .bulk-dl svg { margin-top: .1rem; color: #8C6C25; }
      .bulk-dl b { display: block; font-size: .86rem; font-weight: 900; color: #3B2C0C; }
      .bulk-dl small { display: block; font-size: .7rem; font-weight: 600; color: #8E836C; margin-top: .15rem; line-height: 1.45; }
      .bulk-dl-main { background: linear-gradient(180deg, #FBF3DF 0%, #F2E2BC 100%); border-color: #B08A3E; }
      .bulk-list-wrap { margin-top: 1rem; max-height: 42vh; overflow: auto; border: 1px solid #f5f5f4; border-radius: .8rem; }
      .bulk-list { width: 100%; border-collapse: collapse; font-size: .78rem; }
      .bulk-list th { position: sticky; top: 0; background: #FAFAF9; text-align: left; font-weight: 800; color: #78716c; padding: .5rem .7rem; white-space: nowrap; }
      .bulk-list td { padding: .5rem .7rem; border-top: 1px solid #f5f5f4; vertical-align: top; color: #44403c; font-weight: 600; }
      .bulk-list .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
      .bulk-list .nowrap { white-space: nowrap; }
      .bulk-list .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; white-space: nowrap; }
      .bulk-list small { color: #a8a29e; font-weight: 600; }
      .bulk-list small.block { display: block; }
      .bulk-st { display: inline-block; font-weight: 800; font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap; }
      .bulk-st.ok { background: #D1FAE5; color: #047857; }
      .bulk-st.skip { background: #FEF3C7; color: #92400E; }
      .bulk-st.bad { background: #FFE4E6; color: #BE123C; }
      .bulk-st.todo { background: #F5F5F4; color: #78716c; }

      /* ปุ่มคู่ในแถบเครื่องมือ (ใบเสนอราคา/ใบแจ้งหนี้/ใบเสร็จ): ดาวน์โหลด PDF แยกไฟล์ = ปุ่มหลัก · พิมพ์รวม = ปุ่มรอง */
      .bulk-bar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
      .bulk-bar-alt {
        display: inline-flex; align-items: center; gap: .45rem;
        background: transparent; cursor: pointer;
        border: 1px solid rgba(255, 255, 255, .28);
        padding: .55rem .9rem; border-radius: .8rem;
        font-size: .82rem; font-weight: 800; color: rgba(255, 255, 255, .88);
        transition: background .15s ease, border-color .15s ease, color .15s ease;
      }
      .bulk-bar-alt:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); color: #fff; }
      .bulk-bar-alt:disabled { opacity: .5; cursor: progress; }
      .bulk-dl:disabled { opacity: .7; cursor: progress; }
      .bulk-dl-note { margin-top: .6rem; font-size: .72rem; font-weight: 600; color: #8E836C; line-height: 1.65; }
      .bulk-dl-note span { color: #57534e; font-weight: 800; word-break: break-all; }
      .bulk-row-dl {
        display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
        padding: .25rem .6rem; border-radius: .6rem; cursor: pointer;
        background: #fff; border: 1px solid #EDE4D3; color: #7A5D28; font-size: .72rem; font-weight: 800;
      }
      .bulk-row-dl:hover { border-color: #B08A3E; background: #FFFCF4; }

      /* แผ่นเอกสารที่กำลังถ่ายเป็น PDF — ต้องอยู่ในหน้าเว็บจริง (html2canvas อาศัย layout ของเบราว์เซอร์)
         แต่ซ่อนไว้ในกล่อง 0×0 ที่มองไม่เห็น · ตอนถ่าย onclone ปลดให้โชว์ "ในสำเนา" เท่านั้น
         หน้าตาแผ่น = .dpv-paper-bulk .bulk-page ข้างบน (A4 · ขอบ 12mm + 24px) แค่ไม่มีเงา/มุมโค้ง */
      .bulk-pdf-stage {
        position: fixed; left: 0; top: 0; width: 0; height: 0;
        overflow: hidden; visibility: hidden; pointer-events: none; z-index: -1;
      }
      .bulk-pdf-stage > .bulk-pdf-page {
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
        width: 210mm; min-height: 297mm; margin: 0;
        padding: calc(12mm + 24px);
        background: #fff; color: #111; font-size: 13px;
      }

      @media (max-width: 639.98px) {
        .bulk-check, .bulk-check-all { width: 22px; height: 22px; flex-basis: 22px; margin-top: 0; }
        .bulk-check-ph { width: 22px; flex-basis: 22px; }
        .bulk-bar { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: .7rem; }
        .bulk-bar-acts { width: 100%; }
        .bulk-bar-go { flex: 1 1 auto; justify-content: center; min-height: 44px; }
        .bulk-bar-alt { justify-content: center; min-height: 44px; }
        .bulk-list-wrap { max-height: none; }
      }

      /* ==========================================================
         🔟 หน้าแรก (Dashboard) — การ์ดขาวมุมโค้ง · การ์ดกำไรไล่ทองเหลือง · กราฟเส้นโค้ง
         ----------------------------------------------------------
         ตัวเลขใช้ Inter + tabular-nums ให้หลักตรงกันเวลาเทียบยอด
         สีกราฟ: รายได้ = ทอง #B08A3E · รายจ่าย = แดงอิฐ #8E2B22 (ชุดเดียวกับทั้งแอป)
         ========================================================== */
      .dash-title { font-size: 1.75rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--brand-ink); }
      .dash-sub   { margin-top: .35rem; font-size: .875rem; font-weight: 500; color: #8E836C; }
      .dash-num   { font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }

      .dash-card {
        background: #FFFFFF;
        border: 1px solid var(--line);
        border-radius: 1.25rem;
        box-shadow: 0 1px 2px rgba(60,55,44,.04), 0 10px 28px -22px rgba(94,71,32,.35);
      }
      .dash-card-title { font-size: 1.125rem; font-weight: 800; color: var(--brand-ink); letter-spacing: -.01em; }
      .dash-card-sub   { margin-top: .2rem; font-size: .8rem; font-weight: 500; color: #9A8C71; }
      .dash-link {
        font-size: .75rem; font-weight: 700; color: #8E836C;
        padding: .4rem .75rem; border-radius: .6rem; border: 1px solid var(--line);
        transition: all .15s ease;
      }
      .dash-link:hover { color: var(--gold-dark); border-color: var(--gold); background: #FBF6E9; }

      /* การ์ด KPI */
      .dash-kpi { transition: transform .18s ease, box-shadow .18s ease; }
      .dash-kpi:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(60,55,44,.04), 0 16px 32px -18px rgba(94,71,32,.38); }
      .dash-ico {
        width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
        display: inline-flex; align-items: center; justify-content: center;
      }
      .dash-ico-in  { background: #F7EEDB; color: #957230; box-shadow: inset 0 0 0 1px rgba(176,138,62,.22); }
      .dash-ico-out { background: #F8E9E6; color: #8E2B22; box-shadow: inset 0 0 0 1px rgba(142,43,34,.14); }
      .dash-kpi-label { font-size: .95rem; font-weight: 600; color: #6E6553; line-height: 1.3; }
      .dash-kpi-num   { margin-top: 1.1rem; font-size: 2rem; line-height: 1.15; font-weight: 700; color: var(--brand-ink); }
      .dash-kpi-foot  { margin-top: .55rem; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: 13px; font-weight: 500; color: #9A8C71; }

      /* ช่องเลือกเดือน / ช่วงกราฟ — ปุ่มขาวขอบบาง */
      .dash-pill {
        display: inline-flex; align-items: center; gap: .5rem;
        background: #FFFFFF; border: 1px solid var(--line); border-radius: .85rem;
        padding: .5rem .8rem; font-size: .85rem; font-weight: 600; color: #3C372C;
        box-shadow: 0 1px 2px rgba(60,55,44,.04);
        transition: border-color .15s ease, box-shadow .15s ease;
      }
      .dash-pill:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.18); }
      .dash-pill input { border: 0; outline: 0; background: transparent; padding: 0; font: inherit; color: inherit; min-width: 0; }
      .dash-pill-btn { color: #7A5D28; }
      .dash-pill-btn:hover { border-color: var(--gold); background: #FBF6E9; }
      .dash-select {
        appearance: none; -webkit-appearance: none;
        background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238E836C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center;
        border: 1px solid var(--line); border-radius: .75rem;
        padding: .5rem 2.1rem .5rem .85rem;
        font-size: .82rem; font-weight: 700; color: #3C372C; cursor: pointer;
      }
      .dash-select:hover, .dash-select:focus { border-color: var(--gold); outline: none; }
      .dash-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }

      /* การ์ดกำไรสุทธิ — พื้นครีมอ่อน ขอบทองบาง ตัวอักษรเข้ม (โทนนุ่ม ไม่ฉูดฉาด)
         ขาดทุน = พื้นชมพูอ่อน ตัวเลขแดงอิฐ */
      .dash-hero {
        position: relative; overflow: hidden; isolation: isolate;
        border-radius: 1.25rem; color: var(--brand-ink);
        background:
          radial-gradient(90% 70% at 100% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%),
          linear-gradient(160deg, #FDFAF4 0%, #F7F0E2 55%, #F1E7D2 100%);
        border: 1px solid #E8DCC3;
        box-shadow: 0 1px 2px rgba(60,55,44,.05), 0 18px 36px -26px rgba(122,93,40,.40);
      }
      .dash-hero.is-loss {
        background:
          radial-gradient(90% 70% at 100% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%),
          linear-gradient(160deg, #FFFBFA 0%, #FBF0ED 55%, #F6E3DF 100%);
        border-color: #EED5CF;
        box-shadow: 0 1px 2px rgba(60,55,44,.05), 0 18px 36px -26px rgba(142,43,34,.35);
      }
      .dash-hero::before, .dash-hero::after {
        content: ""; position: absolute; z-index: -1; border-radius: 999px; pointer-events: none;
        border: 1px solid rgba(176,138,62,.13);
      }
      .dash-hero::before { width: 230px; height: 230px; right: -80px; top: -95px; }
      .dash-hero::after  { width: 150px; height: 150px; right: -30px; top: -50px; }
      .dash-hero.is-loss::before, .dash-hero.is-loss::after { border-color: rgba(142,43,34,.10); }
      .dash-hero-ico {
        width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
        display: inline-flex; align-items: center; justify-content: center;
        background: #FFFFFF; color: var(--gold); box-shadow: inset 0 0 0 1px #EADFC8;
      }
      .dash-hero.is-loss .dash-hero-ico { color: #8E2B22; box-shadow: inset 0 0 0 1px #F0D6D0; }
      .dash-hero-chip {
        font-size: .72rem; font-weight: 700; color: #7A6E57; white-space: nowrap;
        padding: .3rem .7rem; border-radius: 999px;
        background: rgba(255,255,255,.8); border: 1px solid #E8DCC3;
        transition: border-color .15s ease, color .15s ease;
      }
      .dash-hero-chip:hover { border-color: var(--gold); color: var(--gold-dark); }
      .dash-hero-num { margin: 1.35rem 0 .5rem; font-size: 2.35rem; line-height: 1.1; font-weight: 700; color: var(--brand-ink); }
      .dash-hero.is-loss .dash-hero-num { color: #8E2B22; }
      .dash-hero-delta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: 12.5px; font-weight: 500; color: #8E836C; }
      .dash-delta-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: .15rem .55rem; border-radius: 999px; }
      .dash-hero-stats {
        margin-top: 1.15rem; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr);
        border-radius: .9rem; background: rgba(255,255,255,.72); border: 1px solid #EADFC8;
      }
      .dash-hero.is-loss .dash-hero-stats { border-color: #F0D6D0; }
      .dash-hero-stats > div { padding: .7rem .9rem; min-width: 0; }
      .dash-hero-stats > div + div { border-left: 1px solid #EADFC8; }
      .dash-hero.is-loss .dash-hero-stats > div + div { border-left-color: #F0D6D0; }
      .dash-hero-k { font-size: .72rem; line-height: 1.35; font-weight: 600; color: #8E836C; }
      .dash-hero-v { margin-top: .2rem; font-size: 1rem; font-weight: 700; color: var(--brand-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .dash-hero-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
        background: #FFFFFF; color: var(--brand-ink); border: 1px solid #E3D6BA;
        border-radius: .85rem; padding: .7rem .75rem;
        font-size: .85rem; font-weight: 700;
        transition: transform .12s ease, background .15s ease, border-color .15s ease;
      }
      .dash-hero-btn:hover  { background: #FBF6E9; border-color: var(--gold); }
      .dash-hero-btn-main { background: var(--brand-ink); color: #FFFFFF; border-color: var(--brand-ink); box-shadow: 0 8px 18px -12px rgba(43,37,25,.8); }
      .dash-hero-btn-main:hover { background: #3C3426; border-color: #3C3426; }
      .dash-hero-btn:active { transform: scale(.97); }

      /* กราฟ + ป้ายตัวเลขตอนชี้ */
      .dash-chart { position: relative; min-height: 240px; }
      .dash-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
      .dash-chart-hit { cursor: crosshair; }
      .dash-tip {
        position: absolute; z-index: 5; pointer-events: none;
        min-width: 176px; padding: .6rem .75rem; border-radius: .8rem;
        background: #FFFFFF; border: 1px solid var(--line);
        box-shadow: 0 14px 30px -14px rgba(60,45,20,.45);
        font-size: 12px; color: #3C372C;
        transform: translate(-50%, calc(-100% - 14px));
        transition: opacity .12s ease;
      }
      .dash-tip.is-below { transform: translate(-50%, 16px); }
      .dash-tip-m { font-weight: 800; color: var(--brand-ink); margin-bottom: .3rem; }
      .dash-tip-row { display: flex; align-items: center; gap: .45rem; padding: .1rem 0; font-weight: 600; color: #6E6553; }
      .dash-tip-row i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
      .dash-tip-row b { margin-left: auto; padding-left: .9rem; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--brand-ink); }
      .dash-tip-net { margin-top: .3rem; padding-top: .35rem; border-top: 1px dashed var(--line); }

      /* จอกว้าง (xl): ปฏิทินภาษีสูงเท่าที่ฝั่งซ้าย (KPI + กราฟ) เหลือให้ แล้วเลื่อนดูในกล่อง
         contain:size = ความยาวรายการไม่ดันความสูงแถว → ใต้กราฟไม่เหลือที่ว่างโหว่ */
      @media (min-width: 1280px) {
        .dash-card .dash-taxcal-list { flex: 1 1 0; min-height: 200px; max-height: none; contain: size; }
      }

      @media (max-width: 639.98px) {
        .dash-title { font-size: 1.4rem; }
        .dash-kpi-num { font-size: 1.65rem; margin-top: .85rem; }
        .dash-hero-num { font-size: 1.95rem; }
        .dash-card, .dash-hero { border-radius: 1rem; }
        .dash-pill, .dash-select { min-height: 44px; }
        .dash-hero-btn { min-height: 44px; }
      }

      /* ==========================================================
         1️⃣1️⃣ หน้ารายการเอกสาร — ใบแจ้งหนี้ · ค่าใช้จ่าย · สมุดรายวัน
         ----------------------------------------------------------
         หัวหน้า (.pg-head) → การ์ดสรุป (.kpi) → การ์ดตาราง (.data-card)
         ⚠️ การ์ดตารางต้องมีคลาส bg-white และแถบตัวกรองต้องมี flex flex-wrap items-end
            ช่องค้นหา (12-table-search-paging.js) กับปุ่มช่วงเวลาแบบเร็ว (22-fiscal-year.js)
            หาที่แปะตัวเองจากคลาสพวกนี้ — หน้าตาของสองอย่างนั้นปรับจากที่นี่ ไม่ได้แก้ไฟล์ต้นทาง
         ========================================================== */
      .pg-head  { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
      .pg-title { font-size: 1.6rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--brand-ink); }
      .pg-sub   { margin-top: .3rem; font-size: .85rem; font-weight: 500; color: #8E836C; }
      .pg-btn   { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.15rem; border-radius: .85rem; font-size: .9rem; white-space: nowrap; }
      /* ปุ่มหลักที่กดไม่ได้ — ต้องชนะ .gold-grad ที่ใช้ !important (specificity 0,2,0 > 0,1,1) */
      .pg-btn:disabled {
        background: #F4F1EA !important; color: #B7AA8C !important; border-color: #EFE7D6 !important;
        box-shadow: none !important; filter: none; cursor: not-allowed;
      }

      .kpi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
      /* ⚠️ .kpi-grid (0,1,0) เท่ากับ .hidden พอดี — ต้องเขียนกฎซ่อนที่ชนะให้ชัด
            ไม่งั้นการ์ดสรุปที่โค้ดสั่งซ่อน (เช่นหน้ารายงานสินค้าของธุรกิจบริการ) จะโผล่ */
      .kpi-grid.hidden { display: none; }
      @media (min-width: 640px)  { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      @media (min-width: 1280px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
      @media (min-width: 1024px) { .kpi-grid.kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
      .kpi {
        min-width: 0; background: #FFFFFF; border: 1px solid var(--line); border-radius: 1.1rem;
        padding: 1.1rem 1.25rem;
        box-shadow: 0 1px 2px rgba(60,55,44,.04), 0 10px 26px -22px rgba(94,71,32,.32);
      }
      .kpi-top   { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
      .kpi-label { font-size: .82rem; font-weight: 600; color: #8E836C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .kpi-badge {
        flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
        padding: .18rem .55rem; border-radius: .55rem; border: 1px solid var(--line); background: #FCFAF5;
        font-size: .72rem; font-weight: 700; color: #6E6553; white-space: nowrap;
      }
      .kpi-badge svg { width: 13px; height: 13px; }
      .kpi-badge.is-good { color: #047857; border-color: #CDEBDD; background: #F1FAF5; }
      .kpi-badge.is-warn { color: #B45309; border-color: #F1DFBA; background: #FFF9EE; }
      .kpi-badge.is-bad  { color: #BE123C; border-color: #F6D3D9; background: #FFF5F6; }
      .kpi-num {
        margin-top: .7rem; font-size: 1.6rem; line-height: 1.15; font-weight: 700; color: var(--brand-ink);
        font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.025em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .kpi-num.is-good { color: #047857; }
      .kpi-num.is-bad  { color: #BE123C; }
      .kpi-foot { margin-top: .3rem; font-size: .78rem; font-weight: 500; color: #A3947A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

      .data-card {
        border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.1rem 1.25rem 1.25rem;
        box-shadow: 0 1px 2px rgba(60,55,44,.04), 0 10px 28px -24px rgba(94,71,32,.32);
      }
      .data-card-head  { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: .85rem; }
      .data-card-title { font-size: 1rem; font-weight: 800; color: var(--brand-ink); }

      /* แถบตัวกรอง — ตัดป้ายหัวช่องทิ้ง (ช่องบอกตัวเองได้แล้ว) และจัดทุกอย่างให้อยู่แนวเดียวกัน
         ใช้ descendant ไม่ใช่ลูกตรง เพราะบางหน้า (คลังสินค้า) แบ่งการ์ดเป็นหลาย section */
      .data-card .data-toolbar { align-items: center; gap: .6rem; margin-bottom: 1rem; }
      .data-toolbar label { display: none; }
      .data-toolbar > div { position: relative; }
      .data-toolbar input[id^="search-"] {
        width: 15rem; height: 38px; background: #FFFFFF; border-color: var(--line); border-radius: .75rem;
      }
      .data-toolbar [id^="searchcount-"] { position: absolute; left: .3rem; top: 100%; margin-top: .15rem; height: auto; white-space: nowrap; }
      .data-toolbar [id^="fyq-"] { order: 5; }
      .data-toolbar [id^="fyq-"] > div { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: .8rem; background: #F4EEE2; }
      .data-toolbar [id^="fyq-"] button {
        border: 0; background: transparent; color: #7A6E57;
        font-size: .76rem; font-weight: 700; padding: .4rem .6rem; border-radius: .6rem;
      }
      .data-toolbar [id^="fyq-"] button:hover { background: #FFFFFF; color: var(--gold-dark); }
      .data-toolbar .tb-end { order: 9; margin-left: auto; display: flex; gap: .5rem; }

      .date-range {
        display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .75rem;
        background: #FFFFFF; border: 1px solid var(--line); border-radius: .75rem; color: #A3947A;
      }
      .date-range:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.16); }
      .date-range input { border: 0; outline: 0; background: transparent; padding: 0; min-width: 0; font-size: .82rem; font-weight: 600; color: #3C372C; }
      .date-range .sep { color: #C9BFA9; }
      /* กฎกลาง #app-screen input[type=date] ใส่กรอบ+พื้นขาวให้ทุกช่องวันที่ — ในนี้ใช้กรอบของ .date-range แทน */
      #app-screen .date-range input[type="date"] { border: 0; background: transparent; }

      /* ปุ่มแบ่งช่อง (สถานะ / เล่มสมุดรายวัน) */
      .seg { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 3px; border-radius: .8rem; background: #F4EEE2; overflow-x: auto; scrollbar-width: none; }
      .seg::-webkit-scrollbar { display: none; }
      .seg > button {
        flex: 0 0 auto; white-space: nowrap; border: 0; background: transparent; cursor: pointer;
        padding: .42rem .85rem; border-radius: .62rem; font-size: .8rem; font-weight: 700; color: #7A6E57;
        transition: background .15s ease, color .15s ease, box-shadow .15s ease;
      }
      .seg > button:hover { color: var(--brand-ink); }
      .seg > button.on { background: #FFFFFF; color: var(--brand-ink); box-shadow: 0 1px 2px rgba(60,55,44,.12), 0 0 0 1px rgba(176,138,62,.2); }

      .tb-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 38px; padding: 0 .9rem;
        border-radius: .75rem; border: 1px solid var(--line); background: #FFFFFF;
        font-size: .8rem; font-weight: 700; color: #6E6553; white-space: nowrap;
        transition: border-color .15s ease, color .15s ease, background .15s ease;
      }
      .tb-btn:hover { border-color: var(--gold); color: var(--gold-dark); background: #FBF6E9; }

      /* ตาราง */
      .dtbl-wrap { border: 1px solid #EFE7D6; border-radius: .9rem; }
      .dtbl { font-size: .875rem; }
      .dtbl thead th {
        padding: .7rem 1rem; background: #FBF8F1; border-bottom: 1px solid #EFE7D6;
        font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: #8E836C; white-space: nowrap;
      }
      .dtbl thead th.th-r { text-align: right; }
      .dtbl tbody td { padding: .85rem 1rem; border-bottom: 1px solid #F3EDE1; vertical-align: middle; }
      .dtbl tbody tr:last-child td { border-bottom: 0; }
      .dtbl tbody tr { transition: background-color .12s ease; }
      .dtbl tbody tr:hover { background-color: #FCFAF4; }
      /* ตารางชุดนี้ไม่เอาลายทางแถวคู่ของทั้งแอป — ใช้เส้นคั่นบางๆ แทน อ่านสบายตากว่า */
      #app-screen .dtbl tbody tr:nth-child(even) > td:not([class*="bg-"]) { background-color: transparent; }
      @media (min-width: 640px) and (max-width: 1023.98px) {
        #app-screen .tbl-scroll > table.dtbl > tbody > tr:nth-child(even):not([class*="bg-"]) > td:first-child:not([colspan]) { background-color: inherit; }
      }

      .doc-no  { font-weight: 700; white-space: nowrap; letter-spacing: -.005em; }
      .doc-sub { margin-top: .15rem; font-size: .75rem; font-weight: 500; color: #A3947A; white-space: nowrap; }
      .cell-name {
        min-width: 9rem; font-weight: 600; color: #2F2A20; line-height: 1.35;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      }
      .cell-desc {
        margin-top: .2rem; font-size: .76rem; color: #8E836C; line-height: 1.4;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      }
      .cell-muted { font-size: .82rem; font-weight: 500; color: #57503F; white-space: nowrap; }
      .amt { font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; color: #2F2A20; white-space: nowrap; }
      .amt.is-due  { color: #BE123C; }
      .amt.is-zero { color: #C4B9A2; font-weight: 500; }

      .st-pill {
        display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .62rem; border-radius: 999px;
        border: 1px solid transparent; font-size: .75rem; font-weight: 700; white-space: nowrap;
      }
      .st-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
      .st-unpaid  { color: #BE123C; background: #FFF4F6; border-color: #F7D6DC; }
      .st-partial { color: #B45309; background: #FFF8EC; border-color: #F2DFB8; }
      .st-paid    { color: #047857; background: #F0FAF5; border-color: #CDEBDD; }

      /* ปุ่มจัดการท้ายแถว — ไอคอนล้วนเรียงแถวเดียว (ไอคอนล็อกของรายการระบบ = .cursor-help จาก 39-journal-backend.js) */
      .row-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: .25rem; flex-wrap: nowrap; }
      .row-acts > button, .row-acts > .cursor-help {
        width: 32px; height: 32px; padding: 0 !important; flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: .6rem; border: 1px solid transparent; background: transparent; color: #8E836C;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
      }
      .row-acts > button:hover { background: #F7F1E4; border-color: #EADFC8; color: var(--brand-ink); }
      .row-acts svg { width: 16px; height: 16px; }
      .row-acts > .ic-view:hover { color: var(--gold-dark); }
      .row-acts > .ic-pay { color: #047857; }
      .row-acts > .ic-pay:hover { background: #ECFBF3; border-color: #C5EBD7; color: #065F46; }
      .row-acts > .ic-cndn { color: #B45309; background: #FFF8EC; }
      /* ปุ่ม 50 ทวิ (whtCertCellHtml) ใช้ไอคอนรูปตาเหมือนปุ่มดูใบสำคัญ — แยกด้วยสีทองแบบเดิม */
      .row-acts > button[onclick^="printOfficialWhtPdfByJournalId"] { color: #B45309; background: #FFF8EC; }

      /* หัวการ์ดที่มีเครื่องมือหลายชิ้น (สมุดรายวัน: ปุ่มเลือกเล่ม · Excel · พิมพ์) */
      .data-card-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-width: 0; }
      @media (max-width: 639.98px) {
        .data-card-tools { width: 100%; }
        .data-card-tools > .tb-btn { flex: 1 1 0; min-height: 44px; }
      }

      /* ---------- ส่วนเสริมของหน้าเอกสารอื่น (ใบเสนอราคา · ใบเสร็จ · ใบลดหนี้ · ใบสั่งซื้อ) ---------- */
      .pg-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
      .pg-btn-2 { background: #FFFFFF; border: 1px solid #E3D6BA; color: #5E4720; font-weight: 800; box-shadow: 0 1px 2px rgba(60,55,44,.05); }
      .pg-btn-2:hover { border-color: var(--gold); background: #FBF6E9; }
      .pg-link { font-weight: 700; color: #7E22CE; text-decoration: underline; text-underline-offset: 2px; }
      .pg-link:hover { color: #581C87; }
      .pg-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
      .pg-flow .arr { color: #C9BFA9; }

      /* หมายเหตุยาว (เช่น Tax Point) — พับเก็บไว้ กดเปิดอ่านเมื่ออยากรู้ */
      .pg-note { border: 1px solid var(--line); border-radius: .9rem; background: #FFFFFF; }
      .pg-note > summary {
        list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
        padding: .6rem .9rem; font-size: .8rem; font-weight: 700; color: #7A6E57;
      }
      .pg-note > summary::-webkit-details-marker { display: none; }
      .pg-note > summary::after {
        content: ""; margin-left: auto; width: .45rem; height: .45rem;
        border-right: 2px solid #B7AA8C; border-bottom: 2px solid #B7AA8C; transform: rotate(45deg); transition: transform .2s;
      }
      .pg-note[open] > summary::after { transform: rotate(-135deg); }
      .pg-note-body { padding: 0 .9rem .8rem; font-size: .8rem; line-height: 1.65; color: #6E6553; }
      .pg-note-body.is-tax b { color: #92400E; }

      /* แถบ "กำลังดูเฉพาะเอกสารของใบ…" */
      .flt-banner {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
        padding: .6rem .9rem; border-radius: .9rem; border: 1px solid #EAD9A8; background: #FFFBEF;
        font-size: .82rem; font-weight: 700; color: #7A5D28;
      }
      .flt-banner.hidden { display: none; }

      .kpi-grid.kpi-auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
      .kpi-num.is-info { color: #0369A1; }

      /* ปุ่ม "ขั้นถัดไป" ของใบเสนอราคา/ใบสั่งซื้อ */
      .nx-stack { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; }
      .nx-btn {
        display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
        padding: .28rem .6rem; border-radius: .55rem; border: 1px solid var(--line); background: #FFFFFF;
        font-size: .72rem; font-weight: 700; color: #57503F; transition: all .15s ease;
      }
      .nx-btn:hover { border-color: var(--gold); color: var(--gold-dark); background: #FBF6E9; }
      .nx-btn.is-neg { color: #A8A29E; }
      .nx-btn.is-neg:hover { color: #BE123C; border-color: #F7D3DA; background: #FFF1F3; }
      .nx-btn svg { width: 12px; height: 12px; }

      /* สถานะใบเสนอราคา / ใบสั่งซื้อ (ใช้คู่กับ .st-pill) */
      .st-draft     { color: #6E6553; background: #F6F3EC; border-color: #E7E0D0; }
      .st-sent      { color: #0369A1; background: #F0F8FF; border-color: #CFE6F7; }
      .st-accepted, .st-confirmed { color: #047857; background: #F0FAF5; border-color: #CDEBDD; }
      .st-rejected, .st-cancelled { color: #BE123C; background: #FFF4F6; border-color: #F7D6DC; }
      .st-converted { color: #5E4720; background: #F7EEDB; border-color: #E9D8B0; }

      /* ตัวเลข / บรรทัดรองแบบมีความหมาย */
      .amt.is-info { color: #0369A1; }
      .amt.is-wht  { color: #B45309; }
      .amt.is-in   { color: #047857; }
      .doc-sub.wrap { white-space: normal; }
      .doc-sub.is-bad  { color: #BE123C; font-weight: 700; }
      .doc-sub.is-good { color: #047857; font-weight: 700; }
      .doc-sub.is-warn { color: #B45309; font-weight: 700; }
      .doc-sub.is-info { color: #0369A1; font-weight: 700; }

      /* ปุ่มแปลงเอกสาร */
      .row-acts > .ic-conv { color: #6D28D9; }
      .row-acts > .ic-conv:hover { background: #F5F0FF; border-color: #DDD0FB; color: #5B21B6; }
      .row-acts > .ic-recv { color: #047857; }
      .row-acts > .ic-recv:hover { background: #ECFBF3; border-color: #C5EBD7; }
      .row-acts > .ic-bill { color: #C2410C; }
      .row-acts > .ic-bill:hover { background: #FFF4EC; border-color: #F8D6BD; }

      @media (max-width: 639.98px) {
        .kpi-grid.kpi-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .pg-actions { width: 100%; }
        .pg-actions > .pg-btn { flex: 1 1 0; }
        .nx-stack { flex-direction: row; flex-wrap: wrap; }
        .nx-btn { min-height: 40px; }
      }

      /* ---------- หน้าสินทรัพย์ถาวร · เช่าซื้อ & ลิสซิ่ง · เงินเดือน ---------- */
      .data-card-sub { margin-top: .2rem; font-size: .78rem; font-weight: 500; color: #9A8C71; }
      /* ช่องเดือน/วันที่ในปุ่มขาว (.dash-pill) — ถอดกรอบ+พื้นของกฎกลาง #app-screen input[type=date|month] ใช้กรอบของปุ่มแทน */
      #app-screen .dash-pill input { border: 0; background: transparent; }
      .pill-k { font-size: .72rem; font-weight: 700; color: #9A8C71; white-space: nowrap; }

      @media (min-width: 1280px) {
        .kpi-grid.kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        .kpi-grid.kpi-5 .kpi-num { font-size: 1.4rem; }
      }
      @media (min-width: 1024px) { .kpi-grid.kpi-hist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
      .kpi.kpi-sm { padding: .8rem .95rem; border-radius: .9rem; box-shadow: none; background: #FFFDF8; }
      .kpi.kpi-sm .kpi-num { margin-top: .35rem; font-size: 1.1rem; }
      #ls-hist-summary:empty, #ls-hist-note:empty { display: none; }
      .ls-note {
        padding: .6rem .85rem; border-radius: .8rem; border: 1px solid #EFE7D6; background: #FBF8F1;
        font-size: .78rem; font-weight: 500; line-height: 1.6; color: #6E6553;
      }
      .ls-note b { color: var(--brand-ink); }
      .ls-hist-select { min-width: 280px; max-width: 100%; }

      .prog { height: 6px; margin-top: .35rem; border-radius: 999px; background: #F1EBDD; overflow: hidden; }
      .prog > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-light), var(--gold-dark)); }
      .cell-muted.is-bad { color: #BE123C; font-weight: 700; }
      .dtbl tbody tr.is-overdue { background-color: #FFF8F8; }
      .dtbl tfoot td { padding: .8rem 1rem; background: #FBF8F1; border-top: 1px solid #EFE7D6; font-weight: 800; color: var(--brand-ink); }

      /* ปุ่มลงมือทำในแถว (เช่น "บันทึกชำระ") — ปุ่มตัวหนังสือสีทอง แยกจากไอคอนจัดการ */
      .act-go {
        display: inline-flex; align-items: center; justify-content: center; gap: .3rem; white-space: nowrap;
        padding: .38rem .8rem; border-radius: .6rem; border: 1px solid #B08A3E;
        background: linear-gradient(180deg, #F7EDD8 0%, #EADCBB 100%); color: #5E4720;
        font-size: .75rem; font-weight: 800; transition: filter .15s ease, transform .12s ease;
      }
      .act-go:hover { filter: brightness(.97); }
      .act-go:active { transform: scale(.97); }

      /* แผงนำส่ง ปกส. / ภ.ง.ด.1 */
      .remit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1.1rem; }
      @media (min-width: 1024px) { .remit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      .remit-panel { border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.1rem; background: #FFFDF8; }
      .remit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
      .remit-label { font-size: .82rem; font-weight: 700; color: #6E6553; }
      .remit-sub { margin-top: .1rem; font-size: .72rem; font-weight: 500; color: #A3947A; }
      .remit-amt {
        font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums;
        font-size: 1.45rem; font-weight: 700; color: var(--brand-ink); white-space: nowrap;
      }
      .remit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .85rem; }
      .remit-fields .full { grid-column: 1 / -1; }
      .fld > label { display: block; margin-bottom: .25rem; font-size: .7rem; font-weight: 700; color: #8E836C; }
      .fld input, .fld select {
        width: 100%; height: 38px; padding: 0 .65rem; border: 1px solid var(--line); border-radius: .65rem;
        background: #FFFFFF; font-size: .85rem; font-weight: 600; color: #3C372C; outline: none;
      }
      .fld input:focus, .fld select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.16); }
      .fld input[type="number"] { text-align: right; font-weight: 800; }
      .remit-btn { width: 100%; justify-content: center; }
      .remit-diff { color: #BE123C; font-weight: 800; }

      @media (max-width: 639.98px) {
        .remit-fields { grid-template-columns: minmax(0, 1fr); }
        .ls-hist-select { min-width: 0; width: 100%; }
        .fld input, .fld select { height: 44px; }
        .kpi-grid.kpi-5 .kpi-num { font-size: 1.05rem; }
        /* ช่องเลือกงวด/เดือนในหัวหน้า — เต็มแถวให้เข้าแนวกับปุ่มหลักข้างล่าง */
        .pg-actions > .dash-pill { flex: 1 1 100%; }
        .pg-actions > .dash-pill input { flex: 1 1 auto; }
      }
      .row-acts > .ic-del:hover { background: #FFF1F3; border-color: #F7D3DA; color: #BE123C; }
      .row-acts > .cursor-help { color: #B9AC92; background: #F7F3EA; }
      .row-acts > span:not(.cursor-help) { font-size: .7rem; font-weight: 600; color: #A3947A; white-space: nowrap; }

      /* สมุดรายวัน — ป้ายเล่ม/ภาษี + บรรทัด Dr./Cr. */
      .jb {
        display: inline-flex; align-items: center; margin: .35rem .25rem 0 0; padding: .06rem .42rem; border-radius: .38rem;
        font-size: .66rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
      }
      .jl-box { padding: .5rem .7rem; border-radius: .6rem; background: #FAF7F0; }
      .jl { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; font-weight: 600; line-height: 1.55; }
      .jl-dr { color: #047857; }
      .jl-cr { color: #BE123C; padding-left: 1.1rem; }
      .jl-acc { min-width: 0; }
      .jl-amt { flex: 0 0 auto; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; }

      @media (max-width: 639.98px) {
        .pg-title { font-size: 1.35rem; }
        .pg-btn { width: 100%; justify-content: center; min-height: 44px; }
        /* การ์ดสรุป 2 คอลัมน์บนมือถือ — เรียงทีละใบกินจอแรกหมด ต้องเลื่อนนานกว่าจะเจอตาราง */
        .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
        .kpi { padding: .8rem .85rem; border-radius: .95rem; }
        .kpi-top { gap: .4rem; }
        .kpi-label { font-size: .74rem; }
        .kpi-badge { padding: .1rem .4rem; font-size: .66rem; }
        .kpi-num { margin-top: .45rem; font-size: 1.05rem; }
        .kpi-foot { font-size: .7rem; }
        .data-card { padding: .9rem; border-radius: 1rem; }
        .data-toolbar input[id^="search-"] { width: 100%; }
        .date-range { width: 100%; }
        .date-range input { flex: 1 1 0; }
        .data-toolbar [id^="fyq-"] > div { display: flex; }
        .data-toolbar .tb-end { margin-left: 0; }
        .data-toolbar .tb-end > .tb-btn { flex: 1 1 0; min-height: 44px; }
        .seg > button { min-height: 40px; }
        .dtbl-wrap { border: 0; border-radius: 0; }
        .row-acts { flex-wrap: wrap; justify-content: flex-start; }
        .row-acts > button, .row-acts > .cursor-help { width: 44px; height: 44px; }
        .cell-name { min-width: 0; }
        .jl-box { width: 100%; text-align: left; }
        /* ช่องที่มีหลายบรรทัด (ชื่อ + หมายเหตุ · ยอด + ช่องทาง · วันที่ + ป้าย · สถานะ + เลขเอกสารปลายทาง)
           ในการ์ดมือถือ td เป็น flex แนวนอน บรรทัดรองจะไปเบียดข้างบรรทัดหลัก — ให้ขึ้นบรรทัดใหม่ ชิดขวาแทน */
        .resp-table.dtbl td:not(.rt-head):not(.rt-full) { flex-wrap: wrap; column-gap: 1rem; row-gap: .15rem; }
        .resp-table.dtbl td:not(.rt-head):not(.rt-full) > :not(:first-child) { flex-basis: 100%; text-align: right; }
      }

      /* ==========================================================
         1️⃣2️⃣ หน้าภาษี — ภาษีซื้อ · ภาษีขาย · ยื่น ภ.พ.30 · ภ.พ.36 · หัก ณ ที่จ่าย
         ----------------------------------------------------------
         ใช้ชิ้นส่วนชุดเดียวกับหน้าแรกและหน้ารายการเอกสาร:
           .pg-head → .kpi-grid → .bg-white .data-card → .dtbl
         ในนี้มีเฉพาะของที่หน้าภาษีต้องใช้เพิ่มเท่านั้น
         ========================================================== */

      /* 📱 แถวรวมท้ายตารางบนมือถือ — กฎการ์ดหลักแปลงเป็นบล็อกให้แค่ table/tbody/tr/td
         พอ <tfoot> ยังเป็น table-footer-group ในพ่อที่เป็นบล็อก เบราว์เซอร์จะสร้างกล่องตารางซ่อน
         ครอบให้ แล้วแถวรวมจะถูกบีบเป็นกล่องแคบๆ ชิดซ้าย — ตรงนี้ปิดช่องนั้น */
      @media (max-width: 640px) {
        /* ⚠️ ต้องมี :not(.hidden) — ไม่งั้นกฎนี้ (0,1,1) ชนะ .hidden (0,1,0)
              แล้วแถวรวมที่ตัววาดสั่งซ่อนไว้จะยังโผล่บนมือถือพร้อมยอดของงวดก่อน */
        .resp-table tfoot:not(.hidden) { display: block; width: 100%; }
        .resp-table tfoot td[colspan] { text-align: right !important; }
        .resp-table tfoot td:empty { display: none; }
      }

      /* ยอดรวมท้ายรายงาน (.dtbl tfoot td มีพื้น/เส้นให้แล้ว ที่เหลือคือจัดตัวหนังสือ) */
      .dtbl tfoot .foot-k { font-size: .75rem; font-weight: 800; letter-spacing: .02em; color: #6E6553; }
      .dtbl tfoot .foot-k small { margin-left: .35rem; font-size: .72rem; font-weight: 600; color: #A3947A; }
      .dtbl tfoot .amt { font-size: .92rem; font-weight: 800; }
      /* แดงอิฐของแบรนด์ — ใช้กับ "จำนวนเงินภาษีมูลค่าเพิ่ม" ให้ต่างจากสีแดงเตือน (.is-due) */
      .amt.is-vat { color: #8E2B22; }

      /* บรรทัดหลักในช่องที่มีความหมาย (กำหนดยื่น / เดือนที่เคลมได้) — คู่กับ .cell-muted.is-bad ที่มีอยู่แล้ว */
      .cell-muted.is-good { color: #047857; font-weight: 700; }
      .cell-muted.is-info { color: #0369A1; font-weight: 700; }
      .cell-muted.wrap    { white-space: normal; }

      /* ป้ายสถานะเพิ่มของหน้าภาษี (ใช้คู่กับ .st-pill) */
      .st-credit { color: #0369A1; background: #F0F8FF; border-color: #CFE6F7; }
      .st-used   { color: #6E6553; background: #F6F3EC; border-color: #E7E0D0; }
      .st-late   { color: #B45309; background: #FFF8EC; border-color: #F2DFB8; }

      /* แถบเตือนของหน้าภาษี (ภ.พ.36 เลยกำหนดยื่น) */
      .tax-alert {
        display: flex; align-items: flex-start; gap: .55rem;
        padding: .75rem .95rem; border-radius: .9rem;
        border: 1px solid #F3D3D8; background: #FFF6F7;
        font-size: .82rem; font-weight: 700; line-height: 1.6; color: #9F1239;
      }
      .tax-alert svg { flex: 0 0 auto; margin-top: .1rem; }
      .tax-alert small { display: block; margin-top: .1rem; font-size: .75rem; font-weight: 600; color: #B6737F; }

      /* ขั้นตอนการทำงาน (ภ.พ.36: จ่ายเงิน → ยื่นแบบ → เคลมภาษีซื้อ) — อยู่ในกล่องพับ .pg-note */
      .step-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
      @media (min-width: 768px) { .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
      .step-card { padding: .75rem .85rem; border-radius: .8rem; border: 1px solid var(--line); background: #FFFDF8; }
      .step-card .n { font-size: .66rem; font-weight: 800; letter-spacing: .08em; color: #A3947A; }
      .step-card .t { margin-top: .25rem; font-size: .85rem; font-weight: 800; color: var(--brand-ink); }
      .step-card .d { margin-top: .25rem; font-size: .74rem; font-weight: 600; line-height: 1.65; color: #8E836C; }
      .step-card.is-now { background: #FBF6E9; border-color: #E9D8B0; }
      .step-card.is-ok  { background: #F4FBF7; border-color: #CDEBDD; }

      /* ภ.พ.36: ยอดค้างนำส่งรวมทุกงวด — มุมขวาของหัวการ์ดตาราง (ตัวเลขนี้ไม่ขึ้นกับตัวกรอง) */
      .pp36-due {
        margin-left: auto; display: inline-flex; align-items: baseline; gap: .5rem;
        padding: .4rem .8rem; border-radius: .8rem;
        border: 1px solid #F6D3D9; background: #FFF5F6;
      }
      .pp36-due-k { font-size: .72rem; font-weight: 700; color: #A4566A; white-space: nowrap; }
      .pp36-due-v {
        font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums;
        font-size: 1rem; font-weight: 800; color: #BE123C; white-space: nowrap;
      }

      /* การ์ดนำส่งภาษีหัก ณ ที่จ่าย — renderWhtRemitPanel() วาดลงใน .remit-grid */
      .remit-empty {
        grid-column: 1 / -1; padding: 1.5rem 1rem; text-align: center;
        border: 1px dashed var(--line); border-radius: 1rem; background: #FFFDF8;
        font-size: .82rem; font-weight: 600; color: #A3947A;
      }
      .remit-panel.is-done { background: #F6FBF8; border-color: #CDEBDD; }
      .remit-panel.is-due  { background: #FFFCF4; border-color: #EFE0BE; }
      .remit-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .9rem; }
      .remit-mini > div {
        min-width: 0; padding: .5rem .6rem; text-align: center;
        border-radius: .7rem; background: rgba(255,255,255,.85); border: 1px solid rgba(176,138,62,.14);
      }
      .remit-mini .k { font-size: .68rem; font-weight: 700; color: #8E836C; }
      .remit-mini .v {
        margin-top: .15rem; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums;
        font-size: .88rem; font-weight: 800; color: var(--brand-ink);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .remit-mini .v.is-in   { color: #047857; }
      .remit-mini .v.is-due  { color: #BE123C; }
      .remit-mini .v.is-zero { color: #C4B9A2; }
      .remit-note { margin-top: .7rem; font-size: .72rem; font-weight: 600; line-height: 1.65; color: #A3947A; }
      .remit-go { width: 100%; justify-content: center; margin-top: .85rem; min-height: 40px; }
      .remit-go:disabled {
        background: #F4F1EA !important; color: #B7AA8C !important; border-color: #EFE7D6 !important;
        box-shadow: none !important; filter: none; cursor: not-allowed;
      }

      @media (max-width: 639.98px) {
        .remit-mini { gap: .35rem; }
        .remit-mini .v { font-size: .8rem; }
        .remit-go { min-height: 44px; }
        .dtbl tfoot .amt { font-size: .85rem; }
        .pp36-due { width: 100%; margin-left: 0; justify-content: space-between; }
      }

      /* ==========================================================
         1️⃣3️⃣ หน้าบัญชีแกนกลาง — ผังบัญชี · บัญชีแยกประเภท · งบทดลอง · ยอดยกมา
         ----------------------------------------------------------
         โครงเดียวกับหน้าอื่น (.pg-head → .kpi → .data-card → .dtbl)
         ในนี้มีเฉพาะชิ้นส่วนที่ 4 หน้านี้ต้องใช้เพิ่ม
         ========================================================== */

      /* ช่องเลือกบัญชีในแถบตัวกรอง (บัญชีแยกประเภท)
         ⚠️ uiMakeSearchable สร้างช่องพิมพ์ด้วย className ของ <select> ตัวนี้ + " pr-8"
            คลาสนี้จึงต้องสวยทั้งตอนเป็น select จริง และตอนถูกอัปเกรดเป็นช่องพิมพ์ */
      .tb-sel {
        width: 22rem; max-width: 100%; height: 38px; padding: 0 .85rem;
        border: 1px solid var(--line); border-radius: .75rem; background: #FFFFFF;
        font-size: .85rem; font-weight: 700; color: #3C372C; outline: none; cursor: pointer;
        appearance: none; -webkit-appearance: none;
      }
      select.tb-sel {
        padding-right: 2.1rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238E836C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right .7rem center;
      }
      .tb-sel:hover  { border-color: var(--gold); }
      .tb-sel:focus  { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.16); }

      /* บัญชีแยกประเภท: ช่วงบัญชี "ตั้งแต่ … ถึง …" + ปุ่มทุกบัญชี
         ช่องสองช่องแคบกว่า .tb-sel ปกติ ไม่งั้นแถบตัวกรองล้นเป็น 3 บรรทัด */
      .gl-acc-range { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
      .gl-acc-range .sep { font-size: .78rem; font-weight: 700; color: #8E836C; }
      .tb-sel.gl-acc-sel { width: 16rem; }
      .gl-acc-range > .tb-btn { height: 38px; }
      /* หัวกลุ่ม + แถวรวมของแต่ละบัญชี (โหมดหลายบัญชี) */
      .dtbl tr.gl-grp td { background: #FBF6E9; padding-top: .7rem; padding-bottom: .7rem; }
      .dtbl tr.gl-grp .doc-no { display: inline; margin-right: .5rem; }
      .gl-grp-name { font-weight: 800; color: #2E2A22; margin-right: .6rem; }
      /* การ์ดมือถือ (≤640px) จัด td[colspan] ไว้กลาง — หัวกลุ่มต้องชิดซ้าย (selector นี้เจาะจงกว่า ชนะไม่ว่าอยู่ตรงไหน) */
      .resp-table tr.gl-grp td[colspan] { text-align: left !important; }
      .dtbl tr.gl-sum td { background: #FCFBF7; border-bottom: 2px solid #EDE4CF; font-weight: 800; }

      /* ป้ายหมวดบัญชี (ใช้คู่กับ .st-pill) — เรียงสีตามเลขนำหน้ารหัสบัญชี 1–5 */
      .st-asset  { color: #0369A1; background: #F0F8FF; border-color: #CFE6F7; }
      .st-liab   { color: #B45309; background: #FFF8EC; border-color: #F2DFB8; }
      .st-equity { color: #6D28D9; background: #F5F0FF; border-color: #DDD0FB; }
      .st-rev    { color: #047857; background: #F0FAF5; border-color: #CDEBDD; }
      .st-exp    { color: #BE123C; background: #FFF4F6; border-color: #F7D6DC; }

      /* ปุ่มสลับค่าในแถว (ผังบัญชี: ช่องทางรับ-จ่ายเงิน · หมวดในงบกำไรขาดทุน) */
      .tgl {
        display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; cursor: pointer;
        padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--line);
        background: #FFFFFF; color: #8E836C; font-size: .72rem; font-weight: 700;
        transition: background .15s ease, border-color .15s ease, color .15s ease;
      }
      .tgl:hover      { border-color: var(--gold); background: #FBF6E9; color: var(--gold-dark); }
      .tgl.on         { border-color: #CDEBDD; background: #F0FAF5; color: #047857; }
      .tgl.on:hover   { border-color: #9FD9BE; background: #E7F6EE; }
      .tgl.is-cogs    { border-color: #F8D6BD; background: #FFF4EC; color: #C2410C; }
      .tgl.is-cogs:hover { border-color: #EFBE98; background: #FFEDE0; }
      .tgl-note { display: block; margin-top: .25rem; font-size: .64rem; font-weight: 700; color: #B7AA8C; }
      .cell-dash { color: #D5CCB8; font-weight: 700; }

      /* ช่องกรอกที่อยู่ในตาราง (ยอดยกมา) */
      .tin {
        width: 100%; height: 38px; padding: 0 .65rem;
        border: 1px solid var(--line); border-radius: .6rem; background: #FFFDF8;
        font-size: .85rem; font-weight: 600; color: #3C372C; outline: none;
      }
      .tin::placeholder { color: #C4B9A2; font-weight: 500; }
      .tin:focus { border-color: var(--gold); background: #FFFFFF; box-shadow: 0 0 0 3px rgba(176,138,62,.16); }
      .tin.num {
        text-align: right; font-weight: 800;
        font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums;
      }
      .tin.is-dr { color: #047857; }
      .tin.is-cr { color: #BE123C; }
      select.tin {
        cursor: pointer; padding-right: 2rem; appearance: none; -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238E836C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right .65rem center;
      }
      /* กฎกลาง #app-screen input[type=date|month] ใส่กรอบ/พื้นของตัวเอง — ในตารางใช้กรอบของ .tin */
      #app-screen .tin[type="date"], #app-screen .tin[type="month"] { background-color: #FFFDF8; border-color: var(--line); }
      /* แถวกรอกข้อมูลไม่ต้องมีลายทางหรือไฮไลต์ตอนชี้ — ตาจะได้อยู่กับช่องที่กำลังพิมพ์ */
      .dtbl.is-form tbody tr:hover { background-color: transparent; }
      .dtbl.is-form tbody td { padding: .45rem .55rem; }
      .dtbl.is-form tbody td:first-child { padding-left: 1rem; }
      .dtbl.is-form tbody td:last-child  { padding-right: 1rem; }

      /* เลขลำดับขั้นตอนหน้ายอดยกมา */
      .ob-step {
        display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; flex: 0 0 26px; border-radius: 999px;
        background: #F7EEDB; color: #7A5D28; font-size: .78rem; font-weight: 800;
        box-shadow: inset 0 0 0 1px rgba(176,138,62,.22);
      }
      .ob-head { display: flex; align-items: center; gap: .6rem; min-width: 0; }
      /* ตารางคู่บัญชีที่ระบบจะลงให้ (⑥ ตรวจสอบและบันทึก) */
      .ob-preview { border: 1px solid #EFE7D6; border-radius: .9rem; overflow-x: auto; }
      .ob-preview table { width: 100%; min-width: 340px; border-collapse: collapse; font-size: .85rem; }
      .ob-preview thead th {
        padding: .6rem 1rem; background: #FBF8F1; border-bottom: 1px solid #EFE7D6;
        font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: #8E836C; text-align: left;
      }
      .ob-preview thead th:not(:first-child) { text-align: right; }
      .ob-preview tbody td { padding: .6rem 1rem; border-bottom: 1px solid #F3EDE1; color: #3C372C; font-weight: 600; }
      .ob-preview tbody tr.is-plug { background: #FFFCF4; }
      .ob-preview tfoot td { padding: .7rem 1rem; background: #FBF8F1; border-top: 1px solid #EADFC8; font-weight: 800; color: var(--brand-ink); }
      .ob-preview .plug-tag { margin-left: .4rem; font-size: .66rem; font-weight: 800; color: #B45309; }

      /* กล่องบอกผล (วันที่ยกมาถูกไหม · เดบิตเท่าเครดิตหรือยัง) */
      .ob-note {
        display: flex; align-items: flex-start; gap: .55rem;
        padding: .7rem .9rem; border-radius: .8rem;
        font-size: .78rem; font-weight: 700; line-height: 1.65;
      }
      .ob-note svg { flex: 0 0 auto; margin-top: .15rem; }
      .ob-note.is-ok  { border: 1px solid #CDEBDD; background: #F4FBF7; color: #065F46; }
      .ob-note.is-bad { border: 1px solid #F3D3D8; background: #FFF6F7; color: #9F1239; }
      .ob-note .go {
        display: inline-block; margin-top: .4rem; padding: .3rem .75rem; border-radius: .6rem;
        border: 1px solid #F3D3D8; background: #FFFFFF; color: #BE123C; font-size: .72rem; font-weight: 800;
      }
      .ob-note .go:hover { background: #FFF1F3; border-color: #E9A9B5; }

      @media (max-width: 639.98px) {
        .tb-sel, .tb-sel.gl-acc-sel { width: 100%; height: 44px; }
        .gl-acc-range, .gl-acc-range > .ui-ss { width: 100%; }
        .gl-acc-range > .tb-btn { width: 100%; height: 44px; justify-content: center; }
        .tin { height: 44px; }
        .dtbl.is-form tbody td { padding: .35rem 1rem; }
        .ob-preview table { font-size: .8rem; }
      }

      /* ==========================================================
         1️⃣4️⃣ หน้าตั้งค่าธุรกิจ
         ----------------------------------------------------------
         เป็นฟอร์มล้วน ไม่มีตาราง — หัวหน้าใช้ .pg-head เหมือนหน้าอื่น
         ส่วนตัวฟอร์มเป็นแผงสองคอลัมน์ของตัวเอง (.set-shell) ไม่ใช่ .data-card หลายใบ
           .set-nav   เมนูหัวข้อฝั่งซ้าย   → 52-settings-nav.js สลับ .is-on
           .set-pane  แผงเนื้อหาฝั่งขวา    → โชว์ทีละอัน
           .set-foot  แถบปุ่มก้นแผง        → ยกเลิก / บันทึก
         ========================================================== */

      /* ---------- แผงตั้งค่าสองคอลัมน์ ---------- */
      .set-shell {
        display: grid; grid-template-columns: 15.5rem minmax(0, 1fr);
        border: 1px solid var(--line); border-radius: 1.25rem; background: #FFFFFF; overflow: hidden;
        box-shadow: 0 1px 2px rgba(60,55,44,.04), 0 10px 28px -24px rgba(94,71,32,.32);
      }

      /* ---------- เมนูหัวข้อฝั่งซ้าย ---------- */
      .set-nav { padding: 1.1rem .75rem 1.25rem; border-right: 1px solid var(--line); background: #FBF8F1; }
      .set-nav-k {
        padding: 0 .6rem; margin-bottom: .4rem;
        font-size: .67rem; font-weight: 800; letter-spacing: .09em; color: #A3947A; text-transform: uppercase;
      }
      .set-nav-k ~ .set-nav-k { margin-top: 1.1rem; }
      .set-nav-btn {
        display: flex; align-items: center; gap: .6rem; width: 100%;
        padding: .55rem .6rem; border-radius: .75rem;
        font-size: .84rem; font-weight: 700; color: #6E6553; text-align: left;
        transition: background .15s ease, color .15s ease, box-shadow .15s ease;
      }
      .set-nav-btn + .set-nav-btn { margin-top: .15rem; }
      /* ⚠️ .set-nav-btn เป็น display:flex (0,1,0) เท่ากับ .hidden พอดี — ต้องเขียนกฎซ่อนที่ชนะให้ชัด
            หน้าผู้ใช้งานซ่อนหัวข้อ "เชิญ"/"คำเชิญที่รอตอบรับ" ด้วย .hidden ตามบทบาท */
      .set-nav-btn.hidden { display: none; }
      .set-nav-btn > svg { flex: 0 0 auto; color: #B7AA8C; transition: color .15s ease; }
      /* ป้ายชื่อหัวข้อ = <span> ที่ไม่มีคลาส · ส่วน .set-nav-lock / .set-nav-go ไปชิดขวา */
      .set-nav-btn > span:not([class]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .set-nav-btn:hover { background: #F3EBD9; color: var(--gold-dark); }
      .set-nav-btn:hover > svg { color: var(--gold-dark); }
      .set-nav-btn.is-on {
        background: #FFFFFF; color: var(--brand-ink);
        box-shadow: 0 1px 2px rgba(60,55,44,.07), 0 0 0 1px rgba(176,138,62,.22);
      }
      .set-nav-btn.is-on > svg { color: var(--gold); }
      .set-nav-lock { margin-left: auto; display: inline-flex; align-items: center; color: #C8A9AF; }
      .set-nav-btn > svg.set-nav-go { margin-left: auto; color: #C4B79C; }

      /* ---------- เนื้อหาฝั่งขวา ---------- */
      .set-body  { display: flex; flex-direction: column; min-width: 0; }
      .set-panes { flex: 1 1 auto; padding: 1.4rem 1.5rem 1.5rem; }
      /* ⚠️ โชว์ทีละแผงด้วยคลาสของตัวเอง ไม่ใช้ .hidden — กับดัก specificity เดิมจะได้ไม่กลับมาอีก */
      .set-pane { display: none; }
      .set-pane.is-on { display: block; }
      .set-sec {
        display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
        gap: .75rem; margin-bottom: 1rem;
      }
      .set-sec-t { font-size: 1.05rem; font-weight: 800; color: var(--brand-ink); }
      .set-sec-d { margin-top: .25rem; font-size: .79rem; font-weight: 500; line-height: 1.7; color: #9A8C71; }
      .set-sec-d b { font-weight: 800; color: #6E6553; }
      /* หัวข้อย่อยตัวที่สองในแผงเดียวกัน (ลายเซ็น ต่อจากโลโก้) — คั่นด้วยเส้น */
      .set-sec-gap { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }

      /* ---------- แถบปุ่มก้นแผง ---------- */
      .set-foot {
        display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .6rem;
        padding: .85rem 1.5rem; border-top: 1px solid var(--line); background: #FBF8F1;
      }
      .set-foot-note { flex: 1 1 10rem; min-width: 0; font-size: .74rem; font-weight: 600; color: #A3947A; }
      .set-cancel { height: 42px; padding: 0 1.2rem; }

      /* ---------- หน้าผู้ใช้งานและสิทธิ์ (ใช้ .set-shell ชุดเดียวกับหน้าตั้งค่า) ----------
         แถวผู้ใช้งาน/คำเชิญ ถูกปั้นเป็นสตริงใน 51-team.js — แก้คลาสที่นั่นต้องแก้ที่นี่ด้วย */
      .tm-row {
        display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
        padding: .85rem 0; border-top: 1px solid #F3EDE1;
      }
      .tm-row:first-child { border-top: 0; padding-top: .2rem; }
      .tm-ava {
        flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: 999px;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid #EFE2C4; background: #FBF6E9; color: var(--gold-dark);
      }
      .tm-ava.is-wait { border-color: #CFE6F7; background: #F4FAFF; color: #0B4A6F; }
      .tm-main  { flex: 1 1 12rem; min-width: 0; }
      .tm-email { font-size: .88rem; font-weight: 800; color: var(--brand-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .tm-you   { margin-left: .35rem; font-size: .7rem; font-weight: 800; color: var(--gold-dark); }
      .tm-sub   { margin-top: .15rem; font-size: .72rem; font-weight: 600; color: #A3947A; }
      .tm-sel {
        height: 34px; padding: 0 .55rem; border: 1px solid var(--line); border-radius: .6rem;
        background: #FFFFFF; font-size: .8rem; font-weight: 700; color: #3C372C; outline: none;
      }
      .tm-sel:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.16); }
      .tm-act {
        height: 34px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: .6rem;
        background: #FFFFFF; font-size: .75rem; font-weight: 700; color: #6E6553; white-space: nowrap;
        transition: border-color .15s ease, color .15s ease, background .15s ease;
      }
      .tm-act:hover { border-color: var(--gold); color: var(--gold-dark); background: #FBF6E9; }
      .tm-act.is-danger { border-color: #F3D3D8; color: #9F1239; }
      .tm-act.is-danger:hover { border-color: #E8AFB8; color: #9F1239; background: #FFF6F7; }
      .tm-note { padding: .9rem 0; font-size: .82rem; font-weight: 600; color: #A3947A; }
      .tm-note.is-err { color: #9F1239; }

      /* การ์ดอธิบายบทบาท */
      .tm-role { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 1rem; background: #FBF8F1; }
      .tm-role-h { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 800; color: var(--brand-ink); }
      .tm-role-h > svg { flex: 0 0 auto; color: var(--gold); }
      .tm-role-d { margin-top: .4rem; font-size: .76rem; font-weight: 500; line-height: 1.75; color: #6E6553; }

      /* กล่องคำเชิญบนหน้าเลือกบริษัท (/companies) */
      .tm-inv-box { border: 1px solid #CFE6F7; border-radius: 1.25rem; background: #FFFFFF; padding: 1.25rem; box-shadow: 0 1px 2px rgba(60,55,44,.04); }
      .tm-inv-h { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 800; color: var(--brand-ink); }
      .tm-inv-h > svg { flex: 0 0 auto; color: #0B4A6F; }
      .tm-inv-d { margin-top: .25rem; margin-bottom: 1rem; font-size: .78rem; font-weight: 500; color: #9A8C71; }
      .tm-inv-row {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
        padding: .85rem 1rem; border: 1px solid #DCEDFA; border-radius: .9rem; background: #F7FBFE;
      }
      .tm-inv-row + .tm-inv-row { margin-top: .6rem; }
      .tm-inv-name { font-size: .9rem; font-weight: 800; color: var(--brand-ink); }
      .tm-inv-meta { margin-top: .15rem; font-size: .72rem; font-weight: 600; color: #8E836C; }
      .tm-inv-meta b { font-weight: 800; color: #6E6553; }

      /* กล่องข้อความอธิบาย/เตือนในฟอร์ม */
      .fnote {
        display: flex; align-items: flex-start; gap: .55rem;
        padding: .75rem .95rem; border-radius: .9rem;
        border: 1px solid var(--line); background: #FBF8F1;
        font-size: .78rem; font-weight: 600; line-height: 1.7; color: #6E6553;
      }
      /* ⚠️ .fnote เป็น display:flex (0,1,0) เท่ากับ .hidden — ต้องเขียนกฎซ่อนที่ชนะให้ชัด
            ไม่งั้นกล่องที่โค้ดสั่งซ่อน (เช่น หมายเหตุล็อกวันมีผล VAT) จะโผล่ตลอด */
      .fnote.hidden { display: none; }
      .fnote svg { flex: 0 0 auto; margin-top: .2rem; }
      .fnote b { font-weight: 800; color: var(--brand-ink); }
      .fnote.is-lock { border-color: #F3D3D8; background: #FFF6F7; color: #9F1239; }
      .fnote.is-lock b { color: #9F1239; }
      .fnote.is-warn { border-color: #F2DFB8; background: #FFF9EE; color: #8A5A12; }
      .fnote.is-warn b { color: #7A5D28; }
      .fnote.is-ok   { border-color: #CDEBDD; background: #F4FBF7; color: #065F46; }
      .fnote.is-ok b { color: #065F46; }
      .fnote.is-info { border-color: #CFE6F7; background: #F4FAFF; color: #0B4A6F; }
      .fnote.is-info b { color: #0B4A6F; }

      /* หัวข้อในการ์ดตั้งค่า — ไอคอนทองนำหน้า */
      .set-h { display: flex; align-items: center; gap: .55rem; min-width: 0; }
      .set-h > svg { flex: 0 0 auto; color: var(--gold); }

      /* การ์ดประเภทธุรกิจ — ล็อกถาวร โชว์อย่างเดียว (.is-on = ใบที่เลือกไว้ตอนสร้างบริษัท) */
      .biz-card {
        position: relative; display: block; padding: 1.15rem 1.25rem;
        border: 1px solid var(--line); border-radius: 1.1rem; background: #FFFFFF;
        opacity: .5; cursor: not-allowed;
        transition: opacity .18s ease, border-color .18s ease, background .18s ease;
      }
      .biz-card.is-on {
        opacity: 1; border-color: var(--gold);
        background: linear-gradient(135deg, #FDFAF2 0%, #F5EEDF 100%);
        box-shadow: 0 1px 2px rgba(60,55,44,.05), 0 12px 26px -20px rgba(122,93,40,.45);
      }
      .biz-card .tick {
        position: absolute; top: 1rem; right: 1rem; width: 20px; height: 20px;
        border-radius: 999px; border: 2px solid #D9CFB9; background: #FFFFFF;
      }
      .biz-card.is-on .tick { border-color: var(--gold-dark); background: var(--gold); box-shadow: inset 0 0 0 3px #fff; }
      .biz-card .ico { display: inline-flex; color: var(--gold-dark); }
      .biz-card h4 { margin-top: .6rem; font-size: 1rem; font-weight: 800; color: var(--brand-ink); }
      .biz-card .basis { margin-top: .15rem; font-size: .74rem; font-weight: 700; color: #A3947A; }
      .biz-card .desc { margin-top: .65rem; font-size: .76rem; font-weight: 500; line-height: 1.75; color: #6E6553; }
      .biz-card .desc b { font-weight: 800; color: var(--brand-ink); }
      .biz-card .plus { margin-top: .55rem; font-size: .74rem; font-weight: 700; color: #047857; }

      /* กล่องอัปโหลดรูป (โลโก้ · ลายเซ็น) */
      .up-box {
        flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
        min-height: 150px; padding: 1rem;
        border: 1px dashed #DED3BA; border-radius: 1rem; background: #FBF8F1;
      }
      .up-box img { max-height: 104px; max-width: 100%; object-fit: contain; }
      .up-ph { font-size: .78rem; font-weight: 600; color: #B7AA8C; text-align: center; }
      .up-acts { display: flex; gap: .5rem; margin-top: .75rem; }
      .up-acts > .tb-btn.grow { flex: 1 1 auto; }
      .up-hint { margin-top: .5rem; font-size: .72rem; font-weight: 600; line-height: 1.7; color: #A3947A; }
      .sig-state { margin-top: .5rem; font-size: .72rem; font-weight: 700; line-height: 1.7; color: #A3947A; }
      .sig-state.is-warn { color: #B45309; }
      .sig-state.is-ok   { color: #047857; }

      /* ตัวอย่างช่องลงนามบนเอกสารจริง */
      .sig-sample { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 1rem; background: #FBF8F1; }
      .sig-sample-k { font-size: .7rem; font-weight: 800; letter-spacing: .04em; color: #8E836C; }
      .sig-sample-paper {
        margin: .8rem auto 0; width: 15rem; max-width: 100%; padding: .85rem .6rem .7rem;
        background: #FFFFFF; border: 1px solid #EFE7D6; border-radius: .6rem; text-align: center;
      }
      .sig-sample-ink { height: 3rem; display: flex; align-items: flex-end; justify-content: center; }
      .sig-sample-ink img { max-height: 3rem; max-width: 78%; object-fit: contain; }
      .sig-sample-line { border-top: 1px solid #57503F; padding-top: .35rem; font-size: .72rem; font-weight: 700; color: #3C372C; }
      .sig-sample-name { margin-top: .2rem; font-size: .66rem; font-weight: 600; line-height: 1.5; color: #8E836C; }

      /* รอบบัญชีปัจจุบัน — ช่องอ่านอย่างเดียวโทนทอง */
      .fy-box {
        min-height: 38px; display: flex; align-items: center;
        padding: .5rem .85rem; border-radius: .65rem;
        border: 1px solid #E9D8B0; background: #FBF6E9;
        font-size: .82rem; font-weight: 800; color: #7A5D28; line-height: 1.5;
      }

      /* ส่วนเสริมของ .fld ที่หน้านี้ต้องใช้ */
      .fld textarea {
        width: 100%; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: .65rem;
        background: #FFFFFF; font-size: .85rem; font-weight: 600; color: #3C372C; outline: none; resize: none;
      }
      .fld textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.16); }
      .fld input[readonly], .fld textarea[readonly],
      .fld input:disabled, .fld select:disabled, .fld textarea:disabled {
        background: #F6F3EC; color: #8E836C; cursor: not-allowed;
      }
      .fld .hint { margin-top: .3rem; font-size: .7rem; font-weight: 600; line-height: 1.6; color: #A3947A; }
      .fld.is-mono input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
      .fld.is-narrow input { width: 7rem; }
      .fld.is-mid input { width: 18rem; max-width: 100%; }
      .fld-unit { display: flex; align-items: center; gap: .5rem; }
      .fld-unit .u { font-size: .82rem; font-weight: 700; color: #8E836C; }
      /* กฎกลาง #app-screen input[type=date] ใส่พื้น/กรอบของตัวเอง — ในฟอร์มใช้ของ .fld */
      #app-screen .fld input[type="date"] { background: #FFFFFF; border-color: var(--line); }
      #app-screen .fld input[type="date"]:disabled, #app-screen .fld input[type="date"][readonly] { background: #F6F3EC; }

      /* สวิตช์ + คำอธิบายข้างๆ */
      .sw-row { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
      .sw-row .t { display: block; font-size: .88rem; font-weight: 800; color: var(--brand-ink); }
      .sw-row .d { display: block; margin-top: .15rem; font-size: .74rem; font-weight: 600; line-height: 1.65; color: #8E836C; }

      .set-save { min-width: 12rem; justify-content: center; }

      /* จอแคบกว่าเดสก์ท็อป — เมนูหัวข้อกลายเป็นแถบเลื่อนแนวนอนเหนือเนื้อหา */
      @media (max-width: 1023.98px) {
        .set-shell { grid-template-columns: minmax(0, 1fr); }
        .set-nav {
          display: flex; gap: .4rem; padding: .7rem .8rem; overflow-x: auto;
          border-right: 0; border-bottom: 1px solid var(--line);
          /* แถบเลื่อนกลางหน้าดูเป็นขีดแปลกปลอม — ชิปที่ถูกตัดขอบบอกอยู่แล้วว่าเลื่อนได้ */
          scrollbar-width: none;
        }
        .set-nav::-webkit-scrollbar { display: none; }
        .set-nav-k { display: none; }
        .set-nav-btn {
          width: auto; flex: 0 0 auto; margin-top: 0;
          border: 1px solid var(--line); background: #FFFFFF;
        }
        .set-nav-btn.is-on { border-color: var(--gold); }
        .set-nav-lock, .set-nav-btn > svg.set-nav-go { display: none; }
        .set-panes { padding: 1.1rem 1rem 1.2rem; }
        .set-foot { padding: .8rem 1rem; }
      }

      @media (max-width: 639.98px) {
        .biz-card { padding: 1rem; }
        .up-box { min-height: 130px; }
        .set-foot-note { display: none; }
        .set-cancel { flex: 1 1 0; min-height: 44px; }
        .set-save { flex: 1 1 0; min-width: 0; min-height: 44px; }
        .fld.is-narrow input, .fld.is-mid input { width: 100%; }
      }

      /* ==========================================================
         1️⃣5️⃣ งบการเงิน · ปิดงวด/ปิดปี · คลังสินค้า · รายงานสินค้า
         ----------------------------------------------------------
         โครงหน้ายังเป็นชุดเดิม (.pg-head → .kpi → .data-card)
         ในนี้คือชิ้นส่วนเฉพาะของ 6 หน้านี้
         ========================================================== */

      /* ---------- บรรทัดในงบการเงิน (งบกำไรขาดทุน · งบดุล) ---------- */
      .rpt-paper { border: 1px solid var(--line); border-radius: 1.1rem; overflow: hidden; background: #FFFFFF; }
      .rpt-paper-head {
        padding: .8rem 1.25rem; text-align: center;
        background: #FBF8F1; border-bottom: 1px solid #EFE7D6;
        font-size: .76rem; font-weight: 800; letter-spacing: .14em; color: #7A5D28;
      }
      .rpt-paper-body { padding: 1.25rem 1.4rem; }
      .rpt-sec {
        margin: 1.5rem 0 .35rem; font-size: .7rem; font-weight: 800;
        letter-spacing: .08em; color: #A3947A;
      }
      .rpt-sec:first-child { margin-top: 0; }
      .rpt-line {
        display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
        padding: .35rem 0; font-size: .85rem; font-weight: 600; color: #57503F;
      }
      .rpt-line > .v {
        flex: 0 0 auto; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif;
        font-variant-numeric: tabular-nums; font-weight: 700; color: #3C372C; white-space: nowrap;
      }
      .rpt-line.is-indent { padding-left: 1rem; }
      .rpt-line.is-sum {
        margin-top: .3rem; padding-top: .55rem; border-top: 1px solid #EFE7D6;
        font-weight: 800; color: var(--brand-ink);
      }
      .rpt-line.is-sum > .v { font-weight: 800; color: var(--gold-dark); }
      .rpt-line.is-big { font-size: .95rem; }
      .rpt-line > .v.is-neg { color: #BE123C; }
      /* แถบยอดรวมท้ายงบ — ใช้พื้น .rpt-total ที่มีอยู่แล้ว */
      .rpt-grand {
        display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
        margin-top: 1.5rem; padding: .9rem 1.2rem; border-radius: .9rem;
        font-size: 1rem; font-weight: 800;
      }
      .rpt-grand > .v { font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }

      /* ---------- ปิดงวดบัญชี: การ์ดรายเดือน ---------- */
      .mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .75rem; }
      .mon-card {
        padding: .9rem 1rem; border-radius: 1rem;
        border: 1px solid var(--line); background: #FFFFFF;
        transition: border-color .15s ease, background .15s ease;
      }
      .mon-card.is-closed { border-color: #E9D8B0; background: #FBF6E9; }
      .mon-card.is-empty  { border-color: #F2EDE1; background: #FCFBF7; }
      .mon-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
      .mon-card .m { font-size: .88rem; font-weight: 800; color: var(--brand-ink); }
      .mon-card.is-closed .m { color: #7A5D28; }
      .mon-card .n { margin-top: .15rem; font-size: .72rem; font-weight: 600; color: #A3947A; }
      .mon-card.is-empty .n { color: #C4B9A2; }
      .mon-card .when { margin-top: .45rem; font-size: .68rem; font-weight: 600; color: #B7AA8C; }
      .mon-card .st-pill { margin-top: .5rem; }
      /* แถบเลื่อนปี */
      .yr-nav { display: flex; align-items: center; justify-content: center; gap: .9rem; }
      .yr-nav button {
        width: 36px; height: 36px; flex: 0 0 36px; border-radius: .7rem;
        border: 1px solid var(--line); background: #FFFFFF; color: #8E836C;
        font-size: 1rem; font-weight: 800; transition: border-color .15s ease, color .15s ease, background .15s ease;
      }
      .yr-nav button:hover { border-color: var(--gold); color: var(--gold-dark); background: #FBF6E9; }
      .yr-nav .y { min-width: 11rem; text-align: center; font-size: 1rem; font-weight: 800; color: var(--brand-ink); }

      /* ---------- ปิดบัญชีสิ้นปี ---------- */
      .ye-sum { padding: 1rem 1.15rem; border-radius: 1rem; border: 1px solid #E9D8B0; background: #FBF6E9; }
      .ye-sum .r {
        display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
        padding: .28rem 0; font-size: .85rem; font-weight: 700; color: #7A6E57;
      }
      .ye-sum .r > .v { font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
      .ye-sum .r.is-net   { margin-top: .35rem; padding-top: .55rem; border-top: 1px solid #E4D3AA; font-size: .95rem; font-weight: 800; color: var(--brand-ink); }
      .ye-sum .r.is-final { margin-top: .35rem; padding-top: .55rem; border-top: 2px solid #E4D3AA; font-size: .95rem; font-weight: 800; color: #7A5D28; }
      .ye-sum .r .v.is-in  { color: #047857; }
      .ye-sum .r .v.is-due { color: #BE123C; }
      /* ตารางคู่บัญชีที่จะบันทึก — ใช้โครงเดียวกับ .ob-preview ของหน้ายอดยกมา */
      .ye-lines { border: 1px solid #EFE7D6; border-radius: .9rem; overflow-x: auto; }
      .ye-lines table { width: 100%; min-width: 340px; border-collapse: collapse; font-size: .8rem; }
      .ye-lines thead th {
        padding: .55rem .9rem; background: #FBF8F1; border-bottom: 1px solid #EFE7D6; text-align: left;
        font-size: .68rem; font-weight: 700; letter-spacing: .03em; color: #8E836C;
      }
      .ye-lines thead th:not(:first-child) { text-align: right; }
      .ye-lines tbody td { padding: .5rem .9rem; border-bottom: 1px solid #F3EDE1; font-weight: 600; color: #3C372C; }
      .ye-lines tfoot td { padding: .6rem .9rem; background: #FBF8F1; border-top: 1px solid #EADFC8; font-weight: 800; color: var(--brand-ink); }

      /* ---------- รายงานสินค้าและวัตถุดิบ (มาตรา 87) ---------- */
      .sr-card {
        margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: 1.1rem;
        overflow: hidden; background: #FFFFFF; box-shadow: 0 1px 2px rgba(60,55,44,.04);
      }
      .sr-card-head {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem;
        padding: .8rem 1.1rem; background: #FBF8F1; border-bottom: 1px solid #EFE7D6;
      }
      .sr-card-head .t { font-size: .92rem; font-weight: 800; color: var(--brand-ink); }
      .sr-card-head .u { margin-top: .1rem; font-size: .72rem; font-weight: 600; color: #A3947A; }
      .sr-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
      .sr-stat { min-width: 0; text-align: right; }
      .sr-stat .k { font-size: .66rem; font-weight: 700; color: #A3947A; white-space: nowrap; }
      .sr-stat .v {
        margin-top: .1rem; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums;
        font-size: .88rem; font-weight: 800; color: var(--brand-ink); white-space: nowrap;
      }
      .sr-stat .v.is-in  { color: #047857; }
      .sr-stat .v.is-out { color: #BE123C; }
      .sr-stat .v.is-bal { color: #7A5D28; }
      .dtbl tbody tr.is-carry > td { background-color: #FCFBF7; }
      .dtbl tbody tr.is-carry .cell-muted { color: #A3947A; }

      /* ---------- คลังสินค้า ---------- */
      /* การ์ดสรุปที่กดแล้วกรองตารางให้ */
      .kpi.is-click { display: block; width: 100%; text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
      .kpi.is-click:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(60,55,44,.04), 0 16px 32px -18px rgba(94,71,32,.38); }
      .kpi.is-click:active { transform: scale(.985); }
      /* กระทบยอดสต๊อกกับบัญชี */
      .recon { border: 1px solid var(--line); border-radius: 1.1rem; background: #FFFFFF; box-shadow: 0 1px 2px rgba(60,55,44,.04); }
      .recon.is-bad { border-color: #F3D3D8; background: #FFF6F7; }
      .recon-head {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
        width: 100%; padding: .95rem 1.15rem; text-align: left; cursor: pointer;
      }
      .recon-head .t { font-size: .88rem; font-weight: 800; color: var(--brand-ink); }
      .recon.is-bad .recon-head .t { color: #9F1239; }
      .recon-head .d { margin-top: .15rem; font-size: .72rem; font-weight: 600; color: #A3947A; }
      .recon-ico { display: inline-flex; color: #047857; }
      .recon.is-bad .recon-ico { color: #BE123C; }
      .recon-more { font-size: .72rem; font-weight: 700; color: #A3947A; white-space: nowrap; }
      .recon-detail {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem;
        margin: 0 1.15rem 1.15rem; padding-top: .95rem; border-top: 1px solid #EFE7D6; text-align: center;
      }
      .recon-detail.hidden { display: none; }
      .recon-detail .k { font-size: .68rem; font-weight: 700; color: #A3947A; }
      .recon-detail .v {
        margin-top: .15rem; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums;
        font-size: 1rem; font-weight: 800; color: var(--brand-ink);
      }
      .recon-detail .v.is-ok  { color: #047857; }
      .recon-detail .v.is-bad { color: #BE123C; }

      @media (max-width: 639.98px) {
        .rpt-paper-body { padding: 1rem; }
        .rpt-line { font-size: .82rem; }
        .mon-grid { grid-template-columns: minmax(0, 1fr); }
        .yr-nav .y { min-width: 0; flex: 1 1 auto; }
        .sr-stats { width: 100%; justify-content: space-between; gap: .6rem; }
        .sr-stat .v { font-size: .82rem; }
        .recon-detail { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
      }

      /* ==========================================================
         🛒 ขายสด · ใบกำกับภาษีอย่างย่อ  (tabs/cashsale.html · modals/cash-sale.html · print/cash-sale.html)
         ----------------------------------------------------------
         ฟอร์มสองคอลัมน์: ซ้าย = รายการ · ขวา = ยอดชำระ / รับเงิน / เงินทอน / คู่บัญชี (ติดอยู่กับที่ตอนเลื่อน)
         ⚠️ ชื่อคลาสขึ้นต้น cs- ทั้งหมด — ไม่ไปชนของหน้าจอเดิม
         ========================================================== */
      /* clip ไม่ใช่ hidden — hidden ยังถูกเลื่อนด้านข้างได้เมื่อมีการ focus ช่องที่ล้นขอบ (หน้าจอแคบ) */
      .cs-modal { overflow: hidden; overflow: clip; }
      .cs-modal-head {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        padding: 1rem 1.4rem; border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg, #FFFDF8 0%, #FBF6EA 100%);
      }
      .cs-head-ico {
        width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        background: #F5EAD2; color: var(--gold-dark); box-shadow: inset 0 0 0 1px #EADBB8;
      }
      .cs-head-title { font-size: 1.05rem; font-weight: 800; color: var(--brand-ink); line-height: 1.25; }
      .cs-head-sub { margin-top: .15rem; }
      .cs-kind {
        display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .55rem; border-radius: 999px;
        font-size: .72rem; font-weight: 700; color: #047857; background: #F0FAF5; border: 1px solid #CDEBDD;
      }
      .cs-kind.is-plain { color: #6E6553; background: #F6F3EC; border-color: #EDE4D3; }
      .cs-x { font-size: 1.6rem; line-height: 1; font-weight: 700; color: #A3947A; padding: .2rem .5rem; border-radius: .6rem; }
      .cs-x:hover { color: var(--brand-ink); background: #F4EEE2; }

      .cs-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem 1.4rem; }
      @media (min-width: 1024px) { .cs-body { grid-template-columns: minmax(0, 1fr) 300px; } }
      @media (min-width: 1280px) { .cs-body { grid-template-columns: minmax(0, 1fr) 340px; } }
      .cs-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
      .cs-side { min-width: 0; display: flex; flex-direction: column; gap: .85rem; }
      @media (min-width: 1024px) { .cs-side { position: sticky; top: 1rem; align-self: start; } }

      .cs-grid3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
      @media (min-width: 640px) { .cs-grid3 { grid-template-columns: 1fr 1fr; } .cs-grid3 > :last-child { grid-column: 1 / -1; } }
      @media (min-width: 1280px) { .cs-grid3 { grid-template-columns: 1.1fr .9fr 1.4fr; } .cs-grid3 > :last-child { grid-column: auto; } }
      .cs-label { display: block; margin-bottom: .3rem; font-size: .74rem; font-weight: 700; color: #8E836C; }
      .cs-opt { font-weight: 600; color: #B7AA8C; font-size: .9em; }
      .cs-input {
        width: 100%; height: 40px; padding: 0 .8rem; border-radius: .75rem;
        border: 1px solid var(--line); background: #FFFFFF; color: var(--brand-ink);
        font-size: .9rem; font-weight: 600; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
      }
      .cs-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.16); }
      .cs-input.cs-ro { background: #F6F3EC; color: var(--gold-dark); font-weight: 800; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; letter-spacing: .01em; }
      .cs-alert {
        font-size: .78rem; font-weight: 600; line-height: 1.55; color: #92400E;
        background: #FFF9EE; border: 1px solid #F1DFBA; border-radius: .75rem; padding: .6rem .85rem;
      }
      .cs-alert.hidden { display: none; }

      .cs-lines-card { border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: #FFFFFF; }
      .cs-lines-head {
        display: flex; align-items: center; justify-content: space-between; gap: .75rem;
        padding: .65rem .85rem; background: #FBF8F1; border-bottom: 1px solid #EFE7D6;
      }
      .cs-lines-title { font-size: .82rem; font-weight: 800; color: var(--brand-ink); white-space: nowrap; }
      .cs-chip {
        display: inline-flex; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
        font-size: .68rem; font-weight: 700; color: var(--gold-dark); background: #F5EAD2;
      }
      .cs-chip.hidden { display: none; }
      .cs-add {
        flex: 0 0 auto; padding: .4rem .8rem; border-radius: .65rem; font-size: .78rem; font-weight: 800;
        color: var(--gold-dark); background: #FFFFFF; border: 1px solid #EADBB8;
      }
      .cs-add:hover { background: #FBF6E9; border-color: var(--gold); }
      /* position: relative = ป้าย sr-only (absolute) ในหัวตารางอยู่ในกล่องเลื่อนนี้ ไม่ดันความกว้างทั้งหน้าต่าง */
      .cs-lines-scroll { overflow-x: auto; position: relative; }
      .cs-lines { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .86rem; }
      .cs-lines th {
        padding: .5rem .6rem; text-align: left; font-size: .7rem; font-weight: 700; color: #8E836C;
        border-bottom: 1px solid #F3EDE1; white-space: nowrap;
      }
      .cs-lines th.r { text-align: right; }
      .cs-lines th.hidden, .cs-lines td.hidden { display: none; }
      .cs-lines .w-qty { width: 70px; }
      .cs-lines .w-price { width: 108px; }
      .cs-lines .w-amt { width: 96px; }
      .cs-lines .w-del { width: 34px; }
      .cs-lines .cs-prod-cell, .cs-lines #cs-th-product { width: 27%; min-width: 140px; }
      .cs-lines td { padding: .35rem .45rem; border-bottom: 1px solid #F6F1E7; vertical-align: top; }
      #app-screen .cs-lines tbody tr:nth-child(even) > td { background: transparent; }
      .cs-lines tbody tr:last-child td { border-bottom: 0; }
      .cs-lines input, .cs-lines select {
        width: 100%; height: 36px; padding: 0 .55rem; border-radius: .6rem; border: 1px solid #EFE7D6;
        background: #FFFFFF; font-size: .86rem; font-weight: 600; color: var(--brand-ink); outline: none;
      }
      .cs-lines input:focus, .cs-lines select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.14); }
      .cs-lines input.num { text-align: right; font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; }
      .cs-lines .cs-amt { text-align: right; font-weight: 700; color: var(--brand-ink); font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: .9rem; padding-right: .7rem; }
      .cs-lines .cs-del { width: 28px; height: 28px; margin-top: .25rem; border-radius: .5rem; color: #E11D48; font-size: 1.15rem; line-height: 1; }
      .cs-lines .cs-del:hover { background: #FFF1F3; }
      .cs-lines .cs-stock { margin-top: .2rem; font-size: .68rem; font-weight: 600; color: #A3947A; }
      .cs-lines .cs-stock.is-low { color: #BE123C; }
      .cs-lines-tip { padding: .5rem .85rem; font-size: .7rem; font-weight: 500; color: #A3947A; border-top: 1px solid #F3EDE1; background: #FFFDF9; }
      .cs-lines-tip kbd {
        display: inline-block; padding: 0 .3rem; border-radius: .3rem; border: 1px solid #E6DCC6; background: #FFFFFF;
        font-family: 'Inter', sans-serif; font-size: .66rem; font-weight: 700; color: #6E6553;
      }

      .cs-panel { border: 1px solid var(--line); border-radius: 1rem; background: #FFFFFF; padding: .85rem 1rem; }
      .cs-cap { display: block; font-size: .72rem; font-weight: 700; color: #8E836C; margin-bottom: .4rem; }
      .cs-seg { display: flex; width: 100%; }
      .cs-seg > button { flex: 1 1 0; }
      .cs-mode { margin-bottom: .75rem; }
      .cs-mode.hidden { display: none; }
      .cs-sum > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .3rem 0; }
      .cs-sum dt { font-size: .8rem; font-weight: 600; color: #6E6553; }
      .cs-sum dd { font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; font-size: .88rem; font-weight: 700; color: var(--brand-ink); }
      .cs-sum .cs-disc dt { color: #BE123C; }
      .cs-sum .cs-vatrow.hidden { display: none; }
      .cs-disc-input {
        width: 7.5rem; height: 32px; padding: 0 .55rem; text-align: right; border-radius: .6rem; border: 1px solid #F6D3D9;
        font-family: 'Inter', sans-serif; font-weight: 700; color: #BE123C; background: #FFFAFB; outline: none;
      }
      .cs-disc-input:focus { border-color: #FB7185; box-shadow: 0 0 0 3px rgba(244,63,94,.12); }
      .cs-total {
        display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
        margin-top: .55rem; padding-top: .65rem; border-top: 1px dashed #E6DCC6;
      }
      .cs-total span { font-size: .85rem; font-weight: 800; color: var(--brand-ink); }
      .cs-total strong {
        font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.025em;
        font-size: 1.75rem; font-weight: 800; color: var(--gold-dark);
      }
      .cs-total-note { margin-top: .15rem; text-align: right; font-size: .7rem; font-weight: 600; color: #A3947A; }

      /* 🖨️ เลือกรูปแบบพิมพ์ตอนกดพิมพ์ */
      .cs-fmt-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
      .cs-fmt-pick > button {
        display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-align: left;
        padding: 1rem; border-radius: 1rem; border: 1.5px solid var(--line); background: #FFFFFF;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
      }
      .cs-fmt-pick > button:hover, .cs-fmt-pick > button:focus-visible {
        border-color: var(--gold); background: #FBF6E9; outline: none; box-shadow: 0 0 0 3px rgba(176,138,62,.16);
      }
      .cs-fmt-pick .ic {
        width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
        background: #F5EAD2; color: var(--gold-dark);
      }
      .cs-fmt-pick .t { margin-top: .25rem; font-size: .95rem; font-weight: 800; color: var(--brand-ink); }
      .cs-fmt-pick .d { font-size: .72rem; font-weight: 600; color: #A3947A; line-height: 1.45; }
      @media (max-width: 400px) { .cs-fmt-pick { grid-template-columns: minmax(0, 1fr); } }

      .cs-foot {
        display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .6rem;
        padding: .9rem 1.4rem; border-top: 1px solid var(--line); background: #FFFDF8;
      }
      .cs-btn-ghost, .cs-btn-line, .cs-btn-main, .cs-btn-danger {
        height: 42px; padding: 0 1.15rem; border-radius: .8rem; font-size: .88rem; font-weight: 800; white-space: nowrap;
      }
      .cs-btn-ghost { color: #6E6553; border: 1px solid var(--line); background: #FFFFFF; }
      .cs-btn-ghost:hover { background: #F6F3EC; }
      .cs-btn-line { color: var(--gold-dark); border: 1px solid #DCC79A; background: #FFFFFF; }
      .cs-btn-line:hover { background: #FBF6E9; }
      .cs-btn-danger { color: #FFFFFF; background: #E11D48; }
      .cs-btn-danger:hover { background: #BE123C; }
      .cs-btn-ghost:disabled, .cs-btn-line:disabled, .cs-btn-main:disabled, .cs-btn-danger:disabled { opacity: .55; cursor: wait; }
      @media (max-width: 639.98px) {
        .cs-modal-head, .cs-body, .cs-foot { padding-left: 1rem; padding-right: 1rem; }
        .cs-foot > button { flex: 1 1 auto; }
      }

      .cs-void-info {
        margin-bottom: 1rem; padding: .75rem .9rem; border-radius: .8rem; background: #FBF8F1; border: 1px solid #EFE7D6;
        font-size: .82rem; line-height: 1.6; color: #3C372C;
      }
      .cs-reasons { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
      .cs-reasons button {
        padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF;
        font-size: .74rem; font-weight: 700; color: #6E6553;
      }
      .cs-reasons button:hover { border-color: var(--gold); color: var(--gold-dark); background: #FBF6E9; }
      .cs-void-warn { font-size: .74rem; font-weight: 600; color: #9F1239; background: #FFF4F6; border: 1px solid #F7D6DC; border-radius: .7rem; padding: .55rem .75rem; line-height: 1.55; }

      /* ตารางรายการบิล */
      .st-void { color: #6B7280; background: #F3F4F6; border-color: #E5E7EB; }
      .cs-row-void .doc-no, .cs-row-void .cell-name, .cs-row-void .amt { text-decoration: line-through; text-decoration-color: rgba(107,114,128,.6); color: #9CA3AF; }
      .row-acts > .ic-void:hover { background: #FFF1F3; border-color: #F7D6DC; color: #BE123C; }

      /* ---------- เอกสารพิมพ์ ---------- */
      .cs-void-stamp {
        position: absolute; right: 38%; top: -6px; transform: rotate(-12deg);
        padding: 4px 18px; border: 3px solid #DC2626; border-radius: 6px;
        color: #DC2626; font-size: 26px; font-weight: 900; letter-spacing: 6px; opacity: .85;
      }
      /* สลิป 80 มม. — ตัวอักษรดำล้วน เครื่องพิมพ์ความร้อนพิมพ์สีเทาไม่ออก */
      .cs-slip { box-sizing: border-box; width: 80mm; padding: 3mm 4mm 5mm; color: #000; background: #fff; font-size: 11.5px; line-height: 1.45; }
      .cs-slip-c { text-align: center; }
      .cs-slip-logo { display: block; margin: 0 auto 4px; max-width: 34mm; max-height: 16mm; object-fit: contain; }
      .cs-slip-name { font-size: 13.5px; font-weight: 800; }
      .cs-slip-small { font-size: 10px; }
      .cs-slip-title { font-size: 13px; font-weight: 800; margin-top: 1px; }
      .cs-slip-rule { border-top: 1px dashed #000; margin: 5px 0; }
      .cs-slip-kv { display: flex; justify-content: space-between; gap: 6px; }
      .cs-slip-kv > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
      .cs-slip-total { font-size: 13.5px; font-weight: 800; margin: 2px 0; }
      .cs-slip-item { margin-bottom: 3px; }
      .cs-slip-item .d { word-break: break-word; }
      .cs-slip-item .q { display: flex; justify-content: space-between; padding-left: 8px; font-variant-numeric: tabular-nums; }
      .cs-slip-void { text-align: center; font-size: 15px; font-weight: 900; margin: 4px 0; }
      .cs-slip-thanks { margin-top: 4px; font-weight: 700; }
      /* กรอบดูตัวอย่างโหมดสลิป — กระดาษแคบ ขอบน้อย ไม่บังคับความสูง A4 */
      .dpv-paper.dpv-paper-slip { padding: 0; }
      .dpv-paper.dpv-paper-slip > .cs-slip { display: block !important; }