/* PCG — Báo cáo tuần · 2 giao diện: Đỏ (mặc định) + Professional (html[data-theme="navy"]). --brand = màu thương hiệu · --danger = màu cảnh báo (giữ đỏ ở cả 2 theme) · --success = xanh lá. --red/--green giữ lại làm bí danh để tương thích code cũ (trỏ vào --brand/--success). */ :root { --brand: #EC1F27; --danger: #EC1F27; --success: #006837; --th-bg: #006837; --link: #006837; --bg: #fafafa; --warn: #e6a700; --red: var(--brand); --green: var(--success); --grey: #f4f4f4; --bd: #ddd; /* STEP-03: primary = màu hành động (nút Lưu…); --line định nghĩa lại (trước chưa có → viền mất); --ink thang chữ. Brand đỏ CHỈ còn là màu cảnh báo/nhận diện. */ --primary: #1F4E79; --primary-ink: #fff; --line: var(--bd); --ink: #17232f; --ink-2: #3b4a58; --ink-3: #6b7a88; /* C8 — hệ thiết kế: nền hành động nhạt (đầu bảng · hover nút thường) + thang chữ 5 bậc, sàn 12px. */ --primary-soft: #eef3f8; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-num: 22px; --dlg-max: 90vh; } html[data-theme="navy"] { --brand: #1F4E79; --danger: #C0392B; --success: #2E7D32; --th-bg: #173A5C; --link: #1F4E79; --bg: #F4F6F9; --warn: #E0A100; --bd: #dfe3e8; --primary: #1F4E79; --primary-ink: #fff; --line: var(--bd); /* ink dùng chung từ :root */ /* C8 fix vòng-1: --primary-soft dùng cho đầu bảng th (sticky) → phải ĐẶC, không rgba, kẻo dòng cuộn qua lộ dưới header dính. Solid tương đương navy .1 trên nền trắng. */ --primary-soft: #dfe7f0; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } body { background: var(--bg); color: #222; font-size: 15px; } header { background: #fff; border-bottom: 3px solid var(--red); padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 50; } header h1 { font-size: 16px; color: var(--red); cursor: pointer; user-select: none; transition: opacity .12s; } header h1:hover { opacity: .78; } header h1 span { color: var(--green); font-weight: 600; font-size: 12px; display: block; } /* C1 — ô chọn Dự án ở header (phạm vi chung {khối, dự án}), song song ô Khối */ #daSelLabel { font-size: 12px; display: inline-flex; align-items: center; } #daSelLabel select { font-size: 12px; max-width: 220px; } .spacer { flex: 1; } select, input, textarea, button { font-size: 13px; padding: 6px 8px; border: 1px solid var(--bd); border-radius: 6px; background: #fff; } button { cursor: pointer; font-weight: 600; } /* C8 — icon SVG đơn sắc. svg.ico (KHÔNG đụng nút .ghost.ico); currentColor ⇒ luôn cùng màu chữ. */ svg.ico { width: 1em; height: 1em; vertical-align: -.15em; flex: none; } /* C8 — BA kiểu nút: .pri (chính, navy) · .ghost (thường, trắng) · .btn-red/.danger (nguy hiểm, đỏ). .grn = BÍ DANH của .pri (hết hai màu "chính"). Kích thước + icon-trong-nút dùng chung cả ba. */ button.pri, button.grn, button.ghost, button.btn-red, button.danger { padding: 6px 12px; border-radius: 6px; font-weight: 500; font-size: var(--fs-sm); /* C8: KHÔNG min-height — nút nhỏ có style inline padding vẫn nhỏ */ display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: filter .12s, background .12s, border-color .12s, color .12s; } button.pri, button.grn { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } button.ghost { background: #fff; color: var(--ink); border-color: var(--line); } button.ghost:hover { background: var(--primary-soft); border-color: var(--primary); } button.pri:disabled, button.grn:disabled, button.ghost:disabled, button.btn-red:disabled, button.danger:disabled { opacity: .5; cursor: not-allowed; } /* nút icon-only trong bảng việc GIỮ nhỏ gọn (đè min-height/padding chung) */ button.ghost.ico { min-height: 0; padding: 4px 7px; font-size: 15px; line-height: 1; gap: 4px; } button.ghost.ico b { font-size: var(--fs-xs); margin-left: 1px; color: var(--ink-2); } /* C8 fix vòng-2: lối MIỄN kích thước cho nút NHỎ NỘI TUYẾN (xoá 🗑 · gỡ ✕ · nút mini float:right) — luật gộp nút áp min-height:32px+inline-flex cho MỌI .pri/.grn/.ghost/.btn-red, làm nút mini phình lên 32px và vỡ dòng. inline style chỉ đè padding, KHÔNG đè min-height. Đặt SAU luật gộp; cùng specificity (button + 1 class) nên thắng theo thứ tự nguồn. Gắn class `btn-xs` vào các nút mini đó. */ button.btn-xs { min-height: 0; padding: 0 6px; font-size: var(--fs-xs); } /* Cột thao tác: icon xếp 2 tầng (lưới 2 cột) cho hẹp lại, nhường chỗ cột báo cáo tuần */ td.acts { white-space: nowrap; } .act-grid { display: inline-grid; grid-template-columns: auto auto; gap: 3px; justify-content: start; } /* Ô "Nội dung báo cáo tuần" trong bảng việc: to, cuộn dọc để coi nhanh nhiều tuần; bấm để nhập báo cáo */ .bc-cell { min-width: 260px; max-width: 460px; max-height: 108px; overflow-y: auto; font-size: 12px; line-height: 1.35; white-space: normal; text-align: left; } .bc-cell.bc-click { cursor: pointer; border-radius: 4px; } .bc-cell.bc-click:hover { background: #f2fbf4; box-shadow: inset 0 0 0 1px #cfe3d4; } .bc-cell::-webkit-scrollbar { width: 7px; } .bc-cell::-webkit-scrollbar-thumb { background: #cfe3d4; border-radius: 4px; } /* C2 — nav 2 tầng: hàng nhóm (đậm, .on nền primary) + hàng lá (nhỏ hơn, .on gạch chân 2px primary). */ nav { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--bd); } .nav-nhom { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .nav-nhom button { border: none; background: none; padding: 9px 16px; border-radius: 8px 8px 0 0; color: var(--ink-2); white-space: nowrap; font-size: var(--fs-md); font-weight: 700; display: inline-flex; align-items: center; gap: 7px; } /* C8 — icon SVG + nhãn */ .nav-nhom button > svg.ico { width: 17px; height: 17px; } .nav-nhom button:hover { background: rgba(31, 78, 121, .08); color: var(--primary); } .nav-nhom button.on, .nav-nhom button.on:hover { background: var(--primary); color: #fff; } .nav-la { display: flex; justify-content: flex-start; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-top: 2px; } /* căn giữa bằng margin auto (mẹo B3): vừa thì giữa, tràn thì cuộn từ lá đầu — không cắt */ .nav-la > button:first-child { margin-left: auto; } .nav-la > button:last-child { margin-right: auto; } .nav-la button { border: none; background: rgba(31, 78, 121, .06); padding: 5px 12px; border-radius: 6px; color: var(--ink-2); white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } /* C8 — icon SVG + nhãn */ .nav-la button > svg.ico { width: 15px; height: 15px; } .nav-la button:hover { background: rgba(31, 78, 121, .12); } .nav-la button.on { background: rgba(31, 78, 121, .08); color: var(--primary); border-radius: 6px 6px 0 0; box-shadow: inset 0 -2px 0 var(--primary); } main { padding: 16px 30px; max-width: 1840px; margin: 0 auto; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; } .card { background: #fff; border: 1px solid var(--bd); border-left: 4px solid var(--green); border-radius: 8px; padding: 10px; } .card b { font-size: 22px; display: block; } .card span { font-size: 12px; color: #666; } .card.warn { border-left-color: #e6a700; } .card.bad { border-left-color: var(--danger); } table { border-collapse: collapse; width: 100%; background: #fff; } /* C8 — bảng DỮ LIỆU (mặc định, cũng là table.dl): đầu bảng xanh-navy NHẠT, chữ đậm; dính khi cuộn. */ th { background: var(--primary-soft); color: var(--ink); font-weight: 600; font-size: var(--fs-xs); padding: 8px 7px; border: 1px solid var(--line); position: sticky; top: 0; z-index: 1; } td { border: 1px solid #e3e3e3; padding: 7px 9px; font-size: var(--fs-sm); vertical-align: top; } tr:hover td { background: #fffbe9; } /* C8 — bảng KHOÁ–GIÁ TRỊ (chi tiết việc · thông tin dự án · trong dialog): th trái, nền trắng, KHÔNG dính. */ table.kv th { background: #fff; color: var(--ink-2); font-weight: 500; text-align: left; position: static; white-space: nowrap; } /* C8 — tín hiệu dòng thứ 3 (ngoài .row-xong xám · .row-tre đỏ): .row-toi = việc CỦA TÔI / đang chọn (vàng nhạt). */ tr.row-toi > td { background: #fff8e1; } tr.row-toi:hover > td { background: #fff2c9; } td a { color: var(--link); text-decoration: none; } td a:hover { text-decoration: underline; } .tag { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 12px; font-weight: 600; } .t-xong { background: #C6EFCE; color: #006837; } .t-lam { background: #FFF2CC; color: #7a5c00; } .t-tre { background: #FFC7CE; color: #9C0006; } .t-dung { background: #D9E1F2; color: #1F4E79; } .t-huy { background: #e9eaec; color: #6b7079; text-decoration: line-through; } .flag-red { color: #c00; font-weight: 700; } .flag-org { color: #c77400; font-weight: 600; } .flag-grn { color: var(--green); } /* C4b — việc đã hủy: cờ xám, gạch nhẹ để phân biệt với "Đã xong" */ .flag-grey { color: #8a8f98; font-weight: 600; } .flag-huy { text-decoration: line-through; text-decoration-color: #c3c7cd; } tr.row-huy > td { background: #f4f5f7; color: #8a8f98; } tr.row-huy > td .celten, tr.row-huy > td b { text-decoration: line-through; text-decoration-color: #c3c7cd; } /* Chip loại yêu cầu ở cột "Cần ý kiến / phê duyệt" */ .yk-badge { display: block; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin: 2px 0; text-align: center; white-space: nowrap; } .yk-badge.yk-cho { background: #FDE9D0; color: #9a4b00; border: 1px solid #f3c48a; } .yk-badge.yk-xong { background: #E6F3EA; color: #006837; border: 1px solid #b9dcc4; } /* C8 fix vòng-2: .wrap là PHẦN TỬ CUỘN THẬT (max-height + overflow) để th sticky top:0 có tác dụng — không có nó thì th dính vào viewport rồi bị header (z-index 50) vẽ đè. Bảng ngắn hơn max-height thì .wrap tự co vừa nội dung, không xuất hiện cuộn. overflow:auto giữ nguyên cuộn NGANG cho bảng rộng. */ .wrap { overflow-x: auto; border: 1px solid var(--bd); border-radius: 8px; background: #fff; } .wrap.co-cuon { max-height: calc(100vh - 220px); overflow: auto; } /* C8: hộp cuộn nội bộ OPT-IN (bảng Nhập việc) để th sticky dính; bảng khác cuộn theo trang như cũ */ .matrix td { text-align: center; min-width: 100px; cursor: pointer; } .matrix td.mred { background: #FFC7CE; } .matrix td.myel { background: #FFF2CC; } .matrix td.mok { background: #C6EFCE; } .matrix td.mnone { color: #bbb; cursor: default; } .matrix .mocname { text-align: left; min-width: 210px; font-weight: 600; cursor: default; } /* margin:auto khôi phục canh giữa của (bị reset "* { margin:0 }" ở trên vô hiệu hoá → cửa sổ dồn góc trên-trái). max-height + inset:0 giữ cửa sổ luôn nằm GIỮA màn hình dù form cao (nội dung bên trong tự cuộn). */ dialog { border: none; border-radius: 14px; padding: 0; max-width: 860px; width: 96%; max-height: var(--dlg-max); margin: auto; inset: 0; box-shadow: 0 10px 44px rgba(0, 0, 0, .28); } dialog.wide { max-width: 960px; } dialog::backdrop { background: rgba(0, 0, 0, .4); animation: dlgBackdropIn .24s ease; } @keyframes dlgBackdropIn { from { background: rgba(0, 0, 0, 0); } to { background: rgba(0, 0, 0, .4); } } @media (prefers-reduced-motion: reduce) { dialog::backdrop { animation: none; } } /* ═══ 🪟 TRÌNH QUẢN LÝ CỬA SỔ (v3.22, Req D) ═══════════════════════════════════════════════════ TGĐ 13/08: mọi cửa sổ chức năng KÉO–THẢ + đổi cỡ; THU NHỎ + mở NHIỀU cửa sổ cùng lúc; FULLSCREEN phóng lớn; 3 nút điều khiển ở GÓC TRÁI TRÊN. Hộp thoại thành cửa sổ KHÔNG-modal. Chỉ bật ở màn ≥820px (winmgr.js winBat); điện thoại giữ hộp thoại toàn màn như cũ. */ dialog.win { position: fixed; margin: 0; inset: auto; /* thoát canh-giữa (margin:auto/inset:0) để định vị tự do */ max-width: none; /* cỡ do winmgr đặt inline (mặc định width dưới đây) */ /* Chừa 46px ĐỈNH (winCanGiua đặt top:46) + ~12px đáy ⇒ đáy cửa sổ (footer .dlg-f Hủy/Lưu) LUÔN trong màn, không bị cắt. Trước để 100vh−16 thì cửa canh-giữa top:46 tràn ~30px xuống dưới, nuốt nút Lưu. */ max-height: calc(100vh - 58px); /* KHÔNG bao giờ cao quá màn — form dài tự cuộn trong thân */ width: 720px; display: flex; flex-direction: column; overscroll-behavior: contain; box-shadow: 0 12px 48px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .18); } /* ĐÓNG cửa sổ = close() bỏ [open]. Rule display:flex ở trên là AUTHOR-origin nên THẮNG UA 'dialog:not([open]){display:none}' (author > user-agent bất kể specificity) ⇒ đóng rồi cửa VẪN hiện. Phải tự dựng lại ẩn-khi-đóng (specificity 0,2,1 > 0,1,1 của .win, thêm !important cho chắc). Nếu thiếu dòng này: ✕ · Hủy · ESC · bấm nền đều 'không tắt', chỉ thu-nhỏ (win-hidden !important) mới ẩn được. */ dialog.win:not([open]) { display: none !important; } dialog.win.wide { width: 900px; } /* khi có dock: mọi cửa sổ chừa vùng dock để ĐÁY (footer .neo-nut) không bị ô dock che */ body.has-winbar dialog.win { max-height: calc(100vh - var(--wb-h) - 58px); } /* thân LUÔN co giãn lấp phần giữa + tự cuộn — hết cảnh nội dung bị cắt ở đáy */ dialog.win .dlg-b { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; } /* CHỈ transition khi phóng to / khôi phục (winTween bật 300ms rồi tắt) — kéo/đổi-cỡ vẫn tức thời */ dialog.win.win-tween { transition: left .26s cubic-bezier(.2, .8, .2, 1), top .26s cubic-bezier(.2, .8, .2, 1), width .26s cubic-bezier(.2, .8, .2, 1), height .26s cubic-bezier(.2, .8, .2, 1); } /* thanh tiêu đề = tay kéo; cụm 3 nút nằm TRƯỚC tiêu đề (góc trái) */ dialog.win .dlg-h.win-drag { cursor: move; user-select: none; display: flex; align-items: center; gap: 10px; } .win-ctrls { display: inline-flex; gap: 7px; flex: none; } .win-b { width: 19px; height: 19px; border-radius: 50%; border: none; cursor: pointer; padding: 0; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: rgba(0, 0, 0, .42); font-weight: 700; transition: filter .12s ease, color .12s ease; } .win-ctrls:hover .win-b { color: rgba(0, 0, 0, .62); } /* ký hiệu luôn hiện nhạt, rõ hơn khi rê chuột */ .win-x { background: #ff5f57; } /* đỏ — đóng */ .win-min { background: #febc2e; } /* vàng — thu nhỏ */ .win-b.win-max { background: #28c840; }/* xanh — phóng to (bản THÂN nút; trạng thái toàn màn = .win-full) */ .win-b:hover { filter: brightness(.92); } .win-b:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; color: rgba(0, 0, 0, .62); } /* tay nắm đổi cỡ ở góc dưới–phải */ .win-grip { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; z-index: 6; opacity: .5; background: linear-gradient(135deg, transparent 0 46%, #b4321e 46% 54%, transparent 54% 66%, #b4321e 66% 74%, transparent 74%); } .win-grip:hover { opacity: 1; } /* viền cửa sổ đang FOCUS — đồng bộ với ô .is-active dưới dock */ dialog.win.win-active { box-shadow: 0 0 0 2px var(--red, #b4321e), 0 14px 50px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .18); } /* phóng to toàn màn */ dialog.win.win-full { left: 0 !important; top: 0 !important; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; } body.has-winbar { --wb-h: 60px; } /* NGUỒN DUY NHẤT chiều cao vùng dock (khớp WIN_DOCK_H) */ body.has-winbar dialog.win.win-full { height: calc(100vh - var(--wb-h)); max-height: calc(100vh - var(--wb-h)); } /* thu nhỏ (sau khi hiệu ứng thu gọn chạy xong) */ dialog.win.win-hidden { display: none !important; } /* ===== DOCK kiểu MESSENGER — cụm Ô RỜI neo góc ĐÁY–PHẢI, nền TRONG SUỐT ===== */ /* Container trong suốt, không nuốt click ở vùng trống; ô mới nhất sát mép phải (row-reverse). */ #winbar { position: fixed; right: 14px; bottom: 12px; left: auto; top: auto; width: auto; max-width: calc(100vw - 28px); z-index: 99999; margin: 0; padding: 0; background: transparent; box-shadow: none; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 10px; pointer-events: none; } #winbar > * { pointer-events: auto; } /* BẮT BUỘC: vùng trống none + ô con auto */ .wd-item { display: inline-flex; align-items: center; gap: 6px; background: #1f2a44; color: #e2e8f0; border-radius: 14px; padding: 6px 6px 6px 11px; max-width: 232px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .2); transition: transform .12s ease, background .12s ease, opacity .12s ease; } .wd-face { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-weight: 600; font-size: 12.5px; max-width: 172px; min-width: 0; padding: 0; } .wd-ico { flex: none; font-size: 14px; } .wd-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wd-live { width: 7px; height: 7px; border-radius: 50%; background: #28c840; flex: none; } /* chấm "đang mở" */ /* ✕ LUÔN HIỆN (không ẩn-chờ-hover): TGĐ cần bấm là xoá được ô, không phải dò tìm nút vô hình. */ .wd-x { width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer; flex: none; background: rgba(255, 255, 255, .16); color: #dbe4f0; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; opacity: 1; transition: background .12s, color .12s; } .wd-item:hover .wd-x { background: rgba(255, 255, 255, .26); } .wd-x:hover { background: #ff5f57; color: #fff; } .wd-item.is-active { background: #26365a; outline: 2px solid var(--red, #b4321e); outline-offset: 0; transform: translateY(-1px); } .wd-item.is-min { opacity: .82; background: #141c30; } .wd-item.is-min .wd-title { font-style: italic; } /* tràn bề rộng → co mọi ô thành chat-head TRÒN (icon-only, MỘT hàng, không đè đáy cửa sổ) */ #winbar.compact .wd-item { position: relative; max-width: none; padding: 0; border-radius: 50%; } #winbar.compact .wd-face { max-width: none; width: 44px; height: 44px; justify-content: center; } #winbar.compact .wd-title { display: none; } /* vẫn giữ ✕ ở compact: badge đỏ nhỏ góc trên-phải, LUÔN hiện để đóng được cả khi thu tròn */ #winbar.compact .wd-x { position: absolute; top: -3px; right: -3px; width: 18px; height: 18px; font-size: 12px; background: #ff5f57; color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); opacity: 1; } .dlg-h { display: flex; align-items: center; gap: 9px; background: #fff; color: var(--ink); padding: 14px 22px; font-weight: 700; font-size: var(--fs-lg); border-bottom: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--brand); } /* C8 — phần của tiêu đề dialog dựng bằng dlgTieuDe(): icon (màu hành động) · tên · phụ đề nhỏ mờ. */ .dlg-h > svg.ico { color: var(--primary); } .dlg-t { font-weight: 700; } .dlg-sub { font-weight: 500; font-size: var(--fs-xs); color: var(--ink-3); } .dlg-b { padding: 20px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; max-height: 68vh; overflow-y: auto; } .dlg-b label { font-size: 12px; color: #555; display: block; margin-bottom: 5px; font-weight: 600; } .dlg-b .full { grid-column: 1/3; } /* :not(...) là BẮT BUỘC: thiếu nó thì ô tick trong MỌI hộp thoại bị kéo rộng 100% (đo thật: 45px thay vì 13px), đẩy chữ bên cạnh xuống dòng theo từng từ. Cùng bệnh đã vá riêng lẻ ở .tr-item và .bc-dlg. */ .dlg-b input:not([type=checkbox]):not([type=radio]), .dlg-b select, .dlg-b textarea { width: 100%; padding: 9px 11px; font-size: 14px; } .dlg-b .field { display: flex; flex-direction: column; } /* .grid2 được dùng 9 chỗ trong ui-hopdong.js nhưng CHƯA HỀ được định nghĩa → trình duyệt hiểu là block, mọi trường xếp dọc trong nửa bề ngang. Định nghĩa ở đây; span 2 cột khi nằm thẳng trong lưới .dlg-b. */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; } .grid2 > .full { grid-column: 1 / -1; } .dlg-b > .grid2 { grid-column: 1 / -1; } @media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } } /* Cảnh báo chữ đỏ dưới ô bắt buộc (form Sửa việc) */ .fv-err { color: var(--danger); font-size: 12px; font-weight: 700; margin-top: 4px; line-height: 1.35; } .fv-err:empty { display: none; } /* C6 — dấu * ô bắt buộc (danhDauBatBuoc thêm động) */ .req { color: var(--danger); font-weight: 800; margin: 0 3px; } /* C6 — cảnh báo VÀNG dưới ô (không chặn), vd PIC thuộc khối khác */ .fv-warn { color: #8a5a00; background: #fffbe6; border: 1px solid #f4e2b8; border-radius: 6px; padding: 4px 9px; font-size: 12px; font-weight: 600; margin-top: 4px; line-height: 1.35; } /* C6 — viền đỏ ô đang lỗi */ .fv-bad, .fv-bad:focus { border-color: var(--danger) !important; box-shadow: 0 0 0 2px rgba(236,31,39,.12); } .dlg-sec { grid-column: 1/3; border-top: 2px solid #eee; margin-top: 6px; padding-top: 14px; } .dlg-sec-h { font-size: 13px; font-weight: 800; color: var(--green); margin-bottom: 10px; letter-spacing: .3px; } .dlg-sec.coop { background: #f4fbf6; border: 1px solid #cfe8d6; border-radius: 10px; padding: 14px 16px; margin: 6px -4px 0; } .dlg-f { padding: 14px 22px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--bd); flex-wrap: wrap; } /* ── THANH NÚT NEO (v3.21-J) ──────────────────────────────────────────────────────────────── TGĐ 12/08: "Đưa hẳn xuống cuối cùng bên trái hoặc bên phải để khi kéo lên kéo xuống cũng ko ảnh hưởng tới nút bấm này. Tương tự như vậy với nút gửi ý kiến." Gốc bệnh: ô CUỘN của hộp thoại là .dlg-b (max-height 68vh), mà mọi nút hành động chính của màn rà soát — "Gửi ý kiến cho chủ trì", "Hoàn thành vòng N", "Nạp bản nhà thầu" — lại nằm BÊN TRONG .dlg-b. Một văn bản 300 đoạn thì nút gửi trôi mất hút; .dlg-f phía dưới chỉ có nút Đóng. sticky chứ KHÔNG fixed: ô cuộn là .dlg-b chứ không phải cửa sổ, fixed sẽ neo theo cửa sổ và trôi ra ngoài khung hộp thoại (và đè lên tab bar khi hộp thoại ngắn). */ .neo-nut { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-top: 12px; padding: 9px 14px; background: #fff; border: 1px solid var(--bd); border-radius: 10px; box-shadow: 0 -7px 16px -12px rgba(15, 42, 74, .45); } /* Trong thân hộp thoại: nới âm ra hết bề ngang phần thân để thanh che kín mép dưới khi cuộn, không để lọt một dải chữ chạy phía sau hai bên. .dlg-b là lưới 2 cột nên phải span cả hàng. */ /* bottom PHẢI bằng đúng margin-bottom âm. ĐO THẬT (Chrome 1280×720, scratchpad/v321/neo-do.html): để bottom:0 thì lúc dính, thanh đứng cao hơn mép dưới đúng 20px — vì offset của sticky đo tới HỘP LỀ, mà lề dưới đang là −20px. Hở 20px đó chính là dải padding-bottom của .dlg-b, và chữ trong hợp đồng chạy qua đấy. Đặt −20px thì lệch = 0 ở cả ba mốc cuộn (đầu · giữa · đáy). */ .dlg-b > .neo-nut { grid-column: 1 / -1; margin: 12px -22px -20px; bottom: -20px; padding: 10px 22px; border: none; border-top: 1px solid var(--bd); border-radius: 0; background: #f7fafd; } .dlg-b.hdform > .neo-nut { margin: 12px -20px -20px; bottom: -20px; padding: 10px 20px; background: #f6f8fa; } .neo-nut > .note { margin: 0; flex: 1 1 auto; min-width: 0; text-align: left; } .neo-nut .pill { flex: 0 0 auto; } /* Trái/phải theo chữ TGĐ: mặc định dồn PHẢI. Thêm .neo-trai khi màn đó quen bấm bên trái. */ .neo-nut.neo-trai { justify-content: flex-start; } .neo-nut.neo-trai > .note { text-align: right; order: 9; } /* ── Thanh neo Version chia đôi (v3.22 · TGĐ 13/08) ────────────────────────────────────────── TRÁI = "tiếp tục rà soát" (nạp bản nhà thầu phản hồi / tải file gửi nhà thầu) · PHẢI = bước KẾT THÚC "Trình Pháp chế". Vẫn để trong .neo-nut để giữ nguyên neo dính (sticky) + lề âm span cả hàng. */ .neo-nut.hd-vbar { justify-content: space-between; align-items: flex-end; gap: 14px; } .hd-vbar-l { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; flex: 1 1 auto; } .hd-vbar-cap { font-size: 12px; font-weight: 700; color: #1F4E79; } .hd-vbar-btns { display: flex; gap: 8px; flex-wrap: wrap; } .hd-vbar-l > .note.hd-vbar-st { margin: 0; text-align: left; flex: 0 0 auto; } .hd-vbar-r { flex: 0 0 auto; display: flex; align-items: flex-end; } @media (max-width: 760px) { /* CHỈ bóp phần đệm TRONG. Lề âm phải giữ đúng −22px: .dlg-b không hề đổi padding ở khổ hẹp (khối @media 760px của .dlg-b chỉ đổi số cột lưới), đo thật thấy để −16px là thanh hụt 6px mỗi bên và chữ hợp đồng chạy lộ ra ở hai mép. */ .dlg-b > .neo-nut { padding: 9px 16px; } .neo-nut { gap: 7px; } .neo-nut > .note { flex-basis: 100%; text-align: left; } /* Khổ hẹp: xếp DỌC — cụm "tiếp tục rà soát" trên, nút "Trình Pháp chế" full bề ngang bên dưới. */ .neo-nut.hd-vbar { flex-direction: column; align-items: stretch; } .hd-vbar-r { width: 100%; } .hd-vbar-r > button { width: 100%; } } /* ── Form hồ sơ rà soát hợp đồng (v3.17) ──────────────────────────────────────────────────── Form này có hơn 40 trường. Lưới 2 cột chung của .dlg-b cắt nó thành hai cột dọc dài lệch nhau, trường bắt buộc lẫn với trường hiếm dùng. Ở đây đổi về MỘT cột gồm các "thẻ" nhóm; nhóm ít dùng để dạng thu gọn nên mở form ra chỉ thấy phần phải điền. */ .dlg-b.hdform { display: block; padding: 16px 20px 20px; background: #f6f8fa; } .hdcard { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; } .hdcard-h { font-size: 13px; font-weight: 800; color: var(--brand); margin-bottom: 11px; display: flex; align-items: center; gap: 7px; } .hdcard-h .hdsub { font-weight: 400; color: #8a99a8; font-size: 12px; } details.hdcard > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--brand); display: flex; align-items: center; gap: 7px; } details.hdcard > summary::-webkit-details-marker { display: none; } details.hdcard > summary::after { content: '⌄'; margin-left: auto; color: #8a99a8; font-size: 15px; line-height: 1; } details.hdcard[open] > summary::after { content: '⌃'; } details.hdcard[open] > summary { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eef1f5; } details.hdcard > summary .hdsub { font-weight: 400; color: #8a99a8; font-size: 12px; } /* Thanh chọn 1-trong-N: thấy hết phương án cùng lúc, khỏi phải bung select mới biết có gì */ .segbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: #eef1f5; border-radius: 10px; padding: 4px; } .segbar > button { border: none; background: none; border-radius: 7px; padding: 9px 8px; font-size: 13px; font-weight: 600; color: #4a5b6b; cursor: pointer; line-height: 1.35; } .segbar > button.on { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); } @media (max-width: 700px) { .segbar { grid-auto-flow: row; } } /* Lưới ô chọn (khối lấy ý kiến): cả thẻ bấm được, cột cố định → hết cảnh tên khối xuống dòng từng chữ */ .pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 8px; } .pick { display: flex; align-items: center; gap: 8px; border: 1px solid var(--bd); border-radius: 9px; padding: 9px 11px; font-size: 13px; font-weight: 600; color: #2b3a47; cursor: pointer; background: #fff; } .pick:hover { border-color: #9dc3e6; } .pick:has(input:checked) { border-color: var(--brand); background: #eef5fc; color: var(--brand); } .pick:has(input:disabled) { opacity: .6; cursor: default; } .pick > input { flex: 0 0 auto; margin: 0; } .chip { display: inline-flex; align-items: center; gap: 5px; background: #eef3ff; color: #1F4E79; border: 1px solid #cfe; border-radius: 14px; padding: 3px 10px; font-size: 12px; margin: 3px 4px 3px 0; } .chip button { border: none; background: none; color: #c00; cursor: pointer; font-weight: 900; padding: 0 0 0 2px; font-size: 12px; } .chip.chip-bad { background: #FCE4D6; color: #843C0C; border-color: #f0b58a; } .mt-warn { background: #FFF2E8; border: 1px solid #f0b58a; color: #843C0C; border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600; margin-top: 6px; } .pill.pill-red { background: var(--danger); color: #fff; font-weight: 700; text-decoration: none; } .pill.pill-grn { background: var(--green); color: #fff; font-weight: 700; text-decoration: none; } /* v3.11: 🏁 Đã đóng mốc lớn */ /* C8 — nút NGUY HIỂM: .btn-red + bí danh .danger; nền trắng, viền/chữ đỏ; hover nền đỏ nhạt. */ button.btn-red, button.danger { border-color: var(--danger); color: var(--danger); font-weight: 700; background: #fff; } button.btn-red:hover, button.danger:hover { background: #fff0f0; } tr.row-canhbao > td { background: #FFF0F0; } tr.row-canhbao > td:first-child { box-shadow: inset 4px 0 0 var(--danger); } .tr-list { max-height: 168px; overflow: auto; border: 1px solid var(--bd); border-radius: 8px; padding: 6px 8px; margin-top: 6px; background: #fbfdff; } .tr-item { display: flex; align-items: center; gap: 7px; padding: 4px 3px; font-size: 13px; border-bottom: 1px dashed #eee; cursor: pointer; } .tr-item:last-child { border-bottom: none; } .tr-item input { width: auto; } .tr-item.tr-dis { color: #999; } .cp-crit { background: #FFE1E1 !important; box-shadow: inset 3px 0 0 var(--danger); } /* Thanh %HT trực quan trong bảng việc: 0% đỏ → 50% vàng → 100% xanh (màu do mauPct() nội suy) */ .pctcell { display: flex; flex-direction: column; gap: 3px; min-width: 58px; } .pctcell > span { font-weight: 700; font-size: 12.5px; } .pctbar { height: 8px; background: #e9edf0; border-radius: 5px; overflow: hidden; min-width: 54px; } .pctbar > i { display: block; height: 100%; border-radius: 5px; transition: width .25s ease, background .25s ease; } /* Thanh tiến trình kiểu MS Project (tab Đường găng): nền = khung thời gian dự án, thanh = hạng mục, phần đậm = %HT */ .gantt { position: relative; height: 18px; background: #eef1f4; border-radius: 4px; min-width: 200px; overflow: hidden; } .gantt > i { position: absolute; top: 2px; bottom: 2px; background: #9DC3E6; border-radius: 3px; min-width: 3px; } .gantt > i.g-crit { background: var(--danger); } .gantt > i > b { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, .35); border-radius: 3px 0 0 3px; } /* Sơ đồ tổ chức (top-down + đường nối SVG + kéo thả) */ #org-canvas { position: relative; overflow-x: auto; padding: 6px 4px 16px; } #org-svg { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 3; } .org-layer { position: relative; z-index: 1; min-width: 640px; } .org-row { display: flex; justify-content: center; gap: 18px; margin-bottom: 26px; } .org-tgd-row { align-items: flex-start; gap: 26px; } .org-colrow { align-items: flex-start; gap: 22px; margin-bottom: 0; } .org-colx { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 210px; } .org-colx-h { font-weight: 700; color: var(--red); font-size: 12px; margin-bottom: 10px; text-align: center; } .org-stack { display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: center; margin-top: 12px; } .org-box { border: 1px solid var(--bd); border-radius: 10px; background: #fff; width: 200px; box-shadow: 0 1px 4px rgba(0,0,0,.08); overflow: hidden; } .org-khoi { cursor: pointer; } .org-khoi:hover { border-color: var(--red); box-shadow: 0 3px 10px rgba(236,31,39,.2); } .org-box-h { background: var(--green); color: #fff; font-weight: 700; font-size: 12.5px; padding: 7px 10px; } .org-box-b { padding: 8px 10px; font-size: 13px; } .org-box-b small { color: #777; } .org-pct { width: 240px; } .org-pct .org-box-h { background: #6a1b9a; } .org-tgd { width: 240px; } .org-tgd .org-box-h { background: var(--red); } .org-troly .org-box-h { background: #546e7a; } .org-ptgd .org-box-h { background: #b8860b; } .org-drop { outline: 3px dashed var(--red); outline-offset: 2px; } .org-nhom { cursor: pointer; } .org-tgd[onclick], .org-ptgd[onclick], .org-pct[onclick] { cursor: pointer; } .org-nhom:hover, .org-tgd[onclick]:hover, .org-ptgd[onclick]:hover, .org-pct[onclick]:hover { box-shadow: 0 3px 10px rgba(0,0,0,.18); } .org-troly-sub { width: 200px; margin: 6px auto 0; padding: 5px 9px; font-size: 12px; background: #f3f6fb; border: 1px dashed #b8860b; border-radius: 8px; color: #5b4a1a; } .org-troly-sub small { color: #888; } @media (max-width: 720px) { .org-colrow { flex-direction: column; align-items: center; } } .hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } .hub-grid .field { display: flex; flex-direction: column; } .hub-grid .field.full { grid-column: 1/3; } .hub-grid label { font-size: 12px; color: #667; font-weight: 600; margin-bottom: 3px; } .hub-v { background: #f6f8fa; border: 1px solid #e6e9ee; border-radius: 7px; padding: 7px 10px; font-size: 13.5px; min-height: 34px; } @media (max-width: 700px) { .hub-grid { grid-template-columns: 1fr; } .hub-grid .field.full { grid-column: 1/1; } } .cp-crit td:first-child { font-weight: 800; } .hint { font-size: 12px; color: #667; margin: 4px 0 0; } /* ⓘ hướng dẫn nhỏ cạnh tiêu đề/nhãn — bấm mở giải thích, gọn giao diện */ .info-i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #e8eef5; color: #1F4E79; border: 1px solid #b9cbdd; font-size: 12px; font-weight: 800; font-style: italic; font-family: Georgia, serif; cursor: pointer; margin-left: 5px; vertical-align: 1px; user-select: none; flex: none; } .info-i:hover { background: #1F4E79; color: #fff; } h2 .info-i { vertical-align: 2px; } th .info-i { background: #e8eef5; color: var(--primary); border-color: #b9cbdd; } /* C8 — đầu bảng nay NHẠT nên ⓘ về màu nền tối trên nền sáng */ #info-tip-pop { position: fixed; z-index: 99999; max-width: 360px; background: #243447; color: #fff; font-size: 12px; line-height: 1.55; padding: 9px 12px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.3); white-space: pre-line; font-weight: 400; text-transform: none; } select.inl, input.inl { padding: 3px 5px; font-size: 12px; border: 1px solid #dfe3e8; border-radius: 5px; background: #fbfdff; } select.inl:hover, input.inl:hover { border-color: var(--green); background: #fff; } select.inl:focus, input.inl:focus { border-color: var(--green); outline: 2px solid #cfe8d6; } select.inl-red { border-color: var(--danger); background: #fff6f6; } .lock { background: #ededed !important; color: #666; } footer { text-align: center; padding: 16px; color: var(--green); font-weight: 700; font-size: 12px; letter-spacing: 1px; } .note { font-size: 12px; color: #777; margin: 6px 0; } .pill { font-size: 12px; background: #eee; border-radius: 10px; padding: 2px 8px; } h2 { font-size: 15px; color: var(--primary); margin: 10px 0 8px; } .toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; } .boss { color: #b58900; font-weight: 900; } .filebtn { border: 1px solid var(--bd); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-weight: 600; background: #fff; font-size: 13px; } .filebtn.grnb { border-color: var(--green); color: var(--green); font-weight: 700; } .filebtn input { display: none; } .card.click { cursor: pointer; transition: box-shadow .15s, transform .15s; } .card.click:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, .12); transform: translateY(-1px); } a.num { color: inherit; font-weight: 700; text-decoration: underline dotted; } a.num:hover { color: var(--red); } .badge { display: inline-block; background: var(--red); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 12px; font-weight: 700; } .nav-nhom button.on .badge { background: #fff; color: var(--primary); } /* C2: badge trên nút nhóm đang chọn (nền primary) */ /* D2 — chip trạng thái lưu ở header (Đang lưu / Đã lưu HH:MM / Chưa lưu đang thử lại) */ .luu-tt { font-size: 12px; font-weight: 600; border-radius: 10px; padding: 2px 9px; white-space: nowrap; line-height: 1.5; } .luu-tt:empty { display: none; } .luu-tt.ok { background: #e7f6ec; color: #1c7a3f; } .luu-tt.dang { background: #eef1f4; color: #556; } .luu-tt.loi { background: #fdecea; color: #b3261e; animation: luuNhay 1s ease-in-out infinite; } @keyframes luuNhay { 50% { opacity: .45; } } @media (prefers-color-scheme: dark) { .luu-tt.ok { background: #14361f; color: #7fdca0; } .luu-tt.dang { background: #2a2f36; color: #b9c2cc; } .luu-tt.loi { background: #3a1714; color: #ff9b90; } } @media (prefers-reduced-motion: reduce) { .luu-tt.loi { animation: none; } } @media (max-width: 700px) { .dlg-b { grid-template-columns: 1fr; } .dlg-b .full { grid-column: 1/1; } td { font-size: 12px; } } /* ---- V2: cờ "Trễ mốc lớn" bấm được + nhảy tới mốc ---- */ .flaglink { cursor: pointer; text-decoration: none; border-bottom: 1px dotted currentColor; font-weight: 600; } .flaglink:hover { text-decoration: underline; } tr.flash-moc > td { background: #fff3b0 !important; transition: background .3s; } /* ---- Update 3.2: Bảng Nhập việc GOM THEO MỐC LỚN (như MS Project) ---- */ .nv-gom-note { font-size: 12px; color: #33503f; background: #eef6f0; border: 1px solid #cfe3d5; border-radius: 8px; padding: 7px 11px; margin: 2px 0 8px; } table.nv-gom td { vertical-align: top; } .nv-gd { color: #6b7c72; font-weight: 400; font-size: 12px; } td.nv-ind { text-align: center; color: #9bb8a6; width: 26px; min-width: 22px; } td.nv-ind2 { text-align: right; color: #cbb277; width: 26px; min-width: 22px; font-size: 12px; padding-right: 3px; } /* CẤP 2 — việc con: giật lề sang phải + vạch dẫn xanh để thấy rõ là con của mốc */ tr.nv-child > td { background: #fcfdfc; } tr.nv-child > td.nv-namecell { padding-left: 24px; box-shadow: inset 4px 0 0 #cfe3d5; } /* CẤP 3 — bước nhỏ trong 1 việc: thụt sâu hơn nữa, nền & vạch dẫn khác màu */ tr.nv-step > td { background: #fbf9f2; font-size: 12px; } tr.nv-step > td.nv-stepname { padding-left: 46px; box-shadow: inset 4px 0 0 #ead9b0; color: #5b4e2e; } .nv-steptog { text-decoration: none; color: #1F4E79; font-weight: 600; white-space: nowrap; margin-left: 4px; } .nv-steptog:hover { text-decoration: underline; } .nv-addbuoc { text-decoration: none; color: var(--green); font-weight: 600; font-size: 12px; white-space: nowrap; border: 1px solid #b7d8c3; border-radius: 10px; padding: 0 7px; margin-left: 6px; background: #f1f8f3; } .nv-addbuoc:hover { background: var(--green); color: #fff; border-color: var(--green); } /* dòng TỔNG của 1 mốc lớn (summary row) */ tr.nv-moc-head > td { background: #e5f1ea; border-top: 2px solid #b7d8c3; font-size: 12.5px; cursor: pointer; } tr.nv-moc-head:hover > td { background: #d8ebe0; } tr.nv-moc-head > td:first-child { box-shadow: inset 4px 0 0 var(--green); } tr.nv-moc-head.nv-moc-red > td { background: #fdecec; border-top-color: #f0b6b6; } tr.nv-moc-head.nv-moc-red > td:first-child { box-shadow: inset 4px 0 0 var(--danger); } tr.nv-moc-head.nv-moc-khac > td { background: #f4f4f4; border-top-color: #ccc; } tr.nv-moc-head.nv-moc-khac > td:first-child { box-shadow: inset 4px 0 0 #aaa; } tr.nv-moc-head.nv-moc-done > td { background: #d9efdf; border-top-color: #8fcaa5; } /* v3.11: 🏁 mốc đã đóng */ tr.nv-moc-head.nv-moc-done > td:first-child { box-shadow: inset 4px 0 0 #2e8b57; } /* v3.20-F — CẤP 2: đầu mục chi tiết (mốc nhỏ) nằm giữa mốc lớn và việc. Nhạt hơn dòng mốc lớn để mắt đọc được ngay thứ bậc Mốc lớn → Đầu mục → Việc → Bước, nhưng vẫn đậm hơn dòng việc thường. */ tr.nv-mocnho-head > td { background: #eef5f1; border-top: 1px solid #cde3d6; font-size: 12.5px; cursor: pointer; } tr.nv-mocnho-head:hover > td { background: #e2eee7; } tr.nv-mocnho-head > td.nv-mocnho-name { padding-left: 24px; box-shadow: inset 4px 0 0 #9fc9b0; font-weight: 600; color: #24503a; } tr.nv-mocnho-head.nv-mocnho-red > td { background: #fdf0ef; border-top-color: #f2c6c6; } tr.nv-mocnho-head.nv-mocnho-red > td.nv-mocnho-name { box-shadow: inset 4px 0 0 var(--danger); color: #8a2b2b; } /* Việc bên trong đầu mục chi tiết thụt thêm một bậc — đánh dấu bằng LỚP trên chính dòng việc, KHÔNG dùng bộ chọn anh-em (`~`) vì nó ăn lan sang mọi dòng việc phía sau, kể cả của mốc lớn khác. */ tr.nv-child.nv-trong-mocnho > td.nv-namecell { padding-left: 34px; box-shadow: inset 4px 0 0 #d7e8de; } .nv-tog { display: inline-block; width: 14px; color: var(--green); font-weight: 700; text-align: center; } .nv-moc-dl { font-size: 13px; white-space: nowrap; } /* Update 3.3 — MÀU CẢ DÒNG theo tiến độ (bảng Nhập việc): đã xong = xám nhẹ · trễ/quá hạn = cam nhạt */ tr.row-xong > td { background: #eceef0; } tr.row-tre > td { background: #fff0e1; } tr.row-xong:hover > td { background: #e4e7ea; } tr.row-tre:hover > td { background: #ffe7cf; } /* thắng nền nhạt của dòng việc con (nv-child) khi ở chế độ gom theo mốc */ tr.nv-child.row-xong > td { background: #eceef0; } tr.nv-child.row-tre > td { background: #fff0e1; } /* ---- V2: bảng deadline mốc lớn cột mốc cố định, thoáng ---- */ table.dlmoc th:first-child, table.dlmoc td.mocname { text-align: left; } table.dlmoc td.mocname { background: #f6faf7; border-right: 2px solid #cfe3d5; } table.dlmoc tr:nth-child(even) td.mocname { background: #eef6f0; } table.dlmoc th:first-child { z-index: 3 !important; } table.dlmoc td input[type=date] { padding: 3px; } /* ---- Dải cảnh báo tiến độ toàn công ty (Tổng quan công ty) ---- Một dòng nội dung chỉ MỘT cỡ chữ; con số to nằm ở khối riêng, không chen giữa câu. */ .bang-canhbao { border: 1px solid #f0b58a; background: #FFF6EF; border-radius: 10px; padding: 12px 14px; margin: 10px 0 14px; } .bang-canhbao-h { font-weight: 700; color: #843C0C; margin-bottom: 10px; } .bang-canhbao-so { display: flex; flex-wrap: wrap; gap: 10px 28px; } .bang-canhbao-so > div { color: #843C0C; line-height: 1.3; } .bang-canhbao-so span { display: block; font-size: 24px; font-weight: 800; color: var(--danger); font-variant-numeric: tabular-nums; } .bang-canhbao-ft { margin-top: 10px; padding-top: 9px; border-top: 1px solid #f0cdb2; color: #843C0C; } .bang-ok { border: 1px solid #b7dfc5; background: #F1F9F4; border-radius: 10px; padding: 10px 14px; margin: 10px 0 14px; color: #1e6b3a; font-weight: 600; } /* v3.18 — hub quy trình trong tab Phối hợp: dùng lại .cards/.card/.card.click/.badge sẵn có. Không dùng .segbar vì segbar chia đều mọi cột (grid-auto-columns:1fr) → quy trình thứ 5, thứ 6 sẽ chật. */ .card.click.ph-o { position: relative; padding-right: 40px; } /* ô đang mở: viền theo màu thương hiệu + nền xám rất nhạt — KHÔNG hardcode màu nền theo tông xanh/đỏ, vì app có 2 theme (--brand đổi giữa đỏ và navy) và nền cứng sẽ chỏi ở một trong hai. */ .card.click.ph-o.on { border-left-color: var(--brand); background: #f4f6f9; box-shadow: inset 0 0 0 1px var(--brand); } .ph-o-t { font-size: 15px !important; line-height: 1.3; } /* .card b mặc định 22px — quá to cho nhãn chữ */ /* Con số trên ô. PHẢI ghi màu chữ ở đây: .badge đặt color:#fff nhưng thua .card span { color:#666 } (cùng 1 class + 1 phần tử > 1 class), nên nếu không đè thì số hiện XÁM trên nền ĐỎ — nhìn như chấm tròn rỗng, mất luôn tín hiệu "ô này có mấy việc đang chờ". */ .card.click.ph-o .ph-o-badge { position: absolute; top: 8px; right: 8px; color: #fff; font-size: 12px; } /* v3.20 — thanh lọc của bảng phối hợp. Một hàng ngang, tự xuống dòng khi hẹp; chip khối là nút bật/tắt nên phải nhìn ra ngay cái nào đang bật (nền đậm + chữ trắng), không chỉ đổi viền. */ .ph-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 14px; padding: 9px 12px; background: #f4f6f9; border: 1px solid var(--line); border-radius: 10px; } .ph-loc > label { font-size: 12px; font-weight: 700; color: #4a5b6b; margin: 0; } .ph-loc select { min-width: 190px; padding: 5px 8px; font-size: 13px; } .ph-kwrap { display: flex; flex-wrap: wrap; gap: 5px; } .ph-kchip { border: 1px solid #cfd8e3; background: #fff; color: #35455a; border-radius: 14px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; } .ph-kchip.on { background: var(--brand); border-color: var(--brand); color: #fff; } .ph-loc-xoa { margin-left: auto; padding: 4px 12px !important; font-size: 12px !important; } /* v3.20-E — dải "＋ Lập yêu cầu phối hợp" ngay trên bảng phiếu: lập phiếu tại chỗ, không phải sang tab Nhập việc */ .ph-lapmoi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; padding: 10px 14px; background: #eef5fc; border: 1px solid #cfe0f2; border-radius: 10px; } .ph-lapmoi > span { font-size: 12.5px; color: #4a5b6b; } /* v3.20-B — hàng đợi rà soát hợp đồng: dòng số 1 phải nổi bật hơn hẳn, vì cả bảng chỉ để trả lời một câu "làm hợp đồng nào trước". Dòng kéo được thì con trỏ và tay nắm ⠿ phải nói ra điều đó. */ .hdq-block { margin-bottom: 20px; } .hdq-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; padding: 9px 14px; background: #f6f8fa; border: 1px solid var(--line); border-radius: 10px; } .hdq-sla { font-size: 13px; color: #35455a; } .hdq-sla .note { font-size: 12px; } .hdq-bar button { margin-left: auto; } .hdq-tb .hdq-row.hdq-dau > td { background: #eef5fc; } .hdq-tb .hdq-row.hdq-dau > td:first-child { box-shadow: inset 3px 0 0 var(--brand); } .hdq-tb .hdq-row[draggable="true"] { cursor: grab; } .hdq-tb .hdq-row[draggable="true"]:active { cursor: grabbing; } .hdq-tb .hdq-row[draggable="true"]:hover > td { background: #f4f7fb; } .hdq-tay { color: #9aa7b5; letter-spacing: -1px; } /* v3.20-D — hỏi/đáp làm rõ trong phiếu phối hợp. Hỏi = cam, đáp = xanh: nhìn một cái biết mạch đang dừng ở bên nào mà khỏi đọc chữ. */ .ph-hd-goc { padding: 8px 10px; background: #f6f6f6; border-radius: 6px; font-size: 13px; } .ph-hd-cuon { max-height: 32vh; overflow: auto; } .ph-hd-i { padding: 6px 10px; margin: 5px 0; border-left: 3px solid; border-radius: 0 6px 6px 0; } .ph-hd-i.hoi { border-color: #d97706; background: #fffbeb; } .ph-hd-i.dap { border-color: #059669; background: #ecfdf5; } .ph-hd-ai { font-size: 12px; color: #64748b; } .ph-hd-chu { font-size: 13px; margin-top: 2px; white-space: pre-wrap; } /* v3.18 — Review văn bản (js/ui-vanban.js). Dùng lại .hdcard/.segbar/.pill sẵn có; chỉ thêm phần trình bày ĐOẠN văn bản, thứ mà màn hợp đồng không có (hợp đồng bày theo điều/khoản). */ .vb-doc { max-height: 58vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: #fff; } .vb-p { margin: 0 0 6px; line-height: 1.55; white-space: pre-wrap; } /* Ô đang sửa phải THẤY RÕ là sửa được: contenteditable không có viền mặc định, người dùng không biết bấm vào đâu — đây là màn hình cho người không rành máy tính. */ .vb-blk { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 6px 4px; border-bottom: 1px dashed var(--line); } .vb-blk .vb-p[contenteditable] { border: 1px solid transparent; border-radius: 4px; padding: 4px 6px; } .vb-blk .vb-p[contenteditable]:hover { border-color: var(--line); background: #fbfcfd; } .vb-blk .vb-p[contenteditable]:focus { border-color: var(--brand); background: #fff; outline: none; } .vb-no { color: #9aa7b4; font-size: 12px; text-align: right; padding-top: 6px; user-select: none; } .vb-blk.vb-edited { background: #f2fbf5; } .vb-blk.vb-edited .vb-no { color: #166534; font-weight: 700; } /* TGĐ 14/08 (Req V) — mỗi dấu sửa (đỏ/xanh) trong văn bản bấm được để hoàn tác RIÊNG điểm đó, y như màn rà soát hợp đồng. Con trỏ hình bàn tay + viền khi rê chuột. Thẻ .hd-mkpop dùng chung với màn HĐ. */ .vb-p del, .vb-p ins { cursor: pointer; border-radius: 2px; } .vb-p del:hover { outline: 2px solid #eba8a8; } .vb-p ins:hover { outline: 2px solid #a8d3b4; } .vb-p.vb-txt-mk[contenteditable] del { cursor: pointer; user-select: none; -webkit-user-select: none; padding: 0 1px; } .vb-p.vb-txt-mk[contenteditable] ins { cursor: pointer; padding: 0 1px; } .hd-mkpop { position: fixed; z-index: 99999; background: #fff; border: 1px solid #d8e0ea; border-radius: 10px; box-shadow: 0 12px 30px -8px rgba(15,42,74,.45); padding: 9px 11px; max-width: 290px; font-size: 12.5px; } .hd-mkpop-h { font-weight: 700; color: #1F4E79; margin-bottom: 3px; } .hd-mkpop-t { line-height: 1.45; margin-bottom: 8px; max-height: 66px; overflow: auto; white-space: pre-wrap; } .hd-mkpop-btn { border: 1px solid #f0c9c9; background: #fff5f5; color: #b91c1c; border-radius: 7px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; } .hd-mkpop-btn:hover { background: #fde8e8; border-color: #b91c1c; } .vb-goc { grid-column: 2; font-size: 12px; color: #6b7785; background: #f7f8fa; border-left: 3px solid #cbd5e1; padding: 5px 8px; border-radius: 0 4px 4px 0; } .vb-goc-full { background: #f7f8fa; padding: 8px 10px; border-radius: 4px; color: #445; } .vb-yk { margin-top: 8px; border-left: 3px solid var(--brand); padding: 6px 10px; background: #fbfcfd; } .vb-yk-h { font-weight: 600; font-size: 13px; margin-bottom: 3px; } .vb-yk-b { line-height: 1.55; white-space: pre-wrap; } .vb-kpick { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; } .vb-kpick .vb_pic { width: 100%; font-size: 13px; } .vb-kpick .vb_pic:disabled { background: #f3f4f6; color: #9aa7b4; } /* ============ v3.19 — Ý KIẾN & CÂU HỎI (js/ui-hopdong.js, js/ui-vanban.js) ============ TGĐ 12/08: "đôi khi không có sửa chữa nhưng nhân sự vẫn có thể comment để hỏi câu hỏi làm rõ". Nên ô ý kiến mở cho MỌI khoản/đoạn, không đợi có chữ sửa. Hai loại phải phân biệt được bằng mắt: · có sửa chữ + ý kiến → ý kiến là LÝ DO sửa (viền xám, đọc lướt được) · không sửa chữ, chỉ ý kiến → là CÂU HỎI gửi nhà thầu (viền cam, nổi lên) Dùng biến --brand chứ không gán #1F4E79: app có hai theme, màu cứng sẽ chỏi ở theme còn lại. */ .yk-lb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5a6b7b; margin: 5px 0 3px; } .yk-lb b { font-weight: 700; color: #475569; } .yk-ta { width: 100%; box-sizing: border-box; font-size: 12.5px; line-height: 1.5; font-family: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; resize: vertical; } .yk-ta:focus { border-color: var(--brand); background: #fff; outline: none; } .yk-ro { margin-top: 5px; border-left: 3px solid #94a3b8; background: #f7f8fa; border-radius: 0 6px 6px 0; padding: 4px 9px; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; } .yk-ro b { color: #475569; font-weight: 700; } .yk-ro.yk-hoi { border-left-color: #b45309; background: #FFF7E6; } .yk-ro.yk-hoi b { color: #b45309; } .yk-tick { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #5a6b7b; cursor: pointer; user-select: none; margin-left: auto; } /* Nút mở ô ý kiến đặt NGAY tại khoản trong văn bản. Ẩn mờ tới khi rê chuột — có 38 điều trên màn, hiện thường trực 38 cái nút là đúng thứ "rối" mà TGĐ vừa phàn nàn. Khoản đã có ý kiến thì hiện luôn. */ .yk-mo { border: none; background: none; color: #94a3b8; cursor: pointer; font-size: 12px; padding: 0 4px; opacity: 0; transition: opacity .12s; } .hd-khoan:hover .yk-mo, .vb-blk:hover .yk-mo, .yk-mo.co { opacity: 1; } .yk-mo.co { color: #b45309; } .yk-mo:hover { color: var(--brand); } /* Nháy vàng khi nhảy tới một đoạn từ danh sách "Cần làm rõ". Bản gốc nằm trong