@media (max-width: 820px) {

      /* ── 1. กัน horizontal scroll ทั้งหน้า ──
     * ถ้า element ใดกว้างเกิน viewport → scroll ภายใน element ไม่ใช่ทั้งหน้า */
      html,
      body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
      }

      /* ── 2. Sidebar — slide-out drawer (เดิมเปิดค้าง 220px ดันเนื้อหาหาย) ──
     * ใช้ hamburger button (มีอยู่แล้วใน topbar) เปิด/ปิด */
      body:not(.ms-mode) .sidebar,
      body:not(.ms-mode) aside.sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        /* ซ่อนนอกจอ */
        width: 260px !important;
        max-width: 80vw !important;
        height: 100dvh !important;
        z-index: 1000 !important;
        transition: left .3s cubic-bezier(.4, 0, .2, 1) !important;
        overflow-y: auto !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .25);
      }

      body:not(.ms-mode) .sidebar.open,
      body:not(.ms-mode) aside.sidebar.open {
        left: 0 !important;
      }

      /* Backdrop เมื่อ drawer เปิด */
      body:not(.ms-mode) .sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, .5) !important;
        z-index: 999 !important;
        display: none !important;
      }

      body:not(.ms-mode) .sidebar-overlay.open {
        display: block !important;
      }

      /* Main content เต็มความกว้าง ไม่เว้นที่ให้ sidebar */
      body:not(.ms-mode) .main,
      body:not(.ms-mode) main {
        margin-left: 0 !important;
        padding: 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
      }

      body:not(.ms-mode) .app {
        grid-template-columns: 1fr !important;
      }

      /* Hamburger / mobile-menu-btn ใน topbar — บังคับให้แสดงบนจอเล็ก */
      body:not(.ms-mode) .mobile-menu-btn,
      body:not(.ms-mode) .hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: rgba(0, 0, 0, .06);
        border: none;
        color: var(--text, #1a1a2a);
        font-size: 18px;
        cursor: pointer;
        flex-shrink: 0;
      }

      body:not(.ms-mode) .mobile-menu-btn:active,
      body:not(.ms-mode) .hamburger:active {
        background: rgba(0, 0, 0, .12);
        transform: scale(.95);
      }

      /* sidebar collapse button (toggle ย่อ/ขยาย) ไม่ต้องใช้บนมือถือ */
      body:not(.ms-mode) .s-collapse-btn {
        display: none !important;
      }

      /* ── 3. Tables — บังคับให้ scroll ภายใน wrapper แทน push หน้า ── */
      body:not(.ms-mode) table {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
      }

      /* แต่ตารางที่อยู่ใน wrapper ที่ scroll อยู่แล้ว ปล่อยเขาไป */
      body:not(.ms-mode) .table-wrap table,
      body:not(.ms-mode) .scroll-x table {
        display: table !important;
        white-space: normal;
      }

      /* ── 4. Modals — เต็มจอบนมือถือ (เดิมมัก fixed-width 640/800) ── */
      body:not(.ms-mode) .modal,
      body:not(.ms-mode) .modal-content,
      body:not(.ms-mode) .modal-card,
      body:not(.ms-mode) [class*="modal-"][class*="-content"] {
        width: 100% !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
        max-height: calc(100dvh - 16px) !important;
        overflow-y: auto !important;
      }

      /* ── 5. Form rows — single column ── */
      body:not(.ms-mode) .form-row,
      body:not(.ms-mode) .form-grid,
      body:not(.ms-mode) .grid-2,
      body:not(.ms-mode) .grid-3,
      body:not(.ms-mode) .grid-4 {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 10px !important;
      }

      /* ── 6. KPI / dashboard cards — stack 2 หรือ 1 col ── */
      body:not(.ms-mode) .kpi-grid,
      body:not(.ms-mode) .nw-kpi-strip,
      body:not(.ms-mode) [class*="kpi-row"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
      }

      @media (max-width: 480px) {

        body:not(.ms-mode) .kpi-grid,
        body:not(.ms-mode) .nw-kpi-strip,
        body:not(.ms-mode) [class*="kpi-row"] {
          grid-template-columns: 1fr !important;
        }
      }

      /* ── 7. Touch targets — ไม่เล็กกว่า 44x44 px (Apple HIG / Material) ── */
      body:not(.ms-mode) button,
      body:not(.ms-mode) .btn,
      body:not(.ms-mode) input[type="button"],
      body:not(.ms-mode) input[type="submit"],
      body:not(.ms-mode) a.btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
      }

      /* ── 8. Inputs — font-size 16px ขึ้นไปกัน iOS Safari zoom เวลา focus ── */
      body:not(.ms-mode) input,
      body:not(.ms-mode) select,
      body:not(.ms-mode) textarea {
        font-size: 16px !important;
        max-width: 100%;
        box-sizing: border-box;
      }

      /* ── 9. Topbar — กระชับขึ้นและไม่ overflow ── */
      body:not(.ms-mode) .topbar {
        padding: 8px 12px !important;
        flex-wrap: wrap;
        gap: 8px;
      }

      body:not(.ms-mode) .topbar>* {
        max-width: 100%;
      }

      /* ── 10. Charts (Chart.js canvas) — responsive container ── */
      body:not(.ms-mode) canvas {
        max-width: 100% !important;
        height: auto !important;
      }

      /* ── 11. Container / card padding ให้กระชับขึ้นเล็กน้อย ── */
      body:not(.ms-mode) .card,
      body:not(.ms-mode) .panel,
      body:not(.ms-mode) .section {
        padding: 12px !important;
        margin: 8px 0 !important;
      }

      /* ── 12. iOS safe-area (notch) สำหรับ standalone PWA ── */
      body:not(.ms-mode) .topbar,
      body:not(.ms-mode) header {
        padding-top: max(8px, env(safe-area-inset-top)) !important;
      }

      body:not(.ms-mode) {
        padding-bottom: env(safe-area-inset-bottom);
      }

      /* ── 13. Page headings — ลดขนาดไม่ให้ล้น ── */
      body:not(.ms-mode) h1 {
        font-size: 20px !important;
      }

      body:not(.ms-mode) h2 {
        font-size: 18px !important;
      }

      body:not(.ms-mode) h3 {
        font-size: 16px !important;
      }

      body:not(.ms-mode) .page-title,
      body:not(.ms-mode) .pg-title {
        font-size: 18px !important;
      }

      /* ── 14. Long text — wrap word ──
     * เลขสัญญา / id_card ยาว ๆ บางทีไม่ break → ดันหน้ากว้าง */
      body:not(.ms-mode) td,
      body:not(.ms-mode) .text-wrap-anywhere {
        overflow-wrap: anywhere;
      }
    }

    /* ── จอเล็กพิเศษ (≤480px) — single column + ลดช่องว่าง ── */
    @media (max-width: 480px) {

      body:not(.ms-mode) .main,
      body:not(.ms-mode) main {
        padding: 8px !important;
      }

      body:not(.ms-mode) .card,
      body:not(.ms-mode) .panel {
        border-radius: 8px !important;
        padding: 10px !important;
      }
    }

    /* ── ถ้าเป็น standalone PWA — ขยาย safe area เพิ่ม ── */
    @media all and (display-mode: standalone) {
      body {
        padding-top: env(safe-area-inset-top);
      }
    }