/* Giao diện điện thoại (≤ 767px) + tablet (768–1023px) cho bản Vue. Desktop ≥ 1024px KHÔNG bị ảnh hưởng:
   mọi quy tắc nằm trong @media (max-width: 1023px / 767px) hoặc gắn với .fx-shell.is-mobile / .is-tablet.
   Thứ tự: 1. khung · 2. Live Chat · 3. trang chính · 4. trang quản trị · 5. modal/overlay. */


/* =============================================================================
   MOBILE 1. KHUNG + NỀN TẢNG CẢM ỨNG
   Mốc: điện thoại ≤ 767px (ui.isMobile, .fx-shell.is-mobile)
        tablet 768–1023px (ui.isTablet, .fx-shell.is-tablet)
        desktop ≥ 1024px: KHÔNG có quy tắc nào trong file này áp dụng.
   Lớp phủ: .fx-m-backdrop z 900 · drawer/sheet z 910 · popover 1050 · modal 1000+
            (modal cũ z 1000 vẫn nằm TRÊN sheet, để mở modal từ trong sheet được).
   ============================================================================= */

/* ---------- Nền tảng chung cho màn cảm ứng (điện thoại + tablet) ---------- */
@media (max-width: 1023px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  /* Cho phép cuộn khi ở màn hình đăng nhập/bảng giá (chỉ html là scroll container duy nhất) */
  html:has(.fx-signin),
  html.fx-signin-active {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body:has(.fx-signin),
  body.fx-signin-active {
    height: auto !important;
    min-height: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    overscroll-behavior-y: auto !important;
  }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  button, a, label, select, summary, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .fx-shell { height: var(--app-h, 100dvh); }

  /* Lớp mờ chung sau drawer / sheet */
  .fx-m-backdrop {
    position: fixed; inset: 0; z-index: 900; background: rgba(8, 28, 54, 0.4);
    animation: fx-m-fade 0.2s ease-out;
  }
  @keyframes fx-m-fade { from { opacity: 0; } }
}

/* ---------- Điện thoại ---------- */
@media (max-width: 767px) {
  /* iOS tự phóng to khi chạm ô nhập chữ < 16px → mọi ô nhập 16px trên điện thoại */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea { font-size: 16px !important; }

  .fx-shell { flex-direction: column; width: 100%; }
  .fx-main { padding: 0; flex: 1; min-height: 0; }
  .fx-page-host { overscroll-behavior: contain; }

  /* Sidebar → drawer trượt từ trái (mở bằng tab "Menu") */
  .fx-shell.is-mobile .fx-nav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 910; width: min(86vw, 320px);
    background: #fff; box-shadow: 0 0 32px rgba(8, 28, 54, 0.22); border-radius: 0 16px 16px 0;
    padding: calc(8px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    transform: translateX(-104%); visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.28s;
  }
  .fx-shell.is-mobile .fx-nav.m-open {
    transform: none; visibility: visible; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .fx-nav-close { flex-shrink: 0; width: 40px; height: 40px; font-size: 20px; }
  .fx-shell.is-mobile .fx-nav-item { height: 44px; font-size: 15px; }
  .fx-shell.is-mobile .fx-nav-item.sub { height: 40px; }
  .fx-shell.is-mobile .fx-nav-item.active { background: var(--primary-light); box-shadow: none; }
  .fx-shell.is-mobile .fx-switcher { padding: 8px 6px; }
  .fx-shell.is-mobile .fx-switcher-pop { width: calc(min(86vw, 320px) - 24px); max-height: 70vh; overflow-y: auto; }
  .fx-shell.is-mobile .fx-user-card { min-height: 52px; }

  /* Thanh tab dưới (MobileTabBar) */
  .fx-tabbar {
    display: flex; flex-shrink: 0; background: #fff; border-top: 1px solid #e4e7ec;
    height: calc(56px + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .fx-tab {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: none; background: none; cursor: pointer; color: #5a6981; font-size: clamp(11px, 3.1vw, 12px); line-height: 14px; padding: 0;
  }
  .fx-tab-ic {
    position: relative; width: 56px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; transition: background-color 0.2s;
  }
  .fx-tab.active { color: var(--primary); font-weight: 600; }
  .fx-tab.active .fx-tab-ic { background: var(--primary-light); }
  .fx-tab:active .fx-tab-ic { background: rgba(0, 104, 255, 0.16); }
  .fx-tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .fx-tab-badge {
    position: absolute; top: -3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #ef4040; color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; border: 1.5px solid #fff;
    text-align: center; box-sizing: border-box;
  }
}

/* ---------- Tablet: sidebar luôn thu 56px, mở tạm thì nổi đè ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .fx-shell.is-tablet .fx-nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 910; }
  .fx-shell.is-tablet .fx-nav:not(.collapsed) { width: 260px; box-shadow: 0 0 32px rgba(8, 28, 54, 0.22); }
  /* Rail thu gọn nằm DƯỚI nền mờ (900) để sheet/drawer mở ra phủ cả rail; khi mở tạm thì nổi lên 910 */
  .fx-shell.is-tablet .fx-nav.collapsed { z-index: 890; }
  .fx-shell.is-tablet .fx-nav-item { min-height: 40px; }
  /* Rail: vùng chạm 44px (lề rail 6px) + chừa tai thỏ bên trái khi xoay ngang */
  .fx-shell.is-tablet { padding-left: calc(56px + env(safe-area-inset-left)); }
  .fx-shell.is-tablet .fx-nav { padding-left: calc(6px + env(safe-area-inset-left)); padding-right: 6px; }
  .fx-shell.is-tablet .fx-nav.collapsed { width: calc(56px + env(safe-area-inset-left)); }
  .fx-shell.is-tablet .fx-nav.collapsed .fx-nav-item { width: 44px; height: 44px; }
  .fx-shell.is-tablet .fx-nav.collapsed .fx-switcher { width: 44px; min-height: 44px; }
  .fx-shell.is-tablet .fx-nav .fx-icon-btn { width: 44px; height: 44px; }
}

/* ---------- Popover chọn kênh trên màn cảm ứng: ô tìm, dòng kênh, nút đủ to để chạm ---------- */
@media (max-width: 1023px) {
  .fx-shell:is(.is-mobile, .is-tablet) .fx-switcher-pop .fx-search.sm { height: 44px; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-switcher-pop .fx-search.sm input { align-self: stretch; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-switcher-pop .fx-ch-row { min-height: 52px; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-switcher-pop .fx-pop-foot .btn { min-height: 44px; flex: 1; justify-content: center; }
}


/* =============================================================================
   MOBILE 2. LIVE CHAT (#/chat) — ChatFilterRail · ConversationList · ChatWindow · CrmPanel
   Mốc: điện thoại ≤ 767px (.fx-shell.is-mobile) · tablet 768–1023px (.fx-shell.is-tablet)
        desktop ≥ 1024px: KHÔNG có quy tắc nào trong file này áp dụng.
   Điện thoại: xếp chồng danh sách → khung chat (.fx-livechat.m-chat, trượt ngang),
               panel khách = sheet toàn màn hình, composer [+] ô nhập [emoji] [gửi].
   Tablet:     danh sách 300–320px + khung chat, panel khách = drawer phải,
               rail lọc ẩn → sheet "Lọc hội thoại".
   Composer gọn (.chat-input-area.m-compose): điện thoại + tablet thấp (xoay ngang ≤500px)
               → [+] ô nhập [emoji] [gửi] + khay đáy thay cho thanh công cụ/popover.
   Sheet (.lc-sheet) Teleport ra body → tự khai báo token màu, không dựa vào .fx-livechat.
   Sheet và panel khách cao theo --app-h (co lại khi bàn phím ảo mở).
   Lớp: backdrop 900 · sheet/drawer 910 · modal cũ 1000 · popover 1050 · toast 10050.
   ============================================================================= */

/* ---------- 2.1 Màn cảm ứng chung (điện thoại + tablet) ---------- */
@media (max-width: 1023px) {
  /* Rail lọc → sheet "Lọc hội thoại" (nút Lọc ở đầu danh sách) */
  .fx-livechat .fx-rail { display: none; }

  /* --- Đầu danh sách: app bar + tìm kiếm + chip + tab --- */
  .fx-livechat .conv-header { padding: 8px 16px 0; gap: 8px; }
  .m-conv-appbar { display: flex; align-items: center; gap: 8px; min-height: 44px; }
  .m-conv-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
  .m-conv-title h1 {
    margin: 0; font-size: 20px; font-weight: 700; line-height: 28px; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .m-conv-title .fx-live-dot { flex-shrink: 0; }
  /* Mất kết nối realtime: nhãn đỏ có chữ (chấm xanh = đang kết nối, không nhầm với badge chưa đọc) */
  .m-live-off {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; height: 24px; padding: 0 8px;
    border-radius: 12px; background: #fef3f2; color: #b42318; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap;
  }
  .m-live-off .ph { font-size: 14px; }
  .m-conv-filter {
    position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
    border-radius: 20px; border: 1px solid var(--zl-line); background: #fff; color: var(--text-main);
    font-size: 14px; font-weight: 500; cursor: pointer; flex-shrink: 0;
  }
  .m-conv-filter::after { content: ""; position: absolute; inset: -2px; }
  .m-conv-filter .ph { font-size: 18px; }
  .m-conv-filter.on { border-color: var(--primary); background: var(--zl-selected); color: var(--primary); }
  .m-conv-filter-badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff;
    font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; box-sizing: border-box;
  }
  /* Chọn nhiều / lưu trữ / sắp xếp → nằm trong sheet Lọc; ô tìm kiếm chiếm cả hàng */
  .fx-livechat .fx-conv-toolbar .fx-check,
  .fx-livechat .fx-conv-toolbar > .fx-icon-btn { display: none; }
  /* Ô tìm kiếm: input phủ kín cả pill 40px → chạm chỗ nào (kể cả kính lúp) cũng focus được */
  .fx-livechat .search-box { position: relative; height: 40px; padding: 0; border-radius: 20px; gap: 0; }
  .fx-livechat .search-box input {
    position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); box-sizing: border-box; margin: 0;
    padding: 0 14px 0 40px; border-radius: inherit; font-size: 16px; /* ≥16px: iOS không tự phóng to khi gõ */
  }
  .fx-livechat .search-box:has(.m-search-clear) input { padding-right: 44px; }
  .fx-livechat .search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 1; font-size: 18px; pointer-events: none;
  }
  .m-search-clear {
    position: absolute; top: 0; right: 0; z-index: 2; width: 44px; height: 100%; border: none; border-radius: 0 20px 20px 0;
    background: transparent; color: var(--text-sub); font-size: 20px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .m-search-clear:active { color: var(--text-main); }
  /* Chip lọc: 1 hàng cuộn ngang, nút × đủ lớn để chạm (đệm dọc 6px để vùng chạm không bị cắt) */
  .fx-livechat .fx-chips {
    flex-wrap: nowrap; overflow-x: auto; margin: -6px -16px; padding: 6px 16px; gap: 8px;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .fx-livechat .fx-chips::-webkit-scrollbar { display: none; }
  .fx-livechat .fx-chip { flex-shrink: 0; height: 32px; padding: 0 2px 0 12px; border-radius: 16px; font-size: 13px; white-space: nowrap; }
  .fx-livechat .fx-chip .ph {
    position: relative; width: 28px; height: 28px; border-radius: 50%; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .fx-livechat .fx-chip .ph::after { content: ""; position: absolute; inset: -8px -6px; }
  .fx-livechat .fx-chip .ph:active { background: rgba(0, 104, 255, 0.16); }
  /* Tab Tất cả | Chưa đọc cao 44px */
  .fx-livechat .fx-conv-tabs { gap: 24px; margin-top: 0; }
  .fx-livechat .fx-conv-tabs button { height: 44px; font-size: 15px; }

  /* --- Danh sách hội thoại --- */
  .fx-livechat .conversation-list { overscroll-behavior: contain; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .fx-livechat .conv-item { -webkit-user-select: none; user-select: none; }
  .fx-livechat .conv-item:active { background: #e9ecf0; }
  .fx-livechat .fx-conv-more-trigger { display: none !important; }
  .fx-livechat .conv-last-msg { flex: 1 1 auto; min-width: 0; color: var(--text-sub); }
  .fx-livechat .conv-time { color: var(--text-sub); }
  .fx-livechat .conv-unread { min-width: 20px; height: 20px; font-size: 12px; line-height: 20px; padding: 0 6px; }
  .fx-livechat .conv-channel-badge { width: 20px; height: 20px; font-size: 11px; font-weight: 700; letter-spacing: -0.3px; }
  /* Thẻ: 1 hàng (tối đa 2 thẻ + "+N") → các dòng cao đều nhau */
  .fx-livechat .conv-tags-row { flex-wrap: nowrap; overflow: hidden; min-width: 0; height: 20px; }
  .fx-livechat .conv-tags-row > * { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-livechat .conv-tags-row > .tag-pill { display: block; } /* inline-flex không hiện "…" */
  .fx-livechat .conv-tags-row > .m-tag-more { flex-shrink: 0; overflow: visible; }
  /* Thẻ trạng thái khách + nhãn "AI" không co, không bị cắt "…" — luôn đọc được; tên kênh / thẻ khác co thay */
  .fx-livechat .conv-tags-row > :is(.fx-st, .conv-ai-closed) { flex-shrink: 0; overflow: visible; }

  /* Đang tải lần đầu: khung xương 8 dòng */
  .m-conv-skel { padding: 4px 0; }
  .m-skel-row { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 16px; box-sizing: border-box; }
  .m-skel-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
  .m-skel-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
  .m-skel-bar { display: block; width: 72%; height: 12px; border-radius: 6px; }
  .m-skel-bar.short { width: 46%; }
  .m-skel-avatar, .m-skel-bar {
    background: linear-gradient(90deg, #eceff3 25%, #f6f7f9 40%, #eceff3 60%); background-size: 400% 100%;
    animation: lc-skel 1.4s ease-in-out infinite;
  }
  @keyframes lc-skel { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
  /* Danh sách rỗng: icon + lời nhắn + nút theo ngữ cảnh */
  .m-conv-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 32px 32px; color: var(--text-sub);
  }
  .m-conv-empty-ic {
    width: 72px; height: 72px; margin-bottom: 16px; border-radius: 50%; background: #f2f4f7; color: var(--zl-icon);
    display: flex; align-items: center; justify-content: center; font-size: 34px;
  }
  .m-conv-empty b { font-size: 16px; font-weight: 600; line-height: 22px; color: var(--text-main); }
  .m-conv-empty p { margin: 4px 0 0; max-width: 280px; font-size: 14px; line-height: 20px; word-break: break-word; }
  .m-conv-empty-btn {
    margin-top: 16px; height: 44px; padding: 0 20px; border: none; border-radius: 22px; background: var(--primary); color: #fff;
    font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .m-conv-empty-btn:active { background: #0056d6; }

  /* --- Header khung chat: chỉ Gọi + Thông tin khách + "…" --- */
  .fx-livechat .chat-header-actions > :not(.btn-zalo-call-pill):not(.m-hdr-btn):not(.status-select) { display: none; }
  .fx-livechat .chat-header-actions { gap: 2px; }
  .fx-livechat .chat-header-user { cursor: pointer; border-radius: 10px; padding: 4px; margin-left: -4px; }
  .fx-livechat .chat-header-user:active { background: rgba(8, 28, 54, 0.06); }
  /* Nút gọi: icon nét cùng kiểu với 2 nút còn lại (không còn nút nền xanh đặc) */
  .fx-livechat .chat-header .btn-zalo-call-pill {
    position: relative; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 50%; border-color: transparent;
    background: transparent; color: var(--zl-icon); justify-content: center; gap: 0;
  }
  .fx-livechat .chat-header .btn-zalo-call-pill span { display: none; }
  .fx-livechat .chat-header .btn-zalo-call-pill .ph { font-size: 24px; }
  .fx-livechat .chat-header .btn-zalo-call-pill:active { background: rgba(8, 28, 54, 0.08); }
  .fx-livechat .chat-header .m-hdr-btn { width: 44px; height: 44px; border-radius: 50%; font-size: 24px; color: var(--zl-icon); }
  .fx-livechat .chat-header .m-hdr-btn.on { background: var(--zl-selected); color: var(--primary); }
  .fx-livechat .chat-header .m-hdr-btn:active { background: rgba(8, 28, 54, 0.08); }
  .fx-livechat .status-select { height: 40px; font-size: 14px; }
  /* Trạng thái hội thoại dưới tên khách (chấm màu + chữ) */
  .m-sub-status { white-space: nowrap; }
  .m-sub-status .lc-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; vertical-align: 0; }

  /* --- Tin nhắn --- */
  .fx-livechat .chat-body { overscroll-behavior: contain; }
  .fx-livechat .msg-bubble-box img { -webkit-touch-callout: none; -webkit-user-drag: none; }
  .fx-livechat .message-row { max-width: 80%; }
  /* Bong bóng log cuộc gọi: chữ ≥13px, nút gọi lại 40px */
  .fx-livechat .call-log-title { font-size: 14px; }
  .fx-livechat .call-log-status-line,
  .fx-livechat .call-log-notes { font-size: 13px; }
  .fx-livechat .call-log-btn-callback { min-height: 40px; padding: 0 12px; font-size: 13px; }

  /* --- Thanh tin mẫu F1-F4 --- */
  .fx-livechat .quick-reply-bar {
    min-height: 48px; padding: 4px 12px; gap: 8px; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  /* Tắt gợi ý → ẩn cả thanh (bật lại trong sheet "…" của hội thoại) */
  .fx-livechat .quick-reply-bar.is-off { display: none; }
  .fx-livechat .quick-reply-bar::-webkit-scrollbar { display: none; }
  .fx-livechat .qr-toggle { min-height: 40px; padding: 0 4px; }
  .fx-livechat .qr-toggle .fx-switch::after { content: ""; position: absolute; inset: -14px -8px; }
  .fx-livechat .qr-label { font-size: 13px; }
  .fx-livechat .qr-pills { gap: 8px; }
  .fx-livechat .qr-pill-btn { position: relative; height: 36px; padding: 0 14px; font-size: 14px; flex-shrink: 0; }
  .fx-livechat .qr-pill-btn::after { content: ""; position: absolute; inset: -4px 0; }
  .fx-livechat .qr-pill-btn:active { background: var(--zl-selected); border-color: var(--primary); color: var(--primary); }
  .fx-livechat .qr-shortcut { display: none; }

  /* --- Gợi ý "/" tin mẫu: mục 52px, bỏ gợi ý phím, cao theo --app-h (không tràn khi bàn phím mở) --- */
  .fx-livechat .fx-slash-pop {
    left: 8px; right: 8px; max-height: min(300px, calc(var(--app-h, 100dvh) - 124px)); overscroll-behavior: contain;
  }
  .fx-livechat .chat-input-area.m-compose .fx-slash-pop { max-height: min(300px, calc(var(--app-h, 100dvh) - 72px)); }
  .fx-livechat .chat-input-area.m-compose:has(.m-files) .fx-slash-pop { max-height: min(300px, calc(var(--app-h, 100dvh) - 124px)); }
  .fx-livechat .fx-slash-pop .fx-pop-title small { display: none; }
  .fx-livechat .fx-slash-item { min-height: 52px; align-items: center; padding: 8px 12px; }
  .fx-livechat .fx-slash-text b { font-size: 15px; }
  .fx-livechat .fx-slash-text small { font-size: 13px; }

  /* --- Composer --- */
  .fx-livechat .chat-input-area { padding-bottom: env(safe-area-inset-bottom); }
  .fx-livechat .chat-input-area.m-kb { padding-bottom: 0; }
  .fx-livechat .input-box-row textarea { font-size: 16px; }
  /* "@ gợi ý nhanh" chưa có → không hiện trên màn nhỏ (TODO(IT): chat.mentionSuggest) */
  .fx-livechat .input-actions-bar .fx-hint { display: none; }

  /* Composer gọn: [+] [ô nhập bo tròn] [emoji] [gửi] */
  .fx-livechat .chat-input-area.m-compose .input-actions-bar,
  .fx-livechat .chat-input-area.m-compose .input-box-row .btn-send { display: none; }
  .fx-livechat .chat-input-area.m-compose .input-box-row { padding: 6px 6px 6px 4px; gap: 2px; align-items: flex-end; }
  .fx-livechat .chat-input-area.m-compose .input-box-row textarea {
    min-height: 40px; height: 40px; max-height: 128px; margin: 2px 4px; padding: 9px 14px; border-radius: 20px;
    background: #f1f3f5; line-height: 22px;
  }
  .fx-livechat .chat-input-area.m-compose .input-box-row textarea:focus { background: #eef1f4; }
  .m-plus, .m-emoji-btn {
    width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 50%; background: transparent; color: var(--zl-icon);
    font-size: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .m-plus .ph { transition: transform 0.2s; }
  .m-plus.on, .m-emoji-btn.on { color: var(--primary); }
  .m-plus.on .ph { transform: rotate(45deg); }
  .m-plus:active, .m-emoji-btn:active { background: rgba(8, 28, 54, 0.08); }
  .m-send {
    width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--primary); color: #fff;
    font-size: 20px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
  }
  .m-send:disabled { opacity: 0.35; cursor: default; }
  .m-send:active:not(:disabled) { transform: scale(0.92); }
  /* Tệp đang chờ gửi: 1 hàng cuộn ngang, nút × 40×40 nằm trọn trong vùng cuộn */
  .m-files { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 4px; scrollbar-width: none; }
  .m-files::-webkit-scrollbar { display: none; }
  .m-file {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; max-width: 240px; height: 40px;
    padding: 0 0 0 12px; border-radius: 20px; background: #f1f3f5; font-size: 13px; color: var(--text-main); box-sizing: border-box;
  }
  .m-file span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .m-file-thumb { width: 24px; height: 24px; object-fit: cover; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.08); }
  .m-file-x {
    width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: 50%; background: transparent;
    color: var(--text-sub); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .m-file-x:active { background: rgba(8, 28, 54, 0.1); }
  .m-file-loading { padding-right: 12px; color: var(--text-sub); }
  /* Khay dưới ô nhập (công cụ / emoji / tin mẫu) */
  .m-dock {
    max-height: min(300px, 42vh); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--zl-line);
    background: #fff; animation: lc-dock-in 0.2s ease-out;
  }
  @keyframes lc-dock-in { from { opacity: 0; transform: translateY(12px); } }
  .m-file-input { display: none; }
  .m-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 12px 8px 8px; }
  .m-tool {
    display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 84px; padding: 6px 2px;
    border: none; border-radius: 12px; background: none; color: var(--text-main); font-size: 13px; line-height: 16px;
    text-align: center; cursor: pointer;
  }
  .m-tool-ic {
    width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 26px; transition: transform 0.12s;
  }
  .m-tool:active .m-tool-ic { transform: scale(0.92); }
  .c-blue { background: #e5efff; color: #0068ff; }
  .c-teal { background: #dff7f3; color: #0d9488; }
  .c-violet { background: #efe9ff; color: #7c3aed; }
  .c-amber { background: #fff1db; color: #d97706; }
  .c-yellow { background: #fff8d6; color: #ca8a04; }
  .c-green { background: #e1f8ea; color: #16a34a; }
  .c-sky { background: #e0f2fe; color: #0284c7; }
  .c-rose { background: #ffe4ec; color: #e11d48; }
  .m-dock-head {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 6px 2px 12px; background: #fff;
  }
  .m-dock-head .fx-seg button { height: 44px; font-size: 14px; padding: 0 16px; }
  .m-dock-title { font-size: 15px; font-weight: 600; color: var(--text-main); }
  .m-dock-icon {
    width: 44px; height: 44px; border: none; border-radius: 50%; background: transparent; color: var(--zl-icon);
    font-size: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .m-dock-icon:active { background: rgba(8, 28, 54, 0.08); }
  .m-dock-link {
    height: 44px; padding: 0 12px; border: none; border-radius: 22px; background: none; color: var(--primary);
    font-size: 14px; font-weight: 500; cursor: pointer;
  }
  .m-dock-link:active { background: var(--zl-selected); }
  /* Khay emoji (EmojiPicker variant "dock"): danh sách tự cuộn, thanh nhóm luôn hiện dưới đáy khay */
  .zep.is-dock .zep-list { height: calc(min(300px, 42vh) - 116px); margin-top: 0; }
  .m-dock:has(> .zep) { display: flex; flex-direction: column; height: min(300px, 42vh); overflow: hidden; }
  .m-dock:has(> .zep) > .zep { flex: 1 1 auto; min-height: 0; }
  .m-dock:has(> .zep) .zep-list { flex: 1 1 auto; min-height: 0; height: auto; }
  .zep.is-dock .zep-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); padding: 0 8px; }
  .zep.is-dock .zep-head { padding-left: 12px; }
  .zep.is-dock .zep-item { height: 44px; border-radius: 10px; font-size: 26px; }
  .zep.is-dock .zep-item:hover { background: none; }
  .zep.is-dock .zep-item:active { background: #eef1f4; }
  .zep.is-dock .zep-item .zemo { width: 30px; height: 30px; line-height: 30px; }
  .zep.is-dock .zep-tabs { height: 44px; padding: 0 4px; }
  .zep.is-dock .zep-tab { font-size: 20px; }
  .m-qr-list { display: flex; flex-direction: column; padding: 0 8px 8px; }
  .m-qr-item {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 56px; padding: 10px 8px;
    border: none; border-radius: 10px; background: none; color: var(--text-main); text-align: left; cursor: pointer;
  }
  .m-qr-item + .m-qr-item { border-top: 1px solid #eef1f4; }
  .m-qr-item:active { background: #eef1f4; }
  .m-qr-key { flex-shrink: 0; min-width: 56px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 20px; color: var(--primary); }
  .m-qr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .m-qr-text b { font-size: 15px; font-weight: 500; line-height: 20px; }
  .m-qr-text small {
    font-size: 13px; line-height: 18px; color: var(--text-sub); overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }

  /* --- Panel khách hàng (sheet / drawer) --- */
  .fx-livechat .col-crm { width: 100%; }
  .m-crm-head {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0; min-height: 56px; padding: 0 8px;
    border-bottom: 1px solid var(--zl-line); background: #fff;
  }
  .m-crm-close {
    width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent; color: var(--zl-icon);
    font-size: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  }
  .m-crm-close:active { background: rgba(8, 28, 54, 0.08); }
  .m-crm-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 24px; color: var(--text-main); }
  .fx-livechat .col-crm > .crm-content { overscroll-behavior: contain; }
  /* Tên khách: căn giữa như hero, tối đa 2 dòng; bỏ bút chì trang trí (sửa tên ở ô Họ và tên) */
  .fx-livechat .fx-crm-name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    max-width: 100%; text-align: center; word-break: break-word;
  }
  .fx-livechat .fx-crm-name .ph { display: none; }
  .fx-livechat .fx-info-row { min-height: 48px; }
  .fx-livechat .fx-info-row .form-input,
  .fx-livechat .col-crm .fx-grid-2 .form-input { height: 44px; font-size: 16px; }
  .fx-livechat .col-crm .form-textarea { font-size: 16px; }
  .fx-livechat .col-crm .phone-with-copy { gap: 8px; }
  .fx-livechat .col-crm .btn-copy,
  .fx-livechat .col-crm .btn-call-mini,
  .fx-livechat .col-crm .btn-zalo-call-mini { height: 40px !important; padding: 0 14px !important; border-radius: 20px !important; font-size: 14px !important; }
  .fx-livechat .col-crm .fx-link { min-height: 44px; font-size: 15px; }
  .fx-livechat .col-crm .fx-crm-trio button { min-height: 72px; }
  .fx-livechat .col-crm .fx-crm-trio button:active span { background: var(--zl-selected); color: var(--primary); }
  .fx-livechat .col-crm .tag-select-container { display: flex; flex-wrap: wrap; gap: 8px; }
  .fx-livechat .col-crm .tag-chip-toggle { height: 36px; line-height: 34px; padding: 0 12px; border-radius: 18px; font-size: 14px; cursor: pointer; }
  .fx-livechat .col-crm .tag-chip-toggle .ph { font-size: 14px; }
  .fx-livechat .col-crm .fx-switch::after { content: ""; position: absolute; inset: -11px -4px; }
  .fx-livechat .col-crm .fx-order-card:active { background: #f5f7fa; }
  .fx-livechat .fx-crm-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .fx-livechat .btn-save-crm { height: 48px; border-radius: 12px; font-size: 16px; font-weight: 500; }
  /* Bàn phím mở: chân "Lưu" dính đáy vẫn thấy được (panel cao theo --app-h), bỏ đệm tai thỏ */
  .fx-livechat .col-crm.m-kb .fx-crm-foot { padding-top: 6px; padding-bottom: 6px; }
  .fx-livechat .col-crm.m-kb .btn-save-crm { height: 44px; }

  /* --- Chưa chọn hội thoại (tablet luôn thấy; điện thoại hiếm gặp) --- */
  .fx-livechat .chat-welcome { max-width: 360px; padding: 24px; }
  .fx-livechat .chat-welcome .welcome-icon {
    width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; background: #fff; color: var(--primary);
    display: flex; align-items: center; justify-content: center; font-size: 52px; box-shadow: 0 2px 8px rgba(8, 28, 54, 0.08);
  }
  .fx-livechat .chat-welcome p { font-size: 15px; line-height: 22px; }
  .m-welcome-cta {
    margin-top: 20px; height: 44px; padding: 0 20px; border: none; border-radius: 22px; background: var(--primary); color: #fff;
    font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  }
  .m-welcome-cta .ph { font-size: 18px; }
  .m-welcome-cta:active { background: #0056d6; }

  /* --- Bàn phím: viền focus rõ cho mọi nút mới --- */
  .fx-livechat :is(button, [role="button"], .m-tool):focus-visible,
  .lc-sheet :is(button, [role="switch"]):focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

  /* ================= SHEET (Teleport ra body) ================= */
  .lc-sheet {
    --zl-line: #dde1e6; --zl-hover: #f3f5f6; --zl-selected: #e5efff; --zl-icon: #2a3a4d;
    --text-main: #081c36; --text-sub: #5a6981; --text-muted: #7589a3;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 910; display: flex; flex-direction: column;
    max-height: calc(var(--app-h, 100dvh) - 48px); background: #fff; color: var(--text-main);
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(8, 28, 54, 0.18);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overscroll-behavior: contain; animation: lc-sheet-up 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    -webkit-user-select: none; user-select: none;
  }
  /* Sheet nhận focus khi mở (quản lý focus ở ChatWindow) → không vẽ viền quanh cả sheet */
  .lc-sheet:focus { outline: none; }
  @keyframes lc-sheet-up { from { transform: translateY(100%); } }
  /* Tay nắm + đầu sheet: vuốt xuống để đóng (không để trình duyệt cuộn trang) */
  .lc-sheet-grab, .lc-sheet-head, .lc-msg-preview { touch-action: none; }
  .lc-sheet-grab { position: relative; flex-shrink: 0; width: 36px; height: 4px; border-radius: 2px; background: #d0d5dd; margin: 8px auto 0; }
  .lc-sheet-grab::after { content: ""; position: absolute; inset: -8px -48px -6px; }
  .lc-sheet-head { flex-shrink: 0; display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 2px 6px 2px 16px; }
  .lc-sheet-title { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; }
  .lc-sheet-close {
    width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent; color: var(--text-sub);
    font-size: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  }
  .lc-sheet-close:active { background: rgba(8, 28, 54, 0.08); }
  .lc-sheet-link {
    height: 44px; padding: 0 12px; border: none; background: none; color: var(--primary); font-size: 15px; font-weight: 500;
    cursor: pointer; border-radius: 22px; flex-shrink: 0;
  }
  .lc-sheet-link:active { background: var(--zl-selected); }
  .lc-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; }
  .lc-sheet-foot { flex-shrink: 0; display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #eef1f4; }
  .lc-btn-primary {
    flex: 1; height: 48px; border: none; border-radius: 12px; background: var(--primary); color: #fff;
    font-size: 16px; font-weight: 600; cursor: pointer;
  }
  .lc-btn-primary:active { background: #0056d6; }
  .lc-sec-title { margin: 16px 0 8px; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--text-sub); }
  .lc-sheet-body > .lc-sec-title:first-child { margin-top: 4px; }

  /* Lựa chọn dạng ô (trạng thái, SĐT) */
  .lc-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .lc-opt {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
    border: 1px solid var(--zl-line); border-radius: 12px; background: #fff; color: var(--text-main);
    font-size: 14px; line-height: 18px; text-align: left; cursor: pointer;
  }
  .lc-opt .ph { font-size: 20px; color: var(--text-sub); flex-shrink: 0; }
  .lc-opt-text { flex: 1; min-width: 0; }
  .lc-opt.active { border-color: var(--primary); background: var(--zl-selected); color: var(--primary); font-weight: 500; }
  .lc-opt.active .ph { color: var(--primary); }
  .lc-opt:active { transform: scale(0.97); }
  .lc-opt-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4040; flex-shrink: 0; }

  /* Danh sách hàng thao tác (chữ phụ đạt tương phản ≥ 4.5:1) */
  .lc-list { display: flex; flex-direction: column; }
  .lc-list + .lc-list { margin-top: 8px; padding-top: 8px; border-top: 1px solid #eef1f4; }
  .lc-row {
    display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 8px; margin: 0 -8px;
    width: calc(100% + 16px); border: none; border-radius: 12px; background: none; color: var(--text-main);
    font-size: 15px; line-height: 20px; text-align: left; cursor: pointer;
  }
  .lc-row > .ph:first-child { width: 24px; font-size: 22px; color: var(--zl-icon); flex-shrink: 0; text-align: center; }
  .lc-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .lc-row-text small { font-size: 13px; line-height: 18px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lc-row-end { color: #667085; font-size: 16px; flex-shrink: 0; }
  .lc-row.is-stub::after {
    content: "Sắp có"; flex-shrink: 0; font-size: 12px; font-weight: 500; line-height: 20px; padding: 0 8px;
    border-radius: 4px; background: #f2f4f7; color: var(--text-sub);
  }
  .lc-row.danger, .lc-row.danger > .ph:first-child { color: #e5383b; }
  .lc-row:disabled { opacity: 0.5; cursor: default; }
  .lc-row:active:not(:disabled) { background: #eef1f4; }
  .lc-row-switch .fx-switch { flex-shrink: 0; }
  .lc-live { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--text-sub); }

  /* Sheet "…" của header */
  .lc-contact {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 8px;
    margin-left: -8px; border: none; border-radius: 12px; background: none; color: var(--text-main); text-align: left; cursor: pointer;
  }
  .lc-contact:active { background: #eef1f4; }
  .lc-contact img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #f0f2f5; flex-shrink: 0; }
  .lc-contact-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .lc-contact-text b { font-size: 16px; font-weight: 600; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lc-contact-text small { font-size: 13px; line-height: 18px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lc-seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: #f2f4f7; }
  .lc-seg3 button {
    display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 4px;
    border: none; border-radius: 9px; background: transparent; color: var(--text-sub); font-size: 13px; line-height: 16px;
    white-space: nowrap; cursor: pointer;
  }
  .lc-seg3 button.active { background: #fff; color: var(--text-main); font-weight: 600; box-shadow: 0 1px 3px rgba(8, 28, 54, 0.14); }
  .lc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  @media (max-width: 374px) { .lc-seg3 .lc-dot { display: none; } }
  .lc-more-sheet .lc-seg3 + .lc-list { margin-top: 12px; }

  /* Sheet nhấn giữ tin nhắn */
  .lc-msg-preview { flex-shrink: 0; margin: 12px 16px 0; padding: 10px 12px; border-radius: 12px; background: #f2f4f7; }
  .lc-msg-preview.out { background: #e5efff; }
  .lc-msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--text-sub); }
  .lc-msg-text {
    margin-top: 4px; font-size: 15px; line-height: 20px; white-space: pre-wrap; word-break: break-word; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  }
  /* Hàng reaction gọn (tối đa 420px, giữa sheet) → không bị giãn rời rạc khi sheet rộng */
  .lc-react-row {
    flex-shrink: 0; display: flex; justify-content: space-between; gap: 4px; padding: 12px 16px 4px;
    width: 100%; max-width: 420px; margin: 0 auto; box-sizing: border-box;
  }
  .lc-react-row button {
    width: 48px; height: 48px; border: none; border-radius: 50%; background: #f2f4f7; font-size: 26px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.12s;
  }
  .lc-react-row button:active { transform: scale(1.18); background: #e5efff; }
  /* Thả cảm xúc (Zalo cá nhân): cảm xúc mình đang thả = nền xanh + viền; tin chưa thả được / đang gửi lên Zalo = mờ.
     Có nút × (gỡ) → 7 nút: thu nhỏ đều theo bề ngang máy (sheet trải hết ngang trên điện thoại) để vẫn tròn, không tràn */
  .lc-react-row button.on { background: #e5efff; box-shadow: inset 0 0 0 2px var(--primary); }
  .lc-react-row.is-off button { opacity: 0.45; cursor: not-allowed; }
  .lc-react-row button:disabled { opacity: 0.45; cursor: progress; }
  .lc-react-row .lc-react-clear { font-size: 20px; color: var(--text-sub); }
  .lc-react-row.has-clear button { width: min(48px, calc((100vw - 56px) / 7)); height: min(48px, calc((100vw - 56px) / 7)); }
  .lc-msg-sheet .lc-sheet-body { padding-top: 8px; }
}

/* ---------- 2.2 Điện thoại ---------- */
@media (max-width: 767px) {
  /* Xếp chồng: danh sách ⇄ khung chat trượt ngang (không có cột thừa) */
  .fx-shell.is-mobile .fx-livechat { position: relative; border-left: 0; }
  .fx-shell.is-mobile .fx-lc-list,
  .fx-shell.is-mobile .fx-lc-chat {
    position: absolute; top: 0; bottom: 0; left: env(safe-area-inset-left); right: env(safe-area-inset-right);
    border-left: 0;
  }
  .fx-shell.is-mobile .fx-lc-list { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
  .fx-shell.is-mobile .fx-lc-chat {
    z-index: 1; transform: translateX(100%); visibility: hidden;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.25s;
  }
  .fx-shell.is-mobile .fx-livechat.m-chat .fx-lc-chat {
    transform: none; visibility: visible; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
  }
  .fx-shell.is-mobile .fx-livechat.m-chat .fx-lc-list {
    transform: translateX(-24%); visibility: hidden;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.25s;
  }
  .fx-shell.is-mobile .col-conversations { width: 100%; }

  /* Đầu danh sách chừa tai thỏ */
  .fx-shell.is-mobile .conv-header { padding-top: calc(8px + env(safe-area-inset-top)); }
  /* Hàng hội thoại tràn mép, avatar 52 */
  .fx-shell.is-mobile .conversation-list { padding-top: 4px; }
  .fx-shell.is-mobile .conv-item { margin: 0; border-radius: 0; padding: 10px 16px; min-height: 72px; }
  .fx-shell.is-mobile .conv-avatar { width: 52px; height: 52px; }
  /* Quay lại danh sách: dòng vừa mở nhạt dần rồi bỏ tô (danh sách đơn cột không có "đang chọn") */
  .fx-shell.is-mobile .fx-livechat:not(.m-chat) .conv-item.active { background: transparent; transition: background-color 0.4s ease 0.3s; }
  .fx-shell.is-mobile .fx-livechat:not(.m-chat) .conv-item.active:active { background: #e9ecf0; transition: none; }

  /* Header khung chat: [‹ 3] avatar tên … [gọi] [khách] [⋮] */
  .fx-shell.is-mobile .chat-header {
    height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 2px 0 0; gap: 0;
  }
  .m-back {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    min-width: 44px; height: 44px; padding: 0 2px 0 4px; border: none; border-radius: 22px; background: transparent;
    color: var(--zl-icon); font-size: 24px; cursor: pointer;
  }
  .m-back:active { background: rgba(8, 28, 54, 0.08); }
  .m-back-badge {
    min-width: 20px; height: 20px; padding: 0 6px; margin-left: -2px; border-radius: 10px; background: #eaedf0;
    color: var(--text-main); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; box-sizing: border-box;
  }
  .fx-shell.is-mobile .chat-header-user { gap: 8px; margin-left: 0; }
  .fx-shell.is-mobile .chat-header-actions { gap: 0; }
  .fx-shell.is-mobile .user-avatar { width: 40px; height: 40px; }
  .fx-shell.is-mobile .user-meta h2 { font-size: 16px; line-height: 22px; }
  /* Tên khách ưu tiên: bỏ chip SĐT (số có trong sheet "…" và panel khách).
     !important vì chip có style="display:inline-block" nội tuyến. */
  .fx-shell.is-mobile .chat-header .phone-chip { display: none !important; }
  .fx-shell.is-mobile .channel-name-sub { font-size: 12px; line-height: 16px; }
  .fx-shell.is-mobile .chat-header .status-select { display: none; }
  .fx-shell.is-mobile .chat-header.m-skel-head { justify-content: flex-start; gap: 8px; }
  .m-skel-title { font-size: 16px; font-weight: 600; color: var(--text-sub); }

  /* Vùng tin: bong bóng ≤ 80%, avatar 32, ảnh ≤ 70vw; không có hover → nút rê chuột ẩn, nhấn giữ mở sheet */
  .fx-shell.is-mobile .chat-body { padding: 0 12px 16px; }
  .fx-shell.is-mobile .msg-actions, .fx-shell.is-mobile .msg-react { display: none; }
  /* Thả cảm xúc: không nút góc / bảng chọn (thả trong sheet nhấn giữ) → chip cảm xúc sát góc phải bong bóng */
  .fx-shell.is-mobile .msg-react-pop { display: none; }
  .fx-shell.is-mobile .msg-reacts { right: 6px; }
  .fx-shell.is-mobile .msg-bubble-box { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .fx-shell.is-mobile .message-row.inbound { max-width: calc(80% + 40px); }
  .fx-shell.is-mobile .msg-avatar { width: 32px; height: 32px; }
  .fx-shell.is-mobile .msg-avatar-gap { width: 32px; }
  .fx-shell.is-mobile .msg-bubble { padding: 8px 12px; }
  .fx-shell.is-mobile .msg-time { font-size: 12px; margin-top: 4px; }
  .fx-shell.is-mobile .msg-img-preview { max-width: min(75vw, 280px); max-height: 420px; object-position: top; }
  .fx-shell.is-mobile .msg-video-preview { max-width: min(70vw, 280px); }
  .fx-shell.is-mobile .msg-audio-preview { max-width: min(64vw, 260px); }
  .fx-shell.is-mobile .call-log-bubble { min-width: min(240px, 64vw); max-width: min(78vw, 320px); }

  /* Khay đang mở / bàn phím đang bật → ẩn thanh tin mẫu cho vùng tin rộng hơn ("/" và ⚡ vẫn mở tin mẫu) */
  .fx-shell.is-mobile .col-chat:has(.chat-input-area.m-docked) .quick-reply-bar,
  .fx-shell.is-mobile .col-chat:has(.chat-input-area.m-kb) .quick-reply-bar { display: none; }

  /* Panel khách: sheet toàn màn hình trượt từ phải, cao theo --app-h (bàn phím mở vẫn thấy ô đang gõ + nút Lưu) */
  .fx-shell.is-mobile .fx-lc-crm {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: var(--app-h, 100dvh); z-index: 910;
    border-left: 0; background: #fff;
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
    animation: lc-crm-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes lc-crm-in { from { transform: translateX(100%); } }
  .fx-shell.is-mobile .m-crm-head { padding-top: env(safe-area-inset-top); min-height: calc(56px + env(safe-area-inset-top)); }
}

/* ---------- 2.3 Tablet ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .fx-shell.is-tablet .col-conversations { width: clamp(300px, 34vw, 320px); }
  .fx-shell.is-tablet .fx-lc-chat { padding-right: env(safe-area-inset-right); }
  .fx-shell.is-tablet .chat-header { height: 64px; padding: 0 6px 0 16px; }
  /* Ô trạng thái chỉ hiện khi khung chat đủ rộng (hẹp hơn: chấm + chữ dưới tên, đổi trong sheet "…") */
  .fx-shell.is-tablet .chat-header .status-select { display: none; }
  @container fxchat (min-width: 560px) {
    .fx-shell.is-tablet .chat-header .status-select { display: inline-block; max-width: 150px; }
    .fx-shell.is-tablet .m-sub-status { display: none; }
  }
  /* Khung chat hẹp → bỏ chip SĐT để tên khách không bị cắt (!important: chip có style nội tuyến) */
  @container fxchat (max-width: 559px) {
    .fx-shell.is-tablet .chat-header .phone-chip { display: none !important; }
  }
  /* Có chuột (hover) → giữ nút rê chuột trên tin nhắn; chỉ ẩn khi màn cảm ứng (xem 2.5) */

  /* Thanh công cụ composer kiểu desktop: nút 44px, cách nhau 8px */
  .fx-shell.is-tablet .input-actions-bar { min-height: 52px; gap: 8px; row-gap: 4px; }
  .fx-shell.is-tablet .input-actions-bar .fx-vsep { margin: 0; }
  .fx-shell.is-tablet .fx-tool-btn { width: 44px; height: 44px; border-radius: 10px; }
  .fx-shell.is-tablet .fx-tool-btn:active { background: var(--zl-selected); }
  .fx-shell.is-tablet .btn-send { height: 44px; padding: 0 16px; }
  /* Tệp đang chờ gửi: 1 hàng riêng cuộn ngang dưới thanh công cụ, nút × 40×40 */
  .fx-shell.is-tablet .selected-files:has(> .file-chip, > .fx-uploading) {
    flex: 1 0 100%; order: 2; flex-wrap: nowrap; overflow-x: auto; margin-left: 0; padding: 2px 0;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .fx-shell.is-tablet .selected-files::-webkit-scrollbar { display: none; }
  .fx-shell.is-tablet .file-chip {
    flex-shrink: 0; max-width: 260px; height: 40px; padding: 0 0 0 12px; border-radius: 20px; font-size: 13px; box-sizing: border-box;
  }
  .fx-shell.is-tablet .file-chip > span:not(.file-chip-remove) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .fx-shell.is-tablet .file-chip-remove {
    min-width: 40px; min-height: 40px; flex-shrink: 0; border-radius: 50%; font-size: 18px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .fx-shell.is-tablet .file-chip-remove:active { background: rgba(8, 28, 54, 0.1); }
  .fx-shell.is-tablet .fx-uploading { flex-shrink: 0; height: 40px; }
  /* Popover emoji: không vượt mép trên màn hình (cao theo --app-h), lưới tự cuộn */
  .fx-shell.is-tablet .fx-emoji-pop {
    width: 360px; max-width: calc(100cqw - 16px); max-height: calc(var(--app-h, 100dvh) - 190px);
    display: flex; flex-direction: column; box-sizing: border-box;
  }
  .fx-shell.is-tablet .fx-emoji-pop .zep { flex: 1 1 auto; min-height: 0; }
  .fx-shell.is-tablet .fx-emoji-pop .zep-list { flex: 1 1 auto; min-height: 0; height: auto; max-height: 300px; }
  .fx-shell.is-tablet .fx-emoji-pop .zep-item { height: 44px; }
  .fx-shell.is-tablet .fx-emoji-pop .zep-tab { min-height: 44px; }
  .fx-shell.is-tablet .fx-emoji-pop .fx-seg { flex-shrink: 0; }
  /* Emoji/Sticker: vùng chạm 44px như các mục popover khác */
  .fx-shell.is-tablet .fx-emoji-pop .fx-seg button { height: 44px; padding: 0 16px; }
  .fx-shell.is-tablet .conv-item { padding: 10px 8px; }

  /* Panel khách: drawer phải min(400px, 92vw), cao theo --app-h */
  .fx-shell.is-tablet .fx-lc-crm {
    position: fixed; top: 0; right: 0; bottom: auto; height: var(--app-h, 100dvh); z-index: 910; width: min(400px, 92vw); border-left: 0;
    padding-right: env(safe-area-inset-right); background: #fff;
    box-shadow: -8px 0 32px rgba(8, 28, 54, 0.18); animation: lc-drawer-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes lc-drawer-in { from { transform: translateX(100%); } }

  /* Sheet ở giữa, rộng tối đa 560px */
  .lc-sheet { width: min(560px, 100%); margin: 0 auto; }
}

/* ---------- 2.4 Màn ngang thấp (điện thoại xoay ngang) ---------- */
@media (max-width: 1023px) and (max-height: 500px) {
  /* Đầu danh sách 1 hàng: [tìm kiếm][trạng thái realtime][Lọc], bỏ chữ tiêu đề */
  .fx-livechat .conv-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 4px; padding-top: 6px;
  }
  .fx-shell.is-mobile .fx-livechat .conv-header { padding-top: calc(6px + env(safe-area-inset-top)); }
  .fx-livechat .m-conv-appbar { display: contents; }
  .fx-livechat .m-conv-title { display: contents; }
  .fx-livechat .m-conv-title h1 { display: none; }
  .fx-livechat .m-conv-title > .fx-live-dot,
  .fx-livechat .m-conv-title > .m-live-off { grid-column: 2; grid-row: 1; align-self: center; }
  .fx-livechat .m-live-off { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 50%; }
  .fx-livechat .m-live-off > span { display: none; }
  .fx-livechat .m-live-off .ph { font-size: 16px; }
  .fx-livechat .m-conv-filter { grid-column: 3; grid-row: 1; align-self: center; }
  .fx-livechat .fx-conv-toolbar { grid-column: 1; grid-row: 1; }
  .fx-livechat .fx-chips, .fx-livechat .fx-conv-tabs { grid-column: 1 / -1; }
  .fx-livechat .fx-conv-tabs button { height: 40px; }
  .fx-livechat .conv-item { min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
  .m-skel-row { min-height: 64px; padding-top: 6px; padding-bottom: 6px; }
  .m-conv-empty { padding-top: 16px; padding-bottom: 16px; }
  .m-conv-empty-ic { width: 56px; height: 56px; margin-bottom: 10px; font-size: 28px; }
  /* Header chat 48px, bỏ thanh tin mẫu (vẫn có F1-F4, khay/nút tin mẫu) */
  .fx-shell .fx-livechat .chat-header { height: calc(48px + env(safe-area-inset-top)); }
  .fx-shell .fx-livechat .chat-header .user-avatar { width: 36px; height: 36px; }
  .fx-livechat .quick-reply-bar { display: none; }
  .fx-livechat .input-actions-bar { min-height: 44px; }
  .m-dock { max-height: 45vh; }
  .m-tools { grid-template-columns: repeat(8, 1fr); padding-top: 8px; }
  .m-tool { min-height: 72px; }
  .m-tool-ic { width: 44px; height: 44px; font-size: 22px; border-radius: 14px; }
  .lc-sheet-head { min-height: 48px; }
  /* Sheet không trải hết chiều ngang (hàng reaction, danh sách gọn giữa màn) */
  .lc-sheet { width: min(560px, 100%); margin: 0 auto; }

  /* Panel khách: đầu 48px, chân gọn (nút Lưu căn phải), hero nằm ngang → nhiều chỗ cho thông tin */
  .m-crm-head { min-height: 48px; }
  .fx-shell.is-mobile .m-crm-head { min-height: calc(48px + env(safe-area-inset-top)); }
  .fx-livechat .fx-crm-foot {
    display: flex; justify-content: flex-end; padding: 6px 16px calc(6px + env(safe-area-inset-bottom));
  }
  .fx-livechat .btn-save-crm { width: auto; height: 44px; padding: 0 24px; }
  .fx-livechat .crm-content .fx-crm-hero {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: center;
    padding: 12px 16px;
  }
  .fx-livechat .fx-crm-avatar { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .fx-livechat .fx-crm-name {
    grid-column: 2; grid-row: 1; -webkit-line-clamp: 1; text-align: left; font-size: 17px; line-height: 24px;
  }
  .fx-livechat .fx-crm-sub { grid-column: 2; grid-row: 2; margin: 0; line-height: 18px; }
  .fx-livechat .fx-crm-trio { grid-column: 1 / -1; grid-row: 3; justify-content: center; gap: 8px; margin-top: 8px; }
  .fx-livechat .col-crm .fx-crm-trio button {
    flex: 0 0 auto; max-width: none; min-height: 56px; gap: 4px; padding: 2px 8px; font-size: 13px; line-height: 16px; white-space: nowrap;
  }
  .fx-livechat .col-crm .fx-crm-trio button span { width: 32px; height: 32px; font-size: 16px; }
  /* Điện thoại ngang (panel toàn màn hình, rộng) → 3 nút nằm bên phải tên */
  .fx-shell.is-mobile .fx-livechat .crm-content .fx-crm-hero { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .fx-shell.is-mobile .fx-livechat .fx-crm-trio { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}

/* ---------- 2.5 Màn cảm ứng: bỏ hiệu ứng rê chuột bị "dính" sau khi chạm ---------- */
@media (max-width: 1023px) and (hover: none) {
  /* Tablet cảm ứng: nút rê chuột trên tin nhắn → nhấn giữ mở sheet (tablet có chuột vẫn thấy nút) */
  .fx-livechat .msg-actions, .fx-livechat .msg-react { display: none; }
  .fx-livechat .msg-react-pop { display: none; }
  .fx-livechat .msg-reacts { right: 6px; }
  .fx-livechat .msg-bubble-box { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .fx-livechat .conv-item:hover:not(.active) { background: transparent; }
  .fx-livechat .conv-item:active:not(.active) { background: #e9ecf0; }
  .fx-livechat .fx-conv-tabs button:hover:not(.active) { color: var(--text-sub); }
  .fx-livechat .fx-icon-btn:hover:not(.on) { background: transparent; }
  .fx-livechat .fx-tool-btn:hover:not(.on) { background: transparent; }
  .fx-livechat .btn-send:hover:not(:disabled) { background: transparent; }
  .fx-livechat .chat-header .btn-zalo-call-pill:hover { background: transparent; color: var(--zl-icon); border-color: transparent; box-shadow: none; }
  .fx-livechat .qr-pill-btn:hover { background: #fff; border-color: var(--border-color); color: var(--text-main); }
  .fx-livechat .msg-img-preview:hover { transform: none; }
  .fx-livechat .fx-phone-chip:hover { background: rgba(0, 104, 255, 0.1); }
  .fx-livechat .fx-switch:hover:not(.on) { background: rgba(0, 0, 0, 0.25); }
  .fx-livechat .fx-switch.on:hover { background: var(--primary); }
  .fx-livechat .tag-chip-toggle:hover:not(.selected) { border-color: var(--fx-ctrl-border); color: var(--text-sub); }
  .fx-livechat .fx-order-card:hover { border-color: var(--border-color); }
  .fx-livechat .fx-crm-trio button:hover span { background: #f5f5f5; color: var(--text-main); }
  .fx-livechat .zep-item:hover { background: none; }
}

/* ---------- 2.6 Giảm chuyển động ---------- */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .fx-shell.is-mobile .fx-lc-list,
  .fx-shell.is-mobile .fx-lc-chat,
  .fx-shell.is-mobile .fx-livechat .conv-item { transition: none !important; }
  .fx-livechat .fx-lc-crm, .lc-sheet, .m-dock, .m-skel-avatar, .m-skel-bar { animation: none !important; }
  .m-plus .ph, .m-send, .m-tool-ic, .lc-react-row button { transition: none; }
}


/* =============================================================================
   MOBILE 3. TRANG DANH SÁCH + KHỐI DÙNG CHUNG
   (Tổng quan, Khách hàng, Đơn hàng, Sản phẩm + fx-page, bảng, KPI, form, rỗng, cài đặt…)

   Mốc: điện thoại ≤ 767px · tablet 768–1023px · desktop ≥ 1024px KHÔNG có quy tắc nào ở đây.
   Hành vi mới trên màn nhỏ:
   - Điện thoại: card trang tràn viền (không bo, không bóng), header dính đỉnh (tiêu đề 18/600,
     phụ đề 1 dòng), thao tác phụ gom vào menu "…" (bottom sheet .fx-psheet).
   - Danh sách khách / đơn / sản phẩm: bảng → thẻ .fx-mrow (chạm cả dòng), "Xem thêm" thay phân trang.
   - Bảng dữ liệu còn lại: cuộn ngang TRONG khung, cột đầu dính trái, trang không bao giờ cuộn ngang.
   - KPI: lưới 2 cột (tablet 4 cột), số 20px; .fx-kpi-scroll = hàng cuộn ngang có snap.
   - Tab gạch chân / segmented: 1 hàng cuộn ngang, vùng chạm cao 44px (segmented: nút 40 + ::after).
   - Nút, ô nhập, nút trang ≥ 44px; công tắc 48×28 + vùng chạm 44px.
   - Nút tạo chính thành FAB 56px nằm trên thanh tab (.fx-fab); đã cuộn → thu tròn, đang cuộn
     xuống → ẩn, cuộn lên / chạm đáy → hiện lại (class .fx-m-scrolled / .fx-m-down do <fx-page> gắn).
   - Thẻ danh sách có nút phụ: nút phủ .fx-mrow-hit (cả thẻ) + nút phụ .fx-mrow-act nằm trên.
   - Đơn hàng: tab trạng thái + ô tìm dính dưới header; Sản phẩm / Khách hàng: ô tìm dính.
   - Ô tìm có nút × (.fx-search-clear, 44px). Chữ nhỏ (tag, số đếm tab, giá trị mờ) đạt ≥ 4.5:1.
   - Drawer chi tiết: điện thoại toàn màn hình (nút ← quay lại, "Nhắn tin" dính đáy); tablet 440px bên phải.
   - Bottom sheet chung (.fx-psheet, component <fx-sheet>): bo 16px, thanh kéo 36×4, cao tối đa
     màn hình − 48px, cuộn riêng, chừa vùng an toàn, trượt 0.25s. Tablet: hộp thoại giữa màn ≤ 480px.
   - Màn thấp (xoay ngang, cao ≤ 500px): header không dính, KPI gọn 1 dòng, tab + ô tìm chung 1 hàng,
     thẻ chừa lề phải cho FAB, drawer gọn.
   - Bảng cuộn ngang: bóng mờ ở mép còn nội dung (gợi ý cuộn); cột dính có bóng tách lớp.
   Lớp phủ: .fx-m-backdrop 900 · sheet 910 · drawer/modal cũ 1000 · popover 1050 · toast 10050.
   ============================================================================= */

/* ---------- Tiện ích ẩn theo mốc (chỉ tồn tại trong media query → desktop không đổi) ---------- */
@media (max-width: 767px) {
  .fx-hide-m { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fx-hide-t { display: none !important; }
}
@media (max-width: 1023px) {
  .fx-hide-c { display: none !important; }
}

/* =============================================================================
   A. CHUNG CHO MÀN CẢM ỨNG (điện thoại + tablet)
   ============================================================================= */
@media (max-width: 1023px) {
  /* ----- Nút / ô nhập đủ lớn để chạm ----- */
  .fx-page-card .btn, .fx-drawer .btn { height: 44px; padding: 0 16px; font-size: 15px; }
  .fx-page-card .btn .ph, .fx-drawer .btn .ph { font-size: 18px; }
  .fx-page-card .fx-icon-btn, .fx-drawer-head .fx-icon-btn { width: 44px; height: 44px; font-size: 20px; }
  .fx-page-card .fx-dashed-btn { height: 44px; }
  .fx-page-card .form-input, .fx-page-card .fx-select, .fx-page-card .fx-addon-input { height: 44px; }
  .fx-page-card .fx-pw .fx-icon-btn { top: 0; right: 0; }
  .fx-page-card input[type="checkbox"], .fx-page-card input[type="radio"] { width: 20px; height: 20px; }

  /* ----- Ô tìm kiếm: co giãn theo hàng, không ép 260px ----- */
  .fx-page-card .fx-search:not(.sm) { height: 44px; min-width: 0; flex: 1 1 220px; }
  .fx-page-card .fx-search:not(.sm) .ph { font-size: 18px; }
  .fx-page-card .fx-search:not(.sm) input { font-size: 15px; height: 100%; }
  /* Nút × xoá nhanh (chỉ render trên màn nhỏ): 44×44, tràn qua viền/đệm của ô tìm */
  .fx-search-clear {
    flex-shrink: 0; width: 44px; height: 44px; margin: -1px -11px -1px -6px; padding: 0; border: none; background: none;
    border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-sub); cursor: pointer;
  }
  .fx-page-card .fx-search .fx-search-clear .ph { font-size: 20px; color: inherit; }
  .fx-search-clear:active { background: var(--fx-active); }
  .fx-search-clear:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }

  /* ----- Tương phản chữ nhỏ ≥ 4.5:1 (đọc ngoài trời) — chỉ màn cảm ứng ----- */
  .fx-tab-count { color: #475467; }
  .fx-tabs button.active .fx-tab-count { color: #0058d9; }
  .fx-tag-green { color: #237804; }
  .fx-tag-cyan { color: #006d75; }
  .fx-tag-orange { color: #ad4e00; }
  .fx-tag.solid.fx-tag-green { background: #08875d; border-color: #08875d; }
  .fx-drawer .fx-info-value.muted { color: var(--text-sub); }

  /* ----- Tab gạch chân: 1 hàng cuộn ngang, không xuống dòng ----- */
  .fx-tabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; border-bottom: none; box-shadow: inset 0 -1px 0 var(--border-color);
  }
  .fx-tabs::-webkit-scrollbar { display: none; }
  .fx-tabs button { flex-shrink: 0; min-height: 44px; white-space: nowrap; }
  .fx-tabs button.active::after { bottom: 0; }

  /* ----- Segmented: cuộn ngang khi dài. Nút nhìn cao 40 trong khung 44 (khớp ô tìm / nút 44 đứng
     cạnh); ::after vô hình phủ cả viền 2px của khung + nửa khe giữa 2 nút → chạm được đủ 44px
     chiều cao (viền khung trước đây là vùng chết). Chạm: nền đậm nhẹ; viền focus vẽ vào trong vì
     khung cuộn cắt mất phần tràn ra ngoài ----- */
  .fx-page-card .fx-seg:not(.sm) { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .fx-page-card .fx-seg:not(.sm)::-webkit-scrollbar { display: none; }
  .fx-page-card .fx-seg:not(.sm) button { position: relative; height: 40px; flex-shrink: 0; white-space: nowrap; padding: 0 14px; }
  .fx-page-card .fx-seg:not(.sm) button::after { content: ""; position: absolute; inset: -2px -1px; }
  .fx-page-card .fx-seg:not(.sm) button:not(.active):active { background: rgba(0, 0, 0, 0.06); }
  .fx-page-card .fx-seg:not(.sm) button:focus-visible { outline-offset: -2px; }

  /* ----- Bảng: cuộn ngang trong khung, chữ không bẻ dòng ----- */
  .fx-table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .fx-page-card .fx-table th, .fx-page-card .fx-table td { padding: 12px; }
  .fx-page-card .fx-table .ellipsis { max-width: 220px; }
  .fx-page-card .fx-table-grid td { padding: 8px; }
  .fx-page-card .fx-table .fx-ch-ico.xs { font-size: 10px; }
  /* Gợi ý cuộn ngang: bóng mờ ở mép trái/phải khi còn nội dung bị khuất (lớp phủ trắng "local"
     đi theo nội dung, bóng "scroll" đứng yên ở mép khung) — bảng dạng thẻ không cần */
  .fx-page-card .fx-table-wrap:not(.fx-adm-cards):not(.fx-m-cards):not(.fx-ch-cards) {
    background:
      linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
      linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, 0.16), rgba(16, 24, 40, 0)) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, 0.16), rgba(16, 24, 40, 0)) right center / 12px 100% no-repeat scroll,
      #fff;
  }

  /* ----- Phân trang: nút 44px ----- */
  .fx-pagination { flex-wrap: wrap; gap: 4px; }
  .fx-page-btn { min-width: 44px; height: 44px; border-radius: 8px; font-size: 15px; }

  /* ----- Trạng thái rỗng ----- */
  .fx-empty { padding: 40px 16px; }
  .fx-empty-compact { padding: 24px 16px; }
  .fx-empty-title { font-size: 15px; }
  .fx-empty-desc { font-size: 13px; max-width: 340px; }
  .fx-empty-cta { flex-wrap: wrap; justify-content: center; }
  .fx-empty-cta .btn { height: 44px; }

  /* ----- Hàng cài đặt + công tắc ----- */
  .fx-setting-row { gap: 12px 16px; padding: 14px 0; min-height: 56px; }
  .fx-switch:not(.sm) { width: 48px; height: 28px; }
  .fx-switch:not(.sm) .fx-switch-knob { top: 2px; left: 2px; width: 24px; height: 24px; }
  .fx-switch:not(.sm).on .fx-switch-knob { left: 22px; }
  .fx-switch::after { content: ""; position: absolute; inset: -8px -4px; }
  .fx-switch.sm::after { inset: -14px -8px; }

  /* ----- Danh sách dạng hàng (Tổng quan, cài đặt…) ----- */
  .fx-list-row { min-height: 56px; }
  .fx-page-card .fx-kpi { min-height: 64px; }

  /* ----- Phản hồi khi chạm (thay cho hover) ----- */
  .fx-page-card .btn-primary:active:not(:disabled) { background: var(--primary-hover); }
  .fx-page-card .btn-secondary:active:not(:disabled) { background: #f2f4f7; }
  .fx-page-card .fx-icon-btn:active:not(:disabled), .fx-drawer .fx-icon-btn:active:not(:disabled) { background: var(--fx-active); }
  .fx-page-card .fx-kpi:not(.static):active { background: #f7f8fa; }
  .fx-list-row:active { background: #eef1f4; }
  .fx-page-card .fx-table tr.clickable:active td { background: #f5f7fa; }
  .fx-page-btn:active:not(:disabled) { background: var(--fx-active); }

  /* ----- Viền focus rõ khi dùng bàn phím / trình đọc màn hình ----- */
  .fx-page-card :is(button, [role="button"], a, select):focus-visible,
  .fx-drawer :is(button, [role="button"], a):focus-visible,
  .fx-psheet :is(button, a):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

  /* ----- Drawer chi tiết (dùng chung): head/đáy dính, cuộn riêng ----- */
  .fx-drawer { overscroll-behavior: contain; display: flex; flex-direction: column; }
  .fx-drawer > * { flex-shrink: 0; }
  .fx-drawer-head { position: sticky; top: 0; z-index: 2; background: #fff; min-height: 56px; }
  .fx-drawer .fx-crm-name .fx-icon-btn { width: 40px; height: 40px; font-size: 18px; }
  .fx-drawer .fx-crm-name .fx-icon-btn .ph { font-size: 18px; }
  .fx-drawer .fx-info-row { min-height: 44px; }
  /* Drawer khách: giá trị dài (kênh, tin cuối) xuống dòng thay vì bị cắt (title không dùng được khi chạm) */
  .pg-cust-drawer .fx-info-row.static { align-items: flex-start; padding: 12px 0; }
  .pg-cust-drawer .fx-info-row.static > .fx-info-label { min-height: 20px; line-height: 20px; }
  .pg-cust-drawer .fx-info-value:not(.link) {
    white-space: normal; overflow-wrap: anywhere; line-height: 20px;
    display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* SĐT (bấm để sao chép): vùng chạm cao 44px */
  .pg-cust-drawer .fx-info-value.link {
    display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; margin: -12px 0; line-height: 20px;
  }
  .pg-cust-drawer .fx-info-value.link:active { opacity: 0.6; }
  .pg-cust-drawer .fx-info-value.link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
  .fx-drawer .fx-crm-trio button { min-height: 44px; font-size: 13px; }
  .fx-drawer-foot {
    position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px; background: #fff; margin-top: auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-light);
  }
  .fx-drawer-foot .btn { flex: 1; height: 48px; font-size: 15px; font-weight: 500; }

  /* ----- Modal nhập tên (FxNameModal) + modal sửa sản phẩm: ô nhập / nút lớn ----- */
  .fx-name-modal .form-input, .pg-prod-edit .form-input { height: 44px; }
  .fx-name-modal .btn-close, .pg-prod-edit .btn-close { width: 44px; height: 44px; margin-right: -10px; }
  .fx-name-modal .fx-modal-foot .btn, .pg-prod-edit .fx-modal-foot .btn { height: 44px; min-width: 96px; font-size: 15px; }

  /* ----- Bottom sheet chung (<fx-sheet>) ----- */
  .fx-psheet-wrap {
    position: fixed; left: 0; right: 0; top: 0; height: var(--app-h, 100dvh); z-index: 910;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center; pointer-events: none;
  }
  .fx-psheet {
    pointer-events: auto; width: 100%; max-width: 560px; max-height: calc(var(--app-h, 100dvh) - 48px);
    display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(8, 28, 54, 0.18); padding-bottom: env(safe-area-inset-bottom);
    animation: fx-psheet-up 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes fx-psheet-up { from { transform: translateY(100%); } }
  .fx-psheet-grab { flex-shrink: 0; width: 36px; height: 4px; border-radius: 2px; background: #d0d5dd; margin: 8px auto 0; }
  .fx-psheet-head { flex-shrink: 0; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 4px 0 16px; }
  .fx-psheet-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-psheet-close {
    width: 44px; height: 44px; border: none; background: none; border-radius: 22px; color: var(--text-sub);
    font-size: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  }
  .fx-psheet-close:active { background: var(--fx-active); }
  .fx-psheet:focus { outline: none; }
  .fx-psheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 12px; }
  .fx-psheet-foot { flex-shrink: 0; display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-light); }
  .fx-psheet-foot .btn { flex: 1; height: 48px; font-size: 15px; font-weight: 500; }
  .fx-psheet-item {
    display: flex; align-items: center; gap: 14px; width: calc(100% + 16px); min-height: 52px; margin: 0 -8px; padding: 0 8px;
    border: none; background: none; border-radius: 10px; font-size: 16px; color: var(--text-main); text-align: left; cursor: pointer;
  }
  .fx-psheet-item .ph { font-size: 22px; color: var(--text-sub); flex-shrink: 0; }
  .fx-psheet-item:active { background: #eef1f4; }
  .fx-psheet-item.danger, .fx-psheet-item.danger .ph { color: #d92d20; }
  .fx-psheet-sep { height: 1px; background: var(--border-light); margin: 6px 0; }
  .fx-psheet-info { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px; margin: 4px 0 8px; background: #f7f8fa; border-radius: 12px; }
  .fx-psheet-info > div { display: flex; flex-direction: column; min-width: 72px; line-height: 20px; }
  .fx-psheet-info small { font-size: 12px; color: var(--text-sub); }
  .fx-psheet-info span, .fx-psheet-info b { font-size: 14px; font-weight: 500; }
  .fx-psheet-text { margin: 0; padding: 4px 0 8px; font-size: 15px; line-height: 22px; color: var(--text-main); overflow-wrap: anywhere; }
  .fx-psheet-foot .fx-btn-danger { background: #d92d20; border: 1px solid #d92d20; color: #fff; }
  .fx-psheet-foot .fx-btn-danger:active { background: #b42318; border-color: #b42318; }
  .fx-psheet .fx-stat-row { min-height: 48px; font-size: 15px; }
  .fx-psheet .fx-stat-row i { font-size: 14px; }
  /* Form 1 cột trong sheet */
  .fx-mform { display: flex; flex-direction: column; padding-top: 4px; }
  .fx-mform .fx-label { margin: 14px 0 6px; font-size: 14px; }
  .fx-mform .fx-label:first-child { margin-top: 4px; }
  .fx-mform .form-input, .fx-mform .fx-select { width: 100%; height: 48px; }
}

/* ----- Màn cảm ứng không có chuột: bỏ hiệu ứng hover bị "dính" sau khi chạm ----- */
@media (max-width: 1023px) and (hover: none) {
  .fx-page-card .fx-table tbody tr:hover td { background: #fff; }
  /* Khách hàng bọc trong .fx-split (pages2.css cũng nhắm .fx-split) → giữ nền trắng cho cột ghim */
  .fx-shell .fx-split > .pg-customers.fx-page-card .fx-table tbody tr:hover td { background: #fff; }
  .fx-page-card .fx-kpi:hover:not(.static) { border-color: var(--border-color); box-shadow: none; }
  .fx-list-row:hover { background: none; }
  .fx-list-row:hover .fx-chev { color: var(--text-muted); }
  .fx-page-card .btn-secondary:hover:not(:disabled) { color: var(--text-main); border-color: var(--fx-ctrl-border); }
  .fx-page-card .btn-primary:hover:not(:disabled) { background: var(--primary); }
  .fx-page-card .fx-icon-btn:not(.on):hover, .fx-drawer .fx-icon-btn:not(.on):hover { background: transparent; color: var(--text-sub); }
  .fx-page-card .fx-icon-btn.bordered:hover { background: #fff; border-color: var(--fx-ctrl-border); }
  .fx-page-btn:hover:not(:disabled) { background: transparent; }
  .fx-switch:not(.on):hover { background: rgba(0, 0, 0, 0.25); }
  .fx-switch.on:hover { background: var(--primary); }
  .fx-tabs button:not(.active):hover { color: var(--text-main); }
}

/* =============================================================================
   B. ĐIỆN THOẠI (≤ 767px)
   ============================================================================= */
@media (max-width: 767px) {
  /* ----- Khung trang: tràn viền, header dính đỉnh ----- */
  .fx-page-card { border-radius: 0; box-shadow: none; padding: 0 16px 24px; min-height: 100%; }
  .fx-page-card:not(:has(> .fx-page-head)) { padding-top: calc(12px + env(safe-area-inset-top)); }
  .fx-page-card:has(> .fx-fab) { padding-bottom: 96px; }
  .fx-split { gap: 0; }
  .fx-split > .fx-page-card { min-height: 100%; }

  .fx-page-head {
    position: sticky; top: 0; z-index: 20; background: #fff; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    margin: 0 -16px 12px; padding: calc(6px + env(safe-area-inset-top)) 6px 6px 16px; min-height: calc(56px + env(safe-area-inset-top));
    box-shadow: 0 1px 0 var(--border-light);
  }
  .fx-page-card.fx-flush > .fx-page-head { margin: 0 0 12px; }
  .fx-page-head-text { flex: 1 1 160px; }
  .fx-page-title { display: block; font-size: 18px; font-weight: 600; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-page-title .fx-soon { vertical-align: 1px; }
  .fx-page-head .fx-page-sub { font-size: 13px; line-height: 18px; margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-page-actions {
    flex: 0 1 auto; max-width: 100%; margin-left: auto; gap: 4px; overflow-x: auto; scrollbar-width: none;
  }
  .fx-page-actions::-webkit-scrollbar { display: none; }
  .fx-page-actions .fx-icon-btn { color: var(--text-main); font-size: 22px; }
  .fx-page-actions .fx-icon-btn.bordered { border-color: transparent; background: transparent; }

  /* ----- Thanh công cụ: ô tìm kiếm chiếm hàng, nút lọc thành icon 44px ----- */
  .fx-toolbar { gap: 8px; margin-bottom: 12px; }
  .fx-page-card .fx-search:not(.sm) { background: #f2f4f7; border-color: transparent; border-radius: 10px; }
  .fx-page-card .fx-search:not(.sm) > .ph { color: var(--text-sub); }
  .fx-page-card .fx-search:not(.sm) input::placeholder { color: var(--text-sub); opacity: 1; }
  .fx-page-card .fx-search:not(.sm):focus-within { background: #fff; border-color: var(--primary); }
  .fx-tb-icon { font-size: 0 !important; width: 44px; padding: 0 !important; gap: 0; flex-shrink: 0; }
  .fx-tb-icon .ph { font-size: 20px !important; }
  .fx-page-card .fx-toolbar > .fx-select { flex: 1 1 140px; min-width: 0; }

  /* ----- Tab / segmented tràn viền để cuộn tới mép ----- */
  .fx-page-card > .fx-tabs { margin: 0 -16px 12px; padding: 0 16px; gap: 20px; scroll-padding: 0 16px; }
  .fx-tabs button { font-size: 15px; }

  /* ----- KPI: lưới 2 cột, số 20px ----- */
  .fx-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .fx-kpi { padding: 12px; gap: 10px; border-radius: 12px; min-width: 0; }
  .fx-kpi-ico { width: 36px; height: 36px; font-size: 18px; }
  .fx-kpi-text { flex: 1; }
  .fx-kpi-text b { font-size: 20px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-kpi-text small {
    font-size: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Hàng KPI cuộn ngang có snap (thẻ rộng theo số tiền, nhãn ≤ 140px) */
  .fx-kpi-row.fx-kpi-scroll {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain;
    margin: 0 -16px 12px; padding: 0 16px 2px; scrollbar-width: none;
  }
  .fx-kpi-row.fx-kpi-scroll::-webkit-scrollbar { display: none; }
  .fx-kpi-scroll > .fx-kpi { scroll-snap-align: start; min-width: 148px; }
  /* Thẻ rộng theo số (doanh thu lớn không bị cắt), nhãn tối đa 140px / 2 dòng */
  .fx-kpi-scroll .fx-kpi-text { min-width: max-content; }
  .fx-kpi-scroll .fx-kpi-text b { overflow: visible; text-overflow: clip; }
  .fx-kpi-scroll .fx-kpi-text small { max-width: 140px; }

  /* ----- Lưới / form: 1 cột ----- */
  .fx-card-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fx-form-grid { gap: 12px; }
  .fx-form-grid .form-input, .fx-form-grid .fx-select { width: 100%; }
  .fx-page-card .fx-form-actions {
    position: sticky; bottom: 0; z-index: 5; gap: 8px; background: #fff; margin: 16px -16px 0; padding: 12px 16px;
    border-top: 1px solid var(--border-light);
  }
  .fx-page-card .fx-form-actions .btn { flex: 1; }
  .fx-inline-form { padding: 12px; }
  .fx-inline-form > :not(.btn) { flex: 1 1 100%; width: 100% !important; min-width: 0 !important; }
  .fx-inline-form > .btn { flex: 1 1 0; }
  .fx-grid-2 { gap: 12px; }

  /* ----- Mục / danh sách ----- */
  .fx-section-block { margin-top: 20px; }
  .fx-section-head { flex-wrap: wrap; }
  .fx-list-card { padding: 8px; border-radius: 12px; }
  .fx-list-card-head { padding: 8px 8px 4px; }
  .fx-list-row { padding: 10px 8px; }
  .fx-list-row-text small { line-height: 18px; }

  /* ----- Hàng cài đặt: nhãn trên, ô chọn/nhập xuống dòng full rộng; công tắc giữ bên phải ----- */
  .fx-setting-row { flex-wrap: wrap; }
  .fx-setting-text { flex: 1 1 180px; }
  .fx-setting-desc { font-size: 13px; line-height: 18px; }
  .fx-setting-control:has(select, textarea, .fx-select, .fx-seg, input:not([type="checkbox"]):not([type="radio"])) { flex: 1 1 100%; flex-wrap: wrap; }
  .fx-setting-control .fx-select, .fx-setting-control .form-input { min-width: 0; flex: 1 1 100%; width: 100%; }

  /* ----- Bảng dữ liệu cấp trang: tràn viền, cột đầu dính trái ----- */
  .fx-page-card .fx-table-wrap:not(.modal-overlay *):not(.fx-adm-cards):not(.fx-m-cards) {
    margin: 0 -16px; border-radius: 0; border-left: none; border-right: none;
  }
  .fx-page-card .fx-table th, .fx-page-card .fx-table td { padding: 10px 12px; }
  /* Ô bảng không xuống dòng — chỉ bảng dữ liệu cuộn ngang, KHÔNG áp cho bảng dạng thẻ (.fx-adm-cards/.fx-m-cards) */
  .fx-page-card .fx-table-wrap:not(.fx-adm-cards):not(.fx-m-cards):not(.fx-ch-cards) .fx-table td { white-space: nowrap; }
  .fx-page-card .fx-table-wrap:not(.modal-overlay *):not(.fx-adm-cards):not(.fx-m-cards) .fx-table:not(.fx-table-grid) :is(th, td):first-child:not([colspan]) {
    position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: inset -1px 0 0 var(--border-light);
  }
  .fx-page-card .fx-table-wrap:not(.modal-overlay *):not(.fx-adm-cards):not(.fx-m-cards) .fx-table:not(.fx-table-grid) th:first-child { z-index: 2; background: var(--fx-th-bg); }
  /* Ô rỗng trải hết bảng: giữ nội dung trong màn hình khi bảng rộng hơn màn */
  .fx-page-card .fx-table td[colspan]:has(> .fx-empty) { padding: 0; }
  .fx-page-card .fx-table td[colspan] > .fx-empty { position: sticky; left: 0; width: 100vw; max-width: 100vw; box-sizing: border-box; }

  /* Khách hàng bọc trong .fx-split (pages2.css ép ô tìm 100% cho .fx-split) → giữ ô tìm + nút lọc chung 1 hàng */
  .fx-shell.is-mobile .fx-split > .pg-customers.fx-page-card .fx-toolbar > .fx-search { flex: 1 1 200px; }

  /* ----- Phân trang: giữa màn, dòng đếm tách riêng ----- */
  .fx-pagination { justify-content: center; }
  .fx-pagination > .fx-muted { flex: 1 1 100%; margin: 0 0 4px; text-align: center; }

  /* ----- FAB: nút tạo chính trong tầm ngón cái, nằm trên thanh tab ----- */
  .fx-fab {
    position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
    display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px 0 16px; border: none; border-radius: 16px;
    background: var(--primary); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 104, 255, 0.32), 0 2px 4px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s, background-color 0.15s;
  }
  .fx-shell.m-has-tabbar .fx-fab { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .fx-fab .ph { font-size: 24px; flex-shrink: 0; }
  .fx-fab > span { max-width: 220px; overflow: hidden; white-space: nowrap; transition: max-width 0.2s, opacity 0.2s; }
  .fx-fab:active { background: var(--primary-hover); transform: scale(0.96); }
  .fx-fab:focus-visible { outline: 3px solid #99c2ff; outline-offset: 2px; }
  .fx-fab { transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s, visibility 0.2s, padding 0.2s, gap 0.2s, background-color 0.15s; }
  /* Đã cuộn khỏi đầu trang → FAB thu thành nút tròn 56px (nhãn vẫn còn cho trình đọc màn hình) */
  .fx-page-card.fx-m-scrolled .fx-fab { padding: 0 16px; gap: 0; }
  .fx-page-card.fx-m-scrolled .fx-fab > span { max-width: 0; opacity: 0; }
  /* Đang cuộn xuống → ẩn FAB để không che nút trên thẻ; cuộn lên / chạm đáy → hiện lại */
  .fx-page-card.fx-m-down .fx-fab { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(24px) scale(0.6); }

  /* ----- Danh sách thẻ (thay bảng khách / đơn / sản phẩm) ----- */
  .fx-mlist { margin: 0 -16px; }
  .fx-mlist-meta { padding: 0 16px 8px; font-size: 13px; color: var(--text-sub); }
  .fx-mlist-loading { padding: 40px 16px; text-align: center; color: var(--text-sub); font-size: 14px; }
  .fx-mlist-more { display: flex; width: calc(100% - 32px); margin: 16px auto 0; }
  .fx-mrow {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px;
    background: #fff; border: none; border-bottom: 1px solid var(--border-light); border-radius: 0;
    text-align: left; font: inherit; color: var(--text-main); cursor: pointer;
  }
  .fx-mlist > .fx-mrow:first-of-type, .fx-mlist-meta + .fx-mrow { border-top: 1px solid var(--border-light); }
  .fx-mrow:active { background: #f2f4f7; }
  .fx-mrow:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
  /* Thẻ có nút phụ: 1 nút phủ cả thẻ (hành động chính) + nút phụ nằm trên → không lồng nút trong nút */
  .fx-mrow:has(> .fx-mrow-hit) { position: relative; cursor: default; }
  .fx-mrow:has(> .fx-mrow-hit):active { background: #fff; }
  .fx-mrow:has(> .fx-mrow-hit:active) { background: #f2f4f7; }
  .fx-mrow-hit {
    position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; border-radius: 0;
    background: transparent; cursor: pointer; font: inherit; color: inherit;
  }
  .fx-mrow-hit:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
  .fx-mrow .fx-mrow-act { position: relative; z-index: 1; }
  .fx-mrow .fx-mrow-act:disabled { pointer-events: none; } /* nút mờ: chạm rơi xuống thẻ */
  .fx-mrow-name { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: 15px; line-height: 22px; }
  .fx-mrow-name > b { flex: 0 1 auto; font-weight: 500; color: var(--text-main); }
  .fx-mrow-phone { flex-shrink: 0; white-space: nowrap; font-size: 13px; color: var(--text-sub); }
  .fx-mrow-sub > .fx-mrow-phone { color: var(--text-main); }
  .fx-mrow-dot { flex-shrink: 0; }
  .fx-mrow-title.fx-mrow-clamp {
    flex: none; white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .fx-mrow-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #f0f2f5; flex-shrink: 0; }
  .fx-mrow-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #f0f2f5; flex-shrink: 0; }
  .fx-thumb.fx-mrow-thumb { background: #fff0f6; font-size: 22px; }
  .fx-mrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .fx-mrow-top { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 22px; }
  .fx-mrow-title {
    flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 22px; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fx-mrow-title small { font-size: 13px; font-weight: 400; color: var(--text-sub); }
  .fx-mrow-time { flex-shrink: 0; font-size: 12px; line-height: 18px; color: var(--text-sub); }
  .fx-mrow-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; line-height: 20px; color: var(--text-sub); }
  .fx-mrow-sub .fx-ch-ico.xs { margin: 0; font-size: 10px; vertical-align: 0; }
  .fx-mrow-ell { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-mrow-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .fx-mrow-amount { flex-shrink: 0; font-size: 15px; font-weight: 600; line-height: 22px; color: var(--text-main); }
  .fx-mrow-foot { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-bottom: -8px; }
  .fx-mrow-foot .fx-mrow-time { margin-right: auto; }
  .fx-mrow-foot .fx-icon-btn { margin-right: -10px; color: var(--primary); font-size: 22px; }
  .fx-mrow-order .fx-mrow-top { justify-content: space-between; }
  .fx-mrow-order .fx-mrow-title { flex: none; }
  .fx-mrow-product { align-items: flex-start; padding-right: 6px; }
  .fx-mrow-product .fx-icon-btn { color: var(--text-sub); margin-top: 2px; }
  .fx-mrow-product .fx-mrow-sub { gap: 8px; }
  .fx-mrow-product .fx-mrow-sub .fx-tag { flex-shrink: 0; }
  .fx-mrow-product .fx-mrow-amount { color: var(--text-main); }

  /* ----- Đơn hàng: tab trạng thái + ô tìm dính ngay dưới header khi cuộn ----- */
  .fx-shell.is-mobile .pg-orders > .fx-tabs {
    position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 19; background: #fff; margin-bottom: 0;
  }
  .fx-shell.is-mobile .pg-orders > .fx-toolbar {
    position: sticky; top: calc(100px + env(safe-area-inset-top)); z-index: 18; background: #fff;
    margin: 0 -16px; padding: 8px 16px; box-shadow: 0 1px 0 var(--border-light);
  }
  /* Sản phẩm / Khách hàng: ô tìm dính dưới header */
  .fx-shell.is-mobile :is(.pg-products, .pg-customers) > .fx-toolbar {
    position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 18; background: #fff;
    margin: -4px -16px 8px; padding: 4px 16px 8px;
  }

  /* ----- Drawer chi tiết: toàn màn hình ----- */
  .fx-drawer-mask { background: transparent; }
  .fx-drawer {
    width: 100%; max-width: none; height: var(--app-h, 100dvh); box-shadow: none;
    animation: fx-drawer-full 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes fx-drawer-full { from { transform: translateX(100%); } }
  .fx-drawer-head {
    justify-content: flex-start; gap: 4px; padding: calc(4px + env(safe-area-inset-top)) 16px 4px 4px; font-size: 17px;
  }
  .fx-drawer-head > b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-drawer-back { color: var(--text-main) !important; font-size: 22px !important; }
  .fx-drawer .fx-crm-hero { padding: 20px 16px 16px; }
  .fx-drawer .crm-section { padding: 16px; }
  .fx-drawer .fx-info-label { width: 132px; }

  /* ----- Tổng quan ----- */
  .pg-home .fx-home-hero { align-items: flex-start; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; }
  .pg-home .fx-home-hero .fx-chav.xl { width: 56px; height: 56px; }
  .pg-home .fx-home-info { min-width: 0; }
  .pg-home .fx-home-name { font-size: 18px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
  .pg-home .fx-home-cols { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin-top: 6px; }
  .pg-home .fx-home-cols > div { display: contents; }
  .pg-home .fx-home-cols small { font-size: 13px; line-height: 20px; }
  .pg-home .fx-home-cols span { font-size: 14px; line-height: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ----- Sản phẩm: modal sửa → nút đáy chia đôi ----- */
  .pg-prod-edit .fx-modal-foot .btn, .fx-name-modal .fx-modal-foot .btn { flex: 1; }
  .pg-prod-edit .fx-setting-row { flex-wrap: nowrap; }
}

/* ----- Điện thoại xoay ngang / màn thấp: bỏ phụ đề, header gọn ----- */
@media (max-width: 767px) and (max-height: 500px) {
  .fx-page-head .fx-page-sub { display: none; }
  .fx-page-head { min-height: calc(48px + env(safe-area-inset-top)); padding-top: calc(2px + env(safe-area-inset-top)); padding-bottom: 2px; }
  .fx-psheet { max-height: calc(var(--app-h, 100dvh) - 24px); }
  /* Màn thấp: FAB thu thành nút tròn 48px (nhãn ẩn khỏi mắt nhưng trình đọc màn hình vẫn đọc) */
  .fx-fab, .fx-page-card.fx-m-scrolled .fx-fab { width: 48px; height: 48px; padding: 0; gap: 0; justify-content: center; border-radius: 24px; }
  .fx-shell.m-has-tabbar .fx-fab { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .fx-fab > span, .fx-page-card.fx-m-scrolled .fx-fab > span {
    position: absolute; width: 1px; height: 1px; max-width: none; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  /* Trang danh sách: header cuộn đi cùng nội dung (chỉ còn thanh tìm / tab dính) → danh sách rộng chỗ */
  .fx-shell.is-mobile :is(.pg-home, .pg-orders, .pg-products, .pg-customers) > .fx-page-head { position: relative; top: auto; }
  .fx-shell.is-mobile :is(.pg-products, .pg-customers) > .fx-toolbar { top: 0; }
  /* Thẻ chừa lề phải cho FAB tròn → nút chat / "…" ở cuối thẻ không nằm dưới FAB */
  .fx-page-card:has(> .fx-fab) .fx-mrow { padding-right: 72px; }
  /* Tổng quan: KPI 4 cột thay vì 2 (tận dụng bề ngang) */
  .fx-kpi-row:not(.fx-kpi-scroll) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .fx-kpi-scroll .fx-kpi-text small { max-width: none; }

  /* Đơn hàng: tab trạng thái + ô tìm chung 1 hàng, dính đỉnh khi cuộn */
  .fx-shell.is-mobile .pg-orders.fx-page-card { display: flex; flex-wrap: wrap; align-content: flex-start; }
  .fx-shell.is-mobile .pg-orders.fx-page-card > * { flex: 1 1 100%; min-width: 0; }
  /* basis 200px: KPI (100%) + tab không lọt chung 1 hàng (lề âm -16px) → tab + ô tìm xuống hàng riêng */
  .fx-shell.is-mobile .pg-orders.fx-page-card > .fx-tabs { flex: 1 1 200px; top: 0; margin: 0 0 0 -16px; gap: 16px; }
  .fx-shell.is-mobile .pg-orders.fx-page-card > .fx-tabs button { min-height: 52px; }
  .fx-shell.is-mobile .pg-orders.fx-page-card > .fx-toolbar {
    flex: 0 0 312px; top: 0; margin: 0 -16px 0 0; padding: 4px 16px 4px 12px; box-shadow: inset 0 -1px 0 var(--border-color);
  }
}

/* ----- Màn thấp (điện thoại ngang + tablet ngang như 844×390): KPI gọn 1 dòng, drawer gọn ----- */
@media (max-width: 1023px) and (max-height: 500px) {
  .fx-page-card .fx-kpi { min-height: 0; padding: 8px 12px; }
  .fx-page-card .fx-kpi-ico { display: none; }
  .fx-page-card .fx-kpi-text b { font-size: 17px; line-height: 22px; }
  .fx-page-card .fx-kpi-text small { display: block; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-page-card .fx-kpi-row { margin-bottom: 8px; }

  .fx-drawer-head { min-height: 48px; }
  .fx-drawer .fx-crm-hero { padding: 12px 16px; }
  .fx-drawer .crm-section { padding-top: 8px; padding-bottom: 8px; }
  /* Chân drawer không dính (nút "Mở đoạn hội thoại" ở đầu drawer làm cùng việc) → nội dung đủ chỗ */
  .fx-drawer-foot { position: static; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .fx-drawer-foot .btn { height: 44px; }
}

/* =============================================================================
   C. TABLET (768–1023px)
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Sheet trên tablet: hộp thoại giữa màn ≤ 480px (không trải cả bề ngang, gần điểm chạm hơn) */
  .fx-psheet-wrap { justify-content: center; padding: 24px; }
  .fx-psheet {
    max-width: 480px; max-height: calc(var(--app-h, 100dvh) - 48px); border-radius: 16px; padding-bottom: 0;
    box-shadow: 0 16px 48px rgba(8, 28, 54, 0.24); animation: fx-psheet-pop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes fx-psheet-pop { from { opacity: 0; transform: scale(0.96); } }
  .fx-psheet-grab { display: none; }
  .fx-psheet-head { min-height: 56px; }

  .fx-page-card { padding: 20px; }
  .fx-page-head { margin-bottom: 16px; flex-wrap: wrap; }
  .fx-page-head-text { flex: 1 1 240px; }
  .fx-page-actions { flex-wrap: wrap; margin-left: auto; }
  .fx-toolbar { margin-bottom: 12px; }

  /* KPI: 4 cột (tự co theo số thẻ), số 20px */
  .fx-kpi-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .fx-kpi { padding: 12px; gap: 10px; min-width: 0; }
  .fx-kpi-ico { width: 36px; height: 36px; font-size: 18px; }
  .fx-kpi-text { flex: 1; }
  .fx-kpi-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-kpi-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  .fx-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pg-home .fx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-setting-control .fx-select { min-width: 200px; }

  /* Ô bảng không xuống dòng (bảng cuộn ngang trong khung) — trừ bảng quản trị của pages2.css
     (.fx-adm-cards: thẻ hoặc cột nội dung dài cần xuống dòng như desktop) */
  .fx-page-card .fx-table-wrap:not(.fx-adm-cards):not(.fx-ch-cards):not(.fx-staff-table) .fx-table td { white-space: nowrap; }

  /* Bảng Đơn hàng / Sản phẩm: cột "Thao tác" dính phải → luôn thấy nút khi bảng cuộn ngang
     (bóng bên trái tách lớp, thấy rõ nội dung đang trượt dưới cột) */
  :is(.pg-orders, .pg-products) .fx-table :is(th, td) { padding-left: 8px; padding-right: 8px; }
  :is(.pg-orders, .pg-products) .fx-table :is(th, td):first-child { padding-left: 12px; }
  :is(.pg-orders, .pg-products) .fx-table :is(th, td):last-child:not([colspan]) {
    position: sticky; right: 0; z-index: 1; background: #fff; padding: 8px;
    box-shadow: inset 1px 0 0 var(--border-light), -6px 0 8px -6px rgba(16, 24, 40, 0.18);
  }
  :is(.pg-orders, .pg-products) .fx-table th:last-child { z-index: 2; background: var(--fx-th-bg); padding: 12px; }
  @media (hover: hover) {
    :is(.pg-orders, .pg-products) .fx-table tbody tr:hover > td:last-child:not([colspan]) { background: #fafafa; }
  }

  /* Đơn hàng: KPI doanh thu rộng hơn (đủ số tiền); tên khách / sản phẩm cắt gọn để bảng vừa khung */
  .pg-orders .fx-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); }
  .pg-orders .fx-table .fx-cell-2 > span:not(.ellipsis) { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pg-orders .fx-table .fx-cell-2 > .ellipsis { max-width: 170px; }
  .pg-orders .fx-table .fx-tag { min-width: max-content; }
  /* Tablet dọc hẹp (768–899, vd 820): cắt gọn thêm → cột Trạng thái không bị đẩy xuống dưới cột Thao tác */
  @media (max-width: 899px) {
    .pg-orders .fx-table .fx-cell-2 > span:not(.ellipsis) { max-width: 150px; }
    .pg-orders .fx-table .fx-cell-2 > .ellipsis { max-width: 120px; }
  }
  .fx-t-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--text-sub); white-space: nowrap; }
  /* Sản phẩm: tên tối đa 2 dòng thay vì kéo giãn bảng (cột Ngày tạo ẩn trên tablet — .fx-hide-t) */
  .pg-products .fx-table .fx-cell-user > span:not(.fx-thumb) {
    min-width: 128px; max-width: 200px; white-space: normal; line-height: 20px; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Màn thấp (844×390…): bỏ phụ đề header, tab + ô tìm Đơn hàng chung 1 hàng */
  @media (max-height: 500px) {
    .fx-page-card { padding: 12px 16px; }
    .fx-page-head { margin-bottom: 8px; }
    .fx-page-head .fx-page-sub { display: none; }
    .pg-orders.fx-page-card { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 12px; }
    .pg-orders.fx-page-card > * { flex: 1 1 100%; min-width: 0; }
    .pg-orders.fx-page-card > .fx-tabs { flex: 1 1 200px; margin-bottom: 8px; gap: 16px; }
    .pg-orders.fx-page-card > .fx-toolbar { flex: 0 0 300px; margin-bottom: 8px; flex-wrap: nowrap; }
    /* Nút "Khoảng ngày" chỉ còn icon (aria-label giữ tên) → ô tìm + nút vừa 1 hàng 300px */
    .pg-orders > .fx-toolbar .fx-tb-icon { font-size: 0 !important; width: 44px; padding: 0 !important; gap: 0; flex-shrink: 0; justify-content: center; }
    .pg-orders > .fx-toolbar .fx-tb-icon .ph { font-size: 20px !important; }
  }

  /* Drawer chi tiết: panel phải 440px */
  .fx-drawer { width: 440px; max-width: calc(100vw - 56px); }
  .fx-drawer-head { padding: 6px 8px 6px 24px; }
}

/* ----- Giảm chuyển động theo cài đặt hệ thống ----- */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .fx-psheet, .fx-drawer, .fx-fab { animation: none !important; transition: none !important; }
  .fx-fab:active { transform: none; }
  .fx-switch-knob { transition: none; }
}


/* =============================================================================
   MOBILE 4b. TRANG QUẢN TRỊ
   Cài đặt · Tài khoản · Automation · Luồng tin nhắn · AI Agents · Gửi tin nhắn ·
   Báo cáo · Bảng kênh (ChannelsTable)
   Mốc: điện thoại ≤ 767px (.fx-shell.is-mobile) · tablet 768–1023px (.fx-shell.is-tablet)
        desktop ≥ 1024px: KHÔNG có quy tắc nào trong file này áp dụng.
   Phạm vi: chỉ các lớp của vùng này (.fx-subnav*, .fx-split*, .fx-kw*, .fx-flow*, .fx-step*,
   .fx-perm*, .fx-ch*, .fx-chav*, .fx-int*, .fx-addon*, .fx-set-card*, .fx-radio*,
   .fx-chart*, .fx-kb*, .fx-adm-*). Khung chung (.fx-page-card, .fx-page-head, nút/ô 44px,
   .fx-fab, .fx-form-actions, .fx-setting-row, .fx-switch…) do phần 3 (trang chính) của file này (nạp TRƯỚC file
   này) quyết định; ở đây chỉ chỉnh khi nằm TRONG trang của vùng:
     trang có nav cấp 2  = .fx-split:has(> .fx-subnav)
     trang đơn của vùng  = .fx-adm-page (Luồng tin nhắn, Gửi tin nhắn)
     editor luồng        = .fx-flow-editor
   Bảng → thẻ: lớp .fx-adm-cards trên .fx-table-wrap (pages.css bỏ qua lớp này khi làm
   bảng tràn viền + cột dính).
   Lớp phủ: nền mờ 900 · sheet 910 · modal cũ 1000 · popover 1050.
   ============================================================================= */

/* =============================================================================
   A. MÀN CẢM ỨNG (điện thoại + tablet)
   ============================================================================= */
@media (max-width: 1023px) {
  /* ---------- Editor luồng (không nằm trong .fx-page-card): control ≥ 44px ---------- */
  .fx-shell:is(.is-mobile, .is-tablet) .fx-flow-editor .btn:not(.btn-close) { min-height: 44px; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-flow-editor .fx-icon-btn { min-width: 44px; min-height: 44px; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-flow-editor :is(.form-input, .fx-select) { height: 44px; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-flow-editor .fx-dashed-btn { height: 44px; }
  /* Bảng chọn loại bước là sheet đáy trên mọi màn nhỏ: nền mờ riêng của trang (App không vẽ
     nền mờ cho lớp "_flowEditor"); kiểu sheet: điện thoại ở phần B, tablet ở phần C */
  .fx-shell:is(.is-mobile, .is-tablet) .fx-step-backdrop {
    position: fixed; inset: 0; z-index: 900; background: rgba(8, 28, 54, 0.4); animation: fx-m-fade 0.2s ease-out;
  }
  @keyframes fx-adm-sheet-in { from { transform: translateY(100%); } }

  /* Liên kết "Xem tất cả…" ở đầu mục + link trong hàng link: vùng chạm 44px */
  .fx-shell:is(.is-mobile, .is-tablet) :is(.fx-split:has(> .fx-subnav), .fx-adm-page) .fx-section-head .fx-link {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-adm-linkrow .fx-link { min-height: 44px; }

  /* Tiêu điểm bàn phím rõ ràng (phần tử nằm ngoài .fx-page-card hoặc không phải button chuẩn) */
  .fx-shell:is(.is-mobile, .is-tablet) :is(.fx-subnav-item, .fx-set-card, .fx-radio-card, .fx-chart-chip, .fx-step-type, .fx-flow-editor button):focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
  }

  /* ---------- Nav cấp 2 → dải tab cuộn ngang dính trên (≤ 900px, khi theme xếp dọc .fx-split) ---------- */
  @media (max-width: 900px) {
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split:has(> .fx-subnav) { gap: 0; }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav {
      position: sticky; top: 0; z-index: 20; flex-shrink: 0;
      display: flex; align-items: stretch; gap: 0; width: auto; height: 48px; padding: 0 8px; margin: 0;
      overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
      border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border-color); background: #fff;
    }
    /* mờ 2 mép → gợi ý còn mục để cuộn. Vẽ bằng 2 lớp phủ dính (không dùng mask-image: mask làm
       trong suốt luôn nền trắng của dải → nội dung cuộn bên dưới lộ qua mép dải).
       left/right -8px: vị trí dính tính trong vùng padding 8px của dải → âm 8px để phủ tới sát mép. */
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav::before,
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav::after {
      content: ""; position: sticky; z-index: 1; flex: 0 0 auto; align-self: stretch; pointer-events: none;
    }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav::before {
      left: -8px; width: 8px; margin-left: -8px; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav::after {
      right: -8px; width: 24px; margin: 0 -8px 0 -16px; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 85%);
    }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav::-webkit-scrollbar { display: none; }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav :is(.fx-subnav-title, .fx-subnav-group) { display: none; }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav .fx-subnav-item {
      position: relative; flex: 0 0 auto; width: auto; height: 48px; padding: 0 12px; gap: 0;
      border-radius: 0; background: none; color: var(--text-sub); font-size: 15px; white-space: nowrap;
      scroll-snap-align: center;
    }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav .fx-subnav-item .ph { display: none; }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav .fx-subnav-item.active { color: var(--primary); font-weight: 500; background: none; }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav .fx-subnav-item.active::after {
      content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary);
    }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav .fx-subnav-item:active { background: var(--fx-hover); }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav .fx-subnav-item:focus-visible { outline-offset: -2px; }
    /* Màn thấp (xoay ngang, cao ≤ 500px): dải tab cuộn đi cùng trang, không dính đỉnh */
    @media (max-height: 500px) {
      .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav { position: relative; }
    }
  }

  /* ---------- Bảng → thẻ (điện thoại: mọi .fx-adm-cards; tablet: kênh + nhân sự, lưới 2 cột) ---------- */
  @media (max-width: 1023px) {
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) {
      margin: 0; border: none; border-radius: 0; overflow: visible;
    }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table { display: block; width: 100%; }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) thead { display: none; }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) tbody { display: flex; flex-direction: column; gap: 12px; }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) tbody tr {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0;
      padding: 12px 14px; background: #fff; border: 1px solid var(--border-color); border-radius: 12px;
    }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td {
      position: static; display: block; min-width: 0; padding: 0; border: none; background: transparent; box-shadow: none;
      font-size: 14px; line-height: 20px; white-space: normal;
    }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td.fx-muted { color: var(--text-sub); }
    /* Ô chính (cột đầu): chiếm hết dòng đầu */
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td:first-child { flex: 1 1 0; font-size: 15px; }
    /* Ô có nhãn (data-label): 1 dòng "Nhãn   giá trị" */
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td[data-label] {
      flex: 1 1 100%; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td[data-label]::before {
      content: attr(data-label); flex: 0 0 88px; color: var(--text-sub); font-size: 13px;
    }
    /* Hàng nút thao tác (cột cuối): dải dưới cùng của thẻ, nút xoá tách sang phải */
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td:last-child:not(:first-child):has(.fx-icon-btn) {
      flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; padding-top: 8px;
      border-top: 1px solid var(--border-light); text-align: left !important;
    }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td:last-child .fx-icon-btn { width: 44px; height: 44px; border-radius: 10px; font-size: 20px; }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td:last-child .fx-icon-btn[data-label] {
      width: auto; gap: 6px; padding: 0 12px; font-size: 14px; color: var(--text-main); border: 1px solid var(--border-color);
    }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td:last-child .fx-icon-btn[data-label] .ph { font-size: 18px; }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td:last-child .fx-icon-btn[data-label]::after { content: attr(data-label); }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td:last-child .fx-icon-btn.danger { margin-left: auto; color: #cf1322; }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td:last-child .fx-icon-btn:active:not(:disabled) { background: var(--fx-active); }
    /* Hàng trống / đang tải: một khối nhẹ viền nét đứt; ô rỗng không dính trái / không rộng 100vw */
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) tbody tr:has(> td[colspan]) {
      padding: 0; border-style: dashed; background: var(--fx-th-bg, #fafafa);
    }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) tbody td[colspan] { flex: 1 1 100%; padding: 4px 8px; text-align: center; }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) tbody td[colspan] > .fx-empty {
      position: static; width: auto; max-width: none;
    }
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) tbody td.fx-td-center { padding: 16px; color: var(--text-sub); }

    /* --- Thẻ kênh: avatar · tên + ID · chưa đọc / nền tảng · trạng thái · quyền / nút --- */
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards .fx-table td:first-child { flex: 1 1 calc(100% - 64px); }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards .fx-cell-user { gap: 12px; min-height: 44px; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards .fx-chav { width: 44px; height: 44px; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards .fx-ch-ico.xs.corner { width: 20px; height: 20px; font-size: 12px; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards .fx-cell-2 { flex: 1; min-width: 0; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards .fx-cell-2 > :is(span, small) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards .fx-cell-2 > span { font-weight: 500; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards .fx-cell-2 > small { font-size: 13px; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards td.fx-ch-unread { order: 1; flex: 0 0 auto; margin-left: auto; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards td.fx-ch-unread .fx-muted { display: none; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards td.fx-ch-unread .fx-count-badge { display: inline-block; min-width: 24px; height: 24px; line-height: 24px; font-size: 13px; font-weight: 500; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards :is(td.fx-ch-type, td.fx-ch-status, td.fx-ch-perm) { order: 2; flex: 0 0 auto; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards td.fx-ch-type { color: var(--text-sub); font-size: 13px; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards :is(td.fx-ch-status, td.fx-ch-perm) .fx-tag { font-size: 13px; line-height: 22px; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards td.fx-ch-acts { order: 3; }
    /* ☆ + Xoá dồn sang phải, xa nút chính "Mở chat" */
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards td.fx-ch-acts .fx-ch-fav { margin-left: auto; }
    /* (cùng tiền tố với luật "nút xoá margin-left:auto" ở trên để thắng độ ưu tiên) */
    :is(.fx-shell.is-mobile .fx-adm-cards, .fx-shell.is-tablet .fx-ch-cards, .fx-shell.is-tablet .fx-staff-table) .fx-table td.fx-ch-acts .fx-ch-fav ~ .fx-icon-btn.danger { margin-left: 0; }

    /* --- Thẻ nhân sự: avatar · tên + vai trò / đăng nhập, kênh, trạng thái, ngày tạo / nút --- */
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-staff-table .fx-cell-user { gap: 12px; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-staff-table .fx-avatar-letter { width: 40px; height: 40px; font-size: 16px; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-staff-table .fx-cell-2 { min-width: 0; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-staff-table .fx-cell-2 > span { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-staff-table .fx-cell-2 > small { display: none; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-staff-table .fx-table td:nth-child(3) { order: 0; flex: 0 0 auto; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-staff-table .fx-table td:nth-child(3) .fx-tag { font-size: 13px; line-height: 22px; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-staff-table .fx-table td[data-label] { order: 1; }
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-staff-table .fx-table td:last-child:not(:first-child) { order: 2; }
    /* Thẻ kênh / nhân sự là container: hàng nút luôn 1 hàng, GIỮ CHỮ ở mọi khổ (kể cả ≤ 374px):
       - thẻ kênh 300–320px (tablet 1000px, điện thoại ngang): nút nhãn gọn (padding 8px) → vẫn giữ icon;
       - thẻ hẹp hơn nữa (điện thoại ≤ 374px…): bỏ icon trong nút có nhãn, giữ chữ;
       nút xoá vẫn cùng hàng, tách sang phải. Nhân sự (3 nút nhãn + xoá) cần ~360px có icon. */
    :is(.fx-shell.is-mobile, .fx-shell.is-tablet) :is(.fx-staff-table, .fx-ch-cards) tbody tr { container: fxcard / inline-size; }
    @container fxcard (max-width: 359px) {
      :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-staff-table .fx-table td:last-child .fx-icon-btn[data-label] .ph { display: none; }
    }
    @container fxcard (max-width: 320px) {
      :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards .fx-table td.fx-ch-acts .fx-icon-btn[data-label] { gap: 4px; padding: 0 8px; }
    }
    @container fxcard (max-width: 299px) {
      :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards .fx-table td.fx-ch-acts .fx-icon-btn[data-label] { padding: 0 10px; }
      :is(.fx-shell.is-mobile, .fx-shell.is-tablet) .fx-ch-cards .fx-table td.fx-ch-acts .fx-icon-btn[data-label] .ph { display: none; }
    }
  }

  /* Tablet: thẻ kênh / nhân sự xếp lưới tự co (mỗi thẻ ≥ 320px → thường 2 cột), dùng hết bề ngang */
  @media (min-width: 768px) {
    .fx-shell.is-tablet :is(.fx-ch-cards, .fx-staff-table) tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
    .fx-shell.is-tablet :is(.fx-ch-cards, .fx-staff-table) tbody tr { align-content: flex-start; }
    .fx-shell.is-tablet :is(.fx-ch-cards, .fx-staff-table) tbody tr:has(> td[colspan]) { grid-column: 1 / -1; }
    .fx-shell.is-tablet :is(.fx-ch-cards, .fx-staff-table) .fx-table td:last-child:has(.fx-icon-btn) { margin-top: auto; }
  }

  /* ---------- Từ khoá: nút × trên chip là <button> thật, vùng chạm 40px; chế độ xem hiện kiểu khớp dạng nhãn ---------- */
  .fx-shell:is(.is-mobile, .is-tablet) .fx-kw-chip-x {
    position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin: 0 -4px 0 -2px; padding: 0; border: none; border-radius: 6px; background: none;
    color: var(--text-muted); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-kw-chip-x::after { content: ""; position: absolute; inset: -6px; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-kw-chip-x .ph { font-size: 14px; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-kw-chip-x:active { background: var(--fx-active); color: var(--text-main); }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-kw-chip-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
  /* ô chọn kiểu khớp bị khoá (chế độ xem) trông như ô hỏng → ẩn, thay bằng nhãn chữ .fx-kw-match */
  .fx-shell:is(.is-mobile, .is-tablet) .fx-kw-head > .fx-select:has(+ .fx-kw-match) { display: none; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-kw-match {
    flex: 0 0 auto; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 14px;
    background: #f0f2f5; color: var(--text-sub); font-size: 13px; white-space: nowrap;
  }

  /* ---------- Ma trận quyền: label phủ kín ô (vùng chạm ≥ 44px), ô bỏ padding để label chiếm hết ---------- */
  .fx-shell:is(.is-mobile, .is-tablet) .fx-perm-table td:has(> .fx-perm-hit) { padding: 0; position: relative; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-perm-hit {
    display: flex; align-items: center; justify-content: center; width: 100%; min-width: 44px; min-height: 44px; margin: 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* hàng có tên tính năng 2 dòng cao ~65px > label 44px → ::after trong suốt phủ trọn chiều cao ô
     (chạm sát mép trên / dưới ô vẫn là chạm label → tick được, không còn dải chết) */
  .fx-shell:is(.is-mobile, .is-tablet) .fx-perm-hit::after { content: ""; position: absolute; inset: 0; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-perm-hit input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--primary); cursor: pointer; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-perm-table td:has(> .fx-perm-hit:active) { background: var(--fx-hover); }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-perm-hit:has(> input:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
  /* Màn thấp (xoay ngang): modal bộ quyền toàn màn (tablet: phần C) với đầu / chân / lề gọn → thấy nhiều dòng quyền hơn */
  @media (max-height: 500px) {
    .fx-shell:is(.is-mobile, .is-tablet) .fx-perm-modal > .modal-header { min-height: 44px; padding-top: 0; padding-bottom: 0; }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-perm-modal > .fx-modal-foot { padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-perm-modal > .fx-modal-foot > .btn { height: 44px; }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-perm-modal .fx-perm-body { padding: 8px; gap: 8px; }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-perm-modal .fx-perm-main { padding: 8px 12px; }
  }

  /* ---------- Tab trạng thái của bảng kênh / nhân sự: không xuống dòng (cuộn do pages.css) ---------- */
  @media (max-width: 900px) {
    .fx-shell:is(.is-mobile, .is-tablet) :is(.fx-ch-tabs, .fx-adm-tabs) { gap: 20px; }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-ch-tabs .fx-tabs-note { flex: 0 0 auto; white-space: nowrap; padding-right: 4px; }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-ch-tabs > .fx-flex-1 { flex: 0 0 0; margin-left: -8px; }
  }
}

/* =============================================================================
   B. ĐIỆN THOẠI (≤ 767px)
   ============================================================================= */
@media (max-width: 767px) {
  /* ---------- Trang có dải tab: header trang KHÔNG dính (dải tab đã dính đỉnh) ---------- */
  .fx-shell.is-mobile .fx-split:has(> .fx-subnav) > .fx-page-card > .fx-page-head { position: relative; top: auto; z-index: auto; }

  /* ---------- Phụ đề header: tối đa 2 dòng thay vì cắt "…" ở 1 dòng ---------- */
  @media (min-height: 501px) {
    .fx-shell.is-mobile :is(.fx-split:has(> .fx-subnav), .fx-adm-page) .fx-page-head .fx-page-sub {
      white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
  }

  /* ---------- Header trang: nút phụ còn icon, nút lưu / tạo chuyển xuống vùng ngón cái ---------- */
  .fx-shell.is-mobile .fx-adm-hide-m,
  .fx-shell.is-mobile .fx-adm-add,
  .fx-shell.is-mobile .fx-ch-add { display: none; }
  /* nút phụ trên header → icon 44px không viền, cùng kiểu icon header của pages.css */
  .fx-shell.is-mobile .fx-adm-icon-m { width: 44px; min-width: 44px; height: 44px; padding: 0; border-color: transparent; background: transparent; color: var(--text-main); }
  .fx-shell.is-mobile .fx-adm-icon-m > span { display: none; }
  .fx-shell.is-mobile .fx-adm-icon-m .ph { font-size: 22px; }
  .fx-shell.is-mobile .fx-adm-icon-m:active { background: var(--fx-active); }

  /* Nút nổi .fx-fab: kiểu dáng do pages.css. FAB của bảng kênh nằm lồng trong .fx-channels
     (không phải con trực tiếp của card) → tự chừa chỗ cuối trang để không che thẻ cuối. */
  .fx-shell.is-mobile .fx-page-card:has(.fx-channels > .fx-fab) { padding-bottom: 96px; }
  /* Danh sách đã có ≥ 2 thẻ (hàng thứ 2 = dữ liệu thật; trạng thái trống / đang tải chỉ có 1 hàng) hoặc
     có thẻ từ khoá: FAB thu thành nút tròn 56px ngay từ đầu (như khi đã cuộn) → không che nút của thẻ.
     Nhãn chỉ ẩn khỏi mắt (max-width 0), trình đọc màn hình vẫn đọc. Màn thấp đã tròn sẵn (pages.css). */
  @media (min-height: 501px) {
    .fx-shell.is-mobile .fx-page-card:has(.fx-adm-cards tbody > tr:nth-child(2), .fx-kw-card) .fx-fab { padding: 0 16px; gap: 0; }
    .fx-shell.is-mobile .fx-page-card:has(.fx-adm-cards tbody > tr:nth-child(2), .fx-kw-card) .fx-fab > span { max-width: 0; opacity: 0; }
  }

  /* Thanh Lưu dính đáy (vùng ngón cái), cùng kiểu .fx-form-actions của pages.css */
  .fx-shell.is-mobile .fx-page-card .fx-adm-savebar {
    position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px;
    margin: 16px -16px 0; padding: 12px 16px; background: #fff; border-top: 1px solid var(--border-light);
  }
  .fx-shell.is-mobile:not(.m-has-tabbar) .fx-page-card .fx-adm-savebar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .fx-shell.is-mobile .fx-page-card .fx-adm-savebar .btn { flex: 1; height: 44px; font-size: 15px; font-weight: 500; }
  /* Trang ngắn: thẻ trang xếp cột, thanh Lưu đẩy xuống đáy (margin-top:auto) thay vì lơ lửng giữa màn */
  .fx-shell.is-mobile .fx-page-card:has(> .fx-adm-savebar) { display: flex; flex-direction: column; padding-bottom: 0; }
  .fx-shell.is-mobile .fx-page-card:has(> .fx-adm-savebar) > * { flex-shrink: 0; }
  .fx-shell.is-mobile .fx-page-card > .fx-adm-savebar { margin-top: auto; }
  .fx-shell.is-mobile .fx-page-card:has(> .fx-adm-savebar) > :nth-last-child(1 of :not(.fx-adm-savebar, .fx-fab)) { margin-bottom: 16px; }
  .fx-shell.is-mobile .fx-page-card > .fx-setting-row:has(+ .fx-adm-savebar) { border-bottom: none; }

  /* ---------- Hàng cài đặt: ô "Từ cấm" + nút Lưu chung 1 hàng, rộng hết ---------- */
  .fx-shell.is-mobile .fx-setting-control > .fx-adm-inline { flex: 1 1 100%; flex-wrap: nowrap; }
  .fx-shell.is-mobile .fx-adm-inline .form-input { flex: 1 1 0; width: auto; min-width: 0; }
  .fx-shell.is-mobile .fx-adm-inline .btn { flex: 0 0 auto; }

  /* ---------- Cài đặt › Tổng quan: danh sách hàng kiểu Cài đặt iOS ---------- */
  .fx-shell.is-mobile .fx-set-grid { grid-template-columns: 1fr; gap: 0; }
  .fx-shell.is-mobile .fx-set-grid .fx-set-card {
    align-items: center; gap: 14px; padding: 12px 0; min-height: 64px; border: none; border-bottom: 1px solid var(--border-light);
    border-radius: 0; background: none; box-shadow: none;
  }
  .fx-shell.is-mobile .fx-set-grid .fx-set-card:last-child { border-bottom: none; }
  .fx-shell.is-mobile .fx-set-grid .fx-set-card::after {
    content: ""; flex-shrink: 0; width: 8px; height: 8px; margin: 0 6px 0 auto;
    border: solid var(--text-muted); border-width: 2px 2px 0 0; transform: rotate(45deg);
  }
  .fx-shell.is-mobile .fx-set-grid .fx-set-card:active { background: var(--fx-hover); }
  .fx-shell.is-mobile .fx-set-card-text { min-width: 0; }
  .fx-shell.is-mobile .fx-set-card-text b { font-size: 15px; }

  /* ---------- Phân công: thẻ lựa chọn gọn 1 cột ---------- */
  .fx-shell.is-mobile .fx-radio-cards { grid-template-columns: 1fr; gap: 8px; }
  .fx-shell.is-mobile .fx-radio-card {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px;
  }
  .fx-shell.is-mobile .fx-radio-card .fx-tile { grid-row: 1 / 3; grid-column: 1; }
  .fx-shell.is-mobile .fx-radio-card > b { grid-column: 2; font-weight: 500; }
  .fx-shell.is-mobile .fx-radio-card > small { grid-column: 2; }
  .fx-shell.is-mobile .fx-radio-card .fx-radio-dot { position: static; grid-column: 3; grid-row: 1 / 3; width: 20px; height: 20px; }
  .fx-shell.is-mobile .fx-radio-card.active .fx-radio-dot { border-width: 6px; }
  .fx-shell.is-mobile .fx-radio-card:active { background: #f7fbff; }

  /* ---------- Tin nhắn nhanh: thẻ [/tắt · xoá] + nội dung (tối đa 3 dòng) ---------- */
  .fx-shell.is-mobile .fx-qr-form { margin-bottom: 12px; }
  .fx-shell.is-mobile .fx-qr-form > .form-input { flex: 1 1 100%; }
  .fx-shell.is-mobile .fx-qr-table .fx-table td:nth-child(1) { order: 0; flex: 1 1 0; }
  .fx-shell.is-mobile .fx-qr-table .fx-table td:nth-child(2) {
    order: 2; flex: 1 1 100%; color: var(--text-sub); white-space: pre-line; overflow-wrap: anywhere;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  }
  .fx-shell.is-mobile .fx-qr-table .fx-table td:last-child:not(:first-child):has(.fx-icon-btn) { order: 1; flex: 0 0 auto; margin: -8px -8px -8px 0; padding: 0; border: none; }
  .fx-shell.is-mobile .fx-qr-table .fx-code { font-size: 14px; }

  /* ---------- Thẻ khách hàng: thẻ [chấm màu · tên · sửa / xoá] + màu, kịch bản ---------- */
  /* tên thẻ + 2 nút chiếm trọn dòng 1 → ô Màu / Kịch bản luôn xuống dòng 2 */
  .fx-shell.is-mobile .fx-tag-table .fx-table td:first-child { order: 0; flex: 1 1 calc(100% - 120px); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .fx-shell.is-mobile .fx-tag-table .fx-table td:last-child:not(:first-child):has(.fx-icon-btn) { order: 1; flex: 0 0 auto; margin: -8px -8px -8px 0; padding: 0; border: none; gap: 8px; }
  .fx-shell.is-mobile .fx-tag-table .fx-table td:last-child .fx-icon-btn.danger { margin-left: 0; }
  .fx-shell.is-mobile .fx-tag-table .fx-table td[data-label] { order: 2; flex: 0 1 auto; }
  .fx-shell.is-mobile .fx-tag-table .fx-table td[data-label]::before { flex-basis: auto; }
  .fx-shell.is-mobile .fx-tag-table .fx-table td[data-label] + td[data-label] { margin-left: 8px; }
  .fx-shell.is-mobile .fx-tag-modal .fx-swatches { gap: 10px; }
  .fx-shell.is-mobile .fx-tag-modal .fx-swatch.lg { width: 40px; height: 40px; border-radius: 10px; }

  /* ---------- Bộ quyền: thẻ [tên · Mặc định] + người tạo + ghi chú ---------- */
  .fx-shell.is-mobile .fx-permset-table .fx-table td:last-child:not(:first-child) { order: 1; flex: 0 0 auto; }
  .fx-shell.is-mobile .fx-permset-table .fx-table td:nth-child(2) { order: 2; }
  .fx-shell.is-mobile .fx-permset-table .fx-table td:nth-child(3) { order: 3; flex: 1 1 100%; font-size: 13px; }

  /* Modal bộ quyền (toàn màn do overlays.css): bảng quyền co vừa bề ngang, tên tính năng xuống dòng */
  .fx-shell.is-mobile .fx-perm-modal .fx-perm-main { overflow-x: visible; }
  .fx-shell.is-mobile .fx-perm-table { width: 100%; table-layout: fixed; }
  .fx-shell.is-mobile .fx-perm-table :is(th, td) { padding: 10px 2px; font-size: 13px; text-align: center; white-space: normal; }
  .fx-shell.is-mobile .fx-perm-table :is(td, th):first-child { width: auto; padding-left: 8px; font-size: 14px; text-align: left; overflow-wrap: anywhere; }
  .fx-shell.is-mobile .fx-perm-table :is(td, th):not(:first-child) { width: 48px; }
  .fx-shell.is-mobile .fx-perm-table .fx-perm-child { padding-left: 20px !important; }
  /* tiêu đề cột dính sát mép trên thân modal (thân có padding 12px) */
  .fx-shell.is-mobile .fx-perm-modal .fx-perm-table thead th { top: -12px; z-index: 2; }
  .fx-shell.is-mobile .fx-perm-table input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--primary); }

  /* ---------- Tài khoản ---------- */
  .fx-shell.is-mobile .fx-adm-linkrow { flex-wrap: wrap; gap: 0 8px; }
  .fx-shell.is-mobile .fx-adm-linkrow > .fx-muted { flex: 1 1 100%; font-size: 13px; }
  .fx-shell.is-mobile .fx-adm-linkrow > :is(.fx-link, .fx-code) { flex: 1 1 0; min-width: 0; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .fx-shell.is-mobile .fx-adm-linkrow > .fx-link { line-height: 44px; }
  .fx-shell.is-mobile .fx-adm-tabs .ph { display: none; }
  /* 3 tab + số đếm vừa 1 hàng (không bị cắt "Không hoạt động 1" ở mép phải) */
  @media (max-width: 400px) {
    .fx-shell.is-mobile .fx-adm-tabs { gap: 12px; }
    .fx-shell.is-mobile .fx-adm-tabs button { gap: 4px; }
    .fx-shell.is-mobile .fx-adm-tabs .fx-tab-count { padding: 0 5px; }
  }
  @media (max-width: 374px) {
    .fx-shell.is-mobile .fx-adm-tabs { gap: 10px; }
    .fx-shell.is-mobile .fx-adm-tabs button { font-size: 13px; }
  }
  .fx-shell.is-mobile .fx-profile-head { gap: 12px; margin-bottom: 16px; }
  .fx-shell.is-mobile .fx-profile-head .fx-avatar-letter.xl { width: 56px; height: 56px; font-size: 22px; }
  .fx-shell.is-mobile .fx-profile-head .fx-muted { font-size: 13px; }

  /* ---------- Bảng kênh: ô tìm rộng hết dòng, lọc xếp dòng dưới; tab tràn viền ---------- */
  .fx-shell.is-mobile .fx-channels > .fx-toolbar { gap: 8px; }
  .fx-shell.is-mobile .fx-channels > .fx-toolbar > .fx-search { flex: 1 1 100%; min-width: 0; }
  .fx-shell.is-mobile .fx-channels > .fx-toolbar > .fx-select { flex: 1 1 0; min-width: 0; }
  .fx-shell.is-mobile .fx-channels > .fx-toolbar > .fx-flex-1 { display: none; }
  .fx-shell.is-mobile .fx-channels > .fx-toolbar > .btn { flex: 0 0 auto; }
  .fx-shell.is-mobile .fx-channels > .fx-ch-tabs { margin: 0 -16px 12px; padding: 0 16px; scroll-padding: 0 16px; }
  .fx-shell.is-mobile .fx-ch-cards td.fx-ch-acts .fx-icon-btn[data-label] { flex: 0 1 auto; min-width: 0; }

  /* Ô tìm kiếm trong trang của vùng: rộng hết dòng */
  .fx-shell.is-mobile :is(.fx-split:has(> .fx-subnav), .fx-adm-page) .fx-toolbar > .fx-search { flex: 1 1 100%; min-width: 0; }

  /* ---------- Tích hợp ---------- */
  .fx-shell.is-mobile .fx-int-row { gap: 12px; padding: 14px 0; }
  .fx-shell.is-mobile .fx-int-text { min-width: 0; }
  .fx-shell.is-mobile .fx-int-text small { line-height: 18px; }
  .fx-shell.is-mobile .fx-int-row .btn { flex-shrink: 0; padding: 0 14px; }

  /* ---------- Automation › Từ khoá: thẻ 2 tầng ---------- */
  .fx-shell.is-mobile .fx-kw-card { padding: 12px; }
  .fx-shell.is-mobile .fx-kw-head { flex-wrap: wrap; gap: 8px; }
  .fx-shell.is-mobile .fx-kw-head > .fx-switch { margin: 0 4px; }
  .fx-shell.is-mobile .fx-kw-head > .fx-select { flex: 1 1 0; min-width: 0; max-width: 180px; margin-left: auto; }
  .fx-shell.is-mobile .fx-kw-head > .fx-kw-match { margin-left: auto; }
  .fx-shell.is-mobile .fx-kw-head > .fx-icon-btn.danger { margin-left: 4px; }
  .fx-shell.is-mobile .fx-kw-keys { order: 5; flex: 1 1 100%; min-height: 36px; gap: 8px; }
  .fx-shell.is-mobile .fx-kw-keys .tag-pill { height: 32px; font-size: 14px; padding: 0 2px 0 10px; border-radius: 8px; }
  .fx-shell.is-mobile .fx-kw-keys .tag-pill > .fx-kw-chip-x { height: 32px; margin: 0 -2px 0 0; }
  .fx-shell.is-mobile .fx-kw-input { flex: 1 1 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px dashed var(--fx-ctrl-border); border-radius: 8px; }
  .fx-shell.is-mobile .fx-kw-body .form-textarea { min-height: 96px; }
  /* mỗi cụm điều kiện là 1 khung nhẹ → rõ nút × xoá cụm nào */
  .fx-shell.is-mobile .fx-kw-cond {
    flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid var(--border-light); border-radius: 8px; background: #f7f8fa;
  }
  .fx-shell.is-mobile .fx-kw-cond > .fx-select { flex: 1 1 100%; }
  .fx-shell.is-mobile .fx-kw-cond > .form-input { flex: 1 1 0; min-width: 0; }
  .fx-shell.is-mobile .fx-kw-cond > .fx-icon-btn { flex: 0 0 44px; }
  .fx-shell.is-mobile .fx-kw-body > .fx-dashed-btn { align-self: stretch; justify-content: center; }
  /* nút Lưu rộng hết dòng ở cuối thẻ (nút đĩa mềm trên đầu thẻ dễ trôi khỏi màn khi thẻ dài) */
  .fx-shell.is-mobile .fx-kw-body > .fx-kw-save-m {
    align-self: stretch; justify-content: center; height: 44px; margin-top: 4px; font-size: 15px; font-weight: 500;
  }
  .fx-shell.is-mobile .fx-kw-preview { font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* ---------- AI Agents ---------- */
  .fx-shell.is-mobile .fx-kb-toolbar { flex-wrap: wrap; }
  .fx-shell.is-mobile .fx-kb-toolbar > .fx-seg { flex: 1 1 100%; display: flex; }
  .fx-shell.is-mobile .fx-kb-toolbar > .fx-seg button { flex: 1 1 0; }
  .fx-shell.is-mobile .fx-kb-toolbar > .fx-search { flex: 1 1 100%; }
  .fx-shell.is-mobile .fx-kb-block { padding: 12px; }
  .fx-shell.is-mobile .fx-split .fx-welcome { padding: 32px 8px; }
  .fx-shell.is-mobile .fx-split .fx-welcome-art { width: 96px; height: 96px; font-size: 44px; border-radius: 28px; }

  /* ---------- Gửi tin nhắn ---------- */
  .fx-shell.is-mobile .fx-adm-page .fx-bc-section { margin-bottom: 20px; }
  .fx-shell.is-mobile .fx-adm-page .fx-section-head { margin-bottom: 8px; }
  .fx-shell.is-mobile .fx-adm-page .fx-section-head .fx-link { padding: 0 4px 0 12px; margin-right: -4px; }
  .fx-shell.is-mobile .fx-adm-page .fx-bc-section .fx-section-head { justify-content: flex-end; margin: -8px 0 4px; }
  .fx-shell.is-mobile .fx-adm-page .fx-bc-section .fx-section-head > .fx-h2 { display: none; }

  /* ---------- Báo cáo: khoảng ngày thành hàng chip chia đều (không cuộn, không tràn mép) ---------- */
  .fx-shell.is-mobile .fx-chart-range { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
  .fx-shell.is-mobile .fx-chart-chip {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 10px;
    white-space: nowrap;
    border: 1px solid var(--fx-ctrl-border); border-radius: 22px; background: #fff; color: var(--text-main); font-size: 14px; cursor: pointer;
  }
  .fx-shell.is-mobile .fx-chart-chip .ph { font-size: 18px; color: var(--text-sub); }
  .fx-shell.is-mobile .fx-chart-chip.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 500; }
  .fx-shell.is-mobile .fx-chart-chip.active .ph { color: var(--primary); }
  .fx-shell.is-mobile .fx-chart-chip:active { background: var(--fx-hover); }
  @media (max-width: 374px) {
    .fx-shell.is-mobile .fx-chart-range { gap: 6px; }
    .fx-shell.is-mobile .fx-chart-chip .ph { display: none; }
  }
  /* Nhãn KPI dài ("KH cũ tương tác qua tin nhắn") xuống tối đa 3 dòng thay vì cắt ở dòng 2 */
  @media (min-height: 501px) {
    .fx-shell.is-mobile .fx-report .fx-kpi-text small { -webkit-line-clamp: 3; }
  }
  /* Bảng dưới hộp biểu đồ: giữ khoảng cách mt-16 (luật tràn viền của pages.css đặt margin: 0 -16px) */
  .fx-shell.is-mobile .fx-page-card .fx-table-wrap.fx-chart-table.mt-16:not(.fx-adm-cards) { margin-top: 16px; }
  .fx-shell.is-mobile .fx-report .fx-chart-box { padding: 12px; }
  .fx-shell.is-mobile .fx-report .fx-chart-legend { flex-wrap: wrap; }

  /* ---------- Luồng tin nhắn: editor xếp dọc (canvas trên, khung sửa dưới) ---------- */
  .fx-shell.is-mobile .fx-flow-editor { height: 100%; min-height: 0; border-radius: 0; }
  .fx-shell.is-mobile .fx-flow-head { flex-wrap: wrap; gap: 4px 8px; padding: 6px 8px 6px 4px; }
  .fx-shell.is-mobile .fx-flow-head .fx-breadcrumb { flex: 1 1 0; min-width: 0; }
  .fx-shell.is-mobile .fx-flow-head .fx-breadcrumb > :is(span, .ph) { display: none; }
  .fx-shell.is-mobile .fx-flow-head .fx-breadcrumb b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; }
  .fx-shell.is-mobile .fx-flow-head > .fx-flex-1 { display: none; }
  .fx-shell.is-mobile .fx-flow-head > .fx-soon { order: 5; margin: -4px 0 4px 52px; }
  .fx-shell.is-mobile .fx-flow-head > .btn-primary { padding: 0 16px; }
  .fx-shell.is-mobile .fx-flow-hint {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 4px 4px 4px 14px;
    background: #e6f0ff; color: #0b3b8c; font-size: 13px; line-height: 18px; border-bottom: 1px solid #cfe0ff;
  }
  .fx-shell.is-mobile .fx-flow-hint > .ph { font-size: 20px; flex-shrink: 0; }
  .fx-shell.is-mobile .fx-flow-hint > span { flex: 1; min-width: 0; }
  .fx-shell.is-mobile .fx-flow-hint > .fx-icon-btn { color: #0b3b8c; }
  .fx-shell.is-mobile .fx-flow-body { position: relative; flex-direction: column; }
  .fx-shell.is-mobile .fx-flow-canvas {
    order: -1; position: static; flex: 1 1 50%; min-height: 200px; overflow: auto; overscroll-behavior: contain;
    touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
  }
  .fx-shell.is-mobile .fx-flow-node {
    position: relative; top: auto; left: auto; width: min(320px, calc(100% - 84px)); margin: 32px 64px 24px 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  .fx-shell.is-mobile .fx-flow-tools { top: 8px; right: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
  .fx-shell.is-mobile .fx-flow-inspector {
    flex: 1 1 50%; width: auto; min-height: 0; padding: 12px 16px 16px; border-right: none; border-top: 1px solid var(--border-light);
    overscroll-behavior: contain;
  }
  .fx-shell.is-mobile .fx-flow-add-blocks > .fx-dashed-btn { flex: 1 1 0; justify-content: center; min-width: 96px; }
  .fx-shell.is-mobile .fx-flow-inspector .form-textarea { font-size: 16px; }

  /* Bảng chọn loại bước → bottom sheet */
  .fx-shell.is-mobile .fx-step-pop {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 910; min-width: 0;
    width: auto; max-width: none; /* bỏ giới hạn 100vw - 16px của popover chung (overlays.css) → sát 2 mép */
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start;
    max-height: calc(var(--app-h, 100dvh) - 48px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(8, 28, 54, 0.12);
    animation: fx-adm-sheet-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .fx-shell.is-mobile .fx-step-pop::before {
    content: ""; grid-column: 1 / -1; justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: #d0d5dd;
  }
  .fx-shell.is-mobile .fx-step-sheet-head {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: -4px -8px 0 0; font-size: 16px;
  }
  .fx-shell.is-mobile .fx-step-sheet-head b { font-weight: 500; }
  .fx-shell.is-mobile .fx-step-type { min-height: 56px; padding: 8px 10px; font-size: 14px; line-height: 18px; }
  .fx-shell.is-mobile .fx-step-type:active { border-color: var(--primary); background: #f7fbff; }
  .fx-shell.is-mobile .fx-step-type .fx-kpi-ico { width: 36px; height: 36px; font-size: 18px; flex-shrink: 0; }

  /* Editor là lớp toàn màn (như khung chat): ẩn thanh tab dưới, chừa vùng an toàn đáy */
  .fx-shell.is-mobile:has(.fx-flow-editor) > .fx-tabbar { display: none; }
  .fx-shell.is-mobile .fx-flow-body { padding-bottom: env(safe-area-inset-bottom); }

  /* Điện thoại xoay ngang: editor 2 cột (khung sửa trái · canvas phải) để không bị ép quá thấp */
  @media (orientation: landscape) {
    .fx-shell.is-mobile .fx-flow-body { flex-direction: row; }
    .fx-shell.is-mobile .fx-flow-canvas { order: 0; flex: 1 1 55%; min-height: 0; }
    .fx-shell.is-mobile .fx-flow-inspector { flex: 1 1 45%; border-top: none; border-right: 1px solid var(--border-light); }
    .fx-shell.is-mobile .fx-flow-tools { left: auto; }
    .fx-shell.is-mobile .fx-flow-head > .fx-soon { order: 0; margin: 0; }
    .fx-shell.is-mobile .fx-step-pop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  /* Màn thấp (xoay ngang): không hiện banner gợi ý, header 1 hàng gọn → nhường chỗ cho canvas */
  @media (orientation: landscape) and (max-height: 500px) {
    .fx-shell.is-mobile .fx-flow-hint { display: none; }
    .fx-shell.is-mobile .fx-flow-head { flex-wrap: nowrap; padding-top: 4px; padding-bottom: 4px; }
    .fx-shell.is-mobile .fx-flow-head > .fx-soon { flex-shrink: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  }

  /* Màn thấp (xoay ngang): thanh Lưu nằm cuối form, không dính đáy (dải tab + tab bar đã chiếm chỗ);
     bảng quyền: cột rộng hơn (tiêu đề "Cập nhật" 1 dòng), tiêu đề cột dính theo lề thân modal 8px */
  @media (max-height: 500px) {
    .fx-shell.is-mobile .fx-page-card .fx-adm-savebar { position: static; padding: 8px 16px; }
    .fx-shell.is-mobile .fx-perm-table :is(td, th):not(:first-child) { width: 76px; }
    .fx-shell.is-mobile .fx-perm-modal .fx-perm-table thead th { top: -8px; }
  }

  /* Điện thoại xoay ngang / màn rộng ≥ 600px: thẻ xếp lưới 2 cột cho đỡ trống */
  @media (min-width: 600px) {
    .fx-shell.is-mobile .fx-adm-cards tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .fx-shell.is-mobile .fx-adm-cards tbody tr { align-content: flex-start; }
    .fx-shell.is-mobile .fx-adm-cards tbody tr:has(> td[colspan]) { grid-column: 1 / -1; }
    .fx-shell.is-mobile .fx-adm-cards .fx-table td:last-child:has(.fx-icon-btn) { margin-top: auto; }
  }

}

/* =============================================================================
   C. TABLET (768–1023px)
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  /* ≤ 900px: dải tab + thẻ trang là 1 khối (dải bo 2 góc trên, thẻ bỏ bo góc trên) */
  @media (max-width: 900px) {
    .fx-shell.is-tablet .fx-split > .fx-subnav { border-radius: 16px 16px 0 0; }
    .fx-shell.is-tablet .fx-split > .fx-subnav ~ .fx-page-card { border-top-left-radius: 0; border-top-right-radius: 0; }
  }
  /* Bảng kênh: ô tìm rộng hết hàng 1; hàng 2 = lọc nền tảng · Nhân viên · … · tải lại · Thêm kênh (sát phải) */
  .fx-shell.is-tablet .fx-channels > .fx-toolbar { flex-wrap: wrap; }
  .fx-shell.is-tablet .fx-channels > .fx-toolbar > .fx-search { flex: 1 1 100%; width: auto; min-width: 0; }
  /* Modal bộ quyền ở màn thấp (844×390…): toàn màn thay vì hộp 720px giữa màn */
  @media (max-height: 500px) {
    .fx-shell.is-tablet .modal-overlay:has(> .fx-perm-modal) { padding: 0; }
    .fx-shell.is-tablet .modal-overlay > .modal-card.fx-perm-modal {
      width: 100%; max-width: none !important; height: var(--app-h, 100dvh); max-height: none; border-radius: 0; box-shadow: none;
    }
    .fx-shell.is-tablet .fx-perm-modal .fx-perm-table thead th { top: -8px; }
  }
  /* 901–1023px: giữ 2 cột (menu 200px của theme), mục menu cao 44px */
  @media (min-width: 901px) {
    .fx-shell.is-tablet .fx-split > .fx-subnav .fx-subnav-item { height: 44px; }
  }
  /* Luồng tin nhắn: khung sửa hẹp lại, canvas rộng hơn; editor vừa chiều cao màn */
  .fx-shell.is-tablet .fx-flow-editor { min-height: 0; }
  .fx-shell.is-tablet .fx-flow-inspector { width: 300px; }
  .fx-shell.is-tablet .fx-flow-node { width: min(320px, calc(100% - 140px)); left: 48px; }
  .fx-shell.is-tablet .fx-step-type { min-height: 48px; }
  /* Bảng chọn loại bước: sheet đáy giữa màn (tối đa 560px), 2 cột — popover mở lên bị khung sửa
     (vùng cuộn) cắt mất mục đầu ở màn thấp; sheet luôn thấy đủ 6 loại, chạm ngoài / X / Back để đóng */
  .fx-shell.is-tablet .fx-step-pop {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 910; margin: 0 auto;
    width: min(560px, 100vw); min-width: 0; max-width: none; box-sizing: border-box;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start;
    max-height: calc(var(--app-h, 100dvh) - 24px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(8, 28, 54, 0.12);
    animation: fx-adm-sheet-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .fx-shell.is-tablet .fx-step-pop::before {
    content: ""; grid-column: 1 / -1; justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: #d0d5dd;
  }
  .fx-shell.is-tablet .fx-step-sheet-head {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: -4px -8px 0 0; font-size: 16px;
  }
  .fx-shell.is-tablet .fx-step-sheet-head b { font-weight: 500; }
  .fx-shell.is-tablet .fx-step-type:active { border-color: var(--primary); background: #f7fbff; }
  @media (max-height: 500px) {
    .fx-shell.is-tablet .fx-step-pop { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(720px, 100vw); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  }
  /* Báo cáo: 4 KPI một hàng khi đủ rộng */
  @media (min-width: 901px) {
    .fx-shell.is-tablet .fx-report .fx-kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}

/* =============================================================================
   D. BẢNG BÁO CÁO: cuộn ngang, cột đầu dính (điện thoại + tablet)
   ============================================================================= */
@media (max-width: 1023px) {
  .fx-shell:is(.is-mobile, .is-tablet) .fx-chart-table {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; container-type: inline-size;
  }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-chart-table :is(th, td) { white-space: nowrap; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-chart-table :is(thead th, tfoot td):first-child,
  .fx-shell:is(.is-mobile, .is-tablet) .fx-chart-table tbody td:first-child:not([colspan]) {
    position: sticky; left: 0; z-index: 1; box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.14);
  }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-chart-table thead th:first-child { background: var(--fx-th-bg, #fafafa); }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-chart-table tbody td:first-child:not([colspan]) { background: #fff; }
  /* Mọi ô tiêu đề đều dính đỉnh z1 (theme) → ô "Ngày" dính trái phải cao hơn, nếu không các ô sau
     trượt đè lên khi cuộn ngang. Tiền tố dài để thắng luật cột dính (0,9,1) của pages.css. */
  .fx-shell:is(.is-mobile, .is-tablet) .fx-page-card .fx-table-wrap.fx-chart-table:not(.fx-adm-cards) > .fx-table:not(.fx-table-grid) > thead > tr > th:first-child:not([colspan]) {
    z-index: 3; background: var(--fx-th-bg, #fafafa);
  }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-page-card .fx-table-wrap.fx-chart-table:not(.fx-adm-cards) > .fx-table:not(.fx-table-grid) > tfoot > tr > td:first-child:not([colspan]) {
    z-index: 2; background: var(--fx-th-bg, #fafafa);
  }
  /* Hàng trống trải qua mọi cột → khối "chưa có số liệu" dính trái, rộng đúng khung nhìn */
  .fx-shell:is(.is-mobile, .is-tablet) .fx-chart-table tbody td[colspan] { padding: 0; }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-chart-table tbody td[colspan] > .fx-empty { position: sticky; left: 0; width: 100cqi; max-width: none; box-sizing: border-box; }
  .fx-shell.is-mobile .fx-chart-table :is(th, td) { padding: 10px 12px; }
}

/* =============================================================================
   E. CHUỘT / GIẢM CHUYỂN ĐỘNG
   ============================================================================= */
@media (max-width: 1023px) {
  /* Màn cảm ứng không có hover thật: bỏ hiệu ứng hover "dính" sau khi chạm */
  @media (hover: none) {
    .fx-shell:is(.is-mobile, .is-tablet) .fx-split > .fx-subnav .fx-subnav-item:not(.active):hover { background: none; }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-set-card:hover { border-color: var(--border-color); box-shadow: none; }
    .fx-shell.is-mobile .fx-set-grid .fx-set-card:hover { border-color: var(--border-light); }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-radio-card:not(.active):hover { border-color: var(--border-color); }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-step-type:hover { border-color: var(--border-color); }
    .fx-shell:is(.is-mobile, .is-tablet) .fx-adm-cards .fx-table tbody tr:hover td { background: transparent; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fx-shell:is(.is-mobile, .is-tablet) :is(.fx-step-pop, .fx-radio-card, .fx-set-card) { animation: none; transition: none; }
  }
}

/* Ô chỉ-đọc (vd #account/info): iOS làm mờ input disabled còn ~1.8:1 → giữ chữ đủ tương phản */
@media (max-width: 1023px) {
  .fx-shell:is(.is-mobile, .is-tablet) .fx-page-host .form-input:disabled {
    opacity: 1; color: var(--text-main); -webkit-text-fill-color: var(--text-main); background: #f5f6f8;
  }
  .fx-shell:is(.is-mobile, .is-tablet) .fx-page-host .form-input:disabled::placeholder {
    color: var(--text-sub); -webkit-text-fill-color: var(--text-sub);
  }
}


/* =====================================================================
   OVERLAYS — modal, popover, toast, lightbox, softphone, đăng nhập, console
   Điện thoại ≤ 767px · tablet 768–1023px. Desktop ≥ 1024px KHÔNG bị ảnh hưởng:
   mọi quy tắc trong file này đều nằm trong @media (max-width: 1023px) hoặc hẹp hơn.

   ĐIỆN THOẠI
   - Modal ngắn (QR, đặt tên, sửa nhanh: .modal-card thường / .fx-modal-sm) → bottom sheet
     bo 16px phía trên, thanh kéo 36×4, cao tối đa = --app-h − 48px; header giống hệt .fx-psheet
     (không vạch ngăn, tiêu đề trái, nút đóng 44px phải) → cả app chỉ một kiểu sheet.
   - Modal dài (.modal-lg, .fx-modal-md, .fx-modal-xl: thêm kênh, quản lý kênh, tin mẫu,
     kho SP, người dùng, đơn hàng, nhân viên, bộ quyền) → toàn màn hình: header dính
     (nút đóng 44px bên trái + tiêu đề), thân cuộn riêng, chân dính có safe-area.
   - Bảng trong modal/console (.qr-table.ov-cards) → thẻ (card) theo từng loại bảng.
   - Toast không bao giờ đè nút / ô nhập vừa thao tác (bám --app-h nên không bị bàn phím che):
     giữa đáy trên thanh tab; trang có FAB / thanh Lưu → nâng lên trên chúng; trong hội thoại →
     giữa vùng nhìn thấy (mở khay emoji / công cụ → dưới header chat); lớp toàn màn → trên chân
     dính; bottom sheet / modal ngắn / softphone → đỉnh màn trên nền mờ.
   - Toast tin đến → thẻ ≤ 420px căn giữa ở đỉnh; trong hội thoại thì nằm DƯỚI header chat
     (không che nút Back / Gọi / CRM).
   - Lightbox: ảnh vừa màn (contain), nút đóng 44px góc phải + safe-area.
   - Softphone: sheet đáy cao cố định (không nhảy khi đổi tab), đáy bám --app-h (không bị bàn
     phím ảo che), nền mờ .sp-m-scrim 940; khi đang gọi → toàn màn hình (ẩn tab), nút điều
     khiển lớn ở vùng ngón cái; phím số ≥ 56px. z-index 950 (dưới modal 1000, trên sheet 910).
   - Xoay ngang (cao ≤ 500px): bàn phím quay số, màn đang gọi, Kết quả cuộc gọi, QR, đăng nhập
     xếp 2 cột → nút chính luôn thấy không phải cuộn.
   TABLET
   - Modal: hộp giữa màn, rộng ≤ 640px, cao theo --app-h, thân cuộn, nút/ô nhập 44px,
     ô nhập chữ 16px (iOS không tự phóng to — gồm cả iPhone xoay ngang 844px).
   - Softphone: thẻ nổi góc phải dưới, cao tối đa theo --app-h.
   - Console quản trị: GIỮ BẢNG (hàng 48px, nút 44px); thẻ chỉ dùng ở điện thoại.
   Thang z-index: backdrop 900 · drawer/sheet 910 · nền mờ softphone 940 · softphone 950 ·
                  modal 1000 (modal mở chồng từ modal khác: 1010) · popover 1050 · toast 10050.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. CHUNG CHO MÀN NHỎ (≤ 1023px)
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Lớp phủ modal: cao đúng vùng nhìn thấy (trừ bàn phím), bỏ blur cho máy yếu */
  .modal-overlay {
    top: 0;
    bottom: auto;
    height: var(--app-h, 100dvh);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overscroll-behavior: contain;
  }
  .modal-overlay > .modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .modal-overlay .modal-header {
    flex: 0 0 auto;
    gap: 8px;
  }
  .modal-overlay .modal-header h3 {
    min-width: 0;
    flex: 1 1 auto;
  }
  .modal-overlay .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .modal-overlay .fx-modal-foot {
    flex: 0 0 auto;
  }
  .modal-overlay .btn-close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 22px;
    font-size: 26px;
    /* cùng màu nút đóng .fx-psheet / .lc-sheet (text-muted chỉ ~2.6:1 trên nền trắng) */
    color: var(--text-sub);
  }
  .modal-overlay .btn-close:active {
    background: var(--fx-active, rgba(0, 0, 0, 0.08));
  }

  /* Bảng trong modal không cuộn lồng: để thân modal cuộn */
  .modal-overlay .qr-manage-table-wrap {
    max-height: none;
  }
  /* Nhãn ô giá trong form thêm sản phẩm (phần tử chỉ render ở màn nhỏ) */
  .qr-add-form .form-row > .ov-field-label {
    align-self: center;
    font-size: 13px;
    color: var(--text-sub);
    white-space: nowrap;
  }

  /* Modal mở chồng từ modal khác (QR từ "Quản lý kênh", Kho SP từ "Tạo đơn")
     phải nằm trên modal gốc — cùng z 1000 thì modal sau trong DOM đè lên. */
  #qrModal,
  .modal-overlay.ov-products {
    z-index: 1010;
  }

  /* Lightbox ảnh: nền tối, ảnh vừa khung, nút đóng lớn */
  .lightbox-overlay {
    top: 0;
    bottom: auto;
    height: var(--app-h, 100dvh);
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overscroll-behavior: contain;
    touch-action: pinch-zoom;
  }
  .lightbox-overlay > img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-height: calc(var(--app-h, 100dvh) - 120px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    object-fit: contain;
    border-radius: 8px;
  }
  .lightbox-close {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    font-size: 30px;
    line-height: 1;
    z-index: 1;
  }
  .lightbox-close:active {
    background: rgba(255, 255, 255, 0.3);
  }

  /* Softphone: dưới modal (để modal "Kích hoạt gọi thoại" mở từ softphone hiện lên trên) */
  .softphone-widget {
    z-index: 950;
  }
  .softphone-widget .sp-view.active {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .softphone-widget .sp-history-list {
    max-height: none;
    overflow: visible;
  }
  .btn-softphone-head {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 22px;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .softphone-header {
    padding: 4px 4px 4px 16px;
    min-height: 52px;
  }
  .softphone-header-btns {
    gap: 0;
    flex-shrink: 0;
  }
  .softphone-title {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
  }
  /* Pill trạng thái Zalo: nền rõ trên header sáng; viền trong suốt 6px → hộp bấm thật cao
     44px (đo được bằng công cụ), phần nền nhìn thấy vẫn là pill 32px; chữ dài thì cắt */
  .sp-zalo-status-pill {
    min-height: 44px;
    min-width: 0;
    max-width: 62%;
    margin-left: 0;
    padding: 0 10px;
    border: 6px solid transparent;
    background: var(--fx-hover, #f1f5f9);
    background-clip: padding-box;
    color: var(--text-sub);
    font-size: 12px;
  }
  .sp-zalo-status-pill:active {
    background-color: #e2e8f0;
  }
  #spZaloPillText {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sp-tab-btn {
    min-height: 44px;
    font-size: 14px;
  }
  .sp-btn-backspace {
    width: 44px;
    height: 44px;
    right: 4px;
    padding: 0;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sp-btn-extra {
    min-height: 44px;
    font-size: 13px;
  }
  .sp-status-pill {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }
  .sp-quick-tags {
    gap: 8px;
  }
  .sp-quick-tag {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    font-size: 13px;
  }
  .sp-summary-actions .btn {
    height: 44px;
    font-size: 14px;
  }
  .sp-hist-btn-call {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    font-size: 13px;
  }
  .sp-history-item {
    gap: 8px;
  }
  .sp-hist-phone {
    font-size: 14px;
  }
  .sp-hist-meta {
    font-size: 12px;
  }
  .sp-ctrl-btn {
    min-height: 56px;
    justify-content: center;
  }
  .sp-ctrl-label {
    font-size: 12px;
  }
  .sp-key .sub {
    font-size: 10px;
  }
  .sp-notes-group label {
    font-size: 13px;
  }
  /* Đang gọi: ẩn tab Bàn phím / Lịch sử (chạm nhầm là rời màn gọi, chỉ quay lại bằng × = cúp máy) */
  .softphone-widget:has(#spActiveCallTab.active) .softphone-tabs {
    display: none;
  }
  /* Thiếu ảnh đại diện / ảnh lỗi → avatar chữ cái thay cho ảnh vỡ + chữ "Avatar" */
  .sp-call-avatar.sp-av-err {
    display: none;
  }
  .sp-av-letter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--primary-light, #e6f0ff);
    color: var(--primary);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  /* Chữ trạng thái cuộc gọi màu inline (#10b981 / #f59e0b) chỉ ~2.3:1 trên nền trắng →
     làm tối cùng tông để đạt ≥ 4.5:1 (giữ nguyên màu nhận diện xanh/cam/đỏ) */
  #spActiveCallTab .sp-call-status {
    filter: brightness(0.6);
  }
  .sp-summary-duration {
    color: #047857;
  }
  #addChannelModal #zaloOAuthHelper {
    font-size: 13px !important;
  }
  /* Nút "Đăng nhập & Uỷ quyền Zalo OA" dính đáy khung khi form dài hơn màn (xoay ngang,
     bàn phím ảo bật) — chỉ trượt trong thẻ OAuth của nó */
  #addChannelModal #btnConnectZaloOAOAuth {
    position: sticky;
    bottom: 12px;
    z-index: 2;
    width: 100%;
    box-shadow: 0 0 0 12px #fff, 0 4px 20px 12px rgba(8, 28, 54, 0.08);
  }
  #qrModal .qr-note {
    color: var(--text-sub);
  }
  /* Link developers.zalo.me: vùng chạm cao 44px (đệm trong + bù margin âm, chữ không xê dịch) */
  #addChannelModal #zaloOAuthHelper a {
    display: inline-block;
    padding: 14px 4px;
    margin: -14px -4px;
  }

  /* Đăng nhập: dùng cuộn tự nhiên của html, không tạo scroll container lồng nhau */
  .fx-signin {
    height: auto !important;
    min-height: 100vh !important;
    width: 100%;
    overflow: visible !important;
  }
  .fx-signin-form .form-input {
    height: 48px;
  }
  .fx-pw .form-input {
    padding-right: 52px;
  }
  .fx-pw .fx-icon-btn {
    width: 44px;
    height: 44px;
    top: 2px;
    right: 2px;
    font-size: 20px;
  }
  .fx-signin-form .btn-primary {
    height: 48px;
    font-size: 16px;
  }
  .fx-signin-form .fx-grid-2 .btn {
    height: 44px;
  }
  .fx-signin-lang {
    min-height: 44px;
    padding: 0 12px;
  }
  .fx-signin .fx-ch-ico.xs {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  /* Đăng nhập cũ (LoginScreen — hiện App không dùng; vẫn cho dùng được trên màn nhỏ) */
  body .login-screen {
    height: var(--app-h, 100dvh);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  body .login-input {
    min-height: 48px;
  }
  body .login-submit {
    min-height: 48px;
    width: 100%;
  }

  /* Console super admin: tự cuộn trong --app-h, header gọn có safe-area */
  body .console-screen {
    height: var(--app-h, 100dvh);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .console-screen .console-header {
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
    gap: 12px;
  }
  .console-screen .console-body {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .console-screen .btn {
    min-height: 44px;
  }
  .console-screen .console-form-grid input,
  .console-screen .console-form-grid select {
    min-height: 44px;
  }
  .console-screen .qr-manage-table-wrap {
    max-height: none;
  }
  .console-screen .qr-add-form .form-row > input,
  .console-screen .qr-add-form .form-row > select {
    height: 44px;
    border: 1px solid var(--fx-ctrl-border, #d9d9d9);
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    min-width: 0;
  }
  .console-screen .qr-add-form .form-row {
    flex-wrap: wrap;
  }
  /* Icon Phosphor ở tiêu đề mục (thay emoji ➕ 🏢 — chỉ render ở màn nhỏ) */
  .console-screen .console-panel h3 > .ph {
    margin-right: 6px;
    color: var(--primary);
    font-size: 20px;
    vertical-align: -3px;
  }
  /* Logo Vizio thật thay chữ "V" (ảnh chỉ render ở màn nhỏ) */
  .console-screen .login-logo:has(> .ov-logo-img) {
    background: transparent;
  }
  .console-screen .ov-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Nút đóng toast tin đến (App.js — chỉ màn nhỏ): vùng chạm 44px */
  .inbound-toast-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -6px -6px -6px 0;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: var(--text-sub);
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .inbound-toast-close:active {
    background: var(--fx-active, rgba(0, 0, 0, 0.08));
  }

  /* Hover chỉ cho thiết bị có chuột; máy cảm ứng dùng :active để phản hồi */
  @media (hover: none) {
    .inbound-toast:hover {
      transform: none;
    }
    .sp-key:hover {
      transform: none;
      background: #f1f5f9;
    }
    .sp-btn-call:hover,
    .sp-btn-hangup:hover {
      transform: none;
    }
  }
  .inbound-toast:active {
    transform: scale(0.98);
  }
  .sp-btn-call:active,
  .sp-btn-hangup:active {
    transform: scale(0.97);
  }
  .sp-ctrl-btn:active,
  .sp-btn-extra:active,
  .sp-quick-tag:active,
  .sp-hist-btn-call:active {
    background: #e2e8f0;
  }
  .channel-tab-btn:active {
    background: #e2e8f0;
  }

  /* Viền focus bàn phím rõ ràng */
  .modal-overlay .btn:focus-visible,
  .modal-overlay .btn-close:focus-visible,
  .modal-overlay .channel-tab-btn:focus-visible,
  .softphone-widget button:focus-visible,
  .softphone-widget a:focus-visible,
  .lightbox-close:focus-visible,
  .inbound-toast-close:focus-visible,
  .fx-signin-lang:focus-visible,
  .fx-signin .btn:focus-visible,
  .fx-signin .fx-icon-btn:focus-visible,
  .console-screen .btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .modal-overlay > .modal-card,
    .softphone-widget,
    .toast,
    .inbound-toast,
    .sp-m-scrim,
    .sp-pulse-ring {
      animation: none !important;
    }
    .sp-key,
    .sp-btn-call,
    .sp-btn-hangup,
    .inbound-toast {
      transition: none !important;
    }
  }
}

/* ---------------------------------------------------------------------
   2. ĐIỆN THOẠI (≤ 767px)
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* ---- 2.1 Modal: mặc định là bottom sheet ---- */
  .modal-overlay {
    align-items: flex-end;
    justify-content: center;
  }
  .modal-overlay > .modal-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    max-height: calc(var(--app-h, 100dvh) - 48px);
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 32px rgba(8, 28, 54, 0.18);
    animation: ovSheetUp 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* Thanh kéo (chỉ trang trí, báo hiệu đây là sheet) */
  .modal-overlay > .modal-card::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.16);
    pointer-events: none;
  }
  .modal-overlay .modal-header {
    min-height: 56px;
    padding: 14px 6px 6px max(16px, env(safe-area-inset-left, 0px));
  }
  .modal-overlay .modal-header h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .modal-overlay .modal-body {
    padding: 16px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
  }
  .modal-overlay .fx-modal-foot {
    padding: 12px 16px;
    gap: 12px;
    border-top: 1px solid var(--border-light);
    background: #fff;
  }
  .modal-overlay .fx-modal-foot > .btn {
    flex: 1 1 0;
    height: 48px;
    font-size: 16px;
  }

  /* ---- 2.2 Modal dài → toàn màn hình ---- */
  .modal-overlay > .modal-card.modal-lg,
  .modal-overlay > .modal-card.fx-modal-md,
  .modal-overlay > .modal-card.fx-modal-xl {
    height: var(--app-h, 100dvh);
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    animation-name: ovFullIn;
  }
  .modal-overlay > .modal-card.modal-lg::before,
  .modal-overlay > .modal-card.fx-modal-md::before,
  .modal-overlay > .modal-card.fx-modal-xl::before {
    display: none;
  }
  .modal-lg > .modal-header,
  .fx-modal-md > .modal-header,
  .fx-modal-xl > .modal-header {
    padding: calc(4px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 4px max(4px, env(safe-area-inset-left, 0px));
    gap: 4px;
  }
  /* Nút đóng sang trái như màn hình con toàn màn */
  .modal-lg > .modal-header .btn-close,
  .fx-modal-md > .modal-header .btn-close,
  .fx-modal-xl > .modal-header .btn-close {
    order: -1;
  }

  /* ---- 2.2b Header modal dạng sheet = header .fx-psheet (phần 3 (trang chính) của file này) → cả app một kiểu sheet:
         thanh kéo 36×4 #d0d5dd cách đỉnh 8px, hàng tiêu đề 52px KHÔNG vạch ngăn, tiêu đề 17/24
         trái, nút đóng 44px sát phải (bỏ margin âm của pages.css làm nút lòi khỏi mép màn).
         Modal dài giữ kiểu màn hình con toàn màn (đóng bên trái + vạch ngăn dưới header dính). ---- */
  .modal-overlay > .modal-card::before {
    top: 8px;
    background: #d0d5dd;
  }
  .modal-overlay > .modal-card:not(.modal-lg, .fx-modal-md, .fx-modal-xl) > .modal-header {
    min-height: 64px;
    padding: 12px max(4px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    border-bottom: none;
  }
  .modal-overlay > .modal-card:not(.modal-lg, .fx-modal-md, .fx-modal-xl) > .modal-header h3 {
    line-height: 24px;
  }
  .modal-overlay > .modal-card:not(.modal-lg, .fx-modal-md, .fx-modal-xl) > .modal-header .btn-close {
    margin: 0;
  }
  .modal-overlay > .modal-card:not(.modal-lg, .fx-modal-md, .fx-modal-xl) > .modal-body {
    padding-top: 8px;
  }

  /* ---- 2.3 Ô nhập / nút trong modal ---- */
  .modal-overlay .form-input,
  .modal-overlay .fx-select,
  .modal-overlay .modal-body select,
  .modal-overlay .form-row input {
    height: 44px;
  }
  .modal-overlay textarea.form-input {
    height: auto;
    min-height: 88px;
    padding: 10px 12px;
    line-height: 22px;
  }
  .modal-overlay .modal-body .btn {
    height: 44px;
  }
  .modal-overlay .form-group label,
  .modal-overlay .fx-label {
    font-size: 13px;
  }
  .modal-overlay input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  /* Form thêm nhanh (tin mẫu, sản phẩm, tài khoản): xếp dọc, nút tràn ngang */
  .qr-add-form .form-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .qr-add-form .form-row > input,
  .qr-add-form .form-row > select,
  .modal-overlay .qr-add-form .form-row > input,
  .modal-overlay .qr-add-form .form-row > select {
    width: 100% !important;
    flex: none !important;
    height: 44px;
  }
  .qr-add-form .form-row > .btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
  }
  .qr-add-form .form-row > .ov-field-label {
    align-self: flex-start;
    margin: 4px 0 -4px;
  }
  .qr-add-form h4 {
    font-size: 15px;
  }
  .modal-overlay .qr-add-form .console-note,
  .console-screen .console-note {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* ---- 2.4 Bảng → thẻ (.qr-table.ov-cards) — điện thoại + tablet (≤ 1023px) ----
   Ẩn thead, mỗi hàng là 1 thẻ, nhãn cột lấy từ data-label.
   Tablet cũng dùng thẻ cho bảng TRONG MODAL (nút 44px làm bảng trong modal 640px vỡ cột).
   Console quản trị: class ov-cards chỉ gắn ở điện thoại (SuperAdminConsole.js) → tablet
   giữ bảng (mục 3). */
@media (max-width: 1023px) {
  .modal-overlay .qr-manage-table-wrap,
  .console-screen .qr-manage-table-wrap:has(> .ov-cards) {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  .qr-table.ov-cards,
  .qr-table.ov-cards > tbody {
    display: block;
    width: 100%;
  }
  .qr-table.ov-cards > thead {
    display: none;
  }
  .qr-table.ov-cards > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: #fff;
  }
  .qr-table.ov-cards > tbody > tr > td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
    font-size: 14px;
    text-align: left;
  }
  .qr-table.ov-cards > tbody > tr > td.c-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 16px 0 !important;
  }
  .qr-table.ov-cards > tbody > tr:has(> td.c-empty) {
    display: block;
  }
  /* Nhãn cột nhỏ phía trước giá trị (thay cho thead đã ẩn) */
  .qr-table.ov-cards td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--text-sub);
    font-size: 13px;
  }
  /* Hàng nút thao tác: nút cao 44px chia đều */
  .qr-table.ov-cards td.c-act {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
  }
  .qr-table.ov-cards td.c-act > .btn {
    flex: 1 1 0;
    min-width: 64px;
    height: 44px;
    margin: 0 !important;
    font-size: 14px;
  }
  .qr-table.ov-cards td.c-act > .btn.c-danger {
    flex: 0 0 auto;
    min-width: 72px;
    color: var(--danger) !important;
  }
  /* Nút Xoá (xoá ngay, không hỏi lại) cách nút khác 16px (gap 8 + 8) để khỏi chạm nhầm;
     thẻ chỉ có mỗi nút Xoá (Fanpage) → dạt về mép phải như thao tác cuối hàng */
  .qr-table.ov-cards td.c-act > .btn.c-danger:not(:only-child) {
    margin-left: 8px !important;
  }
  .qr-table.ov-cards td.c-act > .btn.c-danger:only-child {
    margin-left: auto !important;
  }
  .qr-table.ov-cards td.c-name,
  .qr-table.ov-cards td.c-user {
    font-size: 15px;
    overflow-wrap: anywhere;
  }
  .qr-table.ov-cards td.c-status {
    justify-self: end;
  }

  /* Quản lý kênh: tên + trạng thái / loại kênh / thao tác */
  .qr-table.ov-cards.ov-ch > tbody > tr {
    grid-template-areas: "name status" "type type" "act act";
  }
  .qr-table.ov-cards.ov-ch td.c-name { grid-area: name; }
  .qr-table.ov-cards.ov-ch td.c-status { grid-area: status; }
  .qr-table.ov-cards.ov-ch td.c-type { grid-area: type; color: var(--text-sub); }
  .qr-table.ov-cards.ov-ch td.c-act { grid-area: act; }

  /* Tin mẫu: phím tắt + nút xoá / nội dung */
  .qr-table.ov-cards.ov-qr > tbody > tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "key act" "content content";
  }
  .qr-table.ov-cards.ov-qr td.c-key { grid-area: key; }
  .qr-table.ov-cards.ov-qr td.c-content { grid-area: content; color: var(--text-sub); line-height: 1.5; overflow-wrap: anywhere; }
  .qr-table.ov-cards.ov-qr td.c-act {
    grid-area: act;
    grid-column: auto;
    padding-top: 0;
  }
  .qr-table.ov-cards.ov-qr td.c-act > .btn {
    flex: none;
    min-width: 64px;
  }

  /* Kho sản phẩm: tên + giá / SKU + xoá */
  .qr-table.ov-cards.ov-prod > tbody > tr {
    grid-template-areas: "name price" "sku act";
  }
  .qr-table.ov-cards.ov-prod td.c-name { grid-area: name; }
  .qr-table.ov-cards.ov-prod td.c-price { grid-area: price; font-weight: 600; justify-self: end; }
  .qr-table.ov-cards.ov-prod td.c-sku { grid-area: sku; color: var(--text-sub); }
  .qr-table.ov-cards.ov-prod td.c-act {
    grid-area: act;
    grid-column: auto;
    justify-self: end;
    padding-top: 0;
  }

  /* Người dùng: tài khoản + trạng thái / tên + vai trò / kênh / thao tác */
  .qr-table.ov-cards.ov-users > tbody > tr:not(.ov-edit-row) {
    grid-template-areas: "user status" "name role" "ch ch" "act act";
  }
  .qr-table.ov-cards.ov-users td.c-user { grid-area: user; }
  .qr-table.ov-cards.ov-users td.c-status { grid-area: status; }
  .qr-table.ov-cards.ov-users td.c-name { grid-area: name; color: var(--text-sub); }
  .qr-table.ov-cards.ov-users td.c-role { grid-area: role; justify-self: end; color: var(--text-sub); font-size: 13px; }
  .qr-table.ov-cards.ov-users td.c-ch { grid-area: ch; font-size: 13px !important; color: var(--text-sub) !important; }
  .qr-table.ov-cards.ov-users td.c-act { grid-area: act; }
  .qr-table.ov-cards.ov-users td.c-act > .btn {
    min-width: 0;
    padding: 0 8px;
  }
  .qr-table.ov-cards.ov-users td.c-act > .btn.c-danger {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Hàng sửa phân quyền kênh: gắn liền dưới thẻ người dùng đang sửa (chung viền xanh,
     bo góc dưới, không khe hở) → nhìn là biết đang sửa tài khoản nào */
  .qr-table.ov-cards > tbody > tr:has(+ tr.ov-edit-row) {
    margin-bottom: 0;
    border-color: var(--primary);
    border-bottom: 1px dashed var(--border-light);
    border-radius: 12px 12px 0 0;
  }
  .qr-table.ov-cards > tbody > tr.ov-edit-row {
    display: block;
    padding: 0;
    margin-top: 0;
    border-color: var(--primary);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
  }
  .ov-edit-row > td.c-edit {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px !important;
  }
  .ov-edit-row > td.c-edit > div {
    flex: 0 0 100%;
    line-height: 1.5;
  }
  .ov-edit-row > td.c-edit label {
    min-height: 44px;
  }
  .ov-edit-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--primary);
  }
  .ov-edit-row > td.c-edit > .btn {
    flex: 1 1 0;
    height: 44px;
    margin: 0 !important;
  }

  /* Console (chỉ điện thoại — xem ghi chú đầu mục): công ty */
  .qr-table.ov-cards.ov-tenants > tbody > tr:not(.ov-sub-row) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "name name status" "id slug date" "act act act";
  }
  .qr-table.ov-cards.ov-tenants td.c-name { grid-area: name; }
  .qr-table.ov-cards.ov-tenants td.c-status { grid-area: status; }
  .qr-table.ov-cards.ov-tenants td.c-id { grid-area: id; color: var(--text-sub); font-size: 13px; }
  .qr-table.ov-cards.ov-tenants td.c-slug { grid-area: slug; color: var(--text-sub); font-size: 13px; }
  .qr-table.ov-cards.ov-tenants td.c-date { grid-area: date; color: var(--text-sub); font-size: 13px; justify-self: end; }
  .qr-table.ov-cards.ov-tenants td.c-act { grid-area: act; }
  /* Khối tài khoản mở dưới thẻ công ty: gắn liền thẻ (chung viền, bo góc dưới) thay vì
     thêm 1 lớp thẻ lồng → danh sách tài khoản rộng bằng thẻ công ty */
  .qr-table.ov-cards > tbody > tr:has(+ tr.ov-sub-row) {
    margin-bottom: 0;
    border-color: var(--primary);
    border-radius: 12px 12px 0 0;
  }
  .qr-table.ov-cards > tbody > tr.ov-sub-row {
    display: block;
    padding: 0;
    margin-top: 0;
    border-color: var(--primary);
    border-top: 1px dashed var(--border-light);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
  }
  /* Chỉ khi là thẻ (điện thoại): tablet giữ bảng thật, td colspan phải là table-cell */
  .qr-table.ov-cards > tbody > tr.ov-sub-row > td.c-sub {
    display: block;
    padding: 12px 0 0 !important;
  }
  .qr-table.ov-cards > tbody > tr.ov-sub-row .console-users-head {
    padding: 0 12px;
  }
  /* Console: tài khoản của công ty — danh sách phẳng (kẻ ngăn), không phải thẻ trong thẻ */
  .qr-table.ov-cards.ov-tusers > tbody > tr {
    grid-template-areas: "user status" "name role" "act act";
    margin: 0;
    border: 0;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
  }
  .qr-table.ov-cards > tbody > tr.ov-sub-row .qr-add-form {
    margin: 0;
    padding: 12px;
    border-top: 1px solid var(--border-light);
  }
  .qr-table.ov-cards.ov-tusers td.c-user { grid-area: user; }
  .qr-table.ov-cards.ov-tusers td.c-status { grid-area: status; justify-self: end; }
  .qr-table.ov-cards.ov-tusers td.c-name { grid-area: name; color: var(--text-sub); }
  .qr-table.ov-cards.ov-tusers td.c-role { grid-area: role; justify-self: end; color: var(--text-sub); font-size: 13px; }
  .qr-table.ov-cards.ov-tusers td.c-act { grid-area: act; }
  .qr-table.ov-cards > tbody > tr.ov-sub-row .qr-add-form .form-row > .btn {
    height: 48px;
  }

}

@media (max-width: 767px) {
  /* ---- 2.5 Đơn hàng (OrderModal) ---- */
  .om .om-cust {
    flex-direction: column;
    gap: 12px !important;
  }
  .om .om-cust > .form-group,
  .om .om-fee > .form-group {
    width: auto !important;
    flex: none !important;
    min-width: 0;
  }
  .om .om-addr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .om .om-addr > .form-input {
    width: 100%;
    min-width: 0;
  }
  .om .om-addr > .form-input:last-child {
    grid-column: 1 / -1;
  }
  .om .om-fee {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 12px;
  }
  .om .om-fee > .form-group:last-child {
    grid-column: 1 / -1;
  }
  .om .om-items {
    margin-bottom: 12px;
  }
  .om .om-items > label {
    min-height: 44px;
    margin-bottom: 0;
  }
  .om .om-stock-link {
    font-size: 14px !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .om .om-add {
    width: 100%;
    height: 44px;
    font-size: 15px;
  }
}

@media (max-width: 1023px) {
  /* Dòng sản phẩm (thẻ): chọn từ kho + tên (+ xoá) / đơn giá · SL · thành tiền */
  .qr-table.ov-cards.om-table > tbody > tr {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.7fr) minmax(0, 1fr) 44px;
    grid-template-areas: "prod prod prod rm" "price qty sub sub";
    gap: 8px;
    align-items: end;
    background: var(--bg-app, #f8fafc);
  }
  .qr-table.ov-cards.om-table td.c-prod { grid-area: prod; display: flex !important; flex-direction: column; gap: 8px; }
  .qr-table.ov-cards.om-table td.c-prod > select { margin: 0 !important; }
  .qr-table.ov-cards.om-table td.c-price { grid-area: price; }
  .qr-table.ov-cards.om-table td.c-qty { grid-area: qty; }
  .qr-table.ov-cards.om-table td.c-sub { grid-area: sub; text-align: right !important; font-size: 15px !important; line-height: 44px; }
  .qr-table.ov-cards.om-table td.c-rm { grid-area: rm; align-self: start; }
  .qr-table.ov-cards.om-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    line-height: 18px;
    margin-bottom: 4px;
    font-weight: 400;
  }
  .qr-table.ov-cards.om-table td.c-sub::before {
    text-align: right;
  }
  .qr-table.ov-cards.om-table .file-chip-remove {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 22px;
  }
  .qr-table.ov-cards.om-table .file-chip-remove:active {
    background: rgba(245, 34, 45, 0.1);
  }
  .modal-overlay .om-table .form-input,
  .modal-overlay .om-table select {
    height: 44px;
  }
}

@media (max-width: 767px) {
  /* Chân đơn: tổng + nút luôn dính đáy thân modal */
  .modal-overlay > .modal-card.om {
    padding-bottom: 0;
    height: var(--app-h, 100dvh) !important;
    max-height: none !important;
  }
  .om > .modal-body {
    padding-bottom: 12px;
  }
  .om .om-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    gap: 8px !important;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
    background: #fff;
    border-top: 1px solid var(--border-light) !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 12px rgba(8, 28, 54, 0.06);
  }
  .om .om-foot > div:first-child {
    min-width: 0;
    flex: 1 1 100%;
    font-size: 15px !important;
    line-height: 1.25;
  }
  .om .om-foot > div:last-child {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .om .om-foot .btn {
    height: 40px;
    font-size: 13.5px;
    flex: 1 1 auto;
    justify-content: center;
  }

  /* ---- 2.6 Thêm kênh (AddChannelModal) ---- */
  #addChannelModal .channel-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 12px;
  }
  #addChannelModal .channel-tab-btn {
    min-height: 48px;
    padding: 6px 10px;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
    font-size: 14px;
  }
  #addChannelModal .tab-help-text {
    font-size: 14px;
  }
  #addChannelModal #zaloOAuthHelper {
    font-size: 13px !important;
  }
  #addChannelModal .oauth-box-header h4 {
    font-size: 15px;
  }
  #addChannelModal .oauth-box-header p {
    font-size: 14px;
    line-height: 1.5;
  }
  #addChannelModal .btn {
    height: auto;
    min-height: 48px;
    padding: 8px 16px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    font-size: 15px;
  }
  #addChannelModal .tab-actions {
    flex-direction: column;
    align-items: stretch;
  }
  #addChannelModal .tab-actions > .btn {
    width: 100%;
  }
  /* Nút hành động chính (Tạo & Quét QR / Lưu Fanpage) dính đáy vùng ngón cái: thân modal là
     cột flex, tab đang mở giãn hết chiều cao → chân nút nằm sát đáy, nội dung dài thì dính */
  #addChannelModal .modal-body {
    display: flex;
    flex-direction: column;
  }
  #addChannelModal .channel-tabs {
    flex: 0 0 auto;
  }
  #addChannelModal .channel-tab-content.active {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  #addChannelModal .modal-body:has(> .channel-tab-content.active > .tab-actions) {
    padding-bottom: 0;
  }
  #addChannelModal .channel-tab-content.active > .tab-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: auto calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
    background: #fff;
    border-top: 1px solid var(--border-light);
  }
  #addChannelModal summary {
    padding: 12px 0;
    font-size: 14px !important;
    margin-bottom: 0 !important;
  }
  #addChannelModal .voice-qr-box {
    width: min(280px, 100%);
  }
  #addChannelModal .voice-qr-guide {
    font-size: 14px;
  }
  #addChannelModal .voice-act-banner {
    font-size: 14px;
    min-height: 44px;
  }

  /* ---- 2.7 Quét QR (QrModal) ---- */
  #qrModal .qr-instructions {
    font-size: 15px;
    line-height: 1.5;
  }
  #qrModal .qr-img-wrapper {
    width: min(260px, calc(100vw - 64px));
    height: auto;
    aspect-ratio: 1;
  }
  #qrModal .qr-note {
    font-size: 13px;
  }
  #qrModal .modal-footer-btns .btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
  }

  /* ---- 2.8 Modal trang (bộ quyền: 2 cột → 1 cột) ---- */
  .modal-overlay .fx-perm-body {
    flex-direction: column;
    max-height: none;
    gap: 12px;
    padding: 12px;
  }
  .modal-overlay .fx-perm-side {
    width: auto;
    align-self: stretch;
  }
  .modal-overlay .fx-perm-body > * {
    flex-shrink: 0;
  }
  .modal-overlay .fx-perm-main {
    padding: 12px;
    overflow-x: auto;
  }
  .modal-overlay .fx-perm-table td:not(:first-child),
  .modal-overlay .fx-perm-table th:not(:first-child) {
    width: 56px;
  }

  /* ---- 2.9 Popover chung: không tràn màn, mục cao 44px (độ ưu tiên thấp để
         không đè style riêng của từng popover do vùng khác quản) ---- */
  :where(.fx-shell.is-mobile) .fx-popover {
    max-width: calc(100vw - 16px);
  }
  :where(.fx-shell.is-mobile) .fx-pop-item {
    height: auto;
    min-height: 44px;
    font-size: 15px;
  }
  :where(.fx-shell.is-mobile) .fx-pop-item:active:not(.static) {
    background: var(--fx-active, rgba(0, 0, 0, 0.08));
  }

  /* ---- 2.10 Toast: vị trí theo ngữ cảnh, bám --app-h (không bị bàn phím che), chạm xuyên qua ----
     Không bao giờ đè nút / ô nhập người dùng vừa thao tác. Mọi quy tắc dưới cùng độ đặc hiệu
     (body:has(:where(…))) → quy tắc viết SAU thắng khi nhiều ngữ cảnh cùng lúc:
       a) mặc định: giữa đáy, trên thanh tab;
       b) trang có FAB / thanh Lưu dính đáy → nâng lên trên chúng;
       c) trong hội thoại → giữa vùng nhìn thấy; đang mở khay emoji / công cụ / tin mẫu → ngay
          dưới header chat (khay + ô soạn chiếm nửa dưới);
       d) lớp toàn màn (modal dài, panel khách hàng, chi tiết khách) → ngay trên chân dính của lớp;
       e) bottom sheet / modal ngắn / action sheet → đỉnh màn, trên nền mờ (không đè ô nhập, nút
          của sheet); có toast tin đến ở đỉnh → xếp ngay dưới nó;
       f) softphone đang mở → đỉnh màn (không đè nút "Bắt đầu gọi"). */
  .toast-container {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: auto;
    top: calc(var(--app-h, 100dvh) - 72px - env(safe-area-inset-bottom, 0px));
    transform: translateY(-100%);
    align-items: center;
    pointer-events: none;
  }
  .toast {
    max-width: 100%;
    font-size: 14px;
    /* Toast không có thao tác → chạm xuyên qua (không chặn ô soạn tin / chip bên dưới) */
    pointer-events: none;
  }
  /* b) FAB 56px ở đáy + 72px, thanh Lưu ~70px trên thanh tab → toast cách đáy 136px */
  body:has(:where(.fx-shell.is-mobile .fx-page-host :is(.fx-fab, .fx-adm-savebar))) .toast-container {
    top: calc(var(--app-h, 100dvh) - 136px - env(safe-area-inset-bottom, 0px));
  }
  /* c) Trong hội thoại: đáy là dải chip Tin mẫu + ô soạn → giữa vùng nhìn thấy (kiểu Zalo/Shopee) */
  body:has(:where(.fx-shell.m-in-chat)) .toast-container {
    top: calc(var(--app-h, 100dvh) / 2);
    transform: translateY(-50%);
  }
  body:has(:where(.fx-shell.m-in-chat .m-dock)) .toast-container {
    top: calc(64px + env(safe-area-inset-top, 0px));
    transform: none;
  }
  /* d) Lớp toàn màn: chân dính (nút Lưu / Tạo đơn) cao ~73px + safe-area */
  body:has(:where(.modal-overlay > :is(.modal-lg, .fx-modal-md, .fx-modal-xl), .fx-lc-crm.m-sheet-open, .fx-drawer)) .toast-container {
    top: calc(var(--app-h, 100dvh) - 84px - env(safe-area-inset-bottom, 0px));
    transform: translateY(-100%);
  }
  /* e) Sheet đáy (kể cả sheet mở chồng trên lớp toàn màn: QR trên "Quản lý kênh") */
  body:has(:where(.modal-overlay > .modal-card:not(.modal-lg, .fx-modal-md, .fx-modal-xl), .fx-psheet, .lc-sheet, .fx-step-pop)) .toast-container {
    top: calc(8px + env(safe-area-inset-top, 0px));
    transform: none;
  }
  body:has(:where(.inbound-toast)):has(:where(.modal-overlay > .modal-card:not(.modal-lg, .fx-modal-md, .fx-modal-xl), .fx-psheet, .lc-sheet, .fx-step-pop)) .toast-container {
    top: calc(84px + env(safe-area-inset-top, 0px));
  }
  /* toast tin đến trong hội thoại nằm dưới header chat (64px) → toast xếp dưới nữa */
  body:has(:where(.fx-shell.m-in-chat ~ .inbound-toast)):has(:where(.modal-overlay > .modal-card:not(.modal-lg, .fx-modal-md, .fx-modal-xl), .fx-psheet, .lc-sheet, .fx-step-pop, .fx-shell.m-in-chat .m-dock)) .toast-container {
    top: calc(140px + env(safe-area-inset-top, 0px));
  }
  /* f) Softphone đang mở (sheet đáy / màn gọi) */
  body:has(:where(#softphoneWidget:not([style*="display: none"]))) .toast-container {
    top: calc(8px + env(safe-area-inset-top, 0px));
    transform: none;
  }

  /* ---- 2.11 Toast tin đến: thẻ ≤ 420px căn giữa ở đỉnh màn (xoay ngang không trải hết
         724px); đang trong hội thoại → nằm dưới header chat để không che Back / Gọi / CRM ---- */
  .inbound-toast {
    top: calc(8px + env(safe-area-inset-top, 0px));
    bottom: auto;
    left: max(8px, env(safe-area-inset-left, 0px), calc(50% - 210px));
    right: max(8px, env(safe-area-inset-right, 0px), calc(50% - 210px));
    max-width: none;
    min-height: 68px;
    padding: 10px 10px 10px 12px;
    animation: ovDropIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .inbound-toast .btn {
    height: 44px;
    min-width: 64px;
    font-size: 15px;
  }
  .inbound-toast-msg {
    font-size: 14px;
  }
  .inbound-toast-badge {
    font-size: 12px;
    line-height: 18px;
  }
  .inbound-toast-title {
    font-size: 15px;
    min-width: 0;
  }
  .inbound-toast-title > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fx-shell.m-in-chat ~ .inbound-toast {
    top: calc(64px + env(safe-area-inset-top, 0px));
  }

  /* ---- 2.12 Softphone: sheet đáy; đang gọi → toàn màn ----
     Cao cố định (không nhảy 604 → 510 → 334px khi đổi tab), đáy bám mép trên bàn phím ảo:
     bottom = 100% − --app-h (bàn phím đóng → 0). Nội dung tab cuộn trong sheet. */
  .softphone-widget {
    top: auto;
    left: 0;
    right: 0;
    bottom: calc(100% - var(--app-h, 100%));
    width: auto;
    height: min(620px, calc(var(--app-h, 100dvh) - 24px - env(safe-area-inset-top, 0px)));
    max-height: none;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 32px rgba(8, 28, 54, 0.2);
    animation: ovSheetUp 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .softphone-title {
    font-size: 15px;
  }
  /* "_" và "×" cùng đóng softphone → điện thoại chỉ giữ 1 nút × (chừa chỗ cho pill trạng thái) */
  #btnMinimizeSoftphone {
    display: none;
  }
  /* Nền mờ sau sheet (phần tử chỉ render ở điện thoại): chặn bấm nhầm danh sách/CRM phía sau */
  .sp-m-scrim {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(8, 28, 54, 0.4);
    animation: ovFade 0.2s ease-out;
  }
  .sp-view {
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
  }
  .sp-recipient-name {
    font-size: 14px;
  }
  #spPhoneInput {
    height: 52px;
    font-size: 22px !important;
    padding: 0 48px;
  }
  .sp-number-display {
    margin-bottom: 12px;
  }
  .sp-keypad {
    gap: 8px;
    margin-bottom: 12px;
  }
  .sp-key {
    aspect-ratio: auto;
    min-height: 60px;
  }
  /* Bàn phím ảo đang bật (gõ số bằng bàn phím máy) → ẩn bàn phím số trong app để nút
     "Bắt đầu gọi" nằm ngay dưới ô số, không bị bàn phím ảo che */
  .softphone-widget.m-kb #spDialerTab .sp-keypad {
    display: none;
  }
  .sp-key .digit {
    font-size: 24px;
  }
  .sp-key .sub {
    font-size: 10px;
  }
  .sp-btn-call {
    min-height: 52px;
    font-size: 16px;
  }
  .sp-extra-call-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  /* Đang gọi: phủ toàn màn, điều khiển lớn ở nửa dưới */
  .softphone-widget:has(#spActiveCallTab.active) {
    top: 0;
    bottom: auto;
    height: var(--app-h, 100dvh);
    max-height: none;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
    box-shadow: none;
    animation-name: ovFullIn;
  }
  #spActiveCallTab .sp-active-call-body {
    flex: 1 0 auto;
    padding: 24px 0 8px;
  }
  #spActiveCallTab .sp-avatar-pulse {
    width: 96px;
    height: 96px;
    margin-bottom: 16px;
  }
  #spActiveCallTab .sp-av-letter {
    font-size: 40px;
  }
  #spActiveCallTab .sp-call-name {
    font-size: 22px;
  }
  #spActiveCallTab .sp-call-phone {
    font-size: 16px;
  }
  #spActiveCallTab .sp-call-status {
    font-size: 14px;
  }
  #spActiveCallTab .sp-call-timer {
    font-size: 34px;
  }
  #spActiveCallTab .sp-active-controls {
    margin-top: auto;
    width: 100%;
    max-width: 420px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
  }
  #spActiveCallTab .sp-ctrl-btn {
    min-height: 76px;
    padding: 8px 4px;
    border-radius: 16px;
  }
  #spActiveCallTab .sp-ctrl-icon {
    font-size: 26px;
  }
  #spActiveCallTab .sp-ctrl-label {
    font-size: 12px;
    text-align: center;
  }
  #spActiveCallTab .sp-active-hangup {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 8px;
  }
  #spActiveCallTab .sp-btn-hangup {
    width: 100%;
    max-width: 320px;
    height: 60px;
    border-radius: 30px;
    font-size: 17px;
  }
  /* Tóm tắt cuộc gọi + lịch sử */
  .sp-summary-header h4 {
    font-size: 16px;
  }
  .sp-summary-duration {
    font-size: 13px;
  }
  .sp-summary-status-group {
    gap: 8px;
  }
  .sp-notes-group label {
    font-size: 13px;
  }
  .sp-notes-group textarea {
    min-height: 96px;
  }
  .sp-summary-actions .btn {
    height: 48px;
    font-size: 15px;
  }
  /* Kết quả cuộc gọi: nút Bỏ qua / Lưu nằm đáy sheet (vùng ngón cái) và dính đáy khi nội
     dung dài hơn khung (bàn phím ảo bật, xoay ngang) */
  #spSummaryTab.active {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  #spSummaryTab .sp-summary-body {
    flex: 1 0 auto;
  }
  #spSummaryTab .sp-summary-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: auto calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
    background: #fff;
    border-top: 1px solid var(--border-light);
  }
  .sp-history-item {
    min-height: 64px;
    padding: 8px 8px 8px 12px;
    border-radius: 12px;
  }
  .sp-hist-phone {
    font-size: 16px;
  }
  .sp-hist-meta {
    font-size: 13px;
  }
  .sp-empty-history {
    font-size: 14px;
  }

  /* ---- 2.13 Đăng nhập & Bảng giá: 1 cột, bảng giá trên, form đăng nhập bên dưới ---- */
  .fx-signin {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 16px !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(36px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .fx-signin-form-wrap {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-start;
    padding: 24px 20px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  }
  .fx-signin-logo,
  .fx-signin-mobile-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    width: 100% !important;
  }
  .fx-signin-logo img,
  .fx-signin-mobile-logo img {
    height: 36px !important;
    width: auto !important;
    max-width: 160px !important;
    display: inline-block !important;
  }
  .fx-signin-art.fx-pricing-art,
  .fx-signin-art.vz-landing-art {
    order: 2 !important;
    display: flex !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
    padding: 20px 14px 18px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 24px rgba(37, 99, 235, 0.06) !important;
    overflow: visible !important;
  }
  .fx-pricing-top {
    display: none !important;
  }
  .fx-pricing-cycle-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .fx-pricing-cycle-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #dbeafe !important;
    padding: 3px !important;
    border-radius: 12px !important;
    gap: 4px !important;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05) !important;
  }
  .fx-cycle-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 4px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    min-height: 38px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
  }
  .fx-cycle-tab.is-active {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
  }
  .fx-cycle-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  .fx-pricing-logo {
    display: block !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
  .fx-pricing-logo img {
    height: 36px !important;
    width: auto !important;
    display: inline-block !important;
    margin: 0 auto !important;
  }
  .fx-pricing-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .fx-pricing-subtitle {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  .fx-pricing-quick-login {
    margin-top: 8px !important;
    text-align: center !important;
  }
  .fx-quick-login-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    color: #2563eb !important;
    text-decoration: none !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    transition: all 0.15s ease !important;
  }
  .fx-quick-login-link:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
  }
  .fx-quick-login-link b {
    font-weight: 600 !important;
    text-decoration: underline !important;
  }
  .fx-pricing-hint {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
    border: 1px dashed #bfdbfe;
    padding: 4px 12px;
    border-radius: 999px;
    margin: 0 auto 10px;
    text-align: center;
  }
  .fx-pricing-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    gap: 12px !important;
    padding: 10px 4px 16px !important;
    margin: 0 -4px 4px !important;
    scrollbar-width: none !important;
  }
  .fx-pricing-grid::-webkit-scrollbar {
    display: none;
  }
  .fx-pcard {
    flex: 0 0 84% !important;
    min-width: 250px !important;
    max-width: 290px !important;
    scroll-snap-align: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
    touch-action: pan-x pan-y !important;
  }

  .fx-calc-section {
    padding: 16px 12px !important;
  }
  .fx-calc-plan-selector {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .fx-calc-plan-btn {
    flex-direction: row !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
  }
  .fx-calc-cycle-selector {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .fx-calc-cycle-btn {
    padding: 8px 10px !important;
  }
  .fx-calc-summary-card {
    padding: 14px 12px !important;
  }
  .fx-compare-content {
    padding: 14px 10px !important;
  }
  .fx-compare-table th,
  .fx-compare-table td {
    padding: 7px 6px !important;
    font-size: 11px !important;
  }
  .fx-th-name {
    font-size: 11.5px !important;
  }
  .fx-th-price {
    font-size: 10px !important;
  }
  .fx-faq-section {
    padding: 16px 12px !important;
  }
  .fx-faq-question {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
  .fx-faq-answer {
    padding: 9px 10px !important;
    font-size: 11px !important;
  }
  .fx-reg-plan-banner {
    padding: 8px 10px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .fx-reg-plan-change {
    align-self: flex-end !important;
  }

  .fx-pricing-addons-section {
    padding: 16px 14px !important;
  }
  .fx-addons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .fx-addon-card {
    padding: 10px 10px !important;
  }
  .fx-addon-name {
    font-size: 11.5px !important;
  }
  .fx-addon-price {
    font-size: 13.5px !important;
  }
  .fx-pricing-consult-card {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .fx-consult-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .fx-pricing-guarantee {
    font-size: 11.5px !important;
    padding: 10px 12px !important;
  }
  .fx-signin-lang {
    display: none !important;
  }
  .fx-signin-form {
    max-width: 440px;
  }
  .fx-signin-form h1 {
    font-size: 26px;
    line-height: 34px;
  }
  .fx-signin-form .fx-page-sub {
    margin-bottom: 8px;
  }
  .fx-signin-form .fx-label {
    font-size: 14px;
    margin-top: 16px;
  }
  .fx-signin-form .fx-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  .fx-signin-error {
    font-size: 14px;
  }

  /* ---- 2.14 Console super admin ---- */
  .console-screen .console-header {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .console-screen .console-brand {
    min-width: 0;
    gap: 10px;
  }
  .console-screen .console-brand > div:last-child {
    min-width: 0;
  }
  .console-screen .console-header .login-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 18px;
  }
  .console-screen .console-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Phụ đề header bị cắt ở màn hẹp → ẩn (tiêu đề đã đủ nghĩa) */
  .console-screen .console-sub {
    display: none;
  }
  .console-screen .console-user {
    flex-shrink: 0;
    gap: 8px;
  }
  /* Tên người dùng đã có trong phiên → ẩn trên màn hẹp, giữ nút Đăng xuất */
  .console-screen .console-user > span {
    display: none;
  }
  .console-screen .console-body {
    padding-top: 12px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .console-screen .console-panel {
    padding: 16px 12px;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .console-screen .console-panel h3 {
    font-size: 16px;
  }
  .console-screen .console-form-grid {
    grid-template-columns: 1fr;
  }
  .console-screen .console-form-grid label {
    font-size: 13px;
  }
  .console-screen .console-form-action .btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
  }

  /* ---- 2.15 Màn ngang thấp (điện thoại xoay ngang) ---- */
  @media (max-height: 500px) {
    .modal-overlay > .modal-card {
      max-height: calc(var(--app-h, 100dvh) - 16px);
    }
    .fx-signin-claim {
      display: none;
    }
  }
  /* Sheet ngắn trên màn ngang rộng: không kéo giãn hết bề ngang */
  @media (min-width: 600px) {
    .modal-overlay > .modal-card:not(.modal-lg):not(.fx-modal-md):not(.fx-modal-xl) {
      max-width: 560px !important;
    }
  }
}

/* ---------------------------------------------------------------------
   3. TABLET (768–1023px)
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .modal-overlay {
    padding: 24px;
  }
  .modal-overlay > .modal-card {
    max-height: calc(var(--app-h, 100dvh) - 48px);
  }
  .modal-overlay > .modal-card.modal-lg {
    max-width: 640px;
  }
  .modal-overlay > .modal-card.fx-modal-xl {
    width: 100%;
    max-width: 720px !important;
  }
  .modal-overlay .modal-header {
    padding: 8px 12px 8px 24px;
    min-height: 60px;
  }
  .modal-overlay .form-input,
  .modal-overlay .fx-select,
  .modal-overlay .modal-body select,
  .modal-overlay .form-row input,
  .modal-overlay .qr-table .form-input,
  .modal-overlay .qr-table select,
  .modal-overlay .qr-add-form .form-row > input,
  .modal-overlay .qr-add-form .form-row > select {
    height: 44px;
  }
  /* Form thêm nhanh: ô co giãn không bé hơn 140px (xuống dòng thay vì bóp ô) */
  .modal-overlay .qr-add-form .form-row > input {
    min-width: 140px;
  }
  .modal-overlay textarea.form-input {
    height: auto;
    min-height: 80px;
    padding: 8px 12px;
  }
  .modal-overlay .btn {
    height: 44px;
  }
  .modal-overlay input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
  }
  /* iOS phóng to trang khi chạm ô chữ < 16px — tablet / iPhone xoay ngang (844px) cũng vậy
     (điện thoại ≤ 767 đã có quy tắc chung ở phần 1 (khung) của file này) */
  .modal-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .modal-overlay select,
  .modal-overlay textarea,
  .fx-signin input,
  .console-screen input,
  .console-screen select,
  .softphone-widget textarea,
  .softphone-widget input:not(#spPhoneInput):not([type="radio"]) {
    font-size: 16px !important;
  }
  .modal-overlay .fx-modal-foot {
    border-top: 1px solid var(--border-light);
    padding: 12px 24px;
  }
  .modal-overlay .fx-perm-body {
    flex-direction: column;
    max-height: none;
  }
  .modal-overlay .fx-perm-side {
    width: auto;
    align-self: stretch;
  }
  .om .om-stock-link {
    font-size: 14px !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Chân đơn dính đáy thân modal */
  .om > .modal-body {
    padding-bottom: 0;
  }
  .om .om-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 12px -24px 0 !important;
    padding: 12px 24px 16px !important;
    background: #fff;
    box-shadow: 0 -4px 12px rgba(8, 28, 54, 0.05);
  }
  #addChannelModal .channel-tabs {
    flex-wrap: wrap;
  }
  #addChannelModal .channel-tab-btn {
    min-height: 44px;
  }
  #addChannelModal summary {
    padding: 10px 0;
    font-size: 14px !important;
  }
  #qrModal .modal-footer-btns .btn {
    min-width: 200px;
  }

  /* Popover: mục cao 44px cho ngón tay */
  :where(.fx-shell.is-tablet) .fx-pop-item {
    height: auto;
    min-height: 44px;
  }

  /* Toast góc phải dưới; toast tin đến lên góc phải trên để không chồng softphone/toast */
  .toast {
    max-width: min(420px, calc(100vw - 48px));
  }
  /* Toast tin đến dưới header chat (không che cụm nút Gọi / CRM góc phải trên) */
  .inbound-toast {
    top: calc(72px + env(safe-area-inset-top, 0px));
    bottom: auto;
    right: max(16px, env(safe-area-inset-right, 0px));
    max-width: 400px;
    min-height: 64px;
    animation: ovDropIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .inbound-toast .btn {
    height: 44px;
    min-width: 60px;
  }
  .inbound-toast-badge {
    font-size: 12px;
    line-height: 18px;
  }

  /* Softphone: thẻ nổi góc phải dưới, cao theo vùng nhìn thấy */
  .softphone-widget {
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 340px;
    max-height: calc(var(--app-h, 100dvh) - 32px - env(safe-area-inset-bottom, 0px));
  }
  .sp-key {
    min-height: 56px;
  }
  .sp-key .digit {
    font-size: 20px;
  }
  .sp-btn-call {
    min-height: 48px;
  }
  .sp-extra-call-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sp-active-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  /* Nút Kết thúc: khối cha giãn hết bề ngang → nút rộng 240px (trước chỉ còn 108px) */
  .sp-active-hangup {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .sp-btn-hangup {
    height: 48px;
    width: 100%;
    min-width: 160px;
    max-width: 240px;
  }

  /* Đăng nhập tablet */
  .fx-signin {
    padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .fx-signin-form-wrap {
    flex-shrink: 0;
    min-height: min-content;
    padding: 48px 0 24px;
  }
  .fx-signin-form h1 {
    font-size: 26px;
    line-height: 34px;
  }

  /* Console quản trị tablet: GIỮ BẢNG (không phải thẻ điện thoại phóng to) — hàng 48px,
     nút 44px theo nội dung, căn phải */
  .console-screen .qr-table th,
  .console-screen .qr-table td {
    height: 48px;
    padding: 6px 8px;
    vertical-align: middle;
  }
  .console-screen .qr-table td.c-act {
    white-space: nowrap;
    text-align: right;
  }
  .console-screen .qr-table td.c-act > .btn {
    min-width: 64px;
    padding: 0 12px;
  }
  .console-screen .qr-table td.c-act > .btn.c-danger {
    margin-left: 8px;
  }
  .console-screen .ov-sub-row > td.c-sub {
    height: auto;
  }
  .console-screen .qr-add-form .form-row > input,
  .console-screen .qr-add-form .form-row > select {
    min-width: 140px;
  }
}

/* Mobile & Tablet dọc hẹp (≤ 900px): form đăng nhập bên trên, giới thiệu Vizio bên dưới */
@media (max-width: 900px) {
  /* Đăng nhập & Landing trên mobile: Form bên trên, Landing bên dưới */
  .fx-signin {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 12px calc(40px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    background: #f8fafc !important;
  }
  .fx-signin-form-wrap {
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    padding: 24px 18px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
  .fx-signin-lang {
    display: none !important;
  }
  .fx-signin-logo,
  .fx-signin-mobile-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    width: 100% !important;
  }
  .fx-signin-logo img,
  .fx-signin-mobile-logo img {
    height: 34px !important;
    width: auto !important;
    max-width: 150px !important;
    object-fit: contain !important;
    display: block !important;
  }
  .fx-signin-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .fx-signin-form h1 {
    font-size: 22px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin: 0 0 4px !important;
  }
  .fx-signin-form .fx-page-sub {
    font-size: 13px !important;
    text-align: center !important;
    margin-bottom: 18px !important;
  }
  .fx-signin-form .fx-label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    margin-top: 12px !important;
    margin-bottom: 4px !important;
  }
  .fx-signin-form .form-input {
    width: 100% !important;
    height: 42px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }
  .fx-signin-form .btn-primary {
    width: 100% !important;
    height: 44px !important;
    margin-top: 18px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
  }
  .fx-signin-switch {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin-top: 16px !important;
    text-align: center !important;
    word-break: break-word !important;
  }
  .fx-signin-art.fx-pricing-art,
  .fx-signin-art.vz-landing-art {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 22px 16px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
  .vz-hero-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .vz-hero-content {
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .vz-hero-title {
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
    text-align: center !important;
    margin: 0 !important;
  }
  .vz-channels {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px 8px !important;
    margin-top: 12px !important;
    font-size: 12.5px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .vz-ch-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .vz-ch-icon {
    width: 16px !important;
    height: 16px !important;
  }
  .vz-sub-features {
    text-align: center !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin: 10px 0 0 !important;
  }
  .vz-hero-cta {
    display: flex !important;
    justify-content: center !important;
    margin-top: 16px !important;
    width: 100% !important;
  }
  .vz-btn-trial {
    padding: 10px 24px !important;
    font-size: 13.5px !important;
  }
  .vz-hero-perks {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid #eef2f6 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .vz-perk-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .vz-perk-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #eff6ff !important;
    color: #1665f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .vz-perk-icon svg {
    width: 13px !important;
    height: 13px !important;
  }
  .vz-perk-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .vz-perk-text b {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #081122 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    display: block !important;
    white-space: normal !important;
  }
  .vz-perk-text span {
    display: none !important;
  }
  .vz-hero-mockup-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 14px !important;
    display: flex !important;
    justify-content: center !important;
  }
  .vz-hero-mockup-img {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    max-height: 200px !important;
    object-fit: contain !important;
  }
  .vz-features-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid #eef2f6 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .vz-feat-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    background: #f8fafc !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }
  .vz-feat-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    background: #eff6ff !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  .vz-feat-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .vz-feat-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .vz-feat-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #081122 !important;
    margin: 0 0 2px !important;
    line-height: 1.25 !important;
  }
  .vz-feat-desc {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .fx-pricing-top {
    display: none !important;
  }
  .fx-pricing-cycle-wrap {
    margin: 0 0 14px !important;
  }
  .fx-pricing-logo {
    display: block !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
  .fx-pricing-logo img {
    height: 36px !important;
    width: auto !important;
    display: inline-block !important;
    margin: 0 auto !important;
  }
  .fx-pricing-hint {
    display: inline-flex !important;
  }
  .fx-pricing-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    gap: 12px !important;
    padding: 10px 4px 16px !important;
    margin: 0 -4px 4px !important;
    scrollbar-width: none !important;
  }
  .fx-pricing-grid::-webkit-scrollbar {
    display: none;
  }
  .fx-pcard {
    flex: 0 0 84% !important;
    min-width: 250px !important;
    max-width: 290px !important;
    scroll-snap-align: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  }

  .fx-signin-form {
    max-width: none;
  }
  .fx-signin-lang {
    display: none !important;
  }
  .fx-signin-form .fx-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablet ngang thấp (vd 844×390, 1000×?): modal sát mép hơn */
@media (min-width: 768px) and (max-width: 1023px) and (max-height: 500px) {
  .modal-overlay {
    padding: 8px 24px;
  }
  .modal-overlay > .modal-card {
    max-height: calc(var(--app-h, 100dvh) - 16px);
  }
  /* Thẻ nổi thấp hơn nhưng rộng hơn: bàn phím / màn đang gọi xếp 2 cột (khối bên dưới) */
  .softphone-widget {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    max-height: calc(var(--app-h, 100dvh) - 16px - env(safe-area-inset-bottom, 0px));
    width: min(560px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }
}

/* Màn ngang thấp (điện thoại xoay ngang, tablet ngang thấp): softphone xếp 2 cột để
   bàn phím số và nút Kết thúc luôn nằm trong khung nhìn, không phải cuộn. */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  /* Bàn phím quay số 2 cột: trái = số + nút gọi, phải = phím số → không phải cuộn */
  #spDialerTab.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 16px;
    align-content: start;
  }
  #spDialerTab .sp-recipient-info {
    grid-column: 1;
    grid-row: 1;
  }
  #spDialerTab .sp-number-display {
    grid-column: 1;
    grid-row: 2;
  }
  #spDialerTab .sp-call-actions {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
  }
  #spDialerTab .sp-keypad {
    grid-column: 2;
    grid-row: 1 / 4;
    margin: 0;
  }
  .sp-key {
    min-height: 44px;
  }
  .sp-key .digit {
    font-size: 20px;
  }
  /* Đang gọi 2 cột: trái = người gọi + đồng hồ, phải = điều khiển + Kết thúc (luôn thấy) */
  #spActiveCallTab .sp-active-call-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-rows: repeat(4, auto) 1fr;
    column-gap: 16px;
    align-items: center;
    justify-items: center;
    padding: 8px max(8px, env(safe-area-inset-right, 0px)) 8px max(8px, env(safe-area-inset-left, 0px));
  }
  #spActiveCallTab .sp-active-call-body > * {
    grid-column: 1;
  }
  #spActiveCallTab .sp-avatar-pulse {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
  }
  #spActiveCallTab .sp-call-name {
    font-size: 18px;
  }
  #spActiveCallTab .sp-call-timer {
    font-size: 26px;
    margin-bottom: 0;
  }
  #spActiveCallTab .sp-active-controls {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: end;
    width: 100%;
    margin: 0;
  }
  #spActiveCallTab .sp-ctrl-btn {
    min-height: 60px;
  }
  #spActiveCallTab .sp-active-hangup {
    grid-column: 2;
    grid-row: 4 / 6;
    align-self: start;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 12px 0 0;
  }
  #spActiveCallTab .sp-btn-hangup {
    width: 100%;
    max-width: 320px;
    height: 52px;
  }
  #spActiveCallTab .sp-av-letter {
    font-size: 24px;
  }

  /* Kết quả cuộc gọi 2 cột: trái = tiêu đề + 4 kết quả, phải = ghi chú + thẻ nhanh;
     Bỏ qua / Lưu trải ngang, dính đáy khung → không phải cuộn mới thấy nút */
  #spSummaryTab.active {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    padding-bottom: 0;
  }
  #spSummaryTab .sp-summary-body {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "head notes" "status notes" "act act";
    gap: 8px 16px;
  }
  #spSummaryTab .sp-summary-header { grid-area: head; }
  #spSummaryTab .sp-summary-status-group { grid-area: status; align-content: start; }
  #spSummaryTab .sp-notes-group {
    grid-area: notes;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  #spSummaryTab .sp-notes-group textarea {
    flex: 1 1 auto;
    min-height: 64px;
  }
  #spSummaryTab .sp-status-pill {
    min-height: 40px;
  }
  #spSummaryTab .sp-summary-actions {
    grid-area: act;
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0;
    padding: 8px 0 10px;
    background: #fff;
    border-top: 1px solid var(--border-light);
  }
  #spSummaryTab .sp-summary-actions .btn {
    height: 44px;
  }

  /* Quét QR xoay ngang: mã QR bên trái (vừa chiều cao), hướng dẫn + nút bên phải */
  #qrModal > .modal-card {
    width: min(640px, calc(100vw - 32px)) !important;
    max-width: min(640px, calc(100vw - 32px)) !important;
  }
  #qrModal .modal-header {
    min-height: 48px;
    padding-top: 4px;
    padding-bottom: 0;
  }
  #qrModal > .modal-card::before {
    top: 4px;
  }
  #qrModal .modal-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "qr ." "qr ins" "qr note" "qr btn";
    column-gap: 20px;
    align-items: start;
    text-align: left;
    padding-top: 8px;
    padding-bottom: 12px;
  }
  #qrModal .qr-img-wrapper {
    grid-area: qr;
    width: min(240px, calc(var(--app-h, 100dvh) - 96px));
    height: auto;
    aspect-ratio: 1;
    margin: 0;
  }
  #qrModal .qr-instructions { grid-area: ins; margin-bottom: 8px; }
  #qrModal .qr-note { grid-area: note; margin-bottom: 12px; }
  #qrModal .modal-footer-btns { grid-area: btn; align-self: end; }
  #qrModal .modal-footer-btns .btn {
    width: 100%;
    min-width: 0;
    height: 44px;
  }

  /* Lightbox xoay ngang: ảnh dùng gần hết chiều cao (chừa 8px), nút đóng nằm ngoài ảnh */
  .lightbox-overlay > img {
    max-height: calc(var(--app-h, 100dvh) - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 128px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }

  /* Thêm kênh xoay ngang: 4 tab thành 1 hàng chip cuộn ngang (thay lưới 2×2 cao 112px) */
  #addChannelModal .channel-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
  }
  #addChannelModal .channel-tabs::-webkit-scrollbar {
    display: none;
  }
  #addChannelModal .channel-tab-btn {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }

  /* Đăng nhập xoay ngang: 2 cột — trái = thương hiệu (dính), phải = form gọn; nút ngôn
     ngữ góc phải trên cột form → ô Mật khẩu + nút Đăng nhập thấy ngay không phải cuộn */
  .fx-signin {
    position: relative;
    height: auto !important;
    overflow: visible !important;
    gap: 16px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .fx-signin-art {
    display: flex;
    position: static;
    height: auto;
    margin: 0;
    padding: 20px;
    gap: 12px;
    justify-content: center;
    border-radius: 16px;
  }
  .fx-signin-claim {
    display: flex;
  }
  .fx-signin-claim b {
    font-size: 17px;
    line-height: 24px;
  }
  .fx-signin-claim span {
    font-size: 14px;
    line-height: 20px;
  }
  .fx-signin-form-wrap {
    position: relative;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 4px 0 16px;
    justify-content: flex-start;
  }
  .fx-signin-form {
    max-width: 440px;
  }
  .fx-signin-lang {
    display: none !important;
  }
  .fx-signin-form h1 {
    font-size: 22px;
    line-height: 30px;
  }
  .fx-signin-form .fx-page-sub {
    margin-bottom: 0;
    font-size: 13px;
  }
  .fx-signin-form .fx-label {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 18px;
  }
  .fx-signin-form .form-input {
    height: 44px;
  }
  .fx-signin-form .btn-primary {
    margin-top: 16px;
    height: 44px;
  }
}

/* ---------------------------------------------------------------------
   4. HIỆU ỨNG (khai báo trong media để desktop hoàn toàn không đổi)
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  @keyframes ovSheetUp {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  @keyframes ovFullIn {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  @keyframes ovDropIn {
    from { transform: translateY(-16px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  @keyframes ovFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Ô nội dung tin mẫu (SettingsModals, chỉ màn nhỏ): nhiều dòng, full ngang */
@media (max-width: 1023px) {
  textarea.ov-qr-content {
    flex: 1 1 100%; width: 100%; min-height: 88px; resize: vertical; padding: 10px 12px; line-height: 1.45;
    border: 1px solid var(--fx-ctrl-border, #d0d5dd); border-radius: 8px; font-family: inherit; color: var(--text-main);
  }
  textarea.ov-qr-content:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0, 104, 255, 0.1); }
}

/* =====================================================================
   DANH BẠ ZALO + GHIM TIN (màn nhỏ; desktop ở foxia-theme.css mục 9)
   - Trang Danh bạ (.pg-contacts): ô tìm + ô chọn tài khoản chung hàng, thẻ .fx-mrow căn giữa với nút
     phụ 44px (Gọi / Nhắn tin nhóm); lời mời kết bạn: nút Đồng ý / Từ chối chia đôi hàng dưới tên.
   - Modal Thêm bạn (bottom sheet) / Tạo nhóm (toàn màn): ô nhập 44px chữ 16px (iOS không phóng to),
     danh sách chọn bạn cuộn theo thân modal, ô tick 22px trong hàng 56px, chip bỏ chọn có vùng chạm lớn.
   - Drawer thành viên nhóm: hàng tràn viền, nút nhắn riêng 44px.
   - Thanh tin đã ghim: hàng 52px, nút × và "+N" đủ lớn để chạm.
   ===================================================================== */
@media (max-width: 1023px) {
  .pg-contacts .fx-toolbar > .fx-search { flex: 1 1 220px; }
  .pg-contacts .zc-ch-select { flex: 1 1 160px; min-width: 0; max-width: none; font-size: 16px; }
  .zc-mrow { align-items: center; }
  .zc-mrow .zc-mrow-act { flex-shrink: 0; width: 44px; height: 44px; margin-right: -8px; font-size: 22px; color: var(--primary); }
  .zc-mrow-busy { flex-shrink: 0; color: var(--primary); font-size: 18px; }
  .zc-mrow .fx-mrow-sub > .ph { font-size: 14px; }
  .zc-mrow .fx-mrow-sub > .fx-tag { flex-shrink: 0; }
  .zc-drawer .zc-row { padding: 10px 16px; }
  .zc-drawer .zc-row .fx-icon-btn { width: 44px; height: 44px; margin-right: -8px; font-size: 22px; }

  .zc-modal .modal-body { max-height: none; }
  .zc-modal .form-input, .zc-modal .fx-select { height: 44px; font-size: 16px; }
  .zc-modal .form-textarea { font-size: 16px; }
  .zc-modal .fx-search { height: 44px; min-width: 0; }
  .zc-modal .fx-search input { font-size: 16px; }
  .zc-inline .btn { height: 44px; }
  .zc-pick-list { max-height: none; overflow: visible; border: none; padding: 0; margin: 0 -8px; }
  .zc-pick-row { min-height: 56px; padding: 8px; }
  .zc-pick-row input[type="checkbox"] { width: 22px; height: 22px; }
  .zc-pick-row .zc-av { width: 40px; height: 40px; }
  .zc-pick-row .zc-main > b { font-size: 15px; }
  .zc-pick-more { height: 44px; }
  .zc-chips { max-height: 112px; }
  .zc-chips .fx-chip { height: 32px; padding: 0 4px 0 10px; }
  .zc-chips .fx-chip .ph { width: 32px; height: 32px; margin-right: -4px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }

  .chat-pinbar { padding: 0 4px 0 12px; }
  .chat-pin-row { min-height: 52px; }
  .chat-pin-text { font-size: 14px; }
  .chat-pin-more { height: 32px; padding: 0 10px; border-radius: 16px; font-size: 13px; }
  .chat-pin-x { width: 44px; height: 44px; font-size: 18px; }
  .chat-pin-x:active, .chat-pin-main:active { background: var(--fx-active); }
}
@media (max-width: 767px) {
  .pg-contacts .zc-list:not(.zc-members) { margin: 0 -16px; border-radius: 0; border-left: none; border-right: none; }
  .pg-contacts .zc-list:not(.zc-members) > .zc-row { flex-wrap: wrap; align-items: flex-start; }
  .pg-contacts .zc-row > .zc-acts { width: 100%; padding-left: 52px; }
  .pg-contacts .zc-row > .zc-acts .btn { flex: 1 1 0; }
  .zc-foot-hint { display: none; }
}

/* =====================================================================
   BÌNH LUẬN FANPAGE (màn nhỏ; desktop ở foxia-theme.css mục 10)
   - Thẻ bài viết: chữ 13px, "Xem bài" có vùng chạm 32px.
   - Thanh "Đang trả lời bình luận" trên ô soạn: nút × 44px.
   - Sheet nhấn giữ: hàng "Nhắn riêng" bị chặn (đã nhắn / quá 7 ngày) mờ đi, lý do xuống dòng đủ chữ.
   - Modal Nhắn riêng (bottom sheet chung của .modal-overlay): ô nhập chữ 16px (iOS không phóng to).
   ===================================================================== */
@media (max-width: 1023px) {
  .fbc-post { font-size: 13px; padding: 2px 4px 2px 10px; }
  .fbc-post-link { min-height: 32px; padding: 0 6px; }
  .fbc-chip { height: 22px; font-size: 12px; line-height: 22px; }
  .fbc-reply-bar { padding: 0 0 0 12px; font-size: 14px; }
  .fbc-reply-x { width: 44px; height: 44px; font-size: 18px; }
  .fbc-reply-x:active { background: var(--fx-active); }
  .lc-row.is-off { opacity: 0.55; }
  .lc-row.is-off .lc-row-text small { white-space: normal; }
  .fbc-pr-modal .form-textarea { font-size: 16px; }
}

/* =====================================================================
   XOÁ / THU HỒI TIN + TẮT THÔNG BÁO (màn nhỏ; desktop ở foxia-theme.css mục 11)
   - Modal Xoá / thu hồi (bottom sheet chung của .modal-overlay trên điện thoại): ô lựa chọn ≥ 56px, radio 20px,
     chữ 15px; nút "Thử lại" 40px.
   - Menu Tắt thông báo (bộ 3 nút của panel khách / drawer Khách hàng): mục cao 44px chữ 15px.
   - Sheet "Tắt thông báo" (muteConv): ghi chú cuối sheet. Sheet nhấn giữ tin đã thu hồi (nhân viên): dòng giải thích.
   ===================================================================== */
@media (max-width: 1023px) {
  .msg-del-opt { min-height: 56px; padding: 12px; }
  .msg-del-opt input { width: 20px; height: 20px; margin-top: 0; }
  .msg-del-opt-text b { font-size: 15px; }
  .msg-del-opt-text small { font-size: 13px; }
  .msg-del-state .btn { height: 40px; }
  .msg-del-note, .msg-del-warn { font-size: 14px; line-height: 20px; }
  .fx-mute-pop .fx-pop-item { height: 44px; font-size: 15px; }
  .fx-mute-pop .fx-pop-item .ph { font-size: 20px; }
  .fx-mute-note, .fx-mute-status { font-size: 13px; }
  .lc-mute-note { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--text-sub); }
  .lc-recall-note { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; line-height: 20px; color: var(--text-sub); }
  .lc-recall-note .ph { flex-shrink: 0; font-size: 18px; }
}
@media (max-width: 1023px) and (hover: none) {
  .msg-del-opt:hover:not(.off):not(.on) { border-color: var(--border-color); }
  .msg-del-opt:active:not(.off) { background: var(--primary-light); }
}

/* =====================================================================
   THẺ ZALO (màn nhỏ; desktop ở foxia-theme.css mục 12)
   - Thẻ rộng theo màn (≤ 72vw, tối đa 280px); nút sao chép số tài khoản + nút của thẻ đủ lớn để chạm.
   ===================================================================== */
@media (max-width: 1023px) {
  .fx-shell.is-mobile .msg-zcard { width: min(72vw, 280px); }
  .msg-zcard-copy { width: 32px; height: 32px; font-size: 17px; }
  .msg-zcard-btns a, .msg-zcard-btns span { padding: 6px 12px; }
  .msg-zcard-link { min-height: 32px; }
}
@media (max-width: 1023px) and (hover: none) {
  .msg-zcard-btns a:hover { border-color: var(--border-color); background: transparent; }
  .msg-zcard-btns a:active { background: var(--primary-light); }
}

/* =====================================================================
   CHUYỂN TIẾP TIN (màn nhỏ; desktop ở foxia-theme.css mục 13)
   - Modal Chuyển tiếp dùng chung khung toàn màn hình + hàng chọn 56px của modal Tạo nhóm (.zc-modal, .zc-pick-*).
   - Dòng kênh / lý do chữ 13px; lý do xuống dòng đủ chữ.
   - Điện thoại: dải lỗi lề 16px như thân modal, nút "Bỏ chọn" cao 36px.
   ===================================================================== */
@media (max-width: 1023px) {
  .msg-fwd-row .zc-main > small { font-size: 13px; }
  .msg-fwd-err { font-size: 14px; }
}
@media (max-width: 1023px) and (hover: none) {
  .zc-pick-row.msg-fwd-row:active:not(.off) { background: var(--primary-light); }
}
@media (max-width: 767px) {
  .msg-fwd-err { margin: 0 16px 8px; }
  .msg-fwd-err > .btn { height: 36px; margin-top: -8px; margin-bottom: -8px; }
}

/* =====================================================================
   THẺ ĐƠN AI (màn nhỏ; desktop ở foxia-theme.css mục 15)
   - Điện thoại: thẻ ≤ 420px căn giữa ở đỉnh màn như toast tin đến; đang trong hội thoại → nằm DƯỚI header chat (64px),
     không che nút Back / Gọi / CRM. Cả cụm ≈ 62% vùng nhìn thấy (--app-h): thân thẻ ≤ 47% màn trừ đầu / chân thẻ, khung
     đơn cũ ≤ 15% (1–2 dòng, cuộn) → tên khách, số tiền, nút Xem luôn thấy; phần dưới màn (danh sách, ô soạn tin, thanh
     tab) vẫn dùng được. Bàn phím ảo bật → thanh mảnh .fx-oa-slim (OrderAlerts.js) thay thẻ.
   - Tablet: góc phải trên, dưới header chat như toast tin đến (top 72px, rộng ≤ 400px); trần thân thẻ như desktop.
   - Màn rất thấp (≤ 520px, xoay ngang): cả cụm cuộn trong phần màn dưới đỉnh thẻ.
   - Giữ z-index 895 của desktop: dưới nền mờ 900 / drawer · sheet 910 / softphone 950 / modal 1000 → mở lớp nào cũng phủ
     lên thẻ (thẻ không che nút đóng của sheet / drawer).
   - Vùng chạm ≥ 44px: nút Xem 48px, dòng đơn cũ 48px, nút chuông 36px; chữ 14px.
   ===================================================================== */
@media (max-width: 767px) {
  .fx-oa {
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: max(8px, env(safe-area-inset-left, 0px), calc(50% - 210px));
    right: max(8px, env(safe-area-inset-right, 0px), calc(50% - 210px));
    width: auto;
    max-width: none;
  }
  .fx-shell.m-in-chat ~ .fx-oa {
    top: calc(64px + env(safe-area-inset-top, 0px));
  }
  .fx-oa-body { max-height: max(56px, calc(var(--app-h, 100dvh) * 0.47 - 246px)); }
  .fx-oa-more { max-height: calc(var(--app-h, 100dvh) * 0.15); }
  .fx-oa-title b { font-size: 15px; line-height: 20px; }
  .fx-oa-chime { height: 36px; }
  .fx-oa-fold { width: 36px; height: 36px; }
  .fx-oa-cust, .fx-oa-items, .fx-oa-money, .fx-oa-summary, .fx-oa-row { font-size: 14px; }
  .fx-oa-view { min-height: 48px; font-size: 16px; }
  .fx-oa-row { min-height: 48px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fx-oa {
    top: calc(72px + env(safe-area-inset-top, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    width: 400px;
    max-width: calc(100vw - 32px);
  }
  .fx-oa-chime { height: 36px; }
  .fx-oa-fold { width: 36px; height: 36px; }
  .fx-oa-view { min-height: 48px; }
  .fx-oa-row { min-height: 48px; }
}
/* Màn rất thấp: khung cuộn cả cụm (đã bật ở foxia-theme.css) cao bằng phần màn dưới đỉnh thẻ của từng cỡ màn */
@media (max-width: 767px) and (max-height: 520px) {
  .fx-oa { max-height: calc(var(--app-h, 100dvh) - 16px - env(safe-area-inset-top, 0px)); }
  .fx-shell.m-in-chat ~ .fx-oa { max-height: calc(var(--app-h, 100dvh) - 72px - env(safe-area-inset-top, 0px)); }
}
@media (min-width: 768px) and (max-width: 1023px) and (max-height: 520px) {
  .fx-oa { max-height: calc(var(--app-h, 100dvh) - 80px - env(safe-area-inset-top, 0px)); }
}
@media (max-width: 1023px) and (hover: none) {
  .fx-oa-chime:hover, .fx-oa-row:hover, .fx-oa-fold:hover { background: #fff; }
  .fx-oa-mini-main:hover { background: transparent; }
  .fx-oa-chime:active, .fx-oa-row:active, .fx-oa-slim:active, .fx-oa-fold:active, .fx-oa-mini-main:active { background: #ffedd5; }
  .fx-oa-view:hover { border-color: #16a34a; background: #16a34a; }
  .fx-oa-view:active { border-color: #15803d; background: #15803d; }
}