/* ============================================================ BỐ CỤC TRANG — viết lại MOBILE-FIRST (Đợt 1 thiết kế lại, 30/08/2026, anh Tiền duyệt). LUẬT CỦA FILE NÀY: đây là NƠI DUY NHẤT định nghĩa bố cục trang. Mỗi trang một class gốc — .page-desk (/quantrivanhanh) · .page-today (/operation/today) — để hai trang không còn giành nhau .one-page bằng !important (nguyên nhân vụ "mất ô chat" 30/08: BA đời bố cục cùng sống trong components.css). Muốn đổi bố cục: sửa Ở ĐÂY, không vá chỗ khác. ============================================================ */ .one-page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); } .operating-page { min-height: 100vh; } /* ---------- Context header (mục 03, 12) — dùng chung mọi trang ---------- */ /* 31/08/2026 (anh Tiền: "thiết kế cân đối cái này nhìn mất thẩm mỹ") — ĐÂY LÀ GỐC RỄ. Trước: display:flex hàng NGANG. Nhưng các con của nó (hàng chính, dải chữ) được viết như những TẦNG xếp dọc, nên chúng bị dàn ngang cạnh nhau: câu "TẬP TRUNG · KỶ LUẬT" trôi ra một bên, thương hiệu bị đẩy vào giữa, cụm nút dồn cục bên phải. Đó chính là cái lệch anh Tiền nhìn thấy — không phải do màu hay cỡ chữ. Nay: cột dọc. Padding chuyển vào từng tầng (xem khối chuẩn ở components.css) để mỗi tầng tự lo khoảng đệm của mình. */ .context-header { display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--card); border-bottom: 1px solid var(--line); padding: 0; position: sticky; top: 0; z-index: 10; } .ch-brand { display: flex; align-items: center; gap: 10px; } .ch-logo { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; } .ch-name { font-weight: 700; font-size: 14px; } .ch-sub { font-size: 11px; color: var(--ink-soft); } .ch-identity { display: flex; align-items: center; gap: 10px; } .ch-user { display: flex; align-items: center; gap: 8px; } .user-avatar-sm { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; } .ch-user-name { font-size: 13px; font-weight: 650; } .ch-user-role { font-size: 11px; color: var(--ink-soft); } .ch-tenant { font-size: 11px; color: var(--ink-soft); font-family: ui-monospace, monospace; } .ch-actions { display: flex; align-items: center; gap: 10px; } .ch-icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 15px; cursor: pointer; display: grid; place-items: center; } .btn-setup { background: var(--action); color: #fff; border-color: var(--action); font-size: 12px; } @media (max-width: 480px) { .ch-sub, .ch-tenant { display: none; } .btn-setup { font-size: 11px; padding: 6px 10px; } } /* ============================================================ TRANG BÀN QUẢN TRỊ — .page-desk (/quantrivanhanh) Mobile-first: xếp dọc, chat nổi dính đáy (luôn thấy, bấm là gõ được). Tablet + desktop: 2 cột 50/50 ("khung chat to" đã chốt), khoá đúng chiều cao màn hình, cột dữ liệu tự cuộn bên trong, ô nhập tin không bao giờ bị đẩy mất. ============================================================ */ .page-desk .one-page-body { display: grid; grid-template-columns: 1fr; flex: 1; min-height: 0; } .page-desk .data-col { padding: 14px; min-width: 0; padding-bottom: 56vh; /* chừa chỗ chat nổi */ } .page-desk .comm-col { position: sticky; bottom: 0; z-index: 20; max-height: 55vh; background: var(--card); border-top: 2px solid var(--brand); box-shadow: 0 -4px 14px rgba(45, 22, 28, 0.12); display: flex; flex-direction: column; min-height: 0; } @media (min-width: 601px) { .page-desk { height: 100dvh; overflow: hidden; } /* 01/09/2026 — anh Tiền: "cửa sổ vận hành: 40% giành cho TRAO ĐỔI, 2 bên cuộn độc lập, vừa khuôn hình". Trước là 1fr 2fr (khung chat to 67%). Nay: VẬN HÀNH 60% · TRAO ĐỔI 40% (3fr 2fr). Khoá đúng màn hình (100dvh, overflow hidden — không cuộn trang); mỗi cột tự cuộn BÊN TRONG: cột dữ liệu (.data-col overflow-y:auto) và khung chat (.chat-list overflow-y: auto) — cuộn bên này KHÔNG ảnh hưởng ô chat bên kia. */ .page-desk .one-page-body { grid-template-columns: 3fr 2fr; padding-bottom: 56px; } .page-desk .data-col { overflow-y: auto; max-height: none; height: 100%; padding: 14px 18px 40px; scrollbar-gutter: stable; } .page-desk .comm-col { position: static; max-height: none; box-shadow: none; border-top: 0; border-left: 1px solid var(--line); overflow: hidden; min-height: 0; } .page-desk .comm-zone { height: 100%; min-height: 0; } } /* TẮT Ô CHAT TOÀN CỤC trên .page-desk (NK-278, 06/09/2026) — .khong-chat gắn ngay trên gốc .page-desk (shell.js), cùng cấp nên không cần :has(). Khoá 100dvh/overflow:hidden + padding-bottom:56vh chỉ để dành chỗ ô chat nổi (mobile) hoặc cuộn riêng (desktop) — hết chat thì bỏ khoá, để trang chảy tự nhiên, cột dữ liệu chiếm trọn bề ngang. */ .page-desk.khong-chat .data-col { padding-bottom: 14px; } @media (min-width: 601px) { .page-desk.khong-chat { height: auto; overflow: visible; } .page-desk.khong-chat .one-page-body { grid-template-columns: 1fr; padding-bottom: 0; } .page-desk.khong-chat .data-col { overflow-y: visible; height: auto; } /* Đợt 1 thiết kế lại "bàn không chat" (NK-280, 06/09) — màn rộng (>1400px, máy bàn/màn ngoài) không để nội dung kéo dài hết mép, đọc mỏi mắt; giữa 900-1400px vẫn full width (đa số máy tính thật). .card-grid vẫn auto-fill nên bề rộng cho phép tới đâu, thêm cột thẻ tới đó — không đổi số cột cứng. */ .page-desk.khong-chat .data-zone { max-width: 1400px; margin: 0 auto; width: 100%; } } /* ---------- CỘT ĐỌC TRONG KHUNG CHAT (01/09/2026, NK-101) ---------- Anh Tiền: "sửa lại thiết kế giao diện khung chat cho cân đối". ĐO THẬT trên bản đang chạy, không sửa theo cảm giác: chữ của Kathy trải 104 KÝ TỰ một dòng (cột chữ 730px, mỗi ký tự văn xuôi tiếng Việt trung bình 7,03px). Mắt đọc thoải mái ở 45–75; dài hơn thì đọc hết dòng bị trượt hàng khi quay về đầu dòng sau. Đó chính là chỗ nhìn thấy "không cân đối" — không phải màu, không phải khoảng cách. KHÔNG thu nhỏ khung chat: anh đã chốt "khung chat to" nên lưới 1fr 2fr giữ nguyên. Chỉ ghim CỘT CHỮ bên trong rồi căn giữa, hai bên thừa đều nhau. Ghim CẢ ô nhập, hàng gợi ý, thanh ngữ cảnh và dòng trạng thái vào đúng cột đó — nếu chỉ thu chữ mà để ô nhập trải hết bề ngang thì lại lệch sang kiểu khác. Vì sao 58ch: đơn vị ch đo theo bề ngang chữ số "0", rộng hơn ký tự văn xuôi tiếng Việt ~30%. ĐO LẠI SAU KHI ÁP: cột ra 548px = 78 ký tự/dòng (trước là 104). Nhỉnh hơn mốc 75 một chút nhưng vẫn trong khoảng đọc tốt; ghi đúng số đã đo chứ không ghi số dự tính. */ @media (min-width: 601px) { .page-desk .comm-zone .chat-list > *, .page-desk .comm-zone .ctx-bar, .page-desk .comm-zone .goi-y-row, .page-desk .comm-zone .tep-chip-row, .page-desk .comm-zone .chat-form, .page-desk .comm-zone .chat-trace { width: 100%; max-width: 58ch; margin-left: auto; margin-right: auto; } } /* ============================================================ TRANG HÔM NAY — .page-today (/operation/today) Trang chảy tự nhiên theo tài liệu (KHÔNG khoá viewport — bài học "mất ô chat"). Mobile: mục tiêu → việc → kết quả → trao đổi (thứ tự anh Tiền chốt 29/08). ≥1024px: 3 cột KẾT QUẢ · VIỆC · BÀN LÀM VIỆC 50% (2fr:4fr:6fr), Kathy dính theo màn (31/08: bàn làm việc chiếm 50%). ============================================================ */ .page-today { height: auto; min-height: 100dvh; overflow: visible; } .today-layout { display: grid; grid-template-areas: "muctieu" "viec" "ketqua" "kathy"; gap: var(--sp-4); } .today-muctieu { grid-area: muctieu; padding-bottom: 4px; border-bottom: 1px solid var(--line); } .today-ketqua { grid-area: ketqua; min-width: 0; } .today-viec { grid-area: viec; min-width: 0; } .today-kathy { grid-area: kathy; } /* Ô chat mọi cỡ màn: khung tin cuộn riêng, ô nhập không bao giờ bị đẩy mất. */ .today-kathy .comm-zone { display: flex; flex-direction: column; height: 100%; } .today-kathy .chat-list { flex: 1; min-height: 0; overflow-y: auto; max-height: 46vh; } /* TRANG CHỦ TỊCH (30/08): 2 cột — ĐÀI CHỈ HUY + BÀN LÀM VIỆC 50/50 (31/08 chốt). Không cột KẾT QUẢ/CAM KẾT, không lịch giao hàng — đồ tác nghiệp thuộc trang nhân sự. */ .today-layout--chutich { grid-template-areas: "viec" "kathy"; } @media (min-width: 900px) { .today-layout { grid-template-columns: 1fr 1fr 4fr; grid-template-areas: "muctieu muctieu muctieu" "ketqua viec kathy"; align-items: start; } .today-layout--chutich { grid-template-columns: 1fr 2fr; grid-template-areas: "viec kathy"; } /* DÍNH THEO MÀN — trả lời thẳng "mất ô chat": cột phải cao bằng cửa sổ và trượt theo khi cuộn. 30/08: trừ thêm 62px header dính phía trên — không trừ thì cột tràn ~60px, ô nhập + dòng an tâm dưới ô chat tụt khỏi mép màn hình (đo thật: bottom 953 / viewport 892). */ /* 31/08/2026 — TỰ ĐO thay vì con số cứng. Trước: top 74px + trừ 86px, ứng với đầu trang cao 62px của đời cũ. Phiên 33 dựng lại đầu trang thành 95px → cột chat bị đầu trang che mất 21px phía trên và tràn 9px xuống dưới mép màn: đúng lại kiểu lỗi "ô nhập tụt khỏi màn hình" hồi 30/08. Gốc của lỗi là ĐOÁN chiều cao đầu trang trong CSS. Nay context-header.js đo thật rồi ghi vào --cao-dau-trang; đổi đầu trang kiểu gì cũng không lệch nữa. 74px chỉ là mức lùi phòng khi biến chưa kịp đặt. */ .today-kathy { position: sticky; top: calc(var(--cao-dau-trang, 62px) + 12px); height: calc(100dvh - var(--cao-dau-trang, 62px) - 24px); display: flex; flex-direction: column; } .today-kathy .chat-list { max-height: none; } } /* ============================================================ TẮT Ô CHAT TOÀN CỤC — .khong-chat (NK-278, 06/09/2026, anh Tiền: "bỏ ra khỏi màn hình vận hành"). today.js gắn lớp này lên .today-layout khi TAM_TAT_GIAO_TIEP (comm-zone.js) bật — không dựng .today-kathy nữa nên bỏ luôn vùng "kathy" khỏi lưới, tránh chừa khoảng trống. Cùng cách .embed-chutich đã làm (khoá 100dvh chỉ để dành chỗ chat cuộn riêng — hết chat thì để trang chảy tự nhiên, không khoá chiều cao nữa). */ .today-layout.khong-chat { grid-template-areas: "muctieu" "viec" "ketqua"; } .today-layout.khong-chat.today-layout--chutich { grid-template-areas: "viec"; } @media (min-width: 900px) { .today-layout.khong-chat { grid-template-columns: 1fr 1fr; grid-template-areas: "muctieu muctieu" "ketqua viec"; } .today-layout.khong-chat.today-layout--chutich { grid-template-columns: 1fr; grid-template-areas: "viec"; } } @media (min-width: 900px) { /* :has() thay vì chọn tổ tiên theo lớp con — .khong-chat nằm ở .today-layout (con sâu), không ở .page-today (gốc); dùng :has() để không phải sửa router.v3.js/today.js thêm lần nữa mỗi khi đổi cấu trúc lưới bên trong. */ .page-today:has(.today-layout.khong-chat) { height: auto; overflow: visible; } .page-today:has(.today-layout.khong-chat) .today-page { height: auto; flex: none; } .today-layout.khong-chat { height: auto; overflow: visible; padding-bottom: 0; grid-template-rows: auto; align-items: start; } .today-layout.khong-chat .today-ketqua, .today-layout.khong-chat .today-viec { overflow: visible; } } /* ============================================================ CỬA SỔ VẬN HÀNH 01/09/2026 (anh Tiền: "40% giành cho TRAO ĐỔI, 2 bên cuộn độc lập, vừa khuôn hình"). ≥1024px: khoá đúng 100dvh — KHÔNG cuộn trang; cột dữ liệu (KẾT QUẢ/VIỆC) tự cuộn bên trong, ô chat tự cuộn bên trong — cuộn bên này KHÔNG ảnh hưởng ô chat bên kia. TRAO ĐỔI = 40% (lưới 3 : 3 : 4; Chủ tịch 3 : 2). ============================================================ */ @media (min-width: 900px) { .page-today { height: 100dvh; overflow: hidden; } /* QUAN TRỌNG (đo thật 01/09): .today-page phải giữ là BLOCK (không đổi thành flex) + bỏ margin:0 auto — auto-margin theo trục ngang trong flex làm cột tự thu về fit-content (layout co 1256→625px khi kéo vách). margin 0 12px + align stretch → cột tràn đúng khuôn hình. */ /* .page-today = flex cột: header + .today-page — .today-page phải flex:1 (chiếm PHẦN CÒN LẠI sau header) + min-height:0, KHÔNG height:100% (nếu 100% thì cột chat dài hơn khuôn hình 1 đầu trang → ô nhập tụt mất). */ .one-page.page-today .today-page { max-width: none; flex: 1 1 auto; min-height: 0; height: auto; margin: 0 12px; padding: 12px 12px 8px; } .one-page.page-today .today-layout { height: 100%; min-height: 0; align-items: stretch; grid-template-columns: 3fr 3fr 4fr; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; padding-bottom: 0; } .one-page.page-today .today-layout--chutich { grid-template-columns: 3fr 2fr; grid-template-rows: minmax(0, 1fr); grid-template-areas: "viec kathy"; } /* 07/09 (anh Tiền: "thiết kế đủ màn hình") — TẮT CHAT THÌ PHẢI BỎ CẢ CỘT, KHÔNG CHỈ BỎ VÙNG. Đo thật bằng trình duyệt trên khung 1276px: grid-template-columns tính ra BA cột (359 · 359 · 478px) trong khi grid-template-areas chỉ tính ra HAI ("muctieu muctieu" / "ketqua viec") → cột thứ ba 478px = 39% bề ngang bị chừa trống, không gì đặt vào. Vì sao: hai dòng ngay trên đây là (0,3,0) nên thắng .today-layout.khong-chat (0,2,0) ở phần COLUMNS; còn phần AREAS thì .khong-chat thắng vì hai dòng trên không khai areas. Nửa thắng nửa thua trên cùng một cái lưới — đó là chỗ đẻ ra khoảng trắng. Nay khai lại columns ở đúng tầng (0,4,0)/(0,5,0) để hai phần nói cùng một chuyện. */ .one-page.page-today .today-layout.khong-chat { grid-template-columns: 1fr 1fr; } .one-page.page-today .today-layout.khong-chat.today-layout--chutich { grid-template-columns: 1fr; } .one-page.page-today .today-ketqua, .one-page.page-today .today-viec { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } /* (0-3-0) thắng components.css .page-today .today-kathy (0-2-0 — nạp SAU layout.css): sticky + top 74px + calc() là thủ phạm "ô chat tụt khỏi khuôn hình" — kathy cao ĐÚNG bằng hàng lưới, không lệch, không tràn. */ .one-page.page-today .today-kathy { position: relative; top: auto; height: 100%; min-height: 0; } .one-page.page-today .today-kathy .comm-zone { height: 100%; min-height: 0; } .one-page.page-today .today-kathy .chat-list { max-height: none; } /* VÁCH KÉO tỉ lệ (today.js gắn): kéo đổi % trao đổi/vận hành · đúp về mặc định 40% */ .cf-resizer { position: absolute; left: -7px; top: 0; bottom: 0; width: 14px; cursor: col-resize; z-index: 40; touch-action: none; } .cf-resizer::after { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--line); border-radius: 2px; transition: background .15s; } .cf-resizer:hover::after, .cf-resizer.dragging::after { background: var(--brand); } body.cf-resizing, body.cf-resizing * { cursor: col-resize !important; user-select: none !important; } } /* ============================================================ MOBILE NÂNG CẤP (01/09/2026, anh Tiền: "thống nhất cho mọi user + tối ưu hoá mobile"). (0-3-0) thắng components.css (0-2-0). - Tay nắm ngăn kéo chat to hơn (56px, vạch 44×5) — chạm dễ - Safe-Area iPhone: không bị cạnh đáy che ô nhập (env safe-area) - Ô nhập 16px: iOS KHÔNG tự zoom khi bấm vào - Hàng gợi ý cho phép xuống dòng (màn 390px không tràn) ============================================================ */ @media (max-width: 899px) { /* Đầu trang gọn 1 dòng trên điện thoại: ẩn dải slogan (đang wrap 4 dòng làm header cao ~40% màn), giữ thương hiệu + người dùng + nút. */ .one-page .context-header .ch-band { display: none; } /* dải TẬP TRUNG · KỶ LUẬT — 1 hàng chính cho đỡ cao */ .one-page .context-header { padding: 8px 12px; gap: 2px; } .one-page .context-header .ch-brand { min-width: 0; } .one-page .context-header .ch-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .one-page .context-header .ch-identity { min-width: 0; } .one-page .context-header .ch-user-role { white-space: nowrap; } .one-page .context-header .btn-setup, .one-page .context-header .ch-icon-btn { min-height: 40px; min-width: 40px; } /* Ngăn kéo chat mobile: an toàn trên iPhone (safe-area), tay nắm to, ô nhập 16px không bị iOS zoom khi focus */ .one-page.page-today .today-kathy { padding-bottom: env(safe-area-inset-bottom, 0px); } .one-page.page-today .today-kathy .zone-head { min-height: 56px; } .one-page.page-today .today-kathy .zone-head::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 999px; background: #8a8a92; } .one-page.page-today .today-kathy .chat-form { padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); } .one-page.page-today .today-kathy .chat-input { font-size: 16px; } .one-page.page-today .today-kathy .goi-y-row { flex-wrap: wrap; } } /* ---------- Khu dữ liệu dùng chung ---------- */ .zone-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-4); } .zone-head h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .04em; } .zone-sub { font-size: 12px; color: var(--ink-soft); } .data-zone { display: flex; flex-direction: column; gap: 14px; } .data-section { margin-bottom: 4px; } .section-title { margin: 10px 0 8px; } .card-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 601px) { .card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } } .card-grid-item { min-width: 0; } .card-grid-item.ctx-active .card { outline: 3px solid var(--action); outline-offset: 1px; box-shadow: 0 0 0 4px var(--action-soft); } /* Stats / owner business */ .stats-row { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; } @media (min-width: 601px) { .stats-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; } .stat-label { font-size: 11px; color: var(--ink-soft); } .stat-value { font-size: 17px; font-weight: 750; margin: 2px 0; } .stat-trend { font-size: 11px; color: var(--ok); } .owner-cols { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; } @media (min-width: 861px) { .owner-cols { grid-template-columns: 1fr 2fr; } } .plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .risk-li { color: var(--danger); } /* ---------- Setup workspace ---------- */ .setup-workspace { padding: 18px; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .setup-backbar { display: flex; align-items: center; gap: 10px; } .setup-progress { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; } .setup-progress-head { display: flex; justify-content: space-between; align-items: center; } .progress-pct { font-weight: 750; font-size: 16px; color: var(--action); } .progress-bar { height: 8px; background: #ececec; border-radius: 999px; margin: 8px 0 12px; overflow: hidden; } .progress-fill { height: 100%; background: var(--action); border-radius: 999px; } .setup-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .setup-step { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; background: #fafafa; } .setup-step.current { border-color: var(--action); background: var(--action-soft); } .step-no { font-weight: 750; color: var(--action); } .step-label { flex: 1; } .setup-step-page { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } /* ============================================================ NHÚNG CỘT CHỦ TỊCH VÀO CỬA MỚI — .embed-chutich (NK-115, anh Tiền chọn cách 1, 02/09/2026) Cửa mới kathy.sbhtailor.vn/ (kathy-core) nhúng portal qua