/* ============================================================================ responsive.css — LỚP RESPONSIVE TOÀN APP (nạp CUỐI cùng trong ) ---------------------------------------------------------------------------- Vì sao 1 file riêng thay vì sửa rải rác 15 file CSS cũ: - App có 16 file CSS + nhiều phiên Claude sửa song song → sửa rải rác dễ stomp. - Nạp cuối → thắng cascade ở specificity ngang nhau, không cần !important tràn lan. - Gỡ file này ra là app trở lại y hệt trạng thái cũ (rollback 1 dòng). Bậc gãy (theo chuẩn sm/md/lg/xl): <= 1280px laptop nhỏ — bóp padding, lưới >=5 cột về 3 <= 1024px tablet ngang — lưới >=4 cột về 2, bảng cuộn trong khung <= 900px tablet dọc / điện thoại lớn — SIDEBAR THÀNH NGĂN KÉO + nút ☰ <= 640px điện thoại — mọi lưới về 1 cột, modal toàn màn, chạm 44px <= 400px điện thoại nhỏ — bóp thêm 1 nấc LƯU Ý desktop: KHÔNG có rule nào nằm ngoài @media → desktop >1280px giữ nguyên 100% giao diện cũ, trừ 3 rule nền tảng ngay dưới (chỉ chống tràn + chống iOS tự phóng chữ, không đổi hình). ============================================================================ */ /* ─── Nền tảng: áp mọi kích thước, không đổi bố cục desktop ─────────────── */ html { -webkit-text-size-adjust: 100%; /* iOS Safari tự phóng chữ khi xoay ngang → tắt */ text-size-adjust: 100%; } /* Ảnh/video không được đẩy trang rộng hơn màn hình. CỐ Ý không đụng canvas/svg: biểu đồ Chart.js tự quản kích thước, ép max-width vào đó là bóp méo chart — đó là lõi của app. */ img, video { max-width: 100%; } /* ⚠ RULE DUY NHẤT CÓ ĐỔI DESKTOP — sửa lỗi CÓ SẴN, không phải do lớp này gây ra. 5 tab dưới dùng lề âm ngang để nền màu tràn sát mép. Giá trị -32px được viết khi `main` còn `padding: 24px 32px`; sau đó styles.css đè `main` xuống `padding-left/right: 18px !important` mà lề âm không đổi theo → mỗi bên thừa 14px, trang tràn ngang 1439px trong khung 1425px (đo ở 1440px). Đặt lề âm ĐÚNG BẰNG padding của main để nền vẫn tràn sát mép mà không lố. */ #tab-dashboard, #tab-funnel, #tab-team-mien-nam, #tab-team-bac-trung, #tab-daily { margin-left: -18px !important; margin-right: -18px !important; } /* ============================================================================ 1280px — LAPTOP NHỎ (13" 1280x800, cửa sổ chia đôi màn 2560) ============================================================================ */ @media (max-width: 1280px) { main { padding-left: 14px !important; padding-right: 14px !important; } .app-header { padding: 12px 18px; } .tab-nav { padding: 0 18px; } /* Lưới >= 5 cột: về 3 cột */ .rsp-g5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Bàn làm việc: hàng "CT Đề xuất | Outlet đang phụ trách" là 2 BẢNG nhiều cột (8 và 6 cột) nằm cạnh nhau. Đo ở harness: dưới 1280px mỗi bảng còn <560px, ô bắt đầu xuống dòng (dòng Outlet phình 46px → 62px → 108px) → xếp DỌC, mỗi bảng full width. Các .blv-dash khác (Thống kê | Dự báo) là card thường, vẫn 2 cột tới bậc 640px. */ #blv-ctdx-row { grid-template-columns: minmax(0, 1fr) !important; } /* main vừa bóp còn 14px → lề âm tràn-nền phải theo cho khớp (xem chú thích đầu file) */ #tab-dashboard, #tab-funnel, #tab-team-mien-nam, #tab-team-bac-trung, #tab-daily { margin-left: -14px !important; margin-right: -14px !important; } /* ── Thanh tab: CUỘN NGANG có nam châm, không tràn ra ngoài trang ────── .tab-nav là flex KHÔNG wrap → 10 tab ở 1024px đẩy cả trang rộng ra (đo được: tab cuối chạm 1110px trong khung 1006px). Cho cuộn trong chính nó. Khi tab vừa đủ chỗ (desktop rộng) rule này không đổi hình gì. */ .tab-nav, .rtm-tabbar, .rtm-subtabbar, #workspace-marketing-os .mkt-tabs, #workspace-library .lib-tabnav, #workspace-app-manager .tab-bar { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; } .tab-nav::-webkit-scrollbar, .rtm-tabbar::-webkit-scrollbar, .rtm-subtabbar::-webkit-scrollbar, #workspace-marketing-os .mkt-tabs::-webkit-scrollbar, #workspace-library .lib-tabnav::-webkit-scrollbar, #workspace-app-manager .tab-bar::-webkit-scrollbar { display: none; } .tab-btn { flex: 0 0 auto; scroll-snap-align: start; } } /* ============================================================================ 1024px — TABLET NGANG (iPad 1024/1180, Surface) ============================================================================ */ @media (max-width: 1024px) { /* ── Lưới >= 4 cột → 2 cột ───────────────────────────────────────────── */ #workspace-app-manager .metrics-grid.cols-4, #workspace-app-manager .metrics-grid.cols-5, #workspace-app-manager .cycle-cards, #workspace-app-manager .kanban-board, #workspace-app-manager .activity-stats, .am-task, .am-attrow, .am-rec, .am-commit-head, .cp-fc-input-grid-4, .cp-md-overdue-groups, .plan-week-grid, .plan-sl-grid, #tab-dashboard .kpi-row, .dv2-rkrow, #workspace-library .lib-kpis, #workspace-library .lib-linkform, #workspace-marketing-os .mkt-filters, #workspace-marketing-os .mkt-flow, #workspace-marketing-os .mkt-brand-metrics, #workspace-marketing-os .mkt-people, #workspace-marketing-os .mkt-okr-kpis, #workspace-marketing-os .mkt-mini-cards, .rtm-cards-4, .rtm-comprow, .wh-kpi-grid, /* CSS do JS chèn (xem chú thích ở bậc 900px) */ .ctp-kpis, .tr-kpis, .rsp-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* ── Bảng: cuộn ngang TRONG khung của nó, không kéo cả trang ────────── App đặt tên khung nhất quán *-table-wrap / *-wrap / *-scroll → bắt bằng attribute selector, khỏi phải liệt kê 40 class. */ [class*="table-wrap"], [class*="tbl-wrap"], [class*="pivot-wrap"], [class*="gridwrap"], [class*="board-wrap"], .plan-stage-card-body, .modal-body, .am-modal-body, .wh-scroll, .kpi-newoutlet-scroll, .kpi-combined, .po-gridwrap, .rtm-table-wrap, .tos-table-wrap, .tl-table-wrap, .am-gantt, .am-kanban, .mkt-kboard, #workspace-marketing-os .mkt-kanban { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Khung bảng đang giới hạn max-height theo 100vh: đổi sang dvh (thanh địa chỉ Safari/Chrome mobile co giãn → 100vh nhảy layout) */ .funnel-table-wrap, .cr-ta-wrap, .cr-bp-pivot-wrap, .crc-ta-wrap, .crc-bp-pivot-wrap { max-height: calc(100dvh - 210px); } .wh-scroll { max-height: calc(100dvh - 300px); } .cp-template-v2 { max-height: calc(100dvh - 220px); } #workspace-app-manager { height: auto; min-height: 100dvh; } #workspace-commercial-plan { min-height: 100dvh; } body { min-height: 100dvh; } /* Bảng nằm trực tiếp trong tab (không có khung bọc) → tự cuộn ngang. Chỉ direct child nên không đụng bảng đã có khung (giữ sticky thead). */ .tab-content > table, [id^="workspace-"] > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } } /* ============================================================================ 900px — TABLET DỌC / ĐIỆN THOẠI LỚN: SIDEBAR THÀNH NGĂN KÉO ---------------------------------------------------------------------------- Vấn đề gốc: rail trái chỉ bung bằng mouseenter (app-launcher.js) và nút ☰ bị `display:none !important` trong app-tabrail.css → màn hình cảm ứng KHÔNG có cách nào mở menu. Ở đây rail được kéo hẳn ra khỏi màn, mở bằng nút ☰ do responsive-nav.js chèn vào. ============================================================================ */ @media (max-width: 900px) { /* Nội dung chiếm trọn bề ngang — sidebar không còn ăn margin */ body, body.ws-sidebar-collapsed, body.ws-sidebar-collapsed.ws-rail-hover { margin-left: 0 !important; } /* Rail trượt ra ngoài màn; mở ra thì trượt vào, ĐÈ lên nội dung (không đẩy) */ .app-sidebar, body.ws-sidebar-collapsed .app-sidebar, body.ws-sidebar-collapsed.ws-rail-hover .app-sidebar { width: min(84vw, 300px) !important; transform: translateX(-100%); transition: transform .22s ease; z-index: 900; } body.rsp-nav-open .app-sidebar { transform: translateX(0); } /* Trong ngăn kéo luôn hiện ĐẦY ĐỦ nhãn. sidebar.css @768 ẩn .sidebar-label bằng opacity:0 KHÔNG kèm class nào → phải đè thẳng, không chỉ đè bản .ws-sidebar-collapsed. Thiếu dòng này thì ngăn kéo mở ra chỉ thấy icon, đúng lỗi cũ chỉ đổi chỗ. */ .sidebar-label, .sidebar-brand, .sidebar-footer, body.ws-sidebar-collapsed .sidebar-label, body.ws-sidebar-collapsed .sidebar-brand, body.ws-sidebar-collapsed .sidebar-footer, body.ws-sidebar-collapsed .account-info, body.ws-sidebar-collapsed .account-caret { opacity: 1 !important; } body.ws-sidebar-collapsed .account-info { display: flex !important; } body.ws-sidebar-collapsed .account-caret { display: inline !important; } body.ws-sidebar-collapsed .wtr-app-nm, body.ws-sidebar-collapsed .wtr-lb { display: inline !important; } body.ws-sidebar-collapsed .wtr-domhd, body.ws-sidebar-collapsed .wtr-grouphd { display: block !important; } body.ws-sidebar-collapsed .wtr-star { display: inline-flex !important; } body.ws-sidebar-collapsed .wtr-item, body.ws-sidebar-collapsed .wtr-app { justify-content: flex-start !important; padding-left: 15px !important; padding-right: 15px !important; } body.ws-sidebar-collapsed .sidebar-account { padding-left: 12px !important; padding-right: 12px !important; } body.ws-sidebar-collapsed .account-trigger { padding-left: 10px !important; padding-right: 10px !important; justify-content: flex-start !important; } body.ws-sidebar-collapsed #bugrep-fab.bugrep-side { width: calc(100% - 16px) !important; margin: 0 8px 8px !important; padding: 9px 12px !important; } /* Mục trong rail đủ cao để chạm (WCAG target size) */ .sidebar-item, .wtr-item, .wtr-dom, .account-trigger { min-height: 44px; } /* Ngăn kéo MỞ: chừa chỗ ở đầu ngăn kéo cho nút X. Nút neo cứng góc trái-trên màn hình, mà ngăn kéo cũng bắt đầu từ đúng đó -> X đè lên nút "Tất cả ứng dụng". Đẩy header ngăn kéo sang phải đúng bề rộng nút để X, nút lưới và chữ "Magnolia" thành 3 ô thẳng hàng. CỐ Ý không dời nút sang phải: ở màn 360px nó sẽ đụng nút đỏ "Báo lỗi" đang nổi sẵn ở góc phải-trên (#bugrep-float, nằm ở top layer nên luôn phủ trên). */ body.rsp-nav-open .sidebar-header { padding-left: 60px; } /* Nút ☰ + nền mờ do responsive-nav.js chèn */ .rsp-navbtn { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: calc(env(safe-area-inset-left, 0px) + 8px); width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 11px; background: #1f2937; color: #fff; font-size: 19px; line-height: 1; cursor: pointer; z-index: 901; box-shadow: 0 3px 12px rgba(15, 23, 42, .3); } .rsp-navbtn:active { transform: scale(.96); } .rsp-scrim { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .48); opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 899; } body.rsp-nav-open .rsp-scrim { opacity: 1; pointer-events: auto; } body.rsp-nav-open { overflow: hidden; } .tab-nav { padding-left: 12px; } /* ── Header: xếp dọc, chừa 62px trái cho nút ☰, nhóm nút xuống hàng ──── */ .app-header { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px 12px 62px; } .app-header h1 { font-size: 16px; } .logo { width: 38px; height: 38px; font-size: 24px; } .controls { width: 100%; } .controls select, .controls button { flex: 1 1 auto; min-height: 40px; } /* Tab (đã cuộn ngang từ bậc 1280) — nới cho vừa ngón tay */ .tab-btn { padding: 12px 16px; font-size: 13px; min-height: 44px; } /* Khung bảng giới hạn theo chiều cao: nới ra vì header đã cao hơn */ .funnel-table-wrap, .cr-ta-wrap, .cr-bp-pivot-wrap, .crc-ta-wrap, .crc-bp-pivot-wrap { max-height: calc(100dvh - 260px); } /* ══ CSS DO JS CHÈN ══════════════════════════════════════════════════ 24 file JS tự chèn