/* ===================================================================== PHR Sale Connector — kit.css v2 (COMPONENT KIT) HTML/CSS thuần, không framework, không bước build. Tên class GIỮ ĐÚNG như PHR_BI để copy component qua lại được giữa hai hệ. Ba nhóm chỉ SC mới có (BI không cần): .list grouped-inset · .sheet · .sk skeleton. Luật: file này KHÔNG chứa bố cục vỏ (headpage/sidebar/tabbar) — cái đó ở static/d/shell.css và static/m/shell.css. Không gõ hex, không gõ px cho chiều cao control/hàng/chữ: dùng token ở tokens.css. Catalog sống: /d/design-system.html ===================================================================== */ *{box-sizing:border-box} html,body{margin:0;height:100%} body{ background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--fs-body); line-height:1.45; -webkit-font-smoothing:antialiased; letter-spacing:-.005em; transition:background var(--mo-fast),color var(--mo-fast); } h1{font-size:var(--fs-title);font-weight:700;margin:0;letter-spacing:-.02em} h2{font-size:var(--fs-h2);font-weight:650;margin:0} p{margin:0} a{color:var(--accent-text);text-decoration:none} /* Focus THẤY ĐƯỢC ở mọi chặng — thay ring accent-weak của PHR_BI (gần như vô hình trên nền trắng, không đạt WCAG 2.2 Focus Appearance). */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--accent-text); outline-offset:2px; border-radius:var(--radius-ctl); } .num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1} .muted{color:var(--muted)} .faint{color:var(--faint)} .u{color:var(--faint);font-weight:500;font-size:.8em;margin-left:2px} /* đơn vị sau số */ /* ---------- Icon (nguồn: /shared/icons.js) ---------- */ .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:-3px} .ic.lg{width:18px;height:18px} .ic.xl{width:24px;height:24px} /* ===================================================================== ① NÚT ===================================================================== */ .btn{ height:var(--ctl-h); min-height:var(--tap-min); padding:0 14px; border:none; border-radius:var(--radius-ctl); background:var(--accent); color:var(--accent-ink); font-family:var(--font); font-size:var(--fs-sm); font-weight:650; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; transition:background var(--mo-fast),border-color var(--mo-fast),color var(--mo-fast); } /* Hover TỐI lại, không sáng lên — sáng lên đọc ra thành "đang bị vô hiệu". */ /* Giữ --accent-ink khi hover: chữ TRẮNG trên teal đậm chỉ đạt 3.92:1, dưới AA */ .btn:hover{background:var(--accent-hover);color:var(--accent-ink)} .btn:active{transform:translateY(.5px)} .btn.secondary{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)} .btn.secondary:hover{background:var(--panel);border-color:var(--accent-text);color:var(--accent-text)} .btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)} .btn.ghost:hover{color:var(--accent-text);border-color:var(--accent-text);background:transparent} .btn.subtle{background:transparent;color:var(--accent-text);font-weight:600} .btn.subtle:hover{background:var(--accent-weak);color:var(--accent-text)} .btn.danger{background:var(--bad);color:var(--bad-ink)} .btn.danger:hover{background:var(--bad-vivid);color:var(--bad-ink)} .btn.sm{height:var(--ctl-h-sm);min-height:0;padding:0 10px;font-size:var(--fs-xs);gap:5px} .btn.lg{height:var(--ctl-h-lg);padding:0 18px;font-size:var(--fs-body);gap:8px} .btn.icon{width:var(--ctl-h);padding:0} .btn.icon.sm{width:var(--ctl-h-sm)} .btn.icon.lg{width:var(--ctl-h-lg)} .btn.block{width:100%} .btn.pill{border-radius:var(--radius-pill)} /* .on = đang chọn (nút preset lọc) */ .btn.ghost.on,.btn.secondary.on,.btn.pill.on{ background:var(--accent-weak);color:var(--accent-text);border-color:var(--accent-text);font-weight:650} .btn:disabled,.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none} .btn.loading{position:relative;color:transparent!important;pointer-events:none} .btn.loading::before{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px; border:2px solid var(--accent-ink);border-top-color:transparent;border-radius:50%; animation:sc-spin .6s linear infinite} .btn.ghost.loading::before,.btn.subtle.loading::before,.btn.secondary.loading::before{ border-color:var(--accent-text);border-top-color:transparent} @keyframes sc-spin{to{transform:rotate(360deg)}} .btn-group{display:inline-flex} .btn-group>.btn{border-radius:0;margin-left:-1px} .btn-group>.btn:first-child{border-radius:var(--radius-ctl) 0 0 var(--radius-ctl);margin-left:0} .btn-group>.btn:last-child{border-radius:0 var(--radius-ctl) var(--radius-ctl) 0} /* Nút chỉ có chữ (dùng trong header của panel/sheet) */ .linkbtn{border:none;background:transparent;color:var(--muted);cursor:pointer; font-family:var(--font);font-size:var(--fs-sm);font-weight:600; min-height:var(--tap-min);padding:0 8px;border-radius:var(--radius-ctl); display:inline-flex;align-items:center;gap:6px} .linkbtn:hover{color:var(--accent-text);background:var(--panel-2)} /* ===================================================================== ② TRƯỜNG NHẬP ===================================================================== */ .input{ height:var(--ctl-h); min-height:var(--tap-min); width:100%; border:1px solid var(--line); border-radius:var(--radius-ctl); background:var(--panel); color:var(--ink); padding:0 10px; font-family:var(--font); font-size:var(--fs-body); transition:border-color var(--mo-fast); } .input::placeholder{color:var(--faint)} .input:focus{outline:2px solid var(--accent-text);outline-offset:0;border-color:var(--accent-text)} .input:disabled{background:var(--panel-2);color:var(--muted);cursor:not-allowed} .input.inv{border-color:var(--bad);outline:2px solid var(--bad);outline-offset:0} .input.num{text-align:right;font-variant-numeric:tabular-nums} .input.sm{height:var(--ctl-h-sm);min-height:0;font-size:var(--fs-sm)} .input.lg{height:var(--ctl-h-lg)} textarea.input{height:auto;min-height:0;padding:10px;line-height:1.45;resize:vertical} .field{margin-bottom:var(--sp-3)} .field label,label.lbl{display:block;font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--sp-1);font-weight:500} .field .hint{color:var(--faint);font-size:var(--fs-xs);margin-top:var(--sp-1)} .field .req{color:var(--bad);margin-left:2px} .field .ferr{color:var(--bad);font-size:var(--fs-xs);margin-top:var(--sp-1);font-weight:600} .field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3)} /* Select — mũi tên SVG custom, theme-aware */ .select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; height:var(--ctl-h);min-height:var(--tap-min); border:1px solid var(--line);border-radius:var(--radius-ctl); background-color:var(--panel);color:var(--ink); padding:0 30px 0 10px;font-family:var(--font);font-size:var(--fs-sm);cursor:pointer; background-repeat:no-repeat;background-position:right 9px center;background-size:15px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); transition:border-color var(--mo-fast),background-color var(--mo-fast); } .select:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background-color:var(--panel-2)} .select:focus{outline:2px solid var(--accent-text);outline-offset:0;border-color:var(--accent-text);background-color:var(--panel)} .select:disabled{background-color:var(--panel-2);color:var(--muted);cursor:not-allowed;opacity:.7} .select optgroup{font-weight:700;color:var(--muted)} :root[data-theme="dark"] .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA6B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} /* Ô tìm kiếm có icon */ .searchbox{display:flex;align-items:center;gap:8px;height:var(--ctl-h);min-height:var(--tap-min); padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-ctl); background:var(--panel);color:var(--muted)} .searchbox:focus-within{outline:2px solid var(--accent-text);outline-offset:0;border-color:var(--accent-text)} .searchbox input{border:none;background:transparent;color:var(--ink);font:inherit; font-size:var(--fs-body);outline:none;min-width:0;flex:1} .searchbox input::placeholder{color:var(--faint)} /* Prefix/suffix dán liền ô (đơn vị, %, m2) */ .input-group{display:inline-flex;align-items:center;width:100%;border:1px solid var(--line); border-radius:var(--radius-ctl);background:var(--panel);overflow:hidden} .input-group:focus-within{outline:2px solid var(--accent-text);outline-offset:0;border-color:var(--accent-text)} .input-group .addon{padding:0 9px;color:var(--faint);font-size:var(--fs-sm);white-space:nowrap; display:inline-flex;align-items:center;background:var(--panel-2);align-self:stretch} .input-group>input{flex:1;height:var(--ctl-h);border:none;background:transparent;color:var(--ink); padding:0 10px;font:inherit;font-size:var(--fs-body);min-width:0;outline:none} .check,.radio{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer; min-height:var(--tap-min);font-size:var(--fs-body);color:var(--ink)} .check input,.radio input{accent-color:var(--accent-text);width:18px;height:18px;cursor:pointer;flex:none} .check.disabled,.radio.disabled{opacity:.5;cursor:not-allowed} .switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;min-height:var(--tap-min); font-size:var(--fs-body);color:var(--ink)} .switch input{position:absolute;opacity:0;width:0;height:0} .switch .track{width:36px;height:21px;border-radius:var(--radius-pill);background:var(--line); position:relative;transition:background var(--mo-fast);flex:none} .switch .track::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px; border-radius:50%;background:var(--knob);box-shadow:var(--e1);transition:transform var(--mo-fast) var(--ease-std)} .switch input:checked+.track{background:var(--accent)} .switch input:checked+.track::after{transform:translateX(15px)} .switch input:focus-visible+.track{outline:2px solid var(--accent-text);outline-offset:2px} /* ===================================================================== ③ CỤM THÔNG TIN ===================================================================== */ /* Thẻ: dùng VIỀN HOẶC BÓNG, không dùng cả hai (nguyên tắc "ít mực hơn"). */ .card{background:var(--panel);border-radius:var(--radius-card); box-shadow:var(--e1);padding:var(--card-pad)} .card.flush{padding:0} .panel{background:var(--panel);border-radius:var(--radius-card);box-shadow:var(--e1);overflow:hidden} .panel>.ph{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px var(--card-pad);border-bottom:1px solid var(--line)} .panel>.ph .ph-sub{color:var(--muted);font-size:var(--fs-xs);margin-top:1px} .panel>.pb{padding:var(--card-pad)} .panel>.pb.flush{padding:0} .panel>.pf{padding:11px var(--card-pad);border-top:1px solid var(--line); display:flex;justify-content:flex-end;gap:var(--sp-2);align-items:center} /* Thẻ số (stat tile) — KHÔNG phải biểu đồ. Thứ bậc: số > nhãn > phụ. */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-3)} .kpi{background:var(--panel);border-radius:var(--radius-card);box-shadow:var(--e1);padding:13px var(--card-pad)} .kpi.hero{border-left:3px solid var(--accent)} .kpi .lbl{font-size:var(--fs-xs);color:var(--muted);font-weight:500; display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)} .kpi .val{font-size:var(--fs-kpi);font-weight:700;margin:5px 0 2px;letter-spacing:-.02em; font-variant-numeric:tabular-nums;line-height:1.15} .kpi .bar{height:5px;background:var(--panel-2);border-radius:3px;overflow:hidden;margin:var(--sp-2) 0 6px} .kpi .bar>i{display:block;height:100%;background:var(--teal-5);border-radius:3px} .kpi .delta{font-size:var(--fs-xs);color:var(--muted)} .kpi .delta .up{color:var(--good);font-weight:650} .kpi .delta .down{color:var(--bad);font-weight:650} .kpi.sm{padding:10px 12px} .kpi.sm .val{font-size:calc(var(--fs-kpi) * .8);margin:3px 0 1px} /* Callout ngữ cảnh */ .note{display:flex;gap:10px;padding:11px 13px;border-radius:var(--radius-card); border:1px solid var(--line);background:var(--panel-2);font-size:var(--fs-sm);color:var(--ink)} .note .ic{margin-top:1px;color:var(--muted)} .note b{font-weight:650} .note .sub{color:var(--muted);margin-top:2px} .note.info{background:var(--accent-weak);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))} .note.info .ic{color:var(--accent-text)} .note.good{background:var(--good-bg);border-color:color-mix(in srgb,var(--good) 30%,var(--line));color:var(--good)} .note.good .ic{color:var(--good)} .note.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 30%,var(--line));color:var(--warn)} .note.warn .ic{color:var(--warn)} .note.bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 30%,var(--line));color:var(--bad)} .note.bad .ic{color:var(--bad)} /* Cụm nhãn <-> giá trị */ .metrics{display:flex;flex-direction:column} .metric{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3); padding:var(--sp-2) 0;border-bottom:1px solid var(--line)} .metric:last-child{border-bottom:none} .metric .k{color:var(--muted);font-size:var(--fs-sm)} .metric .v{font-weight:600;font-variant-numeric:tabular-nums;text-align:right} /* Trạng thái RỖNG — 1 câu vì sao rỗng + 1 nút việc kế tiếp (11_DESIGN_SYSTEM mục 10) */ .empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center; padding:var(--sp-6) var(--sp-5);color:var(--muted)} .empty .em-ic .ic{width:40px;height:40px;stroke-width:1.5;color:var(--faint)} .empty b{font-size:var(--fs-body);color:var(--ink);font-weight:650} .empty .sub{font-size:var(--fs-sm);max-width:340px} /* ===================================================================== ④ DANH SÁCH GROUPED-INSET (kiểu iOS) — SC mới có, BI không dùng Thẻ bo góc chứa các dòng; hairline CHỪA lề trái => mắt đọc theo cột chữ, không bị đường kẻ cắt ngang toàn bộ. ===================================================================== */ .list{background:var(--panel);border-radius:var(--radius-card);box-shadow:var(--e1);overflow:hidden} .list-h{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em; color:var(--faint);font-weight:700;margin:var(--sp-4) var(--sp-1) var(--sp-2); display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)} .list-item{ display:flex;align-items:center;gap:var(--sp-3);width:100%; min-height:var(--row-h);padding:10px var(--card-pad); background:transparent;border:none;color:var(--ink); font-family:var(--font);font-size:var(--fs-body);text-align:left; cursor:pointer;position:relative; } .list-item+.list-item::before{content:"";position:absolute;top:0;left:var(--card-pad);right:0; height:1px;background:var(--line)} .list-item:hover{background:var(--panel-2)} .list-item:active{background:var(--accent-weak)} .list-item.tinh{cursor:default} .list-item.tinh:hover,.list-item.tinh:active{background:transparent} .list-item .li-tx{flex:1;min-width:0} .list-item .li-tx b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .list-item .li-tx .sub{display:block;color:var(--muted);font-size:var(--fs-sm); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px} .list-item .li-go{color:var(--faint);flex:none;display:inline-flex} .list-item .li-av{width:34px;height:34px;border-radius:var(--radius-ctl);flex:none; display:grid;place-items:center;background:var(--accent-weak);color:var(--accent-text)} /* ===================================================================== ⑤ BẢNG ===================================================================== */ .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} .table th{text-align:left;color:var(--muted);font-weight:600;font-size:var(--fs-xs); text-transform:uppercase;letter-spacing:.02em;padding:var(--sp-2) 11px; border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);white-space:nowrap} .table td{padding:var(--tbl-py) 11px;border-bottom:1px solid var(--line)} .table tbody tr:hover{background:var(--panel-2)} .table td.r,.table th.r{text-align:right;font-variant-numeric:tabular-nums} .table tr.co-the-mo{cursor:pointer} /* Dãy nút lọc theo sale (màn Sản lượng của ASM): "Tất cả" + tối đa 4 mã nhân viên, PHẢI vừa một hàng trên màn 375px. Đo thực tế: mỗi ASM quản 1–4 sale. Chia đều chiều ngang thay vì để chữ quyết định bề rộng — mã dài ngắn khác nhau (VIETHV vs QUYNHLD) mà nút so le thì nhìn như hỏng. */ .seg.nut-sale{display:flex;width:100%;margin-top:var(--sp-2)} .seg.nut-sale button{flex:1 1 0;min-width:0;padding-inline:6px; font-size:var(--fs-xs);letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Hàng tiêu đề NHÓM CHA trong bảng sản lượng (Trần · 1 Lớp · 3 Lớp · Xốp ngói…). Không phải : nó nằm giữa thân bảng, và không được dính khi cuộn. */ .table tr.nhom-cha td{background:var(--panel-2);color:var(--muted); font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.02em; padding-top:var(--sp-2);padding-bottom:var(--sp-2)} .table tr.nhom-cha:hover td{background:var(--panel-2)} /* Icon mặt hàng đứng cạnh tên, không đẩy chữ xuống dòng */ .table td .ic{vertical-align:-3px;margin-right:6px;color:var(--muted)} /* Dòng TỔNG CỘNG cuối bảng. Viền trên đậm để mắt biết đây là dòng cộng chứ không phải một mặt hàng nữa; không bôi nền để khỏi lẫn với hàng nhóm cha. */ .table tr.tong td{border-top:2px solid var(--line);border-bottom:none; padding-top:var(--sp-2);padding-bottom:var(--sp-2)} .table tr.tong:hover td{background:transparent} .table tr.tong .muted{font-weight:400;font-size:var(--fs-xs)} /* Biến thể "thoáng" — dòng cao hơn cho bảng nhiều số liệu (sản lượng theo mặt hàng / hãng) mà người dùng cần rà mắt xuống. Dùng khi cột chỉ có 2–3 giá trị, chỗ rộng nhưng dòng chật; không dùng cho bảng dài nhiều cột. */ .table.thoang td{padding:12px 11px} .table.thoang tr.tong td{padding-top:11px;padding-bottom:11px} .table.thoang tr.nhom-cha td{padding-top:9px;padding-bottom:9px} /* Chân bảng — nút Gộp/Tách (hoặc thao tác nhẹ khác) đặt DƯỚI bảng thay vì trong list-h. Vì sao đặt dưới: mắt đọc bảng từ trên xuống, gặp con số rồi mới muốn đổi cách chia — nút ở trên là buộc quyết định trước khi biết mình muốn thấy gì. */ .tbl-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2); padding:var(--sp-2) var(--card-pad);border-top:1px solid var(--line); background:var(--panel);color:var(--muted);font-size:var(--fs-xs)} .tbl-foot .lbl{margin-right:auto;font-weight:500} /* ===================================================================== KHỐI THU GỌN (details/summary) — danh sách dài không chiếm màn khi chưa cần ===================================================================== */ .thu-gon{border:1px solid var(--line);border-radius:var(--radius-card); background:var(--panel);overflow:hidden} .thu-gon>summary{display:flex;align-items:center;justify-content:space-between; gap:var(--sp-2);padding:var(--sp-3);cursor:pointer;list-style:none; font-weight:600;font-size:var(--fs-sm);min-height:var(--tap-min)} .thu-gon>summary::-webkit-details-marker{display:none} .thu-gon>summary .dem{color:var(--muted);font-weight:400;font-size:var(--fs-xs)} /* Mũi tên tự xoay khi mở — dấu hiệu duy nhất cho biết còn nội dung bên dưới */ .thu-gon>summary .mui-ten{transition:transform var(--mo-fast) var(--ease-std); color:var(--muted);flex:0 0 auto} .thu-gon[open]>summary .mui-ten{transform:rotate(90deg)} .thu-gon[open]>summary{border-bottom:1px solid var(--line)} .thu-gon>summary:hover{background:var(--panel-2)} /* ===================================================================== ⑥ NHÃN · ĐÈN · CHIP ===================================================================== */ .tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:600; padding:2px 8px;border-radius:var(--radius-pill);background:var(--panel-2);color:var(--muted)} .tag.accent{background:var(--accent-weak);color:var(--accent-text)} .tag.good{background:var(--good-bg);color:var(--good)} .tag.warn{background:var(--warn-bg);color:var(--warn)} .tag.bad{background:var(--bad-bg);color:var(--bad)} .tag.solid{background:var(--accent);color:var(--accent-ink)} /* Đèn trạng thái: LUÔN màu + chấm + CHỮ. Chấm dùng bản -vivid (đồ họa chỉ cần 3:1). */ .status{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:650; padding:2px 8px;border-radius:var(--radius-pill)} .status .d{width:7px;height:7px;border-radius:50%;flex:none} /* Chip Δ% chung cho /m/ và /d/ — 6 bậc màu (CEO 11/08 khuya). Text nhỏ, nền nhạt, bo tròn pill. Màu inline theo _deltaBac (tokens design system). */ .delta-chip{display:inline-block;padding:1px 8px;border-radius:var(--radius-pill); font-size:.82em;font-weight:600;line-height:1.4;white-space:nowrap; letter-spacing:.01em} /* Bảng 12T chi tiết KH · CEO 11/08 tối/khuya — cột Doanh thu thành thanh ngang có SỐ đè bên trong (visual scale). Bar width % theo tháng cao nhất trong 12T. Dùng chung /m (chi tiết KH) + /d (hồ sơ 360 slide-over). */ .bang-12t .dt-cell{padding:6px 8px;min-width:130px} .dt-bar{position:relative;height:22px;background:var(--panel-2); border-radius:var(--radius-pill);overflow:hidden} .dt-bar > span{position:absolute;left:0;top:0;bottom:0; background:linear-gradient(90deg, var(--accent-weak), var(--accent)); opacity:.85} .dt-bar-txt{position:relative;line-height:22px;padding:0 10px; font-size:var(--fs-xs);font-weight:700;color:var(--ink);z-index:1; mix-blend-mode:normal;white-space:nowrap} /* Row tháng trong bảng 12T — clickable → mở đơn tháng đó của KH. Hover pseudo subtle để user biết row là interactive. Icon chevR nhỏ đứng sau chuỗi tháng. */ .bang-12t-row{cursor:pointer} .bang-12t-row:hover{background:var(--panel-2)} .bang-12t-row:active{background:var(--panel-2)} .bang-12t-thang{display:inline-flex;align-items:center;gap:2px;font-weight:600} .bang-12t-thang .ic{width:14px;height:14px;color:var(--faint);flex:none} /* Cột "% PosK" — số kèm thanh nền cuộn theo width (tỷ trọng PosK trên tổng m²). CEO 12/08: đưa cơ cấu PosK vào bảng 12T để không phải mở tab khác so sánh. Thanh gradient teal đằng sau (::before, z-index 0) — số text ở trên như bình thường. Không cần đặt z-index cho text vì positioned-parent tự tạo stacking. */ .posk-pct{display:inline-block;position:relative;min-width:44px;padding:2px 8px; border-radius:var(--radius-pill);background:var(--panel-2); color:var(--ink);font-weight:650;font-size:.9em;text-align:center;overflow:hidden} .posk-pct::before{content:"";position:absolute;left:0;top:0;bottom:0; width:var(--w,0%);background:linear-gradient(90deg,var(--accent-weak),var(--accent)); opacity:.35;z-index:0} /* TH sort — click để đổi hướng. Icon ↕ (chưa sort) / ▲ / ▼ (đang sort). CEO 12/08: bảng đại lý cho sort mọi cột. Server sort các cột nền (whitelist `_SORT_DAI_LY` backend); client sort cột YTD/số kỳ chỉ trong page hiện tại. */ .table th.th-sort{cursor:pointer;user-select:none;position:relative;white-space:nowrap} .table th.th-sort:hover{background:var(--panel-2)} .sort-ic{opacity:.4;font-size:.85em;margin-left:2px;display:inline-block} .sort-ic.on{opacity:1;color:var(--accent)} /* Header tab 360 (CEO 12/08 chiều — re-layout 2 tầng info) Row 1 (định danh) = tên + mã + hạng + quy mô (chip) Row 2 (thuộc tính) = KV, sale, lần mua, địa chỉ — muted */ .dl360-hd-chip{display:inline-flex;align-items:center;gap:4px; padding:2px 8px;border-radius:var(--radius-pill); background:var(--panel-2);color:var(--muted);font-size:var(--fs-sm)} .dl360-hd-meta{gap:14px;flex-wrap:wrap;margin-top:8px; color:var(--muted);font-size:var(--fs-sm)} .dl360-hd-meta > span{display:inline-flex;align-items:center;gap:4px} /* KPI-row 6 ô — 1 hàng cố định (CEO chốt 12/08 chiều). Grid minmax để ô co dãn không xuống dòng. <1300px hạ xuống 3 cột (2 dòng) — giữ đọc được. */ .dl360-kpi-6{display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:8px} .dl360-kpi-6 .kpi{padding:10px 12px} .dl360-kpi-6 .kpi .val{font-size:var(--fs-h3)} .dl360-kpi-6 .kpi .lbl{font-size:var(--fs-xs);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .dl360-kpi-6 .kpi .delta{font-size:var(--fs-xs);white-space:normal;line-height:1.35} @media (max-width: 1300px){ .dl360-kpi-6{grid-template-columns:repeat(3, minmax(0, 1fr))} } /* Tab 360 full-page — timeline check-in + lưới đơn 6T + KH key card (CEO 12/08). Dùng chung /d chi tiết 360. */ .tl-day{border-left:2px solid var(--border);margin-left:6px;padding:0 0 12px 14px;position:relative} .tl-day::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px; border-radius:50%;background:var(--accent);border:2px solid var(--panel)} .tl-day-hd{margin-bottom:4px} .tl-item{background:var(--panel-2);border-radius:6px;padding:8px 10px;margin-top:6px; font-size:var(--fs-sm)} .tl-item .tag{vertical-align:middle} /* Lưới đơn 3T × 31 ngày — mật độ cao, cell nhỏ; heatmap teal nhạt theo m² */ .luoi-3t{font-size:var(--fs-xs)} .luoi-3t th{font-weight:600;text-align:center;padding:4px 6px} .luoi-3t td{text-align:center;padding:2px 4px;line-height:1.15;min-width:56px} .luoi-3t td.faint{color:var(--faint)} .luoi-3t-cell{cursor:default} .luoi-3t-cell b{display:block;font-size:.95em} .luoi-3t-cell .sub{font-size:.72em;color:var(--muted);display:block;margin-top:1px} /* Lưới đơn 6T × 31 ngày (CEO 12/08 chiều — mở rộng từ 3T). Cell INLINE "N đơn · M m²" thay stacked cũ — dễ nhìn hơn khi mắt đọc từ trái sang phải. */ .luoi-6t{font-size:var(--fs-xs)} .luoi-6t th{font-weight:600;text-align:center;padding:4px 6px;white-space:nowrap} .luoi-6t td{text-align:center;padding:3px 6px;line-height:1.25; min-width:110px;white-space:nowrap} .luoi-6t-cell{cursor:default} .luoi-6t-cell b{font-weight:700} .luoi-6t-cell .sub{color:var(--muted);font-size:.9em} /* Ngày ĐÃ QUA nhưng không có đơn — highlight amber nhạt để soi khoảng trống nhịp mua (CEO 12/08 tối). Không dùng đỏ vì "không đơn" chưa phải bad. */ .luoi-6t-empty{color:var(--warn-vivid); background:rgba(192,133,18,0.09); min-width:auto;font-weight:600;opacity:0.7} /* Ngày tương lai (chỉ tháng đang chạy): faint xám, KHÔNG highlight — chưa xảy ra. */ .luoi-6t-tuonglai{color:var(--faint);min-width:auto} /* Bảng xu hướng tháng × năm (CEO 12/08 chiều — thay bảng 24T cũ). Group 3 cột theo mỗi năm — thêm border trái đậm cho cột đầu mỗi năm để mắt phân biệt nhóm. Header 2 tầng: năm trên (colspan 3) + tên chỉ tiêu dưới. */ .xh-bang{font-size:var(--fs-sm)} .xh-bang th, .xh-bang td{padding:5px 8px} .xh-bang .xh-nam-head{text-align:center;background:var(--panel-2); font-weight:700;border-bottom:2px solid var(--border)} .xh-bang .xh-nam-first{border-left:2px solid var(--border)} .xh-bang tfoot .xh-tong{background:var(--panel-2);font-weight:600} .xh-bang tfoot .xh-tong th{background:var(--panel-2)} /* Ô Năm filter multi-select nhỏ gọn */ .xh-nam-loc .chk.sm{padding:2px 6px;font-size:var(--fs-xs)} .seg.sm button{padding:4px 10px;font-size:var(--fs-xs)} /* Card KH key ở §3 — grid 3 chỉ tiêu */ .kh-key-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px} .kk-card{padding:10px 12px;background:var(--panel)} .kk-card .lbl{font-size:var(--fs-xs);color:var(--muted)} .kk-card .delta{font-size:var(--fs-xs);color:var(--muted)} .status.good{background:var(--good-bg);color:var(--good)} .status.good .d{background:var(--good-vivid)} .status.warn{background:var(--warn-bg);color:var(--warn)} .status.warn .d{background:var(--warn-vivid)} .status.bad{background:var(--bad-bg);color:var(--bad)} .status.bad .d{background:var(--bad-vivid)} .status.none{background:var(--panel-2);color:var(--none)} .status.none .d{background:var(--none-vivid)} .status.only-d{background:transparent;padding:0} .status.only-d .d{width:10px;height:10px} /* ===================================================================== Bộ MÀU trạng thái KH tuần (CEO 10/08) — 12 trạng thái, dùng chung /m + /d + dashboard giám sát. Không đổi phối màu ở call site; đổi ở đây. ===================================================================== */ .tt-kht{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:650; padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap;line-height:1.4; border:1px solid transparent} .tt-kht .d{width:7px;height:7px;border-radius:50%;flex:none} .tt-kht.sm{font-size:10px;padding:1px 6px} .tt-kht.sm .d{width:6px;height:6px} .tt-kht.lg{font-size:var(--fs-sm);padding:4px 10px} .tt-kht.lg .d{width:8px;height:8px} /* Chưa lập / Nháp / Thu hồi / Bỏ qua — chưa vào vòng, XÁM lạnh */ .tt-kht.chua_lap, .tt-kht.nhap, .tt-kht.thu_hoi, .tt-kht.bo_qua{ background:var(--panel-2);color:var(--muted)} .tt-kht.chua_lap .d, .tt-kht.nhap .d, .tt-kht.thu_hoi .d, .tt-kht.bo_qua .d{ background:var(--faint)} /* Chờ duyệt các cấp — VÀNG (chờ hành động của người khác) */ .tt-kht.cho_duyet_c1, .tt-kht.cho_duyet_c2, .tt-kht.cho_duyet_c3, .tt-kht.cho_duyet_ket_qua{background:var(--warn-bg);color:var(--warn)} .tt-kht.cho_duyet_c1 .d, .tt-kht.cho_duyet_c2 .d, .tt-kht.cho_duyet_c3 .d, .tt-kht.cho_duyet_ket_qua .d{background:var(--warn-vivid)} /* Đang chạy — XANH TEAL (accent, đang là bản sống) */ .tt-kht.duyet{background:var(--accent-weak);color:var(--accent-text)} .tt-kht.duyet .d{background:var(--accent)} /* Cần chốt KQ — CAM (giữa warn và bad, cần Sale hành động ngay) */ .tt-kht.cho_chot_ket_qua{background:color-mix(in srgb,var(--warn) 25%,var(--panel)); color:#8a3d00;border-color:color-mix(in srgb,var(--warn-vivid) 60%,transparent)} .tt-kht.cho_chot_ket_qua .d{background:#e07a00} /* Đã đóng — XANH tick, việc xong */ .tt-kht.dong{background:var(--good-bg);color:var(--good)} .tt-kht.dong .d{background:var(--good-vivid)} /* Trả về — ĐỎ nhẹ (cần sửa lại) */ .tt-kht.tra_ve{background:var(--bad-bg);color:var(--bad)} .tt-kht.tra_ve .d{background:var(--bad-vivid)} /* Từ chối — ĐỎ đậm hẳn */ .tt-kht.tu_choi{background:var(--bad);color:var(--bad-ink)} .tt-kht.tu_choi .d{background:var(--bad-ink)} /* Modifier ring cho ô heatmap: đến hạn (vàng) / quá hạn (đỏ) */ .tt-kht.den-han{box-shadow:0 0 0 2px var(--warn-vivid)} .tt-kht.qua-han{box-shadow:0 0 0 2px var(--bad-vivid)} /* ===================================================================== Dòng KH tuần trong modal chi tiết KH (CEO 13/08 · redesign) Trước: list-item phẳng "MA_KH · dự kiến: X · N chạm" — mắt không tách được đâu là kế hoạch, đâu là thực tế. Nay tách 2 khối rõ ràng: - Dự kiến (chip hành động + ghi chú mục tiêu) - Đã chạm (highlight teal nếu có, bấm mở phiếu chạm) ===================================================================== */ .kht-dong{border:1px solid var(--line);border-radius:var(--radius-panel); padding:10px 12px;margin-bottom:8px;background:var(--panel);transition:all var(--mo-fast)} .kht-dong.co-cham{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,var(--panel))} .kht-dong.co-the-mo{cursor:pointer} .kht-dong.co-the-mo:hover{border-color:var(--accent); box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 15%,transparent)} .kht-dong-hd{display:flex;justify-content:space-between;align-items:center; gap:8px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px dashed var(--line)} .kht-dong-ten{display:flex;align-items:center;gap:6px;flex:1;min-width:0} .kht-dong-ten b{font-size:var(--fs-sm)} .kht-dong-row{display:grid;grid-template-columns:80px 1fr;gap:8px; align-items:baseline;margin-top:4px;font-size:var(--fs-sm)} .kht-dong-row .kht-lbl{color:var(--muted);font-size:var(--fs-xs); text-transform:uppercase;letter-spacing:.06em;padding-top:2px} .kht-dong-row .kht-val{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .kht-dong-row.cham-highlight{padding:4px 6px;background:color-mix(in srgb,var(--accent) 8%,transparent); border-radius:6px;margin-left:-6px;margin-right:-6px} .kht-note{width:100%;margin-top:2px;padding:4px 8px; background:var(--panel-2);border-radius:4px;font-size:var(--fs-xs);color:var(--ink)} .kht-dong-kq{margin-top:8px;padding:6px 10px;background:var(--panel-2); border-left:3px solid var(--accent);border-radius:4px;font-size:var(--fs-sm)} /* ===================================================================== Bộ MÀU trạng thái PHIẾU KPI (v5 · 7 trạng thái · CEO 12/08) Trước 12/08 dùng `.status good/warn` trộn nhau: cho_duyet/gui/nhan cùng vàng, duyet/da_chot cùng xanh → mắt không phân biệt được "phiếu đang chờ ai làm gì". Nay mỗi trạng thái 1 màu riêng, khớp với chú thích. ===================================================================== */ .tt-kpi{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:650; padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap;line-height:1.4; border:1px solid transparent} .tt-kpi .d{width:7px;height:7px;border-radius:50%;flex:none} /* Nháp — XÁM lạnh (chưa vào vòng, không cần ai hành động) */ .tt-kpi.draft{background:var(--panel-2);color:var(--muted)} .tt-kpi.draft .d{background:var(--faint)} /* Chờ RSM duyệt — HỒNG MAGENTA (RSM cần duyệt · rất khác biệt với các trạng thái Sale bên dưới để mắt không nhầm "chờ ai") */ .tt-kpi.cho_duyet{background:#FDE7F3;color:#A6206D; border-color:color-mix(in srgb,#D91B7C 30%,transparent)} .tt-kpi.cho_duyet .d{background:#D91B7C} /* Đã duyệt (chờ gửi Sale) — TÍM (RSM cần bấm Gửi Sale) */ .tt-kpi.duyet{background:#EDE7F6;color:#5E35B1; border-color:color-mix(in srgb,#7E57C2 30%,transparent)} .tt-kpi.duyet .d{background:#7E57C2} /* Đã gửi Sale (chờ Sale nhận) — VÀNG WARN (dùng lại token warn của hệ, không tự chế màu cam mới. Sale cần mở app để nhận phiếu) */ .tt-kpi.gui{background:var(--warn-bg);color:var(--warn)} .tt-kpi.gui .d{background:var(--warn-vivid)} /* Sale đã nhận (chờ chốt) — XANH DƯƠNG info (đang chờ RSM chốt số) */ .tt-kpi.nhan{background:color-mix(in srgb,#0e7cd6 12%,var(--panel)); color:#0e5aa0;border-color:color-mix(in srgb,#0e7cd6 32%,transparent)} .tt-kpi.nhan .d{background:#0e7cd6} /* Đã chốt số — XANH LÁ (kết quả đã có, chờ đóng phiếu) */ .tt-kpi.da_chot{background:var(--good-bg);color:var(--good)} .tt-kpi.da_chot .d{background:var(--good-vivid)} /* Đã đóng — XANH TEAL đậm (khóa cứng · đọc thôi) */ .tt-kpi.dong{background:var(--accent-weak);color:var(--accent-text); border-color:color-mix(in srgb,var(--accent) 30%,transparent)} .tt-kpi.dong .d{background:var(--accent)} /* Deactive/Trả về — ĐỎ nhẹ (dùng chung với tt-kht.tra_ve cho slide-over) */ .tt-kpi.tra_ve{background:var(--bad-bg);color:var(--bad)} .tt-kpi.tra_ve .d{background:var(--bad-vivid)} /* Size modifier — dùng ở dot dày trong timeline hay label to trong header */ .tt-kpi.sm{font-size:10px;padding:1px 6px} .tt-kpi.sm .d{width:6px;height:6px} .tt-kpi.lg{font-size:var(--fs-sm);padding:4px 10px} .tt-kpi.lg .d{width:8px;height:8px} /* ===================================================================== Khối chú thích 7 trạng thái KPI (`khoiChuThichTrangThaiKpi`) Là 1
làm accordion. Đầu là summary có icon + tiêu đề, mở ra là bảng 4 cột với padding thoáng. Đóng lại chỉ chiếm 1 dòng. ===================================================================== */ .kpi-chu-thich{padding:0;overflow:hidden} .kpi-chu-thich>summary{cursor:pointer;list-style:none;user-select:none; display:flex;align-items:center;gap:8px;padding:12px var(--card-pad); color:var(--ink);font-size:var(--fs-sm)} .kpi-chu-thich>summary::-webkit-details-marker{display:none} .kpi-chu-thich>summary::before{content:"▸";color:var(--muted); font-size:.85em;transition:transform var(--mo-fast);display:inline-block} .kpi-chu-thich[open]>summary::before{transform:rotate(90deg)} .kpi-chu-thich>summary:hover{background:var(--panel-2)} .kpi-chu-thich>summary .ic{color:var(--accent-text);flex:none} .kpi-chu-thich .kct-noi{padding:0 var(--card-pad) var(--card-pad); border-top:1px solid var(--line)} .kpi-chu-thich .kct-tbl{margin-top:8px} .kpi-chu-thich .kct-tbl th{color:var(--muted);font-weight:600; font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.03em; padding:8px 10px} .kpi-chu-thich .kct-tbl td{padding:10px;vertical-align:middle; font-size:var(--fs-sm);line-height:1.45} .kpi-chu-thich .kct-tbl tbody tr+tr td{border-top:1px solid var(--line)} .kpi-chu-thich .kct-foot{margin-top:10px;padding:10px 12px; background:var(--panel-2);border-radius:var(--radius-ctl); font-size:var(--fs-xs);color:var(--muted);line-height:1.6} .kpi-chu-thich .kct-foot b{color:var(--ink);font-weight:650} /* Sub-header đếm phiếu KPI theo trạng thái — 1 dòng gọn, thoáng, không chen chúc với khối chú thích bên trên hay bảng bên dưới. Số tổng bên trái · chip đếm nằm gọn bên phải, tự xuống dòng khi hẹp. */ .kpi-sub-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:8px 14px;margin-bottom:12px;background:var(--panel); border-radius:var(--radius-card);box-shadow:var(--e1)} .kpi-sub-hd-so{color:var(--muted);font-size:var(--fs-sm);flex:none} .kpi-sub-hd-so b{color:var(--ink);font-size:var(--fs-md);font-weight:700} .kpi-sub-hd-chip{display:flex;flex-wrap:wrap;gap:6px 8px;flex:1;min-width:0} /* Heatmap KH tuần dashboard — V5. Table dày compact, sticky column 1 (tên Sale). Ô là button để bấm mở chi tiết; hover nhấn khác nhẹ. */ .hm-kht td, .hm-kht th{padding:6px 4px;vertical-align:middle} .hm-kht td.c, .hm-kht th.c{text-align:center} .hm-kht td .tt-kht{width:auto;min-width:60px;justify-content:center;transition:transform var(--mo-fast)} .hm-kht td .tt-kht[data-kh]:hover{transform:scale(1.05)} /* Timeline dọc — V3 chi tiết KH tuần. Dot ở cột trái + line nối, nội dung cột phải. */ .tl{display:flex;flex-direction:column;gap:0} .tl-item{display:flex;gap:var(--sp-3);padding:6px 0} .tl-cot{display:flex;flex-direction:column;align-items:center;flex:none;width:16px} .tl-dot{width:12px !important;height:12px !important;border-radius:50% !important;flex:none; margin-top:6px;padding:0 !important;gap:0;border:2px solid var(--panel); box-shadow:0 0 0 1px var(--line);font-size:0;line-height:0;overflow:hidden} .tl-dot .d{display:none} /* ẩn chấm bên trong khi dùng tt-kht làm dot thuần */ .tl-line{width:2px;flex:1;background:var(--line);margin-top:2px;min-height:16px} .tl-noi{flex:1;padding-bottom:10px;min-width:0} .tl-hd{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .tl-yk{margin-top:4px;padding:6px 10px;background:var(--panel-2);border-radius:var(--radius-ctl); font-size:var(--fs-sm);border-left:3px solid var(--accent-text)} .pill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--panel-2);color:var(--muted)} .chip{display:inline-flex;align-items:center;gap:5px;background:var(--accent-weak);color:var(--accent-text); border-radius:var(--radius-pill);padding:4px 9px;font-size:var(--fs-xs);font-weight:600} .chip .x{cursor:pointer;opacity:.7;display:flex} .chip .x:hover{opacity:1} /* ===================================================================== ⑦ LỌC · SEGMENTED ===================================================================== */ .filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)} .filterbar .chk{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm); font-weight:600;color:var(--muted);cursor:pointer;user-select:none;padding:6px 4px} .filterbar .chk input{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)} /* Bảng /d/#hoat_dong có click → thấy dòng con trỏ tay, hover nền teal nhạt. `text-select` trong ô Ghi nhận vẫn OK vì handler bỏ qua khi có selection. */ .hd-tbl tbody tr[data-vid]{cursor:pointer} .hd-tbl tbody tr[data-vid]:hover td{background:var(--accent-weak)} /* Cụm icon camera + số lượng ảnh trong bảng gan_day — inline gọn, số bám sát icon */ .hd-anh-nh{display:inline-flex;align-items:center;gap:2px;color:var(--muted); font-size:var(--fs-xs);font-weight:650;vertical-align:middle} .hd-anh-nh .ic{width:14px;height:14px} /* Dòng bảng vừa xuất hiện ở một lần TỰ CẬP NHẬT — nền teal nhạt loãng dần về trong. Báo "có cái mới" mà không giật màn. Tự tắt khi prefers-reduced-motion (tokens.css). */ @keyframes sc-ghi-moi{from{background:var(--accent-weak)}to{background:transparent}} .table tr.ghi-moi>td{animation:sc-ghi-moi 4s var(--ease-out)} .seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line); border-radius:var(--radius-ctl);padding:2px} .seg button{border:none;background:transparent;color:var(--muted); min-height:calc(var(--tap-min) - 6px);padding:0 11px;border-radius:calc(var(--radius-ctl) - 2px); cursor:pointer;font-family:var(--font);font-size:var(--fs-sm);font-weight:500; transition:background var(--mo-fast),color var(--mo-fast)} .seg button.on{background:var(--panel);color:var(--accent-text);box-shadow:var(--e1);font-weight:650} /* ===================================================================== ⑧ SKELETON — trạng thái ĐANG TẢI. Không dùng chữ "Đang tải…". ===================================================================== */ .sk{background:linear-gradient(90deg,var(--panel-2) 25%,var(--line) 37%,var(--panel-2) 63%); background-size:400% 100%;animation:sc-sk 1.3s ease infinite;border-radius:6px;display:block} @keyframes sc-sk{0%{background-position:100% 50%}100%{background-position:0 50%}} .sk-line{height:11px;margin:var(--sp-2) 0} .sk-line.w70{width:70%} .sk-line.w50{width:50%} .sk-line.w30{width:30%} .sk-block{height:64px;border-radius:var(--radius-card)} .sk-row{display:flex;align-items:center;gap:var(--sp-3);padding:12px var(--card-pad)} .sk-row .sk-av{width:34px;height:34px;border-radius:var(--radius-ctl);flex:none} .sk-row .sk-tx{flex:1} /* ===================================================================== ⑨ LỚP NỔI: modal · sheet · slide-over · toast ===================================================================== */ .modal-bg{position:fixed;inset:0;background:rgba(8,12,18,.5);display:none; z-index:var(--z-modal);align-items:center;justify-content:center;padding:20px} .modal-bg.mo{display:flex} .modal{width:min(560px,94vw);max-height:88vh;overflow:auto;background:var(--panel); border-radius:var(--radius-sheet);box-shadow:var(--e3);display:flex;flex-direction:column} .modal header{display:flex;justify-content:space-between;align-items:center; padding:14px var(--card-pad);border-bottom:1px solid var(--line);flex:none} .modal .body{padding:var(--card-pad);overflow:auto;flex:1} .modal footer{display:flex;justify-content:flex-end;gap:var(--sp-2); padding:12px var(--card-pad);border-top:1px solid var(--line);flex:none} /* Modal LỚN — dùng cho chi tiết KH tuần ASM duyệt (V2 · CEO 10/08) + modal chi tiết đợt KH key (V5 · 13/08). Nới từ 1200 → 1440 cho bảng nhập KH × 8 chỉ tiêu không phải trượt ngang trên monitor 1440px+. */ .modal.lon{width:min(1440px,96vw);max-width:96vw;max-height:92vh} .modal.lon .body{padding:var(--sp-4)} .modal-2cot{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-4)} @media (max-width:900px){.modal-2cot{grid-template-columns:1fr}} .modal-2cot .cot{min-width:0} /* cho phép truncate text trong grid child */ /* SHEET — tấm trượt từ đáy, hai nấc, có grabber, kéo xuống đóng. Nấc 1 = vừa đủ việc chính. Nấc 2 (.rong) = mở phần ghi thêm. */ .sheet-bg{position:fixed;inset:0;background:rgba(8,12,18,.45);z-index:var(--z-sheet); opacity:0;visibility:hidden;transition:opacity var(--mo-base),visibility var(--mo-base)} .sheet-bg.mo{opacity:1;visibility:visible} .sheet{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column; background:var(--bg);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow:var(--e3);max-height:72vh; transform:translateY(100%);transition:transform var(--mo-base) var(--ease-out)} .sheet.rong{max-height:94vh} .sheet-bg.mo .sheet{transform:none} .sheet.keo{transition:none} /* đang kéo tay: bám ngón, không easing */ .sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line); margin:var(--sp-2) auto var(--sp-1);flex:none} .sheet .sh-head{padding:var(--sp-1) var(--main-pad) var(--sp-2);flex:none; display:flex;align-items:flex-start;gap:var(--sp-3);touch-action:none;cursor:grab} .sheet .sh-head h2{font-size:var(--fs-h2);line-height:1.25} .sheet .sh-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:var(--sp-2) var(--main-pad) var(--sp-4)} .sheet .sh-foot{flex:none;padding:var(--sp-3) var(--main-pad); padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom)); border-top:1px solid var(--line);background:var(--bg)} /* ---------- Ô CHỌN TO — thao tác chính bên trong sheet ---------- >=80% thao tác là CHỌN, không gõ (00_BOI_CANH mục 9.2). Ô cao >=64px để chạm được bằng ngón cái khi đứng, một tay. Trạng thái chọn báo bằng aria-pressed nên trình đọc màn hình cũng biết, không chỉ mỗi màu. */ .luoi-hd{display:grid;grid-template-columns:1fr 1fr;gap:10px} .o-hd{min-height:64px;padding:12px 10px;border:1.5px solid var(--line); border-radius:var(--radius-card);background:var(--panel);color:var(--ink); font-family:var(--font);font-size:var(--fs-sm);font-weight:600;line-height:1.3; cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center; transition:border-color var(--mo-fast),background var(--mo-fast),color var(--mo-fast)} .o-hd[aria-pressed="true"]{border-color:var(--accent-text);background:var(--accent-weak);color:var(--accent-text)} /* Chọn một trong ba, rộng bằng nhau (vd "gặp được ai") */ .chip-hang{display:flex;gap:var(--sp-2)} .chip-hang button{flex:1;min-height:var(--tap-min);border:1.5px solid var(--line); border-radius:var(--radius-ctl);background:var(--panel);color:var(--ink); font-family:var(--font);font-size:var(--fs-sm);font-weight:600;cursor:pointer} .chip-hang button[aria-pressed="true"]{border-color:var(--accent-text); background:var(--accent-weak);color:var(--accent-text)} /* Biến thể "nhiều chip trong lưới" — dùng khi số chip > 3 (VD dm_hoat_dong ~10 mã, dm_ket_qua_ke_hoach 6 mã). Cho wrap và không stretch flex:1 để chip giữ chiều rộng tự nhiên theo nội dung. */ .chip-hang.wrap{flex-wrap:wrap} .chip-hang.wrap button{flex:0 0 auto;padding:0 12px} /* Nút chụp ảnh (label bọc input file ẩn) + ô xem trước ảnh đã nén */ .nut-anh{display:flex;align-items:center;justify-content:center;gap:var(--sp-2); min-height:var(--tap-min);height:var(--ctl-h);border:1px solid var(--line); border-radius:var(--radius-ctl);color:var(--muted);font-size:var(--fs-sm); font-weight:600;cursor:pointer;flex:1} .nut-anh:active{background:var(--panel-2)} .anh-xt{display:flex;align-items:center;gap:var(--sp-3)} .anh-xt img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-ctl);flex:none} /* Lưới nhiều ảnh cho sheet check-in — tối đa 6 ảnh, 3 cột. Một UI DUY NHẤT: ô ".anh-them" (kiểu label bọc input) nằm CHUNG lưới với các thumbnail. Không còn nút "Chụp ảnh" tách riêng ở trên như bản đầu — hai UI trùng chức năng làm sale rối. */ .anh-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)} .anh-o{position:relative;aspect-ratio:1;border-radius:var(--radius-ctl); overflow:hidden;background:var(--panel-2)} .anh-o img{width:100%;height:100%;object-fit:cover;display:block} .anh-x{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0; border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:none; display:grid;place-items:center;cursor:pointer;z-index:1} .anh-x .ic{width:14px;height:14px} .anh-x:active{background:rgba(0,0,0,.75)} /* Ô "+" thêm ảnh — nhỏ, cùng cỡ với thumbnail. Là